/* ════════════════════════════════════════════════════════
   TALARA · Direction C  Atmospheric Hybrid
   Art-directed full-bleed photography at the beats · real
   product UI in precise frames · one bespoke graphic moment
   (the human gate) · Fraunces + Space Grotesk + mono.
   Glass pill nav that morphs on scroll. Lenis smooth scroll.
   ════════════════════════════════════════════════════════ */

:root {
  --paper:     #F6F6FA;
  --paper-2:   #ECEDF3;
  --ink:       #14131C;
  --ink-2:     rgba(20,19,28,0.64);
  --ink-3:     rgba(20,19,28,0.42);
  --line:      rgba(20,19,28,0.10);
  --line-2:    rgba(20,19,28,0.16);
  --indigo:    #4F46E5;
  --indigo-700:#4338CA;
  --teal:      #0E9F8E;
  --on-dark:   #F4F4F8;
  --on-dark-2: rgba(244,244,248,0.72);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: clamp(1.4rem, 5.5vw, 6rem);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* dark base tuned to the hero's top tone so the iOS status-bar/toolbar safe areas blend
   into the hero instead of reading as a band. The fixed bgstage paper layer still covers
   the light backdrop for paper sections. */
html { background: #121240; }
body {
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* clip (not hidden) prevents horizontal scroll WITHOUT turning body into a
     scroll container. hidden makes body the scroller, which stops iOS Safari
     from minimizing its toolbar, so the safe areas render as solid bars.
     clip keeps the root viewport as the scroller -> edge-to-edge + translucent
     toolbar like a native page. (overflow-x:clip = iOS Safari 16+.) */
  overflow-x: clip;
}
main { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════
   FIXED BACKGROUND STAGE
   A still, viewport-sized layer behind all content. Each section
   declares data-bg; home.js cross-dissolves these layers by scroll
   coverage so the backdrop dissolves image→image→paper while content
   scrolls over it. The stage itself never moves (no parallax).
   ════════════════════════════════════════════════════════ */
/* top:0 + full large-viewport height (not inset:0) so the fixed backdrop paints
   into BOTH iOS safe-area strips. With inset:0 the bottom anchors to the small
   layout viewport, leaving the home-indicator / minimized-toolbar strip filled
   with the solid html background. 100lvh = full physical screen on iOS 15.4+;
   100vh is the large-viewport fallback for older Safari. */
.bgstage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; }
.bgstage__layer { position: absolute; inset: 0; opacity: 0; will-change: opacity; background-size: cover; background-position: center; }
.bgstage__layer--paper { background: var(--paper); opacity: 1; }
.bgstage__layer--ink   { background: var(--ink); }
/* photo layers carry their own dusk-indigo grade so text stays legible */
.bgstage__layer--peaks { background:
  linear-gradient(180deg, rgba(14,12,28,0.5) 0%, rgba(14,12,28,0.26) 42%, rgba(14,12,28,0.6) 100%),
  linear-gradient(100deg, rgba(33,28,78,0.5) 0%, rgba(33,28,78,0.08) 62%),
  url("assets/photos/peaks.jpg?v=2") center/cover; }
.bgstage__layer--wave { background:
  linear-gradient(180deg, rgba(14,12,28,0.52) 0%, rgba(14,12,28,0.3) 42%, rgba(14,12,28,0.62) 100%),
  linear-gradient(100deg, rgba(33,28,78,0.5) 0%, rgba(33,28,78,0.08) 62%),
  url("assets/photos/wave.jpg?v=2") center/cover; }
.bgstage__layer--pier { background:
  linear-gradient(180deg, rgba(14,12,28,0.5) 0%, rgba(14,12,28,0.32) 42%, rgba(14,12,28,0.66) 100%),
  linear-gradient(100deg, rgba(33,28,78,0.46) 0%, rgba(33,28,78,0.08) 62%),
  url("assets/photos/pier.jpg?v=2") center/cover; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }
.skip { position: fixed; top: -50px; left: 16px; z-index: 400; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; padding: 10px 18px; border-radius: 8px; transition: top 0.25s var(--ease); }
.skip:focus-visible { top: 14px; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 3px; }
.accent { color: var(--indigo); }

/* ─── Reveals ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* padding-bottom gives descenders (g, y, p) room inside the overflow-hidden
   mask; the matching negative margin keeps the line spacing unchanged */
.rl { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.16em; }
.rl__in { display: inline-block; transform: translateY(120%); transition: transform 1.1s var(--ease); }
.lines-in .rl__in { transform: translateY(0); }
.rl:nth-child(2) .rl__in { transition-delay: 0.09s; }
.rl:nth-child(3) .rl__in { transition-delay: 0.18s; }

.kicker { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.6rem; }
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--line-2); }
.kicker--plain::before { display: none; }
.kicker--on-dark { color: var(--on-dark-2); }
.kicker--on-dark::before { background: rgba(244,244,248,0.4); }

