@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════════
   ESTRALA — front-end stylesheet

   Palette lifted from the final carton (Estrala_packaging_NASS_10-09-2026_Q):
   navy #002843 and the "CS Gold" #FED09E of the rosette, wordmark and band.
   Structure: deep navy + gold, wide-tracked caps, zero radii, lots of air.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── 1. tokens ─────────────────────────────── */
:root{
  /* carton artwork */
  --navy-950:#001322;
  --navy-900:#002033;
  --navy-800:#002843;          /* THE brand navy                          */
  --navy-700:#053546;
  --navy-600:#174766;
  --gold:#FED09E;              /* "CS Gold" — 10.6:1 on navy              */
  --gold-soft:#FFE3C4;
  --tan:#D1AE85;               /* the lockup printed on the gold band     */
  --cream:#FFEAD4;             /* leaflet cream                            */
  --cream-50:#FFF8F0;
  --paper:#FFFFFF;

  /* derived, contrast-checked for text on light */
  --gold-ink:#8E6232;          /* 5.3:1 on white · 4.6:1 on cream         */
  --gold-deco:#A97A45;         /* rules & icons on light · 3.2:1 on cream */
  --ink:#002843;               /* headings on light · 15:1                */
  --ink-soft:#3D4E5E;          /* body on light · 8.5:1                   */
  --danger:#A33A2B;            /* 6.6:1 on white                          */

  /* contextual — flipped on dark surfaces */
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --accent:var(--gold-ink);
  --accent-deco:var(--gold-deco);
  --rule:rgba(0,40,67,.14);
  --rule-strong:rgba(0,40,67,.26);

  /* type */
  --sans:"Outfit","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --body:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* motion & metrics */
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:1280px;
  --gut:clamp(1.25rem,4.5vw,3.5rem);
  --pad-y:clamp(4.5rem,10vw,9rem);
  --head-h:3.625rem;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ticker,.site-head,.hero,.statement,.science,.site-foot,.stickybar,.b2b-dark{
  --fg:#FFF6EC;
  --fg-soft:rgba(255,246,236,.74);
  --accent:var(--gold);
  --accent-deco:var(--gold);
  --rule:rgba(254,208,158,.2);
  --rule-strong:rgba(254,208,158,.4);
}

/* ─────────────────────────────── 2. reset ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink-soft);
  font:300 clamp(1rem,.55vw + .88rem,1.0625rem)/1.78 var(--body);
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
address{font-style:normal}
:focus-visible{outline:2px solid var(--accent-deco);outline-offset:3px}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{
  position:fixed;top:0;left:50%;translate:-50% -110%;z-index:400;
  padding:.9rem 1.6rem;background:var(--gold);color:var(--navy-800);
  font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  transition:translate .25s var(--ease);
}
.skip-link:focus{translate:-50% 0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad-y);position:relative}
/* --head-h = the stuck header (59–63px) minus a hair, so a section lands flush under it */
:target,section[id],main [id]{scroll-margin-top:var(--head-h)}
.admin-bar{--head-h:5.625rem}

/* ───────────────────────────── 3. primitives ───────────────────────────── */
.eyebrow{
  font:500 .69rem/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.85em;
}
.eyebrow::before{content:"";width:clamp(18px,2.6vw,34px);height:1px;background:currentColor;opacity:.55;flex:none}
.sec-head--center .eyebrow{justify-content:center}

.sec-head{max-width:46ch}
.sec-head--center{max-width:56ch;margin-inline:auto;text-align:center}
.sec-head__title{
  margin-top:1.4rem;
  font:400 clamp(2.05rem,.9rem + 3.4vw,3.5rem)/1.06 var(--sans);
  letter-spacing:-.022em;color:var(--fg);text-wrap:balance;
}
.sec-head__title--serif{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.3rem,1rem + 4.2vw,4.35rem);line-height:1.04;letter-spacing:-.014em;
}
.sec-head__lede{margin-top:1.35rem;color:var(--fg-soft);max-width:44ch}
.sec-head--center .sec-head__lede{margin-inline:auto}
.sec-head__lede a{color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:1px}

/* buttons: a colour slides up from below on hover */
.btn{
  --btn-bg:var(--gold);--btn-fg:var(--navy-800);
  --btn-fill:var(--navy-800);--btn-fill-fg:var(--gold);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:1.15em;padding:1.18rem 2.1rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font:500 .74rem/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),opacity .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-fill);
  translate:0 101%;transition:translate .45s var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--btn-fill-fg)}
.btn:hover::before,.btn:focus-visible::before{translate:0 0}
.btn__price{padding-left:1.15em;margin-left:-.15em;border-left:1px solid currentColor;opacity:.7;font-weight:400;letter-spacing:.1em}
.btn--navy{--btn-bg:var(--navy-800);--btn-fg:var(--gold);--btn-fill:var(--gold);--btn-fill-fg:var(--navy-800)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--gold);--btn-fill:var(--gold);--btn-fill-fg:var(--navy-800);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--line{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-fill:var(--navy-800);--btn-fill-fg:var(--gold);box-shadow:inset 0 0 0 1px var(--navy-800)}
.btn--sm{padding:.88rem 1.4rem;font-size:.68rem;letter-spacing:.16em}
.btn--block{flex:1 1 auto}
.btn[disabled],.btn.is-busy{opacity:.62;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.85em;
  font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);padding-block:.4rem;
}
.ico--arrow{width:26px;height:8px;fill:none;stroke:currentColor;stroke-width:1.2;transition:translate .35s var(--ease)}
.link-arrow:hover .ico--arrow{translate:7px 0}
.link-arrow--dark{color:var(--gold-ink)}
.link-button{font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer}

.ico--line{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor}

/* ─────────────────────────────── 4. brand ──────────────────────────────── */
/* the mark and wordmark are the carton's own vectors — colour comes from here */
.brand{display:inline-flex;align-items:center;gap:.85rem;color:var(--gold)}
.brand__mark{width:36px;height:auto;flex:none;fill:currentColor}
.brand__word{width:auto;height:15px;flex:none;fill:currentColor}

.hero__watermark,.statement__watermark,.science__watermark{fill:var(--gold);pointer-events:none}

/* ─────────────────────────────── 5. ticker ─────────────────────────────── */
.ticker{
  background:var(--navy-900);border-bottom:1px solid rgba(254,208,158,.12);
  overflow:hidden;padding-block:.72rem;
}
.ticker__track{display:flex;width:max-content;animation:ticker 90s linear infinite}
.ticker__half{display:flex;align-items:center;flex:none}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{
  font:400 .655rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);opacity:.82;white-space:nowrap;
}
.ticker i{width:1px;height:9px;background:var(--gold);opacity:.35;margin-inline:clamp(1.5rem,4vw,3.25rem);flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ─────────────────────────────── 6. header ─────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--navy-800) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  padding-block:1.15rem;
}
.site-head.is-stuck{background:color-mix(in srgb,var(--navy-900) 96%,transparent);border-bottom-color:var(--rule);padding-block:.72rem}
/* Stuck, the header is .86rem slimmer. The first block of the page takes that
   space into its own top padding (same timing), so nothing below it moves, no
   gap opens under the header and #anchors land where they should. */
