/* critical.css - everything above the fold. style.css arrives asynchronously
   and may not be here yet, so nothing below depends on it. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* overflow-x:hidden on html or body silently kills position:sticky on every
   descendant. clip does the same job and leaves sticky alone. */
@supports(overflow:clip){html,body{overflow-x:clip}}

body{margin:0;background:var(--ground);color:var(--fg);
  font-family:var(--font-ui);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* The stylesheet arrives late. Without this guard every transition fires at
   once the moment it lands and the page flashes. main.js removes pre-css only
   after both window load and the sheet's own onload. */
html.pre-css *,html.pre-css *::before,html.pre-css *::after{
  transition:none!important;animation:none!important}

img,picture,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.13;font-weight:700;text-wrap:balance}
h1,h2{font-family:var(--font-d);letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(33px,5.6vw,60px)}
h2{font-size:clamp(26px,3.6vw,41px)}
h3{font-size:clamp(18px,2vw,21px);font-family:var(--font-ui);
  letter-spacing:-.014em;font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
b,strong{font-weight:700}
q{quotes:"\201C" "\201D"}
code{font-family:var(--font-num);font-size:.92em;background:var(--card-2);
  padding:.1em .34em;border-radius:5px}

.shell{width:100%;max-width:var(--wide);margin-inline:auto;
  padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip{position:fixed;left:8px;top:-60px;z-index:200;
  background:var(--teal);color:#fff;padding:10px 18px;border-radius:var(--pill);
  font-weight:700;transition:top var(--t-hover) var(--ease)}
.skip:focus{top:8px}

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-f);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------- the buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:650;font-size:15.5px;padding:14px 25px;
  border-radius:var(--r);border:1.5px solid transparent;text-decoration:none;
  cursor:pointer;position:relative;
  /* colour is deliberately NOT in this transition: a mid-transition frame is a
     colour in no palette, and the contrast sweep cannot see it. */
  transition:transform var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease)}
.btn--p{background-color:var(--brand-f);color:#fff;border-color:var(--brand-f);
  box-shadow:0 1px 0 rgba(0,0,0,.14)}
.btn--p:hover{transform:translateY(-2px);
  box-shadow:0 9px 22px -9px rgba(142,67,25,.8)}
.btn--g{background-color:transparent;color:var(--fg);border-color:var(--rule-2)}
.btn--g:hover{transform:translateY(-2px);border-color:var(--fg)}
.btn:active{transform:translateY(0)}
.lnk{background:none;border:0;font:inherit;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* --------------------------------------------------------------- the strip */
.strip{background-color:var(--teal);color:var(--on-teal);font-size:13px;
  position:relative;z-index:80}
.strip__in{display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:38px;flex-wrap:wrap;text-align:center}
.strip__r{font-weight:650;color:#fff}
.strip__p{color:var(--brand-t);font-weight:700;text-decoration:none;
  font-family:var(--font-num)}
.strip__p:hover{text-decoration:underline;text-underline-offset:3px}
.strip__g,.strip__s{color:var(--on-teal-m)}
.strip__d{width:4px;height:4px;border-radius:50%;background:var(--line-t2);
  flex:0 0 auto}
@media(max-width:800px){.strip__s,.strip__d--last{display:none}}
@media(max-width:540px){.strip__g,.strip__d{display:none}}

/* -------------------------------------------------------------- the header */
.hdr{position:sticky;top:0;z-index:75;border-bottom:1px solid var(--rule);
  background-color:var(--ground)}
/* The blur lives on a pseudo-element, never on .hdr itself. backdrop-filter
   (like filter, transform, perspective, contain:paint and will-change) makes
   its element the containing block for every position:fixed descendant, which
   laid an entire mobile drawer out inside the header for one release. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(248,244,240,.9);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px)}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:70px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  flex:0 0 auto;margin-right:auto}
.brand__m{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
  background-color:var(--teal);color:var(--brand-t);font-family:var(--font-d);
  font-weight:800;font-size:15px;letter-spacing:-.02em;
  border-radius:var(--r-sm)}
.brand__t{display:flex;flex-direction:column;line-height:1.1}
.brand__t b{font-family:var(--font-d);font-size:17.6px;font-weight:800;
  letter-spacing:-.035em}
.brand__t i{font-style:normal;font-size:10.2px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-m);font-weight:600}

.nav{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.nav a:not(.btn){text-decoration:none;font-size:14.6px;font-weight:600;
  padding:9px 12px;border-radius:var(--r-sm);color:var(--fg);white-space:nowrap;
  transition:background-color var(--t-hover) var(--ease)}
.nav a:not(.btn):hover{background-color:var(--card-2)}
.nav a:not(.btn)[aria-current]{color:var(--brand);background-color:var(--wash)}
.nav .btn{margin-left:8px;padding:11px 20px;font-size:14.6px}
.nav__x{display:none;background:none;border:0;cursor:pointer;font-size:30px;
  line-height:1;color:var(--fg);padding:4px 10px}
.burger{display:none;background:none;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);width:46px;height:42px;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;width:19px;
  height:2px;background:var(--fg);border-radius:2px;position:relative;
  transition:transform var(--t-hover) var(--ease),opacity 90ms linear}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(20,11,18,.58);border:0;
  opacity:0;transition:opacity 200ms linear}
.scrim.is-on{opacity:1}

@media(max-width:1150px){
  /* With script off there is no drawer to open, so the nav stays in the
     document: it wraps under the brand and every link remains reachable. */
  html:not(.js) .hdr__in{flex-wrap:wrap;padding-block:10px;gap:10px}
  html:not(.js) .nav{width:100%;gap:2px}
  html:not(.js) .nav .btn{margin-left:auto}

  html.js .burger{display:inline-flex}
  html.js .nav{position:fixed;inset:0 0 0 auto;z-index:90;width:min(340px,86vw);
    background-color:var(--card);border-left:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap;
    padding:64px 18px 26px;overflow-y:auto;
    box-shadow:-18px 0 44px -22px rgba(0,0,0,.45);
    transform:translateX(102%);visibility:hidden;
    transition:transform 260ms var(--ease-out),visibility 0s linear 260ms}
  html.js .nav.is-open{transform:translateX(0);visibility:visible;
    transition:transform 260ms var(--ease-out),visibility 0s linear 0s}
  html.js .nav a:not(.btn){padding:13px 14px;font-size:16.5px;
    border-radius:var(--r-sm);border-bottom:1px solid var(--rule)}
  html.js .nav .btn{margin:16px 0 0;width:100%}
  html.js .nav__x{display:inline-flex;position:absolute;top:13px;right:12px}
}

/* ---------------------------------------------------------------- the hero -
   Composition: STACKED BAND. The whole argument is set inside one plum colour
   field that runs the full width of the page; the amber bottle stands in that
   field and breaks its lower edge, half on the plum and half on the paper
   below. The band is a block that wraps the copy, so its height is the copy's
   height and there is no magic number to keep in sync with the type. It
   carries .sec--ink, so every token inside it is remapped to the dark ground
   by the same machinery every dark section uses. */
.hero{position:relative;background-color:var(--paper);
  padding-bottom:clamp(30px,4.6vw,58px)}
.hero__band{position:relative;
  padding:clamp(34px,5vw,66px) 0 clamp(34px,4.4vw,56px)}
.hero__in{display:grid;gap:clamp(24px,3.4vw,46px);grid-template-columns:1fr;
  align-items:end;position:relative;z-index:1}
@media(min-width:900px){.hero__in{grid-template-columns:1.12fr .88fr}}

.hero__c{min-width:0}
.hero__m{display:grid;justify-items:center;align-self:end;min-width:0}
/* the break: the bottle is pulled down through the band's lower edge, so it
   stands on both grounds at once. The paper padding on .hero above is what
   gives it somewhere to land. */
.hero__prod{position:relative;width:min(100%,330px);
  margin-bottom:calc(-1 * clamp(58px,8vw,128px))}
.hero__prod img{width:100%;height:auto;
  filter:drop-shadow(0 26px 34px rgba(12,6,10,.55))}

.hero__eb{font-size:11.4px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);margin:0 0 16px;
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule-2);
  border-radius:var(--pill);padding:6px 14px 6px 11px}
