/** Shopify CDN: Minification failed

Line 566:0 Unexpected "}"

**/
/* Reverie Night. The shop in the language of the Reverie posters: night photography,
   a chrome wordmark, thin HUD frames and small tracked labels.
   One loud moment: the headlights igniting in the opening. Mobile first. */

:root {
  color-scheme: dark;
  --asphalt: #050507;    /* the photos' own black */
  --tarmac: #111216;     /* raised surfaces */
  --kerb: #24262b;
  --chrome: #a9aeb5;     /* secondary text, from the wordmark */
  --dim: #767c84;        /* small print */
  --headlight: #eef1f5;  /* primary text */
  --xenon: #b9d3ff;      /* the one accent: LED headlight blue-white */
  --brake: #ff9e8f;      /* errors */
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .18);
  --hud: rgb(238 241 245 / .55);

  --display: "Michroma", "Eurostile", "Microgramma", "Arial Black", sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: 20px;
  --max: 1280px;
  --inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  --section-space: clamp(72px, 10vw, 136px);
  --header-h: 64px;
  --radius: 8px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1000px) { :root { --gutter: 48px; --header-h: 76px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--asphalt); }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--asphalt);
  color: var(--headlight);
  font: 400 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { flex: 1; outline: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgb(185 211 255 / .32); }
:focus-visible { outline: 2px solid var(--xenon); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px; left: 8px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--headlight);
  color: var(--asphalt);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

/* ---------- Type ---------- */

.display-1 {
  font: 400 clamp(1.6rem, 1.05rem + 2.5vw, 3.1rem)/1.16 var(--display);
  letter-spacing: -.02em;
}
.display-2 {
  font: 400 clamp(1.35rem, 1rem + 1.6vw, 2.3rem)/1.2 var(--display);
  letter-spacing: -.015em;
}
.display-3 {
  font: 400 clamp(1.05rem, .9rem + .8vw, 1.5rem)/1.3 var(--display);
  letter-spacing: -.01em;
}
/* The small tracked labels from the Reverie posters */
.hud-label {
  font: 400 10.5px/1.75 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hud);
}
.note { font-size: 13px; line-height: 1.55; color: var(--dim); }

.text-link {
  display: inline-block;
  color: var(--headlight);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(185 211 255 / .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s;
}
.text-link:hover { color: var(--xenon); text-decoration-color: var(--xenon); }
.text-link--quiet { color: var(--chrome); font-weight: 400; font-size: 14px; text-decoration-color: var(--line-strong); }

.rte { color: var(--chrome); max-width: 40em; text-wrap: pretty; }
.rte > * + * { margin-top: 1em; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.8em; color: var(--headlight); font: 600 1.15rem/1.35 var(--text); }
.rte h2 { font-size: 1.3rem; }
.rte strong { color: var(--headlight); font-weight: 600; }
.rte a { color: var(--headlight); text-decoration-color: var(--xenon); text-underline-offset: 4px; }
.rte a:hover { color: var(--xenon); }
.rte ul, .rte ol { padding-left: 1.25em; }
.rte li + li { margin-top: .4em; }
.rte table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rte th, .rte td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- HUD frame: four corner brackets ---------- */

.hud-frame {
  --c: var(--hud);
  --s: 16px;
  --w: 1px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--s);
  background-repeat: no-repeat;
}

/* ---------- Wordmark ---------- */

.wordmark { width: 100%; height: auto; aspect-ratio: 1023 / 163; overflow: visible; }

/* ---------- Buttons and fields ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 15px/1.2 var(--text);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s, transform .1s;
}
.button:active { transform: scale(.985); }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.button--light { background: var(--headlight); color: #0a0b0d; }
.button--light:hover:not([disabled]) { background: #fff; box-shadow: 0 0 36px rgb(185 211 255 / .32); }
.button--ghost { background: rgb(5 5 7 / .35); border-color: var(--line-strong); color: var(--headlight); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) { .button--ghost:hover { border-color: var(--xenon); } }
.button--wide { width: 100%; }
.button.is-busy { opacity: .75; cursor: progress; }

.field { display: grid; gap: 8px; }
.field + .field { margin-top: 18px; }
.field-label { display: block; font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome); }
.input, .select {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(17 18 22 / .85);
  color: var(--headlight);
  font: 400 16px/1.4 var(--text); /* 16px keeps iOS from zooming in on focus */
  transition: border-color .2s, box-shadow .2s;
}
textarea.input { padding: 16px 18px; min-height: 160px; resize: vertical; }
.input::placeholder { color: #666c74; }
.input:hover, .select:hover { border-color: rgb(255 255 255 / .3); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--xenon);
  box-shadow: 0 0 0 4px rgb(185 211 255 / .14), 0 0 28px rgb(185 211 255 / .12);
}
.input[aria-invalid="true"] { border-color: var(--brake); }
.select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23a9aeb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
}

.form-status { margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--xenon); }
.form-status--error { color: var(--brake); }
.form-status ul { padding-left: 1.1em; }

.signup { margin-top: 24px; max-width: 34rem; }
.signup .field-label { margin-bottom: 8px; }
.signup-row { display: grid; gap: 10px; }
.signup .note { margin-top: 12px; }
@media (min-width: 560px) { .signup-row { grid-template-columns: minmax(0, 1fr) auto; } }

/* Quantity stepper */
.qty {
  display: inline-grid;
  grid-template-columns: 44px 44px 44px;
  align-items: center;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(17 18 22 / .6);
}
.qty input {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus-visible { outline-offset: -4px; border-radius: 6px; }
.qty-btn {
  display: grid;
  place-items: center;
  height: 100%;
  border: 0;
  background: none;
  color: var(--chrome);
  cursor: pointer;
}
.qty-btn:hover { color: var(--headlight); }
.qty-btn:focus-visible { outline-offset: -4px; border-radius: 8px; }

/* ---------- Header ---------- */

/* Shopify wraps every section in its own div, and a sticky element only sticks inside its parent: so that wrapper is
   what stays at the top. The header inside it slides away on the way down and back on the way up (theme.js);
   the wrapper lets clicks through while the header is away. (On the homepage the header is fixed instead.) */
.section-header { position: sticky; top: 0; z-index: 20; pointer-events: none; }
.section-header > * { pointer-events: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(5 5 7 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s, border-color .35s;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--inline);
}
.brand { display: block; flex: none; padding: 8px 0; transition: opacity .35s, visibility .35s; }
.brand-wordmark { width: 128px; }
.nav { display: none; margin-left: auto; }
.nav-list { display: flex; gap: 34px; list-style: none; }
.nav-list a {
  font: 400 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome);
  text-decoration: none;
  padding: 10px 0;
  transition: color .2s;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--headlight); }
.nav-list a[aria-current="page"] { text-decoration: underline 1px var(--xenon); text-underline-offset: 8px; }

.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cart-link, .menu-toggle summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--headlight);
  cursor: pointer;
}
.cart-link:hover, .menu-toggle summary:hover { background: rgb(255 255 255 / .06); }
.cart-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--xenon);
  color: var(--asphalt);
  font: 600 11px/18px var(--text);
  text-align: center;
}
.cart-count.is-empty { display: none; }
.cart-count.is-bumped { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { scale: 1.35; } }

.menu-toggle summary { list-style: none; }
.menu-toggle summary::-webkit-details-marker { display: none; }
.menu-toggle .when-open, .menu-toggle[open] .when-closed { display: none; }
.menu-toggle[open] .when-open { display: block; }
.menu-panel {
  position: fixed;
  inset: var(--header-h) 0 auto;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 28px;
  background: var(--asphalt);
  border-block: 1px solid var(--line);
  box-shadow: 0 40px 80px rgb(0 0 0 / .7);
}
.menu-panel ul { list-style: none; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { display: block; padding: 18px 0; font: 400 1.05rem/1.3 var(--display); color: var(--headlight); text-decoration: none; }
.menu-panel a[aria-current="page"] { color: var(--xenon); }
@media (prefers-reduced-motion: no-preference) {
  .menu-toggle[open] .menu-panel { animation: drop .28s var(--ease-out); }
}
@keyframes drop { from { opacity: 0; translate: 0 -8px; } }

@media (min-width: 900px) {
  .brand-wordmark { width: 150px; }
  .nav { display: block; }
  .header-actions { margin-left: 12px; }
  .menu-toggle { display: none; }
}

/* On the homepage the header floats over the opening photo; the big wordmark is the logo there. */
.template-index .site-header { position: fixed; inset: 0 0 auto; }
.hero-in-view .template-index .site-header {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-in-view .template-index .brand { opacity: 0; visibility: hidden; }
/* line the header up with the opening's corner labels */
@media (min-width: 900px) { .template-index .header-inner { padding-inline: 42px; } }

/* ---------- Opening (hero) ---------- */

/* The film is the opening. On top of it only the logo, and one way into the shop. */
.hero {
  --pad: 20px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) var(--pad) calc(var(--pad) + 8px);
  background: var(--asphalt);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.hero-frame { position: absolute; inset: 0; transition: opacity .8s ease; }
.hero-frame picture { display: block; width: 100%; height: 100%; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }

/* With the theme's own photo the frame keeps the photo's proportions and is sized like
   object-fit: cover, so the light flares stay on the headlights at every crop. */
.hero--ignition .hero-frame {
  --ar: .5625;
  --fx: .15;
  --fw: max(100cqw, 100cqh * var(--ar));
  --fh: max(100cqh, 100cqw / var(--ar));
  inset: auto;
  width: var(--fw);
  height: var(--fh);
  left: calc((100cqw - var(--fw)) * var(--fx));
  top: calc((100cqh - var(--fh)) * var(--fy, .5));
}
@supports not (width: 1cqw) {
  .hero--ignition .hero-frame { inset: 0; width: auto; height: auto; }
}

.hero-night { position: absolute; inset: 0; background: var(--asphalt); opacity: 0; pointer-events: none; }

/* The night film: hidden until it really plays, then it fades over the photo. While it is
   loading the photo waits in the dark, so the page never flips from one car to the other. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.video-pending .hero-frame { opacity: 0; transition: none; }
.video-on .hero-video { opacity: 1; }
.video-on .hero-frame { visibility: hidden; transition: visibility 0s .9s; }
.video-on .hero-night { visibility: hidden; } /* the film brings its own dark */
.film-sync .hero-video { transition: none; }
.film-sync .hero-frame { opacity: 0; }

.flare {
  position: absolute;
  width: 12%;
  aspect-ratio: 2.4;
  translate: -50% -50%;
  rotate: -14deg;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(222 234 255 / .7) 14%, rgb(185 211 255 / .24) 42%, rgb(185 211 255 / 0) 100%);
  mix-blend-mode: screen;
  opacity: .32;
  pointer-events: none;
}
/* headlight positions in the poster photo (shares of the frame) */
.flare-outer { left: 37%; top: 52.8%; }
.flare-inner { left: 12.3%; top: 57.2%; width: 6%; aspect-ratio: 1.4; rotate: 0deg; }

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(5 5 7 / .7) 0%, rgb(5 5 7 / .25) 24%, transparent 40%, transparent 66%, rgb(5 5 7 / .6) 88%, rgb(5 5 7 / .85) 100%);
}