.site-head.is-stuck~main{--stuck-gap:.86rem}
.admin-bar .site-head{top:32px}
.site-head__inner{display:flex;align-items:center;gap:1.5rem}
.nav{margin-left:auto}
.nav__list{display:flex;gap:clamp(1.2rem,2.4vw,2.4rem)}
.nav__list a{
  position:relative;display:block;font:400 .715rem/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-soft);padding-block:.5rem;transition:color .3s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  scale:0 1;transform-origin:left;transition:scale .4s var(--ease);
}
.nav__list a:hover{color:var(--gold-soft)}
.nav__list a:hover::after{scale:1 1}
.site-head__end{display:flex;align-items:center;gap:1rem;margin-left:.5rem}

.burger{display:none;width:34px;height:34px;position:relative;flex:none}
.burger span{position:absolute;left:6px;width:22px;height:1px;background:var(--gold);transition:translate .3s var(--ease),rotate .3s var(--ease)}
.burger span:first-child{top:14px}
.burger span:last-child{top:20px}
.burger[aria-expanded=true] span:first-child{translate:0 3px;rotate:45deg}
.burger[aria-expanded=true] span:last-child{translate:0 -3px;rotate:-45deg}

/* ──────────────────────────────── 7. hero ─────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:clip;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(23,71,102,.55),transparent 62%),
    linear-gradient(168deg,var(--navy-800) 0%,var(--navy-800) 42%,var(--navy-900) 100%);
  padding-block:calc(clamp(3.5rem,7vw,7rem) + var(--stuck-gap,0px)) clamp(4rem,8vw,7.5rem);
  transition:padding-top .4s var(--ease);
}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--grain);opacity:.035;mix-blend-mode:overlay}
.hero__glow{
  position:absolute;z-index:0;top:-14%;right:-8%;width:min(64vw,760px);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(254,208,158,.15),transparent 70%);filter:blur(28px);
}
.hero__watermark{position:absolute;z-index:0;left:-16vw;bottom:-24vw;width:min(58vw,660px);height:auto;opacity:.05}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.hero__title{margin-top:1.7rem;font:500 clamp(2.4rem,1rem + 5.1vw,4.4rem)/1.01 var(--sans);letter-spacing:-.03em;color:#fff}
.hero__claim{margin-top:1.5rem;font:400 clamp(1.5rem,.7rem + 1.9vw,2.3rem)/1.2 var(--serif);letter-spacing:.006em;color:var(--gold)}
.hero__lede{margin-top:1.6rem;max-width:47ch;color:var(--fg-soft)}
.hero__cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2.2rem}
.hero__specs{
  margin-top:3.2rem;padding-top:1.9rem;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.6rem;
}
.hero__specs dt{font:500 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85}
.hero__specs dd{margin-top:.6rem;font:300 1.02rem/1.4 var(--sans);letter-spacing:.01em;color:#fff}

/* the carton — a CSS box wearing the printed dieline panels */
.hero__product{display:flex;flex-direction:column;align-items:center;gap:2rem}
.carton{
  --ch:clamp(340px,42vw,560px);
  --cw:calc(var(--ch) * .3606);   /* front panel 196.5 : 545 pt */
  --cd:calc(var(--ch) * .2051);   /* depth ≈ 111.8 : 545 pt     */
  --ry:-27deg;--rx:4deg;
  position:relative;width:var(--cw);height:var(--ch);perspective:1900px;margin-inline:auto;
}
.carton__box{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s var(--ease);animation:float 9s ease-in-out infinite;
}
@keyframes float{50%{translate:0 -13px}}
@media (prefers-reduced-motion:reduce){.carton__box{animation:none}}
.carton__face{
  position:absolute;top:0;left:0;width:var(--cw);height:var(--ch);
  background:var(--navy-800) center/100% 100% no-repeat;backface-visibility:hidden;
}
.carton__face::after{content:"";position:absolute;inset:0}
.carton__face--front{background-image:var(--face-front);transform:translateZ(calc(var(--cd) / 2));box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.carton__face--front::after{background:linear-gradient(102deg,rgba(255,255,255,.08),transparent 34%,rgba(0,12,22,.22))}
.carton__face--back{background-image:var(--face-back);transform:translateZ(calc(var(--cd) / -2)) rotateY(180deg)}
/* folded, the "balance" panel is the right side of the box and "ritual" the left */
.carton__face--right{width:var(--cd);background-image:var(--face-balance);transform:translateX(calc(var(--cw) - var(--cd) / 2)) rotateY(90deg)}
.carton__face--left{width:var(--cd);background-image:var(--face-ritual);transform:translateX(calc(var(--cd) / -2)) rotateY(-90deg)}
.carton__face--right::after,.carton__face--left::after{background:rgba(0,12,22,.32)}
.carton__face--top{height:var(--cd);background-image:var(--face-top);transform:translateY(calc(var(--cd) / -2)) rotateX(90deg)}
.carton__face--top::after{background:rgba(255,255,255,.04)}
.carton__shadow{
  position:absolute;left:50%;bottom:-5%;z-index:-1;width:230%;height:9%;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(0,0,0,.62),transparent 74%);filter:blur(15px);
}
.carton__caption{font:500 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);opacity:.8;text-align:center}

/* ─────────────────────────────── 8. trust ─────────────────────────────── */
.trust{background:var(--cream);border-block:1px solid rgba(0,40,67,.08)}
.trust__list{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));padding-block:clamp(2.1rem,3.5vw,3rem)}
.trust__list li{
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding-inline:.9rem;
  font:500 .665rem/1.45 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--navy-800);
}
.trust__list li + li{border-left:1px solid rgba(0,40,67,.13)}
.trust .ico{width:31px;height:31px;flex:none;color:var(--gold-deco)}
.trust .ico--line{stroke-width:1.15}

