/* ==========================================================================
   SELF-HOSTED INTER — October 2026

   Was two Google Fonts families over a render-blocking third-party request.
   Cormorant Garamond went entirely: the light theme redefines --serif to
   Inter (see the LIGHT THEME block below), so it was downloaded on every
   page and never drawn.

   Inter now ships as one variable file per subset, wght axis 100-900, which
   covers every weight the stylesheet asks for from a single download. The
   unicode-range split is what Google served: a browser fetches latin always,
   and greek only on the pages that use the alpha and beta in a-MSH.
   ========================================================================== */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/inter-greek.woff2) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   VIP PEPTIDE — Research Information Hub
   Black & gold luxury theme. Rebrand from the :root block below.
   ========================================================================== */

:root{
  --bg:#04050a;
  --bg-2:#070910;
  --panel:rgba(255,255,255,.03);
  --brd:rgba(212,180,92,.22);
  --brd-soft:rgba(255,255,255,.09);

  --text:#f2f5fb;
  --text-mid:#c5cede;
  --text-soft:#9aa5bb;

  --gold:#d9b45c;
  --gold-2:#f0d99a;
  --gold-deep:#a8842a;
  --gold-grad:linear-gradient(180deg,#f6e6b4 0%,#d9b45c 42%,#a8842a 100%);

  --radius:4px;
  --chamfer:22px;

  --wrap:1440px;
  --gut:clamp(18px,4vw,54px);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;font-weight:600}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding:clamp(48px,6vw,86px) 0;position:relative;z-index:1}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* gold display type */
.gold{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ==========================================================================
   BACKDROP — molecular field behind everything
   ========================================================================== */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,5,10,.55) 0%,rgba(4,5,10,.40) 30%,
                           rgba(4,5,10,.52) 66%,rgba(4,5,10,.92) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(4,5,10,.35),transparent 75%);
}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb--blue{
  width:58vw;height:70vh;min-width:420px;top:-8vh;left:-16vw;
  background:radial-gradient(ellipse at 60% 45%,rgba(60,130,255,.42) 0%,rgba(30,90,200,0) 70%);
  filter:blur(80px);animation:drift1 30s ease-in-out infinite;
}
.orb--violet{
  width:56vw;height:68vh;min-width:400px;top:-10vh;right:-16vw;
  background:radial-gradient(ellipse at 40% 45%,rgba(150,70,255,.40) 0%,rgba(110,40,200,0) 70%);
  filter:blur(80px);animation:drift2 36s ease-in-out infinite;
}
.orb--aqua{
  width:52vw;height:30vh;min-width:380px;top:24vh;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 55%,rgba(232,205,140,.20) 0%,rgba(212,180,92,0) 72%);
  filter:blur(60px);
}
.mol{position:absolute;opacity:.5;filter:drop-shadow(0 0 12px rgba(140,180,255,.5));will-change:transform}
.mol--a{width:min(26vw,320px);top:6vh;left:-2vw;animation:spin1 120s linear infinite}
.mol--b{width:min(22vw,280px);top:8vh;right:-1vw;filter:drop-shadow(0 0 12px rgba(190,120,255,.5));animation:spin2 140s linear infinite}
.mol--c{width:min(16vw,200px);top:76vh;left:7vw;opacity:.32;animation:spin1 160s linear infinite}
.mol--d{width:min(18vw,230px);top:118vh;right:5vw;opacity:.28;animation:spin2 130s linear infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(3vw,3vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-3vw,3vh)}}
@keyframes spin1{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spin2{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@media (max-width:760px){.mol--c,.mol--d{display:none}}

/* ==========================================================================
   COMPLIANCE BAR + HEADER
   ========================================================================== */
.compliance-bar{
  position:relative;z-index:61;
  background:#020306;border-bottom:1px solid rgba(212,180,92,.16);
  color:var(--text-soft);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:8px var(--gut);font-family:var(--mono);
}
.compliance-bar strong{color:var(--gold);font-weight:700}

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(4,5,10,.9);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(212,180,92,.2);
}
.header-inner{display:flex;align-items:center;gap:24px;height:74px}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:3px;
  background:linear-gradient(160deg,rgba(212,180,92,.2),transparent);
  font-family:var(--serif);font-weight:700;font-size:.9rem;color:var(--gold);letter-spacing:.02em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.24rem;letter-spacing:.03em;color:var(--gold-2)}
.brand-sub{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--text-soft);font-weight:600}

.nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav a{
  padding:10px 11px;white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-mid);transition:color .18s ease;position:relative;
}
.nav a:hover{color:var(--gold-2)}
.nav a.is-active{color:var(--gold)}
.nav a.is-active::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1px;background:var(--gold);
}

