/* ============================================================
   COR — Pure Cacao, Redefined
   Global stylesheet. Shared across index / product / waitlist.
   Palette: dark cacao forest at dawn.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Core palette — drawn from the product: espresso, kraft, antique gold */
  --black:        #0b0805;
  --brown-deep:   #150d07;
  --brown:        #24160d;
  --brown-soft:   #382315;
  --espresso:     #2a1810;
  --cocoa:        #5b3a24;
  --gold:         #c8a86a;
  --gold-bright:  #ecd29c;
  --gold-deep:    #93753f;
  --kraft:        #d8b88a;
  --cream:        #ecdcc2;
  --green:        #33502f;
  --green-soft:   #44623c;
  /* accent — used only for the launch block */
  --blue:         #6f93bd;
  --blue-bright:  #a8c4e2;
  --blue-deep:    #3f5d80;

  /* Text — warm cream */
  --t-100: rgba(244, 236, 224, 0.98);
  --t-80:  rgba(244, 236, 224, 0.82);
  --t-60:  rgba(238, 228, 214, 0.60);
  --t-40:  rgba(238, 228, 214, 0.40);
  --t-20:  rgba(238, 228, 214, 0.17);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing rhythm */
  --section-pad: clamp(5rem, 12vh, 11rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1280px;
  --maxw-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav + banner heights (used for scroll offsets) */
  --nav-h: 68px;
  --banner-h: 40px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--t-80);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
ul { list-style: none; }
::selection { background: var(--gold); color: var(--black); }

/* Lenis smooth-scroll required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--t-100);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.66rem, 1.1vw, 0.74rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.75;
  color: var(--t-60);
  font-weight: 300;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--t-100); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-pad); }
.center { text-align: center; }

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.2rem;
  transition: opacity 0.9s var(--ease), visibility 0.9s var(--ease);
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#loader .loader-mark {
  opacity: 0;
  transform: translateY(8px);
  animation: loaderIn 1.1s var(--ease) 0.15s forwards;
}
#loader .loader-mark .wordmark { --wm-size: clamp(2.6rem, 9vw, 4.2rem); }
.loader-bar {
  width: min(220px, 50vw); height: 1px;
  background: var(--t-20); position: relative; overflow: hidden;
  opacity: 0; animation: loaderIn 1.1s var(--ease) 0.4s forwards;
}
.loader-bar span {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width 0.4s var(--ease-soft);
}
.loader-tag {
  font-size: 0.66rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--t-40); opacity: 0; animation: loaderIn 1.1s var(--ease) 0.6s forwards;
}
@keyframes loaderIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   WORDMARK (SVG cacao-pod glyph as the O)
   ============================================================ */
