/* =========================================================
   MISSION: MILESTONE — styles
   Palette: near-black / warm cream / one orange-red accent.
   Type: Anton (display) + IBM Plex Mono (labels & copy).
   ========================================================= */

:root {
  --ink: #0c0c0c;
  --cream: #efe9dc;
  --cream-2: #d3cbb9;
  --accent: #e8461f;

  --fg: var(--cream);
  --bg: var(--ink);

  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --nav-h: 72px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
body[data-theme="light"] { --fg: var(--ink); --bg: var(--cream); }

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
em { font-style: normal; }

.eyebrow, .label, .nav, .rail, .scroll-hint, .btn, .scroll-cue, .tminus, .tzero, .syscheck, .footer, .col-head {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* short/long copy pairs: the phone shows .short (M:M, Ready for launch), everything else .long */
.short { display: none; }
/* tablet-only line breaks in the countdown copy (see tablet.css) */
.tb { display: none; }

/* Line reveal (used on big display headings; offset driven by GSAP yPercent) */
/* p26: the mask needs headroom too — Anton's caps run taller than the 0.9 line-height, so the tops were shaved by a few px */
.line { display: block; overflow: hidden; padding: 0.08em 0 0.04em; margin: -0.08em 0 -0.04em; }
.line .inner { display: block; }

.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.34em; margin-bottom: 20px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.eyebrow .ph { color: inherit; opacity: 0.55; letter-spacing: 0.2em; }

/* ---------- Reticle cursor ---------- */
@media (pointer: fine) {
  body.has-reticle, body.has-reticle a, body.has-reticle button { cursor: none; }
}
/* "Instrument": a white dot with four ticks, blended with `difference` so it inverts whatever
   pixel is beneath. States: .hot (controls) diagonals + orange · .rock (asteroids) as hot, ticks
   pull in, pip, readout · .clear (rocket) ticks push out, mint, ring, readout, gun off. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  --mint: #8fd4a8;
  color: #fff; mix-blend-mode: difference; opacity: 1;
}
.cursor .ticks { position: absolute; inset: 0; transition: transform 0.22s var(--ease); }
.cursor .ticks i {
  position: absolute; left: 50%; top: 2px; width: 1.5px; height: 7px; margin-left: -0.75px; background: currentColor;
  transform-origin: 50% 11px;   /* 13px centre − 2px top: rotate about the reticle's centre */
  transition: transform 0.22s var(--ease);
}
.cursor .ticks i:nth-child(2) { transform: rotate(90deg); }
.cursor .ticks i:nth-child(3) { transform: rotate(180deg); }
.cursor .ticks i:nth-child(4) { transform: rotate(270deg); }
.cursor .dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: currentColor; }
/* rest-state ring accent: a small thin circle between the dot and the ticks */
.cursor .ring { position: absolute; inset: 8.5px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.85; transition: transform 0.22s var(--ease), opacity 0.2s; }
/* precision pip: a tiny circle appears and contracts to the centre dot — loops while on a rock */
.cursor .pip { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0; }
.cursor.rock .pip { animation: pip 0.42s cubic-bezier(.3,.8,.3,1) infinite; }
@keyframes pip { 0% { transform: scale(1.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(0.15); opacity: 0; } }
/* controls: diagonals + orange (blend dropped so the accent reads true) */
.cursor.hot, .cursor.rock { color: var(--accent); mix-blend-mode: normal; }
.cursor.hot .ticks, .cursor.rock .ticks { transform: rotate(45deg); }
/* asteroid: as hot, and the ticks pull in tight on the target */
.cursor.rock .ticks { transform: rotate(45deg) scale(0.8); }
.cursor.rock .ring { transform: scale(0.8); }
/* dim: over the About photo — the reticle greys out and steps back while the lock-on plays on the photo itself */
.cursor.dim { color: var(--puff, #8a857a); mix-blend-mode: normal; opacity: 0.7; }
.cursor.press .ticks { transform: scale(0.85); }
.cursor.press.hot .ticks, .cursor.press.rock .ticks { transform: rotate(45deg) scale(0.75); }

/* ricochet off the hull: white glint at the impact, a bright streak glancing away, a few flecks */
.rico { position: fixed; left: 0; top: 0; z-index: 94; pointer-events: none; width: 0; height: 0; }
.rico .glint { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
.rico .streak { position: absolute; left: 0; top: -1px; width: 34px; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, var(--cream) 60%, transparent); box-shadow: 0 0 4px #fff; }
.rico i { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #fff; }

/* laser shot on click: a cross-shaped muzzle flash and hairline sparks flying straight out */
.hit { position: fixed; left: 0; top: 0; z-index: 94; pointer-events: none; width: 0; height: 0; color: var(--accent); }
.hit .flash { position: absolute; left: -1px; top: -9px; width: 2px; height: 18px; background: currentColor; box-shadow: 0 0 6px var(--accent); }
.hit .flash.h { transform: rotate(90deg); }
.hit i { position: absolute; left: -3px; top: -0.5px; width: 6px; height: 1px; background: currentColor; box-shadow: 0 0 3px var(--accent); }
.hit i.ember { width: 2px; height: 2px; left: -1px; top: -1px; border-radius: 50%; background: #fff; }

/* ---------- Fixed layers: stars under everything, asteroids over everything ---------- */
/* base layer is just the black ground; the stars live on the top layer, blended with `lighten`
   so they vanish over cream and show over anything dark — including the black clouds mid-pour */
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--ink); pointer-events: none; }
.starfield-top { z-index: 50; background: transparent; mix-blend-mode: lighten; }
main { position: relative; z-index: 1; }
.rocks-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; overflow: visible; }
.rocks-layer .asteroid { pointer-events: visiblePainted; }

/* ---------- Every third target (finale.js): ripple → dim → warp → back ---------- */
.ten { position: fixed; display: block; z-index: 93; pointer-events: none; border-radius: 50%; }   /* over the grain, under the cursor */
.ten-ring { border: 4px solid var(--accent); box-shadow: 0 0 26px rgba(232, 70, 31, 0.6), inset 0 0 14px rgba(232, 70, 31, 0.35); }
.ten-ring-1 { border-width: 3px; border-color: #f07a5a; box-shadow: 0 0 18px rgba(232, 70, 31, 0.4); }
.ten-ring-2 { border-width: 2px; border-color: var(--cream); box-shadow: none; opacity: 0.85; }
.ten-ring-3 { border-width: 1px; border-color: var(--cream); box-shadow: none; opacity: 0.6; }
.ten-core { width: 18px; height: 18px; background: #fff; box-shadow: 0 0 22px #fff, 0 0 44px var(--accent); }
/* the veil sits under the star layer (50) and over the page (1), so the frame dims but the stars — and the streaks — stay bright */
.ten-veil { inset: 0; border-radius: 0; z-index: 49; background: var(--ink); }
/* p24: the number that pops out of the hit */
.ten-num { border-radius: 0; font-family: var(--display); font-size: 72px; line-height: 1; color: var(--accent); -webkit-text-stroke: 1.5px var(--cream); paint-order: stroke fill; text-shadow: 0 0 18px rgba(232, 70, 31, 0.6); }
/* p24: the layers that scale during the run are promoted for the duration only */
body.warp main > section, body.warp main > .pin-spacer > section, body.warp .starfield, body.warp .rocks-layer { will-change: transform; }
/* p25: the freeze — every CSS animation on the page holds while the moment plays (finale.js pauses the tweens) */
body.frozen *, body.frozen *::before, body.frozen *::after { animation-play-state: paused !important; }
body.frozen .nav-score b::after { animation-play-state: running !important; }   /* the tally's ping is part of the moment */
/* during the jump the accents stream too: the tally digits and the nav light leave short trails toward the centre */
body.warp .nav-score b { text-shadow: 0 5px 0 rgba(232, 70, 31, 0.45), 0 10px 0 rgba(232, 70, 31, 0.22), 0 15px 0 rgba(232, 70, 31, 0.1); }
body.warp .links .live { box-shadow: 0 0 6px var(--accent), 6px 4px 0 rgba(232, 70, 31, 0.4), 12px 8px 0 rgba(232, 70, 31, 0.18); }

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.06;   /* p16: plain low opacity — the overlay blend was a full-screen composite every frame */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Intro / boot ---------- */
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  clip-path: inset(0 0 0 0);
}
.intro-inner { text-align: center; }
.intro-line { display: block; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; }
.intro-line em { color: var(--accent); }
.intro-bar { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.intro-bar .sq { width: 12px; height: 12px; border: 1.5px solid var(--cream); background: transparent; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--fg);
  font-size: 11px;
  transition: color 0.45s var(--ease);
  pointer-events: none;
}
.nav a { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 500; letter-spacing: 0.24em; font-size: 12px; transition: color 0.45s var(--ease); }
body.cloud-left .brand { color: var(--cream); }   /* the black cloud sits behind the brand on the Built slide */
.brand-mark { width: 14px; height: 30px; fill: currentColor; }
.links { display: flex; gap: clamp(18px, 3vw, 44px); }
.links a { position: relative; padding: 6px 0; }
.links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.links a:hover::after { transform: scaleX(1); }
/* p21: a tiny live light beside Contact — the line is open */
.links a .live, .menu a .live { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; position: relative; top: -1px; box-shadow: 0 0 6px var(--accent); animation: liveBlink 1.6s steps(1, end) infinite; }
.menu a .live { width: 7px; height: 7px; margin-right: 12px; }
@keyframes liveBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.18; } }

/* ---------- Touch menu (≤ 1024: the link row is hidden, this replaces it) ---------- */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; background: transparent; border: 0; padding: 0; color: var(--fg); pointer-events: auto; cursor: pointer; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.menu-btn i:first-child { top: 18px; }
.menu-btn i:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 69; background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 4vh) var(--gutter) 10vh;
}
.menu[hidden] { display: none; }
.menu ol { display: grid; gap: 10px; }
.menu li a { display: flex; align-items: baseline; gap: 18px; font-family: var(--display); font-size: clamp(44px, 12vw, 84px); line-height: 1; text-transform: uppercase; color: var(--cream); padding: 6px 0; }
.menu li a small { font: 500 11px/1 var(--mono); letter-spacing: 0.3em; color: var(--accent); min-width: 2ch; }
.menu li a.on { color: var(--accent); }
.menu-cta { display: inline-block; margin-top: 34px; font: 500 12px/1 var(--mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 8px; align-self: flex-start; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { color: var(--cream); }
@media (max-width: 1024px) { .menu-btn { display: block; } }

/* ---------- Right rail ---------- */
.rail {
  position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 11px; color: var(--fg);
  transition: opacity 0.5s var(--ease), color 0.45s var(--ease);
}
.rail li { position: relative; padding-bottom: 4px; opacity: 0.55; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); }
.rail li::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.rail li.active { opacity: 1; color: var(--accent); }
.rail li.active::after { transform: scaleX(1); }
.rail.hidden { opacity: 0; pointer-events: none; }

/* ---------- Scroll hint ---------- */
.scroll-hint {
  position: fixed; left: var(--gutter); bottom: 34px; z-index: 70;
  display: flex; align-items: flex-end; gap: 12px; color: var(--fg); font-size: 10px;
  transition: color 0.45s var(--ease);
}
.scroll-hint .track { position: relative; width: 2px; height: 64px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.scroll-hint .fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--fg); transform: scaleY(0); transform-origin: top; }
.scroll-hint .txt { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 22px; color: inherit; font-size: 12px; font-weight: 500; }
.btn .ring {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent);
  display: grid; place-items: center; transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn .ring svg { width: 28px; height: 28px; }
