/** Shopify CDN: Minification failed

Line 528:24 Unexpected "/"

**/
/* ============================================================
   Vocalise — theme core
   Tokens derived from the Figma source of truth
   ============================================================ */

:root{
  --green:        #214031;
  --green-soft:   #3e5348;
  --mint:         #cde4d3;
  --gold:         #d5b17b;
  --ink:          #1c2615;
  --body:         #10130a;
  --muted:        #666666;
  --line:         rgba(255,255,255,.18);
  --alert:        #e43131;
  --paper:        #ffffff;

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Poppins", -apple-system, "Segoe UI", sans-serif;

  --r-pill:   60px;
  --r-card:   30px;
  --r-media:  32px;
  --r-blob:   78px;
  --r-soft:   20px;

  --gutter:   80px;
  --page:     1440px;
  --block:    120px;
  --veil:     .86;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --slow:     .7s var(--ease);
  --fast:     .32s var(--ease);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.67;
  color:var(--body);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ display:block; max-width:100%; }

/* Shopify drops a placeholder <svg> in wherever an image has not been uploaded yet.
   Without this it has no intrinsic size and the container collapses. */
.placeholder-svg,
.hero__bg svg, .pagehero__bg svg, .collage__cell svg,
.benefits__bg svg, .pos__bg svg, .pos__media svg,
.storyband__bg svg, .storyband__media svg, .split-media svg,
.spot__img svg, .banner svg,
.gallery__main svg, .pcard__media svg, .article-card__media svg,
.cart-line__media svg{
  width:100%; height:100%; display:block;
  background:var(--mint); fill:rgba(28,38,21,.30);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green); color:#fff; padding:14px 22px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- layout ---------- */

.wrap{
  width:min(var(--page), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}
.section{ padding-block:var(--block); position:relative; }
.section--flush{ padding-block:0; }

/* ---------- type ---------- */

.display-1,.display-2,.display-3,.display-4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--ink);
  margin:0;
  text-transform:capitalize;
  letter-spacing:-.01em;
}
.display-1{ font-size:clamp(40px,4.7vw,90px); line-height:.86; }
.display-2{ font-size:clamp(30px,2.9vw,55px); line-height:1.09; }
.display-3{ font-size:clamp(24px,1.9vw,36px); line-height:1.15; }
.display-4{ font-size:clamp(21px,1.7vw,32px); line-height:1.2; }

.eyebrow{
  font-family:var(--font-body);
  font-size:clamp(14px,1.05vw,18px);
  font-weight:400;
  line-height:1.4;
  margin:0 0 14px;
  color:inherit;
  opacity:.9;
}
.lede{ font-size:clamp(15px,1.05vw,18px); line-height:1.67; margin:0; }
.measure{ max-width:62ch; }

.rte > * + *{ margin-top:1.1em; }
.rte h2{ font-family:var(--font-display); font-size:clamp(26px,2.2vw,42px); line-height:1.15; color:var(--ink); }
.rte h3{ font-family:var(--font-display); font-size:clamp(22px,1.7vw,30px); line-height:1.2; color:var(--ink); }
.rte a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.rte ul{ list-style:none; padding-left:0; }
.rte ul li{ position:relative; padding-left:26px; margin-top:.5em; }
.rte ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--gold);
}
.rte ol{ padding-left:20px; }
.rte img{ border-radius:var(--r-card); }

