/* ============================================================
   Betihuti scroll-cinematic — warm cream theme
   ============================================================ */
:root {
  --paper: #fbf7ef;
  --surface: #fffdf8;
  --ink: #16211f;
  --ink-2: #3d4a47;
  --muted: #61706c;
  --teal: #1f5a43;
  --teal-ink: #17362b;
  --mint: #e7f0ea;
  --gold: #f2b705;
  --lavender: #8b7bd8;
  --coral: #e36f55;
  --line: #e6ddcd;
  /* Clash Display + Satoshi (Fontshare) — var names kept for call sites */
  --serif: "Clash Display", "Fraunces", Georgia, sans-serif;
  --sans: "Satoshi", "Inter", system-ui, sans-serif;
  --shadow: 0 8px 44px rgba(20, 30, 28, 0.09);
}

.landing-page, .landing-page * { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* A hard fling at the end of a 23,000px page rubber-bands far past the footer
   on iOS, and the bounce parks a screenful of empty paper under it. */
html, body { overscroll-behavior-y: none; }

body {
  background:
    radial-gradient(720px 360px at 20% -6%, rgba(31,90,67,0.10), transparent),
    radial-gradient(560px 300px at 84% 4%, rgba(242,183,5,0.09), transparent),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* dot-grid texture */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(22,33,31,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(640px 420px at 22% 30%, black, transparent 75%);
  opacity: 0.5;
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--paper);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader.done { transform: translateY(-100%); pointer-events: none; }
.preloader-mark { height: 60px; }
/* Blueprint ring (oryzo-style drawn preloader): the teal arc draws with REAL
   frame-load progress; the dashed gold ring slowly rotates like a schematic. */
.preloader-hub { position: relative; width: 184px; height: 184px; display: grid; place-items: center; }
.preloader-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader-hub .ring-track { fill: none; stroke: rgba(22,33,31,0.08); stroke-width: 2.4; }
.preloader-hub .ring-val {
  fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 339.3; stroke-dashoffset: 339.3;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.25s linear;
}
.preloader-hub .ring-dash {
  fill: none; stroke: rgba(242,183,5,0.6); stroke-width: 1.8; stroke-dasharray: 2 7;
  animation: ringspin 10s linear infinite; transform-origin: 50% 50%;
}
@keyframes ringspin { to { transform: rotate(360deg); } }
.preloader-mascot { height: 130px; animation: bob 2.4s ease-in-out infinite; }
.preloader-count { font-family: var(--serif); font-size: 2.75rem; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.preloader-bar { width: 300px; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.preloader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--gold)); }

/* ---------- Match Progress Rail ---------- */
.match-rail {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: grid; place-items: center;
  width: 82px; height: 82px; border-radius: 999px;
  background: rgba(251,247,239,0.70);
  border: 1px solid rgba(230,221,205,0.82);
  box-shadow: 0 8px 26px rgba(20,30,28,0.08);
  pointer-events: none;
}
.match-rail svg { width: 82px; height: 82px; transform: rotate(-90deg); }
.match-rail-track { fill: none; stroke: rgba(230,221,205,0.92); stroke-width: 6; }
.match-rail-val {
  fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 213.6; stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 0.18s linear;
}
.match-rail-label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  line-height: 1.05;
}
.match-rail-label b {
  display: block; font-size: 1.05rem; font-weight: 900; color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
.match-rail-label span {
  display: block; margin-top: 4px; font-size: 0.52rem; font-weight: 900;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.match-rail.match-rail-complete {
  background: rgba(227,241,238,0.82);
  border-color: rgba(180,215,208,0.9);
}

/* ---------- Buttons / chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 0.95rem; transition: transform 0.25s, box-shadow 0.25s;
  will-change: transform;
}
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 6px 22px rgba(31,90,67,0.35); position: relative; overflow: hidden; }
.btn-teal::after { /* shimmer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 0%, 60% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.btn-ghost { background: rgba(255,253,248,0.8); color: var(--teal-ink); border: 1px solid var(--line); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,30,28,0.18); }
.btn-arrow { transition: transform 0.25s; }
.btn:hover .btn-arrow { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.72);
  padding: 7px 13px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  box-shadow: 0 2px 10px rgba(20,30,28,0.05);
}
.chip-teal { background: var(--mint); color: var(--teal-ink); border-color: #b9d2c2; }
.chip-lav  { background: #efeafd; color: #4c3fa8; border-color: #d8cff5; }

/* ---------- Scrub sections ---------- */
.scrub { position: relative; z-index: 1; }
/* one continuous 720-frame film — same total scroll length the four
   separate scenes used to have, so per-frame scroll distance is unchanged */
.hero-scrub.film { height: 1780vh; }
.hero-scrub.domain-assets-quarantined {
  height: 100vh;
  background:
    radial-gradient(circle at 76% 28%, rgba(242,183,5,0.16), transparent 25%),
    radial-gradient(circle at 64% 64%, rgba(31,90,67,0.15), transparent 30%),
    linear-gradient(135deg, var(--paper), #f3eee2 55%, #e7f0eb);
}
.hero-scrub.domain-assets-quarantined canvas,
.hero-scrub.domain-assets-quarantined .overlay,
.hero-scrub.domain-assets-quarantined .progress {
  display: none;
}

/*
 * The first paint only needs the hero. Let Chromium skip style, layout and
 * paint work for the below-the-fold chapters until they approach the
 * viewport. Their outer geometry remains explicit, so scroll length and every
 * sticky/scrub calculation stay unchanged when a chapter becomes relevant.
 */
.journey,
.facts,
.employers,
.closing {
  content-visibility: auto;
}

/* oryzo-style sideways journey gallery: pinned viewport + flex track,
   scroll progress slides the stills horizontally (eased in site.js) */
/* colour journey: the gallery chamber deepens from paper into mint as you
   traverse it, handing off cleanly to the dark employers band */
.journey {
  position: relative; z-index: 2; height: 340vh;
  background: linear-gradient(180deg, var(--paper) 0%, #f3ede0 30%, #eaf1ec 70%, var(--mint) 100%);
}
.journey-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; align-content: center; gap: 18px;
}
/* single-line label sits right above the track; the pair centers together */
.journey-head { text-align: center; padding: 0 22px; }
.journey-head .eyebrow { margin-bottom: 0; }
.journey-track {
  display: flex; gap: 2.5vw; width: max-content;
  padding: 0 7vw; will-change: transform;
}
.journey-card {
  flex: 0 0 min(80vw, 1400px); margin: 0; position: relative;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.journey-card {
  background:
    radial-gradient(circle at 70% 30%, rgba(242,183,5,0.22), transparent 28%),
    radial-gradient(circle at 32% 72%, rgba(31,90,67,0.22), transparent 32%),
    linear-gradient(135deg, #fffdf8, #e8f0eb);
}
.journey-card:nth-child(even) {
  background:
    radial-gradient(circle at 28% 28%, rgba(138,112,196,0.18), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(31,90,67,0.2), transparent 32%),
    linear-gradient(135deg, #f5f1e8, #eef4f1);
}
.journey-visual {
  min-height: 64vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: clamp(34px, 7vw, 110px);
  text-align: center;
}
.journey-visual > span {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(31,90,67,0.24);
  border-radius: 24px;
  background: rgba(255,253,248,0.72);
  box-shadow: var(--shadow);
  color: var(--teal);
  font-size: 2rem;
  font-weight: 900;
}
.journey-visual > .journey-info::before { content: "i"; }
.journey-visual h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
  color: var(--ink);
}
.journey-visual p {
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.6;
}
.journey-card figcaption {
  position: absolute; inset-inline-start: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,253,248,0.94);
  border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-ink);
}
.journey-card figcaption::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 5px rgba(242,183,5,0.14);
}
.sticky {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden; display: grid; place-items: center;
}
.scrub canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-grade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251,247,239,0.55) 0%, transparent 22%, transparent 74%, rgba(251,247,239,0.85) 100%); }
/* hero: feather the left edge into paper (hides the biasX seam, lifts copy contrast) */
.hero-scrub .stage-grade {
  background:
    linear-gradient(90deg, rgba(251,247,239,0.92) 0%, rgba(251,247,239,0.70) 28%, rgba(251,247,239,0.22) 48%, rgba(251,247,239,0) 58%),
    linear-gradient(180deg, rgba(251,247,239,0.30) 0%, transparent 18%, transparent 76%, rgba(251,247,239,0.68) 100%);
}
.hero-scrub canvas { filter: saturate(1.04) contrast(1.04); }