.btn:hover .ring { background: var(--accent); color: var(--ink); transform: scale(1.06); }
.btn .btn-txt { position: relative; }
.btn .btn-txt::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.btn:hover .btn-txt::after { transform: scaleX(1); }
.btn-large { gap: 28px; font-size: 13px; }
.btn-large .ring { width: 84px; height: 84px; position: relative; }
.btn-large .ring svg { width: 36px; height: 36px; }
/* hover pulse: a ring that swells out of the button ring and fades, repeating */
.btn-large .ring::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.btn-large:hover .ring::after { animation: pulse 1.4s ease-out infinite; }
/* the finale's CTA: finale.js fires this ring the moment the runway runners arrive */
.btn-large .ring .ping { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
/* the finale CTA sits on the page's centre line; the runways come in from both sides. (Every tier since the
   mobile pass — the phone matches the desktop finale.) The button is just the ring with the rocket mark;
   the copy sits under the headline; the T-0 line reads "All systems go ─── T+ 00:00:00". */
.cta-row { display: flex; justify-content: center; position: relative; }
/* p31: CLICK HERE — the small line's type (12 px, tracked), sitting to the left of the ring just above the runway */
.click-here { position: absolute; right: calc(50% + 46px + 40px); top: 50%; transform: translateY(-100%); margin-top: -10px; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; white-space: nowrap; pointer-events: none; }   /* p32: +17 % */
.close .close-inner { max-width: none; }
.btn .ring .ic-rocket { display: none; fill: currentColor; width: 20px; height: 48px; }
.btn-large .btn-stack, .btn-large .ring .ic-arrow { display: none; }
.btn-large .ring { width: 92px; height: 92px; border-width: 3px; }
.btn-large .ring .ic-rocket { display: block; }
.btn-large .ring::after, .btn-large .ring .ping { inset: -3px; border-width: 3px; }
.btn-large:hover .ring { transform: none; }
.close .sub { display: none; }
.close .sub-cta { display: flex; flex-direction: column; gap: 10px; margin: 30px 0 44px; }
.close .sub-cta b { font-weight: 600; letter-spacing: 0.26em; }
.close .sub-cta span { font-size: 12px; letter-spacing: 0.24em; opacity: 0.55; }
.tzero .blink, .tzero .blink + i, .tzero .score, .tzero .score + i { display: none; }
.tzero i { width: 44px; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Stage (pinned) ---------- */
#stage {
  position: relative; height: 100vh; width: 100%; overflow: hidden;
  background: transparent; z-index: 1;   /* the fixed star field shows through */
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* p23: the reticle hit-tests under the pointer every frame — with ~13k cloud nodes in the scene that was the
   hero's biggest per-frame cost. Only the two things you can actually shoot in the scene take the pointer. */
#scene #rocketBody, #scene .light-hit { pointer-events: visiblePainted; }

.numbers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.num {
  position: absolute; left: 67.5%; top: 50%; /* centred on the rocket lane via GSAP xPercent/yPercent */
  font-family: var(--display); font-size: min(72vh, 44vw); line-height: 1; letter-spacing: 0.1em; text-indent: 0.1em;
  color: var(--cream); opacity: 0; will-change: transform, opacity;
}
/* desktop countdown: the fixed zero + one masked digit that flips up (same device as the Flight Plan's stage number) */
.num-flip { display: flex; text-indent: 0; letter-spacing: 0; gap: 0.1em; }
.num-flip .flip { position: relative; width: 0.56em; height: 1em; overflow: hidden; }
.num-flip .flip span { position: absolute; left: 0; top: 0; }

.hero-copy {
  position: absolute; z-index: 3; left: var(--gutter); top: 50%; /* yPercent:-50 via GSAP */
  max-width: 46vw; pointer-events: none;
}
.hero-copy a { pointer-events: auto; }
/* p39: the hero status line — an orange pip, the line, and a caret that blinks like a live terminal */
.tminus { display: flex; align-items: center; gap: 11px; font-size: 12.5px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 20px; }
.tminus .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tminus .caret { display: inline-block; width: 0.62em; height: 2px; margin-left: 3px; background: currentColor; vertical-align: baseline; animation: blink 1s steps(1) infinite; }
.hero-copy h1 {
  font-family: var(--display); font-size: clamp(60px, 9vw, 164px); line-height: 0.9; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--cream);
}
.tag { margin-top: 30px; font-size: clamp(13px, 1.25vw, 17px); letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.7; }
.hero-copy .lede { margin-top: 16px; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.75; opacity: 0.85; max-width: 44ch; }
.hero-copy .lede em { color: var(--accent); font-weight: 600; }
.syscheck .bits { display: flex; gap: 4px; }
.syscheck .bits i { width: 11px; height: 11px; border: 1.5px solid var(--cream); }
.syscheck .bits i.on { background: var(--cream); }
.syscheck .bits i.on.hot { background: var(--accent); border-color: var(--accent); }

/* p38: the hero's cue to scroll — the label with the systems-check squares beneath it, the whole
   block a link. It carries data-scroll, so a click paginates the story exactly as the old ring
   button did. (p37's falling arrow and the blinking orange dash are gone: three separate things
   under the tagline all saying "down" read as clutter rather than as one instruction.) */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 52px; color: inherit; font-size: 12px; font-weight: 500; }