.header-cta{display:flex;align-items:center;gap:12px;flex:none}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border:1px solid var(--gold);border-radius:2px;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);
  background:rgba(212,180,92,.06);transition:background .18s ease;
}
.pill:hover{background:rgba(212,180,92,.16)}
.atom{width:22px;height:22px;color:var(--gold);flex:none}

.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--brd);background:transparent;
  border-radius:2px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--gold);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--gold);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

@media (max-width:1080px){
  .nav-toggle{display:flex}
  .header-cta .pill span{display:none}
  .nav{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(4,5,10,.98);border-bottom:1px solid var(--brd);
    padding:8px var(--gut) 18px;display:none;margin:0;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav a.is-active::after{display:none}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;z-index:1;padding:clamp(40px,6vw,74px) 0 clamp(30px,4vw,50px);text-align:center}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(3rem,9vw,7rem);
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  margin-bottom:10px;
}
.hero-sub{
  font-size:clamp(.72rem,1.5vw,1rem);letter-spacing:.44em;text-transform:uppercase;
  color:#a9c3e0;font-weight:500;margin-bottom:18px;
}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:clamp(22px,3vw,34px)}
.ornament::before,.ornament::after{
  content:"";width:clamp(60px,12vw,180px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament svg{width:20px;height:20px;color:var(--gold)}

.hero-stage{position:relative;max-width:1000px;margin:0 auto}
.hero-stage img{width:100%;height:auto}

.hero-points{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;
  margin:26px 0 0;padding:0;list-style:none;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid);
}
.hero-points li{display:flex;align-items:center;gap:9px}
.hero-points svg{width:13px;height:13px;color:var(--gold);flex:none}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border:1px solid var(--gold);border-radius:2px;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(212,180,92,.06);cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{background:rgba(212,180,92,.18);transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn--wa{background:#25d366;border-color:#25d366;color:#04240f}
.btn--wa:hover{background:#31e874;border-color:#31e874;box-shadow:0 6px 22px rgba(37,211,102,.35)}
.btn--solid{background:var(--gold);color:#1a1403;border-color:var(--gold)}
.btn--solid:hover{background:var(--gold-2)}
.btn--sm{padding:9px 16px;font-size:.62rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row,.btn-row.center{justify-content:center}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.eyebrow{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-family:var(--mono);
}
.section-head{max-width:760px;margin-bottom:clamp(28px,4vw,44px)}
.center .section-head{margin-inline:auto}
.section-head h2{
  font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.4rem);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;
}
.lede{font-size:.98rem;color:var(--text-mid);max-width:64ch;line-height:1.75}
.center .lede{margin-inline:auto}

/* ==========================================================================
   PRODUCT CARDS — chamfered, artwork background, hover reveals detail
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:1180px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

.pcard{
  --accent:#d9b45c;--accent-rgb:217,180,92;
  position:relative;padding:1px;cursor:pointer;
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.85),rgba(var(--accent-rgb),.18) 55%,rgba(var(--accent-rgb),.6));
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  transition:transform .25s ease,filter .25s ease;
}
.pcard:hover,.pcard.is-open{transform:translateY(-4px);filter:drop-shadow(0 18px 40px rgba(var(--accent-rgb),.28))}

.pcard-inner{
  position:relative;aspect-ratio:7/5;overflow:hidden;background:#04050a;
  clip-path:polygon(calc(var(--chamfer) - 1px) 0,100% 0,100% calc(100% - var(--chamfer) + 1px),calc(100% - var(--chamfer) + 1px) 100%,0 100%,0 calc(var(--chamfer) - 1px));
}
/* Falls back to the product accent when a card has no artwork yet,
   so a missing image degrades instead of rendering an empty panel. */
.pcard-art{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 22%, rgba(var(--accent-rgb),.34), transparent 62%),
    linear-gradient(145deg, rgba(var(--accent-rgb),.16), rgba(10,12,18,.9) 70%);
}
/* The art is wrapped in <picture> to offer a WebP source. <picture> is inline
   by default, which would leave the image's height:100% resolving against an
   auto-height box, so it has to fill the frame itself. */
.pcard-art picture{display:block;width:100%;height:100%}
.pcard-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s ease}
.pcard:hover .pcard-art img,.pcard.is-open .pcard-art img{transform:scale(1.05);opacity:.42}

/* resting face: name + button */
.pcard-face{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,2.2vw,30px);transition:opacity .28s ease,transform .28s ease;
}
.pcard:hover .pcard-face,.pcard.is-open .pcard-face{opacity:0;transform:translateY(-8px);pointer-events:none}
.pcard-name{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.35rem);letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);text-shadow:0 0 26px rgba(var(--accent-rgb),.5);
  max-width:62%;
}
.pcard-open{
  align-self:flex-start;
  padding:9px 17px;border:1px solid rgba(var(--accent-rgb),.75);border-radius:2px;
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
}

