/* NuePharma Health. One system for the informational site and the storefront. */

*,*::before,*::after{box-sizing:border-box}
/* Horizontal overflow.
   This was `html,body{overflow-x:hidden;overflow-x:clip}`. Two problems: an
   overflow value on either html or body PROPAGATES to the viewport, and the
   propagated value there was `clip`, which makes the viewport a non-scrolling
   container — the page could not be scrolled programmatically at all. `hidden`
   propagates to a viewport that still scrolls vertically while clipping the x
   axis, which is the behaviour actually wanted. Set on body only. */
body{overflow-x:hidden}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--graphite);
  font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.02rem,1.15vw,1.18rem);
  line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,canvas,video{display:block;max-width:100%}
h1,h2,h3,h4{font-family:"Schibsted Grotesk",system-ui,sans-serif;font-weight:700;margin:0;
  line-height:1.02;letter-spacing:-.025em}
p{margin:0}
a{color:inherit}
::selection{background:var(--trace);color:var(--paper)}
:focus-visible{outline:2px solid var(--trace);outline-offset:3px;border-radius:1px}
.np-ink :focus-visible{outline-color:var(--trace-lift)}

.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.np-wrap{max-width:var(--maxw);margin:0 auto;width:100%}
/* More air. The premium pass moved the whole site toward whitespace as the
   primary hierarchy device rather than borders and fills. */
.np-section{position:relative;padding:clamp(104px,15vh,196px) var(--pad)}
.np-ink{background:var(--ink);color:var(--bone)}
.np-ink h1,.np-ink h2,.np-ink h3{color:var(--bone)}
.np-main{padding-top:68px}

/* The WooCommerce wrapper.
   Every other template puts its content inside `.np-section`, which carries
   `padding: ... var(--pad)`. The shop wrapper is emitted by
   `nuepharma_wc_wrapper_open()` as `.np-main--shop > .np-wrap`, and `.np-wrap`
   only centres a max-width — it has no padding of its own. So shop, cart,
   checkout and every product page rendered hard against both viewport edges.
   That is the whole bug: not a left margin, a missing container gutter.

   `--pad` is the site's own gutter (20px at <=720px, 5vw above), so this stays
   in step with the homepage instead of introducing a second spacing scale. */
.np-main--shop{
  padding-inline:var(--pad);
  /* The header is fixed, so its height has to be cleared explicitly before any
     breathing room is added — a bare clamp() here put the breadcrumb
     underneath the nav on short viewports. 64px is the mobile header. */
  padding-top:calc(64px + clamp(20px,3.5vh,44px));
  padding-bottom:clamp(72px,12vh,140px);
}
@media (min-width:1024px){
  .np-main--shop{padding-top:calc(72px + clamp(28px,5vh,64px))}
}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.np-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bone);
  padding:14px 20px;font-family:"IBM Plex Mono",monospace;font-size:.8rem;letter-spacing:.08em;text-decoration:none}
.np-skip:focus{left:12px;top:12px}

.np-kicker{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);display:flex;align-items:baseline;gap:14px}
.np-kicker::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.np-ink .np-kicker{color:var(--bone-dim)}
.np-ink .np-kicker::after{background:rgba(237,234,226,.16)}
.np-h2{font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:-.03em}
.np-lede{font-size:clamp(1.14rem,1.55vw,1.42rem);line-height:1.55;max-width:46ch}
.np-body{max-width:62ch;color:var(--slate)}
.np-body strong{color:var(--graphite);font-weight:600}
.np-ink .np-body{color:var(--bone-dim)}
.np-ink .np-body strong{color:var(--bone)}

/* buttons, shared by the site and the store */
.np-btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;padding:15px 26px;text-decoration:none;border:1px solid var(--trace);
  cursor:pointer;background:var(--trace);color:#fff;border-radius:0;line-height:1;
  transition:background 1.13s var(--ease-out),color 1.13s var(--ease-out),
    border-color 1.13s var(--ease-out),transform 1.13s var(--ease-out)}
.np-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--graphite);border-color:var(--graphite);color:#fff;transform:translateY(-2px)}
.np-btn--2{background:none;border-color:var(--rule-strong);color:var(--graphite)}
.np-btn--2:hover{background:none;border-color:var(--graphite);color:var(--graphite)}
.np-ink .np-btn--2{border-color:rgba(237,234,226,.34);color:var(--bone)}
.np-ink .np-btn--2:hover{border-color:var(--bone);background:rgba(237,234,226,.07);color:var(--bone)}
.np-btn[disabled],.np-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;
  background:var(--slate);border-color:var(--slate)}
@media (pointer:coarse){.np-btn,.woocommerce a.button,.woocommerce button.button{min-height:44px}}

/* research-use markers */
.np-ruo{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);display:inline-block}
.np-ruo::before{content:"";display:inline-block;width:5px;height:5px;background:var(--trace);
  margin-right:9px;vertical-align:.15em}
.np-ink .np-ruo{color:var(--bone-dim)}
.np-ruo-band{border:1px solid var(--rule-strong);background:var(--paper);padding:16px 20px;margin:0 0 32px}
.np-ruo-band p{font-family:"IBM Plex Mono",monospace;font-size:.7rem;line-height:1.75;color:var(--slate)}
.np-ruo-band p+p{margin-top:8px}

/* nav
   The header carries its own surface at every scroll position. It used to be
   transparent over the hero, which is exactly why the mark disappeared on a
   phone: the brand was competing with a moving canvas for the first second of
   the visit. A defined surface makes the contrast deterministic instead of
   dependent on whatever happens to be behind it. Sticky behaviour unchanged. */
.np-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);height:64px;
  /* No hairline rule at rest. The border-bottom drew a hard horizontal line
     across the top of the page and, with the logo's old white panel, made the
     header read as a separate boxed strip rather than the top of one
     continuous surface. Separation now arrives only once the page has moved,
     and it arrives as a soft shadow rather than an edge. */
  background:rgba(247,248,250,.86);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background 1.73s var(--ease-cine),box-shadow 1.73s var(--ease-cine),
             border-color 1.73s var(--ease-cine)}
.np-nav.is-solid{background:rgba(247,248,250,.95);
  box-shadow:0 10px 34px -18px rgba(11,42,74,.22)}
@media (min-width:1024px){.np-nav{height:72px}}
/* the over-ink variant is retained as a hook but no longer inverts the header:
   the surface is the same on every template, so the lockup is tested once. */

/* The logo.
   Revision 018: the generated SVG mark was replaced site-wide with a supplied
   file, approved as-is and never redrawn. The source had a stray "(Recommended)"
   text strip cropped in at the top from wherever it was screenshotted; that
   strip was trimmed pixel-exact (a scanline crop, no resample) and nothing
   else about the artwork was touched. Sized by height with width auto, so the
   file's own aspect ratio is always kept. width/height attributes on the
   <img> itself (see inc/logo.php) reserve the space before it loads. */
.np-wordmark{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.np-wordmark--img .np-logo{display:block;height:34px;width:auto;max-width:none}
@media (min-width:1024px){.np-wordmark--img .np-logo{height:38px}}
/* 320px is the floor we support. The logo does not go below this. */
@media (max-width:359px){.np-wordmark--img .np-logo{height:29px}}

/* The logo asset is transparent, so it needs no container anywhere: no panel,
   no border, no background. The footer uses the reversed file rather than a
   light box behind the standard one. */
.np-wordmark--img{background:none;border:0;padding:0}

.np-navlinks{display:flex;gap:clamp(16px,2vw,30px);margin-left:auto;list-style:none;margin-block:0;padding:0}
.np-navlinks a{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--slate);padding:4px 0;position:relative}
.np-navlinks a:hover{color:var(--graphite)}
.np-navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 1.24s var(--ease-out)}
.np-navlinks a:hover::after{transform:scaleX(1)}
.np-nav .np-btn{padding:11px 20px;font-size:.72rem}
/* the burger is weighted to sit level with the lockup, not to out-shout it */
.np-burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer;
  width:42px;height:42px;flex-shrink:0}
.np-burger span{display:block;width:22px;height:1.75px;background:var(--graphite);
  margin:4.5px auto;border-radius:1px}
.np-panel{position:fixed;inset:0;z-index:99;background:var(--ink);display:none;flex-direction:column;
  justify-content:center;gap:4px;padding:90px var(--pad) 40px}
