/* VitalDure Trinidad and Tobago
   Hand-written. Not generated by a build script, so edit this file directly.

   Colour comes off the real products: the Xtreme bottle is black with an
   electric blue label, the C-1000 is black with orange. --acc is set per page
   in a <style> block and everything accented reads off it. */

:root{
  --ink:#0B0E12;
  --ink2:#141921;
  --ink3:#1D242E;
  --line:#2A333F;
  --fg:#EEF2F6;
  --fg2:#A3B0BF;
  --acc:#00A6E6;
  --accd:#004E6E;
  --yellow:#FFD100;
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
  --wrap:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font:400 17px/1.65 var(--sans);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc)}
h1,h2,h3,h4{line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(38px,6vw,68px);font-weight:800}
h2{font-size:clamp(26px,3.4vw,40px);font-weight:800}
h3{font-size:22px;font-weight:800}
p{margin:0 0 1.1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--yellow);color:#000;padding:10px 16px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- draft banner, stripped by build-deploy.py --live ---------- */
.draftnote{
  background:var(--yellow);color:#000;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;font-size:12px;text-align:center;padding:9px 16px;
}

/* ---------- top strip + header ---------- */
.strip{
  background:var(--accd);display:flex;justify-content:center;gap:24px;
  align-items:center;padding:8px 16px;font-size:13px;flex-wrap:wrap;
}
.strip-t{color:#CFE9F6}
.strip-p{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}

.hdr{
  display:flex;align-items:center;gap:22px;
  max-width:var(--wrap);margin:0 auto;padding:16px 24px;
  position:relative;flex-wrap:wrap;
}
.brand{text-decoration:none;color:var(--fg);display:block;margin-right:auto}
.bm{
  display:block;font-size:25px;font-weight:300;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;
}
.bm b{font-weight:800;color:var(--acc)}
.bs{
  display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg2);margin-top:5px;
}
.nav{display:flex;gap:22px;align-items:center}
.nav a{
  color:var(--fg2);text-decoration:none;font-size:14px;font-weight:600;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--fg)}
.nav a[aria-current]{color:var(--fg);border-bottom-color:var(--acc)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--fg);margin:5px 0}

.cta{
  background:var(--yellow);color:#000;text-decoration:none;font-weight:800;
  font-size:14px;padding:11px 20px;border-radius:14px;white-space:nowrap;
}
.cta:hover{filter:brightness(1.08)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:800;font-size:16px;
  padding:15px 28px;border-radius:16px;margin:0 10px 10px 0;
}
.btn-1{background:var(--yellow);color:#000}
.btn-2{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--line)}
.btn-2:hover{box-shadow:inset 0 0 0 2px var(--acc);color:var(--acc)}
.btn-1:hover{filter:brightness(1.08)}
.lnk{
  color:var(--acc);text-decoration:none;font-weight:800;font-size:15px;
  display:inline-block;
}
.lnk span{transition:transform .15s}
.lnk:hover span{display:inline-block;transform:translateX(4px)}

/* ---------- full-bleed photographic hero ----------
   The single biggest change from the first build. Every reference site
   (Onnit, Ghost, LMNT, Momentous) opens on a real photograph at full bleed,
   never a pack shot floating on a gradient, which is what this used to be.

   The photographs are prompted with an empty left third, so the scrim below
   is doing far less work than a scrim usually has to. Keep it that way: if a
   replacement photo has a busy left side, the headline stops being readable
   and no amount of gradient rescues it at 375px. */
.shot{
  position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--ink);
}
.shot-bg{position:absolute;inset:0;z-index:0}
.shot-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center right;
}
/* Per-frame crop anchor. "center right" is right for hero-pharmacy and
   hero-men, whose subjects sit hard right in a 21:9 source. hero-xtreme's man
   is nearer the middle, so the same anchor drops him behind the headline.
   Measured at 1009px wide: a 2000x857 source covers a 1.56:1 box at 1514px
   rendered, so 505px is cropped and the anchor decides which 505. At 100% his
   head lands at 26-56% of the box, straight under the h1. At 22% it lands at
   66-96%, clear of the text block, which ends at 68%. */
.shot-x .shot-bg img{object-position:22% 50%}
/* Two scrims, not one. The horizontal keeps the headline legible over the
   photograph; the vertical stops the type colliding with the section below. */
.shot::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,14,18,.94) 30%,
                    rgba(11,14,18,.55) 55%, rgba(11,14,18,.10) 100%),
    linear-gradient(180deg, rgba(11,14,18,.35) 0%, transparent 30%,
                    rgba(11,14,18,.55) 100%);
}
.shot-in{
  position:relative;z-index:2;
  max-width:var(--wrap);margin:0 auto;padding:96px 24px 88px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;
  min-height:520px;
}
/* Width is set in px, not ch. A ch max-width here is computed against the
   PARENT's 17px font, which throttled a 68px headline to four ragged lines. */
.shot-t{max-width:660px}
.shot-t .lede{max-width:50ch}
.shot h1{
  text-shadow:0 2px 30px rgba(0,0,0,.55);text-wrap:balance;
  text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(44px,7.2vw,86px);
}
/* The real bottle sits in front of the generated photograph. That order is
   the whole point: the environment may be synthetic, the product never is. */