/* hover panel: price + detail */
.pcard-info{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:clamp(10px,1.05vw,14px) clamp(14px,1.6vw,22px);
  background:linear-gradient(120deg,rgba(4,5,10,.94) 34%,rgba(4,5,10,.72) 100%);
  opacity:0;transform:translateY(12px);transition:opacity .28s ease,transform .28s ease;
}
.pcard:hover .pcard-info,.pcard.is-open .pcard-info{opacity:1;transform:none}
/* Hover previews the panel; the first click opens the card. Until then the
   panel ignores clicks, so clicking "Open Information" opens the
   information rather than firing the Enquire link underneath it. */
.pcard-info{pointer-events:none}
.pcard.is-open .pcard-info{pointer-events:auto}
.pcard-info h4{
  font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);margin-bottom:2px;line-height:1.1;
}
.pcard-cat{
  font-size:.54rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-soft);font-family:var(--mono);margin-bottom:6px;
}
.pcard-price{
  font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;
  color:#fff;line-height:1;margin-bottom:2px;
}
.pcard-size{
  flex:none;
  font-size:.62rem;color:var(--accent);letter-spacing:.03em;line-height:1.4;margin-bottom:6px;
}
.pcard-blurb{
  flex:none;
  font-size:.68rem;color:var(--text-mid);line-height:1.46;margin-bottom:7px;max-width:60ch;
}
.pcard-info > *{flex:none}
.pcard-actions{display:flex;flex-wrap:wrap;gap:9px}
/* The panel is a fixed-height overlay that clips, so the blurb is the one part
   allowed to shrink. That keeps the enquire and research-information buttons
   inside the card at every width. */
.pcard-info > .pcard-blurb{
  flex:0 1 auto;min-height:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
}
.pcard-info > .pcard-actions{flex:none}
@media (max-width:600px){
  .pcard-info > .pcard-blurb{-webkit-line-clamp:4}
  /* Below about 390px the two action buttons no longer fit side by side and
     wrap onto a second row. That second row costs 46px, and because the blurb
     is the one element allowed to shrink, the 46px comes entirely out of it --
     at 360px the blurb collapsed from four lines to eight pixels and the card
     showed no description at all. Keeping the pair on one row, sharing the
     width, gives the blurb its four lines back. The buttons carry less tracking
     and tighter side padding at this size so the longer label still fits. */
  .pcard-actions{flex-wrap:nowrap}
  .pcard-actions .btn{
    flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px;
    letter-spacing:.02em !important;white-space:nowrap;
  }
  /* The gaps between the panel's lines total 31px on a card only 230px tall.
     Tightening them here buys the blurb its fourth line back on a 360px
     phone. Unchanged above 600px, where there is room to spare. */
  .pcard-info .pcard-cat{margin-bottom:3px}
  .pcard-info .pcard-size{margin-bottom:3px}
  .pcard-info .pcard-stock{margin-bottom:4px}
  .pcard-info > .pcard-blurb{margin-bottom:4px}
}

/* 320px is the narrowest viewport anything still ships with. The card is only
   201px tall there and the panel's fixed rows alone nearly fill it, so the
   blurb gives up lines however short the copy is -- that part is structural.
   What is worth preventing is the longer button label spilling outside its own
   control, so the last of the tracking and padding goes here. */
@media (max-width:340px){
  .pcard-actions .btn{
    padding-left:2px;padding-right:2px;letter-spacing:0 !important;font-size:.58rem;
  }
}
.pcard-tag{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:5px 11px;border:1px solid rgba(var(--accent-rgb),.8);border-radius:2px;
  font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.55);
}
/* Out-of-stock products stay fully visible. The corner tag and the red
   stock line are the indicators; the card is not dimmed. */

/* touch devices: no hover, so show a hint */
@media (hover:none){
  .pcard-open::after{content:" ›";}
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:26px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 18px;border:1px solid var(--brd);background:transparent;border-radius:2px;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mid);cursor:pointer;transition:all .18s ease;
}
.chip:hover{color:var(--gold-2);border-color:var(--gold)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:#1a1403}
.search{position:relative;flex:1;min-width:200px;max-width:280px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-soft)}
.search input{
  width:100%;padding:11px 15px 11px 38px;border:1px solid var(--brd);border-radius:2px;
  background:rgba(255,255,255,.03);font-size:.82rem;color:#fff;outline:none;
  letter-spacing:.06em;transition:border-color .18s ease;
}
.search input:focus{border-color:var(--gold)}
.search input::placeholder{color:var(--text-soft)}
.empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-mid);
  border:1px dashed var(--brd);
}