/* p39: the label is accent and blinks — slower than the caret, so the two read as one system
   rather than as a race. Hovering settles it, so it holds still while you're aiming at it. */
.scroll-cue .sc-txt { position: relative; color: var(--accent); animation: blink 1.4s steps(1) infinite; }
.scroll-cue:hover .sc-txt { animation: none; opacity: 1; }
.scroll-cue .sc-txt::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.scroll-cue:hover .sc-txt::after { transform: scaleX(1); }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }

.brief {
  position: absolute; z-index: 3; left: var(--gutter); top: 50%; /* yPercent:-50 via GSAP */
  max-width: 52vw; opacity: 0; pointer-events: none; visibility: hidden;
}
.brief h2 {
  font-family: var(--display); font-size: clamp(38px, 5.2vw, 94px); line-height: 0.9; text-transform: uppercase; color: var(--cream);
}

.stages { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stage-copy {
  position: absolute; left: var(--gutter); top: 27%; /* yPercent:-50 via GSAP; sits above the smoke line */
  max-width: 34ch; opacity: 0;
}
.stage-copy .label {
  display: block; font-size: clamp(18px, 1.7vw, 26px); font-weight: 500; letter-spacing: 0.28em; margin-bottom: 18px;
}
.stage-copy p { font-size: clamp(13px, 1.05vw, 15px); line-height: 1.8; }
.stage-copy .dash { display: block; width: 36px; height: 2px; background: var(--accent); margin-top: 26px; animation: blink 1.1s steps(1) infinite; }

/* ---------- Slides after liftoff: four frame states (p20), each a "slot" the copy sits in ----------
   .built        cream frame, black mass resting left   — revealed by the smoke wipe   (Who it's for)
   .slide-dark   black frame, cream mass resting right                                  (Two ways to fly)
   .slide-light  cream frame, black bank bottom-left                                    (Former builders)
   .slide-end    black frame, no mass — the stage unpins from here                      (The cost of waiting) */
.built {
  position: absolute; z-index: 3; left: 38%; right: calc(var(--gutter) + 40px); top: 50%; /* yPercent:-50 via GSAP */
  color: var(--ink); pointer-events: none; visibility: hidden;
}
.built h2 {
  font-family: var(--display); font-size: clamp(34px, 4.6vw, 84px); line-height: 0.92; text-transform: uppercase;
}
.built h2 em { color: var(--accent); }
.lede { margin-top: 22px; font-size: clamp(12px, 1vw, 15px); line-height: 1.8; max-width: 58ch; opacity: 0.85; }
.col-head { display: block; font-size: 10px; letter-spacing: 0.3em; margin-bottom: 10px; color: var(--accent); font-weight: 500; }
/* who it's for — the five situations as short rows (STUB copy) */
.for-list {
  margin-top: clamp(20px, 3vh, 34px); padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vh, 18px) clamp(20px, 3vw, 48px);
}
.for-list li { display: grid; gap: 4px; }
.for-list li:last-child { grid-column: 1 / -1; }
.for-list b { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.for-list span { font-size: clamp(11.5px, 0.9vw, 13.5px); line-height: 1.6; opacity: 0.8; }
/* two service tiers — rides on the slide's own colour so it works on black or cream */
.tiers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 48px);
  margin-top: clamp(22px, 3.4vh, 40px); padding-top: clamp(18px, 2.6vh, 30px);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.tier b { display: block; font-weight: 600; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: 0.02em; margin-bottom: 10px; }
