/* ==========================================================================
   Vera & Vine — brand site
   Palette + type locked to the pitch deck. Motion: calm, long, restrained.
   Performance rule: animate ONLY transform + opacity (compositor-friendly).
   ========================================================================== */

/* ---------- fonts — self-hosted, latin subset, variable ----------
   Downloaded 11 Aug 2026 from Google Fonts' own CDN (Fraunces v38, Inter v20),
   latin subset only (~197 KB total, three files). Self-hosting removes both
   third-party connections and the FOIT/reflow of the render-blocking CSS hop;
   the CSP in _headers no longer allows the Google origins, deliberately.
   The two *Fallback faces are metric-matched stand-ins (size-adjust computed
   from real string advance widths, ascent/descent from the font tables) so the
   ~1 frame before the WOFF2 arrives paints at the SAME line breaks and heights
   — no layout shift on swap. */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  size-adjust:104.68%;
  ascent-override:93.42%;
  descent-override:24.36%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  size-adjust:105.25%;
  ascent-override:92.04%;
  descent-override:22.92%;
  line-gap-override:0%;
}

:root{
  /* brand */
  --ink:      #04160D;
  --emerald:  #0A2A1B;
  --canopy:   #16482F;
  --fern:     #2F7D4F;
  --dew:      #8FBF86;
  --gold:     #D8B45F;
  --cream:    #F3EFE2;
  --morning:  #F0F6DC;

  --serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* motion — long + soft = premium.
     --ease-out is expo-flavoured: fast leave, very long settle — reads as
     weight rather than snap. --ease-soft stays for colour/opacity fades. */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur:       1100ms;

  --maxw: 1180px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* NOTE: deliberately NOT `scroll-behavior:smooth`. CSS smooth-scroll silently
   swallowed anchor jumps here (including on-load #hash), leaving the nav dead.
   Smooth scrolling is done in main.js instead, where it is verifiable. */
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* `clip` (not `hidden`) — `hidden` makes body a scroll container and silently
     breaks in-page anchor scrolling / scrollIntoView. */
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* craft: the small states people notice without noticing */
::selection{ background:rgba(216,180,95,.85); color:var(--ink); }
:root{ accent-color:var(--gold); caret-color:var(--gold); }

/* visually hidden but read by assistive tech (marquee strip's real copy) */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:var(--ink); padding:.75rem 1.25rem; border-radius:0 0 6px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:760px; }
.wrap--split{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .wrap--split{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.center{ text-align:center; }
.narrow{ max-width:62ch; margin-inline:auto; }

.section{ padding-block:clamp(5rem,12vw,10rem); position:relative; }
/* keep the sticky nav from covering a heading when jumping to an anchor */
[id]{ scroll-margin-top:5.5rem; }
/* The free-review CTA target sits INSIDE the section, past its top padding, so it
   needs only the nav's worth of clearance. Landing it higher keeps the heading,
   the panel and the button itself on one phone screen. */
#free-review{ scroll-margin-top:4.25rem; }
@media (min-width:760px){ #free-review{ scroll-margin-top:5.5rem; } }

/* ---------- type ----------
   Fraunces is a variable font with a 9..144pt optical axis: font-optical-sizing
   lets display sizes take the high-contrast display cut and small sizes the
   sturdier text cut, automatically. text-wrap:balance/pretty are progressive —
   balanced headings, no orphans in the ledes, ignored by older engines. */
.h2{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  font-size:clamp(2rem,1.4rem + 2.8vw,3.5rem);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 1.25rem;
  color:var(--morning);
  text-wrap:balance;
}
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin:0 0 1rem;
}
.lede{
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  line-height:1.7; color:rgba(243,239,226,.86); margin:0 0 1.25rem;
}
p{ margin:0 0 1.15rem; color:rgba(243,239,226,.74); text-wrap:pretty; }
em{ font-style:italic; }

.divider{ margin:1.75rem auto 3rem; opacity:.5; width:120px; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(243,239,226,.28);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.95rem 1.9rem;
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.02em;
  text-decoration:none; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  position:relative; overflow:hidden;
  transition:transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out),
             background-color 400ms var(--ease-soft), border-color 400ms var(--ease-soft);
  will-change:transform;
}
.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-bd:var(--gold); font-weight:600; }
.btn--ghost:hover{ --btn-bd:rgba(216,180,95,.75); }
.btn--lg{ padding:1.1rem 2.4rem; font-size:1rem; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px -12px rgba(216,180,95,.5); }
.btn:active{ transform:translateY(-1px); }
/* sheen */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform 900ms var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(4,22,13,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(243,239,226,.08);
  transform:translateY(-100%);
  transition:transform 700ms var(--ease-out);
}
.nav.is-visible{ transform:translateY(0); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav__mark{ width:34px; height:34px; }
.nav__word{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.06em; color:var(--morning);
}
.nav__word em{ color:var(--gold); font-style:normal; }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2.5vw,2rem); }
.nav__links a{
  font-size:.87rem; text-decoration:none; color:rgba(243,239,226,.78);
  position:relative; padding-block:.25rem;
  transition:color 300ms var(--ease-soft);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform 450ms var(--ease-out);
}
.nav__links a:hover{ color:var(--morning); }
.nav__links a:not(.nav__cta):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  border:1px solid rgba(216,180,95,.5); border-radius:999px; padding:.45rem 1.1rem !important;
  color:var(--gold) !important;
  transition:background-color 350ms var(--ease-soft), transform 350ms var(--ease-out);
}
.nav__cta:hover{ background:rgba(216,180,95,.14); transform:translateY(-1px); }
@media (max-width:640px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ==========================================================================
   HERO — "the clearing": dark canopy, light centre
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:7rem var(--pad) 5rem;
  text-align:center; overflow:hidden;
  background:var(--ink);
}
/* dense canopy edges */
.hero__canopy{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(47,125,79,.22), transparent 60%),
    radial-gradient(90% 70% at 0% 0%,   rgba(10,42,27,.85), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(10,42,27,.85), transparent 55%),
    linear-gradient(180deg, #04160D 0%, #071c11 45%, #04160D 100%);
}
/* the clearing itself — a soft breathing light */
.hero__glow{
  position:absolute; left:50%; top:46%;
  width:min(105vw,1000px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(216,180,95,.20) 0%,
    rgba(143,191,134,.11) 32%,
    transparent 66%);
  filter:blur(12px);
  animation:breathe 11s var(--ease-soft) infinite;
  will-change:transform;
}
@keyframes breathe{
  0%,100%{ opacity:.82; }
  50%    { opacity:1; }
}
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(4,22,13,.75) 100%);
}
/* film grain over the clearing — kills the flat "CSS gradient" look for ~1KB.
   A static tiled SVG (feTurbulence) at 4% via soft-light: texture you feel
   rather than see. Static image, zero animation cost. */
