/* ============================================================
   Actop Healthcare — redesign
   Palette / type / layout tokens
   ============================================================ */
:root{
  --ink:#0C1F1A;
  --ink-2:#4A635C;
  --ink-3:#7C918B;
  --paper:#FFFFFF;
  --mist:#F3F7F4;
  --line:#E3EBE6;
  --green:#34B44A;
  --green-d:#249239;
  --cyan:#00AEEF;
  --deep:#06323F;

  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-body:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap:1320px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(88px,11vw,168px);
  --r:14px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Lenis writes a scroll target every frame; a native smooth scroll restarts
   its own animation on each of those writes and the page crawls seconds
   behind the wheel. Hostinger's assistant sets this inline, so !important. */
html.lenis,html.lenis body{scroll-behavior:auto!important}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
address{font-style:normal}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}

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

.skip{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;
}
.skip:focus{top:16px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* very wide displays get a wider measure rather than a wider gutter */
@media(min-width:1560px){
  :root{--wrap:1460px;--pad:76px}
}
@media(min-width:1900px){
  :root{--wrap:1600px}
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green-d);
  margin:0 0 18px;
}
.eyebrow--on-dark{color:#5FD97A}

.h2{
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2rem,4.6vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.022em;
  max-width:16ch;
}
.h2--on-dark{color:#fff}

.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink)}