/* ==========================================================================
   FEATURES / STEPS / CTA
   ========================================================================== */
.feature-grid,.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.8vw,22px)}
.feature,.step-card,.contact-card{
  position:relative;padding:28px 26px;background:rgba(255,255,255,.022);
  border:1px solid var(--brd-soft);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:border-color .2s ease,background .2s ease;
}
.feature:hover,.step-card:hover,.contact-card:hover{border-color:var(--brd);background:rgba(212,180,92,.04)}
.feature h3,.step-card h3,.contact-card h3{
  font-family:var(--serif);font-size:1.32rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:9px;
}
.feature p,.step-card p,.contact-card p{font-size:.85rem;color:var(--text-mid);line-height:1.7}
.feature-icon{
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:16px;
  border:1px solid var(--brd);color:var(--gold);
}
.feature-icon svg{width:20px;height:20px}
.step-card{counter-increment:s}
.steps-grid{counter-reset:s}
.step-card::before{
  content:counter(s);position:absolute;top:16px;right:20px;
  font-family:var(--serif);font-size:2.4rem;color:rgba(212,180,92,.22);line-height:1;
}

.cta-band{
  position:relative;text-align:center;padding:clamp(34px,5vw,62px);
  border:1px solid var(--brd);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(212,180,92,.10),transparent 62%),#06070d;
}
.cta-band h2{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.cta-band p{color:var(--text-mid);max-width:58ch;margin:0 auto 26px}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.8vw,22px)}
.contact-card{text-align:center;display:flex;flex-direction:column}
.contact-card .feature-icon{margin-inline:auto}
.contact-card .btn{margin-top:auto}
.contact-value{font-family:var(--serif);font-size:1.3rem;color:#fff;margin-bottom:18px;letter-spacing:.04em}

/* ==========================================================================
   PROSE / PAGE HEADS / NOTICES
   ========================================================================== */
.page-head{
  position:relative;z-index:1;border-bottom:1px solid var(--brd);
  padding:clamp(38px,5vw,68px) 0;text-align:center;
}
.page-head h1{
  font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.8rem);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px;
}
.crumb{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-soft);margin-bottom:14px;font-family:var(--mono)}
.crumb a:hover{color:var(--gold)}
/* Opts a run of text out of an ancestor's uppercase transform, so the
   plural "s" in "Testing & COAs" is not rendered as "COAS". */
.no-caps{text-transform:none}
/* Inside a widely tracked button the gap before the lowercase run reads as a
   space, so the tracking is closed up for it. */
.btn .no-caps,.pill .no-caps{letter-spacing:normal;margin-left:-.16em}
/* .btn is inline-flex, so a bare span beside a text node becomes a second
   flex item and can wrap onto its own line. Keep button labels together. */
.btn > span{display:inline;white-space:nowrap}

.prose{max-width:76ch;margin:0 auto}
.prose h2{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-2);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-size:1.24rem;letter-spacing:.03em;color:#fff;margin:26px 0 8px}
.prose p,.prose li{color:var(--text-mid);font-size:.94rem;line-height:1.8}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--gold)}
.prose strong{color:#fff}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

.notice{
  border:1px solid rgba(212,180,92,.32);background:rgba(212,180,92,.05);
  padding:22px 24px;margin:28px 0;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.notice > strong{display:block;margin-bottom:7px;color:var(--gold-2);font-family:var(--serif);font-size:1.1rem;letter-spacing:.04em}
.notice p strong{display:inline;font-family:inherit;font-size:inherit;font-weight:700;color:#fff;letter-spacing:normal}
.notice p{font-size:.86rem;color:var(--text-mid);margin:0}
.notice a{color:var(--gold)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--brd);padding:clamp(44px,5vw,70px) 0 0;font-size:.86rem;background:#020306}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px);padding-bottom:42px}
.site-footer .brand{margin-bottom:18px}
.footer-about{max-width:36ch;color:var(--text-soft);line-height:1.75;font-size:.82rem}
.footer-col h4{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:15px;font-family:var(--mono);font-weight:700;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px;color:var(--text-mid)}
.footer-col a:hover{color:var(--gold-2)}
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.06);padding:22px 0;font-size:.72rem;line-height:1.75;color:var(--text-soft)}
.footer-disclaimer a{color:var(--gold)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);padding:18px 0 26px;
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);font-family:var(--mono);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}

/* floating whatsapp */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:27px;height:27px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ==========================================================================
   READABILITY — text blocks get their own backing so they never sit
   directly on the molecular artwork.
   ========================================================================== */