/* hero copy sits left over the canvas */
.hero-copy {
  position: relative; z-index: 10; max-width: 1120px; width: 100%;
  padding: 0 48px; margin-top: -4vh;
  opacity: var(--hero-intro-alpha, 1);
  transform: translateY(var(--hero-intro-y, 0px));
  transition: opacity 0.12s linear;
}
.hero-scrub.chapter-active .hero-copy {
  opacity: 0;
  pointer-events: none;
}
.hero-h1 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em;
  /* capped so the headline never runs under the match cards in the frame */
  font-size: clamp(2.4rem, 4.5vw, 3.9rem); line-height: 1.05; color: var(--ink);
  max-width: 12ch;
}
.aurora {
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aurora 7s ease-in-out infinite;
}
@keyframes aurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.split .ch { display: inline-block; opacity: 0; transform: translateY(26px); filter: blur(6px); }
.split.go .ch { animation: chIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.hero-sub { margin-top: 22px; max-width: 520px; font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.hero-rotate {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 1.05rem; font-weight: 700; color: var(--ink-2);
}
.hero-rotate span { color: var(--teal-ink); min-width: 12ch; }
.hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-tour { padding-left: 16px; }
.play-dot {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 0.66rem; line-height: 1;
}

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); animation: bob 1.9s ease-in-out infinite; transition: opacity 0.4s;
}
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(6px);} }

/* overlay lines on scrubs */
/* full-bleed overlay: lines position against the viewport-wide stage, so
   7vw side anchors and 50% centering mean the same thing in every scrub */