.np-panel.is-open{display:flex}
.np-panel a{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;font-size:clamp(1.8rem,8vw,2.6rem);
  letter-spacing:-.03em;color:var(--bone);text-decoration:none;padding:10px 0;
  border-bottom:1px solid rgba(237,234,226,.1)}
/* the IA stays visible on every desktop viewport. burger is mobile only. */
@media (max-width:1023px){.np-navlinks,.np-nav .np-navcta{display:none}.np-burger{display:block}}

/* hero */
/* shorter than it was: the showcase is the payoff, so the hero should not
   hold the visitor for two and a half screens before it. */
.np-hero{position:relative;height:145vh;z-index:1}
@media (max-width:900px){.np-hero{height:130vh}}
.np-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);display:flex;align-items:center}
#np-field{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0)}
/* the scrim protects the headline only. It used to sit over the whole frame,
   which is part of what buried the chain; it is now weighted to the left
   column where the type is and lets the right side of the field stay open. */
.np-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,13,18,.78) 0%,rgba(10,13,18,.5) 34%,rgba(10,13,18,.06) 62%,rgba(10,13,18,0) 80%),
             linear-gradient(180deg,rgba(10,13,18,.6) 0%,rgba(10,13,18,0) 20%)}
.np-surface{position:absolute;left:0;right:0;bottom:0;height:56%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(243,241,235,0) 0%,rgba(243,241,235,.55) 62%,var(--paper) 100%)}
.np-bands{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);z-index:3}
.np-band{position:absolute;top:50%;left:var(--pad);width:min(52ch,46%);
  transform:translate3d(0,calc(-50% + var(--ty,0px)),0);will-change:transform,opacity;
  opacity:0;text-shadow:var(--tshadow);color:var(--bone)}
.np-band::before{content:"";position:absolute;inset:-34% -22% -34% -40%;pointer-events:none;z-index:-1;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 68% 60% at 42% 50%,rgba(5,7,12,.7) 0%,rgba(5,7,12,.46) 46%,rgba(5,7,12,0) 76%)}
.np-band h1{font-size:clamp(2.75rem,7vw,6.4rem);letter-spacing:-.038em;margin-bottom:22px}
.np-band h2{font-size:clamp(2.1rem,5.2vw,4.4rem);letter-spacing:-.035em;margin-bottom:20px}
.np-band p{max-width:38ch;color:var(--bone-dim);font-size:clamp(1.04rem,1.35vw,1.28rem);line-height:1.5}
.np-band .np-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.np-band .np-btn{text-shadow:none}
.np-chipwrap{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;z-index:4}
.np-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(10,13,18,.55);
  border:1px solid rgba(152,161,173,.26);backdrop-filter:blur(10px);padding:7px 13px;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone-dim);text-shadow:0 1px 3px rgba(5,7,12,.85)}
.np-chip i{width:5px;height:5px;background:var(--trace-lift);flex-shrink:0;display:block}
@media (max-width:900px){
  /* On a phone the type column and the product stage share one narrow frame,
     so the band is pulled up off centre to leave the lower third to the
     products. Without this the call-to-action row lands on top of the vials. */
  .np-band{left:var(--pad);right:var(--pad);width:auto;top:38%}
  .np-band h1{font-size:clamp(2.5rem,10.5vw,3.4rem);margin-bottom:16px}
  .np-band p{font-size:1rem}
  /* one row rather than two stacked buttons: 60px of vertical space back */
  .np-band .np-row{flex-wrap:nowrap;gap:8px;margin-top:24px}
  .np-band .np-row .np-btn{padding:11px 13px;font-size:.63rem;white-space:nowrap}
  .np-band::before{inset:-26% -30%;
    background:radial-gradient(ellipse 82% 74% at 50% 50%,rgba(4,6,10,.88) 0%,rgba(4,6,10,.7) 52%,rgba(4,6,10,0) 82%)}
}

/* data tables and definition lists */
.np-dl{display:grid;grid-template-columns:minmax(140px,18ch) minmax(0,1fr);margin:0;font-size:.82rem}
.np-dl>div{display:contents}
.np-dl dt,.np-dl dd{padding:11px 0;border-bottom:1px solid var(--rule);margin:0}
.np-dl dt{color:var(--slate);letter-spacing:.05em}
.np-dl dd{color:var(--graphite);word-break:break-word}
.np-ink .np-dl dt{color:var(--bone-dim);border-bottom-color:rgba(152,161,173,.16)}
.np-ink .np-dl dd{color:var(--bone);border-bottom-color:rgba(152,161,173,.16)}
.np-table{width:100%;border-collapse:collapse;font-size:.8rem}
.np-table th,.np-table td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.np-table th{color:var(--slate);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}
.np-tablewrap{overflow-x:auto}

/* lot records */
.np-lotpanel{margin:26px 0;padding:22px 0 0;border-top:1px solid var(--rule)}
.np-lotpanel__code{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.np-lotpanel__code b{color:var(--trace);font-weight:500}
.np-lotpanel__none{font-size:.74rem;color:var(--slate);line-height:1.7}
.np-loop-lot{display:block;font-size:.68rem;letter-spacing:.06em;color:var(--slate);margin:6px 0}
.np-lotlist{border-top:1px solid var(--rule-strong)}
.np-lotlist a{display:grid;grid-template-columns:12ch minmax(0,1fr) auto auto;gap:clamp(16px,4vw,44px);
  align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left 1.5s var(--ease-out)}
.np-lotlist a:hover{padding-left:14px}
.np-lotlist .code{color:var(--trace);font-size:.82rem}
.np-lotlist .name{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;font-size:1.1rem}
.np-lotlist .meta{font-size:.74rem;color:var(--slate);white-space:nowrap}
@media (max-width:760px){.np-lotlist a{grid-template-columns:1fr;gap:6px}}
.np-status{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border:1px solid currentColor}
.np-status--retained,.np-status--withdrawn{color:#C4894A}

/* the attestation gate */
/* The gate's submit is never `disabled`: a disabled control cannot be focused
   or announced, and this form failed precisely because it sat dead with no
   explanation. It is enabled, styled as not-yet-satisfied, and says why on
   submit. */
.np-btn[aria-disabled="true"]{opacity:.55}
.np-btn[aria-disabled="true"]:hover{opacity:.75}

.np-gate{max-width:640px;margin:0 auto}
.np-gate ul{list-style:none;margin:0 0 24px;padding:22px 0 0;border-top:1px solid rgba(152,161,173,.2)}
.np-gate li{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-size:.98rem;color:var(--bone-dim)}
.np-gate li::before{content:"";width:5px;height:5px;background:var(--trace-lift);flex-shrink:0;margin-top:.55em}
.np-gate label.np-check{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;cursor:pointer;
  color:var(--bone-dim);margin-bottom:12px}
.np-gate input[type=checkbox]{margin-top:.35em;width:18px;height:18px;accent-color:var(--trace-lift);flex-shrink:0}
.np-gate textarea,.np-gate input[type=text]{width:100%;background:rgba(20,26,36,.75);
  border:1px solid rgba(152,161,173,.3);color:var(--bone);font-family:"IBM Plex Mono",monospace;
  font-size:.88rem;padding:13px 14px;resize:vertical}
.np-gate .np-fine{font-family:"IBM Plex Mono",monospace;font-size:.66rem;line-height:1.85;
  color:var(--bone-dim);opacity:.82;margin-top:22px;padding-top:18px;border-top:1px solid rgba(152,161,173,.16)}
.np-gate__label{display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px}

/* footer */
.np-footer{background:var(--ink);color:var(--bone-dim);padding:clamp(64px,8vh,100px) var(--pad) 40px;position:relative;z-index:1}
.np-fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,54px);padding-bottom:52px;border-bottom:1px solid rgba(152,161,173,.18)}
.np-fgrid h5{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);margin:0 0 18px}
.np-fgrid ul{list-style:none;margin:0;padding:0}
.np-fgrid li{margin-bottom:11px}
.np-fgrid a{font-size:.92rem;text-decoration:none;color:var(--bone-dim)}
.np-fgrid a:hover{color:var(--bone)}
.np-legal{padding-top:34px;display:flex;flex-direction:column;gap:18px}
.np-legal p{font-family:"IBM Plex Mono",monospace;font-size:.68rem;line-height:1.85;color:var(--bone-dim);max-width:100ch}
.np-legal b{color:var(--bone);font-weight:500}
.np-missing{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:#C4894A;border:1px dashed rgba(196,137,74,.5);padding:3px 8px}
@media (max-width:900px){.np-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}}
@media (max-width:520px){.np-fgrid{grid-template-columns:1fr}}

