/* ════════════════════════════════════════════════════════════════
   DESIGN OVER ATLANTA — "One Continuous Take"
   A single fixed video spine scrubs across the entire page; every
   section overlays on top. The grade breathes light↔espresso so the
   journey reads as one unbroken, scroll-driven camera move.
   ════════════════════════════════════════════════════════════════ */

:root {
  --bone:        oklch(95.5% 0.013 84);
  --bone-2:      oklch(92% 0.018 80);
  --sand:        oklch(86% 0.028 74);
  --line:        oklch(82% 0.022 72);

  --ink:         oklch(25% 0.022 52);
  --ink-soft:    oklch(43% 0.022 54);
  --ink-faint:   oklch(58% 0.02 58);

  --espresso:    oklch(17% 0.018 48);
  --espresso-2:  oklch(12% 0.014 46);

  --terra:       oklch(58% 0.135 42);
  --terra-hi:    oklch(64% 0.145 44);
  --amber:       oklch(74% 0.105 72);

  --bone-soft:   oklch(95.5% 0.013 84 / 0.62);

  --display: 'Newsreader', Georgia, serif;
  --ui:      'Schibsted Grotesk', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ui);
  background: var(--espresso-2);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.022em; line-height: 0.98; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--terra); color: var(--bone); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.eyebrow { font-family: var(--mono); font-size: clamp(0.62rem, 0.9vw, 0.74rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--terra); }
.mono { font-family: var(--mono); }
.italic { font-style: italic; font-weight: 400; }
.wrap { max-width: 1340px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); width: 100%; }

/* ════════════════════════════════════════════════════════════════
   THE CINEMA SPINE — fixed, full-viewport, behind everything
   ════════════════════════════════════════════════════════════════ */
#cinema { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #15100b url("assets/seqm/0/f001.jpg") center center / cover no-repeat; }
#cine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* warm cinematic grade — constant, ties every frame together */
#cinema .grade {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(75% 60% at 32% 28%, oklch(74% 0.11 64 / 0.26), transparent 70%),
    linear-gradient(180deg, oklch(22% 0.03 50 / 0.16), oklch(14% 0.02 44 / 0.40));
}
/* dynamic mood scrim — JS lerps its color per act (the "breathing" grade) */
#cinema .scrim { position: absolute; inset: 0; pointer-events: none; background: rgba(26,20,15,0.34); }
#cinema .vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%, transparent 50%, oklch(8% 0.01 40 / 0.30) 82%, oklch(6% 0.01 40 / 0.55) 100%);
}
#cinema .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* a faint persistent chapter label, lower-left — reinforces the single-take feel */
#chapter {
  position: fixed; right: clamp(1.25rem, 4vw, 3.5rem); bottom: clamp(1.1rem, 3vh, 1.8rem); z-index: 40;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem; mix-blend-mode: difference; color: #fff; opacity: 0.45;
  transition: opacity 0.4s;
}
#chapter .bar { width: 34px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
#chapter .bar i { position: absolute; inset: 0; background: var(--terra); transform-origin: left; transform: scaleX(var(--cp, 0)); }