.hero-lockup { grid-row: 1; justify-self: center; width: min(86vw, 960px); text-align: center; }
.hero-wordmark { filter: drop-shadow(0 6px 26px rgb(0 0 0 / .65)); }
.hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(12px, 2vw, 22px);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--chrome);
}
.hero-tagline::before, .hero-tagline::after { content: ""; width: clamp(24px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.hero-tagline::after { scale: -1 1; }

.hero-actions { grid-row: 3; display: flex; gap: 8px; }
.hero-shop { flex: 1; justify-content: space-between; gap: 18px; padding: 0 22px; }
.hero-shop .icon-arrow { flex: none; rotate: 90deg; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.hero-shop:hover .icon-arrow { translate: 0 3px; }
.hero-video-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(5 5 7 / .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--headlight);
  cursor: pointer;
  transition: border-color .2s ease;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { border-color: var(--xenon); }
/* pause: two bars; play: a triangle */
.hero-video-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero-video-toggle.is-paused .hero-video-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  translate: 2px 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.ignited) .hero--ignition .hero-night { animation: night-lifts 2.6s cubic-bezier(.6, 0, .3, 1) both; }
  html:not(.ignited) .hero--ignition .flare { animation: drl-on 2.8s linear both; }
  /* the chrome logo strikes, drops and comes on with the running lights, never brighter than it rests */
  html:not(.ignited) .hero--ignition .hero-wordmark { animation: lit 1.3s linear both; }
  html:not(.ignited) .hero--ignition .wordmark-glint { animation: glint 1.4s 1.95s cubic-bezier(.5, 0, .3, 1) both; }
  html:not(.ignited) .hero--ignition .hero-tagline { animation: arrive .9s 1.9s var(--ease-out) both; }
  html:not(.ignited) .hero--ignition .hero-actions { animation: arrive 1s 2.2s var(--ease-out) both; }
  /* waiting for the film: everything holds its first frame (stronger than the rules above that start the animations,
     or the logo would strike on its own clock first and then again with the film) */
  :root .hero--ignition.video-pending :is(.hero-night, .flare, .hero-wordmark, .wordmark-glint, .hero-tagline, .hero-actions) { animation-play-state: paused; }
  .video-pending .hero-wordmark { opacity: 0; }
  /* with the film playing, the logo follows the film's own frames (set from the hero script), not a clock of its own */
  .film-sync .hero-wordmark, html:not(.ignited) .hero--ignition.film-sync .hero-wordmark { animation: none; }
}
@keyframes night-lifts { 0%, 30% { opacity: .97; } 100% { opacity: 0; } }
/* The ignition, frame by frame at 30 fps: a faint glow, a strike, a drop, a second strike, dark, then on.
   The same table drives the headlights in the film and the logo on the page (see sections/hero.liquid). */
@keyframes drl-on {
  0%, 13.02% { opacity: 0; scale: .9; }
  13.10%, 14.21% { opacity: 0.11; scale: 1.00; }
  14.29%, 15.40% { opacity: 0.52; scale: 1.02; }
  15.48%, 16.60% { opacity: 0.43; scale: 1.01; }
  16.67%, 17.79% { opacity: 0.07; scale: 1.00; }
  17.86%, 18.98% { opacity: 0.02; scale: 1.00; }
  19.05%, 20.17% { opacity: 0.38; scale: 1.01; }
  20.24%, 21.36% { opacity: 0.10; scale: 1.00; }
  21.43%, 22.55% { opacity: 0.00; scale: 1.00; }
  22.62%, 23.74% { opacity: 0.00; scale: 1.00; }
  23.81%, 24.93% { opacity: 0.81; scale: 1.02; }
  25.00%, 26.12% { opacity: 0.79; scale: 1.02; }
  26.19% { opacity: 0.75; scale: 1.01; }
  33.33% { opacity: 0.60; scale: 1.01; }
  40.48% { opacity: 0.50; scale: 1.00; }
  47.62% { opacity: 0.44; scale: 1.00; }
  54.76% { opacity: 0.40; scale: 1.00; }
  61.90% { opacity: 0.37; scale: 1.00; }
  69.05% { opacity: 0.35; scale: 1.00; }
  76.19% { opacity: 0.34; scale: 1.00; }
  83.33% { opacity: 0.33; scale: 1.00; }
  90.48% { opacity: 0.33; scale: 1.00; }
  97.62% { opacity: 0.33; scale: 1.00; }
  100% { opacity: .32; scale: 1; }
}
@keyframes hud-in { from { opacity: 0; scale: 1.03; } }
@keyframes lit {
  0%, 28.05% { opacity: 0; }
  28.21%, 30.62% { opacity: 0.17; }
  30.77%, 33.18% { opacity: 0.68; }
  33.33%, 35.74% { opacity: 0.57; }
  35.90%, 38.31% { opacity: 0.09; }
  38.46%, 40.87% { opacity: 0.03; }
  41.03%, 43.44% { opacity: 0.52; }
  43.59%, 46.00% { opacity: 0.14; }
  46.15%, 48.56% { opacity: 0.00; }
  48.72%, 51.13% { opacity: 0.00; }
  51.28%, 53.69% { opacity: 0.93; }
  53.85%, 56.26% { opacity: 0.93; }
  61.54% { opacity: 0.94; }
  71.79% { opacity: 0.97; }
  82.05% { opacity: 0.99; }
  92.31% { opacity: 1.00; }
  100% { opacity: 1; }
}
}
@keyframes glint { from { transform: translateX(0); } to { transform: translateX(1700px); } }
@keyframes arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { from { opacity: 0; } }

@media (min-width: 600px) {
  .hero { --pad: 24px; }
  .hero-tagline { font-size: 11px; }
  .hero-actions { justify-self: center; width: min(100%, 460px); }
}

/* Desktop: logo top left in the dark, the way in bottom right, the car between them. */
@media (min-width: 900px) and (min-aspect-ratio: 13/10) {
  .hero {
    --pad: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: calc(var(--header-h) + 56px) calc(var(--pad) + clamp(28px, 3.4vw, 64px)) calc(var(--pad) + 30px);
  }
  .hero--ignition .hero-frame { --ar: 1.6014; --fx: .25; --fy: .55; }
  .flare-outer { left: 37%; top: 66.5%; width: 12%; aspect-ratio: 2.4; rotate: -14deg; }
  .flare-inner { left: 12.2%; top: 79%; width: 6%; aspect-ratio: 1.4; rotate: 0deg; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgb(5 5 7 / .65) 0%, transparent 18%),
      linear-gradient(0deg, var(--asphalt) 0%, rgb(5 5 7 / .55) 6%, transparent 16%),
      radial-gradient(50% 42% at 20% 22%, rgb(5 5 7 / .55) 0%, transparent 70%),
      radial-gradient(40% 36% at 92% 96%, rgb(5 5 7 / .7) 0%, transparent 75%);
  }
  .hero-lockup { grid-column: 1; grid-row: 1; justify-self: start; width: min(40vw, 820px); text-align: left; }
  .hero-wordmark { width: 100%; }
  .hero-tagline { justify-content: flex-start; margin-top: clamp(16px, 1.6vw, 26px); font-size: 11.5px; }
  .hero-tagline::before { display: none; }
  .hero-tagline::after { scale: 1 1; width: clamp(40px, 6vw, 110px); background: linear-gradient(90deg, var(--line-strong), transparent); }
  .hero-actions { grid-column: 2; grid-row: 3; justify-self: end; width: auto; }
  .hero-shop { flex: none; padding: 0 26px; }
}

/* very wide screens: show more of the car's front and the ground */
@media (min-width: 900px) and (min-aspect-ratio: 18/10) {
  .hero--ignition .hero-frame { --fy: .74; }
}

/* ---------- The wait before the opening (homepage) ----------
   The film starts in the dark, so the page waits in that same dark until the film, the fonts and the drop below are
   ready (layout/theme.liquid, a few seconds at most). Only a wait you would notice shows anything: one thin line that
   fills as it loads. Full, it flares like a running light coming on, and the dark lifts straight into the film. */