/* ─── Buttons ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.005em; padding: 0.85rem 1.7rem; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform 0.5s var(--ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; will-change: transform; }
.btn--solid { background: var(--indigo); color: #fff; box-shadow: 0 8px 22px -10px rgba(79,70,229,0.7); }
.btn--solid:hover { background: var(--indigo-700); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--on-dark { background: var(--on-dark); color: var(--ink); }
.btn--on-dark.btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(244,244,248,0.4); }
.btn--on-dark.btn--ghost:hover { border-color: var(--on-dark); }
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════
   NAV  full-width bar → glass pill on scroll
   ════════════════════════════════════════════════════════ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: calc(84px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(var(--pad-x) + env(safe-area-inset-right, 0px)) 0 calc(var(--pad-x) + env(safe-area-inset-left, 0px)); pointer-events: none; }
/* pill holds ONLY the logo + nav links  centered exactly as before. The CTA
   lives outside it, pinned to the right (see .nav__cta). */
.nav__pill {
  pointer-events: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 66px; max-width: 2600px; margin: 10px auto; padding: 0;
  border-radius: 0; background: transparent; border: 1px solid transparent;
  transition: max-width 1.0s var(--ease), background 0.7s var(--ease), border-color 0.7s ease, border-radius 1.0s var(--ease), box-shadow 0.7s ease, padding 0.7s var(--ease), backdrop-filter 0.7s ease;
}
.nav.scrolled .nav__pill {
  max-width: 940px; height: 58px; padding: 0 9px 0 22px;
  background: rgba(246,246,250,0.72); border-color: var(--line);
  border-radius: 100px; box-shadow: 0 10px 30px -16px rgba(20,19,40,0.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
/* over a dark (photo) section the pill stays dark glass with light text */
.nav.on-dark .nav__link, .nav.on-dark .nav__logo { color: var(--on-dark); }
.nav.on-dark .nav__link { color: var(--on-dark-2); }
.nav.on-dark.scrolled .nav__pill { background: rgba(18,16,30,0.5); border-color: rgba(244,244,248,0.16); }
.nav.on-dark.scrolled .nav__link, .nav.on-dark.scrolled .nav__logo { color: var(--on-dark); }

.nav__logo { color: var(--ink); display: inline-flex; align-items: center; justify-self: start; padding-left: 0; transition: color 0.5s ease; }
.nav__logo .wordmark { height: 13px; width: auto; display: block; }
.nav__menu { display: flex; align-items: center; gap: 0.2rem; justify-self: center; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.83rem; font-weight: 500; color: var(--ink-2); padding: 0.55rem 0.85rem; border-radius: 8px; transition: color 0.25s ease, background 0.25s ease; white-space: nowrap; }
.nav__link:hover { color: var(--ink); }
.nav.on-dark .nav__link:hover { color: var(--on-dark); }
.nav__caret { width: 8px; height: 8px; opacity: 0.6; transition: transform 0.3s var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }
/* CTA  original styling, just pulled OUT of the pill and pinned to the right */
.nav__cta { pointer-events: auto; position: absolute; right: var(--pad-x); top: 50%; margin-top: -19px; display: inline-flex; align-items: center; height: 38px; font-size: 0.8rem; font-weight: 600; padding: 0 1.3rem; line-height: 1; border-radius: 100px; background: var(--ink); color: #fff; transition: transform 0.5s var(--ease), background 0.25s ease; will-change: transform; white-space: nowrap; }
.nav__cta:hover { background: #000; }
.nav.on-dark .nav__cta { background: var(--on-dark); color: var(--ink); }

/* dropdown panel */
.nav__drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 240px; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 14px; padding: 0.6rem; box-shadow: 0 24px 50px -24px rgba(20,19,40,0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0.25s;
}
.nav__item:hover .nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__drop a { display: block; padding: 0.6rem 0.8rem; border-radius: 9px; font-size: 0.85rem; color: var(--ink-2); transition: background 0.2s ease, color 0.2s ease; }
.nav__drop a:hover { background: var(--paper-2); color: var(--ink); }
.nav__drop a b { display: block; color: var(--ink); font-weight: 600; }
.nav__drop a span { font-size: 0.76rem; color: var(--ink-3); }
/* wide 2-column dropdown for sections with many spokes (Platform) */
.nav__drop--2col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 0.5rem; width: 480px; }
@media (max-width: 1080px) { .nav__menu { display: none; } }

/* ════════════════════════════════════════════════════════
   FULL-BLEED PHOTOGRAPHY (art-directed beats)
   ════════════════════════════════════════════════════════ */
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 8rem var(--pad-x) 5rem; }
.scene__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.scene__bg img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
/* one cohesive dusk-indigo grade across all photos */
.scene__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,12,28,0.5) 0%, rgba(14,12,28,0.28) 40%, rgba(14,12,28,0.62) 100%),
    linear-gradient(100deg, rgba(33,28,78,0.5) 0%, rgba(33,28,78,0.1) 60%),
    rgba(40,30,90,0.12);
  mix-blend-mode: normal;
}
.scene__grade { position: absolute; inset: 0; background: rgba(48,40,110,0.18); mix-blend-mode: color; pointer-events: none; }
.scene__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; color: var(--on-dark); }

