@font-face { font-family: Satoshi; src: url(fonts/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url(fonts/satoshi-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Satoshi; src: url(fonts/satoshi-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --text: #f5f3ef;
  --muted: rgb(245 243 239 / .7);
  --accent: #f3cf6b;   /* gold: the one accent, same as the hero's audience word */
  --gold: #f3cf6b;     /* the hero's audience word */
  --rec: #ff4433;      /* the recording dot stays red whatever the accent */
  --accent-hover: #f3cf6b; --on-accent-hover: #111;
  --gutter: 48px;
  --shade: .75;          /* footage dimming, same on every stop and transit */
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* z-index scale */
  --z-nav: 10; --z-cursor: 20; --z-loader: 30;
}
@media (max-width: 767px) { :root { --gutter: 16px; } }
/* Accent previews (?accent=...). Hover colours keep button text at 4.5:1 or better. */
:root[data-accent="gold"] { --accent: #f3cf6b; --accent-hover: #f3cf6b; --on-accent-hover: #111; }
:root[data-accent="blue"] { --accent: #4d8dff; --accent-hover: #2563eb; --on-accent-hover: #fff; }
:root[data-accent="lime"] { --accent: #c6f432; --accent-hover: #c6f432; --on-accent-hover: #111; }
:root[data-accent="teal"] { --accent: #2dd4bf; --accent-hover: #2dd4bf; --on-accent-hover: #062b26; }
:root[data-accent="white"] { --accent: #f5f3ef; --accent-hover: #f5f3ef; --on-accent-hover: #111; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Satoshi, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
h1, h2, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--bg); }
html { scrollbar-color: rgb(245 243 239 / .25) var(--bg); caret-color: var(--accent); }

.skip { position: fixed; left: 16px; top: -60px; z-index: var(--z-loader); padding: 10px 16px; background: var(--text); color: var(--bg); font-weight: 500; }
.skip:focus { top: 16px; }

/* Sharp outline buttons, small tracked caps. */
.btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 28px;
  border: 1px solid rgb(245 243 239 / .9); color: var(--text);
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 12px; }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; }
.link svg { transition: transform .2s var(--ease-out); }

.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top) var(--gutter) 0;
}
.cut { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: var(--bg); opacity: 0; pointer-events: none; }
/* Back-to-top: a small square in the bottom-right corner, in once past the hero. */
.to-top { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: var(--z-nav); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(245 243 239 / .5); background: rgb(11 11 13 / .5); color: var(--text); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s ease, transform .3s var(--ease-out), background-color .2s ease, color .2s ease; }
.to-top svg { width: 18px; height: 18px; }
.show-top .to-top { opacity: 1; transform: none; pointer-events: auto; }
.to-top:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background: var(--text); color: var(--bg); } }
/* Keep the bottom-right corner clear for it. */
@media (min-aspect-ratio: 1/1) { html .stop-side { right: calc(var(--gutter) + 56px); } }
@media (max-width: 767px) { html .closing .wordmark { bottom: calc(110px + env(safe-area-inset-bottom)); } }
.closing .foot { padding-right: 56px; }
.nav { transition: transform .35s var(--ease-out), opacity .35s ease; }
/* Hidden while scrolling down so the shot is clear; back on any upward scroll or keyboard focus. */
.nav-away .nav:not(:focus-within) { transform: translateY(-100%); opacity: 0; }
/* Logo: F6 inside viewfinder corners with the REC dot, then "Media". */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.logo-mark { --b: 1.5px; --k: 7px; position: relative; padding: 3px 7px 4px; line-height: 1; letter-spacing: -.04em;
  background:
    linear-gradient(currentColor 0 0) left top / var(--k) var(--b), linear-gradient(currentColor 0 0) left top / var(--b) var(--k),
    linear-gradient(currentColor 0 0) right top / var(--k) var(--b), linear-gradient(currentColor 0 0) right top / var(--b) var(--k),
    linear-gradient(currentColor 0 0) left bottom / var(--k) var(--b), linear-gradient(currentColor 0 0) left bottom / var(--b) var(--k),
    linear-gradient(currentColor 0 0) right bottom / var(--k) var(--b), linear-gradient(currentColor 0 0) right bottom / var(--b) var(--k);
  background-repeat: no-repeat; }
.logo-mark::after { content: ""; position: absolute; right: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); }
.logo-word { font-weight: 500; letter-spacing: .02em; }
.links { display: flex; align-items: center; gap: 36px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.links a:not(.btn) { transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--text); color: var(--bg); }
  .link:hover, .links a:not(.btn):hover { color: var(--accent); }
  .link:hover svg { transform: translateX(4px); }
}
@media (max-width: 767px) { .links a:not(.btn) { display: none; } }

/* Film: tall section, sticky stage. Height is set by film.js from the timeline. */
.film { position: relative; height: 400svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: clip; }  /* clip, not hidden: focus inside must not scroll the stage */
.stage canvas, .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster.hidden { visibility: hidden; }
.shade { position: absolute; inset: 0; pointer-events: none; background: var(--bg); opacity: var(--shade); box-shadow: inset 0 0 30vw rgb(0 0 0 / .55); transition: opacity .6s var(--ease-out); }