.wordmark {
  --wm-size: 1.5rem;
  display: inline-flex; align-items: center;
  gap: 0.06em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--wm-size);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold);
  user-select: none;
}
.wordmark .glyph-c, .wordmark .glyph-r { display: block; transform: translateY(-0.02em); }
.wordmark .pod-glyph {
  width: calc(var(--wm-size) * 0.7);
  height: auto;
  margin-inline: 0.02em;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.wordmark .pod-glyph .heart { fill: var(--gold); stroke: none; }
.wordmark.bright .pod-glyph .heart { fill: var(--gold-bright); }
.wordmark.on-dark { color: var(--gold); }
.wordmark.bright { color: var(--gold-bright); }
.wordmark.bright .pod-glyph { stroke: var(--gold-bright); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  /* NOTE: backdrop-filter lives on ::before, not here. Putting it on .nav
     would make it a containing block and trap the fixed mobile menu overlay. */
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 8, 6, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--t-20);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav.scrolled::before { background: rgba(10, 8, 6, 0.86); border-bottom-color: rgba(201,169,110,0.18); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); }
.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); }
.nav-links a {
  position: relative;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-60);
  padding: 0.4rem 0;
  transition: color 0.35s var(--ease);
}
.nav-links a:hover { color: var(--t-100); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { transform: scaleX(1); }

/* Menu control — a refined trio of dots in a hairline ring. No morph animation. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  border: 1px solid var(--t-20);
  border-radius: 50%;
  position: relative; z-index: 1100;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav-toggle:hover { border-color: rgba(201,169,110,0.55); background: rgba(201,169,110,0.06); }
.nav-toggle span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
}
body.menu-open .nav-toggle { border-color: var(--gold); background: rgba(201,169,110,0.10); }
body.menu-open .nav-toggle span { background: var(--gold-bright); }

/* ============================================================
   NAV-LEVEL LAUNCH BLOCK — blue dotted square beside the wordmark
   ============================================================ */
.nav-left { display: flex; align-items: center; gap: clamp(0.7rem, 1.6vw, 1.3rem); }
.launch-tag {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.42rem 0.85rem;
  border-radius: 4px;
  border: 1.5px dotted rgba(111,147,189,0.7);
  background: rgba(63,93,128,0.10);
  color: var(--t-80);
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.launch-tag:hover {
  border-color: var(--blue-bright);
  background: rgba(63,93,128,0.2);
  color: var(--t-100);
  transform: translateY(-1px);
}
.launch-tag .lt-text b { color: var(--blue-bright); font-weight: 700; }
.launch-tag .lt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 0 rgba(168,196,226,0.6);
  animation: ltPulse 2.6s var(--ease-soft) infinite;
}
@keyframes ltPulse {
  0% { box-shadow: 0 0 0 0 rgba(168,196,226,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(168,196,226,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,196,226,0); }
}
@media (max-width: 600px) {
  .launch-tag { padding: 0.36rem 0.6rem; }
  .launch-tag .lt-text { display: none; }
}

/* Push content below fixed nav only */
body { padding-top: var(--nav-h); }
/* Hero is full-bleed: it pulls back up under the nav */
.hero { margin-top: calc(-1 * var(--nav-h)); }
/* anchor scroll offset */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1.05rem 2.1rem;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--gold); color: var(--brown-deep);
  box-shadow: 0 10px 30px -12px rgba(201,169,110,0.6);
}
.btn-primary:hover { background: var(--gold-bright); box-shadow: 0 16px 40px -12px rgba(201,169,110,0.75); }

