/* ============================================================
   OMNI LABS — v2 homepage
   Plain static CSS. Mobile-first responsive; desktop layout via
   min-width breakpoints. Honors prefers-reduced-motion.
   Colors, type scale and spacing per the design handoff README.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --sage:            #B4C9A0;   /* page base, hero gradient top */
  --sage-hero-btm:   #AFC79D;   /* hero gradient bottom, thesis card, hovers */
  --sage-muted:      #B7CAAB;   /* alt cards, method marquee, scorecard bg */
  --sage-soft:       #9DBD85;   /* accent text (2nd line), petals */
  --mint-1:          #EDF3E7;   /* thesis & founder bg */
  --mint-2:          #E8EFE4;   /* services bg, chip bg */
  --mint-3:          #F3F8F0;   /* comparison & faq bg */
  --off-white:       #F8FBF5;   /* cards, light text on dark, buttons */
  --card-tint:       #DFEAD6;   /* comparison check cells */
  --green:           #1B4A18;   /* primary brand text / buttons */
  --green-darkest:   #103B16;   /* dark section backgrounds */
  --green-mid:       #2F5D2C;   /* annotation ink, small accents */
  --warm-ink:        #7A4A1E;   /* pipeline tag text */
  --warm-bg:         #F4E9D2;   /* pipeline tag bg, sticky notes */
  --cream-1:         #F5EFE1;   /* warm section bg (thesis) — palette relief */
  --red:             #F08A8C;   /* alert markers */
  --red-ink:         #8C3A3C;   /* reach tag text */

  --shadow-rest:  0 24px 80px rgba(27,74,24,.1);
  --shadow-hover: 0 36px 90px rgba(27,74,24,.2);
  --ease:         cubic-bezier(.22,1,.36,1);

  --pad-y:  clamp(100px, 11vw, 170px);
  --pad-x:  clamp(20px, 4vw, 56px);
  --maxw:   1360px;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter Tight', system-ui, sans-serif;
  --font-hand:    'Caveat', cursive;
  --font-mono:    ui-monospace, Menlo, monospace;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sage);
  color: var(--green);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--green); color: var(--mint-2); }

h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
a { color: inherit; }

/* ---------- Keyframes ---------- */
@keyframes riseIn      { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marqueeX    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floatSoft   { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes pulseGlow   { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }

/* ---------- Reveal (JS/IntersectionObserver driven) ---------- */
.reveal { opacity: 0; transform: translateY(42px); }
.reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--sage);
  display: grid; place-items: center; align-content: center;
  gap: 26px;
}
.preloader__inner { display: flex; align-items: center; gap: 14px; }
.preloader__brand {
  font: 900 clamp(28px, 6vw, 54px)/1 var(--font-display);
  letter-spacing: -0.05em; color: var(--green);
}
.preloader__omega {
  width: clamp(40px, 7vw, 62px); height: clamp(40px, 7vw, 62px);
  border-radius: 50%;
  background: var(--green-darkest); color: var(--off-white);
  display: inline-grid; place-items: center;
  font: 900 clamp(22px, 4vw, 34px)/1 var(--font-display);
}
.preloader__bar {
  width: min(280px, 60vw); height: 4px;
  border-radius: 999px; background: rgba(16,59,22,.15); overflow: hidden;
}
.preloader__bar > span {
  display: block; height: 100%; width: 0;
  border-radius: 999px; background: var(--green-darkest);
}
.preloader.is-hidden {
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}

/* ============================================================
   Nav (fixed)
   ============================================================ */
.nav {
  position: fixed; top: 22px; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(16px, 3vw, 44px);
  pointer-events: none;
}
.nav__logo {
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(248,251,245,.85); backdrop-filter: blur(14px);
  display: inline-grid; place-items: center; text-decoration: none;
  box-shadow: 0 8px 30px rgba(27,74,24,.14);
  font: 900 20px var(--font-display); color: var(--green);
}
.nav__pill {
  pointer-events: auto;
  display: flex; gap: 4px; padding: 5px;
  border-radius: 999px; background: rgba(248,251,245,.55);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(27,74,24,.1);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.nav__pill::-webkit-scrollbar { display: none; }
.nav__pill a {
  border-radius: 999px; padding: 11px 16px;
  color: var(--green); font: 700 14px/1 var(--font-body);
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}
.nav__pill a:hover { background: rgba(27,74,24,.1); }
.nav__cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 6px 6px 6px 20px;
  background: rgba(248,251,245,.85); backdrop-filter: blur(14px);
  color: var(--green); font: 800 14px/1 var(--font-body);
  text-decoration: none; box-shadow: 0 8px 30px rgba(27,74,24,.14);
  transition: transform .2s ease; white-space: nowrap;
}
.nav__cta:hover { transform: translateY(-1px); }
.nav__cta span {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: var(--off-white);
  display: inline-grid; place-items: center; font-size: 15px;
}

/* Small screens: keep logo + Book-a-call; drop the center pill nav.
   No JS hamburger needed. */
@media (max-width: 720px) {
  .nav__pill { display: none; }
}

/* ============================================================
   Buttons (shared)
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; padding: 8px 8px 8px 26px;
  background: var(--green); color: var(--off-white);
  font: 800 17px/1 var(--font-body);
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 18px 50px rgba(16,59,22,.3);
  transition: background .25s ease, transform .25s ease;
}
.btn-primary:hover { background: var(--green-darkest); transform: translateY(-2px); }
.btn-primary span {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--off-white); color: var(--green-darkest);
  display: inline-grid; place-items: center; font-size: 17px;
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 15px 24px;
  border: 1.5px solid rgba(16,59,22,.35);
  color: var(--green-darkest); font: 800 15px/1 var(--font-body);
  text-decoration: none; background: rgba(248,251,245,.25);
  transition: background .25s ease;
}
.btn-ghost:hover { background: rgba(248,251,245,.6); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: var(--pad-y) var(--pad-x); position: relative; }
.container { max-width: var(--maxw); margin: 0 auto; }

.kicker {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(27,74,24,.55);
}
.kicker--light { color: rgba(248,251,245,.55); }
.kicker--dark  { color: rgba(16,59,22,.6); }

.h2 { font: 800 clamp(38px, 4.8vw, 84px)/0.98 var(--font-display); letter-spacing: -0.045em; }
.h2 .tone-a { color: var(--green); }
.h2 .tone-b { color: var(--sage-soft); }
.h2 span { display: block; }

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative; overflow: visible; z-index: 2;
  background: linear-gradient(180deg, var(--sage) 0%, var(--sage-hero-btm) 100%);
  padding: clamp(76px, 8.5vh, 100px) 0 0;
}
.hero__wordmark { position: relative; z-index: 2; text-align: center; padding: 0 16px; }
/* the brand wordmark (supplied logotype, extended to "omni labs") replaces
   the typeset title. min-height holds the OLD title band, so the smaller
   lockup absorbs the difference as padding — nothing below it moves. */