.gate { display: none; }
.gate-on .gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--asphalt);
}
.gate-line {
  position: relative;
  width: clamp(112px, 14vw, 196px);
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .6s ease;
}
.gate-show .gate-line { opacity: 1; }
.gate-show:not(.gate-out) .gate-line::after { animation: gate-breathe 1.4s ease-in-out infinite alternate; }
@keyframes gate-breathe { from { opacity: .6; } to { opacity: 1; } }
.gate-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(185 211 255 / 0), var(--xenon) 24%, var(--headlight) 50%, var(--xenon) 76%, rgb(185 211 255 / 0));
  box-shadow: 0 0 10px rgb(185 211 255 / .4);
  scale: var(--gate-p, 0) 1;
  transition: scale .45s var(--ease-out);
}
.gate-out .gate { animation: gate-lift .6s ease both; pointer-events: none; }
.gate-out .gate-line { animation: gate-strike .6s ease both; }
@keyframes gate-lift { 0%, 20% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes gate-strike {
  0% { scale: 1 1; filter: none; }
  16% { scale: 1.14 1; filter: brightness(2.4) drop-shadow(0 0 5px rgb(185 211 255 / .9)); }
  100% { scale: .2 1; filter: none; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the photo's ignition (when the film is left out) waits for the dark to lift too */
  html.gate-on:not(.gate-out) .hero--ignition :is(.hero-night, .flare, .hero-wordmark, .wordmark-glint, .hero-tagline, .hero-actions) { animation-play-state: paused; }
  /* the header comes on with the lights, not before them */
  html.gate-on:not(.gate-out) .template-index .site-header { opacity: 0; transition: none; }
  .motion-ok .template-index .site-header { transition: translate .45s var(--ease-out), background-color .35s, border-color .35s, opacity .8s ease .5s; }
}

/* ---------- Shared section frame ---------- */

.highlights, .steps, .gallery, .story, .newsletter,
.product, .cart, .listing, .page {
  padding: var(--section-space) var(--inline);
}
.section-head { display: grid; gap: 14px; }
.steps-head, .gallery-head, .newsletter-head { display: grid; gap: 12px; }

/* ---------- Product photo with callouts (product page) ---------- */

.scan-stage { perspective: 1400px; }
/* the photo fills its frame: a touch of extra size keeps the edges covered while it tilts */
.scan-stage .feature-photo { scale: 1.035; }
.feature-photo {
  position: relative;
  container-type: inline-size;
  transform: rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -5deg));
  transition: transform .7s var(--ease-out);
}
.feature-photo img { width: 100%; }
.feature-photo > .hud-frame { inset: -10px; translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -7px); transition: translate .7s var(--ease-out); }
/* soft glare that follows the pointer */
.feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(50% + var(--mx, 0) * 50%) calc(50% + var(--my, 0) * 50%), rgb(220 232 255 / .16), transparent 46%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.scan-stage:hover .feature-photo::after { opacity: 1; }

/* Callouts: a point on the bottle, a reticle around it, a leader line and a label.
   The callouts float a little above the photo (they move further than the photo on tilt). */
.callouts {
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 14px);
  transition: translate .7s var(--ease-out);
}
.callout { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transition: opacity .3s; }
.callout-point { position: absolute; inset: 0; }
.callout-point::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 1.5px solid var(--xenon);
  border-radius: 50%;
  background: rgb(5 5 7 / .45);
  box-shadow: 0 0 14px rgb(185 211 255 / .7);
}
.callout-ring {
  position: absolute;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 1px solid var(--xenon);
  border-radius: 50%;
  opacity: 0;
}
.callout-reticle {
  --c: var(--xenon);
  --s: 5px;
  --w: 1.5px;
  position: absolute;
  width: 23px;
  height: 23px;
  translate: -50% -50%;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--s);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgb(185 211 255 / .8));
}
.callout-line {
  position: absolute;
  top: 0;
  height: 1px;
  width: calc(var(--len) * 1cqw - 13px);
  background: rgb(238 241 245 / .75);
  box-shadow: 0 0 6px rgb(0 0 0 / .6);
  transition: background-color .3s;
}
.callout--left .callout-line { right: 13px; transform-origin: right; }
.callout--right .callout-line { left: 13px; transform-origin: left; }
.callout-label {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.6;
  color: var(--headlight);
  text-shadow: 0 1px 10px rgb(0 0 0 / .9), 0 0 2px rgb(0 0 0 / .8);
  transition: color .3s;
}
.callout--left .callout-label { right: calc(var(--len) * 1cqw + 8px); text-align: right; }
.callout--right .callout-label { left: calc(var(--len) * 1cqw + 8px); }
/* pointing at one callout brings it forward */
.callouts:has(.callout:hover) .callout:not(:hover) { opacity: .4; }
.callout:hover .callout-line { background: var(--xenon); }
.callout:hover .callout-label { color: var(--xenon); }

/* the scanner that runs down the photo once and locks onto each callout as it passes */
.scanline {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(214 228 255 / .95) 20%, #fff 50%, rgb(214 228 255 / .95) 80%, transparent);
  box-shadow: 0 0 18px 2px rgb(185 211 255 / .6);
  opacity: 0;
  pointer-events: none;
}
.scanline::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgb(185 211 255 / .14));
}

@media (min-width: 600px) {
  .callout-label { font-size: 10.5px; }
}

/* ---------- The drop (homepage, right under the film) ----------
   The bottle stands in the dark behind a pane of glass in the rain. assets/drop-glass.js draws the glass on the
   canvas (and the bottle into it, at the place and size of .drop-slot); without it the bottle image shows here,
   on black with a soft light behind it. Phones: the first screen is the shot, with the name at its foot. */
.drop { position: relative; background: var(--asphalt); }
.drop-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 100vh;
  grid-template-rows: 100svh;
  padding-bottom: var(--section-space);
}
.drop-glass {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  opacity: 0;
  transition: opacity .8s ease;
}
.glass-on .drop-glass { opacity: 1; }
.drop-slot {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  height: calc(100svh - var(--header-h) - 210px);
  min-height: 300px;
  aspect-ratio: 960 / 3286;
  margin-top: calc(var(--header-h) + 18px);
}
.drop-bottle { display: block; width: 100%; height: 100%; -webkit-box-reflect: below 0 linear-gradient(transparent 62%, rgb(255 255 255 / .3)); }
/* the studio when there is no glass: a soft light on the backdrop behind the bottle, and the edge of the floor */
.drop-slot::before, .drop-slot::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.drop-slot::before {
  inset: -30% -250% -20%;
  background:
    radial-gradient(50% 42% at 50% 50%, rgb(186 198 222 / .13), rgb(186 198 222 / .07) 45%, rgb(186 198 222 / .02) 75%, transparent),
    radial-gradient(20% 30% at 50% 42%, rgb(206 218 240 / .07), transparent);
}
.drop-slot::after {
  left: -300%;
  right: -300%;
  bottom: 0;
  height: 1px;
  background: radial-gradient(closest-side, rgb(206 218 240 / .22), transparent);
}
/* with the glass running, the canvas draws the bottle; the image stays for screen readers and as the source */
.glass-on .drop-bottle { opacity: 0; }
/* once the glass is coated the bottle sprays again on a click (drop-glass.js) */
.can-spray .drop-slot { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.glass-on .drop-slot::before, .glass-on .drop-slot::after { display: none; }
.drop-slot--photo { aspect-ratio: auto; height: auto; width: min(100% - 2 * var(--gutter), 520px); }
.drop-slot--photo::before, .drop-slot--photo::after { display: none; }
.drop-photo { width: 100%; }

.drop-copy { display: contents; }
.drop-head { position: relative; z-index: 2; grid-area: 1 / 1; align-self: end; padding: 0 var(--gutter) 30px; }
.drop-copy > :not(.drop-head) { position: relative; z-index: 2; margin-inline: var(--gutter); }
.drop-label { color: var(--xenon); }
.drop-title {
  margin-top: 12px;
  font: 400 clamp(2.6rem, 1.4rem + 6vw, 3.4rem)/1.02 var(--display);
  letter-spacing: -.035em;
}
.drop-title a { text-decoration: none; }
.drop-title a:hover { color: var(--xenon); }
.drop-lede { margin-top: 8px; max-width: 27em; color: var(--chrome); font-size: 17px; line-height: 1.55; }
.drop-spec { margin-top: 26px; border-top: 1px solid var(--line); }
.drop-spec-row { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.drop-spec dt { font-size: 10px; }
.drop-spec dd { font-size: 15px; color: var(--headlight); }
.drop-buy .price { margin-top: 26px; }
.drop-buy .product-form { margin-top: 16px; max-width: 30rem; }
.drop-buy .text-link { margin-top: 22px; }

/* wide screens: one screen high, the buy column on the left, the bottle on the right */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .drop-stage {
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 100px);
    align-items: center;
    padding: calc(var(--header-h) + 20px) var(--inline) 40px;
  }
  .drop-glass { height: 100%; }
  /* the bottle stands a little higher, so the floor has room to fade into the night before the next section */
  .drop-stage { overflow: clip; }
  .drop-stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: clamp(80px, 14svh, 160px);
    background: linear-gradient(180deg, rgb(5 5 7 / 0), var(--asphalt));
    pointer-events: none;
  }
  .drop-slot { grid-area: 1 / 2; align-self: start; height: min(84%, 860px); min-height: 0; margin: clamp(4px, 1.6svh, 20px) 0 0; }
  .drop-copy { display: block; grid-area: 1 / 1; position: relative; z-index: 2; max-width: 33rem; }
  .drop-head { padding: 0; }
  .drop-title { font-size: clamp(2.6rem, 1.1rem + 3.9vw, 4.4rem); }
  .drop-copy > :not(.drop-head) { margin-inline: 0; }
  .drop-lede { margin-top: 22px; font-size: 18px; }
  .drop-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 30px; border-top: 0; }
  .drop-spec-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .drop-buy .price { margin-top: 30px; }
  .drop-slot--photo { width: auto; height: min(80%, 820px); }
  .drop-slot--photo .drop-photo { width: auto; height: 100%; object-fit: contain; }
}