.btn-ghost {
  background: transparent; color: var(--t-100);
  border: 1px solid var(--t-40);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

.btn-text {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.btn-text .arrow { transition: transform 0.4s var(--ease); }
.btn-text:hover .arrow { transform: translateX(5px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero-layers { position: absolute; inset: 0; z-index: 0; }
.hero-layer {
  position: absolute; inset: -8% -4%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.hero-img { background-image: url('../img/jungle-hero.jpg'); }
/* gradient veils for legibility + dawn mood */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 18%, transparent 0%, rgba(10,8,6,0.25) 45%, rgba(10,8,6,0.78) 100%),
    linear-gradient(180deg, rgba(10,8,6,0.55) 0%, transparent 30%, transparent 55%, rgba(10,8,6,0.92) 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; opacity: 0.06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero-content { position: relative; z-index: 3; padding-inline: var(--gutter); }
.hero .wordmark { --wm-size: clamp(3.4rem, 13vw, 8.5rem); }
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  color: var(--t-100);
  margin-top: 0.6rem;
}
.hero-sub {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); margin-top: 1.6rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.6rem; }

/* hero fade-in (JS adds .ready to body once loader done) */
.hero-content .reveal-hero { opacity: 0; transform: translateY(26px); }
body.ready .hero-content .reveal-hero {
  opacity: 1; transform: translateY(0);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
body.ready .hero-content .reveal-hero:nth-child(1) { transition-delay: 0.15s; }
body.ready .hero-content .reveal-hero:nth-child(2) { transition-delay: 0.42s; }
body.ready .hero-content .reveal-hero:nth-child(3) { transition-delay: 0.66s; }
body.ready .hero-content .reveal-hero:nth-child(4) { transition-delay: 0.9s; }

.scroll-hint {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  color: var(--t-40); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0;
}
body.ready .scroll-hint { opacity: 1; transition: opacity 1.2s var(--ease) 1.4s; }
.scroll-hint .line { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); overflow: hidden; }
.scroll-hint .line::after { content:''; display:block; width:100%; height: 40%; background: var(--gold); animation: scrollDot 2.2s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(-100%);} 100% { transform: translateY(250%);} }

/* ============================================================
   REVEAL (scroll) base states — GSAP toggles .is-in
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }

/* ============================================================
   BRAND STATEMENT
   ============================================================ */
.statement { background: var(--brown-deep); text-align: center; overflow: hidden; }
.statement::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(90deg, transparent, var(--t-20), transparent); }
.statement .big {
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  line-height: 1.08; max-width: 16ch; margin-inline: auto;
}
.statement .big em { font-style: italic; color: var(--gold); }
.statement .lead { max-width: 56ch; margin: 2.2rem auto 0; }

/* ============================================================
   THE SOURCE
   ============================================================ */
.source { background: var(--black); overflow: hidden; }
.source-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.source-copy .display { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.06; margin-block: 1.4rem 1.6rem; }
.source-copy .display em { font-style: italic; color: var(--gold); }
.source-media { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.source-media .pod {
  width: 115%; max-width: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  will-change: transform;
}
.source-leaf {
  position: absolute; z-index: 0;
  width: clamp(160px, 22vw, 320px);
  top: -6%; right: -8%;
  mix-blend-mode: screen; opacity: 0.5;
  transform: rotate(-18deg);
  will-change: transform; pointer-events: none;
}
.source-stats { display: flex; gap: 2.2rem; margin-top: 2.2rem; flex-wrap: wrap; }
.source-stats .stat .n { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold); line-height: 1; }
.source-stats .stat .l { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-40); margin-top: 0.4rem; }

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits { background: var(--brown-deep); position: relative; }
.benefits .section-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(3rem,7vh,5rem); }
.benefits .section-head .display { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 1rem; }
.benefit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--t-20);
  border: 1px solid var(--t-20);
}
.benefit {
  background: var(--brown-deep);
  padding: clamp(2rem, 3.4vw, 3rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: background 0.6s var(--ease);
}
.benefit:hover { background: var(--brown-soft); }
.benefit-icon { width: 46px; height: 46px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.benefit h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-100); }
.benefit p { font-size: 0.95rem; color: var(--t-60); line-height: 1.7; }
.benefit .idx { font-family: var(--font-display); font-size: 0.9rem; color: var(--gold-deep); letter-spacing: 0.1em; }

/* ============================================================
   PRODUCT TEASE
   ============================================================ */
.tease { background: var(--black); position: relative; text-align: center; overflow: hidden; }
.tease::before {
  content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(900px, 90vw); height: min(900px, 90vw);
  background: radial-gradient(circle, rgba(201,169,110,0.16) 0%, transparent 62%);
  pointer-events: none;
}
.tease-bag {
  position: relative; z-index: 1;
  width: clamp(240px, 34vw, 460px); margin: 0 auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7));
  will-change: transform;
}
.tease .display { font-size: clamp(2.2rem, 5.4vw, 4.4rem); margin-top: 2.2rem; position: relative; z-index: 1; }
.tease .display em { font-style: italic; color: var(--gold); }
.tease .lead { max-width: 50ch; margin: 1.4rem auto 0; position: relative; z-index: 1; }
.tease-floaters span {
  position: absolute; z-index: 1;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.5rem); color: var(--t-40);
  white-space: nowrap;
}

/* ============================================================
   HOW TO USE
   ============================================================ */
.ritual { background: var(--brown-deep); overflow: hidden; }
.ritual-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,6vw,6rem); align-items: center; }
.ritual-media { position: relative; }
.ritual-media img { width: 100%; border-radius: 3px; filter: brightness(0.96) contrast(1.04); will-change: transform; }
.ritual-media::after {
  content:''; position:absolute; inset:0; border-radius: 3px;
  box-shadow: inset 0 0 120px 10px rgba(10,8,6,0.7);
  pointer-events: none;
}
.ritual-copy .display { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.08; margin-block: 1.2rem 1.6rem; }
.ritual-steps { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.ritual-step { display: flex; gap: 1.2rem; align-items: flex-start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--t-20); }
.ritual-step:last-child { border-bottom: none; }
.ritual-step .num { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); line-height: 1; min-width: 1.6rem; }
.ritual-step .txt h4 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-100); margin-bottom: 0.3rem; }
.ritual-step .txt p { font-size: 0.92rem; color: var(--t-60); }