.sec{padding:var(--sec-y) 0;position:relative}
.head{margin-bottom:clamp(44px,6vw,76px)}
.head--row{
  display:grid;grid-template-columns:1fr minmax(0,42ch);
  gap:clamp(24px,5vw,64px);align-items:end;
}
.head__note{color:var(--ink-2);font-size:1.02rem}
.head__note--wide{max-width:62ch;margin-top:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;
  background:var(--ink);color:#fff;
  border-radius:100px;
  font-size:.95rem;font-weight:500;letter-spacing:.005em;
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease),background .35s ease,color .35s ease;
  will-change:transform;
}
.btn:hover{background:var(--green)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.btn--sm{padding:11px 22px;font-size:.88rem}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:1000;
  background:var(--paper);
  display:grid;place-items:center;
}
.preloader__inner{display:grid;justify-items:center;gap:26px}
.preloader__logo{width:150px;opacity:.95}
.preloader__bar{width:180px;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.preloader__bar span{display:block;height:100%;width:0;background:var(--green)}
body.is-loaded .preloader{pointer-events:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding:18px 0;
  transition:padding .4s var(--ease),background .4s ease,box-shadow .4s ease;
}
.nav.is-stuck{
  padding:10px 0;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav__in{
  position:relative;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(16px,4vw,48px);
}
.nav__brand{grid-column:1;justify-self:start}
.nav__brand img{width:132px}
.nav__links{
  grid-column:2;justify-self:center;
  display:flex;gap:clamp(14px,2.2vw,32px);
}
.nav__links a{
  font-size:.93rem;color:var(--ink-2);position:relative;padding:4px 0;
  transition:color .3s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--green);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{transform:scaleX(1)}

.nav__burger{display:none;grid-column:3;justify-self:end;width:40px;height:40px;position:relative}
.nav__burger span{
  position:absolute;left:9px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s ease;
}
.nav__burger span:nth-child(1){top:17px}
.nav__burger span:nth-child(2){top:23px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobile menu */
.mobile{
  position:fixed;inset:0;z-index:110;background:var(--paper);
  padding:104px var(--pad) calc(36px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:clamp(18px,4vw,28px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
body.menu-open .mobile{clip-path:inset(0 0 0 0);visibility:visible}
.mobile__links{display:grid;gap:6px}
.mobile__links a{
  font-family:var(--ff-display);font-size:clamp(1.7rem,7.4vw,2.3rem);
  line-height:1.24;display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(20px);
}
body.menu-open .mobile__links a{opacity:1;transform:none;transition:opacity .5s ease .2s,transform .6s var(--ease) .2s}
body.menu-open .mobile__links a:nth-child(2){transition-delay:.26s}
body.menu-open .mobile__links a:nth-child(3){transition-delay:.32s}
body.menu-open .mobile__links a:nth-child(4){transition-delay:.38s}
body.menu-open .mobile__links a:nth-child(5){transition-delay:.44s}
body.menu-open .mobile__links a:nth-child(6){transition-delay:.5s}
.mobile__links em{font-family:var(--ff-mono);font-size:.72rem;font-style:normal;color:var(--green-d)}
.mobile__foot{display:grid;gap:6px;margin-top:auto;padding-top:22px;font-family:var(--ff-mono);font-size:.8rem;color:var(--ink-2)}

/* ============================================================
   SCROLL RAIL
   ============================================================ */
.rail{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;align-items:center;gap:12px;
  opacity:0;transition:opacity .5s ease;
}
.rail.is-on{opacity:1}
.rail__label{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
  writing-mode:vertical-rl;
}
.rail__track{width:1px;height:110px;background:var(--line);position:relative;overflow:hidden}
.rail__fill{position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:top}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(104px,13vh,148px) 0 0;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero__wash{
  position:absolute;inset:-20% -10% auto -10%;height:120%;
  background:
    radial-gradient(46% 42% at 78% 18%,rgba(0,174,239,.16),transparent 70%),
    radial-gradient(50% 46% at 12% 30%,rgba(52,180,74,.15),transparent 72%),
    radial-gradient(40% 40% at 60% 88%,rgba(52,180,74,.08),transparent 70%);
  pointer-events:none;
}
.hero__grid{
  flex:1;
  max-width:var(--wrap);width:100%;margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,5vw,72px);align-items:center;
  position:relative;z-index:2;
}
.hero__copy{padding-bottom:2vh}

/* ---------------- Hero carousel (two slides) ---------------- */
.hero__panels{position:relative;flex:1}
.hero__panel{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s ease;
}
.hero__panel.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.hero__panel .hero__grid{width:100%}
.hero__dots{
  position:absolute;left:50%;bottom:clamp(14px,3vh,26px);z-index:5;
  transform:translateX(-50%);
  display:flex;gap:9px;
}
.hero__dots button{
  width:9px;height:9px;border-radius:50%;
  background:rgba(12,31,26,.18);transition:background .3s ease,transform .3s ease;
}
.hero__dots button.is-active{background:var(--green);transform:scale(1.25)}
.hero__grid--map{grid-template-columns:1.05fr .95fr;align-items:center}
.hero__values{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:6px}
.hero__values li{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink-2)}
.hero__valueic{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--green-d);
  box-shadow:inset 0 0 0 1px var(--line);background:var(--paper);
}
.hero__valueic svg{width:17px;height:17px}
.hero__mapart{position:relative;display:grid;place-items:center;padding:clamp(10px,3vw,28px)}
.hero__mapsvg{width:100%;height:auto;color:var(--mist)}

.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(2.9rem,7.7vw,6rem);
  line-height:.99;
  letter-spacing:-.03em;
  font-weight:400;
  margin:0 0 30px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:0.15em;margin-bottom:-0.15em}
.hero__title .line>span{display:block}
.hero__title em{
  font-style:italic;font-weight:300;
  background:linear-gradient(96deg,var(--green) 8%,var(--cyan) 92%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.06em;
}
.hero__lede{max-width:44ch;color:var(--ink-2);font-size:1.04rem;margin-bottom:28px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* --- the endless shelf --- */
.shelf{
  position:relative;height:clamp(380px,64vh,600px);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.shelf__col{overflow:hidden;position:relative}
.shelf__col--b{margin-top:-56px}
.shelf__strip{display:grid;gap:16px;will-change:transform}
.shelf__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:14px;
  box-shadow:0 12px 30px -22px rgba(12,31,26,.4);
}
.shelf__item img{width:100%;height:auto;mix-blend-mode:multiply}

/* --- ticker --- */
.ticker{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding:15px 0;margin-top:auto;
  overflow:hidden;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(6px);
}
.ticker__row{
  display:flex;gap:0;white-space:nowrap;will-change:transform;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.ticker__row b{font-weight:500;color:var(--ink)}
.ticker__row i{color:var(--green);font-style:normal;padding:0 20px}

/* ============================================================
   ABOUT
   ============================================================ */
.sec--about{background:var(--paper)}
.about__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,6vw,80px);align-items:center;
}
.about__body{display:grid;gap:20px;align-content:start}
.about__body p{color:var(--ink-2)}
.about__body .lead{color:var(--ink)}
.about__body strong{font-weight:600;color:var(--ink)}

.marks{display:flex;flex-wrap:wrap;gap:8px}
.marks span{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:100px;
  background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);
}
.marks span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}

/* the About collage — real pack shots, not another text box */
.about__media{position:relative;margin:0;min-height:clamp(370px,40vw,520px)}
.about__glow{
  position:absolute;inset:7% 3% 7% 6%;border-radius:30px;
  background:
    linear-gradient(158deg,rgba(52,180,74,.16),rgba(0,174,239,.18) 62%,rgba(0,174,239,.05));
}
.about__shot{
  position:absolute;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:12px;
  box-shadow:0 34px 60px -36px rgba(12,31,26,.55);
  will-change:transform;
}
.about__shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.about__shot--a{left:0;top:4%;width:52%;aspect-ratio:1/.94;z-index:2}
.about__shot--b{right:1%;top:24%;width:45%;aspect-ratio:1/.82;z-index:3}
.about__shot--c{left:15%;bottom:3%;width:44%;aspect-ratio:1/.92;z-index:4}
.about__badge{
  position:absolute;right:0;bottom:4%;z-index:5;
  display:flex;align-items:center;gap:13px;
  padding:16px 20px;border-radius:15px;
  background:var(--ink);color:#fff;
  box-shadow:0 26px 50px -30px rgba(12,31,26,.85);
}
.about__badge b{
  font-family:var(--ff-display);font-size:2.1rem;line-height:1;font-weight:400;
  background:linear-gradient(96deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.about__badge span{
  font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.75;
}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  margin-top:clamp(40px,5.5vw,66px);
}
.fact{background:var(--paper);padding:26px 22px}
.fact dt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
.fact dd{
  font-family:var(--ff-display);font-size:clamp(2.1rem,3.6vw,2.9rem);
  line-height:1;letter-spacing:-.02em;
}
.fact dd i{font-family:var(--ff-body);font-style:normal;font-size:.9rem;color:var(--ink-2);letter-spacing:0}

.vm{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(16px,2.5vw,28px);margin-top:clamp(48px,7vw,88px)}
.vm__card{
  padding:clamp(28px,3.4vw,44px);
  border-radius:var(--r);
  background:var(--mist);
  border:1px solid var(--line);
}
.vm__card--alt{background:var(--ink);border-color:var(--ink)}
.vm__card--alt .eyebrow{color:#5FD97A}
.vm__card--alt .vm__text{color:rgba(255,255,255,.9)}
.vm__text{
  font-family:var(--ff-display);
  font-size:clamp(1.15rem,1.85vw,1.5rem);
  line-height:1.42;letter-spacing:-.012em;
}

/* ============================================================
   FORMULARY
   ============================================================ */
.sec--form{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.chip{
  padding:9px 17px;border-radius:100px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-size:.88rem;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:8px;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.chip em{font-family:var(--ff-mono);font-style:normal;font-size:.66rem;color:var(--ink-3);transition:color .3s ease}
.chip:hover{box-shadow:inset 0 0 0 1px var(--ink-3);color:var(--ink)}
.chip.is-on{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.chip.is-on em{color:#5FD97A}

.formulary{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.5vw,22px);
}
.card{
  background:var(--paper);
  border:1px solid var(--line);border-radius:20px;
  padding:13px 13px 20px;
  display:flex;flex-direction:column;
  cursor:pointer;position:relative;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s ease;
  will-change:transform;
}
.card:hover,.card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,0);
  box-shadow:0 34px 54px -32px rgba(12,31,26,.42);
}
.card.is-hidden{display:none}

.card__plate{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:1/.84;padding:18px;
  display:grid;place-items:center;
  background:linear-gradient(158deg,#F7FBF8,#EDF5F1 58%,#E7F1F6);
}
.card[data-cat="softgel"] .card__plate{background:linear-gradient(158deg,#FFF9EE,#F4F7EE 58%,#E9F3EC)}
.card[data-cat="tablet"]  .card__plate{background:linear-gradient(158deg,#F4F9FF,#EDF4F9 58%,#E9F3EE)}
.card[data-cat="capsule"] .card__plate{background:linear-gradient(158deg,#F2FBF6,#E9F5F0 58%,#E5F1F6)}
.card[data-cat="powder"]  .card__plate{background:linear-gradient(158deg,#FDF4F8,#F2F2F9 58%,#E9F2F5)}
.card__plate img{
  width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .7s var(--ease);
}
.card:hover .card__plate img{transform:scale(1.06)}

.card__form{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-d);background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(52,180,74,.22);
  padding:5px 11px;border-radius:100px;white-space:nowrap;
  display:inline-block;
}
.card__plate .card__form{position:absolute;top:11px;left:11px;z-index:2}
.card__zoom{
  position:absolute;right:11px;bottom:11px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;transform:scale(.6);
  transition:opacity .4s ease,transform .5s var(--ease);
}
.card__zoom svg{width:16px;height:16px}
.card:hover .card__zoom,.card:focus-visible .card__zoom{opacity:1;transform:none}

.card__txt{padding:17px 7px 0;display:flex;flex-direction:column;flex:1}
.card__name{
  font-size:1.02rem;line-height:1.3;font-weight:500;
  letter-spacing:-.008em;margin:10px 0 0;
}
.card__name span{
  display:block;margin-top:6px;font-weight:400;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.card__desc{font-size:.85rem;line-height:1.5;color:var(--ink-2);margin-top:12px}
.card__more{
  margin-top:auto;padding-top:18px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-d);
}
.card__more svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.card:hover .card__more svg{transform:translateX(4px)}

/* ============================================================
   PRODUCT DIALOG
   ============================================================ */
body.modal-open{overflow:hidden}
.pmodal{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(14px,4vw,48px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.pmodal.is-open{opacity:1;visibility:visible}
.pmodal__scrim{
  position:absolute;inset:0;
  background:rgba(6,26,22,.55);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.pmodal__panel{
  position:relative;z-index:1;
  width:min(1000px,100%);height:min(88vh,840px);
  display:grid;grid-template-columns:.92fr 1.08fr;
  background:var(--paper);border-radius:22px;overflow:hidden;
  box-shadow:0 60px 120px -50px rgba(6,26,22,.75);
  transform:translateY(26px) scale(.98);
  transition:transform .55s var(--ease);
}
.pmodal.is-open .pmodal__panel{transform:none}
.pmodal__media{
  position:relative;min-width:0;min-height:0;height:100%;overflow-y:auto;
  display:grid;justify-items:center;align-content:start;
  padding:clamp(24px,4vw,46px);
  background:linear-gradient(158deg,#F7FBF8,#EAF3F7);
}
.pmodal__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.pmodal__idx{
  position:absolute;top:18px;left:22px;
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;color:var(--ink-3);
}
.pmodal__body{height:100%;padding:clamp(26px,3.2vw,42px);overflow-y:auto;min-width:0;min-height:0}
.pmodal__x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:38px;height:38px;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .3s ease,color .3s ease;
}
.pmodal__x svg{width:16px;height:16px}
.pmodal__x:hover{background:var(--ink);color:#fff}
.pmodal__title{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.1;letter-spacing:-.022em;
  margin:16px 0 8px;
}
.pmodal__sub{
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-d);
}
.pmodal__desc{margin-top:18px;color:var(--ink-2);font-size:.97rem;line-height:1.62}
.pmspec{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:13px;overflow:hidden;margin-top:24px;
}
.pmspec>div{background:var(--paper);padding:15px 17px}
.pmspec dt{
  font-family:var(--ff-mono);font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.pmspec dd{font-size:.95rem;font-weight:500;line-height:1.35}
.pmodal__note{margin-top:18px;font-size:.81rem;line-height:1.6;color:var(--ink-3)}
.pmodal__note[hidden],.pmodal__desc[hidden],.pmspec[hidden],.pmodal__rich[hidden]{display:none}

.pmodal__rich{margin-top:24px}
.pmrich__h{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin:0 0 10px;
}
.pmrich__h~.pmrich__h{margin-top:22px}
.pmrich__l{display:grid;gap:10px}
.pmrich__l li{
  position:relative;padding-left:16px;
  font-size:.88rem;line-height:1.5;color:var(--ink-2);
}
.pmrich__l li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--green);
}
.pmrich__l b{display:block;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.pmrich__l b+span{display:block;margin-top:2px}

/* one block per product inside a special-products group */
.pmgrp{padding:15px 0;border-top:1px solid var(--line)}
.pmgrp:first-child{border-top:0;padding-top:0}
.pmgrp>b{
  display:block;font-weight:500;font-size:.98rem;letter-spacing:-.012em;color:var(--ink);
}
.pmgrp>i{
  display:block;font-style:normal;margin-top:3px;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-d);
}
.pmgrp ul{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.pmgrp li{
  font-size:.76rem;line-height:1.3;color:var(--ink-2);
  background:var(--mist);border-radius:99px;padding:5px 10px;
}

/* a record with no pack shot gives the whole panel to the text */
.pmodal--plain .pmodal__panel{grid-template-columns:1fr;width:min(680px,100%)}
.pmodal--plain .pmodal__media{display:none}
.pmodal__foot{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:26px;
}
.pmodal__foot .btn{width:100%;justify-content:center}
/* only the bottom sheet wears a grip */
.pmodal__grip{display:none}

/* pharma PDF card */
.pharma{
  margin-top:22px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  padding:clamp(26px,3.4vw,42px);
  border-radius:var(--r);
  background:var(--ink);color:#fff;
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease);
}
.pharma::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 130% at 88% 50%,rgba(0,174,239,.3),transparent 70%);
  opacity:0;transition:opacity .6s ease;
}
.pharma:hover{transform:translateY(-3px)}
.pharma:hover::before{opacity:1}
.pharma__l{position:relative;z-index:1}
.pharma__l .eyebrow{color:#5FD97A}
.pharma__l h3{font-family:var(--ff-display);font-size:clamp(1.35rem,2.5vw,1.9rem);line-height:1.18;letter-spacing:-.018em;margin-bottom:8px}
.pharma__l p{color:rgba(255,255,255,.62);font-size:.95rem}
.pharma__btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;
  background:#fff;color:var(--ink);
  font-size:.92rem;font-weight:500;white-space:nowrap;
}
.pharma__btn svg{width:17px;height:17px}

/* ============================================================
   PHARMACEUTICAL FORMULATIONS
   ============================================================ */
.sec--rx{background:var(--paper);border-bottom:1px solid var(--line)}

.rx__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:26px;
}
.rx__stats>div{background:var(--paper);padding:24px 22px}
.rx__stats dt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
.rx__stats dd{
  font-family:var(--ff-display);font-size:clamp(2rem,3.4vw,2.7rem);
  line-height:1;letter-spacing:-.02em;
}

.rx__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0 12px;
}
.rx__search{
  position:relative;flex:1 1 320px;
  display:flex;align-items:center;
}
.rx__search>svg{
  position:absolute;left:17px;width:17px;height:17px;
  color:var(--ink-3);pointer-events:none;
}
.rx__search input{
  width:100%;font:inherit;font-size:.97rem;color:var(--ink);
  padding:15px 46px 15px 46px;
  background:var(--paper);
  border:1px solid var(--line);border-radius:100px;
  transition:border-color .3s ease,box-shadow .3s ease;
  -webkit-appearance:none;appearance:none;
}
.rx__search input::-webkit-search-cancel-button{display:none}
.rx__search input::placeholder{color:var(--ink-3)}
.rx__search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(52,180,74,.12)}
.rx__clear{
  position:absolute;right:12px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);
  transition:background .3s ease,color .3s ease;
}
.rx__clear svg{width:14px;height:14px}
.rx__clear:hover{background:var(--mist);color:var(--ink)}

.rx__acts{display:flex;gap:8px}
.rx__act{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:100px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.rx__act:hover{background:var(--ink);color:#fff;box-shadow:none}
.rx__act svg{width:15px;height:15px}
.rx__act--dl{color:var(--green-d);box-shadow:inset 0 0 0 1px rgba(52,180,74,.3)}

.rx__status{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
  margin:0;min-width:0;
}
.rx__status.is-empty{color:#D6453E}

.rx{
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper);
}
.rxg+.rxg{border-top:1px solid var(--line)}
.rxg[hidden]{display:none}
.rxg__h{margin:0;font-weight:400;font-size:inherit;font-family:inherit}
.rxg__head{
  width:100%;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:clamp(12px,2vw,22px);align-items:center;
  padding:19px clamp(16px,2vw,24px);
  transition:background .35s ease;
}
.rxg__head:hover{background:var(--mist)}
.rxg__idx{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3)}
.rxg__name{
  font-size:1.02rem;font-weight:500;letter-spacing:-.008em;
  line-height:1.3;
}
.rxg__n{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.rxg__n b{font-weight:500;color:var(--green-d)}
.rxg__chev{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .45s var(--ease),background .35s ease,color .35s ease;
}
.rxg__chev svg{width:15px;height:15px}
.rxg.is-open .rxg__chev{transform:rotate(180deg);background:var(--ink);color:#fff;box-shadow:none}

.rxg__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.rxg.is-open .rxg__body{grid-template-rows:1fr}
.rxg__inner{overflow:hidden;min-height:0}
.rxt__scroll{overflow-x:auto;padding:0 clamp(16px,2vw,24px) 22px}

.rxt{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.rxt th{
  text-align:left;font-weight:400;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding:10px 14px;border-bottom:1px solid var(--line);
}
.rxt td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.rxt tbody tr:last-child td{border-bottom:0}
.rxt tbody tr{transition:background .25s ease}
.rxt tbody tr:hover{background:var(--mist)}
.rxt tr[hidden]{display:none}
.rxt__name{color:var(--ink);line-height:1.4;padding-right:22px}
.rxt__form{
  display:inline-block;white-space:nowrap;
  font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);
  background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);
  padding:5px 11px;border-radius:100px;
}
.rxt__str{
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.02em;
  color:var(--green-d);white-space:nowrap;
}

.rx__note{
  margin-top:24px;max-width:78ch;
  font-size:.8rem;line-height:1.65;color:var(--ink-3);
}
.rx__note strong{color:var(--ink-2);font-weight:500}

/* ============================================================
   SOURCING (dark)
   ============================================================ */
.sec--src{
  background:var(--deep);color:#fff;
  position:relative;overflow:hidden;
  padding:clamp(76px,8vw,112px) 0;
}
.src__glow{
  position:absolute;inset:-25% -12% auto -12%;height:150%;pointer-events:none;
  background:
    radial-gradient(34% 38% at 20% 16%,rgba(52,180,74,.20),transparent 70%),
    radial-gradient(40% 42% at 84% 78%,rgba(0,174,239,.22),transparent 72%);
}
.sec--src .wrap{position:relative;z-index:1}
.sec--src .head{margin-bottom:clamp(30px,4vw,54px)}
.sec--src .h2{font-size:clamp(1.85rem,3.5vw,2.9rem);max-width:14ch}
.src__lede{color:rgba(255,255,255,.68);max-width:48ch;margin:0}
.src__lede strong{color:#fff;font-weight:500}

/* the panel is sized to sit inside one screen where there is room for it */
@media(min-width:1000px) and (min-height:700px){
  .sec--src{min-height:100svh;display:grid;align-content:center}
}
/* on a short desktop window the diagram gives up height before it overflows */
@media(min-width:1000px) and (max-height:900px){
  .sec--src{padding:clamp(48px,6vh,80px) 0}
  .sec--src .head{margin-bottom:clamp(22px,3vh,42px)}
  .prov__mid{min-height:min(340px,42vh)}
}

.prov{
  position:relative;
  display:grid;grid-template-columns:1fr minmax(210px,330px) 1fr;
  gap:clamp(12px,2vw,30px);align-items:center;
}
.prov__cap{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:14px;
}
.prov__col ul{display:grid;gap:9px;align-content:center}
.prov__col li{
  padding:13px 16px;border-radius:13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:background .4s ease,border-color .4s ease,transform .5s var(--ease);
}
.prov__col li:hover{background:rgba(255,255,255,.1);border-color:rgba(95,217,122,.45);transform:translateX(4px)}
.prov__col--out li:hover{transform:translateX(-4px)}
.prov__col b{display:block;font-weight:500;font-size:1rem}
.prov__col span{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.prov__col--out{text-align:right}

.prov__col--src li{display:grid;grid-template-columns:36px 1fr;column-gap:14px;align-items:center}
.prov__col--src i{
  grid-area:1/1/3/2;
  width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  font-family:var(--ff-mono);font-style:normal;font-size:.63rem;letter-spacing:.06em;
  color:#9FEBB4;
  background:linear-gradient(150deg,rgba(95,217,122,.24),rgba(0,174,239,.18));
  border:1px solid rgba(95,217,122,.28);
}

.prov__mid{position:relative;z-index:1;min-height:340px;display:grid;place-items:center}
.prov__col{position:relative;z-index:1}
.prov__svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.prov__dot{fill:#9FEBB4;filter:drop-shadow(0 0 7px rgba(95,217,122,.85))}
.prov__dot--out{fill:#7FD8F5;filter:drop-shadow(0 0 7px rgba(0,174,239,.85))}
.prov__hub{
  position:relative;z-index:2;
  width:min(162px,42vw);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(70% 70% at 50% 30%,rgba(11,72,88,.98),rgba(6,50,63,.98));
  border:1px solid rgba(95,217,122,.4);
  box-shadow:0 0 60px -12px rgba(52,180,74,.45);
  display:grid;place-content:center;justify-items:center;gap:8px;
  text-align:center;padding:16px;
}
.prov__hub img{width:84px;filter:brightness(0) invert(1)}
.prov__hub p{font-family:var(--ff-mono);font-size:.52rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.52);line-height:1.7}
.prov__ring{
  position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(95,217,122,.22);
}
.prov__ring--2{inset:-34px;border-color:rgba(95,217,122,.1)}

/* ============================================================
   VALUES
   ============================================================ */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.5vw,22px);counter-reset:v;
}
.val{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,3vw,38px);
  position:relative;overflow:hidden;counter-increment:v;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s ease;
}
.val::before{
  content:counter(v,decimal-leading-zero);
  position:absolute;right:24px;top:18px;
  font-family:var(--ff-display);font-size:3.4rem;line-height:1;
  color:var(--mist);transition:color .5s ease;
}
.val::after{
  content:"";position:absolute;right:-28%;bottom:-58%;
  width:72%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(52,180,74,.16),transparent 70%);
  opacity:0;transition:opacity .55s ease;
}
.val:hover{
  transform:translateY(-5px);border-color:rgba(255,255,255,0);
  box-shadow:0 32px 52px -34px rgba(12,31,26,.45);
}
.val:hover::before{color:#E7F3EA}
.val:hover::after{opacity:1}
.val__ico{
  position:relative;z-index:1;
  display:grid;place-items:center;width:52px;height:52px;
  border-radius:15px;color:var(--green-d);
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  margin-bottom:22px;
  transition:background .45s ease,color .45s ease,transform .55s var(--ease);
}
.val:hover .val__ico{
  background:linear-gradient(150deg,var(--green),var(--cyan));
  color:#fff;transform:translateY(-3px);
}
.val__ico svg{width:25px;height:25px}
.val h3{
  position:relative;z-index:1;
  font-family:var(--ff-display);font-size:1.32rem;letter-spacing:-.014em;
  margin-bottom:10px;
}
.val p{position:relative;z-index:1;font-size:.93rem;color:var(--ink-2);line-height:1.58}

/* ============================================================
   CAREERS
   ============================================================ */
.sec--career{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.career{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.career__l{display:grid;gap:clamp(26px,3vw,38px);align-content:start}
.career__r{display:grid;gap:clamp(24px,3vw,32px);align-content:start;justify-items:start}
.career__offices{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.career__offices>div{background:var(--paper);padding:24px 22px}
.career__offices dt{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-d);margin-bottom:11px;
}
.career__offices dd{color:var(--ink-2);font-size:.94rem;line-height:1.62}
.career__note{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink-3)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea{
  width:100%;
  padding:26px 16px 12px;
  font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);border-radius:11px;
  transition:border-color .3s ease,box-shadow .3s ease;
  resize:vertical;
}
.field textarea{min-height:128px}
.field label{
  position:absolute;left:16px;top:20px;
  font-size:.98rem;color:var(--ink-3);pointer-events:none;
  transform-origin:left top;
  transition:transform .3s var(--ease),color .3s ease;
}
.field label span{color:var(--ink-3);opacity:.7}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(52,180,74,.12)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  transform:translateY(-11px) scale(.74);color:var(--green-d);
}
.field.is-bad input,.field.is-bad textarea{border-color:#D6453E;box-shadow:0 0 0 3px rgba(214,69,62,.1)}

.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px}
.form__status{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3)}
.form__status.is-ok{color:var(--green-d)}
.form__status.is-bad{color:#D6453E}

.info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.info__block{background:var(--paper);padding:26px 24px}
.info__block .eyebrow{margin-bottom:12px}
.info__big{display:block;font-size:1.02rem;font-weight:500;letter-spacing:-.008em;transition:color .3s ease}
.info__big+.info__big{margin-top:4px}
.info__big:hover{color:var(--green-d)}
.info address{color:var(--ink-2);font-size:.95rem;line-height:1.66}
.info__map{display:inline-block;margin-top:12px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d);transition:color .3s ease;}
.info__map:hover{color:var(--ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:#fff;padding:clamp(56px,7vw,84px) 0 30px}
.foot__top{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.11);
}
.foot__brand img{width:150px;filter:brightness(0) invert(1);margin-bottom:14px}
.foot__tag{font-family:var(--ff-display);font-style:italic;font-size:1.12rem;color:rgba(255,255,255,.55)}
.foot__nav{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.foot__nav a{font-size:.93rem;color:rgba(255,255,255,.62);transition:color .3s ease}
.foot__nav a:hover{color:#fff}
.foot__nav .nav__drop,.foot__nav .nav__caret{display:none}
.foot__nav .nav__item{display:contents}
.foot__bot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding-top:26px;
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.08em;
  color:rgba(255,255,255,.42);
}
.foot__legal{display:flex;gap:10px;align-items:center}
.foot__legal a{transition:color .3s ease}
.foot__legal a:hover{color:#fff}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal{padding:clamp(130px,16vh,180px) 0 clamp(70px,9vw,120px)}
.legal__head{margin-bottom:clamp(38px,5vw,64px);padding-bottom:32px;border-bottom:1px solid var(--line)}
.legal__body{max-width:74ch}
.legal__body h3{
  font-family:var(--ff-display);font-size:1.28rem;letter-spacing:-.014em;
  margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line);
}
.legal__body h4{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-d);margin:28px 0 10px;font-weight:500;
}
.legal__body p{color:var(--ink-2);margin-bottom:16px}
.legal__body ol{color:var(--ink-2);padding-left:20px;margin:0 0 16px}
.legal__body ol li{margin-bottom:8px}
.legal__body a{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.legal__body strong{color:var(--ink);font-weight:600}
.legal__back{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:24px;transition:color .3s ease;
}
.legal__back:hover{color:var(--green-d)}
.legal__back svg{width:14px;height:14px}

/* ============================================================
   PAGE HERO — every inner page opens with one
   ============================================================ */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero__wash{
  position:absolute;inset:-60% -10% auto -10%;height:170%;
  background:
    radial-gradient(42% 52% at 82% 22%,rgba(0,174,239,.13),transparent 70%),
    radial-gradient(46% 54% at 8% 12%,rgba(52,180,74,.13),transparent 72%);
  pointer-events:none;
}
.phero__in{
  position:relative;z-index:1;
  padding-top:clamp(128px,17vh,190px);
  padding-bottom:clamp(44px,6vw,74px);
}
.phero__title{
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.03;
  letter-spacing:-.028em;
  max-width:17ch;
  margin:0;
}
.phero__lede{
  max-width:56ch;margin-top:clamp(18px,2.4vw,26px);
  color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.14rem);
}

/* the section that follows the page hero already has the hero's air above it */
.phero+.sec{padding-top:clamp(40px,6vw,84px)}
.phero+.sec--src{padding-top:clamp(56px,7vw,110px)}
.phero+.sec--form,.phero+.sec--career{border-top:0}

/* ============================================================
   HOME — intro band + page index
   ============================================================ */
.home__intro{display:grid;gap:24px;justify-items:start;align-content:start}

.sec--featured{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec--featured .formulary{margin-top:clamp(28px,3vw,40px)}
.featured__all{margin-top:clamp(26px,2.8vw,38px);text-align:center}

/* the short formulations band — the counters and chips of the full list */
.sec--rxlite{background:var(--paper);border-bottom:1px solid var(--line)}
.sec--rxlite .rx__stats{margin-top:clamp(28px,3vw,40px)}
.rxlite__cats{margin-bottom:0}
.rxlite__cats .chip--rest{color:var(--ink-3);font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em}

.sec--cta{background:var(--paper)}
.actop-banner{padding:var(--sec-y) 0}
.pharma--wide{margin-top:0}
.pharma--wide h3{max-width:18ch}

/* ============================================================
   MOTION HELPERS
   ============================================================ */
.reveal-up{opacity:0;transform:translateY(22px)}
.split .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.15em;margin-bottom:-0.15em}
.split .word>span{display:inline-block}

/* ============================================================
   NAV DROPDOWN  (Products → Pharmaceuticals / Nutraceuticals)
   ============================================================ */
.nav__links{align-items:center}
.nav__item{position:relative;display:flex;align-items:center}
.nav__item>a{display:inline-flex;align-items:center;gap:5px}
.nav__caret{
  width:13px;height:13px;flex:none;
  transition:transform .35s var(--ease);
  opacity:.55;
}
.nav__item:hover>a .nav__caret,
.nav__item:focus-within>a .nav__caret,
.nav__item.is-open>a .nav__caret{transform:rotate(180deg);opacity:1}

.nav__drop{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,8px);
  width:min(660px,calc(100vw - 32px));padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 28px 60px -34px rgba(12,31,26,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .38s var(--ease),visibility .28s;
  z-index:40;
}
/* the gap between the link and the panel would otherwise drop the hover */
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__item:hover>.nav__drop,
.nav__item:focus-within>.nav__drop,
.nav__item.is-open>.nav__drop{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,14px);
}
.nav__drop a::after{display:none}
.nav__col{display:flex;flex-direction:column;min-width:0}
.nav__col+.nav__col{border-left:1px solid var(--line);padding-left:8px;margin-left:-1px}

/* the range itself, at the head of its column */
.nav__colh{
  display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
  padding:10px 11px;border-radius:11px;
  font-size:.94rem;letter-spacing:0;text-transform:none;color:var(--ink);
  transition:background .3s ease;
}
.nav__colh:hover{background:var(--mist)}
.nav__colh b{display:block;font-weight:500;line-height:1.3}
.nav__colh>span>span{display:block;font-size:.72rem;color:var(--ink-3);line-height:1.4;margin-top:2px}
.nav__colh i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);
}
.nav__colh i svg{width:17px;height:17px}

/* the categories under it — same tile format as the therapeutic-area rail */
.nav__sub{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin-top:6px;min-height:0;max-height:260px;overflow-y:auto;
}
.nav__tile{
  display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:center;
  padding:8px 9px;border-radius:10px;
  transition:background .25s ease;
}
.nav__tile:hover{background:var(--mist)}
.nav__tile i{
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);
}
.nav__tile i svg{width:14px;height:14px}
.nav__tile span{min-width:0}
.nav__tile b{
  display:block;font-weight:500;font-size:.78rem;line-height:1.22;color:var(--ink);
  letter-spacing:0;text-transform:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* the mobile menu lists the same categories under two headings, folded away
   under Products until it is tapped */
.mobile__links a.mobile__parent{align-items:center}
.mobile__parent .nav__caret{
  width:22px;height:22px;margin-left:auto;opacity:.5;
  transition:transform .35s var(--ease),opacity .3s ease;
}
.mobile__parent[aria-expanded="true"] .nav__caret{transform:rotate(180deg);opacity:1;color:var(--green-d)}
.mobile__group{
  margin:4px 0 clamp(10px,3vw,18px);
  padding-top:clamp(14px,3vw,20px);
  border-top:1px solid var(--line);
  display:none;grid-template-columns:1fr 1fr;gap:2px 22px;align-content:start;
}
.mobile__group.is-open{display:grid;animation:mobileGroupIn .38s var(--ease)}
@keyframes mobileGroupIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile__gh,
.mobile__group a.mobile__gh{
  grid-column:1/-1;display:block;
  font-family:var(--ff-mono);font-size:.62rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-d);margin:10px 0 6px;
}
.mobile__gh:first-child{margin-top:0}
.mobile__group a.mobile__all{color:var(--ink-2)}
.mobile__group a.mobile__all::after{content:" \2192"}
.mobile__group a.mobile__sub{
  grid-column:1/-1;
  display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;
  padding:7px 0;font-size:.92rem;color:var(--ink-2);line-height:1.3;
}
.mobile__group a.mobile__sub i{
  display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);
}
.mobile__group a.mobile__sub i svg{width:14px;height:14px}
.mobile__group a.mobile__sub b{font-weight:400}

/* ============================================================
   HERO — photograph with live type over it
   ============================================================ */
.hero--photo .hero__grid{grid-template-columns:1.02fr .98fr;align-items:center}
.hero__shot{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:var(--mist);
  box-shadow:0 46px 80px -50px rgba(12,31,26,.55);
  isolation:isolate;
}
.hero__shot img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/11;
  transform:scale(1.06);
  will-change:transform;
}
/* a soft wash so the overlaid line stays readable on any crop */
.hero__shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(188deg,rgba(6,50,63,.34) 0%,rgba(6,50,63,0) 42%,rgba(6,50,63,.52) 100%);
}
.hero__over{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,3vw,34px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  color:#fff;
}
.hero__stamp{
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,2vw,1.6rem);
  line-height:1.14;letter-spacing:-.02em;
  max-width:14ch;
  text-shadow:0 2px 24px rgba(6,50,63,.5);
}
.hero__stamp em{font-style:italic;color:#8DE8A4}
.hero__seal{
  flex:none;display:grid;gap:2px;justify-items:end;text-align:right;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.hero__seal b{
  font-family:var(--ff-body);font-size:1.5rem;font-weight:500;letter-spacing:-.02em;
  text-transform:none;color:#fff;line-height:1;
}

/* ============================================================
   CERTIFICATIONS BAND
   ============================================================ */
.sec--cert{padding:clamp(54px,7vw,90px) 0;background:var(--paper)}
.cert{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,64px);align-items:center;
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,3.2vw,44px);
  background:linear-gradient(140deg,var(--mist),#fff 62%);
}

/* With a photograph behind it the band goes full-bleed and the card floats on
   top, so the laboratory reads as context rather than as a picture in a slot. */
.sec--cert-shot{position:relative;background:var(--ink)}
.cert__bg{position:absolute;inset:0;overflow:hidden}
.cert__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.cert__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,30,.82),rgba(6,26,30,.72));
}
.sec--cert-shot > .wrap{position:relative}
.sec--cert-shot .cert{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(255,255,255,.93));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.cert__l{max-width:30ch}
.cert__l h2{
  font-family:var(--ff-display);font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.14;letter-spacing:-.02em;margin-bottom:10px;
}
.cert__l p{font-size:.93rem;color:var(--ink-2)}
.cert__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.cert__i{
  background:var(--paper);
  display:grid;justify-items:center;gap:9px;
  padding:22px 14px;text-align:center;
  transition:background .4s ease;
}
.cert__i:hover{background:var(--mist)}
.cert__mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(150deg,rgba(52,180,74,.15),rgba(0,174,239,.13));
  color:var(--green-d);
}
.cert__mark svg{width:22px;height:22px}
/* A real certification logo is its own artwork: give it room and no tinted
   tile behind it, and let the aspect ratio stand. */
