.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row > * { min-width: 0; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
/* =========================================================================
   AURAA — design system
   True black + deep charcoal + refined metallic gold, used sparingly.
   High-end biotech meets luxury goods. Author: Claude Fable 5.

   NOTE — token semantics were inverted for the dark rebrand while keeping
   the variable NAMES stable so the layout system is untouched:
     --paper  → the dark page surface   --ink  → the off-white text
     --teal   → refined gold            --teal-light → bright gold highlight
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------ */
:root {
  /* surface (dark) */
  --paper: #0a0a0a;
  --paper-2: #101010;
  --paper-3: #181816;
  --card: #141414;
  --label-cream: #14130f;

  /* "ink" = off-white bone text on dark */
  --ink: #ece7da;
  --ink-2: #cfc9ba;
  --ink-soft: #a39d8e;
  /* #7f7a6c measured 4.62:1 on the flat page black — a pass — but this token is used for
     small labels (card category, "From", bundle savings) that sit on the LIGHTER surfaces:
     4.22:1 on a card, 4.15:1 on --paper-3, and 4.44:1 where the body's radial gradient
     lifts the ground. All three are under the 4.5 AA floor for text this size, and the
     flat-black reading is the one place it happens to pass. #8b8577 clears every surface
     (4.84:1 worst case) and is still plainly the quietest step in the ink ramp. */
  --ink-faint: #8b8577;
  --line: rgba(201, 168, 76, 0.16);
  --line-2: rgba(236, 231, 218, 0.07);

  /* accent — refined gold, the only chroma on the page */
  --teal: #c9a84c;
  --teal-deep: #d9bd6f;   /* "deep" is used as accent TEXT — brighter on dark */
  --teal-light: #e7cd8a;
  --teal-wash: rgba(201, 168, 76, 0.09);
  --copper: #b08d57;
  --copper-deep: #d2b183;

  --gold: #c9a84c;
  --gold-hi: #e7cd8a;
  --gold-deep: #8a6f2e;
  --gold-grad: linear-gradient(112deg, #e7cd8a 0%, #c9a84c 46%, #a2823a 100%);

  --accent: var(--teal);
  --accent-deep: var(--teal-deep);

  /* type */
  --f-display: "Cormorant Garamond", "Georgia", serif;
  --f-brand: "Cinzel", "Georgia", serif;
  --f-text: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* fluid scale (min .. max across 380..1440) */
  --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.16rem, 1.08rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.25rem + 0.85vw, 2rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.95rem);
  --step-4: clamp(2.15rem, 1.55rem + 3vw, 4.3rem);
  --step-5: clamp(2.6rem, 1.6rem + 5vw, 6rem);

  /* space */
  --sp-1: 0.5rem;
  --sp-2: 0.85rem;
  --sp-3: 1.35rem;
  --sp-4: 2.1rem;
  --sp-5: 3.4rem;
  --sp-6: 5.5rem;
  --sp-7: 8rem;

  --radius: 4px;
  --radius-lg: 10px;
  --container: 1200px;
  --container-wide: 1360px;
  --header-h: 100px;   /* logo doubled 2026-10-23 (Cyrus) */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.7);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- reset ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--f-text);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "cv11";
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
ul {
  list-style: none;
  padding: 0;
}
h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

/* film grain — a faint cinematic film over the dark page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---- typography helpers ------------------------------------------------ */
.serif { font-family: var(--f-display); }
.mono { font-family: var(--f-mono); }
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}
.eyebrow--muted { color: var(--ink-faint); }
.display {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 380;
}
em, .italic { font-style: italic; }

/* ---- layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.wrap--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(3.4rem, 8vw, var(--sp-7)); }
.section--tight { padding-block: clamp(2.4rem, 5vw, var(--sp-6)); }
.divider { height: 1px; background: var(--line); border: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-head__title {
  font-family: var(--f-display);
  font-weight: 380;
  font-size: var(--step-3);
  max-width: 20ch;
}
.section-head__lead {
  max-width: 46ch;
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.section-head p.eyebrow { margin-bottom: var(--sp-2); }

/* ---- announcement bar -------------------------------------------------- */
.announce {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.announce__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.55rem 1rem;
  text-align: center;
  /* 🚨 THE WHOLE SITE SCROLLED SIDEWAYS BETWEEN ~721px AND ~1100px. Every item is
     white-space:nowrap in a flex row that never wrapped, and the rule below only drops
     the surplus items BELOW 720px — so in the band between, all four were forced onto
     one line and pushed the document past the viewport: 909px at 768, 975 at 900,
     1037 at 1024. That is a horizontal scrollbar on most tablets and small laptops, on
     every page, since the bar is sitewide. Pre-dates this branch.
     Wrapping is the fix rather than a wider breakpoint or overflow:hidden — it cannot
     overflow at ANY width, and it drops no information on the way. */
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.announce__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal-light);
  flex: none;
}
.announce__item { opacity: 0.9; white-space: nowrap; }
@media (max-width: 720px) {
  .announce__track { gap: 0.9rem; }
  .announce { font-size: 0.62rem; letter-spacing: 0.1em; }
  .announce__item:nth-of-type(n + 3), .announce__dot { display: none; }
}

/* ---- header ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}
.brand__mark { flex: none; }
.brand__word {
  font-family: var(--f-display);
  font-weight: 460;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.brand__word b { font-weight: 460; }
.brand__word span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6em;
  letter-spacing: 0.18em;
  vertical-align: 0.35em;
  color: var(--accent);
  margin-left: 0.15em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.7rem);
}
.nav__link {
  position: relative;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  padding: 0.4rem 0;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__item { position: relative; }
.nav__mega {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.nav__item:hover .nav__mega,
.nav__item:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out), visibility 0s;
}
.nav__mega a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-2);
  transition: background 0.2s, color 0.2s;
}
.nav__mega a:hover { background: var(--paper-2); color: var(--ink); }
.nav__mega a span { color: var(--ink-faint); font-family: var(--f-mono); font-size: 0.7rem; }

.header__actions { display: flex; align-items: center; gap: 0.9rem; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  /* 44px, not 40. These are the cart and the drawer close — primary controls on a phone,
     and the two most expensive taps on the site to miss. WCAG 2.5.8 (AA) only asks 24px,
     but 44 is the practical touch standard and costs 4px of chrome here. */
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background 0.25s, color 0.25s;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.cart-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  display: grid;
  place-items: center;
}