.tier p { font-size: clamp(11.5px, 0.92vw, 14px); line-height: 1.75; opacity: 0.82; }

.slide { position: absolute; z-index: 3; top: 50%; /* yPercent:-50 via GSAP */ pointer-events: none; visibility: hidden; }
.slide h2 {
  font-family: var(--display); font-size: clamp(40px, 6vw, 110px); line-height: 0.9; text-transform: uppercase;
}
.slide h2 em { color: var(--accent); }

.slide-dark { left: var(--gutter); width: min(56vw, 1000px); color: var(--cream); }
.slide-dark h2 { font-size: clamp(34px, 4.6vw, 84px); line-height: 0.92; }   /* Two ways keeps its original scale — the tiers need the room */

.slide-light { left: 40%; right: calc(var(--gutter) + 40px); color: var(--ink); }
.slide-light h2 em.white { color: var(--ink); opacity: 0.55; }   /* "just" — white has no meaning on cream, so it steps back instead */
.builder-copy { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 3.5vw, 56px); }
.builder-copy p { font-size: clamp(12.5px, 1vw, 15px); line-height: 1.85; opacity: 0.82; }

.slide-end { left: var(--gutter); width: min(56vw, 1000px); color: var(--cream); }
.slide-end h2 em.white { color: #ffffff; }
.avoid-copy { margin-top: 30px; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.85; max-width: 54ch; opacity: 0.85; }
.avoid-copy b { font-weight: 600; opacity: 1; }

/* ---------- Close / CTA ---------- */
.close {
  position: relative; z-index: 2; min-height: 100vh; background: transparent; color: var(--cream);   /* stars stay put, copy scrolls */
  margin-top: -2px; /* overlap the pinned stage's bottom edge — hides sub-pixel seams */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 8vh) var(--gutter) 0;
}
.tzero .score { opacity: 0.7; }
.tzero .score b { color: var(--accent); font-weight: 600; display: inline-block; }   /* inline-block so the increment pop can scale */
.btn-stack { display: flex; flex-direction: column; gap: 6px; }
.btn-sub { font-size: 10px; letter-spacing: 0.24em; opacity: 0.55; text-transform: uppercase; }
.close-inner { position: relative; z-index: 2; max-width: 80vw; pointer-events: none; }   /* shots pass through the type */
.close-inner a { pointer-events: auto; }
.tzero { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 0.3em; margin-bottom: 30px; }
.tzero .blink { color: var(--accent); font-weight: 600; }
.tzero i { width: 40px; height: 1px; background: var(--cream); opacity: 0.4; }
.tzero .clock { opacity: 0.7; }
.tzero .clock b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
/* runway lights: a dotted line from the left edge into the CTA ring (finale.js positions it) */
.runway { position: absolute; left: 0; height: 12px; z-index: 1; pointer-events: none; overflow: visible; }
/* the nav score: targets down, with a soft ring that pulses once whenever the number changes */
/* asteroid tally (p19): just the two digits, centred in the nav; the ring pings when it changes */
/* p39: the tally is its own fixed layer rather than a child of .nav. A child can't paint below its
   parent's stacking context, and .nav is z-index 70 — so inside the nav the tally always floated on
   top of the touch menu. Out here at 68 the menu overlay (69) covers it, while the nav (70) keeps
   the close button clickable above the menu. */