.cert__mark--logo{
  width:auto;height:52px;max-width:110px;border-radius:0;background:none;
}
.cert__mark--logo img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
.cert__i b{font-weight:500;font-size:.92rem;letter-spacing:-.01em}
.cert__i span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cert__note{
  grid-column:1/-1;margin-top:18px;
  font-size:.82rem;color:var(--ink-3);
}

/* ============================================================
   SHOWCASE — the R&D / facility band
   ============================================================ */
.sec--shot{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.shot{
  margin:0;
  position:relative;overflow:hidden;border-radius:20px;
  background:var(--ink);
  aspect-ratio:4/5;
  isolation:isolate;
}
.shot:first-child{grid-row:span 1}
.shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.shot:hover img{transform:scale(1.05)}
.shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,50,63,0) 38%,rgba(6,50,63,.82) 100%);
}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2vw,26px);color:#fff;
}
.shot__cap b{
  display:block;font-family:var(--ff-display);font-size:clamp(1.05rem,1.6vw,1.34rem);
  font-weight:400;letter-spacing:-.015em;margin-bottom:5px;
}
.shot__cap span{font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.5;display:block}

/* ============================================================
   PRODUCTS GATEWAY — pharmaceuticals vs nutraceuticals
   ============================================================ */
.gate{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.gt{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:var(--paper);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s ease;
  min-height:100%;
}
.gt:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 44px 70px -44px rgba(12,31,26,.5);
}
/* the ratio of the Nutraceutical Range artwork, so it shows whole — its title
   and the Actop mark sit right at the top and bottom edges */
