/* ============================================================
   ROOT & RITUAL — Ayurvedic hair oil, premium DTC landing page
   Palette: dark forest green / amber / parchment (+ parchment-day light mode)
   Fonts: Fraunces (display) + Work Sans (body) + IBM Plex Mono (labels)
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root,
[data-theme='dark'] {
  /* Lightened a second time — the first pass (from the original near-black
     #0f1a14 base) was still read as "too dark." Same dark forest-green +
     amber family, pushed meaningfully brighter again, still short of a
     true light theme (that needs a full contrast pass across every
     section — see the theme-toggle note in script.js). */
  --ink: #1e3226;
  --green: #2d4c3a;
  --green-2: #3c6249;
  --green-3: #4a7458;
  --amber: #d0904a;
  --amber-light: #e8b378;
  --parchment: #f7f1e2;
  --parchment-dim: #ebe0c4;
  --rust: #a8503a;
  --line: rgba(247, 241, 226, 0.2);

  --color-bg: var(--green);
  --color-surface: var(--green-2);
  --color-surface-2: var(--green-3);
  --color-surface-offset: var(--ink);
  --color-text: var(--parchment);
  --color-text-muted: rgba(247, 241, 226, 0.72);
  --color-text-faint: rgba(247, 241, 226, 0.56);
  --color-border: var(--line);
  --color-accent: var(--amber);
  --color-accent-light: var(--amber-light);

  --shadow-card: 0 22px 45px -18px rgba(0, 0, 0, 0.55);
  --shadow-deep: 0 40px 80px -30px rgba(0, 0, 0, 0.65);

  --display: 'Fraunces', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  --text-hero: clamp(2.4rem, 1.2rem + 4vw, 4.6rem);
  /* Fixed micro-label sizes (mono, uppercase, non-fluid by design — nav
     links, eyebrows, tags, badges). Consolidates what was ~6 near-duplicate
     hand-picked sizes (9px/9.5px/10px/10.5px/11px/11.5px) into 2 shared steps. */
  --text-2xs: 10px;
  --text-label: 11px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- LIGHT MODE: "PARCHMENT DAY" ---------- */
[data-theme='light'] {
  --ink: #fbf7ec;
  --green: #f4ecd8;
  --green-2: #ede2c8;
  --green-3: #e6d9ba;
  --amber: #a8631f;
  --amber-light: #8c4f18;
  --parchment: #24301f;
  --parchment-dim: #3c4a34;
  --rust: #7a3122;
  --line: rgba(36, 48, 31, 0.14);

  --color-bg: var(--green);
  --color-surface: var(--green-2);
  --color-surface-2: var(--green-3);
  --color-surface-offset: var(--ink);
  --color-text: var(--parchment);
  --color-text-muted: rgba(36, 48, 31, 0.72);
  --color-text-faint: rgba(36, 48, 31, 0.5);
  --color-border: var(--line);
  --color-accent: var(--amber);
  --color-accent-light: var(--amber-light);

  --shadow-card: 0 22px 45px -20px rgba(60, 50, 20, 0.25);
  --shadow-deep: 0 40px 80px -30px rgba(60, 50, 20, 0.3);
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Fallback only — JS (script.js, "ANCHOR NAVIGATION") does the real,
     measured scroll for clicks/deep-links/back-forward. This just covers
     any anchor jump JS doesn't catch. Matches announce-bar (40px) + nav
     (84px) + breathing room, not just nav alone. */
  scroll-padding-top: calc(var(--announce-h, 40px) + 100px);
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  background: var(--green);
  color: var(--parchment);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  font-size: var(--text-base);
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
@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;
  }
}
a { color: inherit; text-decoration: none; }
img, picture, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--amber-light); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
/* Screen-reader-only: visually hidden but still announced by AT */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
section { position: relative; }

/* Scroll reveal — opacity + clip-path only, no layout shift */
.reveal {
  opacity: 0;
  clip-path: inset(12% 0 0 0);
  transition: opacity 0.9s var(--ease-out), clip-path 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; clip-path: inset(0 0 0 0); }

/* ---------- AMBIENT FALLING BOTANICALS ----------
   Site-wide decorative layer: leaves, oil drops, seeds, and small flowers
   drift slowly down the page margins the whole time you're scrolling —
   fixed to the viewport so it's visible everywhere, not just one section. */
#ambient-falling {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 6;
}
.af-item {
  position: absolute; top: 0; width: var(--size); height: var(--size);
  opacity: 0; color: var(--af-color, var(--amber-light));
  transform: translateY(-12vh) translateX(0) rotate(var(--rot0));
  animation: ambientFall var(--dur) linear infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 2px 5px oklch(from var(--ink) l c h / .3));
  will-change: transform, opacity;
}
.af-item svg { width: 100%; height: 100%; display: block; }
.af-item svg path, .af-item svg circle, .af-item svg ellipse { fill: currentColor; }
.af-leaf { --af-color: var(--amber-light); }
.af-drop { --af-color: var(--amber); }
.af-flower { --af-color: var(--parchment-dim); }
.af-flower .af-flower-center { fill: var(--rust) !important; }
.af-seed { --af-color: var(--rust); }
@keyframes ambientFall {
  0%   { transform: translateY(-12vh) translateX(0) rotate(var(--rot0)); opacity: 0; }
  8%   { opacity: var(--op); }
  90%  { opacity: var(--op); }
  100% { transform: translateY(112vh) translateX(var(--drift)) rotate(calc(var(--rot0) + 220deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #ambient-falling { display: none; }
}

/* ---------- NAV ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 4vw, 40px);
  background: linear-gradient(to bottom, oklch(from var(--ink) l c h / 0.92), transparent);
  backdrop-filter: blur(6px);
  transition: background var(--transition-interactive), top 0.3s var(--ease-out);
}
.nav-mark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 19px; font-weight: 500; }
.nav-mark svg { width: 26px; height: 26px; color: var(--amber-light); }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 34px); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; align-items: center; }
.nav-links a:not(.nav-cta) { opacity: 0.75; transition: opacity var(--transition-interactive); }
.nav-links a:not(.nav-cta):hover { opacity: 1; }
.nav-cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--amber); color: #10160f; border: 1px solid transparent; padding: 9px 18px; border-radius: 2px;
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.nav-cta:hover { background: var(--amber-light); transform: translateY(-1px); }
.theme-toggle {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--parchment);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), background var(--transition-interactive);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--amber-light); transform: rotate(14deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.nav-right { display: flex; align-items: center; gap: 20px; }

.nav-burger {
  display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0;
  transition: border-color var(--transition-interactive);
}
.nav-burger:hover { border-color: var(--amber-light); }
.nav-burger span { width: 14px; height: 1px; background: var(--parchment); display: block; transition: transform var(--transition-interactive), opacity var(--transition-interactive); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 280; background: oklch(from var(--ink) l c h / 0.64); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out);
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 290;
  display: flex; flex-direction: column; gap: 4px;
  padding: 88px 24px 28px;
  background: oklch(from var(--ink) l c h / 0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid oklch(from var(--parchment) l c h / 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 -1px 0 oklch(from var(--parchment) l c h / 0.1);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), visibility 0.4s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.mobile-menu a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--parchment); padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.mobile-menu a.nav-cta { text-align: center; margin-top: 12px; }

@media (max-width: 860px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-links .nav-cta { display: none; }
  nav { padding: 16px 20px; }
  .nav-burger { display: flex; }
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 44px; padding: 15px 28px; border-radius: 2px; display: inline-flex; align-items: center; gap: 10px;
  transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  border: 1px solid transparent; position: relative;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--amber); color: #10160f; box-shadow: 0 10px 30px -10px oklch(from var(--amber) l c h / 0.6); }
.btn-primary:hover { background: var(--amber-light); box-shadow: 0 16px 36px -12px oklch(from var(--amber) l c h / 0.7); }
.btn-ghost { border-color: var(--parchment-dim); color: var(--parchment); background: oklch(from var(--parchment) l c h / 0.04); }
.btn-ghost:hover { border-color: var(--parchment); background: oklch(from var(--parchment) l c h / 0.1); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 11px 18px; font-size: 11px; }

/* ---------- HERO ---------- */
.hero {
  min-height: max(720px, 100svh);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate; overflow: hidden; position: relative;
  padding: 150px 0 82px;
  background: var(--ink);
}
/* perspective here (not on .hero-video-layer itself) is what gives the
   slight residual tilt real depth instead of a flat skew. */
.hero-video-stack { position: absolute; inset: 0; z-index: -3; perspective: 1400px; }
.hero-video-layer {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  filter: saturate(0.86) contrast(1.04) brightness(0.78);
  /* Collapsed to a point at center by default — each layer (farm →
     herbs → bottle) opens into view through an expanding circular iris
     rather than a flat crossfade, which is what made the previous
     multi-clip version look like a jump-cut instead of one smooth motion. */
  clip-path: circle(0% at 50% 50%);
  transform-origin: center 50%;
  will-change: transform, clip-path;
}
.hero-video-layer.is-active { clip-path: circle(150% at 50% 50%); }
/* Scroll-driven circle-zoom reveal (iris opens + each layer settles from
   a slight zoom) lives in assets/js/cinematic.js ("SCENE 1 — HERO"); the
   fade/lift/stagger reveal on load lives in the same file's hero-intro
   block. Both are skipped entirely under reduced-motion (see below) — the
   video's autoplay loop is still allowed under reduced-motion per the
   same WCAG 2.3.3 reasoning already used for the story-section b-roll
   (ambient footage, no parallax/flash), see script.js. */
@media (prefers-reduced-motion: reduce) {
  .hero-video-layer { clip-path: circle(0% at 50% 50%) !important; transform: none !important; }
  .hero-video-layer.is-active { clip-path: circle(150% at 50% 50%) !important; }
  .hero-content { transform: none !important; opacity: 1 !important; }
  .split-char { opacity: 1 !important; transform: none !important; }
}
.hero-wash {
  position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background:
    linear-gradient(0deg, oklch(from var(--ink) l c h / 0.82) 0%, oklch(from var(--ink) l c h / 0.20) 42%, oklch(from var(--ink) l c h / 0.42) 100%);
}
/* Light theme: the dark-theme wash (derived from --ink, which flips to
   near-white in light mode) combined with the photo's own brightness(0.78)
   dimming filter was graying the whole hero photo out — dim, then wash
   with near-white, is exactly what flattens contrast/saturation. Lighter,
   warmer, lower-opacity wash + a brighter/more saturated photo filter
   keeps the farm/herb/bottle footage looking vivid instead of foggy. */
[data-theme='light'] .hero-video-layer { filter: saturate(1.05) contrast(1.06) brightness(0.97); }
[data-theme='light'] .hero-wash {
  background:
    linear-gradient(0deg, oklch(from var(--ink) l c h / 0.5) 0%, oklch(from var(--ink) l c h / 0.06) 42%, oklch(from var(--ink) l c h / 0.2) 100%);
}
.hero-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(24px, 4vw, 56px);
  max-width: 1180px; margin: 0 auto; width: 100%;
}
.hero-text { text-align: left; }
/* ---------- HERO PRODUCT: shown immediately on load, no scroll needed ----------
   Ad-traffic requirement: a visitor landing from an Instagram/TikTok/Facebook
   ad must see the actual bottle above the fold, not just background footage.
   Fast, springy 3D entrance (scale + rotateY) via the existing .reveal
   IntersectionObserver — the hero is already in view on load, so `.in` is
   added within the first frame and this plays immediately, not on scroll.
   Mouse-tilt comes from .tilt-card (script.js) on the *inner* wrapper, and
   the idle float loop lives on the *img* — three separate elements so the
   entrance transform, the tilt transform, and the float transform never
   overwrite one another. */
.hero-product {
  display: flex; align-items: center; justify-content: center; perspective: 1400px;
  opacity: 0;
  transform: scale(0.72) rotateY(-16deg) translateY(10px);
  transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring);
}
.hero-product.in { opacity: 1; transform: scale(1) rotateY(0deg) translateY(0); }
.hero-product-inner { position: relative; width: 100%; max-width: 340px; }
.hero-product-img {
  width: 100%; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 26px 34px oklch(from var(--ink) l c h / 0.4)) drop-shadow(0 4px 10px oklch(from var(--ink) l c h / 0.25));
  animation: heroProductFloat 4.5s var(--ease-out) 0.9s infinite alternate;
}
.hero-product-inner .card-shine {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), oklch(from var(--parchment) l c h / 0.22), transparent 62%);
}
@keyframes heroProductFloat { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-product { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-product-img { animation: none !important; }
}
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-light); margin-bottom: 22px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--amber-light); }
h1 {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: var(--text-hero); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--parchment); margin-bottom: 24px;
}
h1 em { font-style: normal; color: var(--amber-light); font-weight: 500; }
.hero-line { display: block; }
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* Liquid-glass CTA: the hero's one action now — deliberately restrained
   rather than a high-contrast amber button, to match the decluttered,
   product-forward hero (no competing CTAs, no duplicated quiz pitch —
   that lives in the .quiz section right below instead). */