.nav-toggle { display: none; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), background 0.3s, color 0.3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); background: transparent; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; border-color: var(--accent); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.82rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.3s, gap 0.3s var(--ease-out);
}
.link-arrow:hover { border-color: var(--accent); gap: 0.75rem; color: var(--accent-deep); }
.link-arrow svg { width: 15px; height: 15px; }

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: clip;
}
/* ---- hero: full-bleed banner ------------------------------------------
   The photograph runs edge to edge across the top of the page and the copy sits
   on it, so three things have to hold that a two-column hero never has to:

   1. The section paints --paper itself. If the photograph 404s or is still in
      flight, the headline is still white on near-black instead of landing on
      whatever ground the browser happens to have.
   2. The scrim carries the contrast, not the image. A photograph's left edge is
      not a contract — one re-export or a different crop and the type is sitting
      on a highlight. The gradient is opaque where the words are and clears
      before the product.
   3. object-position is held right of centre. A 21:9 frame cropped to a phone
      loses most of its width; anchoring right keeps the vials in shot rather
      than centring on the empty space the composition reserved for type.
   ---------------------------------------------------------------------- */
.hero--banner {
  padding: 0;
  min-height: clamp(28rem, 62vh, 44rem);
  display: flex;
  align-items: center;
}
/* Two class selectors, deliberately. The dark-theme block further down restates a plain
   `.hero { background: ... }` at equal specificity, so a single-class rule here loses on
   source order and the banner's fallback ground silently never applies — which only shows
   up on the one occasion it matters, when the photograph has not loaded. */
.hero.hero--banner {
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(201, 168, 76, 0.10), transparent 55%),
    radial-gradient(60% 50% at 15% 85%, rgba(201, 168, 76, 0.05), transparent 60%),
    var(--paper);
}
.hero--banner .hero__media,
.hero--banner .hero__scrim { position: absolute; inset: 0; }
/* The banner is a background layer, not an <img>, on purpose. A missing <img>
   paints a broken-image box at its declared width, and this one declares 6336px,
   so the whole homepage reads as broken to anyone who has not added the file yet.
   A background-image that 404s simply does not paint: the gradient below shows
   through and the hero still looks deliberate. Drop a NEW date-stamped hero file into assets/hero/ (assets are cached immutable for a year)
   and it appears on the next deploy with no other change. */
/* Two layers on purpose. The photograph sits on top; the SVG sits under it.
   A background layer that 404s simply does not paint, so with no photo present
   the composed visual carries the fold on its own, and the day a hero file lands
   it covers the SVG with no CSS change and nothing to undo. */
.hero--banner .hero__media {
  /* Two layers: the photograph on top, the composed SVG under it. A layer that
     404s simply does not paint, so the SVG carries the fold if the photo is missing. */
  background-image:
    url("/assets/hero/hero-20261104b.webp"),
    url("/assets/hero/hero-visual.svg");
  background-size: cover, auto 88%;
  background-position: 72% 50%, right -4% center;
  background-repeat: no-repeat, no-repeat;
}
.hero--banner .hero__scrim {
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(10,10,10,0.94) 24%, rgba(10,10,10,0.62) 50%,
                    rgba(10,10,10,0.18) 76%, rgba(10,10,10,0) 100%),
    linear-gradient(0deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0) 40%);
}
.hero--banner .hero__inner { position: relative; width: 100%; }
.hero--banner .hero__copy {
  max-width: 44rem;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
@media (max-width: 940px) {
  /* Type over the photograph is a desktop luxury: the composition reserves the left
     half of a 21:9 frame for words, and a phone crops that half away. Keeping the
     overlay anyway cost the picture — the frame ran at opacity .34 under a near-solid
     scrim, so the vials were atmosphere rather than a subject.
     Here the two jobs get separate rooms instead of one they have to share. The
     photograph keeps a full-strength band across the top, cropped to the vials; the
     copy sits below it on the section's own near-black ground with nothing behind the
     type at all. That leaves the scrim one job: blending the seam between the two. */
  .hero--banner {
    /* Tall enough that the vials read at 390px, then capped three ways so the band
       never takes the whole fold: in vw for narrow screens, in vh so a short viewport
       (a small phone, or any phone in landscape) still opens on the headline as well
       as the picture, and in rem so a tablet does not scale it up without limit. vh
       rather than dvh on purpose — dvh would re-crop the photograph on every scroll
       as the browser toolbar collapses. */
    --hero-band: clamp(9.5rem, min(74vw, 42vh), 20rem);
    min-height: auto;
    display: block;
  }
  .hero--banner .hero__media {
    inset: 0 0 auto;
    height: var(--hero-band);
    opacity: 1;
    /* `cover` on a band this tall scales the frame to its height and drops the empty
       left third — the part the desktop composition set aside for type. Anchored right
       of centre and high, which holds the front vial and its neighbour in shot and
       keeps the gold caps clear of the top edge where a wider screen crops vertically. */
    background-size: cover, contain;
    background-position: 82% 22%, center;
    /* The 2688px master is ~208 KB to fill a band a few hundred pixels wide. The Image
       CDN resizes at the edge and negotiates AVIF/WebP off the Accept header. The URL
       is duplicated in a preload in index.html; a new date-stamped hero has to update
       both. The SVG underneath stays the layer that carries the fold if neither loads. */
    background-image:
      url("/.netlify/images?url=/assets/hero/hero-20261104b.webp&w=1200&q=78"),
      url("/assets/hero/hero-visual.svg");
  }
  .hero--banner .hero__scrim {
    inset: 0 0 auto;
    height: var(--hero-band);
    /* Vertical now, not horizontal. Shade under the sticky header so the nav stays
       legible over the gold, clear through the middle where the vials are, then down
       into --paper so the band ends on the exact colour the copy starts on and the
       seam reads as a fade rather than an edge. */
    background: linear-gradient(180deg,
      rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.12) 22%, rgba(10,10,10,0) 48%,
      rgba(10,10,10,0.5) 84%, var(--paper) 100%);
  }
  /* The copy is in normal flow beneath an absolutely positioned band, so it has to be
     pushed past it by hand. */
  .hero--banner .hero__inner { padding-top: var(--hero-band); }
  .hero--banner .hero__copy {
    max-width: none;
    padding-block: clamp(1.5rem, 6vw, 2.4rem) clamp(2.25rem, 8vw, 3.25rem);
  }
  /* The ribbon is absolute against the hero. On a phone the copy grows tall enough that
     bottom:4% lands on top of the last stat, so here it returns to the flow instead. */
  .hero--banner .ruo-ribbon {
    position: static;
    display: inline-block;
    margin-top: 1.4rem;
    /* The <=620px rule below centres the ribbon with right:50% + translateX(50%),
       which only lands where it is absolute. In the flow the offset does nothing and
       the transform alone shoves it half its own width off the right edge. */
    transform: none;
  }
}
/* Pre-existing, not introduced by the banner: .tagline-bar is an inline-flex row with
   0.34em tracking and no wrap, so at 390px "PERFORMANCE" ran 4px past the viewport and
   was clipped by the hero's overflow. It wraps now, and the tracking eases off where
   there is no room for it. */
