/* ═══════════════════════════════════════════════════════════════
   CADARA FOOT v2 - design system
   Tokens: see .planning/DESIGN.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  --void: #08050D;
  --chamber: #120B1E;
  --royal: #4E2A84;
  --cadara: #8D5BFF;
  --lilac: #C9B8FF;
  --bone: #EDE6D6;
  --flesh: #E8C4B0;
  --gold: #C9A96A;
  --text: #B9AFCB;
  --line: rgba(201, 184, 255, 0.14);
  --btn-ink: #0B0714;
  --ghost-bg: rgba(18, 11, 30, 0.5);
  --nav-bg: rgba(8, 5, 13, 0.72);
  --nav-line: rgba(201, 184, 255, 0.08);
  --menu-bg: rgba(8, 5, 13, 0.96);
  --cell-grad: rgba(5, 3, 8, 0.92);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nav-h: 72px;
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
}

/* Light theme - creamy, retro-modern. The cinema + 360 stay a dark film (scoped below). */
html.light {
  --void: #F2EAD9;
  --chamber: #FAF4E7;
  --royal: #4E2A84;
  --cadara: #6B36E8;
  --lilac: #6A48B8;
  --bone: #2C1A4E;
  --flesh: #B4674C;
  --gold: #8A6A33;
  --text: #55496B;
  --line: rgba(46, 26, 78, 0.18);
  --btn-ink: #F6F1E6;
  --ghost-bg: rgba(255, 252, 244, 0.55);
  --nav-bg: rgba(242, 234, 217, 0.82);
  --nav-line: rgba(46, 26, 78, 0.12);
  --menu-bg: rgba(242, 234, 217, 0.97);
  --cell-grad: rgba(250, 244, 231, 0.95);
}

/* Film sections keep the dark-void palette in both themes (except static rm flow) */
body:not(.rm) .cinema-stage, .orbit360 {
  --bone: #EDE6D6;
  --text: #B9AFCB;
  --lilac: #C9B8FF;
  --gold: #C9A96A;
  --flesh: #E8C4B0;
  --cadara: #8D5BFF;
  --line: rgba(201, 184, 255, 0.14);
  --ghost-bg: rgba(18, 11, 30, 0.5);
  --btn-ink: #0B0714;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--royal); color: var(--bone); }

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* ─── Type ─── */
.display {
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "opsz" 100;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.display em { font-style: italic; font-weight: 480; color: var(--lilac); }
.display .num { color: var(--cadara); font-variant-numeric: tabular-nums; }

.eyebrow {
  color: var(--gold);
  margin-bottom: 22px;
  font-size: 14px;
  letter-spacing: 0.18em;
}
.eyebrow::before { content: "- "; color: var(--cadara); }

.lede {
  max-width: 640px;
  font-size: clamp(18px, 1.75vw, 21.5px);
  color: var(--text);
  margin-top: 28px;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, background 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--cadara); outline-offset: 3px; }

.btn-solid {
  background: var(--cadara);
  color: var(--btn-ink);
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(141, 91, 255, 0.4), 0 10px 34px -12px rgba(141, 91, 255, 0.55);
}
.btn-solid:hover { background: #A47DFF; box-shadow: 0 0 0 1px rgba(164, 125, 255, 0.6), 0 16px 44px -12px rgba(141, 91, 255, 0.7); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--lilac);
  background: var(--ghost-bg);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--cadara); color: var(--bone); }

.btn-big { padding: 20px 38px; font-size: 13px; }

.play-tri {
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ═══════════ PRELOADER ═══════════ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--void);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-mark {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display);
  color: var(--bone);
}
.lm-line { display: block; overflow: hidden; }
.lm-cadara {
  font-size: clamp(54px, 11vw, 150px);
  font-weight: 620;
  line-height: 0.95;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* optical centering of tracked type */
  transition: letter-spacing 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader.arrive .lm-cadara { letter-spacing: 0.06em; margin-right: -0.06em; }
.lm-foot {
  font-size: clamp(15px, 2.4vw, 26px);
  letter-spacing: 0.85em;
  margin-right: -0.85em;
  color: var(--cadara);
  font-weight: 500;
  margin-top: 12px;
}
.lm-foot sup { font-size: 0.45em; letter-spacing: 0.1em; }

.loader-meta {
  display: flex; gap: 26px;
  color: var(--gold);
}
.loader-track {
  width: min(300px, 60vw); height: 1px;
  background: var(--line);
}
.loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--royal), var(--cadara));
  box-shadow: 0 0 12px rgba(141, 91, 255, 0.8);
  transition: width 0.25s ease;
}

/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; /* wordmark must never kiss the first nav link */
  padding: 0 var(--pad);
  transition: background 0.45s, backdrop-filter 0.45s, border-color 0.45s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--nav-line);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 620;
  color: var(--bone);
  letter-spacing: 0.02em;
}
.wordmark span { color: var(--cadara); font-style: italic; font-weight: 480; }

.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--bone); }

.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-cta { padding: 11px 22px; }
.nav-burger { letter-spacing: 0.14em; color: var(--lilac); padding: 10px; }
.nav-theme {
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--lilac);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.25s, border-color 0.25s;
}
.nav-theme:hover { color: var(--bone); border-color: var(--cadara); }

.nav-menu[hidden] { display: none; }
.nav-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--menu-bg);
  backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
}
.nav-menu nav { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.nav-menu a {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 44px);
  color: var(--bone);
  padding: 6px 20px;
}
.nav-menu a:hover { color: var(--cadara); font-style: italic; }