.panel,
.prose,
.page-head .wrap,
.section-head{
  position:relative;
  background:rgba(6,8,15,.78);
  backdrop-filter:blur(9px);
  border:1px solid rgba(212,180,92,.16);
  padding:clamp(20px,2.6vw,38px);
}
.page-head .wrap{
  max-width:calc(var(--wrap) - var(--gut));
  margin-inline:auto;
  padding-inline:clamp(20px,3vw,48px);
}
.section-head{
  padding:clamp(18px,2.2vw,30px) clamp(20px,2.6vw,38px);
}
.center .section-head{margin-inline:auto}
.prose{margin-inline:auto}
.page-head .lede{margin-inline:auto}
.page-head{text-align:center}

/* headings and body copy lift off the panel */
.page-head h1,.section-head h2,.prose h2,.prose h3{
  text-shadow:0 2px 16px rgba(0,0,0,.85);
}
.lede,.prose p,.prose li,.feature p,.step-card p,.contact-card p{
  color:var(--text-mid);
}
.hero-sub{color:#cfe0f2}
.crumb{color:#aab6c9}
#result-count{color:var(--text-mid)}

/* filter row + search sit on their own strip */
.controls{
  background:rgba(6,8,15,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(212,180,92,.14);
  padding:14px clamp(14px,1.8vw,20px);
}


/* ==========================================================================
   ADMIN ENTRY + STOCK STATUS
   ========================================================================== */
.admin-fab{
  position:fixed;left:18px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid rgba(212,180,92,.45);border-radius:2px;
  background:rgba(4,5,10,.82);backdrop-filter:blur(8px);
  color:var(--gold);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;font-family:var(--mono);
  opacity:.5;transition:opacity .2s ease,border-color .2s ease,background .2s ease;
}
.admin-fab:hover{opacity:1;border-color:var(--gold);background:rgba(212,180,92,.12)}
.admin-fab svg{width:14px;height:14px;flex:none}
@media (max-width:620px){
  .admin-fab span{display:none}
  .admin-fab{padding:10px;left:14px;bottom:16px}
}

.pcard-stock{
  flex:none;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--mono);margin-bottom:8px;
}
.pcard-stock.is-in{color:#5fe0a0}
.pcard-stock.is-out{color:#ff7676}

/* ==========================================================================
   TOUCH SCROLLING
   The product panel is a static box - all information is shown at once and
   nothing scrolls inside it, so a finger drag over a card always scrolls
   the page rather than being swallowed by the card.
   ========================================================================== */
.pcard,.pcard-inner,.pcard-info,.pcard-face{touch-action:pan-y}
.pcard-info{overflow:hidden}


/* ---------- published COA / batch records ---------- */
.coa-none{color:var(--text-soft);font-style:italic}
/* Batch records table. Nine columns will not fit a phone, so the wrapper
   scrolls horizontally rather than squeezing the text to illegibility. */
.coa-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--brd-soft);border-radius:var(--radius);
  background:var(--panel);margin-bottom:20px;
}
.coa-table{width:100%;min-width:780px;border-collapse:collapse;font-size:.9rem}
.coa-table th,.coa-table td{
  text-align:left;padding:12px 16px;white-space:nowrap;
  border-bottom:1px solid var(--brd-soft);
}
.coa-table thead th{
  font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--brd);
}
.coa-table tbody td{color:var(--text-mid)}
.coa-table tbody tr:last-child td{border-bottom:0}
.coa-table tbody tr:hover td{background:rgba(255,255,255,.025)}
.coa-table tbody td:first-child{color:var(--text);font-weight:600;white-space:normal}
@media (max-width:700px){
  .coa-table th,.coa-table td{padding:10px 12px}
}
.coa-mono{font-family:var(--mono);font-size:.82rem}
.coa-tag{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(212,180,92,.45);padding:2px 7px;margin-left:7px;
  white-space:nowrap;
}
.coa-view{color:var(--gold-2);font-weight:600;white-space:nowrap}
.coa-latest-title{margin-bottom:12px}
.coa-latest{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 22px;
  border:1px solid var(--brd);padding:18px 20px;margin:0 0 16px;
}
.coa-latest dt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:3px;
}
.coa-latest dd{margin:0;font-size:.92rem}
.coa-latest-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.coa-prev{color:var(--text-mid);text-decoration:underline;font-size:.88rem}


/* ==========================================================================
   LIGHT THEME — October 2026
   A white, clinical treatment layered over the base rules above: one blue
   accent in place of the gold, a sans type stack, flat surfaces and no glow.
   Kept as one block so it reads as a single decision and can be lifted out
   in one piece; the values can be folded into the base rules later.
   ========================================================================== */