.tagline-bar { flex-wrap: wrap; row-gap: 0.4rem; max-width: 100%; }
@media (max-width: 420px) {
  .tagline-bar { letter-spacing: 0.22em; gap: 0.6rem; }
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-3);
}
.hero__eyebrow .rule { width: 34px; height: 1px; background: var(--accent); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 340;
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.028em;
}
.hero__title em {
  font-style: italic;
  font-weight: 340;
  color: var(--accent-deep);
}
.hero__lead {
  margin-top: var(--sp-3);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero__cta {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.hero__meta {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.hero__stat b {
  display: block;
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
}
.hero__stat span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
}
.hero__halo {
  position: absolute;
  inset: 6% 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--teal-wash), transparent 68%);
  z-index: 0;
}
.hero-vial-svg {
  position: relative;
  z-index: 1;
  width: min(88%, 380px);
  filter: drop-shadow(0 30px 50px rgba(26, 24, 19, 0.16));
}
.ruo-ribbon {
  position: absolute;
  bottom: 4%;
  right: 0;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  box-shadow: var(--shadow-sm);
}

/* hero motion */
.hero-vial-body { animation: float 7s var(--ease) infinite; transform-origin: center; }
.hero-shadow { animation: floatShadow 7s var(--ease) infinite; }
.hero-sweep { animation: sweep 6.5s var(--ease) infinite; }
.hero-node { offset-path: path("M210 300 m -168 0 a 168 168 0 1 0 336 0 a 168 168 0 1 0 -336 0"); }
.hero-node-1 { animation: orbit 16s linear infinite; }
.hero-node-2 { animation: orbit 22s linear infinite reverse; offset-distance: 40%; }
.hero-node-3 { animation: orbit 19s linear infinite; offset-distance: 72%; }
.hero-orbit { opacity: 0.35; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes floatShadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.9); opacity: 0.7; }
}
@keyframes sweep {
  0% { transform: translateX(-40px); opacity: 0; }
  18% { opacity: 0.5; }
  40%, 100% { transform: translateX(200px); opacity: 0; }
}
@keyframes orbit {
  to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vial-body, .hero-shadow, .hero-sweep, .hero-node { animation: none; }
  .hero-node { display: none; }
}

/* ---- marquee (logos / claims) ----------------------------------------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee__item svg { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- trust row --------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trust__cell {
  background: var(--paper);
  padding: clamp(1.3rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.trust__cell svg { color: var(--accent); margin-bottom: 0.4rem; }
.trust__cell b { font-family: var(--f-display); font-size: var(--step-1); font-weight: 420; }
.trust__cell p { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 780px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
}

/* ---- product grid + card ---------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease), border-color 0.4s;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--teal) 42%, transparent);
}
/* the pool brightens under the cursor, so the hover reads as light rather than
   as a box moving */
.card:hover .card__media { background-size: 130% 130%, 100% 100%, 100% 100%; }
.card__media { transition: background-size 0.7s var(--ease-out); background-size: 100% 100%; }
/* The vial sits in a pool of gold rather than a flat box, the same light the
   hero uses. Nineteen products share one packshot silhouette, so the lighting is
   what stops a grid of them reading as the same picture nineteen times. */