/* ═══════════ CINEMA ═══════════ */
.cinema { position: relative; }
.cinema-track { height: 1080vh; position: relative; }
.cinema-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #08050D; /* the film is always dark, in both themes */
}

.cinema-poster,
#cinemaCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#cinemaCanvas { opacity: 0; }

#dustCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.ghost-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(120px, 24vw, 380px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(201, 184, 255, 0.28);
  opacity: 0;
  will-change: transform, opacity;
}

.stage-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(ellipse 55% 45% at 50% 58%, rgba(78, 42, 132, 0.34), transparent 68%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.cinema-flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(228, 216, 255, 0.95), rgba(141, 91, 255, 0.55) 45%, rgba(8, 5, 13, 0) 78%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.letterbox {
  position: absolute; left: 0; right: 0;
  height: 6vh;
  background: #050308;
  z-index: 5;
  pointer-events: none;
}
.lb-top { top: 0; border-bottom: 1px solid rgba(201, 169, 106, 0.18); transform: translateY(-100%); }
.lb-bottom { bottom: 0; border-top: 1px solid rgba(201, 169, 106, 0.18); transform: translateY(100%); }

/* HUD */
.hud { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.hud-item { position: absolute; color: rgba(201, 169, 106, 0.85); line-height: 1.7; }
/* HUD top row must clear the fixed nav on short viewports, not just the letterbox */
.hud-tl { top: max(6vh + 22px, var(--nav-h) + 14px); left: var(--pad); }
.hud-tr { top: max(6vh + 22px, var(--nav-h) + 14px); right: var(--pad); text-align: right; font-variant-numeric: tabular-nums; }
.hud-bl { bottom: calc(6vh + 22px); left: var(--pad); font-variant-numeric: tabular-nums; }
.hud-rail {
  position: absolute; right: var(--pad); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.rail-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(201, 184, 255, 0.25);
  transition: background 0.4s, box-shadow 0.4s;
}
.rail-dot.on { background: var(--cadara); box-shadow: 0 0 10px rgba(141, 91, 255, 0.9); }
.rail-line {
  position: absolute; top: -30px; bottom: -30px; z-index: -1;
  width: 1px;
  background: linear-gradient(var(--line), var(--line));
}

/* Hero overlay */
.cine-hero {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--pad);
  gap: 22px;
}
.hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 16px;
  color: var(--gold);
  font-size: 13.5px;
  letter-spacing: 0.16em;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(8, 5, 13, 0.52);
  border: 1px solid rgba(201, 169, 106, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform;
}
.hb-dot { color: var(--cadara); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(52px, 9.6vw, 138px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
  /* NOT text-shadow: it paints inside each word mask and clips into visible
     rectangles. drop-shadow follows the glyphs after clipping. */
  filter: drop-shadow(0 8px 26px rgba(8, 5, 13, 0.85));
  max-width: 12ch;
}
.hero-title em { font-style: italic; color: var(--lilac); }

.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--flesh);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(8, 5, 13, 0.95), 0 6px 40px rgba(8, 5, 13, 0.9);
  padding: 8px 26px;
  border-radius: 999px;
  background: rgba(8, 5, 13, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform;
}
.hero-title { will-change: transform; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }

.scroll-cue {
  position: absolute; bottom: calc(6vh + 20px); left: 50%;
  transform: translateX(-50%);
  color: rgba(201, 184, 255, 0.6);
  display: flex; align-items: center; gap: 12px;
}
.scroll-cue i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--cadara), transparent);
  display: block;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Act overlays */
.act {
  position: absolute; z-index: 8;
  max-width: 440px;
  opacity: 0;
  pointer-events: none;
  --act-pos: translateY(-50%);
  --act-x: 0px;
  transform: var(--act-pos) translateX(var(--act-x));
}
.act h2 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  text-shadow: 0 6px 40px rgba(8, 5, 13, 0.9);
  will-change: transform;
}
.act h2 .hl { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.act h2 .hl-in { display: inline-block; will-change: transform; }
.act h2 em { font-style: italic; color: var(--lilac); }
.act .eyebrow { margin-bottom: 14px; font-size: 15px; }
.act-body { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--text); max-width: 400px; }
.act-still { display: none; }

.act-1 { left: var(--pad); top: 50%; }
.act-2 { right: var(--pad); top: 50%; text-align: right; }
.act-2 .act-body { margin-left: auto; }
.act-3 { left: var(--pad); top: 50%; }
.act-4 { right: var(--pad); top: 50%; text-align: right; }
.act-4 .act-body { margin-left: auto; }
.act-4 h2 em { color: var(--flesh); }
.act-5 { left: var(--pad); top: 50%; }
.act-end {
  left: 50%; top: 50%;
  --act-pos: translate(-50%, -50%);
  transform: var(--act-pos) scale(var(--act-s, 1));
  text-align: center; max-width: none;
}
.act-end h2 { font-size: clamp(44px, 7vw, 96px); }

/* ═══════════ TICKER ═══════════ */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--chamber);
  position: relative; z-index: 2;
}
.ticker-inner {
  display: flex; white-space: nowrap;
  color: var(--gold);
  padding: 15px 0;
  animation: ticker 36s linear infinite;
  will-change: transform;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ═══════════ SECTIONS ═══════════ */
.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(90px, 13vh, 170px) var(--pad);
}

