/* ==========================================================
   SIMLIPAL MEDIA — Stylesheet (Cream Edition)
   Desert at Golden Hour palette · V2 craftsmanship
   ========================================================== */

/* ==========================================================
   SKIP LINK (accessibility)
   ========================================================== */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 6px 6px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}


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

:root {
  /* ────────────────────────────────────────────────────────────
     PALETTE — sampled directly from the 6 cinematic videos via
     k-means clustering. The dominant story is warm honey-amber
     with rich tawny earth and saturated iris-glow gold. Cool
     lavender-cloud is a secondary accent (sky / brand iris).
     ──────────────────────────────────────────────────────────── */

  /* ── Honey cream (backgrounds — warmer & deeper than v2) ── */
  --cream:        #EBD4A2;     /* main bg — warm honey cream (matches sun-bleached highlights in videos) */
  --cream-soft:   #F2DFB4;     /* lifted highlight surface */
  --cream-warm:   #E0BC7C;     /* warmer card surface */
  --dune:         #D5A45C;     /* secondary section bg — deeper amber */
  --dune-deep:    #B88840;     /* deepest dune — for cards-on-cream */
  --sand:         #E8CC8E;     /* between cream and dune */

  /* ── Tawny earth (lion fur, mountain stone) ───────────────── */
  --tawny:        #B48746;     /* matches dominant lion-fur tone from k-means extraction */
  --tawny-soft:   #C9A063;
  --sienna:       #935A23;     /* burnt earth */

  /* ── Gold (saturated to match the iris-glow at climax) ───── */
  --gold:         #D9A22C;     /* royal honey gold — primary accent (was muted #B8860B) */
  --gold-soft:    #E5BA63;     /* mane bright (the iconic gold from videos) */
  --gold-warm:    #E28C1B;     /* iris amber — hottest accent, matches the eye glow */
  --gold-pale:    #F0CB7A;
  --gold-rgb:     217,162,44;

  /* ── Cloud (NEW — secondary cool accent from the sky/clouds) */
  --cloud:        #C9CBDA;     /* soft cloud lavender */
  --cloud-deep:   #6E6F8A;     /* dusk shadow */

  /* ── Ink / Text (warm dark — slightly warmer than v2) ───── */
  --ink:          #1F1108;     /* near-black, warm-leaning */
  --mane:         #3A2316;     /* mane brown — lifted slightly for visibility */
  --charcoal:     #4A2F1A;     /* mane shadow */
  --ink-90:       rgba(31,17,8,0.92);
  --ink-80:       rgba(31,17,8,0.82);
  --ink-70:       rgba(31,17,8,0.72);
  --ink-65:       rgba(31,17,8,0.65);
  --ink-60:       rgba(31,17,8,0.60);
  --ink-55:       rgba(31,17,8,0.55);
  --ink-50:       rgba(31,17,8,0.50);
  --ink-45:       rgba(31,17,8,0.45);
  --ink-40:       rgba(31,17,8,0.40);
  --ink-30:       rgba(31,17,8,0.30);
  --ink-15:       rgba(31,17,8,0.14);

  /* ── Surface aliases ───────────────────────────────── */
  --paper:        #F2DFB4;     /* card surfaces — same as --cream-soft */
  --bg:           #EBD4A2;     /* alias for --cream — used inside initials etc. */

  --line:         rgba(31,17,8,0.10);
  --line-2:       rgba(31,17,8,0.18);
  --line-gold:    rgba(217,162,44,0.32);

  /* ── Typography stack (unchanged) ─────────────────────── */
  --display:    'Bricolage Grotesque', system-ui, sans-serif;
  --editorial:  'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --body:       'Geist', system-ui, sans-serif;
  --serif:      'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  /* ── Motion (unchanged) ───────────────────────────────── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
}

html { scroll-behavior: auto; }

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

body {
  background: var(--cream);
  color: var(--ink-90);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* default cursor stays — JS sets cursor:none ONLY after custom cursor is up */
}
body.cursor-ready { cursor: none; }
body.cursor-ready button { cursor: none; }

@media (max-width: 900px) {
  body.cursor-ready { cursor: auto; }
  body.cursor-ready button { cursor: pointer; }
}

::selection { background: var(--gold); color: var(--cream); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }

/* ── Film grain (subtle, on cream) ─────────────── */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Atmospheric warmth gradient ───────────────── */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% -5%,  rgba(217,162,44,0.10), transparent 60%),
    radial-gradient(ellipse 55% 70% at -5% 100%, rgba(180,135,70,0.10), transparent 60%);
}

main, nav, footer, section { position: relative; z-index: 2; }


/* ==========================================================
   CUSTOM CURSOR
   ========================================================== */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--gold);
  transition: opacity 0.2s, transform 0.12s var(--ease);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  background: rgba(var(--gold-rgb), 0.04);
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
              border-color 0.22s, background 0.22s;
}
.cursor-ring.hover {
  width: 60px; height: 60px;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.10);
}
.cursor-ring.text {
  width: 78px; height: 78px;
  background: var(--gold);
  border-color: transparent;
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}