.hero-ctas .liquid-glass { border-radius: 999px; }
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass:hover { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15); }
/* Light theme: the base liquid-glass tint (rgba(255,255,255,0.01), almost
   nothing) was tuned for LIGHT text over a dark-filtered photo — a
   near-invisible sheen was enough because the text itself did the
   contrast work. In light mode the hero CTA text is dark (var(--parchment)
   resolves near-black here), sitting over the same busy photo, so it
   needs a real solid-ish backing to stay legible instead of blending into
   whatever leaf/hand/dirt tone happens to be behind it at that moment. */
[data-theme='light'] .hero-ctas .liquid-glass {
  background: oklch(from var(--ink) l c h / 0.82);
  border: 1px solid oklch(from var(--parchment) l c h / 0.14);
  box-shadow: 0 8px 22px -10px oklch(from var(--parchment) l c h / 0.35);
}
[data-theme='light'] .hero-ctas .liquid-glass:hover {
  background: oklch(from var(--ink) l c h / 0.94);
  border-color: oklch(from var(--parchment) l c h / 0.24);
}
/* ---------- QUICK SHOP (below hero) ---------- */
/* The flagship oil, full size, right below the hero — for visitors who
   already know the product (e.g. from Instagram) and want to buy
   immediately without reading the rest of the page. Reuses the same
   [data-product-card]/[data-add-to-cart] wiring as the full shop grid,
   so it adds to the same cart the normal way. Previously a small corner
   overlay inside the hero itself; moved to its own section and sized up
   so it reads as a real product moment, not a floating badge. */
.quick-shop { padding: 56px 0; background: var(--green-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-shop .wrap { display: flex; justify-content: center; }
.quick-shop-card {
  display: flex; align-items: center; gap: 28px;
  max-width: 640px; width: 100%;
  padding: 20px 32px 20px 20px;
  background: var(--green); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* The real .price-option class (used by the full product-card toggles)
   sets its own display/size, which beats the [hidden] attribute — this
   one exists only to carry data-cart-price/data-cart-option for the add-
   to-cart handler, so force it invisible regardless. */
.quick-shop-card .price-option { display: none; }
.quick-shop-photo { width: 128px; height: 128px; object-fit: cover; object-position: center 18%; border-radius: var(--radius-md); flex-shrink: 0; }
.quick-shop-body { min-width: 0; flex: 1; }
.quick-shop-eyebrow { font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 8px; }
.quick-shop-name { font-family: var(--display); font-style: italic; font-size: var(--text-xl); color: var(--parchment); margin-bottom: 6px; }
.quick-shop-price { font-family: var(--mono); font-size: var(--text-sm); color: var(--amber-light); margin-bottom: 18px; }
.quick-shop-price span { color: var(--color-text-muted); }
.quick-shop-add { padding: 14px 32px; }
@media (max-width: 600px) {
  .quick-shop { padding: 40px 0; }
  .quick-shop-card { flex-direction: column; text-align: center; padding: 28px 24px; gap: 18px; }
  .quick-shop-photo { width: 108px; height: 108px; }
}

/* ---------- QUIZ ---------- */
.quiz { padding: 100px 0 120px; border-top: 1px solid var(--line); background: var(--green-2); }
.quiz-head { max-width: 620px; margin: 0 auto 50px; text-align: center; }
.section-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 18px; }
.section-label.center { display: flex; justify-content: center; }
h2 { font-family: var(--display); font-size: var(--text-2xl); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; }
.quiz-box {
  max-width: 660px; margin: 0 auto; background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 52px 50px; position: relative; min-height: 360px;
  box-shadow: var(--shadow-deep);
}
.quiz-progress { display: flex; gap: 6px; margin-bottom: 36px; }
.quiz-progress i { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.quiz-progress i span { display: block; height: 100%; width: 0%; background: var(--amber); transition: width 0.4s var(--ease-out); }
.quiz-progress i.done span, .quiz-progress i.active span { width: 100%; }
.q-step { display: none; }
.q-step.active { display: block; animation: qfade 0.45s var(--ease-out); }
@keyframes qfade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.q-num { font-family: var(--mono); font-size: 11px; color: var(--amber-light); margin-bottom: 14px; letter-spacing: 0.05em; }
.q-title { font-family: var(--display); font-size: var(--text-lg); font-style: italic; margin-bottom: 26px; line-height: 1.3; }
.q-options { display: flex; flex-direction: column; gap: 12px; }
.q-option {
  border: 1px solid var(--line); padding: 16px 20px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-sm); font-weight: 300; transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
  display: flex; justify-content: flex-start; align-items: center; gap: 14px;
}
.q-option:hover { border-color: var(--amber-light); background: oklch(from var(--amber) l c h / 0.06); transform: translateX(2px); }
.q-option.picked { border-color: var(--amber); background: oklch(from var(--amber) l c h / 0.12); }
.q-option .mark { font-family: var(--mono); font-size: var(--text-2xs); opacity: 0.55; flex-shrink: 0; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 32px; }
.quiz-back {
  min-height: 44px; padding: 0 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  color: var(--color-text-muted); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color var(--transition-interactive), color var(--transition-interactive);
}
.quiz-back:hover { border-color: var(--parchment-dim); color: var(--parchment); }
.quiz-back:disabled { visibility: hidden; }

.q-result { display: none; }
.q-result.active { display: block; animation: qfade 0.5s var(--ease-out); }
.result-tag { font-family: var(--mono); font-size: 11px; color: var(--amber-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.result-title { font-family: var(--display); font-style: italic; font-size: var(--text-xl); margin-bottom: 16px; }
.result-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 26px; font-weight: 300; }
.result-plan { border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; margin-bottom: 28px; }
.result-plan div { font-family: var(--mono); font-size: 10px; text-transform: uppercase; opacity: 0.5; margin-bottom: 6px; letter-spacing: 0.06em; }
.result-plan p { font-size: var(--text-sm); font-weight: 300; }

/* ---------- PROBLEM ---------- */
.problem { padding: 120px 0; border-top: 1px solid var(--line); }
.problem-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: start; }
.diff-compare { display: flex; flex-direction: column; margin-top: 8px; }
.diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.diff-row:first-child { border-top: 1px solid var(--line); }
.diff-col-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; margin-bottom: 8px; }
.diff-col p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }
.diff-col.no p { opacity: 0.6; text-decoration: line-through; text-decoration-color: oklch(from var(--rust) l c h / 0.5); text-decoration-thickness: 1px; }
.diff-col.yes p { color: var(--parchment); }

/* ---------- JOURNEY (3D tilt cards + parallax) ---------- */
.journey { padding: 140px 0 150px; background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.journey-parallax { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.journey-parallax svg { position: absolute; width: 100%; left: 0; }
.layer-far { bottom: -4%; opacity: 0.35; }
.layer-mid { bottom: -6%; opacity: 0.5; }
.layer-near { bottom: -10%; opacity: 0.7; }
.journey-head { max-width: 620px; margin-bottom: 70px; position: relative; z-index: 2; }
.journey-north-america { margin-top: 22px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 300; max-width: 600px; }
.journey-progress { display: flex; gap: 10px; margin-top: 26px; }
.journey-progress span { width: 22px; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.4s var(--ease-out), width 0.4s var(--ease-out); }
.journey-progress span.is-active { background: var(--amber); width: 34px; }
.journey-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; z-index: 2; perspective: 1400px; }

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  will-change: transform;
  position: relative;
}
.j-card {
  background: linear-gradient(160deg, var(--green-2), var(--green));
  border: 1px solid var(--line); border-radius: 8px; padding: 30px 26px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tilt-card:hover { box-shadow: var(--shadow-deep); border-color: var(--amber-light); }
.tilt-card .card-shine {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), oklch(from var(--parchment) l c h / 0.16), transparent 60%);
  transition: opacity 0.3s var(--ease-out);
  transform: translateZ(1px);
}
.tilt-card:hover .card-shine { opacity: 1; }
.j-stage-num { font-family: var(--mono); font-size: 11px; color: var(--amber-light); letter-spacing: 0.05em; transform: translateZ(10px); }
.j-icon { width: 38px; height: 38px; margin: 18px 0 20px; opacity: 0.9; transform: translateZ(34px); }
.j-card h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-lg); margin-bottom: 10px; transform: translateZ(24px); }
.j-card p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); transform: translateZ(16px); }
.j-benefit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--amber-light); letter-spacing: 0.02em; transform: translateZ(28px); }
@media (max-width: 960px) { .journey-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .journey-track { grid-template-columns: 1fr; } }