/* WooCommerce, wearing the same clothes as the rest of the site */
.woocommerce-products-header,.woocommerce .products ul,.woocommerce ul.products{margin:0;padding:0;list-style:none}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.woocommerce ul.products li.product{background:var(--paper);border:1px solid var(--rule);padding:26px;
  margin:0;width:auto;float:none;text-align:left;
  transition:border-color 1.5s var(--ease-out),transform 1.5s var(--ease-out)}
.woocommerce ul.products li.product:hover{border-color:var(--rule-strong);transform:translateY(-3px)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Schibsted Grotesk",sans-serif;
  font-weight:700;font-size:1.25rem;letter-spacing:-.02em;padding:0;margin:0 0 8px}
.woocommerce ul.products li.product .price{font-family:"IBM Plex Mono",monospace;font-size:.9rem;color:var(--graphite)}
.woocommerce div.product .product_title{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;margin-bottom:14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:"IBM Plex Mono",monospace;
  font-size:1.3rem;color:var(--graphite)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px;border-bottom:1px solid var(--rule)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0 24px 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:12px 0;display:block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--graphite);box-shadow:inset 0 -2px 0 var(--trace)}
/* Product imagery.
   The gallery image was rendering with an explicit used height while its width
   was constrained by the column, so `object-fit: fill` stretched the vial
   vertically — 0.483 rendered against a 0.568 native ratio. Height follows the
   width, and `contain` guarantees the photograph is never distorted or cropped
   whatever box it lands in. */
.woocommerce div.product div.images img,
.woocommerce ul.products li.product img{
  height:auto;width:100%;object-fit:contain;display:block;margin-inline:auto}
/* the zoom overlay is absolutely positioned and can exceed the column */
.woocommerce div.product div.images{overflow:hidden}

/* "Why this format" and "Stability & storage".
   Reference text, not a sales panel: no card, no icon, no accordion. A hairline
   rule and a small mono heading, which is the same treatment the lot panel and
   the documentation table already use. Sits in the product container, so it
   inherits the page gutters rather than defining its own. */
.np-pnotes{margin:clamp(40px,6vh,72px) 0 0;
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:clamp(26px,4vh,44px);
  padding-top:clamp(30px,4.5vh,52px)}
.np-pnote{max-width:74ch}
.np-pnote__h{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--trace-deep);margin:0 0 12px}
.np-pnote__p{font-family:var(--f-body);font-size:.98rem;line-height:1.7;
  color:var(--slate);margin:0}
@media (max-width:600px){
  .np-pnote__p{font-size:.94rem;line-height:1.68}
}

/* Pre-launch: where a purchase control would be. Stated plainly, in the
   catalogue's own mono voice — not a badge, not a countdown, no fake stock. */
.np-prelaunch{display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:18px 0 0}
.np-prelaunch__dot{width:6px;height:6px;flex-shrink:0;background:var(--trace);display:block}

.woocommerce .quantity .qty{font-family:"IBM Plex Mono",monospace;padding:12px;border:1px solid var(--rule-strong);
  background:var(--paper);color:var(--graphite);border-radius:0}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--trace);background:var(--paper-2);
  font-family:"IBM Plex Mono",monospace;font-size:.8rem}
@media (max-width:960px){.woocommerce ul.products{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
  .np-hero{height:auto}
  .np-stage{position:relative}
  .np-band{position:relative;top:auto;transform:none;opacity:1;--ty:0px}
  .np-band+.np-band{display:none}
}

/* ============================================================
   The motion system. Two primitives, used everywhere.
   ============================================================ */
[data-np-reveal] > [data-np-step]{
  opacity:0;transform:translateY(12px);
  transition:opacity 1.38s var(--ease-out),transform 1.38s var(--ease-out);
}
[data-np-reveal].is-in > [data-np-step]{opacity:1;transform:none}
[data-np-reveal].is-in > [data-np-step]:nth-child(1){transition-delay:0s}
[data-np-reveal].is-in > [data-np-step]:nth-child(2){transition-delay:0.12s}
[data-np-reveal].is-in > [data-np-step]:nth-child(3){transition-delay:0.24s}
[data-np-reveal].is-in > [data-np-step]:nth-child(4){transition-delay:0.36s}
[data-np-reveal].is-in > [data-np-step]:nth-child(5){transition-delay:0.49s}
[data-np-reveal].is-in > [data-np-step]:nth-child(6){transition-delay:0.6s}
/* retire the stagger, or every later hover inherits its delay for good */
[data-np-reveal].is-done > [data-np-step]:nth-child(n){transition-delay:0s !important}

/* Product cards get a longer arrival than the general reveal. They are what
   the visitor came for, so they are allowed the extra travel and a wider
   stagger. Nothing else on the site is given this. */
.np-shelf[data-np-reveal] > [data-np-step]{opacity:0;transform:translateY(14px);
  transition:opacity 1.79s var(--ease-out),transform 1.79s var(--ease-out)}
.np-shelf[data-np-reveal].is-in > [data-np-step]{opacity:1;transform:none}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(1){transition-delay:0s}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(2){transition-delay:0.18s}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(3){transition-delay:0.35s}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(4){transition-delay:0.52s}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(5){transition-delay:0.69s}
.np-shelf[data-np-reveal].is-in > [data-np-step]:nth-child(6){transition-delay:0.87s}

/* The shelf used to drift on scroll as well. It has been taken out: the hero
   vial interaction is the site's one signature moment, and a second piece of
   scroll-linked product motion 1.5 screens later dilutes it rather than
   reinforcing it. The cards keep their arrival and their hover lift. */

/* ============================================================
   The lot passport. The record assembles itself as you scroll.
   ============================================================ */
.np-passport{height:210vh;padding:0;position:relative}
.np-passport__inner{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
  padding:96px var(--pad) 64px;overflow:hidden}
.np-passport__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,84px);align-items:center}
.np-passport__then{color:var(--trace-lift)}
.np-passport__cta{margin-top:30px;opacity:calc((var(--p,0) - .82) * 6);transition:opacity 0.74s linear}

.np-card{border:1px solid rgba(152,161,173,.24);background:rgba(20,26,36,.55);
  padding:clamp(20px,2.6vw,32px);backdrop-filter:blur(6px)}
/* each element waits for its own slice of the section's scroll, then stays */
.np-card__head,.np-card__row,.np-card__chart,.np-card__acts{
  --t:calc((var(--p,0) * 14) - var(--i));
  opacity:clamp(0,var(--t),1);
  transform:translateY(calc((1 - clamp(0,var(--t),1)) * 10px));
}
.np-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(152,161,173,.2);margin-bottom:4px}
.np-card__code{font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--bone);letter-spacing:.05em}
.np-card__tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.np-card__rows{margin:0}
.np-card__row{display:grid;grid-template-columns:minmax(96px,14ch) minmax(0,1fr);gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(152,161,173,.1)}
.np-card__row dt{color:var(--bone-dim);font-size:.72rem;letter-spacing:.08em;margin:0}
.np-card__row dd{color:var(--bone);font-size:.82rem;margin:0;word-break:break-word}
.np-card__await{color:var(--bone-dim);opacity:.6;font-style:normal}
.np-card__chart{margin-top:20px}
.np-card__label{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:10px}
.np-card__chart img{width:100%;border:1px solid rgba(152,161,173,.2)}
.np-card__chartempty{aspect-ratio:16/4.5;border:1px dashed rgba(152,161,173,.26);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:16px}
.np-card__chartempty span{font-size:.66rem;color:var(--bone-dim);opacity:.7;line-height:1.7;max-width:34ch}
.np-card__acts{margin-top:22px;padding-top:18px;border-top:1px solid rgba(152,161,173,.2)}
.np-card__acts .np-card__await{font-size:.68rem;letter-spacing:.04em;line-height:1.7}
@media (max-width:900px){
  .np-passport{height:auto}
  .np-passport__inner{position:relative;min-height:0;padding:clamp(64px,9vh,110px) var(--pad)}
  .np-passport__grid{grid-template-columns:1fr;gap:34px}
  .np-passport__cta{opacity:1}
  .np-card__head,.np-card__row,.np-card__chart,.np-card__acts{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .np-passport{height:auto}
  .np-passport__inner{position:relative;min-height:0}
  .np-passport__cta{opacity:1}
  .np-card__head,.np-card__row,.np-card__chart,.np-card__acts{opacity:1;transform:none}
}

/* ============================================================
   Method, drawn as the sequence it is
   ============================================================ */
.np-method__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:54px}
.np-track{position:relative;height:1px;margin:0 0 0}
.np-track__line{position:absolute;inset:0;background:var(--rule)}
.np-track__fill{position:absolute;left:0;top:0;height:1px;background:var(--trace);
  width:calc(clamp(0,(var(--p,0) - .12) * 1.7,1) * 100%)}