/* ---------- Palette: one medical blue, a disciplined ink ramp ---------- */
:root{
  --bg:#ffffff; --bg-2:#f7fafc; --panel:#ffffff;
  --brd:#dde5ee; --brd-soft:#e8eef4;
  --text:#0c2136; --text-mid:#44596f; --text-soft:#76899d;
  --gold:#0b5fbf; --gold-2:#0a4a96; --gold-deep:#083a78; --gold-grad:none;
  --radius:3px; --chamfer:0px;
}
body{background:#fff;color:var(--text-mid)}

/* ---------- Typography: sans, sentence case, tight ---------- */
:root{ --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
h1,h2,h3,h4{color:var(--text);font-weight:650;letter-spacing:-0.012em}
.hero h1,.page-head h1,.section-head h2,.prose h2,.prose h3,.cta-band h2,
.pcard-info h4,.notice > strong,.contact-value,.coa-latest-title,
.site-footer h3,.brand-name{
  font-family:var(--serif) !important;text-transform:none !important;
  letter-spacing:-0.012em !important;font-weight:650 !important;text-shadow:none !important;
}
.hero h1,.page-head h1,h1.gold{
  background-image:none !important;-webkit-background-clip:border-box !important;
  background-clip:border-box !important;-webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;font-size:clamp(2rem,3.4vw,2.9rem);
}
.section-head h2,.prose h2{font-size:clamp(1.3rem,2.1vw,1.65rem)}
.prose h3{font-size:1.08rem}
.cta-band h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.brand-name{font-size:1.1rem;color:var(--text)}
.site-footer h3{font-size:.82rem;letter-spacing:.02em !important;color:var(--text)}
.eyebrow,.brand-sub,.crumb,.compliance-bar,.pcard-cat,.chip,.pill,.btn,
.coa-table thead th,.foot-bottom{letter-spacing:.08em !important;font-size:.64rem}
.hero-sub{letter-spacing:.1em !important;color:var(--text-soft);font-size:.78rem}
.lede,.prose p,.prose li{color:var(--text-mid)}
.crumb{color:var(--text-soft)}

/* ---------- Background: white wash; the DNA layer is injected separately ---------- */
.bg-fx::after{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.84) 40%,rgba(255,255,255,.96))}
.orb--blue{background:radial-gradient(ellipse at 60% 45%,rgba(11,95,191,.10) 0%,rgba(11,95,191,0) 70%)}
.orb--violet{background:radial-gradient(ellipse at 40% 45%,rgba(11,95,191,.07) 0%,rgba(11,95,191,0) 70%)}
.orb--aqua{background:none}
.mol{display:none}