/* ---------- DUAL-CAP BOTTLE FEATURE ---------- */
.vessel-feature {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1fr); gap: clamp(34px, 5vw, 72px);
  align-items: center; max-width: 1000px; margin: 82px auto 0; padding-top: 70px; border-top: 1px solid var(--line);
}
.vessel-feature-media { aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-deep); border: 1px solid oklch(from var(--amber-light) l c h / .2); }
.vessel-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.vessel-feature-copy h3 { font-family: var(--display); font-size: var(--text-xl); line-height: 1.12; font-style: italic; font-weight: 400; margin-bottom: 18px; }
.vessel-feature-copy > p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); max-width: 48ch; }
.vessel-specs { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.vessel-specs span { font-family: var(--mono); color: var(--amber-light); font-size: var(--text-xs); letter-spacing: .01em; }
@media (max-width: 760px) { .vessel-feature { grid-template-columns: 1fr; margin-top: 54px; padding-top: 52px; } .vessel-feature-media { max-width: 440px; } }

/* ---------- STORY: What's Inside the Bottle (scrollytelling-lite) ---------- */
.story { padding: 150px 0 130px; background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.story-head { max-width: 640px; margin: 0 auto 70px; text-align: center; }
.story-head h2 { margin-bottom: 16px; }
.story-sub { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 300; }

.story-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  perspective: 1600px;
}

/* .tilt-card provides transform-style/transition/will-change already (shared with .journey / .shop) */
.story-tilt { height: 100%; }
.story-card {
  background: linear-gradient(160deg, var(--green-2), var(--green));
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.story-tilt:hover .story-card,
.story-tilt.in-view .story-card { box-shadow: var(--shadow-deep); border-color: var(--amber-light); }
.story-tilt .card-shine {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), oklch(from var(--amber-light) l c h / 0.22), transparent 60%);
  transition: opacity 0.3s var(--ease-out);
}
.story-tilt:hover .card-shine { opacity: 1; }

.story-media { position: relative; aspect-ratio: 4/5; overflow: hidden; transform: translateZ(1px); }
.story-media img,
.story-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-video, .pour-video, .motion-video { pointer-events: none; }
.story-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(from var(--ink) l c h / 0.55) 100%);
  pointer-events: none;
}

/* Living video tile: amber glow ring, feels alive vs. the static photo cards */
.story-card-video .story-media { box-shadow: inset 0 0 0 1px oklch(from var(--amber-light) l c h / 0.25); }
.story-card-video { position: relative; }
.story-card-video::before {
  content: ''; position: absolute; inset: -1px; border-radius: 13px; z-index: -1;
  background: radial-gradient(circle at 50% 0%, oklch(from var(--amber) l c h / 0.45), transparent 70%);
  opacity: 0.55; filter: blur(6px);
}

.story-body { padding: 24px 22px 28px; display: flex; flex-direction: column; flex: 1; transform: translateZ(24px); }
.story-stage-num { font-family: var(--mono); font-size: 11px; color: var(--amber-light); letter-spacing: 0.05em; margin-bottom: 10px; }
.story-body h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-lg); margin-bottom: 10px; }
.story-body p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }

@media (max-width: 960px) { .story-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .story { padding: 100px 0 90px; }
  .story-track { grid-template-columns: 1fr; gap: 22px; }
  .story-media { aspect-ratio: 16/10; }
}

@media (prefers-reduced-motion: reduce) {
  .story-tilt { transform: none !important; }
}

/* ---------- POUR: farm-to-bottle trust moment ---------- */
.pour { padding: 140px 0 0; border-top: 1px solid var(--line); background: var(--green-2); overflow: hidden; }
.pour-head { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.pour-head h2 { margin-bottom: 20px; }
.pour-sub { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 300; max-width: 480px; margin: 0 auto; }
.pour-unbox { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; max-width: 640px; margin: 70px auto 100px; }
.pour-unbox-photo { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; }
.pour-unbox-photo.small { aspect-ratio: 3/4; align-self: end; }
.pour-unbox-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.pour-unbox-photo:hover img { transform: scale(1.05); }

/* Full-bleed scroll-scrubbed video — the section's focal moment.
   .pour-visual is a tall, full-viewport-width scroll track (script.js,
   "POUR VIDEO SCRUB"); the frame sticks edge-to-edge while that height
   scrolls past, and the video's currentTime is set frame-by-frame from
   scroll position — the pour plays out exactly as fast or slow as the
   visitor scrolls, forward or backward. */
.pour-visual {
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: 220vh; position: relative;
}
.pour-video-frame {
  position: sticky; top: 0; width: 100%; height: 100svh;
  overflow: hidden;
}
.pour-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pour-video-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, oklch(from var(--ink) l c h / 0.55) 100%),
    linear-gradient(180deg, oklch(from var(--ink) l c h / 0.35) 0%, transparent 22%, transparent 78%, oklch(from var(--ink) l c h / 0.55) 100%);
}
.pour-video-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px;
  font-family: var(--mono); font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--parchment); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  /* The scroll-scrub effect (script.js skips it under reduced-motion too)
     is itself a motion effect independent of the calm video content, so
     collapse back to a normal non-sticky full-width block instead. */
  .pour-visual { width: auto; margin-left: 0; min-height: 0; }
  .pour-video-frame { position: relative; top: 0; height: auto; aspect-ratio: 16/9; }
}

.pour-caption {
  margin-top: var(--space-6); text-align: center; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); max-width: 220px;
}

/* Trust / promise badge strip */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 44px);
  margin-top: 90px; padding-top: 56px; border-top: 1px solid var(--line);
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  max-width: 130px;
}
.trust-item svg { width: 30px; height: 30px; color: var(--amber-light); }
.trust-item span {
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.02em; text-transform: none;
  color: var(--color-text-muted); line-height: 1.4;
}
@media (max-width: 900px) { .pour-visual { min-height: 160vh; } .pour-unbox { max-width: 420px; margin-top: 50px; } }
@media (max-width: 560px) { .trust-strip { gap: 26px 22px; } .trust-item { max-width: 100px; } }
@media (max-width: 480px) { .pour-video-frame { max-width: 100%; } }

/* Guarantee / return-policy strip — reuses trust-item visual language with a fuller layout */
.guarantee-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 56px; padding: 40px clamp(20px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(160deg, oklch(from var(--amber) l c h / 0.07), transparent 70%);
}
.guarantee-item { display: flex; align-items: flex-start; gap: 16px; }
.guarantee-item svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--amber-light); margin-top: 2px; }
.guarantee-title {
  font-family: var(--display); font-style: italic; font-size: var(--text-base); color: var(--amber-light);
  margin-bottom: 6px; line-height: 1.25;
}
.guarantee-item p { font-size: var(--text-xs); font-weight: 300; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 820px) {
  .guarantee-strip { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; padding: 32px 26px; }
}

/* ---------- INGREDIENTS ---------- */
/* Bottom padding trimmed from 140px — combined with .benefits' 120px top
   padding right after, the seam read as a rendering gap rather than
   intentional breathing room (see audit item #3). */
.ingredients { padding: 130px 0 90px; }
.ing-head { max-width: 620px; margin-bottom: 60px; }
.root-diagram { position: relative; width: 100%; overflow: visible; perspective: 1300px; }