/* ────────────────────────────── 9. product ────────────────────────────── */
.product__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.gallery{display:grid;grid-template-columns:78px minmax(0,1fr);gap:1.2rem}
.gallery__stage{
  grid-area:1/2;background:linear-gradient(160deg,var(--cream-50),#FBEEDF);
  display:grid;place-items:center;padding:clamp(1.75rem,3.5vw,3rem);min-height:0;
}
.gallery__stage picture{display:contents}
.gallery__stage img{width:auto;max-width:100%;max-height:min(64vh,620px);box-shadow:0 30px 60px -26px rgba(0,40,67,.42)}
.gallery__thumbs{grid-area:1/1;display:flex;flex-direction:column;gap:.75rem}
.thumb{aspect-ratio:1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,40,67,.12);transition:box-shadow .3s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.thumb:hover{box-shadow:inset 0 0 0 1.5px var(--gold-deco)}
.thumb.is-active{box-shadow:inset 0 0 0 1.5px var(--navy-800)}

.buy{padding-top:clamp(0rem,1vw,1rem)}
.buy__title{margin-top:1.4rem;font:400 clamp(1.85rem,.9rem + 2.4vw,2.9rem)/1.08 var(--sans);letter-spacing:-.024em;color:var(--ink);text-wrap:balance}
.buy__sub{margin-top:1rem;font:400 .73rem/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--gold-ink)}
.buy__text{margin-top:1.6rem;padding-bottom:1.9rem;border-bottom:1px solid var(--rule)}
.buy__text strong{font-weight:600;color:var(--ink)}

.plans{margin-top:1.9rem;display:grid;gap:.7rem;border:0}
.plan{
  display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.3rem;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.plan:hover{box-shadow:inset 0 0 0 1px var(--rule-strong)}
.plan.is-active{box-shadow:inset 0 0 0 1.5px var(--navy-800);background:var(--cream-50)}
.plan input{appearance:none;width:15px;height:15px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule-strong);transition:box-shadow .25s var(--ease)}
.plan input:checked{box-shadow:inset 0 0 0 4.5px var(--navy-800),inset 0 0 0 1px var(--navy-800)}
.plan input:focus-visible{outline:2px solid var(--gold-deco);outline-offset:3px}
.plan__body{flex:1;display:grid;gap:.28rem}
.plan__name{font:500 .78rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.plan__name em{font-style:normal;color:var(--gold-ink)}
.plan__note{font:300 .875rem/1.4 var(--body);color:var(--ink-soft)}
.plan__price{font:400 1.08rem/1 var(--sans);letter-spacing:.02em;color:var(--ink);flex:none}

.buy__actions{margin-top:1.5rem;display:flex;gap:.7rem}
.qty{display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--rule);flex:none}
.qty button{width:46px;height:100%;min-height:52px;font:300 1.15rem/1 var(--sans);color:var(--ink);transition:background .25s var(--ease)}
.qty button:hover{background:var(--cream-50)}
.qty input{width:34px;text-align:center;font:400 .95rem/1 var(--sans);color:var(--ink)}
.buy__note{margin-top:1rem;font:300 .86rem/1.55 var(--body);color:var(--ink-soft)}
.buy__note a{color:var(--gold-ink);border-bottom:1px solid currentColor}
.buy__perks{margin-top:1.4rem;padding-top:1.7rem;border-top:1px solid var(--rule);display:grid;gap:.75rem}
.buy__perks li{position:relative;padding-left:1.5rem;font:400 .875rem/1.5 var(--body);color:var(--ink-soft)}
.buy__perks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--gold-deco)}

/* ───────────────────────────── 10. statement ──────────────────────────── */
.statement{
  position:relative;isolation:isolate;overflow:clip;text-align:center;
  background:linear-gradient(150deg,var(--navy-900),var(--navy-800) 55%,#003256);
  padding-block:clamp(5rem,11vw,10rem);
}
.statement::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.04;mix-blend-mode:overlay}
.statement__watermark{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(90vw,720px);height:auto;opacity:.05}
.statement__inner{position:relative;z-index:2}
.statement__band{
  display:inline-block;padding:.72rem 2rem;background:var(--gold);
  font:600 clamp(.95rem,.6rem + .7vw,1.2rem)/1 var(--sans);letter-spacing:.02em;color:var(--navy-800);
}
.statement__quote{
  margin:2.6rem auto 0;max-width:24ch;
  font:300 clamp(2.1rem,1rem + 4.4vw,4.5rem)/1.14 var(--serif);letter-spacing:-.012em;color:#fff;text-wrap:balance;
}
.statement__quote em{font-style:italic;color:var(--gold)}
.statement__sig{margin-top:2.6rem;font:500 .69rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.85}

/* ─────────────────────── 11. details / tab panels ─────────────────────── */
.details{background:var(--cream-50)}
.tabs{margin-top:clamp(2.5rem,5vw,4rem)}
.tabs__bar{display:flex;gap:clamp(1.4rem,3vw,2.9rem);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
.tabs__bar::-webkit-scrollbar{display:none}
/* narrow screens: the bar scrolls sideways — its fading end says "there is more" */
@media (max-width:48rem){.tabs__bar{padding-right:2.5rem;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}}
.tabs__btn{
  position:relative;flex:none;padding:0 0 1.15rem;
  font:500 .715rem/1.4 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;transition:color .3s var(--ease);
}
/* bottom:0 — the bar scrolls sideways, so anything hanging below it is clipped */
.tabs__btn::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--navy-800);scale:0 1;transform-origin:left;transition:scale .45s var(--ease)}
.tabs__btn:hover,.tabs__btn.is-active{color:var(--ink)}
.tabs__btn.is-active::after{scale:1 1}
.tabs__pane{padding-top:clamp(2.2rem,4vw,3.4rem);animation:fade .55s var(--ease) both}
@keyframes fade{from{opacity:0;translate:0 12px}}
@media (prefers-reduced-motion:reduce){.tabs__pane{animation:none}}

.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(2rem,4.5vw,4.5rem)}
.two-col--facts{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.pane-h{font:500 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);padding-bottom:1.2rem;margin-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.pane-lead{font:400 clamp(1.15rem,.8rem + .8vw,1.5rem)/1.42 var(--sans);letter-spacing:-.01em;color:var(--ink);margin-bottom:1.1rem}
.tabs__pane p + p{margin-top:1rem}

.ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.15rem clamp(2rem,4vw,4rem)}
.ticks li{position:relative;padding-left:2.15rem}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;border-left:1.4px solid var(--gold-deco);border-bottom:1.4px solid var(--gold-deco);rotate:-45deg}
.ticks strong{font-weight:600;color:var(--ink)}
.dashes{display:grid;gap:.85rem}
.dashes li{position:relative;padding-left:1.6rem}
.dashes li::before{content:"";position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--gold-deco)}
.fineprint{margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--rule);font:300 .795rem/1.6 var(--body);color:var(--ink-soft);opacity:.9;max-width:78ch}