.nav-score {
  position: fixed; left: 50%; top: 0; height: var(--nav-h); transform: translateX(-50%); z-index: 68;
  display: inline-flex; align-items: center; color: var(--accent); font-weight: 500; font-size: 12px; letter-spacing: 0.24em;
  pointer-events: none;
}
.nav-score b { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: left; }
/* the ring lives on the digit box itself (so it stays put on the touch tiers, where .nav-score is static) and is
   centred on the second digit's cell — glyph plus its letter-spacing: 1ch + 0.24em in, then half a cell (0.5ch + 0.12em) */
.nav-score b::after { content: ''; position: absolute; left: calc(1.5ch + 0.36em); top: 50%; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; transform: translate(-50%, -50%) scale(0.6); pointer-events: none; }
/* p41: this was `.nav-score.hit`, which collided with the reticle's own `.hit` markers — and those
   are killed by `@media (pointer: coarse) { .cursor, .hit, .rico { display: none !important } }`.
   So on touch the tally vanished the instant it scored its first target. */
.nav-score.pinged b::after { animation: scorePing 0.7s ease-out 1; }
/* touch: the tally hangs directly under the menu button — same 44px column, centred in it, so the
   two read as one control stack. `right` matches .menu-btn's own edge (gutter minus its −10 margin). */