.hero::after,
.section--ritual::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url("assets/grain.svg") repeat;
  background-size:180px 180px;
  opacity:.04; mix-blend-mode:soft-light;
}
/* nature-pattern artwork, both edges, tunnelling into the clearing (16 Sep 2026).
   One generated SVG (assets/hero-art.svg), mirrored for the right side, masked so
   it dissolves toward the centre and at the top/bottom. Sits above the canopy and
   below the copy. Slow drift only; reduced-motion kills it globally. */
.hero__art{
  position:absolute; top:0; bottom:0; z-index:1; pointer-events:none;
  width:min(46vw, 680px);
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.95) 0%, rgba(0,0,0,.85) 45%, rgba(0,0,0,0) 100%),
                     linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to right, rgba(0,0,0,.95) 0%, rgba(0,0,0,.85) 45%, rgba(0,0,0,0) 100%),
                     linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity:.8;
}
.hero__art--left{ left:0; }
.hero__art--right{ right:0; transform:scaleX(-1); }
.hero__art-inner{
  position:absolute; inset:-6% -4%;
  background:url("assets/hero-art.svg") no-repeat center / cover;
  animation:artDrift 48s ease-in-out infinite;
  will-change:transform;
}
.hero__art--right .hero__art-inner{ animation-delay:-24s; }
@keyframes artDrift{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  50%    { transform:translate3d(0,-10px,0) rotate(1.2deg) scale(1.025); }
}
@media (max-width:768px){
  .hero__art{ width:70vw; opacity:.32; }
}
.hero__inner{ position:relative; z-index:2; max-width:940px; }

.hero__emblem{ width:clamp(64px,9vw,88px); margin:0 auto 2rem; }
.hero__eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.5rem; font-weight:500;
}
/* Teaser pill (added 9 Sep 2026): name + season only, never an effect. Links to the early-access list. */
.hero__teaser{
  display:inline-flex; align-items:center; gap:.55rem;
  margin:0 0 1.4rem; padding:.42rem 1rem .42rem .8rem;
  border:1px solid rgba(216,180,95,.45); border-radius:999px;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--cream); text-decoration:none;
  background:rgba(4,22,13,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease-soft), transform .3s var(--ease-out);
}
.hero__teaser:hover{ border-color:rgba(216,180,95,.9); transform:translateY(-2px); }
.hero__teaser-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(216,180,95,.18); flex:none; }
@media (max-width:480px){ .hero__teaser{ font-size:.6rem; letter-spacing:.1em; padding:.4rem .85rem .4rem .7rem; } }
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-optical-sizing:auto;
  font-size:clamp(2.8rem,1.5rem + 6.6vw,7rem);
  line-height:1.02; letter-spacing:-.03em;
  margin:0 0 1.75rem; color:var(--morning);
}
/* line-mask reveal — each line rises out of its own clip with a hint of tilt
   that settles flat, like a page being smoothed. Pure CSS: runs with or
   without JS, and the reduced-motion block flattens it entirely. */
.hero__title .line{ display:block; overflow:hidden; padding-block:.04em; }
.hero__title .line > span{
  display:block;
  transform:translateY(108%) rotate(.6deg);
  transform-origin:0 100%;
  animation:lineUp 1500ms var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.25s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.42s; }
@keyframes lineUp{ to{ transform:translateY(0) rotate(0deg); } }

.hero__sub{
  font-size:clamp(1.02rem,.98rem + .5vw,1.3rem);
  max-width:56ch; margin:0 auto 2.5rem; color:rgba(243,239,226,.82);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
/* hero buttons lifted above the artwork (16 Sep 2026): heavier, larger, with a
   soft lift; the ghost becomes a solid dark pill with a firm gold-tinted border. */
.btn--hero{
  font-size:1.02rem; font-weight:600; padding:.95rem 1.6rem;
  letter-spacing:.005em;
}
.btn--gold.btn--hero{
  box-shadow:0 6px 24px rgba(216,180,95,.28), 0 1px 0 rgba(255,255,255,.25) inset;
}
.btn--gold.btn--hero strong{ font-weight:800; }
.btn--hero-ghost{
  --btn-bg:rgba(4,22,13,.72); --btn-fg:var(--cream); --btn-bd:rgba(216,180,95,.6);
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bd);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.btn--hero-ghost:hover{ border-color:var(--gold); background:rgba(4,22,13,.9); }


.hero__scroll{
  position:absolute; left:50%; bottom:2.25rem; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero__scrollline{
  width:1px; height:52px; background:linear-gradient(var(--gold),transparent);
  transform-origin:top; animation:drip 2.6s var(--ease-soft) infinite;
}
@keyframes drip{ 0%,100%{ transform:scaleY(.35); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }
.hero__scrolltext{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(243,239,226,.5);
}

/* ==========================================================================
   STRIP
   ========================================================================== */
/* A slow editorial marquee: one approved sentence, drifting. The real copy
   lives once, visually hidden, for screen readers + no-CSS; the moving track
   is aria-hidden decoration. CSS-only, so it runs identically with JS off.
   Pauses on hover; reduced-motion swaps back to the static centred line. */
.strip{
  background:var(--canopy);
  border-block:1px solid rgba(243,239,226,.09);
  padding:1.15rem 0;
  text-align:center;
  overflow:hidden;
  position:relative;
}
/* soft fade at both edges so the text emerges rather than pops */
.strip::before,.strip::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(2rem,8vw,7rem);
  z-index:2; pointer-events:none;
}
.strip::before{ left:0;  background:linear-gradient(90deg,var(--canopy),transparent); }
.strip::after{  right:0; background:linear-gradient(270deg,var(--canopy),transparent); }
.strip__text{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,.95rem + .4vw,1.35rem); color:var(--morning);
}
.strip__track{
  display:flex; width:max-content;
  animation:stripDrift 48s linear infinite;
}
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__group{
  display:flex; align-items:baseline; gap:2.75rem; padding-right:2.75rem;
  font-family:var(--serif); font-style:italic; white-space:nowrap;
  font-size:clamp(1rem,.95rem + .4vw,1.35rem); color:var(--morning);
}
.strip__leaf{ color:var(--gold); opacity:.7; font-style:normal; }
@keyframes stripDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .strip__track{ display:none; }
  .strip .strip__text{  /* un-hide the static line; overrides .sr-only */
    position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto; clip-path:none; white-space:normal;
    padding-inline:var(--pad);
  }
}