.reveal { opacity: 0; }
html.no-js .reveal, body.rm .reveal { opacity: 1; }

/* Story */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 64px;
}
.stat {
  background: var(--void);
  padding: 34px 28px;
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(38px, 4.6vw, 62px);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.stat strong i { font-style: normal; color: var(--cadara); }
.stat span { color: var(--gold); display: block; margin-top: 6px; }

.pull {
  margin: 96px auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.15;
  color: var(--royal);
  color: color-mix(in srgb, var(--royal) 55%, var(--lilac));
}
.pull em { font-style: italic; color: var(--cadara); }

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 40px;
}
.founder {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.founder-role { color: var(--gold); font-size: 12.5px; }
.founder h3 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 560;
  color: var(--bone);
  margin: 10px 0 12px;
}
.founder p { font-size: 15.5px; }

/* Construction bento */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 330px;
  gap: 18px;
  margin-top: 64px;
}
.cell {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--chamber);
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cell:hover { border-color: rgba(141, 91, 255, 0.5); transform: translateY(-4px); }
.cell-tall { grid-row: span 2; }
.cell img, .cell video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s;
}
.cell:hover img, .cell:hover video { transform: scale(1.045); opacity: 1; }
.cell-copy {
  position: absolute; inset: auto 0 0 0;
  padding: 16px 20px 18px;
  background: linear-gradient(transparent, var(--cell-grad) 72%);
  z-index: 2;
}
.cell-tag { color: var(--gold); font-size: 12.5px; }
.cell-copy h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 21px;
  color: var(--bone);
  margin: 8px 0 8px;
}
.cell-copy p { font-size: 14px; color: var(--text); }
.cell-type { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.cell-type .cell-copy { position: static; padding: 0; background: none; }
.cell-num {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 620;
  line-height: 1;
  color: var(--cadara);
  font-variant-numeric: tabular-nums;
}

/* ═══════════ ANYWHERE (new-opportunity benefits) ═══════════ */
/* compound selector so this wins over the base .benefit-grid columns below */
.benefit-grid.anywhere-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 56px; }
@media (max-width: 1080px) { .benefit-grid.anywhere-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; } }
@media (max-width: 640px) { .benefit-grid.anywhere-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ═══════════ INTERACTIVE 360 ═══════════ */
.orbit360 {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #000;
}
.orbit360-stage {
  position: relative;
  height: clamp(560px, 100vh, 900px);
  overflow: hidden;
  cursor: grab;
}
.orbit360-stage.grabbing { cursor: grabbing; }
#orbit360Canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit360-copy {
  position: absolute; top: clamp(36px, 7vh, 80px); left: 0; right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.orbit360-models {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 22px;
  pointer-events: auto;
}
.orbit360-hint { margin-top: 18px; color: rgba(201, 184, 255, 0.65); }
.drag-icon { color: var(--cadara); }
.orbit-deg {
  position: absolute; right: var(--pad); bottom: 28px;
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 100px);
  font-weight: 300;
  color: rgba(237, 230, 214, 0.28);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.orbit-deg sup { font-size: 0.4em; color: rgba(141, 91, 255, 0.55); }

/* ═══════════ FILM ═══════════ */
.film { text-align: center; }
.film .eyebrow { text-align: left; }
.film .display { text-align: left; }

.film-wrap {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 56px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 0.4s;
}
.film-wrap:hover { border-color: rgba(141, 91, 255, 0.55); }
.film-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: 0.9; transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1); }
.film-wrap:hover img { transform: scale(1.03); }
.film-dur {
  position: absolute; right: 18px; bottom: 16px;
  color: var(--bone);
  background: rgba(8, 5, 13, 0.65);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}

.play-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(141, 91, 255, 0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 20px 60px -12px rgba(141, 91, 255, 0.8);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
}
.film-wrap:hover .play-badge, .voice-media:hover .play-badge { transform: translate(-50%, -50%) scale(1.12); background: #A47DFF; }
.play-badge i {
  width: 0; height: 0;
  border-left: 18px solid #0B0714;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

/* ═══════════ VOICES ═══════════ */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 22px;
  margin-top: 64px;
}
.voice-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 0.4s;
}
.voice-media:hover { border-color: rgba(141, 91, 255, 0.55); }
.voice-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.voice-media .play-badge { width: 56px; height: 56px; }
.voice-media .play-badge i { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.voice-dur {
  position: absolute; right: 12px; bottom: 10px;
  color: var(--bone);
  background: rgba(8, 5, 13, 0.65);
  padding: 4px 9px; border-radius: 999px;
}
.voice h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 19px;
  color: var(--bone);
  margin: 14px 0 4px;
}
.voice-loc { color: var(--gold); font-size: 12px; }