/* ==========================================================
   PAGE LOADER
   ========================================================== */
#page-loader {
  position: fixed; inset: 0;
  background: var(--cream);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
#page-loader.done {
  opacity: 0;
  visibility: hidden;
}
.loader-line {
  width: 240px; height: 1.5px;
  background: rgba(var(--gold-rgb), 0.18);
  position: relative; overflow: hidden;
}
.loader-line::after {
  content: "";
  position: absolute;
  left: -100%; top: 0; bottom: 0; width: 100%;
  background: var(--gold);
  animation: loaderSlide 1.1s var(--ease-out) 0.15s forwards;
}
@keyframes loaderSlide {
  to { left: 100%; }
}


/* ==========================================================
   SCROLL PROGRESS
   ========================================================== */
#scroll-bar {
  position: fixed; top: 0; left: 0;
  height: 1.5px; width: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
}


/* ==========================================================
   NAV
   ========================================================== */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 4vw;
  transition: padding 0.4s var(--ease), background 0.4s, backdrop-filter 0.4s;
}
#nav.scrolled {
  padding: 0.95rem 4vw;
  background: rgba(235,212,162,0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line-gold);
}

.nav-brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.nav-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: #F2DFB4;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.nav-mark img,
.nav-mark svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.nav-brand:hover .nav-mark {
  transform: rotate(-3deg) scale(1.05);
  border-color: rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 4px 14px rgba(217,162,44,0.18);
}

.nav-brand-text {
  font-family: var(--editorial);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.nav-brand-text b {
  font-family: var(--editorial);
  font-weight: 400;
}
.nav-brand-text span { color: var(--sienna); }

.nav-links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
}
.nav-links li { list-style: none; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-70);
  position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.3rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.3s, transform 0.3s var(--ease), color 0.3s;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 210;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: all 0.3s;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#mobile-nav {
  position: fixed; inset: 0;
  background: rgba(235,212,162,0.97);
  backdrop-filter: blur(20px);
  z-index: 190;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s;
}
#mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav-links {
  list-style: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.6rem;
}
.mobile-nav-links a {
  font-family: var(--editorial);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
  transition: color 0.3s;
}
.mobile-nav-links a:hover { color: var(--gold); }


/* ==========================================================
   CHAPTER DOTS
   ========================================================== */
#chapter-dots {
  position: fixed;
  right: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex; flex-direction: column;
  gap: 14px;
}
.c-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(31,17,8,0.18);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
  position: relative;
}
.c-dot::before {
  content: attr(title);
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-70);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s;
  pointer-events: none;
}
.c-dot:hover::before { opacity: 1; }
.c-dot:hover { background: var(--gold); transform: scale(1.4); }
.c-dot.active {
  background: var(--gold);
  transform: scale(1.6);
}


/* ==========================================================
   JOURNEY (sticky-stage, 8 chapters: hero · orbit · roar · face · L-eye · reverse · R-eye · the-end)
   960vh = 8 × 120vh per chapter (preserves the v3 scroll-distance-per-chapter)
   ========================================================== */
#journey {
  height: 840vh;
  position: relative;
}

#sticky-stage {
  position: sticky;
  top: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  background: var(--cream);
}

.v-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: none;
  will-change: opacity;
  transform: translateZ(0);     /* force own compositing layer — prevents repaint flicker */
  backface-visibility: hidden;
}
.v-layer video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);     /* GPU layer for the video itself */
  backface-visibility: hidden;
  /* Hint to renderer that this surface gets re-painted on every frame */
  will-change: transform;
}

/* Subtle warm wash over every video to keep the cream-tone palette */
.v-layer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(235,212,162,0.10) 0%, transparent 30%, transparent 70%, rgba(31,17,8,0.35) 100%),
    radial-gradient(ellipse at center, transparent 50%, rgba(31,17,8,0.18) 100%);
}

/* ── Chapter overlays (text on video) ─────────── */
.ch-overlay {
  position: absolute;
  left: 7vw; bottom: 14vh;
  max-width: 760px;
  z-index: 5;
  opacity: 0;
  color: var(--cream);
}
.ch-overlay.center {
  left: 50%; bottom: auto; top: 22vh;
  transform: translateX(-50%);
  text-align: center;
  max-width: 90vw;
}
.ch-overlay.right {
  left: auto; right: 7vw;
  text-align: right;
}

.ch-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 1.2rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.ch-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold-warm);
  display: inline-block;
}

.ch-h1 {
  font-family: var(--display);
  font-size: clamp(2.8rem, 7.2vw, 6.4rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.45);
}
.ch-h1 em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-warm);
}
.ch-h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.ch-h2 em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-warm);
}

.ch-body {
  font-family: var(--body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(235,212,162,0.92);
  margin-top: 1.5rem;
  max-width: 540px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}

/* ══════════════════════════════════════════════════════════
   THE END — wordmark reveal (chapter 7)
   The closing frame. The lion's eye holds the world's reflection.
   The wordmark fades up letter-by-letter, timed to peak reflection.
   ══════════════════════════════════════════════════════════ */
.end-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  padding: 0 5vw;
}
.end-mark__eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 2.5rem;
  display: flex; align-items: center; gap: 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.end-mark__eyebrow::before,