.shot-bottle img{
  max-height:400px;width:auto;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.75));
}
.spec{
  font-size:20px;font-weight:800;color:var(--acc);
  letter-spacing:-.01em;margin-bottom:.6em;
}
/* The product name, demoted from h1 now that the h1 is the punch line. Still
   the most prominent thing after it, and the <title> and schema keep the full
   name, so nothing is lost for search. */
.pname{
  font-size:24px;font-weight:800;color:var(--fg);
  letter-spacing:-.01em;margin-bottom:.35em;line-height:1.15;
}
/* Both real bottles standing in the generated light pool. This is what makes
   the home hero a product shot: the stage is synthetic, the products are not. */
/* Side by side, equal height, NOT overlapping. Two earlier versions were
   wrong here and Darryl called both: first C-1000 was smaller and tucked
   behind Xtreme, which read as a sidekick; then they overlapped, which still
   put one in front of the other. Two products, two equal bottles, clear air
   between them. Do not reintroduce a negative margin. */
.shot-duo{display:flex;align-items:flex-end;justify-content:center;gap:30px}
.shot-duo img{filter:drop-shadow(0 30px 42px rgba(0,0,0,.85))}
.duo-a,.duo-b{max-height:370px;width:auto}

.hero-in{
  max-width:var(--wrap);margin:0 auto;padding:64px 24px 56px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.eyebrow{
  color:var(--yellow);font-weight:800;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:14px;
}
.lede{color:var(--fg2);font-size:19px;max-width:56ch}
.hero-i img{margin:0 auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.btns{margin-top:26px}

/* ---------- bands ---------- */
.band{background:var(--acc);color:#00232F;padding:34px 0}
.band.tall{padding:56px 0}
.band h1,.band h2{margin:0;text-transform:uppercase;font-weight:800}
.band-sub{margin:10px 0 0;font-weight:600;color:#00323F}

/* ---------- product cards on home ---------- */
.grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  padding-top:48px;padding-bottom:48px;
}
.pcard{
  background:var(--ink2);border:1px solid var(--line);border-radius:22px;
  padding:28px;display:grid;grid-template-columns:auto 1fr;gap:24px;
  border-top:4px solid var(--acc);
}
.pcard-i img{max-height:250px;width:auto}

/* Stands in for a product image the site is not allowed to publish. See
   bottle_pic() in build-site.py and the publishable_render flag in
   product_data.py. Sized to the bottle it replaces (196x291 at up to 250px
   tall) so swapping a real render back in does not move the card. */
.btile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;width:172px;height:250px;border-radius:18px;
  background:linear-gradient(160deg,var(--acc) 0%,var(--accd) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 34px rgba(0,0,0,.42);
  padding:18px;text-align:center;
}
.btile-m{
  font-weight:800;font-size:23px;letter-spacing:-.02em;line-height:1;
  color:#fff;text-transform:lowercase;
}
.btile-m b{font-weight:800;text-transform:uppercase}
.btile-s{
  font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.86);line-height:1.3;
}
.cross .btile{width:130px;height:190px}
.cross .btile-m{font-size:19px}
.kick{
  color:var(--acc);font-weight:800;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:8px;
}
.pcard h3{font-size:24px}
.pcard p{color:var(--fg2);font-size:15px}
.ticks{list-style:none;padding:0;margin:0 0 18px}
.ticks li{
  position:relative;padding-left:26px;margin-bottom:9px;font-size:15px;color:var(--fg);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;
  border-left:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);
  transform:rotate(-45deg);
}
.ticks.big li{font-size:17px;margin-bottom:12px}

/* ---------- split ---------- */
.split{background:var(--ink2);border-top:1px solid var(--line);padding:56px 0}
.split-in{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.split p{color:var(--fg2)}

/* ---------- product page ---------- */
.crumb{background:var(--ink2);border-bottom:1px solid var(--line);font-size:13px}
.crumb .wrap{padding-top:12px;padding-bottom:12px;color:var(--fg2)}
.crumb a{color:var(--fg2);text-decoration:none}
.crumb a:hover{color:var(--acc)}
.crumb span{margin:0 8px;color:var(--line)}

.phero .shot-in{min-height:560px}

/* The three cleared claims, lifted out of the hero onto their own band.
   LMNT's move: one declarative row, nothing competing with it. In the hero
   they were fighting the photograph and the bottle for attention. */
.claims{background:var(--ink2);border-bottom:1px solid var(--line)}
.claims .wrap{padding-top:26px;padding-bottom:26px}
.claims .ticks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px 32px;margin:0;
}
.claims .ticks li{margin:0}

.facts{background:var(--ink2);border-bottom:1px solid var(--line)}
.facts-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding-top:0;padding-bottom:0;
}
.facts-in>div{padding:24px 8px;text-align:center}
.facts dt{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);
  margin-bottom:6px;
}
.facts dd{margin:0;font-size:19px;font-weight:800;color:var(--fg)}

.body{padding-top:52px;padding-bottom:52px;max-width:820px}
.body h2{margin-top:1.6em}
.body h2:first-child{margin-top:0}
.body p{color:var(--fg2)}
.body em{color:var(--fg);font-style:italic}