.gt__media{position:relative;aspect-ratio:638/421;overflow:hidden;background:var(--mist)}
.gt__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gt:hover .gt__media img{transform:scale(1.03)}
.gt__tint{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.72}
.gt--rx .gt__tint{background:linear-gradient(150deg,rgba(0,174,239,.5),rgba(6,50,63,.45))}
/* the range artwork is a finished, branded piece — shown at its own colours */
.gt--nx .gt__tint{display:none}
.gt__idx{
  position:absolute;top:16px;left:18px;z-index:2;
  font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.18em;
  color:rgba(255,255,255,.8);
}
.gt__body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;flex:1}
.gt__body h3{
  font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.35rem);
  letter-spacing:-.024em;line-height:1.06;margin-bottom:12px;
}
.gt__body>p{color:var(--ink-2);font-size:.98rem;max-width:44ch}
.gt__tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0}
.gt__tags span{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
  background:var(--mist);color:var(--ink-2);
}
.gt__count{
  display:flex;align-items:baseline;gap:8px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);
}
.gt__count b{font-family:var(--ff-display);font-size:2.1rem;line-height:1;letter-spacing:-.03em}
.gt__count span{font-size:.86rem;color:var(--ink-2)}
.gt__go{
  margin-top:auto;padding-top:26px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-d);
}
.gt__go svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.gt:hover .gt__go svg{transform:translateX(5px)}