/* ═══════════ SHOP ═══════════ */
.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 64px;
}
.product {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--chamber);
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
}
.product:hover {
  border-color: rgba(141, 91, 255, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 30px 80px -30px rgba(78, 42, 132, 0.55);
}
.product-media { background: #000; }
.product-media video { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.product-info { padding: 26px 26px 30px; }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.product-head h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 24px;
  color: var(--bone);
}
.price { font-size: 16px; color: var(--cadara); }
.price s { color: var(--text); opacity: 0.55; margin-left: 6px; }
.product-note { margin-top: 8px; font-size: 15px; }

.variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.variant {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.variant:hover { border-color: var(--cadara); color: var(--bone); }
.variant.is-active { border-color: var(--cadara); color: var(--bone); background: rgba(141, 91, 255, 0.14); }
.product .btn { width: 100%; justify-content: center; }

.shop-fineprint { margin-top: 36px; color: rgba(201, 169, 106, 0.7); text-align: center; }

/* ═══════════ FAQ ═══════════ */
.faq-list { margin-top: 56px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 540;
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--bone);
  transition: color 0.3s;
}
.faq-list summary:hover { color: var(--lilac); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  position: relative;
}
.faq-list summary i::before, .faq-list summary i::after {
  content: ""; position: absolute;
  background: var(--cadara);
  transition: transform 0.35s;
}
.faq-list summary i::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-list summary i::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq-list details[open] summary i::after { transform: scaleY(0); }
.faq-list details p { padding: 0 4px 28px; max-width: 640px; }

/* ═══════════ OUTRO / FOOTER ═══════════ */
.outro { text-align: center; }
.outro-eyebrow { font-size: clamp(16px, 2vw, 24px); letter-spacing: 0.22em; }
.outro-eyebrow::before { content: ""; }
.outro-lede { margin: 26px auto 0; max-width: 600px; }

/* ═══════════ KINETIC TEXT INTERLUDES ═══════════ */
.kinetic {
  padding: 18vh var(--pad);
  overflow: hidden;
  text-align: center;
}
.kin-line {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  white-space: nowrap;
  will-change: transform;
}
.kin-1 {
  font-size: clamp(34px, 6.5vw, 100px);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--bone) 55%, transparent);
}
.kin-2 {
  font-size: clamp(48px, 9.5vw, 150px);
  color: var(--bone);
  letter-spacing: -0.02em;
}
.kin-2 em { font-style: italic; color: var(--cadara); }
.kin-3 {
  margin-top: 26px;
  font-size: clamp(13px, 1.6vw, 19px);
  letter-spacing: 0.3em;
  color: var(--gold);
}
/* phones: shrink the nowrap display lines so their tails stay on screen
   (paired with smaller GSAP drifts in main.js) */
@media (max-width: 700px) {
  .kin-1 { font-size: clamp(15px, 6vw, 24px); -webkit-text-stroke-width: 1px; }
  .kin-2 { font-size: clamp(20px, 9.2vw, 38px); }
  .kin-3 {
    white-space: normal;
    max-width: 88vw;
    margin-left: auto; margin-right: auto;
    font-size: 12px;
    letter-spacing: 0.22em;
    line-height: 1.9;
  }
}
.kin-pops {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 2vw 4vw;
}
.kin-pop {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(30px, 5vw, 74px);
  color: var(--text);
  will-change: transform;
}
.kin-big {
  margin-top: 4vh;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(80px, 16vw, 250px);
  line-height: 1.02;
  color: var(--bone);
  letter-spacing: -0.02em;
  will-change: transform;
}
.kin-big em { font-style: italic; color: var(--cadara); }
.outro-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 10vw, 150px);
  line-height: 1.04;
  color: var(--bone);
}
.outro-title em { font-style: italic; color: var(--cadara); }
.outro-actions { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.outro-actions .mono { color: var(--gold); }

.footer {
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 34px var(--pad);
  max-width: none;
}
.footer .mono { color: rgba(185, 175, 203, 0.6); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { transition: color 0.25s; }
.footer-links a:hover { color: var(--bone); }

/* ═══════════ GRAIN + LIGHTBOX ═══════════ */
.grain {
  position: fixed; inset: -100%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-2%, -3%); }
  80% { transform: translate(4%, 2%); }
}

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5, 3, 8, 0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}
.lightbox-frame { position: relative; width: min(1100px, 100%); }
.lightbox-player { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 40px 120px -30px rgba(78, 42, 132, 0.8); }
.lightbox-player iframe { width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute; right: 0; top: -44px;
  color: var(--lilac);
  letter-spacing: 0.14em;
  padding: 8px;
}
.lightbox-close:hover { color: var(--bone); }

/* ═══════════ PARTNER SUBPAGE ═══════════ */
.subpage main { padding-top: var(--nav-h); }
.subpage-hero { padding-top: clamp(90px, 16vh, 190px); }
.display-xl { font-size: clamp(46px, 8vw, 110px); }
.partner-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Partner video hero - same full-bleed treatment as the journey hero.
   Stays a dark film in both themes, so the dark palette is pinned here. */
.partner-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(22px, 6vw, 90px) clamp(70px, 10vh, 120px);
  overflow: hidden;
  background: #08050D;
  --bone: #EDE6D6;
  --text: #B9AFCB;
  --lilac: #C9B8FF;
  --gold: #C9A96A;
  --cadara: #8D5BFF;
  --line: rgba(201, 184, 255, 0.14);
  --ghost-bg: rgba(18, 11, 30, 0.5);
  --btn-ink: #0B0714;
}
.partner-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.92) contrast(1.04);
}
.partner-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,5,13,.58) 0%, rgba(8,5,13,.30) 38%, rgba(8,5,13,.06) 62%, rgba(8,5,13,0) 78%),
    linear-gradient(180deg, rgba(8,5,13,.66) 0%, rgba(8,5,13,.30) 34%, rgba(8,5,13,.80) 66%, rgba(8,5,13,.97) 100%),
    radial-gradient(100% 70% at 22% 86%, rgba(8,5,13,.92), transparent 72%);
}
/* wider than the journey hero's 880: this headline runs ~20 characters a line
   and at 880 the last word orphaned onto a third line. The lede stays narrow.
   No hard <br> in the h1: a fixed break orphans a word at phone widths, so the
   line count is left to the browser and balanced. */