.warn{
  background:rgba(255,209,0,.09);border-left:4px solid var(--yellow);
  padding:16px 20px;color:var(--fg);border-radius:0 10px 10px 0;
}
.notice{
  background:var(--ink2);border:1px solid var(--line);border-left:4px solid var(--acc);
  border-radius:0 16px 16px 0;padding:24px 28px;margin-bottom:2em;
}
.notice h2{margin-top:0;font-size:24px}
.notice p{margin-bottom:0}

/* Placeholder box. Deliberately loud: build-deploy.py --live refuses to ship
   while any .tbd survives, and it should be impossible to miss in review. */
.tbd{
  display:inline-block;background:rgba(255,209,0,.14);color:var(--yellow);
  border:2px dashed var(--yellow);border-radius:8px;padding:10px 16px;
  font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.panel{padding-bottom:52px;max-width:820px}
.panel-note{color:var(--fg2);font-size:15px;margin-top:14px}

.steps{background:var(--ink2);border-top:1px solid var(--line);padding:52px 0}
.steps-l{counter-reset:s;list-style:none;padding:0;margin:0 0 26px;max-width:760px}
.steps-l li{
  counter-increment:s;position:relative;padding-left:56px;margin-bottom:20px;
  color:var(--fg2);
}
.steps-l li b{color:var(--fg)}
.steps-l li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;background:var(--acc);color:#00232F;
  font-weight:800;display:grid;place-items:center;
}

.faq{padding-bottom:56px;max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{
  cursor:pointer;font-weight:700;font-size:18px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:800;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--fg2);margin:14px 0 0}

.cross{background:var(--ink2);border-top:1px solid var(--line);padding:44px 0}
.cross-in{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.cross img{max-height:190px;width:auto}
.cross h2{font-size:28px}
.cross p{color:var(--fg2)}

/* ---------- contact cards ---------- */
.cards3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-top:48px;padding-bottom:8px;
}
.ccard{
  background:var(--ink2);border:1px solid var(--line);border-radius:20px;
  padding:26px;border-top:4px solid var(--acc);
}
.ccard h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.big-l{font-size:21px;font-weight:800;color:var(--fg);line-height:1.35}
.big-l a{color:var(--fg);text-decoration:none}
.big-l a:hover{color:var(--acc)}
.ccard p:last-child{color:var(--fg2);font-size:15px;margin-bottom:0}