.end-mark__eyebrow::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold-warm);
  display: inline-block;
}
.end-mark__display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.6rem, 11vw, 9rem);
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--cream);
  text-shadow: 0 6px 50px rgba(0,0,0,0.75);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.16em;
}
.end-mark__display .em-italic {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-warm);
  margin-left: 0.04em;
}
/* Each letter is a span — drives the staggered reveal */
.end-mark__letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) scale(0.94);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.9s var(--ease-out);
}
.end-mark.revealed .end-mark__letter {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger via CSS variable set on each span — handled by JS */
.end-mark__rule {
  width: 0;
  height: 1px;
  background: var(--gold-warm);
  margin: 2rem 0 1.4rem;
  transition: width 1.2s var(--ease-out) 0.3s;
  opacity: 0.7;
}
.end-mark.revealed .end-mark__rule {
  width: clamp(120px, 18vw, 220px);
}
.end-mark__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.55rem);
  font-weight: 400;
  color: rgba(235,212,162,0.88);
  letter-spacing: 0.005em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.9s var(--ease-out) 0.6s,
    transform 0.9s var(--ease-out) 0.6s;
  max-width: 32ch;
}
.end-mark.revealed .end-mark__tagline {
  opacity: 1;
  transform: translateY(0);
}

/* End-mark CTA buttons */
.end-mark__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(1.2em);
  transition:
    opacity 0.9s var(--ease-out) 0.85s,
    transform 0.9s var(--ease-out) 0.85s;
  pointer-events: none;
}
.end-mark.revealed .end-mark__buttons {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.end-mark__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.end-mark__btn--primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(217,162,44,0.35);
}
.end-mark__btn--primary:hover {
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(217,162,44,0.5);
}
.end-mark__btn--secondary {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(235,212,162,0.38);
}
.end-mark__btn--secondary:hover {
  border-color: var(--gold-warm);
  color: var(--gold-warm);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   CHAPTER INDICATOR — discreet "X of 8 · Roar" top-right
   Anchors the user in cinematic time without being intrusive
   ══════════════════════════════════════════════════════════ */
.chapter-indicator {
  position: fixed;
  top: 1.6rem;
  right: 6.5rem;            /* leave room for chapter dots on the right */
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.chapter-indicator.visible { opacity: 1; }
.chapter-indicator__num {
  color: var(--gold);
  font-weight: 500;
}
.chapter-indicator__sep {
  width: 14px; height: 1px;
  background: var(--ink-30);
  display: block;
}
.chapter-indicator__label {
  color: var(--ink-70);
  font-weight: 500;
  transition: opacity 0.3s var(--ease);
}
/* On dark cinematic background (chapters are over video) the indicator
   needs cream tones, not ink. Add a bg-aware variant: */
.chapter-indicator.on-dark .chapter-indicator__sep { background: rgba(235,212,162,0.35); }
.chapter-indicator.on-dark .chapter-indicator__label { color: rgba(235,212,162,0.78); }
.chapter-indicator.on-dark .chapter-indicator__num { color: var(--gold-warm); }

@media (max-width: 720px) {
  .chapter-indicator { right: 3.5rem; font-size: 0.6rem; letter-spacing: 0.18em; }
  .chapter-indicator__sep { width: 8px; }
}

/* ── Eye labels (chapter 2) ────────────────────── */
#eye-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}
.eye-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-warm);
  display: flex; align-items: center; gap: 0.7rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.eye-label--left {
  left: 24%;
  top: 42%;
}
.eye-label--right {
  right: 24%;
  top: 42%;
  flex-direction: row-reverse;
}
.eye-label-line {
  width: 56px; height: 1px;
  background: var(--gold-warm);
}

/* ── Scroll hint ───────────────────────────────── */
#scroll-hint {
  position: absolute;
  bottom: 3.4vh; left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(235,212,162,0.78);
  pointer-events: none;
}
.sh-line {
  width: 1px; height: 36px;
  background: rgba(235,212,162,0.55);
  animation: scrollLine 1.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0);   transform-origin: top; }
  50%  { transform: scaleY(1);   transform-origin: top; }
  51%  { transform: scaleY(1);   transform-origin: bottom; }
  100% { transform: scaleY(0);   transform-origin: bottom; }
}


/* ==========================================================
   IRIS WORLDS (the world inside the eye)
   ========================================================== */
.iris-world {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.iris-world.open { pointer-events: auto; }

/* The iris-shaped portal (a circular SVG that grows from center) */
.iris-portal {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Will be sized by JS to viewport's larger dim */
}
.iris-svg {
  width: 100%; height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The iris content block (sits inside the iris circle) */
.iris-content {
  position: relative;
  z-index: 10;
  width: min(72vh, 640px);
  height: min(72vh, 640px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 4vh;
  pointer-events: auto;
}

.iris-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(235,212,162,0.85);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
}
.iris-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.2rem;
  max-width: 16ch;
}
.iris-title em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--mane);
}