/* ─── Hero ────────────────────────────────────────────── */
.hero__eyebrow { margin-bottom: 1.8rem; }
.hero__title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 1.0; letter-spacing: -0.03em; color: var(--on-dark); max-width: 18ch; }
.hero__title em { font-style: normal; color: #C9C4FF; }
.hero__lede { margin-top: 2rem; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--on-dark-2); max-width: 46ch; }
.hero__lede.reveal, .hero__actions.reveal { transition-delay: 0.4s; }
.hero__actions { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__meta { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 2.2rem; z-index: 1; max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; padding-top: 1.3rem; border-top: 1px solid rgba(244,244,248,0.18); }
.hero__meta span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }

/* scene copy variant (problem / closing) */
.scene__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--on-dark); max-width: 18ch; }
.scene__body { margin-top: 1.6rem; font-size: clamp(0.98rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--on-dark-2); max-width: 46ch; }

/* ════════════════════════════════════════════════════════
   LIGHT SECTIONS (editorial + product)
   ════════════════════════════════════════════════════════ */
.sec { padding: clamp(6rem, 13vh, 10rem) var(--pad-x); background: transparent; }
/* tint sections stay transparent now  the fixed paper stage is the backdrop,
   so nothing opaque slides over the dissolving background */
.sec--tint { background: transparent; }
.sec__inner { max-width: var(--maxw); margin: 0 auto; }
.sec__head { max-width: 760px; margin-bottom: clamp(2.6rem, 5vh, 4rem); }
.sec__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.022em; margin: 1.1rem 0 0; max-width: 18ch; }
.sec__body { font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.7; color: var(--ink-2); max-width: 54ch; margin-top: 1.2rem; }