/* ════════════════════════════════════════════════════════════════
   PROGRESS + NAV
   ════════════════════════════════════════════════════════════════ */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--terra), var(--amber)); z-index: 100; }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2vw, 1.5rem) clamp(1.25rem, 4vw, 3.5rem);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.4s var(--ease), color 0.5s var(--ease);
  border-bottom: 1px solid transparent; color: var(--bone);
}
.nav.scrolled { background: var(--bone-soft); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--line); color: var(--ink); padding-top: clamp(0.7rem,1.4vw,1rem); padding-bottom: clamp(0.7rem,1.4vw,1rem); }
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__brand img { width: 30px; height: 30px; filter: saturate(0) brightness(3); opacity: 0.9; transition: filter 0.5s; }
.nav.scrolled .nav__brand img { filter: saturate(0); }
.nav__brand b { font-family: var(--ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
.nav__brand span { font-weight: 400; opacity: 0.55; }
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav__links a { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; opacity: 0.78; transition: opacity 0.3s, color 0.3s; white-space: nowrap; }
.nav__links a:hover { opacity: 1; color: var(--terra); }
.nav__links .nav__cta { opacity: 1; padding: 0.6rem 1.15rem; border-radius: 100px; background: var(--terra); color: var(--bone); transition: background 0.3s, transform 0.3s var(--ease); }
.nav__links .nav__cta:hover { background: var(--terra-hi); color: var(--bone); transform: translateY(-1px); }

/* hamburger — hidden on desktop, the menu toggle on phones + tablets */
.nav__toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; margin: -0.5rem -0.6rem -0.5rem 0; background: none; border: 0; cursor: pointer; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.32s var(--ease), opacity 0.2s var(--ease), top 0.32s var(--ease); }
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav.open .nav__toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav { padding: clamp(0.85rem, 3.5vw, 1.2rem) clamp(1.1rem, 5vw, 1.6rem); }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0; min-height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: clamp(5.5rem, 20vh, 8rem) clamp(1.4rem, 7vw, 2.4rem) 2.5rem;
    background: oklch(12% 0.015 46 / 0.98); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
    transform: translateY(-102%); transition: transform 0.42s var(--ease); will-change: transform;
  }
  .nav.open .nav__links { transform: translateY(0); }
  .nav__links a { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: none; opacity: 0.9; padding: 1rem 0.25rem; border-bottom: 1px solid oklch(95% 0.01 80 / 0.1); color: var(--bone); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links .nav__cta { margin-top: 1.1rem; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; padding: 0.95rem 1.2rem; }
  /* the bone-on-scroll nav keeps the menu readable: force dark menu text regardless */
  .nav.scrolled .nav__links a { color: var(--bone); }
  body.nav-open { overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════
   SECTION SCAFFOLD — transparent overlays riding the fixed spine
   ════════════════════════════════════════════════════════════════ */
.sec { position: relative; z-index: 1; min-height: 118vh; display: flex; align-items: center; padding: clamp(7rem, 16vh, 11rem) 0; }
.sec--light { color: var(--ink); }
.sec--dark { color: var(--bone); }

/* ── LEGIBILITY VEIL ───────────────────────────────────────────────
   A per-act scrim that sits ABOVE the footage but BELOW the text, so
   the words always have a readable substrate. Each veil is shaped to
   wherever that act anchors its copy, so the footage still breathes
   everywhere the text isn't. */
.sec::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* dark acts: darken toward the copy, leave the rest of the frame open */
.hook::before {
  background:
    linear-gradient(to top, oklch(7% 0.02 40 / 0.86) 0%, oklch(9% 0.02 42 / 0.5) 26%, oklch(10% 0.02 42 / 0.14) 52%, transparent 72%),
    linear-gradient(to right, oklch(7% 0.02 40 / 0.6) 0%, oklch(7% 0.02 40 / 0.12) 48%, transparent 76%);
}
.gap::before {
  background:
    linear-gradient(to right, oklch(7% 0.02 40 / 0.74) 0%, oklch(7% 0.02 40 / 0.34) 52%, oklch(7% 0.02 40 / 0.5) 100%),
    linear-gradient(to bottom, transparent 0%, oklch(7% 0.02 40 / 0.18) 100%);
}
.build::before {
  background:
    linear-gradient(to bottom, oklch(7% 0.02 40 / 0.62) 0%, oklch(7% 0.02 40 / 0.4) 40%, oklch(7% 0.02 40 / 0.66) 100%);
}
.close::before {
  background:
    radial-gradient(125% 92% at 50% 50%, oklch(7% 0.02 40 / 0.78) 0%, oklch(7% 0.02 40 / 0.52) 56%, oklch(7% 0.02 40 / 0.34) 100%);
}
/* light act: a warm bone wash so the footage doesn't read dark behind the plate */
.proof::before {
  background:
    linear-gradient(to bottom, oklch(96% 0.012 84 / 0.5) 0%, oklch(95% 0.014 82 / 0.34) 50%, oklch(96% 0.012 84 / 0.5) 100%);
}

.btn { font-family: var(--ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 1rem 1.8rem; border-radius: 100px; cursor: pointer; border: 1px solid transparent; transition: all 0.35s var(--ease); display: inline-flex; align-items: center; gap: 0.6rem; }
.btn--primary { background: var(--terra); color: var(--bone); }
.btn--primary:hover { background: var(--terra-hi); transform: translateY(-2px); box-shadow: 0 14px 34px -12px oklch(58% 0.135 42 / 0.7); }
.btn--ghost-light { border-color: oklch(95% 0.01 80 / 0.42); color: var(--bone); }
.btn--ghost-light:hover { border-color: var(--bone); background: oklch(95% 0.01 80 / 0.08); }

.stat { display: flex; align-items: baseline; gap: 0.5rem; }
.stat b { font-family: var(--mono); font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 500; }
.stat span { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.62; }

/* ── ACT 1 · HOOK ─────────────────────────────────────────────── */
/* hero copy sits in the first screen, vertically centred under the nav,
   not pushed below the fold */
.hook { align-items: center; min-height: 100vh; min-height: 100svh; }
.hook__inner { position: relative; width: 100%; }
.hook__eyebrow { color: var(--amber); margin-bottom: clamp(1.2rem, 3vh, 2rem); display: block; }
.hook h1 { font-size: clamp(2.5rem, 7vw, 6.2rem); color: var(--bone); max-width: 18ch; font-weight: 400; }
.hook h1 .line { display: block; overflow: hidden; }
.hook h1 .line > span { display: block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hook h1 .line > span { animation: lineUp 0.95s var(--ease) both; }
  .hook h1 .line:nth-child(1) > span { animation-delay: 0.20s; }
  .hook h1 .line:nth-child(2) > span { animation-delay: 0.31s; }
  .hook h1 .line:nth-child(3) > span { animation-delay: 0.42s; }
}
@keyframes lineUp { from { transform: translateY(108%); } to { transform: translateY(0); } }
.hook h1 em { color: var(--amber); font-style: italic; font-weight: 400; }
.hook__sub { margin-top: clamp(1.6rem, 4vh, 2.4rem); max-width: 40ch; font-size: clamp(1rem, 1.3vw, 1.18rem); color: oklch(94% 0.01 80 / 0.84); line-height: 1.55; }
.hook__cta { margin-top: clamp(1.8rem, 4vh, 2.4rem); display: flex; gap: 0.9rem; flex-wrap: wrap; }
.hook__stats { margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.1rem; border-top: 1px solid oklch(95% 0.01 80 / 0.18); display: flex; gap: clamp(1.4rem, 4vw, 3.4rem); flex-wrap: wrap; }

.scroll-cue { position: fixed; bottom: clamp(1rem, 3vh, 1.8rem); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: #fff; mix-blend-mode: difference; transition: opacity 0.5s; }
.scroll-cue span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; }
.scroll-cue .dot { width: 1px; height: 34px; background: linear-gradient(currentColor, transparent); position: relative; overflow: hidden; }
.scroll-cue .dot::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: currentColor; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(260%); } }

/* the act marker + scroll cue are decorative; hide them on phones and tablets
   where the copy fills the screen and they'd sit on top of text */
@media (max-width: 900px) {
  #chapter, .scroll-cue { display: none; }
}

/* ── ACT 2 · THE GAP ──────────────────────────────────────────── */
.gap__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 880px) { .gap__grid { grid-template-columns: 1fr; gap: 2.4rem; } }
.gap h2 { font-size: clamp(2.1rem, 5.4vw, 4.4rem); color: var(--bone); font-weight: 400; max-width: 13ch; }
.gap h2 em { color: var(--amber); }
.gap__body { margin-top: 1.6rem; max-width: 42ch; color: oklch(92% 0.01 80 / 0.8); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; }
.ledger { border: 1px solid oklch(95% 0.01 80 / 0.18); border-radius: 14px; padding: clamp(1.6rem, 3vw, 2.4rem); background: oklch(14% 0.02 44 / 0.34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ledger__row + .ledger__row { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid oklch(95% 0.01 80 / 0.12); }
.ledger__label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(92% 0.01 80 / 0.6); }
.ledger__big { font-family: var(--mono); font-weight: 500; line-height: 1; margin-top: 0.5rem; }
.ledger__big.bad { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: oklch(92% 0.01 80 / 0.5); text-decoration: line-through; text-decoration-color: var(--terra); }
.ledger__big.good { font-size: clamp(2.6rem, 6vw, 4.4rem); color: var(--bone); }
.ledger__big.good small { font-size: 0.4em; color: var(--amber); }
.ledger__note { font-size: 0.78rem; color: oklch(92% 0.01 80 / 0.6); margin-top: 0.4rem; }

/* ── ACT 3 · THE BUILD (glass cards) ──────────────────────────── */
.build__head { max-width: 32ch; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.build h2 { font-size: clamp(2rem, 5vw, 4rem); color: var(--bone); font-weight: 400; }
.build h2 em { color: var(--amber); }
.build__head p { margin-top: 1rem; color: oklch(92% 0.01 80 / 0.78); max-width: 46ch; }
.glass-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.6vw, 1.5rem); }
@media (max-width: 880px) { .glass-row { grid-template-columns: 1fr; } }
.glass {
  position: relative; border-radius: 22px; overflow: hidden; padding: clamp(1.5rem, 2.4vw, 2.2rem);
  isolation: isolate; transform-style: preserve-3d; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 12px 36px -16px oklch(8% 0.02 40 / 0.8); min-height: clamp(15rem, 24vh, 17rem); display: flex; flex-direction: column;
}
.glass::before { content: ''; position: absolute; inset: 0; z-index: -2; backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); background: oklch(90% 0.03 70 / 0.10); }
.glass::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 1.5px 1.5px 1px oklch(98% 0.01 84 / 0.35), inset -1px -1px 1px oklch(98% 0.01 84 / 0.18); border: 1px solid oklch(95% 0.02 80 / 0.18); }
.glass__num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--amber); }
.glass h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--bone); margin-top: 0.9rem; font-weight: 500; }
.glass p { margin-top: 0.7rem; font-size: 0.9rem; color: oklch(94% 0.01 80 / 0.76); line-height: 1.55; flex: 1; }
.glass__price { margin-top: 1.1rem; font-family: var(--mono); color: var(--bone); font-size: 0.86rem; }
.glass__price b { color: var(--amber); font-size: 1.3rem; }
.glass__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(140px 140px at var(--mx,50%) var(--my,0%), oklch(98% 0.02 84 / 0.22), transparent 70%); opacity: 0; transition: opacity 0.4s var(--ease); }
.glass:hover .glass__sheen { opacity: 1; }