.np-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.np-step{background:var(--paper);padding:30px 24px 34px;position:relative;
  --t:clamp(0,(var(--p,0) * 5.4) - var(--i) - .5,1);
  opacity:calc(.25 + .75 * var(--t));
  transition:opacity 0.74s linear}
.np-step__dot{position:absolute;top:-4px;left:24px;width:7px;height:7px;background:var(--rule-strong);
  transform:scale(calc(.6 + .4 * var(--t)));transition:background 1s var(--ease-out)}
.np-step:has(.np-step__dot){}
.np-step__n{display:block;font-size:.7rem;letter-spacing:.16em;color:var(--slate);margin:14px 0 40px}
.np-step h3{font-size:clamp(1.1rem,1.7vw,1.4rem);margin-bottom:12px}
.np-step p{color:var(--slate);font-size:.96rem;line-height:1.6}
.np-step__f{margin-top:14px;font-size:.68rem;letter-spacing:.04em;color:var(--trace);line-height:1.6}
@media (min-width:1001px){
  .np-step{--lit:clamp(0,(var(--p,0) * 5.4) - var(--i) - .5,1)}
  .np-step__dot{background:color-mix(in srgb,var(--trace) calc(var(--t) * 100%),var(--rule-strong))}
}
@media (max-width:1000px){
  .np-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np-step{opacity:1}
}
@media (max-width:600px){
  .np-steps{grid-template-columns:1fr}
  .np-method__head{grid-template-columns:1fr;gap:20px}
  .np-step__n{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .np-step{opacity:1}
  .np-track__fill{width:100%}
}

/* ============================================================
   The film. Full bleed, the page darkens into it and back out.
   ============================================================ */
.np-film{padding:clamp(70px,10vh,130px) 0;position:relative;overflow:hidden}
.np-film__say{padding:0 var(--pad);text-align:center;max-width:var(--maxw);margin:0 auto}
.np-film__say--in{margin-bottom:clamp(28px,4vh,52px)}
.np-film__say--out{margin-top:clamp(28px,4vh,52px)}
.np-film__say .np-kicker{display:inline-flex}
.np-film__say .np-kicker::after{display:none}
.np-film__line{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,4vw,3rem);letter-spacing:-.03em;line-height:1.1;color:var(--bone)}
.np-film__frame{margin:0;position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;
  background:var(--ink-2);
  /* the frame widens slightly as it crosses the viewport: the only parallax on the site */
  transform:scale(calc(.965 + .035 * clamp(0,var(--p,0) * 2.2,1)))}
.np-film__video,.np-film__hold{width:100%;height:100%;display:block}
.np-film__video{object-fit:cover;transform:translateZ(0)}
.np-film__hold{position:relative}
.np-film__hold svg{width:100%;height:100%;display:block}
.np-film__holdnote{position:absolute;left:var(--pad);bottom:20px;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);opacity:.75}
.np-film__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,18,.55) 0%,rgba(10,13,18,0) 26%,rgba(10,13,18,0) 74%,rgba(10,13,18,.6) 100%)}
.np-film__toggle{position:absolute;right:16px;bottom:16px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;min-height:36px;background:rgba(10,13,18,.62);color:var(--bone);cursor:pointer;
  border:1px solid rgba(152,161,173,.34);backdrop-filter:blur(8px)}
.np-film__toggle .np-film__toggle-off{display:none}
.np-film__toggle[aria-pressed="false"] .np-film__toggle-on{display:none}
.np-film__toggle[aria-pressed="false"] .np-film__toggle-off{display:inline}
.np-film__credit{margin-top:14px;padding:0 var(--pad);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim);text-align:center}
@media (max-width:720px){
  .np-film__frame{aspect-ratio:4/3;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .np-film__frame{transform:none}
}

/* ============================================================
   The compound strip. The catalog as data, not as a paragraph.
   ============================================================ */
.np-supply__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:48px}
.np-compounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.np-compound{background:var(--paper);padding:30px 26px 26px;text-decoration:none;display:flex;
  flex-direction:column;min-height:230px;position:relative;
  transition:background 1.24s var(--ease-out)}
.np-compound::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--trace);
  transform:scaleX(0);transform-origin:left;transition:transform 1.38s var(--ease-out)}
.np-compound:hover{background:var(--paper-2)}
.np-compound:hover::after{transform:scaleX(1)}
.np-compound__peak{display:block;width:120px;height:34px;color:var(--rule-strong);margin-bottom:22px;
  transition:color 1.24s var(--ease-out)}
.np-compound:hover .np-compound__peak{color:var(--trace)}
.np-compound__peak svg{width:100%;height:100%;display:block}
.np-compound h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:10px}
.np-compound__sub{color:var(--slate);font-size:.92rem;line-height:1.55;margin-bottom:20px}
.np-compound__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:.66rem;
  letter-spacing:.08em}
.np-compound__lot{color:var(--trace)}
.np-compound__await{color:var(--slate);opacity:.75}
@media (max-width:960px){
  .np-compounds{grid-template-columns:1fr}
  .np-supply__head{grid-template-columns:1fr;gap:20px}
}

/* ============================================================
   People on the homepage
   ============================================================ */
.np-humans{background:var(--paper-2)}
.np-humans__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.np-humans__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.np-human{margin:0}
.np-human img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule)}
.np-human figcaption{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.np-human strong{font-family:"Schibsted Grotesk",sans-serif;font-size:1rem}
.np-human span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--trace)}
.np-humans__empty{border:1px dashed var(--rule-strong);padding:clamp(24px,3vw,38px)}
.np-humans__empty p{font-size:.74rem;line-height:1.9;color:var(--slate);max-width:52ch}
.np-humans__empty p+p{margin-top:14px}
@media (max-width:900px){
  .np-humans__grid{grid-template-columns:1fr;gap:32px}
  .np-humans__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* ============================================================
   About: beliefs, what we publish, the confidentiality boundary
   ============================================================ */
.np-beliefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.np-belief__rule{display:block;width:100%;height:2px;background:var(--trace);margin-bottom:22px;
  transform:scaleX(.28);transform-origin:left;transition:transform 2.01s var(--ease-out)}
[data-np-reveal].is-in .np-belief__rule{transform:scaleX(1)}
.np-belief h3{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:14px;letter-spacing:-.02em}
.np-belief p{color:var(--slate);font-size:.98rem;line-height:1.62}

.np-publish{margin:0;border-top:1px solid rgba(152,161,173,.24)}
.np-publish__row{display:grid;grid-template-columns:minmax(120px,18ch) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);padding:18px 0;border-bottom:1px solid rgba(152,161,173,.14)}
.np-publish__row dt{margin:0;color:var(--trace-lift);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.np-publish__row dd{margin:0;color:var(--bone-dim);font-size:.98rem;line-height:1.6}
.np-boundary{margin-top:46px;padding:clamp(22px,3vw,34px);border:1px solid rgba(152,161,173,.24);
  border-left:2px solid var(--trace-lift);background:rgba(20,26,36,.5)}
.np-boundary__h{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--trace-lift);
  margin-bottom:14px}
.np-boundary .np-body{max-width:74ch}

.np-functions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.np-function{background:var(--paper);padding:30px 28px 34px}
.np-function h3{font-size:clamp(1.1rem,1.7vw,1.35rem);margin-bottom:12px}
.np-function p{color:var(--slate);font-size:.96rem;line-height:1.62}