/* Supplement Facts — drawn like the U.S. panel on the carton */
.sfacts{background:var(--paper);border:1.5px solid var(--navy-800);padding:1rem 1.2rem .9rem;color:var(--navy-800);font-family:var(--sans)}
.sfacts__title{font:600 clamp(1.7rem,1.2rem + 1.4vw,2.25rem)/1 var(--sans);letter-spacing:-.01em;text-transform:uppercase}
.sfacts__serving{margin-top:.55rem;padding-bottom:.6rem;border-bottom:8px solid var(--navy-800);font:400 .9rem/1.4 var(--sans)}
.sfacts__table{font:400 .92rem/1.35 var(--sans)}
.sfacts__table thead th{padding:.5rem 0;border-bottom:4px solid var(--navy-800);font-weight:600;font-size:.8rem;text-align:left}
.sfacts__table thead th:last-child{text-align:right}
.sfacts__table tbody th{padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--navy-800);font-weight:600;text-align:left}
.sfacts__table tbody td{padding:.5rem 0;border-bottom:1px solid var(--navy-800);text-align:right;font-weight:600;white-space:nowrap}
.sfacts__table tr.is-break th,.sfacts__table tr.is-break td{border-top:5px solid var(--navy-800)}
.sfacts__table tr.is-indent th{padding-left:1.1rem;font-weight:400}
.sfacts__amount{font-weight:400}
.sfacts__notes{border-top:5px solid var(--navy-800);margin-top:-1px;padding-top:.6rem;font:400 .8rem/1.45 var(--sans)}
.sfacts__notes p + p{margin-top:.2rem}
.sfacts__other{margin-top:1rem;font:400 .88rem/1.5 var(--sans);color:var(--ink)}
.labelinfo{display:grid;gap:1.4rem}
.labelinfo dt{font:500 .66rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.labelinfo dd{margin-top:.55rem;font:300 .95rem/1.6 var(--body);color:var(--ink)}
.labelinfo a{border-bottom:1px solid var(--rule-strong)}

/* ─────────────────────────────── 12. science ──────────────────────────── */
.science{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(200deg,var(--navy-800),var(--navy-900) 78%)}
.science::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.04;mix-blend-mode:overlay}
.science__watermark{position:absolute;right:-15vw;top:8%;width:min(52vw,600px);height:auto;opacity:.045}
.science > .shell{position:relative;z-index:2}
.steps{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));border-top:1px solid var(--rule)}
.step{padding:2.2rem clamp(1.1rem,2vw,2rem) 0;position:relative}
.step + .step::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--rule)}
.step__num{display:block;font:300 .78rem/1 var(--sans);letter-spacing:.2em;color:var(--gold);opacity:.75}
.step__title{margin:1.6rem 0 .9rem;font:400 1.32rem/1.25 var(--sans);letter-spacing:-.012em;color:#fff}
.step p{color:var(--fg-soft);font-size:.945rem}
.omegas{
  margin-top:clamp(3.5rem,7vw,6rem);padding:clamp(2.2rem,4vw,3.4rem) 0;border-block:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1.5rem;text-align:center;
}
.omega{padding-inline:1rem}
.omega + .omega{border-left:1px solid var(--rule)}
.omega__label{font:500 .66rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.omega__value{margin-top:1.1rem;font:200 clamp(3rem,1.4rem + 5.4vw,5.6rem)/.9 var(--sans);letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.omega__value span{font-size:.28em;font-weight:400;letter-spacing:.06em;margin-left:.14em;color:var(--gold);vertical-align:.42em}
.omega__name{margin-top:.95rem;font-size:.895rem;color:var(--fg-soft)}
.omegas__foot{grid-column:1/-1;margin-top:1.6rem;font:500 .645rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.7}

/* ─────────────────────────────── 13. ritual ───────────────────────────── */
.ritual__grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.ritual__lede{margin-top:1.6rem;font:400 clamp(1.2rem,.85rem + .9vw,1.6rem)/1.4 var(--serif);font-style:italic;color:var(--gold-ink)}
.ritual__text{margin-top:1.2rem;max-width:44ch}
.ritual__copy .link-arrow{margin-top:2.2rem}
.ritual__list{display:grid;border-top:1px solid var(--rule)}
.ritual__list li{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1.5rem;padding-block:clamp(1.7rem,3vw,2.4rem);border-bottom:1px solid var(--rule)}
.ritual__step{font:500 .715rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}

/* ─────────────────────────────── 14. voices ──────────────────────────── */
.voices{background:var(--cream-50)}
.quotes{margin-top:clamp(2.8rem,5vw,4.2rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.quote{display:flex;flex-direction:column;background:var(--paper);padding:clamp(1.8rem,3vw,2.6rem);box-shadow:inset 0 0 0 1px var(--rule)}
.quote blockquote{flex:1;font:300 clamp(1.08rem,.85rem + .45vw,1.26rem)/1.6 var(--serif);font-style:italic;color:var(--ink)}
.quote blockquote::before{content:"“"}
.quote blockquote::after{content:"”"}
.quote figcaption{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--rule);font:500 .69rem/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
.quote figcaption span{display:block;margin-top:.4rem;font-weight:400;letter-spacing:.14em;color:var(--gold-ink)}

/* ──────────────────────────────── 15. faq ─────────────────────────────── */
.faq__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.55rem 0;text-align:left;
  font:400 clamp(1rem,.9rem + .3vw,1.14rem)/1.45 var(--sans);letter-spacing:-.008em;color:var(--ink);transition:color .3s var(--ease);
}
.acc__q:hover{color:var(--gold-ink)}
.acc__q i{position:relative;flex:none;width:13px;height:13px;margin-top:.42em}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;top:50%;left:0;width:13px;height:1.4px;background:var(--gold-deco);transition:rotate .4s var(--ease),opacity .3s var(--ease)}
.acc__q i::after{rotate:90deg}
.acc__item.is-open .acc__q{color:var(--gold-ink)}
.acc__item.is-open .acc__q i::after{rotate:0deg;opacity:0}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .48s var(--ease)}
.acc__item.is-open .acc__a{grid-template-rows:1fr}
.acc__a > div{overflow:hidden}
.acc__a p{padding-bottom:1.7rem;max-width:64ch;color:var(--ink-soft)}
.acc__a p + p{margin-top:-.9rem}
.acc__a a{color:var(--gold-ink);border-bottom:1px solid currentColor}
@media (prefers-reduced-motion:reduce){.acc__a{transition:none}}

/* ─────────────────────────────── 16. contact ─────────────────────────── */
.contact{background:var(--cream-50)}
.contact__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact__details{margin-top:2.2rem;display:grid;gap:1.15rem}
.contact__details li{display:flex;gap:.9rem;align-items:flex-start;font:400 .98rem/1.55 var(--sans);color:var(--ink)}
.contact__details .ico{width:20px;height:20px;flex:none;margin-top:.12rem;color:var(--gold-deco)}
.contact__details a{border-bottom:1px solid var(--rule-strong);transition:border-color .3s var(--ease)}
.contact__details a:hover{border-bottom-color:var(--navy-800)}
.contact__form{background:var(--paper);padding:clamp(1.6rem,3.5vw,2.8rem);box-shadow:inset 0 0 0 1px var(--rule)}

/* ──────────────────────────────── 17. forms ───────────────────────────── */
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field__label{font:500 .68rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.field__opt{font-weight:400;letter-spacing:.06em;text-transform:none;color:var(--ink-soft);opacity:.85}
.field input,.field select,.field textarea,.signup input{
  width:100%;padding:.95rem 1.05rem;background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(0,40,67,.22);
  font:300 1rem/1.4 var(--body);color:var(--ink);appearance:none;transition:box-shadow .25s var(--ease);
}
.field select{
  padding-right:2.6rem;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23002843' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 1rem center/11px;
}
.field textarea{resize:vertical;min-height:7.5rem}
.field input::placeholder,.field textarea::placeholder,.signup input::placeholder{color:rgba(61,78,94,.55)}
.field input:focus,.field select:focus,.field textarea:focus,.signup input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--navy-800)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,.signup input[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--danger)}
.field__error{font:400 .8rem/1.4 var(--body);color:var(--danger)}

.check{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.1rem;font:300 .9rem/1.55 var(--body);color:var(--ink-soft);cursor:pointer}
.check input{
  appearance:none;flex:none;width:18px;height:18px;margin-top:.18rem;display:grid;place-items:center;
  background:var(--paper);box-shadow:inset 0 0 0 1px rgba(0,40,67,.4);cursor:pointer;transition:background .2s;
}
.check input:checked{background:var(--navy-800);box-shadow:none}
.check input:checked::after{content:"";width:9px;height:5px;border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);rotate:-45deg;translate:0 -1px}
.check input:focus-visible{outline:2px solid var(--gold-deco);outline-offset:2px}
.check.is-invalid input{box-shadow:inset 0 0 0 1.5px var(--danger)}
.check .field__error{flex-basis:100%}
.check{flex-wrap:wrap}
.check > span{flex:1;min-width:0}
.check a{color:var(--gold-ink);border-bottom:1px solid currentColor}