/* ============================================================
   PHARMACEUTICALS — the search, the areas, the tables
   ============================================================ */
.rxtop{
  border:1px solid var(--line);border-radius:20px;
  background:var(--paper);
  padding:clamp(18px,2.4vw,28px);
  margin-bottom:clamp(26px,3.4vw,40px);
  box-shadow:0 26px 50px -42px rgba(12,31,26,.5);
}
.rxtop__search{position:relative;display:flex;align-items:center}
.rxtop__search>svg{
  position:absolute;left:clamp(16px,1.8vw,22px);
  width:20px;height:20px;color:var(--green-d);pointer-events:none;
}
.rxtop__search input{
  width:100%;
  padding:clamp(14px,1.7vw,19px) 52px clamp(14px,1.7vw,19px) clamp(46px,5vw,58px);
  font-family:inherit;font-size:clamp(.96rem,1.5vw,1.08rem);color:var(--ink);
  background:var(--mist);
  border:1px solid transparent;border-radius:13px;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
  -webkit-appearance:none;appearance:none;
}
.rxtop__search input::-webkit-search-cancel-button{display:none}
.rxtop__search input::placeholder{color:var(--ink-3)}
.rxtop__search input:focus{
  outline:none;background:#fff;
  border-color:var(--green);box-shadow:0 0 0 4px rgba(52,180,74,.13);
}
.rxtop__search .rx__clear{position:absolute;right:14px}
.rxtop__hint{margin:12px 2px 0;font-size:.83rem;color:var(--ink-3);line-height:1.5}