/* ============================================================
   WAITLIST CTA (homepage) + WAITLIST PAGE
   ============================================================ */
.cta {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(45,74,42,0.22), transparent 55%),
    linear-gradient(180deg, var(--black), var(--brown));
}
.cta .display { font-size: clamp(2.8rem, 8vw, 6.5rem); }
.cta .lead { max-width: 46ch; margin: 1.4rem auto 2.6rem; }

/* Inline quick form */
.quick-form {
  display: flex; gap: 0.6rem; max-width: 520px; margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--t-20); border-radius: 3px;
  padding: 0.5rem; transition: border-color 0.4s var(--ease);
}
.quick-form:focus-within { border-color: var(--gold); }
.quick-form input {
  flex: 1; background: transparent; border: none; color: var(--t-100);
  padding: 0.7rem 0.9rem; letter-spacing: 0.02em;
}
.quick-form input::placeholder { color: var(--t-40); }
.quick-form input:focus { outline: none; }
.quick-form .btn-primary { white-space: nowrap; padding-inline: 1.6rem; }
.cta .below { margin-top: 1.4rem; }
.form-msg { min-height: 1.4rem; margin-top: 1rem; font-size: 0.86rem; letter-spacing: 0.02em; }
.form-msg.ok { color: var(--gold-bright); }
.form-msg.err { color: #e88; }

@media (max-width: 540px) {
  .quick-form { flex-direction: column; }
}

/* ============================================================
   FORMS (full waitlist page)
   ============================================================ */
.field { margin-bottom: 1.6rem; text-align: left; }
.field label {
  display: block; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.6rem;
}
.field label .req { color: var(--t-40); }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,0.03);
  border: 1px solid var(--t-20); border-radius: 3px;
  color: var(--t-100); padding: 0.95rem 1.1rem;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--t-40); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,0.05);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
.field select option { background: var(--brown); color: var(--t-100); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.form-disclaimer { font-size: 0.78rem; color: var(--t-40); text-align: center; margin-top: 1.4rem; letter-spacing: 0.02em; }
.full-form .btn-primary { width: 100%; margin-top: 0.4rem; }

/* Waitlist page hero */
.waitlist-page { position: relative; min-height: 100vh; display: flex; align-items: center; }
.waitlist-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.waitlist-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; filter: saturate(1.05); transform: scale(1.05); will-change: transform; }
.waitlist-bg::after { content:''; position:absolute; inset:0; background: radial-gradient(110% 90% at 70% 50%, rgba(10,8,6,0.55), var(--black) 75%); }
.waitlist-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(6rem, 12vh, 9rem); }
.waitlist-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.waitlist-copy .display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; margin-block: 1.2rem 1.4rem; }
.waitlist-copy .display em { font-style: italic; color: var(--gold); }
.waitlist-perks { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
.waitlist-perk { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.95rem; color: var(--t-60); }
.waitlist-perk svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; flex-shrink: 0; margin-top: 0.2rem; }
.form-card {
  background: rgba(20, 11, 6, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--t-20); border-radius: 6px;
  padding: clamp(1.8rem, 4vw, 3rem);
}
.form-card .form-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--t-100); margin-bottom: 0.4rem; }
.form-card .form-titlesub { font-size: 0.9rem; color: var(--t-40); margin-bottom: 1.8rem; }