.partner-hero-copy { position: relative; max-width: 1100px; }
.partner-hero-copy .display { text-wrap: balance; }
.partner-hero-copy .lede { max-width: 640px; }
.partner-hero-copy .display,
.partner-hero-copy .lede,
.partner-hero-copy .eyebrow { text-shadow: 0 2px 24px rgba(8,5,13,.85); }
.partner-hero .display { color: #F4EFE6; }
.partner-hero .lede { color: rgba(244,239,230,.82); }

/* IO-based reveals on subpages (index uses GSAP instead) */
.subpage .reveal {
  transform: translateY(26px);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.subpage .reveal.in { opacity: 1; transform: none; }

.duo-grid {
  display: grid;
  /* problem recedes, solution dominates - not two equal boxes */
  grid-template-columns: 0.85fr 1.3fr;
  gap: 22px;
  margin-top: 60px;
  align-items: stretch;
}
.duo-card {
  border-radius: 16px;
  padding: 34px 30px;
  border: 1px solid var(--line);
  background: var(--chamber);
}
.duo-card.trap { opacity: 0.88; }
/* THE SOLUTION card: confident deep purple in BOTH themes - pins the dark
   film tokens (same pattern as .cinema-stage) so its text always reads */
.duo-card.lib {
  --bone: #EDE6D6;
  --text: #D9CFEA;
  --gold: #E2C185;
  background: linear-gradient(150deg, #4E2A84, #22114a 55%, #120B1E);
  border-color: rgba(141, 91, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(141, 91, 255, 0.25), 0 30px 80px -30px rgba(141, 91, 255, 0.45);
  padding: 44px 40px;
  color: var(--text);
}
.duo-tag { color: var(--gold); }
.duo-card h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--bone);
  margin: 12px 0 14px;
  line-height: 1.1;
}
.duo-card.lib h3 { font-size: clamp(26px, 3.2vw, 38px); }
.duo-card p:last-child { font-size: 15.5px; }
.duo-card.lib p:last-child { font-size: 16.5px; }

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 60px;
}
.benefit {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.benefit-tag { color: var(--gold); }
.benefit h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 22px;
  color: var(--bone);
  margin: 10px 0 10px;
}
.benefit p:last-child { font-size: 15px; }

.benefit-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}
.benefit-media video {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1080px) {
  .voice-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .duo-grid { grid-template-columns: 1fr; }
  .benefit-grid { grid-template-columns: 1fr; gap: 30px; }
  .benefit-media { grid-template-columns: 1fr; }
  .act { max-width: min(400px, 82vw); }
  .act-2, .act-4 { right: var(--pad); }
  .founders { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .cinema-track { height: 960vh; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .stats { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .cell-tall { grid-row: span 1; }
  .voice-grid { grid-template-columns: 1fr; }
  .hud-bl, .hud-rail { display: none; }
  .act { top: auto; bottom: calc(6vh + 30px); --act-pos: translateY(0); }
  .act-2, .act-4 { text-align: left; left: var(--pad); right: var(--pad); }
  .act-2 .act-body, .act-4 .act-body { margin-left: 0; }
  .letterbox { height: 4vh; }
  /* 4vh + 16px lands inside the 72px nav band on phones - pin below the nav */
  .hud-tl { top: calc(var(--nav-h) + 14px); }
  .hud-tr { top: calc(var(--nav-h) + 14px); }
  .scroll-cue { bottom: calc(4vh + 16px); }
  /* hero eyebrows: the centered stack may not ride up under the fixed nav.
     Reserve the nav band and compact the badge pill so it fits short phones. */
  .cine-hero { padding: calc(var(--nav-h) + 12px) var(--pad) 64px; gap: 18px; }
  .hero-badges {
    font-size: 11px;
    letter-spacing: 0.14em;
    gap: 6px 10px;
    padding: 10px 16px;
  }
}

/* ───── phone landscape (short viewport) ─────
   Width queries miss a phone held sideways: ~844×390 keeps desktop type,
   so the 9.6vw title and the eyebrow pill overflow the centered hero and
   ride straight over the fixed nav. Scale the display type to viewport
   height and keep every overlay below the nav band. */
@media (max-height: 500px) {
  .cine-hero { padding: calc(var(--nav-h) + 10px) var(--pad) 44px; gap: 10px; }
  .hero-badges {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    gap: 5px 10px;
    padding: 7px 14px;
  }
  .hero-title { font-size: clamp(30px, 12vh, 60px); }
  .hero-sub { font-size: clamp(15px, 4.5vh, 20px); padding: 5px 16px; }
  .hero-actions { margin-top: 0; }
  .scroll-cue { bottom: 10px; }
  /* act copy: centered at top:50% its eyebrow lands inside the nav band -
     pin below the nav instead and tighten the type to fit the height.
     The HUD top row would share that exact spot (act eyebrows repeat its
     phase line anyway), so it yields; FR counter and rail stay. */
  .hud-tl, .hud-tr { display: none; }
  .act { top: calc(var(--nav-h) + 10px); bottom: auto; --act-pos: translateY(0); max-width: min(440px, 46vw); }
  .act .eyebrow { font-size: 12px; margin-bottom: 8px; }
  .act h2 { font-size: clamp(26px, 9vh, 44px); }
  .act-body { margin-top: 10px; font-size: 14px; max-width: 340px; }
  .act-end { top: calc(50% + 14px); bottom: auto; --act-pos: translate(-50%, -50%); max-width: none; }
  .act-end h2 { font-size: clamp(30px, 11vh, 52px); }
}

/* ═══════════ REDUCED MOTION / NO-JS ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-inner { animation: none; }
  .grain { animation: none; }
  .scroll-cue i { animation: none; }
}

body.rm .cinema-track { height: auto; }
body.rm .cinema-stage { position: relative; height: auto; overflow: visible; background: none; }
body.rm .cinema-poster { position: relative; height: 92vh; object-fit: cover; }
body.rm #cinemaCanvas, body.rm .cinema-flash, body.rm .hud, body.rm .letterbox, body.rm .stage-glow, body.rm .scroll-cue { display: none; }
body.rm .cine-hero {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: auto;
  height: 92vh; /* pin to the poster, not the whole stacked stage */
  --bone: #EDE6D6; --flesh: #E8C4B0; --lilac: #C9B8FF;
  --gold: #C9A96A; --text: #B9AFCB;
}
body.rm .act {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px var(--pad);
  left: auto; right: auto; top: auto; bottom: auto;
  transform: none;
  text-align: left;
}
body.rm .act-still { display: block; width: 100%; border-radius: 14px; margin-bottom: 26px; border: 1px solid var(--line); }
body.rm .act-end { display: none; }
body.rm .loader { display: none; }

html.no-js .loader { display: none; }
html.no-js .cinema-track { height: auto; }
html.no-js .cinema-stage { height: 100vh; }
html.no-js .act { position: relative; opacity: 1; max-width: var(--maxw); margin: 0 auto; padding: 70px var(--pad); left: auto; right: auto; top: auto; transform: none; }
html.no-js .act .act-still { display: block; margin-bottom: 20px; }
html.no-js #cinemaCanvas, html.no-js .hud, html.no-js .letterbox { display: none; }

/* ═══════════ Journey (about) page ═══════════ */
.journey-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(22px, 6vw, 90px) clamp(70px, 10vh, 120px);
  overflow: hidden;
  background: #08050D;
}
.journey-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.92) contrast(1.04);
}
.journey-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,5,13,.66) 0%, rgba(8,5,13,.28) 34%, rgba(8,5,13,.78) 66%, rgba(8,5,13,.97) 100%),
    radial-gradient(100% 70% at 22% 86%, rgba(8,5,13,.92), transparent 72%);
}
.journey-hero-copy .display,
.journey-hero-copy .lede,
.journey-hero-copy .eyebrow { text-shadow: 0 2px 24px rgba(8,5,13,.85); }
.journey-hero-copy { position: relative; max-width: 880px; }
.journey-hero-copy .lede { max-width: 640px; }
.journey-page .journey-hero .display { color: #F4EFE6; }
.journey-page .journey-hero .lede { color: rgba(244,239,230,.82); }
.journey-scroll-cue {
  position: absolute; right: clamp(22px, 6vw, 90px); bottom: 26px;
  font-size: 11px; letter-spacing: .3em; color: rgba(244,239,230,.55);
}
.journey-stats { padding-top: clamp(46px, 7vh, 90px); padding-bottom: 0; }
/* five equal hairline cells - the flex+big-gap variant let the .stats tinted
   background pour through the gaps and orphaned the 5th cell on its own row */
.journey-stats-row { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .journey-stats-row { grid-template-columns: 1fr; } }

.journey { display: flex; flex-direction: column; gap: clamp(90px, 14vh, 170px); }
.jchapter {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
.jchapter.jflip { grid-template-columns: 1fr 1.1fr; }
.jchapter.jflip .jmedia { order: 2; }
.jchapter.jflip .jcopy { order: 1; }
.jmedia {
  border-radius: 18px; overflow: hidden;
  background: #08050D;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.55);
}
.jmedia img, .jmedia video { display: block; width: 100%; height: auto; }
.jdate { color: var(--gold); letter-spacing: .28em; font-size: 12.5px; margin-bottom: 14px; }
.jcopy .display { margin-bottom: 18px; }
.jcopy p:not(.jdate) { font-size: 17.5px; line-height: 1.75; max-width: 54ch; color: var(--ink-soft, inherit); }

.journey-road { text-align: left; }
.road-strip {
  margin-top: 34px;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 360px);
  gap: 14px; overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x mandatory;
}
.road-strip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; scroll-snap-align: start;
}