.areas__lab{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
/* every area on screen at once — no sideways scrolling to discover one */
.areas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:clamp(8px,1vw,12px);
  margin-bottom:clamp(32px,4vw,50px);
}
.ar{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;
  padding:13px 14px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--paper);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .3s ease,background .3s ease,opacity .3s ease;
}
.ar:hover{
  transform:translateY(-2px);border-color:var(--green);
  box-shadow:0 18px 30px -24px rgba(12,31,26,.5);
}
.ar.is-on{background:var(--deep);border-color:var(--deep)}
.ar.is-thin{opacity:.38}
.ar__ic{
  display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);
  transition:background .35s ease,color .35s ease;
}
.ar__ic svg{width:20px;height:20px}
.ar.is-on .ar__ic{background:linear-gradient(150deg,var(--green),var(--cyan));color:#fff}
.ar__t{min-width:0}
.ar__t b{
  display:block;font-weight:500;font-size:.9rem;line-height:1.22;
  letter-spacing:-.005em;transition:color .3s ease;
}
.ar__t span{
  display:block;margin-top:3px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);transition:color .3s ease;
}
.ar.is-on .ar__t b{color:#fff}
.ar.is-on .ar__t span{color:#8DE8A4}

/* the selected area's heading above the table */
.area__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.area__head h3{
  font-family:var(--ff-display);font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.024em;line-height:1.1;
}
.area__head p{font-size:.92rem;color:var(--ink-2);flex:1 1 22ch;min-width:0}
.area__n{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);
}

/* ============================================================
   NUTRACEUTICAL SWITCHER — the four boxes
   ============================================================ */
.nsw{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,18px);
  margin-bottom:clamp(34px,4.5vw,56px);
}
.nb{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:20px;
  background:var(--paper);
  padding:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),
             border-color .35s ease,background .4s ease;
}
.nb:hover{transform:translateY(-4px);box-shadow:0 30px 48px -34px rgba(12,31,26,.45)}
.nb.is-on{background:var(--deep);border-color:var(--deep)}
.nb__ic{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);transition:background .4s ease,color .4s ease;
}
.nb__ic svg{width:24px;height:24px}
.nb.is-on .nb__ic{background:linear-gradient(150deg,var(--green),var(--cyan));color:#fff}
.nb b{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.018em;line-height:1.14;
  transition:color .35s ease;
}
.nb p{font-size:.85rem;color:var(--ink-2);line-height:1.5;transition:color .35s ease}
.nb__n{
  margin-top:auto;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);transition:color .35s ease;
}
.nb.is-on b{color:#fff}
.nb.is-on p{color:rgba(255,255,255,.66)}
.nb.is-on .nb__n{color:#8DE8A4}

.npanel[hidden]{display:none}

/* ============================================================
   SPORTS NUTRITION
   ============================================================ */
.sport{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.sp{
  display:flex;flex-direction:column;cursor:pointer;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--paper);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s ease;
}
.sp:hover,.sp:focus-visible{
  transform:translateY(-5px);border-color:transparent;
  box-shadow:0 36px 56px -38px rgba(12,31,26,.45);
}
.sp:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.sp__media{position:relative;aspect-ratio:1;overflow:hidden;background:#EAF7F1}
.sp__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sp:hover .sp__media img{transform:scale(1.05)}
.sp__pack{
  position:absolute;top:12px;right:12px;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--ink);
  padding:6px 10px;border-radius:999px;
}
.sp__body{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.sp__body h3{
  font-family:var(--ff-display);font-size:clamp(1.25rem,2vw,1.6rem);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:7px;
}
.sp__sub{font-size:.84rem;color:var(--green-d);line-height:1.45;margin-bottom:14px}
.sp__blurb{font-size:.9rem;color:var(--ink-2);line-height:1.56}
.sp__more{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);
}
.sp__more svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.sp:hover .sp__more svg{transform:translateX(4px)}
/* ============================================================
   GUMMIES
   ============================================================ */
.gum__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.gum__tab{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;border-radius:999px;
  background:var(--paper);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}
.gum__tab:hover{background:var(--mist);color:var(--ink)}
.gum__tab.is-on{background:var(--ink);color:#fff;box-shadow:none}
.gum--kids .gum__tab.is-on{background:#E8752F}

/* the kids' shelf gets its own warmer skin */
.gum__hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,44px);
  align-items:center;
  border-radius:24px;overflow:hidden;
  background:linear-gradient(140deg,var(--mist),#fff 60%);
  border:1px solid var(--line);
  margin-bottom:clamp(28px,3.4vw,44px);
}
.gum--kids .gum__hero{background:linear-gradient(140deg,#FFF3E8,#FFF9F4 60%);border-color:#F6E2D2}
.gum__hero>div{padding:clamp(24px,3vw,42px)}
.gum__hero h3{
  font-family:var(--ff-display);font-size:clamp(1.5rem,2.7vw,2.2rem);
  letter-spacing:-.024em;line-height:1.08;margin-bottom:12px;
}
.gum__hero p{color:var(--ink-2);font-size:.96rem;max-width:46ch}
.gum__hero img{width:100%;height:100%;object-fit:cover;min-height:230px}
.gum__hero figure{margin:0;height:100%}

.gumt{width:100%;border-collapse:collapse;font-size:.9rem}
.gumt__scroll{
  overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);
}
.gumt th{
  text-align:left;font-weight:500;font-size:.72rem;
  font-family:var(--ff-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding:15px 16px;border-bottom:1px solid var(--line);
  background:var(--mist);white-space:nowrap;
}
.gumt td{padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.gumt tr:last-child td{border-bottom:0}
.gumt tbody tr{transition:background .3s ease}
.gumt tbody tr:hover{background:var(--mist)}
.gumt tr[hidden]{display:none}
.gumt__n{font-weight:500;letter-spacing:-.01em;min-width:11ch}
.gumt__c{color:var(--ink-2);font-size:.84rem;line-height:1.5;min-width:22ch}
.gumt__c i{font-style:normal;color:var(--ink-3)}
.gumt__meta{white-space:nowrap;font-size:.84rem;color:var(--ink-2)}
.gumt__tag{
  display:inline-block;
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--mist);color:var(--ink-2);
  white-space:nowrap;
}
.gumt__tag--kids{background:#FFEFE2;color:#B4531A}
.gumt__tag--sugar{background:#EAF7EE;color:var(--green-d)}

/* ============================================================
   SPECIAL PRODUCTS
   ============================================================ */
.spx{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(12px,1.4vw,20px)}
.spg{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--paper);cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s ease;
}
.spg:hover,.spg:focus-visible{transform:translateY(-4px);border-color:transparent;box-shadow:0 32px 50px -36px rgba(12,31,26,.45)}
.spg:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.spg__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.spg__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.spg:hover .spg__media img{transform:scale(1.06)}
.spg__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.spg__body h3{
  font-family:var(--ff-display);font-size:1.18rem;letter-spacing:-.018em;
  line-height:1.16;margin-bottom:12px;
}
/* the count rides the image, so every card's text starts on the same line */
.spg__n{
  position:absolute;left:12px;bottom:12px;z-index:2;
  padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);
}
.spg__list{display:grid;gap:8px}
.spg__list li{font-size:.85rem;line-height:1.38}
.spg__list b{font-weight:500;display:block;letter-spacing:-.01em}
.spg__list span{color:var(--ink-3);font-size:.76rem;display:block;margin-top:2px}
.spg__rest{
  margin-top:9px;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
/* pinned to the foot so the CTA lines up across a row of uneven cards */
.spg__go{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);
}
.spg__go svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.spg:hover .spg__go svg{transform:translateX(4px)}

/* ============================================================
   VALUE ICONS — the client's own line art
   ============================================================ */
.val__ico img{
  width:26px;height:26px;
  filter:invert(38%) sepia(64%) saturate(520%) hue-rotate(88deg) brightness(92%) contrast(90%);
  transition:filter .45s ease;
}
.val:hover .val__ico img{filter:brightness(0) invert(1)}

/* ============================================================
   RX TABLE — the extra subgroup / pack columns
   ============================================================ */
.rxt__sub{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.rxt__pack{color:var(--ink-2);white-space:nowrap;font-size:.85rem}
.rxg__sub{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-d);
}

/* ============================================================
   CONTACT — the three copy blocks the client supplied
   ============================================================ */
.cblocks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(38px,5vw,64px)}
.cbk{
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);
  background:var(--paper);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s ease;
}
.cbk:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 32px 50px -36px rgba(12,31,26,.45)}
.cbk__ic{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(150deg,rgba(52,180,74,.16),rgba(0,174,239,.14));
  color:var(--green-d);margin-bottom:20px;
}
.cbk__ic svg{width:22px;height:22px}
.cbk h3{
  font-family:var(--ff-display);font-size:1.3rem;letter-spacing:-.018em;
  line-height:1.14;margin-bottom:10px;
}
.cbk p{font-size:.92rem;color:var(--ink-2);line-height:1.58}
.cbk a.cbk__go{
  margin-top:18px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);
}
.cbk a.cbk__go svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.cbk a.cbk__go:hover svg{transform:translateX(4px)}

/* ============================================================
   RESPONSIVE — v2 components
   ============================================================ */
@media(max-width:1080px){
.nav__drop{width:min(560px,calc(100vw - 24px))}
}
@media(max-width:1180px){
  .sport{grid-template-columns:repeat(2,1fr)}
  .nsw{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .cert{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .shots .shot:first-child{grid-column:1/-1;aspect-ratio:16/9}
  .cblocks{grid-template-columns:1fr}
}
@media(max-width:960px){
  .gate{grid-template-columns:1fr}
  .gum__hero{grid-template-columns:1fr}
  .gum__hero figure{order:-1}
  .gum__hero img{min-height:180px;max-height:240px}
  .hero--photo .hero__grid{grid-template-columns:1fr}
  .hero__shot img{aspect-ratio:16/10}
}
@media(max-width:760px){
  .sport{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .shots .shot:first-child{aspect-ratio:4/5}
  .area__head{gap:8px}
}
@media(max-width:460px){
  .nsw{grid-template-columns:1fr}
  .spx{grid-template-columns:1fr}
  .hero__over{flex-direction:column;align-items:flex-start;gap:12px}
  .hero__seal{justify-items:start;text-align:left}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
.nav__drop{width:min(560px,calc(100vw - 24px))}
}
@media(max-width:1180px){
  .formulary{grid-template-columns:repeat(3,1fr)}
  .rail{display:none}
}
@media(max-width:1000px){
  .pmodal__panel{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:92vh}
  .pmodal__media{aspect-ratio:16/9;padding:26px;height:auto;overflow:visible}
  .rxg__head{grid-template-columns:auto 1fr auto;row-gap:6px}
  .rxg__n{grid-column:2/3;grid-row:2}
}
@media(max-width:960px){
  .nav__in{grid-template-columns:1fr auto auto}
  .nav__links{display:none}
  .nav__burger{grid-column:3}
  .phero__title{max-width:none}
  .nav__burger{display:block}
  .hero{min-height:auto;padding-bottom:0}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__grid--map{grid-template-columns:1fr}
  .hero__copy{padding-bottom:0}
  /* absolute-positioned crossfade needs a fixed-height parent; on mobile the
     hero collapses to content height, so slides stack and swap with display
     instead of fading in place */
  .hero__panels{min-height:0}
  .hero__panel{position:static;display:none;opacity:1;visibility:visible;pointer-events:auto}
  .hero__panel.is-active{display:flex}
  .hero__dots{position:static;transform:none;margin:20px 0 0;justify-content:center}
  .shelf{height:min(58vh,440px)}
  .about__grid,.vm,.career,.contact,.head--row{grid-template-columns:1fr}
  .head--row{align-items:start;gap:20px}
  .facts{grid-template-columns:1fr 1fr}
  .rx__stats{grid-template-columns:1fr}
  .rx__bar{position:static;background:none;padding:0;margin-bottom:16px}
  .career__offices{grid-template-columns:1fr}
  .about__media{min-height:clamp(330px,66vw,460px)}
  .values{grid-template-columns:repeat(2,1fr)}
  /* stacked: the countries in a 2 × 2 grid, the hub under them and the
     partners in a grid under that — main.js runs the lines top to bottom,
     down the gap between the two columns where a card is in the way */
  .sec--src{padding:clamp(56px,7vw,88px) 0}
  .prov{grid-template-columns:minmax(0,1fr);gap:clamp(44px,9vw,68px)}
  .prov__mid{min-height:0}
  /* the captions sit where the lines cross, so they become chips the lines
     pass behind */
  .prov__cap{
    display:table;margin:0 auto 16px;padding:5px 12px;border-radius:99px;
    position:relative;z-index:1;text-align:center;
    background:var(--deep);border:1px solid rgba(255,255,255,.12);
  }
  .prov__col ul{grid-template-columns:1fr 1fr;gap:12px 22px}
  /* an odd card out closes the grid centred under the gap */
  .prov__col li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 11px)}
  .prov__col--out{text-align:left}
  .prov__col li:hover,
  .prov__col--out li:hover{transform:translateY(-2px)}
  .sec--src .h2{max-width:none}
}
@media(max-width:900px){
  .formulary{grid-template-columns:repeat(2,1fr)}
}@media(max-width:720px){
body{font-size:16px}
.values{grid-template-columns:1fr}
.form{grid-template-columns:1fr}
.foot__top{flex-direction:column}
.pharma{flex-direction:column;align-items:flex-start}
.pmspec{grid-template-columns:1fr}
.rx__act{flex:1;justify-content:center}
.pmodal__foot{flex-direction:column;align-items:stretch}

/* a full-screen dialog eats a phone, so the panel becomes a bottom sheet */
.pmodal{padding:0;place-items:end stretch}
.pmodal__panel{
  width:100%;max-height:88svh;
  border-radius:22px 22px 0 0;
  grid-template-rows:auto auto minmax(0,1fr);
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.32,.72,0,1);
}
.pmodal.is-open .pmodal__panel{transform:none}
.pmodal__grip{
  display:block;width:100%;padding:11px 0 4px;
  background:var(--paper);position:relative;z-index:3;
}
.pmodal__grip span{
  display:block;width:42px;height:4px;margin:0 auto;border-radius:99px;
  background:var(--line);
}
.pmodal__x{top:8px;right:10px;width:34px;height:34px}
.pmodal__media{aspect-ratio:16/10;padding:14px 26px 4px;background:none}
.pmodal__body{padding:18px clamp(18px,5vw,26px) calc(22px + env(safe-area-inset-bottom))}
.pmodal__title{margin-top:10px}
}
@media(max-width:620px){
.mobile__group{grid-template-columns:1fr}
.areas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  /* the grids stay two across on a phone, so the cards tighten up instead */
  .prov__col ul{gap:10px 18px}
  .prov__col li{padding:11px 12px}
  .prov__col li:last-child:nth-child(odd){width:calc(50% - 9px)}
  .prov__col--src li{grid-template-columns:30px 1fr;column-gap:10px}
  .prov__col--src i{width:30px;height:30px;border-radius:9px;font-size:.58rem}
  .prov__col b{font-size:.92rem}
  .prov__col span{font-size:.54rem;letter-spacing:.06em}
}
@media(max-width:460px){
  .formulary{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr}
  .shelf__col--b{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .facts{grid-template-columns:1fr}
  .about__badge{padding:13px 15px}
  .about__badge b{font-size:1.7rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal-up{opacity:1;transform:none}
  .preloader{display:none}
}

/* ============================================================
   CONNECT — the two offices on the map, under the form
   ============================================================ */
.maps{
  margin-top:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,30px);
  align-items:start;
}
.maps__one{
  margin:0;
  background:var(--paper);
  border-radius:var(--r,18px);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);
}
.maps__one iframe{
  display:block;width:100%;height:clamp(300px,38vh,420px);
  border:0;filter:saturate(.92);
}
.maps__one figcaption{padding:20px clamp(18px,2vw,26px) 22px}
.maps__one figcaption .eyebrow{margin:0 0 8px}
.maps__one address{
  font-style:normal;color:var(--ink-2);font-size:.94rem;line-height:1.55;
  margin:0 0 12px;
}
/* one row on desktop; they stack only when there is no room left for two */
@media(max-width:820px){
  .maps{grid-template-columns:1fr}
  .maps__one iframe{height:clamp(260px,44vw,340px)}
}

/* ============================================================
   HERO — two artworks cross-fading behind the type
   ============================================================
   Both artworks are light photographs that carry their subject on the right
   and were supplied with deliberate empty space on the left. The copy is set
   into that empty space, so the hero runs light — dark ink on paper, not white
   on a dark veil — and the nav over it keeps its normal dark links.

   The height is capped against the viewport WIDTH as well as its height
   (54vw ≈ the artwork's own 1.94:1 proportion) so `cover` crops the top and
   bottom rather than the sides. That is what keeps the left-hand empty space
   on screen at every desktop width instead of cropping it away.
   ============================================================ */
.hero--bg{
  color:var(--ink);
  padding-top:clamp(96px,11.5vh,132px);
  min-height:min(88svh,54vw);
}
.hero--bg .hero__wash{display:none}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#EEF3F1}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.3s ease,transform 9s linear;
}
.hero__slide.is-on{opacity:1;transform:scale(1)}
/* the copy sits on the left, so the paper wash is heaviest there and has
   cleared completely well before the faces and the seals on the right */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:background .9s ease;
  background:
    linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.95) 28%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.32) 55%,rgba(255,255,255,0) 68%),
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 24%);
}
/* The map artwork is near-white to begin with, so it needs far less washing.
   Its wash also has to be fully clear of the halfway mark: the map is laid out
   so North America — and the USA and Canada pins on it — starts just past where
   the copy ends, and any wash left over the pins greys the red straight out. */
