/* ============================================================================
   SOLAS SCIENCE — /science/
   Palette lifted from the live storefront so this page is native, not a graft:
   #16243a ink · #1e4574 cobalt · #346cac blue · #3b82f6 bright · #f4f8fd pale
   Type is Montserrat (already sitewide) + Anton for the assay numerals.
   ========================================================================= */
:root{
  --ink:#16243a; --cobalt:#1e4574; --blue:#346cac; --bright:#3b82f6;
  --pale:#f4f8fd; --paper:#fff; --mist:#ebf2fb; --hair:#dfe5ec;
  --muted:#5a6b80; --soft:#a0c3de; --verify:#00b67a;
  --max:1240px; --gut:clamp(20px,5vw,64px);
  --step:clamp(64px,9vw,132px);        /* section rhythm */
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ============================================================================
   HOST LAYOUT OVERRIDES (scoped to body.solas-sci -- this page only)
   Astra runs `ast-separate-container`: the article is a white card with 100px
   padding sitting inside a 1440px .ast-container, so a full-bleed lander renders
   "inside a screen". The theme also prints its own <h1>Science</h1> above the
   content, which both competes with the hero and puts TWO h1s on the page.
   Everything below is scoped and reversible -- no other page is touched.
   ========================================================================= */
body.solas-sci .site-content > .ast-container,
body.solas-sci .ast-container{max-width:100%!important;padding-left:0!important;padding-right:0!important;margin:0!important}
body.solas-sci .content-area,
body.solas-sci #primary,
body.solas-sci .site-main{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important}
body.solas-sci .ast-article-single,
body.solas-sci .ast-article-post,
body.solas-sci article.page{padding:0!important;margin:0!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;background:transparent!important}
body.solas-sci .entry-content{margin:0!important;padding:0!important}
/* the theme's own page title + its decorative flourish */
body.solas-sci .entry-header,
body.solas-sci .entry-title,
body.solas-sci .ast-single-post-order,
body.solas-sci .ast-archive-description{display:none!important}
body.solas-sci .site-content{padding-top:0!important;margin-top:0!important}
body.solas-sci #content{padding:0!important;margin:0!important}

*,*::before,*::after{box-sizing:border-box}
body.sx{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
.sx img{max-width:100%;display:block}
.sx a{color:inherit}
.sx-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* --- shared type ------------------------------------------------------- */
.sx-eyebrow{font-size:12px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  color:var(--blue);margin:0 0 18px}
.sx-h1{font-size:clamp(40px,6.6vw,78px);line-height:1.03;font-weight:800;letter-spacing:-.025em;margin:0}
.sx-h2{font-size:clamp(30px,4.2vw,50px);line-height:1.1;font-weight:800;letter-spacing:-.022em;margin:0}
.sx-h3{font-size:clamp(23px,2.5vw,31px);line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0}
.sx-lede{font-size:clamp(17px,1.8vw,21px);line-height:1.6;color:var(--muted);font-weight:500}
.sx-rule{height:1px;background:var(--hair);border:0;margin:0}

/* --- hero -------------------------------------------------------------- */
.sx-hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--cobalt)}
.sx-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* LIGHT hero, navy type -- deliberately not the default dark-overlay treatment.
   This photograph is near-white by design (bright pharma studio, cobalt accents). Any scrim dark
   enough to carry white text flattens it to muddy navy and throws away the one quality that makes
   it good. A pale wash keeps the image airy AND matches the brand's own identity: the product
   labels are navy type on white, so the hero now reads as the same system. */
.sx-hero{background:var(--pale)}
.sx-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(246,249,253,.97) 0%,rgba(246,249,253,.90) 28%,rgba(246,249,253,.52) 55%,rgba(246,249,253,.06) 82%)}
.sx-hero__inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;
  padding:clamp(56px,10vw,110px) var(--gut) clamp(38px,5vw,60px);color:var(--ink)}
.sx-hero__h1{max-width:16ch;color:var(--ink)}
.sx-hero__sub{max-width:52ch;margin:26px 0 0;font-size:clamp(16px,1.7vw,20px);
  line-height:1.6;color:var(--muted);font-weight:500}
/* Stat strip: the client's own published figures, not invented ones. */
.sx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(38px,5vw,58px);
  background:var(--hair);border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.sx-stat{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);padding:20px 22px}
.sx-stat b{display:block;font-size:clamp(24px,3.1vw,36px);font-weight:800;letter-spacing:-.02em;
  line-height:1.1;color:var(--cobalt)}
.sx-stat span{display:block;margin-top:5px;font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.sx-stats{grid-template-columns:repeat(2,1fr)}}
/* The desktop scrim runs left-to-right, which on a narrow viewport leaves the body copy sitting
   over the busiest part of the photograph. Swap to a vertical wash so text always has backing. */