/* Floating cards inside the iris */
.iris-orbit {
  position: absolute; inset: 0;
  pointer-events: none;
}
.orbit-card {
  position: absolute;
  background: rgba(235,212,162,0.94);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 14px;
  padding: 0.7rem 1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  box-shadow: 0 12px 30px -8px rgba(31,17,8,0.18);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 130px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.orbit-card .oc-handle {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--mane);
  text-transform: none;
}
.orbit-card .oc-meta {
  display: flex; gap: 0.6rem;
  color: var(--ink-70);
  font-size: 0.64rem;
}
.orbit-card .oc-meta b { color: var(--sienna); font-weight: 600; }

/* Orbit positions */
.orbit-card.oc-1 { top: 6%;  left: 6%;  transform: rotate(-6deg); }
.orbit-card.oc-2 { top: 12%; right: 8%; transform: rotate(5deg); }
.orbit-card.oc-3 { top: 50%; left: 0%;  transform: translateY(-50%) rotate(-3deg); }
.orbit-card.oc-4 { top: 50%; right: 0%; transform: translateY(-50%) rotate(4deg); }
.orbit-card.oc-5 { bottom: 14%; left: 8%;  transform: rotate(4deg); }
.orbit-card.oc-6 { bottom: 8%;  right: 6%; transform: rotate(-5deg); }

/* Brand world: logo chips */
.brand-chip {
  position: absolute;
  background: rgba(31,17,8,0.92);
  color: var(--cream);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  pointer-events: auto;
  white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(31,17,8,0.4);
}
.brand-chip.bc-1 { top: 8%;  left: 14%; transform: rotate(-8deg); }
.brand-chip.bc-2 { top: 6%;  right: 12%; transform: rotate(6deg); }
.brand-chip.bc-3 { top: 30%; left: -2%; transform: rotate(-3deg); }
.brand-chip.bc-4 { top: 32%; right: -2%; transform: rotate(3deg); }
.brand-chip.bc-5 { bottom: 28%; left: 4%; transform: rotate(5deg); }
.brand-chip.bc-6 { bottom: 26%; right: 4%; transform: rotate(-5deg); }
.brand-chip.bc-7 { bottom: 8%;  left: 22%; transform: rotate(-4deg); }
.brand-chip.bc-8 { bottom: 6%;  right: 20%; transform: rotate(4deg); }

.iris-cta {
  margin-top: 1.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.3s, transform 0.3s, color 0.3s;
  pointer-events: auto;
}
.iris-cta:hover { background: var(--gold); color: var(--ink); transform: translateY(-1px); }

.iris-cta .arrow { transition: transform 0.3s; }
.iris-cta:hover .arrow { transform: translateX(3px); }


/* ==========================================================
   GENERAL SECTIONS (post-journey)
   ========================================================== */
section.s-block {
  padding: clamp(5rem, 11vh, 9rem) 7vw;
  position: relative;
}

.section-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-bottom: 2rem;
}
.section-label .num {
  color: var(--sienna);
}
.section-label::after {
  content: "";
  width: 60px; height: 1px;
  background: var(--line-2);
}

.s-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 1.4rem;
}

.s-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.8rem;
  max-width: 22ch;
}
.s-title em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--mane);
}

.s-lede {
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 60ch;
  font-weight: 400;
}


/* ==========================================================
   BRAND REVEAL (post-journey)
   ========================================================== */
#brand-reveal {
  padding: 14vh 7vw 12vh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#brand-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(var(--gold-rgb), 0.08), transparent 70%);
  pointer-events: none;
}
.br-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 2.4rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.br-eyebrow::before, .br-eyebrow::after {
  content: "";
  width: 40px; height: 1px;
  background: var(--ink-50);
}

.br-wordmark {
  width: min(720px, 85vw);
  margin: 0 auto 2rem;
  position: relative; z-index: 2;
  color: var(--ink);
}
.br-wordmark svg { width: 100%; height: auto; }
.br-tagline {
  font-family: var(--editorial);
  font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--mane);
  margin-top: 0.4rem;
  margin-bottom: 2.4rem;
}
.br-ctas {
  display: flex; gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
  cursor: inherit;
}
@media (max-width: 900px) { .btn { cursor: pointer; } }
.btn .arrow { transition: transform 0.3s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translate(3px, -3px); }

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--ink);
  color: var(--gold);
  transform: translateY(-1px);
}


/* ==========================================================
   MANIFESTO (01)
   ========================================================== */
#manifesto {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6vw;
  align-items: start;
  border-top: 1px solid var(--line-2);
  position: relative;
}
#manifesto::before {
  content: "“";
  position: absolute;
  top: 1rem; right: 7vw;
  font-family: var(--editorial);
  font-style: italic;
  font-size: 14rem;
  line-height: 0.6;
  color: rgba(var(--gold-rgb), 0.14);
  pointer-events: none;
}
.manifesto-meta {
  margin-top: 2.4rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-70);
  letter-spacing: 0.04em;
}
.manifesto-meta b { color: var(--ink); font-weight: 500; margin-right: 0.5rem; }
.manifesto-body {
  font-family: var(--body);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-70);
}
.manifesto-body p + p { margin-top: 1.2rem; }
.manifesto-body em {
  font-family: var(--editorial);
  font-style: italic;
  color: var(--mane);
  font-size: 1.1em;
}