.hero__eb::before{content:"";width:7px;height:7px;border-radius:50%;
  background-color:var(--brand);flex:0 0 auto}
.hero__h{margin:0 0 18px;font-size:clamp(34px,5.4vw,62px);line-height:1.03;
  letter-spacing:-.037em;max-width:17ch}
.hero__h em{font-style:normal;color:var(--brand);display:block}
.hero__s{font-size:clamp(16px,1.5vw,18.5px);color:var(--fg-m);max-width:60ch;
  margin:0 0 26px}
.hero__s b{color:var(--fg)}
.hero__a{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}

/* fact chips */
.kr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.kr{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kr__i{background-color:var(--card);padding:15px 16px}
.kr__f{display:block;font-family:var(--font-num);
  font-size:clamp(18px,2.1vw,23px);font-weight:700;line-height:1.1;
  letter-spacing:-.03em;color:var(--fg)}
.kr__l{display:block;font-size:12.2px;color:var(--fg-m);margin-top:6px;
  line-height:1.36}

/* trust row: sits on the paper below the band, clear of the overhang */
.hero__foot{position:relative;z-index:2}
.trow{display:grid;grid-template-columns:1fr;gap:1px;
  /* clears the bottle's overhang: the band's lower edge is broken by the
     product, and nothing may land on top of it. */
  margin-top:clamp(66px,6.6vw,106px);background-color:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
@media(min-width:560px){.trow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.trow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trow__i{background-color:var(--card);padding:16px 18px;display:flex;
  align-items:baseline;gap:10px}
.trow__i b{font-family:var(--font-num);font-size:18px;font-weight:700;
  color:var(--brand);flex:0 0 auto}
.trow__i span{font-size:13px;color:var(--fg-m);line-height:1.38}

/* --------------------------------------------------------- the page header */
.phead{padding:clamp(26px,3.6vw,44px) 0 clamp(18px,2.4vw,28px);
  background-color:var(--card);border-bottom:1px solid var(--rule)}
.phead h1{margin:0;max-width:20ch}
.phead__l{margin:14px 0 0;font-size:clamp(16px,1.5vw,18.5px);
  color:var(--fg-m);max-width:62ch}
.crumb{margin:0 0 16px;font-size:12.6px;color:var(--fg-m)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;
  flex-wrap:wrap}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--rule-2)}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------- the section */
.sec{padding:clamp(40px,5.2vw,78px) 0;background-color:var(--ground);
  color:var(--fg);position:relative}
.sec__h{margin:0 0 14px;max-width:24ch}
.sec__l{margin:0 0 clamp(22px,2.6vw,34px);font-size:clamp(16px,1.4vw,18px);
  color:var(--fg-m);max-width:66ch}