@media(max-width:760px){
  .sx-hero__scrim{background:linear-gradient(180deg,rgba(246,249,253,.60) 0%,rgba(246,249,253,.88) 30%,rgba(246,249,253,.96) 62%,rgba(246,249,253,.98) 100%)}
}

/* --- opening statement -------------------------------------------------- */
.sx-open{padding:var(--step) 0 calc(var(--step) * .74)}
.sx-open__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,6vw,88px);align-items:start}
.sx-open__body p{margin:0 0 20px;font-size:clamp(17px,1.55vw,19.5px);line-height:1.68}
.sx-open__body p:last-child{margin-bottom:0}
.sx-open__body strong{font-weight:700;color:var(--cobalt)}
@media(max-width:900px){.sx-open__grid{grid-template-columns:1fr;gap:26px}}

/* --- the seven assays --------------------------------------------------- */
.sx-panel{background:var(--pale);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:var(--step) 0}
.sx-panel__head{max-width:none;margin-bottom:clamp(46px,6vw,76px)}
.sx-panel__head .sx-lede{max-width:56ch;margin:20px 0 0}

.sx-assay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4.6vw,72px);align-items:center;padding:clamp(38px,5vw,60px) 0;
  border-top:1px solid var(--hair)}
.sx-assay:first-of-type{border-top:0}
.sx-assay:nth-child(even) .sx-assay__media{order:2}
.sx-assay__media{position:relative;border-radius:5px;overflow:hidden;background:var(--mist);
  box-shadow:0 20px 48px -26px rgba(22,36,58,.42), 0 2px 6px -2px rgba(22,36,58,.10)}
.sx-assay__media img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.05s var(--ease)}
.sx-assay:hover .sx-assay__media img{transform:scale(1.032)}
/* The lab photography is deliberately bright, so a white numeral has nothing to sit against.
   This wedge is the only thing making it read -- a text-shadow alone washed out. */
/* Spans the FULL box on purpose: a gradient confined to a corner-sized element ends at that
   element's edge, and the resulting straight seam across the photograph is very visible. */
.sx-assay__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(76% 86% at 0% 100%,rgba(11,28,54,.58) 0%,rgba(11,28,54,.26) 40%,rgba(11,28,54,0) 70%)}
.sx-assay__no{position:absolute;left:0;bottom:0;z-index:2;font-family:'Anton',sans-serif;
  font-size:clamp(52px,7vw,92px);line-height:.78;color:#fff;opacity:.96;
  padding:0 0 14px 18px;text-shadow:0 3px 22px rgba(8,22,42,.5);letter-spacing:.01em}
.sx-assay__kicker{display:flex;align-items:center;gap:11px;margin-bottom:15px;flex-wrap:wrap}
.sx-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue);background:var(--mist);border:1px solid #d3e2f4;border-radius:2px;padding:5px 11px}
.sx-assay__q{margin:16px 0 0;font-size:clamp(16.5px,1.6vw,19px);line-height:1.62;color:var(--muted)}
.sx-assay__why{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--hair);
  font-size:15.5px;line-height:1.6;color:var(--muted)}
.sx-assay__why b{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:7px}
@media(max-width:860px){
  .sx-assay{grid-template-columns:1fr;gap:22px;padding:34px 0}
  .sx-assay:nth-child(even) .sx-assay__media{order:0}
}

/* --- process bands ------------------------------------------------------ */
.sx-proc{padding:var(--step) 0}
.sx-proc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,44px);
  margin-top:clamp(40px,5vw,62px)}
.sx-card{border:1px solid var(--hair);border-radius:5px;overflow:hidden;background:var(--paper);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.sx-card:hover{box-shadow:0 24px 54px -30px rgba(22,36,58,.44);transform:translateY(-3px)}
.sx-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sx-card__body{padding:clamp(22px,2.6vw,32px)}
.sx-card__body p{margin:13px 0 0;color:var(--muted);font-size:16px;line-height:1.62}
@media(max-width:780px){.sx-proc__grid{grid-template-columns:1fr}}

/* --- COA call to action ------------------------------------------------- */
.sx-coa{background:var(--cobalt);color:#fff;padding:clamp(52px,7vw,86px) 0;
  background-image:radial-gradient(1100px 380px at 12% -30%,rgba(59,130,246,.42),transparent 62%)}
.sx-coa__grid{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:clamp(26px,4vw,56px);
  align-items:center}
.sx-coa p{margin:16px 0 0;color:#cfe0f4;font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;max-width:56ch}
/* ‼️Selector must out-specify `.sx a{color:inherit}` (0,1,1). A bare `.sx-btn` (0,1,0) LOSES
   that fight and the label renders white-on-white -- a button that looks like a blank box. */
.sx a.sx-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--cobalt);
  font-weight:700;font-size:15px;letter-spacing:.01em;padding:16px 30px;border-radius:3px;
  text-decoration:none;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sx a.sx-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
.sx a.sx-btn svg{width:15px;height:15px;flex:none}
.sx-coa__actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){.sx-coa__grid{grid-template-columns:1fr}}