/* ── ACT 4 · PROOF (emerges into warm light) ──────────────────── */
.proof { min-height: 110vh; }
.proof__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.4rem, 6vh, 4rem); flex-wrap: wrap; }
.proof h2 { font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 400; }
.proof h2 em { color: var(--terra); }
.proof__head p { color: var(--ink-soft); max-width: 30ch; font-size: 0.96rem; }
.stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
@media (max-width: 880px) { .stills { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .stills { grid-template-columns: 1fr; } }
.still { display: block; }
.still__frame { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--sand); box-shadow: 0 18px 44px -24px oklch(20% 0.03 40 / 0.55); }
.still__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.9s var(--ease), filter 0.6s; filter: saturate(0.92); }
.still:hover .still__frame img { transform: scale(1.05); filter: saturate(1.04); }
.still__frame::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; background: linear-gradient(180deg, transparent 50%, oklch(18% 0.02 44 / 0.55)); }
.still:hover .still__frame::after { opacity: 1; }
.still__meta { margin-top: 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.still__niche { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra); }
.still__name { font-family: var(--display); font-size: 1.15rem; font-weight: 500; transition: color 0.3s; }
.still:hover .still__name { color: var(--terra); }
.still__arrow { width: 30px; height: 30px; border-radius: 100px; border: 1px solid var(--line); display: grid; place-items: center; transition: all 0.4s var(--ease); flex-shrink: 0; }
.still:hover .still__arrow { border-color: var(--terra); background: var(--terra); color: var(--bone); }
.proof__metrics { margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; gap: clamp(1.4rem, 5vw, 4rem); flex-wrap: wrap; }
.proof__metrics .stat b { color: var(--ink); }
.proof__metrics .stat span { color: var(--ink-faint); opacity: 1; }