/* ==========================================================
   STATS
   ========================================================== */
#stats {
  background: var(--dune);
  padding: clamp(4rem, 8vh, 7rem) 7vw;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-bg-text {
  position: absolute;
  bottom: -3vw;
  left: -2vw;
  font-family: var(--display);
  font-weight: 800;
  font-size: 28vw;
  line-height: 0.78;
  color: rgba(31,17,8,0.04);
  letter-spacing: -0.05em;
  pointer-events: none;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  position: relative; z-index: 2;
}
.stat-block {
  display: flex; flex-direction: column; gap: 0.6rem;
}
.stat-num {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex; align-items: baseline;
}
.stat-num .stat-suffix {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  color: var(--mane);
  margin-left: 0.18em;
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-90);
}
.stat-desc {
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-70);
  margin-top: 0.3rem;
}


/* ==========================================================
   MARQUEE / TICKER
   ========================================================== */
#ticker {
  background: var(--ink);
  color: var(--cream);
  padding: 1.4rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--mane);
  border-bottom: 1px solid var(--mane);
}
.ticker-track {
  display: flex; gap: 3rem;
  animation: tickerScroll 32s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 1.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.ticker-item em {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-warm);
}
.ticker-star {
  width: 18px; height: 18px;
  color: var(--gold);
}
@keyframes tickerScroll {
  to { transform: translateX(-50%); }
}


/* ==========================================================
   SERVICES (02)
   ========================================================== */
#services { border-top: 1px solid var(--line-2); }
.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
  margin-bottom: 4rem;
}
.services-tag {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 50ch;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.service {
  padding: 2.6rem 2rem;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  transition: background 0.4s var(--ease);
  position: relative;
  cursor: inherit;
}
@media (max-width: 900px) { .service { cursor: pointer; } }
.service:nth-child(3n) { border-right: none; }
.service:hover { background: var(--cream-soft); }

.service-icon {
  width: 36px; height: 36px;
  color: var(--tawny);
  margin-bottom: 1.6rem;
}
.service-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: inline-block;
  margin-bottom: 0.8rem;
}
.service-title {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.service-desc {
  font-family: var(--body);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-70);
  margin-bottom: 1.2rem;
}
.service-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sienna);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(147,90,35,0.35);
  border-radius: 999px;
  display: inline-block;
}


/* ==========================================================
   METHOD (03)
   ========================================================== */
#method {
  background: var(--cream-soft);
  border-top: 1px solid var(--line-2);
}
.method-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
  margin-bottom: 5rem;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.method-step {
  position: relative;
  padding-top: 2.6rem;
}
.method-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--line-2);
}
.method-step::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.method-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--sienna);
  margin-bottom: 0.8rem;
}
.method-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.method-desc {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-70);
}


/* ==========================================================
   SPLIT (04 — Numbers Behind The Deal)
   ========================================================== */
#split {
  border-top: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.split-side {
  padding: clamp(5rem, 10vh, 8rem) 5vw;
}
.split-side.left {
  border-right: 1px solid var(--line-2);
}
.split-side.right {
  background: var(--ink);
  color: var(--cream);
}
.split-side.right .section-label,
.split-side.right .s-title,
.split-side.right .s-lede {
  color: var(--cream);
}
.split-side.right .num,
.split-side.right .s-eyebrow { color: var(--gold-warm); }
.split-side.right .s-title em {
  color: var(--gold-warm);
}
.split-side.right .section-label::after {
  background: rgba(235,212,162,0.2);
}
.split-list {
  margin-top: 2rem;
  display: flex; flex-direction: column;
  gap: 0;
}
.split-item {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  gap: 1.5rem;
}
.split-side.right .split-item-label {
  color: rgba(235,212,162,0.88);
}
.split-side.right .split-item-val {
  color: var(--gold-soft);
}
.split-item-label {
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--ink-90);
}
.split-item-val {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--mane);
  white-space: nowrap;
}


/* ==========================================================
   WHY (05) — Our Edge
   ========================================================== */
#why { border-top: 1px solid var(--line-2); }
.why-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
  margin-bottom: 4rem;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.why-card {
  padding: 2.6rem 2rem;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.why-card:nth-child(3n) { border-right: none; }
.why-num {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;
  color: var(--tawny);
  line-height: 1;
  margin-bottom: 1rem;
}
.why-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.why-desc {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-70);
}


/* ==========================================================
   FOUNDER
   ========================================================== */
#founder {
  background: var(--cream-warm);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--line-2);
  padding: 0; /* override s-block — image goes full-bleed; padding lives on text column */
}