/* success overlay state for full form */
.form-success { display: none; text-align: center; padding: 1rem 0; }
.form-success.show { display: block; animation: fadeUp 0.7s var(--ease); }
.form-success .tick {
  width: 64px; height: 64px; margin: 0 auto 1.4rem; border-radius: 50%;
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
}
.form-success .tick svg { width: 30px; height: 30px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.form-success h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--t-100); margin-bottom: 0.7rem; }
.form-success p { color: var(--t-60); font-size: 0.95rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity:1; transform: translateY(0);} }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-hero { position: relative; overflow: hidden; padding-top: clamp(3rem,7vh,5rem); }
.product-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.product-hero-media { position: relative; display: flex; justify-content: center; }
.product-hero-media::before {
  content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 120%; height: 120%;
  background: radial-gradient(circle, rgba(201,169,110,0.16), transparent 62%);
}
.product-hero-media img { position: relative; width: clamp(220px, 30vw, 400px); mix-blend-mode: screen; filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7)); will-change: transform; }
.product-hero-copy .display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.04; margin-block: 1rem 1rem; }
.product-meta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.product-meta span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-60); padding: 0.5rem 0.9rem; border: 1px solid var(--t-20); border-radius: 2px; }

.statstrip { background: var(--brown-deep); border-block: 1px solid var(--t-20); }
.statstrip .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 3.5rem); padding-block: 2.2rem; }
.statstrip .item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.statstrip .item .v { font-family: var(--font-display); font-size: clamp(1.4rem,2.4vw,2rem); color: var(--gold); line-height: 1; }
.statstrip .item .k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t-40); }

.science { background: var(--black); overflow: hidden; }
.science-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
.science-copy .display { font-size: clamp(2rem,4.4vw,3.4rem); line-height: 1.08; margin-block: 1rem 1.4rem; }
.science-copy .display em { font-style: italic; color: var(--gold); }
.science-copy p { margin-bottom: 1.1rem; color: var(--t-60); }
.science-copy p strong { color: var(--t-100); font-weight: 500; }
.science-media img { width: 100%; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8); will-change: transform; }
.science-media figcaption { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-40); margin-top: 1rem; text-align: center; }
.science-media .compare-labels { display: flex; justify-content: space-between; margin-top: 0.8rem; }
.science-media .compare-labels span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

.deepbenefits { background: var(--brown-deep); }
.deepbenefits .section-head { text-align: center; margin-bottom: clamp(3rem,6vh,4.5rem); }
.deepbenefits .section-head .display { font-size: clamp(2rem,4.4vw,3.2rem); margin-top: 1rem; }
.deeplist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--t-20); border: 1px solid var(--t-20); }
.deeprow { background: var(--brown-deep); padding: clamp(2rem,3.2vw,2.8rem); display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; transition: background 0.6s var(--ease); }
.deeprow:hover { background: var(--brown-soft); }
.deeprow svg { width: 40px; height: 40px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.deeprow h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; color: var(--t-100); }
.deeprow p { font-size: 0.93rem; color: var(--t-60); }

.ingredients { background: var(--black); text-align: center; }
.ingredients .display { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.ingredients .display em { font-style: italic; color: var(--gold); }
.ingredients .lead { max-width: 44ch; margin: 1.4rem auto 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; background: var(--brown-deep); border-top: 1px solid var(--t-20); overflow: hidden; }
.footer-frame { position: absolute; inset: 0; z-index: 0; opacity: 0.16; background-image: url('../img/ornate-frame.jpg'); background-size: cover; background-position: center; }
.footer-frame::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, var(--brown-deep), rgba(20,11,6,0.7)); }
.footer .wrap { position: relative; z-index: 1; padding-block: clamp(4rem,8vh,6rem) 2.5rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; align-items: flex-start; }
.footer-brand .wordmark { --wm-size: 2.4rem; }
.footer-brand p { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--t-60); margin-top: 0.8rem; }
.footer-cols { display: flex; gap: clamp(2.5rem, 7vw, 5rem); flex-wrap: wrap; }
.footer-col h5 { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; color: var(--t-60); margin-bottom: 0.7rem; transition: color 0.35s var(--ease); }
.footer-col a:hover { color: var(--t-100); }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { width: 38px; height: 38px; border: 1px solid var(--t-20); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.footer-social a svg { width: 17px; height: 17px; stroke: var(--gold); fill: none; }
.footer-social a:hover { border-color: var(--gold); background: rgba(201,169,110,0.08); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem,6vh,4rem); padding-top: 1.8rem; border-top: 1px solid var(--t-20); }
.footer-bottom p { font-size: 0.78rem; color: var(--t-40); letter-spacing: 0.04em; }