.card__media {
  position: relative;
  aspect-ratio: 5 / 4.8;
  display: grid;
  place-items: center;
  background:
    radial-gradient(75% 55% at 50% 82%, rgba(201, 168, 76, 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 14%, rgba(236, 231, 218, 0.05), transparent 62%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  overflow: hidden;
}
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 100%, rgba(26,24,19,0.06), transparent 70%);
}
.card__media img {
  width: 70%;
  height: auto;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
  z-index: 1;
}
.card:hover .card__media img {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 26px 32px rgba(0, 0, 0, 0.62));
}
.card__badges {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.badge {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
.badge--sale { background: var(--accent); color: #fff; }
.badge--sold { background: var(--paper-3); color: var(--ink-soft); }
.card__body {
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.card__cat {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card__name {
  font-family: var(--f-display);
  font-size: var(--step-1);
  font-weight: 440;
  line-height: 1.1;
}
.card__cas {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--accent-deep);
  letter-spacing: 0.02em;
}
.card__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.chip {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.card__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.price { font-family: var(--f-display); font-size: 1.02rem; font-weight: 460; }
.price s { color: var(--ink-faint); font-weight: 400; margin-right: 0.35rem; font-size: 0.9em; }
.price--range { font-size: 0.95rem; }
.card__cta {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.3s, gap 0.3s var(--ease-out);
}
.card:hover .card__cta { color: var(--accent-deep); gap: 0.55rem; }
.card__link { position: absolute; inset: 0; z-index: 3; }
.card__ruo {
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 1.2rem 1rem;
}

/* ---- how it works ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.step__n {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step__title { font-family: var(--f-display); font-size: var(--step-2); font-weight: 400; margin: 0.8rem 0 0.6rem; }
.step p { color: var(--ink-soft); font-size: 0.92rem; }
.step::after {
  content: "";
  position: absolute;
  left: clamp(1.6rem, 3vw, 2.4rem);
  bottom: clamp(1.4rem, 3vw, 2rem);
  width: 26px; height: 1px;
  background: var(--accent);
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---- feature / why-choose split --------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.feature-list { display: grid; gap: 1px; margin-top: var(--sp-4); background: var(--line); border-block: 1px solid var(--line); }
.feature-list li {
  background: var(--paper);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.15rem 0.2rem;
}
.feature-list svg { color: var(--accent); margin-top: 0.15rem; }
.feature-list b { font-family: var(--f-display); font-weight: 460; font-size: 1.08rem; display: block; margin-bottom: 0.15rem; }
.feature-list p { color: var(--ink-soft); font-size: 0.9rem; }
.split__panel {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.4rem);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.split__panel .molecule-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--teal-light); opacity: 0.18;
}
.split__panel blockquote {
  position: relative;
  font-family: var(--f-display);
  font-weight: 340;
  font-size: var(--step-2);
  line-height: 1.28;
  z-index: 1;
}
.split__panel .quote-mark { color: var(--teal-light); margin-bottom: 1rem; }
.split__panel figcaption { position: relative; z-index: 1; margin-top: 1.6rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ---- product page ------------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pdp__media {
  position: sticky;
  top: 92px;
  background:
    radial-gradient(110% 80% at 50% 25%, #fff, transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pdp__media img { width: min(74%, 320px); filter: drop-shadow(0 30px 46px rgba(26,24,19,0.18)); }
.pdp__breadcrumb { margin-bottom: var(--sp-3); }
.pdp__title { font-family: var(--f-display); font-weight: 360; font-size: var(--step-4); line-height: 1; margin: 0.3rem 0 0.5rem; }
.pdp__ref { color: var(--ink-soft); font-size: 1.02rem; }
.pdp__price { font-family: var(--f-display); font-size: var(--step-2); font-weight: 440; margin-top: var(--sp-3); }
.pdp__price s { color: var(--ink-faint); font-weight: 400; font-size: 0.7em; margin-right: 0.5rem; }
.pdp__section { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pdp__section > .eyebrow { display: block; margin-bottom: var(--sp-2); }

.variants { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.variant {
  --v-accent: var(--accent);
  position: relative;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--f-mono);
  font-size: 0.86rem;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
  cursor: pointer;
}
.variant small { display: block; font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.15rem; letter-spacing: 0.02em; }
.variant:hover { border-color: var(--ink); }
.variant.is-active { border-color: var(--v-accent); background: var(--teal-wash); color: var(--accent-deep); }
.variant[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

.bundles { display: grid; gap: 0.6rem; }
.bundle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.bundle:hover { border-color: var(--ink); }
.bundle.is-active { border-color: var(--accent); background: var(--teal-wash); }
.bundle__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  display: grid; place-items: center;
  transition: border-color 0.25s;
}
.bundle.is-active .bundle__radio { border-color: var(--accent); }
.bundle.is-active .bundle__radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.bundle__label b { font-family: var(--f-display); font-weight: 460; font-size: 1.02rem; }
.bundle__label span { display: block; font-size: 0.78rem; color: var(--ink-soft); }
.bundle__save { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); background: var(--teal-wash); padding: 0.2rem 0.5rem; border-radius: 999px; }
.bundle__price { font-family: var(--f-display); font-weight: 460; text-align: right; }
.bundle__price small { display: block; font-family: var(--f-mono); font-size: 0.64rem; color: var(--ink-faint); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 38px; height: 40px; display: grid; place-items: center; color: var(--ink-2); transition: background 0.2s; }
.qty button:hover { background: var(--paper-2); }
.qty input { width: 40px; text-align: center; border: 0; background: transparent; font-family: var(--f-mono); font-size: 0.95rem; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.9rem; vertical-align: top; }
.spec-table th { color: var(--ink-faint); font-weight: 400; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; width: 40%; }
.spec-table td { font-family: var(--f-mono); font-size: 0.82rem; }
.spec-table td.serif { font-family: var(--f-display); font-size: 0.95rem; }

.ruo-plate {
  margin-top: var(--sp-3);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.ruo-plate svg { color: var(--accent); flex: none; margin-top: 0.1rem; }
.ruo-plate b { color: var(--ink); font-weight: 500; }

.coa-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card), var(--paper-2));
  margin-top: var(--sp-3);
}
.coa-callout__meta { display: flex; align-items: center; gap: 0.9rem; }
.coa-callout__meta svg { color: var(--accent); }
.coa-callout b { font-family: var(--f-display); font-weight: 460; }
.coa-callout small { display: block; font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-soft); }

/* ---- blog -------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.1rem, 2.5vw, 2rem); }
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
  padding-top: 1.2rem;
  transition: transform 0.4s var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); }
.post-card__meta { display: flex; gap: 0.8rem; align-items: center; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.post-card__cat { color: var(--accent-deep); }
.post-card__title { font-family: var(--f-display); font-weight: 400; font-size: var(--step-2); line-height: 1.12; margin: 0.7rem 0; }
.post-card:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-card__excerpt { color: var(--ink-soft); font-size: 0.9rem; }
.post-card__foot { margin-top: auto; padding-top: 1rem; font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.post-card__link { position: absolute; inset: 0; }
.post-card--feature { grid-column: 1 / -1; }

.post-card--feature .post-card__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.post-card--feature .post-card__title { font-size: var(--step-3); max-width: 16ch; }
.post-card--feature .post-figure {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.post-card--feature .post-figure .molecule-field { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--teal-light); opacity: 0.35; }
.post-card--feature .post-figure .post-figure__tag { position: relative; z-index: 1; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-light); }
@media (max-width: 760px) { .post-card--feature .post-card__inner { grid-template-columns: 1fr; } .post-card--feature .post-figure { order: -1; } }

/* article */
.article { max-width: 720px; margin-inline: auto; }
.article__head { text-align: center; margin-bottom: var(--sp-5); }
.article__title { font-family: var(--f-display); font-weight: 360; font-size: var(--step-4); line-height: 1.04; margin: var(--sp-2) 0; }
.article__meta { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.prose h2 { font-family: var(--f-display); font-weight: 420; font-size: var(--step-2); margin: 2.4rem 0 0.9rem; letter-spacing: -0.01em; }
.prose h3 { font-family: var(--f-display); font-weight: 440; font-size: var(--step-1); margin: 1.8rem 0 0.7rem; }
.prose p { margin-bottom: 1.15rem; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 0.3s; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose ul { margin: 0 0 1.3rem; display: grid; gap: 0.6rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); }
.prose .note {
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 1.6rem 0;
}
.prose blockquote { border-left: 2px solid var(--line); padding-left: 1.3rem; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--ink); margin: 1.6rem 0; }

.related-products { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: var(--sp-3); }
@media (max-width: 560px) { .related-products { grid-template-columns: 1fr; } }

/* ---- certificates ------------------------------------------------------ */
.coa-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); }
.coa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.coa-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.coa-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.coa-item__thumb { background: var(--paper-2); padding: 1rem; border-bottom: 1px solid var(--line); }
.coa-item__body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.coa-item__name { font-family: var(--f-display); font-weight: 440; font-size: 1.08rem; }
.coa-item__batch { font-family: var(--f-mono); font-size: 0.72rem; color: var(--accent-deep); }
.coa-item__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
.coa-item__foot .link-arrow { font-size: 0.68rem; }
.tag-filter { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); transition: all 0.25s; }
.tag-filter:hover { border-color: var(--ink); color: var(--ink); }
.tag-filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- forms ------------------------------------------------------------- */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--teal-wash);
}
.checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 0.1rem; }

/* ---- footer ------------------------------------------------------------ */
.footer { background: var(--ink); color: var(--paper); margin-top: var(--sp-6); }
.footer a { color: color-mix(in srgb, var(--paper) 78%, transparent); transition: color 0.25s; }
.footer a:hover { color: var(--paper); }
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.8rem, 6vw, 4.5rem);
}
.footer__brand .brand__word { color: var(--paper); }
.footer__tagline { margin-top: 1rem; max-width: 34ch; color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: 0.95rem; }
.footer__col h2 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 1rem; font-weight: 500; }
.footer__col li { margin-bottom: 0.55rem; font-size: 0.9rem; }
/* 🚨 16px TALL TAP TARGETS. These links are bare inline text with no padding, so on a phone
   each one is a 16px-high strip — 17 of them stacked, which is exactly the layout where a
   mis-tap sends someone to the wrong page. Raised to the WCAG 2.5.8 (AA) floor of 24px, not
   the 44px used for the cart and menu buttons: at 17 links, 44px each would add roughly
   340px of dead footer to every page on the site. inline-block is required — vertical
   padding on an inline box does not affect the hit area. */