.diagram-plane { transform: perspective(1300px) rotateX(38deg) rotateZ(-1.5deg) translateZ(0); transform-style: preserve-3d; transform-origin: center 48%; transition: transform 1.1s var(--ease-out); }
.root-diagram.in .diagram-plane { transform: perspective(1300px) rotateX(32deg) rotateZ(0) translateZ(20px); }
.root-diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram-orbit { fill: none; stroke: oklch(from var(--amber) l c h / .16); stroke-width: 1; stroke-dasharray: 3 12; }
.root-path {
  fill: none; stroke: var(--amber); stroke-width: 1.6; opacity: 0;
  stroke-dasharray: 680; stroke-dashoffset: 680;
  transition: stroke-dashoffset 1.1s var(--ease-out), opacity 0.6s var(--ease-out);
}
.root-node-dot { fill: var(--amber-light); stroke: var(--green-2); stroke-width: 3; opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.diagram-node text { fill: var(--color-text-muted); font-family: var(--mono); font-size: 27px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .5s var(--ease-out); }
.core-circle { fill: var(--green-2); stroke: var(--amber); stroke-width: 1.8; }
.core-ring { fill: none; stroke: oklch(from var(--amber-light) l c h / .38); stroke-width: 1; stroke-dasharray: 3 7; animation: coreOrbit 10s linear infinite; transform-origin: 550px 340px; }
.core-mark { fill: none; stroke: var(--amber-light); stroke-width: 1.6; opacity: 0; transition: opacity .6s var(--ease-out) .7s; }
.bottle-stream { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 3 8; opacity: .2; }
.stream-dot { fill: var(--amber-light); opacity: 0; animation: streamTravel 2.4s linear infinite; }
/* Stagger the eight radial lines as the formula closes in toward the center. */
.root-diagram.in .root-path { opacity: 0.55; stroke-dashoffset: 0; }
.root-diagram.in .root-node-dot { opacity: 1; transform: scale(1); }
.root-diagram.in .diagram-node text, .root-diagram.in .core-mark, .root-diagram.in .stream-dot { opacity: 1; }
.root-diagram.in .rp-1, .root-diagram.in .rn-1 { transition-delay: 0.05s; }
.root-diagram.in .rp-2, .root-diagram.in .rn-2 { transition-delay: 0.15s; }
.root-diagram.in .rp-3, .root-diagram.in .rn-3 { transition-delay: 0.25s; }
.root-diagram.in .rp-4, .root-diagram.in .rn-4 { transition-delay: 0.35s; }
.root-diagram.in .rp-5, .root-diagram.in .rn-5 { transition-delay: 0.35s; }
.root-diagram.in .rp-6, .root-diagram.in .rn-6 { transition-delay: 0.25s; }
.root-diagram.in .rp-7, .root-diagram.in .rn-7 { transition-delay: 0.15s; }
.root-diagram.in .rp-8, .root-diagram.in .rn-8 { transition-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) {
  .root-path { transition: none; opacity: 0.55; stroke-dashoffset: 0; }
  .root-node-dot { transition: none; opacity: 1; transform: scale(1); }
  .diagram-plane, .root-diagram.in .diagram-plane { transition: none; transform: perspective(1300px) rotateX(32deg) rotateZ(0); }
  .diagram-node text, .core-mark { transition: none; opacity: 1; }
  .core-ring { animation: none; }
}

/* Diagram + real ingredient photo, side by side (stacked on mobile) */
.ing-diagram-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center; }
.ing-photo-paired { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-card); }
.ing-photo-paired img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.ing-photo-paired:hover img { transform: scale(1.05); }
@media (max-width: 820px) { .ing-diagram-row { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 820px) {
  .diagram-plane, .root-diagram.in .diagram-plane { transform: perspective(1000px) rotateX(28deg) rotateZ(0); }
  .root-diagram { margin: 12px 0 28px; overflow: clip; }
  .diagram-node text { font-size: 32px; }
}
.ing-photo-grid-solo { grid-template-columns: minmax(0, 480px); justify-content: center; margin-left: auto; margin-right: auto; }

/* Amber particles move from each ingredient node to the formula core, then
   continue down the stream to the bottle. */
.flow-dot {
  fill: var(--amber-light);
  opacity: 0;
  offset-distance: 0%;
  animation: flowTravel 3.2s linear infinite;
}
.root-diagram.in .flow-dot { opacity: 0.9; }
.flow-dot.fd-1 { offset-path: path('M550,78 C550,172 550,252 550,340'); animation-delay: 0s; }
.flow-dot.fd-2 { offset-path: path('M790,125 C722,192 651,273 550,340'); animation-delay: .38s; }
.flow-dot.fd-3 { offset-path: path('M972,282 C820,286 687,310 550,340'); animation-delay: .76s; }
.flow-dot.fd-4 { offset-path: path('M858,502 C754,454 647,399 550,340'); animation-delay: 1.14s; }
.flow-dot.fd-5 { offset-path: path('M650,570 C626,484 589,408 550,340'); animation-delay: 1.52s; }
.flow-dot.fd-6 { offset-path: path('M450,570 C474,484 511,408 550,340'); animation-delay: 1.90s; }
.flow-dot.fd-7 { offset-path: path('M242,502 C346,454 453,399 550,340'); animation-delay: 2.28s; }
.flow-dot.fd-8 { offset-path: path('M128,282 C280,286 413,310 550,340'); animation-delay: 2.66s; }
@keyframes flowTravel {
  0% { offset-distance: 100%; opacity: 0; }
  8% { opacity: 0.95; }
  92% { opacity: 0.95; }
  100% { offset-distance: 0%; opacity: 0; }
}
/* Browsers without offset-path support (rare) simply keep the dot hidden at
   opacity 0 above — the static converged lines still communicate the idea. */
@supports not (offset-path: path('M0,0')) {
  .flow-dot, .stream-dot { display: none; }
}

@keyframes coreOrbit { to { transform: rotate(360deg); } }
@keyframes streamTravel {
  0% { offset-distance: 0%; opacity: 0; }
  12%, 80% { opacity: .95; }
  100% { offset-distance: 100%; opacity: 0; }
}
.stream-dot.sd-1 { offset-path: path('M550,380 C550,430 550,470 550,506'); animation-delay: .3s; }
.stream-dot.sd-2 { offset-path: path('M550,380 C550,430 550,470 550,506'); animation-delay: 1.1s; }
.stream-dot.sd-3 { offset-path: path('M550,380 C550,430 550,470 550,506'); animation-delay: 1.9s; }

/* Mini bottle-fill icon — the final visual stop for every botanical. */
.mini-bottle-outline { fill: var(--green-2); stroke: var(--amber); stroke-width: 1.4; opacity: 0; transition: opacity 0.5s var(--ease-out) 0.4s; }
.mini-bottle-neck, .mini-bottle-cap { fill: var(--green-2); stroke: var(--amber); stroke-width: 1.2; opacity: 0; transition: opacity 0.5s var(--ease-out) 0.4s; }
.mini-bottle-fill { fill: var(--amber); opacity: 0; transform-box: fill-box; transform-origin: bottom; }
.root-diagram.in .mini-bottle-outline,
.root-diagram.in .mini-bottle-neck,
.root-diagram.in .mini-bottle-cap { opacity: 1; }
.root-diagram.in .mini-bottle-fill { opacity: 0.9; animation: miniBottleFill 3.2s var(--ease-out) 0.6s infinite; }
@keyframes miniBottleFill {
  0%, 8% { transform: scaleY(0); }
  55%, 100% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-dot, .stream-dot { display: none; }
  .mini-bottle-outline, .mini-bottle-neck, .mini-bottle-cap { transition: none; opacity: 1; }
  .mini-bottle-fill { animation: none; opacity: 0.9; transform: scaleY(1); }
}

.ing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 30px; }
.ing-grid-8 { grid-template-columns: repeat(4, 1fr); gap: 40px 28px; margin-top: 54px; }
.ing-cell {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--d) * 90ms);
}
.ing-grid-8.in .ing-cell { opacity: 1; transform: translateY(0); }
.ing-icon { width: 26px; height: 26px; color: var(--amber-light); margin-bottom: 14px; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .ing-cell { transition: none; opacity: 1; transform: none; }
}
@media (max-width: 900px) { .ing-grid.ing-grid-8 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ing-grid.ing-grid-8 { grid-template-columns: 1fr; gap: 30px; } }
.ing-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.ing-photo { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-card); }
.ing-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.ing-photo:hover img { transform: scale(1.05); }
.ing-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
  background: linear-gradient(to top, oklch(from var(--ink) l c h / 0.92), transparent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--parchment);
  text-transform: uppercase;
}
.ing-name { font-family: var(--display); font-style: italic; font-size: var(--text-lg); color: var(--amber-light); margin-bottom: 6px; }
.ing-role { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin-bottom: 10px; }
.ing-desc { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); max-width: 220px; }
@media (max-width: 820px) { .ing-grid:not(.ing-grid-8) { grid-template-columns: 1fr 1fr; row-gap: 30px; } .ing-photo-grid { grid-template-columns: 1fr; } }

/* Horizontal-scroll gallery of multi-ingredient photos */
.ing-gallery-head { max-width: 620px; margin: 60px auto 24px; text-align: center; }
.ing-gallery-head h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-xl); margin-bottom: 8px; }
.ing-gallery-head p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }
.ing-gallery { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 14px; margin: 0 calc(var(--wrap-pad, 0px) * -1); scroll-snap-type: x proximity; }
.ing-gallery-track { display: flex; gap: 18px; padding: 2px 4px; width: max-content; }
.ing-gallery-item { position: relative; flex: 0 0 auto; width: 300px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-card); scroll-snap-align: start; }
.ing-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.ing-gallery-item:hover img { transform: scale(1.05); }
.ing-gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  background: linear-gradient(to top, oklch(from var(--ink) l c h / 0.92), transparent);
  font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.01em; color: var(--parchment);
}
.ing-gallery::-webkit-scrollbar { height: 6px; }
.ing-gallery::-webkit-scrollbar-thumb { background: oklch(from var(--amber) l c h / .35); border-radius: 999px; }
.ing-gallery::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 640px) { .ing-gallery-item { width: 240px; } }

/* Consolidated ingredient-directory summary, personalized by quiz result when available */
.ing-summary { max-width: 720px; margin: 70px auto 0; padding: 30px 34px; border: 1px solid var(--line); border-radius: 14px; background: oklch(from var(--amber) l c h / 0.06); text-align: center; }
.ing-summary-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber-light); margin-bottom: 12px; }
.ing-summary-text { font-size: var(--text-base); font-weight: 300; line-height: 1.65; color: var(--color-text); }
@media (max-width: 640px) { .ing-summary { padding: 24px 20px; margin-top: 50px; } }

/* ---------- HOW TO APPLY ---------- */
.application { padding: 124px 0 132px; background: var(--green-2); border-top: 1px solid var(--line); }
.application-head { max-width: 700px; margin-bottom: 60px; }
.application-head h2 { max-width: 650px; margin-bottom: 18px; }
.application-head p { max-width: 560px; font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }
.application-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); align-items: stretch; gap: clamp(34px, 5vw, 72px); }
.application-video-wrap { display: flex; }
.application-video-frame {
  position: relative; width: 100%; min-height: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px;
  border: 1px solid oklch(from var(--amber-light) l c h / .34);
  box-shadow: 0 40px 88px -38px rgba(0,0,0,.7), 0 0 64px -16px oklch(from var(--amber) l c h / .25);
}
.application-video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.application-video-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, oklch(from var(--ink) l c h / .16), transparent 40%, oklch(from var(--ink) l c h / .62)); }
.application-video-caption { position: absolute; inset: auto 0 0; padding: 20px 22px; color: var(--parchment); font-family: var(--mono); font-size: 10.5px; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.ritual-timeline { display: flex; flex-direction: column; justify-content: center; padding: 12px 0; }
.timeline-intro { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.timeline-intro > span { font-family: var(--mono); color: var(--amber-light); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.timeline-intro p { margin-top: 10px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 300; max-width: 43ch; }
.ritual-timeline ol { list-style: none; }
.ritual-timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.timeline-day { font-family: var(--display); color: var(--amber-light); font-size: clamp(2rem, 3vw, 3rem); line-height: .9; font-style: italic; }
.timeline-day small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; font-style: normal; letter-spacing: .08em; color: var(--color-text-faint); }
.ritual-timeline li p { color: var(--color-text-muted); font-weight: 300; font-size: var(--text-sm); line-height: 1.55; }
@media (min-width: 1024px) {
  .application-grid { align-items: start; }
  .application-video-wrap { position: sticky; top: 100px; align-self: start; }
}
@media (max-width: 820px) {
  .application { padding: 76px 0 84px; }
  .application-head { margin-bottom: 40px; }
  .application-grid { grid-template-columns: 1fr; }
  .application-video-frame { max-width: 560px; }
}
@media (max-width: 480px) {
  .ritual-timeline li { grid-template-columns: 74px 1fr; gap: 16px; }
  .application-video-caption { padding: 16px; font-size: 9.5px; }
}

/* ---------- RITUAL ---------- */
.ritual { padding: 130px 0; border-top: 1px solid var(--line); }
.ritual-head { max-width: 580px; margin-bottom: 70px; }
.steps { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; max-width: 780px; margin: 0 auto; }
.step { background: var(--green); transition: background var(--transition-interactive); }
.step[open] { background: oklch(from var(--green) l c h / 1); }
.step summary {
  display: flex; align-items: center; gap: 22px; padding: 28px 34px; cursor: pointer; list-style: none;
}
.step summary::-webkit-details-marker { display: none; }
.step summary::after {
  content: '+'; margin-left: auto; font-family: var(--mono); font-size: 20px; color: var(--amber-light);
  flex-shrink: 0; transition: transform var(--transition-interactive);
}
.step[open] summary::after { transform: rotate(45deg); }
.step-num { font-family: var(--mono); font-size: 12px; color: var(--amber-light); flex-shrink: 0; width: 108px; }
.step summary h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-lg); margin: 0; }
.step p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); padding: 0 34px 26px calc(34px + 108px + 22px); }
@media (max-width: 640px) {
  .step summary { padding: 22px 20px; gap: 14px; }
  .step-num { width: auto; font-size: 10.5px; }
  .step summary h3 { font-size: var(--text-base); }
  .step p { padding: 0 20px 22px 20px; }
}