/* Padding lives here, not on the section, so the image can stretch edge-to-edge */
#founder > div:not(.founder-img) {
  padding: clamp(5rem, 11vh, 9rem) 7vw clamp(5rem, 11vh, 9rem) 6vw;
}
.founder-img {
  aspect-ratio: unset;        /* no fixed ratio — fills the grid row height */
  min-height: 560px;          /* floor on very wide screens */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--gold-rgb),0.18), transparent 60%),
    linear-gradient(135deg, var(--mane), var(--ink));
  border-radius: 0;           /* flush to section edges */
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 2rem;
  isolation: isolate;
}
.founder-img-letter {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 26rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.founder-img-caption {
  position: relative; z-index: 2;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--cream);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.f-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-bottom: 1rem;
}
.f-name {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.f-title {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--charcoal);
  margin: 0.7rem 0 1.6rem;
}
.f-quote {
  font-family: var(--editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 1.6rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--sienna);
}
.f-bio {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-70);
}
.f-bio p + p { margin-top: 1rem; }


/* ==========================================================
   FAQ (06)
   ========================================================== */
#faq { border-top: 1px solid var(--line-2); }
.faq-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: end;
  margin-bottom: 3rem;
}
.faq-list {
  border-top: 1px solid var(--line-2);
}
.faq-item {
  border-bottom: 1px solid var(--line-2);
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  cursor: inherit;
  gap: 1rem;
  text-align: left;
  width: 100%;
}
@media (max-width: 900px) { .faq-q { cursor: pointer; } }
.faq-q-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  position: relative;
  color: var(--tawny);
}
.faq-q-icon::before, .faq-q-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.faq-q-icon::before { width: 14px; height: 1.5px; }
.faq-q-icon::after  { width: 1.5px; height: 14px; }
.faq-item.open .faq-q-icon::after { transform: translate(-50%,-50%) scaleY(0); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner {
  padding: 0 0 1.8rem;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 70ch;
}


/* ==========================================================
   CTA / CONTACT
   ========================================================== */
#contact {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 11vh, 9rem) 7vw;
  border-top: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 80% 20%, rgba(var(--gold-rgb),0.14), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(180,135,70,0.12), transparent 60%);
  pointer-events: none;
}
.contact-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}
#contact .s-title { color: var(--cream); }
#contact .s-title em { color: var(--gold-warm); }
#contact .s-eyebrow { color: var(--gold); }
#contact .s-lede { color: rgba(235,212,162,0.7); }

.contact-meta {
  margin-top: 2.6rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.cm-row {
  display: flex; gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(235,212,162,0.12);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.cm-lbl {
  color: rgba(235,212,162,0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: 100px;
  flex-shrink: 0;
}
.cm-val { color: var(--cream); }

/* Form */
.form-toggle {
  display: inline-flex;
  background: rgba(235,212,162,0.06);
  border: 1px solid rgba(235,212,162,0.14);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 1.5rem;
}
.ftb {
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(235,212,162,0.6);
  transition: all 0.3s;
}
.ftb.active {
  background: var(--gold);
  color: var(--ink);
}

.c-form {
  display: flex; flex-direction: column;
  gap: 1.1rem;
}
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.f-field {
  display: flex; flex-direction: column;
  gap: 0.35rem;
}
.f-field label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235,212,162,0.5);
}
.f-field input,
.f-field select,
.f-field textarea {
  background: rgba(235,212,162,0.04);
  border: 1px solid rgba(235,212,162,0.18);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  color: var(--cream);
  font-family: var(--body);
  font-size: 0.96rem;
  transition: border-color 0.3s, background 0.3s;
}
.f-field textarea {
  min-height: 110px;
  resize: vertical;
}
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(235,212,162,0.08);
}
.f-field input::placeholder, .f-field textarea::placeholder {
  color: rgba(235,212,162,0.3);
}
.f-field select option {
  background: var(--ink);
  color: var(--cream);
}


/* ==========================================================
   FOOTER
   ========================================================== */
footer {
  background: var(--mane);
  color: var(--cream);
  padding: 5rem 7vw 2.4rem;
  position: relative;
}
.footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(235,212,162,0.12);
}
.footer-brand-mark {
  width: 72px; height: 72px;
  margin-bottom: 1.4rem;
  border-radius: 50%;
  overflow: hidden;
  background: #F2DFB4;
  border: 1px solid rgba(235,212,162,0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.footer-brand-mark img,
.footer-brand-mark svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.footer-brand {
  font-family: var(--editorial);
  font-size: 1.7rem;
  font-style: normal;
}
.footer-brand span { color: var(--gold); font-style: italic; }
.footer-tag {
  font-family: var(--editorial);
  font-style: italic;
  font-size: 1rem;
  color: rgba(235,212,162,0.6);
  margin-top: 0.6rem;
}
.footer-nav-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235,212,162,0.5);
  margin-bottom: 1.2rem;
}
.footer-nav-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 0.7rem;
}
.footer-nav-list li { list-style: none; }
.footer-nav-list a {
  font-family: var(--body);
  font-size: 0.95rem;
  color: rgba(235,212,162,0.85);
  transition: color 0.3s;
}
.footer-nav-list a:hover { color: var(--gold); }