.footer__col li a { display: inline-block; padding-block: 4px; min-height: 24px; }
.footer__ruo {
  border-top: 1px solid rgba(246,242,234,0.14);
  padding-block: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--teal-light);
}
.footer__ruo svg { flex: none; }
.footer__legal {
  border-top: 1px solid rgba(246,242,234,0.14);
  padding-block: 1.6rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  line-height: 1.7;
}
.footer__legal p { margin-bottom: 0.8rem; }
.footer__bottom {
  border-top: 1px solid rgba(246,242,234,0.14);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
.footer__bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
@media (max-width: 820px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ---- page hero (interior) --------------------------------------------- */
.page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-hero__title { font-family: var(--f-display); font-weight: 350; font-size: var(--step-4); line-height: 1.02; max-width: 18ch; }
.page-hero__lead { margin-top: var(--sp-3); max-width: 52ch; color: var(--ink-soft); font-size: var(--step-1); }
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent-deep); }
.breadcrumb span { opacity: 0.5; }

/* ---- cart drawer ------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,24,19,0.4);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 201;
  width: min(420px, 92vw); height: 100%;
  background: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--line); }
.drawer__head h2 { font-family: var(--f-display); font-size: var(--step-1); font-weight: 440; }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.drawer__empty { text-align: center; color: var(--ink-soft); padding-top: 3rem; }
.drawer__empty svg { color: var(--ink-faint); margin: 0 auto 1rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.5rem; }
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-2); align-items: center; }
.cart-line__img { background: var(--paper-2); border-radius: var(--radius); padding: 0.3rem; }
.cart-line__name { font-family: var(--f-display); font-weight: 460; font-size: 0.98rem; }
.cart-line__meta { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-faint); }
.cart-line__price { font-family: var(--f-display); font-weight: 460; }
.cart-line__remove { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.cart-line__remove:hover { color: var(--accent-deep); }
.cart-ack { margin: 0.5rem 0 1rem; }

/* ---- reveal animation -------------------------------------------------- */
/* 🚨 THE PAGE MUST NOT DEPEND ON JS TO BE READABLE. `.reveal` starts at opacity:0 and is
   only ever un-hidden by the IntersectionObserver in js/app.js. That means ANY failure of
   that one file — a network blip, a syntax error, a blocked script, JS switched off — leaves
   the homepage with no headline, no subcopy and no call to action: 26 elements on `/` alone,
   including the h1. Two independent backstops, because the hero is the whole page:

   1. `scripting: none` covers JS switched off or unsupported, with no delay and no flash.
   2. The failsafe animation covers the case CSS cannot detect — scripting IS enabled but
      app.js never ran. app.js adds `.reveals-ready` to <html> as its first action, so the
      animation is armed only while that class is absent. If app.js runs, nothing waits; if
      it never runs, everything fades in at 3s instead of staying invisible for ever.
      It must stay armed on `html:not(.reveals-ready)` rather than on `.reveal` itself,
      or it would also un-hide below-the-fold content on a healthy page and destroy the
      scroll reveal it exists to protect. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
html:not(.reveals-ready) .reveal { animation: reveal-failsafe 0.4s var(--ease-out) 3s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- view transitions (progressive enhancement) ----------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.35s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- scroll progress --------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-light));
  z-index: 300;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

/* ---- section index (editorial numbering) ------------------------------ */
.section-head__index {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}
.section-head__index b { color: var(--accent-deep); font-weight: 500; }

/* ---- home spotlight ---------------------------------------------------- */
.spotlight {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 15% 20%, rgba(90,160,149,0.22), transparent 55%);
  pointer-events: none;
}
.spotlight__media {
  position: relative;
  display: grid;
  place-items: center;
}
.spotlight__halo {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,160,149,0.28), transparent 66%);
}
.spotlight__media img {
  position: relative;
  width: min(74%, 300px);
  filter: drop-shadow(0 34px 50px rgba(0,0,0,0.45));
}
.spotlight__copy { position: relative; z-index: 1; }
.spotlight__eyebrow { color: var(--teal-light); }
.spotlight__name {
  font-family: var(--f-display);
  font-weight: 360;
  font-size: var(--step-4);
  line-height: 1;
  margin: 0.6rem 0 0.3rem;
}
.spotlight__cas { font-family: var(--f-mono); font-size: 0.82rem; color: var(--teal-light); letter-spacing: 0.04em; }
.spotlight__data { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.6rem 0; padding-block: 1.3rem; border-block: 1px solid rgba(246,242,234,0.16); }
.spotlight__data div b { display: block; font-family: var(--f-display); font-size: var(--step-1); font-weight: 400; }
.spotlight__data div span { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); }
.spotlight__lead { color: color-mix(in srgb, var(--paper) 80%, transparent); max-width: 46ch; margin-bottom: 1.6rem; }
.spotlight .btn--ghost { color: var(--paper); border-color: rgba(246,242,234,0.28); }
.spotlight .btn--ghost:hover { border-color: var(--paper); }
@media (max-width: 820px) {
  .spotlight { grid-template-columns: 1fr; text-align: left; }
  .spotlight__media { order: -1; }
}

/* ---- reconstitution calculator ---------------------------------------- */
/* 🚨 THIS ROW OVERFLOWED EVERY PHONE. Two things had to be true at once and both were:
   the row never collapsed to a single column, AND grid items default to min-width:auto,
   so each <input>'s intrinsic width became the floor the track could not shrink past.
   Measured at a 390px viewport: the row laid out at 474px and pushed the document to
   492px on /checkout/ — the only page on
   the site that scrolled sideways. min-width:0 is the half people forget; without it the
   single column would still be floored by the input. */
@media (max-width: 720px) {
}

/* ---- utilities --------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.max-46 { max-width: 46ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.2rem; border-radius: var(--radius);
  transition: top 0.25s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- mobile nav -------------------------------------------------------- */
@media (max-width: 900px) {
  .nav, .header__actions .desktop-only { display: none; }
  .nav-toggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;   /* was 42 — see .icon-btn */
  }
  .nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: transform 0.3s, opacity 0.3s; }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.3s; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  .nav-toggle.is-open span { background: transparent; }
  .nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 0; z-index: 90;
    background: var(--paper);
    padding: 1.5rem clamp(1.15rem, 4vw, 2.5rem) 3rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
    overflow-y: auto;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out), visibility 0s; }
  .mobile-menu a { display: block; font-family: var(--f-display); font-size: var(--step-2); font-weight: 400; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .mobile-menu a span { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-faint); }
}
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* ---- responsive layout shifts ----------------------------------------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { min-height: 340px; order: -1; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
}
@media (max-width: 620px) {
  .header { }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; }
  .card__body { padding: 0.9rem 0.9rem 1rem; }
  .hero__meta { gap: 1.2rem; }
  .ruo-ribbon { right: 50%; transform: translateX(50%); font-size: 0.56rem; white-space: nowrap; }
}