/* ============================================================
   MOBILE NAV + RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* Branded drop-panel: numbered, editorial serif links that descend from the nav. */
  .nav-links {
    counter-reset: navitem;
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 990;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: clamp(0.6rem, 3vw, 1.2rem) clamp(1.5rem, 7vw, 3rem) clamp(1.6rem, 5vh, 2.4rem);
    background:
      radial-gradient(140% 90% at 100% 0%, rgba(91,58,36,0.30), transparent 62%),
      linear-gradient(180deg, #170f08 0%, #0b0805 100%);
    border-bottom: 1px solid rgba(201,169,110,0.22);
    transform: translateY(-16px); opacity: 0; visibility: hidden;
    transition: transform 0.55s var(--ease), opacity 0.45s var(--ease), visibility 0.55s var(--ease), box-shadow 0.55s var(--ease);
  }
  .nav-links a {
    display: flex; align-items: baseline; gap: 0.9rem;
    width: 100%;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.5rem, 6.4vw, 2.1rem);
    line-height: 1; text-transform: none; letter-spacing: 0;
    color: var(--t-80);
    padding: clamp(0.7rem, 2vh, 1rem) 0;
    border-bottom: 1px solid var(--t-20);
    transition: color 0.35s var(--ease), padding-left 0.35s var(--ease);
  }
  .nav-links a::before {
    counter-increment: navitem;
    content: counter(navitem, decimal-leading-zero);
    font-family: var(--font-body); font-weight: 600;
    font-size: 0.6rem; letter-spacing: 0.16em; color: var(--gold-deep);
    transform: translateY(-0.35em);
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--gold-bright); padding-left: 0.5rem; }
  .nav-links a.active { color: var(--gold); }
  .nav-links a.active::before { color: var(--gold); }
  /* branded sign-off row */
  .nav-links::after {
    content: "Pure Cacao, Redefined · Launching January 2027";
    margin-top: 1.2rem;
    font-family: var(--font-display); font-style: italic;
    font-size: 0.92rem; color: var(--t-40); letter-spacing: 0.02em;
  }

  body.menu-open .nav-links {
    transform: translateY(0); opacity: 1; visibility: visible;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 100vmax rgba(8,6,4,0.55);
  }

  /* banner: keep it to a single tidy line on phones */
  .banner a { font-size: 0.6rem; letter-spacing: 0.08em; }

  .source-grid, .ritual-grid, .waitlist-grid, .product-hero-grid, .science-grid { grid-template-columns: 1fr; }
  .source-media { order: -1; min-height: 44vh; }
  .source-leaf { width: 130px; top: -2%; right: 2%; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .deeplist { grid-template-columns: 1fr; }
  .ritual-media { order: -1; }
  .science-media { order: -1; }
}

@media (max-width: 860px) {
  /* Decorative floating words overlap copy on small screens — hide them. */
  .tease-floaters { display: none; }
}

@media (max-width: 560px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .source-stats { gap: 1.4rem; }
  .footer-top { flex-direction: column; }
}

/* Larger anchor offset already handled. Disable parallax inset bleed on small */
@media (max-width: 860px) { .hero-layer { inset: -4% -2%; } }

/* ============================================================
   GLOBAL ATMOSPHERE — film grain + vignette over the whole page
   (one consistent grade so every section feels like one film)
   ============================================================ */
.atmosphere { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
/* Static film grain — a fixed tiled texture. No per-frame compositing,
   so it stays buttery; the texture alone gives the analog feel. */
.atmosphere .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05; mix-blend-mode: overlay;
}
.atmosphere .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(6,4,3,0.58) 100%);
}

/* ============================================================
   UNIFIED IMAGE GRADE — tame every photo into the cacao palette.
   Apply .graded to any media wrapper so bright jungle + dark
   product shots read as one consistent world.
   ============================================================ */
.graded { position: relative; }
.grade-img,
.graded > img, .graded > .grade-img {
  filter: saturate(0.74) contrast(1.05) brightness(0.86) sepia(0.12);
}
.graded::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(201,169,110,0.10), transparent 60%),
    linear-gradient(180deg, rgba(20,11,6,0.30), rgba(10,8,6,0.42));
  mix-blend-mode: multiply;
}
/* tint pass that pulls cool jungle greens toward warm cacao */
.graded::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(45,74,42,0.16), rgba(26,15,8,0.28));
  mix-blend-mode: color;
}