/* ---------- footer ---------- */
.ftr{background:#070A0D;border-top:1px solid var(--line);margin-top:8px}
.ftr-in{
  max-width:var(--wrap);margin:0 auto;padding:48px 24px 32px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.ftr h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.ftr p{color:var(--fg2);font-size:14.5px}
.ftr a{color:var(--fg2);text-decoration:none}
.ftr a:hover{color:var(--acc)}
.ftr-note{font-size:13px;margin-top:14px;max-width:38ch}
.ftr-nav{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.ftr-b{border-top:1px solid var(--line)}
.ftr-b p{
  max-width:var(--wrap);margin:0 auto;padding:18px 24px 0;
  font-size:12.5px;color:#6B7887;
}
.ftr-b .cp{padding-bottom:24px;padding-top:8px}

/* ---------- mobile ----------
   Learned on the XL Health build: below 720px every nav link had been
   display:none, which made whole pages unreachable on a phone. The burger
   here is the fix, not a nicety. Tap targets stay at 44px. */
@media (max-width:900px){
  .hero-in,.phero-in,.split-in,.grid2,.cards3{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr}
  .facts-in{grid-template-columns:repeat(2,1fr)}
  .hero-i{order:-1}
  .hero-i img,.phero-i img{max-height:340px;width:auto}
}
@media (max-width:720px){
  body{font-size:16px}
  /* Header is deliberately ONE row on a phone: brand, CTA, burger. The XL
     Health build lost 572px of the screen to chrome before any content, and
     the fix there was the same. Do not let the brand claim a row of its own. */
  .hdr{padding:12px 18px;gap:10px;flex-wrap:wrap}
  .brand{flex:1 1 auto;min-width:0}
  .bm{font-size:21px}
  .bs{font-size:8.5px;letter-spacing:.2em}
  /* 44px minimum on every control. Measured, not assumed: the XL Health audit
     found 366 targets under 44px and it took three passes to clear them. */
  .burger{
    display:block;order:3;width:44px;height:44px;padding:10px;
    margin:0 -10px 0 0;
  }
  .cta{order:2;padding:13px 16px;font-size:13px;min-height:44px;line-height:18px}
  .strip-p{padding:6px 4px;min-height:32px;display:inline-flex;align-items:center}
  .lnk{padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
  .ftr-nav{gap:0}
  .ftr-nav a{min-height:44px;display:flex;align-items:center}
  /* Phone and email in the footer are tapped, not read. Give them a real box. */
  .ftr-c p a[href^="tel:"],.ftr-c p a[href^="mailto:"]{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .nav{
    order:4;display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:4px;
  }
  .nav.open{display:flex}
  /* The bottle must not push the headline off the first screen. */
  .hero-i img,.phero-i img{max-height:230px}
  .nav a{
    width:100%;padding:14px 0;min-height:44px;display:flex;align-items:center;
    border-bottom:1px solid var(--line);
  }
  .nav a[aria-current]{border-bottom-color:var(--acc)}
  .hero-in{padding:34px 18px 40px}
  .wrap{padding:0 18px}
  .pcard{grid-template-columns:1fr;text-align:center}
  .pcard-i img{margin:0 auto}
  .ticks li{text-align:left}
  .strip{gap:10px;font-size:12px}
  .ftr-in{grid-template-columns:1fr;gap:28px}
  .cross-in{flex-direction:column;text-align:center}
}

/* ---------- hero, mobile ----------
   Appended after the mobile block above, so these win. On a phone the
   photograph cannot sit behind the type and stay readable, so it becomes a
   band above the text instead of a background. */
@media (max-width:900px){
  .shot-in{grid-template-columns:1fr;min-height:0;padding:56px 24px 48px}
  /* The bottles stay on tablet and phone. An earlier pass hid them below
     900px, which left the product pages with no product visible at all on a
     phone, on a site whose hero is supposed to BE the product. */
  .shot-bottle,.shot-duo{order:-1;justify-content:center;display:flex}
  .shot-bottle img{max-height:260px;margin:0 auto}
  .duo-a,.duo-b{max-height:230px}
  .shot-duo{gap:16px}
  .claims .ticks{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .shot{display:flex;flex-direction:column}
  .shot-bg{position:relative;inset:auto;height:215px;flex:0 0 auto;display:block}
  .shot-bg img{object-position:center 28%}
  /* Scrim hangs off the image box, not off .shot, so it can never be a
     different height from the photo and leave a hard cut. */
  .shot::before{display:none}
  .shot-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,14,18,.30) 0%,
               rgba(11,14,18,0) 40%, rgba(11,14,18,.75) 82%, var(--ink) 100%);
  }
  .shot-in{padding:26px 18px 40px;min-height:0}
  .shot h1{text-shadow:none}
  .spec{font-size:18px}
  .claims .ticks{grid-template-columns:1fr;gap:10px}
  .claims .wrap{padding-top:20px;padding-bottom:20px}
}

/* ---------- centred blast hero ----------
   The GHOST arrangement Darryl pointed at: product dead centre, saturated
   field behind it, one huge word underneath. Two of his three references are
   built this way; only Momentous is text-left.

   The field is generated and empty. The bottle in the middle is the real
   render. Same rule as every other hero on this site. */
.blast{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}
.blast-bg{position:absolute;inset:0;z-index:0}
.blast-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.blast::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(11,14,18,.30) 0%, transparent 22%,
             transparent 46%, rgba(11,14,18,.80) 78%, var(--ink) 100%);
}
.blast-in{
  position:relative;z-index:2;text-align:center;
  max-width:var(--wrap);margin:0 auto;padding:34px 24px 56px;
}
/* The eyebrow cannot use --acc here: on the blast field the accent IS the
   background, so orange-on-orange and blue-on-blue both vanish. White with a
   shadow is the only thing that survives both fields. */
.blast .kick{
  margin-bottom:6px;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6);
}
.blast-bottle img{
  margin:0 auto;max-height:380px;width:auto;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.8));
}
.blast h1{
  margin:14px 0 6px;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(46px,8.5vw,104px);line-height:.92;
  text-shadow:0 3px 34px rgba(0,0,0,.6);
}
.blast .pname{font-size:21px;margin-bottom:.25em}
.blast .spec{color:var(--fg);opacity:.92;margin-bottom:1.1em}
.intro{padding-top:40px;padding-bottom:8px;max-width:820px}
.intro .lede{margin:0}

@media (max-width:720px){
  .blast-in{padding:22px 18px 40px}
  .blast-bottle img{max-height:250px}
  .blast .pname{font-size:18px}
  .blast .spec{font-size:17px}
  .intro{padding-top:28px}
}

/* Home blast: it carries two bottles and more copy than a product page. */
.hero.blast .blast-in{padding-top:30px}
/* --fg2 is a muted grey tuned for a flat dark panel. Over a blast field it
   is unreadable. Body copy on any blast hero goes near-white with a shadow. */
.blast .lede{
  color:#F2F6FA;text-shadow:0 1px 14px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.7);
}
.hero.blast .lede{margin:0 auto 8px;max-width:56ch}
.hero.blast .btns{margin-top:18px}
.hero.blast .shot-duo{margin-bottom:6px}

/* ---------- product scene hero (10 Sep 2026) ----------
   Replaces the centred "cutout floating on a gradient" arrangement on the
   home and both product pages. The frame is one product scene generated
   around the real render, and every one of them was prompted with a clean
   LEFT THIRD, so the copy sits there rather than on top of the product.

   Keep that property in any replacement image. If a new frame has a busy
   left side, this layout breaks and no scrim will save it. */
/* 56.5vw is not arbitrary. The scene frames are 2000x1131, so their rendered
   height at any width IS 56.5vw. Matching the section to it means object-fit
   cover has almost nothing to crop between roughly 800px and 1600px wide, which
   is where nearly every visitor is. Below that the 460px floor takes over, above
   it the 900px ceiling does. Change the frame aspect and this number changes. */