/* a frosted bone panel behind the proof content, so the still cards
   read crisp while the footage still ghosts at the panel's edges */
.proof__plate {
  position: relative;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  border-radius: 22px;
  background: oklch(96% 0.012 84 / 0.9);
  border: 1px solid oklch(86% 0.02 78 / 0.7);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 40px 90px -50px oklch(20% 0.03 40 / 0.6);
}
@media (max-width: 540px) { .proof__plate { padding: clamp(1.2rem, 5vw, 1.8rem); } }

/* ── ACT 5 · CLOSE ────────────────────────────────────────────── */
/* the closing message pins centered in the viewport so the very last look of
   the page rests on it (centered over the settled horizon), not on empty space */
.close { display: block; align-items: stretch; text-align: center; min-height: 116vh; padding: 0; }
.close__inner {
  position: sticky; top: 0; width: 100%;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: clamp(5rem, 12vh, 8rem); padding-bottom: clamp(4rem, 10vh, 6rem);
}
.close h2 { font-size: clamp(2.6rem, 8vw, 6.4rem); color: var(--bone); font-weight: 400; line-height: 0.96; }
.close h2 em { color: var(--terra); }
.close__sub { margin: 1.6rem auto 0; max-width: 44ch; color: oklch(92% 0.01 80 / 0.82); font-size: clamp(1rem, 1.3vw, 1.18rem); }
.close__cta { margin-top: 2.4rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.close__founder { margin-top: clamp(2.6rem, 6vh, 4rem); display: inline-flex; align-items: center; gap: 0.9rem; padding-top: 1.6rem; border-top: 1px solid oklch(95% 0.01 80 / 0.16); }
.close__founder img { width: 46px; height: 46px; border-radius: 100px; object-fit: cover; filter: saturate(0.95); }
.close__founder div { text-align: left; }
.close__founder b { font-family: var(--ui); font-size: 0.82rem; color: var(--bone); }
.close__founder span { display: block; font-size: 0.72rem; color: oklch(92% 0.01 80 / 0.62); }

/* ── Footer (simple bar) ── */
.footer { position: relative; z-index: 1; background: var(--espresso-2); color: oklch(92% 0.01 80 / 0.5); padding: 2.2rem 0; border-top: 1px solid oklch(95% 0.01 80 / 0.08); }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.footer__nav { display: flex; gap: clamp(0.9rem, 2vw, 1.6rem); flex-wrap: wrap; }
.footer__nav a { font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.08em; color: oklch(92% 0.01 80 / 0.62); transition: color 0.25s; }
.footer__nav a:hover { color: var(--terra); }
.footer__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--bone); }
.footer__brand img { width: 26px; height: 26px; filter: saturate(0) brightness(3); opacity: 0.85; }
.footer__brand b { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.footer small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; }

/* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 0.08s; }
  .reveal.d2 { transition-delay: 0.16s; }
  .reveal.d3 { transition-delay: 0.24s; }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — single static graded still, stacked sections
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  /* the canvas paints a single still frame; no scrubbing */
  #cinema { background: #1a140e url("assets/frames/F0-skyline.png") center center / cover no-repeat; }
  #cinema .scrim { background: rgba(20,15,11,0.38); }
  .scroll-cue, #chapter .bar i { display: none; }
  .sec { min-height: auto; }
  /* give each act its own backing so text stays legible without JS grade */
  .hook, .gap, .build, .close { background: linear-gradient(180deg, oklch(16% 0.02 44 / 0.34), oklch(12% 0.014 46 / 0.62)); }
  .proof { background: var(--bone); }
}