.overlay { position: absolute; inset: 0; z-index: 10; text-align: center; pointer-events: none; }
.overlay-left { text-align: left; }
.line {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: 82vw;
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 4vw, 3.4rem); color: var(--ink);
  text-shadow: 0 2px 24px rgba(251,247,239,0.9);
  opacity: 0; will-change: opacity, transform;
}
.overlay-left .line { left: 8vw; transform: translate(0, -50%); text-align: left; }
/* per-line sides for the one-shot: copy sits opposite the walking subject */
.line.line-left { left: 7vw; right: auto; transform: translate(0, -50%); text-align: left; }
.line.line-right { left: auto; right: 7vw; transform: translate(0, -50%); text-align: right; }

/* scene copy blocks — label + headline + support line in the empty area,
   fade/blur scrubbed by the engine like .line */
.scene-copy {
  position: absolute; top: 50%; max-width: 38ch;
  opacity: 0; will-change: opacity, transform;
}
.scene-copy.line-left { left: 8vw; right: auto; text-align: left; }
/* right-ANCHORED but the English text itself stays left-aligned */
.scene-copy.line-right { left: auto; right: 8vw; text-align: left; }
/* editorial accent spine: a teal→gold hairline down each block's left edge
   with the chapter dot sitting on it — echoes the page's timeline spine */
.scene-copy:not(.sc-panel) { padding-left: 22px; }
.scene-copy:not(.sc-panel)::before {
  content: ""; position: absolute; left: 0; top: 15px; bottom: 8px; width: 3px;
  border-radius: 3px; opacity: 0.8;
  background: linear-gradient(180deg, var(--teal), var(--gold));
}
.scene-copy:not(.sc-panel)::after {
  content: ""; position: absolute; left: -3.5px; top: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 5px rgba(242,183,5,0.14);
}
.scene-copy .sc-label {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content; padding: 0;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
  text-shadow: 0 1px 18px rgba(251,247,239,0.96);
}
.scene-copy h2 {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.4vw, 3.05rem); color: var(--ink);
  line-height: 1.04; margin-bottom: 12px; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(251, 247, 239, 0.96), 0 1px 1px rgba(255,255,255,0.7);
}
.scene-copy p:not(.sc-label) {
  max-width: 28ch;
  font-size: 1.02rem; line-height: 1.58; color: var(--ink-2);
  text-shadow: 0 1px 16px rgba(251, 247, 239, 0.98);
}
/* aurora over pale film frames: deeper stops than the hero's, and no
   inherited paper-glow shadow — it reads as washed-out embossing behind
   gradient-clipped text */
.scene-copy .aurora {
  background-image: linear-gradient(90deg, var(--teal-ink), #a06f14, var(--teal-ink));
  text-shadow: none;
}

/* the old "Three steps" band lives here now — a step badge on the chapter
   label, and the trust signals as chips under the relevant scene copy */
.scene-copy .sc-step {
  padding: 3px 9px; border-radius: 999px;
  background: var(--mint); color: var(--teal-ink);
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em;
  border: 1px solid #b9d2c2;
}
.scene-copy .sc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.scene-copy .sc-chips span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,253,248,0.85); color: var(--ink);
  padding: 6px 11px; font-size: 0.72rem; font-weight: 800;
  box-shadow: 0 2px 10px rgba(20,30,28,0.06);
}
.scene-copy .sc-chips span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 4px rgba(31,90,67,0.11);
}

@media (max-width: 1100px) {
  .scene-copy {
    max-width: min(34ch, 44vw);
  }
  .scene-copy.line-left { left: max(24px, 5vw); }
  .scene-copy.line-right { right: max(24px, 5vw); }
  .scene-copy h2 {
    font-size: clamp(1.55rem, 4.25vw, 2.45rem);
  }
  .scene-copy p:not(.sc-label) {
    max-width: 28ch;
  }
  .scene-copy[data-still="0.75"].line-right {
    top: 43%;
    max-width: min(30ch, 40vw);
  }
  .closing-mascot { height: min(210px, 26vh); right: 14px; bottom: -16px; }
}

/* scrub progress hairline */
.progress { position: absolute; left: 28px; right: 28px; bottom: 46px; height: 2px; background: rgba(22,33,31,0.10); z-index: 9; border-radius: 2px; }
.progress-fill { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--gold)); }

/* ---------- Logo cloud (ported from the candidate homepage) ---------- */
/* blends into the paper instead of sitting as a white strip */
.logo-cloud { position: relative; z-index: 2; padding: 30px 0 26px; background: var(--paper); border-bottom: 1px solid rgba(230,221,205,0.55); }
.logo-cloud-label {
  text-align: center; margin-bottom: 18px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); opacity: 0.8;
}
.marquee { overflow: hidden; position: relative; z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-row { display: inline-flex; align-items: center; gap: 3rem; padding-right: 3rem; }
.logo-row .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-style: normal; font-size: 1rem; font-weight: 700; color: var(--muted);
  transition: color 0.2s;
}
.logo-row .brand img {
  width: 24px; height: 24px;
  opacity: 0.5; filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.logo-row .brand:hover { color: var(--ink); }
.logo-row .brand:hover img { opacity: 1; filter: none; }

.text-link {
  color: var(--teal-ink); font-size: 0.9rem; font-weight: 800;
  text-decoration: none; transition: color 0.25s;
}
.text-link:hover { color: var(--ink); }
.trust-link { margin-top: 14px; font-size: 0.88rem; color: var(--muted); }

/* ---------- Bands / sections ---------- */
.band { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 110px 48px; }
.eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.01em; line-height: 1.1; max-width: 22ch; }