/* ---------- buttons ---------- */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:13px 32px;
  border-radius:var(--r-pill);
  font-weight:500; font-size:clamp(14px,1.05vw,18px); line-height:1.2;
  text-align:center;
  isolation:isolate;
  transition:color var(--fast), box-shadow var(--fast), transform var(--fast);
  overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn--solid{ background:var(--green); color:#fff; box-shadow:0 10px 24px -16px rgba(33,64,49,.9); }
.btn--solid::after{ background:var(--gold); }
.btn--solid:hover{ color:var(--ink); }

.btn--light{ background:#fff; color:var(--body); box-shadow:0 10px 24px -18px rgba(0,0,0,.5); }
.btn--light::after{ background:var(--green); }
.btn--light:hover{ color:#fff; }

.btn--outline{ border:1.5px solid currentColor; color:var(--ink); }
.btn--outline::after{ background:var(--ink); }
.btn--outline:hover{ color:#fff; }

.btn--mint{ background:var(--mint); color:var(--ink); }
.btn--mint::after{ background:var(--green); }
.btn--mint:hover{ color:#fff; }

.btn--block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

.btn .arw{ flex:0 0 20px; width:20px; height:20px; transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

/* text link with growing rule */
.link-line{
  position:relative; display:inline-block; padding-bottom:3px; font-weight:500;
}
.link-line::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.link-line:hover::after{ transform:scaleX(1); transform-origin:left; }


/* ============================================================
   The Science page — same voice as the rest of the theme
   ============================================================ */

.sci-eyebrow{
  margin:0 0 16px;
  font-family:var(--font-body); font-size:clamp(14px,1.05vw,18px);
  font-weight:400; line-height:1.4; color:var(--gold);
}
.sci-eyebrow--center{ text-align:center; color:#5c8172; }

/* ---- intro band ---- */
.sci-intro{
  background:var(--green); color:#fff;
  padding-block:clamp(126px,12vw,205px) clamp(58px,6.4vw,118px);
}
.sci-intro__title{
  font-size:clamp(40px,4.7vw,90px); line-height:.9; color:#fff; max-width:15ch;
}
.sci-intro__title em{ display:block; font-style:italic; font-weight:400; color:var(--gold); }

.sci-intro__body{
  margin-top:clamp(22px,2.4vw,30px); max-width:64ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:rgba(255,255,255,.85);
}
.sci-intro__body p{ margin:0 0 18px; }
.sci-intro__body p:last-child{ margin-bottom:0; }
.sci-intro__body strong{ color:#fff; font-weight:600; }

.sci-pillars{
  margin-top:clamp(38px,4.4vw,68px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:clamp(16px,2vw,28px);
}
.sci-pillar{
  background:var(--mint); color:var(--ink);
  border-radius:var(--r-card); padding:clamp(24px,2.4vw,34px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sci-pillar:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -32px rgba(0,0,0,.65); }
.sci-pillar h3{
  margin:0 0 12px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(21px,1.7vw,28px); line-height:1.2; color:var(--green);
}
.sci-pillar p{ margin:0; font-size:clamp(14px,1vw,16px); line-height:1.65; color:#3f4a39; }

/* ---- ingredient rows ---- */
.sci-ing{ padding-block:clamp(58px,6.2vw,118px); }
.sci-ing__row{
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,74px);
  padding-block:clamp(38px,4.6vw,74px);
}
.sci-ing__row:first-child{ padding-top:0; }
.sci-ing__row + .sci-ing__row{ border-top:1px solid rgba(28,38,21,.12); }
.sci-ing__aside{ flex:1 1 260px; max-width:340px; }
.sci-ing__main{ flex:2 1 460px; min-width:0; }

.sci-dose{
  margin:0; font-family:var(--font-display); font-weight:700; line-height:.85;
  font-size:clamp(44px,4.4vw,80px); color:var(--green);
}
.sci-activity{ margin:14px 0 0; font-size:clamp(13px,.95vw,15px); line-height:1.5; color:var(--muted); }
.sci-name{
  margin:24px 0 0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px,1.9vw,36px); line-height:1.15; color:var(--ink);
}
.sci-latin{
  margin:8px 0 0; font-family:var(--font-display); font-style:italic;
  font-size:clamp(16px,1.2vw,20px); color:var(--gold);
}
.sci-source{ margin:6px 0 0; font-size:clamp(14px,1vw,16px); color:var(--muted); }
.sci-tag{
  display:inline-flex; align-items:center; margin-top:20px;
  padding:8px 16px; border-radius:999px; background:var(--mint); color:var(--ink);
  font-size:14px; font-weight:500;
}

.sci-video{
  position:relative; overflow:hidden; margin-top:26px;
  aspect-ratio:9/16; max-width:290px;
  border-radius:var(--r-media); background:var(--green-soft);
}
.sci-video video{ width:100%; height:100%; object-fit:cover; display:block; }

/* pasted YouTube / Vimeo link */
.sci-embed{ position:absolute; inset:0; overflow:hidden; }
.sci-embed img{ width:100%; height:100%; object-fit:cover; display:block; }
.sci-embed iframe{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  border:0; display:block;
  width:auto; height:auto; min-width:100%; min-height:100%; aspect-ratio:16/9;
}

/* play / pause button — defined here too so this page never depends on another section */
.sci-video .vplay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(16,19,10,.14); transition:background var(--fast);
}
.sci-video .vplay:hover{ background:rgba(16,19,10,.26); }
.sci-video .vplay__icon{
  width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.88); display:grid; place-items:center;
  transition:transform var(--fast), background var(--fast);
}
.sci-video .vplay:hover .vplay__icon,
.sci-video .vplay:focus-visible .vplay__icon{ transform:scale(1.1); background:#fff; }
.sci-video .vplay svg{ width:21px; height:21px; fill:var(--ink); }
.sci-video .vplay__play{ display:none; }
.sci-video .vplay[data-playing="false"] .vplay__play{ display:block; }
.sci-video .vplay[data-playing="false"] .vplay__pause{ display:none; }

.sci-quote{
  position:relative; margin:0 0 28px; padding-left:clamp(20px,2vw,30px);
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,2vw,34px); line-height:1.3; color:var(--ink);
}
.sci-quote::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--gold);
}
.sci-quote p{ margin:0; }

.sci-body{ font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--body); }
.sci-body p{ margin:0 0 18px; }
.sci-body p:last-child{ margin-bottom:0; }
.sci-body strong{ color:var(--ink); font-weight:600; }

.sci-refs{
  margin-top:clamp(28px,3vw,40px);
  background:var(--mint); border-radius:var(--r-soft);
  padding:clamp(22px,2.2vw,32px);
}
.sci-refs__label{
  margin:0 0 14px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px,1.4vw,24px); line-height:1.2; color:var(--green);
}
.sci-refs ul{ margin:0; padding:0; list-style:none; }
.sci-refs li{
  position:relative; padding-left:26px; margin-top:10px;
  font-size:clamp(13px,.95vw,15px); line-height:1.65; color:#414b3e;
}
.sci-refs li::before{ content:"\2192"; position:absolute; left:0; top:0; color:var(--green); }

/* ---- fine print ---- */
.sci-fineprint{ padding-block:clamp(24px,2.6vw,40px); }
.sci-fineprint--light{ background:#f5f7f3; }
.sci-fineprint--white{ background:#fff; }
.sci-fineprint--dark{ background:var(--green); }
.sci-fineprint__text p{
  margin:0 0 10px; font-size:clamp(12px,.9vw,14px); line-height:1.7; color:var(--muted);
}
.sci-fineprint__text p:last-child{ margin-bottom:0; }
.sci-fineprint--dark .sci-fineprint__text p{ color:rgba(255,255,255,.6); }

/* ---- comparison ---- */
.sci-vs{ background:#eef5f0; padding-block:clamp(62px,6.2vw,118px); }
.sci-vs__head{ text-align:center; max-width:720px; margin-inline:auto; }
.sci-vs__head h2 em{ display:block; font-style:italic; font-weight:400; color:#5c8172; }
.sci-vs__intro{
  margin:20px auto 0; max-width:56ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--muted);
}
.sci-note{
  margin:clamp(24px,2.6vw,34px) auto 0; max-width:620px; text-align:left;
  background:#fff; border-left:3px solid var(--gold); border-radius:var(--r-soft);
  padding:20px 26px; box-shadow:0 18px 34px -30px rgba(0,0,0,.45);
}
.sci-note p{ margin:0; font-size:clamp(13px,.95vw,15px); line-height:1.7; color:#4b554a; }

.sci-table{
  margin:clamp(38px,4vw,62px) auto 0; max-width:1100px;
  background:#fff; border-radius:var(--r-card); overflow:hidden;
  box-shadow:0 30px 60px -46px rgba(28,38,21,.8);
}
.sci-table__head,
.sci-table__row{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; }
.sci-table__head{ background:var(--green); color:#fff; }
.sci-table__head > div{
  padding:clamp(16px,1.7vw,22px) clamp(18px,2vw,28px);
  font-size:clamp(13px,1vw,15px); font-weight:500; line-height:1.4;
}
.sci-table__head > div + div{ border-inline-start:1px solid rgba(255,255,255,.16); }
.sci-table__row{ border-top:1px solid rgba(28,38,21,.1); transition:background var(--fast); }
.sci-table__row > div{ padding:clamp(20px,2vw,28px); }
.sci-table__row > div + div{ border-inline-start:1px solid rgba(28,38,21,.09); }
.sci-table__row:hover{ background:#fbfdfa; }

.sci-cell__label{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(19px,1.4vw,24px); line-height:1.2; color:var(--ink);
}
.sci-cell__mini{
  display:none; margin-bottom:10px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.sci-cell h4{
  margin:0 0 10px; font-family:var(--font-body);
  font-size:clamp(15px,1.05vw,17px); font-weight:600; line-height:1.4;
  display:flex; gap:10px; align-items:center; color:var(--ink);
}
.sci-cell h4 i{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:12px; line-height:1;
}
.sci-cell--good h4 i{ background:var(--mint); color:#2c7a51; }
.sci-cell--bad h4 i{ background:#f7e3de; color:#a8462f; }
.sci-cell--neutral h4 i{ background:#ecefea; color:#6b7280; }
.sci-cell p{ margin:0; font-size:clamp(14px,1vw,16px); line-height:1.7; color:var(--muted); }

.sci-vs__foot{ margin:clamp(24px,3vw,42px) auto 0; max-width:1100px; }
.sci-vs__foot p{ margin:0 0 10px; font-size:clamp(12px,.9vw,14px); line-height:1.7; color:var(--muted); }


/* ============================================================
   Promo popup
   ============================================================ */

.pop{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:var(--gutter);
  visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.pop[aria-hidden="false"]{ visibility:visible; opacity:1; }
body.pop-open{ overflow:hidden; }

.pop__veil{ position:absolute; inset:0; background:rgba(16,19,10,.62); backdrop-filter:blur(3px); }

.pop__box{
  position:relative; z-index:1;
  width:min(880px, 100%); max-height:calc(100dvh - (var(--gutter) * 2));
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  background:#fff; border-radius:var(--r-card); overflow:hidden auto;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
  transform:translateY(22px) scale(.97);
  transition:transform .5s var(--ease);
}
.pop[aria-hidden="false"] .pop__box{ transform:none; }

.pop__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(255,255,255,.86);
  transition:background var(--fast), transform var(--fast);
}
.pop__x svg{ width:20px; height:20px; }
.pop__x:hover{ background:#fff; transform:rotate(90deg); }

.pop__media{ background:var(--mint); }
.pop__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.pop__body{ padding:clamp(26px,3.4vw,46px); }

.pop__eyebrow{
  margin:0 0 12px; font-size:clamp(13px,1vw,16px); color:#5c8172;
}
.pop__title{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,3vw,46px); line-height:1.02; color:var(--ink);
}
.pop__title em{ display:block; font-style:italic; font-weight:400; color:var(--green); }
.pop__text{
  margin:16px 0 0; font-size:clamp(14px,1vw,16px); line-height:1.65; color:var(--muted);
}

.pop__row{ display:grid; gap:10px; margin-top:clamp(20px,2.2vw,28px); }
.pop__row input{
  width:100%; font:inherit; font-size:clamp(15px,1.05vw,17px);
  padding:15px 20px; border-radius:var(--r-pill);
  border:1.5px solid rgba(28,38,21,.2); background:#fff; color:var(--body);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.pop__row input:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(33,64,49,.12);
}
.pop__submit{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:var(--r-pill);
  background:var(--green); color:#fff;
  font-family:var(--font-body); font-size:clamp(14px,1.05vw,16px); font-weight:500;
  transition:background var(--fast), color var(--fast), transform var(--fast);
}
.pop__submit:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); }
.pop__submit--link{ margin-top:16px; width:100%; }

.pop__fine{ margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--muted); }
.pop__decline{
  margin-top:16px; font-size:13px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
  transition:color var(--fast);
}
.pop__decline:hover{ color:var(--ink); }

.pop__error{
  margin:16px 0 0; padding:12px 16px; border-radius:12px;
  background:#fdecec; color:#8a1f1f; font-size:13px; line-height:1.6;
}

.pop__done{ margin-top:clamp(20px,2.2vw,28px); }
.pop__done-text{ margin:0 0 14px; font-size:clamp(14px,1vw,16px); color:var(--muted); }
.pop__code{
  width:100%; padding:16px 20px; border-radius:var(--r-soft);
  background:var(--mint); border:1.5px dashed var(--green);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:background var(--fast), transform var(--fast);
}
.pop__code span{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,2vw,30px); letter-spacing:.06em; color:var(--green);
}
.pop__code small{ font-size:12px; color:#4c5a4c; }
.pop__code:hover{ background:#c2ddc9; transform:translateY(-2px); }
.pop__code.is-copied small{ color:var(--green); font-weight:600; }
.pop__code.is-copied small::after{ content:" \2713"; }

/* ---- responsive ---- */
@media (max-width: 768px){
  .pop__box{ grid-template-columns:1fr; width:min(460px, 100%); }
  .pop__media{ aspect-ratio:16/9; }
}
@media (max-width: 525px){
  .pop{ padding:14px; }
  .pop__body{ padding:24px 20px 26px; }
  .pop__media{ aspect-ratio:16/10; }
  .pop__x{ width:36px; height:36px; top:10px; right:10px; }
}
@media (max-width: 430px){
  .pop__title{ font-size:28px; }
  .pop__media{ display:none; }
}
@media (max-width: 360px){
  .pop__body{ padding:20px 16px 22px; }
  .pop__title{ font-size:25px; }
}
 ---- logo lockup ---- */
.loc__logo{ margin-bottom:18px; }
.loc__logo--ruled{
  padding-bottom:18px; border-bottom:1px solid rgba(28,38,21,.12);
}
.loc__logo--top{ margin-bottom:clamp(20px,2.2vw,30px); }
.loc--green .loc__logo--ruled{ border-bottom-color:rgba(255,255,255,.2); }

.loc__logo-link{
  display:inline-flex; align-items:center; justify-content:flex-start;
  transition:transform var(--fast), opacity var(--fast), box-shadow var(--fast);
}
.loc__logo img{
  display:block; width:auto; max-width:min(var(--logo-w,180px), 100%);
  height:auto; object-fit:contain;
}

/* a white panel keeps any logo legible on mint or green */
.loc__logo--framed .loc__logo-link{
  background:#fff; border-radius:var(--r-soft);
  padding:clamp(12px,1.3vw,18px) clamp(14px,1.6vw,22px);
  box-shadow:0 14px 28px -22px rgba(28,38,21,.6);
}
a.loc__logo-link:hover{ transform:translateY(-3px); }
.loc__logo--framed a.loc__logo-link:hover{ box-shadow:0 20px 34px -22px rgba(28,38,21,.75); }
.loc__logo-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:var(--r-soft); }

/* match a mismatched source file to the section */
.loc__logo--dark img{ filter:brightness(0); }
.loc__logo--white img{ filter:brightness(0) invert(1); }
.loc__logo--white.loc__logo--framed img{ filter:none; }

@media (max-width: 525px){
  .loc__logo img{ max-width:min(var(--logo-w,180px), 62vw); }
  .loc__logo--framed .loc__logo-link{ padding:11px 13px; }
}


/* ---- responsive ---- */
@media (max-width: 1440px){
  .sci-table, .sci-vs__foot{ max-width:100%; }
}
@media (max-width: 1280px){
  .sci-ing__main{ flex:2 1 420px; }
}
@media (max-width: 1024px){
  .sci-intro__title{ max-width:20ch; }
  .sci-table__head, .sci-table__row{ grid-template-columns:.9fr 1.25fr 1.25fr; }
}
@media (max-width: 840px){
  .sci-video{ max-width:250px; }
  .sci-dose{ font-size:clamp(40px,7vw,56px); }
}
@media (max-width: 768px){
  .sci-table__head{ display:none; }
  .sci-table__row{ grid-template-columns:1fr; }
  .sci-table__row > div + div{ border-inline-start:0; border-top:1px solid rgba(28,38,21,.09); }
  .sci-table__row > div:first-child{ background:var(--mint); }
  .sci-cell__mini{ display:block; }
  .sci-ing__aside{ max-width:none; }
  .sci-ing__row{ gap:26px; }
}
@media (max-width: 525px){
  .sci-video{ max-width:none; aspect-ratio:4/5; }
  .sci-note{ padding:18px 20px; }
  .sci-quote{ padding-left:18px; }
  .sci-pillar{ padding:22px; }
  .sci-refs{ padding:20px; }
}
@media (max-width: 430px){
  .sci-dose{ font-size:40px; }
  .sci-intro{ padding-block:112px 48px; }
}
@media (max-width: 375px){
  .sci-table__row > div{ padding:18px; }
}
@media (max-width: 360px){
  .sci-intro{ padding-block:104px 44px; }
  .sci-pillar{ padding:18px; }
}


/* ============================================================
   10% Pledge page
   ============================================================ */

.plg-eyebrow{
  margin:0 0 18px;
  font-family:var(--font-body); font-size:clamp(14px,1.05vw,18px);
  font-weight:400; line-height:1.4; color:var(--gold);
}
.plg-eyebrow--center{ text-align:center; }
.plg-eyebrow--ink{ color:#5c8172; }

/* ---- hero ---- */
.plg-hero{
  background:var(--green); color:#fff;
  padding-block:clamp(126px,12vw,205px) clamp(58px,6.4vw,110px);
}
.plg-stat{
  margin:0; font-family:var(--font-display); font-weight:700; line-height:.8;
  font-size:clamp(96px,13vw,230px); color:#fff; letter-spacing:-.02em;
}
.plg-stat sup{
  font-size:.34em; vertical-align:super; line-height:1; margin-left:.04em; font-weight:400;
}
.plg-tagline{
  margin:clamp(18px,2vw,28px) 0 0;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.6vw,46px); line-height:1.2; color:var(--gold);
}
.plg-hero__body{
  margin-top:clamp(24px,2.6vw,36px); max-width:60ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:rgba(255,255,255,.85);
}
.plg-hero__body p{ margin:0 0 16px; }
.plg-hero__body p:last-child{ margin-bottom:0; }
.plg-hero__body strong{ color:#fff; font-weight:600; }

/* ---- card strip (also used for the numbered steps) ---- */
.plg-strip{ padding-block:clamp(52px,5.6vw,100px); }
.plg-strip--green{ background:var(--green); color:#fff; }
.plg-strip--light{ background:#f5f7f3; }
.plg-strip--white{ background:#fff; }

.plg-strip__head{ text-align:center; max-width:700px; margin:0 auto clamp(34px,3.6vw,56px); }
.plg-strip--green .plg-strip__head h2{ color:#fff; }
.plg-strip__head h2 em{ display:block; font-style:italic; font-weight:400; }
.plg-strip--green .plg-strip__head h2 em{ color:var(--gold); }
.plg-strip--light .plg-strip__head h2 em,
.plg-strip--white .plg-strip__head h2 em{ color:#5c8172; }

.plg-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:clamp(16px,2vw,28px);
}
.plg-card{
  border-radius:var(--r-card); padding:clamp(24px,2.4vw,34px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plg-strip--green .plg-card{ background:var(--mint); color:var(--ink); }
.plg-strip--light .plg-card,
.plg-strip--white .plg-card{ background:var(--mint); color:var(--ink); }
.plg-card:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -32px rgba(0,0,0,.65); }

.plg-card__num{
  display:block; margin-bottom:10px;
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(38px,3.6vw,60px); color:var(--green); opacity:.32;
}
.plg-card h3{
  margin:0 0 12px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,1.7vw,28px); line-height:1.2; color:var(--green);
}
.plg-card p{ margin:0; font-size:clamp(14px,1vw,16px); line-height:1.65; color:#3f4a39; }

/* ---- text + stat cards ---- */
.plg-split{ padding-block:clamp(58px,6.2vw,118px); }
.plg-split__grid{
  display:grid; align-items:start; gap:clamp(30px,4vw,74px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.plg-split__grid h2 em{ display:block; font-style:italic; font-weight:400; color:#5c8172; }
.plg-split__body{
  margin-top:clamp(20px,2.2vw,28px);
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--body);
}
.plg-split__body p{ margin:0 0 18px; }
.plg-split__body p:last-child{ margin-bottom:0; }

.plg-quote{
  position:relative; margin:clamp(24px,2.6vw,36px) 0 0;
  background:var(--mint); border-radius:var(--r-soft);
  border-left:3px solid var(--gold);
  padding:clamp(22px,2.2vw,30px) clamp(22px,2.4vw,32px);
}
.plg-quote__body p{
  margin:0; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(17px,1.5vw,24px); line-height:1.4; color:var(--ink);
}
.plg-quote cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:clamp(13px,.95vw,15px); font-weight:500; color:var(--green);
}

.plg-stats{ display:grid; gap:clamp(14px,1.6vw,22px); }
.plg-statcard{
  background:var(--mint); border-radius:var(--r-soft);
  padding:clamp(22px,2.2vw,32px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plg-statcard:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -34px rgba(0,0,0,.6); }
.plg-statcard__num{
  margin:0; font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(38px,3.4vw,58px); color:var(--green);
}
.plg-statcard h3{
  margin:10px 0 10px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(18px,1.4vw,24px); line-height:1.2; color:var(--ink);
}
.plg-statcard__text{ margin:0; font-size:clamp(14px,1vw,16px); line-height:1.65; color:#3f4a39; }

/* ---- closing CTA ---- */
.plg-cta{ padding-block:clamp(58px,6.2vw,110px); }
.plg-cta--light{ background:#f5f7f3; }
.plg-cta--white{ background:#fff; }
.plg-cta--mint{ background:var(--mint); }
.plg-cta--green{ background:var(--green); }
.plg-cta__inner{ text-align:center; max-width:760px; margin-inline:auto; }
.plg-cta--green .plg-cta__inner h2{ color:#fff; }
.plg-cta__inner h2 em{ display:block; font-style:italic; font-weight:400; color:#5c8172; }
.plg-cta--green .plg-cta__inner h2 em{ color:var(--gold); }
.plg-cta__text{
  margin:20px auto 0; max-width:54ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--muted);
}
.plg-cta--green .plg-cta__text{ color:rgba(255,255,255,.82); }
.plg-cta__actions{
  margin-top:clamp(26px,3vw,40px);
  display:flex; flex-wrap:wrap; gap:16px 26px; justify-content:center; align-items:center;
}
.plg-cta__link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:clamp(14px,1.05vw,17px); font-weight:500; color:var(--green);
  padding-bottom:3px; position:relative;
}
.plg-cta--green .plg-cta__link{ color:#fff; }
.plg-cta__link span{ transition:transform .4s var(--ease); }
.plg-cta__link:hover span{ transform:translateX(5px); }
.plg-cta__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.plg-cta__link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- gold bar ---- */
.plg-bar{ background:var(--gold); color:var(--ink); padding-block:clamp(22px,2.4vw,34px); }
.plg-bar__inner{
  display:flex; flex-wrap:wrap; gap:18px 30px;
  align-items:center; justify-content:space-between;
}
.plg-bar__text{
  margin:0; max-width:60ch;
  font-size:clamp(14px,1.05vw,17px); line-height:1.5; font-weight:500;
}
.plg-bar__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border:1.5px solid var(--ink); border-radius:var(--r-pill);
  font-size:clamp(13px,1vw,15px); font-weight:500; white-space:nowrap;
  transition:background var(--fast), color var(--fast), transform var(--fast);
}
.plg-bar__btn span{ transition:transform .4s var(--ease); }
.plg-bar__btn:hover{ background:var(--ink); color:var(--gold); transform:translateY(-2px); }
.plg-bar__btn:hover span{ transform:translateX(4px); }

/* ---- responsive ---- */
@media (max-width: 1280px){
  .plg-stat{ font-size:clamp(90px,13vw,190px); }
}
@media (max-width: 1024px){
  .plg-split__grid{ gap:40px; }
}
@media (max-width: 840px){
  .plg-cards{ gap:16px; }
  .plg-card{ padding:24px; }
}
@media (max-width: 768px){
  .plg-hero__body{ max-width:none; }
  .plg-bar__inner{ justify-content:flex-start; }
}
@media (max-width: 525px){
  .plg-stat{ font-size:96px; }
  .plg-tagline{ font-size:22px; }
  .plg-quote{ padding:20px; }
  .plg-statcard{ padding:20px; }
  .plg-card{ padding:20px; }
  .plg-cta__actions .btn{ width:100%; }
  .plg-cta__actions{ flex-direction:column; gap:16px; }
  .plg-bar__btn{ width:100%; justify-content:center; }
}
@media (max-width: 430px){
  .plg-hero{ padding-block:112px 48px; }
  .plg-stat{ font-size:84px; }
}
@media (max-width: 375px){
  .plg-stat{ font-size:76px; }
  .plg-card__num{ font-size:36px; }
}
@media (max-width: 360px){
  .plg-hero{ padding-block:104px 44px; }
  .plg-stat{ font-size:70px; }
}


/* ============================================================
   Contact page
   ============================================================ */

.cf{
  background:var(--green); color:#fff;
  padding-block:clamp(126px,12vw,200px) clamp(60px,6.4vw,120px);
}
.cf__grid{
  display:grid; align-items:start; gap:clamp(36px,5vw,96px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.cf__eyebrow{
  margin:0 0 18px;
  font-family:var(--font-body); font-size:clamp(14px,1.05vw,18px);
  font-weight:400; line-height:1.4; color:var(--gold);
}
.cf__title{ color:#fff; max-width:14ch; }
.cf__title em{ display:block; font-style:italic; font-weight:400; color:#a8c3b2; }
.cf__lede{
  margin:clamp(20px,2.2vw,28px) 0 0; max-width:46ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:rgba(255,255,255,.82);
}

.cf__info{ margin-top:clamp(30px,3.4vw,50px); display:grid; gap:12px; }
.cf__card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-soft);
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px);
  transition:background var(--fast), border-color var(--fast), transform var(--fast);
}
.cf__card:hover{ background:rgba(255,255,255,.09); border-color:rgba(213,177,123,.6); transform:translateX(4px); }
.cf__card-label{
  margin:0 0 8px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.cf__card-value{
  display:inline-block; margin:0;
  font-size:clamp(15px,1.05vw,17px); line-height:1.5; color:#fff;
}
a.cf__card-value{ position:relative; padding-bottom:2px; }
a.cf__card-value::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
a.cf__card-value:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- form ---- */
.cf__formwrap{ width:100%; }
.cf__row{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.cf__field{ margin-bottom:clamp(16px,1.8vw,24px); }
.cf__field label{
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.cf__field input,
.cf__field textarea,
.cf__select select{
  width:100%; font:inherit; color:#fff;
  font-size:clamp(15px,1.05vw,17px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  padding:15px 18px;
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.cf__field textarea{ min-height:150px; resize:vertical; display:block; }
.cf__field input::placeholder,
.cf__field textarea::placeholder{ color:rgba(255,255,255,.45); }
.cf__field input:focus,
.cf__field textarea:focus,
.cf__select select:focus{
  outline:none; border-color:var(--gold);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(213,177,123,.22);
}

.cf__select{ position:relative; }
.cf__select select{ appearance:none; padding-right:52px; cursor:pointer; }
.cf__select select option{ color:#111; background:#fff; }
.cf__select svg{
  position:absolute; right:18px; top:50%; translate:0 -50%;
  width:20px; height:20px; color:rgba(255,255,255,.7); pointer-events:none;
}

.cf__submit{
  width:100%; margin-top:8px;
  padding:17px 28px; border-radius:var(--r-pill);
  background:var(--gold); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(14px,1.05vw,16px);
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background var(--fast), color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.cf__submit:hover{
  background:#fff; color:var(--green);
  transform:translateY(-2px); box-shadow:0 18px 34px -24px rgba(0,0,0,.8);
}
.cf__submit:active{ transform:translateY(0); }

.cf__alert{
  margin:0 0 22px; padding:15px 20px; border-radius:14px;
  font-size:clamp(14px,1vw,16px); line-height:1.6;
}
.cf__alert--ok{ background:var(--mint); color:var(--ink); }
.cf__alert--bad{ background:rgba(228,49,49,.16); border:1px solid rgba(228,49,49,.45); color:#ffd9d9; }

/* ---- responsive ---- */
@media (max-width: 1024px){
  .cf__title{ max-width:18ch; }
  .cf__lede{ max-width:none; }
}
@media (max-width: 768px){
  .cf__grid{ gap:40px; }
}
@media (max-width: 525px){
  .cf__row{ grid-template-columns:1fr; }
  .cf__field input,
  .cf__field textarea,
  .cf__select select{ padding:13px 16px; }
  .cf__card{ padding:15px 16px; }
}
@media (max-width: 430px){
  .cf{ padding-block:112px 52px; }
  .cf__field label{ font-size:11px; }
}
@media (max-width: 360px){
  .cf{ padding-block:104px 44px; }
  .cf__submit{ padding:15px 20px; letter-spacing:.06em; }
}


/* ============================================================
   Image cards — reusable grid
   ============================================================ */

.imgc{ padding-block:clamp(52px,5.8vw,110px); }
.imgc--white{ background:#fff; }
.imgc--light{ background:#f5f7f3; }
.imgc--mint{ background:var(--mint); }
.imgc--green{ background:var(--green); color:#fff; }

.imgc__head{ max-width:720px; margin-bottom:clamp(32px,3.6vw,54px); }
.imgc__head--center{ text-align:center; margin-inline:auto; }
.imgc__head--left{ text-align:left; }
.imgc--green .imgc__head h2{ color:#fff; }
.imgc__head h2 em{ display:block; font-style:italic; font-weight:400; color:#5c8172; }
.imgc--green .imgc__head h2 em{ color:var(--gold); }
.imgc__eyebrow{
  margin:0 0 16px; font-family:var(--font-body);
  font-size:clamp(14px,1.05vw,18px); font-weight:400; line-height:1.4; color:var(--gold);
}
.imgc--white .imgc__eyebrow,
.imgc--light .imgc__eyebrow,
.imgc--mint .imgc__eyebrow{ color:#5c8172; }
.imgc__lede{
  margin:18px 0 0; max-width:56ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--muted);
}
.imgc__head--center .imgc__lede{ margin-inline:auto; }
.imgc--green .imgc__lede{ color:rgba(255,255,255,.82); }

/* the grid — column counts come straight from the schema */
.imgc__grid{
  display:grid;
  gap:var(--gap,24px);
  grid-template-columns:repeat(var(--cols,3), minmax(0, 1fr));
}
.imgc__grid--center{ text-align:center; }
.imgc__grid--left{ text-align:left; }

.imgc__card{
  display:flex; flex-direction:column;
  border-radius:var(--r-card); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.imgc__card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -36px rgba(28,38,21,.75); }

.imgc__media{
  position:relative; overflow:hidden;
  aspect-ratio:var(--ratio, 3 / 4);
  background:var(--mint);
  border-radius:var(--r-card);
}
.imgc--panel .imgc__media{ border-radius:var(--r-card) var(--r-card) 0 0; }
.imgc__media img,
.imgc__media svg{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--ease);
}
.imgc__card:hover .imgc__media img{ transform:scale(1.06); }

.imgc__badge{
  position:absolute; top:14px; left:14px;
  padding:6px 14px; border-radius:999px;
  background:var(--gold); color:var(--ink);
  font-size:12px; font-weight:600; letter-spacing:.04em;
}
.imgc__grid--center .imgc__badge{ left:50%; translate:-50% 0; }

.imgc__body{ padding-top:18px; }
.imgc--panel .imgc__body{
  background:var(--mint); color:var(--ink);
  padding:clamp(20px,2vw,28px) clamp(18px,2vw,26px) clamp(24px,2.2vw,32px);
  border-radius:0 0 var(--r-card) var(--r-card);
  flex:1;
}
.imgc__body h3{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,1.6vw,28px); line-height:1.2; color:var(--ink);
}
.imgc--green.imgc--clean .imgc__body h3{ color:#fff; }
.imgc__body p{
  margin:12px 0 0; font-size:clamp(14px,1vw,16px); line-height:1.65; color:var(--muted);
}
.imgc--panel .imgc__body p{ color:#3f4a39; }
.imgc--green.imgc--clean .imgc__body p{ color:rgba(255,255,255,.78); }

.imgc__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:clamp(13px,1vw,15px); font-weight:500; color:var(--green);
}
.imgc--green.imgc--clean .imgc__link{ color:var(--gold); }
.imgc__link i{ font-style:normal; transition:transform .4s var(--ease); }
.imgc__card:hover .imgc__link i{ transform:translateX(5px); }

.imgc__foot{ margin-top:clamp(30px,3.4vw,50px); text-align:center; }

/* ---- responsive: tablet and mobile counts also come from the schema ---- */
@media (max-width: 1024px){
  .imgc__grid{ grid-template-columns:repeat(var(--cols-tab,2), minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .imgc__grid{ grid-template-columns:repeat(var(--cols-mob,1), minmax(0, 1fr)); }
  .imgc__head{ margin-bottom:28px; }
}
@media (max-width: 430px){
  .imgc__badge{ font-size:11px; padding:5px 11px; }
  .imgc--panel .imgc__body{ padding:18px 16px 22px; }
}

/* ---------- reveal motion ---------- */
.benefit.is-in:hover {
    transform: scale(1.1) !important;
    transition: 0.5s !important;
}
/* Elements only start hidden when JS is confirmed alive (html.js).
   Without this guard a single script failure would blank the whole page. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

.media-zoom{ overflow:hidden; }
.media-zoom img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.media-zoom:hover img{ transform:scale(1.06); }

/* ============================================================
   Header
   ============================================================ */

.header{
  position:absolute; inset:0 0 auto; z-index:60;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.header--stuck{
  position:fixed;
  background:rgba(33,64,49,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.8);
}
.header--hidden{ transform:translateY(-100%); }
.header--solid {
    background: var(--green);
    position: relative;
}

.header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:100px;
}
.header--stuck .header__bar{ min-height:78px; }

.header__logo{ display:block; flex:0 0 auto; }
.header__logo img{ width:auto; height:clamp(48px,6.4vw,90px); object-fit:contain; }
.header__logo-text{
  font-family:var(--font-display); font-weight:700; font-size:30px; color:#fff; letter-spacing:.02em;
}

.nav{ display:flex; align-items:center; gap:clamp(18px,2vw,32px); }
.nav__link{
  position:relative; font-size:clamp(14px,1.05vw,18px); font-weight:500; white-space:nowrap;
  padding:6px 0; color:#fff;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.header__tools{ display:flex; align-items:center; gap:20px; }
.tool{ position:relative; display:grid; place-items:center; width:24px; height:24px; color:#fff; }
.tool svg{ width:24px; height:24px; transition:transform var(--fast); }
.tool:hover svg{ transform:scale(1.12); }
.tool__count{
  position:absolute; top:-8px; right:-8px;
  min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center;
  border-radius:999px; background:var(--alert); color:#fff;
  font-size:12px; font-weight:700; line-height:1;
}
.tool__count[hidden]{ display:none; }

.burger{ display:none; width:26px; height:18px; position:relative; }
.burger span{
  position:absolute; left:0; height:2px; width:100%; background:#fff; border-radius:2px;
  transition:transform var(--fast), opacity var(--fast);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
body.nav-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* colour modes: dark type over the light hero, white type on dark ground */
.header:not(.header--invert):not(.header--stuck) .nav__link,
.header:not(.header--invert):not(.header--stuck) .tool,
.header:not(.header--invert):not(.header--stuck) .header__logo-text{ color:var(--ink); }
.header:not(.header--invert):not(.header--stuck) .burger span{ background:var(--ink); }

.header--invert .header__logo img[data-invertible],
.header--stuck .header__logo img[data-invertible]{ filter:brightness(0) invert(1); }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:70;
  background:var(--green);
  padding:120px var(--gutter) 40px;
  transform:translateY(-102%);
  transition:transform .55s var(--ease);
  overflow-y:auto;
}
body.nav-open .mobile-nav{ transform:translateY(0); }
.mobile-nav a{
  display:block; color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,8vw,44px); line-height:1.25; padding:10px 0;
  border-bottom:1px solid var(--line);
}
.mobile-nav a:hover{ color:var(--gold); }
body.nav-open{ overflow:hidden; }

/* the panel sits at z-index 70, so lift the header above it while it is open,
   otherwise the burger turns into an X that nobody can reach */
body.nav-open .header{ z-index:78; }

.mobile-nav__close{
  position:absolute; top:24px; right:var(--gutter);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); color:#fff;
  display:grid; place-items:center;
  transition:background var(--fast), transform var(--fast), border-color var(--fast);
}
.mobile-nav__close svg{ width:22px; height:22px; }
.mobile-nav__close:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:rotate(90deg); }
.mobile-nav__close:active{ transform:rotate(90deg) scale(.94); }

/* ============================================================
   Hero
   ============================================================ */

.hero{ background:var(--green); }
.hero__inner{ background:linear-gradient(160deg, var(--mint), #f2f5ef 62%); }
.hero__inner{
  position:relative;
  min-height:clamp(600px, 51.3vw, 985px);
  display:flex; align-items:flex-end;
  border-radius:0 0 50px 50px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.hero__glow{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(58% 62% at 35% 58%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 72%);
}
.hero__content{ padding-block:clamp(118px,9vw,150px) clamp(46px,7vw,140px); }
.hero__title{ max-width:14ch; }
.hero__text{ margin:22px 0 0; max-width:52ch; color:var(--body); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }

.hero__scroll{
  position:absolute; right:0; bottom:34px; display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.hero__scroll i{ display:block; width:44px; height:1px; background:currentColor; transform-origin:left;
  animation:sweep 2.4s var(--ease) infinite; }
@keyframes sweep{ 0%,100%{ transform:scaleX(.3); } 50%{ transform:scaleX(1); } }

/* ============================================================
   Founder story (dark band + collage)
   ============================================================ */

.founder{ background:var(--green); color:#fff; padding-block:clamp(70px,7vw,120px); }
.founder__grid{
  display:grid; gap:clamp(32px,3.6vw,64px); align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.collage{ display:grid; grid-template-columns:1fr 1fr; gap:27px; }
.collage__cell{ border-radius:var(--r-media); overflow:hidden; position:relative; background:var(--green-soft); min-height:90px; }
.collage__cell--tall{ grid-row:span 2; aspect-ratio:338/596; }
.collage__cell--wide{ aspect-ratio:338/376; }
.collage__cell--short{ aspect-ratio:338/194; }
.collage__cell img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.collage__cell:hover img{ transform:scale(1.07); }
.collage__cell video{ width:100%; height:100%; object-fit:cover; display:block; }
.collage__embed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.vplay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(16,19,10,.10); transition:background var(--fast);
}
.vplay:hover{ background:rgba(16,19,10,.22); }
.vplay__icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.85); display:grid; place-items:center;
  transition:transform var(--fast), background var(--fast);
}
.vplay:hover .vplay__icon,
.vplay:focus-visible .vplay__icon{ transform:scale(1.1); background:#fff; }
.vplay svg{ width:20px; height:20px; fill:var(--ink); }
.vplay__play{ display:none; }
.vplay[data-playing="false"] .vplay__play{ display:block; }
.vplay[data-playing="false"] .vplay__pause{ display:none; }
.founder__title{ color:#fff; }
.founder__body{ margin-top:22px; display:grid; gap:22px; max-width:62ch; }
.quote{
  display:flex; margin-top:36px; border-radius:6px; overflow:hidden;
  background:var(--green-soft);
  transition:transform var(--fast), box-shadow var(--fast);
}
.quote:hover{ transform:translateX(4px); box-shadow:-6px 0 0 0 var(--gold); }
.quote__bar{ flex:0 0 3px; background:var(--gold); }
.quote__body{ padding:16px 26px 20px; min-width:0; }
.quote__body p{ margin:0; }
.quote__cite{
  display:block; margin-top:8px; font-family:var(--font-display); font-weight:700;
  color:var(--gold); font-size:clamp(16px,1.05vw,18px);
}
.founder .btn--light{ margin-top:26px; }

/* ============================================================
   Benefits — copy block over a full-bleed background image
   ============================================================ */

.benefits{ position:relative; overflow:hidden; padding-block:var(--block); isolation:isolate; }
.benefits__bg{ position:absolute; inset:0; z-index:-1; }
.benefits__bg img{ width:100%; height:100%; object-fit:cover; }
/* .benefits__bg::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,var(--veil,.86)); } */

.benefits__body{ max-width:640px; }
.benefits__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap:clamp(28px,3.2vw,56px) clamp(24px,2.6vw,44px);
  margin-top:clamp(30px,3.4vw,56px);
}
.benefit{ position:relative; transition:transform var(--fast); }
.benefit h3{
  margin:0; font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(19px,1.5vw,26px); line-height:1.2;
}
.benefit p{ margin:12px 0 0; color:var(--muted); font-size:clamp(14px,1vw,16px); }
.benefit::before{
  content:""; position:absolute; left:0; bottom:-14px; width:0; height:2px; background:var(--gold);
  transition:width .5s var(--ease);
}
.benefit:hover{ transform:translateY(-3px); }
.benefit:hover::before{ width:48px; }

/* ============================================================
   Story banner (bg image + translucent card)
   ============================================================ */

.storyband{ position:relative; padding-block:clamp(60px,6vw,80px); isolation:isolate; }
.storyband__bg{ position:absolute; inset:0; z-index:-2; }
.storyband__bg img{ width:100%; height:100%; object-fit:cover; }
.storyband__bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.08); }
.storyband__card{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
  border-radius:var(--r-card);
  padding:clamp(30px,5.4vw,104px);
  display:grid; align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(30px,4vw,76px);
}
.storyband__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:478/353; }
.storyband__text p{ margin:22px 0 0; max-width:56ch; }
.storyband__text .btn{ margin-top:28px; }

/* ============================================================
   Pre-order + ingredient spotlights (one block, one background)
   ============================================================ */
.header__logo img {
    width: 60%;
}
.footer__logo img {
    width: auto !important;
}
.pos{ position:relative; overflow:hidden; padding-block:var(--block); isolation:isolate; }
.pos__bg{ position:absolute; inset:0; z-index:-1; }
.pos__bg img{ width:100%; height:100%; object-fit:cover; }
/* .pos__bg::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,var(--veil,.88)); } */

.pos__grid{
  display:grid; align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap:clamp(28px,3.4vw,66px);
}
.pos__media{
  border-radius:var(--r-soft); overflow:hidden; aspect-ratio:5/4; background:var(--mint);
  display:grid; place-items:center; padding:clamp(18px,2vw,34px);
}
.pos__media img{ width:100%; height:100%; object-fit:contain; transition:transform 1s var(--ease); }
.pos__media:hover img{ transform:scale(1.04); }
.pos__text p{ margin:20px 0 0; max-width:56ch; }
.pos__text .btn{ margin-top:26px; }
.pos__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; background:var(--mint); color:var(--ink);
  font-size:14px; font-weight:500;
}
.chip svg{ width:16px; height:16px; fill:var(--green); flex:0 0 16px; }

.pos__spotlights{ margin-top:clamp(50px,5.2vw,96px); }

.split-media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/10; background:var(--mint); }
.split-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   Spotlight cards — photo on top, mint panel beneath
   ============================================================ */

.spotlights__head{ text-align:center; max-width:680px; margin-inline:auto; }
.spotlights__head p{ margin:16px auto 0; max-width:56ch; }

.spot-grid{
  margin-top:clamp(36px,3.6vw,54px);
  display:flex; flex-wrap:wrap; gap:clamp(20px,2.2vw,32px); justify-content:center;
}
.spot{
  flex:1 1 360px; max-width:620px;
  display:flex; flex-direction:column;
  border-radius:var(--r-soft); overflow:hidden; background:var(--mint);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.spot:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -34px rgba(28,38,21,.6); }
.spot__img{ aspect-ratio:16/12; overflow:hidden; background:var(--green-soft); }
.spot__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.spot:hover .spot__img img{ transform:scale(1.06); }
.spot__panel{
  background:var(--mint); color:#111; text-align:center;
  padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,34px) clamp(24px,2.4vw,34px);
}
.spot__panel h3{ margin:0; font-size:clamp(20px,1.5vw,26px); }
.spot__panel p{ margin:12px auto 0; max-width:46ch; font-size:clamp(14px,1vw,16px); color:#3f4a39; }

/* ---- spotlight video ---- */
.spot__img{ position:relative; }
.spot__img video{ width:100%; height:100%; object-fit:cover; display:block; }

.spot__embed{ position:absolute; inset:0; overflow:hidden; }
.spot__embed img{ width:100%; height:100%; object-fit:cover; display:block; }
.spot__embed iframe{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  border:0; display:block;
  width:auto; height:auto; min-width:100%; min-height:100%; aspect-ratio:16/9;
}

/* a card holding a video must not zoom on hover, or the frame drifts */
.spot--video:hover .spot__img img,
.spot--video:hover .spot__img video{ transform:none; }

.spot__img .vplay{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:rgba(16,19,10,.20);
  transition:background .35s var(--ease);
}
.spot__img .vplay__icon{
  width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid; place-items:center;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.8);
  transition:transform .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease);
}
.spot__img .vplay svg{ width:22px; height:22px; fill:var(--ink); }

/* playing: step back so the video is visible, but never disappear entirely */
.spot__img .vplay[data-playing="true"]{ background:transparent; }
.spot__img .vplay[data-playing="true"] .vplay__icon{
  background:rgba(255,255,255,.55); opacity:.75; transform:scale(.82);
}
.spot__img .vplay:hover .vplay__icon,
.spot__img .vplay:focus-visible .vplay__icon{
  background:#fff; opacity:1; transform:scale(1.06);
}
.spot__img .vplay:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }

/* only one of the two glyphs is ever shown */
.spot__img .vplay__play{ display:none; }
.spot__img .vplay[data-playing="false"] .vplay__play{ display:block; }
.spot__img .vplay[data-playing="false"] .vplay__pause{ display:none; }

.spot__titlelink{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.spot__titlelink:hover{ color:var(--green); }

@media (max-width: 525px){
  .spot__img .vplay__icon{ width:54px; height:54px; }
  .spot__img .vplay svg{ width:19px; height:19px; }
}

span.vplay__icon svg.vplay__pause {
    display: none;
}
.vplay svg {
    background: transparent !important;
}

/* ============================================================
   Trust bar
   ============================================================ */

.trustbar{ background:var(--mint); overflow:hidden; }
.trustbar__ticker{ --tgap:0px; display:flex; width:max-content; }
.trustbar__group{
  display:flex; flex:0 0 auto;
  animation:ticker var(--tdur,36s) linear infinite;
  will-change:transform;
}
.trustbar:hover .trustbar__group{ animation-play-state:paused; }
.trustbar__item{
  position:relative; white-space:nowrap;
  padding:clamp(14px,1.4vw,22px) clamp(26px,3.4vw,62px);
  font-family:var(--font-display); font-weight:600; line-height:1.2;
  font-size:clamp(15px,1.35vw,26px); color:var(--ink);
  transition:color var(--fast);
}
.trustbar__item::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:1px; height:58%; background:rgba(28,38,21,.22);
}
.trustbar__item:hover{ color:var(--green); }


/* ============================================================
   Testimonials — full-bleed infinite ticker
   ============================================================ */

.testimonials{
  background:var(--green); color:#fff;
  padding-block:clamp(52px,5.4vw,92px);
  overflow:hidden; position:relative;
}
.testimonials__head{ text-align:center; }
.testimonials__head h2{ color:#fff; }

.ticker{
  --tgap:24px;
  margin-top:clamp(28px,3.2vw,48px);
  width:100%;
  display:flex; gap:var(--tgap);
  overflow:visible;
}
.ticker__group{
  display:flex; gap:var(--tgap); flex:0 0 auto;
  animation:ticker var(--tdur,44s) linear infinite;
  will-change:transform;
}
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - var(--tgap))); }
}
.testimonials:hover .ticker__group{ animation-play-state:paused; }

.tcard{
  flex:0 0 clamp(268px,26vw,400px);
  background:#fff; color:var(--body); border-radius:16px;
  padding:22px 24px 26px; position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote {
    margin-left: 0px !important;
}
.tcard:hover{ transform:translateY(-6px); box-shadow:0 28px 44px -32px rgba(0,0,0,.75); }
.tcard__top{ display:flex; align-items:center; gap:14px; }
.tcard__avatar{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:var(--mint); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--green);
}
.tcard__avatar img{ width:100%; height:100%; object-fit:cover; }
.tcard__name{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
.stars{ display:flex; gap:3px; margin-top:4px; }
.stars svg{ width:13px; height:13px; fill:#e8b84b; }
.tcard__mark{
  position:absolute; top:18px; right:22px;
  font-family:var(--font-display); font-weight:700; font-size:52px; line-height:1; color:var(--mint);
  pointer-events:none; user-select:none;
}
.tcard p{ margin:16px 0 0; color:var(--muted); font-size:14px; line-height:1.62; }

/* ============================================================
   Full-width image banner
   ============================================================ */

.banner{ position:relative; display:block; }
.banner img{ width:100%; height:auto; object-fit:cover; }
.banner--fixed-height img{ height:clamp(320px,38vw,720px); }
.banner__caption{
  position:absolute; inset:auto 0 clamp(24px,3vw,54px); text-align:center; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,44px);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* ============================================================
   Footer
   ============================================================ */

.footer{ background:var(--green); color:#fff; padding-block:clamp(56px,5.2vw,100px) 34px; }
.footer__grid{
  display:grid; gap:clamp(30px,3vw,50px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.footer__logo img{ height:auto; width:clamp(170px,15vw,248px); }
.footer__logo-text{ font-family:var(--font-display); font-weight:700; font-size:40px; }
.footer h2{
  font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.25; margin:0 0 20px;
}
.footer__links li + li{ margin-top:16px; }
.footer__links a{ font-size:16px; opacity:.92; transition:opacity var(--fast), transform var(--fast); display:inline-block; }
.footer__links a:hover{ opacity:1; transform:translateX(5px); color:var(--gold); }

.subscribe{ display:flex; flex-wrap:wrap; gap:10px; }
.subscribe input{
  flex:1 1 240px; min-width:0; height:55px; padding:0 22px;
  border:0; border-radius:200px; background:#fff; color:#000;
  font-family:var(--font-body); font-size:14px;
}
.subscribe input::placeholder{ color:#8a8a8a; }
.subscribe button{
  height:55px; padding:0 31px; border-radius:130px; background:#fff; color:#000;
  font-weight:500; font-size:16px; transition:background var(--fast), color var(--fast), transform var(--fast);
}
.subscribe button:hover{ background:var(--gold); transform:translateY(-2px); }
.form-note{ margin:12px 0 0; font-size:14px; opacity:.85; }

.socials{ display:flex; gap:12px; margin-top:26px; }
.socials a{
  width:35px; height:35px; border-radius:50%; background:#fff; color:var(--green);
  display:grid; place-items:center;
  transition:background var(--fast), color var(--fast), transform var(--fast);
}
.socials a svg{ width:19px; height:19px; fill:currentColor; }
.socials a:hover{ background:var(--gold); color:#fff; transform:translateY(-3px); }

.footer__base{
  margin-top:clamp(40px,4vw,64px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  font-size:15px; opacity:.9;
}

/* ============================================================
   Page hero (inner pages)
   ============================================================ */

.pagehero{
  background:var(--green); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(120px,11vw,190px) clamp(50px,5vw,80px);
}
.pagehero--media::after{ content:""; position:absolute; inset:0; background:rgba(33,64,49,.72); }
.pagehero__bg{ position:absolute; inset:0; }
.pagehero__bg img{ width:100%; height:100%; object-fit:cover; }
.pagehero__inner{ position:relative; z-index:2; }
.pagehero h1{ color:#fff; max-width:18ch; }
.pagehero p{ margin:18px 0 0; max-width:58ch; opacity:.9; }
.breadcrumb{ display:flex; gap:10px; font-size:14px; opacity:.8; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--gold); }

/* ============================================================
   Product page
   ============================================================ */

.product{ padding-block:clamp(46px,4.6vw,80px); }
.product__grid{ display:grid; align-items:start; gap:clamp(30px,4vw,74px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.gallery{ position:sticky; top:110px; }
.gallery__main{
  border-radius:var(--r-media); overflow:hidden; background:var(--mint); aspect-ratio:1/1;
  position:relative;
}
.gallery__main img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease), transform 1.1s var(--ease); }
.gallery__main:hover img{ transform:scale(1.05); }
.gallery__thumbs{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.gallery__thumb{
  width:88px; height:88px; border-radius:16px; overflow:hidden; background:var(--mint);
  border:2px solid transparent; transition:border-color var(--fast), transform var(--fast);
}
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumb:hover{ transform:translateY(-3px); }
.gallery__thumb[aria-current="true"]{ border-color:var(--green); }

.product__title{ margin:0; }
.product__price{
  display:flex; align-items:baseline; gap:14px; margin-top:16px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.1vw,38px); color:var(--green);
}
.product__price del{ color:var(--muted); font-size:.6em; font-family:var(--font-body); font-weight:400; }
.badge-sale{
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.06em;
  background:var(--gold); color:var(--ink); padding:5px 12px; border-radius:999px;
}
.product__desc{ margin-top:22px; color:var(--muted); }

.option{ margin-top:26px; }
.option__label{ display:block; font-size:14px; font-weight:600; margin-bottom:10px; color:var(--ink); }
.option__values{ display:flex; flex-wrap:wrap; gap:10px; }
.option__values input{ position:absolute; opacity:0; pointer-events:none; }
.option__values label{
  padding:11px 22px; border-radius:999px; border:1.5px solid rgba(28,38,21,.18);
  font-size:15px; cursor:pointer;
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.option__values label:hover{ transform:translateY(-2px); border-color:var(--green); }
.option__values input:checked + label{ background:var(--green); border-color:var(--green); color:#fff; }

.buybox{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; align-items:stretch; }
.qty{
  display:inline-flex; align-items:center; border:1.5px solid rgba(28,38,21,.18);
  border-radius:var(--r-pill); overflow:hidden; min-height:52px;
}
.qty button{ width:46px; height:100%; font-size:20px; line-height:1; color:var(--ink);
  transition:background var(--fast); }
.qty button:hover{ background:var(--mint); }
.qty input{
  width:44px; border:0; text-align:center; font:inherit; font-weight:600; background:transparent;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.buybox .btn--solid{ flex:1 1 240px; }

.usp{ display:grid; gap:12px; margin-top:28px; }
.usp li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--body); }
.usp svg{ flex:0 0 20px; width:20px; height:20px; margin-top:3px; fill:var(--green); }

.accordion{ margin-top:34px; border-top:1px solid rgba(28,38,21,.12); }
.accordion__item{ border-bottom:1px solid rgba(28,38,21,.12); }
.accordion__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0; text-align:left; font-weight:500; font-size:clamp(15px,1.1vw,18px); color:var(--ink);
  transition:color var(--fast);
}
.accordion__btn:hover{ color:var(--green); }
.accordion__btn i{
  position:relative; flex:0 0 16px; width:16px; height:16px;
}
.accordion__btn i::before,.accordion__btn i::after{
  content:""; position:absolute; background:currentColor; border-radius:2px;
  left:50%; top:50%; translate:-50% -50%;
}
.accordion__btn i::before{ width:16px; height:1.6px; }
.accordion__btn i::after{ width:1.6px; height:16px; transition:transform .4s var(--ease); }
.accordion__btn[aria-expanded="true"] i::after{ transform:scaleY(0); }
.accordion__panel{ overflow:hidden; height:0; transition:height .45s var(--ease); }
.accordion__panel > div{ padding:0 0 22px; color:var(--muted); }

/* science strip on product page */
.science{ background:var(--mint); border-radius:var(--r-card); padding:clamp(28px,3vw,56px); }
.science__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(24px,2.6vw,44px); margin-top:30px; }
.science__item h3{ font-family:var(--font-display); font-size:clamp(20px,1.5vw,26px); margin:0 0 10px; color:var(--ink); }
.science__item p{ margin:0; color:#3f4a39; font-size:15px; }

/* ============================================================
   Product cards / collection
   ============================================================ */

.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:clamp(20px,2.2vw,34px); }
.pcard{ display:block; }
.pcard__media{
  border-radius:var(--r-media); overflow:hidden; background:var(--mint); aspect-ratio:4/5; position:relative;
}
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), opacity .45s var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.06); }
.pcard__quick{
  position:absolute; left:16px; right:16px; bottom:16px;
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.pcard:hover .pcard__quick,.pcard:focus-within .pcard__quick{ opacity:1; transform:none; }
.pcard__tag{
  position:absolute; top:16px; left:16px; background:var(--gold); color:var(--ink);
  font-size:12px; font-weight:600; letter-spacing:.06em; padding:6px 12px; border-radius:999px;
}
.pcard__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,1.5vw,26px);
  color:var(--ink); margin:18px 0 6px; line-height:1.2; }
.pcard__price{ color:var(--green); font-weight:500; }
.pcard__price del{ color:var(--muted); font-weight:400; margin-left:8px; }

.collection__toolbar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin-bottom:34px;
}
.select-wrap{ position:relative; }
.select-wrap select{
  appearance:none; padding:12px 46px 12px 20px; border-radius:999px;
  border:1.5px solid rgba(28,38,21,.18); background:#fff; font:inherit; font-size:15px; cursor:pointer;
}
.select-wrap::after{
  content:""; position:absolute; right:20px; top:50%; width:8px; height:8px;
  border-right:1.6px solid var(--ink); border-bottom:1.6px solid var(--ink);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

/* ============================================================
   Cart
   ============================================================ */

.cart-line{
  display:grid; grid-template-columns:110px 1fr auto; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid rgba(28,38,21,.12);
}
.cart-line__media{ border-radius:18px; overflow:hidden; background:var(--mint); aspect-ratio:1/1; }
.cart-line__media img{ width:100%; height:100%; object-fit:cover; }
.cart-line h3{ font-family:var(--font-display); font-size:22px; margin:0 0 4px; color:var(--ink); }
.cart-line small{ color:var(--muted); }
.cart-foot{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; margin-top:34px; }
.cart-total{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--ink); }

.empty{ text-align:center; padding-block:clamp(50px,6vw,100px); }
.empty p{ margin:14px auto 28px; max-width:44ch; color:var(--muted); }

/* cart drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; z-index:80; width:min(440px,100%);
  background:#fff; transform:translateX(101%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
  box-shadow:-30px 0 60px -40px rgba(0,0,0,.5);
}
.drawer[aria-hidden="false"]{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:24px var(--gutter-in,26px); border-bottom:1px solid rgba(28,38,21,.12); }
.drawer__head h2{ font-family:var(--font-display); font-size:26px; margin:0; color:var(--ink); }
.drawer__body{ flex:1; overflow-y:auto; padding:6px 26px 20px; }
.drawer__foot{ padding:20px 26px 26px; border-top:1px solid rgba(28,38,21,.12); }
.drawer__close{ font-size:26px; line-height:1; transition:transform var(--fast); }
.drawer__close:hover{ transform:rotate(90deg); }
.overlay{
  position:fixed; inset:0; z-index:75; background:rgba(16,19,10,.45);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.overlay.is-on{ opacity:1; visibility:visible; }

/* ============================================================
   Forms / contact / blog / misc
   ============================================================ */

.field{ display:grid; gap:8px; margin-bottom:18px; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); }
.field input,.field textarea,.field select{
  width:100%; padding:14px 18px; border-radius:16px;
  border:1.5px solid rgba(28,38,21,.18); background:#fff; font:inherit; font-size:15px;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(33,64,49,.1); outline:none; }
.form-success{ background:var(--mint); border-radius:16px; padding:16px 20px; margin-bottom:20px; }
.form-error{ background:#fdecec; color:#8a1f1f; border-radius:16px; padding:16px 20px; margin-bottom:20px; }

.split-2{ display:grid; gap:clamp(24px,3vw,56px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.article-card{ display:block; }
.article-card__media{ border-radius:var(--r-media); overflow:hidden; aspect-ratio:16/11; background:var(--mint); }
.article-card h3{ font-family:var(--font-display); font-size:clamp(21px,1.6vw,28px); color:var(--ink); margin:16px 0 8px; line-height:1.2; }
.article-card time{ font-size:14px; color:var(--muted); }

.pagination{ display:flex; gap:10px; justify-content:center; margin-top:50px; }
.pagination a,.pagination span{
  min-width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  border:1.5px solid rgba(28,38,21,.16); font-size:15px;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.pagination a:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.pagination [aria-current]{ background:var(--green); border-color:var(--green); color:#fff; }

/* marquee trust bar */
.marquee{ background:var(--mint); padding:16px 0; overflow:hidden; }
.marquee__track{ display:flex; gap:60px; width:max-content; animation:slide 34s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:700; font-size:clamp(18px,1.5vw,26px); color:var(--green); white-space:nowrap; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }


/* ============================================================
   Local stockist
   ============================================================ */

.loc{ padding-block:clamp(52px,5.8vw,110px); }
.loc--white{ background:#fff; }
.loc--light{ background:#f5f7f3; }
.loc--mint{ background:var(--mint); }
.loc--green{ background:var(--green); color:#fff; }

.loc__grid{
  display:grid; align-items:center; gap:clamp(28px,3.6vw,64px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.loc--map-left .loc__map{ order:-1; }

.loc__eyebrow{
  margin:0 0 16px; font-family:var(--font-body);
  font-size:clamp(14px,1.05vw,18px); font-weight:400; line-height:1.4; color:#5c8172;
}
.loc--green .loc__eyebrow{ color:var(--gold); }
.loc__title{ max-width:18ch; }
.loc--green .loc__title{ color:#fff; }
.loc__title em{ display:block; font-style:italic; font-weight:400; color:var(--green); }
.loc--green .loc__title em{ color:var(--gold); }
.loc--mint .loc__title em{ color:var(--green); }
.loc__lede{
  margin:18px 0 0; max-width:48ch;
  font-size:clamp(15px,1.05vw,18px); line-height:1.67; color:var(--muted);
}
.loc--green .loc__lede{ color:rgba(255,255,255,.82); }

.loc__card{
  margin-top:clamp(24px,2.6vw,36px);
  background:#fff; border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,34px);
  box-shadow:0 26px 50px -42px rgba(28,38,21,.85);
}
.loc--white .loc__card{ background:#f5f7f3; box-shadow:none; }

.loc__logo{ margin-bottom:18px; }
.loc__logo img{
  width:100%; max-width:var(--logo-w,180px); height:auto; object-fit:contain;
  transition:opacity var(--fast);
}
.loc__logo a:hover img{ opacity:.75; }

.loc__name{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(21px,1.7vw,28px); line-height:1.2; color:var(--ink);
}
.loc__address{
  margin:10px 0 0; font-style:normal;
  font-size:clamp(14px,1vw,16px); line-height:1.7; color:var(--muted);
}

.loc__details{ margin:18px 0 0; display:grid; gap:10px; }
.loc__detail{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding-top:10px; border-top:1px solid rgba(28,38,21,.1);
}
.loc__detail dt{
  flex:0 0 auto; min-width:92px;
  font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#5c8172; padding-top:2px;
}
.loc__detail dd{
  margin:0; flex:1 1 160px;
  font-size:clamp(14px,1vw,16px); line-height:1.6; color:var(--ink);
}
.loc__detail dd a{ text-decoration:underline; text-underline-offset:3px; }
.loc__detail dd a:hover{ color:var(--green); }

.loc__actions{
  margin-top:clamp(20px,2.2vw,28px);
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center;
}
.loc__dir{
  display:inline-flex; align-items:center; gap:9px; position:relative; padding-bottom:3px;
  font-size:clamp(14px,1.05vw,16px); font-weight:500; color:var(--green);
}
.loc__dir span{ transition:transform .4s var(--ease); }
.loc__dir:hover span{ transform:translateX(5px); }
.loc__dir::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.loc__dir:hover::after{ transform:scaleX(1); transform-origin:left; }

.loc__map{
  border-radius:var(--r-card); overflow:hidden;
  background:var(--green-soft);
  box-shadow:0 30px 56px -44px rgba(28,38,21,.9);
}
.loc__map iframe{
  display:block; width:100%; height:var(--map-h,420px); border:0;
}
.loc__map-empty{
  display:grid; place-items:center; height:var(--map-h,420px);
  padding:24px; text-align:center; color:#fff;
  font-size:14px; line-height:1.6;
}

/* ---- responsive ---- */
@media (max-width: 1024px){
  .loc__title{ max-width:22ch; }
  .loc__lede{ max-width:none; }
}
@media (max-width: 768px){
  .loc--map-left .loc__map{ order:0; }
  .loc__map iframe,
  .loc__map-empty{ height:clamp(280px, 60vw, 380px); }
}
@media (max-width: 525px){
  .loc__card{ padding:20px; }
  .loc__detail{ gap:4px; }
  .loc__detail dt{ min-width:0; flex:1 1 100%; }
  .loc__actions .btn{ width:100%; justify-content:center; }
}
@media (max-width: 360px){
  .loc__card{ padding:17px; }
  .loc__map iframe,
  .loc__map-empty{ height:260px; }
}


/* ============================================================
   As featured in
   ============================================================ */

.feat{ padding-block:clamp(40px,4.4vw,80px); }
.feat--white{ background:#fff; }
.feat--light{ background:#f5f7f3; }
.feat--mint{ background:var(--mint); }
.feat--green{ background:var(--green); color:#fff; }

.feat__head{ margin-bottom:clamp(24px,2.8vw,42px); }
.feat__head--center{ text-align:center; }
.feat__head--left{ text-align:left; }
.feat__eyebrow{
  margin:0 0 12px; font-family:var(--font-body);
  font-size:clamp(13px,1vw,16px); line-height:1.4; color:#5c8172;
}
.feat--green .feat__eyebrow{ color:var(--gold); }
.feat__title{ margin:0; color:var(--ink); }
.feat--green .feat__title{ color:#fff; }
.feat__title em{ display:block; font-style:italic; font-weight:400; color:#5c8172; }
.feat--green .feat__title em{ color:var(--gold); }

.feat__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:var(--feat-gap,48px);
}
.feat__item{ display:flex; }

.feat__logo{
  display:grid; place-items:center;
  transition:opacity var(--fast), transform var(--fast), filter var(--fast);
}
.feat__logo img{
  display:block; 
  width: 200px;
    height: 200px;
  max-width:min(220px, 44vw); object-fit:contain;
}

/* text stand-in until a logo file is uploaded */
.feat__logo--text{
  font-family:var(--font-display); font-weight:700; line-height:1.15;
  font-size:clamp(17px,1.5vw,23px); color:var(--ink); text-align:center;
  max-width:16ch;
}
.feat--green .feat__logo--text{ color:#fff; }

/* one visual set out of mismatched source files */
.feat--logo-dark .feat__logo img{ filter:brightness(0); }
.feat--logo-white .feat__logo img{ filter:brightness(0) invert(1); }


.feat--dim .feat__logo--text{ opacity:.7; }
a.feat__logo:hover,
a.feat__logo:focus-visible{ opacity:1; transform:translateY(-3px); }
a.feat__logo--text:hover{ color:var(--green); }
.feat--green a.feat__logo--text:hover{ color:var(--gold); }
a.feat__logo:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:4px; }

/* ---- responsive ---- */
@media (max-width: 1024px){
  .feat__logo img {
    height: auto;
}
  .feat__list{ gap:clamp(24px, 4vw, 40px); }
}

@media (max-width: 525px){
  .feat__list{ gap:26px 30px; }
  .feat__logo--text{ font-size:16px; }
  /* dimming is a hover affordance, and phones have no hover */
  .feat--dim .feat__logo,
  .feat--dim .feat__logo--text{ opacity:1; }
}
@media (max-width: 360px){
  .feat__list{ gap:22px 24px; }
}



/* ============================================================
   Responsive
   ============================================================ */

   .vplay__icon {
    display: none;
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1920px){
  :root{ --page:1440px; --gutter:80px; --block:120px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1600px){
  :root{ --page:1360px; --gutter:64px; --block:104px; }
  .benefits__body{ max-width:600px; }
  .founder__grid{ gap:44px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1440px){
  :root{ --page:1280px; --gutter:56px; --block:96px; }
  .header__bar{ min-height:88px; }
  .nav{ gap:22px; }
  .gallery{ top:96px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1366px){
  :root{ --page:1200px; --gutter:48px; --block:90px; }
  .benefits__body{ max-width:560px; }
  .storyband__card{ padding:56px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1340px){
  :root{ --page:1180px; }
  .nav{ gap:20px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1320px){
  :root{ --page:1160px; }
  .collage{ gap:22px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1280px){
  :root{ --page:1120px; --gutter:44px; --block:84px; }
  .nav__link{ font-size:16px; }
  .benefits__body{ max-width:530px; }
  .benefits__list{ gap:34px 30px; }
  .pos__grid{ gap:36px; }
  .footer__grid{ gap:34px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1024px){
  .benefits__body {
        max-width: none;
        backdrop-filter: blur(6px);
        padding: 20px 20px;
    }
  .benefits__list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
  :root{ --gutter:36px; --block:72px; }

  .nav,
  .header__tools .tool--search{ display:none; }
  .burger{ display:block; }
  .header__bar{ min-height:78px; }

  .hero__inner{ min-height:600px; }
  .hero__scroll{ display:none; }

  .pos__media{ max-width:520px; margin-inline:auto; width:100%; }
  .benefits__body{ max-width:none; }
  .benefits{ --veil:.9; }
  .pos{ --veil:.92; }

  .gallery{ position:static; }
  .gallery__main{ max-width:620px; margin-inline:auto; }

  .spot{ flex:1 1 320px; }
  .drawer{ width:min(420px,100%); }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 840px){
  .trustbar__item{ font-size:17px; padding:14px clamp(22px,4vw,34px); }
  :root{ --gutter:30px; --block:66px; }

  .display-1{ font-size:52px; }
  .display-2{ font-size:38px; }

  .trustbar__item{ flex:1 0 33.333%; font-size:17px; padding:14px 8px; }
  .trustbar__item:nth-child(3n+1)::before{ display:none; }

  .collage{ gap:18px; }
  .quote__body{ padding:14px 20px 18px; }
  .science__grid{ gap:26px; }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px){
  :root{ --gutter:26px; --block:58px; }

  .display-1{ font-size:46px; }
  .display-2{ font-size:34px; }
  .display-3{ font-size:26px; }

  .hero__inner{ min-height:auto; border-radius:0 0 34px 34px; }
  .hero__content{ padding-block:116px 54px; }

  .spot-grid{ gap:20px; }
  .spot{ flex:1 1 100%; }
  .spot__img{ aspect-ratio:16/11; }

  .storyband__card{ padding:30px 24px; }
  .footer__grid{ gap:30px; }
  .footer h2{ font-size:21px; }

  .cart-line{ grid-template-columns:84px 1fr; }
  .cart-line__right{ grid-column:2; text-align:left; }
  .pagination a,.pagination span{ min-width:40px; height:40px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 525px){
  .trustbar__item{ font-size:15px; padding:12px 22px; }
  p.lede.hero__text.is-in {
    backdrop-filter: blur(11px);
    padding: 5px 5px;
}
  :root{ --gutter:20px; --block:50px; }

  .display-1{ font-size:38px; }
  .display-2{ font-size:29px; }
  .display-3{ font-size:23px; }
  .display-4{ font-size:21px; }
  body{ font-size:15px; }

  .hero__inner{ min-height:auto; border-radius:0 0 26px 26px; }
  .hero__cta{ gap:10px; }
  .hero__cta .btn{ width:100%; }

  .trustbar__item{ flex:1 0 15%; font-size:15px; padding:12px 6px; }
  .trustbar__item::before{ display:none !important; }

  .benefits__list{ gap:26px; }
  .collage{ gap:12px; }
  .quote{ flex-direction:row; }

  .pos__media{ aspect-ratio:4/3; padding:16px; }
  .spot__panel{ padding:20px 18px 24px; }

  .tcard{ flex:0 0 78vw; padding:20px 20px 24px; }
  .ticker{ --tgap:16px; }

  .subscribe input,.subscribe button{ flex:1 1 100%; }

  .buybox{ gap:10px; }
  .buybox .btn--solid{ flex:1 1 100%; }
  .gallery__thumb{ width:70px; height:70px; }
  .cart-foot{ flex-direction:column; align-items:stretch; text-align:left; }
  .cart-foot > div{ text-align:left !important; }
  .mobile-nav{ padding-top:100px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 430px){
  :root{ --gutter:18px; --block:44px; }

  .display-1{ font-size:34px; }
  .display-2{ font-size:27px; }

  .header__logo img{ height:44px; }
  .header__tools{ gap:16px; }

  .hero__inner{ min-height:auto; }
  .hero__content{ padding-block:104px 44px; }
  .btn{ min-height:48px; padding:12px 24px; font-size:14px; }

  .gallery__thumb{ width:62px; height:62px; }
  .accordion__btn{ padding:17px 0; font-size:15px; }
  .field input,.field textarea{ padding:12px 16px; }
  .science{ padding:24px 20px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 375px){
  .trustbar__item{ font-size:14px; padding:11px 18px; }
  :root{ --gutter:16px; --block:40px; }

  .display-1{ font-size:31px; }
  .display-2{ font-size:25px; }
  .display-3{ font-size:21px; }
  body{ font-size:14.5px; }

  .trustbar__item{ font-size:14px; }
  .tcard{ flex:0 0 82vw; }
  .tcard__name{ font-size:16px; }
  .chip{ font-size:13px; padding:7px 13px; }
  .footer__logo img{ width:150px; }
}
/*-----------------------------------------------------------------------------------------------------*/
@media (max-width: 360px){
  :root{ --gutter:14px; --block:36px; }

  .display-1{ font-size:28px; }
  .display-2{ font-size:23px; }

  .header__logo img{ height:40px; }
  .hero__inner{ min-height:auto; }
  .btn{ padding:11px 20px; font-size:13.5px; }
  .tcard{ flex:0 0 86vw; }
  .gallery__thumb{ width:56px; height:56px; }
  .cart-line{ grid-template-columns:66px 1fr; gap:14px; }
}
/*-----------------------------------------------------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .ticker__group{ animation:none; }
  .ticker{ overflow-x:auto; }
}