@media (max-width: 1024px) {
  .nav-score {
    left: auto; right: calc(var(--gutter) - 10px); top: calc(var(--nav-h) - 9px);
    width: 44px; height: auto; transform: none; justify-content: center; font-size: 11px;
  }
  .nav-score b { text-align: center; }
}
@keyframes scorePing { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.close h2 {
  font-family: var(--display); font-size: clamp(54px, 9vw, 170px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.005em;
  transform-origin: 0 50%; animation: breathe 6s ease-in-out infinite;   /* barely-there swell */
}
.close h2 em { color: var(--accent); }
/* p21: every finale headline is a full fill, like the Mission page's (the hairline-outline variant is retired) */
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.close .sub { margin: 30px 0 36px; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.26em; text-transform: uppercase; }

.footer {
  position: relative; z-index: 2; margin-top: 9vh; padding: 34px 0 30px;
  border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; font-size: 11px;
}
.f-brand { display: flex; align-items: center; gap: 12px; font-weight: 500; letter-spacing: 0.24em; }
.f-col { display: flex; flex-direction: column; gap: 10px; }
.f-head { color: var(--accent); font-weight: 500; }
.f-col a { opacity: 0.8; transition: opacity 0.25s var(--ease); }
.f-col a:hover { opacity: 1; }
.f-copy { grid-column: 1 / -1; margin-top: 26px; opacity: 0.5; font-size: 10px; text-transform: none; letter-spacing: 0.08em; }

/* ---------- Booking overlay — "Control room" (booking.js) ----------
   A dark panel over the dimmed finale: our copy left, Cal.com's calendar right in our colours. */
.book { position: fixed; inset: 0; z-index: 91; display: grid;   /* above the grain (90) so the calendar reads clean */ place-items: center; padding: 24px; color: var(--cream); }
.book[hidden] { display: none; }
.book-dim { position: absolute; inset: 0; background: rgba(12, 12, 12, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.book-panel {
  /* p36: 760 rather than 680 — the confirmation now carries a five-field form, and the extra room
     is free on anything taller than a laptop lid (the min() still clamps it on short screens) */
  position: relative; width: min(1220px, calc(100vw - 48px)); height: min(760px, calc(100vh - 48px)); background: var(--ink); border: 1.5px solid var(--cream);
  display: grid; grid-template-columns: 340px 1fr; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}
.book-side { padding: 36px 32px 30px; border-right: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); display: flex; flex-direction: column; }
.book-h { font-family: var(--display); font-size: 50px; line-height: 0.92; text-transform: uppercase; margin: 14px 0 28px; }
.book-h span, .book-h em { display: block; }
.book-h em { color: var(--accent); font-style: normal; }
.book-h.big { font-size: clamp(56px, 6vw, 88px); margin: 14px 0 18px; }
/* the three points carry the panel: big display words, the detail small beneath each */
.book-meta { list-style: none; display: grid; gap: 20px; font-size: 11px; line-height: 1.55; }
.book-meta li { display: flex; gap: 14px; align-items: flex-start; }
.book-meta svg { width: 18px; height: 18px; flex: none; margin-top: 5px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.book-meta b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--cream); margin-bottom: 5px; }
.book-meta span { opacity: 0.85; }
.book-after { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); font-size: 11px; line-height: 1.55; opacity: 0.85; }   /* p19: what happens after the briefing */
.book-after b { color: var(--cream); font-weight: 600; }
.book-clock { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.8; }
.book-clock i { width: 30px; height: 1px; background: var(--cream); opacity: 0.4; }
.book-clock b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.book-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 32px 36px 24px; }
.book-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); }
.book-steps { list-style: none; display: flex; gap: 22px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.book-steps li { opacity: 0.45; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: opacity 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.book-steps li.on { opacity: 1; color: var(--accent); border-bottom-color: var(--accent); }
.book-x { width: 34px; height: 34px; border: 1.5px solid var(--cream); border-radius: 50%; background: transparent; color: var(--cream); font: 12px/1 var(--mono); display: grid; place-items: center; opacity: 0.8; transition: opacity 0.2s, background 0.25s var(--ease), color 0.25s var(--ease); }
.book-x:hover { opacity: 1; background: var(--cream); color: var(--ink); }
.book-body { flex: 1; min-height: 0; position: relative; padding-top: 18px; }
.book-cal { height: 100%; overflow: auto; opacity: 0; transition: opacity 0.4s var(--ease); }
.book.cal-ready .book-cal { opacity: 1; }
.book-cal iframe { display: block; width: 100% !important; }
/* a quiet "acquiring signal" line while the frame loads */
.book-body::before { content: 'Acquiring signal'; position: absolute; left: 0; top: 50%; right: 0; text-align: center; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.45; animation: acquire 1.4s ease-in-out infinite; pointer-events: none; }
.book.cal-ready .book-body::before, .book.cal-failed .book-body::before { display: none; }
@keyframes acquire { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.55; } }
.book-done, .book-fail { position: absolute; inset: 18px 0 0; display: flex; flex-direction: column; justify-content: center; }
.book-done { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: end; align-content: center; }
.book-done[hidden], .book-fail[hidden], .book-cal[hidden] { display: none; }
.book-when { font-size: 13px; letter-spacing: 0.08em; margin-top: 10px; }
.book-note { font-size: 12px; line-height: 1.7; opacity: 0.75; margin-top: 10px; max-width: 52ch; }
.book-count { text-align: right; }
.book-count .k { display: block; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.book-tminus { display: block; font-family: var(--display); font-size: clamp(44px, 4.6vw, 68px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.book-count small { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-top: 12px; }
.book-stamp { position: absolute; right: 12px; top: 6px; border: 4px solid var(--accent); color: var(--accent); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; padding: 10px 18px; transform: rotate(8deg); opacity: 0; white-space: nowrap; }

/* p35: the four questions on the confirmation panel (booking.js builds the fields) */
.book.booked .book-fail { display: none !important; }   /* a late load-timeout must never show through the confirmation */
.book-done:has(.book-ask) { grid-template-columns: 1fr 250px; align-content: start; align-items: start; inset: 12px 0 0; overflow-y: auto; scrollbar-width: thin; padding-right: 14px; }
.book-done:has(.book-ask) .book-h.big { font-size: clamp(32px, 3.2vw, 44px); margin: 0 0 6px; }
.book-done:has(.book-ask) .book-tminus { font-size: clamp(28px, 3vw, 40px); }
.book-done:has(.book-ask) .book-count .k { margin-bottom: 6px; }
.book-done:has(.book-ask) .book-count small { margin-top: 8px; }
.book-done:has(.book-ask) .book-note { display: none; }   /* the invite line is in their inbox already — the questions need the room */
.book.booked .book-body::before { display: none; }   /* the "acquiring signal" loader has no business here */
.book-ask { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; padding-bottom: 4px; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); }
/* p36: this form is read once, quickly, by someone who has just booked — it gets plain cream at a
   readable size. The orange micro-caps belong on furniture, not on something you have to fill in. */
.ask-lede { font-size: 14px; line-height: 1.65; opacity: 0.92; max-width: 70ch; margin: 0 0 14px; }
.ask-lede b { color: var(--cream); font-weight: 600; opacity: 1; }
.ask-lede.ask-done { font-size: 15px; opacity: 1; margin: 0; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; }
.book-ask label { display: grid; gap: 6px; }
.book-ask label:not(.half) { grid-column: 1 / -1; }
.book-ask label span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.85; font-weight: 600; }
.book-ask input, .book-ask textarea {
  font: inherit; font-size: 15px; color: var(--cream); background: color-mix(in srgb, var(--cream) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream) 20%, transparent); border-radius: 0; padding: 10px 12px; width: 100%; resize: none;
}
.book-ask input::placeholder, .book-ask textarea::placeholder { color: var(--cream); opacity: 0.4; }
.book-ask input:focus, .book-ask textarea:focus { outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--cream) 8%, transparent); }
.ask-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ask-send { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); background: var(--accent); border: 0; padding: 11px 22px; cursor: pointer; transition: background 0.2s; }
.ask-send:hover { background: var(--cream); }
.ask-note { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.book-fail .btn { margin-top: 24px; align-self: flex-start; }
.book-foot { display: flex; justify-content: space-between; padding-top: 16px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; }
.book-foot a:hover { color: var(--accent); }
.book .eyebrow { white-space: nowrap; margin-bottom: 0; }
/* while the panel is up: the OS cursor is back (the Cal frame needs it) and the reticle steps out */
body.book-open, body.book-open * { cursor: auto !important; }
body.book-open .cursor, body.book-open .scroll-hint { opacity: 0 !important; }
body.book-open .book-x, body.book-open .book a { cursor: pointer !important; }
@media (max-width: 1024px) {
  .book { padding: 0; }
  .book-panel { width: 100vw; height: 100vh; height: 100dvh; grid-template-columns: 1fr; border: 0; }
  .book-side { display: none; }
  .book-main { padding: 20px 20px 16px; }
  .book-steps { gap: 14px; font-size: 9px; flex-wrap: wrap; }
  .book .eyebrow { white-space: normal; }
  .book-done { grid-template-columns: 1fr; align-items: start; }
  .book-count { text-align: left; }
  .book-stamp { display: none; }
  /* the confirmation stacks here, and :has() outranks the plain .book-done rule above — say it again */
  .book-done:has(.book-ask) { grid-template-columns: 1fr; padding-right: 8px; }
  .book-done:has(.book-ask) .book-count { margin-top: 14px; }
  .ask-grid { grid-template-columns: 1fr; }
  .book-ask input, .book-ask textarea { font-size: 16px; }   /* anything under 16 makes iOS zoom the panel on focus */
}

/* ---------- Responsive ---------- */
/* Tablet and phone rules live in tablet.css / phone.css (loaded by media query); nothing here applies below 1024px on purpose. */

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
}