.hero__title {
  display: flex; justify-content: center; align-items: center;
  min-height: calc(min(72vw, 700px) * 0.347);
}
.hero__title img {
  display: block; width: min(78vw, 760px); height: auto;
}
.hero__sub {
  margin-top: 14px;
  font: 600 clamp(16px, 1.4vw, 20px)/1.4 var(--font-body);
  color: rgba(16,59,22,.78);
}
.hero__cta-row { display: flex; justify-content: center; margin-top: 18px; }
.hero__lower {
  position: relative; z-index: 3;
  max-width: 1500px; margin: clamp(8px, 1.5vw, 28px) auto 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 60px);
  padding: 0 clamp(16px, 3vw, 44px);
}
.hero__stage { position: relative; height: clamp(420px, 96vw, 560px); }
.hero__ring {
  /* seated low relative to the vessel so the cork breaks past the ring's top
     edge through the whole bob cycle */
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: min(82vw, 540px); aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(24px, 4.5vw, 40px) solid rgba(243,248,240,.9);
  pointer-events: none;
}

/* --- the living beaker: frontmost, hangs across the seam, nothing clips it ---
   larger + shallower hang than v1: the vessel seats high in the ring and the
   whole assembly reads above the fold */
.hero__flask-wrap {
  position: absolute; z-index: 6;
  left: 50%; transform: translateX(-50%);
  bottom: min(-12px, -1.4vw);
  width: min(66vw, 470px);
  perspective: 950px;
  pointer-events: none;
}
.hero__flask-3d { transform-style: preserve-3d; will-change: transform; }
.hero__flask {
  display: block; width: 100%; aspect-ratio: 3 / 4; height: auto;
  filter: drop-shadow(0 44px 54px rgba(16, 59, 22, 0.22));
  will-change: transform;
}
.hero__flask--img { display: none; object-fit: contain; }
/* fallback chain: reduced-motion / no WebGL / video failure → transparent still */
.beaker-static .hero__flask--live { display: none; }
.beaker-static .hero__flask--img  { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero__flask--live { display: none; }
  .hero__flask--img  { display: block; }
}
.hero__vsrc {
  position: absolute; left: -9999px; top: 0;
  width: 2px; height: 2px; opacity: 0; pointer-events: none;
}

/* --- stat beads chained down the ring's left arc (one eye path, not scatter) --- */
.hero__bubble {
  position: absolute; z-index: 4; border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #fff 0, #F4FAF1 44%, #E4EFDD 100%);
  box-shadow: 0 24px 60px rgba(27,74,24,.22);
  display: grid; place-items: center; text-align: center;
  animation: floatSoft 7s ease-in-out infinite;
  aspect-ratio: 1;
}
/* JS seats the bubbles ON the ring and drifts them along its arc — the CSS
   keyframe bob would pull them off-axis, so it yields when the engine runs */
.bubbles-live .hero__bubble { animation: none; }
.hero__bubble strong {
  display: block;
  font: 900 clamp(26px, 4.4vw, 38px)/0.85 var(--font-display);
  letter-spacing: -0.05em; color: var(--green);
}
.hero__bubble span {
  display: block; max-width: 7.5em; margin: 4px auto 0;
  font: 700 12px/1.1 var(--font-body); color: rgba(27,74,24,.8);
}
.hero__bubble--1 { width: clamp(88px, 19vw, 118px);  left: 13%; top: 0; }
.hero__bubble--2 { width: clamp(104px, 22vw, 138px); left: 1%;  top: 21%; animation-delay: .9s; }
.hero__bubble--3 { width: clamp(84px, 18vw, 112px);  left: 7%;  top: 44%; animation-delay: 1.7s; }

.hero__note {
  position: absolute; left: 4%; top: -9%;
  font: 600 clamp(20px, 3vw, 27px)/1.15 var(--font-hand);
  color: var(--green-darkest); transform: rotate(-5deg); z-index: 4;
}
@media (max-width: 639.98px) {
  /* decorative marginalia collides with the fixed nav on small screens */
  .hero__note { display: none; }
}