/* =========================================================================
   AURAA LAYER — dark-theme component overrides + gold enhancements.
   Everything below intentionally wins the cascade over the base system.
   ========================================================================= */

/* ---- global dark atmosphere ------------------------------------------- */
::selection { background: var(--gold); color: #0a0a0a; }
html { color-scheme: dark; }
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201, 168, 76, 0.07), transparent 60%),
    var(--paper);
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #26241e; border-radius: 6px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* display serif needs more weight than the old variable serif did */
.section-head__title, .page-hero__title, .hero__title, .article__title,
.pdp__title, .spotlight__name, .step__title, .card__name, .post-card__title,
.drawer__head h2, .prose h2, .prose h3 { font-weight: 500; }
.display { font-weight: 500; }

/* ---- brand lockup ------------------------------------------------------ */
.brand { gap: 0.75rem; }
.brand__lockup { display: inline-flex; align-items: center; gap: 0.75rem; }
.brand__logo { display: block; height: 80px; width: auto; }
.footer__brand .brand__logo { height: 44px; }
@media (max-width: 940px) { :root { --header-h: 80px; } .brand__logo { height: 56px; } }
@media (max-width: 620px) { :root { --header-h: 68px; } }
@media (max-width: 420px) { .brand__logo { height: 48px; } }
.brand__stack { display: flex; flex-direction: column; line-height: 1; gap: 0.28rem; }
.brand__word {
  font-family: var(--f-brand);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* optical: swallow trailing tracking */
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__sub {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.brand__sub i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.brand__sub i:last-child { background: linear-gradient(270deg, transparent, var(--line)); }
.footer .brand__word { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- announcement bar : deep black + gold ------------------------------ */
.announce {
  background: #060606;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(201, 168, 76, 0.14);
}
.announce__dot { background: var(--gold); }

/* ---- buttons : gold primary with light sweep --------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: #14100a;
  position: relative;
  overflow: hidden;
  background: var(--gold-grad);
  color: #14100a;
  border: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 46%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 250, 235, 0.65), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-out);
  z-index: 1;
  pointer-events: none;
}
.btn:hover { box-shadow: 0 10px 34px -10px rgba(201, 168, 76, 0.45); }
.btn:hover::after { left: 125%; }
.btn > * { position: relative; z-index: 2; }
.btn--ghost {
  background: rgba(201, 168, 76, 0.02);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn--ghost::after { display: none; }
.btn--ghost:hover { border-color: var(--gold); background: var(--teal-wash); color: var(--gold-hi); box-shadow: none; }
.btn--accent { background: var(--gold-grad); color: #14100a; border: none; }
.btn[disabled] { opacity: 0.4; }

/* ---- badges ------------------------------------------------------------ */
.badge { background: #1d1c19; color: var(--ink-2); border: 1px solid var(--line-2); }
.badge--sale { background: var(--gold-grad); color: #14100a; border: none; }
/* --ink-faint (#7f7a6c) on this background is 4.07:1, under the 4.5 AA floor for text this
   small (0.62rem). --ink-soft measures 6.45:1, is still clearly the quietest badge on the
   card, and is what the base rule above already uses — the dark override had downgraded it. */
.badge--sold { background: #1a1a18; color: var(--ink-soft); }
.cart-count { background: var(--gold); color: #0a0a0a; }

/* ---- cards : charcoal with gold detailing ------------------------------ */
.card { background: linear-gradient(180deg, #161616, #101010); }
.card:hover { border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(201, 168, 76, 0.12); }
.card__media {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(201, 168, 76, 0.1), transparent 58%),
    linear-gradient(180deg, #191919 0%, #101010 100%);
}
.card__media::after {
  background: radial-gradient(70% 55% at 50% 100%, rgba(0, 0, 0, 0.5), transparent 70%);
}
.card__media::before {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(231, 205, 138, 0.07), transparent);
  transform: skewX(-16deg);
  transition: left 0.9s var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.card:hover .card__media::before { left: 130%; }
.card__cas { color: var(--gold); }

/* ---- trust + steps cells on dark --------------------------------------- */
.trust { background: var(--line-2); border-color: var(--line-2); }
.trust__cell { background: var(--card); }
.trust__cell svg { color: var(--gold); }
.steps { background: var(--line-2); border-color: var(--line-2); }
.step { background: var(--card); }

/* ---- hero : black-gold atmosphere -------------------------------------- */
.hero {
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(201, 168, 76, 0.1), transparent 55%),
    radial-gradient(60% 50% at 15% 85%, rgba(201, 168, 76, 0.05), transparent 60%);
}
.hero__halo {
  background: radial-gradient(circle at 50% 45%, rgba(201, 168, 76, 0.16), transparent 64%);
}
.hero-vial-svg { filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.7)); }
.hero__visual { perspective: 900px; }
.hero__visual .hero-vial-svg { transition: transform 0.5s var(--ease-out); will-change: transform; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }
.hero__title em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.hero__eyebrow .rule { background: var(--gold); }
.hero__stat b { color: var(--ink); }
.ruo-ribbon { background: #121212; border-color: var(--line); color: var(--ink-soft); }

/* tagline bar — Research | Precision | Performance */
.tagline-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: var(--sp-3);
  font-family: var(--f-text);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tagline-bar b { color: var(--gold); font-weight: 500; }
.tagline-bar i { font-style: normal; color: var(--gold-deep); }

/* ---- marquee ------------------------------------------------------------ */
.marquee { background: #0c0c0c; }
.marquee__item svg { color: var(--gold); }

/* ---- split / quote panels : charcoal, gold field ------------------------ */
.split__panel { background: linear-gradient(160deg, #161513, #0e0e0d); color: var(--ink); border: 1px solid var(--line); }
.split__panel .molecule-field { color: var(--gold); opacity: 0.14; }
.split__panel .quote-mark { color: var(--gold); }
.split__panel figcaption { color: var(--gold); }

/* ---- spotlight : the gold-lit product feature --------------------------- */
.spotlight { background: linear-gradient(160deg, #171614, #0d0d0c); color: var(--ink); border: 1px solid var(--line); }
.spotlight::before { background: radial-gradient(90% 120% at 15% 20%, rgba(201, 168, 76, 0.14), transparent 55%); }
.spotlight__halo { background: radial-gradient(circle, rgba(201, 168, 76, 0.22), transparent 66%); }
.spotlight__eyebrow { color: var(--gold); }
.spotlight__cas { color: var(--gold); }
.spotlight__data { border-block-color: rgba(236, 231, 218, 0.1); }
.spotlight__data div span { color: var(--gold); }
.spotlight__lead { color: var(--ink-soft); }
.spotlight .btn--ghost { color: var(--ink); border-color: rgba(236, 231, 218, 0.2); }
.spotlight .btn--ghost:hover { border-color: var(--gold); }

/* ---- pdp ---------------------------------------------------------------- */
.pdp__media {
  background:
    radial-gradient(110% 80% at 50% 22%, rgba(201, 168, 76, 0.1), transparent 60%),
    linear-gradient(180deg, #181818 0%, #0f0f0f 100%);
}
.pdp__media img { filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.7)); }
.variant:hover { border-color: var(--gold); }
.variant.is-active { color: var(--gold-hi); }
.bundle:hover { border-color: var(--gold); }
.ruo-plate { background: #121210; border-left-color: var(--gold); }
.coa-callout { background: linear-gradient(180deg, #161616, #101010); }

/* ---- blog --------------------------------------------------------------- */
.post-card { border-top-color: rgba(201, 168, 76, 0.35); }
.post-card--feature .post-figure { background: linear-gradient(160deg, #171614, #0d0d0c); border: 1px solid var(--line); }
.post-card--feature .post-figure .molecule-field { color: var(--gold); opacity: 0.28; }
.post-card--feature .post-figure .post-figure__tag { color: var(--gold); }

/* ---- certificates -------------------------------------------------------- */
.coa-item__thumb { background: #101010; }
.tag-filter.is-active { background: var(--gold-grad); color: #14100a; border-color: transparent; }
.tag-filter:hover { border-color: var(--gold); color: var(--gold-hi); }

/* ---- forms ---------------------------------------------------------------- */
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

/* ---- footer : deep black, gold column heads ------------------------------ */
.footer { background: #060606; color: var(--ink-2); border-top: 1px solid var(--line); }
.footer a { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.footer a:hover { color: var(--gold-hi); }
.footer__brand .brand__word { color: transparent; }
.footer__tagline { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.footer__col h2 { color: var(--gold); }
.footer__ruo { border-top-color: rgba(236, 231, 218, 0.09); color: var(--gold); }
.footer__legal { border-top-color: rgba(236, 231, 218, 0.09); color: color-mix(in srgb, var(--ink) 55%, transparent); }
.footer__legal p strong { color: var(--ink) !important; }
.footer__bottom { border-top-color: rgba(236, 231, 218, 0.09); color: color-mix(in srgb, var(--ink) 55%, transparent); }
.footer .chip { border-color: rgba(236, 231, 218, 0.18) !important; color: var(--gold) !important; }

/* ---- calculator : the gold result panel ---------------------------------- */

/* ---- drawer ---------------------------------------------------------------- */
.drawer { background: #0e0e0e; }
.drawer-backdrop { background: rgba(0, 0, 0, 0.66); }
.cart-line__img { background: #181818; }

/* ---- skip link / scroll progress ------------------------------------------ */
.skip-link { background: var(--gold); color: #0a0a0a; }
.scroll-progress { background: var(--gold-grad); }

/* ---- section dividers : gold hairline gradient ---------------------------- */
.section + .section { position: relative; }

/* ---- gold section label (numbered) ---------------------------------------- */
.section-head__index b { color: var(--gold); }
.eyebrow { font-family: var(--f-text); font-weight: 600; letter-spacing: 0.3em; font-size: 0.66rem; }

/* ---- reduced-motion guards for the new effects ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn::after, .card__media::before { display: none; }
  .hero__visual .hero-vial-svg { transform: none !important; }
}


/* =========================================================================
   COMMERCE — cart stepper, checkout, payment instructions, admin
   Concatenated onto main.css at build time (single stylesheet request).
   ========================================================================= */

/* ---- cart drawer quantity stepper ---- */
.cart-line__qty { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.cart-line__qty button {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2);
  font-size: .85rem; line-height: 1; transition: border-color .2s, color .2s;
}
.cart-line__qty button:hover { border-color: var(--gold); color: var(--gold-hi); }
.cart-line__qty span { font-family: var(--f-mono); font-size: .8rem; min-width: 1.2rem; text-align: center; }
.cart-line__qty .cart-line__remove { border: 0; margin-left: .4rem; width: auto; height: auto; }
.btn.is-disabled { opacity: .45; }

/* ---- checkout ---- */
.checkout { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.checkout__block { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line-2); }
.checkout__block:last-of-type { border-bottom: 0; margin-bottom: 0; }
.checkout__block > .eyebrow { display: block; margin-bottom: var(--sp-3); }
.checkout__summary {
  position: sticky; top: 92px;
  background: linear-gradient(180deg, #161616, #101010);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
}
.checkout__summary-title { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); margin-bottom: 1rem; }
.checkout__items { display: grid; gap: .9rem; }
.checkout__item { display: grid; grid-template-columns: 40px 1fr auto; gap: .8rem; align-items: center; }
.checkout__item img { border-radius: 3px; background: #0e0e0e; }
.checkout__item b { display: block; font-family: var(--f-display); font-weight: 500; font-size: .95rem; }
.checkout__item span { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-faint); }
.checkout__item em { font-style: normal; font-family: var(--f-display); font-weight: 500; }
.checkout__totals { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line-2); display: grid; gap: .45rem; }
.checkout__row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-soft); }
.checkout__row--total {
  margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--f-display); font-size: 1.15rem; font-weight: 500;
}
.checkout__note, .checkout__ruo {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .05em;
  color: var(--ink-faint); margin-top: .8rem; line-height: 1.6;
}
.checkout__ruo { color: var(--gold); border-top: 1px solid var(--line-2); padding-top: .9rem; margin-top: 1.1rem; }
.checkout__empty { color: var(--ink-soft); font-size: .9rem; }
.checkout__error {
  margin-top: var(--sp-3); padding: .85rem 1.1rem; border-radius: var(--radius);
  border: 1px solid rgba(220, 90, 90, .4); background: rgba(220, 90, 90, .08);
  color: #f0b3b3; font-size: .86rem;
}
@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; order: -1; }
}

/* ---- order / payment instructions ---- */
.order-pane { max-width: 760px; margin-inline: auto; }
.order-head { text-align: center; margin-bottom: var(--sp-5); }
.order-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem;
}
.order-badge svg { color: var(--gold); }
.order-title { font-family: var(--f-display); font-weight: 500; font-size: var(--step-3); line-height: 1.1; margin: 1rem 0 .9rem; }
.order-lead { color: var(--ink-soft); max-width: 56ch; margin-inline: auto; }
.order-ref-inline { color: var(--gold); font-family: var(--f-mono); font-size: .92em; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: var(--sp-4); }
.order-ref-card, .order-due-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.5vw, 1.6rem); text-align: center;
  background: linear-gradient(180deg, #161616, #101010);
}
.order-due-card { background: var(--gold-grad); border-color: transparent; color: #14100a; }
.order-due-card .eyebrow { color: #4d3d12; }
.order-ref { font-family: var(--f-mono); font-size: clamp(1.4rem, 4vw, 2rem); color: var(--gold-hi); letter-spacing: .08em; margin: .6rem 0 .8rem; }
.order-due { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; margin: .6rem 0 .4rem; }
.order-due-sub { font-family: var(--f-mono); font-size: .68rem; color: #4d3d12; }
.order-ref-note { font-size: .72rem; color: var(--ink-faint); margin-top: .5rem; }
.copy-btn {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem .9rem; color: var(--ink-2);
  transition: border-color .25s, color .25s, background .25s;
}
.copy-btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.copy-btn.is-copied { background: var(--gold); color: #0a0a0a; border-color: var(--gold); }

.pay { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pay__tabs { display: flex; border-bottom: 1px solid var(--line); background: #0e0e0e; }
.pay__tab {
  flex: 1; padding: .95rem .6rem; font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 2px solid transparent; transition: color .25s, border-color .25s, background .25s;
}
.pay__tab:hover { color: var(--ink); }
.pay__tab.is-active { color: var(--gold-hi); border-bottom-color: var(--gold); background: rgba(201, 168, 76, .06); }
.pay__panel { display: none; padding: clamp(1.1rem, 3vw, 1.8rem); }
.pay__panel.is-active { display: block; }
.pay__addr { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--line-2); }
.pay__addr:last-of-type { border-bottom: 0; }
.pay__addr-main { flex: 1; min-width: 0; }
.pay__addr .eyebrow { display: block; margin-bottom: .5rem; }
.pay__addr .eyebrow small { color: var(--ink-faint); letter-spacing: .1em; }
.pay__addr code {
  display: block; font-family: var(--f-mono); font-size: .78rem; color: var(--ink);
  background: #0d0d0d; border: 1px solid var(--line-2); border-radius: 4px;
  padding: .6rem .7rem; margin-bottom: .6rem; word-break: break-all; line-height: 1.5;
}
.pay__qr { flex: none; border-radius: 6px; background: #fff; padding: 6px; }
.pay__hint { font-size: .78rem; color: var(--ink-faint); margin-top: .9rem; }
.order-foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-2); color: var(--ink-soft); font-size: .9rem; }
.order-foot p { margin-bottom: .7rem; }
.order-foot a { color: var(--gold); }
.order-ruo { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: var(--gold); margin-top: 1.1rem; }
.order-empty { text-align: center; max-width: 620px; margin-inline: auto; padding-block: var(--sp-5); }
@media (max-width: 640px) {
  .order-grid { grid-template-columns: 1fr; }
  .pay__addr { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .pay__qr { align-self: center; }
}

/* ---- admin ---- */
.admin-gate { max-width: 420px; margin-inline: auto; padding-block: var(--sp-5); }
.admin-login { margin-top: 1.4rem; }
.admin-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-4); }
.admin-title { font-family: var(--f-display); font-weight: 500; font-size: var(--step-3); margin-top: .4rem; }
.admin-bar__actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.admin-stats { display: flex; gap: 1.2rem; font-family: var(--f-mono); font-size: .7rem; color: var(--ink-faint); letter-spacing: .06em; }
.admin-stats b { color: var(--gold); }
.admin-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-4); }
.admin-list { display: grid; gap: 1rem; }
.admin-order { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #151515, #0f0f0f); padding: clamp(1rem, 2.5vw, 1.5rem); }
.admin-order__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-2); }
.admin-order__ref { font-family: var(--f-mono); font-size: 1rem; color: var(--gold-hi); letter-spacing: .06em; margin-right: .7rem; }
.admin-order__total { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.admin-status {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft);
}
.admin-status--pending_payment { color: #e0b45c; border-color: rgba(224, 180, 92, .45); }
.admin-status--paid { color: #7fd0a0; border-color: rgba(127, 208, 160, .4); }
.admin-status--shipped { color: #7fb4d0; border-color: rgba(127, 180, 208, .4); }
.admin-status--cancelled { color: #c98f8f; border-color: rgba(201, 143, 143, .4); }
.admin-order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: 1.1rem 0; }
.admin-order__grid .eyebrow { display: block; margin: .9rem 0 .3rem; }
.admin-order__grid .eyebrow:first-child { margin-top: 0; }
.admin-order__grid p { font-size: .86rem; color: var(--ink-2); line-height: 1.6; }
.admin-order__grid a { color: var(--gold); }
.admin-items { display: grid; gap: .35rem; font-size: .84rem; color: var(--ink-2); }
.admin-items li { display: flex; gap: .5rem; align-items: baseline; }
.admin-items span { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-faint); }
.admin-items b { margin-left: auto; font-family: var(--f-display); font-weight: 500; }
.admin-order__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.admin-track { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.admin-track input {
  font: inherit; font-size: .82rem; padding: .5rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #0d0d0d; color: var(--ink); width: 190px;
}
.admin-track input:focus { outline: none; border-color: var(--gold); }
@media (max-width: 760px) {
  .admin-order__grid { grid-template-columns: 1fr; }
  .admin-track { margin-left: 0; width: 100%; }
  .admin-track input { flex: 1; width: auto; }
}

/* ============================================================================
   ENTRY GATE
   Armed by js/age-gate.js, which adds `gate-armed` to <html> the moment it
   runs. Nothing here hides the page unless that class is present, so a script
   that never loads leaves the storefront perfectly usable rather than blank.
   ========================================================================== */
html.gate-armed,
html.gate-armed body { overflow: hidden; }

/* Everything except the gate itself. visibility rather than display so the
   page underneath keeps its layout and does not reflow on dismissal. */
html.gate-armed body > *:not(.agegate) { visibility: hidden; }

.agegate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 168, 76, 0.07), transparent 60%),
    var(--paper);
  animation: agegate-in 0.35s var(--ease-out) both;
}
@keyframes agegate-in { from { opacity: 0 } to { opacity: 1 } }

.agegate.is-leaving { animation: agegate-out 0.25s var(--ease-out) both; }
@keyframes agegate-out { to { opacity: 0 } }

.agegate__inner { max-width: 34rem; text-align: center; }

.agegate__mark {
  margin: 0;
}
.agegate__mark img { display: block; height: 46px; width: auto; margin: 0 auto; }
.agegate__mark b { display: block; font-weight: 500; font-size: 0.62rem; color: var(--teal); }

.agegate__rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 1.6rem auto;
  background: var(--teal);
  opacity: 0.6;
}

.agegate__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.agegate__lead {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 2.2rem;
}

.agegate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}
.agegate__actions .btn { min-width: 12rem; }

.agegate__fine {
  margin: 2.2rem 0 0;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.agegate__fine a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* The refusal state. Same frame, no way forward, no second chance button that
   would make the first answer meaningless. */
.agegate.is-declined .agegate__title { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .agegate, .agegate.is-leaving { animation: none; }
}