.np-authority{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.np-authority__item{padding:22px 0 22px 26px;border-bottom:1px solid var(--rule);position:relative}
.np-authority__mark{position:absolute;left:0;top:29px;width:7px;height:7px;background:var(--trace)}
.np-authority h3{font-size:1.08rem;margin-bottom:7px}
.np-authority p{color:var(--slate);font-size:.92rem;line-height:1.6}

@media (max-width:900px){
  .np-beliefs{grid-template-columns:1fr;gap:32px}
  .np-functions{grid-template-columns:1fr}
  .np-publish__row{grid-template-columns:1fr;gap:6px;padding:15px 0}
}

/* ============================================================
   The catalog. A scientific reference, not a shop grid.
   ============================================================ */
.np-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.np-cmp{background:var(--paper);padding:34px 30px 28px;display:flex;flex-direction:column;
  position:relative;transition:background 1.24s var(--ease-out)}
.np-cmp:hover{background:var(--paper-2)}
.np-cmp__name{font-size:clamp(1.45rem,2.4vw,1.9rem);letter-spacing:-.025em;margin-bottom:10px}
.np-cmp__class{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--trace);line-height:1.6}
.np-cmp__sub{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);line-height:1.6;margin-top:3px}

/* the residue map: a scientific grid, drawn from verified data */
/* one fixed height across all three, so the data tables below them align */
.np-cmp__viz{margin:30px 0 0;padding:20px 0;min-height:210px;display:flex;flex-direction:column;
  justify-content:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden}
.np-cmp__viz::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,transparent 12%,transparent 88%,var(--paper) 100%)}
.np-cmp:hover .np-cmp__viz::after{background:linear-gradient(90deg,var(--paper-2) 0%,transparent 12%,transparent 88%,var(--paper-2) 100%)}
.np-cmp__vizfoot{margin:14px 0 24px;font-size:.6rem;line-height:1.7;color:var(--slate);opacity:.85}
.np-cmp__photo{width:100%;height:auto;display:block;position:relative;z-index:1}

.np-cmp__data{margin:0 0 22px}
.np-cmp__data>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--rule)}
.np-cmp__data>div:last-child{border-bottom:0}
.np-cmp__data dt{margin:0;color:var(--slate);font-size:.68rem;letter-spacing:.07em}
.np-cmp__data dd{margin:0;color:var(--graphite);font-size:.72rem;text-align:right;word-break:break-word}

.np-cmp__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:9px}
.np-cmp__lot{font-size:.68rem;letter-spacing:.06em}
.np-cmp__lot a{color:var(--trace);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color 1s var(--ease-out)}
.np-cmp__lot a:hover{border-bottom-color:var(--trace)}
.np-cmp__await{color:var(--slate);opacity:.8}
.np-cmp__go{margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--graphite);align-self:flex-start;
  position:relative;padding-bottom:3px}
.np-cmp__go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--trace);
  transform:scaleX(0);transform-origin:left;transition:transform 1.24s var(--ease-out)}
.np-cmp__go:hover::after{transform:scaleX(1)}
.np-cmp__go span{display:inline-block;transition:transform 1.24s var(--ease-out)}
.np-cmp__go:hover span{transform:translateX(4px)}

@media (max-width:1100px){.np-catalog{grid-template-columns:1fr}.np-cmp{padding:30px 24px 26px}}

/* ============================================================
   The explainer. Speech, so it never autoplays and always has controls.
   ============================================================ */
.np-explain{padding:clamp(70px,10vh,130px) var(--pad)}
.np-explain__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:clamp(30px,4vh,52px)}
/* the section is light; the frame stays ink, so the film reads as a screen
   set into the page rather than as another dark band. */
.np-explain__frame{margin:0;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink-2);border:1px solid rgba(14,28,44,.14);box-shadow:var(--lift-3)}
.np-explain__video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.np-explain__warn{position:absolute;left:0;right:0;bottom:0;padding:9px 14px;
  background:rgba(196,137,74,.16);color:#E0A868;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.np-explain__slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,56px);
  background-image:linear-gradient(rgba(152,161,173,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(152,161,173,.05) 1px,transparent 1px);
  background-size:44px 44px}
.np-explain__slotinner{max-width:60ch}
.np-explain__slotlabel{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--trace-lift);margin-bottom:22px}
.np-explain__points{list-style:none;margin:0 0 24px;padding:0}
.np-explain__points li{display:flex;gap:13px;align-items:baseline;padding:9px 0;
  color:var(--bone);font-size:clamp(.98rem,1.5vw,1.15rem);line-height:1.5;
  border-bottom:1px solid rgba(152,161,173,.12)}
.np-explain__points li::before{content:"";width:5px;height:5px;background:var(--trace-lift);
  flex-shrink:0;margin-top:.5em}
.np-explain__slotnote{font-size:.66rem;line-height:1.85;color:var(--bone-dim);opacity:.8;max-width:52ch}
.np-explain__say{margin-top:clamp(28px,4vh,52px);text-align:center}
.np-explain__line{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,4vw,3rem);letter-spacing:-.03em;line-height:1.1;color:var(--graphite)}
@media (max-width:900px){
  .np-explain__head{grid-template-columns:1fr;gap:20px}
  .np-explain__frame{aspect-ratio:4/3}
  .np-explain__points li{font-size:.95rem}
}


/* ============================================================
   The hexagonal system. Real rings where the sequence is known,
   a honeycomb motif where it is not. Never confused for each other.
   ============================================================ */
.np-hex{width:100%;height:auto;display:block;overflow:visible;position:relative;z-index:1}

/* real ring systems */
.np-hex__bb{stroke:var(--slate);stroke-width:1.5;opacity:.55}
.np-hex__res{fill:var(--paper);stroke:var(--slate);stroke-width:1.5}
.np-cmp:hover .np-hex__res{fill:var(--paper-2)}
.np-hex__res-l{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--graphite);letter-spacing:.02em}
.np-hex__link{stroke:var(--slate);stroke-width:1.3;opacity:.5}
.np-hex__ring{fill:none;stroke:var(--trace);stroke-width:1.8;stroke-linejoin:round;
  transition:fill 1.5s var(--ease-out)}
.np-cmp:hover .np-hex__ring{fill:var(--trace-ghost)}
.np-hex__arom{fill:none;stroke:var(--trace);stroke-width:1.2;opacity:.55}
.np-hex__ring-l{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--trace);letter-spacing:.06em}

/* the honeycomb motif */
.np-hex--motif .np-hex__cell{fill:none;stroke:var(--rule-strong);stroke-width:1;opacity:.5;
  transition:opacity 1.74s var(--ease-out)}
.np-cmp:hover .np-hex--motif .np-hex__cell{opacity:.75}
.np-hex--motif .np-hex__cell--lit{stroke:var(--trace);stroke-width:1.6;fill:var(--trace-ghost);opacity:1}
.np-hex__count{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;font-size:62px;
  fill:var(--graphite);letter-spacing:-.03em}
.np-hex__countl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--slate);letter-spacing:.22em}
.np-hex__lead{stroke:var(--trace);stroke-width:1;opacity:.6}
.np-hex__feat{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--trace);letter-spacing:.03em}
.np-hex__featsub{font-family:"IBM Plex Mono",monospace;font-size:8px;fill:var(--slate);letter-spacing:.08em}

/* the section carries the motif too, at whisper level */
.np-supply{position:relative;overflow:hidden}
.np-supply::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23B9B3A3' stroke-width='1' opacity='.30'%3E%3Cpolygon points='28,1 55,16.5 55,47.5 28,63 1,47.5 1,16.5'/%3E%3Cpolygon points='0,49.5 27,65 27,96 0,111.5 -27,96 -27,65'/%3E%3Cpolygon points='56,49.5 83,65 83,96 56,111.5 29,96 29,65'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,transparent 78%)}
.np-supply>*{position:relative;z-index:1}

/* ============================================================
   Demonstration banner. Deliberately impossible to miss.
   ============================================================ */
.np-demo{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px clamp(14px,4vw,28px);
  background:#2A1E10;border-top:2px solid #C4894A;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;line-height:1.6;
  letter-spacing:.03em;color:#EBD9C2;
}
.np-demo strong{color:#F0B36B;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.np-demo__dot{width:7px;height:7px;background:#F0B36B;flex-shrink:0;
  animation:npdemo 6.52s var(--ease) infinite}
@keyframes npdemo{0%,100%{opacity:1}50%{opacity:.35}}
body:has(.np-demo) .np-footer{padding-bottom:88px}
@media (max-width:600px){.np-demo{font-size:.62rem;padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.np-demo__dot{animation:none}}

.np-demo-note{
  border-left:2px solid #C4894A;background:rgba(196,137,74,.08);
  padding:14px 18px;margin:0 0 30px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;line-height:1.8;color:var(--slate);
}
.np-demo-note strong{color:#A86A28}

/* sample page bodies get real editorial typography */
.np-main .np-body h2{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.3rem,2.4vw,1.9rem);
  letter-spacing:-.02em;margin:44px 0 16px;color:var(--graphite)}
.np-main .np-body h2:first-child{margin-top:0}
.np-main .np-body h3{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.05rem,1.6vw,1.25rem);
  margin:30px 0 12px;color:var(--graphite)}