/* product feature: text + large precise device frame (image leads, copy is a slim column) */
.feature__inner { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5.5rem); align-items: center; max-width: min(1640px, 95vw); margin: 0 auto; }
.feature--flip { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); }
.feature--flip .feature__copy { order: 2; }
.feature__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 1rem 0 1.2rem; max-width: 15ch; }
.feature__body { font-size: clamp(0.96rem, 1.3vw, 1.08rem); line-height: 1.7; color: var(--ink-2); max-width: 40ch; margin-bottom: 1.5rem; }
.feature__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3); }
.frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 40px 90px -44px rgba(30,28,80,0.45); will-change: opacity, transform; }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.frame__url { margin-left: 0.7rem; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.frame__shot { overflow: hidden; }
.frame__shot img { display: block; width: 100%; height: auto; }
/* opacity + transform are driven per-frame by scrollFx() in home.js (no CSS
   transition, so it tracks the scroll instantly); starts hidden pre-JS */
.frame { opacity: 0; }

/* ════════════════════════════════════════════════════════
   SIGNATURE GRAPHIC: the human gate (bespoke SVG scroll-draw)
   ════════════════════════════════════════════════════════ */
.gate { position: relative; height: 280vh; background: transparent; color: var(--on-dark); }
.gate__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem var(--pad-x); }
.gate__svg { width: min(960px, 92vw); height: auto; color: rgba(244,244,248,0.85); }
.gate__svg .flow { stroke: rgba(160,150,255,0.9); }
.gate__svg .ring { stroke: var(--on-dark); }
.gate__svg .out { stroke: rgba(110,230,210,0.9); }
.gate__svg .rec { stroke: rgba(244,244,248,0.45); }
.gate__caption { margin-top: 3rem; text-align: center; width: min(940px, 92vw); }
.gate__no { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 1.2rem; }
/* all three lines are stacked + centered in a fixed box, so swapping beats
   never reflows; home.js cross-dissolves their opacity by scroll position */
.gate__line { position: relative; font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.15; letter-spacing: -0.022em; min-height: 2.7em; }
.gate__line b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-weight: 300; opacity: 0; }
.gate__sub { margin-top: 1.2rem; font-size: clamp(0.95rem,1.3vw,1.1rem); color: var(--on-dark-2); max-width: 40ch; margin-left: auto; margin-right: auto; min-height: 2.6em; }

/* ════════════════════════════════════════════════════════
   DUAL AUDIENCE
   ════════════════════════════════════════════════════════ */
.aud { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-2); }
.aud__col { padding: 2.4rem 2.6rem 0 0; }
.aud__col + .aud__col { border-left: 1px solid var(--line); padding-left: 2.6rem; padding-right: 0; }
.aud__tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 6px; margin-bottom: 1.6rem; }
.aud__tag--ops { color: var(--teal); background: rgba(14,159,142,0.1); }
.aud__tag--exec { color: var(--indigo-700); background: rgba(79,70,229,0.1); }
.aud__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.018em; margin-bottom: 1.8rem; max-width: 18ch; }
.points { list-style: none; }
.points li { border-top: 1px solid var(--line); padding: 1.1rem 0; font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); }
.points b { color: var(--ink); font-weight: 600; }

/* standards + mcp strip */
.strip { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 3rem; }
.strip__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.7rem; }
.strip__items { font-size: clamp(0.95rem,1.3vw,1.08rem); color: var(--ink); }

/* mission  a wide editorial breather, not a cramped column */
.mission { padding: clamp(7rem, 16vh, 12rem) var(--pad-x); text-align: center; }
.mission__inner { max-width: 1100px; margin: 0 auto; }
.mission__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.5vw, 5.4rem); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 1.8rem; text-wrap: balance; }
.mission__body { font-size: clamp(1.02rem,1.5vw,1.25rem); line-height: 1.65; color: var(--ink-2); max-width: 56ch; margin: 0 auto; text-wrap: balance; }

/* faq */
.faq { padding: clamp(5rem,12vh,9rem) var(--pad-x); }
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__list { margin-top: 2.4rem; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem,1.7vw,1.35rem); letter-spacing: -0.01em; color: var(--ink); text-align: left; }
.faq__mark { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--indigo); transition: transform 0.35s var(--ease), opacity 0.25s ease; }
.faq__mark::before { width: 14px; height: 2px; transform: translate(-50%,-50%); border-radius: 2px; }
.faq__mark::after { width: 2px; height: 14px; transform: translate(-50%,-50%); border-radius: 2px; }
.faq__q[aria-expanded="true"] .faq__mark::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 0.45s var(--ease); }
.faq__a.open { max-height: 320px; }
.faq__a > div { font-size: 0.95rem; line-height: 1.75; color: var(--ink-2); padding-bottom: 1.5rem; max-width: 64ch; }