/* Ritual commitment device — 21 nights framing + light-touch guarantee callback (full policy lives in #pour) */
.ritual-commit {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
  margin-top: 56px; padding: 40px 44px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, oklch(from var(--amber) l c h / 0.08), transparent 60%);
}
.ritual-commit-copy h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-xl); margin-bottom: 12px; }
.ritual-commit-copy p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }
.ritual-commit-guarantee {
  display: flex; align-items: flex-start; gap: 16px; padding-left: 36px; border-left: 1px solid var(--line);
}
.ritual-commit-guarantee svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--amber-light); margin-top: 2px; }
.ritual-commit-guarantee .guarantee-title { font-family: var(--display); font-style: italic; font-size: var(--text-base); color: var(--amber-light); margin-bottom: 6px; }
.ritual-commit-guarantee p { font-size: var(--text-xs); font-weight: 300; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 820px) {
  .ritual-commit { grid-template-columns: 1fr; padding: 32px 26px; gap: 26px; }
  .ritual-commit-guarantee { padding-left: 0; padding-top: 22px; border-left: none; border-top: 1px solid var(--line); }
}

/* ---------- CINEMATIC BREAK ---------- */
/* A pinned clip-path reveal: the video window starts small and rounded,
   expands to fill the screen as you scroll through the section's 400vh,
   then contracts again — driven in assets/js/cinematic.js. Static (CSS)
   state below is the fully-open frame, so content is correct even before
   JS runs or under reduced-motion. */
.cinematic { position: relative; height: 400vh; background: var(--ink); }
.cinematic-sticky {
  position: sticky; top: 0; width: 100%; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--ink);
}
.cinematic-video-frame { position: absolute; inset: 0; will-change: clip-path; }
.cinematic-video { width: 100%; height: 100%; object-fit: cover; }
.cinematic-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, oklch(from var(--ink) l c h / 0.5) 0%, transparent 30%, transparent 70%, oklch(from var(--ink) l c h / 0.5) 100%);
}
.cinematic-content { position: relative; z-index: 2; text-align: center; }
.cinematic-heading {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: var(--text-hero); line-height: 1.06; letter-spacing: -0.01em; color: var(--parchment);
}
.cin-line { display: block; }
.cin-line em { font-style: normal; color: var(--amber-light); font-weight: 500; }
.cinematic-counter {
  position: absolute; bottom: 40px; right: 48px; z-index: 2;
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); color: var(--parchment);
}
.cinematic-count { font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.cinematic-count-label { font-size: 10.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 820px) {
  .cinematic-counter { display: none; }
}
/* No pinning on mobile — same "no long pinned sections" rule the hero
   scene follows. Just a normal full-bleed video block with a fade-in. */
@media (max-width: 767px) {
  .cinematic { height: auto; }
  .cinematic-sticky { position: relative; height: 100svh; }
  .cinematic-video-frame { clip-path: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic { height: auto; }
  .cinematic-sticky { position: relative; height: 70svh; }
  .cinematic-video-frame { clip-path: none !important; position: absolute; }
  .cin-line { opacity: 1 !important; transform: none !important; }
  .cinematic-counter { display: none; }
}

/* ---------- SHOP / PRODUCT LINE ---------- */
/* Bottom padding trimmed from 150px — combined with .expanding's 120px top
   padding right after, the seam right after the 6 product cards read as a
   rendering gap rather than intentional breathing room (audit item #3). */
.shop { padding: 130px 0 100px; border-top: 1px solid var(--line); background: var(--green-2); }
.shop-head { max-width: 640px; margin: 0 auto 64px; text-align: center; }
.shop-trust-strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--color-text-muted);
}
.shop-trust-strip span { color: var(--amber-light); font-weight: 500; }
@media (max-width: 640px) { .shop-trust-strip { gap: 8px 18px; font-size: 10.5px; } }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; perspective: 1600px; } /* base gap/display; column count overridden below for 4-up grid */
.product-card {
  background: linear-gradient(165deg, var(--ink), var(--green));
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  will-change: transform;
  position: relative;
}
.product-card.featured { border-color: var(--amber); }
.product-card:hover { box-shadow: var(--shadow-deep); border-color: var(--amber-light); }
.product-card .card-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), oklch(from var(--parchment) l c h / 0.14), transparent 60%);
  transition: opacity 0.3s var(--ease-out); z-index: 2;
}
.product-card:hover .card-shine { opacity: 1; }
.product-badge {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--amber); color: #10160f; padding: 6px 12px; border-radius: 999px;
  transform: translateZ(30px);
}
.product-photo { aspect-ratio: 4/5; overflow: hidden; transform: translateZ(0); position: relative; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.product-card:hover .product-photo img { transform: scale(1.04); }
/* Soft vignette that fades in with the zoom — draws focus to the bottle's
   center the way an agency-site image reveal does, without a custom cursor. */
.product-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, oklch(from var(--ink) l c h / 0.5) 100%);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.product-card:hover .product-photo::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .product-photo img { transition: none; }
  .product-card:hover .product-photo img { transform: none; }
}
.product-body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; transform: translateZ(20px); }
.product-name { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 8px; }
.product-desc { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 300; margin-bottom: 18px; flex: 1; }
.product-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; font-family: var(--mono); }
.product-size { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.size-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
.size-row .product-size { margin: 0; }
.size-change-link {
  font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--amber-light); text-decoration: underline; text-underline-offset: 2px; flex-shrink: 0;
}
.size-change-link:hover { color: var(--parchment); }
.product-price { font-size: var(--text-lg); color: var(--amber-light); font-family: var(--display); font-style: normal; font-weight: 500; }
.product-price span { font-family: var(--mono); font-size: 10.5px; opacity: 0.5; font-weight: 400; }



/* Subscribe & Save price toggle on product cards. Border-top + padding
   chunks the card into "info" (name/desc/benefits/size) vs "purchase"
   (price options + CTA) so dense cards read as two clear groups rather
   than one long uninterrupted stack. */
.price-toggle { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.price-option {
  display: flex; flex-direction: column; gap: 6px; text-align: left; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; min-height: 72px;
  background: transparent; width: 100%;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.price-option:hover { border-color: var(--amber-light); }
.price-option.is-selected {
  border-color: var(--amber); background: oklch(from var(--amber) l c h / 0.16);
  box-shadow: inset 0 0 0 1px var(--amber);
}
.price-option-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-option-label {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.price-option.is-selected .price-option-label { color: var(--amber-light); }
.price-save-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--amber); color: #10160f; padding: 3px 8px; border-radius: 999px;
}
.price-option-amount {
  font-family: var(--display); font-size: var(--text-lg); font-weight: 500; color: var(--parchment);
}
.price-option-amount span {
  font-family: var(--mono); font-size: 10px; font-weight: 400; opacity: 0.55; text-transform: none; letter-spacing: 0;
}
.product-body .product-size {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6;
  margin-bottom: 16px;
}

/* Coming Soon teaser card */
.product-card-soon { opacity: 0.72; border-style: dashed; }
.product-card-soon:hover { opacity: 0.88; }
.product-card-soon .soon-ribbon {
  background: var(--green-3); color: var(--parchment); border: 1px solid var(--amber-light);
}
.soon-photo {
  aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--green-2), var(--ink)); color: var(--amber-light);
}
.soon-photo svg { width: 76px; height: 76px; opacity: 0.7; }
.product-card-soon .product-name { color: var(--color-text-muted); }

/* Shop grid: 4 real products + 1 teaser, responsive */
.shop-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .shop-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } }
@media (max-width: 640px) { .shop-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- EXPANDING THE RITUAL (haircare line, coming soon) ---------- */
.expanding { padding: 120px 0 140px; border-top: 1px solid var(--line); background: var(--green-2); }
.expanding-grid { grid-template-columns: repeat(5, 1fr); gap: 26px; }
.expanding-grid .product-card-soon .product-desc { min-height: 84px; }
.expanding-note {
  /* var(--color-text-faint) (0.5 alpha) only hits 3.68:1 on this section's
     lighter green background; bumped locally rather than raising the
     shared token everywhere. */
  text-align: center; font-size: var(--text-xs); color: rgba(247, 241, 226, 0.62); font-weight: 300;
  max-width: 520px; margin: 36px auto 0;
}
@media (max-width: 1180px) { .expanding-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } }
@media (max-width: 640px) { .expanding-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- OFFER ---------- */
.offer { padding: 130px 0; border-top: 1px solid var(--line); }
.offer-card {
  background: linear-gradient(135deg, var(--ink), var(--green-2));
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 64px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center;
  position: relative; overflow: hidden;
}
.offer-card::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, oklch(from var(--amber) l c h / 0.18), transparent 70%);
}
.offer-price { font-family: var(--display); font-size: var(--text-2xl); font-weight: 400; }
.offer-price span { font-family: var(--mono); font-size: var(--text-xs); opacity: 0.6; font-weight: 400; }
.offer-list { list-style: none; margin: 26px 0 34px; display: flex; flex-direction: column; gap: 12px; }
.offer-list li { display: flex; gap: 12px; font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); }
.offer-list li::before { content: '—'; color: var(--amber-light); flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq { padding: 130px 0; border-top: 1px solid var(--line); }
.faq-head { max-width: 620px; margin: 0 auto 54px; text-align: center; }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 4px 24px; background: var(--green-2);
  transition: border-color var(--transition-interactive);
}
.faq-item:hover { border-color: var(--amber-light); }
.faq-item[open] { border-color: var(--amber-light); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 28px 20px 0; position: relative;
  font-family: var(--display); font-style: italic; font-size: var(--text-base); font-weight: 400;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-family: var(--body); font-size: 1.4rem; font-weight: 300; color: var(--amber-light);
  transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); padding: 0 0 22px; max-width: 640px; line-height: 1.6; }