/* ==========================================================================
   STORY
   ========================================================================== */
.section--story{ background:var(--ink); }
.story__quote{ margin:0; padding-left:clamp(1rem,2vw,1.75rem); position:relative; }
.quote__rule{
  position:absolute; left:0; top:.4rem; bottom:.4rem; width:2px;
  background:linear-gradient(var(--gold),rgba(216,180,95,0));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1200ms var(--ease-out) 200ms;
}
.is-in .quote__rule{ transform:scaleY(1); }
.story__quote blockquote{
  margin:0 0 1rem; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,1.05rem + .7vw,1.6rem); line-height:1.5; color:var(--morning);
  hanging-punctuation:first;   /* Safari: opening quote hangs into the margin */
  text-wrap:pretty;
}
.story__quote figcaption{ font-size:.85rem; color:var(--gold); letter-spacing:.04em; }

/* ==========================================================================
   THE OIL (product)
   ========================================================================== */
.section--oil{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
@media (min-width:900px){
  .wrap--split-rev{ grid-template-columns:.8fr 1.2fr; align-items:center; }
}
.bottle{ margin:0; text-align:center; position:relative; }
/* a low gold aura behind the glass — the clearing's light catching the bottle */
.bottle::before{
  content:""; position:absolute; left:50%; top:46%;
  width:min(80vw,420px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(216,180,95,.14), rgba(143,191,134,.05) 45%, transparent 68%);
  pointer-events:none;
}
.bottle__svg{
  position:relative;
  width:min(58vw,250px); height:auto; margin-inline:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  animation:float 7s var(--ease-soft) infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
/* light playing on the glass: the tall highlight slowly brightens and dims,
   out of phase with the float, so the bottle reads as glass under a canopy
   rather than a flat illustration. Opacity only — compositor-cheap. */
.bottle__gleam{ animation:gleam 9s var(--ease-soft) infinite; }
@keyframes gleam{ 0%,100%{ opacity:.18 } 45%{ opacity:.38 } }
.bottle figcaption{
  margin-top:1.5rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,239,226,.5);
}
.does{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; gap:.7rem;
}
.does li{
  position:relative; padding-left:1.9rem;
  color:rgba(243,239,226,.9); font-size:1rem;
}
.does li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px rgba(216,180,95,.14);
}
.note{
  font-size:.9rem; color:rgba(243,239,226,.6);
  border-left:2px solid rgba(216,180,95,.45); padding-left:1rem; margin-top:1.5rem;
}

/* ==========================================================================
   HOW YOU USE IT
   ========================================================================== */
.section--how{ background:var(--emerald); }
.halves{
  margin-top:3rem; display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:800px){ .halves{ grid-template-columns:1fr 1fr; } }
.half{
  border:1px solid rgba(243,239,226,.13); border-radius:16px;
  padding:clamp(1.75rem,3.5vw,2.75rem);
  background:rgba(4,22,13,.35);
  transition:transform 600ms var(--ease-out), border-color 600ms var(--ease-soft);
}
.half:hover{ transform:translateY(-5px); border-color:rgba(216,180,95,.4); }
.half__num{
  font-family:var(--serif); font-size:.85rem; color:var(--gold);
  letter-spacing:.18em; opacity:.7;
}
.half h3{
  font-family:var(--serif); font-weight:400; font-size:1.65rem;
  color:var(--morning); margin:.45rem 0 .8rem;
}
.half p{ margin:0; font-size:.98rem; }

/* ==========================================================================
   HONEST EVIDENCE
   ========================================================================== */
.section--honest{ background:linear-gradient(180deg,var(--emerald),var(--ink)); }
.ledger{
  margin:3rem 0 2.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:820px){ .ledger{ grid-template-columns:1fr 1fr; } }
.ledger__col{
  border-radius:16px; padding:clamp(1.6rem,3.5vw,2.5rem);
  border:1px solid rgba(243,239,226,.14);
  background:rgba(243,239,226,.025);
}
.ledger__col--yes{ border-color:rgba(143,191,134,.42); }
.ledger__col--no { border-color:rgba(216,180,95,.34); }
.ledger__col h3{
  font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 1.1rem;
}
.ledger__col--yes h3{ color:var(--dew); }
.ledger__col--no  h3{ color:var(--gold); }
.ledger__col ul{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.65rem; }
.ledger__col li{
  position:relative; padding-left:1.75rem; font-size:.97rem; color:rgba(243,239,226,.86);
}
.ledger__col--yes li::before{
  content:"✓"; position:absolute; left:0; top:-.05em; color:var(--dew); font-size:1rem;
}
.ledger__col--no li::before{
  content:"—"; position:absolute; left:0; top:-.05em; color:var(--gold); opacity:.8;
}
.ledger__foot{
  margin:0; font-size:.85rem; font-style:italic; color:rgba(243,239,226,.55);
  border-top:1px solid rgba(243,239,226,.1); padding-top:1rem;
}
.honest__close{
  max-width:64ch; margin-inline:auto; text-align:center;
  font-size:1.02rem; color:rgba(243,239,226,.8);
}
.honest__close strong{
  display:block; margin-top:1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); color:var(--gold);
}

/* ==========================================================================
   PILLARS
   ========================================================================== */
.section--pillars{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
.cards{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  border:1px solid rgba(243,239,226,.13);
  border-radius:14px;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(243,239,226,.025);
  transition:transform 600ms var(--ease-out), border-color 600ms var(--ease-soft),
             background-color 600ms var(--ease-soft);
  will-change:transform;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,180,95,.45);
  background:rgba(216,180,95,.05);
}
.card h3{
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  color:var(--gold); margin:0 0 .65rem;
}
.card p{ margin:0; font-size:.98rem; }

/* ==========================================================================
   BOTANICALS
   ========================================================================== */
.section--botanicals{ background:var(--emerald); }
.botanicals{
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:1px; background:rgba(243,239,226,.11);
  border:1px solid rgba(243,239,226,.11); border-radius:14px; overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .botanicals{ grid-template-columns:repeat(2,1fr); } }
.bot{
  background:var(--emerald);
  padding:clamp(1.6rem,3vw,2.5rem);
  position:relative;
  transition:background-color 600ms var(--ease-soft);
}
.bot:hover{ background:#0c3221; }
.bot__idx{
  font-family:var(--serif); font-size:.8rem; color:var(--gold); opacity:.65;
  letter-spacing:.15em;
}
.bot h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,1.2rem + .7vw,1.9rem);
  color:var(--morning); margin:.5rem 0 .15rem;
}
.bot__latin{
  font-style:italic; font-size:.9rem; color:var(--dew); margin:0 0 .9rem; opacity:.85;
}
.bot p:last-child{ margin:0; font-size:.97rem; }