.form__legal{margin-top:1.1rem;font:300 .8rem/1.55 var(--body);color:var(--ink-soft)}
.form__legal a{color:var(--gold-ink);border-bottom:1px solid currentColor}
.form .btn[type=submit]{margin-top:1.5rem}
.form__status{margin-top:1rem;min-height:1.4em;font:500 .74rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.form__status:empty{min-height:0;margin-top:0}
.form__status.is-error{color:var(--danger)}
.form__status.is-ok{color:var(--ink)}
.form__status.is-ok::before{content:"";display:inline-block;width:10px;height:6px;margin-right:.7em;border-left:1.5px solid var(--gold-deco);border-bottom:1.5px solid var(--gold-deco);rotate:-45deg;translate:0 -3px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.grecaptcha-badge{visibility:hidden!important}

/* ──────────────────────────────── 18. cta ─────────────────────────────── */
.cta{background:var(--cream);padding-block:clamp(4rem,9vw,7.5rem);text-align:center}
.cta__inner{display:flex;flex-direction:column;align-items:center}
.cta__mark{width:58px;height:auto;fill:var(--tan)}
.cta__title{margin-top:2rem;font:400 clamp(2rem,1rem + 3.6vw,3.5rem)/1.12 var(--serif);letter-spacing:-.01em;color:var(--navy-800);text-wrap:balance}
.cta__lede{margin-top:1.3rem;max-width:38ch;color:var(--ink-soft)}
.signup{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.7rem;width:100%;max-width:520px;justify-content:center}
.signup input{flex:1 1 220px;min-width:0;padding:1.15rem 1.35rem;font-size:.97rem}
.signup .btn{flex:0 0 auto;margin-top:0}
.signup .btn[type=submit]{margin-top:0}
.signup .form__legal,.signup .form__status{flex-basis:100%;text-align:center}
.signup__note{margin-top:.6rem}

/* ─────────────────────────────── 19. footer ──────────────────────────── */
.site-foot{background:var(--navy-900);padding-block:clamp(3.5rem,7vw,6rem) 2.5rem}
.site-foot__top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--rule)}
.brand--foot .brand__mark{width:46px}
.brand--foot .brand__word{height:19px}
.site-foot__tagline{width:min(250px,100%);height:auto;margin-top:1.2rem;fill:rgba(255,246,236,.8)}
.site-foot__note{margin-top:1.5rem;font-size:.895rem;color:var(--fg-soft)}
.site-foot__address{margin-top:1.7rem;font:300 .895rem/1.65 var(--body);color:var(--fg-soft)}
.site-foot__label{display:block;margin-bottom:.4rem;font:500 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.site-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:2.2rem}
.site-foot__cols h2{font:500 .655rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding-bottom:1.4rem}
.site-foot__menu{display:grid;gap:.85rem}
.site-foot__menu a,.site-foot__menu .link-button{font-size:.895rem;color:var(--fg-soft);transition:color .3s var(--ease);overflow-wrap:anywhere}
.site-foot__menu a:hover,.site-foot__menu .link-button:hover{color:var(--gold-soft)}
.site-foot__legal{padding-top:2.5rem}
.disclaimer{font:300 .765rem/1.7 var(--body);color:rgba(255,246,236,.52);max-width:88ch}
.site-foot__meta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font:400 .655rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,246,236,.48)}