.journey-film-frame { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.55); }
.journey-film-frame video { display: block; width: 100%; height: auto; }

.founders-photos { align-items: start; }
.founder-photo {
  margin: 0 0 18px;
  border-radius: 16px; overflow: hidden;
  background: #08050D;
}
.founder-photo img { display: block; width: 100%; height: auto; }

.journey-cta { text-align: center; padding-bottom: clamp(90px, 14vh, 160px); }
.journey-cta .lede { margin-left: auto; margin-right: auto; }
.journey-cta .partner-actions { justify-content: center; }

@media (max-width: 880px) {
  .jchapter, .jchapter.jflip { grid-template-columns: 1fr; }
  .jchapter.jflip .jmedia { order: 0; }
  .jchapter.jflip .jcopy { order: 1; }
  .journey { gap: 70px; }
}
/* founders headline separation inside #story */
.founders-eyebrow { margin-top: clamp(70px, 10vh, 110px); }
/* film CTA inside the Act V closer - clickability gated by the engine */
.act-end .act-actions { margin-top: 30px; pointer-events: none; display: flex; justify-content: center; }

/* ═══════════ Contact + legal pages ═══════════ */
.legal-date { color: var(--gold); letter-spacing: 0.2em; margin-top: 18px; }
.legal-body { max-width: 740px; margin-top: 46px; }
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 580;
  font-size: 26px;
  color: var(--bone);
  margin: 42px 0 12px;
}
.legal-body p, .legal-body ul { margin: 0 0 16px; font-size: 16.5px; line-height: 1.75; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--bone); font-weight: 600; }