.footer-mega {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(235,212,162,0.06);
  text-align: center;
  margin: 2rem 0;
  user-select: none;
}
.footer-bottom {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(235,212,162,0.5);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-credit {
  color: rgba(235,212,162,0.5);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.footer-credit span {
  color: var(--gold);
  font-style: italic;
  font-family: var(--editorial);
  font-size: 0.82rem;
}


/* ==========================================================
   REVEALS / ANIMATIONS
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(3n) { border-right: 1px solid var(--line-2); }
  .service:nth-child(2n) { border-right: none; }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-card:nth-child(3n) { border-right: 1px solid var(--line-2); }
  .why-card:nth-child(2n) { border-right: none; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .ch-overlay { left: 5vw; right: 5vw; }
  .ch-overlay.right { left: 5vw; right: 5vw; text-align: left; }

  #manifesto { grid-template-columns: 1fr; }
  .services-header,
  .method-header,
  .why-header,
  .faq-header { grid-template-columns: 1fr; }

  #split { grid-template-columns: 1fr; }
  .split-side.left { border-right: none; border-bottom: 1px solid var(--line-2); }

  #founder { grid-template-columns: 1fr; padding: 0; }
  .founder-img {
    aspect-ratio: 4/5;
    min-height: auto;
    border-radius: 0;  /* still flush on mobile — looks clean */
  }
  #founder > div:not(.founder-img) {
    padding: 3rem 5vw 4rem;
  }
  .founder-img-letter { font-size: 18rem; }

  .contact-inner { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

  #chapter-dots { right: 1rem; }
  .c-dot::before { display: none; }

  /* Iris worlds: simplify card positions on mobile */
  .iris-content { width: 90vw; height: 90vw; padding: 8vw; }
  .orbit-card, .brand-chip { transform: none !important; }
  .orbit-card { font-size: 0.6rem; padding: 0.5rem 0.7rem; min-width: 100px; }
  .orbit-card.oc-1, .orbit-card.oc-2 { top: 4%; }
  .orbit-card.oc-3, .orbit-card.oc-4 { top: 46%; }
  .orbit-card.oc-5, .orbit-card.oc-6 { bottom: 6%; }
  .brand-chip { font-size: 0.7rem; padding: 0.4rem 0.8rem; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service { border-right: none !important; }
  .method-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card { border-right: none !important; }
  .footer-top { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
}

/* ==========================================================
   MOBILE OPTIMIZATION — focused fixes for phones (≤ 640px)
   Layered on top of existing media queries; targets only
   real-world mobile pain points.
   ========================================================== */

/* Reduce iOS tap-flash on every interactive element */
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Use dynamic viewport units when supported so the sticky stage
   doesn't get cropped by iOS Safari's collapsing URL bar.
   Falls back to 100vh on older browsers automatically. */
@supports (height: 100dvh) {
  #sticky-stage { height: 100dvh; }
}

/* ── Tablet & below ─────────────────────────────── */
@media (max-width: 900px) {
  /* The decorative giant quote behind the manifesto is 14rem on
     desktop — that's 224px and overflows narrow viewports. */
  #manifesto::before {
    font-size: 7rem;
    right: 5vw;
  }

  /* Default browsers zoom on input focus when font-size < 16px.
     Bump to 16px on touch viewports to suppress the auto-zoom. */
  .f-field input,
  .f-field select,
  .f-field textarea {
    font-size: 16px;
  }

  /* Make sure the nav-toggle is a comfortable tap target (44×44 min). */
  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* Section dots overlay scroll content less aggressively on mobile */
  #chapter-dots {
    right: 0.6rem;
    gap: 0.6rem;
  }
  #chapter-indicator {
    font-size: 0.62rem;
  }

  /* The huge italic "S" behind the founder photo overflows on tablet */
  .founder-img-letter { font-size: 14rem; }
}

/* ── Phones (≤ 640px) ───────────────────────────── */
@media (max-width: 640px) {
  /* Hero & chapter headlines: tighten the clamp floor so they
     don't push past the viewport on small phones. The existing
     desktop max stays in the desktop range; we just shrink the floor. */
  .ch-h1 {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
    line-height: 1.0;
  }
  .ch-h2 {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem);
    line-height: 1.05;
  }
  /* The hero h1 has hard <br> tags meant for desktop; let them
     collapse on phones so wrapping happens naturally. */
  .ch-h1 br { display: none; }
  .ch-overlay { bottom: 10vh; left: 6vw; right: 6vw; }
  .ch-overlay.center { top: 16vh; }

  /* Manifesto + section heads (all use .s-title) */
  .s-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .iris-title { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }

  /* Smaller decorative quote behind manifesto */
  #manifesto::before { font-size: 5rem; top: 0.5rem; right: 4vw; }

  /* Footer mega type — its clamp floor of 5rem (80px) is fine,
     but reduce for very narrow viewports */
  .footer-mega { font-size: clamp(3.2rem, 18vw, 8rem); }

  /* Founder mega-letter clamp — 14rem still big on small phones */
  .founder-img-letter { font-size: 9rem; }

  /* Tighten section vertical breathing so the page doesn't feel
     like an endless scroll on phones */
  #manifesto,
  #services,
  #method,
  #why,
  #faq,
  #contact {
    padding-block: clamp(3.5rem, 9vh, 6rem);
  }

  /* Make sure all primary CTAs hit the 44px tap-target floor */
  .btn, .nav-cta {
    min-height: 44px;
  }

  /* Scroll-hint at bottom of hero often sits behind the URL bar;
     lift it slightly on mobile */
  #scroll-hint { bottom: 4vh; }

  /* The orbit cards (creator/brand iris worlds) crowd badly on
     phones — give them a touch more vertical breathing */
  .iris-content { width: 86vw; height: 86vw; padding: 6vw; }
  .orbit-card { font-size: 0.55rem; padding: 0.4rem 0.55rem; min-width: 84px; }
}