/* ───────────────────────────── 20. sticky buy ─────────────────────────── */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:color-mix(in srgb,var(--navy-900) 96%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);translate:0 100%;transition:translate .5s var(--ease);
}
.stickybar.is-shown{translate:0 0}
.stickybar__inner{display:flex;align-items:center;gap:1.2rem;padding-block:.75rem}
.stickybar__thumb{width:30px;height:auto;flex:none}
.stickybar__text{flex:1;min-width:0}
.stickybar__name{font:400 .875rem/1.3 var(--sans);letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar__meta{margin-top:.2rem;font:400 .64rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.8}

/* ─────────────────────────── 21. order dialog ─────────────────────────── */
.order{
  border:0;padding:0;margin:auto;width:min(780px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;
  background:var(--paper);color:var(--ink-soft);box-shadow:0 40px 120px -30px rgba(0,19,34,.6);overscroll-behavior:contain;
}
.order::backdrop{background:rgba(0,19,34,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.order[open]{animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:0;translate:0 18px}}
.order__panel{position:relative;padding:clamp(1.6rem,4vw,3rem)}
.order__close{position:absolute;top:.9rem;right:.9rem;width:42px;height:42px;display:grid;place-items:center;color:var(--ink);transition:background .25s}
.order__close:hover{background:var(--cream-50)}
.order__close .ico{width:20px;height:20px;stroke-width:1.4}
.order__head{padding-right:2.5rem}
.order__title{margin-top:1rem;font:400 clamp(1.7rem,1rem + 2vw,2.4rem)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.order__lede{margin-top:.8rem;font-size:.95rem}
.order__plans{margin:1.8rem 0 1.4rem;border:0;display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch}
.order__plans legend{margin-bottom:.7rem}
.order__plans .plan{flex:1 1 220px}
.plan--compact{padding:.95rem 1.1rem}
.field--qty{flex:0 0 110px;justify-content:flex-end}
.field--qty label{font-size:.62rem}
.order__foot{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.order__foot .btn[type=submit]{margin-top:0}
.order__total{font:400 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.order__total strong{margin-left:.45em;font-size:1.3rem;font-weight:500;letter-spacing:.02em}
.order__total span{display:block;margin-top:.35rem;font:300 .84rem/1.45 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
body.has-dialog{overflow:hidden}

/* ──────────────────────────────── 22. toast ───────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:1.5rem;z-index:300;width:max-content;max-width:min(560px,calc(100% - 2rem));
  translate:-50% 150%;opacity:0;pointer-events:none;
  padding:1rem 1.4rem;background:var(--navy-800);color:#FFF6EC;border-left:2px solid var(--gold);
  box-shadow:0 24px 60px -20px rgba(0,19,34,.6);font:400 .95rem/1.5 var(--body);
  transition:translate .5s var(--ease),opacity .4s var(--ease);
}
.toast.is-shown{translate:-50% 0;opacity:1;pointer-events:auto;cursor:pointer}
.toast.is-error{border-left-color:#E48A78}
body.has-stickybar .toast{bottom:5.5rem}

/* ─────────────────────────────── 23. consent ──────────────────────────── */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:250;display:flex;pointer-events:none}
.consent__card{
  pointer-events:auto;width:min(470px,100%);background:var(--paper);color:var(--ink-soft);
  padding:1.45rem 1.5rem 1.2rem;box-shadow:0 30px 80px -24px rgba(0,19,34,.45),inset 0 0 0 1px var(--rule);
  animation:rise .5s var(--ease);
}
.consent__title{font:500 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.consent__text{margin-top:.85rem;font:300 .9rem/1.6 var(--body)}
.consent__text a{color:var(--gold-ink);border-bottom:1px solid currentColor}
.consent__gpc{margin-top:.6rem;font:400 .82rem/1.5 var(--body);color:var(--gold-ink)}
.consent__prefs{margin-top:1rem;padding:1rem 0;display:grid;gap:.85rem;border-block:1px solid var(--rule)}
.switch{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__ui{width:34px;height:20px;margin-top:.1rem;border-radius:20px;background:#C9D1D8;position:relative;transition:background .25s}
.switch__ui::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:translate .25s var(--ease)}
.switch input:checked + .switch__ui{background:var(--navy-800)}
.switch input:checked + .switch__ui::after{translate:14px 0}
.switch input:disabled + .switch__ui{opacity:.5}
.switch input:focus-visible + .switch__ui{outline:2px solid var(--gold-deco);outline-offset:2px}
.switch__text{font:300 .85rem/1.5 var(--body)}
.switch__text strong{display:block;font:500 .7rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.consent__actions{margin-top:1.15rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:flex-end}
.consent__link{margin-right:auto;padding:.6rem 0;font:500 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid transparent}
.consent__link:hover{border-bottom-color:currentColor}

/* ────────────────────────── 24. pages & legal copy ────────────────────── */
/* not ".page": WordPress puts that class on <body> for every static page */
.site-page{padding-block:calc(clamp(3.5rem,8vw,7rem) + var(--stuck-gap,0px)) clamp(4rem,9vw,8rem);background:var(--paper);transition:padding-top .4s var(--ease)}
.site-page--center .shell{min-height:48vh;display:grid;align-items:center}
.legal{max-width:760px;margin-inline:auto}
.legal--center{text-align:center;max-width:560px}
.legal--center .eyebrow{justify-content:center}
.legal--center > * + *{margin-top:1.2rem}
.legal--center form{margin-top:2rem}
.legal__head{padding-bottom:2rem;margin-bottom:2.4rem;border-bottom:1px solid var(--rule)}
.legal--center .legal__title{margin-top:1rem}
.legal__title{margin-top:1.2rem;font:400 clamp(2.1rem,1.2rem + 3vw,3.3rem)/1.08 var(--sans);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.legal__entry + .legal__entry{margin-top:2.6rem;padding-top:2.6rem;border-top:1px solid var(--rule)}
.legal__entry-title{font:400 1.6rem/1.2 var(--sans);color:var(--ink)}
.legal__body{color:var(--ink-soft)}
.legal__body > * + *{margin-top:1.1rem}
.legal__body h2{margin-top:2.8rem;font:500 1.38rem/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.legal__body h3{margin-top:2rem;font:500 .76rem/1.45 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.legal__body ul,.legal__body ol{padding-left:1.3rem}
.legal__body ul{list-style:disc}
.legal__body ol{list-style:decimal}
.legal__body li + li{margin-top:.45rem}
.legal__body li::marker{color:var(--gold-deco)}
.legal__body a,.legal__body .link-button{color:var(--gold-ink);border-bottom:1px solid currentColor}
.legal__body strong{font-weight:600;color:var(--ink)}
.legal__body table{margin-top:1.4rem;font-size:.92rem}
.legal__body th,.legal__body td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.legal__body th{font:500 .7rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.legal__body .has-small-font-size{font-size:.84rem}
.legal__body .wp-block-separator{border:0;border-top:1px solid var(--rule);margin-block:2.4rem}
.notfound__mark{width:64px;height:auto;margin-inline:auto;fill:var(--tan)}

/* ─────────────────────── 24b. B2B landing & /form ─────────────────────── */
/* hero: the brand leads (wordmark + serif claim); the product follows, smaller */
.b2b-event{
  display:inline-flex;align-items:center;gap:.75em;margin-bottom:clamp(1.6rem,3vw,2.4rem);
  padding:.6rem 1.05rem;box-shadow:inset 0 0 0 1px var(--rule-strong);
  font:500 .64rem/1.45 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.b2b-event::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(254,208,158,.16)}
.b2b-hero__brand{line-height:0}
.b2b-hero__word{width:auto;height:clamp(30px,1.2rem + 2.6vw,54px);fill:var(--gold)}
.b2b-hero__title{margin-top:clamp(1.3rem,2.4vw,1.9rem);font:300 clamp(2.5rem,1.1rem + 4.4vw,4.7rem)/1.04 var(--serif);letter-spacing:-.012em;color:#fff;text-wrap:balance}
.b2b-hero__product{margin-top:1.9rem;padding:.25rem 0 .25rem 1.3rem;border-left:1px solid var(--gold)}
.b2b-hero__product span{display:block;font:500 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.85}
.b2b-hero__product p{margin-top:.7rem;font:400 .8rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff}

.b2b-brand{background:var(--cream-50)}
.b2b-brand__lede{margin:1.6rem auto 0;max-width:40ch;font:400 clamp(1.15rem,.85rem + .8vw,1.45rem)/1.5 var(--serif);font-style:italic;color:var(--gold-ink)}
.b2b-brand__text{margin:clamp(2rem,4vw,3rem) auto 0;max-width:64ch;text-align:center}
.b2b-why__title{margin-top:clamp(3.5rem,7vw,5.5rem);text-align:center;font:500 .69rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.b2b-cards{margin-top:1.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.b2b-card{background:var(--paper);padding:clamp(1.8rem,3vw,2.5rem);box-shadow:inset 0 0 0 1px var(--rule);border-top:2px solid var(--gold-deco)}
.b2b-card__label{display:flex;gap:.9em;align-items:baseline;font:500 .66rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.b2b-card__label span{font-weight:300;letter-spacing:.12em;opacity:.8}
.b2b-card__title{margin:1.1rem 0 .8rem;font:400 clamp(1.4rem,1rem + 1vw,1.75rem)/1.2 var(--serif);color:var(--ink)}
.b2b-card p:last-child{font-size:.95rem}

.b2b-product__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.b2b-product__media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem);align-items:end;padding:clamp(1.4rem,3.5vw,2.8rem);background:linear-gradient(160deg,var(--cream-50),#FBEEDF)}
.b2b-panel img{width:100%;height:auto;box-shadow:0 26px 50px -24px rgba(0,40,67,.45)}
.b2b-panel figcaption{margin-top:.9rem;text-align:center;font:500 .62rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.b2b-product__text{margin-top:1.5rem}
.b2b-facts{margin-top:1.8rem;border-top:1px solid var(--rule)}
.b2b-facts div{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:1.2rem;padding:.95rem 0;border-bottom:1px solid var(--rule)}
.b2b-facts dt{font:500 .66rem/1.7 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.b2b-facts dd{font:400 .95rem/1.5 var(--sans);color:var(--ink)}
.b2b-product__note{margin-top:1.1rem;font:300 .8rem/1.5 var(--body)}

.b2b-dark{background:linear-gradient(200deg,var(--navy-800),var(--navy-900) 78%);isolation:isolate;overflow:clip}
.b2b-dark::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.04;mix-blend-mode:overlay}
.b2b-dark > .shell{position:relative;z-index:2}
.b2b-dark__watermark{position:absolute;right:-12vw;top:10%;width:min(50vw,560px);height:auto;opacity:.045;fill:var(--gold);pointer-events:none}
.b2b-ritual__lede{margin-top:1.4rem;font:400 clamp(1.2rem,.85rem + .9vw,1.6rem)/1.4 var(--serif);font-style:italic;color:var(--gold)}

.b2b-quality__grid{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.b2b-quality__tech p + p{margin-top:1rem}
.b2b-quality__tech p:first-of-type{font:400 clamp(1.1rem,.85rem + .6vw,1.35rem)/1.5 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.b2b-badges{display:grid;gap:.75rem}
.b2b-badges li{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--rule);font:500 .74rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.b2b-badges .ico{width:28px;height:28px;flex:none;color:var(--gold-deco)}
.b2b-quality__note{margin-top:1.4rem;font:300 .92rem/1.6 var(--body)}

.lead-form .check{margin-top:1.3rem}
.b2b-cta__actions{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;align-items:center;justify-content:center}
/* buttons to the partner form that close the landing sections */
.b2b-more{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.b2b-more--center{text-align:center}
.b2b-more--head,.b2b-product__copy .b2b-more{margin-top:2rem}

.b2b-foot .site-foot__address--col{margin-top:0}
.b2b-foot .site-foot__cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.site-foot__tm{margin-top:.9rem}

@media (max-width:1080px){
  .b2b-product__grid,.b2b-quality__grid{grid-template-columns:1fr}
  .b2b-product__media{max-width:620px}
}
@media (max-width:640px){
  .b2b-facts div{grid-template-columns:1fr;gap:.3rem}
  .b2b-product__media{padding:1rem}
}

/* ──────────── 24c. /form — AF&B 2026 intake (sent to the Google Sheet) ──────────── */
/* full-bleed split like the show form: navy pitch left, form right — the text lines up with the header */
.intake.site-page{padding:0;background:var(--paper)}
.intake__grid{
  --edge:max(var(--gut),calc((100cqw - var(--shell)) / 2 + var(--gut)));
  container-type:inline-size;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:1fr auto;grid-template-areas:"pitch form" "side form";min-height:calc(100svh - 5.5rem);
}
.intake__pitch,.intake__side{
  --fg:#FFF6EC;--fg-soft:rgba(255,246,236,.76);--accent:var(--gold);--rule:rgba(254,208,158,.2);
  background:var(--navy-800);color:var(--fg);
}
.intake__pitch{grid-area:pitch;position:relative;isolation:isolate;overflow:hidden;padding:calc(clamp(2.6rem,5vw,4.6rem) + var(--stuck-gap,0px)) clamp(1.6rem,4vw,3.6rem) clamp(2rem,3vw,2.6rem) var(--edge)}
.intake__side{grid-area:side;padding:0 clamp(1.6rem,4vw,3.6rem) clamp(2.4rem,5vw,4.6rem) var(--edge);background:linear-gradient(180deg,var(--navy-800),var(--navy-900))}
.intake__watermark{position:absolute;z-index:-1;right:-18%;top:18%;width:min(80%,420px);height:auto;opacity:.06;fill:var(--gold);pointer-events:none}
.intake__tagline{margin-bottom:clamp(2rem,4vw,3.2rem);font:500 .68rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.intake__title{margin-top:1.3rem;font:300 clamp(2.1rem,1.1rem + 2.6vw,3.3rem)/1.1 var(--serif);font-style:italic;color:#fff;text-wrap:balance}
.intake__lede{margin-top:1.3rem;max-width:42ch;color:var(--fg-soft)}
.intake__facts{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;padding-top:1.9rem;border-top:1px solid var(--rule)}
.intake__facts dt{font:500 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.intake__facts dd{margin-top:.55rem;font:400 .98rem/1.4 var(--sans);color:#fff}
.intake__foot{margin-top:2rem;font:300 .84rem/1.6 var(--body);color:rgba(255,246,236,.6)}
.intake__foot strong{font-weight:500;color:rgba(255,246,236,.88)}
.intake__form{grid-area:form;display:flex;align-items:center;background:var(--paper);padding:calc(clamp(2.6rem,5vw,4.6rem) + var(--stuck-gap,0px)) var(--edge) clamp(2.6rem,5vw,4.6rem) max(var(--gut),clamp(1.3rem,4.5vw,4.2rem))}
.intake .formcard{width:100%;max-width:520px;margin-inline:auto}
.intake__form-title{font:400 clamp(1.6rem,1.1rem + 1.2vw,2.1rem)/1.15 var(--sans);letter-spacing:-.018em;color:var(--ink)}
.intake__sub{margin:.7rem 0 2rem;font-size:.95rem}
.intake .req{margin-left:2px;color:var(--gold-deco)}
.chiprow{display:flex;flex-wrap:wrap;gap:.55rem}
.intake .chip{
  position:relative;display:inline-flex;align-items:center;padding:.62rem 1rem;cursor:pointer;user-select:none;
  box-shadow:inset 0 0 0 1px rgba(0,40,67,.22);font:400 .9rem/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.intake .chip:hover{box-shadow:inset 0 0 0 1px var(--navy-800)}
.intake .chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.intake .chip:has(input:focus-visible){outline:2px solid var(--gold-deco);outline-offset:2px}
.intake .chip.is-on{background:var(--navy-800);color:var(--gold);box-shadow:inset 0 0 0 1px var(--navy-800)}
.intake .btn.submit{width:100%;margin-top:1.7rem}
.intake__fine{margin-top:1rem;font:300 .8rem/1.55 var(--body);color:var(--ink-soft)}
.intake__error{color:var(--danger)}
.intake .formcard.hide{display:none}
.intake .success{display:none;width:100%;max-width:520px;margin-inline:auto;padding:2.4rem 1rem;text-align:center}
.intake .success.show{display:block}
.intake .success .mark{width:56px;height:56px;margin:0 auto 1.4rem;display:grid;place-items:center;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px var(--tan)}
.intake .success h2{font:400 clamp(1.9rem,1.2rem + 1.4vw,2.5rem)/1.1 var(--serif);color:var(--ink)}
.intake .success p{margin-top:.8rem}
@media (max-width:880px){
  .intake__grid{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"pitch" "form" "side";min-height:0}
  .intake__pitch{padding-right:var(--gut)}
  .intake__form{padding-top:clamp(2.4rem,8vw,3rem);padding-left:var(--gut)}
  .intake__side{padding-top:2.2rem;padding-right:var(--gut)}
}

/* ─────────────────────────── 25. scroll reveal ────────────────────────── */
.js .reveal{opacity:0;translate:0 20px;transition:opacity .85s var(--ease) var(--d,0ms),translate .85s var(--ease) var(--d,0ms)}
.js .reveal--slow{transition-duration:1.15s}
.js .reveal.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;translate:0 0;transition:none}}

/* ────────────────────────────── 26. responsive ────────────────────────── */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(3rem,7vw,4.5rem)}
  .hero__copy{max-width:640px}
  .carton{--ch:clamp(320px,52vw,440px)}
  .trust__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem 0}
  .trust__list li:nth-child(3n+1){border-left:0}
  .trust__list li:nth-child(n+4){padding-top:1.8rem;border-top:1px solid rgba(0,40,67,.13)}
  .product__grid,.ritual__grid,.faq__grid,.contact__grid,.two-col--facts{grid-template-columns:1fr}
  .gallery,.buy{max-width:620px}
  .faq .sec-head,.ritual__copy,.contact .sec-head{max-width:none}
}

@media (max-width:860px){
  /* .site-head carries a backdrop-filter, which makes it the containing block
     for fixed children too — so the panel hangs from the header on purpose */
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;z-index:99;
    background:var(--navy-900);border-block:1px solid var(--rule);
    padding:.25rem var(--gut) 1.5rem;max-height:min(72vh,560px);overflow-y:auto;
    opacity:0;translate:0 -10px;visibility:hidden;
    transition:opacity .3s var(--ease),translate .35s var(--ease),visibility 0s linear .35s;
  }
  .nav.is-open{opacity:1;translate:0 0;visibility:visible;transition:opacity .3s var(--ease),translate .35s var(--ease),visibility 0s}
  .site-head:has(.nav.is-open){background:var(--navy-900)}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{padding-block:1.15rem;border-bottom:1px solid var(--rule);font-size:.8rem}
  .nav__list a::after{display:none}
  .burger{display:block}
  .site-head__end .btn--ghost{display:none}
  /* the nav no longer pushes anything, so the burger claims the space; -6px
     cancels its own 6px inset so the bars land on the gutter */
  .site-head__end{margin-left:auto;margin-right:-6px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(odd)::before{display:none}
  .step:nth-child(n+3){margin-top:1.5rem;border-top:1px solid var(--rule);padding-top:2.2rem}
  .site-foot__top{grid-template-columns:1fr}
}

@media (max-width:782px){.admin-bar .site-head{top:46px}}
@media (max-width:600px){.admin-bar .site-head{top:0}}

@media (max-width:640px){
  .trust__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__list li{border-left:0!important}
  .trust__list li:nth-child(2n){box-shadow:-1px 0 0 rgba(0,40,67,.13)}
  .trust__list li:nth-child(n+3){padding-top:1.8rem;border-top:1px solid rgba(0,40,67,.13)}
  .gallery{grid-template-columns:1fr;gap:.75rem}
  .gallery__stage,.gallery__thumbs{grid-area:auto}
  .gallery__thumbs{flex-direction:row}
  .thumb{flex:1;min-width:0}
  .omegas{grid-template-columns:1fr;gap:0}
  .omega + .omega{border-left:0;border-top:1px solid var(--rule);padding-top:2rem;margin-top:2rem}
  .steps{grid-template-columns:1fr}
  .step::before{display:none!important}
  .step + .step{margin-top:1.4rem;border-top:1px solid var(--rule)}
  .ritual__list li{grid-template-columns:1fr;gap:.7rem}
  .buy__actions{flex-wrap:wrap}
  .btn--block{width:100%}
  .stickybar__text{display:none}
  .site-foot__meta{justify-content:flex-start}
  .form__grid{grid-template-columns:1fr}
  .order{width:100%;max-width:none;max-height:100dvh;height:100dvh;margin:0}
  .order__foot .btn{width:100%}
  .consent{left:.6rem;right:.6rem;bottom:.6rem}
  .consent__actions .btn{flex:1 1 auto}
}

@media (max-width:400px){
  .hero__cta{gap:1.2rem}
  .hero__cta .btn{width:100%}
}

@media print{
  .ticker,.site-head,.stickybar,.hero__glow,.cta,.consent,.toast,.order{display:none!important}
  body{color:#000;background:#fff}
  .js .reveal{opacity:1;translate:0}
}