/* ==========================================================================
   RITUAL / CONSULTATION
   ========================================================================== */
.section--ritual{
  background:linear-gradient(180deg,var(--emerald),var(--ink));
  position:relative; overflow:hidden;
}
.ritual__light{
  position:absolute; left:50%; top:20%;
  width:min(120vw,900px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(216,180,95,.13),transparent 62%);
  pointer-events:none; will-change:transform;
}
.section--ritual .wrap{ position:relative; z-index:2; }

.ritual__panel{
  margin:2.5rem auto 2rem;
  padding:clamp(1.75rem,4vw,3rem);
  border:1px solid rgba(216,180,95,.32);
  border-radius:18px;
  background:rgba(4,22,13,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-align:left;
}
.ritual__panel p{ font-size:1rem; }
.ritual__panel strong{ color:var(--morning); font-weight:500; }

.price{
  display:flex; align-items:baseline; justify-content:center; gap:.9rem;
  flex-wrap:wrap; margin:1.75rem 0 1.5rem; text-align:center;
}
.price__now{
  font-family:var(--serif); font-size:clamp(2.4rem,2rem + 2vw,3.4rem);
  color:var(--gold); line-height:1;
}
.price__note{ font-size:.92rem; color:rgba(243,239,226,.8); }
.price__note b{ color:var(--gold); letter-spacing:.06em; }

.ritual__panel .btn{ display:flex; width:100%; }
.microcopy{
  font-size:.85rem; color:rgba(243,239,226,.55); margin:.9rem 0 0; text-align:center;
}
/* prose links inside FAQ answers and panel microcopy — same gold treatment as
   .legal a on the privacy page, so in-copy links read as one system site-wide.
   Gold on this section's emerald/ink grounds is 5.3:1+ (QA §2). */
.qa__a a, .microcopy a{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(216,180,95,.4);
}
.qa__a a:hover, .microcopy a:hover{ border-bottom-color:var(--gold); }
.ritual__expect{ max-width:58ch; margin-inline:auto; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.section--founder{ background:var(--emerald); }
@media (min-width:900px){
  .wrap--founder{ grid-template-columns:.72fr 1.28fr; align-items:center; }
}
.founder__portrait{ margin:0; text-align:center; }
.portrait{
  position:relative; width:min(62vw,270px); aspect-ratio:1; margin:0 auto 1.5rem;
  border-radius:50%; overflow:hidden;
  border:1px solid rgba(216,180,95,.42);
  background:radial-gradient(circle at 50% 35%, #17402a, #071c11 70%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
/* stand-in until a real headshot lands at assets/founder.jpg */
.portrait__mark{ display:none; }
.portrait--fallback .portrait__mark{
  display:grid; place-items:center; position:absolute; inset:0;
}
.portrait--fallback .portrait__mark img{ width:44%; height:auto; object-fit:contain; opacity:.9; }
.founder__portrait figcaption{
  font-size:.88rem; color:rgba(243,239,226,.62); line-height:1.6;
}
.founder__portrait figcaption strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.15rem;
  color:var(--morning); margin-bottom:.15rem;
}
.founder__sign{
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  color:var(--gold); margin-top:1.5rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.section--faq{ background:linear-gradient(180deg,var(--emerald),var(--ink)); }
.faq{ margin-top:3rem; border-top:1px solid rgba(243,239,226,.13); }
.qa{ border-bottom:1px solid rgba(243,239,226,.13); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:1.35rem 2.75rem 1.35rem 0;
  position:relative;
  font-family:var(--serif); font-size:clamp(1.05rem,1rem + .35vw,1.28rem);
  color:var(--morning); line-height:1.4;
  transition:color 300ms var(--ease-soft);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--gold); }
/* + / − indicator */
.qa summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:14px; height:2px;
  background:var(--gold); transform:translateY(-50%);
}
.qa summary::before{
  content:""; position:absolute; right:.35rem; top:50%; width:14px; height:2px;
  background:var(--gold); transform:translateY(-50%) rotate(90deg);
  transition:transform 400ms var(--ease-out), opacity 400ms var(--ease-soft);
}
.qa[open] summary::before{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.qa__a{ padding:0 2.75rem 1.5rem 0; }
.qa__a p{ margin:0; font-size:.98rem; color:rgba(243,239,226,.76); }
.qa__a strong{ color:var(--morning); font-weight:500; }
/* gentle open animation (respects reduced motion via the global block) */
.qa[open] .qa__a{ animation:qaOpen 500ms var(--ease-out); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   WAITLIST
   ========================================================================== */
.section--waitlist{ background:var(--ink); }
.waitlist__mark{ width:60px; margin:0 auto 1.75rem; opacity:.9; }
.section--waitlist .btn{ margin-top:1rem; }
/* Muted via colour, not opacity: opacity:.7 multiplied .microcopy's own .55 alpha
   down to an effective .385 = 3.29:1 on ink, under the 4.5:1 floor. .50 = 4.74:1
   and still reads as secondary. No consumer on the page today — this class is
   waiting for the Kit form's fallback note, so it is fixed before it is used. */
.microcopy--muted{ color:rgba(243,239,226,.50); }

/* Kit inline form (site/web/index.html "KIT-FORM-SLOT"): styles the embedded
   <form class="waitlist__form"> to match the site rather than Kit's default look.
   Kit forms are a plain <form> + <input type=email> + <button> — this covers that
   shape without fighting anything Kit injects beyond it. */
.waitlist__form{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  max-width:32rem; margin:1.75rem auto 0;
}
.waitlist__form input[type="email"]{
  flex:1 1 14rem; padding:.85rem 1.1rem; border-radius:999px;
  border:1px solid rgba(243,239,226,.25); background:rgba(243,239,226,.06);
  color:var(--cream); font:inherit;
}
.waitlist__form input[type="email"]::placeholder{ color:rgba(243,239,226,.45); }
.waitlist__form button{
  flex:0 0 auto; /* inherits .btn/.btn--gold sizing if Kit's button carries that class too */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:#030f09; border-top:1px solid rgba(243,239,226,.09);
  padding-block:3rem;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
.footer__brand{ display:flex; align-items:center; gap:.9rem; }
.footer__brand img{ opacity:.75; flex:none; }
.footer__legal{ margin:0; font-size:.82rem; color:rgba(243,239,226,.45); font-style:italic; }

/* legal bar — company details, privacy, medical disclaimer */
.footer__legalbar{
  margin-top:2.25rem; padding-top:1.5rem;
  border-top:1px solid rgba(243,239,226,.09);
  display:grid; gap:.6rem;
}
/* .55, not .40: company number, registered office and the medical disclaimer
   are legally required text and were the hardest thing on the page to read
   (3.44:1). This clears 4.5:1. */
.footer__legalbar p{ margin:0; font-size:.76rem; color:rgba(243,239,226,.55); line-height:1.65; }
.footer__legalbar a{ color:rgba(243,239,226,.6); text-decoration:none; }
.footer__legalbar a:hover{ color:var(--gold); }
.footer__legalbar span[aria-hidden]{ opacity:.35; margin-inline:.4rem; }
.footer__note{ max-width:70ch; font-style:italic; }
/* the one remaining placeholder (the inert Terms span) — visibly unfinished on
   purpose. The old .todo spans (company number, registered office) were filled
   on 5 Aug 2026 and that class has no user left. */
.todo-link{
  color:rgba(216,180,95,.75) !important;
  border-bottom:1px dashed rgba(216,180,95,.5);
}

/* ==========================================================================
   LEGAL PAGES (privacy.html, and terms.html when it exists)
   Plain prose on the brand's ink ground. Deliberately JS-free: these pages
   load no main.js and use no .reveal, so nothing on a legally required page
   can be hidden by a script that failed to arrive.
   ========================================================================== */
.nav--static{ position:static; transform:none; background:rgba(4,22,13,.9); }
.section--legal{ background:linear-gradient(180deg,var(--ink),var(--emerald)); }
.legal{ max-width:70ch; }
.legal h2{
  font-family:var(--serif); font-weight:400; line-height:1.2;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  color:var(--morning);
  margin:3rem 0 .9rem;
}
.legal h2:first-of-type{ margin-top:2rem; }
.legal p{ margin:0 0 1.1rem; }
.legal ul{ margin:0 0 1.1rem; padding:0; list-style:none; display:grid; gap:.65rem; }
.legal li{ position:relative; padding-left:1.5rem; }
.legal li::before{
  content:""; position:absolute; left:0; top:.7em;
  width:7px; height:1px; background:var(--gold); opacity:.8;
}
.legal strong{ color:var(--morning); font-weight:500; }
.legal a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(216,180,95,.4); }
.legal a:hover{ color:var(--morning); border-bottom-color:var(--morning); }

/* FIX 21 Aug 2026: .legal a paints links gold, and it BEATS .btn's colour on any
   button that sits inside .legal copy — which the free-review booking flow does.
   Result on the live site: gold text on a gold button, an invisible label on the
   funnel's most important control. Surfaced while splitting free-review into the
   three-step flow; the bug predates the split. Buttons inside .legal reclaim the
   .btn colour system and drop the in-copy underline. */
.legal a.btn{ color:var(--btn-fg); border-bottom:none; }
.legal a.btn:hover{ color:var(--btn-fg); }
.legal__meta{ font-size:.88rem; color:rgba(243,239,226,.6); }
.legal__hr{ border:0; border-top:1px solid rgba(243,239,226,.13); margin:2.5rem 0; }
/* Standing note: the honest counterpart to the ledger, for the things that are
   still open. Marked, not hidden. */
.legal__note{
  border:1px solid rgba(216,180,95,.34); border-radius:14px;
  padding:1.25rem 1.4rem; margin:0 0 1.1rem;
  background:rgba(216,180,95,.05);
  font-size:.95rem;
}

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; gap:.6rem; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(4,22,13,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(216,180,95,.28);
  transform:translateY(110%);
  /* visibility, not just transform: while the bar is off-screen it is also
     aria-hidden, and a translated-but-visible element still takes keyboard
     focus — a screen-reader user could tab into a bar that is not there. */
  visibility:hidden;
  transition:transform 550ms var(--ease-out), visibility 0s linear 550ms;
}
.stickybar.is-visible{ transform:translateY(0); visibility:visible; transition:transform 550ms var(--ease-out), visibility 0s; }
@media (max-width:760px){ .stickybar{ display:flex; } }
.stickybar a{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:48px;                      /* accessible tap target */
  border-radius:999px; text-decoration:none;
  font-size:.9rem; font-weight:500; letter-spacing:.01em;
}
.stickybar__ghost{
  flex:0 0 38%; color:var(--cream); border:1px solid rgba(243,239,226,.3);
}
.stickybar__go{ background:var(--gold); color:var(--ink); font-weight:600; }
.footer__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer__links a{
  font-size:.85rem; color:rgba(243,239,226,.6); text-decoration:none;
  transition:color 300ms var(--ease-soft);
}
.footer__links a:hover{ color:var(--gold); }

/* ==========================================================================
   REVEAL — the scroll entrance system (transform + opacity only)
   ========================================================================== */
/* Scoped to html.js: if JS never runs, nothing is hidden and the page still
   works fully (all copy + all CTAs visible), just without the animation. */
html.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change:transform,opacity;
}
/* html.js prefix is load-bearing: the hide rule above is (0,2,1) and a bare
   .reveal.is-in is only (0,2,0), so without the prefix the reveal could NEVER
   win — every element stayed at opacity:0 with JS running (bug present since
   the first commit; only no-JS/static renders ever looked right). (0,3,1). */
html.js .reveal.is-in{ opacity:1; transform:none; will-change:auto; }
/* stagger */
.reveal[data-delay="1"]{ transition-delay:.08s }
.reveal[data-delay="2"]{ transition-delay:.16s }
.reveal[data-delay="3"]{ transition-delay:.24s }
.reveal[data-delay="4"]{ transition-delay:.32s }
.reveal[data-delay="5"]{ transition-delay:.40s }
.reveal[data-delay="6"]{ transition-delay:.48s }
.reveal[data-delay="8"]{ transition-delay:.64s }

/* ==========================================================================
   REDUCED MOTION — replace motion, keep meaning
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .quote__rule{ transform:scaleY(1) !important; }
  .nav{ transform:translateY(0) !important; }
  .btn::after{ display:none; }
}

/* ==========================================================================
   PRINT — someone printing this page wants the words, not the jungle.
   Light ground, dark ink, chrome and atmosphere removed, reveals forced
   visible (print never runs the IntersectionObserver).
   ========================================================================== */
@media print{
  body{ background:#fff; color:#1a1a1a; font-weight:400; }
  .nav,.stickybar,.skip-link,.hero__canopy,.hero__glow,.hero__vignette,
  .hero__scroll,.ritual__light,.strip__track,.btn::after{ display:none !important; }
  .hero::after,.section--ritual::after{ display:none; }
  .hero{ min-height:auto; padding:2rem var(--pad); background:#fff; }
  .section,.strip,.footer{ background:#fff !important; padding-block:1.25rem; }
  .strip .strip__text{
    position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto; clip-path:none; white-space:normal; color:#1a1a1a;
  }
  html.js .reveal{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; animation:none !important; }
  .hero__title,.h2,.half h3,.bot h3,.ledger__col h3,.card h3,
  .story__quote blockquote,.qa summary,.qa__a strong,.ritual__panel strong,
  .founder__portrait figcaption strong{ color:#111 !important; }
  p,.lede,.does li,.ledger__col li,.qa__a p,.bot p,.half p,.card p,
  .footer__legal,.footer__legalbar p,.microcopy,.note,.honest__close,
  .founder__portrait figcaption,.bottle figcaption,.price__note{ color:#333 !important; }
  .eyebrow,.hero__eyebrow,.bot__idx,.half__num,.honest__close strong,
  .story__quote figcaption,.founder__sign,.price__now{ color:#7a5f1c !important; }
  .bot__latin{ color:#2F7D4F !important; }
  .btn{ color:#111 !important; background:none !important; border:1px solid #999 !important; box-shadow:none !important; }
  .half,.card,.ledger__col,.ritual__panel,.botanicals,.bot{ background:#fff !important; border-color:#ccc !important; }
  a{ color:#111 !important; }
}


/* ==========================================================================
   FREE REVIEW PAGE — the questionnaire list and the booking block
   ========================================================================== */
.qlist{ margin:1.25rem 0 2rem; padding-left:1.35rem; }
.qlist li{
  margin-bottom:.85rem; padding-left:.35rem;
  color:rgba(243,239,226,.82); line-height:1.65;
}
.qlist li::marker{ color:var(--gold); font-variant-numeric:tabular-nums; }

.booking{
  margin-top:2.5rem; padding:clamp(1.5rem,4vw,2.25rem);
  background:rgba(22,72,47,.28);
  border:1px solid rgba(216,180,95,.24);
  border-radius:4px; text-align:center;
}
.booking__lede{ margin-bottom:1.25rem; color:var(--morning); }
.booking .microcopy{ margin-top:1rem; }
@media print{
  .booking{ background:none; border-color:#999; }
}


/* ==========================================================================
   FREE-REVIEW QUESTIONNAIRE (added 21 Aug 2026, free-review-questions.html)
   Multi-choice version of the ten questions. Uses the site palette only.
   ========================================================================== */
.qform fieldset{
  border:1px solid rgba(243,239,226,.14); border-radius:12px;
  padding:1.1rem 1.25rem 1.25rem; margin:0 0 1.25rem;
}
.qform legend{
  padding:0 .5rem; font-weight:600; color:var(--cream);
}
.qform__opt{ font-weight:400; color:rgba(243,239,226,.55); }
.qform__sub{ margin:.6rem 0 .25rem; color:rgba(243,239,226,.7); font-size:.95rem; }
.qform__opts{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.35rem 0 .5rem; }
.qform__opts label{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid rgba(243,239,226,.22); border-radius:999px;
  padding:.45rem .9rem; cursor:pointer; color:var(--cream);
  transition:border-color .15s ease, background .15s ease;
}
.qform__opts label:hover{ border-color:rgba(216,180,95,.6); }
.qform__opts label:has(:checked){
  border-color:var(--gold); background:rgba(216,180,95,.12);
}
.qform input[type="radio"], .qform input[type="checkbox"]{ accent-color:var(--gold); }
.qform__row{ display:block; margin:.6rem 0; color:var(--cream); }
.qform__row input, .qform textarea{
  display:block; width:100%; margin-top:.35rem;
  padding:.7rem .9rem; border-radius:8px;
  border:1px solid rgba(243,239,226,.25); background:rgba(243,239,226,.06);
  color:var(--cream); font:inherit;
}
.qform textarea{ resize:vertical; }
.qform input:focus, .qform textarea:focus{ outline:2px solid rgba(216,180,95,.55); outline-offset:1px; }

/* Diagram pills for curl pattern and length (21 Aug) — icon above label text */
.qform__opts--big label{
  flex-direction:column; gap:.35rem; padding:.7rem 1.1rem .6rem;
  border-radius:14px; min-width:5.6rem; text-align:center;
}
.qform__opts--big svg{ display:block; margin:0 auto; }

/* The mark under the founder quote (21 Aug) — quiet, not decorative wallpaper */
.story__mark{
  display:block; width:min(220px,60%); height:auto;
  margin:2.5rem auto 0; opacity:.85;
}

/* Visual pass 21 Aug: section icons + botanical line art (all inline SVG, no assets) */
.half__icon{ margin:.4rem 0 .9rem; }
.half__icon svg{ display:block; }
.card__icon{ margin-bottom:.9rem; }
.card__icon svg{ display:block; opacity:.9; }
.bot{ position:relative; }
.bot__art{ position:absolute; top:1.4rem; right:1.6rem; opacity:.75; pointer-events:none; }
@media (max-width:640px){ .bot__art{ top:1rem; right:1rem; opacity:.5; } }

/* 21 Aug: the pillars→botanicals gap read as dead air — pull them together */
.section--pillars{ padding-bottom:3.5rem; }
.section--botanicals{ padding-top:3.5rem; }

/* ==========================================================================
   HAIR QUIZ (25 Aug) + tight flow pages
   ========================================================================== */
.section--tight{ padding-top:3rem; }
.section--quiz{ background:rgba(243,239,226,.02); }
.quiz__card{
  max-width:38rem; margin:2.2rem auto 0; padding:2rem 1.8rem;
  border:1px solid rgba(243,239,226,.14); border-radius:16px;
}
.quiz__q{ font-family:Fraunces,Georgia,serif; font-size:1.35rem; color:var(--cream); margin-bottom:1.1rem; }
.qform__opts--center{ justify-content:center; }
.quiz__opt{
  font:inherit; color:var(--cream); background:none; cursor:pointer;
  border:1px solid rgba(243,239,226,.25); border-radius:999px; padding:.6rem 1.2rem;
  transition:border-color .15s ease, background .15s ease;
}
.quiz__opt:hover{ border-color:rgba(216,180,95,.7); }
.quiz__opt.is-picked{ border-color:var(--gold); background:rgba(216,180,95,.14); }
.quiz__dots{ display:flex; gap:.45rem; justify-content:center; margin-top:1.3rem; }
.quiz__dot{ width:8px; height:8px; border-radius:50%; background:rgba(243,239,226,.18); }
.quiz__dot.is-on{ background:var(--gold); }
.quiz__title{ font-family:Fraunces,Georgia,serif; font-size:1.6rem; color:var(--gold);
  text-transform:capitalize; margin:.4rem 0 .9rem; }


/* ---- 14-day cancellation consent (Consumer Contracts Regs 2013) ---- */
.consent{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:1.1rem 0 1.1rem; padding:.9rem 1rem;
  border:1px solid rgba(216,180,95,.30); border-radius:10px;
  background:rgba(216,180,95,.05);
  transition:border-color .25s ease, background .25s ease;
}
.consent--flash{ border-color:rgba(216,180,95,.95); background:rgba(216,180,95,.14); }
.consent__box{ margin-top:.28rem; width:1.05rem; height:1.05rem; flex:0 0 auto; accent-color:var(--gold); cursor:pointer; }
.consent__label{ font-size:.86rem; line-height:1.55; color:rgba(243,239,226,.80); cursor:pointer; }
.btn.is-locked{ opacity:.45; }


/* ---- Free-review photos page: five labelled slots, large targets, works without JS ---- */
.photos{ font-size:1.06em; }
.photos .qform__row input{ font-size:1.15rem; padding:1rem 1.1rem; min-height:56px; }
.slots__progress{ font-family:var(--serif); font-size:1.4rem; color:var(--gold); margin:.3rem 0 1rem; }
.slots__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.slot{ display:grid; grid-template-columns:96px 1fr; gap:1rem; align-items:start; padding:1rem;
  border:1px solid rgba(243,239,226,.18); border-radius:14px; background:rgba(243,239,226,.04); }
.slot--done{ border-color:rgba(143,191,134,.75); background:rgba(143,191,134,.08); }
.slot__thumb{ position:relative; width:96px; height:96px; border-radius:12px; overflow:hidden;
  background:rgba(243,239,226,.08); display:grid; place-items:center; }
.slot__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.slot__num{ font-family:var(--serif); font-size:2rem; color:rgba(243,239,226,.55); }
.slot--done .slot__thumb::after{ content:"\2713"; position:absolute; right:6px; bottom:6px; width:28px; height:28px;
  border-radius:50%; background:#2F7D4F; color:#fff; font-weight:700; font-size:1rem; display:grid; place-items:center; }
.slot__name{ display:block; font-family:var(--serif); font-size:1.35rem; color:var(--cream); }
.slot__hint{ display:block; font-size:1rem; line-height:1.5; color:rgba(243,239,226,.78); margin:.25rem 0 .85rem; }
.slot__btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:.9rem 1.6rem; font-size:1.05rem; cursor:pointer; }
.slot__btn input, .slots__multi input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.slot__btn:focus-within, .slots__multi:focus-within{ outline:3px solid var(--gold); outline-offset:3px; }
.slot--done .slot__btn{ --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(243,239,226,.55); }
.slots__alt{ margin-top:1.2rem; font-size:1rem; color:rgba(243,239,226,.82); }
.slots__multi{ position:relative; color:var(--gold); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.photos .booking .btn--lg{ min-height:60px; font-size:1.1rem; width:100%; max-width:440px; }
.photos .microcopy{ font-size:.98rem; line-height:1.55; }
.photos__fallback{ display:none; margin:1rem 0; }
.photos__fallback.is-on{ display:block; }
@media (max-width:480px){ .slot{ grid-template-columns:76px 1fr; } .slot__thumb{ width:76px; height:76px; } }

/* ---- questionnaire done state ---- */
.qdone{ padding:.6rem 0 1rem; }
.qdone h2{ margin:0 0 .6rem; }
.qdone .lede{ margin-bottom:.8rem; }

.slot__thumb canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.slot__added{ font-size:.95rem; font-weight:600; color:var(--dew); }

/* done panels: keep everything left-aligned and stacked, no inline buttons in prose */
.qdone p{ margin:0 0 .9rem; }
.qdone .microcopy{ text-align:left; }
.qdone .btn{ margin-top:.2rem; }

/* ===== 16 Sep 2026: the nature pattern carried through the page ===== */
.divider-spiral{ position:relative; z-index:2; margin:-1.5rem auto -3.5rem; max-width:900px; padding-inline:var(--pad); pointer-events:none; }
.divider-spiral img{ display:block; width:100%; height:auto; opacity:.9; }
.section--story, .section--botanicals, .section--waitlist, .section--founder{ position:relative; overflow:hidden; }
.section--story::before, .section--botanicals::before, .section--waitlist::before, .section--founder::before{
  content:""; position:absolute; top:-4%; bottom:-4%; width:min(44vw,620px); z-index:0; pointer-events:none;
  background:url("assets/hero-art.svg") no-repeat center / cover; opacity:.22;
  -webkit-mask-image:linear-gradient(to right, #000 0%, transparent 100%); mask-image:linear-gradient(to right, #000 0%, transparent 100%);
}
.section--story::before{ left:0; }
.section--botanicals::before{ right:0; transform:scaleX(-1); }
.section--waitlist::before{ left:0; opacity:.18; }
.section--founder::before{ right:0; transform:scaleX(-1); opacity:.14; }
.section--story .wrap, .section--botanicals .wrap, .section--waitlist .wrap, .section--founder .wrap{ position:relative; z-index:1; }
.strip{ border-top:1px solid rgba(216,180,95,.22); border-bottom:1px solid rgba(216,180,95,.22); }
.strip__leaf{ display:inline-block; width:14px; height:14px; margin-inline:1.4rem; vertical-align:middle; opacity:.85;
  background:url("assets/divider-leaf.png") no-repeat center / contain; }

/* ===== botanical cards with drawn line art ===== */
.bot{ transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), background .4s; }
.bot .bot__art{ display:block; margin:0 0 .6rem; }
.bot .bot__art img{ width:96px; height:96px; display:block; opacity:.85; transition:transform .7s var(--ease-soft), opacity .5s, filter .5s; }
.bot:hover{ transform:translateY(-4px); box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(216,180,95,.35) inset; }
.bot:hover .bot__art img{ transform:scale(1.08) rotate(-3deg); opacity:1; filter:drop-shadow(0 0 10px rgba(216,180,95,.45)); }
.bot__note{ margin:2rem auto 0; max-width:640px; color:rgba(243,239,226,.72); font-size:.95rem; }

/* ===== the oil: shimmer, staggered claims, ingredient unfold ===== */
.bottle::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 35%, rgba(216,180,95,.18) 48%, rgba(243,239,226,.22) 50%, rgba(216,180,95,.18) 52%, transparent 65%);
  background-size:260% 100%; animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ background-position:120% 0; } 60%,100%{ background-position:-40% 0; } }
.does--stagger li{ opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft); }
.does--stagger.is-visible li{ opacity:1; transform:none; }
.does--stagger.is-visible li:nth-child(1){ transition-delay:.15s } .does--stagger.is-visible li:nth-child(2){ transition-delay:.35s }
.does--stagger.is-visible li:nth-child(3){ transition-delay:.55s } .does--stagger.is-visible li:nth-child(4){ transition-delay:.75s }
.inci{ margin:1.4rem 0 1rem; border:1px solid rgba(216,180,95,.3); border-radius:14px; background:rgba(4,22,13,.35); }
.inci summary{ cursor:pointer; list-style:none; padding:.9rem 1.1rem; color:var(--gold); font-weight:600; display:flex; align-items:center; gap:.7rem; }
.inci summary::-webkit-details-marker{ display:none; }
.inci summary::before{ content:""; width:10px; height:10px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); transition:transform .3s; flex:none; }
.inci[open] summary::before{ transform:rotate(45deg); }
.inci__lede, .inci__foot{ margin:0; padding:0 1.1rem; font-size:.9rem; color:rgba(243,239,226,.7); }
.inci__foot{ padding-bottom:1rem; }
.inci__list{ margin:.6rem 0 .8rem; padding:0 1.1rem 0 2.4rem; columns:1; font-size:.92rem; line-height:1.6; }
.inci__list li{ padding:.1rem 0; }
@media (min-width:720px){ .inci__list{ columns:2; column-gap:2rem; } }

/* ===== honest ledger: marks that draw themselves ===== */
.ledger__col--marks ul{ list-style:none; padding-left:0; }
.ledger__col--marks li{ position:relative; padding-left:2rem; }
.ledger__col--marks li::before{
  content:""; position:absolute; left:0; top:.32em; width:1.1rem; height:1.1rem;
  background-repeat:no-repeat; background-size:contain; opacity:0; transform:scale(.6); transition:opacity .5s, transform .5s var(--ease-soft);
}
.ledger__col--yes.ledger__col--marks li::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M3 10.5 L8 15 L17 5' fill='none' stroke='%23D8B45F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ledger__col--no.ledger__col--marks li::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 5 L15 15 M15 5 L5 15' fill='none' stroke='%23F3EFE2' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/></svg>"); }
.ledger__col--marks.is-visible li::before{ opacity:1; transform:scale(1); }
.ledger__col--marks.is-visible li:nth-child(1)::before{ transition-delay:.2s } .ledger__col--marks.is-visible li:nth-child(2)::before{ transition-delay:.4s }
.ledger__col--marks.is-visible li:nth-child(3)::before{ transition-delay:.6s } .ledger__col--marks.is-visible li:nth-child(4)::before{ transition-delay:.8s }
.honest__pull{ text-align:center; margin:2.2rem auto 0; max-width:720px; }
.honest__pull span{ font-family:"Fraunces", Georgia, serif; font-style:italic; font-size:clamp(1.5rem,3.2vw,2.2rem); color:var(--gold); line-height:1.25;
  display:inline-block; padding:.4rem 1.2rem; border-top:1px solid rgba(216,180,95,.35); border-bottom:1px solid rgba(216,180,95,.35); }
@media (max-width:768px){
  .section--story::before, .section--botanicals::before, .section--waitlist::before, .section--founder::before{ width:70vw; opacity:.12; }
  .divider-spiral{ margin:-.5rem auto -2rem; }
}

/* ===== 16 Sep 2026 (evening): two more motifs in the same language — twin spiral
   vines (two intertwining strands, leaves on the bends) on the tall sections, and
   orbital rings around a seed-head behind the short ones. Ornament only; drawn as
   nature and cosmos geometry, no biological realism, no claim attached
   (reference/pattern-visualisation-concept-2026-09-16.md). ===== */
.section--oil, .section--faq, .section--how, .section--pillars{ position:relative; overflow:hidden; }
.section--oil .wrap, .section--faq .wrap, .section--how .wrap, .section--pillars .wrap{ position:relative; z-index:1; }
.section--oil::before, .section--faq::before{
  content:""; position:absolute; top:-2%; bottom:-2%; width:min(22vw,300px); z-index:0; pointer-events:none;
  background:url("assets/motif-twin-spiral.svg") no-repeat center / contain; opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.section--oil::before{ right:0; }
.section--faq::before{ left:0; transform:scaleX(-1); }
.section--how::before, .section--pillars::before{
  content:""; position:absolute; top:50%; left:50%; width:min(120vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  background:url("assets/motif-orbits.svg") no-repeat center / contain; opacity:.22;
  -webkit-mask-image:radial-gradient(circle, #000 35%, transparent 72%); mask-image:radial-gradient(circle, #000 35%, transparent 72%);
  animation:orbitDrift 90s linear infinite;
}
.section--pillars::before{ opacity:.16; animation-direction:reverse; }
@keyframes orbitDrift{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (max-width:768px){
  .section--oil::before, .section--faq::before{ width:34vw; opacity:.3; }
  .section--how::before, .section--pillars::before{ width:150vw; opacity:.14; }
}

/* ===== Evidence table (v2, 19 Sep 2026) — the give-before-you-ask section ===== */
.section--evidence{background:linear-gradient(180deg,rgba(10,26,18,.03),transparent)}
.evtable{margin:2.2rem 0 1.6rem;border-top:1px solid rgba(10,26,18,.14)}
.evrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1.2rem;
  padding:1.15rem 0;border-bottom:1px solid rgba(10,26,18,.12);align-items:baseline}
.evrow__name{font-family:var(--serif,Georgia,serif);font-size:1.06rem;line-height:1.3}
.evrow__name em{display:block;font-style:italic;opacity:.62;font-size:.84rem;letter-spacing:.01em}
.evrow__tier{justify-self:end;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  opacity:.72;white-space:nowrap;border:1px solid rgba(10,26,18,.22);border-radius:999px;padding:.28rem .7rem}
.evrow__note{grid-column:1/-1;font-size:.94rem;line-height:1.55;opacity:.78;margin-top:.15rem}
@media (max-width:560px){
  .evrow{grid-template-columns:1fr}
  .evrow__tier{justify-self:start;margin-top:.35rem}
}