/* WIDE-SCREEN CAP, 21 Sep 2026. Past 1593px the 900px ceiling freezes the
   HEIGHT while the width keeps growing, so object-fit:cover has to scale the
   frame UP to cover the width. Measured at 2560px: 1.28x upscale and 38% of
   the image height thrown away, which reads as the bottle front being zoomed
   right up, and it magnifies the old label's claim stack with it. cover keys
   off whichever axis needs MORE scale, so raising the height ceiling does not
   help; only bounding the width does. 2000px is the frames' own native width,
   so at or above it the image sits at 1:1 and never upscales. Re-export the
   frames wider and this number moves with them. */
.blast.scene{
  display:flex;align-items:center;
  min-height:clamp(460px,56.5vw,900px);
  max-width:2000px;margin-inline:auto;
}
/* Vertical bias is LOW on purpose. Whatever crop is left has to come off the
   bottom, which is wet stone and ingredients, never off the top, which is the
   cap. 66% was tried first to make the bottle read bigger and it beheaded the
   bottle on any screen wider than about 1400. The cap sits around 5% down in
   these frames, so the top cut has to stay under that. */
.blast.scene .blast-bg img{object-position:62% 15%}
/* Two scrims stacked: a horizontal one that carries the type, and a short
   vertical one that lands the frame into the page below it. */
.blast.scene::before{
  background:
    linear-gradient(90deg, rgba(6,10,16,.88) 0%, rgba(6,10,16,.66) 30%,
                    rgba(6,10,16,.16) 52%, transparent 68%),
    linear-gradient(180deg, rgba(11,14,18,.30) 0%, transparent 26%,
                    transparent 74%, rgba(11,14,18,.55) 94%, var(--ink) 100%);
}
.blast.scene .blast-in{width:100%;text-align:left;padding:56px 24px}
.blast.scene .kick,
.blast.scene h1,
.blast.scene .pname,
.blast.scene .spec,
.blast.scene .lede{max-width:min(52ch,48%)}
.blast.scene h1{font-size:clamp(40px,5.6vw,84px);margin-top:10px}
.blast.scene .lede{margin-left:0}
.hero.blast.scene .lede{margin:0 0 8px}

/* Narrow viewports get the square crop, where the bottle is centred rather
   than off to the right. The copy drops underneath it instead of beside it,
   because there is no left third to speak of at 375px. */
@media (max-width:720px){
  /* Narrow viewports stack rather than overlay. The frame is taken out of the
     absolute layer and given its own square box, so the section is as tall as
     the picture plus the copy and the bottle is never cropped by a container
     whose height is set by the text inside it. That crop was the bug: cover on
     a box taller than it is wide eats the sides of the label. */
  .blast.scene{display:block;min-height:0}
  /* display:block matters. <picture> is inline by default, and height does not
     apply to an inline box, so every height set here was silently ignored and
     the frame was simply rendering at the square image's natural 100vw. */
  .blast.scene .blast-bg{position:relative;display:block;height:100vw}
  .blast.scene .blast-bg img{object-position:center center}
  .blast.scene::before{
    bottom:auto;height:100vw;
    background:linear-gradient(180deg, rgba(11,14,18,.34) 0%, transparent 22%,
               transparent 58%, rgba(11,14,18,.90) 88%, var(--ink) 100%);
  }
  /* Pulled up into the scrim so the copy starts on the picture rather than
     under a hard seam. */
  .blast.scene .blast-in{position:relative;margin-top:-16vw;padding:0 18px 40px}
  .blast.scene .kick,
  .blast.scene h1,
  .blast.scene .pname,
  .blast.scene .spec,
  .blast.scene .lede{max-width:none}
}

/* Content is visible at first paint; no observer or entrance opacity. */
/* Home headline, 10 Sep 2026. The H1 is now the ingredient list, which is the
   Momentous move the reference round already picked out as the most credible
   thing available to a range that cannot make efficacy claims. "Ask for it by
   name" survives underneath as the platform line rather than the headline,
   because on its own it never said what the products were. */
.hero.blast.scene .pname{
  font-size:clamp(20px,2.4vw,28px);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;
  color:var(--yellow);margin-bottom:.5em;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}

/* ---------- pharmacy list (10 Sep 2026) ----------
   98 branches, one card each. One card per ROW, never one per chain: chain
   branches collapsing onto a single card is a documented failure on the sister
   project and it sends people to the wrong shop.

   Owner names, personal emails and WhatsApp numbers are in the source
   spreadsheet and are deliberately not here. Do not add them. */
.phfind{margin:26px 0 10px}
.phfind-l{display:block;font-weight:800;font-size:15px;margin-bottom:7px}
.phfind-i{
  width:100%;max-width:520px;padding:14px 16px;
  font:inherit;font-size:17px;color:var(--fg);
  background:var(--ink2);border:1px solid var(--line);border-radius:10px;
}
.phfind-i:focus{outline:2px solid var(--acc);outline-offset:2px;border-color:var(--acc)}
.phfind-n{margin:8px 0 0;color:var(--fg2);font-size:15px}