.contact-grid-wrap { padding-top: 0; }
.contact-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}
.contact-form label { display: block; margin-bottom: 20px; }
.contact-form label .mono { display: block; color: var(--gold); font-size: 11px; letter-spacing: 0.2em; margin-bottom: 9px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  background: var(--chamber);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px;
  color: var(--bone);
  font: inherit;
  transition: border-color 0.25s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--cadara); }
.contact-form button { margin-top: 6px; }
.contact-note { margin-top: 16px; color: var(--gold); font-size: 10.5px; letter-spacing: 0.18em; }
.contact-card { border-top: 1px solid var(--line); padding-top: 24px; margin-bottom: 34px; }
.contact-card h3 {
  font-family: var(--font-display);
  font-weight: 580;
  font-size: 21px;
  color: var(--bone);
  margin: 10px 0 10px;
}
.contact-card h3 a { color: var(--lilac); }
.contact-card h3 a:hover { color: var(--bone); }
.contact-card p { font-size: 15px; line-height: 1.65; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ═══════════ CART (nav button + drawer) ═══════════ */

.nav-cart {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--lilac);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s, border-color 0.25s;
}
.nav-cart:hover { color: var(--bone); border-color: var(--cadara); }
.nav-cart[hidden] { display: none; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--cadara);
  color: var(--btn-ink);
  font-size: 10px;
  font-weight: 500;
}

.cart-scrim[hidden], .cart-drawer[hidden] { display: none; }
.cart-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 3, 8, 0.62);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
html.cart-open .cart-scrim { opacity: 1; }

.cart-drawer {
  position: fixed; z-index: 121;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--menu-bg);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.cart-open .cart-drawer { transform: translateX(0); }
.cart-drawer.is-busy { opacity: 0.6; pointer-events: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad) 20px;
  border-bottom: 1px solid var(--line);
}
.cart-head .eyebrow { margin: 0; }
.cart-close {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--lilac);
  padding: 8px 4px;
  transition: color 0.25s;
}
.cart-close:hover { color: var(--bone); }

.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.cart-line {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 16px;
  padding: 22px var(--pad);
  border-bottom: 1px solid var(--line);
}
.cart-thumb {
  width: 66px; height: 66px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ghost-bg);
  border: 1px solid var(--line);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb-blank { width: 100%; height: 100%; }

.cart-line-title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 16px;
  color: var(--bone);
  margin: 0 0 3px;
  line-height: 1.25;
}
.cart-line-variant {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.cart-qty-btn {
  width: 26px; height: 26px;
  border-radius: 999px;
  color: var(--lilac);
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.cart-qty-btn:hover { background: rgba(141, 91, 255, 0.16); color: var(--bone); }
.cart-qty-n {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--bone);
}

.cart-line-end { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.cart-line-price { font-size: 13px; color: var(--bone); margin: 0; }
.cart-remove {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text);
  transition: color 0.25s;
}
.cart-remove:hover { color: var(--flesh); }

.cart-empty {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.cart-empty[hidden] { display: none; }

.cart-foot {
  padding: 22px var(--pad) 26px;
  border-top: 1px solid var(--line);
}
.cart-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cart-subtotal span:first-child { font-size: 10.5px; letter-spacing: 0.18em; color: var(--text); }
.cart-subtotal-n { font-size: 20px; color: var(--bone); }
.cart-note {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.6;
}
.cart-checkout { width: 100%; justify-content: center; }
.cart-checkout[hidden] { display: none; }
.cart-secure {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-align: center;
  margin: 14px 0 0;
}

.btn.is-busy { opacity: 0.7; cursor: wait; }

@media (max-width: 900px) {
  .nav-cart { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .cart-scrim { transition: none; }
}

/* ───── cart: discount code ───── */

.cart-promo { display: flex; gap: 8px; margin-bottom: 10px; }
.cart-promo-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--bone);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.25s;
}
.cart-promo-input::placeholder { color: var(--text); opacity: 0.7; letter-spacing: 0.16em; }
.cart-promo-input:focus { outline: none; border-color: var(--cadara); }
.cart-promo-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--lilac);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.cart-promo-btn:hover { color: var(--bone); border-color: var(--cadara); background: rgba(141, 91, 255, 0.12); }

.cart-promo-msg {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--text);
}
.cart-promo-msg[hidden] { display: none; }
.cart-promo-msg.is-ok { color: var(--gold); }
.cart-promo-msg.is-err { color: var(--flesh); }

