/* ═══════════════════════════════════════════════════════════════
   RaceVector — site 3
   The film hero from site 1, the looping backgrounds from site 2,
   the real app screens throughout. Dark only: the hero is a night
   film and a light theme would fight it.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Metropolis";
  src:url("../assets/fonts/metropolis-800.woff2") format("woff2"),
      url("../assets/fonts/metropolis-800.woff")  format("woff");
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --display:"Metropolis","Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* night */
  --bg:#030E18; --bg-2:#061624;
  --ink:#F7F9FC; --muted:#A5B2C5; --faint:#6A7C92;
  --accent:#92F5C6; --fill:#92F5C6; --fill-ink:#031820;
  --line:rgba(165,178,197,.16); --line-2:rgba(165,178,197,.3);
  --slate:#8B9BAD;
  --seam:#0B1315;
  --veil-a:.72; --veil-b:.84;

  --gut:clamp(20px,5vw,72px);
  --wrap:1340px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="light"]{
  /* race morning — a parallel set, not an inversion */
  --bg:#F4F7F9; --bg-2:#FFFFFF;
  --ink:#06121D; --muted:#51657A; --faint:#7C8CA0;
  --accent:#0B6E4F;          /* mint cannot carry text on white */
  --fill:#92F5C6;            /* the fill is identical: that is the brand */
  --fill-ink:#031820;
  --line:rgba(6,18,29,.13); --line-2:rgba(6,18,29,.26);
  --slate:#5B6B7D;
  --seam:#EAF0F3;
  --veil-a:.62; --veil-b:.78;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#F4F7F9; --bg-2:#FFFFFF; --ink:#06121D; --muted:#51657A; --faint:#7C8CA0;
    --accent:#0B6E4F; --line:rgba(6,18,29,.13); --line-2:rgba(6,18,29,.26);
    --slate:#5B6B7D; --seam:#EAF0F3; --veil-a:.62; --veil-b:.78;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  transition:background .5s var(--ease), color .5s var(--ease);
  font-family:var(--body); font-size:clamp(16px,1.02vw,18px); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--fill); color:var(--fill-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }

/* ── type ─────────────────────────────────────────────────────── */

.cut{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,5.4vw,4.4rem);
  line-height:1.03; letter-spacing:-.065em; margin:0 0 .5em; text-wrap:balance;
}
.cut .ln{ display:block; overflow:hidden; }
.cut .ln > span{ display:block; will-change:transform; }
.cut em{ font-style:normal; color:var(--accent); }

.kicker{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.55; }

@media (max-width:700px){
  /* the longest kicker is 35 characters; at the desktop tracking it wraps here */
  .kicker{ font-size:.6rem; letter-spacing:.15em; gap:10px; }
  .kicker::before{ width:18px; }
}

.say{ font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; color:var(--muted);
  max-width:50ch; margin:0 0 1em; }
.note{ font-size:.92rem; color:var(--muted); border-left:2px solid var(--line-2);
  padding-left:16px; margin:26px 0 0; max-width:48ch; }
.row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ── buttons ──────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; min-height:48px;
  background:var(--fill); color:var(--fill-ink);
  border:0; border-radius:999px; cursor:pointer;
  font-family:var(--body); font-size:.98rem; font-weight:650; line-height:1;
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.btn svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.btn:hover{ filter:brightness(1.06); } .btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.985); }
.btn--sm{ min-height:40px; padding:11px 18px; font-size:.88rem; }
.btn--lg{ min-height:58px; padding:18px 30px; font-size:1.05rem; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }

/* ── chrome ───────────────────────────────────────────────────── */

.prog{ position:fixed; left:0; top:0; height:2px; z-index:70; width:0%;
  background:var(--fill); box-shadow:0 0 12px color-mix(in oklab,var(--fill) 70%,transparent); }

.bar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px var(--gut); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.bar.is-stuck{
  background:color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.bar__right{ display:flex; align-items:center; gap:12px; }
.toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; }
.toggle button{ appearance:none; border:0; background:transparent; cursor:pointer;
  width:34px; height:28px; border-radius:999px; color:var(--faint);
  display:grid; place-items:center; transition:background .25s var(--ease), color .25s var(--ease); }