.np-main .np-body p{margin-bottom:16px}
.np-main .np-body ul{margin:0 0 20px;padding-left:0;list-style:none}
.np-main .np-body li{padding:9px 0 9px 20px;border-bottom:1px solid var(--rule);position:relative}
.np-main .np-body li::before{content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;background:var(--trace)}
.np-main .np-body table{width:100%;border-collapse:collapse;margin:0 0 24px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem}
.np-main .np-body th{text-align:left;font-weight:400;color:var(--slate);padding:10px 16px 10px 0;
  border-bottom:1px solid var(--rule);width:34%;vertical-align:top}
.np-main .np-body td{padding:10px 0;border-bottom:1px solid var(--rule);color:var(--graphite)}
.np-main .np-body code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86em;
  background:var(--paper-2);padding:2px 6px}
.np-main .np-body em{color:var(--slate)}

/* ============================================================
   Quantity tiers on the product page
   ============================================================ */
.np-tiers{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--rule)}
.np-tiers__h{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 16px}
.np-tiers__t{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.76rem}
.np-tiers__t th{text-align:left;font-weight:400;color:var(--slate);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;padding:0 14px 10px 0;border-bottom:1px solid var(--rule)}
.np-tiers__t td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);color:var(--graphite)}
.np-tiers__t tr:last-child td{border-bottom:0}
.np-tiers__quote td{color:var(--trace)}
.np-tiers__quote a{color:var(--trace);text-decoration:none;border-bottom:1px solid currentColor}
.np-tiers__note{margin-top:14px;font-size:.64rem;line-height:1.8;color:var(--slate);opacity:.85}

.np-volcta{margin:28px 0 0;padding:22px 24px;background:var(--paper-2);border-left:2px solid var(--trace)}
.np-volcta__h{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--trace);margin:0 0 10px}
.np-volcta__p{font-size:.95rem;line-height:1.6;color:var(--slate);margin-bottom:18px;max-width:52ch}

/* ============================================================
   Wholesale
   ============================================================ */
.np-whblocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,60px)}
.np-whblock__rule{display:block;width:100%;height:2px;background:var(--trace);margin-bottom:22px;
  transform:scaleX(.22);transform-origin:left;transition:transform 2.01s var(--ease-out)}
[data-np-reveal].is-in .np-whblock__rule{transform:scaleX(1)}
.np-whblock h2{font-size:clamp(1.2rem,2.1vw,1.6rem);letter-spacing:-.02em;margin-bottom:14px}
.np-whblock p{color:var(--slate);font-size:1rem;line-height:1.62;max-width:46ch}
@media (max-width:820px){.np-whblocks{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   Forms, shared by wholesale and anything after it
   ============================================================ */
.np-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.np-field{margin:0}
.np-field--wide{grid-column:1 / -1}
.np-field label{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:8px}
.np-field input,.np-field select,.np-field textarea{
  width:100%;background:rgba(20,26,36,.75);border:1px solid rgba(152,161,173,.3);color:var(--bone);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.86rem;padding:12px 14px;
  border-radius:0;transition:border-color 1.13s var(--ease-out)}
.np-field textarea{resize:vertical}
.np-field input:hover,.np-field select:hover,.np-field textarea:hover{border-color:rgba(237,234,226,.45)}
.np-field input:invalid:not(:placeholder-shown){border-color:#C4894A}
.np-form__act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.np-form__act .mono{font-size:.72rem;color:var(--trace-lift)}
.np-form__fine{margin-top:20px;font-size:.64rem;line-height:1.85;color:var(--bone-dim);opacity:.8;max-width:60ch}
.np-form__done h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:16px;color:var(--bone)}
.np-form__ref{margin-top:18px;font-size:.72rem;letter-spacing:.1em;color:var(--trace-lift)}
@media (max-width:700px){.np-form__grid{grid-template-columns:1fr}}

/* ============================================================
   Verification lookup
   ============================================================ */
.np-verify__label{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);margin-bottom:10px}
.np-verify__row{display:flex;gap:10px;flex-wrap:wrap}
.np-verify__row input{flex:1 1 260px;background:rgba(20,26,36,.75);border:1px solid rgba(152,161,173,.34);
  color:var(--bone);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.05rem;letter-spacing:.08em;
  padding:15px 16px;text-transform:uppercase}
.np-verify__row input::placeholder{color:rgba(152,161,173,.5);text-transform:none;letter-spacing:.04em}
.np-verify__note{margin-top:22px;font-size:.68rem;line-height:1.9;color:var(--bone-dim)}
.np-verify__note a{color:var(--trace-lift);margin-left:8px}
.np-verify__miss{border:1px solid rgba(196,137,74,.45);border-left:2px solid #C4894A;
  background:rgba(196,137,74,.07);padding:22px 24px;margin-bottom:32px}
.np-verify__misscode{font-size:1.15rem;letter-spacing:.1em;color:#E0A868;margin-bottom:14px}

/* ============================================================
   Channels
   ============================================================ */
.np-channels{background:var(--paper-2)}
.np-channels__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:48px}
.np-channels__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.np-channel{background:var(--paper);padding:32px 28px 30px;display:flex;flex-direction:column;
  transition:background 1.24s var(--ease-out)}
.np-channel:hover{background:var(--paper-2)}
.np-channel h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em;margin-bottom:14px}
.np-channel p{color:var(--slate);font-size:.96rem;line-height:1.6;margin-bottom:24px}
.np-channel__go{margin-top:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--graphite);
  align-self:flex-start;position:relative;padding-bottom:3px}
.np-channel__go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--trace);
  transform:scaleX(0);transform-origin:left;transition:transform 1.24s var(--ease-out)}
.np-channel__go:hover::after{transform:scaleX(1)}
.np-channel__go span{display:inline-block;transition:transform 1.24s var(--ease-out)}
.np-channel__go:hover span{transform:translateX(4px)}
@media (max-width:900px){
  .np-channels__head{grid-template-columns:1fr;gap:20px}
  .np-channels__grid{grid-template-columns:1fr}
}

/* ============================================================
   The mark and its lockup.
   Geometry is generated in inc/marks.php from R; nothing here
   resizes a part of the mark independently.
   ============================================================ */
.np-mark{display:block;flex-shrink:0;overflow:visible}

.np-lockup{display:inline-flex;align-items:center;gap:.62em;text-decoration:none;line-height:1}
.np-lockup--stacked{flex-direction:column;gap:.5em;text-align:center}
.np-lockup__type{display:flex;flex-direction:column;gap:.18em;line-height:1}
.np-lockup--stacked .np-lockup__type{align-items:center}
.np-lockup__name{font-family:"Public Sans",-apple-system,"Segoe UI",sans-serif;font-weight:700;
  letter-spacing:-.02em;font-size:1em;color:var(--graphite)}
/* HEALTH is secondary by construction: ~0.30 of the cap height, +0.26em */
.np-lockup__sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
  font-size:.30em;letter-spacing:.26em;text-transform:uppercase;color:var(--slate)}
.np-lockup--reversed .np-lockup__name{color:var(--bone)}
.np-lockup--reversed .np-lockup__sub{color:var(--bone-dim)}

/* the nav lockup is defined once, in the nav block above. */

/* mark standards page */
.np-markgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.np-markcell{margin:0;border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.np-markcell--rev{background:var(--ink);border-color:rgba(152,161,173,.24)}
.np-markstage{flex:1;padding:38px 26px;display:flex;align-items:center;justify-content:center;min-height:190px}
.np-markcell figcaption{font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);
  padding:11px 14px;border-top:1px solid var(--rule);background:var(--paper-2)}
.np-markcell--rev figcaption{color:var(--bone-dim);border-top-color:rgba(152,161,173,.2);background:var(--ink-2)}
.np-marksizes{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-end}
.np-marksize{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.np-marksize figcaption{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}

/* ============================================================
   Product visuals and the showcase
   ============================================================ */
/* The product is the subject, not an illustration next to the subject.
   Revision 016 roughly doubled the drawn vial and inverted the card's
   image-to-text ratio: the stage is now the dominant element and the
   type block sits under it as a caption. */
.np-vial{width:100%;height:auto;display:block;max-width:300px;margin:0 auto}
.np-vial--photo{max-width:100%;object-fit:contain}

.np-showcase{background:var(--paper)}
.np-showcase__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:clamp(52px,7vh,86px)}