.faq-item p a { color: var(--amber-light); text-decoration: underline; text-decoration-color: oklch(from var(--amber-light) l c h / 0.4); }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
@media (max-width: 480px) { .faq { padding: 90px 0; } .faq-item { padding: 4px 16px; } .faq-item summary { padding: 16px 26px 16px 0; } }
@media (max-width: 820px) { .offer-card { grid-template-columns: 1fr; padding: 40px 28px; } }

/* ---------- TESTIMONIALS ---------- */
.testimonials { padding: 110px 0; border-top: 1px solid var(--line); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.test-card blockquote { font-family: var(--display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; margin-bottom: 20px; color: var(--parchment); }
.test-meta { font-family: var(--mono); font-size: 11px; opacity: 0.55; letter-spacing: 0.03em; }
@media (max-width: 820px) { .test-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Honest "coming soon" placeholder — replaces fabricated named testimonials on this pre-launch site */
.test-soon {
  max-width: 560px; margin: 56px auto 0; text-align: center; padding: 56px 40px;
  border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(ellipse 90% 80% at 50% 0%, oklch(from var(--amber) l c h / 0.08), transparent 70%);
}
.test-soon-icon { width: 46px; height: 46px; color: var(--amber-light); margin: 0 auto 22px; }
.test-soon-lead { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 12px; }
.test-soon-sub { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); margin-bottom: 26px; line-height: 1.6; }
@media (max-width: 480px) { .test-soon { padding: 40px 24px; } }

.reviews-intro { max-width: 560px; margin: 18px auto 0; text-align: center; font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); line-height: 1.6; }

/* Rating summary — average score + star histogram, computed from REVIEWS.
   Stays hidden via the [hidden] attribute until real reviews exist. */
.review-summary {
  display: flex; align-items: center; gap: 48px; max-width: 680px; margin: 48px auto 0;
  padding: 32px 40px; border: 1px solid var(--line); border-radius: 14px; background: var(--color-surface);
}
.review-summary[hidden] { display: none; }
.review-summary-score { flex: none; text-align: center; }
.review-summary-number { font-family: var(--display); font-size: var(--text-2xl); color: var(--parchment); line-height: 1; }
.review-summary-stars { color: var(--amber-light); font-size: 18px; letter-spacing: 2px; margin: 8px 0 6px; }
.review-summary-count { font-family: var(--mono); font-size: 11px; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.review-summary-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.review-summary-bar-row { display: flex; align-items: center; gap: 10px; }
.review-summary-bar-label { font-family: var(--mono); font-size: 11px; color: var(--color-text-faint); width: 10px; text-align: right; }
.review-summary-bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
.review-summary-bar-fill { height: 100%; background: var(--amber); border-radius: 999px; }
.review-summary-bar-count { font-family: var(--mono); font-size: 11px; color: var(--color-text-faint); width: 18px; }
@media (max-width: 640px) { .review-summary { flex-direction: column; gap: 20px; padding: 28px 26px; } }

/* Founder's note — real, first-person copy, not a customer testimonial */
.founder-note {
  display: flex; align-items: flex-start; gap: 28px; max-width: 720px; margin: 56px auto 0;
  padding: 36px 40px; border: 1px solid var(--line); border-radius: 14px; background: var(--color-surface);
}
.founder-photo-frame {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--amber-light); background: var(--color-surface-2);
}
.founder-photo-frame svg { width: 32px; height: 32px; }
.founder-quote { font-family: var(--display); font-style: italic; font-size: var(--text-base); line-height: 1.6; color: var(--parchment); margin-bottom: 12px; }
.founder-signoff { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-text-faint); text-transform: uppercase; }
@media (max-width: 640px) { .founder-note { flex-direction: column; align-items: center; text-align: center; padding: 30px 26px; } }

/* Video testimonial slots — real <video> markup, graceful fallback when the source file doesn't exist yet */
.review-video-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 56px auto 0; }
.review-video-card {
  position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--color-surface-2);
}
.review-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-video-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: oklch(from var(--ink) l c h / 0.55); color: var(--parchment); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); cursor: pointer; transition: transform var(--transition-interactive), background var(--transition-interactive);
}
.review-video-play svg { width: 20px; height: 20px; margin-left: 2px; }
.review-video-play:hover { transform: scale(1.06); background: oklch(from var(--ink) l c h / 0.7); }
.review-video-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted);
  background: linear-gradient(to top, oklch(from var(--ink) l c h / 0.75), transparent);
}
.review-video-card.media-missing .review-video-play { display: none; }
.review-video-card.media-missing::after {
  content: 'Coming Soon'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint);
  background: var(--color-surface-2);
}
@media (max-width: 720px) { .review-video-row { grid-template-columns: 1fr; max-width: 340px; } }

/* Category filters — functional, wired to script.js's REVIEWS array */
.review-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 940px; margin: 56px auto 0; }
.review-filter-pill {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
  cursor: pointer; background: transparent; transition: border-color var(--transition-interactive), color var(--transition-interactive), background var(--transition-interactive);
}
.review-filter-pill:hover { border-color: var(--parchment-dim); color: var(--parchment); }
.review-filter-pill.is-active { border-color: var(--amber); color: var(--amber-light); background: oklch(from var(--amber) l c h / 0.1); }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 900px; margin: 40px auto 0; }
.review-grid:empty { display: none; }
@media (max-width: 820px) { .review-grid { grid-template-columns: 1fr; } }

.review-grid-empty { max-width: 480px; margin: 40px auto 0; text-align: center; padding: 40px 30px; }
.review-grid-empty svg { width: 36px; height: 36px; color: var(--amber-light); margin: 0 auto 16px; opacity: 0.7; }
.review-grid-empty p { font-size: var(--text-sm); font-weight: 300; color: rgba(247, 241, 226, 0.58); line-height: 1.6; }
.review-grid-empty.is-hidden { display: none; }

/* Review cards — populated from REVIEWS in script.js */
.review-card {
  padding: 26px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--color-surface);
  display: flex; flex-direction: column; gap: 14px;
}
.review-card-head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 15px; color: var(--amber-light); background: var(--color-surface-2); border: 1px solid var(--line);
}
.review-card-name { font-size: var(--text-sm); color: var(--parchment); }
.review-verified { font-family: var(--mono); font-size: 10px; color: var(--amber-light); text-transform: uppercase; letter-spacing: 0.03em; margin-left: 4px; }
.review-card-meta { font-family: var(--mono); font-size: 10.5px; color: var(--color-text-faint); margin-top: 2px; }
.review-card-stars { color: var(--amber-light); font-size: 14px; letter-spacing: 1px; }
.review-card-quote { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); line-height: 1.6; }
.review-card-tag {
  align-self: flex-start; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-text-faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
}

.review-load-more { display: flex; margin: 32px auto 0; }
.review-load-more[hidden] { display: none; }

.review-cta { max-width: 480px; margin: 56px auto 0; text-align: center; }
.review-cta-lead { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 10px; }
.review-cta-sub { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); margin-bottom: 22px; line-height: 1.6; }

@media (max-width: 480px) { .founder-note, .review-cta { padding-left: 4px; padding-right: 4px; } }

/* ---------- THE RITUAL, IN MOTION: lifestyle/mood video pair ---------- */
.motion-ritual { padding: 130px 0 150px; border-top: 1px solid var(--line); background: var(--green-2); }
.motion-head { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.motion-head h2 { margin-bottom: 16px; }
.motion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.motion-tile { display: flex; }
.motion-video-frame {
  position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden;
  border: 1px solid oklch(from var(--amber-light) l c h / 0.35);
  box-shadow:
    0 40px 80px -32px rgba(0, 0, 0, 0.6),
    0 0 60px -12px oklch(from var(--amber) l c h / 0.3),
    inset 0 0 0 1px oklch(from var(--amber-light) l c h / 0.12);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.motion-video-frame:hover { transform: translateY(-4px); }
.motion-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion-video-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, oklch(from var(--ink) l c h / 0.15) 0%, transparent 24%, transparent 74%, oklch(from var(--ink) l c h / 0.55) 100%);
}
.motion-video-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--parchment); text-align: center;
}
@media (prefers-reduced-motion: reduce) { .motion-video-frame { transition: none; } .motion-video-frame:hover { transform: none; } }
@media (max-width: 820px) { .motion-grid { grid-template-columns: 1fr; gap: 24px; max-width: 420px; margin: 0 auto; } }

/* ---------- WAITLIST MODAL ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: oklch(from var(--ink) l c h / 0.75); backdrop-filter: blur(6px);
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  max-width: 460px; width: 100%; padding: 44px 40px; position: relative;
  box-shadow: var(--shadow-deep);
  transform: scale(0.94) translateY(10px); opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); opacity: 1; }
.modal-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--parchment); opacity: 0.65;
  transition: opacity var(--transition-interactive), background var(--transition-interactive);
}
.modal-close:hover { opacity: 1; background: oklch(from var(--parchment) l c h / 0.08); }
.modal-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 14px; }
.modal-title { font-family: var(--display); font-style: italic; font-size: var(--text-xl); margin-bottom: 12px; }
.modal-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 28px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-family: var(--mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.form-field-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.modal-form input {
  background: var(--green-2); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px;
  min-height: 48px; color: var(--parchment); font-family: var(--body); font-size: 1rem;
  transition: border-color var(--transition-interactive);
}
.modal-form input::placeholder { color: var(--color-text-faint); }
.modal-form input:focus-visible { outline: none; border-color: var(--amber-light); }
.modal-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 16px; line-height: 1.5; }
.modal-success { display: none; text-align: center; padding: 20px 0; }
.modal-success.show { display: block; }
.modal-success svg { width: 44px; height: 44px; color: var(--amber-light); margin: 0 auto 18px; }
.modal-success h3 { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 10px; }
.modal-success p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Policy modals (Privacy / Terms / Shipping) — reuse the waitlist modal shell, wider for longer copy */
.modal-box-wide { max-width: 560px; max-height: 82vh; overflow-y: auto; }
.policy-body p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 16px; }
.policy-body p:last-child { margin-bottom: 0; }
.policy-body strong { color: var(--parchment); font-weight: 500; }
@media (max-width: 480px) { .modal-box-wide { padding: 36px 26px; } }