/* ============================================================
   CUSTOM CURSOR — gold ring + dot, lags behind for weight
   ============================================================ */
/* Custom cursor removed — use the native cursor. */
.cursor-dot, .cursor-ring { display: none !important; }

/* ============================================================
   ROMAN-NUMERAL PROGRESS RAIL — left side, marks each act
   ============================================================ */
.rail {
  position: fixed; left: clamp(0.8rem, 2.4vw, 2rem); top: 50%;
  transform: translateY(-50%); z-index: 950;
  display: flex; flex-direction: column; gap: 1.1rem;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
body.rail-on .rail { opacity: 1; }
.rail a { display: flex; align-items: center; gap: 0.7rem; color: var(--t-40); }
.rail .rn {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em;
  width: 1.8rem; text-align: right; transition: color 0.4s var(--ease);
}
.rail .tick { width: 14px; height: 1px; background: currentColor; transition: width 0.4s var(--ease), background 0.4s var(--ease); }
.rail .lbl {
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-40); opacity: 0; transform: translateX(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); white-space: nowrap;
}
.rail a:hover .lbl, .rail a.active .lbl { opacity: 1; transform: translateX(0); }
.rail a:hover .rn, .rail a.active .rn { color: var(--gold); }
.rail a.active .tick { width: 28px; background: var(--gold); }
.rail a.active .rn { color: var(--gold-bright); }
@media (max-width: 860px) { .rail { display: none; } }

/* ============================================================
   CINEMATIC CAMERA JOURNEY
   Each .act is tall; .act-stage pins (sticky) for the duration
   while a scrubbed GSAP timeline zooms/pans the scene layers.
   Without motion (.no-motion), acts collapse to readable blocks.
   ============================================================ */
.journey { position: relative; background: var(--black); }
.act { position: relative; }
body.motion .act { height: var(--act-h, 260vh); }
.act-stage {
  position: relative; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
body.motion .act-stage { position: sticky; top: 0; }

.scene { position: absolute; inset: 0; }
.scene-img {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  will-change: transform, opacity;
}
.scene-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 40%, transparent 45%, rgba(10,8,6,0.55) 100%),
    linear-gradient(180deg, rgba(10,8,6,0.5), transparent 35%, transparent 60%, rgba(10,8,6,0.85));
}
/* per-scene art object (svg/img) floating in the centre */
.scene-art {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(54vh, 70vw);
  color: var(--gold);
  will-change: transform, opacity;
}
.scene-art img, .scene-art svg { width: 100%; height: auto; }
.scene-art.blend img { mix-blend-mode: screen; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.7)); }

/* act caption — kicker + line, sits over the scene */
.act-caption {
  position: relative; z-index: 5; text-align: center;
  max-width: 30ch; padding-inline: var(--gutter);
  will-change: transform, opacity;
}
.act-caption .kicker {
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.66rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.act-caption h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.04; color: var(--t-100);
}
.act-caption h2 em { font-style: italic; color: var(--gold); }
.act-caption p { color: var(--t-60); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 1.2rem; }

/* the char-split mechanism for headings — pad/clip so descenders aren't cut */
.split { line-height: 1.12; }
.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.02em 0.18em; margin: -0.12em -0.02em -0.18em; }
.split .word .ch { display: inline-block; transform: translateY(115%); will-change: transform; }
.no-motion .split .word .ch { transform: none; }

/* ============================================================
   EDITORIAL SOURCE SPREAD — pod centred, branch above,
   text wrapping on BOTH sides (illuminated-manuscript feel)
   ============================================================ */
.spread { position: relative; background: var(--black); overflow: hidden; padding-top: clamp(5rem, 12vh, 9rem); padding-bottom: clamp(5rem, 12vh, 9rem); }
.spread .wrap { position: relative; z-index: 2; }