.toggle button svg{ width:15px; height:15px; }
.toggle button[aria-pressed="true"]{ background:var(--fill); color:var(--fill-ink); }

.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand svg{ width:30px; height:24px; flex:0 0 auto; color:var(--accent); overflow:visible; }
.brand span{ font-size:12px; font-weight:600; letter-spacing:4px; white-space:nowrap; }

/* ── film hero ────────────────────────────────────────────────── */

.film{ height:420vh; position:relative; }
.film__stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
.film__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.film__loop{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease);
}
:root[data-theme="light"] .film__canvas{ opacity:0; }
:root[data-theme="light"] .film__loop.is-playing{ opacity:1; }
.film__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(in oklab 85deg, var(--bg) 0%,
      color-mix(in oklab, var(--bg) calc(var(--veil-a) * 100%), transparent) 42%,
      color-mix(in oklab, var(--bg) 10%, transparent) 78%, transparent 100%),
    linear-gradient(in oklab 180deg,
      color-mix(in oklab, var(--bg) 80%, transparent) 0%, transparent 24%, transparent 62%,
      color-mix(in oklab, var(--bg) 90%, transparent) 92%, var(--bg) 100%);
}
.film__ui{
  position:absolute; left:var(--gut); right:var(--gut); top:50%; transform:translateY(-50%);
  max-width:min(840px,62vw); z-index:3;
}
.film__ui .cut{ font-size:clamp(2.5rem,7vw,6rem); }
/* the film's second half ran empty; the quote lands there, one line at a time */
.quote{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center; padding:0 var(--gut);
  pointer-events:none;
}
.quote__l{
  grid-area:1/1; margin:0; text-align:center; max-width:17ch;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,5.4vw,4.6rem); line-height:1.04; letter-spacing:-.062em;
  color:var(--ink);
  opacity:0;                       /* GSAP owns opacity and blur from here */
  text-shadow:0 2px 50px color-mix(in oklab, var(--bg) 85%, transparent);
}
/* words keep the line breaking; characters are what scatter */
.quote__l .w{ display:inline-block; }
.quote__l .c{ display:inline-block; will-change:transform; }
.quote__l em{ font-style:normal; color:var(--accent); }

/* the middle beat gets a small lead-in and sets in caps, so it reads as the
   peak of the three rather than one more sentence */
.quote__l--caps{ text-transform:uppercase; letter-spacing:-.045em; max-width:13ch; }
.quote__lead{
  display:block; text-transform:uppercase;
  font-family:var(--mono); font-weight:400;
  font-size:clamp(.62rem,.8vw,.76rem); letter-spacing:.24em;
  color:var(--muted); margin-bottom:.9em;
}


/* the film's closing beat: the mark draws itself, then the name arrives */
.brandbeat{
  position:absolute; inset:0; z-index:3;
  display:grid; place-content:center; justify-items:center;
  gap:clamp(20px,3.4vh,40px);
  padding:0 var(--gut); pointer-events:none; opacity:0;
}
.brandbeat__mark{
  width:clamp(104px,15vw,200px); height:auto; overflow:visible;
  color:var(--accent);
  filter:drop-shadow(0 2px 40px color-mix(in oklab, var(--bg) 80%, transparent));
}
.brandbeat__word{
  margin:0; font-family:var(--body); font-weight:600; color:var(--ink);
  font-size:clamp(1rem,2.3vw,1.95rem);
  letter-spacing:.34em; text-indent:.34em;   /* offset the trailing tracking */
  white-space:nowrap;
  text-shadow:0 2px 40px color-mix(in oklab, var(--bg) 85%, transparent);
}
.brandbeat__word .c{ display:inline-block; will-change:transform; }

.cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint); transition:opacity .4s var(--ease);
}
.cue i{ width:1px; height:32px; background:linear-gradient(var(--accent),transparent); }
.cue.is-gone{ opacity:0; }
@media (max-width:900px){
  .film__ui{ max-width:none; top:auto; bottom:22vh; transform:none; }
  .film__veil{ background:
    linear-gradient(in oklab 180deg, color-mix(in oklab, var(--bg) 78%, transparent) 0%,
      color-mix(in oklab, var(--bg) 15%, transparent) 22%,
      color-mix(in oklab, var(--bg) 74%, transparent) 58%,
      color-mix(in oklab, var(--bg) 95%, transparent) 86%, var(--bg) 100%); }
}

/* ── bands with looping footage ───────────────────────────────── */

.band{ position:relative; padding:clamp(100px,15vh,190px) 0; overflow:hidden; }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:1;                 /* above the poster, or it never shows */
  transition:opacity .9s var(--ease);
}
.band__vid.is-playing{ opacity:1; }
.band__still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.band__bg::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(in oklab 90deg, var(--bg) 2%,
      color-mix(in oklab, var(--bg) calc(var(--veil-b) * 100%), transparent) 46%,
      color-mix(in oklab, var(--bg) 50%, transparent) 100%),
    linear-gradient(in oklab 180deg, var(--bg) 0%, transparent 18%, transparent 80%, var(--bg) 100%);
}
.band .wrap{ position:relative; z-index:3; }

.split{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(36px,6vw,100px); align-items:center; }
.split--rev{ grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); }
@media (max-width:980px){
  .split,.split--rev{ grid-template-columns:1fr; }
  .split--rev > figure{ order:2; }
}

.phone img{
  width:auto; max-width:100%; height:auto; max-height:72svh; margin-inline:auto;
  border-radius:clamp(22px,2.6vw,38px);
  background:#EDF2F7;
  box-shadow:0 0 0 1px rgba(247,249,252,.1), 0 2px 2px rgba(0,0,0,.3),
             0 34px 80px -24px rgba(0,0,0,.85);
}
.phone{ margin:0; max-width:380px; justify-self:center; }

/* ── verdict list ─────────────────────────────────────────────── */

.verdicts{ list-style:none; margin:clamp(26px,4vh,40px) 0 0; padding:0; }
.verdicts li{
  display:grid; grid-template-columns:minmax(170px,auto) 1fr; gap:8px 24px;
  align-items:baseline; padding:14px 0; border-top:1px solid var(--line);
}
.verdicts li:last-child{ border-bottom:1px solid var(--line); }
.vk{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--accent);
  background:rgba(146,245,198,.09); border:1px solid rgba(146,245,198,.24);
  padding:4px 9px; border-radius:6px; justify-self:start; white-space:nowrap;
}
.vk--muted{ color:var(--slate); background:rgba(139,155,173,.1); border-color:rgba(139,155,173,.26); }
.verdicts p{ margin:0; font-size:.94rem; line-height:1.5; color:var(--muted); }
@media (max-width:620px){ .verdicts li{ grid-template-columns:1fr; } }

/* ── facts ────────────────────────────────────────────────────── */

.facts{ margin:clamp(24px,3.5vh,38px) 0 0; }
.facts > div{ display:grid; grid-template-columns:minmax(130px,190px) 1fr; gap:6px 24px;
  padding:14px 0; border-top:1px solid var(--line); }
.facts > div:last-child{ border-bottom:1px solid var(--line); }
.facts dt{ font-weight:650; font-size:.96rem; }
.facts dd{ margin:0; font-size:.93rem; color:var(--muted); line-height:1.5; }
@media (max-width:620px){ .facts > div{ grid-template-columns:1fr; } }

/* ── paired stats ─────────────────────────────────────────────── */