/* --- catalog grid (PX_DATA) --------------------------------------------- */
.sx-cat{padding:var(--step) 0}
.sx-cat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* Filters are CSS-only (hidden radio + :has()). This host delays ALL JavaScript -- external and
   inline -- until the first user interaction, so anything wired in JS is dead on arrival. */
.sx-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(26px,3vw,38px)}
.sx-fr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.sx-filter{display:inline-block;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);background:var(--paper);border:1px solid var(--hair);border-radius:2px;
  padding:9px 17px;cursor:pointer;user-select:none;transition:all .26s var(--ease)}
.sx-filter:hover{border-color:var(--soft);color:var(--cobalt)}
.sx-fr:focus-visible + .sx-filter{outline:2px solid var(--bright);outline-offset:2px}
.sx-cat:has(#sxf-all:checked)        label[for="sxf-all"],
.sx-cat:has(#sxf-peptides:checked)   label[for="sxf-peptides"],
.sx-cat:has(#sxf-bundles:checked)    label[for="sxf-bundles"],
.sx-cat:has(#sxf-materials:checked)  label[for="sxf-materials"],
.sx-cat:has(#sxf-nootropics:checked) label[for="sxf-nootropics"]{
  background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.sx-cat:has(#sxf-peptides:checked)   .sx-tile:not([data-c="Peptides"]),
.sx-cat:has(#sxf-bundles:checked)    .sx-tile:not([data-c="Bundles"]),
.sx-cat:has(#sxf-materials:checked)  .sx-tile:not([data-c="Materials"]),
.sx-cat:has(#sxf-nootropics:checked) .sx-tile:not([data-c="Nootropics"]){display:none}
.sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:clamp(14px,1.7vw,22px);margin-top:clamp(26px,3vw,36px)}
.sx-tile{display:flex;flex-direction:column;text-decoration:none;background:var(--paper);
  border:1px solid var(--hair);border-radius:5px;overflow:hidden;
  transition:box-shadow .42s var(--ease),transform .42s var(--ease),border-color .42s var(--ease)}
.sx-tile:hover{transform:translateY(-4px);border-color:#cfe0f4;
  box-shadow:0 22px 46px -28px rgba(22,36,58,.46)}
.sx-tile__img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--pale)}
.sx-tile__body{padding:15px 17px 18px;border-top:1px solid var(--hair);display:flex;
  flex-direction:column;gap:7px;flex:1}
.sx-tile__cat{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.sx-tile__name{font-size:15.5px;font-weight:700;letter-spacing:-.005em;line-height:1.32;color:var(--ink)}
.sx-tile__go{margin-top:auto;padding-top:9px;font-size:12px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:6px;transition:color .3s var(--ease)}
.sx-tile:hover .sx-tile__go{color:var(--cobalt)}
.sx-tile__go svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.sx-tile:hover .sx-tile__go svg{transform:translateX(3px)}
/* 2-up on phones. At one column, 29 tiles is a ~14,000px scroll nobody reaches the end of. */
@media(max-width:560px){
  .sx-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .sx-tile__body{padding:12px 12px 14px;gap:5px}
  .sx-tile__name{font-size:13.5px}
  .sx-tile__go{display:none}
}

/* --- disclaimer --------------------------------------------------------- */
.sx-disc{background:var(--pale);border-top:1px solid var(--hair);padding:clamp(34px,4vw,52px) 0}
.sx-disc p{margin:0;font-size:13.5px;line-height:1.68;color:var(--muted);max-width:88ch}
.sx-disc b{color:var(--cobalt);font-weight:700}

/* --- scroll reveal ------------------------------------------------------
   ‼️Content is VISIBLE BY DEFAULT. The hidden state only exists under .sx-anim, which the
   script adds to <html> and only when it runs early enough to animate honestly.
   This host runs Airlift, which delays every script until the first user interaction. With the
   hidden state as the CSS default, that delay renders the entire page blank until someone moves
   the mouse. Never let a decorative animation own whether the content is visible. */
.sx-anim .sx-rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sx-anim .sx-rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sx-anim .sx-rv{opacity:1;transform:none;transition:none}
  .sx *{transition:none!important;animation:none!important}
}