/* ── Touch-only refinements ─────────────────────── */
@media (hover: none) {
  /* Hovers on touch devices stick on tap and look broken.
     Disable hover-only effects on the nav and CTAs. */
  .nav-links a:hover,
  .nav-cta:hover,
  .footer-nav-list a:hover { transform: none; }

  /* Custom cursor effects shouldn't fire — already hidden,
     but make doubly sure cursor-ready never sets cursor:none */
  body.cursor-ready,
  body.cursor-ready button { cursor: auto; }
}

/* ── Safe-area insets for notched phones ────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #nav { padding-top: max(1.6rem, env(safe-area-inset-top)); }
  .footer-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  #mobile-nav { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* ════════════════════════════════════════════════════
   VOICES — Social proof section
   ════════════════════════════════════════════════════ */
#voices {
  padding: 7rem var(--gutter);
  background: var(--ink);          /* dark backdrop — makes the section pop hard */
  position: relative;
  overflow: hidden;
}

/* Atmospheric warm glow behind the testimonials */
#voices::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 80% 10%, rgba(217,162,44,0.10), transparent 60%),
    radial-gradient(ellipse 50% 60% at 5% 90%, rgba(180,135,70,0.10), transparent 60%);
  pointer-events: none;
}

/* Section header on dark background */
#voices .why-header { position: relative; z-index: 2; }
#voices .section-label { color: rgba(235,212,162,0.55); }
#voices .section-label .num { color: var(--gold-warm); }
#voices .section-label::after { background: rgba(235,212,162,0.18); }
#voices .s-title { color: var(--cream); }
#voices .s-title em { color: var(--gold-warm); }
#voices .services-tag { color: rgba(235,212,162,0.6); }

.voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-top: 3.5rem;
  position: relative; z-index: 2;
}

.voice-card {
  background: rgba(235,212,162,0.04);
  border: 1px solid rgba(235,212,162,0.12);
  border-top: 2px solid var(--gold);   /* gold top accent — the eye lands here first */
  border-radius: 1rem;
  padding: 3rem 2.5rem 2rem;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}

.voice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.45);
  border-top-color: var(--gold-warm);
}

/* Huge decorative opening quote — becomes a real design element */
.voice-card::before {
  content: '\201C';
  position: absolute;
  top: 1.25rem;
  left: 2rem;
  font-size: 6rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.45;
  font-family: var(--serif);
}

/* The quote itself — big, readable, impossible to miss */
.voice-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.7;
  color: rgba(235,212,162,0.95);
  margin: 2rem 0 1.75rem;
  flex: 1;
}

.voice-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(235,212,162,0.10);
}

/* Initials avatar — gold on dark */
.voice-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.voice-name {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--cream);
}

.voice-niche {
  font-family: var(--mono);
  font-size: 0.73rem;
  color: rgba(235,212,162,0.55);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.voice-note {
  font-size: 0.72rem;
  color: rgba(235,212,162,0.35);
  font-family: var(--mono);
  letter-spacing: 0.03em;
  margin-top: 1.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(235,212,162,0.08);
}

/* CTA card — dashed outline version on dark */
.voice-card--cta {
  background: rgba(235,212,162,0.02);
  border: 1px dashed rgba(235,212,162,0.2);
  border-top: 2px dashed var(--gold);
  justify-content: center;
  align-items: flex-start;
}

.voice-card--cta:hover {
  border-top-color: var(--gold-warm);
  border-color: rgba(235,212,162,0.3);
  transform: translateY(-4px);
}

.voice-cta-eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.voice-cta-body {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(235,212,162,0.65);
}

/* ── Real founder photo ────────────────────────── */
.founder-real-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  border-radius: 4px;
  z-index: 1;
}

/* ── Founder social links ─────────────────────── */
.f-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.f-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px solid rgba(148,120,66,0.25);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.f-social-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ── Stat zero — static display ──────────────── */
.stat-zero {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Form privacy note ────────────────────────── */
.form-privacy {
  font-size: 0.76rem;
  color: var(--ink-40);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

.form-privacy a {
  color: var(--ink-55);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-privacy a:hover { color: var(--gold); }

/* ── Responsive voices grid ──────────────────── */
@media (max-width: 768px) {
  .voices-grid { grid-template-columns: 1fr; }
  #voices { padding: 4rem var(--gutter); }
  .voice-quote { font-size: 1.05rem; }
}