/* ---------- Price ---------- */

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price-now { font: 600 1.4rem/1.2 var(--text); color: var(--headlight); }
.price-was { color: var(--dim); }
.price--sale .price-now { color: var(--xenon); }
.price-note { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.price-unit { flex-basis: 100%; font: 400 .8rem/1.4 var(--text); color: var(--dim); }
.card .price-unit { font-size: .72rem; }

/* ---------- Product form ---------- */

.product-form .field-label { margin-bottom: 8px; }
.product-form .select { margin-bottom: 14px; }
.buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.quick-checkout { margin-top: 10px; }
.quick-checkout .shopify-payment-button__button { border-radius: var(--radius); min-height: 54px; overflow: hidden; }
.quick-checkout .shopify-payment-button__more-options { color: var(--chrome); }
.cart-added { margin-top: 12px; font-size: 14px; color: var(--xenon); }
.cart-added:empty { display: none; }
.cart-added a { color: var(--headlight); text-underline-offset: 4px; }

/* Added to the cart (theme.js): a card under the cart icon, in the same glass as the cookie card, with the product,
   the cart's new total and the way to it. Phone: the full width under the header. */
.cart-pop {
  position: fixed;
  z-index: 70;
  top: calc(var(--header-h) + 8px);
  inset-inline: 10px;
  display: grid;
  gap: 16px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgb(11 12 16 / .97); /* no backdrop blur: at this opacity it hardly shows, and it made the card stutter as it faded in */
  box-shadow: 0 24px 60px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .04);
  color: var(--chrome);
  outline: none;
  will-change: opacity, transform;
}
.cart-pop[hidden] { display: none; }
/* the time left: a light on the card's own border, along the top and round both corners, that runs empty in 10 s
   (theme.js draws the path to the card's size and shortens it) */
.cart-pop-timer { position: absolute; top: -1px; left: -1px; overflow: visible; pointer-events: none; will-change: transform; } /* its own layer: the light redraws every frame, the card does not */
.cart-pop-timer path { fill: none; stroke: var(--xenon); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(185 211 255 / .9)); }
.cart-pop-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--chrome);
  cursor: pointer;
}
.cart-pop-close:hover { color: var(--headlight); background: rgb(255 255 255 / .06); }
.cart-pop-title { display: flex; align-items: center; gap: 8px; margin: 2px 44px 0 0; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--xenon); }
.cart-pop-title svg { flex: none; }
.cart-pop-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "shot name price" "shot meta price"; column-gap: 14px; row-gap: 2px; align-items: center; }
.cart-pop-shot { grid-area: shot; width: 56px; height: 70px; overflow: hidden; border-radius: 6px; background: var(--tarmac); box-shadow: inset 0 0 0 1px var(--line); }
.cart-pop-shot[hidden] { display: none; }
.cart-pop-shot img { width: 100%; height: 100%; object-fit: cover; }
.cart-pop-name { grid-area: name; align-self: end; font: 600 15px/1.3 var(--text); color: var(--headlight); }
.cart-pop-meta { grid-area: meta; align-self: start; font-size: 13px; }
.cart-pop-price { grid-area: price; font: 600 15px/1.3 var(--text); color: var(--headlight); }
.cart-pop-total { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.cart-pop-total:empty { display: none; }
.cart-pop-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cart-pop-actions .button { min-height: 48px; padding: 0 12px; font-size: 14px; }
.cart-pop.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
@media (prefers-reduced-motion: no-preference) {
  .cart-pop:not(.is-leaving) { animation: pop-in .4s var(--ease-out) both; }
  /* opacity and transform only, so the slide-in runs on the GPU, smooth even while the glass behind it is busy */
  @keyframes pop-in { from { opacity: 0; transform: translateY(-12px); } }
}
@media (min-width: 600px) {
  .cart-pop { left: auto; right: max(10px, calc(var(--gutter) - 8px)); width: 380px; }
}

/* ---------- Highlights (optional section): a spec sheet ---------- */

.highlights { display: grid; gap: 28px; border-top: 1px solid var(--line); }
.highlight { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
.highlight:last-child { border-bottom: 1px solid var(--line); }
.highlight dt { font: 400 1rem/1.35 var(--display); letter-spacing: -.01em; }
.highlight dd { color: var(--chrome); max-width: 34em; }
@media (min-width: 700px) {
  .highlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: baseline; }
}

/* ---------- The lower homepage: one type scale, one rhythm ----------
   Under the film and the drop the page calms down: big confident headings, quiet text, no labels above headings,
   photos in the film's look. Sections are separated by space, not by lines. */
.section-title {
  font: 400 clamp(1.9rem, 1.1rem + 3.2vw, 3.6rem)/1.06 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* ---------- Effect: water beading on black paint ---------- */

.effect {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(125vw, 560px);
  overflow: hidden;
  background: var(--asphalt);
}
.effect-media { position: absolute; inset: 0; z-index: -1; }
.effect-media picture { display: block; width: 100%; height: 100%; }
.effect-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the top melts into the drop above, the bottom carries the text */
.effect-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--asphalt) 0%, rgb(5 5 7 / 0) 16%),
    linear-gradient(0deg, var(--asphalt) 0%, rgb(5 5 7 / .78) 24%, rgb(5 5 7 / 0) 58%);
}
.effect-copy { display: grid; gap: 16px; padding: 0 var(--inline) clamp(56px, 8vw, 112px); max-width: calc(40rem + 2 * var(--inline)); }
.effect-text { max-width: 30em; color: #c9cdd3; font-size: 17px; }
@media (min-aspect-ratio: 1/1) and (max-width: 999px) {
  .effect { min-height: min(100svh, 58vw); }
  .effect-media::after {
    background:
      linear-gradient(180deg, var(--asphalt) 0%, rgb(5 5 7 / 0) 18%),
      linear-gradient(0deg, var(--asphalt) 0%, rgb(5 5 7 / .55) 18%, rgb(5 5 7 / 0) 46%),
      linear-gradient(90deg, rgb(5 5 7 / .7) 0%, rgb(5 5 7 / 0) 55%);
  }
  .effect-text { font-size: 18px; }
}
/* desktop: the beads run in from the left edge of the screen and melt into the night on every other side;
   the words stand beside them, the way the buy column stands beside the bottle in the drop above */
@media (min-width: 1000px) {
  .effect {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: center;
    column-gap: clamp(32px, 4vw, 96px);
    min-height: 0;
    padding: clamp(16px, 3vw, 56px) var(--inline) clamp(56px, 8vw, 136px) 0;
    overflow: visible;
  }
  .effect-media {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(440px, 46vw, 860px);
    max-height: 86svh;
    -webkit-mask-image:
      linear-gradient(90deg, #000 0%, #000 44%, rgb(0 0 0 / .86) 58%, rgb(0 0 0 / .55) 71%, rgb(0 0 0 / .24) 83%, rgb(0 0 0 / .07) 92%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .08) 7%, rgb(0 0 0 / .3) 15%, rgb(0 0 0 / .66) 24%, #000 34%, #000 63%, rgb(0 0 0 / .66) 74%, rgb(0 0 0 / .3) 85%, rgb(0 0 0 / .08) 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, #000 0%, #000 44%, rgb(0 0 0 / .86) 58%, rgb(0 0 0 / .55) 71%, rgb(0 0 0 / .24) 83%, rgb(0 0 0 / .07) 92%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .08) 7%, rgb(0 0 0 / .3) 15%, rgb(0 0 0 / .66) 24%, #000 34%, #000 63%, rgb(0 0 0 / .66) 74%, rgb(0 0 0 / .3) 85%, rgb(0 0 0 / .08) 93%, transparent 100%);
    mask-composite: intersect;
  }
  .effect-media::after { display: none; }
  .effect-media img { object-position: 50% 58%; }
  .effect-copy { position: relative; z-index: 1; gap: 20px; max-width: 30rem; padding: 0; }
  .effect-text { font-size: 18px; }
}

/* ---------- Steps: a sequence on a line ----------
   Each step can carry a macro shot of the paint in the state that step leaves it in (sections/steps.liquid).
   Phones: a row per step, the shot beside the words. Computers: the shots side by side like a contact sheet, on a
   line with a node per step; when the section comes into view a light runs along the line and the shots come on
   one after another. */

.steps-head { display: grid; gap: 16px; max-width: 44rem; }
.steps-text { max-width: 32em; color: var(--chrome); font-size: 17px; }
.step-list { display: grid; margin-top: clamp(40px, 5vw, 72px); list-style: none; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-content: start;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-rail { display: none; }
.step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font: 400 1.7rem/1 var(--display);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--chrome);
}
.step-title { grid-column: 2; font: 400 1.2rem/1.3 var(--display); letter-spacing: -.015em; }
.step-text { grid-column: 2; margin-top: 10px; max-width: 28em; color: var(--chrome); }
.step-shot { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--tarmac); }
.step-shot img { width: 100%; height: 100%; object-fit: cover; }
/* a hairline over the photo's edge, so black paint still reads as a frame on the black page */
.step-shot::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .08); border-radius: inherit; pointer-events: none; }
.step--shot { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 18px 0; }
.step--shot .step-shot { grid-column: 1; grid-row: 1 / span 3; }
.step--shot .step-num { grid-column: 2; grid-row: 1; font-size: 1.5rem; }
.step--shot .step-title { grid-column: 2; grid-row: 2; margin-top: 10px; }
.step--shot .step-text { grid-column: 2; grid-row: 3; margin-top: 8px; font-size: 15px; }

@media (min-width: 900px) {
  .step-list { --gap: clamp(32px, 4vw, 72px); grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); column-gap: var(--gap); }
  /* five steps: a tighter contact sheet, set a size smaller */
  .step-list--long { --gap: clamp(14px, 1.7vw, 30px); }
  .step, .step:last-child, .step--shot { display: block; padding: 0; border: 0; }
  .step-shot { margin-bottom: 30px; }
  /* the line, a stretch per step (on to the next one), with a node at its start */
  .step-rail { position: relative; display: block; height: 9px; margin-bottom: 28px; }
  .step-rail::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: calc(-1 * var(--gap));
    height: 1px;
    background: var(--line-strong);
  }
  .step:last-child .step-rail::before { right: 0; background: linear-gradient(90deg, var(--line-strong), transparent); }
  .step-rail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border: 1px solid var(--xenon);
    border-radius: 50%;
    background: var(--asphalt);
    box-shadow: 0 0 12px rgb(185 211 255 / .35);
  }
  .step-num { display: block; font-size: clamp(2.6rem, 1.6rem + 2.2vw, 4rem); }
  .step--shot .step-num { font-size: clamp(2.6rem, 1.6rem + 2.2vw, 4rem); }
  .step-title, .step--shot .step-title { margin-top: 26px; font-size: 1.35rem; }
  .step-text, .step--shot .step-text { margin-top: 12px; font-size: 16px; }
  .step-list--long .step-num { font-size: clamp(2rem, 1rem + 1.6vw, 3.1rem); }
  .step-list--long .step-title { margin-top: 20px; font-size: clamp(.95rem, .55rem + .62vw, 1.2rem); }
  .step-list--long .step-text { font-size: 15px; }
}