.hero[data-hero-slide="1"] .hero__veil{
  background:
    linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 22%,rgba(255,255,255,.52) 34%,rgba(255,255,255,.18) 44%,rgba(255,255,255,0) 52%),
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 22%);
}
/* both copy blocks share one grid cell and cross-fade with the artwork behind */
.hero--bg .hero__grid{grid-template-columns:minmax(0,1fr);align-items:center;position:relative;z-index:2}
.hero--bg .hero__copy{
  grid-area:1/1;
  max-width:min(560px,47%);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),visibility .8s;
  pointer-events:none;
}
.hero--bg .hero__copy.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero--bg .eyebrow{color:var(--green-d)}
.hero--bg .hero__lede{color:var(--ink-2);max-width:42ch;margin-bottom:24px}
.hero--bg .hero__title{
  color:var(--ink);
  font-size:clamp(2.3rem,4.5vw,3.7rem);
  text-shadow:0 2px 26px rgba(255,255,255,.85);
}
.hero--bg .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(15,42,36,.24)}
.hero--bg .btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.hero--bg .hero__seal{
  margin-top:clamp(16px,2.4vh,30px);
  display:inline-flex;align-items:baseline;justify-items:start;text-align:left;gap:10px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
}
.hero--bg .hero__seal b{
  font-family:var(--ff-body);font-size:1.7rem;font-weight:500;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);line-height:1;
}
/* the dots that step between the two artworks */
.hero--bg .hero__dots{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(64px,9vh,96px);z-index:3;
  display:flex;gap:9px;
}
.hero--bg .hero__dots button{
  width:9px;height:9px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(15,42,36,.24);
  transition:background .3s ease,transform .3s ease,width .3s ease;
}
.hero--bg .hero__dots button:hover{background:rgba(15,42,36,.44)}
.hero--bg .hero__dots button.is-on{background:var(--green-d);width:26px;border-radius:5px}
.hero--bg .ticker{background:rgba(255,255,255,.72);border-top-color:rgba(15,42,36,.12);color:var(--green-d)}
.hero--bg .ticker__row i{color:rgba(15,42,36,.28)}