/* ---- heavy layering backdrop ---- */
.spread-backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.spread-backdrop span { position: absolute; display: block; will-change: transform; }
.spread-backdrop img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bd-tree { width: clamp(420px, 46vw, 720px); top: -6%; color: var(--gold); opacity: 0.05; }
.bd-tree-l { left: -14%; }
.bd-tree-r { right: -14%; bottom: -8%; top: auto; opacity: 0.04; }
.bd-leaf { width: clamp(70px, 8vw, 130px); color: var(--gold); opacity: 0.07; }
.bd-leaf-1 { top: 14%; left: 8%; rotate: -24deg; }
.bd-leaf-2 { top: 58%; right: 10%; rotate: 28deg; opacity: 0.06; }
.bd-leaf-3 { bottom: 10%; left: 18%; rotate: 8deg; opacity: 0.05; }
.bd-glow { top: 15%; left: 15%; width: 70%; height: 70%; max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.10), transparent 60%); }
.spread-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.spread-head .eyebrow { display: block; margin-bottom: 1rem; }
.spread-head h2 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }
.spread-head h2 em { font-style: italic; color: var(--gold); }
.spread-flourish { display: block; width: clamp(220px, 30vw, 340px); margin: 1.4rem auto 0; color: var(--gold-deep); }
.spread-flourish svg { width: 100%; height: auto; }

.spread-grid {
  display: grid; grid-template-columns: 1fr minmax(280px, 0.9fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.spread-col p { color: var(--t-60); font-size: 0.98rem; line-height: 1.8; }
.spread-col p + p { margin-top: 1.2rem; }
.spread-col.left { text-align: right; }
.spread-col .drop::first-letter {
  font-family: var(--font-display); float: left; font-size: 3.4rem; line-height: 0.8;
  padding: 0.1em 0.12em 0 0; color: var(--gold);
}
.spread-col.left .drop::first-letter { float: right; padding: 0.1em 0 0 0.12em; }

.spread-center { position: relative; display: flex; flex-direction: column; align-items: center; }
/* a faint branch reaching down from above into the pod */
.spread-branch { width: 78%; max-width: 320px; color: var(--gold-deep); opacity: 0.5;
  margin-bottom: -22%; transform: scaleY(-1) rotate(4deg); transform-origin: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 70%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 70%); }
.spread-branch img { width: 100%; height: auto; display: block; }
.spread-pod {
  position: relative; width: 100%; z-index: 1;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.7));
}
.spread-pod > img { width: 100%; mix-blend-mode: screen; position: relative; z-index: 1; }
/* concentric ring framing the pod */
.pod-ring { position: absolute; top: 50%; left: 50%; width: 116%; aspect-ratio: 1; z-index: 0;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.22); box-shadow: 0 0 0 1px rgba(201,169,110,0.06) inset; }
.pod-ring::after { content: ''; position: absolute; inset: 9%; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.10); }
.pod-foot { display: block; width: 64%; margin: -2% auto 0; color: var(--gold-deep); opacity: 0.75; position: relative; z-index: 2; }
.pod-foot img { width: 100%; height: auto; }
.spread-center::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 150%; height: 150%; z-index: -1;
  background: radial-gradient(circle, rgba(201,169,110,0.16), transparent 62%);
}
.spread-stats { display: flex; justify-content: center; gap: clamp(1.6rem, 5vw, 3rem); margin-top: clamp(2.5rem, 6vh, 4rem); flex-wrap: wrap; }
.spread-stats .stat { text-align: center; }
.spread-stats .n { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--gold); line-height: 1; }
.spread-stats .l { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-40); margin-top: 0.5rem; }

@media (max-width: 860px) {
  .spread-grid { grid-template-columns: 1fr; }
  .spread-col.left { text-align: left; }
  .spread-col.left .drop::first-letter { float: left; padding: 0.1em 0.12em 0 0; }
  .spread-center { order: -1; margin-bottom: 1.5rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-stagger > *, .hero-content .reveal-hero { opacity: 1 !important; transform: none !important; }
  .launch-pill .sheen, .launch-pill .dot { animation: none !important; }
  .atmosphere .grain { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .split .word .ch { transform: none !important; }
}