/* Stop text: enters with a short stagger, leaves fast so it never lingers over a moving shot. */
.stop { position: absolute; pointer-events: none; }
.stop > * { opacity: 0; transform: translateY(12px); filter: blur(4px); transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
.stop.on { pointer-events: auto; }
.stop.on > * { opacity: 1; transform: none; filter: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s var(--ease-out); }
.stop.on > :nth-child(2) { transition-delay: 70ms; }
.stop.on > :nth-child(3) { transition-delay: 140ms; }


/* Lower third, like a listing reel. */

/* Stop 3: sits over the left window, the TV owns the centre. */
.stop-side { left: var(--gutter); right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 40px; }  /* a row under the pushed-in TV */
.stop-side h2 { font-size: clamp(22px, 2vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.cuts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; }
.cuts button { all: unset; position: relative; display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); cursor: pointer; transition: color .2s ease; }
/* Active package: red label with a red underline that draws in. */
.cuts button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.cuts button[aria-pressed="true"] { color: var(--text); }
.cuts button[aria-pressed="true"]::after { transform: scaleX(1); }
.cuts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .cuts button:hover { color: var(--text); } }
/* Price odometer: one strip of digits per column, rolled by --n. Rolls up from 0 on arrival. */
.pk-price { display: flex; align-items: baseline; gap: 2px; font-size: clamp(34px, 3vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pk-price .pk-cur { color: var(--accent); font-size: .6em; align-self: flex-start; margin-top: .08em; }
.pk-price small { margin-left: 8px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.odo { display: flex; height: 1em; overflow: hidden; }
.odo .c { overflow: hidden; width: .6em; }
.odo .c.off { width: 0; }
.odo .c i { display: grid; font-style: normal; transform: translateY(calc(var(--n) * -1em)); transition: transform .7s var(--ease-out) calc(var(--k) * 60ms); }
.odo .c i span { height: 1em; }
.stop-side:not(.on) .odo .c i { transform: none; transition-duration: .2s; transition-delay: 0s; }
.stop-side.on .pk-price { transition-delay: 200ms; }
@media (max-width: 767px) { .stop-side { grid-template-columns: 1fr; gap: 12px; } .cuts { justify-content: start; } }

/* Stop 4: steps sit low over the plain front of the island. */

/* Stop 5: on the dark wall to the right of the desk. */
.stop-right { right: var(--gutter); top: 50%; translate: 0 -50%; width: min(24vw, 440px); }  /* clear of the desk on the right */
.stop-right h2 { font-size: clamp(32px, 3.1vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-bottom: 20px; }
.stop-right p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--muted); margin-bottom: 20px; }
@media (max-width: 767px) { .stop-right { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); translate: none; left: var(--gutter); width: auto; } }

/* Stop 7: the closing line in the night sky, then the record button. */
.stop-end h2 { width: min(900px, calc(100% - 2 * var(--gutter))); text-align: center; font-size: clamp(34px, 4.4vw, 76px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; text-shadow: 0 2px 24px rgb(0 0 0 / .5); }

/* The shot: canvas, pins and shade grouped together. */
.cam { position: absolute; inset: 0; }
.pin.tv.on .reel { pointer-events: auto; cursor: zoom-in; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tv.on .reel:hover { transform: scale(1.03); } }
.pin.tv.on { pointer-events: auto; }

/* Full-screen reel viewer. */
.viewer { border: 0; padding: 0; margin: auto; width: min(92vw, calc(88svh * 9 / 16)); max-height: 92svh; background: transparent; color: var(--text); overflow: visible; }
.viewer { overscroll-behavior: contain; }
.viewer::backdrop { background: rgb(11 11 13 / .92); backdrop-filter: blur(6px); }
/* Frame is a size container so the Reels UI copied in from the TV scales with it. Any click closes. */
.viewer, .viewer * { cursor: none; }
.viewer-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; container-type: size; border-radius: 16px; overflow: hidden; background: #000; }
.viewer-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.viewer.wide { width: min(92vw, calc(80svh * 16 / 9)); }
.viewer.wide .viewer-frame { aspect-ratio: 16 / 9; }
.viewer-name { margin-top: 14px; text-align: center; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.viewer-close { position: fixed; top: 20px; right: var(--gutter); min-height: 44px; padding: 0 18px; border: 1px solid rgb(245 243 239 / .5); background: transparent; color: var(--text); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.viewer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.viewer[open] { animation: viewer-in .45s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: scale(.94); } }
.play-full { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.play-full:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Hero: big centred headline above the house, three headline treatments. */
.stop-hero { display: grid; place-content: center; padding: 0 var(--gutter) 16svh; }
.hero-c { display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero-h { position: relative; font-size: clamp(44px, 6.4vw, 112px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.hero-c > p { max-width: 46ch; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.5; color: var(--muted); }
.hero-c .ctas { justify-content: center; }

/* Grade on arrival: a flat grey copy sits under the headline while a red bar wipes the real one in. */
.hero-h > span:first-child { display: block; }   /* a block so the grade wipe clips the whole headline */
.hero-raw { position: absolute; inset: 0; color: rgb(245 243 239 / .26); filter: blur(.6px); pointer-events: none; }
.hero-h.gold .hero-raw .hw { color: inherit; }   /* raw copy is grey everywhere, gold arrives with the grade */
.hero-bar { position: absolute; top: -4%; bottom: -4%; left: 0; width: 2px; background: var(--accent); opacity: 0; pointer-events: none; }
/* The audience word and its swap layers. */
.hero-h.gold .hw { color: var(--gold); }
.hero-h.gold .hw-in { padding-bottom: .04em; }
.hw { position: relative; display: inline-block; overflow: clip; vertical-align: top; padding: 0 .04em .12em; margin-bottom: -.12em; }
.hw-in { display: inline-block; }
.hw-raw { color: rgb(245 243 239 / .3); filter: blur(.6px); }
.hw-half, .hw-graded { position: absolute; left: .04em; top: 0; }
.hw-sizer { visibility: hidden; }
.hw-blade, .hw-bar { position: absolute; top: -4%; bottom: 6%; width: 2px; background: var(--accent); transform-origin: top; }
.hw-blade { transform: scaleY(0); }
.hw-bar { left: 0; opacity: 0; }
.hw-graded { clip-path: inset(0 100% 0 0); }
.hw-strike { position: absolute; left: 0; right: 0; top: 50%; height: .08em; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* Stop 6: the manifesto line and the numbers on the left, over the dark trees. */
.stop-pool { display: grid; align-content: center; justify-items: start; gap: 40px; padding: 0 var(--gutter) 6svh; }
.stop-pool h2 { max-width: 13ch; font-size: clamp(36px, 4.6vw, 80px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.stop-pool h2 .dim { color: var(--muted); }
.stop-pool .stats { grid-template-columns: repeat(3, auto); gap: 48px; }

/* TV stop: "Packages" across the wall above the TV, letters sliding in from the right. */
.pk-title { position: fixed; left: 50%; top: 8svh;  /* fixed: its row parent sits at the bottom */ translate: -50% 0; margin: 0; font-size: clamp(48px, 7vw, 124px); font-weight: 700; line-height: .9; letter-spacing: -.045em; white-space: nowrap; pointer-events: none; }
.pk-title .l { display: inline-block; opacity: 0; transform: translateX(60vw); transition: opacity .2s ease, transform .2s ease; }
.stop.on .pk-title .l { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i, 0) * 70ms), transform 1.1s var(--ease-out) calc(var(--i, 0) * 70ms); }
.static .pk-title .l { opacity: 1; transform: none; }
.static .pk-title { position: static; translate: none; }


/* Stop 7: the booking form over the night aerial. */
.stop-end { inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 0 var(--gutter); text-align: center; }
.stop-end > p { max-width: 46ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; color: var(--muted); }
.book-form { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; align-items: end; gap: 12px; margin-top: 16px; text-align: left; }
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.field input, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgb(245 243 239 / .25); border-radius: 0; background: rgb(11 11 13 / .7); color: var(--text); font: 400 16px/1.4 Satoshi, sans-serif; transition: border-color .2s ease; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position: right 20px center, right 15px center; background-size: 5px 5px; background-repeat: no-repeat; }
.field ::placeholder { color: rgb(245 243 239 / .4); }
.field :focus-visible { outline: none; border-color: var(--accent); }
.book-form .btn { min-height: 48px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.form-error { grid-column: 1 / -1; color: #ff8a7a; font-size: 15px; }
.stop-end > .book-done { color: var(--text); font-size: clamp(20px, 2vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.book-done b { color: var(--accent); }
[hidden] { display: none !important; }
@media (max-width: 900px) { .book-form { grid-template-columns: 1fr; width: min(100%, 420px); } }

/* After the film: the closing line and F6 MEDIA rising letter by letter, on black. */
.closing { position: relative; min-height: 100svh; display: grid; align-content: start; justify-items: center; padding: 18svh var(--gutter) 0; background: var(--bg); }
.closing h2 { text-align: center; font-size: clamp(34px, 4.4vw, 76px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.closing .wordmark { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 9svh; margin: 0; display: flex; justify-content: space-between; font-size: 15vw; font-weight: 700; line-height: .78; letter-spacing: -.05em; }
.closing .wordmark span { display: block; clip-path: inset(100% -10% -25% -10%); transform: translateY(30%); transition: clip-path .3s ease, transform .3s ease; }
.closing.on .wordmark span { clip-path: inset(-25% -10% -25% -10%);  /* outset: the tight line-height must not shave the glyphs */ transform: none; transition: clip-path 1s var(--ease-out) calc(300ms + var(--i, 0) * 80ms), transform 1s var(--ease-out) calc(300ms + var(--i, 0) * 80ms); }
.closing .wordmark .gap { flex: .4; }
.closing .foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.static .closing .wordmark span { clip-path: none; transform: none; }

/* Pins: overlays locked to a spot in the frame (TV, iMac), positioned by film.js. */
.pin { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.pin.on { opacity: 1; transition: opacity .35s var(--ease-out); }

/* TV: one channel per package. Copy on the left, a 9:16 reel slot on the right.
   Sized in container units so everything scales with the screen. */
.tv { container-type: size; background: radial-gradient(ellipse at 30% 20%, #1d2026, #0d0e11 70%); overflow: hidden; transition: opacity .2s ease, filter .12s ease; }
.tv.on { transition: opacity .35s var(--ease-out), filter .12s ease; }
/* With a power-on clip in the footage, the screen content waits until the TV in the shot is lit. */
.pin.tv.has-on:not(.lit) { opacity: 0; }
.pin.tv.has-on { background: #05060a url(assets/stills/tv-lit.jpg) center / 100% 100%; }   /* the lit screen from the footage, at full brightness */
.ch { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5cqw; padding: 0 6cqw; opacity: 0; transition: opacity .25s ease; }
.ch.on { opacity: 1; }
.ch-copy { display: grid; gap: 2.4cqh; }
.ch b { font-size: 10cqw; font-weight: 700; line-height: .9; letter-spacing: -.045em; }
.ch-copy span { font-size: 2.4cqw; color: var(--muted); max-width: 30ch; }
.reel { position: relative; height: 86cqh; aspect-ratio: 9 / 16; border-radius: 1.8cqh; overflow: hidden; background: #0d0e11; box-shadow: 0 2cqh 5cqh rgb(0 0 0 / .45), inset 0 0 0 1px rgb(245 243 239 / .1); }
/* Reels-style UI over the vertical reels (built by film.js): handle and audio bottom-left,
   like / comment / share / save down the right. Sized in the TV's cq units. */
.rui { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 55%, rgb(0 0 0 / .6)); color: #fff; }
.rui svg { display: block; width: 3.6cqh; height: 3.6cqh; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)); }
.rui-side { position: absolute; right: 1.6cqh; bottom: 10cqh; display: grid; justify-items: center; gap: 2.2cqh; }
.rui-side span { display: grid; justify-items: center; gap: .5cqh; font-size: 1.4cqh; font-weight: 500; }
.rui-who { position: absolute; left: 1.8cqh; right: 8cqh; bottom: 2.4cqh; display: grid; gap: 1.2cqh; }
.rui-who p { display: flex; align-items: center; gap: 1cqh; font-size: 1.8cqh; font-weight: 700; }
.rui-who i { flex: none; width: 3.4cqh; height: 3.4cqh; border-radius: 50%; background: var(--accent); }
.rui-who em { padding: .4cqh 1.1cqh; border: 1px solid rgb(255 255 255 / .8); border-radius: .8cqh; font-size: 1.4cqh; font-style: normal; font-weight: 500; }
.rui-who small { display: flex; align-items: center; gap: .8cqh; font-size: 1.4cqh; color: rgb(255 255 255 / .85); }
.rui-who small svg { width: 1.6cqh; height: 1.6cqh; }
/* Cinematic is 16:9: the film fills the TV screen and the copy sits over its dark left side. */
.ch.wide { display: block; padding: 0; }
.ch.wide .reel { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.ch.wide .reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .7), transparent 65%); pointer-events: none; }
.ch.wide .ch-copy { position: absolute; left: 6cqw; top: 50%; translate: 0 -50%; pointer-events: none; text-shadow: 0 2px 16px rgb(0 0 0 / .5); }
.ch.wide .ch-copy span { color: rgb(245 243 239 / .85); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-steps { position: absolute; left: 6cqw; bottom: 7cqh; display: flex; gap: 1cqw; }
.tv-steps i { width: 4cqw; height: 2px; background: rgb(245 243 239 / .2); transition: background-color .3s ease; }
.tv-steps i.on { background: var(--accent); }

/* The office screen sits under the dark shade like the rest of the room, soft,
   and settles in from a heavy motion blur when the camera arrives. */
.pin.nle { filter: blur(16px); transition: opacity .7s ease, filter 1.1s var(--ease-out); }
.pin.nle.on { filter: blur(1.6px); }

/* Office monitor: a Final Cut-style project (browser, viewer, colour inspector, magnetic timeline),
   sized in container units so it scales with the screen. */
.nle { container-type: size; display: grid; grid-template-rows: 3.4% 1fr 62%;  /* % here: cq units on the container itself would resolve against the viewport */ background: #1e1e1f; color: rgb(235 235 240 / .78); font-weight: 500; line-height: 1; overflow: hidden; }
.nle > * { font-size: 1.6cqh; }   /* on the children: cq units on .nle itself would resolve against the viewport */
.nle p { margin: 0; } .nle em { font-style: normal; }
.fc-bar { display: flex; align-items: center; gap: .7cqw; padding: 0 1.2cqw; background: #2b2b2d; border-bottom: 1px solid #111; }
.fc-bar i { width: 1.5cqh; height: 1.5cqh; border-radius: 50%; background: #ff5f57; } .fc-bar i:nth-child(2) { background: #febc2e; } .fc-bar i:nth-child(3) { background: #28c840; }
.fc-bar b { margin: 0 auto; font-weight: 500; color: rgb(235 235 240 / .9); } .fc-bar span { color: rgb(235 235 240 / .45); }
.fc-main { display: grid; grid-template-columns: 27cqw 1fr 17cqw; min-height: 0; }
.fc-main > * { min-height: 0; overflow: hidden; }
.fc-browser { display: grid; grid-template-rows: auto 1fr; gap: 1cqh; padding: 1.2cqh 1cqw; background: #232325; border-right: 1px solid #111; }
.fc-browser p { display: flex; justify-content: space-between; } .fc-browser span { color: rgb(235 235 240 / .4); }
.fc-browser div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6cqh .4cqw; align-content: start; }
.fc-browser i { display: grid; align-content: end; aspect-ratio: 16 / 9; border-radius: .5cqh; background: var(--t) center / cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.fc-browser i:nth-child(6) { box-shadow: 0 0 0 .35cqh #f5c518; }   /* the selected clip, Final Cut yellow */
.fc-browser em { padding: .3cqh .5cqw; font-size: 1.35cqh; background: linear-gradient(transparent, rgb(0 0 0 / .7)); white-space: nowrap; overflow: hidden; }
.fc-viewer { display: grid; grid-template-rows: 1fr auto; background: #121213; }
.nle-program { background: #000; display: grid; place-items: center; min-height: 0; }
.nle-program video { width: 100%; height: 100%; object-fit: contain; }
.fc-viewer p { display: flex; align-items: center; justify-content: space-between; padding: .9cqh 1cqw; background: #232325; color: rgb(235 235 240 / .45); }
.fc-tc { font: 500 2.3cqh/1 var(--mono); letter-spacing: .04em; color: rgb(235 235 240 / .95); font-variant-numeric: tabular-nums; }
.fc-inspect { display: grid; align-content: start; gap: 1.4cqh; padding: 1.2cqh 1cqw; background: #232325; border-left: 1px solid #111; }
.fc-wheels { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqh 1cqw; padding: 0 1.5cqw; }
.fc-wheels i { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #232325 34%, transparent 36%), conic-gradient(from 90deg, #e5484d, #f5c518, #3dd68c, #3db9cf, #4f6cf0, #c44ccf, #e5484d); opacity: .9; }
.fc-wheels i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; border-radius: 50%; background: #fff; translate: var(--x, -30%) var(--y, -80%); }
.fc-wheels i:nth-child(2) { --x: 40%; --y: -20%; } .fc-wheels i:nth-child(3) { --x: -90%; --y: 10%; } .fc-wheels i:nth-child(4) { --x: -50%; --y: -50%; }
.fc-sliders { display: grid; gap: 1.1cqh; }
.fc-sliders i { display: grid; gap: .5cqh; font-size: 1.35cqh; color: rgb(235 235 240 / .5); }
.fc-sliders i { gap: 0; }
/* .nle prefix: these recolour lanes whose base rules come later in the file */
.nle .fc-fx2 s { background: #8a3f6e; } .nle .fc-amb q { background: #2b3f2a; box-shadow: inset 0 0 0 1px #6fae62; } .nle .fc-amb path { fill: #9bd48e; }
.nle .fc-music2 { background: #3d2f66; box-shadow: inset 0 0 0 1px #8f77e0; } .nle .fc-music2 path { fill: #b3a0f2; }
.fc-lane > * { border-radius: .35cqh; }
.fc-sliders i::after { content: ""; height: .5cqh; border-radius: 1cqh; background: linear-gradient(90deg, #6e8efb var(--v), #3a3a3d var(--v)); }
/* Timeline: ruler, connected titles and B-roll above the primary storyline, music below. */
.nle-tl { position: relative; display: grid; grid-template-rows: auto .4fr .4fr .35fr .35fr .7fr .7fr .7fr 1.25fr .4fr .4fr .55fr .45fr .65fr .5fr; gap: .32cqh; padding: 0 1cqw 1cqh; background: #1a1a1b; border-top: 1px solid #000; }
.fc-ruler { display: flex; justify-content: space-between; margin: 0 -1cqw; padding: .6cqh 1cqw; font: 500 1.3cqh/1 var(--mono); color: rgb(235 235 240 / .4); background: #232325 repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 1px, transparent 1px 2.45cqw) bottom / 100% 35% no-repeat; }
.fc-lane { display: flex; gap: .25cqw; min-height: 0; }
.fc-lane > * { flex: var(--l) 1 0; min-width: 0; border-radius: .6cqh; overflow: hidden; }
.fc-lane u { visibility: hidden; }
.fc-ruler { position: relative; } .fc-ruler i { position: absolute; top: 15%; width: 1.1cqh; height: 1.1cqh; background: #3d8bfd; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.fc-ruler i:nth-of-type(3n) { background: #ff5f57; } .fc-ruler i:nth-of-type(4n) { background: #28c840; }
.fc-fx s { display: flex; align-items: center; padding: 0 .6cqw; font-size: 1.1cqh; text-decoration: none; white-space: nowrap; color: #ffe9c7; background: #a8641c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.fc-sfx q, .fc-vo q { display: block; background: #145a5a; box-shadow: inset 0 0 0 1px #35c2c2; }
.fc-sfx svg, .fc-vo svg { display: block; width: 100%; height: 100%; } .fc-sfx path { fill: #5fe0e0; }
.fc-vo q { background: #1c4f7a; box-shadow: inset 0 0 0 1px #58a6ee; } .fc-vo path { fill: #9ccbf8; }
.fc-x::before { content: ""; position: absolute; left: 0; top: 0; bottom: 32%; width: 1.4cqw; translate: -50% 0; background: linear-gradient(135deg, #cfd3da 50%, #6b7079 50%); box-shadow: 0 0 0 1px #111; z-index: 1; }   /* cross dissolve */
.fc-primary .fc-clip { overflow: visible; }
.fc-keys { position: absolute; inset: 0; width: 100%; height: 100%; } .fc-keys polyline { fill: none; stroke: #f5e663; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fc-titles b { display: flex; align-items: center; padding: 0 .6cqw; font-size: 1.3cqh; font-weight: 500; white-space: nowrap; color: #f3e8ff; background: #7b4bc4; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.fc-clip { position: relative; display: grid; grid-template-rows: 1fr; background: var(--t) left top / auto 100% repeat-x, #2f5f9e; box-shadow: inset 0 0 0 1px #6ea4ee; }
.fc-clip em { position: absolute; left: 0; top: 0; padding: .25cqh .5cqw; font-size: 1.2cqh; white-space: nowrap; background: rgb(20 40 80 / .75); border-bottom-right-radius: .5cqh; }
.fc-primary .fc-clip { grid-template-rows: 1fr 32%; background-size: auto 68%; }
.fc-primary svg { grid-row: 2; width: 100%; height: 100%; background: #24477a; } .fc-primary path { fill: #8fbcf5; }
.fc-music { position: relative; background: #1d5c3c; border-radius: .6cqh; box-shadow: inset 0 0 0 1px #46c482; }
.fc-music b { position: absolute; left: .6cqw; top: .3cqh; flex: none; font-size: 1.2cqh; font-weight: 500; color: #d7ffe9; }
.fc-music svg { flex: 1; width: 100%; height: 100%; border-radius: 0; } .fc-music path { fill: #4fd68f; }
/* Playhead: Final Cut's white line with a cap, driven by the viewer's video (film.js sets --p). */
.nle-head { position: absolute; top: 0; bottom: 0; left: calc(1cqw + var(--p, 0) * (100% - 2cqw)); width: 1px; background: #fff; box-shadow: 0 0 .6cqh rgb(255 255 255 / .5); }
.nle-head::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.6cqh; height: 1.6cqh; translate: -50% 0; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
/* Timecode of the frame on screen + buffering note. */
@keyframes blink { 50% { opacity: .35; } }

/* Preloader: no cover of its own. The intro F6 sits on black while the 6 scrambles,
   and a timecode counts up at the bottom until the first shot is ready. */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader); pointer-events: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
html:not(.static) .stage { clip-path: inset(33% 50% round 6px); }
.cue {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: var(--z-nav); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px; pointer-events: none;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; font-variant-numeric: tabular-nums;
  transition: opacity .4s ease;
}
.cue > * { grid-area: 1 / 1; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.cue-tc { transform: translateY(-14px); }
.cue-bar { width: 140px; height: 1px; margin-top: 10px; background: rgb(245 243 239 / .16); overflow: hidden; }
.cue-bar i { display: block; height: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }
/* Once loaded: the counter and bar hand over to the scroll cue. */
.cue-scroll { display: grid; justify-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .18em; opacity: 0; transform: translateY(8px); }
.cue-scroll i { position: relative; width: 1px; height: 36px; background: rgb(245 243 239 / .16); overflow: hidden; }
.cue-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--text); animation: drip 1.6s var(--ease-out) infinite; }
@keyframes drip { from { transform: translateY(-14px); } to { transform: translateY(36px); } }
.loaded .cue-tc, .loaded .cue-bar { opacity: 0; }
.loaded .cue-scroll { opacity: 1; transform: none; transition-delay: .25s; }
.scrolled .cue { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.loaded .loader { opacity: 0; visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Intro: the F and the 6 part like a lens opening; the film shows through the gap.
   film.js drives the letters and the stage clip-path from scroll. */
.intro { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); display: grid; place-items: center; pointer-events: none; }
.intro span { grid-area: 1 / 1; font-weight: 700; font-size: clamp(120px, 17vw, 280px); line-height: .8; letter-spacing: -.04em; will-change: transform; }
/* Start apart exactly where film.js puts them at rest, so they never overlap before it runs. */
.intro-f { transform: translateX(-55%); }
.intro-6 { transform: translateX(55%); }
.intro-6 { width: .68em; text-align: center; }  /* fixed box so scrambling glyphs don't shift it */
.intro-6 svg { display: block; width: .88em; height: .88em; margin: .03em -.16em 0 -.04em; }   /* nudged right and down: clear of the F, centred on its cap height */
/* Once the 6 lands, a viewfinder closes in around F6 with the REC dot. On scroll each corner
   rides the opening slit out to its own corner of the screen (positions set by film.js). */
.intro-vf { position: fixed; inset: 0; opacity: 0; transform: scale(1.12); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.intro.landed .intro-vf { opacity: 1; transform: none; }
.intro-vf i { position: absolute; left: 50%; top: 50%; width: var(--k, 40px); height: var(--k, 40px); border: 0 solid var(--text); will-change: transform; }
.intro-vf .tl { border-top-width: var(--b, 4px); border-left-width: var(--b, 4px); }
.intro-vf .tr { border-top-width: var(--b, 4px); border-right-width: var(--b, 4px); }
.intro-vf .bl { border-bottom-width: var(--b, 4px); border-left-width: var(--b, 4px); }
.intro-vf .br { border-bottom-width: var(--b, 4px); border-right-width: var(--b, 4px); }
.intro-vf .tr::after { content: ""; position: absolute; right: calc(var(--k, 40px) * -.4); top: calc(var(--k, 40px) * -.4); width: calc(var(--k, 40px) * .44); height: calc(var(--k, 40px) * .44); border-radius: 50%; background: var(--rec); }   /* icons sit on the cap height of the F */

/* In/Out cursor: the editor's mark-in and mark-out brackets. Small around the pointer,
   they open around a link or button and label it IN / OUT. Positioned by film.js. */
.vf { display: none; }
@media (pointer: fine) {
  html.vf-on, html.vf-on a, html.vf-on button { cursor: none; }
  html.vf-on .vf { display: block; position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; will-change: transform; }
  .vf i { position: absolute; top: 0; width: 7px; border: 2px solid var(--accent); will-change: transform; }
  .vf-in { left: 0; border-right: 0 !important; }
  .vf-out { left: 0; border-left: 0 !important; }
  .vf span { position: absolute; top: -16px; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .2s ease; }
  .vf.snap span { opacity: 1; }
}

/* Default cursor: the camera viewfinder. Corners frame the pointer and snap around links and
   buttons; while framing, REC shows like a camera rolling. */
.vfr { display: none; }
@media (pointer: fine) {
  html.vfr-on, html.vfr-on a, html.vfr-on button, html.vfr-on .tv .reel { cursor: none; }
  html.vfr-on .vfr { display: block; position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; width: 0; height: 0; will-change: transform; }
  .vfr i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px solid var(--text); will-change: transform; }
  .vfr i:nth-child(1) { border-right: 0; border-bottom: 0; }
  .vfr i:nth-child(2) { border-left: 0; border-bottom: 0; }
  .vfr i:nth-child(3) { border-right: 0; border-top: 0; }
  .vfr i:nth-child(4) { border-left: 0; border-top: 0; }
  .vfr-dot { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--text); transition: opacity .2s ease; }
  .vfr-rec { position: absolute; left: 0; top: -18px; display: flex; align-items: center; gap: 6px; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); white-space: nowrap; opacity: 0; transition: opacity .2s ease; }
  .vfr-rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rec); }
  .vfr.snap .vfr-rec { opacity: 1; }
  .vfr.snap .vfr-dot { opacity: 0; }
}

/* Cursor options (?cursor=...). All hide the system pointer on fine-pointer devices only. */
.cur { display: none; }
@media (pointer: fine) {
  html.cur-on, html.cur-on a, html.cur-on button, html.cur-on .tv .reel { cursor: none; }
  html.cur-on .cur { display: block; position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; }
  /* label: a REC pill that names what you're pointing at */
  .cur-pt { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); will-change: transform; }
  .cur-pill { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgb(245 243 239 / .95); color: var(--bg); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: background-color .2s ease, color .2s ease; }
  .cur-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .cur.snap .cur-pill { background: var(--accent); color: #fff; }
  .cur.snap .cur-pill::before { background: #fff; }
  /* cross: framing guides through the pointer, with coordinates */
  .cur-h, .cur-v { position: absolute; background: rgb(245 243 239 / .22); will-change: transform; transition: background-color .2s ease; }
  .cur-h { left: 0; right: 0; top: 0; height: 1px; }
  .cur-v { top: 0; bottom: 0; left: 0; width: 1px; }
  .cur.snap .cur-h, .cur.snap .cur-v { background: var(--accent); }
  .cur-xy { position: absolute; left: 0; top: 0; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; will-change: transform; }
  .cur-sq { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border: 1.5px solid var(--text); will-change: transform; }
  /* dot: a small dot that opens into a labelled disc over anything clickable */
  .cur-disc { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; scale: .16; will-change: transform; transition: scale .35s var(--ease-out); }
  .cur-disc span { opacity: 0; transition: opacity .2s ease; }
  .cur.snap .cur-disc { scale: 1; }
  .cur.snap .cur-disc span { opacity: 1; }
}

/* Reduced motion (or ?static): no loader, no cursor follow, each stop is a dimmed still, normal scroll. */
.static .loader, .static .cue, .static .vf, .static .vfr, .static .cur, .static .intro { display: none !important; }
.static, .static a { cursor: auto !important; }
.static .stage { transform: none !important; }
.static .film { height: auto; }
.static .stage { position: static; height: auto; overflow: visible; }
.static .stage canvas, .static .poster, .static .shade, .static .pin { display: none; }
.static .stop > * { opacity: 1; transform: none; filter: none; }
.static .stop {
  position: relative; inset: auto; height: 100svh; max-width: none; opacity: 1; transform: none; pointer-events: auto;
  background: linear-gradient(rgb(11 11 13 / .85), rgb(11 11 13 / .85)), var(--still) center / cover no-repeat;
}
.words .dim { color: var(--muted); }
.static .words .w { opacity: 1 !important; }


:root { --center-w: 46svh; }   /* the calm middle column the side panels keep clear of */
/* These stops fill the stage so the caption and side panels can sit around the middle. */
.stop-hero, .stop-about, .stop-steps, .stop-pool { inset: 0; }

/* Text entrances: heading words rise out of a mask, lists draw their rules and stagger in. */
.wm { display: inline; }
/* Stop headings light up word by word in reading order, like the manifesto. */
.wi { opacity: .16; transition: opacity .2s ease; }
.stop.on .wi { opacity: 1; transition: opacity .55s ease var(--d, 0ms); }
.steps li, .cuts li { position: relative; }
.steps li { border-top: 0; }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(245 243 239 / .2); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.stop.on .steps li::before { transform: none; transition: transform 1.1s var(--ease-out) calc(280ms + var(--i, 0) * 90ms); }
.steps li > *, .cuts li { opacity: 0; transform: translateY(10px); transition: opacity .15s ease, transform .15s ease; }
.stop.on .steps li > *, .stop.on .cuts li { opacity: 1; transform: none; transition: opacity .6s ease calc(360ms + var(--i, 0) * 90ms), transform .8s var(--ease-out) calc(360ms + var(--i, 0) * 90ms); }
.stats dt { transition: opacity .6s ease .5s; }
.static .wi, .static .steps li > *, .static .cuts li { opacity: 1; transform: none; }
.static .steps li::before { transform: none; }

/* Wings: side panels either side of the calm middle. */
.wing { position: absolute; top: 50%; translate: 0 -50%; width: calc(50% - var(--center-w) / 2 - var(--gutter) * 2); max-width: 520px; display: grid; gap: 20px; }
.wing-left { left: var(--gutter); }
.wing-right { right: var(--gutter); }
.wing h1, .wing h2 { font-size: clamp(32px, 3.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.wing p { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--muted); }
.ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; }

/* Record button: solid, with the REC dot. */
.btn-rec { gap: 10px; background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
@media (hover: hover) and (pointer: fine) { .btn-rec:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent-hover); } .btn-rec:hover::before { background: currentColor; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding-top: 12px; border-top: 1px solid rgb(245 243 239 / .18); }
.steps b { font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.steps span { font-size: clamp(14px, 1.05vw, 17px); color: var(--muted); line-height: 1.45; }
.stats { margin: 0; display: grid; gap: 22px; }
.stats div { display: grid; gap: 4px; }
.stats dt { order: 2; font-size: clamp(14px, 1.05vw, 17px); color: var(--muted); }
.stats dd { margin: 0; font-size: clamp(36px, 4vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* Portrait screens: the TV is cropped off the sides, so its copy goes and the reel sits centred
   on the screen; the packages text moves up to the wall above the TV. */
@media (max-aspect-ratio: 1/1) {
  .pin.tv .ch { grid-template-columns: auto; justify-content: center; padding: 0; }
  .pin.tv .ch-copy { display: none; }
  .pin.tv .ch.wide .reel { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: calc(100vw - 32px); height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
  .pin.tv .ch.wide .reel::after { display: none; }
  .pin.tv .tv-steps { left: 50%; translate: -50% 0; bottom: 3cqh; }
  .stop-side { top: calc(env(safe-area-inset-top) + 64px); bottom: auto; grid-template-columns: auto 1fr; gap: 6px 16px; }
  .stop-side h2, .stop-side .cuts { grid-column: 1 / -1; }
  .stop-side .cuts { gap: 0 24px; font-size: 16px; }
  /* Price and full-screen link sit just under the TV (its bottom edge is ~81% down the frame). */
  .stop-side .pk-price, .stop-side .play-full { position: absolute; top: calc(81svh + 16px - 64px - env(safe-area-inset-top)); }
  .stop-side .pk-price { left: 0; font-size: 30px; }
  .stop-side .play-full { right: 0; min-height: 44px; margin-top: -6px; }
  .pk-title { display: none; }
}

/* Narrow or portrait screens: stack the side panels at the bottom. */
@media (max-aspect-ratio: 1/1), (max-width: 767px) {
  .wing { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); translate: none; left: var(--gutter); right: var(--gutter); width: auto; max-width: none; gap: 12px; }
  .wing h1, .wing h2 { font-size: clamp(28px, 8vw, 40px); }
}
.static .wing { position: relative; inset: auto; translate: none; width: auto; max-width: 640px; margin: 0 auto; }