.duo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(16px,2.4vw,28px); margin-top:clamp(26px,4vh,40px); }
.stat{ border:1px solid var(--line); border-radius:16px; padding:clamp(18px,2.2vw,26px);
  background:color-mix(in oklab, var(--bg-2) 68%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.stat__k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.stat__n{ font-family:var(--display); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1; margin:0 0 .3em;
  font-variant-numeric:tabular-nums; }
.stat__c{ margin:0; font-size:.86rem; color:var(--muted); line-height:1.45; }

/* ── the six-screen walkthrough ───────────────────────────────── */

.walk{ position:relative; background:var(--bg-2); }
/* the background lives INSIDE the pinned element, or it would scroll away
   behind the pin spacer while the content stayed fixed */
.walk__pin{ height:100svh; display:flex; align-items:center; overflow:hidden; position:relative; }
.walk__bg{ position:absolute; inset:0; z-index:0; }
.walk__bg::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(in oklab 90deg,
      color-mix(in oklab, var(--bg) 86%, transparent) 0%,
      color-mix(in oklab, var(--bg) 78%, transparent) 38%,
      color-mix(in oklab, var(--bg) 88%, transparent) 100%),
    linear-gradient(in oklab 180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
}
.walk__grid{ position:relative; z-index:3; }
.walk__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,88px); align-items:center;
}
.walk__stage{
  position:relative; width:100%; aspect-ratio:1170/2532;
  max-height:min(74svh,680px); justify-self:center; margin-inline:auto;
}
.walk__stage img{
  position:absolute; inset:0; width:auto; height:100%; margin-inline:auto;
  border-radius:clamp(18px,2.2vw,32px); background:#EDF2F7;
  box-shadow:0 0 0 1px rgba(247,249,252,.1), 0 30px 70px -20px rgba(0,0,0,.8);
  opacity:0; transition:opacity .35s var(--ease);
}
.walk__stage img.is-on{ opacity:1; }

.steps{ list-style:none; margin:clamp(20px,3vh,32px) 0 0; padding:0; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:start;
  padding:11px 0; border-top:1px solid var(--line);
  opacity:.34; transition:opacity .35s var(--ease);
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps li.is-on{ opacity:1; }
.steps li > span{ font-family:var(--mono); font-size:.7rem; color:var(--accent);
  padding-top:3px; letter-spacing:.08em; }
.steps b{ display:block; font-size:1rem; font-weight:650; margin-bottom:3px; }
.steps p{ margin:0; font-size:.9rem; line-height:1.5; color:var(--muted);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease); }
.steps li.is-on p{ max-height:9em; opacity:1; margin-top:2px; }
/* the pinned stage carries the screens on desktop, so the inline copies hide */
.step__shot{ display:none; }

@media (max-width:980px){
  /* Unpinned here, so a single shared stage would strand five of the six
     screens below the fold. Each step carries its own screen instead. */
  .walk__pin{ height:auto; padding-block:clamp(80px,12vh,140px); }
  .walk__grid{ grid-template-columns:1fr; }
  .walk__stage{ display:none; }
  /* unpinned and very tall here, so the clip is fixed behind it instead */
  .walk__bg{ position:fixed; }
  .steps li{ opacity:1; }
  .steps p{ max-height:none; opacity:1; }
  .steps li{ padding:22px 0; }
  .step__shot{
    display:block; width:min(66%, 240px); height:auto;
    margin:18px 0 4px; border-radius:18px; background:#EDF2F7;
    box-shadow:0 0 0 1px rgba(247,249,252,.1), 0 20px 44px -16px rgba(0,0,0,.75);
  }
}

/* ── pricing ──────────────────────────────────────────────────── */

.price{ position:relative; z-index:1; padding:clamp(90px,13vh,170px) var(--gut);
  border-top:1px solid var(--line);
  background:radial-gradient(90% 120% at 50% 100%, rgba(146,245,198,.06) 0%, transparent 62%), var(--bg); }
.price__head{ text-align:center; margin-bottom:clamp(36px,5vh,60px); }
.price__head .cut{ font-size:clamp(2rem,5vw,3.8rem); }
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2.2vw,26px); width:min(100%,1040px); margin-inline:auto; }
.tier{ position:relative; border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px,2.8vw,34px); background:color-mix(in oklab,var(--bg-2) 80%,transparent);
  display:flex; flex-direction:column; gap:4px;
  transition:border-color .3s var(--ease), transform .3s var(--ease); }