/* ---------- FOOTER ---------- */
footer { padding: 80px 0 40px; border-top: 1px solid var(--line); background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
.footer-mark { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 14px; }
.footer-desc { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); max-width: 280px; }
.footer-col-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: 16px; }
.footer-col a { display: block; font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); margin-bottom: 10px; transition: color var(--transition-interactive); }
.footer-col a:hover { color: var(--amber-light); }
.footer-form { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--parchment-dim); margin-top: 4px; }
.footer-form input { min-width: 0; min-height: 44px; background: none; border: none; color: var(--parchment); font-family: var(--body); font-size: 1rem; flex: 1; outline: none; }
.footer-form input::placeholder { color: var(--color-text-faint); }
.footer-form button { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--amber-light); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.footer-about { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.footer-about p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 640px; font-weight: 300; }
.footer-shipping { font-family: var(--mono); font-size: 11px; color: var(--color-text-faint); margin-top: 14px; letter-spacing: 0.02em; }
/* color, not opacity — opacity here was compounding with .footer-legal-links
   button's own opacity (0.4 * 0.55 = 0.22 effective), pushing the policy
   links to a 1.8:1 contrast ratio. */
.footer-bottom { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--color-text-muted); flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.footer-legal-links { opacity: 1; }
.footer-legal-links button {
  background: none; border: none; min-width: 44px; min-height: 44px; padding: 0 4px; font-family: var(--mono); font-size: 11px; color: var(--parchment);
  opacity: 0.55; cursor: pointer; transition: opacity var(--transition-interactive), color var(--transition-interactive);
}
.footer-legal-links button:hover { opacity: 1; color: var(--amber-light); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
  .hero { min-height: max(690px, 100svh); align-items: center; padding-top: 128px; padding-bottom: 58px; }
  .hero-wash { background: linear-gradient(0deg, oklch(from var(--ink) l c h / .88) 0%, oklch(from var(--ink) l c h / .24) 46%, oklch(from var(--ink) l c h / .50) 100%); }
  [data-theme='light'] .hero-wash { background: linear-gradient(0deg, oklch(from var(--ink) l c h / .58) 0%, oklch(from var(--ink) l c h / .1) 46%, oklch(from var(--ink) l c h / .26) 100%); }
  /* Stack text above product, both centered — the bottle still has to be
     visible without any scroll for ad traffic landing on mobile, just at
     a size that leaves room for the headline + CTA above it. */
  .hero-content { grid-template-columns: 1fr; gap: 22px; }
  .hero-text { text-align: center; }
  .eyebrow { justify-content: center; }
  .hero-product-inner { max-width: 240px; }
  .hero-product-img { animation-duration: 4s; }
  .problem-grid { grid-template-columns: 1fr; gap: 36px; }
  .diff-row { grid-template-columns: 1fr; gap: 8px; }
  .quiz-box { padding: 36px 24px; }
  .offer-card { padding: 40px 28px; }

  /* Tighten oversized desktop section rhythm for mobile */
  .quiz { padding: 64px 0 72px; }
  .problem { padding: 72px 0; }
  .journey { padding: 76px 0 84px; }
  .journey-head { margin-bottom: 44px; }
  .pour { padding: 76px 0 60px; }
  .trust-strip { margin-top: 56px; padding-top: 40px; }
  .ingredients { padding: 76px 0 54px; }
  .ing-head { margin-bottom: 40px; }
  .ritual { padding: 76px 0; }
  .shop { padding: 76px 0 54px; }
  .offer { padding: 76px 0; }
  .testimonials { padding: 64px 0; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 116px 0 48px; min-height: 680px; }
  .hero-content { gap: 14px; }
  h1 { margin-bottom: 16px; }
  .eyebrow { margin-bottom: 14px; }
  .hero-product-inner { max-width: 190px; }
  .quiz-box { padding: 28px 18px; }
  .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CART, SUPPLEMENT DISCLOSURES & CONTACT ---------- */
.nav-cart {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--parchment); position: relative; flex-shrink: 0;
  transition: border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive);
}
.nav-cart:hover { border-color: var(--amber-light); background: oklch(from var(--amber) l c h / 0.1); transform: translateY(-1px); }
.nav-cart svg { width: 19px; height: 19px; }
.cart-count {
  position: absolute; min-width: 18px; height: 18px; padding: 0 4px; top: -4px; right: -5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: #10160f;
  font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1;
  transform: scale(0); transform-origin: center; transition: transform var(--transition-interactive);
}
.cart-count.has-items { transform: scale(1); }
.mobile-cart-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--parchment); padding: 16px 4px; border-bottom: 1px solid var(--line); text-align: left;
}
.mobile-cart-count { color: var(--amber-light); font-size: 10px; }
.supplement-disclaimer {
  font-size: 12px; color: var(--color-text-faint); line-height: 1.45; margin: -2px 0 16px; font-weight: 300;
}

.cart-backdrop {
  position: fixed; inset: 0; z-index: 880; background: oklch(from var(--ink) l c h / 0.64); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out);
}
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; z-index: 900; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column;
  background: var(--ink); border-left: 1px solid var(--line); box-shadow: -30px 0 80px -24px rgba(0, 0, 0, 0.68);
  transform: translateX(102%); visibility: hidden; transition: transform 0.42s var(--ease-out), visibility 0.42s;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }
.cart-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 24px 20px; border-bottom: 1px solid var(--line); }
.cart-drawer-head .modal-eyebrow { margin-bottom: 5px; }
.cart-drawer h2 { font-family: var(--display); font-style: italic; font-size: var(--text-xl); font-weight: 400; }
.cart-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: -8px -8px 0 0; color: var(--parchment); opacity: 0.65; border-radius: 50%; }
.cart-close:hover { opacity: 1; background: oklch(from var(--parchment) l c h / 0.08); }
.cart-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 18px; }
.cart-item { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item-image { width: 78px; height: 92px; object-fit: cover; border-radius: 6px; background: var(--green-2); }
.cart-item-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'info price' 'controls controls'; gap: 8px 12px; }
.cart-item-info { grid-area: info; min-width: 0; }
.cart-item-name { font-family: var(--display); font-style: italic; font-size: var(--text-base); line-height: 1.2; }
.cart-item-option { margin-top: 4px; color: var(--color-text-faint); font-family: var(--mono); font-size: 10px; line-height: 1.4; }
.cart-line-price { grid-area: price; color: var(--amber-light); font-family: var(--display); font-size: var(--text-base); white-space: nowrap; }
.cart-item-controls { grid-area: controls; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quantity-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.quantity-stepper button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--parchment); font-size: 17px; line-height: 1; }
.quantity-stepper button:hover { color: var(--amber-light); background: oklch(from var(--parchment) l c h / 0.07); }
.quantity-stepper span { width: 30px; text-align: center; font-family: var(--mono); font-size: 11px; }
.cart-remove { color: var(--color-text-faint); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; min-height: 32px; padding: 0 2px; }
.cart-remove:hover { color: var(--amber-light); }
.cart-empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 18px; }
.cart-empty svg { width: 42px; color: var(--amber-light); margin-bottom: 18px; opacity: 0.82; }
.cart-empty h3 { font-family: var(--display); font-size: var(--text-lg); font-style: italic; font-weight: 400; margin-bottom: 8px; }
.cart-empty p { max-width: 250px; color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: 22px; }
.cart-continue { color: var(--amber-light); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px; }
.cart-continue:hover { color: var(--parchment); }
.cart-footer { border-top: 1px solid var(--line); padding: 20px 24px max(24px, env(safe-area-inset-bottom)); }
.cart-footer[hidden] { display: none; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.cart-subtotal strong { font-family: var(--display); color: var(--amber-light); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; }
.cart-note { font-size: 11px; color: var(--color-text-faint); line-height: 1.45; margin: 10px 0 16px; }

.whatsapp-float {
  position: fixed; z-index: 700; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive);
}
.whatsapp-float svg { width: 31px; height: 31px; }
.whatsapp-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34); }
.whatsapp-tooltip { position: absolute; right: 70px; width: max-content; padding: 8px 10px; border-radius: 4px; background: var(--ink); color: var(--parchment); border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; opacity: 0; pointer-events: none; transform: translateX(5px); transition: opacity var(--transition-interactive), transform var(--transition-interactive); }
.whatsapp-float:hover .whatsapp-tooltip, .whatsapp-float:focus-visible .whatsapp-tooltip { opacity: 1; transform: translateX(0); }
.cart-drawer.is-open ~ .whatsapp-float, .modal-overlay.open ~ .whatsapp-float { opacity: 0; pointer-events: none; transform: scale(0.88); }

@media (max-width: 860px) {
  .nav-right { gap: 10px; }
}
@media (max-width: 480px) {
  .nav-mark { gap: 7px; font-size: 17px; }
  .nav-mark svg { width: 22px; height: 22px; }
  .nav-right { gap: 6px; }
  .nav-cart, .theme-toggle, .nav-burger { width: 40px; height: 40px; }
  .cart-count { top: -5px; right: -5px; }
  .cart-drawer { width: 100%; }
  .cart-drawer-head { padding: 22px 18px 18px; }
  .cart-items { padding: 6px 18px 16px; }
  .cart-footer { padding: 18px 18px max(18px, env(safe-area-inset-bottom)); }
  .cart-item { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .cart-item-image { width: 70px; height: 84px; }
  .whatsapp-float { width: 56px; height: 56px; right: 16px; bottom: 16px; }
  .whatsapp-tooltip { display: none; }
}

body.cart-open { overflow: hidden; }

/* ============================================================
   ANNOUNCEMENT BAR — 10% off first order, opens waitlist modal
   ============================================================ */
.announce-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 310; height: var(--announce-h, 40px);
  background: var(--ink); border-bottom: 1px solid var(--line); padding: 0;
  display: flex; align-items: center; overflow: hidden;
  transition: height 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
/* Two stacked fixed bars eat real vertical space on scroll; once the visitor
   is actually reading content (past the hero), collapse the promo bar so
   only the nav stays fixed — reclaims ~40px without merging two different
   jobs (promo vs. navigation) into one crowded bar. */
body.scrolled .announce-bar { height: 0; border-color: transparent; }
body.scrolled nav { top: 0 !important; }
.announce-bar-inner { width: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: nowrap; text-align: center; white-space: nowrap; }
.announce-text { font-size: var(--text-xs); color: var(--parchment-dim); font-weight: 300; overflow: hidden; text-overflow: ellipsis; }
.announce-text strong { color: var(--amber-light); font-weight: 600; white-space: nowrap; }
.announce-cta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--amber-light); border: 1px solid var(--amber-light); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: transform var(--transition-interactive), background var(--transition-interactive), color var(--transition-interactive);
  flex-shrink: 0;
}
.announce-cta:hover { background: var(--amber-light); color: var(--ink); transform: translateY(-1px); }
/* Nav sits directly below the fixed announcement bar instead of at the viewport top */
nav { top: var(--announce-h, 40px) !important; }
@media (max-width: 640px) {
  :root { --announce-h: 38px; }
  .announce-bar-inner { gap: 8px; }
  .announce-text { font-size: 10.5px; max-width: 62vw; }
  .announce-detail { display: none; }
  .announce-cta { padding: 6px 12px; font-size: 10px; }
}