/* the moment it comes into view (theme.js): on a computer the light runs along the line and every step comes on as
   it passes, its shot lit last; on a phone each row comes on as it scrolls in */
.motion-ok .step-list[data-reveal="steps"] .step { transition: opacity .8s var(--ease-out), translate .9s var(--ease-out); transition-delay: calc(var(--k, 0) * .24s); }
.motion-ok .step-list[data-reveal="steps"] .step-shot img { filter: brightness(.16); scale: 1.06; transition: filter 1.5s ease, scale 2s var(--ease-out); transition-delay: calc(var(--k, 0) * .24s + .2s); }
.motion-ok .step-list[data-reveal="steps"]:not(.is-in) .step:not(.is-in) { opacity: 0; translate: 0 18px; }
.motion-ok .step-list[data-reveal="steps"]:is(.is-in) .step-shot img,
.motion-ok .step-list[data-reveal="steps"] .step.is-in .step-shot img { filter: none; scale: 1; }
@media (min-width: 900px) {
  .motion-ok .step-list[data-reveal="steps"] .step-rail::before {
    background:
      linear-gradient(90deg, rgb(185 211 255 / 0), var(--xenon) 40%, var(--headlight) 50%, var(--xenon) 60%, rgb(185 211 255 / 0)) -60% 0 / 34% 100% no-repeat,
      var(--line-strong);
  }
  .motion-ok .step-list[data-reveal="steps"] .step:last-child .step-rail::before {
    background:
      linear-gradient(90deg, rgb(185 211 255 / 0), var(--xenon) 40%, var(--headlight) 50%, var(--xenon) 60%, rgb(185 211 255 / 0)) -60% 0 / 34% 100% no-repeat,
      linear-gradient(90deg, var(--line-strong), transparent);
  }
  .motion-ok .step-list[data-reveal="steps"].is-in .step-rail::before { animation: rail-run .26s linear calc(var(--k, 0) * .24s) both; }
  .motion-ok .step-list[data-reveal="steps"].is-in .step-rail::after { animation: node-on .9s ease calc(var(--k, 0) * .24s) both; }
  @keyframes rail-run { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
  @keyframes node-on {
    0% { background-color: var(--asphalt); box-shadow: 0 0 0 rgb(185 211 255 / 0); }
    25% { background-color: var(--headlight); box-shadow: 0 0 22px rgb(185 211 255 / .9); }
    100% { background-color: var(--asphalt); box-shadow: 0 0 12px rgb(185 211 255 / .35); }
  }
}
@media (max-width: 899px) {
  .motion-ok .step-list[data-reveal="steps"] .step { --k: 0 !important; }
}

/* ---------- Gallery: two lanes of photos ----------
   theme.js slides the lanes sideways in opposite directions while the page scrolls past (.is-moving).
   Without it (no JavaScript, reduced motion) each lane is a strip you can swipe. */

.gallery { padding-inline: 0; }
/* (the section has no side padding, so the lanes can run from edge to edge of the screen) */
.gallery-head { display: grid; gap: 16px; max-width: 46rem; margin-left: var(--inline); margin-right: var(--inline); }
.gallery-text { max-width: 32em; color: var(--chrome); font-size: 17px; }
.reel {
  --row: 56vw;
  --gap: 10px;
  display: grid;
  gap: var(--gap);
  margin-top: clamp(40px, 5vw, 72px);
  overflow: hidden;
  /* the lanes come out of the night and go back into it at the edges of the screen */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reel-row {
  display: flex;
  gap: var(--gap);
  height: var(--row);
  padding-inline: var(--inline);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.reel-row::-webkit-scrollbar { display: none; }
.reel-item { flex: none; height: 100%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.reel-item--wide { aspect-ratio: 3 / 2; }
.reel-item figure { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--tarmac); }
.reel-item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale 1s var(--ease-out), filter .6s ease; }
.reel-item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 14px 12px;
  background: linear-gradient(0deg, rgb(5 5 7 / .8), rgb(5 5 7 / 0));
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--headlight);
}
@media (hover: hover) and (pointer: fine) {
  .reel-item:hover img { scale: 1.045; filter: brightness(1.15); }
}
.reel.is-moving .reel-row { width: max-content; padding-inline: 0; overflow: visible; scroll-snap-type: none; will-change: transform; }
@media (min-width: 700px) { .reel { --row: max(240px, 30vw); --gap: 14px; } }
@media (min-width: 1000px) {
  .reel { --row: max(240px, 21vw); --gap: 16px; }
  .reel-item figcaption { padding: 56px 20px 18px; font-size: 14px; }
}

/* ---------- Story: the tail lights, from edge to edge ----------
   The page opens on headlights and closes on tail lights, like the last shot of a film: the photo as a wide band
   across the whole screen, the heading rising out of its dark bottom edge, on the same left line as every other
   heading. On phones the photo is taller and the words follow under it. */

.story { position: relative; isolation: isolate; padding: 0 0 var(--section-space); }
.story-media { position: relative; z-index: -1; aspect-ratio: 4 / 5; overflow: hidden; }
.story-media picture { display: contents; }
.story-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--asphalt) 0%, rgb(5 5 7 / 0) 16%, rgb(5 5 7 / 0) 46%, rgb(5 5 7 / .78) 76%, var(--asphalt) 100%);
}
.story-copy { display: grid; gap: 18px; max-width: calc(36rem + 2 * var(--inline)); margin-top: -26vw; padding-inline: var(--inline); }
.story-title { font-size: clamp(2.3rem, 1.2rem + 3.9vw, 5.4rem); line-height: 1.02; }
.story-body { display: grid; gap: 18px; }
.story .rte { color: #c3c8cf; font-size: 17px; }
.story .button { justify-self: start; margin-top: 10px; }
@media (min-width: 900px) {
  /* a wide film still; its dark lower edge is where the heading stands */
  .story-media { width: 100%; aspect-ratio: 2 / 1; max-height: 84svh; }
  .story-media img { object-position: 50% 46%; }
  .story-media::after {
    background:
      linear-gradient(180deg, var(--asphalt) 0%, rgb(5 5 7 / .25) 7%, rgb(5 5 7 / 0) 16%, rgb(5 5 7 / 0) 60%, rgb(5 5 7 / .75) 85%, var(--asphalt) 100%),
      linear-gradient(90deg, rgb(5 5 7 / .55) 0%, rgb(5 5 7 / 0) 22%, rgb(5 5 7 / 0) 78%, rgb(5 5 7 / .55) 100%);
  }
  .story-copy {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(48px, 6vw, 120px);
    max-width: none;
    /* the heading's first line and a half stand in the photo's dark lower edge */
    margin-top: calc(-1.55 * clamp(2.3rem, 1.2rem + 3.9vw, 5.4rem));
    padding-inline: var(--inline);
  }
  .story-body { padding-bottom: .4em; }
  .story .rte { max-width: 30em; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* not yet wide enough for two columns: the words under the heading */
  .story-copy { grid-template-columns: minmax(0, 1fr); max-width: calc(40rem + 2 * var(--inline)); }
}

/* ---------- Newsletter ---------- */

.newsletter-head { display: grid; gap: 16px; }
.newsletter-text { max-width: 32em; color: var(--chrome); font-size: 17px; }
@media (min-width: 1000px) {
  .newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; }
  .newsletter .signup { margin-top: 0; }
}

/* ---------- Product page ---------- */

.product { display: grid; gap: 28px; padding-top: 0; }
.product-gallery { margin-inline: calc(-1 * var(--inline)); }
.product-media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
}
.product-media::-webkit-scrollbar { display: none; }
.product-media li { scroll-snap-align: start; background: var(--tarmac); }
.product-media img, .product-media .placeholder { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* the photos come on softly once they have loaded and decoded (theme.js marks them), instead of popping in or being
   drawn in strips over a slow line; a hair of zoom settles as they appear */
.product-media li:not(.scan-stage) { overflow: hidden; }
.motion-ok .product-media li:not(.scan-stage) img { opacity: 0; scale: 1.03; transition: opacity .9s var(--ease-out), scale 1.6s var(--ease-out); }
.motion-ok .product-media li:not(.scan-stage) img.is-loaded { opacity: 1; scale: 1; }
.placeholder { fill: var(--kerb); background: var(--tarmac); }
/* phones and tablets: every photo whole, as large as the screen allows while the name and the line under it still
   fit in the first screen. On a short screen a photo gets a little smaller (never cut); the crumbs give way. */
@media (max-width: 999px) {
  .product { gap: 20px; }
  .product-media li { background: var(--asphalt); }
  .product-media img, .product-media .placeholder { max-height: calc(100svh - var(--header-h) - 120px); object-fit: contain; }
  .product-info .crumbs { display: none; }
  .product-info h1 { margin-top: 0; }
}

.crumbs { font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--chrome); text-decoration: none; }
.crumbs a:hover { color: var(--headlight); }
.product-info h1 { margin-top: 14px; }
.product-sub { margin-top: 8px; color: var(--chrome); }
.product-info [data-price-area] { margin-top: 22px; }
.product-info .product-form { margin-top: 18px; }

.assurances { display: grid; gap: 10px; margin-top: 26px; list-style: none; font-size: 14px; color: var(--chrome); }
.assurances:empty { display: none; }
.assurances li { display: flex; align-items: baseline; gap: 12px; }
.assurances li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 5px;
  border: solid var(--xenon);
  border-width: 0 0 1.6px 1.6px;
  rotate: -45deg;
  translate: 0 -3px;
}
.product-description { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }

.accordions { margin-top: 28px; }
.accordion { border-top: 1px solid var(--line); }
.accordion:last-child { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { color: var(--chrome); transition: rotate .25s var(--ease-out); }
.accordion[open] summary .icon { rotate: 45deg; }
.accordion .rte { padding-bottom: 22px; font-size: 15px; }

@media (min-width: 1000px) {
  .product {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
    padding-top: 40px;
  }
  .product-gallery { margin-inline: 0; }
  .product-media { grid-auto-flow: row; gap: 12px; overflow: visible; }
  .product-info { position: sticky; top: calc(var(--header-h) + 32px); }
  .product-info h1 { margin-top: 18px; }
}

/* ---------- Cart ---------- */

.cart h1 { margin-bottom: 32px; }
.cart-form { display: grid; gap: 40px; }
.cart-lines { list-style: none; border-top: 1px solid var(--line); }
.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line-media { display: block; overflow: hidden; background: var(--tarmac); aspect-ratio: 4 / 5; }
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-title { font-weight: 600; text-decoration: none; }
.cart-line-title:hover { color: var(--xenon); }
.cart-line-variant, .cart-line-discount { margin-top: 2px; font-size: 14px; color: var(--chrome); }
.cart-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.cart-line-actions .qty { height: 46px; grid-template-columns: 40px 40px 40px; }
.cart-line-price { font-weight: 600; white-space: nowrap; }

.cart-summary {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 26px;
  background: var(--tarmac);
  border: 1px solid var(--line);
}
.cart-row { display: flex; justify-content: space-between; gap: 16px; color: var(--chrome); }
.cart-total { color: var(--headlight); font-weight: 600; font-size: 1.15rem; }
.cart-summary .note { margin-top: -4px; }
.cart-summary .text-link { justify-self: center; }
.empty-state { display: grid; justify-items: start; gap: 24px; color: var(--chrome); }

@media (min-width: 1000px) {
  .cart-form { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .cart-summary { position: sticky; top: calc(var(--header-h) + 32px); }
  .cart-line { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; }
}

/* ---------- Listings, pages, search ---------- */

.listing-head { display: grid; gap: 16px; margin-bottom: 40px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 40px 20px;
  list-style: none;
}
.card-link { display: block; text-decoration: none; }
.card-media { overflow: hidden; background: var(--tarmac); aspect-ratio: 4 / 5; }
.card-media img, .card-media svg { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.card-link:hover .card-media img { scale: 1.03; }
.card-title { margin-top: 14px; font: 600 1.05rem/1.35 var(--text); }
.card .price { margin-top: 4px; }
.card .price-now { font-size: 1rem; }

.search-form { display: grid; gap: 10px; max-width: 36rem; }
@media (min-width: 560px) { .search-form { grid-template-columns: minmax(0, 1fr) auto; } }

.pagination { display: flex; justify-content: center; gap: 24px; margin-top: 48px; color: var(--chrome); }
.pagination a { color: var(--headlight); }

.page { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.page h1 { margin-bottom: 28px; }
.page--center { min-height: 55svh; display: grid; align-content: center; justify-items: start; gap: 20px; }
.page--center h1 { margin-bottom: 0; }
.page--center p { color: var(--chrome); }
/* ---------- Contact (sections/main-contact.liquid) ----------
   The ways to reach us as the posters' readouts and the X6's headlight; the form in the same corner frame as the
   Over Reverie opening. What it is about is one tap (optional); the order number only shows for an order.
   Phone: title, text, form, photo, readouts (the form on the first screen). Desktop: intro and photo left, form right. */
.contact { display: flex; flex-direction: column; padding: clamp(40px, 7vw, 104px) var(--inline) var(--section-space); }
.contact-intro { display: contents; }
.contact-title { order: 1; }
.contact-text { order: 2; margin-top: 18px; font-size: 17px; max-width: 32rem; }
.contact-panel { order: 3; margin-top: 32px; }
.contact-shot { order: 4; margin-top: 40px; }
.contact-lines { order: 5; margin-top: 32px; }
.contact-lines { display: grid; border-top: 1px solid var(--line); }
.contact-line { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-line dt { color: var(--chrome); }
.contact-line dd { margin: 0; color: var(--headlight); font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.contact-line a { color: inherit; text-decoration: none; background: linear-gradient(var(--xenon), var(--xenon)) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
.contact-line a:hover { color: var(--xenon); background-size: 100% 1px; }
.contact-coords { display: block; margin-top: 4px; font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; color: var(--dim); white-space: pre; }

.contact-panel { position: relative; padding: clamp(22px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgb(17 18 22 / .7), rgb(5 5 7 / .4)); }
.contact-frame {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --c: rgb(238 241 245 / .55);
  --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px, linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px, linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}
.contact-form { display: grid; gap: 22px; }
.contact-form .field + .field { margin-top: 0; }
.field-pair { display: grid; gap: 22px; }
.field:focus-within > .field-label { color: var(--xenon); }
.field-label { transition: color .2s; }

/* what it is about: chips */
.topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.topics legend { margin-bottom: 10px; padding: 0; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.topic span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--chrome);
  font-size: 14px;
  transition: border-color .2s, color .2s, background-color .2s, box-shadow .2s;
}
.topic:hover span { border-color: rgb(255 255 255 / .32); color: var(--headlight); }
.topic input:checked + span { border-color: var(--xenon); background: rgb(185 211 255 / .1); color: var(--headlight); box-shadow: 0 0 18px rgb(185 211 255 / .18); }
.topic input:focus-visible + span { outline: 2px solid var(--xenon); outline-offset: 3px; }
/* the order number only for an order (where the browser can tell; elsewhere it simply stays) */
@supports selector(:has(*)) {
  .contact-form:not(:has([data-topic-order]:checked)) .field--order { display: none; }
}
.contact-send { display: grid; gap: 12px; justify-items: start; }
.contact-send .button { min-width: 220px; }

.contact-sent { display: grid; gap: 14px; justify-items: start; padding: 8px 0; outline: none; }
.contact-sent-title { font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1.15 var(--display); color: var(--headlight); }
.contact-sent-text { color: var(--chrome); max-width: 30em; }
.contact-sent .button { margin-top: 10px; }

/* the headlight: a cropped X6 at 16:9 (contact-x6-*.webp); the beam sits exactly on the lamp */
.contact-shot { position: relative; margin-inline: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--tarmac); }
.contact-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.contact-shot img { width: 100%; height: 100%; object-fit: cover; }
.contact-shot-beam {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 9% 8% at 24% 53%, rgb(255 255 255), rgb(255 255 255 / 0) 72%),
    radial-gradient(ellipse 9% 8% at 40% 52%, rgb(255 255 255), rgb(255 255 255 / 0) 72%),
    radial-gradient(ellipse 70% 2.6% at 32% 53%, rgb(238 241 245), rgb(238 241 245 / 0) 72%),
    radial-gradient(ellipse 22% 15% at 32% 53%, rgb(238 241 245 / .6), rgb(238 241 245 / 0) 75%),
    radial-gradient(ellipse 46% 34% at 32% 53%, rgb(185 211 255 / .45), rgb(185 211 255 / 0) 72%);
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .contact-shot:hover .contact-shot-beam { animation: high-beam-once .7s ease-out; }
  }
  .contact:has(.contact-sent) .contact-shot-beam { animation: high-beam 1.5s ease-out .7s; }
  @keyframes high-beam-once {
    0% { opacity: 0; }
    18%, 34% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes high-beam {
    0% { opacity: 0; }
    8%, 20% { opacity: 1; }
    30% { opacity: 0; }
    42%, 54% { opacity: 1; }
    100% { opacity: 0; }
  }
}

@media (min-width: 700px) {
  .field-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: clamp(56px, 7vw, 128px); }
  .contact-intro { display: grid; align-content: start; grid-column: 1; grid-row: 1; }
  .contact-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .contact-shot { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .contact-lines { margin-top: 28px; }
}
.article-list { display: grid; list-style: none; border-top: 1px solid var(--line); }
.article-link { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--chrome); }
.article-link h2 { color: var(--headlight); font: 600 1.25rem/1.35 var(--text); }
.article-link:hover h2 { color: var(--xenon); }
.article-image { margin: 0 0 32px; }

/* Shopify's own policy pages (privacy, returns, terms, shipping) */
.shopify-policy__container {
  max-width: calc(46rem + 2 * var(--gutter)) !important;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) var(--section-space) !important;
}
.shopify-policy__title h1 { margin-bottom: 28px; font: 400 clamp(1.4rem, 1rem + 2vw, 2.4rem)/1.2 var(--display); letter-spacing: -.02em; }
.shopify-policy__body { color: var(--chrome); }
.shopify-policy__body h2, .shopify-policy__body h3, .shopify-policy__body strong { color: var(--headlight); }
.shopify-policy__body a { color: var(--headlight); text-decoration-color: var(--xenon); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); color: var(--chrome); font-size: 15px; }
.footer-inner { display: grid; gap: 36px; padding: 56px var(--inline) 40px; }
.footer-brand p + p { margin-top: 12px; max-width: 24em; }
.footer-social { display: flex; flex-wrap: wrap; gap: 6px; margin-left: -10px; }
.footer-social a { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 10px; color: var(--chrome); text-decoration: none; }
.footer-social a.ig-link { display: inline-flex; gap: 10px; padding: 0 12px 0 10px; }
.footer-social a:hover { color: var(--headlight); background: var(--tarmac); }

/* Instagram (snippets/instagram-link.liquid): the icon and the handle, the line drawing in on hover */
.ig-link { display: inline-flex; align-items: center; gap: 10px; color: var(--chrome); text-decoration: none; transition: color .2s; }
.ig-link > span { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .35s var(--ease-out); padding-bottom: 2px; }
.ig-link:hover { color: var(--headlight); }
.ig-link:hover > span { background-size: 100% 1px; }
.ig-link .icon { flex: none; }
.gallery-ig, .about-ig { margin: 4px 0 0; font-size: 15px; }
.contact-line .ig-link > span { padding: 0; background: none; }
.gallery-ig .ig-link, .about-ig .ig-link { min-height: 44px; }
.footer-col h2 { margin-bottom: 14px; font: 400 10.5px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hud); }
.footer-col ul { list-style: none; display: grid; gap: 4px; }
.footer-col a { display: inline-block; padding: 4px 0; color: var(--chrome); text-decoration: none; }
.footer-col a:hover { color: var(--headlight); }
.footer-company p { line-height: 1.75; }
.footer-mark { padding: 8px var(--inline) 28px; }
.footer-wordmark { opacity: .9; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px var(--inline) calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font: 400 10.5px/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.payment-icons { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.payment-icon { width: 38px; height: 24px; }
@media (min-width: 700px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 72px; }
}

/* ---------- Password page ---------- */

body.template-password { min-height: 100svh; background: transparent; }
.password-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--asphalt); }
.password-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .34; }
.password-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 5 7 / .45), var(--asphalt) 92%); }
.password {
  display: grid;
  align-content: center;
  min-height: 100svh;
  max-width: calc(36rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.password-wordmark { width: min(360px, 76vw); margin-bottom: 44px; }
.password h1 { margin-bottom: 14px; }
.password > p { color: var(--chrome); }
.password-entry { margin-top: 40px; color: var(--chrome); font-size: 14px; }
.password-entry summary { cursor: pointer; width: fit-content; }
.password-entry .note { margin-top: 12px; }
.password-entry .note a { color: var(--chrome); }
@media (prefers-reduced-motion: no-preference) {
  .password-wordmark .wordmark-glint { animation: glint 1.6s .6s cubic-bezier(.5, 0, .3, 1) both; }
}

/* ---------- Motion ----------
   Everything below only runs when the browser allows motion. Content is never hidden
   without JavaScript: the hidden starting states hang off .motion-ok, which the layout
   sets before the first paint and removes again if theme.js does not start. */

/* page to page: the old page dims, the new one lights up; the header stays in place.
   Not on iPhone and iPad (-webkit-touch-callout only exists there): Safari on iOS ends these transitions with a
   jump of the whole page, so there the next page simply appears (with the loading line along the top). */
@media (prefers-reduced-motion: no-preference) {
  @supports not (-webkit-touch-callout: none) {
    @view-transition { navigation: auto; }
  }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .25s ease-in both; }
::view-transition-new(root) { animation: vt-in .75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; filter: brightness(.2); } }

/* a thin xenon line runs along the top while the next page loads */
.nav-progress {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--xenon));
  box-shadow: 0 0 12px var(--xenon);
  transform-origin: left;
  scale: 0 1;
  opacity: 0;
  pointer-events: none;
}
.is-navigating .nav-progress { opacity: 1; animation: nav-progress 2.4s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-progress { to { scale: .9 1; } }

/* header slides away while scrolling down, comes back on the way up */
.motion-ok .site-header { transition: translate .45s var(--ease-out), background-color .35s, border-color .35s; }
.header-hidden .site-header { translate: 0 -101%; }

/* buttons: a light sweep on hover */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(185 211 255 / .45) 50%, transparent 70%);
  translate: -120% 0;
  pointer-events: none;
}
.button--ghost::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .14) 50%, transparent 70%); }
.motion-ok .button:hover:not([disabled])::after { translate: 120% 0; transition: translate .75s var(--ease-out); }