/* cards stand off the ground rather than sitting in a hairline grid */
.np-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,40px);background:none;border:0}
.np-pcard{background:var(--paper-lift);border:1px solid var(--rule);
  display:flex;flex-direction:column;text-decoration:none;box-shadow:var(--lift-1);
  transform:translate3d(0,0,0) scale(1);
  transition:box-shadow 1.5s var(--ease-out),transform 1.5s var(--ease-out),
             border-color 1.5s var(--ease-out)}

/* the stage: a lit shelf the vial stands on, not a padded box */
/* The stage is layered, not flat:
     background   clean neutral surface
     secondary    the compound's structure, faint, masked off the centre
     foreground   the product itself, crisp and dominant
   No glow, no gradient shelf, no particles. The photography carries its own
   light and shadow; the only thing behind it is the structural artwork, held
   low enough to read as depth rather than as a graphic. */
.np-pcard__stage{display:block;position:relative;isolation:isolate;
  padding:clamp(42px,5.5vw,74px) clamp(24px,3.5vw,44px) clamp(28px,3.5vw,40px);
  background:var(--paper-lift)}
.np-pcard__stage{position:relative}
/* the structure sits behind the product: technical, quiet, and it lifts a
   little as the card is examined so the two read as one object */
/* The secondary layer. Two things keep it from competing with the product:
   opacity in the 3-8% band, and a radial mask that fades it out through the
   middle of the stage — so the structure lives around the vial and never
   crosses the label, which is where it would read as dirt on the photograph. */
.np-pcard__struct{position:absolute;inset:4% 3% 12%;z-index:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.06;pointer-events:none;color:var(--accent,var(--trace));
  -webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 52%,transparent 0%,transparent 44%,#000 82%);
  mask-image:radial-gradient(ellipse 46% 52% at 50% 52%,transparent 0%,transparent 44%,#000 82%);
  transition:opacity 2.76s var(--ease-cine),transform 4.15s var(--ease-cine);
  transform:translate3d(0,0,0) scale(1)}
.np-pcard__struct svg{width:100%;height:100%;overflow:visible}
.np-pcard__vial{position:relative;z-index:1;display:block}
.np-pcard__struct svg{width:100%;height:100%;overflow:visible}
.np-pcard__stage .np-vial{transition:transform 2.01s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .np-pcard__struct{transform:none}
}

.np-pcard__body{display:block;padding:clamp(20px,2.4vw,28px) clamp(18px,3vw,30px) clamp(22px,3vw,30px);
  border-top:1px solid var(--rule)}
.np-pcard__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.np-pcard h3{font-size:clamp(1.24rem,2vw,1.62rem);letter-spacing:-.025em;margin:0;color:var(--graphite)}
.np-pcard__str{font-size:.86rem;color:var(--graphite)}
/* each product carries its own accent from the label artwork, so the card and
   the vial on it agree. Falls back to the house teal if none is assigned. */
.np-pcard__cls{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent,var(--trace-deep));margin-top:9px;line-height:1.6}
/* a hairline, not a banner: the accent identifies the SKU without becoming
   the loudest element on the card */
.np-pcard{border-top:2px solid var(--accent,var(--trace))}
.np-pcard__foot{display:flex;flex-direction:column;gap:9px;margin-top:22px;padding-top:17px;
  border-top:1px solid var(--rule)}
.np-pcard__lot{font-size:.66rem;letter-spacing:.05em;color:var(--slate);display:flex;align-items:center;gap:8px}
.np-dot{width:6px;height:6px;flex-shrink:0;display:inline-block}
.np-dot--ok{background:#2E7D64}
.np-dot--wait{background:#B4763C}
.np-pcard__go{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin-top:5px}
.np-pcard__go span{display:inline-block;transition:transform 1.24s var(--ease-out)}
/* Hover, gated.
   These were plain :hover rules. A touch browser latches :hover onto the last
   element tapped and holds it until something else is tapped, so on a phone a
   card stayed lifted and lit after the finger had gone — the "stuck highlight".
   Gating on a device that genuinely has a hovering pointer removes the whole
   class of problem rather than trying to clear it afterwards.

   :focus-visible is deliberately NOT in here. It is keyboard state, it is
   supposed to persist while focus is held, and it is cleared by blur. */
/* Touch: nothing may hold a transform after the finger leaves. The hover gate
   above already prevents it; this is the explicit guarantee. */
@media (hover:none),(pointer:coarse){
  .np-pcard{transform:none !important}
  .np-pcard .np-pcard__stage .np-vial{transform:none !important}
  .np-pcard__struct{transform:none !important}
}

@media (hover:hover) and (pointer:fine){
  .np-pcard:hover{box-shadow:var(--lift-2);
    transform:translate3d(0,-2px,0) scale(1.015);border-color:var(--rule-strong)}
  .np-pcard:hover .np-pcard__struct{opacity:.085;transform:translate3d(0,-4px,0) scale(1.015)}
  .np-pcard:hover .np-pcard__stage .np-vial{transform:translateY(-4px)}
  .np-pcard:hover .np-pcard__go span{transform:translateX(5px)}
}
/* keyboard focus gets the same emphasis, on every device */
.np-pcard:focus-visible .np-pcard__struct{opacity:.085;transform:translate3d(0,-4px,0) scale(1.015)}
.np-pcard:focus-visible{box-shadow:var(--lift-2);border-color:var(--rule-strong)}

.np-shelf__note{margin-top:26px;font-size:.62rem;line-height:1.85;color:var(--slate);opacity:.85;max-width:82ch}

/* Mobile: two across keeps both the product and its neighbour on screen, so
   the shelf still reads as a range rather than as one item at a time. The
   vial stays large — shrinking it to fit was the original mistake. */
@media (max-width:900px){
  .np-showcase__head{grid-template-columns:1fr;gap:18px}
  .np-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .np-vial{max-width:200px}
  .np-pcard h3{font-size:1.12rem}
  .np-pcard__row{flex-direction:column;gap:3px;align-items:flex-start}
}
@media (max-width:560px){
  .np-shelf{grid-template-columns:1fr;gap:16px}
  .np-vial{max-width:250px}
  .np-pcard__row{flex-direction:row;align-items:baseline}
  .np-pcard h3{font-size:1.3rem}
}

/* ============================================================
   Vial to record, drawn
   ============================================================ */

.np-chain__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:40px}
.np-chainrow{list-style:none;margin:0 0 clamp(40px,6vh,64px);padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);box-shadow:var(--lift-1)}
/* The chain assembles one step at a time as the section scrolls, rather than
   arriving together. --t is that step's own share of section progress.

   The premium pass stretched this out deliberately: the multiplier dropped
   from 5 to 3.1, so each step holds the reader's attention roughly 60% longer
   and the sequence reads as a system executing rather than a row fading in.
   Travel is halved to 5px — the step lights, it does not slide. */
.np-chainstep{background:var(--paper-lift);padding:26px 20px;position:relative;
  --t:clamp(0,(var(--p,0) * 2.6) - var(--i) * .72 - .14,1);
  opacity:calc(.28 + .72 * var(--t));
  transform:translate3d(0,calc(5px - 5px * var(--t)),0);
  transition:opacity 0.87s linear}
/* the accent marker fills as the step resolves: the visible tell that this is
   a sequence with a state, not a static list */
.np-chainstep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--trace);transform:scaleY(var(--t));transform-origin:top}
.np-chainstep__k{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--trace-deep);margin-bottom:9px}
.np-chainstep__v{display:block;font-size:.86rem;color:var(--graphite);letter-spacing:.02em}
@media (max-width:820px){
  .np-chain__head{grid-template-columns:1fr;gap:18px}
  .np-chainrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* five steps into two columns leaves a hole. The last one takes the row. */
  .np-chainstep:last-child{grid-column:1 / -1}
  .np-chainstep{opacity:1;transform:none}
}