/* ============================================================
   TRUST MARQUEE — continuously scrolling badge ticker
   ============================================================ */
.trust-marquee { overflow: hidden; position: relative; margin-top: 54px; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.trust-track { display: inline-flex; gap: 56px; padding-right: 56px; animation: trustScroll 32s linear infinite; will-change: transform; }
.trust-marquee { display: flex; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-item { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.trust-item svg { width: 22px; height: 22px; color: var(--amber-light); flex-shrink: 0; }
@keyframes trustScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation: none; } }

/* ============================================================
   INGREDIENT ACCORDION — compact 20-ingredient directory
   ============================================================ */
.ing-directory { max-width: 920px; margin: 70px auto 0; border: 1px solid var(--line); border-radius: 16px; background: oklch(from var(--ink) l c h / 0.12); transition: border-color var(--transition-interactive); }
.ing-directory[open] { border-color: var(--amber-light); }
.ing-directory-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; cursor: pointer; list-style: none; text-align: left; }
.ing-directory-summary::-webkit-details-marker { display: none; }
.ing-directory-summary-text h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--text-xl); margin-bottom: 8px; }
.ing-directory-summary-text h3 span { display: inline-block; margin-left: 10px; font-family: var(--mono); font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber-light); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; vertical-align: middle; }
.ing-directory-summary-text p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); max-width: 560px; }
.ing-directory-summary-icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; transition: transform var(--transition-interactive), border-color var(--transition-interactive); }
.ing-directory-summary-icon::before, .ing-directory-summary-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--amber-light); transform: translate(-50%, -50%); transition: transform var(--transition-interactive); }
.ing-directory-summary-icon::before { width: 14px; height: 1.4px; }
.ing-directory-summary-icon::after { width: 1.4px; height: 14px; }
.ing-directory[open] .ing-directory-summary-icon { border-color: var(--amber-light); }
.ing-directory[open] .ing-directory-summary-icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.ing-directory > .ing-accordion { max-width: 100%; margin: 0; padding: 0 30px 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
@media (max-width: 640px) {
  .ing-directory-summary { padding: 20px; gap: 14px; }
  .ing-directory-summary-text h3 { font-size: var(--text-lg); }
  .ing-directory > .ing-accordion { padding: 0 20px 20px; }
}
.ing-acc-item { border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; transition: border-color var(--transition-interactive); background: oklch(from var(--ink) l c h / 0.12); }
.ing-acc-item:hover { border-color: var(--amber-light); }
.ing-acc-item[open] { border-color: var(--amber-light); }
.ing-acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; cursor: pointer; list-style: none; }
.ing-acc-item summary::-webkit-details-marker { display: none; }
.ing-acc-item summary::after { content: '+'; font-family: var(--mono); font-size: 15px; color: var(--amber-light); flex-shrink: 0; transition: transform var(--transition-interactive); }
.ing-acc-item[open] summary::after { transform: rotate(45deg); }
.ing-acc-name { font-family: var(--display); font-style: italic; font-size: var(--text-base); color: var(--amber-light); }
.ing-acc-role { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; margin-left: 10px; }
.ing-acc-item p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); padding: 0 0 18px; line-height: 1.55; }
@media (max-width: 760px) { .ing-accordion, .ing-directory > .ing-accordion { grid-template-columns: 1fr; } .ing-acc-role { display: block; margin-left: 0; margin-top: 3px; } }

/* ============================================================
   BENEFITS — "what's in it for you" (cosmetic/sensory only)
   ============================================================ */
.benefits { padding: 120px 0; border-top: 1px solid var(--line); background: var(--green-2); }
.benefits-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; max-width: 1040px; margin: 0 auto; }
.benefit-item { text-align: left; }
.benefit-item svg { width: 30px; height: 30px; color: var(--amber-light); margin-bottom: 16px; }
.benefit-title { font-family: var(--display); font-style: italic; font-size: var(--text-lg); margin-bottom: 8px; }
.benefit-item p { font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); line-height: 1.55; max-width: 280px; }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .benefits-grid { grid-template-columns: 1fr; } }

/* For every scalp — application section addendum */
.application-for-all { margin-top: 20px; font-size: var(--text-sm); font-weight: 300; color: var(--color-text-muted); line-height: 1.6; padding: 16px 18px; border-left: 2px solid var(--amber-light); background: oklch(from var(--ink) l c h / 0.14); border-radius: 0 8px 8px 0; }
.application-for-all span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amber-light); display: block; margin-bottom: 4px; }

/* ============================================================
   HOW WE COMPARE — My Organic Blend vs. a typical drugstore oil
   ============================================================ */
.compare { padding: 130px 0; border-top: 1px solid var(--line); }
.compare-head { max-width: 680px; margin: 0 auto; text-align: center; }
.compare-stats { max-width: 720px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.compare-stat { background: oklch(from var(--ink) l c h / 0.22); padding: 20px 14px; text-align: center; }
.compare-stat-num { font-family: var(--display); font-style: italic; font-size: var(--text-2xl); color: var(--amber-light); line-height: 1; }
.compare-stat-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--parchment); margin-top: 6px; }
.compare-stat-sub { font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.3; }
.compare-table-scroll { max-width: 920px; margin: 20px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; }
.compare-table { width: max-content; min-width: 100%; }
.compare-scroll-hint { display: none; text-align: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 10px 0 0; }
.compare-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr; min-width: 640px; }
.compare-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.compare-row-head { background: oklch(from var(--ink) l c h / 0.3); }
/* Zebra striping: 10+ rows of small text is hard to track across; alternating
   tint lets the eye follow one row across all 3 columns without a rebuild. */
.compare-row:not(.compare-row-head):nth-child(even) { background: oklch(from var(--ink) l c h / 0.14); }
.compare-cell { padding: 11px 14px; font-size: 12.5px; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.compare-cell-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 400; }
.compare-cell-us { color: var(--parchment); font-weight: 300; background: oklch(from var(--amber) l c h / 0.06); }
.compare-cell-them { color: var(--color-text-faint); font-weight: 300; }
.compare-row-head .compare-cell { padding: 14px 14px; }
.compare-row-head .compare-cell-us { font-family: var(--display); font-style: italic; font-size: var(--text-base); color: var(--amber-light); background: none; }
.compare-row-head .compare-cell-them { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.compare-cell svg.ck, .compare-cell svg.xk { width: 13px; height: 13px; flex-shrink: 0; }
.compare-cell svg.ck { color: var(--amber-light); }
.compare-cell svg.xk { color: var(--color-text-faint); opacity: 0.6; }
.compare-locale { max-width: 720px; margin: 40px auto 0; text-align: center; padding: 22px 28px; border: 1px solid var(--line); border-radius: 14px; background: oklch(from var(--ink) l c h / 0.14); }
.compare-locale-title { font-family: var(--display); font-style: italic; font-size: var(--text-lg); color: var(--amber-light); margin-bottom: 14px; }
.compare-locale-items { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.compare-locale-item { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--parchment-dim); }
.compare-locale-item svg { width: 15px; height: 15px; color: var(--amber-light); flex-shrink: 0; }
.compare-locale p { font-size: 13px; font-weight: 300; color: var(--color-text-muted); line-height: 1.6; max-width: 480px; margin: 0 auto; }
@media (max-width: 700px) {
  .compare-scroll-hint { display: block; }
  .compare-stats { grid-template-columns: repeat(3, 1fr); }
  .compare-stat { padding: 14px 8px; }
  .compare-stat-num { font-size: var(--text-xl); }
  .compare-stat-label { font-size: 9px; }
  .compare-stat-sub { display: none; }
  .compare-locale-items { gap: 12px 16px; }
}

/* ============================================================
   PRODUCT BENEFIT CHIPS — short "what it does" tags per SKU
   ============================================================ */
.product-benefit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.product-benefit-chips span { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--amber-light); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }

/* ============================================================
   SIZE / QUANTITY SELECTOR — 30ml / 50ml / 100ml / multi-pack
   ============================================================ */
.size-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 14px 0 6px; }
.size-toggle[hidden] { display: none; }
.size-option {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-align: center;
  border: 1px solid var(--line); background: transparent; color: var(--color-text-muted);
  border-radius: var(--radius-md); padding: 7px 12px; cursor: pointer; transition: border-color var(--transition-interactive), color var(--transition-interactive), background var(--transition-interactive);
}
.size-option:hover { border-color: var(--amber-light); color: var(--parchment); }
.size-option.is-selected { border-color: var(--amber-light); background: oklch(from var(--amber) l c h / 0.14); color: var(--amber-light); }
.size-note { font-size: var(--text-2xs); color: var(--color-text-faint); font-weight: 300; margin-bottom: 14px; }

/* ============================================================
   REVIEW CATEGORY PREVIEW — honest "coming soon" enrichment
   ============================================================ */
.review-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 14px; }
.review-categories span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; }
.test-soon-note { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 300; margin-bottom: 22px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ============================================================
   SHOP SECTION — visual polish only, no price changes
   ============================================================ */
.shop { background: radial-gradient(ellipse 900px 500px at 50% 0%, oklch(from var(--amber) l c h / 0.08), transparent 60%), var(--green-2); }
.shop-grid .product-card { transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive); }