/* ---------- Evidence pieces (embedded in the film) ---------- */
.caption-card {
  margin-top: 34px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(251,247,239,0.72); padding: 18px;
}
/* live-caption quote inside chapter 04's scene copy */
.scene-copy .sc-quote { margin-top: 16px; padding: 14px 16px; max-width: 36ch; background: rgba(255,253,248,0.88); }
.scene-copy .sc-quote p { font-size: 0.88rem; }
/* page-centered block (engine keeps the -50% x correction) */
.scene-copy.sc-center { left: 50%; text-align: left; }
/* old-way / new-way comparison beats in the film's final walk — open
   typography, struck-out pains then teal-checked wins */
.scene-copy .sc-list { list-style: none; display: grid; gap: 11px; margin-top: 4px; }
.scene-copy .sc-list + .sc-list { margin-top: 15px; }
.scene-copy .sc-list li {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.02rem; font-weight: 700; color: var(--ink-2);
  text-shadow: 0 1px 16px rgba(251,247,239,0.98);
}
.scene-copy .sc-list li::before {
  content: "✕"; display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.64rem; font-weight: 900;
  background: rgba(227,111,85,0.16); color: var(--coral);
}
.scene-copy .sc-list.sc-old li {
  color: var(--muted);
  text-decoration: line-through; text-decoration-color: rgba(97,112,108,0.55);
}
.scene-copy .sc-list.sc-new li { color: var(--ink); }
.scene-copy .sc-list.sc-new li::before { content: "✓"; background: var(--teal); color: #fff; }
.caption-card span, .mini-kicker, .rescore-label {
  display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.caption-card p { margin-top: 8px; color: var(--ink); line-height: 1.6; font-size: 0.95rem; }

/* trust */
.trust-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.tcard h3 { font-size: 1.02rem; margin-bottom: 8px; }
.tcard p { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.beti-chip {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 12px;
  background: var(--mint); border: 1px solid #b9d2c2; border-radius: 999px;
  padding: 10px 20px 10px 10px; font-size: 0.9rem; color: var(--teal-ink);
}
.beti-chip img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }

/* companions */
.companion { position: absolute; height: 150px; z-index: 3; filter: drop-shadow(0 10px 24px rgba(20,30,28,0.18)); }
.companion-cheer { right: 20px; top: -66px; transform: rotate(6deg); }
.companion-magnify { right: 34px; top: 60px; height: 130px; transform: rotate(-5deg); }

/* ---------- Facts — oryzo-style motion cards ---------- */
.facts {
  position: relative; z-index: 2;
  /* Start a clear step deeper than the pale mint the journey ends on, so this
     "Why it works" band reads as its own segment rather than blending in. */
  background: linear-gradient(180deg, #cfe8e0 0%, var(--paper) 52%);
  border-top: 1px solid rgba(31,90,67, 0.24);
  box-shadow: inset 0 18px 32px -22px rgba(15, 92, 80, 0.42);
  padding: 84px max(4vw, 24px) 104px;
}
.facts-head { max-width: 1260px; margin: 0 auto 46px; text-align: center; }
.facts-head .h2 { margin: 10px auto 0; max-width: 22ch; }
.facts-grid {
  max-width: 1260px; margin: 0 auto;
  display: grid; grid-template-columns: 0.92fr 1.04fr 1.04fr; gap: 18px;
  align-items: stretch;
}
.fact-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 26px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 34px 30px; min-height: 420px;
}
.fact-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
  font-size: 1.55rem; line-height: 1.12; max-width: 16ch;
}
.fact-copy { margin-top: auto; padding-top: 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 34ch; }
.fact-dark { background: #14201d; border-color: rgba(251,247,239,0.12); color: var(--paper); }
.fact-dark .fact-copy { color: rgba(251,247,239,0.75); }
/* the hero numeral: stamps up on reveal, gradient like the film credits */
.fact-big {
  margin-top: 28px;
  font-family: var(--serif); font-weight: 700; line-height: 0.9;
  font-size: clamp(4.6rem, 6.6vw, 6.6rem); letter-spacing: -0.02em;
  background: linear-gradient(100deg, #f7d85b, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  translate: 0 26px; opacity: 0;
  transition: translate 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s, opacity 0.6s ease 0.25s;
}
.fact-card.in .fact-big { translate: 0 0; opacity: 1; }
.fact-big em { font-style: normal; font-size: 0.42em; letter-spacing: 0; margin-left: 0.08em; }
/* live voice equalizer — the interview starts the moment you apply */
.fact-eq { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 18px; }
.fact-eq i {
  width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #f7d85b, var(--teal));
  transform-origin: bottom;
  animation: eq 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.13s);
}
.fact-eq i:nth-child(3n)   { height: 100%; }
.fact-eq i:nth-child(3n+1) { height: 62%; }
.fact-eq i:nth-child(3n+2) { height: 82%; }
@keyframes eq { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
/* animated 100% ring — draws when the card reveals */
.fact-ring { position: relative; display: grid; place-items: center; margin: 26px auto 0; }
.fact-ring svg { width: 176px; height: 176px; transform: rotate(-90deg); }
.fr-track { fill: none; stroke: rgba(22,33,31,0.08); stroke-width: 10; }
/* rotating schematic dash — same motif as the preloader ring */
.fr-dash {
  fill: none; stroke: rgba(242,183,5,0.55); stroke-width: 1.5;
  stroke-dasharray: 2 7;
  animation: ringspin 12s linear infinite; transform-origin: 50% 50%;
}
.fr-val {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1) 0.35s;
}
.fact-card.in .fr-val { stroke-dashoffset: 0; }
.fr-center { position: absolute; display: grid; justify-items: center; row-gap: 1px; }
.fact-ring b { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; color: var(--teal-ink); }
.fr-center i { font-style: normal; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* floating role pills orbit (the oryzo power-draw card) */
.fact-orbit { position: relative; height: 236px; margin-top: 18px; }
.orbit-ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1.5px dashed rgba(15,92,80,0.28);
  animation: ringspin 46s linear infinite;
}
.orbit-ring.r1 { width: 216px; height: 216px; }
.orbit-ring.r2 { width: 138px; height: 138px; animation-direction: reverse; animation-duration: 30s; }
/* the evidence core every role is scored from */
.orbit-core {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  filter: drop-shadow(0 10px 22px rgba(31,90,67,0.35));
  animation: corePulse 3s ease-in-out infinite;
}
@keyframes corePulse { 50% { scale: 1.09; } }
.fact-orbit span {
  position: absolute; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 0.76rem; font-weight: 800;
  box-shadow: 0 12px 26px rgba(20,30,28,0.2);
  animation: orbFloat 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  /* matches "arrive": springy staggered pop-in, then the idle float */
  scale: 0;
  transition: scale 0.65s cubic-bezier(0.34,1.56,0.64,1);
  transition-delay: calc(var(--d, 0s) * 0.22 + 0.3s);
}
.fact-card.in .fact-orbit span { scale: 1; }
@keyframes orbFloat { 50% { translate: 0 -8px; } }
.fact-orbit span:nth-of-type(1) { left: 50%; top: 4px; transform: translateX(-50%); }
.fact-orbit span:nth-of-type(2) { right: 5%; top: 56px; }
.fact-orbit span:nth-of-type(3) { left: 7%; top: 100px; }
.fact-orbit span:nth-of-type(4) { right: 9%; top: 146px; }
.fact-orbit span:nth-of-type(5) { left: 22%; bottom: 2px; }

/* employers — FULL-BLEED dark "hiring console" band */
.employers { max-width: none; padding: 0; }
.employers-card {
  position: relative; overflow: hidden;
  /* own compositor layer: the vw/vh gradients + masked dot grid otherwise
     re-rasterize on every scroll frame (the flickering top strip) */
  transform: translateZ(0); will-change: transform;
  padding: 120px max(6vw, 32px);
  background:
    radial-gradient(56vw 60vh at 84% 8%, rgba(31,90,67,0.38), transparent 70%),
    radial-gradient(44vw 50vh at 4% 100%, rgba(242,183,5,0.18), transparent 70%),
    #14201d;
}
.employers-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(251,247,239,0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60vw 70vh at 74% 30%, black, transparent 76%);
}
.employers-card::after {
  content: "EVIDENCE"; position: absolute; left: -1vw; bottom: -0.13em;
  font-family: var(--serif); font-weight: 700; line-height: 0.8;
  font-size: clamp(5rem, 15.5vw, 15rem); letter-spacing: 0.01em;
  color: rgba(251,247,239,0.05); pointer-events: none; white-space: nowrap;
}
.employers-inner {
  position: relative; z-index: 1;
  max-width: 1260px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center;
}
.employers-copy { position: relative; z-index: 1; }
.employers .eyebrow { color: #7fc6b9; }
.employers .h2 { color: var(--paper); }
.employers-points { list-style: none; margin: 24px 0 32px; display: grid; gap: 12px; }
.employers-points li {
  display: flex; gap: 11px; align-items: center;
  color: rgba(251,247,239,0.85); font-size: 1rem; font-weight: 600;
}
.employers-points li::before {
  content: "✓"; display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(31,90,67,0.4); color: #f7d85b;
  font-size: 0.68rem; font-weight: 900;
}
.employers-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-ghost-dark { background: transparent; color: var(--paper); border: 1px solid rgba(251,247,239,0.3); }
/* mock pipeline panel — the employer's view of interviewed candidates */
.employers-panel {
  position: relative; z-index: 1; display: grid; gap: 10px;
  border-radius: 22px; padding: 20px;
  background: rgba(251,247,239,0.08); /* no backdrop-filter: scroll flicker */
  border: 1px solid rgba(251,247,239,0.14);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.ep-head {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px;
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(251,247,239,0.6);
}
.ep-live { color: #f7d85b; letter-spacing: 0.06em; }
.ep-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(251,247,239,0.07); border: 1px solid rgba(251,247,239,0.1);
  border-radius: 14px; padding: 12px 14px;
}
.ep-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--teal); color: #fff; font-size: 0.72rem; font-weight: 900;
}
.ep-row > div { flex: 1; min-width: 0; display: grid; }
.ep-row b { color: var(--paper); font-size: 0.92rem; }
.ep-row i { font-style: normal; color: rgba(251,247,239,0.55); font-size: 0.76rem; }
.ep-row em {
  font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 1.35rem;
  background: linear-gradient(90deg, #f7d85b, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ep-foot { margin-top: 2px; text-align: center; font-size: 0.72rem; color: rgba(251,247,239,0.5); }

/* closing */
/* closing — FULL-BLEED centered finale: copy centered, mascot watches from
   the right edge (bottom-anchored, slightly cropped by the card) */
.closing { max-width: none; padding: 0; }
.closing-card {
  position: relative; text-align: center;
  background:
    radial-gradient(60vw 60vh at 78% 110%, rgba(31,90,67,0.14), transparent 72%),
    radial-gradient(40vw 40vh at 8% 0%, rgba(242,183,5,0.10), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 60px max(6vw, 24px) 48px;
  /* Keep the final CTA + footer taller than the viewport at max scroll, so
     the previous dark employers band never peeks above the closing section. */
  min-height: max(500px, calc(100svh - 260px));
  display: grid;
  align-items: center;
  overflow: hidden;
}
.closing-inner { max-width: 760px; margin: 0 auto; }
.closing-mascot {
  position: absolute; right: max(4.5vw, 26px); bottom: -26px;
  height: min(300px, 34vh);
  rotate: -6deg; /* individual property so the bounce transform composes */
  cursor: pointer; transition: transform 0.3s;
  filter: drop-shadow(0 22px 40px rgba(20,30,28,0.16));
}
.closing-mascot.bounce { animation: bounce 0.55s cubic-bezier(0.28, 2.2, 0.5, 1); }
@keyframes bounce { 0% { transform: scale(1);} 40% { transform: scale(1.14) translateY(-14px);} 100% { transform: scale(1);} }
.closing-card .h2 { margin: 0 auto 14px; }
.closing-copy .h2 { margin-bottom: 16px; }
.closing-card p:not(.trust-link) { color: var(--muted); max-width: 46ch; margin: 0 auto 28px; }
.closing-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* border-beam — retired: rendered as a glitchy vertical stripe on some GPUs;
   the cursor spotlight replaces it on the closing card */
.beam { display: none; }
.beam::before {
  content: ""; position: absolute; width: 220px; height: 3px; top: 0; left: -220px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--gold), transparent);
  animation: beam 7s linear infinite;
}
@keyframes beam {
  0%   { top: 0; left: -220px; }
  24%  { top: 0; left: 100%; }
  25%  { top: -3px; left: calc(100% - 3px); transform: rotate(90deg); transform-origin: top left; }
  49%  { top: 100%; left: calc(100% - 3px); transform: rotate(90deg); }
  50%  { top: calc(100% - 3px); left: 100%; transform: rotate(180deg); }
  74%  { top: calc(100% - 3px); left: -220px; transform: rotate(180deg); }
  75%  { top: 100%; left: 0; transform: rotate(270deg); }
  100% { top: -220px; left: 0; transform: rotate(270deg); }
}

/* ---------- Reveals + counters ---------- */
/* Oryzo-style text transitions: fade + rise + blur-dissolve, staggered per
   sibling (--i set by site.js). Bidirectional — leaving the viewport plays
   the same transition in reverse. */
.reveal {
  opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1), filter 0.7s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Masked line reveal for band headings (oryzo signature): the heading slides
   up out of an overflow-hidden mask instead of fading. site.js wraps
   .h2.reveal / .eyebrow.reveal content and adds .masked. */
.reveal.masked { opacity: 1; transform: none; filter: none; }
.mask-line { display: block; overflow: hidden; }
.mask-line .mask-inner {
  display: block; transform: translateY(115%);
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
  transition-delay: inherit;
}
.reveal.in .mask-line .mask-inner { transform: none; }

/* Width-wipe reveal (oryzo clipper): the card is revealed by un-clipping it
   left→right instead of fading. Overrides the blur-dissolve on elements that
   also carry .reveal. Demo section: trust cards. */
.reveal.wipe {
  opacity: 1; transform: none; filter: none;
  clip-path: inset(0 100% 0 0 round 20px);
  transition: clip-path 0.9s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal.wipe.in { clip-path: inset(0 0 0 0 round 20px); }

/* Springy hover (oryzo's playful bezier) + glow intensify on primary CTA */
.chip { transition: transform 0.5s cubic-bezier(0.3,0,0.66,-0.3); }
.chip:hover { transform: translateY(-3px); }
.btn-teal:hover { box-shadow: 0 10px 34px rgba(31,90,67,0.5); }

/* Moving vertical timeline spine (Wise/Apollo pattern, scroll-drawn).
   Fades away while a film section is pinned — it threads the chapters
   BETWEEN scenes instead of slicing through them. */

/* tilt cards get perspective from JS */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- Sampler batch 2 (oryzo / anime.js ports) ---------- */
/* 11 · scramble-decode eyebrows — keep line height while glyphs cycle */
.eyebrow .scramble { display: inline-block; min-height: 1em; min-width: 1ch; }

/* 12 · odometer stat digits — per-digit columns rolling through 0-9 */
.stat-num .odo-col {
  display: inline-block; overflow: hidden; height: 1em;
  line-height: 1; vertical-align: baseline;
}
.stat-num .odo-stack {
  display: inline-block; white-space: pre-line; line-height: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 13 · velocity-skew marquee — transform set from JS each frame */
.marquee { will-change: transform; }

/* 14 · cursor spotlight on the closing card */
.closing-card.spotlight::after {
  content: ""; position: absolute; inset: 0; border-radius: 30px;
  pointer-events: none; opacity: 0; transition: opacity 0.45s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(242,183,5, 0.14), rgba(31,90,67, 0.06) 45%, transparent 70%);
}
.closing-card.spotlight.spot-on::after { opacity: 1; }

/* 15 · dot-grid ripple behind the stats band */
.stats-band { position: relative; }
.stats-band .stats { position: relative; z-index: 1; }
.dot-grid {
  position: absolute; inset: 10% 6%; z-index: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(13, 1fr); place-items: center;
}
.dot-grid span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.dot-grid.in span { opacity: 0.16; transform: scale(1); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .mask-line .mask-inner { transform: none; transition: none; }
  .reveal.wipe { clip-path: none; transition: none; }
  .chip { transition: none; }
  .scroll-hint, .preloader-mascot, .marquee-track, .btn-teal::after, .beam::before, .aurora, .ring-dash, .fact-orbit span { animation: none; }
  .fr-val { transition: none; stroke-dashoffset: 0; }
  .fact-big { transition: none; translate: 0 0; opacity: 1; }
  .fact-orbit span { transition: none; scale: 1; }
  .fact-eq i, .fr-dash, .orbit-ring, .orbit-core { animation: none; }
  .split .ch { opacity: 1; transform: none; filter: none; }
  .marquee { transform: none; }
  .dot-grid span { opacity: 0.16; transform: none; transition: none; }
  .closing-card.spotlight::after { display: none; }
}

/* WCAG 2.4.13 focus appearance — brand ring on every interactive element */
.btn:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px;
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .hero-copy { padding: 0 22px; text-align: center; }
  .hero-h1 { margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-rotate { justify-content: center; }
  .hero-ctas { justify-content: center; }
  .match-rail { display: none; }
  .band { padding-left: 22px; padding-right: 22px; }
  .band { padding-top: 70px; padding-bottom: 70px; }
  .scene-copy .sc-quote { max-width: 26ch; }
  .rematch-grid { grid-template-columns: 1fr; }
  .journey { height: 260vh; }
  .facts { padding: 64px 22px 72px; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact-card { min-height: 340px; }
  .journey-track { padding: 0 8vw; gap: 4vw; }
  .journey-card { flex-basis: 84vw; }
  /* svh, not vh: the pinned stage must fit the viewport the phone actually
     shows (toolbars visible), or its lower band hides behind the chrome and
     the card floats in dead space. A 46vh card left ~250px empty above AND
     below it — that emptiness is what you see once the sweep finishes. */
  .journey-sticky { height: 100svh; gap: 12px; }
  .journey-card img { height: 64svh; }
  .companion { height: 100px; }
  .companion-cheer { top: -46px; right: 8px; }
  .overlay-left .line { left: 22px; max-width: 88vw; }
  .line.line-left { left: 22px; max-width: 88vw; }
  .line.line-right { right: 22px; max-width: 88vw; }
  .scene-copy.line-left, .scene-copy.line-right {
    max-width: min(290px, 44vw);
  }
  .scene-copy.line-left { left: 22px; right: auto; text-align: left; }
  .scene-copy.line-right { left: auto; right: 22px; text-align: left; }
  .scene-copy .sc-label { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 10px; }
  .scene-copy h2 { font-size: clamp(1.28rem, 5.4vw, 1.7rem); line-height: 1.06; }
  .scene-copy p:not(.sc-label) { max-width: 25ch; font-size: 0.88rem; line-height: 1.48; }
  .scene-copy .sc-step { font-size: 0.54rem; padding: 2px 7px; }
  .scene-copy .sc-chips { gap: 5px; margin-top: 10px; }
  .scene-copy .sc-chips span { padding: 4px 9px; font-size: 0.64rem; }
  .employers-card { padding: 76px 22px; }
  .employers-inner { grid-template-columns: 1fr; gap: 36px; }
  .closing-card { padding: 64px 22px 56px; }
  .closing-card { padding-bottom: 150px; }
  .closing-mascot { height: 140px; right: 50%; translate: 50% 0; rotate: -4deg; bottom: -10px; }
  .beam { display: none; }
  /* centered mobile hero copy needs a vertical paper fade, not the desktop
     left-anchored one, to stay legible over bright frames */
  .hero-scrub .stage-grade {
    background:
      linear-gradient(180deg, rgba(251,247,239,0.94) 0%, rgba(251,247,239,0.78) 34%, rgba(251,247,239,0.28) 55%, rgba(251,247,239,0) 70%),
      linear-gradient(180deg, transparent 74%, rgba(251,247,239,0.85) 100%);
  }
}

@media (max-aspect-ratio: 11/10) {
  .scene-copy,
  .scene-copy.line-left,
  .scene-copy.line-right,
  .scene-copy[data-still="0.75"].line-right {
    top: 70%;
    left: 24px;
    right: 24px;
    max-width: min(38ch, calc(100vw - 48px));
    text-align: center;
  }
  .scene-copy .sc-label,
  .scene-copy.line-right .sc-label,
  .scene-copy.line-left .sc-label {
    margin-left: auto;
    margin-right: auto;
  }
  .scene-copy p:not(.sc-label),
  .scene-copy.line-right p:not(.sc-label),
  .scene-copy.line-left p:not(.sc-label) {
    margin-left: auto;
    margin-right: auto;
  }
  .scene-copy h2 {
    font-size: clamp(1.55rem, 5.4vw, 2.35rem);
  }
}

@media (max-width: 520px) and (max-aspect-ratio: 11/10) {
  .scene-copy,
  .scene-copy.line-left,
  .scene-copy.line-right,
  .scene-copy[data-still="0.75"].line-right {
    top: 73%;
    left: 18px;
    right: 18px;
    max-width: calc(100vw - 36px);
  }
  .scene-copy h2 {
    font-size: clamp(1.35rem, 6.4vw, 1.85rem);
  }
  .scene-copy p:not(.sc-label) {
    font-size: 0.9rem;
  }
}

/* ============ PORTRAIT FILM (viewport aspect < 0.8) ============
   The 9:16 frames (frames/p*) compose the subject in the upper two-thirds
   and reserve a clean lower third for text — so the hero intro moves into
   that zone and the heavy legibility wash goes away: the film shows vivid.
   Boundary matches scrub-config.js's film selector (aspect < 0.8). */
@media (max-aspect-ratio: 4/5) {
  .hero-scrub .stage-grade {
    background: linear-gradient(180deg, transparent 0%, transparent 80%, rgba(251,247,239,0.5) 100%);
  }
  /* The film's .sticky is 100vh = the LARGE viewport, so on a phone its lower
     band hides behind the browser's bottom toolbar. (100lvh - 100dvh) is that
     toolbar's live height: adding it keeps the copy above the chrome instead
     of underneath it. It collapses to 0 wherever there is no toolbar. */
  .hero-copy {
    position: absolute; left: 0; right: 0;
    bottom: max(14vh, calc(3vh + (100lvh - 100dvh)));
    margin-top: 0; padding: 0 22px; text-align: center; max-width: none;
  }
  .hero-h1 { font-size: clamp(1.8rem, 7.8vw, 2.4rem); max-width: none; margin: 0 auto; }
  .hero-sub { margin: 12px auto 0; font-size: 0.95rem; line-height: 1.55; max-width: 34ch; }
  .hero-rotate { margin-top: 10px; font-size: 0.95rem; justify-content: center; }
  .hero-ctas { margin-top: 16px; justify-content: center; }
  /* Chapter copy floats as a vertically-centered frosted glass card over
     the FULL-SCREEN film: the blur carries legibility wherever the video's
     props move, so nothing needs cropping or reserved bands. */
  #hero-scrub .scene-copy,
  #hero-scrub .scene-copy.line-left,
  #hero-scrub .scene-copy.line-right,
  #hero-scrub .scene-copy[data-still="0.75"].line-right {
    top: 50%;
  }
  #hero-scrub .scene-copy,
  #hero-scrub .scene-copy.line-left,
  #hero-scrub .scene-copy.line-right {
    background: rgba(251, 247, 239, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    backdrop-filter: blur(16px) saturate(1.05);
    border-radius: 22px;
    padding: 18px 20px 20px;
    box-shadow: 0 14px 44px rgba(15, 26, 22, 0.07);
  }
}

/* True phones: the CTAs stack (tall block) AND the narrow viewport crops the
   9:16 film harder, pushing the subject's feet lower — so the headline has to
   sit low or it lands on her shoes. Wider portrait windows have an inline,
   shorter block over a less-cropped frame, and can ride up under her legs. */
@media (max-aspect-ratio: 4/5) and (max-width: 440px) {
  .hero-copy { bottom: max(9vh, calc(1vh + (100lvh - 100dvh))); }
  /* Stacked CTAs make the block ~55px taller than the cream band under her
     feet can hold once the toolbar takes its share. One row buys that back. */
  .hero-ctas { flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
  .hero-ctas .btn { padding: 12px 14px; font-size: 0.85rem; white-space: nowrap; }
  .hero-ctas .btn-tour { padding-left: 10px; gap: 6px; }
  .hero-sub { max-width: 32ch; }
}