@media(max-width:820px){
  /* Portrait viewports are far narrower than the artwork, so `cover` has to
     crop the sides and the left-hand empty space goes with it. The subject is
     held on the right and the copy gets a near-solid paper wash under it
     instead, so nothing is ever set over a face or a seal. */
  /* Phones: the portrait artwork fills the hero at its own 2:3 shape, so
     nothing in it is cropped. The copy is cut down to the title at the top
     (over the pale sky of both artworks) and the buttons at the bottom, which
     leaves the middle of the picture clear. */
  .hero--bg{--hh:min(150vw,92svh);min-height:0;padding-top:0}
  .hero__bg,
  .hero--bg .hero__veil{inset:0 0 auto 0;height:var(--hh)}
  .hero--bg .hero__veil,
  .hero[data-hero-slide] .hero__veil{
    background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 28%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 78%,rgba(255,255,255,.35) 100%);
  }
  .hero__slide{background-position:center top}
  /* the first two slides ship dedicated portrait artwork for phones */
  .hero__slide[data-slide="0"],
  .hero__slide[data-slide="1"]{background-image:var(--hero-mobile-bg) !important}
  /* the third slide is dropped from the phone rotation entirely */
  .hero__slide.hero__slide--mobile-hide,
  .hero__copy.hero__slide--mobile-hide,
  .hero__dots button.hero__slide--mobile-hide{display:none}

  .hero--bg .hero__grid{
    flex:none;height:var(--hh);gap:0;align-items:stretch;
    padding-top:clamp(92px,24vw,112px);padding-bottom:48px;
  }
  .hero--bg .hero__copy{max-width:100%;padding-bottom:0;display:flex;flex-direction:column}
  .hero--bg .eyebrow{margin-bottom:10px}
  .hero--bg .hero__title{font-size:clamp(2rem,9.2vw,2.7rem);margin-bottom:0}
  .hero--bg .hero__lede,
  .hero--bg .hero__seal{display:none}
  .hero--bg .hero__actions{margin-top:auto;flex-wrap:nowrap;gap:10px}
  .hero--bg .hero__actions .btn{flex:1 1 0;min-width:0;padding:14px 10px;font-size:.9rem;white-space:nowrap;justify-content:center}
  .hero--bg .btn--ghost{background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px rgba(15,42,36,.18)}
  .hero--bg .hero__dots{top:calc(var(--hh) - 28px);bottom:auto}
}

/* ============================================================
   Nav search
   ============================================================ */
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__btn{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__btn:hover{background:rgba(255,255,255,.16)}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__field{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__field input{color:#fff}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__field input::placeholder{color:rgba(255,255,255,.62)}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__ic,
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq__x{color:rgba(255,255,255,.75)}
/* ============================================================
   NAV SEARCH — one field over every range
   ============================================================ */
.navq{grid-column:3;justify-self:end;position:relative;display:flex;align-items:center}
.navq__btn{
  display:none;width:38px;height:38px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);
  place-items:center;transition:background .3s ease,color .3s ease;
}
.navq__btn svg{width:17px;height:17px}
.navq__field{
  position:relative;display:flex;align-items:center;
  width:clamp(180px,15vw,236px);
  background:var(--mist);border-radius:99px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:width .45s var(--ease),background .3s ease,box-shadow .3s ease;
}
.navq__ic{
  position:absolute;left:13px;width:16px;height:16px;
  color:var(--ink-3);pointer-events:none;
}
.navq__field input{
  width:100%;padding:9px 32px 9px 36px;
  font-family:inherit;font-size:.85rem;color:var(--ink);
  background:none;border:0;border-radius:99px;
  -webkit-appearance:none;appearance:none;
}
.navq__field input::-webkit-search-cancel-button{display:none}
.navq__field input::placeholder{color:var(--ink-3)}
.navq__field input:focus{outline:none}
.navq.is-open .navq__field,
.navq__field:focus-within{
  width:clamp(230px,22vw,320px);
  background:#fff;box-shadow:inset 0 0 0 1px var(--green),0 0 0 3px rgba(52,180,74,.12);
}
.navq__x{
  position:absolute;right:8px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);
}
.navq__x svg{width:12px;height:12px}
.navq__x:hover{background:var(--line);color:var(--ink)}
.navq__out{
  position:absolute;top:calc(100% + 12px);right:0;
  width:min(400px,calc(100vw - 32px));
  max-height:min(70vh,460px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 34px 70px -34px rgba(12,31,26,.55);
  z-index:60;
}
.navq__out[hidden]{display:none}
.navq__hit{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:9px 12px;border-radius:11px;
  text-transform:none;letter-spacing:0;
  transition:background .2s ease;
}
.navq__hit::after{display:none}
.navq__hit:hover,.navq__hit.is-at{background:var(--mist)}
.navq__n{font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.3;min-width:0}
.navq__n mark{background:rgba(52,180,74,.22);color:inherit;border-radius:3px;padding:0 1px}
.navq__s{
  grid-column:1;font-size:.76rem;color:var(--ink-3);line-height:1.35;min-width:0;
}
.navq__k{
  grid-column:2;grid-row:1/3;align-self:center;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-d);text-align:right;max-width:11ch;line-height:1.3;
}
.navq__none{padding:14px 12px;font-size:.86rem;color:var(--ink-3)}
.navq__none a{color:var(--green-d);text-decoration:underline}
@media(max-width:960px){
.navq{position:static;grid-column:2;justify-self:end;margin-right:6px}
.navq__btn{display:grid}
/* the bar is too narrow to anchor the panel to the button, so both the
     field and the results span the page gutters instead */
  .navq__field{
    position:fixed;top:calc(100% + 10px);left:var(--pad);right:var(--pad);
    width:auto;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease,visibility .25s,transform .35s var(--ease);
    transform:translateY(-6px);
  }
.nav .navq__field{position:absolute;top:100%;margin-top:10px}
.navq.is-open .navq__field{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;width:auto;
  }
.navq.is-open .navq__field,
  .navq .navq__field:focus-within{box-shadow:inset 0 0 0 1px var(--green),0 0 0 3px rgba(52,180,74,.12)}
.navq__out{
    position:absolute;top:100%;margin-top:62px;
    left:var(--pad);right:var(--pad);width:auto;
  }
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq.is-open .navq__field{
    background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  }
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq.is-open .navq__field input{color:var(--ink)}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq.is-open .navq__field input::placeholder{color:var(--ink-3)}
body[data-page="home"][data-hero="dark"] .nav:not(.is-stuck) .navq.is-open .navq__ic{color:var(--ink-3)}
}