/* access (pier photo scene → form card) */
/* no card - a centered column with fields floating directly on the photo */
.access__card { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; text-align: center; text-shadow: 0 2px 28px rgba(8,8,24,0.5); }
.access__card .kicker { color: var(--on-dark-2); }
.access__card .kicker::before { background: rgba(244,244,248,0.4); }
.access__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,3.4vw,2.8rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0.9rem 0 0.6rem; color: var(--on-dark); }
.access__sub { font-size: 0.96rem; line-height: 1.6; color: var(--on-dark-2); margin: 0 auto 1.9rem; max-width: 42ch; }
.form { display: grid; gap: 1.1rem; width: 100%; max-width: 460px; margin: 0 auto; text-align: left; }
.form__field input, .form__error { text-shadow: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.form__field { display: grid; gap: 0.35rem; min-width: 0; }
.form__field label { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-2); }
.form__field input { width: 100%; min-width: 0; font-family: var(--sans); font-size: 0.92rem; color: var(--on-dark); background: rgba(12,12,28,0.28); border: 1px solid rgba(255,255,255,0.24); border-radius: 10px; padding: 0.74rem 0.9rem; outline: none; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; -webkit-appearance: none; }
.form__field input::placeholder { color: rgba(244,244,248,0.5); }
.form__field input:focus { border-color: rgba(160,150,255,0.85); background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(120,110,240,0.22); }
.form__field input.error { border-color: #F06A6A; }
.form__error { font-size: 0.78rem; color: #FF9A8F; min-height: 1.05em; margin: -0.3rem 0; }
.form__submit { justify-content: center; width: 100%; position: relative; margin-top: 0.2rem; }
.form__btn-loading { display: none; }
.form__submit.is-loading .form__btn-text { visibility: hidden; }
.form__submit.is-loading .form__btn-loading { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form__note { font-size: 0.72rem; text-align: center; color: var(--on-dark-2); }
.access__btn { margin-top: 0.4rem; }

/* ════════════════════════════════════════════════════════
   REQUEST-ACCESS OVERLAY (modal) - opened by every CTA
   ════════════════════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 360; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(8,7,18,0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.modal__card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 3rem); overflow-y: auto; background: rgba(22,20,40,0.86); -webkit-backdrop-filter: blur(34px) saturate(1.3); backdrop-filter: blur(34px) saturate(1.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; padding: clamp(1.8rem,3vw,2.6rem); box-shadow: 0 50px 120px -40px rgba(0,0,0,0.75); color: var(--on-dark); transform: translateY(18px) scale(0.985); transition: transform 0.4s var(--ease); }
.modal[aria-hidden="false"] .modal__card { transform: none; }
.modal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,0.08); color: var(--on-dark); border-radius: 50%; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; }
.modal__close:hover { background: rgba(255,255,255,0.18); }
.modal__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,3vw,2.3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0.9rem 0 0.5rem; color: var(--on-dark); }
.modal__sub { font-size: 0.92rem; line-height: 1.6; color: var(--on-dark-2); margin-bottom: 1.6rem; }
.modal .form { max-width: none; margin: 0; }
html.modal-open, body.modal-open { overflow: hidden; }

/* footer */
/* transparent so the access photo (fixed bg stage) carries through the footer
   too; no solid bar. z-index keeps the footer text above the stage. */
.footer { position: relative; z-index: 1; background: transparent; color: var(--on-dark); padding: clamp(3rem,6vh,5rem) var(--pad-x) 2.4rem; text-shadow: 0 1px 20px rgba(8,8,20,0.55); }
.footer__top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(244,244,248,0.12); }
.footer__brand .wordmark { height: 13px; width: auto; color: var(--on-dark); display: block; margin-bottom: 1.1rem; }
.footer__tag { font-size: 0.85rem; color: var(--on-dark-2); max-width: 26ch; }
.footer__col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,244,248,0.45); margin-bottom: 1rem; font-weight: 500; }
.footer__col a { display: block; font-size: 0.86rem; color: var(--on-dark-2); padding: 0.3rem 0; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--on-dark); }
.footer__bottom { max-width: var(--maxw); margin: 1.6rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__bottom span, .footer__bottom a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: rgba(244,244,248,0.45); }
.footer__bottom a:hover { color: var(--on-dark); }
.footer__mcp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--on-dark-2); }
.footer__legal { display: inline-flex; gap: 1.3rem; }