/* scroll reveals */
.motion-ok [data-reveal] {
  transition: opacity .9s var(--ease-out), translate 1s var(--ease-out), clip-path 1.25s cubic-bezier(.7, 0, .2, 1);
  transition-delay: calc(min(var(--i, 0), 8) * 90ms);
}
.motion-ok [data-reveal="up"]:not(.is-in) { opacity: 0; translate: 0 28px; }
/* buttons that reveal keep their own hover transitions, without the stagger delay */
.motion-ok .button[data-reveal] {
  transition: opacity .9s var(--ease-out), translate 1s var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
  transition-delay: calc(min(var(--i, 0), 8) * 90ms), calc(min(var(--i, 0), 8) * 90ms), 0s, 0s, 0s, 0s;
}
.motion-ok [data-reveal="fade"]:not(.is-in) { opacity: 0; }
.motion-ok [data-reveal="title"] { clip-path: inset(-.4em -.3em -.4em -.3em); }
.motion-ok [data-reveal="title"]:not(.is-in) { clip-path: inset(-.4em -.3em 100% -.3em); translate: 0 .45em; opacity: 0; }
.motion-ok [data-reveal="wipe"] { clip-path: inset(0); }
.motion-ok [data-reveal="wipe"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
/* the product page photo opens from the top down, quickly, with the scanner riding just behind the edge */
.motion-ok .scan-stage[data-reveal="wipe"] { transition: clip-path .75s cubic-bezier(.4, 0, .2, 1); }
.motion-ok .scan-stage[data-reveal="wipe"]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.motion-ok [data-reveal="glint"]:not(.is-in) { opacity: 0; }
.motion-ok [data-reveal="glint"].is-in .wordmark-glint { animation: glint 1.6s .35s cubic-bezier(.5, 0, .3, 1) both; }
/* rows: content rises, and a light runs along the line underneath */
.motion-ok [data-reveal="row"] { position: relative; }
.motion-ok [data-reveal="row"]:not(.is-in) { opacity: 0; translate: 0 16px; }
.motion-ok [data-reveal="row"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--xenon), transparent) no-repeat;
  background-size: 35% 100%;
  background-position: -60% 0;
  opacity: 0;
  pointer-events: none;
}
.motion-ok [data-reveal="row"].is-in::after { animation: row-sweep 1.4s calc(min(var(--i, 0), 8) * 90ms + .15s) var(--ease-out) both; }
@keyframes row-sweep {
  0% { opacity: 0; background-position: -60% 0; }
  15% { opacity: 1; }
  100% { opacity: 0; background-position: 160% 0; }
}