.tier:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.tier--hero{ border-color:var(--fill);
  box-shadow:0 0 0 1px var(--fill), 0 24px 60px -28px color-mix(in oklab,var(--fill) 55%,transparent); }
.tier__flag{ position:absolute; top:-11px; left:clamp(24px,2.8vw,34px);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--fill); color:var(--fill-ink); padding:4px 10px; border-radius:999px; }
.tier__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.tier__p{ font-family:var(--display); font-weight:800; letter-spacing:-.055em;
  font-size:clamp(2.4rem,4.6vw,3.5rem); line-height:1; margin:0; font-variant-numeric:tabular-nums; }
.tier__p sup{ font-size:.44em; top:-.56em; position:relative; letter-spacing:-.02em; }
.tier__per{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin:10px 0 22px; }
.tier .btn{ margin-top:auto; justify-content:center; }

.signup{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin:clamp(36px,5vh,56px) auto 0; max-width:560px; }
.signup__label{ flex:1 0 100%; text-align:center; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 2px; }
.signup input{ flex:1 1 280px; min-height:56px; padding:16px 20px; background:var(--bg-2);
  color:var(--ink); border:1px solid var(--line-2); border-radius:999px;
  font-family:var(--body); font-size:1rem; }
.signup input:focus{ border-color:var(--accent); outline:none; }
.signup__msg{ flex:1 0 100%; text-align:center; margin:14px 0 0; min-height:1.3em;
  font-family:var(--mono); font-size:.78rem; color:var(--accent); }
.fine{ margin:clamp(28px,4vh,40px) auto 0; max-width:62ch; text-align:center;
  font-size:.82rem; line-height:1.6; color:var(--faint); }

/* ── footer ───────────────────────────────────────────────────── */

.foot{ border-top:1px solid var(--line); padding:clamp(44px,6vh,70px) 0 28px; background:var(--bg-2); }
.foot__row{ display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:clamp(24px,4vw,60px); align-items:start; }
@media (max-width:820px){ .foot__row{ grid-template-columns:1fr; } }
.foot__row p{ margin:0; font-size:.84rem; line-height:1.62; color:var(--faint); }
.foot__row b{ color:var(--muted); font-weight:600; }
.foot__base{ margin-top:clamp(30px,4vh,48px); padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; color:var(--faint); letter-spacing:.04em; }

/* ── reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important; }
  .film{ height:auto; }
  .film__stage{ position:relative; height:auto; min-height:76svh; }
  .film__canvas{ display:none; }
  .film__stage{ background:var(--bg) url("../assets/plates/field-night@1280.webp") center/cover no-repeat; }
  :root[data-theme="light"] .film__stage{ background-image:url("../assets/plates/field-morning@1280.webp"); }
  .film__loop{ display:none; }
  .film__ui{ position:relative; top:auto; transform:none; padding:20vh 0 14vh; max-width:none; }
  .cue{ display:none; }
  /* nothing drives the reveal in here, so the lines stack and stay readable */
  .quote{ position:relative; inset:auto; display:flex; flex-direction:column;
    align-items:flex-start; gap:16px; padding:0 var(--gut) 14vh; }
  .quote__l{ grid-area:auto; opacity:1 !important; transform:none !important;
    filter:none !important; text-align:left;
    font-size:clamp(1.4rem,3.4vw,2.2rem); max-width:26ch; text-shadow:none; }
  .brandbeat{ position:relative; inset:auto; opacity:1; justify-items:start;
    padding:6vh var(--gut) 12vh; }
  .brandbeat__mark{ width:120px; }
  .brandbeat__word{ font-size:1.1rem; text-shadow:none; }
  .band__vid{ display:none; }
  .walk__pin{ height:auto; padding-block:12vh; }
  .walk__bg{ display:none; }
  .walk__stage{ display:none; }
  .step__shot{ display:block; width:min(66%,240px); height:auto; margin:18px 0 4px;
    border-radius:18px; background:#EDF2F7; }
  .steps li{ opacity:1; } .steps p{ max-height:none; opacity:1; }
  .cut .ln > span{ transform:none !important; }
}