.pharea{margin:26px 0 0}
.pharea-h{
  margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--acc);border-bottom:1px solid var(--line);padding-bottom:8px;
}
.pharea-h span{color:var(--fg2);letter-spacing:0;margin-left:.4em;font-weight:400}

.phcards{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.phcard{
  background:var(--ink2);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;display:flex;flex-direction:column;gap:5px;
}
/* The card sets display:flex, and a class selector beats the browser's own
   [hidden]{display:none}. Without this line the filter marks a card hidden and
   the card carries on rendering. It looked like it worked because the count was
   right; 43 of the 98 were still on screen. */
.phcard[hidden]{display:none}
.phcard h5{font-size:17px;line-height:1.3}
.phaddr{color:var(--fg2);font-size:15px;line-height:1.45}
/* The number is the point of the card, so it is the only link in it and it is
   a tap target in its own right rather than a line of text. */
.phtel{
  margin-top:4px;align-self:flex-start;
  font-weight:800;font-size:17px;text-decoration:none;color:var(--acc);
  padding:8px 12px;min-height:44px;display:flex;align-items:center;
  border:1px solid var(--line);border-radius:9px;
}
.phtel:hover,.phtel:focus{background:var(--ink3);border-color:var(--acc)}

@media (max-width:720px){
  .phcards{grid-template-columns:1fr}
}

/* ---------- WhatsApp (11 Sep 2026) ----------
   Zero wa.me links existed anywhere on this site, on the one channel that
   carries most sharing and most pharmacy contact in T&T. The number is the
   customer-facing WhatsApp Business App line, not the API account.

   Brand green is used deliberately: people scan for it. */
.strip-w{
  margin-left:14px;font-weight:700;text-decoration:none;
  color:#25D366;
}
.strip-w:hover,.strip-w:focus{text-decoration:underline}
.btn-w{
  background:#25D366;color:#08260F;border:0;
}
.btn-w:hover,.btn-w:focus{background:#1FBE59;color:#08260F}
@media (max-width:560px){
  .strip-w{margin-left:10px}
}

/* Mobile hero fold, 11 Sep 2026. Measured at 375x812: the Find a Pharmacy
   button sat at 946px, which is 134px below the fold. The square frame was
   taking a full 100vw of height and the lede ran to eight lines.

   The lede was cut to two sentences in build-site.py. This trims the frame to
   78vw, which still shows the whole bottle in the square crops and buys back
   another 82px. Both changes together put the button above the fold. */
@media (max-width:720px){
  .blast.scene .blast-bg{height:72vw}
  .blast.scene::before{height:72vw}
  .blast.scene .blast-in{margin-top:-9vw}
  /* The square frames put the bottle from roughly 12% to 78% of the height, so
     the 72vw window is biased up to hold the whole pack including the base. */
  .blast.scene .blast-bg img{object-position:center 22%}
}

/* Region wrappers, 11 Sep 2026. Town-by-town was arbitrary ordering; region is
   the bucket Massy and Health Food Specialists both use, so it is the model
   shoppers here already carry. Region is the loud heading, town the quiet one. */
.phregion{margin:34px 0 0}
.phregion-h{
  margin:0 0 4px;font-size:24px;letter-spacing:-.01em;
  padding-bottom:6px;border-bottom:2px solid var(--acc);
}
.phregion-h span{
  color:var(--fg2);font-size:15px;font-weight:400;margin-left:.5em;
}
.phregion .pharea{margin:18px 0 0}
.phregion .pharea-h{
  font-size:13px;letter-spacing:.12em;color:var(--fg2);
  border-bottom:1px solid var(--line);
}
.phregion .pharea-h span{color:var(--fg2)}

/* ---------- September interface refinement ---------- */
[hidden]{display:none!important}
button,input{font:inherit}
a,button{touch-action:manipulation}
button{cursor:pointer}
main:focus{outline:none}
[id]{scroll-margin-top:28px}
h1,h2,h3{text-wrap:balance}
.facts-in{margin-top:0;margin-bottom:0}
.phcard h5{margin:0;font-weight:750;letter-spacing:-.02em}
.ftr-b p{color:#929fac}
.strip{background:#111b24;border-bottom:1px solid var(--line);gap:24px}
.strip-t{color:var(--fg2)}
.strip-w{color:#68e99a;margin-left:0}
.hdr{min-height:84px}
.nav{gap:18px}
.nav a{font-size:13px}
.hdr .cta{border-radius:8px}
.btn{border-radius:8px;transition:background-color .18s,box-shadow .18s}
.btn:active{filter:brightness(.94)}

/* The homepage intentionally leads with Xtreme. The photo supplies context;
   the product name, headline and route to the pharmacy supply the hierarchy. */
/* Same wide-screen cap as .blast.scene, for the same reason. This hero's
   ceiling is 810px and 56.5vw reaches it at 1434px, so beyond that the width
   kept growing against a frozen height and cover upscaled to fill it. Measured
   at 2560px before the cap: 1.28x upscale and 637px of 1448 thrown away, 44%,
   the worst of the three heroes. .shot already paints var(--ink), so the
   margins past 2000px are the page's own background, not a gap. */
.home-hero{border-bottom:1px solid var(--line);max-width:2000px;margin-inline:auto}
.home-hero .shot-in{min-height:clamp(590px,56.5vw,810px);padding-top:66px;padding-bottom:64px;grid-template-columns:1fr}
.home-hero .shot-t{max-width:650px}
.home-hero h1{font-size:clamp(56px,6.5vw,86px);line-height:.98;letter-spacing:-.055em;margin-bottom:25px}
.home-hero h1 span{color:#4bc5f5}
.home-hero .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:25px}
.home-hero .pname{font-size:21px;margin-bottom:12px}
.home-hero .lede{max-width:36ch;color:#c6d2dd;font-size:18px;line-height:1.6}
.home-hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.home-hero .btns .btn{margin:0}
.home-hero::before{background:linear-gradient(90deg,rgba(5,13,24,.90) 0%,rgba(5,13,24,.76) 27%,rgba(5,13,24,.15) 54%,transparent 72%),linear-gradient(0deg,#0b0e12 0%,transparent 20%)}
.home-hero .shot-bg img{object-position:62% 15%}
.home-hero .hero-footnote{font-size:11px;color:#a3b0bf;letter-spacing:.015em;margin:25px 0 0}
.home-route{background:#141d26;border-bottom:1px solid var(--line)}
.home-route-in{padding-top:26px;padding-bottom:26px;display:grid;grid-template-columns:1.15fr 1.15fr auto;gap:32px;align-items:center}
.home-route .eyebrow{font-size:10px;color:#4bc5f5;margin:0 0 6px}
.home-route h2{font-size:23px;margin:0}
.home-route p{font-size:14px;color:var(--fg2);margin:0}
.home-route .lnk{color:var(--fg);font-size:14px;border-bottom:1px solid var(--acc);padding:10px 0}
.range-band{background:var(--ink);color:var(--fg);padding:64px 0 0}
.range-band h2{text-transform:none;font-size:clamp(30px,4vw,44px)}
.range-band .eyebrow{color:#4bc5f5;font-size:11px;margin-bottom:12px}
.range-band .band-sub{color:var(--fg2);font-weight:400}
.pcard{border-radius:12px;border-top-width:2px;align-items:center;padding:30px 24px;grid-template-columns:140px minmax(0,1fr);gap:24px}
.pcard-i{min-width:0}
.pcard-i img{max-height:225px;max-width:100%;width:auto;margin:auto}
.pcard .btile{width:140px;max-width:100%;height:225px;margin:auto;border-radius:6px}
.pcard .btile-m{font-size:16px}
.pcard .btile-s{font-size:17px}
.pcard h3{font-size:23px;line-height:1.15}
.pcard .ticks{font-size:14px}
.pcard .lnk{font-size:14px;line-height:1.4}

/* The locator is a tool. Search comes before the directory and explanation. */
.locator-hero{background:#101922;border-bottom:1px solid var(--line);overflow:hidden}
.locator-intro{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:46px;padding-top:48px;padding-bottom:48px}
.locator-intro .eyebrow{font-size:11px;color:#4bc5f5;margin-bottom:16px}
.locator-intro h1{font-size:clamp(34px,4vw,54px);line-height:1.03;letter-spacing:-.045em}
.locator-intro h1 span{color:#4bc5f5}
.locator-intro .lede{font-size:16px;max-width:48ch;margin:20px 0 0}
.locator-photo{display:block;height:210px;overflow:hidden;border-radius:10px}
.locator-photo img{width:100%;height:100%;object-fit:cover;object-position:82% center}
.directory{padding-top:38px;padding-bottom:40px}
.directory-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.directory-heading h2{font-size:24px}
.directory-heading a{font-size:13px;text-decoration:none;color:#68e99a}
.directory-note{max-width:90ch;font-size:13px;color:var(--fg2);line-height:1.6;margin:0}
.directory-note strong{font-weight:600;color:#e2c876}
.phfind{margin-top:22px}
.phfind-l{font-size:13px;letter-spacing:.01em}
.ph-input-row{display:flex;gap:12px;align-items:center}
.phfind-i{max-width:none;min-width:0;flex:1;padding:17px 18px;background:#151e29;border-color:#526173;border-radius:8px;font-size:16px}
.phfind-i::placeholder{color:#9daebf}
.ph-reset,.ph-suggestions button{color:var(--fg);background:var(--ink2);border:1px solid #526173;border-radius:8px;min-height:48px;padding:10px 15px;font-size:13px}
.ph-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.ph-filters button{background:transparent;color:var(--fg2);border:1px solid var(--line);border-radius:6px;min-height:44px;padding:8px 15px;font-size:13px;font-weight:600}
.ph-filters button:hover,.ph-reset:hover,.ph-suggestions button:hover{background:var(--ink3);color:var(--fg);border-color:#63758a}
.ph-filters button[aria-pressed="true"]{background:#4bc5f5;color:#06131c;border-color:#4bc5f5}
.phfind-n{font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.phregion-h{border-bottom:1px solid #405163;font-size:22px;padding-bottom:14px}
.pharea-h{padding-bottom:10px}
.phcards{gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.phcard{border-radius:8px;padding:20px;gap:10px;transition:border-color .18s}
.phcard:hover{border-color:#576a7e}
.phcard h5{font-size:17px;line-height:1.3}
.phaddr{font-size:14px;flex:1}
.phtel{font-size:14px;gap:8px;margin-top:6px;padding:9px 12px;color:#6ed2fa}
.ph-empty{border:1px solid var(--line);padding:30px;margin-top:24px;border-radius:10px;background:var(--ink2)}
.ph-empty h3{font-size:24px}
.ph-empty p{max-width:60ch;color:var(--fg2);font-size:15px}
.ph-suggestions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.directory-help{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;border-top:1px solid var(--line);margin-top:48px;padding-top:34px}
.directory-help h2{font-size:28px;max-width:26ch}
.directory-help .eyebrow{font-size:11px;color:#4bc5f5}
.directory-help p{color:var(--fg2);font-size:15px}
.directory-help>div:last-child{display:flex;flex-direction:column;align-items:flex-start}
.directory-more{font-size:13px;margin-top:28px}

@media (min-width:721px) and (max-width:1100px){
  .hdr{gap:14px}.nav{gap:12px}.nav a{font-size:12px}.hdr .cta{font-size:12px;padding:12px}
  .bm{font-size:22px}.hdr{padding-left:20px;padding-right:20px}
}
@media (max-width:1000px) and (min-width:721px){
  .hdr .nav{width:100%;justify-content:center;order:3;border-top:1px solid var(--line);padding-top:10px}
  .home-hero .shot-in{min-height:550px}
}
@media (max-width:900px){
  .home-route-in{grid-template-columns:1fr 1fr;gap:20px}.home-route .lnk{grid-column:2}
  .phcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .locator-intro{gap:24px;grid-template-columns:1.5fr 1fr}
  .locator-photo{height:190px}
  .pcard{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:720px){
  .strip{padding:0 18px;gap:16px;min-height:40px;justify-content:space-between}
  .strip-t{display:none}.strip-p,.strip-w{font-size:11px;min-height:40px;display:flex;align-items:center;padding:0}
  .hdr{min-height:72px;padding:10px 18px;gap:9px}.bm{font-size:19px}.bs{font-size:7.5px}
  .hdr .cta{font-size:11px;padding:12px 10px}.burger{margin-right:-8px;flex-shrink:0}
  .home-hero .shot-bg{height:78vw;max-height:340px}
  .home-hero .shot-bg img{object-position:center 20%;object-fit:cover}
  .home-hero .shot-bg::after{background:linear-gradient(0deg,#0b0e12 0%,rgba(11,14,18,.15) 22%,transparent 42%)}
  .home-hero .shot-in{padding:0 18px 34px;min-height:0;width:100%}
  .home-hero .shot-t{max-width:none}
  .home-hero .eyebrow{font-size:10px;margin:4px 0 14px;letter-spacing:.14em}
  .home-hero h1{font-size:clamp(44px,12.5vw,70px);line-height:1;letter-spacing:-.045em;margin-bottom:18px}
  .home-hero .pname{font-size:18px;margin-bottom:10px}
  .home-hero .lede{font-size:15px;max-width:34ch;margin-bottom:0}
  .home-hero .btns{margin-top:22px;gap:10px}
  .home-hero .btns .btn{font-size:13px;padding:14px 15px}
  .home-hero .hero-footnote{font-size:10px;margin-top:18px;max-width:32ch}
  .home-route-in{padding-top:24px;padding-bottom:24px;grid-template-columns:1fr;gap:14px}
  .home-route .lnk{grid-column:auto;justify-self:start}
  .range-band{padding:38px 0 0}
  .grid2{padding-top:26px;padding-bottom:36px}
  .pcard{grid-template-columns:90px minmax(0,1fr);gap:18px;padding:22px 18px;text-align:left}
  .pcard .btile{width:90px;height:155px;padding:12px 8px;min-width:0}
  .pcard .btile-m{font-size:11px;letter-spacing:0}.pcard .btile-s{font-size:13px}
  .pcard-i img{max-height:155px}.pcard h3{font-size:20px}.pcard .kick{font-size:10px}
  .pcard p,.pcard .ticks{font-size:13px}.pcard .lnk{font-size:13px}
  .locator-intro{display:block;padding-top:30px;padding-bottom:26px}
  .locator-intro h1{font-size:clamp(34px,8.5vw,52px)}
  .locator-intro .lede{font-size:14px;margin-top:14px}
  .locator-photo{display:none}
  .directory{padding-top:26px}
  .directory-heading{display:block}.directory-heading h2{font-size:22px;margin-bottom:12px}
  .directory-heading a{display:inline-flex;align-items:center;min-height:44px;margin-bottom:6px}
  .directory-note{font-size:12px}.phfind{margin-top:18px}
  .phfind-i{padding:14px;font-size:16px}
  .ph-input-row{flex-wrap:wrap}.phfind-i{flex-basis:100%}.ph-reset{padding:8px 12px;min-height:44px}
  .ph-filters{gap:7px;margin:12px 0}.ph-filters button{font-size:12px;padding:8px 12px}
  .phcards{grid-template-columns:1fr}.phcard{padding:18px}
  .directory-help{grid-template-columns:1fr;gap:15px}
  .directory-help h2{font-size:26px}
  .ph-empty{padding:22px}.ph-empty h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}