/* popup */
.popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(20,19,40,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.popup[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.popup__card { background: #fff; border-radius: 18px; max-width: 400px; width: 100%; padding: 3rem 2.4rem 2.6rem; text-align: center; display: grid; gap: 1rem; justify-items: center; transform: translateY(20px) scale(0.97); transition: transform 0.45s var(--ease); }
.popup[aria-hidden="false"] .popup__card { transform: none; }
.popup__title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; letter-spacing: -0.02em; }
.popup__body { font-size: 0.92rem; line-height: 1.65; color: var(--ink-2); max-width: 300px; }
.popup__close { margin-top: 0.6rem; padding-left: 2.4rem; padding-right: 2.4rem; }

/* responsive */
@media (max-width: 920px) {
  .feature__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .feature--flip .feature__copy { order: 0; }
  .aud { grid-template-columns: 1fr; }
  .aud__col + .aud__col { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2.2rem; margin-top: 1rem; }
  .strip { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .access__card { margin: 0 auto; }
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ───────── mobile nav (hamburger + full-screen menu) ───────── */
.nav__burger {
  display: none; pointer-events: auto;
  position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer; padding: 0; z-index: 260;
}
.nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s ease, background 0.3s ease; }
.nav.on-dark .nav__burger span { background: var(--on-dark); }
.nav__burger.is-open span { background: var(--on-dark); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navmob {
  position: fixed; inset: 0; z-index: 10000; pointer-events: auto;
  background: rgba(14,12,24,0.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--pad-x) calc(3rem + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0.3s;
}
.navmob.is-open { opacity: 1; visibility: visible; transform: none; }
.navmob__close { position: absolute; top: calc(1.5rem + env(safe-area-inset-top, 0px)); right: var(--pad-x); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--on-dark); font-size: 2rem; line-height: 1; cursor: pointer; }
.navmob__menu { display: flex; flex-direction: column; }
.navmob__menu a { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 8.5vw, 2.7rem); letter-spacing: -0.02em; color: var(--on-dark); padding: 0.4rem 0; transition: color 0.2s ease; }
.navmob__menu a:hover, .navmob__menu a:active { color: #C9C4FF; }
.navmob__cta { align-self: flex-start; margin-top: 1.6rem; height: 48px; padding: 0 1.9rem; font-size: 0.95rem; }
/* While the full-screen mobile menu is open, lift the whole nav above the cookie
   banner (root z 9999) so the overlay covers everything. navmob's own z-index is
   capped by .nav's stacking context, so we raise .nav itself. Reverts on close,
   keeping modals/popups above the bar normally. */
.nav:has(.navmob.is-open) { z-index: 10001; }

@media (max-width: 1080px) {
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  /* no pill on mobile: plain bar, logo + hamburger aligned to the same edges */
  .nav__pill, .nav.scrolled .nav__pill, .nav.on-dark.scrolled .nav__pill {
    max-width: none !important; height: 66px; margin: 9px 0; padding: 0 !important;
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
@media (min-width: 1081px) { .navmob { display: none; } }

/* smaller headline padding + tighter scenes on phones */
@media (max-width: 600px) {
  .scene { padding: 6rem var(--pad-x) 3.5rem; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .rl__in, .frame__shot img, .scene__bg img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .gate { height: auto; } .gate__pin { position: static; height: auto; padding: 6rem var(--pad-x); }
  html { scroll-behavior: auto; }
}