/* ---------- Flat surfaces, hairline rules, no chamfers ---------- */
.panel,.prose,.page-head .wrap,.section-head,.controls,.notice,.cta-band,.coa-table-wrap{
  background:#fff;border:1px solid var(--brd);box-shadow:none;backdrop-filter:none;
  clip-path:none !important;border-radius:3px;
}
.cta-band{background:#f7fafc}
.notice{border-left:3px solid var(--gold)}
.notice > strong{color:var(--text);font-size:.98rem}
.compliance-bar{background:#f2f6fa;border-bottom:1px solid var(--brd);color:var(--text-soft)}
.compliance-bar strong{color:var(--gold-2)}
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--brd);backdrop-filter:none}
.site-footer{background:#f7fafc;border-top:1px solid var(--brd);color:var(--text-mid)}
.site-footer a{color:var(--text-mid)}
.brand-mark{background:var(--gold);border-color:var(--gold);color:#fff;border-radius:3px}
.page-head h1,.section-head h2,.prose h2,.prose h3{text-shadow:none}
.foot-legal,.foot-legal p,.foot-bottom{color:var(--text-soft)}
.foot-legal strong{color:var(--text)}

/* ---------- Controls ---------- */
.btn{border:1px solid var(--brd);background:#fff;color:var(--text);border-radius:3px;font-weight:600}
.btn:hover{background:#f2f6fa;border-color:var(--gold);transform:none}
.btn--solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--wa{background:#0b5fbf;border-color:#0b5fbf;color:#fff}
.btn--wa:hover{background:#0a4a96;border-color:#0a4a96;box-shadow:none}
.pill{border:1px solid var(--brd);background:#fff;color:var(--text-mid);border-radius:3px}
.pill:hover{background:#f2f6fa}
.atom{color:var(--gold)}
.chip{border:1px solid var(--brd);background:#fff;color:var(--text-mid);border-radius:3px}
.chip:hover{border-color:var(--gold);color:var(--gold-2)}
.chip.is-active{background:var(--gold);border-color:var(--gold);color:#fff}
.search input{background:#fff;border:1px solid var(--brd);color:var(--text);border-radius:3px}
.nav a{color:var(--text-mid);font-weight:600}
.nav a.is-active{color:var(--gold-2)}
.admin-fab{background:#fff;border:1px solid var(--brd);color:var(--text-soft);opacity:1}
.fab--wa{box-shadow:0 2px 10px rgba(12,33,54,.18)}

/* ---------- Product cards: ARTWORK AND COLOURS UNCHANGED ----------
   Only the chamfer is squared and the information panel turned white, so the
   cards sit on the light page without changing the product photography. */
.pcard,.pcard-inner{clip-path:none !important;border-radius:3px}
.pcard:hover,.pcard.is-open{transform:translateY(-2px)}
.pcard-info{
  background:rgba(255,255,255,.97) !important;color:var(--text-mid);
}
.pcard-info h4{color:var(--text)}
.pcard-cat{color:var(--text-soft)}
.pcard-price{color:var(--text);font-weight:700}
.pcard-blurb{color:var(--text-mid)}
.pcard-open{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.65);color:#0c2136;font-weight:600}

/* ---------- Tables ---------- */
.coa-table thead th{background:#f2f6fa;color:var(--text);border-bottom:1px solid var(--brd)}
.coa-table th,.coa-table td{border-bottom:1px solid var(--brd-soft)}
.coa-table tbody td{color:var(--text-mid)}
.coa-table tbody td:first-child{color:var(--text)}
.coa-table tbody tr:hover td{background:#f7fafc}

/* The DNA layer spans the document and sits above the background wash but
   below the content panels. */
.bg-fx{z-index:-1 !important}
.dna-fx{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:hidden}
body{position:relative}

/* White body text that was readable on the dark theme and vanishes on white. */
.prose h3{color:var(--text) !important}
.prose strong{color:var(--text) !important}
.notice p strong{color:var(--text) !important}
.contact-value{color:var(--text) !important}
.coa-latest dt{color:var(--text-soft)}
.coa-latest dd{color:var(--text-mid)}
.footer-disclaimer,.footer-disclaimer p{color:var(--text-soft) !important}
.footer-disclaimer strong{color:var(--text) !important}
.footer-about{color:var(--text-mid) !important}
.footer-bottom,.footer-bottom *{color:var(--text-soft) !important}

/* The hero/title band is the one surface the strands show through, so the
   DNA reads boldly behind the VIP Peptide lockup instead of being covered. */
.page-head .wrap,.hero .wrap{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Every content surface is opaque so no strand runs through body text. */
.feature,.step-card,.contact-card,.ref-card,.faq-item,.related-card{
  background:#fff !important;border:1px solid var(--brd);border-radius:3px;
}

/* ---------- background artwork ----------
   The helix and lattices are lifted from the product card photography and
   recoloured (see scripts/extract-bg-art.py). The strip tiles on the helix's
   own 154px period, so it repeats down a page of any length without a seam. */
.dna-fx{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:hidden}
.dna-strip{
  position:absolute;top:0;bottom:0;
  background-image:url(/static/img/bg/helix.png);
  background-repeat:repeat-y;
}
.dna-fx img{position:absolute;height:auto}
body{position:relative}
.bg-fx{z-index:-1}

/* ---------- hero ----------
   Was an autoplaying DNA video: 3.9MB of mp4 and webm competing with the
   page for a phone's bandwidth. It is now a still frame taken from that
   same video, so the hero looks the same and costs ~39KB. The element keeps
   the video's exact box, so the layout is unchanged. */
.v-hero{position:relative;overflow:hidden;background:#04070e;min-height:560px}
.v-hero .v-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.v-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(4,7,14,.96) 0%,rgba(4,7,14,.78) 32%,rgba(4,7,14,.08) 54%,
                                   rgba(4,7,14,.14) 70%,rgba(4,7,14,.42) 88%,rgba(4,7,14,.52) 100%)}
.v-hero .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:40px;
  min-height:560px;padding-block:48px}
.v-copy{max-width:620px}
.v-hero .eyebrow{color:#5aa6ff;margin-bottom:18px}
.v-hero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;color:#fff !important;
  -webkit-text-fill-color:#fff !important;margin-bottom:20px;text-shadow:0 2px 24px rgba(0,0,0,.75)}
.v-hero h1 .b{display:block;color:#3b9bff;-webkit-text-fill-color:#3b9bff}
.v-lede{font-size:1.02rem;color:#eff4fb;font-weight:600;margin-bottom:6px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.v-note{font-size:.95rem;color:#c3d2e4;margin-bottom:28px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.v-hero .btn--solid{background:#1668c9;border-color:#1668c9;color:#fff}
.v-hero .btn--solid:hover{background:#0f56ad;border-color:#0f56ad}

/* the four points sit in one panel so they read over the moving footage */
.v-points{margin-left:auto;display:grid;gap:0;min-width:360px;
  background:rgba(6,11,20,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(130,180,245,.24);border-radius:4px;padding:6px 26px}
.v-point{display:flex;align-items:center;gap:16px;padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.09)}
.v-point:last-child{border-bottom:0}
.v-point .ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(150,200,255,.75);background:rgba(4,7,14,.55);color:#8ec8ff}
.v-point .ic svg{width:19px;height:19px}
.v-point b{display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.v-point span{font-size:.73rem;color:#cad7e8;letter-spacing:.04em;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}

@media (max-width:1100px){
  .v-hero .wrap{flex-direction:column;align-items:flex-start;gap:30px}
  .v-points{margin-left:0;width:100%;min-width:0}
}
@media (max-width:600px){
  .v-hero,.v-hero .wrap{min-height:0}
  .v-hero .wrap{padding-block:38px}
  .v-points{padding:4px 18px}
  .v-point{padding:14px 0}
}
/* The reduced-motion rule that swapped the video for its poster is gone:
   the hero is a still image for everyone now, so there is no motion to
   reduce and nothing to override. */

/* ==========================================================================
   PAGE WALLPAPER — October 2026

   The DNA artwork runs behind the whole site rather than sitting beside the
   content. That only works if the panels come off: body and the content cards
   were solid white and were painting over it.

   With the panels gone the text sits on the artwork everywhere, so two things
   keep it readable. The artwork is laid under a white sheet that holds it at
   30%, and scripts/build-backdrop.py recomposes the source so the dense helix
   is anchored in the outer margins with the calm band stretched across the
   middle — the site's text runs from x=54 to x=1386 of a 1440px viewport, so
   there is no margin to hide a helix in and it has to be pushed out of the
   text column instead.

   Body copy also goes one shade darker, which is what buys the artwork its
   strength. Measured against the darkest pixel of the artwork, body text holds
   8.5:1 anywhere on the page and 9.0:1 under the main text column.

   The old decorative layers (.bg-fx orbs and waves, .dna-fx helix strip) are
   no longer built — see site.js. Their rules above are inert.
   ========================================================================== */
/* The JPEG declaration comes first as the floor; the image-set() that follows
   hands WebP to browsers that understand both, and is simply ignored by any
   that do not. Same artwork either way. */
html{
  background:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)) fixed,
    url(/static/img/bg/backdrop.jpg) center center / cover no-repeat fixed;
}
html{
  background:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)) fixed,
    image-set(url(/static/img/bg/backdrop.webp) type("image/webp"),
              url(/static/img/bg/backdrop.jpg) type("image/jpeg"))
      center center / cover no-repeat fixed;
}
body,.prose,.notice,.page-head,.section,.wrap,.filters{background:transparent}
.site-footer{background:rgba(247,250,252,.82)}
body,p,li,td,.prose p,.prose li{color:#2a3b4f}

/* On a phone the content runs edge to edge, so the viewport crops to the calm
   middle of the artwork and the helix falls outside it. Nothing to adjust. */

/* ==========================================================================
   HOW YOUR ORDER IS POSTED — October 2026

   Lifted from the Precision Peptides "what arrives" block and recoloured to
   this site's palette. Precision pairs the mailer with a presentation box;
   VIP has no box — products ship in their original Tera packaging — so only
   the mailer half comes across and the grid carries one figure, not two.

   The figure column is capped rather than given a fraction: left to grow, a
   640px-wide bag swamps the copy beside it. The bag PNG is cut out on
   transparency and the note is a tinted panel, so both need an opaque
   surface or the wallpaper's helix runs straight through them.
   ========================================================================== */
.kit-feature{
  display:grid;grid-template-columns:minmax(220px,330px) minmax(0,1fr);
  gap:clamp(22px,3.5vw,52px);align-items:center;
}
.kit-fig{margin:0;display:flex;flex-direction:column;gap:9px}
.kit-fig img{
  width:100%;height:auto;display:block;box-sizing:border-box;
  background:#fff;padding:16px;border:1px solid var(--brd);border-radius:3px;
  object-fit:contain;
}
.kit-fig figcaption{
  font-size:.78rem;color:var(--text-soft);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.kit-free{
  display:inline-block;padding:2px 9px;border-radius:999px;
  background:#1f8a2e;color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.kit-copy h2{margin:0 0 12px}
.kit-copy .lede{margin:0 0 14px}
.kit-copy .kit-strong{color:var(--text);font-weight:650;margin:0 0 18px;line-height:1.7;max-width:64ch}
.kit-copy .kit-note{
  margin:0;max-width:62ch;padding:12px 15px;
  border:1px solid var(--brd);border-left:3px solid var(--gold);border-radius:3px;
  background:#f2f6fa;color:var(--text-mid);
  font-size:.86rem;line-height:1.6;
}
@media (max-width:860px){
  .kit-feature{grid-template-columns:1fr;gap:26px}
  .kit-fig{max-width:330px}
  .kit-fig img{padding:14px}
}