/* --- curved seam: dark arc ribbon + curved lab-loop marquee under the beaker --- */
.hero__seam {
  position: relative; z-index: 1;
  margin-top: clamp(-150px, -10.5vw, -56px);
  line-height: 0; pointer-events: none;
}
.hero__seam-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hero__seam-text {
  font: 800 34px/1 var(--font-display);
  letter-spacing: .01em;
  fill: #DDEACF;
  dominant-baseline: middle;
}
.hero__pitch {
  display: flex; flex-direction: column; gap: 22px;
  padding-bottom: clamp(40px, 6vw, 90px);
}
.hero__headline {
  font: 900 clamp(52px, 6vw, 104px)/0.86 var(--font-display);
  letter-spacing: -0.035em; text-transform: uppercase;
}
.hero__headline span { display: block; }
.hero__headline .l1 { color: #fff; }
.hero__headline .l2, .hero__headline .l3 { color: var(--green); }
.hero__pitch p {
  max-width: 480px;
  font: 600 clamp(16px, 1.35vw, 20px)/1.5 var(--font-body);
  color: rgba(16,59,22,.85); text-wrap: pretty;
}

@media (min-width: 900px) {
  .hero__lower {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  /* the stage rises into the wordmark zone so ring + vessel land above the
     fold (the wordmark is centered; the stage owns the left, no collision) */
  .hero__stage {
    height: clamp(460px, 42vw, 600px);
    margin-top: clamp(-170px, -9.5vw, -56px);
  }
  /* keep the promise copy clear of the seam arc */
  .hero__pitch { padding-bottom: clamp(120px, 13vw, 210px); }
}
@media (max-width: 899.98px) {
  /* mobile stack per the mock: brand → tagline → LIVING STAGE → CTA → pitch.
     display:contents flattens the two wrappers so the CTA row (marked up
     inside the wordmark block) can slot below the stage; desktop keeps the
     wrapper layout untouched. */
  .hero { display: flex; flex-direction: column; }
  .hero__wordmark, .hero__lower { display: contents; }
  .hero__title { order: 1; padding: 0 16px; }
  .hero__sub { order: 2; text-align: center; padding: 0 16px; margin-top: 10px; }
  .hero__stage { order: 3; margin: 20px auto 0; width: 100%; }
  .hero__cta-row { order: 4; margin-top: 28px; }
  .hero__pitch { order: 5; text-align: center; align-items: center; padding: 36px clamp(16px, 5vw, 44px) 0; }
  .hero__pitch p { margin: 0 auto; }
  .hero__headline .l1 { color: #fff; }
  /* pitch is last in the stack now — the seam must not ride up over it */
  .hero__seam { order: 6; margin-top: 10px; }
}
/* ticker legibility on small screens: scale the whole seam band up
   (band width + text size grow together); the wrapper clips the overhang
   so the oversized svg can't widen the page */
@media (max-width: 639.98px) {
  .hero__seam { overflow: hidden; }
  .hero__seam-svg { width: 178%; margin-left: -39%; }
}

/* ============================================================
   2. BRAND THESIS
   ============================================================ */
.thesis {
  position: relative; overflow: hidden;
  background: var(--cream-1); min-height: 100svh;
  display: grid; align-items: center;
  padding: clamp(90px, 9vw, 140px) var(--pad-x);
}
.thesis__squiggle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.thesis__grid {
  position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
/* the human beat: team-in-the-lab photograph, warm sticky note, marginalia.
   Capped width: the photo is a supporting beat, not a full-height wall */
.thesis__media {
  position: relative; margin: 0 auto;
  width: 100%; max-width: clamp(340px, 34vw, 460px);
  transform: rotate(-1.4deg);
}
.thesis__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 44px;
  box-shadow: 0 36px 90px rgba(27,74,24,.16);
}
.thesis__sticky {
  position: absolute; top: 28px; right: -14px;
  transform: rotate(3.5deg);
  background: var(--warm-bg); color: var(--warm-ink);
  border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 18px 40px rgba(27,74,24,.18);
  font: 700 14px/1.35 var(--font-body);
  max-width: 210px;
}
.thesis__sticky-code {
  display: block; margin-bottom: 6px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .75;
}
@media (max-width: 639.98px) {
  .thesis__sticky { right: 8px; top: 16px; max-width: 170px; }
}
@media (max-width: 899.98px) {
  /* photo and pitch card need real air between them on the stack */
  .thesis__grid { gap: 64px; }
}
.thesis__note {
  position: absolute; bottom: -16px; left: 6%;
  font: 600 24px/1.1 var(--font-hand); color: var(--green-mid); transform: rotate(-4deg);
}
.thesis__card {
  position: relative; border-radius: 44px; background: var(--sage-hero-btm);
  padding: clamp(36px, 4vw, 64px);
  box-shadow: 0 36px 90px rgba(27,74,24,.18);
}
.thesis__medallion {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--mint-1); border: 3px solid #7FA168;
  display: grid; place-items: center;
  font: 900 26px var(--font-display); color: var(--green-mid);
}
.thesis__card h2 {
  font: 900 clamp(42px, 4.6vw, 78px)/0.88 var(--font-display);
  letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--off-white); text-align: center; text-wrap: balance;
}
.thesis__hand {
  margin-top: 14px; text-align: center;
  font: 600 24px/1 var(--font-hand); color: var(--green-mid);
}
.thesis__card p.body {
  margin: 22px auto 0; max-width: 480px; text-align: center;
  font: 600 clamp(15px, 1.25vw, 18px)/1.55 var(--font-body);
  color: var(--green); text-wrap: pretty;
}
.thesis__card p.body + p.body { margin-top: 14px; }

@media (min-width: 900px) {
  .thesis__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ============================================================
   Marquees
   ============================================================ */
.marquee {
  position: relative; z-index: 5; overflow: hidden;
  transform: rotate(-1.5deg) scale(1.04); padding: 18px 0;
}
.marquee--tension { background: var(--green-darkest); color: #DDEACF; margin: -14px 0; }
.marquee--method  { background: var(--sage-muted); color: var(--green-darkest); margin-bottom: clamp(70px, 8vw, 110px); }
.marquee__track {
  display: flex; gap: 76px; width: max-content;
  animation: marqueeX 26s linear infinite;
}
.marquee--method .marquee__track { animation-duration: 30s; }
.marquee__group {
  display: flex; gap: 76px;
  font: 800 clamp(18px, 2.2vw, 30px)/1 var(--font-display);
  letter-spacing: -0.02em; white-space: nowrap;
}
.marquee--method .marquee__group { font-size: clamp(20px, 2.4vw, 34px); }
.marquee__sep { opacity: .4; }
.marquee--method .marquee__sep { opacity: .45; }

/* ============================================================
   3. EXPERIMENTS (replaces the services card grid)
   Default = mobile = reduced-motion = no-JS layout.
   The lead owns the pin/scrub choreography; DO NOT position or
   animate the cards or beaker here.
   ============================================================ */
/* the lab goes dark: the formula is the light source of this whole movement,
   and it resolves straight into the (equally dark) statement screen */
.experiments {
  position: relative; overflow: hidden;
  background: var(--green-darkest);
  padding: var(--pad-y) var(--pad-x) 0;
}
.experiments .tone-a { color: var(--off-white); }
.experiments__intro {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.experiments__intro .h2 {
  font: 800 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.045em;
}
.experiments__intro p {
  max-width: 560px; margin: 0 auto;
  font: 500 17px/1.5 var(--font-body);
  color: rgba(248,251,245,.68); text-wrap: pretty;
}
.experiments__stage { margin-top: clamp(44px, 5vw, 72px); }
.experiments__pin {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 4vw, 44px);
}

/* beaker block ~340x420, centered, soft radial glow behind */
.experiments__beaker {
  position: relative; width: min(90vw, 340px); height: 420px;
  display: grid; place-items: center;
}
.experiments__glow {
  position: absolute; inset: -18% -26%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(157,224,127,.5), rgba(157,224,127,0) 58%),
    radial-gradient(circle at 50% 60%, rgba(143,192,122,.3), rgba(143,192,122,0) 72%);
  filter: blur(30px);
  will-change: transform, opacity;
}
.experiments__beaker-3d {
  position: relative; z-index: 1; width: 100%; height: 100%;
  perspective: 950px; transform-style: preserve-3d; will-change: transform;
}
.experiments__flask {
  display: block; position: absolute; inset: 0; margin: auto;
  width: 100%; max-height: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  will-change: transform;
}
/* static/mobile/reduced default = the transparent still; the keyed live canvas
   is revealed by hero-live.js only when it mounts (adds .exp-live to the stage) */
.experiments__flask--live { display: none; }
.exp-live .experiments__flask--live { display: block; }
.exp-live .experiments__flask--img { display: none; }

/* finale trio variants: real generated formulas (magenta + amber), same flat
   sage backdrop as the flagship so one keyer serves all three. Choreo-only. */
.experiments__side-beaker { display: none; }
.experiments__side-canvas {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 4; object-fit: contain;
  will-change: transform;
}

/* five cards stacked in a single column, max ~560, generous gap */
.experiments__cards {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px);
}
.exp-card {
  position: relative;
  background: var(--off-white); border: 1px solid rgba(27,74,24,.1);
  border-radius: 36px; padding: clamp(26px, 4vw, 38px);
  box-shadow: var(--shadow-rest);
  display: flex; flex-direction: column;
}
/* animated formula badge: perched top-center, breaking the card's edge —
   the same circular-chip device as the nav mark and stage numbers */
.exp-card__icon {
  position: absolute; top: -38px; left: 50%; margin-left: -38px; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--off-white); border: 2.5px solid var(--green);
  box-shadow: 0 14px 34px rgba(16,59,22,.22);
  display: grid; place-items: center; color: var(--green);
}
.exp-card__icon svg { width: 42px; height: 42px; }
@media (max-width: 799.98px) {
  .exp-card__icon { width: 64px; height: 64px; top: -30px; margin-left: -32px; }
  .exp-card__icon svg { width: 36px; height: 36px; }
  /* stacked flow: room for the overlapping badges + more air between cards */
  .experiments__cards { gap: 52px; padding-top: 30px; }
}
.exp-card__head { display: flex; justify-content: space-between; align-items: center; }
.exp-card__code {
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em; color: rgba(27,74,24,.55);
}
.exp-card__tag {
  font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-darkest); background: var(--mint-2);
  border-radius: 999px; padding: 6px 10px;
}
.exp-card__meter {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.exp-card__meter-label {
  font: 700 9px/1 var(--font-mono); letter-spacing: .13em;
  text-transform: uppercase; color: rgba(27,74,24,.45); white-space: nowrap;
}
.exp-card__meter-track {
  flex: 1; height: 6px; border-radius: 999px;
  background: rgba(27,74,24,.12); overflow: hidden;
}
.exp-card__meter-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sage-soft), var(--green-mid));
}
.exp-card__meter-pct {
  font: 700 10px/1 var(--font-mono); color: rgba(27,74,24,.55);
}
.exp-card__title {
  margin-top: 18px;
  font: 900 clamp(28px, 4vw, 42px)/0.95 var(--font-display);
  letter-spacing: -0.04em; color: var(--green); text-transform: uppercase;
}
.exp-card__body {
  margin-top: 14px;
  font: 500 15px/1.5 var(--font-body); color: rgba(27,74,24,.72); text-wrap: pretty;
}
.exp-card__features {
  margin-top: 22px; display: flex; flex-direction: column; gap: 8px;
}
.exp-card__feature {
  display: flex; align-items: baseline; gap: 8px;
  font: 600 14px/1.35 var(--font-body); color: var(--green);
}
.exp-card__feature span { color: var(--green-mid); }