.np-scan{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,54px);flex-wrap:wrap}
.np-scan__vial{flex:0 0 auto;width:clamp(110px,14vw,168px)}
.np-scan__arrow{flex:0 0 auto;width:clamp(60px,8vw,110px);color:var(--trace);opacity:.75}
.np-scan__arrow svg{width:100%;height:auto;display:block}
.np-phone{flex:0 0 auto;width:clamp(230px,28vw,312px);aspect-ratio:9/17.5;
  border:1px solid rgba(14,28,44,.18);border-radius:30px;padding:11px;background:#0B1219;
  box-shadow:var(--lift-3)}
.np-phone__screen{width:100%;height:100%;border-radius:16px;background:var(--paper);
  padding:16px 15px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.np-phone__bar{font-size:.55rem;letter-spacing:.04em;color:var(--slate);background:var(--paper-2);
  padding:6px 9px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-phone__code{font-size:1.02rem;letter-spacing:.07em;color:var(--graphite)}
.np-phone__state{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:center;gap:7px}
.np-phone__dl{margin:0;display:flex;flex-direction:column;gap:0}
.np-phone__dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.np-phone__dl dt{margin:0;font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.np-phone__dl dd{margin:0;font-size:.6rem;color:var(--graphite);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56%}
.np-phone__empty{font-size:.56rem;line-height:1.75;color:var(--slate);margin-top:4px}
@media (max-width:700px){
  .np-scan__arrow{transform:rotate(90deg);width:52px}
}
@media (prefers-reduced-motion:reduce){
  .np-chainstep{opacity:1;transform:none;--t:1}
}


/* ============================================================
   Product in the hero, and examining one.

   The vials are links. Everything below is the deliberate layer on top: the
   affordance, the hold, and the way the other two step back while one is
   being examined. Every animated property here is transform, opacity or
   filter, so none of it triggers layout.
   ============================================================ */
.np-herostage{position:absolute;right:calc(var(--pad) * .5);top:50%;
  transform:translate3d(0,calc(-50% + (var(--p,0) * -70px)),0);
  z-index:3;display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,26px)}

.np-herovial{display:block;position:relative;width:clamp(96px,13vw,192px);
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;  /* the page still scrolls out of a press */
  transition:transform 1.5s var(--ease-out),opacity 1.5s var(--ease-out),
             filter 1.5s var(--ease-out)}
.np-herovial:nth-child(2){width:clamp(112px,15.5vw,224px);z-index:2}

.np-herovial__art{display:block;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation:npfloat 38.02s var(--ease-cine) infinite;
  transition:filter 1.5s var(--ease-out)}
.np-herovial:nth-child(2) .np-herovial__art{animation-delay:-3s}
.np-herovial:nth-child(3) .np-herovial__art{animation-delay:-6s}
@keyframes npfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.np-herovial .np-vial{max-width:100%}

/* one compound forward, the others quieter. This is the whole point of the
   interaction: it should read as examining one thing, not as a hover state. */
.np-herostage.is-examining .np-herovial{opacity:.42;filter:saturate(.7)}
.np-herostage.is-examining .np-herovial.is-active{opacity:1;filter:none;
  transform:translateY(-8px) scale(1.035);z-index:4}
.np-herovial.is-active .np-herovial__art{
  filter:drop-shadow(0 34px 64px rgba(0,0,0,.66)) drop-shadow(0 0 30px rgba(127,216,206,.22))}

/* the identity plate: hidden until the compound is being examined */
.np-herovial__plate{position:absolute;left:50%;top:calc(100% + 12px);
  transform:translate(-50%,6px);width:max-content;max-width:24ch;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity 1.13s var(--ease-out),transform 1.13s var(--ease-out)}
.np-herovial.is-active .np-herovial__plate{opacity:1;transform:translate(-50%,0)}
.np-herovial__nm{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:700;
  font-size:.98rem;letter-spacing:-.02em;color:var(--bone);line-height:1.15}
.np-herovial__cls{display:block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--trace-lift);margin-top:6px}
.np-herovial__lot{display:block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.07em;color:var(--bone-dim);margin-top:4px}

/* the affordance. Present at rest, so nobody has to discover a gesture:
   it is faint until the vial is touched or hovered, then it states itself. */
.np-herovial__cue{position:absolute;left:50%;bottom:-4px;transform:translate(-50%,0);
  display:flex;align-items:center;gap:7px;padding:5px 11px 5px 7px;
  background:rgba(10,13,18,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(237,234,226,.16);
  opacity:.55;transition:opacity 1s var(--ease-out),border-color 1s var(--ease-out)}
.np-herovial:focus-visible .np-herovial__cue,
.np-herovial.is-active .np-herovial__cue,
.np-herovial.is-cued .np-herovial__cue{opacity:1;border-color:rgba(127,216,206,.4)}
@media (hover:hover) and (pointer:fine){
  .np-herovial:hover .np-herovial__cue{opacity:1;border-color:rgba(127,216,206,.4)}
}
.np-herovial__cuetext{font-family:"IBM Plex Mono",monospace;font-size:.52rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--bone);white-space:nowrap}

/* the hold ring. --hold is written by script, 0..1, once per frame.
   A conic gradient on one element: no extra nodes, no layout, GPU-composited. */
.np-herovial__ring{width:13px;height:13px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--trace-lift) calc(var(--hold,0) * 360deg),
                            rgba(237,234,226,.22) 0);
  position:relative}
.np-herovial__ring::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:rgba(10,13,18,.9)}
.np-herovial.is-armed .np-herovial__ring{background:var(--trace-lift)}
.np-herovial.is-armed .np-herovial__cue{border-color:var(--trace-lift)}
.np-herovial.is-pressing{transform:scale(.985)}
.np-herovial.is-pressing.is-active{transform:translateY(-8px) scale(1.02)}

/* pointer devices never see the ring: there is no hold to complete */
.np-herostage--fine .np-herovial__ring{display:none}
.np-herostage--fine .np-herovial__cue{padding:5px 11px}

.np-herovial:focus-visible{outline:2px solid var(--trace-lift);outline-offset:8px}

@media (max-width:900px){
  /* Lifted to make room for the identity plate underneath. Putting the plate
     above the vial instead was tried and it collided with the hero's own
     body copy, which is worse than a shorter stage. */
  .np-herostage{right:auto;left:50%;top:auto;bottom:clamp(104px,16vh,158px);
    transform:translate3d(-50%,calc(var(--p,0) * -34px),0);gap:4px}
  .np-herovial{width:clamp(74px,21vw,116px)}
  .np-herovial:nth-child(2){width:clamp(88px,25vw,138px)}

  /* Three chips side by side are wider than three vials side by side, so at
     rest only the marker shows and the wording appears on the one being
     examined. The affordance is still present; it is just not shouted three
     times over. */
  .np-herovial__cue{bottom:-26px;padding:4px 6px;gap:0}
  .np-herovial__cuetext{max-width:0;overflow:hidden;opacity:0;
    transition:max-width 1s var(--ease-out),opacity 0.74s var(--ease-out)}
  .np-herovial.is-active .np-herovial__cue,
  .np-herovial.is-cued .np-herovial__cue{padding:5px 11px 5px 7px;gap:7px;z-index:5}
  .np-herovial.is-active .np-herovial__cuetext,
  .np-herovial.is-cued .np-herovial__cuetext{max-width:14ch;opacity:1}
  /* on a fine pointer at this width there is no ring, so keep a small mark */
  .np-herostage--fine .np-herovial__cue::before{content:"";width:5px;height:5px;
    background:var(--trace-lift);opacity:.8}
  .np-herostage--fine .np-herovial.is-active .np-herovial__cue::before{display:none}

  .np-herovial__plate{top:calc(100% + 26px);max-width:20ch}
  .np-herovial__nm{font-size:.86rem}
}

/* Mobile is deliberately quieter than desktop: no float, no scroll parallax
   on the product stage. Fades and the examine interaction only. Movement on a
   handheld screen reads as instability rather than polish. */
@media (max-width:900px){
  .np-herovial__art{animation:none}
  .np-herostage{transform:translate3d(-50%,0,0)}
  .np-shelf[data-np-reveal] > [data-np-step]{transform:translateY(9px)}
}

@media (prefers-reduced-motion:reduce){
  .np-herovial__art{animation:none}
  .np-herostage{transform:translate3d(0,-50%,0)}
  .np-herovial,.np-herovial__plate,.np-herovial__cue{transition:none}
  .np-herostage.is-examining .np-herovial.is-active{transform:none}
  .np-herovial.is-pressing,.np-herovial.is-pressing.is-active{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .np-herostage{transform:translate3d(-50%,0,0)}
}