.cart-codes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cart-codes:empty { display: none; }
.cart-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cadara);
  background: rgba(141, 91, 255, 0.14);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--bone);
}
.cart-code-x {
  width: 16px; height: 16px;
  border-radius: 999px;
  color: var(--lilac);
  font-size: 13px;
  line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.cart-code-x:hover { color: var(--bone); background: rgba(141, 91, 255, 0.3); }

.cart-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 7px;
}
.cart-row[hidden] { display: none; }
.cart-row-disc { color: var(--gold); }

/* ───── nav: account link ───── */

.nav-account {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-size: 10.5px;
  color: var(--lilac);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.nav-account:hover { color: var(--bone); border-color: var(--cadara); }

@media (max-width: 900px) { .nav-account { padding: 9px 12px; } }
@media (max-width: 560px) { .nav-account { display: none; } }

/* ───── nav fit: the 9-link row + right-hand controls need ~1280px ─────
   Pre-existing overflow (the link row alone is ~712px at gap 30) that the
   ACCOUNT + CART controls made worse. Tighten the gap first, then collapse
   to the burger well before 900px - but ONLY on pages that have a burger.
   contact/privacy run a short 4-link nav with no menu to fall back to. */
@media (max-width: 1300px) { .nav-links { gap: 16px; } }

/* ───── hero title: per-word masks for the beat-locked choreography ─────
   Default state is VISIBLE and untransformed on purpose: if JS never runs,
   the video never autoplays, or reduced motion is on, the headline simply
   reads normally. Only kineticHero() ever moves these.
   Outer .hw carries the throw (x/y/rotate) and is NOT clipped by itself;
   inner .hw-in slides within the mask for the reveal and the clear-out. */
.hero-title .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* breathing room so descenders and the italic MIS overhang never clip */
  padding: 0.10em 0.07em 0.16em;
  margin: -0.10em -0.07em -0.16em;
  will-change: transform;
}
.hero-title .hw-in { display: inline-block; will-change: transform; }

/* ───── creed: layered echo treatment for JUST REPS. ─────
   Ghost copies are JS-driven (scrub splits them apart + velocity skew);
   they default to opacity 0 so reduced-motion / no-JS reads a clean
   single headline. Max size trimmed 250 → 210. */
.kin-big { position: relative; font-size: clamp(72px, 14vw, 210px); }
.kb-main { position: relative; z-index: 1; display: inline-block; will-change: transform; }
.kb-ghost {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--cadara) 60%, transparent);
  will-change: transform;
}
.kb-ghost em { color: transparent; }

/* one global menu across all pages; mark where you are */
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-menu a[aria-current="page"] { color: var(--cadara); font-style: italic; }

/* ═══════════ TRUST STRIP (logo social proof) ═══════════ */
.trust { padding-top: clamp(44px, 7vh, 80px); padding-bottom: 0; text-align: center; }
.trust-label { color: var(--gold); letter-spacing: 0.24em; font-size: 10.5px; }
.trust-strip {
  margin-top: 26px;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.trust-tile {
  /* flex, not grid: a grid's auto row track sizes to the raw image and the
     1280px Medline square blew straight out of the chip */
  display: flex; align-items: center; justify-content: center;
  width: clamp(150px, 17vw, 212px);
  height: clamp(64px, 7vw, 90px);
  padding: 10px 22px;
  background: #FFFFFF; /* logos keep their brand colors on a white chip, both themes */
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden; /* nothing escapes the chip, ever */
  opacity: 0.94;
  filter: saturate(0.92);
  transition: opacity 0.25s, filter 0.25s, transform 0.25s;
}
.trust-tile:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.trust-tile img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  .trust-strip { gap: 10px; }
  .trust-tile { width: calc(50% - 5px); height: 64px; }
}

/* creed payoff line under MASTER MIS. */
.kin-sub {
  margin-top: 4vh;
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  line-height: 2;
  max-width: 90vw;
  margin-left: auto; margin-right: auto;
}

/* ───── phone nav fit ─────
   With the cart button present, wordmark + LIGHT + CART + ORDER + MENU
   needed ~530px and the burger was pushed clean off a 375px screen
   (overflow-x hidden clipped it). Tighten everything; the theme toggle
   yields - it's the only non-essential control at this width. */
@media (max-width: 600px) {
  .nav { padding: 0 14px; gap: 10px; }
  .wordmark { font-size: 17px; }
  .nav-right { gap: 7px; }
  .nav-cart { padding: 8px 10px; }
  .cart-count { min-width: 16px; height: 16px; font-size: 9px; }
  .nav-cta { padding: 9px 13px; font-size: 11px; }
  .nav-burger { padding: 8px 4px; }
}

/* Below 400px the row cannot hold BOTH the cart chip and a long CTA pill
   (partner's BOOK A CALL makes the row ~390px; Order fits). When the cart
   chip is showing, the pill yields: the same CTA lives in the MENU overlay
   and mid-purchase the cart is the control that matters. */
@media (max-width: 400px) {
  .nav-cart:not([hidden]) ~ .nav-cta { display: none; }
}


/* ───── menu overlay: secondary controls group ───── */
.nav-menu { flex-direction: column; gap: 30px; }
.menu-aux {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  min-width: min(320px, 74vw);
}
.menu-aux a {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding: 4px 10px;
  transition: color 0.25s;
}
.menu-aux a:hover { color: var(--bone); }
.menu-theme {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
  font-size: 11px; letter-spacing: 0.2em;
  margin-top: 4px;
}