/* the product photo: scanner and lock-on */
.motion-ok [data-scan]:not(.is-live) :is(.callout-point, .callout-reticle, .callout-ring, .callout-line, .callout-label) { opacity: 0; }
.motion-ok [data-scan].is-live .scanline { animation: scan 1.9s .2s linear both; }
@keyframes scan {
  0% { top: 0; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.motion-ok [data-scan].is-live .callout { --t: calc(.2s + var(--yn, 50) * .019s); }
.motion-ok [data-scan].is-live .callout-point { animation: point-in .3s var(--t) var(--ease-out) both; }
.motion-ok [data-scan].is-live .callout-reticle { animation: lock-on .7s var(--t) both; }
.motion-ok [data-scan].is-live .callout-ring { animation: ping 3.2s calc(var(--t) + .6s) ease-out infinite; }
.motion-ok [data-scan].is-live .callout-line { animation: draw .45s calc(var(--t) + .35s) var(--ease-out) both; }
.motion-ok [data-scan].is-live .callout-label { animation: fade .01s calc(var(--t) + .6s) both; }
@keyframes point-in { from { scale: 0; opacity: 0; } }
@keyframes lock-on {
  0% { opacity: 0; scale: 2.8; rotate: 45deg; }
  45% { opacity: 1; scale: .82; rotate: 0deg; }
  58% { opacity: .2; }
  70% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ping {
  0% { opacity: .9; scale: 1; }
  60%, 100% { opacity: 0; scale: 3.4; }
}
@keyframes draw { from { scale: 0 1; } }

/* scroll-linked depth, where the browser supports it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline: --hero block; }
    .hero-media { animation: hero-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-lockup { animation: hero-fade linear both; animation-timeline: --hero; animation-range: exit 0% exit 55%; }
    @keyframes hero-drift { to { translate: 0 20%; scale: 1.05; } }
    @keyframes hero-fade { to { opacity: 0; translate: 0 -6vh; filter: blur(5px); } }

    .story { view-timeline: --story block; }
    .story-media img { scale: 1.1; animation: story-pan linear both; animation-timeline: --story; animation-range: cover 0% cover 100%; }
    @keyframes story-pan { from { translate: 0 -4%; } to { translate: 0 4%; } }

    .effect-media img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes settle { from { scale: 1.1; } to { scale: 1; } }

  }
}

/* ---------- Cookie banner (Shopify's own, restyled) ----------
   Shopify builds this banner itself (Instellingen > Privacy van klanten) and adds its own styles after ours, so every
   rule here is !important. It is kept as small as it can be: a dark glass card with the loader's running light on its
   top edge, low in the corner on a computer and a slim strip at the bottom of a phone. The dialog's own display is
   never touched, because Shopify shows and hides the banner with it. */
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) {
  position: fixed !important;
  inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: calc(100svh - 20px) !important;
  margin: 0 !important;
  padding: 12px 11px 11px 14px !important;
  overflow: auto !important;
  transform: none !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important;
  background: rgb(11 12 16 / .95) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 50px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .04) !important;
  color: var(--chrome) !important;
  font: 400 12px/1.45 var(--text) !important;
  text-align: left !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog)::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 1px;
  background: linear-gradient(90deg, rgb(185 211 255 / 0), rgb(185 211 255 / .75) 28%, var(--headlight) 50%, rgb(185 211 255 / .75) 72%, rgb(185 211 255 / 0));
  opacity: .85;
  pointer-events: none;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__wrapper {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__body {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* the title only for screen readers: the sentence already says it is about cookies */
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(h2, #shopify-pc__banner__body-title) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(p, span, div) {
  color: var(--chrome) !important;
  font: inherit !important;
  letter-spacing: 0 !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(p, .shopify-pc__banner__body > span) { margin: 0 !important; }
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) a {
  color: var(--headlight) !important;
  text-decoration: underline !important;
  text-decoration-color: rgb(238 241 245 / .35) !important;
  text-underline-offset: 2px !important;
  white-space: nowrap;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) a:hover { text-decoration-color: var(--xenon) !important; }

/* the buttons: refuse and accept side by side and the same size, the preferences as a quiet link before them */
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__btns {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__btns button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--headlight) !important;
  font: 600 13px/1.2 var(--text) !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-decline, .shopify-pc__banner__btn-decline) { order: 2 !important; }
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-accept, .shopify-pc__banner__btn-accept) {
  order: 3 !important;
  border-color: var(--headlight) !important;
  background: var(--headlight) !important;
  color: #0a0b0d !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-manage-prefs, .shopify-pc__banner__btn-manage-prefs) {
  order: 1 !important;
  margin-right: auto !important;
  padding: 0 2px !important;
  border-color: transparent !important;
  color: var(--chrome) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  text-decoration-color: rgb(169 174 181 / .4) !important;
  text-underline-offset: 3px !important;
}
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-decline, .shopify-pc__banner__btn-decline):hover { border-color: var(--xenon) !important; }
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-accept, .shopify-pc__banner__btn-accept):hover { background: #fff !important; box-shadow: 0 0 24px rgb(185 211 255 / .3) !important; }
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-manage-prefs, .shopify-pc__banner__btn-manage-prefs):hover { color: var(--headlight) !important; }
:is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(button, a):focus-visible { outline: 2px solid var(--xenon) !important; outline-offset: 2px !important; box-shadow: none !important; }
/* very narrow phones: refuse and accept share the first row, the preferences link drops below */
@media (max-width: 359px) {
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__btns button { flex: 1 1 auto !important; }
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-decline, .shopify-pc__banner__btn-decline) { order: 1 !important; }
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-accept, .shopify-pc__banner__btn-accept) { order: 2 !important; }
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) :is(#shopify-pc__banner__btn-manage-prefs, .shopify-pc__banner__btn-manage-prefs) { order: 3 !important; flex: 1 0 100% !important; min-height: 28px !important; }
}
/* computer: a small card low in the left corner, clear of the way into the shop on the right */
@media (min-width: 600px) {
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) {
    inset: auto auto 20px 20px !important;
    width: 392px !important;
    max-width: calc(100vw - 40px) !important;
    padding: 15px 14px 14px 17px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) .shopify-pc__banner__btns button { min-height: 36px !important; }
}
@media (min-width: 1000px) {
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) { inset: auto auto 24px 24px !important; }
}
/* on the homepage it waits for the opening: it comes in once the dark has lifted */
html.gate-on :is(#shopify-pc__banner, .shopify-pc__banner__dialog) { visibility: hidden !important; opacity: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  :is(#shopify-pc__banner, .shopify-pc__banner__dialog) { animation: cookie-in .5s var(--ease-out) .15s both; }
  html.gate-on :is(#shopify-pc__banner, .shopify-pc__banner__dialog) { animation: none; }
  @keyframes cookie-in { from { opacity: 0; translate: 0 10px; } }
}

/* the preferences window behind "Voorkeuren beheren": the same night */
#shopify-pc__prefs__overlay { background: rgb(0 0 0 / .65) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) {
  border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important;
  background: var(--tarmac) !important;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6) !important;
  color: var(--chrome) !important;
  font-family: var(--text) !important;
}
/* only the known containers get the dark; the switches keep Shopify's own colours so on and off stay readable */
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is([class*="shopify-pc__prefs__header"]:not(button), .shopify-pc__prefs__scrollable, .shopify-pc__prefs__intro, .shopify-pc__prefs__options, .shopify-pc__prefs__option) { background-color: var(--tarmac) !important; border-color: var(--line) !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is(p, li) { color: var(--chrome) !important; font-family: var(--text) !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) label { color: var(--headlight) !important; font-family: var(--text) !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is(h2, h3, .shopify-pc__prefs__header-title, .shopify-pc__prefs__intro-main) { color: var(--headlight) !important; font-family: var(--text) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) a { color: var(--headlight) !important; text-underline-offset: 2px; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is(.shopify-pc__prefs__header-save, .shopify-pc__prefs__header-accept, .shopify-pc__prefs__header-decline) {
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--headlight) !important;
  font: 600 13px/1.2 var(--text) !important;
  text-decoration: none !important;
}
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is(.shopify-pc__prefs__header-save, .shopify-pc__prefs__header-accept) { border-color: var(--headlight) !important; background: var(--headlight) !important; color: #0a0b0d !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) .shopify-pc__prefs__header-close { color: var(--headlight) !important; background: transparent !important; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) .shopify-pc__prefs__header-close svg :is(path, line) { stroke: currentColor; }
:is(#shopify-pc__prefs__dialog, .shopify-pc__prefs__dialog) :is(button, a, input, label):focus-visible { outline: 2px solid var(--xenon) !important; outline-offset: 2px !important; box-shadow: none !important; }

/* ---------- Over Reverie: the poster as a page (sections/about.liquid) ----------
   The brand posters' HUD frame and corner notes around the opening line; the page's story set large, lighting up
   word by word as you scroll (theme.js); the four words of the poster on night photos; the first product; the close. */

.about-open {
  --frame: clamp(12px, 2.2vw, 30px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "tl tr" "head head" "bl br";
  gap: 24px 16px;
  min-height: calc(100svh - var(--header-h));
  padding: calc(var(--frame) + clamp(18px, 2.4vw, 32px));
  overflow: hidden;
  background: radial-gradient(60% 50% at 50% 52%, rgb(185 211 255 / .06), transparent 70%), var(--asphalt);
}
/* the frame: a hairline box with brighter corners, as on the posters */
.about-frame { position: absolute; inset: var(--frame); z-index: -1; border: 1px solid var(--line); pointer-events: none; }
.about-frame span {
  position: absolute;
  inset: -1px;
  --c: rgb(238 241 245 / .55);
  --l: clamp(14px, 1.6vw, 24px);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}
.about-note { margin: 0; font-size: 9.5px; line-height: 1.8; color: var(--chrome); }
.about-note--tl { grid-area: tl; }
.about-note--tr { grid-area: tr; justify-self: end; text-align: right; }
.about-note--bl { grid-area: bl; align-self: end; }
.about-note--br { grid-area: br; justify-self: end; align-self: end; text-align: right; }
.about-head { grid-area: head; align-self: center; display: grid; justify-items: center; gap: clamp(16px, 2vw, 26px); text-align: center; }
.about-kicker { margin: 0; color: var(--xenon); }
/* the line in chrome, like the wordmark */
.about-statement {
  font: 400 clamp(1.8rem, .6rem + 5.2vw, 6rem)/1.04 var(--display);
  letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 0%, #dfe3e9 38%, #8b9098 52%, #e9ecf0 70%, #b9bec6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.about-vertical {
  position: absolute;
  top: 50%;
  right: calc(var(--frame) + clamp(14px, 4vw, 72px));
  z-index: -1;
  writing-mode: vertical-rl;
  translate: 0 -50%;
  font-size: clamp(1.1rem, .7rem + 1.5vw, 2.3rem);
  letter-spacing: .35em;
  white-space: nowrap;
  color: rgb(238 241 245 / .08);
  pointer-events: none;
}
@media (min-width: 700px) { .about-note { font-size: 10.5px; } }

/* the story, word by word */
.about-story { padding: var(--section-space) var(--inline); }
.about-story-text { max-width: 58rem; font: 500 clamp(1.45rem, .95rem + 2.1vw, 2.75rem)/1.32 var(--text); letter-spacing: -.015em; color: var(--headlight); text-wrap: pretty; }
.about-story-text > * + * { margin-top: .9em; }
.about-story-text.is-igniting .ignite-word { color: #2c2f35; transition: color .45s ease; }
.about-story-text.is-igniting .ignite-word.is-lit { color: var(--headlight); }

/* the four words */
.about-pillars { padding: 0 var(--inline) var(--section-space); }
.about-pillars-title { margin: 0 0 22px; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; }
.pillar { position: relative; overflow: hidden; border-radius: 4px; background: var(--tarmac); }
.pillar-shot { margin: 0; aspect-ratio: 3 / 4; }
.pillar-shot img { width: 100%; height: 100%; object-fit: cover; }
.pillar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(5 5 7 / .85) 0%, rgb(5 5 7 / 0) 45%); pointer-events: none; }
.pillar-word { position: absolute; left: 14px; bottom: 14px; z-index: 1; font: 400 clamp(1rem, .7rem + 1.2vw, 1.75rem)/1.1 var(--display); letter-spacing: -.01em; color: var(--headlight); }
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pillar-word { left: 20px; bottom: 20px; }
}

/* the first product */
.about-first { display: grid; gap: 32px; padding: 0 var(--inline) var(--section-space); align-items: center; }
.about-first-shot { margin: 0; max-width: 460px; overflow: hidden; border-radius: 4px; background: var(--tarmac); }
.about-first-shot img { width: 100%; height: auto; }
.about-first-copy { display: grid; gap: 16px; justify-items: start; max-width: 34rem; }
.about-first-copy .section-title a { color: inherit; text-decoration: none; }
.about-first-text { color: var(--chrome); font-size: 17px; }
.about-first-copy .button { margin-top: 8px; }
@media (min-width: 900px) {
  .about-first { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 120px); }
}

/* the close */
.about-close { display: grid; justify-items: center; gap: 22px; padding: calc(var(--section-space) * .6) var(--inline) var(--section-space); text-align: center; border-top: 1px solid var(--line); }
.about-close-line { font: 400 clamp(1.7rem, .9rem + 3.4vw, 4.4rem)/1.08 var(--display); letter-spacing: -.03em; color: var(--headlight); text-wrap: balance; }
.about-close-small { margin: 0; line-height: 2.1; }
.about-close-small span[lang="ja"] { letter-spacing: .3em; color: var(--chrome); }

/* the frame draws itself out from the middle when the page opens */
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .about-frame { animation: frame-draw 1.4s cubic-bezier(.7, 0, .2, 1) .15s both; }
  .motion-ok .about-vertical { animation: fade 2.4s ease .9s both; }
  @keyframes frame-draw { from { clip-path: inset(50% 50% 50% 50%); opacity: 0; } 30% { opacity: 1; } to { clip-path: inset(-2px); } }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}