/* finale headline — the old statement screen, folded into the pin's ending.
   Default flow (mobile / reduced-motion / no-JS): a centered closing block. */
.experiments__finale-head {
  margin: clamp(72px, 10vw, 120px) auto clamp(90px, 12vw, 150px);
  max-width: 900px; text-align: center; color: var(--off-white);
}
.experiments__finale-head h2 {
  font: 900 clamp(38px, 4.6vw, 96px)/0.98 var(--font-display);
  letter-spacing: -0.045em; text-transform: uppercase;
}
.experiments__finale-head h2 span { display: block; }
.experiments__finale-head h2 .tone-a { color: var(--off-white); }
.experiments__finale-head h2 .tone-b { color: var(--sage-soft); }

/* specimen notes flanking the finale trio — choreography reveals them */
.experiments__spec-note { display: none; }

/* ============================================================
   3b. COMPARISON
   ============================================================ */
/* ============================================================
   3a. VOICES — testimonial strip (the proof spine starts here)
   ============================================================ */
.voices { background: var(--cream-1); }
.voices__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(36px, 4vw, 60px);
}
.voices__head { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.voices__head .h2 { font: 800 clamp(38px, 4.6vw, 76px)/0.98 var(--font-display); }
.voices__head .h2 .tone-a { color: var(--green); }
.voices__head .h2 .tone-b { color: var(--warm-ink, #7A4A1E); }
.voices__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.voice-card {
  position: relative; margin: 0;
  border-radius: 32px; background: var(--off-white);
  border: 1px solid rgba(27,74,24,.1);
  box-shadow: 0 18px 60px rgba(122,74,30,.1);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.voice-card:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 30px 80px rgba(122,74,30,.18); }
.voice-card__tag {
  align-self: flex-start;
  font: 700 10px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--warm-ink, #7A4A1E); background: var(--warm-bg, #F4E9D2);
  border-radius: 999px; padding: 7px 11px;
}
.voice-card blockquote { margin: 0; }
.voice-card blockquote p {
  font: 600 clamp(16px, 1.35vw, 19px)/1.45 var(--font-body);
  color: var(--green); text-wrap: pretty;
}
.voice-card__who { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.voice-card__who img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--mint-2);
}
.voice-card__who b { display: block; font: 800 15px/1.2 var(--font-body); color: var(--green); }
.voice-card__who i { display: block; font: 500 13px/1.3 var(--font-body); font-style: normal; color: rgba(27,74,24,.6); }

@media (min-width: 860px) { .voices__grid { grid-template-columns: repeat(3, 1fr); } }

.comparison { background: var(--mint-3); }
.comparison__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.comparison__panel {
  position: relative; aspect-ratio: 4/5; border-radius: 48px;
  background: var(--sage-muted); overflow: hidden;
  box-shadow: 0 36px 90px rgba(27,74,24,.16);
}
.comparison__panel-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.comparison__sticky-note {
  position: absolute; bottom: 26px; left: 26px; transform: rotate(-3deg);
  background: var(--off-white); border: 1.5px solid rgba(27,74,24,.2);
  border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 10px 26px rgba(27,74,24,.16);
}
.comparison__sticky-note .code {
  font: 700 10px/1.1 var(--font-mono); letter-spacing: .1em; color: rgba(27,74,24,.55);
}
.comparison__sticky-note .label {
  margin-top: 3px; font: 800 15px/1.1 var(--font-display); color: var(--green);
}
.comparison__content { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.comparison__row {
  display: grid; grid-template-columns: 1fr 90px 96px;
  gap: 12px; align-items: center;
  padding: 17px 0; border-bottom: 1px solid rgba(27,74,24,.14);
}
.comparison__row--head { padding: 0 0 14px; border-bottom: 2px solid rgba(27,74,24,.3); }
.comparison__row--last { border-bottom: none; }
.comparison__row .what { font: 600 16px/1.3 var(--font-body); color: var(--green); }
.comparison__row--head .what { font: 600 14px/1 var(--font-body); color: rgba(27,74,24,.6); }
.comparison__row--head .us {
  text-align: center; font: 900 17px/1 var(--font-display);
  letter-spacing: -0.03em; color: var(--green);
}
.comparison__row--head .them {
  text-align: center; font: 600 13px/1.2 var(--font-body); color: rgba(27,74,24,.5);
}
.comparison__check {
  justify-self: center; width: 64px; height: 40px; border-radius: 12px;
  background: var(--card-tint); display: inline-grid; place-items: center;
  color: var(--green);
}
.comparison__check svg { width: 20px; height: 20px; }
.comparison__cross {
  justify-self: center; font: 700 17px/1 var(--font-body); color: rgba(27,74,24,.4);
}

/* split-screen control + sliding spotlight */
.comparison__toggle {
  position: relative; align-self: flex-start;
  display: inline-flex; gap: 4px; padding: 5px;
  border-radius: 999px; background: rgba(27,74,24,.08);
  border: 1px solid rgba(27,74,24,.14);
}
.comparison__toggle-pill {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: 50%;
  border-radius: 999px; background: var(--green);
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.comparison__toggle-btn {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  border-radius: 999px; padding: 12px 20px;
  font: 700 14px/1 var(--font-body); color: var(--green);
  transition: color .3s ease;
}
.comparison__toggle-btn.is-active { color: var(--off-white); }
.comparison__table { position: relative; }
.comparison__table > .comparison__row { position: relative; z-index: 1; }
.comparison__spotlight {
  /* -14px top: the "Omni Labs" label gets the same headroom the last row's
     padding gives the bottom edge */
  position: absolute; top: -14px; bottom: 0; width: 0; left: 0;
  border-radius: 20px; background: rgba(248,251,245,.75);
  border: 1px solid rgba(27,74,24,.12);
  box-shadow: 0 14px 40px rgba(27,74,24,.1);
  opacity: 0; z-index: 0;
  transition: left .5s var(--ease), width .5s var(--ease), opacity .4s ease;
}
.comparison__table.spotlight-on .comparison__spotlight { opacity: 1; }
/* the column NOT under the spotlight recedes */
.comparison__table[data-side="us"] .comparison__cross,
.comparison__table[data-side="us"] .comparison__row--head .them { opacity: .35; transition: opacity .4s ease; }
.comparison__table[data-side="them"] .comparison__check,
.comparison__table[data-side="them"] .comparison__row--head .us { opacity: .4; transition: opacity .4s ease; }
.comparison__table .comparison__check,
.comparison__table .comparison__cross,
.comparison__table .comparison__row--head .us,
.comparison__table .comparison__row--head .them { transition: opacity .4s ease, transform .4s ease; }

@media (min-width: 900px) {
  .comparison__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .comparison__panel { position: sticky; top: 110px; }
  .comparison__row { grid-template-columns: 1fr 110px 120px; }
}
@media (max-width: 899.98px) {
  /* mobile: heading + toggle + table lead; the photo supports from below */
  .comparison__panel { order: 2; }
}

/* ============================================================
   4. METHOD
   ============================================================ */
.method {
  /* overflow:clip, not hidden — hidden makes this section the scroll box for
     position:sticky descendants and the rail never sticks; clip only clips */
  position: relative; overflow: clip;
  background: var(--green); color: var(--off-white);
  /* top padding gives the rotated ticker band room — its raised corner was
     being clipped by this section's overflow:hidden */
  padding: clamp(20px, 1.8vw, 32px) 0 clamp(90px, 10vw, 150px);
}
.method__watermark {
  position: absolute; top: -0.18em; right: -0.06em;
  font: 900 clamp(140px, 20vw, 300px)/0.8 var(--font-display);
  letter-spacing: -0.06em; color: rgba(248,251,245,.05); pointer-events: none;
}
.method__inner {
  max-width: var(--maxw); margin: 0 auto; position: relative;
  display: flex; flex-direction: column; gap: clamp(44px, 5vw, 72px);
  padding: 0 var(--pad-x);
}
.method__head { max-width: 860px; display: flex; flex-direction: column; gap: 16px; }
.method__head .h2 { font: 800 clamp(42px, 5.2vw, 84px)/0.95 var(--font-display); }
.method__head .tone-a { color: var(--off-white); }
.method__head .tone-b { color: var(--sage-soft); }
.method__head p {
  max-width: 560px; font: 500 17px/1.5 var(--font-body);
  color: rgba(248,251,245,.72); text-wrap: pretty;
}
/* narrative process loop: sticky rail + five stages that light in sequence.
   Default (mobile / reduced / no-JS): the rail hides, stages read as a clean
   list. choreo.js drives .is-active + the micro-motions. */
.method__loop { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.method__rail { display: none; }
.method__rail-code {
  font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: rgba(248,251,245,.55);
}
.method__rail-code em { font-style: normal; color: rgba(248,251,245,.3); }
.method__rail-name {
  margin-top: 14px;
  font: 900 clamp(44px, 4.6vw, 76px)/0.9 var(--font-display);
  letter-spacing: -0.045em; color: var(--off-white);
}
.method__rail-track {
  margin-top: 22px; height: 6px; width: min(280px, 80%);
  border-radius: 999px; background: rgba(248,251,245,.14); overflow: hidden;
}
.method__rail-fill {
  display: block; height: 100%; width: 20%; border-radius: 999px;
  background: linear-gradient(90deg, var(--sage-muted), #9DE07F);
  transition: width .6s var(--ease);
}
.method__rail-hand { margin-top: 16px; font: 600 24px/1.1 var(--font-hand); color: rgba(183,202,171,.9); }

.method__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.method-stage {
  display: flex; gap: 18px; align-items: flex-start;
  border-radius: 28px; border: 1px solid rgba(248,251,245,.14);
  background: rgba(248,251,245,.05); padding: clamp(20px, 2.2vw, 30px);
  opacity: .55;
  transition: opacity .45s ease, background .45s ease, border-color .45s ease, transform .45s ease;
}
.method-stage.is-active {
  opacity: 1; background: rgba(248,251,245,.11);
  border-color: rgba(157,224,127,.45); transform: translateX(6px);
}
.method-stage__icon {
  flex: none; width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(248,251,245,.22); color: var(--sage-muted);
  transition: color .45s ease, border-color .45s ease;
}
.method-stage.is-active .method-stage__icon { color: #9DE07F; border-color: rgba(157,224,127,.55); }
.method-stage__icon svg { width: 40px; height: 40px; }
.method-stage__copy { display: flex; flex-direction: column; gap: 8px; }
.method-stage__num { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; color: rgba(248,251,245,.45); }
.method-stage__copy h3 {
  font: 900 clamp(24px, 2.1vw, 32px)/0.95 var(--font-display);
  letter-spacing: -0.04em; color: var(--off-white);
}
.method-stage__copy p { font: 500 14px/1.5 var(--font-body); color: rgba(248,251,245,.68); text-wrap: pretty; max-width: 52ch; }

.method__close { font: 600 15px/1.4 var(--font-body); color: rgba(248,251,245,.6); }
.method__close b { color: var(--sage-muted); font-weight: 600; }

@media (min-width: 900px) {
  .method__loop { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .method__rail { display: block; position: sticky; top: 140px; }
}

/* ============================================================
   5. PROOF
   ============================================================ */
.proof { background: var(--mint-1); }
.proof__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(40px, 4vw, 64px);
}
.proof__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px;
}
.proof__head .h2 { font: 800 clamp(42px, 5.2vw, 84px)/0.95 var(--font-display); }
.proof__head .h2 .tone-a { color: var(--green); }
.proof__head .h2 .tone-b { color: var(--sage-soft); }
.proof__head-copy { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.proof__head-note {
  max-width: 360px; font: 500 15px/1.5 var(--font-body); color: rgba(27,74,24,.72);
}
/* specimen files: wide two-panel modules, media/body alternating sides */
.proof__files { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px); }
.exp-file {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  border-radius: 36px; background: var(--off-white);
  border: 1px solid rgba(27,74,24,.1);
  box-shadow: 0 24px 80px rgba(27,74,24,.12);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.exp-file:hover { transform: translateY(-6px); box-shadow: 0 36px 90px rgba(27,74,24,.2); }
.exp-file__media {
  position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--mint-2);
}
.exp-file__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.exp-file:hover .exp-file__media img { transform: scale(1.035); }
.exp-file__badge {
  position: absolute; top: 16px; left: 16px;
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em;
  color: var(--green-darkest); background: rgba(248,251,245,.92);
  border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(27,74,24,.16);
}
.exp-file__body {
  padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px);
}
.exp-file__head { display: flex; flex-direction: column; gap: 8px; }
/* mobile file toggle: image + headline stay, the four rows tuck behind it.
   Anchored to the BODY's bottom corner so it reads as the card's footer
   control, not part of the headline. */
.exp-file__toggle {
  display: none; position: absolute; right: clamp(18px, 4vw, 28px); bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(27,74,24,.35); background: var(--off-white);
  color: var(--green); cursor: pointer; padding: 0;
  place-items: center;
}
.exp-file__toggle svg {
  width: 20px; height: 20px;
  transition: transform .45s var(--ease);
}
.exp-file__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 859.98px) {
  .exp-file__body { position: relative; padding-bottom: 72px; }
  .exp-file__toggle { display: grid; }
  .exp-file__rows { height: 0; opacity: 0; overflow: hidden; }
  /* reduced-motion / no-GSAP path opens via class */
  .exp-file.is-open .exp-file__rows { height: auto; opacity: 1; }
}
/* a quiet heartbeat while collapsed — "there's more in here" — that stops
   the moment the file is opened */
@media (max-width: 859.98px) and (prefers-reduced-motion: no-preference) {
  .exp-file__toggle[aria-expanded="false"] { animation: togglePulse 2.8s ease-in-out infinite; }
}
@keyframes togglePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(27,74,24,.28); }
  55%      { transform: scale(1.07); box-shadow: 0 0 0 9px rgba(27,74,24,0); }
}
.exp-file__head h3 { font: 900 clamp(28px, 2.6vw, 40px)/0.95 var(--font-display); letter-spacing: -0.035em; color: var(--green); }
.exp-file__sub { font: 600 13px/1.3 var(--font-mono); color: rgba(27,74,24,.55); }
.exp-file__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.exp-file__tags span {
  font: 700 11px/1 var(--font-body); color: var(--green);
  background: var(--mint-2); border-radius: 999px; padding: 6px 11px;
}
.exp-file__rows { margin: 0; display: flex; flex-direction: column; }
.exp-file__rows > div {
  display: grid; grid-template-columns: 108px 1fr; gap: 14px;
  padding: 12px 0; border-top: 1px solid rgba(27,74,24,.1);
}
.exp-file__rows dt {
  font: 700 11px/1.6 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(27,74,24,.5);
}
.exp-file__rows dd { margin: 0; font: 500 15px/1.5 var(--font-body); color: rgba(27,74,24,.78); text-wrap: pretty; }
.exp-file__rows > div:last-child dd { color: var(--green); font-weight: 600; }
.proof__note { font: 600 13px/1.5 var(--font-mono); color: rgba(27,74,24,.5); }

@media (min-width: 860px) {
  .exp-file { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
  .exp-file__media { aspect-ratio: auto; min-height: 100%; }
  .exp-file--flip .exp-file__media { order: 2; }
  .exp-file--flip .exp-file__body { order: 1; }
}

/* ============================================================
   6. FOUNDER
   ============================================================ */
.founder { position: relative; overflow: hidden; background: var(--mint-2); }
.founder__squiggle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.founder__grid {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 90px); align-items: center;
}
.founder__media-wrap { position: relative; }
.founder__portrait {
  aspect-ratio: 4/5;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  background: repeating-linear-gradient(-45deg, #DBE7DC 0, #DBE7DC 14px, #EDF3E7 14px, #EDF3E7 28px);
  display: grid; place-items: center;
  box-shadow: 0 24px 80px rgba(27,74,24,.16); overflow: hidden;
}
.founder__portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.founder__sticky-note {
  position: absolute; bottom: 24px; right: -8px; transform: rotate(3deg);
  background: var(--off-white); border: 1.5px solid rgba(27,74,24,.2);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 10px 26px rgba(27,74,24,.16);
}
.founder__sticky-note .code {
  font: 700 10px/1.1 var(--font-mono); letter-spacing: .1em; color: rgba(27,74,24,.55);
}
.founder__sticky-note .label {
  margin-top: 3px; font: 800 14px/1.1 var(--font-display); color: var(--green);
}
.founder__note {
  position: absolute; top: -14px; left: 8px;
  font: 600 24px/1.1 var(--font-hand); color: var(--green-mid); transform: rotate(-4deg);
}
.founder__content { display: flex; flex-direction: column; gap: 22px; }
.founder__content .h2 { font: 800 clamp(38px, 4.4vw, 70px)/0.98 var(--font-display); }
.founder__content .h2 .tone-a { color: var(--green); }
.founder__content .h2 .tone-b { color: var(--sage-soft); }
.founder__content p {
  max-width: 560px; font: 500 17px/1.5 var(--font-body);
  color: rgba(27,74,24,.72); text-wrap: pretty;
}
.founder__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.founder__pills span {
  font: 700 13px/1 var(--font-body); color: var(--green-darkest);
  background: rgba(248,251,245,.8); border: 1px solid rgba(27,74,24,.16);
  border-radius: 999px; padding: 10px 16px;
}

@media (min-width: 900px) {
  .founder__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* ============================================================
   7. SCORECARD
   ============================================================ */
.scorecard { position: relative; overflow: clip; overflow-anchor: none; background: var(--sage-muted); } /* clip not hidden: the panel is sticky; anchor off: gaps/gate blocks toggle height */
.scorecard__watermark {
  position: absolute; bottom: -0.16em; left: 50%; transform: translateX(-50%);
  font: 900 clamp(120px, 18vw, 280px)/0.8 var(--font-display);
  letter-spacing: -0.06em; color: rgba(248,251,245,.25);
  white-space: nowrap; pointer-events: none;
}
.scorecard__inner {
  max-width: 1160px; margin: 0 auto; position: relative;
  display: flex; flex-direction: column; gap: clamp(36px, 4vw, 56px);
}
.scorecard__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.scorecard__head .h2 { font: 800 clamp(42px, 5.2vw, 84px)/0.98 var(--font-display); }
.scorecard__head .h2 .tone-a { color: var(--off-white); display: block; }
.scorecard__head .h2 .tone-b { color: var(--green-darkest); display: block; }
.scorecard__head p {
  max-width: 560px; font: 500 17px/1.5 var(--font-body); color: rgba(16,59,22,.75); text-wrap: pretty;
}
.scorecard__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.scorecard__questions {
  border-radius: 36px; background: var(--off-white);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 26px;
  box-shadow: 0 24px 80px rgba(27,74,24,.18);
}
.quiz-q { display: flex; flex-direction: column; gap: 12px; }
.quiz-q__label {
  display: flex; gap: 10px; align-items: baseline;
  font: 800 17px/1.3 var(--font-body); color: var(--green);
}
.quiz-q__code { font: 700 11px/1 var(--font-mono); color: rgba(27,74,24,.5); }
.quiz-q__options { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-opt {
  border: 1.5px solid rgba(27,74,24,.2); background: rgba(232,239,228,.5);
  color: var(--green); border-radius: 999px; padding: 10px 16px;
  font: 700 13px/1 var(--font-body); cursor: pointer; transition: all 160ms ease;
}
.quiz-opt:hover { border-color: rgba(27,74,24,.4); }
.quiz-opt.is-active { border: 1.5px solid var(--green-darkest); background: var(--green); color: var(--off-white); }

.scorecard__panel {
  border-radius: 36px; background: var(--green-darkest);
  color: var(--off-white); padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 24px 80px rgba(16,59,22,.3);
}
.scorecard__dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scorecard__dial-svg { width: min(100%, 260px); height: auto; display: block; }
.scorecard__dial-label {
  font: 700 10px/1 var(--font-mono); letter-spacing: .18em; color: rgba(248,251,245,.45);
}
#dialNeedle { transform-origin: 120px 124px; will-change: transform; }

.scorecard__score { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.scorecard__score .n {
  font: 900 clamp(64px, 6vw, 96px)/0.85 var(--font-display);
  letter-spacing: -0.05em; color: var(--off-white);
}
.scorecard__score .max { font: 800 22px/1 var(--font-display); color: rgba(248,251,245,.5); }
.scorecard__bar { height: 10px; border-radius: 999px; background: rgba(248,251,245,.15); overflow: hidden; }
.scorecard__bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sage-hero-btm), var(--sage-muted));
  transition: width 500ms var(--ease);
}
.scorecard__verdict { display: flex; flex-direction: column; gap: 6px; }
.scorecard__verdict .word { font: 900 24px/1 var(--font-display); letter-spacing: -0.03em; color: var(--sage-muted); }
.scorecard__verdict .note { font: 500 14px/1.5 var(--font-body); color: rgba(248,251,245,.72); text-wrap: pretty; }
.scorecard__gaps { display: flex; flex-direction: column; gap: 8px; }
.scorecard__gaps > p.head {
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(248,251,245,.55);
}
.scorecard__gap {
  display: flex; gap: 8px; align-items: baseline;
  font: 600 14px/1.4 var(--font-body); color: var(--off-white);
}
.scorecard__gap span { color: var(--red); }
.scorecard__gate {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid rgba(248,251,245,.15); padding-top: 20px;
}
.scorecard__gate > p { font: 800 16px/1.3 var(--font-body); color: var(--off-white); }
.scorecard__gate input {
  border-radius: 999px; border: 1px solid rgba(248,251,245,.25);
  background: rgba(248,251,245,.08); color: var(--off-white);
  padding: 14px 18px; font: 600 15px/1 var(--font-body); outline: none;
}
.scorecard__gate input::placeholder { color: rgba(248,251,245,.55); }
.scorecard__gate input:focus { border-color: var(--sage-muted); }
.scorecard__gate button {
  border: none; cursor: pointer; border-radius: 999px; padding: 16px 22px;
  background: var(--sage-muted); color: var(--green-darkest);
  font: 800 15px/1 var(--font-body); transition: background .2s ease, transform .2s ease;
}
.scorecard__gate button:hover { background: var(--sage-hero-btm); transform: translateY(-1px); }
.scorecard__error { font: 600 13px/1.4 var(--font-body); color: var(--red); }
.scorecard__success {
  border-radius: 20px; background: rgba(183,202,171,.18);
  border: 1px solid rgba(183,202,171,.4); padding: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.scorecard__success .ok { font: 800 16px/1.2 var(--font-body); color: var(--sage-muted); }
.scorecard__success .sub { font: 500 13px/1.5 var(--font-body); color: rgba(248,251,245,.72); }
.scorecard__prompt { font: 600 20px/1.2 var(--font-hand); color: rgba(183,202,171,.9); }
[hidden] { display: none !important; }

@media (min-width: 900px) {
  .scorecard__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .scorecard__panel { position: sticky; top: 100px; }
}

/* ============================================================
   8. FAQ
   ============================================================ */
.faq {
  background: var(--mint-3);
  /* the accordion animates its height; without this the browser's scroll
     anchoring "compensates" mid-animation and the whole page bounces */
  overflow-anchor: none;
}
.faq__grid {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
.faq__head { display: flex; flex-direction: column; gap: 16px; }
.faq__head .h2 { font: 800 clamp(38px, 4.4vw, 70px)/0.98 var(--font-display); }
.faq__head .h2 .tone-a { color: var(--green); }
.faq__head .h2 .tone-b { color: var(--sage-soft); }
.faq__head p { max-width: 400px; font: 500 16px/1.5 var(--font-body); color: rgba(27,74,24,.72); }
.faq__burner {
  position: relative; margin-top: clamp(20px, 2.6vw, 40px);
  width: clamp(180px, 16vw, 250px); aspect-ratio: 43/64;
}
@media (max-width: 899.98px) {
  .faq__burner { margin-left: auto; margin-right: auto; width: clamp(200px, 56vw, 260px); }
}
/* cover, not contain: the loop renders 16:9 with flat-sage side margins
   (keyed to transparent) — cover crops back to the portrait subject */
.faq__burner-canvas, .faq__burner-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.faq__burner-canvas { display: none; }
.faq-live .faq__burner-canvas { display: block; }
.faq-live .faq__burner-img { display: none; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border-radius: 24px; background: var(--off-white);
  border: 1px solid rgba(27,74,24,.1); overflow: hidden;
}
.faq__item summary {
  width: 100%; list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left; padding: 22px 26px;
  font: 800 clamp(17px, 1.5vw, 20px)/1.25 var(--font-body); color: var(--green);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(27,74,24,.25);
  display: inline-grid; place-items: center; font-size: 15px; color: var(--green);
  transition: transform 240ms ease;
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item p {
  padding: 0 26px 24px;
  font: 500 15px/1.55 var(--font-body); color: rgba(27,74,24,.72);
  max-width: 620px; text-wrap: pretty;
  overflow: hidden; /* clean edge while the open/close height animates */
}

@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .faq__head { position: sticky; top: 110px; }
}

/* ============================================================
   9. FINAL CTA (+ contact form)
   ============================================================ */
.final-cta {
  position: relative; min-height: 96svh; overflow: hidden;
  display: grid; place-items: center; padding: clamp(80px, 9vw, 140px) 24px;
  background: var(--green-darkest); color: var(--off-white); text-align: center;
}
.final-cta__watermark {
  position: absolute; bottom: -0.16em; left: 50%; transform: translateX(-50%);
  font: 900 clamp(150px, 24vw, 360px)/0.8 var(--font-display);
  letter-spacing: -0.07em; color: rgba(248,251,245,.06);
  white-space: nowrap; pointer-events: none;
}
.final-cta__inner {
  position: relative; z-index: 2; max-width: 980px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.final-cta__flask-wrap { position: relative; width: 230px; height: 280px; }
.final-cta__glow {
  position: absolute; inset: 30px -30px -30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, rgba(175,199,157,.35), rgba(16,59,22,0) 65%);
  animation: pulseGlow 5s ease-in-out infinite;
}
.final-cta__flask-3d {
  position: absolute; inset: 0;
  perspective: 900px; transform-style: preserve-3d; will-change: transform;
}
.final-cta__flask { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.final-cta__flask--live { display: none; }
.cta-live .final-cta__flask--live { display: block; }
.cta-live .final-cta__flask--img { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.final-cta__title {
  font: 900 clamp(48px, 7.4vw, 118px)/0.88 var(--font-display);
  letter-spacing: -0.055em; color: var(--off-white); text-wrap: balance;
}
.final-cta__sub {
  max-width: 580px; font: 500 18px/1.5 var(--font-body);
  color: rgba(248,251,245,.72); text-wrap: pretty;
}
.final-cta__hand {
  margin-top: 8px; font: 600 24px/1.1 var(--font-hand);
  color: rgba(183,202,171,.9); transform: rotate(-2deg);
}
.btn-primary--light { background: var(--off-white); color: var(--green-darkest); box-shadow: none; }
.btn-primary--light:hover { background: #fff; }
.btn-primary--light span { background: var(--green-darkest); color: var(--off-white); }
.btn-ghost--light {
  border: 1.5px solid rgba(248,251,245,.3); color: var(--off-white);
  padding: 18px 28px; background: transparent;
}
.btn-ghost--light:hover { background: rgba(248,251,245,.1); }

/* final CTA actions — mailto button(s) */
.final-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* contact form (unused since Vercel move; kept for a future form provider) */
.contact-form {
  width: 100%; max-width: 560px; margin: 8px auto 0;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.hidden-field { position: absolute; left: -9999px; opacity: 0; }
.contact-form__row { display: flex; flex-direction: column; gap: 6px; }
.contact-form__row label {
  font: 700 11px/1 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(248,251,245,.6);
}
.contact-form input,
.contact-form textarea {
  border-radius: 18px; border: 1px solid rgba(248,251,245,.25);
  background: rgba(248,251,245,.08); color: var(--off-white);
  padding: 14px 18px; font: 600 15px/1.4 var(--font-body); outline: none; resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--sage-muted); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(248,251,245,.5); }
.contact-form .btn-primary--light { align-self: flex-start; margin-top: 6px; padding: 15px 28px; }
.final-cta__mail { font: 600 14px/1 var(--font-body); color: rgba(248,251,245,.7); text-decoration: none; }
.final-cta__mail:hover { color: var(--off-white); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--green-darkest); color: rgba(248,251,245,.6);
  border-top: 1px solid rgba(248,251,245,.1); padding: 28px var(--pad-x);
}
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
}
.footer__brand {
  display: flex; align-items: center; gap: 10px;
  font: 800 15px/1 var(--font-display); color: var(--off-white);
}
.footer__brand .omega {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-muted); display: inline-grid; place-items: center;
  color: var(--green-darkest); font: 800 11px var(--font-display);
}
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__links a {
  font: 600 13px/1 var(--font-body); color: rgba(248,251,245,.6);
  text-decoration: none; transition: color .2s ease;
}
.footer__links a:hover { color: var(--off-white); }
.footer__copy { font: 600 12px/1 var(--font-mono); }

/* ============================================================
   Reduced motion — disable all animation/transition.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   BRAND MARK (supplied logotype) — the swirl-o mark inside the
   existing circular chips; the wordmark carries the hero title
   ============================================================ */
.preloader__omega { display: grid; place-items: center; }
.preloader__omega img {
  display: block; width: 58%; height: auto;
  /* solid-color mark → white, to read on the dark chip */
  filter: brightness(0) invert(1);
}
.nav__logo { display: grid; place-items: center; }
.nav__logo img { display: block; width: 26px; height: auto; }
.thesis__medallion { display: grid; place-items: center; }
.thesis__medallion img { display: block; width: 56%; height: auto; }
.footer__brand .omega { display: inline-grid; place-items: center; }
.footer__brand .omega img { display: block; width: 62%; height: auto; }