/* fonts.css */
/* ============================================================================
   EMBER — Self-hosted display face (Poppins, subset Latin, WOFF).
   Poppins is a geometric sans whose rounded-geometric character echoes the
   EMBER (Quanta) wordmark, giving the display voice brand cohesion and a
   consistent render across all devices. OFL-licensed; safe to self-host.
   Utility/body type uses the system neo-grotesque stack (see tokens).
   ========================================================================== */
@font-face { font-family: "EMBER Display"; src: url("/assets/fonts/poppins-300.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "EMBER Display"; src: url("/assets/fonts/poppins-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EMBER Display"; src: url("/assets/fonts/poppins-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EMBER Display"; src: url("/assets/fonts/poppins-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* Editorial display serif — Instrument Serif (SIL OFL). High-contrast,
   elegant display serif used sparingly for emotional lines: the hero
   italic "refined." and the lower-section headline. Licensed replacements
   (Bodoni Moda / Canela) lead the --font-editorial stack and take over the
   moment their files are added. */
@font-face { font-family: "EMBER Editorial"; src: url("/assets/fonts/instrument-serif-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EMBER Editorial"; src: url("/assets/fonts/instrument-serif-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }


/* tokens.css */
/* ============================================================================
   EMBER — Design Tokens
   Single source of truth for colour, type, space, radius, borders, motion.
   Everything downstream references these custom properties.
   ========================================================================== */
:root {
  /* --- Core palette (approved reference master) ----------------------- */
  --ivory:        #EEE9DF;   /* warm ivory header/background      */
  --warm-white:   #F7F4EE;   /* soft warm white (surfaces)       */
  --paper:        #F7F4EE;   /* soft paper white (surfaces)      */
  --ink:          #111111;   /* near black (primary text)        */
  --charcoal:     #171715;   /* deep charcoal (dark sections)    */
  --obsidian-ref: #0D0D0C;   /* deepest obsidian                 */
  --stone:        #81766A;   /* warm stone (pedestal/mid neutral)*/
  --warm-gray:    #A59C90;   /* muted warm gray (secondary text) */
  --gray:         #A59C90;   /* muted warm gray (secondary text) */
  --hairline:     #DAD4C9;   /* hairline borders / rules         */
  --brass:        #B5975C;   /* champagne gold accent            */
  --champagne-ref:#B5975C;   /* champagne gold                   */
  --soft-gold:    #C4A875;   /* soft gold (on-dark accents)      */
  --brass-soft:   #C4A875;   /* lighter brass for on-dark accents */

  /* Derived neutrals */
  --ink-70:       rgba(17,17,17,.70);
  --ink-55:       rgba(17,17,17,.55);
  --ink-08:       rgba(17,17,17,.08);
  --paper-12:     rgba(250,249,246,.12);
  --paper-70:     rgba(250,249,246,.70);

  /* --- Product colour families (deep, sophisticated) ------------------ */
  --forest:       #1F3A2E;
  --navy:         #1B2A3B;
  --aubergine:    #3A2130;
  --taupe:        #5E5346;
  --oxide:        #7C3A2C;
  --graphite:     #2B2B2B;

  /* --- Semantic aliases ---------------------------------------------- */
  --bg:           var(--ivory);
  --surface:      var(--paper);
  --surface-alt:  #EFEBE2;
  --text:         var(--ink);
  --text-muted:   #6B665E;         /* accessible muted (AA on ivory)   */
  --text-faint:   var(--gray);
  --border:       var(--hairline);
  --border-strong:#C7C2B8;
  --accent:       var(--brass);
  --on-dark:      var(--ivory);
  --on-dark-muted:#B7B2A8;

  /* --- Typography ----------------------------------------------------- */
  /* Neo-grotesk (nav, body, UI). Real webfonts (Neue Montreal / Suisse /
     Graphik) drop in ahead of Inter; system stack keeps it robust now.   */
  --font-sans: "Neue Montreal", "Suisse Intl", "Graphik", "General Sans",
               "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  /* Editorial serif, used sparingly for warmth. */
  --font-serif: "Editorial New", "Canela", "Newsreader", "Georgia",
                "Times New Roman", serif;
  /* High-contrast editorial italic display serif (hero "refined.",
     lower-section headline). Self-hosted Cormorant Garamond leads; the
     licensed replacements (Bodoni Moda / Canela) drop in ahead of it. */
  --font-editorial: "Bodoni Moda", "Canela", "EMBER Editorial",
                    "Cormorant Garamond", "Instrument Serif", "Editorial New", Georgia, serif;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  --fs-h3:      clamp(1.15rem, 1rem + .5vw, 1.4rem);
  --fs-lead:    clamp(1.05rem, .98rem + .5vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .72rem;

  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-body:    1.62;
  --tracking-label: .16em;
  --tracking-tight: -0.01em;

  /* --- Spacing scale (rem) ------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 4.5rem;  --sp-10: 6rem;   --sp-11: 8rem;   --sp-12: 10rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* --- Layout --------------------------------------------------------- */
  --maxw: 1240px;
  --maxw-narrow: 780px;
  --gutter: clamp(1.25rem, .5rem + 3vw, 3rem);

  /* --- Radius (restrained) ------------------------------------------- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  /* --- Borders & shadow (minimal) ------------------------------------ */
  --hair: 1px solid var(--border);
  --hair-strong: 1px solid var(--border-strong);
  --shadow-soft: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.05);

  /* --- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --z-nav: 100;
  --z-overlay: 200;
}

/* ============================================================================
   Milestone 3 — evolved luxury/futuristic system (tokens merge into :root)
   ========================================================================== */
:root {
  /* Core neutrals — approved reference master */
  --obsidian:   #0D0D0C;   /* deep cinematic dark            */
  --obsidian-2: #171715;   /* raised dark surface (charcoal) */
  --mineral:    #F7F4EE;   /* soft warm white                */
  --mineral-2:  #EEE9DF;   /* warm ivory panel               */
  --silver:     #C9C7C1;   /* cool silver-gray               */
  --silver-line:#DEDCD6;   /* silver hairline on dark? no    */
  --champagne:  #B5975C;   /* muted metallic champagne       */
  --champagne-2:#C4A875;   /* soft gold on dark              */

  /* Hero cinematic scene (dark warm-lit pedestal environment) */
  --scene-0:    #0C0A08;   /* deepest scene shadow           */
  --scene-1:    #1a1510;   /* warm dark wall base            */
  --scene-2:    #2a2118;   /* mid warm wall                  */
  --scene-lit:  #6a5541;   /* warm directional light pool    */
  --scene-hi:   #8d735a;   /* brightest warm highlight        */
  --ped-top:    #2b2620;   /* stone pedestal top face        */
  --ped-face:   #17140f;   /* stone pedestal front face      */
  --ped-edge:   #3d3327;   /* stone pedestal lit edge        */

  /* Product accent colours (Milestone 4 catalog: label-derived) */
  --navy:     #16233A;
  --forest:   #1C3A2C;
  --bronze:   #6E5327;
  --burgundy: #4A1E27;
  --coral:    #BE5741;
  --teal:     #1C5561;

  /* Product-dark environments (full-bleed cinematic sections) */
  --env-forest:    #15271E;
  --env-navy:      #121E2B;
  --env-bronze:    #241B10;
  --env-burgundy:  #271419;
  --env-coral:     #34201A;
  --env-teal:      #112329;
  --env-aubergine: #291824;
  --env-taupe:     #3B332A;
  --env-oxide:     #48231A;
  --env-graphite:  #1B1B1C;

  /* Product card tints (pale mineral with a whisper of the label undertone) */
  --tint-navy:     #E9ECF1;
  --tint-forest:   #E9EEE9;
  --tint-bronze:   #F1ECE1;
  --tint-burgundy: #F1EAEA;
  --tint-coral:    #F5EDE7;
  --tint-teal:     #E8EFF0;

  /* Legacy tints retained for older sections */
  --tint-taupe:     #EFEAE1;
  --tint-oxide:     #F1E8E3;

  /* ==========================================================================
     PRODUCT COLOUR WORLDS — Milestone 4 (13 approved vials)
     Every value below is sampled from the approved label artwork, not invented.
     Four roles per product:
       --<id>        label accent (rules, dots, small metallic-adjacent marks)
       --env-<id>    dark cinematic PDP environment
       --tint-<id>   card surface base — pale mineral, barely tinted
       --wash-<id>   deeper tonal used at low opacity for the card's
                     atmospheric gradient (never a flat colour block)
     These declarations come last so they supersede the legacy values above.
     ====================================================================== */
  --navy:      #141B2E;  --env-navy:      #101725;  --tint-navy:      #E6E9EF;  --wash-navy:      #B9C1D2;
  --forest:    #11261C;  --env-forest:    #101F18;  --tint-forest:    #E6ECE6;  --wash-forest:    #B4C4B7;
  --bronze:    #32220F;  --env-bronze:    #1F1710;  --tint-bronze:    #EFE9DC;  --wash-bronze:    #CFBE9C;
  --burgundy:  #2D1014;  --env-burgundy:  #201113;  --tint-burgundy:  #EFE6E4;  --wash-burgundy:  #CBB0AB;
  --coral:     #973931;  --env-coral:     #2A1613;  --tint-coral:     #F2E8E2;  --wash-coral:     #D9B9AA;
  --teal:      #092832;  --env-teal:      #0E2029;  --tint-teal:      #E4EBED;  --wash-teal:      #AEC4CB;
  --graphite:  #242320;  --env-graphite:  #16150F;  --tint-graphite:  #E9E7E2;  --wash-graphite:  #C2BDB2;
  --aubergine: #2C1831;  --env-aubergine: #1A0F1D;  --tint-aubergine: #EAE4EB;  --wash-aubergine: #C3B2C6;
  --magenta:   #671A49;  --env-magenta:   #230E19;  --tint-magenta:   #EFE3E8;  --wash-magenta:   #D2AEBF;
  --iris:      #47415D;  --env-iris:      #171420;  --tint-iris:      #E7E5EC;  --wash-iris:      #BAB5C6;
  --indigo:    #211958;  --env-indigo:    #12102A;  --tint-indigo:    #E4E3EE;  --wash-indigo:    #B2B0CD;
  --sage:      #525B46;  --env-sage:      #1A1D14;  --tint-sage:      #E9EAE1;  --wash-sage:      #C0C5AF;
  --slate:     #424C58;  --env-slate:     #151A20;  --tint-slate:     #E5E8EB;  --wash-slate:     #B4BEC7;

  /* Typography roles */
  --font-display: "EMBER Display", "PP Neue Montreal", "Söhne", "Aeonik",
                  "TWK Everett", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* --font-sans (utility/commerce) and --font-serif (editorial) inherited from M1 */

  /* Larger, more confident scale */
  --fs-hero:    clamp(3.4rem, 1.6rem + 8vw, 8.5rem);
  --fs-mega:    clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  --lh-mega:    0.98;
  --track-display: -0.02em;

  /* Cinematic motion */
  --ease-cine: cubic-bezier(.19, 1, .22, 1);
  --dur-cine:  820ms;
  --dur-rise:  560ms;

  /* Sophisticated depth */
  --shadow-lift:  0 30px 60px -24px rgba(11,11,12,.42);
  --shadow-float: 0 20px 44px -18px rgba(11,11,12,.30);
  --glow-champ:   0 0 60px rgba(196,169,104,.16);
  --edge-light:   inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.04);
  --grain-opacity: .038;

  /* Layered z-index system */
  --z-grain: 1;
  --z-raise: 2;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 500;

  /* On-dark semantic */
  --on-obsidian:      #F2F0EA;
  --on-obsidian-muted:#A6A39B;
}


/* base.css */
/* ============================================================================
   EMBER — Base / reset / primitives
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: rgba(175,139,74,.22); }

.visually-hidden {
  position: absolute !important; 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: 50%; transform: translateX(-50%) translateY(-120%);
  top: 8px; z-index: 300; background: var(--ink); color: var(--ivory);
  padding: .6rem 1rem; border-radius: var(--radius); font-size: var(--fs-small);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* --- Layout primitives --------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.bleed { position: relative; }

.divider { height: 1px; background: var(--border); border: 0; }

/* Reveal-on-scroll (progressive; visible by default if JS/observer absent) */
[data-reveal] { opacity: 1; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* typography.css */
/* ============================================================================
   EMBER — Typography system
   The wordmark is the hero; supporting type is neutral, highly readable.
   ========================================================================== */

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 500; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); font-weight: 500; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 400;
}

.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.body--muted { color: var(--text-muted); }
p { max-width: 68ch; }

/* Editorial serif — used sparingly for warmth on select statements */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}
.serif-statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.28;
  font-weight: 400;
}

/* Small uppercase labels with increased tracking */
.label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
}
.label--brass { color: var(--brass); }
.label--index { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  color: var(--brass);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--brass);
  opacity: .8;
}

.measure { max-width: 60ch; }
.measure-wide { max-width: 72ch; }

.numeric { font-variant-numeric: tabular-nums lining-nums; }

/* On dark surfaces */
.on-dark { color: var(--on-dark); }
.on-dark .lead, .on-dark .body--muted, .on-dark .label { color: var(--on-dark-muted); }
.on-dark .eyebrow { color: var(--brass-soft); }
.on-dark .eyebrow::before { background: var(--brass-soft); }


/* components.css */
/* ============================================================================
   EMBER — Components
   ========================================================================== */

/* --- Wordmark (inline SVG; span height controls size) --------------- */
.wordmark { display: inline-flex; align-items: center; line-height: 0; color: var(--ink); }
.wordmark svg { display: block; height: 100%; width: auto; }

/* --- Buttons: substantial, polished (never pill) -------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: #000; border-color: #000; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.btn--on-dark { --btn-bg: var(--ivory); --btn-fg: var(--ink); }
.btn--on-dark:hover { background: #fff; border-color: #fff; }
.btn--ghost.btn--on-dark {
  --btn-bg: transparent; --btn-fg: var(--ivory); border-color: rgba(243,240,233,.34);
}
.btn--ghost.btn--on-dark:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.btn .arw { transition: transform var(--dur) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* Text link with animated fine underline */
.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--brass); }
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(2px); }
.link--muted { color: var(--text-muted); font-weight: 400; }

/* --- Announcement bar ---------------------------------------------- */
.announce {
  background: var(--charcoal); color: var(--on-dark);
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
}
.announce .container {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 40px; text-align: center; color: var(--on-dark-muted);
}
.announce .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--brass); }

/* --- Navigation ----------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hair);
}
.nav__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-5); min-height: 72px;
}
.nav__menu-trigger { display: none; }
.nav__brand { display: inline-flex; align-items: center; grid-column: 1; justify-self: start; }
.nav__brand .wordmark { height: 21px; }
.nav__links { grid-column: 2; justify-self: center; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, .4rem + 1.3vw, 2.1rem); }
.nav__utils { grid-column: 3; }
.nav__link {
  font-size: var(--fs-small); font-weight: 450; color: var(--ink-70);
  padding: .4rem 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--brass); transition: right var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }
.nav__utils { display: flex; align-items: center; justify-content: flex-end; gap: clamp(.5rem, .2rem + 1vw, 1.25rem); }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  color: var(--ink); transition: background var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--ink-08); }
.iconbtn svg { width: 19px; height: 19px; }
.cartbtn { position: relative; }
.cartbtn .count {
  position: absolute; top: 4px; right: 3px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--brass); color: #fff;
  font-size: 9px; font-weight: 600; display: grid; place-items: center; line-height: 1;
}
.nav__menu-trigger { display: none; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav__inner { grid-template-columns: auto 1fr auto; min-height: 62px; }
  .nav__links { display: none; }
  .nav__menu-trigger { display: inline-flex; grid-column: 1; justify-self: start; }
  .nav__brand { grid-column: 2; justify-self: center; }
  .nav__utils { grid-column: 3; gap: .25rem; }
  .nav__utils .util-search, .nav__utils .util-account { display: none; }
}

/* Slide-out / full menu */
.menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--ivory); color: var(--ink);
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out);
  display: flex; flex-direction: column; visibility: hidden;
}
.menu.is-open { transform: none; visibility: visible; }
.menu__top { display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; border-bottom: var(--hair); }
.menu__list { display: flex; flex-direction: column; padding: var(--sp-5) 0; }
.menu__link {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); font-weight: 450;
  padding: .55rem 0; border-bottom: var(--hair); display: flex;
  align-items: center; justify-content: space-between; color: var(--ink);
}
.menu__link .idx { font-size: var(--fs-label); color: var(--text-faint); letter-spacing: .1em; }
.menu__foot { margin-top: auto; padding: var(--sp-5) 0; display: flex; gap: 1.5rem; }
.menu__foot a { font-size: var(--fs-small); color: var(--text-muted); }

/* --- Product card (reusable, editorial) ----------------------------- */
.product-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--border);
  border: var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  --tint: var(--surface-alt);
  background: var(--paper);
  display: flex; flex-direction: column;
  position: relative;
}
.product-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background:
     radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--tint) 42%, var(--paper)) 0%, var(--paper) 62%);
  display: grid; place-items: center;
}
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center 78%;
  padding: 20px 0 14px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__swatch {
  position: absolute; top: 14px; left: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 0 3px var(--paper);
}
.product-card__testing {
  position: absolute; top: 12px; right: 12px;
  font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); background: color-mix(in srgb, var(--paper) 80%, transparent);
  border: var(--hair); padding: .3rem .55rem; border-radius: 999px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.product-card:hover .product-card__testing,
.product-card:focus-within .product-card__testing { opacity: 1; transform: none; }
.product-card__testing:hover { color: var(--brass); border-color: var(--brass); }

.product-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; border-top: var(--hair); }
.product-card__cat { color: var(--text-muted); }
.product-card__name { font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.product-card__name .strength { color: var(--text-muted); font-weight: 400; }
.product-card__row { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.product-card__price { font-size: 1rem; font-variant-numeric: tabular-nums; }
.product-card__price .ph { color: var(--text-faint); }
.product-card__link { }
.product-card__stretch { position: absolute; inset: 0; z-index: 1; }
.product-card__row .link, .product-card__testing { position: relative; z-index: 2; }

/* --- Trust strip ---------------------------------------------------- */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: var(--hair); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--border);
  gap: 1px;
}
.trust__item { background: var(--surface); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: .5rem; }
.trust__item .n { font-size: var(--fs-label); color: var(--brass); letter-spacing: .14em; }
.trust__item h3 { font-size: 1.02rem; font-weight: 500; }
.trust__item p { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trust { grid-template-columns: 1fr; } }

/* --- COA / testing document card ----------------------------------- */
.coa {
  background: var(--paper); border: var(--hair); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-soft);
}
.coa__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5); border-bottom: var(--hair); gap: 1rem; }
.coa__brand { display: flex; align-items: center; gap: .8rem; }
.coa__brand .wordmark { height: 15px; color: var(--ink); }
.coa__tag { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.coa__grid { display: grid; grid-template-columns: 1fr 1fr; }
.coa__field { padding: var(--sp-4) var(--sp-5); border-bottom: var(--hair); }
.coa__field:nth-child(odd) { border-right: var(--hair); }
.coa__field .k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); display:block; margin-bottom: .35rem; }
.coa__field .v { font-size: 1rem; font-variant-numeric: tabular-nums; }
.coa__field .v .ok { color: var(--forest); }
.coa__foot { padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.coa__foot .ph-note { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.coa__purity { display: flex; align-items: baseline; gap: .5rem; }
.coa__purity .big { font-size: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .coa__grid { grid-template-columns: 1fr; } .coa__field:nth-child(odd){ border-right: 0; } }

/* --- RUO compliance components ------------------------------------- */
.ruo {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.ruo__mark { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: var(--sp-4); }
.ruo__mark .pin { width: 7px; height: 7px; border-radius: 50%; background: var(--oxide); }
.ruo p { font-size: var(--fs-lead); line-height: 1.5; max-width: 66ch; }
.ruo p + p { margin-top: var(--sp-4); color: var(--text-muted); font-size: 1rem; }
.ruo--compact { padding: var(--sp-5); }
.ruo--compact p { font-size: var(--fs-small); line-height: 1.6; }

/* Inline research-use badge */
.ruo-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); border: var(--hair); border-radius: 999px; padding: .35rem .7rem;
}
.ruo-badge .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--oxide); }

/* --- Newsletter form ------------------------------------------------ */
.subscribe { display: flex; gap: .6rem; max-width: 440px; }
.field {
  flex: 1; display: flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--paper); transition: border-color var(--dur) var(--ease);
}
.field:focus-within { border-color: var(--ink); }
.field input { width: 100%; padding: .95rem 1rem; background: transparent; border: 0; outline: none; }
.field input::placeholder { color: var(--text-faint); }

/* --- Editorial image frame ----------------------------------------- */
.imgph {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ph, var(--charcoal)) 88%, #000) 0%,
                            color-mix(in srgb, var(--ph, var(--charcoal)) 70%, #000) 100%);
  min-height: 260px; display: grid; place-items: center;
}
.imgph::after {
  content: attr(data-note);
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(243,240,233,.5); padding: .5rem .9rem; border: 1px solid rgba(243,240,233,.22);
  border-radius: 999px;
}
.imgph--tall { min-height: 420px; }


/* sections.css */
/* ============================================================================
   EMBER — Homepage section layouts
   ========================================================================== */

/* Shared section header */
.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.section-head__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.section-head h2 { max-width: 20ch; }
.section-head .lead { max-width: 56ch; }

/* --- Hero ----------------------------------------------------------- */
.hero { padding-top: clamp(2.5rem, 1rem + 5vw, 5rem); padding-bottom: 0; }
.hero__intro { display: grid; gap: var(--sp-5); max-width: 40ch; }
.hero__intro .display { max-width: 15ch; }
.hero__intro .lead { max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-3); }

.hero__stage {
  margin-top: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  border-top: var(--hair);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--paper) 0%, var(--bg) 70%);
}
.hero__lineup {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(.5rem, -1rem + 4vw, 2rem);
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) 0;
  position: relative;
}
.hero__lineup::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border);
}
.hero__vial { flex: 1 1 0; display: grid; justify-items: center; gap: .8rem; padding-bottom: 1.4rem; min-width: 0; }
.hero__vial img { height: clamp(150px, 10rem + 8vw, 300px); width: auto; }
.hero__vial .cap { display: grid; justify-items: center; gap: .2rem; text-align: center; }
.hero__vial .cap .nm { font-size: var(--fs-small); font-weight: 500; }
.hero__vial .cap .st { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 760px) {
  .hero__lineup {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
  }
  .hero__vial { flex: 0 0 42%; scroll-snap-align: center; }
  .hero__vial img { height: 210px; }
}

/* --- Featured compounds -------------------------------------------- */
.featured .section-head__top .link { white-space: nowrap; }

/* --- The EMBER standard (dark) ------------------------------------- */
.standard { background: var(--charcoal); color: var(--on-dark); border-radius: 0; }
.standard .display, .standard h2 { color: var(--ivory); }
.standard__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--paper-12); margin-top: var(--sp-7);
}
.standard__item { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; border-right: 1px solid var(--paper-12); }
.standard__item:last-child { border-right: 0; }
.standard__item .n { font-size: var(--fs-label); color: var(--brass-soft); letter-spacing: .14em; display: block; margin-bottom: var(--sp-4); }
.standard__item h3 { font-size: 1.05rem; color: var(--ivory); margin-bottom: .5rem; font-weight: 500; }
.standard__item p { font-size: var(--fs-small); color: var(--on-dark-muted); }
@media (max-width: 980px) { .standard__grid { grid-template-columns: repeat(2, 1fr); }
  .standard__item { border-right: 0; border-bottom: 1px solid var(--paper-12); padding-right: var(--sp-5); }
}
@media (max-width: 520px) { .standard__grid { grid-template-columns: 1fr; } }

/* --- Testing & documentation --------------------------------------- */
.testing__cols { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.testing__intro { display: grid; gap: var(--sp-5); align-content: center; }
.testing__intro .checklist { display: grid; gap: .75rem; margin-top: var(--sp-2); }
.checklist li { display: flex; gap: .7rem; align-items: baseline; list-style: none; color: var(--text-muted); font-size: var(--fs-small); }
.checklist li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex: 0 0 auto; transform: translateY(-2px); }
@media (max-width: 860px) { .testing__cols { grid-template-columns: 1fr; } }

/* --- Brand editorial ------------------------------------------------ */
.editorial__cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.editorial__text { display: grid; gap: var(--sp-5); }
.editorial__text .serif-statement { max-width: 18ch; }
@media (max-width: 860px) { .editorial__cols { grid-template-columns: 1fr; } .editorial__media { order: -1; } }

/* --- Research-use clarification ------------------------------------ */
.compliance .ruo { max-width: 900px; margin-inline: auto; }

/* --- Newsletter ----------------------------------------------------- */
.notes__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.notes__cols .lead { max-width: 44ch; }
@media (max-width: 760px) { .notes__cols { grid-template-columns: 1fr; } }

/* --- Footer --------------------------------------------------------- */
.footer { background: var(--charcoal); color: var(--on-dark); padding-top: var(--sp-9); }
.footer .wordmark { height: clamp(28px, 3vw, 40px); color: var(--ivory); }
.footer__top { display: grid; grid-template-columns: 1.4fr 2.6fr; gap: clamp(2rem,1rem + 4vw,5rem); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--paper-12); }
.footer__brand { display: grid; gap: var(--sp-4); align-content: start; }
.footer__brand p { color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 34ch; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.footer__col h4 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-soft); margin-bottom: var(--sp-4); font-weight: 500; }
.footer__col a { display: block; font-size: var(--fs-small); color: var(--on-dark-muted); padding: .32rem 0; transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--ivory); }
.footer__ruo { padding-block: var(--sp-6); border-bottom: 1px solid var(--paper-12); }
.footer__ruo p { font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark-muted); max-width: 92ch; }
.footer__ruo .label { color: var(--brass-soft); display: block; margin-bottom: .6rem; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: var(--sp-5); flex-wrap: wrap; }
.footer__bottom small, .footer__bottom a { font-size: var(--fs-label); letter-spacing: .04em; color: var(--text-faint); }
.footer__bottom .legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 440px) { .footer__cols { grid-template-columns: 1fr; } }


/* product-page.css */
/* ============================================================================
   EMBER — Product page architecture (reusable; milestone scaffold).
   Structure + styling only. Populated from products.json.
   No dosage, no administration, no outcome claims — by design.
   ========================================================================== */
.pdp { padding-block: var(--section-y); }
.pdp__crumbs { display: flex; gap: .5rem; align-items: center; margin-bottom: var(--sp-6); color: var(--text-muted); }
.pdp__crumbs a { color: var(--text-muted); }
.pdp__crumbs a:hover { color: var(--ink); }
.pdp__crumbs .sep { color: var(--text-faint); }

.pdp__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (max-width: 900px) { .pdp__grid { grid-template-columns: 1fr; } }

.pdp__media {
  position: sticky; top: 92px;
  border: var(--hair); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 6%, color-mix(in srgb, var(--tint) 40%, var(--paper)) 0%, var(--paper) 62%);
  aspect-ratio: 5 / 6; display: grid; place-items: center;
}
.pdp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 74%; padding: 8% 0; }
@media (max-width: 900px) { .pdp__media { position: static; aspect-ratio: 4/3; } }

.pdp__info { display: grid; gap: var(--sp-5); }
.pdp__head { display: grid; gap: var(--sp-3); }
.pdp__name { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.01em; }
.pdp__name .strength { color: var(--text-muted); font-weight: 400; }
.pdp__price { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pdp__price .ph { color: var(--text-faint); }
.pdp__buy { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: var(--hair); border-radius: var(--radius-lg); background: var(--surface); }
.pdp__field-row { display: grid; gap: .5rem; }
.pdp__select {
  appearance: none; width: 100%; padding: .85rem 1rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1rem center;
}
.pdp__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.pdp__actions .btn { flex: 1 1 auto; }
.pdp__desc { color: var(--text-muted); }

.pdp__block { border-top: var(--hair); padding-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.pdp__block h2 { font-size: var(--fs-h3); }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--hair); border-radius: var(--radius); overflow: hidden; }
.spec div { padding: .8rem 1rem; border-bottom: var(--hair); font-size: var(--fs-small); }
.spec div:nth-child(odd) { color: var(--text-muted); border-right: var(--hair); background: var(--surface); }
.spec .v { font-variant-numeric: tabular-nums; }


/* m2.css */
/* ============================================================================
   EMBER — Milestone 2 additions (loaded last; extends M1 without breaking it).
   ========================================================================== */
:root {
  --surface-warm: #F0EADD;         /* slightly warmer surface for editorial */
  --tint-wash: 10%;                /* product-color influence over paper     */
  --st-available: var(--forest);
  --st-coming: var(--brass);
  --st-pending: var(--gray);
  --st-limited: var(--oxide);
  --st-unavailable: #9a948b;
}

/* Wordmark now an <img>; span height controls size, more header breathing room */
.wordmark { display: inline-flex; align-items: center; line-height: 0; color: var(--ink); }
.wordmark img { height: 100%; width: auto; display: block; }
.wordmark--nav { height: 24px; }
.wordmark--menu { height: 20px; }
.wordmark--footer { height: clamp(28px, 3vw, 40px); }
.nav__inner { min-height: 80px; }
.coa__brand .wordmark, .wordmark--footer { color: var(--ivory); }
.footer .wordmark img, .menu .wordmark img { }

/* nav active state (subtle) */
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { right: 0; }
.linklike { font: inherit; color: var(--text-muted); }
.linklike:hover { color: var(--ink); }

/* utility */
[hidden] { display: none !important; }   /* beat component display rules */
.numeric { font-variant-numeric: tabular-nums lining-nums; }
.center-page { text-align: center; }
.center-page .lead, .center-page p { margin-inline: auto; }

/* ---- Hero (split) --------------------------------------------------- */
.hero.hero--split { padding-top: clamp(2rem, 1rem + 4vw, 4rem); padding-bottom: clamp(2.5rem,1rem + 5vw,5rem); border-bottom: var(--hair); }
.hero__grid { display: grid; grid-template-columns: 40% 60%; gap: clamp(1.5rem, 0rem + 4vw, 3.5rem); align-items: center; }
.hero__intro { display: grid; gap: var(--sp-5); align-content: center; max-width: 34ch; }
.hero__intro .eyebrow { margin-bottom: -.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__media { position: relative; }
.hero__lineup-img { width: 100%; height: auto; display: block; }
.hero__ph-note { position: absolute; right: 8px; bottom: 4px; font-family: monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); background: color-mix(in srgb, var(--paper) 72%, transparent); padding: 2px 7px; border-radius: 999px; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__intro { max-width: none; }
  .hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .hero__lineup-img { min-width: 0; }
}

/* ---- Invite (warm serif statement) --------------------------------- */
.invite { background: var(--surface-warm); text-align: center; }
.invite .serif-statement { max-width: 20ch; margin-inline: auto; }

/* ---- Trust (warm cards, no big numbers) ---------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); }
.tcard h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: .5rem; }
.tcard h3::before { content: ""; display: block; width: 20px; height: 2px; background: var(--brass); margin-bottom: .9rem; opacity: .8; }
.tcard p { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 860px) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tgrid { grid-template-columns: 1fr; } }

/* ---- Status + documentation badges --------------------------------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--paper) 82%, transparent); border: var(--hair); padding: .3rem .6rem; border-radius: 999px; }
.status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-pending); }
.status--available .status__dot { background: var(--st-available); }
.status--coming_soon .status__dot { background: var(--st-coming); }
.status--documentation_pending .status__dot { background: var(--st-pending); }
.status--limited_release .status__dot { background: var(--st-limited); }
.status--unavailable .status__dot { background: var(--st-unavailable); }

.docstat { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.docstat--available { color: var(--forest); }
.docstat--pending { color: var(--text-muted); }
.docstat--unavailable { color: var(--st-unavailable); }

/* ---- Editorial product grid + card --------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pgrid { grid-template-columns: 1fr; } }

.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--tint) var(--tint-wash), var(--paper)); border: 1px solid transparent; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pcard:hover { border-color: var(--border); }
.pcard__stretch { position: absolute; inset: 0; z-index: 1; }
.pcard__media { position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 4%, color-mix(in srgb, var(--tint) 26%, transparent) 0%, transparent 60%); }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 80%; padding: 20px 0 10px; transition: transform var(--dur-slow) var(--ease-out); }
.pcard:hover .pcard__media img { transform: scale(1.045); }
.pcard__media .status { position: absolute; top: 12px; left: 12px; z-index: 2; }
.pcard__info { padding: var(--sp-5); display: grid; gap: .8rem; flex: 1; }
.pcard__type { color: var(--text-muted); }
.pcard__code { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.pcard__strength { color: var(--text-muted); font-weight: 400; font-size: .95rem; }
.pcard__title { font-size: var(--fs-small); color: var(--text-muted); }
.pcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .2rem; }
.pcard__price { font-size: 1rem; }
.pcard__price--soon { color: var(--text-muted); font-size: var(--fs-small); }
.pcard__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border-top: var(--hair); position: relative; z-index: 2; }
.pcard__actions .link { position: relative; z-index: 2; }

/* Feature banner (homepage) */
.feature-banner { position: relative; display: grid; grid-template-columns: 42% 1fr; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--tint) 14%, var(--paper)); border: var(--hair); }
.feature-banner__media { position: relative; min-height: 360px; display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 10%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 65%); }
.feature-banner__media img { height: 300px; width: auto; }
.feature-banner__media .status { position: absolute; top: 16px; left: 16px; }
.feature-banner__info { padding: clamp(1.5rem, 1rem + 3vw, 3rem); display: grid; gap: 1rem; align-content: center; }
.feature-banner__code { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 500; letter-spacing: -.01em; }
.feature-banner__code span { color: var(--text-muted); font-size: .6em; }
.feature-banner .pcard__actions { border: 0; padding-top: .4rem; }
.feature-banner .pcard__foot { justify-content: flex-start; gap: 1.5rem; }
@media (max-width: 760px) { .feature-banner { grid-template-columns: 1fr; } .feature-banner__media { min-height: 300px; } }

/* ---- Section head reuse tweaks ------------------------------------- */
.testing-preview .section-head { max-width: 760px; }

/* ---- Page heads ---------------------------------------------------- */
.pagehead { padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(1.5rem,1rem + 2vw,3rem); }
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { max-width: 60ch; margin-top: 1.2rem; }
.pagehead .eyebrow { margin-bottom: 1.2rem; }
.pagehead--lg { border-bottom: var(--hair); }

/* ---- Shop ---------------------------------------------------------- */
.shop__bar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: var(--hair); }
.shop__count { font-size: var(--fs-small); color: var(--text-muted); }
.shop__count span { color: var(--ink); font-variant-numeric: tabular-nums; }
.shop__search { flex: 1; min-width: 180px; max-width: 340px; }
.shop__sort { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.field--inline { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--paper); }
.field--inline input { width: 100%; padding: .7rem .9rem; background: transparent; border: 0; outline: none; }
.sel { appearance: none; padding: .6rem 2rem .6rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .7rem center; font-size: var(--fs-small); }
.shop__filters { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start; padding: var(--sp-5) 0; }
.filtergroup { display: grid; gap: .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { font-size: var(--fs-small); padding: .4rem .8rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); background: var(--paper); transition: all var(--dur) var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pgrid--shop { margin-top: var(--sp-2); }
.shop__empty { text-align: center; padding: var(--sp-9) 0; display: grid; gap: 1rem; justify-items: center; }
.shop__notes { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--hair); display: grid; gap: .8rem; }
.ruo-line { font-size: var(--fs-small); color: var(--text-muted); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ---- Standards ----------------------------------------------------- */
.std { display: grid; gap: 0; }
.std__row { display: grid; grid-template-columns: 60px 1fr; gap: 1.5rem; padding: var(--sp-6) 0; border-top: var(--hair); }
.std__row:first-child { border-top: 0; }
.std__n { color: var(--brass); padding-top: .3rem; }
.std__body { max-width: 64ch; }
.std__body h2 { margin-bottom: .6rem; }
.willnot { background: var(--charcoal); }
.willnot__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; margin-top: 2rem; padding: 0; }
.willnot__list li { display: flex; gap: .8rem; align-items: baseline; color: var(--on-dark-muted); font-size: 1rem; padding: 1rem 0; border-top: 1px solid var(--paper-12); }
.willnot__list li::before { content: "—"; color: var(--brass-soft); }
@media (max-width: 700px) { .willnot__list { grid-template-columns: 1fr; } .std__row { grid-template-columns: 1fr; gap: .5rem; } }

/* ---- Testing ------------------------------------------------------- */
.org { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,1rem + 3vw,4rem); align-items: start; }
.org__fields { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.org__fields li { padding: .9rem 1.1rem; border-bottom: var(--hair); font-size: var(--fs-small); color: var(--text-muted); }
.org__fields li:nth-child(odd) { border-right: var(--hair); }
@media (max-width: 760px) { .org { grid-template-columns: 1fr; } }
.lookup { background: var(--surface-warm); }
.lookup__head { display: grid; gap: .8rem; max-width: 60ch; margin-bottom: var(--sp-6); }
.notepill { display: inline-block; font-size: var(--fs-small); color: var(--text-muted); border-left: 2px solid var(--border-strong); padding: .1rem 0 .1rem .8rem; max-width: 62ch; }
.lookup__controls { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.lookup__search { flex: 1; min-width: 220px; max-width: 420px; }
.lookup__results { display: grid; gap: 1rem; }
.doccard { background: var(--paper); border: var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.doccard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--sp-5); border-bottom: var(--hair); flex-wrap: wrap; }
.doccard__product { font-size: 1.05rem; font-weight: 500; }
.doccard__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.doccard__grid > div { padding: var(--sp-4) var(--sp-5); border-bottom: var(--hair); border-right: var(--hair); display: grid; gap: .3rem; }
.doccard__grid > div:nth-child(3n) { border-right: 0; }
.doccard__grid .k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.doccard__grid .v { font-size: var(--fs-small); }
.doccard__foot { padding: var(--sp-4) var(--sp-5); }
@media (max-width: 620px) { .doccard__grid { grid-template-columns: 1fr 1fr; } .doccard__grid > div:nth-child(3n){border-right:var(--hair)} .doccard__grid > div:nth-child(2n){border-right:0} }
.gloss { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--sp-5); }
.gloss__item { padding: var(--sp-4) 0; border-top: var(--hair); }
.gloss__item:nth-child(2), .gloss__item:first-child { }
.gloss dt { font-weight: 500; margin-bottom: .3rem; }
.gloss dd { margin: 0; color: var(--text-muted); font-size: var(--fs-small); max-width: 46ch; }
@media (max-width: 640px) { .gloss { grid-template-columns: 1fr; } }

/* ---- About --------------------------------------------------------- */
.cswatches { display: flex; gap: .5rem; margin-top: 2rem; }
.cswatch { width: 34px; height: 10px; border-radius: 2px; }
.about { display: grid; gap: 0; }
.about__row { padding: var(--sp-6) 0; border-top: var(--hair); }
.about__row:first-child { border-top: 0; }
.about__row h2 { margin-bottom: .6rem; }
.about__row p { color: var(--text-muted); }
.principles { background: var(--charcoal); }
.principles__list { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0; max-width: 60ch; }
.principles__list li { padding: 1.1rem 0; border-top: 1px solid var(--paper-12); color: var(--ivory); font-size: 1.1rem; }

/* ---- Research support form ----------------------------------------- */
.warnbar { display: flex; gap: .7rem; align-items: baseline; background: color-mix(in srgb, var(--oxide) 7%, var(--paper)); border: 1px solid color-mix(in srgb, var(--oxide) 22%, transparent); border-radius: var(--radius); padding: 1rem 1.2rem; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-6); }
.warnbar .pin { width: 7px; height: 7px; border-radius: 50%; background: var(--oxide); flex: 0 0 auto; transform: translateY(2px); }
.rsform { display: grid; gap: 1.1rem; }
.rsform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ff { display: grid; gap: .45rem; }
.ff .label { color: var(--text-muted); }
.ff input, .ff textarea, .ff .sel { width: 100%; padding: .8rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--paper); font: inherit; }
.ff textarea { resize: vertical; }
.ff input:focus, .ff textarea:focus, .ff .sel:focus { border-color: var(--ink); outline: none; }
.rsform__actions { margin-top: .5rem; }
.rsform__success { border: var(--hair); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--surface-warm); display: grid; gap: .6rem; }
@media (max-width: 640px) { .rsform__row { grid-template-columns: 1fr; } }
/* The contact panel that replaced the support form. Two columns: what to send
   and where, beside the subject lines that used to be the form's request-type
   dropdown. It collapses to one column on a phone. */
.scontact { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); border: var(--hair); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--surface-warm); }
.scontact__include { margin: 1.2rem 0 .5rem; }
.scontact__list { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--text-muted); font-size: var(--fs-small); }
.scontact__types { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.scontact__types a { font-size: var(--fs-small); }
@media (max-width: 760px) { .scontact { grid-template-columns: 1fr; } }
.qual__item { display: flex; gap: .7rem; align-items: baseline; font-size: var(--fs-small); color: var(--text-muted); cursor: pointer; }
.qual__item input { margin-top: .2rem; accent-color: var(--brass); }
.qual__item--inline { padding: .5rem 0; }

/* ---- Policy -------------------------------------------------------- */
.draft-note { display: inline-flex; align-items: baseline; gap: .6rem; margin-top: 1.4rem; font-size: var(--fs-small); color: var(--oxide); border: 1px solid color-mix(in srgb, var(--oxide) 30%, transparent); border-radius: var(--radius); padding: .7rem 1rem; }
.draft-note .pin { width: 7px; height: 7px; border-radius: 50%; background: var(--oxide); }
.policy { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem,1rem + 3vw,4rem); align-items: start; }
.policy__toc { position: sticky; top: 96px; display: grid; gap: .5rem; }
.policy__toc a { font-size: var(--fs-small); color: var(--text-muted); padding: .2rem 0; }
.policy__toc a:hover { color: var(--brass); }
.policy__sec { padding: var(--sp-5) 0; border-top: var(--hair); max-width: 68ch; }
.policy__sec:first-child { border-top: 0; padding-top: 0; }
/* The published policies carry their own markup — paragraphs and lists, because
   a list of what we collect reads as a list and not as a sentence. These are
   the only rules they need; everything else is inherited. */
.policy__updated { margin-top: 1.2rem; font-size: var(--fs-small); color: var(--text-muted); }
.policy__prose p { margin: 0 0 .9rem; }
.policy__prose p:last-child { margin-bottom: 0; }
.policy__prose ul { margin: 0 0 .9rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.policy__prose li { padding-left: .15rem; }
.policy__prose a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .policy { grid-template-columns: 1fr; } .policy__toc { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; } }

/* ---- Coming soon / notice ------------------------------------------ */
.cs { min-height: 52vh; display: grid; align-content: center; }
.soon-pill { display: inline-block; margin-top: 1.5rem; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); border-radius: 999px; padding: .4rem .9rem; }
.notice-card { border: var(--hair); border-radius: var(--radius-lg); background: var(--surface-warm); padding: var(--sp-6); max-width: 60ch; margin: 2rem auto; }
.footer__col a .soon { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-soft); border: 1px solid var(--paper-12); border-radius: 999px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* ---- Accordion ----------------------------------------------------- */
.acc { border-top: var(--hair); }
.acc__item { border-bottom: var(--hair); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-size: 1rem; font-weight: 500; text-align: left; color: var(--ink); }
.acc__chev { transition: transform var(--dur) var(--ease); color: var(--text-muted); }
.acc__head[aria-expanded="true"] .acc__chev { transform: rotate(180deg); }
.acc__panel { overflow: hidden; }
.acc__inner { padding: 0 0 1.3rem; color: var(--text-muted); font-size: var(--fs-small); display: grid; gap: .7rem; }
.acc__inner p { max-width: 66ch; }

/* ---- PDP additions -------------------------------------------------- */
.pdp__badges { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.pdp__code { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -.01em; }
.pdp__strength { color: var(--text-muted); font-weight: 400; }
.pdp__fullname { color: var(--text-muted); }
.pdp__fullname--muted { font-style: italic; }
.pdp__buy { display: grid; gap: 1rem; padding: var(--sp-5); border: var(--hair); border-radius: var(--radius-lg); background: var(--surface); }
.pdp__price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pdp__price { font-size: 1.4rem; font-weight: 500; }
.pdp__price--soon { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.pdp__lotnote { font-size: var(--fs-small); color: var(--text-muted); border-left: 2px solid var(--border-strong); padding-left: .8rem; }
.pdp__qty { display: flex; align-items: center; justify-content: space-between; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.qty__btn { padding: .5rem .7rem; color: var(--ink); }
.qty__btn:hover { background: var(--ink-08); }
.qty__input { width: 44px; text-align: center; border: 0; border-inline: 1px solid var(--border); padding: .5rem 0; background: transparent; font-variant-numeric: tabular-nums; }
.pdp__add:disabled { opacity: .5; cursor: not-allowed; }
.pdp__ack, .pdp__shipnote { font-size: var(--fs-label); color: var(--text-muted); letter-spacing: .02em; }
.pdp__docpanel { margin-top: 1.4rem; }
.docpanel { border: var(--hair); border-radius: var(--radius-lg); padding: var(--sp-5); display: grid; gap: .7rem; background: var(--paper); }
.docpanel--demo { border-color: color-mix(in srgb, var(--oxide) 24%, var(--border)); }
.pdp__acc { margin-top: 1.6rem; }

/* ---- Modal (qualification gate) ------------------------------------ */
.modal, .drawer, .search { position: fixed; inset: 0; z-index: var(--z-overlay); visibility: hidden; }
.modal.is-open, .drawer.is-open, .search.is-open { visibility: visible; }
.modal__scrim, .drawer__scrim, .search__scrim { position: absolute; inset: 0; background: rgba(17,17,17,.42); opacity: 0; transition: opacity var(--dur) var(--ease); }
.modal.is-open .modal__scrim, .drawer.is-open .drawer__scrim, .search.is-open .search__scrim { opacity: 1; }
.modal__panel { position: relative; max-width: 520px; margin: 12vh auto 0; background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.5rem,1rem + 2vw,2.5rem); box-shadow: var(--shadow-soft); transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease); }
.modal.is-open .modal__panel { transform: none; opacity: 1; }
.qual__items { display: grid; gap: .8rem; margin: 1.5rem 0; }
.qual__foot { font-size: var(--fs-label); color: var(--text-muted); }
.qual__actions { display: flex; gap: .6rem; margin-top: 1.5rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Cart drawer --------------------------------------------------- */
.drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: var(--hair); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: grid; gap: 1rem; align-content: start; }
.drawer__foot { border-top: var(--hair); padding: var(--sp-5); display: grid; gap: 1rem; }
.cartline { display: grid; grid-template-columns: 54px 1fr auto; gap: 1rem; align-items: center; }
.cartline__media { background: color-mix(in srgb, var(--tint,var(--surface-alt)) 16%, var(--paper)); border-radius: var(--radius); display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.cartline__media img { height: 78%; width: auto; }
.cartline__name { font-weight: 500; font-size: .95rem; }
.cartline__meta { font-size: var(--fs-label); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.cartline__qty { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
.cartline__qty button { color: var(--text-muted); }
.cartline__remove { color: var(--text-muted); }
.cartline__remove:hover { color: var(--oxide); }
.cart-empty { text-align: center; color: var(--text-muted); padding: var(--sp-8) 0; display: grid; gap: 1rem; justify-items: center; }
.cart-sub { display: flex; align-items: baseline; justify-content: space-between; }
.cart-sub .lab { color: var(--text-muted); font-size: var(--fs-small); }
.cart-note { font-size: var(--fs-label); color: var(--text-muted); }
.cart-qual { font-size: var(--fs-label); display: flex; align-items: center; gap: .5rem; color: var(--text-muted); }
.cart-qual .ok { color: var(--forest); }

/* ---- Search overlay ------------------------------------------------ */
.search__panel { position: relative; max-width: 680px; margin: 8vh auto 0; background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease); }
.search.is-open .search__panel { transform: none; opacity: 1; }
.search__bar { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: var(--hair); }
.search__icon { color: var(--text-muted); display: inline-flex; }
.search__icon svg { width: 20px; height: 20px; }
.search__input { flex: 1; border: 0; outline: none; background: transparent; font-size: 1.1rem; }
.search__results { max-height: 60vh; overflow-y: auto; padding: .6rem 0; }
.search__hint, .search__empty { padding: 2rem 1.2rem; color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
.search__group { padding: .5rem 1.2rem; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.search__result { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1.2rem; }
.search__result:hover, .search__result.is-active { background: var(--surface-alt); }
.search__result .r-label { font-weight: 500; font-size: .95rem; }
.search__result .r-sub { font-size: var(--fs-label); color: var(--text-muted); }

/* ---- reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .modal__panel, .drawer__panel, .search__panel, .modal__scrim, .drawer__scrim, .search__scrim { transition: none; }
}


/* m3.css */
/* ============================================================================
   EMBER — Milestone 3 · Futuristic luxury system (loaded last).
   Cinematic hero, product-color environments, distinctive display type,
   grain, refined nav, galleries. Preserves all M2 behavior.
   ========================================================================== */

/* ---- Display typography ------------------------------------------------- */
.hero3__title, .h2-display, .display, .statement__big, .penv__code, .pdp__code,
.ecard__code, .shop-hero__title, .ctile__label, .feature-banner__code {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
}
h1, h2 { font-family: var(--font-display); letter-spacing: -0.015em; }
.h2-display { font-size: var(--fs-mega); line-height: var(--lh-mega); font-weight: 500; }
.eyebrow--on-dark { color: var(--champagne-2); }
.eyebrow--on-dark::before { background: var(--champagne-2); }
.lead--on-dark { color: var(--on-obsidian-muted); }
.microcopy { font-size: var(--fs-small); color: var(--text-muted); max-width: 60ch; margin-top: 1.25rem; }
.link--on-dark { color: var(--on-obsidian); }
.link--on-dark:hover { color: #fff; }

/* ---- Global grain ------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: calc(var(--grain-opacity) * .7); } }

/* ---- Page-transition fade ----------------------------------------------- */
.page-fade { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; background: var(--obsidian); opacity: 0; transition: opacity 260ms var(--ease); }
.page-fade.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .page-fade { display: none; } }

/* ---- Top line (quiet) --------------------------------------------------- */
.topline { background: var(--obsidian); color: var(--on-obsidian-muted); position: relative; z-index: 2; }
.topline .container { display: flex; align-items: center; justify-content: center; min-height: 34px; }
.topline span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; }

/* ---- Navigation --------------------------------------------------------- */
:root { --nav-h: 74px; }
.nav { position: sticky; top: 0; z-index: var(--z-nav); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav-solid .nav { background: color-mix(in srgb, var(--mineral) 90%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: var(--hair); }
.nav__inner { min-height: var(--nav-h); }
.wordmark--nav { height: 25px; }

/* over-hero (dark) */
.nav-over--dark main > section:first-child { margin-top: calc(-1 * var(--nav-h)); }
.nav-over--dark .nav { background: transparent; color: var(--on-obsidian); border-bottom: 1px solid transparent; }
.nav-over--dark .nav .wordmark { color: var(--on-obsidian); }
.nav-over--dark .nav__link { color: rgba(242,240,234,.82); }
.nav-over--dark .nav__link:hover { color: #fff; }
.nav-over--dark .iconbtn { color: var(--on-obsidian); }
.nav-over--dark .iconbtn:hover { background: rgba(255,255,255,.1); }
.nav-over--dark .nav.is-scrolled { background: color-mix(in srgb, var(--mineral) 92%, transparent); backdrop-filter: saturate(150%) blur(12px); color: var(--ink); border-bottom: var(--hair); }
.nav-over--dark .nav.is-scrolled .wordmark { color: var(--ink); }
.nav-over--dark .nav.is-scrolled .nav__link { color: var(--ink-70); }
.nav-over--dark .nav.is-scrolled .nav__link:hover { color: var(--ink); }
.nav-over--dark .nav.is-scrolled .iconbtn { color: var(--ink); }
.nav-over--dark .nav.is-scrolled .iconbtn:hover { background: var(--ink-08); }

/* ---- Discover mega-menu ------------------------------------------------- */
.mega { position: fixed; inset: 0; z-index: var(--z-overlay); visibility: hidden; }
.mega.is-open { visibility: visible; }
.mega__scrim { position: absolute; inset: 0; background: rgba(11,11,12,.32); opacity: 0; transition: opacity var(--dur) var(--ease); }
.mega.is-open .mega__scrim { opacity: 1; }
.mega__panel { position: absolute; top: 0; left: 0; right: 0; background: var(--mineral); border-bottom: var(--hair); transform: translateY(-12px); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease); padding: calc(var(--nav-h) + 20px) 0 2.5rem; }
.mega.is-open .mega__panel { transform: none; opacity: 1; }
.mega__grid { display: grid; grid-template-columns: 1.4fr 1fr .9fr; gap: 3rem; }
.mega__areas { display: grid; gap: .1rem; margin: 1.2rem 0; }
.mega__area { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: var(--hair); font-family: var(--font-display); font-size: 1.15rem; transition: color var(--dur) var(--ease); }
.mega__area:hover { color: var(--brass); }
.mega__count { font-family: var(--font-sans); font-size: var(--fs-label); color: var(--text-muted); }
.mega__count--soon { color: var(--text-faint); }
.mega__note { font-size: var(--fs-label); color: var(--text-muted); max-width: 40ch; }
.mega__col--links { display: grid; gap: .8rem; align-content: start; }
.mega__link { display: block; font-size: 1rem; padding: .4rem 0; }
.mega__link:hover { color: var(--brass); }
/* The featured column carries a short selection now rather than one permanent
   product, so it is a labelled column with a row inside it. The tile keeps the
   styling it always had; two of them sit side by side and share the column. */
.mega__featured { display: grid; gap: .8rem; align-content: start; }
.mega__featured-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mega__feature { display: grid; gap: .6rem; background: color-mix(in srgb, var(--tint) 14%, var(--mineral)); border-radius: var(--radius-lg); padding: 1.4rem; align-content: center; justify-items: start; }
.mega__featured-row .mega__feature { padding: 1rem; }
.mega__feature img { height: 150px; width: auto; }
.mega__featured-row .mega__feature img { height: 120px; }
.mega__feature-meta strong { font-family: var(--font-display); font-size: 1.2rem; display: block; }
.mega__feature-meta span { color: var(--text-muted); font-size: var(--fs-small); }
@media (max-width: 900px) { .mega { display: none; } }

/* ---- Dark full-screen mobile menu --------------------------------------- */
.dm { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--obsidian); color: var(--on-obsidian); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out); visibility: hidden; overflow-y: auto; }
.dm.is-open { transform: none; visibility: visible; }
.dm__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.dm__top .wordmark { color: var(--on-obsidian); }
.dm .iconbtn { color: var(--on-obsidian); }
.dm__list { display: flex; flex-direction: column; padding: 1rem 0; }
.dm__link { display: flex; align-items: baseline; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid rgba(242,240,234,.1); font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); font-weight: 500; color: var(--on-obsidian); }
.dm__idx { font-family: var(--font-sans); font-size: var(--fs-label); color: var(--champagne-2); }
.dm__cats { margin-top: 1.5rem; }
.dm__cats .label { color: var(--champagne-2); }
.dm__catwrap { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.dm__cat { border: 1px solid rgba(242,240,234,.2); border-radius: 999px; padding: .4rem .9rem; font-size: var(--fs-small); color: var(--on-obsidian-muted); }
.dm__cat:hover { border-color: var(--champagne-2); color: #fff; }
.dm__feature { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding: 1rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tint) 26%, var(--obsidian-2)); }
.dm__feature img { height: 90px; width: auto; }
.dm__feature .label { color: var(--champagne-2); }
.dm__feature strong { display: block; margin-top: .2rem; }
.dm__foot { display: flex; gap: 1.5rem; margin-top: 1.75rem; }
.dm__foot a, .dm__foot .linklike { color: var(--on-obsidian-muted); font-size: var(--fs-small); }
.dm__foot a:hover, .dm__foot .linklike:hover { color: #fff; }
.dm__ruo { margin: 1.5rem 0 3rem; font-size: var(--fs-label); color: rgba(166,163,155,.75); line-height: 1.6; }

/* ---- Buttons on dark (refine) ------------------------------------------- */
.btn--on-dark { background: var(--mineral); color: var(--ink); border-color: var(--mineral); }
.btn--on-dark:hover { background: #fff; border-color: #fff; }
.btn--ghost.btn--on-dark { background: transparent; color: var(--on-obsidian); border-color: rgba(242,240,234,.34); }
.btn--ghost.btn--on-dark:hover { background: var(--mineral); color: var(--ink); border-color: var(--mineral); }

/* ---- Brand pillars ------------------------------------------------------ */
.pillars { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pillar { display: flex; flex-direction: column; gap: .15rem; }
.pillar__short { font-family: var(--font-display); font-weight: 500; font-size: .98rem; letter-spacing: .01em; }
.pillar__line { font-size: var(--fs-label); color: var(--text-muted); }
.pillar__div { width: 1px; height: 26px; background: var(--border); }
.pillars--dark .pillar__short { color: var(--on-obsidian); }
.pillars--dark .pillar__line { color: var(--on-obsidian-muted); }
.pillars--dark .pillar__div { background: rgba(242,240,234,.18); }

/* ---- Hero3 (cinematic, light gallery) ----------------------------------- */
.hero3 { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 2vh); padding-bottom: 2rem; overflow: hidden; }
.hero3--light { background: var(--mineral); color: var(--ink); }
.hero3--light .hero3__atmos { position: absolute; inset: 0; z-index: 0; background:
   radial-gradient(60% 55% at 78% 40%, color-mix(in srgb, var(--champagne) 10%, transparent), transparent 62%),
   radial-gradient(70% 60% at 12% 8%, rgba(120,140,150,.06), transparent 55%),
   linear-gradient(180deg, #FAF9F5 0%, var(--mineral) 55%, #EEEDE8 100%); }
.hero3__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 1rem; align-items: center; flex: 1; }
.hero3__copy { display: grid; gap: 1.4rem; align-content: center; max-width: 30ch; }
.hero3__title { font-size: var(--fs-hero); line-height: 0.94; font-weight: 500; letter-spacing: -0.03em; }
.hero3__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--graphite); }
.hero3__lead { font-size: clamp(1.05rem, .98rem + .5vw, 1.35rem); color: var(--text-muted); max-width: 40ch; }
.hero3__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero3__small { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hero3__media { position: relative; justify-self: end; width: 112%; margin-right: -10%; }
.hero3__media img { width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
}
.hero3__pillars { position: relative; z-index: 2; margin-top: 2vh; padding-top: 1.5rem; border-top: var(--hair); }
@media (max-width: 860px) {
  .hero3 { min-height: auto; padding-top: calc(var(--nav-h) + 3vh); }
  .hero3__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero3__copy { max-width: none; }
  .hero3__media { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .hero3__pillars .pillars { gap: .8rem; justify-content: space-between; }
  .hero3__pillars .pillar__line { display: none; }
  .hero3__pillars .pillar__div { height: 16px; }
}

/* nav over-hero (light) */
.nav-over--light main > section:first-child { margin-top: calc(-1 * var(--nav-h)); }
.nav-over--light .nav { background: transparent; border-bottom: 1px solid transparent; }
.nav-over--light .nav.is-scrolled { background: color-mix(in srgb, var(--mineral) 92%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: var(--hair); }

/* ---- Marquee ------------------------------------------------------------ */
.mq { overflow: hidden; background: var(--mineral-2); border-top: var(--hair); border-bottom: var(--hair); padding: 1.1rem 0; }
.mq__track { display: inline-flex; align-items: center; gap: 1.6rem; white-space: nowrap; animation: mq 42s linear infinite; will-change: transform; }
.mq__item { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-transform: uppercase; }
.mq__dot { color: var(--brass); font-size: 1.4rem; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq:hover .mq__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }

/* ---- Collection + editorial cards --------------------------------------- */
.collection { background: var(--mineral); }
.section-head .h2-display { max-width: 18ch; }
.egrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.egrid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .egrid, .egrid--two { grid-template-columns: 1fr; } }
.ecard { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--tint) 12%, var(--paper)); min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.ecard__media { position: absolute; inset: 0; background: radial-gradient(80% 66% at 50% 28%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 62%); }
.ecard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 40%; padding: 10% 0 26%; transition: transform var(--dur-cine) var(--ease-cine); }
.ecard:hover .ecard__media img { transform: translateY(-6px) scale(1.025); }
.ecard__media .status { position: absolute; top: 16px; left: 16px; }
.ecard__info { position: relative; z-index: 2; padding: 1.6rem; display: grid; gap: .5rem; background: linear-gradient(transparent, color-mix(in srgb, var(--tint) 16%, var(--paper)) 40%); }
.ecard__code { font-size: 1.6rem; font-weight: 500; }
.ecard__code span { color: var(--text-muted); font-size: .62em; }
.ecard__desc { font-size: var(--fs-small); color: var(--text-muted); }
.ecard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; }

/* Milestone 4: the approved vial masters arrive with genuine alpha, so the
   old edge-feathering mask (which existed to dissolve a baked studio
   background) is no longer applied — it would soften the real glass base
   and cap edges. Deliberately removed; do not reinstate. */

/* ---- Full-bleed product environment ------------------------------------- */
.penv { position: relative; overflow: hidden; background: var(--env); color: var(--on-obsidian); }
.penv--light { color: var(--ink); }
.atmos { position: absolute; inset: 0; z-index: 0; }
.atmos--dark { background: radial-gradient(60% 80% at 30% 30%, color-mix(in srgb, var(--tint) 55%, transparent), transparent 60%), radial-gradient(50% 60% at 85% 80%, rgba(255,255,255,.04), transparent 60%); }
.atmos--light { background: radial-gradient(60% 80% at 70% 30%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 62%); }
.penv__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; min-height: 74vh; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.penv--left .penv__media { order: -1; }
.penv__copy { display: grid; gap: 1.2rem; align-content: center; max-width: 34ch; }
.penv__code { font-size: clamp(3rem, 2rem + 6vw, 7rem); font-weight: 500; line-height: .95; letter-spacing: -0.03em; }
.penv__meta { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-small); opacity: .85; }
.penv__dot { opacity: .5; }
.penv__desc { font-size: 1.05rem; line-height: 1.5; max-width: 38ch; opacity: .9; }
.penv--dark .penv__desc, .penv--dark .penv__meta { color: var(--on-obsidian-muted); }
.penv--dark .label { color: var(--champagne-2); }
.penv__media { justify-self: center; }
.penv__media img { height: clamp(340px, 30rem + 6vw, 560px); width: auto; filter: drop-shadow(0 40px 44px rgba(0,0,0,.4)); }
.penv--light .penv__media img { filter: drop-shadow(0 30px 40px rgba(11,11,12,.16)); }
@media (max-width: 820px) {
  .penv__grid { grid-template-columns: 1fr; min-height: auto; text-align: left; gap: 2rem; }
  .penv--left .penv__media, .penv__media { order: 0; justify-self: start; }
  .penv__media img { height: 300px; }
}

/* ---- Discover tiles ----------------------------------------------------- */
.discover-teaser { background: var(--mineral); }
.ctiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .ctiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ctiles { grid-template-columns: 1fr; } }
.ctile { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 150px; display: flex; align-items: flex-end; padding: 1.25rem; color: var(--on-obsidian); background: var(--env-graphite); isolation: isolate; transition: transform var(--dur) var(--ease); }
.ctile .atmos { background: radial-gradient(70% 90% at 30% 20%, color-mix(in srgb, var(--tint) 60%, transparent), transparent 60%); }
.ctile::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--env-graphite); }
.ctile[style*="--tint:var(--forest"]::before { background: var(--env-forest); }
.ctile:hover { transform: translateY(-3px); }
.ctile__body { position: relative; z-index: 2; display: grid; gap: .25rem; }
.ctile__label { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.ctile__count { font-size: var(--fs-label); color: var(--on-obsidian-muted); text-transform: uppercase; letter-spacing: .1em; }
.ctile__arw { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; color: var(--champagne-2); }

/* ---- Large statement (dark cinematic) ----------------------------------- */
.statement { background: var(--obsidian); color: var(--on-obsidian); text-align: center; padding-block: clamp(4rem, 3rem + 6vw, 9rem); position: relative; }
.statement__big { font-family: var(--font-display); font-size: var(--fs-mega); line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; max-width: 20ch; margin: 0 auto; }
.statement__sub { color: var(--on-obsidian-muted); font-size: var(--fs-lead); max-width: 52ch; margin: 1.5rem auto 2rem; }
.statement--brand { background: linear-gradient(180deg, #0B0B0C, #131315); }

/* ---- Documentation section (desirable, dark) ---------------------------- */
.docsec { position: relative; background: var(--obsidian-2); color: var(--on-obsidian); overflow: hidden; }
.docsec__atmos { position: absolute; inset: 0; background: radial-gradient(50% 60% at 80% 30%, rgba(196,169,104,.10), transparent 60%); }
.docsec__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.docsec__copy { display: grid; gap: 1.2rem; align-content: center; }
@media (max-width: 820px) { .docsec__grid { grid-template-columns: 1fr; } }
.docprev { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(160deg, #17171A, #0F0F11); border: 1px solid rgba(242,240,234,.08); box-shadow: var(--shadow-lift); padding: 1.75rem; color: var(--on-obsidian); }
.docprev::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 0%, color-mix(in srgb, var(--tint) 40%, transparent), transparent 60%); opacity: .5; }
.docprev > * { position: relative; z-index: 2; }
.docprev__scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 1; background: linear-gradient(180deg, rgba(196,169,104,.12), transparent); animation: scan 4.5s var(--ease-cine) infinite; }
@keyframes scan { 0%,100% { transform: translateY(-10%); opacity: .5; } 50% { transform: translateY(210%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .docprev__scan { animation: none; opacity: .35; } }
.docprev__head { display: flex; align-items: center; justify-content: space-between; }
.docprev__head .label { color: var(--champagne-2); }
.docprev__lot { display: grid; gap: .2rem; margin: 1.4rem 0; }
.docprev__lot .label { color: rgba(166,163,155,.8); }
.docprev__lotnum { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); font-weight: 500; letter-spacing: .02em; }
.docprev__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; padding: 1.2rem 0; border-top: 1px solid rgba(242,240,234,.1); border-bottom: 1px solid rgba(242,240,234,.1); margin-bottom: 1.2rem; }
.docprev__grid .k { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: rgba(166,163,155,.75); margin-bottom: .25rem; }
.docprev__grid .v { font-size: .95rem; }
.docprev .docstat { color: var(--champagne-2); }

/* ---- About teaser ------------------------------------------------------- */
.abouttease { background: var(--mineral); text-align: center; }
.abouttease__inner { display: grid; gap: 1.2rem; justify-items: center; }
.abouttease .serif-statement { max-width: 22ch; }

/* ---- Commerce card (refined) -------------------------------------------- */
.ccard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--tint) 8%, var(--paper)); border: 1px solid transparent; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ccard:hover { border-color: var(--border); box-shadow: var(--shadow-float); }
.ccard__media { position: relative; aspect-ratio: 5/4; display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 8%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 60%); }
.ccard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 80%; padding: 18px 0 8px; transition: transform var(--dur-cine) var(--ease-cine); }
.ccard:hover .ccard__media img { transform: translateY(-4px) rotate(-1deg) scale(1.03); }
.ccard__media .status { position: absolute; top: 12px; left: 12px; z-index: 2; }
.ccard__quick { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--ivory); border-radius: 999px; padding: .45rem .8rem; opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ccard:hover .ccard__quick, .ccard:focus-within .ccard__quick { opacity: 1; transform: none; }
.ccard__quick:hover { background: #000; }
.ccard__info { padding: 1.2rem 1.25rem 1.35rem; display: grid; gap: .5rem; }
.ccard__type { color: var(--text-muted); }
.ccard__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.ccard__strength { color: var(--text-muted); font-weight: 400; font-size: .85em; }
.ccard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ccard__price--soon { color: var(--text-muted); font-size: var(--fs-small); }
.ccard__actions { margin-top: .2rem; padding-top: .6rem; border-top: var(--hair); position: relative; z-index: 2; }
.ccard__actions .link { position: relative; z-index: 3; }

/* ---- Shop hero ---------------------------------------------------------- */
.shop-hero { padding-top: calc(var(--nav-h) - 20px); }
.shop-hero__title { font-size: var(--fs-mega); line-height: .98; font-weight: 500; margin: 1rem 0 1.2rem; }
.shop-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---- Discover page ------------------------------------------------------ */
.disc__area { padding-block: 2.5rem 3rem; border-top: var(--hair); }
.disc__area:first-child { border-top: 0; }
.disc__areahead { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.disc__swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--tint); }
.disc__areahead .h2-display { font-size: clamp(1.6rem,1.2rem + 2vw,2.4rem); }
.disc__n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.disc__empty { color: var(--text-muted); padding: 1.5rem 0; }
/* The jump row under the page title. It is the only navigation this page used
   to lack: four short targets and a route to the whole shop, wrapping rather
   than scrolling so nothing is hidden off the edge on a phone. */
.disc__jumps { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; justify-content: center; }
.disc__jump { display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .9rem; border: var(--hair);
  border-radius: 100px; font-size: var(--fs-small); text-decoration: none; transition: background var(--dur) var(--ease); }
.disc__jump span { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-label); }
.disc__jump:hover { background: color-mix(in srgb, var(--brass) 10%, transparent); }
.disc__jump--all { border-color: currentColor; font-weight: 600; }

/* ---- Product page (color world + gallery + why) ------------------------- */
.pdp3 { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--tintbg) 0%, var(--mineral) 70%); padding-top: calc(var(--nav-h) - 12px); padding-bottom: clamp(2.5rem,2rem + 3vw,5rem); }
.pdp3__atmos { position: absolute; inset: 0; background: radial-gradient(55% 45% at 22% 8%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 62%); }
.pdp3 .container { position: relative; z-index: 2; }
.pdp3__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,1rem + 4vw,4.5rem); align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .pdp3__grid { grid-template-columns: 1fr; } }
.pdp3__panel { display: grid; gap: 1.3rem; align-content: start; position: sticky; top: calc(var(--nav-h) + 12px); }
@media (max-width: 900px) { .pdp3__panel { position: static; } }
.pdp__pillars { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); border-top: var(--hair); border-bottom: var(--hair); padding: .8rem 0; }

/* gallery */
.gal { display: grid; gap: .8rem; position: sticky; top: calc(var(--nav-h) + 12px); }
@media (max-width: 900px) { .gal { position: static; } }
.gal__stage { position: relative; border-radius: var(--radius-lg); background: radial-gradient(80% 70% at 50% 18%, color-mix(in srgb, var(--tint) 20%, var(--paper)), var(--paper) 70%); aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; border: var(--hair); }
.gal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 76%; padding: 8% 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.gal__img.is-active { opacity: 1; }
.gal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 80%, transparent); border: var(--hair); font-size: 1.4rem; color: var(--ink); display: grid; place-items: center; }
.gal__nav--prev { left: 12px; } .gal__nav--next { right: 12px; }
.gal__nav:hover { background: var(--paper); }
.gal__counter { position: absolute; bottom: 12px; right: 14px; z-index: 3; font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.gal__thumbs { display: flex; gap: .6rem; }
.gal__thumb { width: 60px; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: color-mix(in srgb, var(--tint) 12%, var(--paper)); display: grid; place-items: center; padding: 6px; }
.gal__thumb.is-active { border-color: var(--ink); }
.gal__thumb img { height: 100%; width: auto; object-fit: contain; }

/* why ember strip */
.why { background: var(--mineral-2); }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.why__item h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; margin-bottom: .4rem; }
.why__item h3::before { content: ""; display: block; width: 20px; height: 2px; background: var(--brass); margin-bottom: .8rem; }
.why__item p { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 820px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .why__grid { grid-template-columns: 1fr; } }

/* ---- Footer pillars ----------------------------------------------------- */
.footer__pillars { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--paper-12); }
.footer__pillar { font-family: var(--font-display); font-weight: 500; color: var(--ivory); font-size: 1.05rem; }
.footer__pillar-div { color: var(--brass-soft); }
/* Once the strip wraps, a separator is orphaned at the end of a line. Below
   this width the spacing carries the separation on its own. */
@media (max-width: 620px) {
  .footer__pillars { gap: .45rem 1.5rem; }
  .footer__pillar-div { display: none; }
}

/* ---- Reveal (cinematic rise) -------------------------------------------- */
.js [data-reveal] { transition: opacity var(--dur-cine) var(--ease-cine), transform var(--dur-cine) var(--ease-cine); }

/* ---- hero entrance ------------------------------------------------------ */
.js .nav-over [data-hero-copy] > * { opacity: 0; transform: translateY(16px); animation: heroRise var(--dur-cine) var(--ease-cine) forwards; }
.js [data-hero-copy] > *:nth-child(1) { animation-delay: .08s; }
.js [data-hero-copy] > *:nth-child(2) { animation-delay: .16s; }
.js [data-hero-copy] > *:nth-child(3) { animation-delay: .24s; }
.js [data-hero-copy] > *:nth-child(4) { animation-delay: .32s; }
.js [data-hero-copy] > *:nth-child(5) { animation-delay: .40s; }
.js [data-hero-media] { opacity: 0; transform: translateY(24px) scale(.98); animation: heroRise var(--dur-cine) var(--ease-cine) .2s forwards; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-hero-copy] > *, .js [data-hero-media] { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ref.css */
/* ============================================================================
   EMBER — Approved reference master (homepage art direction).
   Loaded last. Implements: ivory two-tier masthead, dark cinematic hero
   (stone pedestal + six real vial cutouts), integrated trust strip, and the
   lower dark editorial section. Fully responsive; no flattened background.
   ========================================================================== */

/* ============================================================================
   APPROVED & LOCKED — do not modify without explicit sign-off.
   The following are locked exactly as approved: masthead/header proportions,
   navigation, hero photography, hero lighting/bloom, vial scale & positions,
   headline typography, hero copy, buttons, and the trust-strip layout &
   typography. Only the lower editorial section (further below) is open.
   ========================================================================== */

/* ---------- Masthead (ivory, centered wordmark) — LOCKED ------------- */
.mast {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--ivory);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transform: none;
}
.mast__bar { padding: clamp(.55rem, .9vw, .85rem) 0 clamp(.2rem, .45vw, .4rem); }
.mast__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.mast__side { display: flex; align-items: center; min-width: 0; }
.mast__side--left { justify-content: flex-start; gap: .8rem; }
.mast__side--right { justify-content: flex-end; gap: clamp(1rem, 2vw, 2rem); }
.mast__ruo {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; font-weight: 500;
}
.mast__menu { display: none; color: var(--ink); }
.mast__brand { display: inline-flex; justify-self: center; }
.mast .wordmark--nav { height: clamp(22px, 2.05vw, 27px); color: var(--ink); }
.mast .wordmark--nav svg { height: 100%; width: auto; }

.util {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font: inherit; padding: 0;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.util:hover { color: var(--brass); }
.util__i { display: inline-flex; }
.util__i svg { width: 17px; height: 17px; }
/* cart count = plain inline "(0)" text, not the floating badge */
.mast .cartbtn { position: static; }
.mast .cartbtn .count {
  position: static; top: auto; right: auto; min-width: 0; height: auto;
  padding: 0; border-radius: 0; background: none; color: inherit;
  font-size: inherit; font-weight: inherit; display: inline; line-height: inherit;
  place-items: initial; font-variant-numeric: tabular-nums;
  visibility: visible !important;
}

.mast__nav { border: 0; }
.mast__nav-inner {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3.2vw, 3.4rem);
  padding-bottom: clamp(.5rem, .8vw, .72rem);
}
.mnav__link {
  position: relative;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); font-weight: 500; text-decoration: none;
  padding: .25rem 0;
  transition: color var(--dur) var(--ease);
}
.mnav__link:hover { color: var(--brass); }
.mnav__link.is-active { color: var(--brass); }
.mnav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--brass);
  transition: right var(--dur) var(--ease);
}
.mnav__link:hover::after, .mnav__link.is-active::after { right: 0; }

/* compact on scroll — hide RUO + secondary nav row for a slim bar */
.mast.is-scrolled .mast__ruo { opacity: 0; }
.mast.is-scrolled .mast__nav { display: none; }
.mast.is-scrolled .mast__bar { padding-top: .7rem; padding-bottom: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .mast__ruo { transition: opacity var(--dur) var(--ease); }
}

/* Buttons used over the dark hero */
.btn--light {
  --btn-bg: var(--warm-white); --btn-fg: var(--obsidian);
  background: var(--warm-white); color: var(--obsidian);
  border: 1px solid var(--warm-white); border-radius: 2px;
  letter-spacing: .11em; text-transform: uppercase; font-size: .68rem;
  padding: .78rem 1.3rem;
}
.btn--light:hover { background: #fff; border-color: #fff; color: #000; }
.btn--outline-light {
  background: transparent; color: var(--warm-white);
  border: 1px solid rgba(238,233,223,.4); border-radius: 2px;
  letter-spacing: .11em; text-transform: uppercase; font-size: .68rem;
  padding: .78rem 1.3rem;
}
.btn--outline-light:hover { border-color: rgba(238,233,223,.85); background: rgba(238,233,223,.06); }

/* ---------- Dark cinematic hero (photographic scene plate) — LOCKED --- */
.rhero {
  position: relative;
  height: clamp(440px, 35.55vw, 622px);   /* matches the 1592×566 plate ratio */
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--scene-0);
  isolation: isolate;
}
.rhero__scene { position: absolute; inset: 0; z-index: 0; }
.rhero__scene picture, .rhero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: 0;
}
.rhero__scene::before { /* subtle warm bloom behind the middle/right of the lineup */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(33% 48% at 61% 44%,
    rgba(220,184,127,.16), rgba(220,184,127,.05) 46%, transparent 68%);
  mix-blend-mode: screen;
}
.rhero__veil { /* deepen the left negative space so copy stays legible */
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(8,6,4,.92) 0%, rgba(8,6,4,.72) 22%, rgba(8,6,4,.28) 40%, transparent 54%);
}

.rhero__wrap { position: relative; z-index: 3; width: 100%; }
.rhero .rhero__wrap { max-width: 1460px; }   /* sit copy nearer the left edge, like the master */
.rhero__copy { max-width: 38%; transform: translateY(-2%); }
.rhero__title {
  font-family: var(--font-display);
  font-weight: 300; letter-spacing: -.022em; line-height: .84;
  font-size: clamp(2.3rem, 1.3rem + 2.8vw, 4rem);
  color: var(--warm-white);
  margin: 0;
}
.rhero__title-em {
  font-family: var(--font-editorial);
  font-style: italic; font-weight: 400; letter-spacing: 0;
  font-size: 1.13em; line-height: 1;
  display: inline-block; margin-top: .03em;
  color: #ece5d7;
}
.rhero__lead {
  margin: 1.15rem 0 0;
  font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
  line-height: 1.7; color: rgba(238,233,223,.8);
  max-width: 29em;
}
.rhero__cta { margin-top: 1.5rem; display: flex; gap: .7rem; flex-wrap: nowrap; }

/* ---------- Trust strip (integrated, dark) — LOCKED ------------------ */
.tstrip {
  /* integrated with the hero: near-black with the scene's warmth faintly
     visible, closed by fine rules top and bottom */
  background:
    radial-gradient(120% 180% at 72% -40%, rgba(120,92,58,.16), transparent 55%),
    #0c0a07;
  color: var(--warm-white);
  border-top: 1px solid rgba(214,183,132,.12);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tstrip__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(.9rem, 2.6vw, 2.2rem);
  padding: clamp(.85rem, 1.7vw, 1.3rem) 0;
}
.tstrip__col { display: flex; align-items: center; gap: .8rem; }
.tstrip__ico { display: inline-flex; flex: none; }
.tstrip__ico svg { width: 26px; height: 26px; color: var(--soft-gold); }
.tstrip__h {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--warm-white); font-weight: 500;
}
.tstrip__p {
  margin: .28rem 0 0; font-size: .78rem; line-height: 1.46;
  color: rgba(238,233,223,.74); max-width: 30ch;
}
.tstrip__div { justify-self: center; width: 1px; height: 36px; background: rgba(255,255,255,.09); }

/* ---------- Lower editorial (dark, full-bleed macro right) ------------
   NOT locked — the only homepage section still open for iteration.
   Compact 3-part composition: serif headline (left), copy + CTA (centre),
   full-bleed embossed-cap macro (right ~1/3). ------------------------- */
.reditorial {
  position: relative;
  background: var(--obsidian);
  color: var(--warm-white);
  overflow: hidden;
}
.reditorial__grid2 {
  display: grid;
  grid-template-columns: 1fr 33%;
  align-items: stretch;
}
.reditorial__text {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  padding: clamp(1.7rem, 2.8vw, 2.5rem) clamp(1.5rem, 4vw, 3.4rem);
  max-width: 1080px; margin-left: auto;   /* align text block to the container edge */
}
.reditorial__eyebrow {
  display: block;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--soft-gold);
}
.reditorial__title {
  margin: .85rem 0 0;
  font-family: var(--font-editorial); font-weight: 400; font-style: normal;
  font-size: clamp(1.95rem, 1.3rem + 2.1vw, 3.15rem);
  line-height: 1.05; color: #efe9dd; letter-spacing: .002em;
}
.reditorial__lead {
  margin: 0; color: rgba(238,233,223,.72); line-height: 1.62; font-size: .88rem;
  max-width: 32ch;
}
.reditorial__body .link--gold { margin-top: 1.4rem; display: inline-flex; }
.link--gold { color: var(--soft-gold); }
.link--gold:hover { color: var(--champagne-2); }
.reditorial__media {
  position: relative; overflow: hidden;
  border-left: 1px solid rgba(214,183,132,.1);
}
.reditorial__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.reditorial__media::after {   /* faint left feather into the copy — not a frame */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,10,7,.42) 0%, transparent 18%);
}

/* ============================================================================
   EXTENSION PAGES — shared components built from the locked system.
   ========================================================================== */

/* ---- Interior page hero (dark cinematic band) ----------------------- */
.phero {
  position: relative; overflow: hidden;
  background: var(--scene-0); color: var(--warm-white);
  isolation: isolate;
}
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; }
.phero__bg::after { /* deep warm veil so copy stays legible over the scene */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,6,4,.94) 0%, rgba(8,6,4,.82) 34%, rgba(8,6,4,.5) 62%, rgba(8,6,4,.32) 100%),
    radial-gradient(60% 100% at 12% 30%, rgba(0,0,0,.5), transparent 70%);
}
/* padding-BLOCK only: the `padding: X 0` shorthand used previously reset the
   inline padding inherited from .container, so hero copy sat flush against the
   viewport edge at every breakpoint. The hero must align with .container so
   the eyebrow, headline and buttons share the page's left edge. */
.phero__inner { position: relative; z-index: 1; padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.phero__eyebrow {
  display: block; color: var(--soft-gold);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
}
.phero__title {
  margin: .9rem 0 0; color: var(--warm-white);
  font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; line-height: .92;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); max-width: 16ch;
}
.phero__title em {
  font-family: var(--font-editorial); font-style: italic; font-weight: 400;
  color: #ece5d7; letter-spacing: 0;
}
.phero__lead {
  margin: 1.1rem 0 0; max-width: 46ch; line-height: 1.6;
  color: rgba(238,233,223,.76); font-size: 1rem;
}
.phero__meta { margin-top: 1.4rem; }

/* ---- Refined availability micro-label ------------------------------- */
.availb {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
}
.availb__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-gray); flex: none; }
.availb--available .availb__dot { background: #3f7a54; }
.availb--limited_release .availb__dot { background: var(--champagne); }
.availb--coming_soon .availb__dot { background: var(--champagne); }
.availb--documentation_pending .availb__dot { background: var(--warm-gray); }
.availb--unavailable .availb__dot { background: #9a5148; }
.availb--on-dark { color: rgba(238,233,223,.72); }

/* ---- Brand trust signature ------------------------------------------ */
.trustsig {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--champagne);
}
.trustsig i { color: var(--border-strong); font-style: normal; }
.fpanel .trustsig, .pdp3 .trustsig { color: var(--soft-gold); }
.fpanel .trustsig i, .pdp3 .trustsig i { color: rgba(255,255,255,.22); }

/* ==========================================================================
   ONE status system — availability + documentation, used on cards, panels
   and the PDP. Small, quiet, never placed over the vial.
   ========================================================================== */
.pstat {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 0; font-size: .66rem; line-height: 1.4; color: var(--text-muted);
}
.pstat__item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pstat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-gray); flex: none; }
.pstat__item--available .pstat__dot { background: #4A7A5C; }
.pstat__item--limited_release .pstat__dot { background: var(--champagne); }
.pstat__item--coming_soon .pstat__dot,
.pstat__item--unavailable .pstat__dot { background: var(--warm-gray); }
/* The divider is drawn by the item that FOLLOWS it, so that when the row wraps
   the rule wraps with its label instead of being left dangling at the end of
   the previous line. */
.pstat__sep { display: none; }
.pstat__sep + .pstat__item::before {
  content: ''; width: 1px; height: .7rem; background: var(--hairline);
  flex: none; margin-right: .1rem;
}
.pstat--dark .pstat__sep + .pstat__item::before { background: rgba(255,255,255,.16); }
.pstat__item--doc-available { color: var(--ink); }
.pstat--dark { color: rgba(238,233,223,.62); }
.pstat--dark .pstat__sep { background: rgba(255,255,255,.16); }
.pstat--dark .pstat__item--doc-available { color: rgba(238,233,223,.9); }

/* Card-level quality line — testing only (documentation lives in .pstat) */
.qline {
  margin: 0; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--champagne);
}
.qline--dark { color: var(--soft-gold); }

/* ---- Commerce product card (approved vial on a restrained tonal field) ----
   Goals: the vial is the subject; the panel is atmosphere, not decoration;
   every card's action row lands on the same baseline across a row.        */
.ccard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--warm-white); border: 1px solid var(--hairline);
  border-radius: 8px; overflow: hidden;
  transition: transform .45s var(--ease-cine), box-shadow .45s var(--ease-cine);
}
.ccard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,16,10,.4); }
/* The media box is governed entirely by its aspect-ratio; the vial is placed
   into it absolutely so a tall source image can never inflate card height.
   Because all approved masters are pixel-registered, object-fit:contain with
   a bottom object-position yields identical optical scale and bottom
   alignment on every product with no per-file adjustment.                  */
.ccard__media {
  position: relative; display: grid; place-items: end center;
  /* Shorter frame (was 1 / 1.34) with tighter padding, so the vial reads
     larger inside less space and the card stops feeling like a generic
     image box with air above the product.                                  */
  aspect-ratio: 1 / 1.16; padding: 3.4% 4% 1.05rem;
  min-height: 0;   /* stop the tall source image inflating this flex item */
  /* Atmosphere, not a colour block: the product tone is present only as a
     low-opacity pool under the vial, over a near-neutral mineral field.     */
  --ccard-wash:
    radial-gradient(58% 31% at 50% 96%, color-mix(in srgb, var(--wash) 32%, transparent), transparent 74%),
    linear-gradient(178deg, var(--warm-white) 0%, color-mix(in srgb, var(--tint) 60%, var(--warm-white)) 66%, color-mix(in srgb, var(--tint) 22%, var(--warm-white)) 100%);
  background: none;
  text-decoration: none;
}
/* The tonal field is carried on a masked layer rather than the element itself,
   so it dissolves into the information panel instead of ending in a hard
   horizontal edge that reads as two unrelated rectangles. The vial image sits
   above it at z-index 1 and is untouched.                                   */
.ccard__media::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ccard-wash);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,0) 100%);
}
/* grounding: a soft contact pool directly beneath the glass base */
.ccard__ground {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  width: 34%; height: 2.6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(24,19,12,.34), rgba(24,19,12,0) 72%);
}
.ccard__media img {
  position: relative; z-index: 1; min-height: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 20px 20px rgba(20,16,10,.22)) drop-shadow(0 4px 4px rgba(20,16,10,.18));
}
.ccard__info {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: .42rem; padding: 1.15rem 1.25rem 1.3rem;
}
.ccard__type { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--text-muted); }
.ccard__name { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; letter-spacing: -.01em; margin: 0; line-height: 1.05; }
.ccard__name a { color: var(--ink); text-decoration: none; }
.ccard__name a:hover { color: var(--accentc); }
/* --stone at this size and tracking measures 4.04:1 on the card ground, just
   under the 4.5:1 minimum for small text. This is the same warm stone family
   one step deeper, which clears the threshold at 4.83:1 while staying visibly
   lighter than the product name and description above and below it. */
.ccard__strength { margin: 0; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #736A5F; }
.ccard__desc {
  margin: .18rem 0 0; font-size: .82rem; color: var(--text-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard__info .qline { margin-top: .35rem; }
/* Price and the action pair travel together as one bottom-aligned block, so
   every card in a row lands its button on the same baseline regardless of how
   long the description or status line runs.                                  */
.ccard__foot {
  width: 100%; margin-top: auto; padding-top: .85rem;
  display: flex; flex-direction: column; align-items: stretch;
  border-top: 1px solid var(--hairline);
}
.ccard__price { font-size: .95rem; color: var(--ink); }
.ccard__price--request, .ccard__price--soon { font-size: .76rem; letter-spacing: .02em; color: var(--text-muted); }
/* One primary action; "View Product" stays a quiet text link, not a button. */
/* Price and actions already sit inside one bordered foot — the second hairline
   inherited from m3.css is cancelled so the card ends on a single boundary. */
.ccard__actions {
  width: 100%; display: flex; flex-direction: column; align-items: stretch;
  gap: .5rem; margin-top: .7rem; padding-top: 0; border-top: 0;
}
.ccard__view {
  align-self: center; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.ccard__view:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.ccard__add {
  appearance: none; width: 100%; border: 1px solid var(--ink); background: var(--ink); color: var(--warm-white);
  font: inherit; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .78rem 1rem; border-radius: 2px; cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.ccard__add:hover { background: var(--accentc); border-color: var(--accentc); color: #fff; }
.ccard__add--off {
  display: block; background: transparent; color: var(--text-muted); border-color: var(--border);
  cursor: default; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .78rem 1rem; text-align: center; border-radius: 2px; border-style: solid; border-width: 1px;
}

/* ---- Related products (product page) -------------------------------- */
.related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
}

/* ---- Product grid: three columns on desktop, one per row below ------- */
.pgrid--shop { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

/* Tablet — one product per row, composed horizontally so the vial stays
   large without the card becoming a tall column of empty space.          */
@media (min-width: 601px) and (max-width: 1024px) {
  .pgrid--shop { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; gap: 1.25rem; }
  .ccard { flex-direction: row; align-items: stretch; }
  .ccard__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 380px; padding: 2.2rem 12% 1.4rem; }
  /* Beside the copy rather than above it, the tonal field ends in a hard
     vertical edge and reads as a coloured image block. The wash moves to a
     masked layer so it dissolves into the card body; the vial image (z-index 1)
     is untouched. */
  .ccard__media { background: none; }
  .ccard__media::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--ccard-wash);
    -webkit-mask-image: linear-gradient(90deg, #000 52%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(90deg, #000 52%, rgba(0,0,0,0) 100%);
  }
  .ccard__info { flex: 1; justify-content: center; padding: 1.8rem 1.9rem; gap: .5rem; }
  /* In the horizontal composition the copy is vertically centred as one group.
     Pushing the price rule to the bottom with `margin-top: auto` opened ~110px
     of dead space between the status line and the price; there is no adjacent
     column to align it to at this width, so it stays with its content. */
  .ccard__foot { margin-top: 1.05rem; }
  .ccard__actions { flex-direction: row; align-items: center; gap: 1.1rem; }
  .ccard__add { width: auto; flex: 1; }
  .ccard__view { align-self: center; }
}

/* Phone — one per row, stacked, generous vial, comfortable tap target.  */
@media (max-width: 600px) {
  /* Cards sit closer together: at one per row the previous gap read as a break
     between sections rather than a rhythm within one collection. */
  .pgrid--shop { grid-template-columns: 1fr; gap: .85rem; }
  /* The vial stays large, but the image panel no longer takes almost half the
     screen before any product information appears. */
  .ccard__media { aspect-ratio: 1 / .95; padding: 4.5% 23% 1.2rem; }
  .ccard__info { padding: 1.15rem 1.25rem 1.3rem; gap: .4rem; }
  /* Small uppercase type gets a larger size and less tracking on a phone,
     where tight letter-spacing at this scale becomes hard to read. */
  .ccard__type { font-size: .66rem; letter-spacing: .12em; }
  .ccard__name { font-size: 1.35rem; }
  /* Name and strength read as one lockup rather than two separate lines. */
  .ccard__name + .ccard__strength { margin-top: -.2rem; font-size: .72rem; letter-spacing: .1em; }
  .ccard__desc { font-size: .88rem; -webkit-line-clamp: 3; margin-top: .15rem; }
  .pstat { font-size: .74rem; }
  .qline { font-size: .66rem; letter-spacing: .1em; }
  .ccard__add { padding: .95rem 1rem; font-size: .7rem; }
  /* The secondary action stays a restrained text link, but its touch target is
     extended past the text so it is comfortable to hit. */
  .ccard__view { font-size: .74rem; letter-spacing: .1em; position: relative; }
  .ccard__view::after { content: ''; position: absolute; inset: -13px -10px; }
}

/* ---- Featured campaign panels (dark product colour worlds) ---------- */
.fpanels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.4vw, 1.4rem); }
.fpanel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(560px, 48vw, 700px); border-radius: 10px; overflow: hidden;
  background: var(--env); color: var(--warm-white); isolation: isolate;
  transition: transform .5s var(--ease-cine);
}
.fpanel:hover { transform: translateY(-5px); }
.fpanel__atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 52% at 70% 24%, rgba(214,178,120,.22), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}
/* The vial owns the upper field of the panel, full width and centred; the copy
   block sits beneath it. Previously the media was pinned right and the copy
   was allowed 82% width, so long names (CJC-1295) and descriptions ran across
   the glass. Separating the two zones vertically makes that impossible at any
   panel width, and lets the vial read considerably larger. */
.fpanel__media {
  position: relative; z-index: 1;
  /* flex-basis MUST be 0, not auto. With `auto` the basis resolves to the
     image's content height (the 544x1600 source scaled to the column width,
     ~900px) and the panel inflates to ~1170px. With `0` the media contributes
     nothing to the panel's intrinsic height, so the panel resolves to its
     min-height and the media takes exactly the residual space the copy block
     leaves — which is what makes overlap structurally impossible. */
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 7% 9% 0;
}
.fpanel__media img {
  height: 100%; width: 100%; min-height: 0;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 26px 24px rgba(0,0,0,.5)) drop-shadow(0 5px 5px rgba(0,0,0,.34));
}
/* contact pool, so the vial stands on the panel rather than floating in it */
.fpanel__media::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 32%; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 76%);
  filter: blur(4px);
}
.fpanel__body { position: relative; z-index: 2; padding: clamp(1.5rem, 2.4vw, 2.2rem); max-width: none; }
.fpanel__eyebrow { display: block; color: var(--soft-gold); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.fpanel__code { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 3.4vw, 3.1rem); letter-spacing: -.02em; line-height: 1; margin-top: .5rem; color: var(--warm-white); }
/* The strength is now a single short line (the wrapping full name it used to
   carry was removed), so the old 3.2em reserve here is dead space. Alignment
   is instead held by the description, which is the only block that varies. */
.fpanel__meta { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(238,233,223,.66); margin-top: .55rem; }
/* Three lines are reserved whether the description uses them or not. The media
   zone takes whatever height the copy block leaves, so a description that wraps
   to three lines instead of two would otherwise shrink that panel's vial and
   lift its product name relative to its neighbours. Reserving the space keeps
   the eyebrow, name, strength, description, status line and button on identical
   baselines across all three panels, and the vials at identical scale. */
.fpanel__desc { font-size: .86rem; color: rgba(238,233,223,.78); line-height: 1.55; margin: .7rem 0 0; max-width: 30ch; min-height: calc(.86rem * 1.55 * 3); }
.fpanel .trustsig { margin-top: .85rem; }
.fpanel__foot { display: flex; gap: .9rem; align-items: center; margin-top: .9rem; }
.fpanel__foot .docstat { color: rgba(238,233,223,.7); }
/* One primary action, one quiet link. Not two competing buttons. */
.fpanel__cta { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.15rem; flex-wrap: wrap; position: relative; z-index: 3; }
.fpanel__cta .btn { font-size: .62rem; padding: .68rem 1.1rem; }
.fpanel__link {
  font-size: .72rem; color: rgba(238,233,223,.7); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 2px;
}
.fpanel__link:hover { color: var(--warm-white); border-bottom-color: var(--soft-gold); }

/* ---- Footer: unpublished destinations ------------------------------- */
/* Matches the link rhythm exactly so the column still reads as one list, but
   carries no affordance, no hover and no badge — it is a stated item, not a
   link that fails. */
/* .34 alpha measured 2.79:1 on the footer ground — too faint to read rather
   than merely quiet. .52 clears 4.5:1 and still sits well below the 7.8:1 of
   the live links beside it, so the distinction between a destination that
   exists and one that does not stays obvious. */
.footer__pending {
  display: block; font-size: var(--fs-small); padding: .32rem 0;
  color: rgba(238,233,223,.52); cursor: default;
}
/* Four single-file columns made the phone footer longer than the collection it
   sits under. Two columns keep every retained item without the scroll. */
@media (max-width: 440px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
}

/* ---- Page-hero compact variant + CTA -------------------------------- */
.phero--compact .phero__inner { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }
.phero--compact .phero__title { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); }
.phero__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.phero__cta .btn { font-size: .66rem; padding: .74rem 1.15rem; }

/* ---- Section lead (small intro above a band) ------------------------ */
.section-lead { margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); }
.section-lead .eyebrow { color: var(--brass); }
.section-lead__p { margin: .5rem 0 0; max-width: 52ch; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }

/* ---- Shop toolbar --------------------------------------------------- */
.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.4rem; }
.shop__count { font-size: .78rem; letter-spacing: .04em; color: var(--text-muted); }
.shop__count span { color: var(--ink); font-weight: 600; }
.shop__tools { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.shop__search { position: relative; display: flex; align-items: center; }
.shop__searchico { position: absolute; left: .7rem; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.shop__searchico svg { width: 15px; height: 15px; }
.shop__search input { font: inherit; font-size: .82rem; padding: .55rem .8rem .55rem 2.1rem; border: 1px solid var(--border); border-radius: 3px; background: var(--warm-white); color: var(--ink); min-width: 220px; }
.shop__search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.shop__filterbtn { display: none; font: inherit; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .6rem 1rem; border: 1px solid var(--border); border-radius: 3px; background: var(--warm-white); cursor: pointer; }
.sel { font: inherit; font-size: .82rem; padding: .55rem 2rem .55rem .8rem; border: 1px solid var(--border); border-radius: 3px; background: var(--warm-white); color: var(--ink); }

/* ---- Filter panel (inline desktop / drawer mobile) ------------------ */
.shopfilter { margin-bottom: 1.6rem; }
.shopfilter__head, .shopfilter__foot { display: none; }
.shopfilter__body { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.shopfilter__group { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.shopfilter__label { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.fchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fchip {
  font: inherit; font-size: .68rem; letter-spacing: .02em; color: var(--text);
  padding: .34rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; cursor: pointer; transition: border-color .25s, color .25s, background .25s;
}
.fchip:hover { border-color: var(--brass); color: var(--brass); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--warm-white); }
.fchip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Active-filter count on the mobile Filters control */
.shop__filtercount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; margin-left: .5rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--ink); color: var(--warm-white);
  font-size: .62rem; font-weight: 600; letter-spacing: 0;
}
.shop__filtercount[hidden] { display: none; }

/* ---- Collection ending ----------------------------------------------
   The grid closes on a quiet statement of what the listings mean rather
   than trailing off into the footer. Breathing room, no marketing block. */
.shop__close {
  margin-top: clamp(3.2rem, 6vw, 5rem);
  padding-top: clamp(2rem, 3.4vw, 2.8rem);
  border-top: 1px solid var(--hairline);
  max-width: 62ch;
}
.shop__close-p {
  margin: .9rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--text);
}
.shop__close-note {
  margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--text-muted);
}
.shop__close-ruo { margin: 1.4rem 0 0; }

/* ============================ RESPONSIVE ============================== */

/* Tablet & below — stacked composition (copy above, full lineup below on the
   pedestal). Side-by-side only holds at true desktop widths, so we switch
   cleanly rather than shrink the desktop hero into an overlap. */
@media (max-width: 1024px) {
  /* Stacked: copy on the dark scene above, the photographic plate below. */
  .rhero {
    display: flex; flex-direction: column; height: auto; align-items: stretch;
    padding-top: clamp(2rem, 6vw, 3rem);
    background:
      radial-gradient(120% 80% at 70% 0%, rgba(120,92,58,.22), transparent 60%),
      var(--scene-0);
  }
  .rhero__wrap { order: 1; position: static; }
  .rhero__scene {
    order: 2; position: relative; inset: auto;
    margin-top: clamp(1.6rem, 5vw, 2.4rem);
    height: clamp(300px, 58vw, 460px);
  }
  .rhero__veil { display: none; }
  .rhero__scene picture, .rhero__img { object-position: center; }
  .rhero__copy { max-width: 100%; }
  .rhero__title { font-size: clamp(2.6rem, 6.6vw, 4.2rem); }
  .rhero__lead { max-width: 42ch; }
  .rhero__cta { margin-top: 1.6rem; }

  /* trust strip stacks */
  .tstrip__row { grid-template-columns: 1fr; justify-items: start; gap: 1.3rem; }
  .tstrip__div { display: none; }
  .tstrip__p { max-width: 52ch; }

  .reditorial__grid2 { grid-template-columns: 1fr; }
  .reditorial__text { grid-template-columns: 1fr; gap: 1.1rem; max-width: 640px; margin: 0 auto; order: 1; }
  .reditorial__media {
    order: 2; height: clamp(240px, 42vw, 360px);
    border-left: 0; border-top: 1px solid rgba(214,183,132,.12);
  }
  .reditorial__media img { object-position: center 32%; }
  .reditorial__media::after { background: linear-gradient(0deg, rgba(13,10,7,.5), transparent 34%); }
}

/* Mobile — simplified header; headline first, cinematic scene below. */
@media (max-width: 640px) {
  .mast__ruo { display: none; }
  .mast__menu { display: inline-flex; }
  .mast__nav { display: none; }
  .util:not(.cartbtn) .util__t { display: none; }   /* search/account = icon only */
  .util:not(.cartbtn) { gap: 0; }
  .util.cartbtn .util__t { font-size: .66rem; }
  .util.cartbtn { gap: .4rem; }
  .mast__side--right { gap: 1.15rem; }
  .mast .wordmark--nav { height: 21px; }
  .mast__bar { padding-top: .9rem; padding-bottom: .9rem; }

  .rhero__title { font-size: clamp(2.7rem, 12.5vw, 3.7rem); }
  .rhero__lead { max-width: 34ch; }
  .rhero__scene { height: clamp(300px, 76vw, 420px); }
  .rhero__cta { gap: .6rem; flex-wrap: wrap; }
  .rhero__cta .btn { flex: 1 1 auto; }

  .reditorial__text { padding: clamp(2.2rem, 8vw, 3rem) var(--gutter); }
  .reditorial__media { height: clamp(220px, 62vw, 300px); }
}

/* ---- Extension pages: responsive ------------------------------------ */
/* Tablet: a single full-width panel has horizontal room to spare, so the vial
   becomes a real left column rather than a stacked band — no overlap, and the
   copy keeps a comfortable measure. */
@media (max-width: 1024px) {
  .fpanels { grid-template-columns: 1fr; }
  .fpanel { min-height: 0; flex-direction: row; align-items: stretch; justify-content: flex-start; }
  .fpanel__media { flex: 0 0 30%; padding: 2.4rem 2% 2.4rem 3%; }
  .fpanel__media img { height: clamp(280px, 34vw, 380px); width: 100%; }
  .fpanel__media::after { bottom: 2rem; width: 58%; }
  .fpanel__body { flex: 1 1 auto; align-self: center; }
}
/* Mobile: stack deliberately — full-width vial above the copy, at a scale the
   product can actually be appreciated at. Not a compressed tablet row. */
@media (max-width: 600px) {
  .fpanel { flex-direction: column; }
  .fpanel__media { flex: none; width: 100%; padding: 2.1rem 24% 1.5rem; }
  .fpanel__media img { height: clamp(290px, 76vw, 370px); }
  .fpanel__media::after { bottom: 1.15rem; width: 42%; }
  .fpanel__body { align-self: stretch; padding-top: .4rem; }
}
@media (max-width: 760px) {
  /* mobile filter drawer */
  .shop__filterbtn { display: inline-block; }
  .shopfilter {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--warm-white); margin: 0; padding: 0;
    transform: translateX(100%); transition: transform .4s var(--ease-cine);
    display: flex; flex-direction: column; overflow-y: auto;
  }
  .shopfilter.is-open { transform: none; }
  .shopfilter__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--hairline); }
  .shopfilter__title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
  .shopfilter__body { flex: 1; flex-direction: column; gap: 1.6rem; padding: 1.4rem var(--gutter); }
  .shopfilter__group { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .shopfilter__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-top: 1px solid var(--hairline); }
  body.no-scroll { overflow: hidden; }
  .shop__search input { min-width: 0; width: 100%; }
  .shop__tools { width: 100%; }
  .shop__search { flex: 1; }
}
@media (max-width: 560px) {
  .phero__cta { width: 100%; }
  .phero__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   PRODUCT PAGE (PDP) — dark product colour world (Milestone 4)
   ========================================================================== */
.pdp {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 22% 8%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--env) 82%, #000) 0%, var(--env) 40%, color-mix(in srgb, var(--env) 78%, #000) 100%);
  color: var(--warm-white); isolation: isolate;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(3rem, 6vw, 5rem);
}
.pdp__atmos {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 26% 44%, rgba(214,178,120,.12), transparent 66%);
}
.pdp__crumbs { position: relative; z-index: 1; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(238,233,223,.55); margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.pdp__crumbs a { color: rgba(238,233,223,.72); text-decoration: none; }
.pdp__crumbs a:hover { color: var(--soft-gold); }
.pdp__crumbs span[aria-hidden] { margin: 0 .5rem; opacity: .5; }
.pdp__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.pdp__stage {
  position: relative; min-height: clamp(400px, 44vw, 620px);
  display: grid; place-items: end center; padding-bottom: 2.2rem;
}
/* Floor plane. A very wide, very low pool of warm light sitting just under the
   glass base. It reads as a surface for the vial to stand on, so the contact
   shadow below has something to fall onto — without inventing a reflection
   that would conflict with the lighting baked into the approved file. */
.pdp__stage::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  width: min(88%, 620px); height: 8.5rem;
  background:
    radial-gradient(58% 44% at 50% 96%, rgba(232,206,166,.13), rgba(232,206,166,0) 72%),
    radial-gradient(84% 62% at 50% 100%, rgba(255,255,255,.045), rgba(255,255,255,0) 70%);
  filter: blur(2px);
}
.pdp__glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 76%; height: 74%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224,196,150,.2), transparent 72%);
  filter: blur(6px);
}
.pdp__vial {
  position: relative; z-index: 1;
  height: clamp(360px, 44vw, 600px); width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 34px 30px rgba(0,0,0,.55)) drop-shadow(0 6px 6px rgba(0,0,0,.38));
}
.pdp__panel {
  background: rgba(13,11,9,.5); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: clamp(1.5rem, 2.6vw, 2.3rem);
  backdrop-filter: blur(4px);
}
.pdp__eyebrow { display: block; color: var(--soft-gold); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.pdp__code { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); letter-spacing: -.02em; line-height: 1; margin: .55rem 0 0; color: var(--warm-white); }
.pdp__strength { margin: .5rem 0 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,233,223,.62); font-weight: 500; }
.pdp__fullname { margin: .5rem 0 0; font-size: .92rem; color: rgba(238,233,223,.78); }
.pdp__lead { margin: .9rem 0 0; font-size: .95rem; line-height: 1.6; color: rgba(238,233,223,.72); max-width: 42ch; }
.pdp__panel .pstat { margin-top: 1.05rem; }
.pdp__statusrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.pdp__pricerow { margin-top: 1rem; }
/* Contact shadow — grounds the vial without inventing a reflection that
   would conflict with the lighting already present in the approved file. */
.pdp__contact {
  position: absolute; left: 50%; bottom: calc(2.2rem - 11px); transform: translateX(-50%);
  width: min(34%, 260px); height: 22px; border-radius: 50%; pointer-events: none;
  z-index: 0;
  /* Two-stage: a soft ambient occlusion pool, and a tight dark core where the
     glass actually meets the surface. */
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 76%),
    radial-gradient(26% 34% at 50% 52%, rgba(0,0,0,.72), rgba(0,0,0,0) 80%);
  filter: blur(4px);
}
.pbuy__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--warm-white); }
/* The fallbacks must be declared AFTER the base or the base's larger display
   size wins on equal specificity — a neutral placeholder should not be set at
   the same weight as a real price. */
.pbuy__price--soon,
.pbuy__price--request { font-size: .95rem; color: rgba(238,233,223,.62); font-family: var(--font-sans); letter-spacing: .02em; }
.pdp__panel .trustsig { margin-top: 1rem; color: var(--soft-gold); }
.pdp__panel .trustsig i { color: rgba(255,255,255,.2); }

.pbuy { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.09); }
.pbuy__qty { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pbuy__qlabel { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(238,233,223,.6); }
.pbuy .qty { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; }
.pbuy .qty__btn { background: transparent; border: 0; color: var(--warm-white); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.pbuy .qty__btn:hover { background: rgba(255,255,255,.08); }
.pbuy .qty__input { width: 40px; height: 34px; text-align: center; background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.14); border-right: 1px solid rgba(255,255,255,.14); color: var(--warm-white); font: inherit; }
.pbuy__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.pbuy__add { flex: 1 1 auto; justify-content: center; }
.pbuy__actions .btn--outline-light { flex: 0 0 auto; }
.pbuy__ack { margin: .9rem 0 0; font-size: .72rem; line-height: 1.5; color: rgba(238,233,223,.52); }

/* ---- Batch testing module ------------------------------------------- */
.batch { background: var(--charcoal); color: var(--warm-white); padding: clamp(2.6rem, 5vw, 4.2rem) 0; border-top: 1px solid rgba(214,183,132,.1); }
.batch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.batch__head .h2-display { color: var(--warm-white); margin: .3rem 0 0; }
.batch__state { display: inline-flex; align-items: center; gap: .5rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: rgba(238,233,223,.8); padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.batch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm-gray); }
.batch__state--demo .batch__dot { background: var(--champagne); }
.batch__state--available .batch__dot { background: #3f7a54; }
.batch__state--pending .batch__dot { background: var(--warm-gray); }
.batch__card { background: var(--obsidian); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.batch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem 1.6rem; margin: 0; }
.batch__field dt { font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(238,233,223,.5); margin-bottom: .35rem; }
.batch__field dd { margin: 0; font-size: .92rem; color: var(--warm-white); }
.batch__foot { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08); }
.batch__foot-note, .batch__note { font-size: .78rem; color: rgba(238,233,223,.55); }
.batch__disclaimer { margin: 1rem 0 0; font-size: .74rem; color: rgba(238,233,223,.5); max-width: 70ch; }
.batch .link--gold { color: var(--soft-gold); }
.batch .link--muted { color: rgba(238,233,223,.62); }

/* ---- PDP information + specs ---------------------------------------- */
.pdpinfo { background: var(--bg); }
.pdpinfo__grid { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* The section carries the same content in a shorter column. Every value below
   is a reduction in whitespace or row height only — nothing is removed, no type
   is shrunk below its readable size, and the section keeps generous but
   controlled spacing rather than becoming dense. */
.pdpinfo { padding-block: calc(var(--section-y) * .7); }
.pdpinfo__main .h2-display { margin: .45rem 0 1.15rem; max-width: 24ch; }
/* Slightly narrower measure, so the opening paragraph reads as an introduction
   rather than running the full width of the column. */
.pdpinfo__main .lead { max-width: 58ch; }
.pdpinfo__main .pdp__acc { margin-top: 1.6rem; }
/* Accordion rows: shorter head padding and a tighter open panel. The label type
   size is untouched so the section headings stay readable. */
.pdpinfo .acc__head { padding: .78rem 0; }
.pdpinfo .acc__inner { padding-bottom: .95rem; gap: .55rem; }
/* Specification table rows carry the same content in less vertical space. */
.pdpinfo .spec div { padding: .5rem .9rem; }
.pdpinfo__side { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 120px; }
.sidecard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 1.3rem 1.4rem; }
.sidecard .label { display: block; margin-bottom: .9rem; color: var(--text-muted); }
.sidespec { margin: 0; display: grid; gap: .7rem; }
.sidespec div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--hairline); padding-bottom: .6rem; }
.sidespec div:last-child { border-bottom: 0; padding-bottom: 0; }
.sidespec dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.sidespec dd { margin: 0; font-size: .9rem; color: var(--ink); text-align: right; }
.sidecard--pillars .pillars { flex-direction: column; align-items: flex-start; gap: .7rem; }
/* The presentation panel is a summary, not a second specification table: rows
   are compact, values are allowed to wrap without pushing the label, and any
   attribute without a confirmed value is absent rather than blank. */
.sidecard--present .sidespec { gap: .5rem; }
.sidecard--present .sidespec div { padding-bottom: .5rem; }
.sidecard--present .sidespec dt { flex: 0 0 auto; }
.sidecard--present .sidespec dd { max-width: 58%; }
/* On a phone the longest value ("Batch documentation in preparation") has only
   about half the panel to work with beside its label, and breaks across three
   ragged right-aligned lines. Below this width the row stacks instead: the
   label sits above its value and the value reads as one left-aligned line of
   normal length. Nothing is removed and the desktop layout is untouched. */
@media (max-width: 560px) {
  .sidecard--present .sidespec div { display: block; }
  .sidecard--present .sidespec dd { max-width: none; text-align: left; margin-top: .2rem; }
}

/* ---- PDP responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .pdp__grid { grid-template-columns: 1fr; gap: 1rem; }
  .pdp__stage { min-height: clamp(300px, 62vw, 420px); order: -1; }
  .pdp__vial { height: clamp(300px, 62vw, 420px); }
  .batch__grid { grid-template-columns: repeat(2, 1fr); }
  .pdpinfo__grid { grid-template-columns: 1fr; }
  .pdpinfo__side { position: static; }
}
@media (max-width: 480px) {
  .batch__grid { grid-template-columns: 1fr 1fr; }
  .pbuy__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Documentation cards: honest "in preparation" state -------------- */
.docprev__grid { margin-top: 1.4rem; }
.doccard__note { font-size: .8rem; color: var(--text-muted); line-height: 1.55; max-width: 62ch; }
.demo-banner {
  color: var(--stone); border-color: var(--border); background: transparent;
  text-transform: none; letter-spacing: .01em; font-size: .78rem; border-radius: 3px; padding: .5rem .85rem;
}

/* ---- Hero copy — updated to the approved collection headline ---------
   Typography, scale and lighting of the locked hero are unchanged; only the
   line lengths differ, so the copy column is widened a little and the display
   size eased to keep both lines on one line each at desktop.            */
.rhero__copy { max-width: 46%; }
.rhero__eyebrow {
  display: block; margin-bottom: .9rem;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 500; color: var(--soft-gold);
}
.rhero__title { font-size: clamp(2.05rem, 1.1rem + 2.35vw, 3.35rem); line-height: .92; }
.rhero__title-em { font-size: 1.1em; }
.rhero__lead {
  margin-top: 1.05rem; font-size: .74rem; letter-spacing: .105em; line-height: 1.85;
  max-width: 44ch; color: rgba(238,233,223,.76);
}
@media (max-width: 1024px) {
  .rhero__copy { max-width: 100%; }
  .rhero__lead { max-width: 52ch; }
}

/* ---- Homepage editorial cards — rebuilt on the commerceCard treatment ---
   m3.css put `.ecard__media` at `position:absolute; inset:0` behind an
   `.ecard__info` whose gradient starts transparent, so the category and
   name rows rendered directly on the vial glass and the base of the bottle
   was clipped behind the info block. Rebuilt here as a normal flow column:
   tonal media surface on top, copy below, nothing overlapping. Same
   product-image treatment as the shop grid (`--tint` / `--wash`), so the
   two card types read as one system.                                     */
.ecard {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--warm-white); border: 1px solid var(--hairline);
  transition: transform .5s var(--ease-cine), box-shadow .5s var(--ease-cine);
}
.ecard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(20,16,10,.4); }
.ecard__media {
  position: relative; inset: auto; display: grid; place-items: end center;
  aspect-ratio: 1 / 1.16; padding: 6% 13% 1.05rem; min-height: 0;
  background:
    radial-gradient(64% 34% at 50% 99%, color-mix(in srgb, var(--wash) 30%, transparent), transparent 76%),
    linear-gradient(178deg, var(--warm-white) 0%, color-mix(in srgb, var(--tint) 58%, var(--warm-white)) 82%);
}
.ecard__media img {
  position: relative; inset: auto; z-index: 1; min-height: 0;
  width: 100%; height: 100%; padding: 0;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 18px 18px rgba(20,16,10,.2)) drop-shadow(0 4px 4px rgba(20,16,10,.16));
  transition: transform var(--dur-cine) var(--ease-cine);
}
.ecard:hover .ecard__media img { transform: translateY(-5px) scale(1.02); }
.ecard__info {
  position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column;
  align-items: flex-start; gap: .34rem; background: none;
  padding: 1.15rem 1.3rem 1.25rem;
}
.ecard__type { font-size: .58rem; letter-spacing: .17em; text-transform: uppercase; color: var(--text-muted); }
.ecard__name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem;
  letter-spacing: -.01em; line-height: 1.05; margin: 0; color: var(--ink);
}
/* Matches the shop card strength: one step deeper than --stone so the same
   label clears 4.5:1 in the homepage editorial card as well. */
.ecard__strength { margin: 0; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: #736A5F; }
.ecard__desc { margin: .3rem 0 .1rem; font-size: .8rem; line-height: 1.6; color: var(--text-muted); }
.ecard .pstat { margin-top: .1rem; }
.ecard__foot {
  width: 100%; margin-top: auto; padding-top: .9rem;
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid var(--hairline); color: var(--text-muted);
}
.ecard__view { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.ecard__foot svg { width: .8em; height: .8em; }
.ecard:hover .ecard__foot { color: var(--ink); }

/* ---- Section head — CTA must follow the lead -------------------------
   Previously the CTA sat inside `.section-head__top` alongside the h2, so
   it read above the lead paragraph. Splitting the head into a copy column
   plus the CTA keeps the desktop composition (link bottom-right of the
   block) while placing the link after the lead in reading order, and it
   drops below the lead when the row wraps.                               */
.section-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
}
.section-head--split .section-head__lhs { display: grid; gap: var(--sp-4); }
.section-head--split .section-head__cta { white-space: nowrap; padding-bottom: .2rem; }

/* ---- Full-bleed product sections — copy column sizing ----------------
   `.penv__copy` was capped at 34ch (~282px at 1440), which forced the
   packaging code to break across the hyphen ("CJC-" / "1295") and wrapped
   the strength out of its own meta row. The column is widened, the display
   size eased to a scale that keeps the longest code on one line at every
   breakpoint, and the meta row given a row-gap for the narrow widths where
   it genuinely has to wrap.                                              */
.penv__copy { max-width: 46ch; gap: 1rem; }
.penv__code {
  font-size: clamp(2.8rem, 1.8rem + 3.2vw, 4.4rem);
  line-height: .96; white-space: nowrap;
}
.penv__meta { flex-wrap: wrap; row-gap: .2rem; column-gap: .6rem; }
.penv__desc { font-size: 1rem; line-height: 1.62; max-width: 44ch; }
/* These copy columns are CSS grids, so a `.btn` child stretched to the full
   column width and read as a banner rather than a button.               */
.penv__copy .btn,
.docsec__copy .btn { justify-self: start; }

/* ============================================================================
   PRICING, STRENGTH VARIANTS AND THE SITEWIDE PROMOTION
   Added for the pricing / variant / buy-one-get-one milestone. Nothing above
   this block is altered: the masthead proportions, hero, vial treatment, card
   structure and product-page layout are exactly as approved. Everything here
   is either a new element or a restrained addition inside an existing one.
   ========================================================================== */

/* ---- Promotion line in the masthead ---------------------------------
   One slim line at the top of the header, in header type, on header ivory.
   It adds roughly 22px at desktop and collapses with the other secondary
   rows on scroll, so the compact masthead keeps its approved height. It is
   deliberately quieter than "For Qualified Research Use Only" — smaller,
   lighter and without the brass the navigation uses for emphasis.        */
.promoline {
  border-bottom: 1px solid var(--hairline);
  background: var(--ivory);
}
.promoline .container { display: flex; justify-content: center; }
.promoline__t {
  display: block; padding: .34rem 0;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.promoline__t:hover { color: var(--ink); }
.promoline__short { display: none; }
.mast.is-scrolled .promoline { display: none; }

/* ---- Price presentation ---------------------------------------------- */
.price__from {
  font-size: .62em; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-family: var(--font-sans); font-weight: 500;
  margin-right: .1em;
}
/* The promotional sentence is a statement of fact set at footnote size. No
   badge, no colour, no rule — the offer is stated once and left alone.    */
.promo-note {
  margin: .45rem 0 0; font-size: .74rem; line-height: 1.5;
  color: var(--text-muted); letter-spacing: .01em;
}
.pdp__pricerow .promo-note { color: rgba(238,233,223,.6); }
/* §7 — a plain statement about what the photograph shows, set under the
   selector at footnote size in the panel's muted ink. It is not a warning and
   is not dressed as one; it disappears the moment the selected strength and
   the printed strength agree.                                               */
.imgnote {
  margin: .6rem 0 0; font-size: .72rem; line-height: 1.45;
  color: rgba(238,233,223,.6); letter-spacing: .01em;
}
.imgnote[hidden] { display: none; }
.pbuy__qnote {
  margin: 0; font-size: .72rem; line-height: 1.4;
  color: rgba(238,233,223,.6); flex-basis: 100%;
}
.pbuy__qty { flex-wrap: wrap; row-gap: .55rem; }

/* ---- Strength selector (segmented control) ---------------------------
   A segmented control rather than a browser select: the options are short,
   few and mutually exclusive, and the whole set reads at a glance. It is
   native radio inputs underneath, so arrow keys move between strengths and
   the selection is announced correctly; the inputs are visually hidden but
   remain focusable, and the focus ring is drawn on the label.            */
.segsel { margin-top: 1.25rem; }
.segsel__label {
  display: block; margin-bottom: .5rem;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: rgba(238,233,223,.6);
}
.segsel__field {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px; overflow: hidden;
  max-width: 100%;
}
.segsel__opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; min-height: 42px; padding: 0 .95rem;
  cursor: pointer; user-select: none;
  border-left: 1px solid rgba(255,255,255,.14);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.segsel__opt:first-child { border-left: 0; }
.segsel__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer; appearance: none;
}
.segsel__t {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  color: rgba(238,233,223,.72); white-space: nowrap;
}
.segsel__opt:hover { background: rgba(255,255,255,.06); }
.segsel__opt:hover .segsel__t { color: var(--warm-white); }
.segsel__opt.is-on { background: var(--warm-white); }
.segsel__opt.is-on .segsel__t { color: var(--obsidian); font-weight: 600; }
.segsel__opt:has(input:focus-visible) { outline: 2px solid var(--soft-gold); outline-offset: -2px; }
.segsel__opt--off { opacity: .38; cursor: not-allowed; }
.segsel__opt--off input { cursor: not-allowed; }

/* Phone — full-width row of equal segments, 46px tall, never overflowing
   the viewport and never set in type too small to read.                  */
@media (max-width: 600px) {
  .segsel__field { display: flex; width: 100%; flex-wrap: wrap; }
  .segsel__opt {
    flex: 1 1 33.333%; min-width: 0; min-height: 46px; padding: 0 .5rem;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .segsel__opt:nth-child(-n+3) { border-top: 0; }
  .segsel__opt:nth-child(3n+1) { border-left: 0; }
  .segsel__t { font-size: .78rem; letter-spacing: .06em; }
  .promoline__t { font-size: .58rem; letter-spacing: .12em; }
  .promoline__full { display: none; }
  .promoline__short { display: inline; }
}
/* Two-strength products keep two equal halves rather than an orphan row. */
@media (max-width: 600px) {
  .segsel__field[data-n="2"] .segsel__opt { flex-basis: 50%; }
  .segsel__field[data-n="2"] .segsel__opt:nth-child(-n+2) { border-top: 0; }
  .segsel__field[data-n="2"] .segsel__opt:nth-child(2n+1) { border-left: 0; }
}

/* ---- Product card additions ------------------------------------------ */
.ccard__nstr { color: var(--text-muted); letter-spacing: .1em; }
.ccard__strength--none { color: var(--text-muted); }
/* "View Options" is the same shape and weight as the primary action so the
   grid keeps one consistent button rhythm across single- and multi-strength
   products.                                                              */
.ccard__add--opts { display: block; text-decoration: none; }
.ccard .promo-note { margin-top: .3rem; font-size: .68rem; }
/* §5 — the offer stated once beneath the price, in the card's own muted ink at
   footnote size. Deliberately not a badge, not a colour, not a crossed-out
   figure and not a sticker: five of these sit in a row, and anything louder
   turns the grid into a sale rack.                                          */
.ccard__promo {
  margin: .3rem 0 0; font-size: .72rem; line-height: 1.4;
  color: var(--text-muted); letter-spacing: .01em;
}

/* ---- Cart lines (drawer and full page share one presentation) --------- */
.cartline__strength {
  display: block; margin-top: .12rem;
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
}
.cartline__calc { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .45rem; }
.cartline__calc .lab { font-size: .78rem; color: var(--text-muted); }
.cartline__calc .val { font-size: .82rem; font-variant-numeric: tabular-nums; }
/* The discount is a normal figure in the same ink as the rest of the line.
   It is not red, not a badge and not enlarged — it is simply negative.    */
.cartline__calc--disc .lab { color: var(--text); }
.cartline__calc--disc .val { color: var(--text); }
/* W3. While the cart is being handed to the shop the control stays in place
   and stops accepting clicks — the same treatment the admin already uses. */
.btn.is-busy, .is-busy { opacity: .7; pointer-events: none; }

/* W3. A line the shop has refused, and a line it has not answered about yet.
   Both are stated in the same ink and the same size as any other line note:
   the point is to be read, not to alarm. Neither ever carries a figure. */
.cartline__calc--problem .lab { color: var(--text); }
.cartline__calc--pending .lab { color: var(--text-muted); font-style: italic; }

.cartline__calc--total { padding-top: .4rem; border-top: 1px solid var(--hairline); }
.cartline__calc--total .lab { color: var(--text); }
.cartline__calc--total .val { font-weight: 600; }

.cart-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.cart-row .lab { font-size: .8rem; color: var(--text-muted); }
.cart-row .val { font-size: .88rem; font-variant-numeric: tabular-nums; }
.cart-row--total { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid var(--border-strong); }
.cart-row--total .lab { color: var(--ink); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.cart-row--total .val { font-family: var(--font-display); font-size: 1.25rem; }
.cart-row--note .val { font-size: .78rem; color: var(--text-muted); }
.cart-progress {
  margin: .9rem 0 0; padding: .7rem .85rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  font-size: .76rem; line-height: 1.45; color: var(--text);
}
/* §3 — the action that follows the sentence, and only when there is something
   to act on. A text link in the panel's own type, sitting directly under the
   message it answers: no banner, no popup, no countdown, no badge, no colour
   that would pull the eye away from the totals beside it.                   */
.cart-progress__go {
  display: inline-flex; align-items: baseline; gap: .4em;
  margin: .55rem 0 0; padding-bottom: .18rem;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur) var(--ease);
}
.cart-progress__go:hover { border-bottom-color: var(--ink); }
/* §2 — the discounted variant is named inside the row's own label, at the
   label's own size and weight. Only the ink changes, so the row reads as one
   sentence rather than as a label with a tag stuck to it.                   */
.cart-row__free { color: var(--text); }
.cart-disclose { margin: .8rem 0 0; font-size: .7rem; line-height: 1.5; color: var(--text-muted); }

/* ---- Full cart page --------------------------------------------------- */
.cartpage { background: var(--bg); }
.cartpage__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.cartpage__head .h2-display { margin: .35rem 0 0; }
.cartpage__promo { margin: .8rem 0 0; font-size: .92rem; color: var(--text-muted); max-width: 62ch; line-height: 1.6; }
.cartpage__grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.cartlines { display: flex; flex-direction: column; }
.cartpage__empty { padding: 2.5rem 0; display: grid; gap: 1.1rem; justify-items: start; }
.cartrow {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 1.1rem;
  padding: 1.3rem 0; border-top: 1px solid var(--hairline); align-items: start;
}
.cartrow:first-child { border-top: 0; }
/* The vial is never set inside a visible white, grey or coloured image block.
   This tile previously carried the product's cool tint, which against the cream
   cart read as a pale blue card behind the glass. The thumbnail now sits on the
   page surface with only a whisper of the product colour under the base, which
   grounds the vial without printing a block around it. */
.cartrow__media {
  background: none; border-radius: 6px; position: relative;
  display: grid; place-items: center; padding: .5rem .8rem; align-self: start;
}
.cartrow__media::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 10px;
  border-radius: 50%; background: var(--wash, rgba(13,13,12,.16));
  filter: blur(6px); opacity: .28; z-index: 0;
}
.cartrow__media img { position: relative; z-index: 1; }
.cartrow__media img { width: 100%; height: 90px; object-fit: contain; display: block; }
.cartrow__name { font-family: var(--font-display); font-size: 1.15rem; margin: 0; line-height: 1.1; }
.cartrow__name a { color: var(--ink); text-decoration: none; }
.cartrow__name a:hover { color: var(--brass); }
.cartrow__sku { display: block; margin-top: .3rem; font-size: .66rem; letter-spacing: .1em; color: var(--text-muted); }
.cartrow__ctrl { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }
.cartrow__rm {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cartrow__rm:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.cartrow__money { text-align: right; min-width: 150px; }
.cartsum {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: clamp(1.2rem, 2.2vw, 1.6rem); position: sticky; top: 120px;
}
.cartsum .label { display: block; margin-bottom: .9rem; }
.cartsum__rows { margin: 0; }
.cartsum__go { width: 100%; justify-content: center; margin-top: 1.1rem; }
.cartsum__progress {
  margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--text);
  padding-top: .8rem; border-top: 1px solid var(--hairline);
}
.cartsum__disclose { margin: 1rem 0 0; font-size: .7rem; line-height: 1.55; color: var(--text-muted); }
/* .link carries its own font-size, which set the offer-details link a third
   larger than the sentence it sat inside and broke the paragraph's rhythm. In
   this one place the link takes the paragraph's size and drops to its own line
   so the disclosure reads as a block of terms with a link after it. */
.cartsum__disclose .link { font-size: inherit; display: flex; margin-top: .5rem; }
.cartsum__ack { margin: .8rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--text-muted); }
.offerspec { margin: 2rem auto; max-width: 46rem; text-align: left; }
.offerspec > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--hairline); }
.offerspec dt { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.offerspec dd { margin: 0; font-size: .92rem; }

@media (max-width: 900px) {
  .cartpage__grid { grid-template-columns: 1fr; }
  .cartsum { position: static; }
}
@media (max-width: 600px) {
  .cartrow { grid-template-columns: 64px 1fr; gap: .85rem; }
  .cartrow__media img { height: 70px; }
  .cartrow__money { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .offerspec > div { grid-template-columns: 1fr; gap: .25rem; }
}

/* --- Search: product row with a matched strength (§16) -------------------- */
/* The row stays one line per product. When the query names a strength that the
   product actually carries, that strength is stated beside the code rather than
   the product being repeated once per variant. */
.search__result .r-main { display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; }
.search__result .r-match {
  font-family: var(--font-sans); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--text); background: var(--surface-alt);
  border: var(--hair); border-radius: 2px; padding: .14rem .4rem;
}

/* --- Checkout handoff record (§18) --------------------------------------- */
/* The .ordersnap rules were removed in M5 with the checkout-preview page that
   was the only surface drawing them. The record itself is still written at
   handoff; nothing renders it, so there is nothing here to style. */

/* --- Withdrawn cart line -------------------------------------------------- */
/* A strength that left the catalogue while it was sitting in somebody's cart.
   It is stated, not styled as an alarm: no red, no icon, no capitals. The rule
   above it and the muted type are enough to separate it from the priced lines,
   and the two actions offered are the only two the customer actually has. */
.cartgone {
  display: grid; gap: .55rem;
  padding: 1rem 0; border-top: var(--hair);
  color: var(--text-muted);
}
.cartgone__name {
  display: block; font-family: var(--font-serif); font-size: .95rem;
  letter-spacing: .01em; color: var(--text);
}
.cartgone__note { display: block; margin-top: .25rem; font-size: .72rem; line-height: 1.65; }
.cartgone__ctrl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; }
.cartgone__go {
  font-family: var(--font-sans); font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.cartgone__go:hover { border-bottom-color: var(--brass); }
.cartgone__rm {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease);
}
.cartgone__rm:hover { color: var(--text); }
.cartgone--page { padding: 1.4rem 0; }

/* The same fact restated where the money is, so a smaller subtotal is never
   mistaken for a repricing. */
.cart-row__flag {
  margin: .85rem 0 0; padding-top: .8rem; border-top: var(--hair);
  font-size: .7rem; line-height: 1.7; color: var(--text-muted);
}

/* Checkout stays in place and keeps its wording while it is unavailable —
   removing it would leave the customer looking for it. */
.btn.is-blocked,
.cartsum__go.is-blocked {
  opacity: .42; cursor: not-allowed; pointer-events: auto;
}

/* The price on a search result. Same weight and colour as the surrounding row
   — it identifies the thing found, it does not advertise it. */
.search__result .r-price {
  font-size: .8rem; color: var(--text-muted); white-space: nowrap;
}
.search__result .r-price .price__from {
  font-family: var(--font-sans); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase;
}

/* A named discount row carries a long label — "Buy One, Get One Free — SELANK
   10 MG" — beside a short figure. Only the label may wrap: a money string that
   breaks leaves its minus sign stranded on the line above, which reads as a
   different number. The label takes the slack; the figure never splits. */
.cart-row .lab { min-width: 0; }
.cart-row .val { white-space: nowrap; flex: 0 0 auto; }


/* checkout.css */
/* ============================================================================
   EMBER — checkout, confirmation, cancelled and the mock payment page (M5).

   Everything here is layout and hierarchy. There is no rule in this file that
   makes a figure look different depending on what it says, and that is
   deliberate: an unresolved shipping charge reads "Calculated at checkout" in
   the same row, the same weight and the same colour as a resolved one reads
   "$12.00". Styling the unknown case as a warning would be this stylesheet
   having an opinion about a number the server has not produced yet.

   The one exception is .ck__problem, which is a sentence the server sent
   *because* something is wrong, and which is marked as such.
   ========================================================================== */

/* ---- the checkout grid ------------------------------------------------- */
/* The summary sits beside the form on a wide screen and above it on a narrow
   one. Above, not below: the figures are what the customer is deciding about,
   and asking them to scroll past four fieldsets to find the total would put the
   decision after the work. */
.ck {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
}
.ck__form { display: grid; gap: 0; min-width: 0; }

.ck__set {
  border: 0; margin: 0; padding: clamp(1.4rem, 3vw, 2rem) 0;
  display: grid; gap: .9rem;
  border-top: 1px solid var(--hairline);
}
.ck__form > .ck__set:first-of-type { border-top: 0; padding-top: 0; }
.ck__set > legend { padding: 0; margin: 0 0 .2rem; }
.ck__set > .microcopy { margin: -.4rem 0 .4rem; max-width: 60ch; }

.rsform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rsform__row:has(> .ff--wide) { grid-template-columns: 1fr; }
.ff--wide { grid-column: 1 / -1; }

/* ---- field errors ------------------------------------------------------- */
/* Beside the input, in the oxide the rest of the site uses for "attend to
   this", and hidden until there is something to say. */
.ff__err {
  font-size: .76rem; line-height: 1.45; color: var(--oxide);
}
.ff__note {
  font-size: .7rem; color: var(--text-faint); justify-self: end;
  font-variant-numeric: tabular-nums;
}

.ck__errors {
  border: 1px solid color-mix(in srgb, var(--oxide) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--oxide) 5%, transparent);
  padding: 1rem 1.1rem; margin-bottom: 1.4rem;
}
.ck__errors .label { display: block; margin-bottom: .5rem; color: var(--oxide); }
.ck__errors ul { margin: 0; padding-left: 1.1rem; }
.ck__errors li { font-size: .84rem; line-height: 1.55; }

.ck__shipnotice {
  margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-muted);
  padding: .7rem .85rem; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius);
}

.ck__billing { display: grid; gap: .9rem; margin-top: .4rem; }

/* ---- the acknowledgement ------------------------------------------------ */
/* Given a boundary of its own, because §6 makes accepting it a condition of the
   sale rather than one more field. Its wording arrives from the server; this
   only decides where it sits. */
.ck__ack {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  margin-top: 1.4rem;
}
.ck__ack [data-ack-statements] { display: grid; gap: .7rem; }
.ck__ack .qual__item { align-items: flex-start; color: var(--text); }
.ck__ack [data-ack-record] { color: var(--text-faint); }

/* ---- pay ---------------------------------------------------------------- */
.ck__pay { display: grid; gap: .7rem; margin-top: 1.6rem; }
.ck__pay .btn { justify-content: center; }
.ck__pay .btn[disabled] { opacity: .45; pointer-events: none; }
.ck__pay .microcopy { max-width: 54ch; }
.ck__paystate { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-muted); }

/* ---- the summary aside -------------------------------------------------- */
.ck__summary { min-width: 0; }
.ck__state { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-muted); }
.ck__problems { margin-top: .9rem; display: grid; gap: .5rem; }
.ck__problem {
  margin: 0; font-size: .78rem; line-height: 1.5; color: var(--oxide);
  padding-left: .8rem; border-left: 2px solid color-mix(in srgb, var(--oxide) 45%, transparent);
}
.ck__links { display: grid; gap: .4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--hairline); }
.ck__links .link { font-size: .78rem; }
.ck__status { margin: 1rem 0 0; font-size: .9rem; color: var(--text); }

/* ---- order lines -------------------------------------------------------- */
/* One row per line: what it is, how many, what it came to. The strength is set
   in the muted colour beside the name rather than on its own line, because a
   line whose strength wrapped away from its product name is a line that can be
   misread as a different product. */
.cklines { display: grid; gap: .55rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--hairline); }
.ckline {
  display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem;
  align-items: baseline; font-size: .84rem;
}
.ckline__name { min-width: 0; }
.ckline__str { color: var(--text-muted); }
.ckline__qty { color: var(--text-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.ckline__amt { font-variant-numeric: tabular-nums; }
.ckline__disc { grid-column: 2 / -1; font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- the confirmed order ------------------------------------------------ */
.ordercard {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 44rem; margin: 0 auto;
}
.ordercard .label { display: block; margin: 1.4rem 0 .7rem; }
.ordercard__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border-strong);
}
.ordercard__head .label { margin: 0; }
.ordercard__number { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .02em; }
.ordercard__placed { margin-left: auto; font-size: .78rem; color: var(--text-muted); }
.ordercard__block .body { margin: 0; font-size: .88rem; line-height: 1.7; }
.ordercard .cartsum__ack { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }

/* ---- the mock payment page ---------------------------------------------- */
/* Visibly a development surface. The dashed boundary is the point: nobody
   should ever mistake this for a payment page, including in a screenshot. */
.mockpay {
  max-width: 30rem; margin: 2rem auto 0; text-align: left;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  display: grid; gap: 1rem;
}
.mockpay__actions { display: grid; gap: .6rem; }
.mockpay__actions .btn { justify-content: center; }
.mockpay__actions .linklike { justify-self: center; font-size: .8rem; }

/* ---- page heads --------------------------------------------------------- */
.pagehead--sm { padding-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.pagehead--sm .lead { max-width: 62ch; }

@media (max-width: 900px) {
  .ck { grid-template-columns: 1fr; }
  /* Summary first on a narrow screen — see the note at the top of the grid. */
  .ck__summary { order: -1; position: static; }
}
@media (max-width: 640px) {
  .rsform__row { grid-template-columns: 1fr; }
  .ordercard__placed { margin-left: 0; }
}


/* account.css */
/* ============================================================================
   account.css — the customer account page.

   Two panels and a list of orders. It borrows the card, the hairline and the
   numeric face the confirmation page already uses, because a customer arriving
   here from an order email should recognise the surface rather than meet a
   second design for the same information.

   It is deliberately not an admin table. An order here is a card with a name,
   a date, a status sentence, what was bought and which lot it came from —
   nothing dense, nothing sortable, no columns of internal state.
   ========================================================================== */

.acct { max-width: 44rem; margin: 0 auto; }

/* ---- the sign-in panel --------------------------------------------------- */

.acct__panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.acct__panel > .body { margin: .6rem 0 1.4rem; max-width: 46ch; }

.acct__form { display: grid; gap: 1rem; margin: 0; }
/* The submit sits under its field rather than beside it. One field and one
   button on a line looks like a search box, and this is not one. */
.acct__submit { justify-self: start; }

.acct__step {
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.acct__stephead { margin: 0 0 .4rem; }
.acct__step > .body { margin: 0 0 1.2rem; max-width: 46ch; }

/* Six digits, spaced, in the numeric face — so a code read off a phone is
   checked against the field at a glance. */
.acct__code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.2rem; letter-spacing: .35em; max-width: 11rem;
}

.acct__alts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: 1.2rem 0 0; font-size: .84rem;
}
.acct__alts .linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em;
}

/* One element carries both the confirmation and the refusal, so a page cannot
   show two contradictory messages at once. The tone is an attribute rather
   than a class because it is set by the script on every write. */
.acct__note {
  margin: 1.2rem 0 0; padding: .8rem 1rem;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-warm, var(--paper));
  font-size: .88rem; line-height: 1.6; color: var(--text-muted);
}
.acct__note[data-tone="error"] { border-left-color: var(--brass); color: var(--ink); }

/* ---- signed in ----------------------------------------------------------- */

.acct__id {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--border-strong);
}
.acct__email { font-size: .95rem; word-break: break-all; }
.acct__signout { margin-left: auto; }

.acct__orders-head { margin: 2rem 0 1rem; }
.acct__orders { display: grid; gap: 1.2rem; }

.acctorder {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.6vw, 1.8rem);
}
.acctorder__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--hairline);
}
.acctorder__number { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .02em; }
.acctorder__date { margin-left: auto; font-size: .78rem; color: var(--text-muted); }

.acctorder__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
  margin: .9rem 0 0; font-size: .9rem;
}
.acctorder__meta .label { color: var(--text-muted); }
.acctorder__total { margin-left: auto; }

.acctorder__lines { display: grid; gap: 1rem; margin-top: 1.2rem; }

.acctline {
  padding-top: 1rem; border-top: 1px solid var(--hairline);
}
.acctline:first-child { padding-top: 0; border-top: 0; }
.acctline__name { margin: 0; font-size: .98rem; }
.acctline__str { color: var(--text-muted); }
.acctline__qty { margin: .2rem 0 0; font-size: .82rem; color: var(--text-muted); }

/* The lot line. The number itself is the control, which is how Batch Testing
   already presents a lot, so a customer who has read one recognises the
   other. */
.acctlot { margin: .5rem 0 0; font-size: .86rem; color: var(--text-muted); }
.acctlot__no { color: var(--ink); letter-spacing: .02em; }
a.acctlot__no {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--brass); text-underline-offset: .22em;
}
a.acctlot__no:hover { color: var(--brass); }
/* Said beside the lot rather than instead of it: a withdrawn or deleted
   certificate does not erase which lot shipped. */
.acctlot__none { display: block; margin-top: .15rem; font-size: .78rem; }
.acctlot--none { font-style: italic; }

.acctorder__tracking {
  margin: 1.2rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--hairline); font-size: .86rem;
}
.acctorder__tracking .label { color: var(--text-muted); }

.acctempty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); text-align: center;
}
.acctempty .body { margin: 0 0 1.2rem; }

.acct__support { margin: 2.4rem auto 0; max-width: 44rem; font-size: .86rem; }

/* ---- narrow screens ------------------------------------------------------ */

@media (max-width: 640px) {
  .acctorder__date { margin-left: 0; width: 100%; }
  .acctorder__total { margin-left: 0; }
  .acct__signout { margin-left: 0; }
  .acct__submit { justify-self: stretch; width: 100%; }
  .acct__code { max-width: 100%; }
}


/* access-gate.css */
/* ============================================================================
   EMBER — pre-entry research access gate.

   Loaded late in the bundle so it can neutralise #site-shell without fighting
   specificity anywhere else. Nothing in this file styles the storefront: every
   selector is either `html.access-gated`, `#site-shell` or `.agate*`.

   The visual brief is a private research archive, not an age gate: near-black
   ground, cream type, one champagne hairline, editorial spacing, no red, no
   icons, no exclamation. Restraint is doing the work that a warning colour
   would otherwise be asked to do.
   ========================================================================== */

/* --- The closed state -----------------------------------------------------

   THE PAGE BEHIND THE GATE IS RENDERED. It used to be `display: none`, which
   made a gated visit a genuinely empty document with an overlay on top: no
   layout, no scroll height, nothing in the accessibility tree — and,
   unavoidably, no content. A document whose entire body is display:none has
   published nothing, and that was what every public compound page served to
   anybody arriving without a stored acceptance.

   The gate is now what it always LOOKED like: an opaque, full-viewport layer
   over a page that is really there. `.agate` below is `position: fixed;
   inset: 0` on a solid #0B0B0C ground at z-index 9999, and the next highest
   z-index anywhere in this build is 300, so what a visitor sees is
   pixel-for-pixel what they saw before. Nothing about the gate's appearance,
   wording, sequence or storage changes.

   WHAT IS NOT GIVEN BACK IS INTERACTION. Three independent layers, because the
   thing being withheld is the storefront and one mechanism is not enough:

     `inert` on the shell — set by access-gate.js as soon as the element
     exists, and in the served markup so it holds with JavaScript disabled —
     takes the whole subtree out of hit-testing, out of the tab order and out
     of the accessibility tree. It is the platform's own answer to exactly this
     problem, and unlike display:none it does not un-publish the content.

     `pointer-events: none` here is the fallback for a browser that has not
     implemented inert. A click still cannot reach the storefront.

     The focus trap in access-gate.js is the third layer, unchanged.

   `overflow: hidden` on the root keeps the page behind from scrolling and
   keeps a long gate panel from dragging it; the panel scrolls inside
   `.agate__scroll` instead.

   NOTHING HERE ASKS WHO IS REQUESTING THE PAGE. There is no user-agent test,
   no crawler branch, no second version of the document. Every visitor and
   every crawler receives one page, with the gate closed over it, and gets past
   the gate the same way: by completing it.

   The gate itself is `display:none` in the open state, so a verified visitor
   never has it in their document either. */
html.access-gated #site-shell { pointer-events: none; }
html.access-gated, html.access-gated body { overflow: hidden; height: 100%; }
html:not(.access-gated) .agate { display: none !important; }

/* --- Shell ---------------------------------------------------------------- */
.agate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0B0B0C;
  color: var(--ivory);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* A very quiet vertical gradient — the only ornament on the screen. It reads
   as depth rather than as decoration, which is the difference between an
   archive and a pop-up. */
.agate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(181,151,92,.07) 0%, rgba(11,11,12,0) 60%);
  pointer-events: none;
}

.agate__scroll {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vh, 5rem) var(--gutter);
}

/* --- Panel ---------------------------------------------------------------- */
.agate__panel {
  width: 100%;
  max-width: 620px;
  margin: auto;
  text-align: left;
}
.agate__panel[hidden] { display: none; }

.agate__mark {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}
.wordmark--agate { height: clamp(26px, 3.4vw, 34px); color: var(--ivory); }
.wordmark--agate svg { height: 100%; width: auto; }

.agate__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--soft-gold);
}

.agate__intro {
  margin: clamp(1.5rem, 3vh, 2.25rem) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(238,233,223,.78);
}

/* The single champagne hairline. It separates the statement of purpose from
   the things being confirmed, and it is the only rule on the screen. */
.agate__form {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(181,151,92,.28);
}

/* --- Checkboxes ----------------------------------------------------------- */
.agate__checks { display: grid; gap: 1.15rem; }
.agate__checks--final { margin-top: 1.75rem; }

.agate__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  cursor: pointer;
  /* 44px minimum target: the padding, not the box, is what the finger finds. */
  min-height: 44px;
  padding: .35rem 0;
  /* The containing block for the real input below, so that the invisible
     control lands on top of the box drawn for it rather than wherever the
     nearest positioned ancestor happened to be. */
  position: relative;
}

/* The real input stays in the document and stays operable — it is simply drawn
   underneath its own painted box. Replacing it with a div would have cost the
   semantics the brief asks for. */
.agate__check input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: .53rem;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  /* Above its own painted box. The box is decoration and says so with
     aria-hidden; if it sat on top it would swallow the pointer before the
     control ever saw it, which automation catches and a trackpad feels. */
  z-index: 1;
}
.agate__box {
  width: 22px;
  height: 22px;
  margin-top: .18rem;
  border: 1px solid rgba(238,233,223,.38);
  border-radius: 2px;
  background: transparent;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.agate__box::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #0B0B0C;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.agate__check input:checked ~ .agate__box {
  background: var(--soft-gold);
  border-color: var(--soft-gold);
}
.agate__check input:checked ~ .agate__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.agate__check:hover .agate__box { border-color: rgba(238,233,223,.62); }

.agate__checktext {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(238,233,223,.88);
}

/* --- Qualification -------------------------------------------------------- */
.agate__field { margin-top: 2rem; }
.agate__label {
  display: block;
  margin-bottom: .7rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(238,233,223,.88);
}
.agate__select {
  width: 100%;
  min-height: 48px;
  padding: .75rem 2.6rem .75rem .9rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ivory);
  background-color: rgba(238,233,223,.04);
  border: 1px solid rgba(238,233,223,.28);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(238,233,223,.62) 50%),
                    linear-gradient(135deg, rgba(238,233,223,.62) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* The dropdown list itself is painted by the operating system; these two rules
   are the only part of it a page is allowed to influence. */
.agate__select option { color: #111; background: #EEE9DF; }

/* --- Validation ----------------------------------------------------------- */

/* Not red. The brief rules out warning-red styling, and there is nothing
   dangerous here in any case: what this line reports is that a form is not
   finished yet. Champagne on near-black carries that without alarm, and the
   live region carries it to a screen reader whether or not colour is seen. */
.agate__errors {
  margin: 1.5rem 0 0;
  padding: .8rem 1rem;
  border-left: 2px solid var(--soft-gold);
  background: rgba(181,151,92,.08);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: rgba(238,233,223,.92);
}
.agate__errors[hidden] { display: none; }

/* --- Actions -------------------------------------------------------------- */
.agate__actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.agate__actions--single { justify-content: center; }

.agate__btn {
  flex: 1 1 0;
  min-height: 52px;
  padding: .95rem 1.5rem;
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.agate__btn--enter {
  background: var(--soft-gold);
  color: #0B0B0C;
  border-color: var(--soft-gold);
}
.agate__btn--enter:hover:not([disabled]) { background: #D2BB90; border-color: #D2BB90; }
.agate__btn--enter[disabled] {
  background: transparent;
  color: rgba(238,233,223,.34);
  border-color: rgba(238,233,223,.18);
  cursor: not-allowed;
}
.agate__btn--ghost {
  background: transparent;
  color: rgba(238,233,223,.78);
  border-color: rgba(238,233,223,.28);
}
.agate__btn--ghost:hover { color: var(--ivory); border-color: rgba(238,233,223,.55); }
.agate__actions--single .agate__btn { flex: 0 0 auto; min-width: 200px; }

/* --- Footnote ------------------------------------------------------------- */

/* Deliberately not the smallest type on the page. The brief asks for no tiny
   legal text, and an acknowledgement a visitor is agreeing to should not be set
   smaller than the things they are ticking. */
.agate__foot {
  margin: 1.75rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(238,233,223,.6);
}
.agate__foot a {
  color: rgba(238,233,223,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(181,151,92,.6);
}
.agate__foot a:hover { color: var(--ivory); text-decoration-color: var(--soft-gold); }

/* --- Focus ---------------------------------------------------------------- */

/* One visible focus treatment for everything in the gate, including the
   checkboxes — whose real input is transparent, so the ring is drawn on the
   painted box beside it instead. */
.agate :is(a, button, select):focus-visible,
.agate__check input:focus-visible ~ .agate__box {
  outline: 2px solid var(--soft-gold);
  outline-offset: 3px;
}

/* --- 390px and below ------------------------------------------------------ */
@media (max-width: 640px) {
  .agate__scroll {
    /* Top-aligned rather than centred: a centred panel taller than the viewport
       has its first line above the top edge. Bottom padding clears iOS browser
       chrome so ENTER EMBER is never underneath it. */
    align-items: flex-start;
    padding: 2.25rem 1.25rem calc(3rem + env(safe-area-inset-bottom, 0px));
  }
  .agate__panel { margin: 0 auto; }
  .agate__mark { margin-bottom: 2rem; }
  .wordmark--agate { height: 24px; }
  .agate__intro { font-size: .95rem; }
  .agate__actions {
    /* Reversed so ENTER EMBER sits above I DECLINE on a phone while keeping the
       brief's DOM order. Both remain full-width and well over 44px. */
    flex-direction: column-reverse;
    gap: .75rem;
  }
  .agate__btn { width: 100%; flex: 0 0 auto; }
  .agate__actions--single .agate__btn { width: 100%; min-width: 0; }
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .agate *, .agate *::after { transition: none !important; }
}


/* ember.css */
/* ============================================================================
   EMBER — brand layer. Loaded LAST. Overrides EMBER design tokens (so the whole
   token-driven site adopts EMBER's palette) and defines the approved homepage,
   nav, footer and product-card components. Product color worlds are appended
   at the end of this file (generated from the EMBER catalog).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ---- EMBER token overrides (cascade site-wide) ------------------------- */
:root{
  --warmwhite:#FBF8F1; --cream:#F4EEDE; --ivory:#F7F1E6; --surf:#FFFFFF;
  --ink:#211C15; --inkmut:#6A6255; --hair:#E7DECD; --hair-strong:#DBD0BC;
  --sage:#A6AD84; --sage-deep:#5E6647; --sage-pale:#E6E9D6; --sage-mid:#8A9070;
  --peach:#F1B68E; --apricot:#F7D3B4; --terra:#B5502E;

  /* remap EMBER's core tokens to EMBER so every downstream component follows */
  --paper:#FBF8F1; --bg:#FBF8F1; --surface:#FFFFFF; --surface-alt:#F4EEDE;
  --text:#211C15; --text-muted:#6A6255; --text-faint:#8A8172;
  --border:#E7DECD; --border-strong:#DBD0BC; --hairline:#E7DECD;
  --brass:#B5502E; --champagne:#B5502E; --champagne-ref:#B5502E; --soft-gold:#C4703F;
  --accent:#B5502E; --brass-soft:#C4703F;
  --on-dark:#F7F1E6; --on-dark-muted:#CDCBB6;
  --obsidian:#5E6647; --obsidian-2:#4C543B; --obsidian-ref:#5E6647; --charcoal:#4C543B;
  --scene-0:#4C543B; --scene-1:#5E6647; --mineral:#FBF8F1; --mineral-2:#F4EEDE;
  --stone:#8A8172; --warm-gray:#8A8172; --gray:#8A8172; --silver:#CDCBB6;
  --on-obsidian:#F7F1E6; --on-obsidian-muted:#CDCBB6;

  --font-sans:"Hanken Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-editorial:"Fraunces",Georgia,serif;
  --font-display:"Hanken Grotesk",system-ui,sans-serif;

  --radius-sm:10px; --radius:16px; --radius-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ewrap:1280px;
}

/* base */
body{background:var(--warmwhite);color:var(--ink);font-family:var(--font-sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
#site-shell{overflow-x:clip;}
img{max-width:100%;}
.ewrap{max-width:var(--ewrap);margin:0 auto;padding:0 34px;}
.eserif{font-family:var(--font-serif);}
.eeyebrow{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--inkmut);font-weight:600;}
.ebtn{font-family:var(--font-sans);font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;border-radius:100px;
  padding:15px 26px;border:1.5px solid var(--ink);cursor:pointer;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px;
  transition:transform .2s var(--ease),background .2s;background:transparent;}
.ebtn--ink{background:var(--ink);color:var(--ivory);}
.ebtn--terra{background:var(--terra);border-color:var(--terra);color:#fff;}
.ebtn:hover{transform:translateY(-2px);}
.elink{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--terra);padding-bottom:3px;}

/* ---- Announcement bar ---- */
.eanno{background:var(--ink);color:var(--warmwhite);text-align:center;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 12px;font-weight:600;}

/* ---- Nav (two-tier, sticky) ---- */
.enav{background:var(--ivory);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:100;}
.enav1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--ewrap);margin:0 auto;padding:16px 34px 8px;}
.enav__ruo{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--inkmut);font-weight:600;display:flex;align-items:center;gap:12px;}
.enav__brand{justify-self:center;display:flex;}
.enav__brand img{height:28px;width:auto;display:block;}
.enav__utils{justify-self:end;display:flex;gap:20px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;align-items:center;}
.enav__utils a,.enav__utils button{background:none;border:none;color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;display:inline-flex;align-items:center;gap:6px;}
.enav__menu{display:none;background:none;border:none;cursor:pointer;color:var(--ink);}
.enav2{display:flex;justify-content:center;gap:32px;padding:2px 0 14px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;}
.enav2 a{color:var(--ink);text-decoration:none;opacity:.85;padding-bottom:3px;border-bottom:1.5px solid transparent;transition:opacity .2s,border-color .2s;}
.enav2 a:hover,.enav2 a.is-active{opacity:1;border-color:var(--terra);}

/* ---- Hero ---- */
.ehero{position:relative;width:100%;overflow:hidden;background:var(--cream);}
.ehero__bg{display:block;width:100%;height:auto;}
.ehero__scrim{position:absolute;left:0;top:0;right:40%;bottom:0;z-index:1;
  background:linear-gradient(90deg,rgba(247,241,230,.62) 0%,rgba(247,241,230,.30) 55%,rgba(247,241,230,0) 100%);}
.ehero__copy{position:absolute;left:0;top:0;bottom:0;width:46%;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(30px,4vw,74px);}
.ehero__copy h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.3rem,4.2vw,4.1rem);line-height:1.0;letter-spacing:-.01em;margin:0;}
.ehero__copy h1 .b{display:block;color:var(--sage-mid);font-weight:400;font-style:italic;}
.ehero__rule{display:flex;align-items:center;gap:14px;margin:20px 0;max-width:400px;color:var(--inkmut);}
.ehero__rule::before,.ehero__rule::after{content:"";height:1px;background:currentColor;opacity:.35;flex:1;}
.ehero__rule span{font-size:.7rem;}
.ehero__bogo{font-family:var(--font-serif);color:var(--terra);font-weight:600;font-size:1.5rem;margin:0 0 8px;}
.ehero__sub{font-size:1rem;max-width:38ch;color:#3a352b;margin:0 0 26px;}
.ehero__cta{display:flex;gap:12px;flex-wrap:wrap;}

/* ---- Trust strip ---- */
.etrust{background:var(--sage-deep);color:var(--warmwhite);display:grid;grid-template-columns:1fr 1fr 1fr;}
.etrust>div{padding:24px clamp(24px,3vw,40px);border-left:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:flex-start;}
.etrust>div:first-child{border-left:none;}
.etrust svg{flex:none;margin-top:2px;}
.etrust h4{margin:0 0 3px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}
.etrust p{margin:0;font-size:.8rem;line-height:1.4;color:rgba(247,241,230,.82);}

/* ---- Sections ---- */
.esection{padding:clamp(4.5rem,8vw,8rem) 0;}
.esec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px;}
.esec-head h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.01em;margin:0;}

/* ---- Product grid + card ---- */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ecx{background:var(--surf);border-radius:26px;overflow:hidden;border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.ecx:hover{transform:translateY(-6px);box-shadow:0 30px 50px -26px rgba(50,40,30,.3);}
.ecx__media{background:radial-gradient(120% 90% at 50% 8%,color-mix(in srgb,var(--field) 55%,#fff),var(--field) 62%,color-mix(in srgb,var(--field) 80%,#000) 130%);
  aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:8px;}
.ecx__media img{height:88%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(40,30,20,.26));transition:transform .4s var(--ease);}
.ecx:hover .ecx__media img{transform:translateY(-6px) scale(1.03);}
.ecx__badge{position:absolute;top:16px;left:16px;background:rgba(33,28,21,.92);color:var(--warmwhite);font-size:.58rem;letter-spacing:.1em;font-weight:700;padding:6px 11px;border-radius:100px;}
.ecx__body{padding:20px;display:flex;flex-direction:column;flex:1;}
.ecx__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ecx__name{font-family:var(--font-serif);font-weight:500;font-size:1.35rem;margin:0;}
.ecx__name a{color:inherit;text-decoration:none;}
.ecx__price{font-weight:700;font-size:1.05rem;font-family:var(--font-sans);}
.ecx__desc{color:var(--inkmut);font-size:.8rem;margin:6px 0 16px;min-height:2.4em;}
.ecx__buy{display:flex;gap:10px;margin-top:auto;}
.ecx__sel{flex:1;position:relative;}
.ecx__sel select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--hair);border-radius:100px;padding:11px 34px 11px 16px;
  font-size:.82rem;font-weight:600;font-family:var(--font-sans);background:var(--surf);color:var(--ink);cursor:pointer;}
.ecx__sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.ecx__sel--single{display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);border-radius:100px;padding:11px 16px;font-size:.82rem;font-weight:600;}
.ecx__add{background:var(--ink);color:var(--warmwhite);border:none;border-radius:100px;padding:0 22px;font-weight:700;font-family:var(--font-sans);font-size:.85rem;cursor:pointer;white-space:nowrap;transition:background .2s;}
.ecx__add:hover{background:#000;}
.ecx__add--off{background:var(--hair-strong);color:var(--inkmut);cursor:not-allowed;}

/* ---- BOGO editorial ---- */
.ebogo{background:var(--sage);}
.ebogo-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;}
.ebogo-l h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.02;margin:10px 0 0;}
.ebogo-l .free{color:var(--terra);font-style:italic;}
.ebogo-l p{margin:18px 0 26px;max-width:42ch;font-size:1.02rem;color:#33301f;}
.esteps{display:flex;flex-direction:column;}
.estep{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;border-top:1px solid rgba(33,28,21,.16);align-items:baseline;}
.estep:last-child{border-bottom:1px solid rgba(33,28,21,.16);}
.estep b{font-family:var(--font-serif);font-size:1.35rem;font-weight:500;color:var(--terra);}
.estep h5{margin:0 0 5px;font-size:1.02rem;font-weight:700;}
.estep p{margin:0;font-size:.92rem;color:#33301f;}

/* ---- EMBER world ---- */
.eworld{background:var(--cream);}
/* THE COLUMNS ARE FRACTIONS, NOT PERCENTAGES, AND THAT IS A BUG FIX.

   `45% 55%` sums to the full content box and the gap is then added ON TOP, so
   this row was always exactly one gap — 40 to 70 pixels — wider than the
   element it lives in. This element IS the .ewrap, so there is nothing outside
   it to absorb the difference: the right-hand column hung off the end, and at
   viewport widths below the wrap's max-width it hung off the SCREEN. That is
   what was slicing the right vial and the circle behind it, and why the scene
   looked fine at 1440 (where the wrap is capped and the overflow lands in the
   page margin) and cut at 1280 (where it does not).

   `fr` distributes what is left AFTER the gap, which is what the ratio was
   always meant to express. `minmax(0,…)` stops a wide child re-inflating the
   column, which is the other half of the same trap. */
.eworld-in{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:clamp(40px,5vw,70px);align-items:center;}
.eworld-copy h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1.04;margin:12px 0 20px;}
.eworld-copy p{color:#3a352b;max-width:44ch;margin:0 0 16px;font-size:1.02rem;}
/* THE SCENE BEHIND THE THREE VIALS.

   It used to be four tinted rectangles with rounded corners and a drop shadow
   under each. Every one of those decisions is a UI decision: a card has a
   corner radius, a card has an elevation shadow, and a card sits ON something.
   Three product photographs in front of them read as a dashboard, not as a
   still life — the eye saw panels first and the objects second.

   So the shapes are drawn the way a printed page draws them. An oversized arch
   that runs off the bottom of the frame. A circle larger than it needs to be,
   cropped by the edge. A soft field with no describable edge at all. None of
   them has a corner, none of them has an elevation shadow, and none of them
   ends where the composition ends.

   OVERLAP IS THE POINT, and `multiply` is what makes it worth having. Two
   translucent panels stacked in normal blending give a milky grey; multiplied,
   peach over lavender gives a third real colour, the way two passes of ink do.
   `isolation:isolate` keeps that blending inside the scene so it cannot reach
   the section background.

   THE VIALS ARE NOT TOUCHED. Positions, sizes and z-order below are exactly
   what they were — only what is behind them, and what they stand on, changed. */
/* THE FRAME CROPS. Every field below reaches past an edge on purpose — that is
   what makes them fragments of something larger rather than objects placed on a
   canvas — and `overflow:hidden` is what turns "sticks out" into "is cropped".
   It is also load-bearing: without it those negative offsets are real overflow,
   and at 390px real overflow is a horizontal scrollbar.

   The vials are unaffected. The tallest sits 6% off the bottom of a box that is
   always taller than it is, at every breakpoint, and its shadows fall inside
   that margin. */
.eworld-scene{position:relative;height:clamp(360px,34vw,480px);isolation:isolate;overflow:hidden;}

/* Nothing here casts an elevation shadow. A shadow under a colour field is what
   made it a card; these are fields of colour in the plane of the page, and the
   only things in this composition that cast anything are the vials. */
.efield{position:absolute;mix-blend-mode:multiply;}

/* THE ARCH. Oversized, and wider and taller than it needs to be so the eye
   reads a fragment of something larger rather than an object placed on a
   canvas. The radius is elliptical (`/`) so the curve is a true arch and not a
   stadium: 50% across, 66% down.

   IT DOES NOT END — IT FADES. An arch's base is honestly flat, but a flat base
   drawn across the middle of a composition is a horizontal edge, and a
   horizontal edge under a rounded top is the tombstone this section used to
   have. The mask dissolves the bottom fifth into the cream, so the silhouette
   at the top is an arch and the bottom is light falloff. No corner survives. */
.efield.peach{left:0;bottom:0;height:98%;width:auto;aspect-ratio:.82;
  background:var(--field-glow);
  border-radius:50% 50% 0 0 / 66% 66% 0 0;opacity:.95;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);}

/* THE CIRCLE. Exactly as tall as the frame and bleeding off the right of it, so
   it is TANGENT at the top and bottom and cropped only where a magazine would
   crop it — at the outer margin.

   The tangency is the whole trick. This is the one hard-edged shape in the
   composition, and a hard edge cut by a frame leaves a straight line: cropping
   its top drew a horizontal rule across open cream, which is the card edge this
   section is supposed to have stopped having. A circle that just touches the
   boundary meets it at a point and leaves no line at all.

   IT IS PUSHED OFF THE RIGHT BY A FRACTION OF ITS OWN DIAMETER, and that is why
   the offset is a transform rather than `right`. A percentage on `right`
   resolves against the box's WIDTH while the circle's size comes from its
   HEIGHT — so on the wide, short box this section becomes when it restacks, the
   bleed grew as the circle shrank and what was left on screen was a sliver in
   the corner. `translateX` resolves against the element's own width, so the
   circle sits in the same relationship to itself at every breakpoint.

   The bleed is chosen so the leading arc falls in the gap between the middle
   and right vials rather than through the middle one. A boundary that passes
   behind an object is read as belonging to it — this arc was crossing the clear
   glass of the middle vial and showing through it, which put a line exactly
   where the eye lands. Seams belong between things.

   AND IT FADES BEFORE THE FRAME REACHES IT. Cropping only reads as a bleed when
   the boundary is the edge of the page; this scene is an island with cream on
   every side, so a shape cut off at its right edge reads as the wall of a panel
   instead — and with three of them cut, the whole composition acquired the
   rectangle it was supposed to have lost. The mask stop is keyed to the same
   46%: the visible portion of the circle is always the leftmost 54% of it, so
   the fade is placed inside that and holds at every breakpoint. */
.efield.lilac{right:0;top:0;height:100%;width:auto;aspect-ratio:1;
  transform:translateX(46%);
  background:var(--field-selank);border-radius:50%;opacity:.8;
  -webkit-mask-image:linear-gradient(to right,#000 40%,rgba(0,0,0,.72) 48%,transparent 54%);
  mask-image:linear-gradient(to right,#000 40%,rgba(0,0,0,.72) 48%,transparent 54%);}

/* THE SOFT FIELDS. Drawn as radial gradients rather than as blurred boxes,
   because a blurred box still has a straight edge — it is a soft rectangle, and
   at this scale the eye finds the line. A gradient has no boundary to find.

   Two of them: mint grounding the middle of the composition, and a faint peach
   echo on the left so that side has atmosphere rather than one flat plane.

   MINT GOES WHERE LAVENDER IS NOT. Multiply is what makes peach over lavender a
   real third colour, and it is also what makes mint over lavender a dull sage:
   they sit far enough apart on the wheel that multiplying them lands near grey.
   Pushed under the right-hand vial, the whole lower third turned murky.

   So it lives in the channel the circle does not reach — low and centred, under
   the middle vial, where the arch has already faded to cream. It grounds the
   object that would otherwise be standing on nothing.

   AND IT IS KEPT NARROW. At full width it ran four hundred pixels under the
   circle and multiply turned that overlap the colour of nothing — enough of the
   lower right went sage-grey that I first read it as a gutter in the background
   rather than as artwork. The two fields now meet at their edges, where the
   overlap is thin and low-alpha and reads as one ink laid over another, which
   is the point of blending them at all. */
/* Centred on the middle vial by its OWN width, for the same reason the circle
   is: `left` alone is a percentage of the box, the field's size comes from the
   box's height, and on a wide box the two drift apart — the mint slid out from
   under the vial it is there to ground. Anchoring the left edge near the vial
   and pulling back half the element's own width keeps them together at every
   shape of box.

   AND IT STOPS SHORT OF THE FLOOR. Hung far enough below the frame, a radial
   gradient is still half-opaque where the frame cuts it, and that cut is a
   horizontal line drawn under all three vials — the bottom edge of a panel.
   Raised until its falloff completes about twenty pixels above the boundary, it
   grounds the middle vial and touches nothing. */
.efield.aqua{left:46%;transform:translateX(-50%);
  bottom:-6%;height:78%;width:auto;aspect-ratio:1.05;border-radius:50%;
  background:radial-gradient(closest-side,rgba(159,207,200,.95),rgba(159,207,200,.52) 52%,rgba(159,207,200,0) 78%);}

.efield.peach::after{content:"";position:absolute;left:38%;bottom:6%;width:110%;height:78%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,172,158,.55),rgba(240,172,158,0) 72%);}

/* THE RING. The one drawn line among the fields, because an editorial layout
   wants a single linear element to sit against the washes. Unblended, so it
   reads as ink rather than as a fourth colour, and hung high where it breaks
   the arch's silhouette instead of hiding behind a vial. */
.efield.coral{left:29%;top:5%;height:22%;width:auto;aspect-ratio:1;
  background:transparent;border:1.5px solid var(--terra);border-radius:50%;
  mix-blend-mode:normal;opacity:.5;}

/* THE GROUND. Not a surface with an edge — a single soft horizon wash the vials
   sit into, so the composition has a floor without gaining a shelf. */
.eworld-scene::after{content:"";position:absolute;left:-4%;right:-4%;bottom:3%;height:22%;
  background:radial-gradient(58% 100% at 50% 100%,rgba(112,84,52,.2),rgba(112,84,52,0) 74%);
  filter:blur(14px);pointer-events:none;z-index:1;}

/* -- the vials: positions, sizes and order exactly as before ---------------- */
.eworldv{position:absolute;bottom:6%;z-index:5;}
/* The form shadow the object itself carries. Light is high and to the right, so
   it falls down and to the left; the two layers are a tight one for the glass
   and a wide one for the mass behind it. */
.eworldv img{display:block;position:relative;z-index:2;
  filter:drop-shadow(-6px 14px 12px rgba(60,44,26,.26)) drop-shadow(-12px 28px 30px rgba(60,44,26,.18));}

/* THE CONTACT SHADOW. Tight, dark and directly under the base — this is the one
   that makes an object look like it is touching something rather than floating
   above it. */
.eworldv .sh{position:absolute;bottom:-3%;left:50%;transform:translateX(-48%);
  width:62%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(48,34,18,.58),rgba(48,34,18,.16) 62%,rgba(48,34,18,0) 78%);
  filter:blur(5px);z-index:1;}

/* THE CAST SHADOW, thrown down-left from the same light as the form shadow.
   Long, soft and much fainter than the contact shadow: it describes the light,
   and the contact shadow describes the weight. */
.eworldv::after{content:"";position:absolute;bottom:-2%;left:50%;
  width:172%;height:13%;transform:translateX(-66%) rotate(-4deg);border-radius:50%;
  background:radial-gradient(closest-side,rgba(66,48,28,.3),rgba(66,48,28,0) 76%);
  filter:blur(13px);z-index:0;pointer-events:none;}

.eworldv.g{left:8%;z-index:6;} .eworldv.g img{height:clamp(300px,30vw,410px);}
.eworldv.s{left:42%;bottom:2%;z-index:5;} .eworldv.s img{height:clamp(270px,27vw,360px);}
.eworldv.m{right:6%;z-index:4;} .eworldv.m img{height:clamp(285px,28vw,380px);}

/* ---- Quality ---- */
.equal{background:var(--warmwhite);}
.eqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,54px);}
.eqitem .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.eqitem h4{font-family:var(--font-serif);font-weight:600;font-size:1.2rem;margin:0 0 8px;}
.eqitem p{margin:0;font-size:.94rem;color:var(--inkmut);max-width:34ch;}

/* ---- Research ---- */
.eresearch{background:var(--sage-pale);}
/* Auto-fit rather than a fixed three, because this row is now built from the
   product types the catalogue actually has: three of them plus "All" fills a
   desktop row exactly, and a type added or emptied re-flows instead of leaving
   one tile stranded on a line of its own. The tablet and mobile rules below
   still pin it to two and one. */
.echips{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.echip{border:1px solid rgba(33,28,21,.08);border-radius:22px;padding:30px 28px;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.echip:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(50,40,30,.34);}
.echip span{font-family:var(--font-serif);font-weight:500;font-size:1.4rem;}
.echip em{font-style:normal;color:var(--terra);font-size:1.2rem;}
/* The count. A browse tile that says how many products are behind it is a tile
   a customer can decide about before clicking; it sits between the label and
   the arrow, in the numeric face the prices use, and it never wraps. */
.echip i{font-style:normal;font-variant-numeric:tabular-nums;font-size:.78rem;letter-spacing:.1em;
  color:var(--inkmut);margin-left:auto;margin-right:14px;white-space:nowrap;}
.echip--all{border-color:rgba(33,28,21,.22);}

/* ---- Newsletter ---- */
.enews{background:var(--sage-deep);color:var(--warmwhite);text-align:center;}
.enews .eeyebrow{color:rgba(247,241,230,.6);}
.enews h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.1rem,3.6vw,3rem);margin:12px 0 0;}
.enews p{color:rgba(247,241,230,.82);max-width:46ch;margin:16px auto 30px;}
.eform{display:flex;gap:12px;max-width:500px;margin:0 auto;}
.eform input{flex:1;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;border-radius:100px;padding:16px 22px;font-family:var(--font-sans);font-size:.95rem;transition:border-color .2s,box-shadow .2s;}
.eform input::placeholder{color:rgba(247,241,230,.55);}
.eform input:focus{outline:none;border-color:var(--cream);box-shadow:0 0 0 3px rgba(244,238,222,.25);}
.eform button{background:var(--cream);color:var(--ink);border:none;border-radius:100px;padding:0 30px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;cursor:pointer;font-family:var(--font-sans);}
.eform button[disabled]{opacity:.6;cursor:progress;}
/* The line under the field does two jobs and must be legible doing either: it
   is the standing statement of what is stored and how to leave, and it is where
   the server's answer to a submission is printed. It keeps its own space so the
   panel does not jump height when the answer replaces the statement. */
.enews__note{font-size:.78rem;line-height:1.6;color:rgba(247,241,230,.62);max-width:52ch;margin:18px auto 0;min-height:2.5em;}
.enews__note a{color:rgba(247,241,230,.9);text-underline-offset:3px;}
.enews__note--ok{color:var(--cream);} .enews__note--err{color:var(--apricot);}

/* ---- Footer ---- */
.efoot{background:var(--ink);color:var(--warmwhite);padding:clamp(3.5rem,6vw,5.5rem) 0 28px;}
.efoot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px;}
.efoot .wmf{height:26px;margin-bottom:16px;}
.efoot .tag{font-size:.9rem;color:rgba(247,241,230,.7);max-width:32ch;line-height:1.55;}
.efoot h5{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,230,.5);margin:0 0 16px;font-weight:700;}
.efoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.efoot a{text-decoration:none;font-size:.9rem;color:rgba(247,241,230,.85);}
.efoot a:hover{color:#fff;}
.elegal{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:26px;}
.elegal p{max-width:680px;font-size:.76rem;line-height:1.7;color:rgba(247,241,230,.55);margin:0;}
.efoot-bot{margin-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.74rem;color:rgba(247,241,230,.55);}
.efoot-bot .r{display:flex;gap:22px;} .efoot-bot a{font-size:.74rem;color:rgba(247,241,230,.6);text-decoration:none;}

/* ---- Accessibility & motion ---- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,.ebtn:focus-visible,.echip:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .ecx:hover{transform:none;} .ecx:hover .ecx__media img{transform:none;}}

/* ---- Responsive: 3 / 2 / 1 columns at desktop / tablet / mobile ---- */
/* Tablet ~700–1099px → 2 columns; paired sections stack */
@media(max-width:1099px){
  .egrid{grid-template-columns:repeat(2,1fr);}
  .eworld-in{grid-template-columns:1fr;gap:34px;} .eworld-scene{order:2;}
  .echips{grid-template-columns:repeat(2,1fr);}
  .efoot-top{grid-template-columns:1.4fr 1fr 1fr;}
}
/* Mobile <700px → single column, every section in normal document flow */
@media(max-width:699px){
  .ewrap{padding:0 22px;}
  .enav1{grid-template-columns:auto 1fr auto;padding:14px 22px;}
  .enav__ruo{gap:0;} .enav__ruo span{display:none;} .enav__menu{display:inline-flex;padding:4px;} .enav__menu svg{width:22px;height:22px;display:block;} .enav__utils button.cartbtn svg{width:18px;height:18px;}
  .enav__utils button[data-search-open],.enav__utils a.util-acct{display:none;}
  .enav2{display:none;}
  .ehero{display:flex;flex-direction:column;}
  .ehero__bg{order:1;width:100%;} .ehero__scrim{display:none;}
  .ehero__copy{position:static;order:2;width:100%;padding:30px 22px 38px;background:var(--warmwhite);}
  .ehero__copy h1{font-size:2.4rem;}
  .ehero__cta{flex-wrap:wrap;}
  .eanno{font-size:.58rem;letter-spacing:.12em;}
  .etrust{grid-template-columns:1fr;}
  .etrust>div{border-left:none;border-top:1px solid rgba(255,255,255,.14);padding:22px;}
  .etrust>div:first-child{border-top:none;}
  .egrid{grid-template-columns:1fr;gap:22px;}
  .esection{padding:clamp(3rem,10vw,4rem) 0;}
  .esec-head{margin-bottom:24px;gap:12px;}
  .ebogo-in{grid-template-columns:1fr;gap:6px;}
  .eworld-scene{height:auto;aspect-ratio:1/1;max-height:440px;margin-top:6px;}
  /* THE SQUARE CROP NEEDS ITS OWN PROPORTIONS. The fields are sized from the
     scene's height so they hold their shape on a wide box; on a square one that
     same height is also the width, and shapes scaled to it swallow the frame —
     the circle alone came out wider than the box. Each is pulled back and
     pushed further off its edge, so the crop still reads as a fragment of a
     larger composition rather than as three colours filling a square. */
  .efield.peach{height:88%;left:-10%;}
  .efield.lilac{height:88%;right:0;top:0;transform:translateX(38%);}
  /* `left` + `transform` here too — setting `right` beside the base rule's
     `left` would stretch the element instead of moving it. */
  .efield.aqua{height:62%;left:48%;bottom:-6%;}
  .efield.coral{height:17%;left:29%;top:3%;}
  .eqgrid{grid-template-columns:1fr;gap:30px;}
  .echips{grid-template-columns:1fr;}
  .eform{flex-direction:column;} .eform button{padding:15px;}
  .efoot-top{grid-template-columns:1fr;gap:26px;}
  .efoot-bot{flex-direction:column;gap:10px;align-items:flex-start;}
}
:root{
  --glow:#C56B43; --tint-glow:#FAE6D7; --wash-glow:#F6D0B5; --field-glow:#F3C3A0;
  --klow:#7E4FA6; --tint-klow:#E7DAF2; --wash-klow:#D3BAE7; --field-klow:#C7A6E0;
  --rt:#3E6E9E; --tint-rt:#DDE8F4; --wash-rt:#C0D4EA; --field-rt:#AEC8E4;
  --trz:#B4432F; --tint-trz:#F7D2CA; --wash-trz:#F0AC9E; --field-trz:#EC9482;
  --nad:#A9761B; --tint-nad:#F7E5BD; --wash-nad:#F0CE85; --field-nad:#ECC062;
  --bpc-157:#6E7C46; --tint-bpc-157:#E6EBDB; --wash-bpc-157:#D1DABC; --field-bpc-157:#C4CFA9;
  --mots-c:#3E827A; --tint-mots-c:#D7EBE8; --wash-mots-c:#B4DAD4; --field-mots-c:#9FCFC8;
  --selank:#6C5EA0; --tint-selank:#EBE7F5; --wash-selank:#DAD3ED; --field-selank:#CFC6E8;
  --semax:#3F6FA0; --tint-semax:#E3EEF8; --wash-semax:#CBDFF3; --field-semax:#BCD6EF;
  --ta1:#546E39; --tint-ta1:#DAE5CE; --wash-ta1:#BBCEA4; --field-ta1:#A8C08A;
  --cjc-ipa:#2F7E75; --tint-cjc-ipa:#C9E7E4; --wash-cjc-ipa:#9BD3CC; --field-cjc-ipa:#7FC6BE;
  --sermorelin:#4E7A48; --tint-sermorelin:#DBE9D8; --wash-sermorelin:#BCD6B6; --field-sermorelin:#A9CBA2;
  --cagrilintide:#B25E31; --tint-cagrilintide:#F4DAC9; --wash-cagrilintide:#EBBA9B; --field-cagrilintide:#E5A67F;
  --tesamorelin:#7E8A45; --tint-tesamorelin:#EBF0D8; --wash-tesamorelin:#DAE3B7; --field-tesamorelin:#D0DBA3;
  --kisspeptin:#B85273; --tint-kisspeptin:#F8DFE6; --wash-kisspeptin:#F3C3D1; --field-kisspeptin:#EFB2C4;
  --epitalon:#8A527A; --tint-epitalon:#E9D7E1; --wash-epitalon:#D6B4C8; --field-epitalon:#CB9FB8;
  --wolverine:#4C6B49; --tint-wolverine:#D6E0D1; --wash-wolverine:#B3C5AA; --field-wolverine:#9DB592;
  --bac-water:#7C837C; --tint-bac-water:#F3F4F3; --wash-bac-water:#E9ECE8; --field-bac-water:#E3E6E2;
}

/* ============================================================================
   Final micro-polish + QA pass (mobile ≤699px only; desktop/tablet untouched)
   ========================================================================== */
@media(max-width:699px){
  /* 1. Product-card density — media ~10% shorter; vial proportions preserved,
     never cropped (object-fit: contain), label legible, colors/shadow intact. */
  .ecx__media{aspect-ratio:1 / 2.12;padding-bottom:0;}
  .ecx__media img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:92%;width:auto;max-width:88%;}
  .ecx:hover .ecx__media img{transform:translateX(-50%) translateY(-6px) scale(1.03);}
  /* 2. Hero: more air between CTAs and the trust strip */
  .ehero__copy{padding-bottom:48px;}
  /* 3. Small-text legibility (no heading changes, same type system) */
  .ecx__desc{font-size:.86rem;line-height:1.5;}
  .etrust p{font-size:.85rem;line-height:1.45;}
  .eeyebrow{font-size:.72rem;}
  .elegal p{font-size:.8rem;line-height:1.7;}
  .eqitem p{font-size:.95rem;}
  .efoot .tag{font-size:.92rem;}
  /* 4. Touch targets ≥44px (visible design stays compact) */
  .enav__utils{gap:16px;}
  .enav__utils .cartbtn{min-height:44px;align-items:center;}
  .enav__menu{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0;}
  .elink{display:inline-block;padding:12px 0;}
  .efoot ul{gap:2px;} .efoot a{display:inline-block;padding:11px 0;}
  .efoot-bot a{display:inline-block;padding:8px 0;}
}

/* ---- Interior page hero band (EMBER, replaces the previous cinematic .phero) ---- */
.ephero{background:var(--sage-pale);border-bottom:1px solid var(--hair);padding:clamp(3rem,6vw,5.5rem) 0 clamp(2.4rem,4vw,3.4rem);}
.ephero--cream{background:var(--cream);}
.ephero--sage{background:var(--sage);}
.ephero__inner{max-width:var(--ewrap);}
.ephero__title{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:500;line-height:1.03;letter-spacing:-.015em;margin:.4rem 0 0;color:var(--ink);}
.ephero__lead{font-size:1.05rem;max-width:60ch;color:#3a352b;margin:16px 0 0;line-height:1.55;}
.ephero__meta{margin-top:18px;color:var(--inkmut);}
@media(max-width:699px){ .ephero{padding:2.4rem 0 2rem;} .ephero__title{font-size:2rem;} }

/* ---- Homepage: the EMBER World signature line ------------------------------
   "Modern research, made beautiful." was the homepage headline until the hero
   became "A New Standard in Research." It is not deleted, because it still
   fits: it is brand language rather than a promise about the product, and this
   is the brand block. Set as a quiet serif signature so it reads as a sign-off
   under the two paragraphs, never as a second headline competing with the one
   above it. */
.eworld-sig{font-size:1.15rem;font-style:italic;font-weight:400;color:var(--sage-mid);margin:18px 0 22px;letter-spacing:-.01em;}

/* ============================================================================
   /our-process/ — the six-step editorial journey.

   COMPOSED FROM THE EXISTING SYSTEM, NOT BESIDE IT. Type comes from .eserif and
   .eeyebrow, rhythm from the .esection clamp, gutters from .ewrap, the link and
   button from .elink / .ebtn, and every colour is an EMBER token. Nothing here
   introduces a font, a radius, an easing curve or a palette value the rest of
   the site does not already use.

   THE MEDIA COLUMN IS BUILT FOR A PHOTOGRAPH THAT DOES NOT EXIST YET. It holds
   its own aspect ratio, so dropping an <img> into the slot changes nothing
   about the page's rhythm — the row does not reflow, the copy does not move,
   and no layout shift is introduced on the day the picture arrives. Until then
   it is a warm tonal field, which is a deliberate composition rather than an
   empty box waiting to be noticed.
   ========================================================================== */

/* --- Hero --- */
.oproc-hero{background:var(--cream);border-bottom:1px solid var(--hair);padding:clamp(4rem,8vw,7.5rem) 0 clamp(3rem,5vw,5rem);}
.oproc-hero__in{display:grid;justify-items:start;}
.oproc-hero__h{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin:.5rem 0 0;color:var(--ink);max-width:16ch;}
/* AN EXPLICIT WIDTH, NOT max-width. .ehero__rule is a flex row whose rule lines
   are flex:1 pseudo-elements, and the hero's grid is justify-items:start — so
   the element shrank to its content, both lines resolved to zero and the
   diamond rendered alone as what looked like a stray bullet under the
   headline. It needs a width to draw a rule inside. */
.oproc-hero__rule{width:min(320px,100%);margin:26px 0 0;}
.oproc-hero__lead{font-size:clamp(1.02rem,.95rem + .35vw,1.22rem);line-height:1.55;color:#3a352b;max-width:54ch;margin:22px 0 0;}

/* --- The steps --- */
.oproc-steps{list-style:none;margin:0;padding:0;}
.oproc-step{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,5.5rem);
  max-width:var(--ewrap);margin:0 auto;padding:clamp(3.5rem,7vw,6.5rem) 34px;
  border-bottom:1px solid var(--hair);
}
.oproc-step:last-child{border-bottom:none;}
/* Decorative alternation only. The <ol> keeps document order, so the reading
   order is 01 → 06 for a screen reader and on a phone whatever the columns do. */
.oproc-step--flip .oproc-step__media{order:2;}

.oproc-step__media{aspect-ratio:4 / 5;border-radius:var(--radius-lg);overflow:hidden;background:var(--cream);}
/* cover, never contain and never a stretch: the panel owns the aspect ratio and
   the photograph is cropped to fill it, so nothing is ever distorted. --focus is
   the escape hatch for a source whose subject sits off-centre — the panel turns
   landscape below 900px and crops a square source hard top and bottom, which is
   where a centred default loses a subject standing low in the frame. Unset
   means centred, which is what most of them want. */
.oproc-step__media img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);display:block;}
.oproc-step__media--tone{
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 62%),
    var(--tone,var(--cream));
  box-shadow:inset 0 0 0 1px var(--hair);
}

.oproc-step__copy{display:grid;justify-items:start;max-width:46ch;}
.oproc-step__n{font-family:var(--font-serif);font-size:.92rem;font-weight:600;letter-spacing:.22em;color:var(--terra);}
.oproc-step__h{font-size:clamp(1.75rem,3.1vw,2.6rem);font-weight:500;line-height:1.06;letter-spacing:-.015em;margin:14px 0 0;color:var(--ink);}
.oproc-step__p{font-size:1.02rem;line-height:1.62;color:#3a352b;margin:18px 0 0;}
.oproc-step__cta{margin-top:26px;}

/* --- Closing statement --- */
.oproc-close{background:var(--sage-deep);color:var(--ivory);padding:clamp(4.5rem,9vw,8rem) 0;}
.oproc-close__in{display:grid;justify-items:center;text-align:center;}
.oproc-close__big{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:500;font-style:italic;line-height:1.12;letter-spacing:-.02em;margin:0;max-width:20ch;color:var(--ivory);}
.oproc-close__sub{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--sage-pale);margin:28px 0 0;}
.oproc-close__cta{margin-top:38px;background:var(--ivory);color:var(--ink);border-color:var(--ivory);}

/* --- Tablet: the paired rows stop being pairs --- */
@media(max-width:899px){
  .oproc-step{grid-template-columns:1fr;gap:2rem;}
  /* The picture leads on a narrow screen for every step, so the rhythm is one
     consistent media-then-copy beat rather than an alternation nobody can see
     once the columns are stacked. */
  .oproc-step--flip .oproc-step__media{order:0;}
  .oproc-step__media{aspect-ratio:3 / 2;}
  .oproc-step__copy{max-width:60ch;}
}

/* --- Mobile --- */
@media(max-width:699px){
  .oproc-hero{padding:2.8rem 0 2.4rem;}
  .oproc-hero__h{font-size:2.1rem;max-width:none;}
  .oproc-hero__rule{margin-top:20px;}
  .oproc-hero__lead{font-size:1rem;margin-top:18px;}
  .oproc-step{padding:2.8rem 22px;gap:1.6rem;}
  .oproc-step__media{aspect-ratio:5 / 4;border-radius:var(--radius);}
  .oproc-step__h{font-size:1.65rem;}
  .oproc-step__p{font-size:.98rem;margin-top:14px;}
  .oproc-close{padding:3.4rem 0;}
  .oproc-close__big{font-size:1.75rem;max-width:none;}
  .oproc-close__sub{margin-top:22px;}
  .oproc-close__cta{margin-top:30px;}
}


/* trust.css */
/* ============================================================================
   EMBER — trust layer. Loaded last, after ember.css.

   This file adds no colours, no fonts, no button shapes and no spacing scale.
   Every value below resolves to a token already defined in tokens.css or
   remapped by ember.css (--ink, --inkmut, --hair, --terra, --sage-deep,
   --warmwhite, --cream, --ivory, --surf). The trust sections are deliberately
   built from the same surfaces, hairlines and type scale as the pages they sit
   in, so that "proof" reads as part of the product rather than as a badge
   stapled onto it.

   No flags. No shields. No seals. No red/white/blue. A pending state is a
   hairline and muted ink, never a warning colour — a record that is honestly
   incomplete is not an error.
   ========================================================================== */

/* ---- Status flags ----------------------------------------------------- */
.tflag{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:100px;border:1px solid var(--hair-strong);color:var(--inkmut);white-space:nowrap;}
.tflag--ok{border-color:var(--sage-mid);color:var(--sage-deep);}
.tflag--pending{border-style:dashed;}
.tflag--stated{border-color:var(--hair);color:var(--inkmut);opacity:.9;}

/* ---- Homepage trust strip: 4-up variant ------------------------------- */
/* The approved strip is a 3-column band. A fourth commitment gets a fourth
   column at the same rhythm; nothing else about the band changes. */
.etrust--4{grid-template-columns:repeat(4,1fr);}
.etrust--2{grid-template-columns:repeat(2,1fr);}
.etrust--1{grid-template-columns:1fr;}
@media (max-width:1180px){
  .etrust--4{grid-template-columns:repeat(2,1fr);}
  .etrust--4>div:nth-child(3){border-left:none;}
  .etrust--4>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);}
}
@media (max-width:1024px){
  .etrust--4,.etrust--2{grid-template-columns:1fr;}
  .etrust--4>div,.etrust--2>div{border-left:none;border-top:1px solid rgba(255,255,255,.14);}
  .etrust--4>div:first-child,.etrust--2>div:first-child{border-top:none;}
}

/* ---- Homepage: proof section ------------------------------------------ */
.eproof{background:var(--cream);}
.eproof__head{max-width:60ch;margin-bottom:clamp(30px,4vw,52px);}
.eproof__head h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.01em;margin:.5rem 0 0;}
.eproof__lead{margin:1rem 0 0;font-size:1.02rem;line-height:1.6;color:var(--inkmut);max-width:56ch;}
/* Three columns, because the section now prints three proof points and the
   fourth already has a section of its own. `auto-fit` rather than a hard three
   so that trust.json deciding to show two does not leave a gap. */
.eproof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(22px,3vw,40px);}
.eproof__foot{margin-top:clamp(26px,3vw,40px);}
.eproof__item{border-top:1.5px solid var(--ink);padding-top:18px;}
.eproof__h{font-family:var(--font-serif);font-weight:600;font-size:1.35rem;margin:0 0 10px;color:var(--ink);}
.eproof__p{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--inkmut);}
.eproof__link{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--terra);padding-bottom:3px;}
@media (max-width:1024px){.eproof__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.eproof__grid{grid-template-columns:1fr;gap:26px;}}

/* ---- Homepage: origin feature ----------------------------------------- */
.eorigin__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start;}
.eorigin__copy h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.01em;margin:.5rem 0 0;}
.eorigin__lead{margin:1.1rem 0 0;font-size:1rem;line-height:1.65;color:var(--inkmut);max-width:52ch;}
.eorigin__note{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:var(--inkmut);
  border-left:2px solid var(--hair-strong);padding-left:14px;max-width:52ch;}
.eorigin__copy .elink{display:inline-block;margin-top:1.6rem;}
.eorigin__list{margin:0;border-top:1px solid var(--hair);}
.eorigin__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--hair);margin:0;}
.eorigin__row dt{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);}
.eorigin__row dd{margin:0;font-size:.95rem;color:var(--ink);text-align:right;}
.eorigin__row--pending dd{color:var(--inkmut);}
@media (max-width:900px){.eorigin__in{grid-template-columns:1fr;}}

/* The restrained state: one statement, one link, generous quiet around both.
   It is deliberately not a card and not a panel — a bordered box would read as
   a notice, and this is a standing operating rule rather than an apology. */
.eorigin--brief{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.eorigin__brief{max-width:74ch;}
.eorigin__brief h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.01em;margin:.5rem 0 0;}
.eorigin__stmt{margin:1.3rem 0 1.7rem;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;
  color:var(--inkmut);max-width:58ch;}

/* The confirmed state: the claim carried plainly, at the weight the rest of the
   homepage uses for a section statement. Same surface, same type scale, same
   rules — the claim earns its emphasis from its position, not from decoration. */
.eorigin--made{background:var(--cream);}
.eorigin__made{max-width:78ch;}
.eorigin__made h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2rem,3.8vw,3.1rem);
  line-height:1.04;letter-spacing:-.01em;margin:.5rem 0 0;}
.eorigin__madesub{margin:.4rem 0 0;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.1;color:var(--inkmut);}
.eorigin__madebody{margin:1.3rem 0 0;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.62;
  color:var(--inkmut);max-width:62ch;}
.eorigin__row{list-style:none;margin:1.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.eorigin__row li{position:relative;padding-left:17px;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--ink);}
.eorigin__row li::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;
  border-radius:50%;background:var(--terra);}
.eorigin__qual{margin:1.4rem 0 1.6rem;font-size:.88rem;line-height:1.6;color:var(--inkmut);max-width:56ch;}

/* ---- Standards: what Made in the USA means ---------------------------------- */
.mium{background:var(--cream);}
.mium__head{max-width:62ch;margin-bottom:clamp(24px,3.4vw,40px);}
.mium__head h2{margin:.5rem 0 0;}
.mium__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);}
.mium__block{border-top:1.5px solid var(--ink);padding-top:16px;}
.mium__h{font-family:var(--font-serif);font-weight:600;font-size:1.2rem;margin:0 0 8px;}
.mium__p{margin:0 0 10px;font-size:.95rem;line-height:1.62;color:var(--inkmut);}
.mium__p--lead{font-size:1.02rem;color:var(--ink);}
.mium__p--tight{font-size:.89rem;}
.mium__pending{margin:12px 0 0;font-size:.86rem;line-height:1.55;color:var(--inkmut);}
.mium__pending .tflag{margin-right:8px;vertical-align:1px;}
@media (max-width:960px){.mium__grid{grid-template-columns:1fr;}}

/* ---- PDP: Made in the USA / Testing ----------------------------------------- */
.tmade{padding:clamp(2.6rem,5vw,4.2rem) 0;background:var(--cream);}
.tmade--testing{background:var(--warmwhite);border-top:1px solid var(--hair);}
.tmade__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,4vw,60px);align-items:start;}
.tmade__in h2{margin:.5rem 0 0;}
.tmade__p{margin:0;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.62;color:var(--ink);max-width:60ch;}
.tmade__scope{margin:.9rem 0 0;font-size:.88rem;line-height:1.55;color:var(--inkmut);}
@media (max-width:820px){.tmade__in{grid-template-columns:1fr;}}

/* ---- Homepage: process timeline --------------------------------------- */
.eprocess__lead{margin:0 0 clamp(28px,4vw,44px);font-size:1rem;line-height:1.65;color:var(--inkmut);max-width:62ch;}
.etimeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,44px) clamp(24px,4vw,56px);counter-reset:none;}
.etimeline__step{display:flex;gap:16px;align-items:flex-start;}
.etimeline__n{flex:none;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--terra);
  padding-top:2px;min-width:26px;}
.etimeline__step h4{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;margin:0 0 6px;color:var(--ink);}
.etimeline__step p{margin:0;font-size:.9rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:1024px){.etimeline{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.etimeline{grid-template-columns:1fr;gap:24px;}}

/* ---- Homepage: support ------------------------------------------------ */
.esupport{background:var(--ink);color:var(--ivory);}
.esupport__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center;}
.esupport .eeyebrow{color:rgba(247,241,230,.62);}
.esupport h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.08;margin:.6rem 0 0;color:var(--ivory);}
.esupport__p{margin:1.1rem 0 0;font-size:1rem;line-height:1.65;color:rgba(247,241,230,.76);max-width:54ch;}
.esupport__card{border:1px solid rgba(247,241,230,.2);padding:clamp(22px,3vw,34px);display:flex;
  flex-direction:column;align-items:flex-start;gap:12px;}
.esupport__mail{font-family:var(--font-serif);font-size:clamp(1.15rem,2vw,1.6rem);color:var(--ivory);
  text-decoration:none;border-bottom:1.5px solid var(--terra);padding-bottom:4px;word-break:break-word;}
.esupport__mail:hover{color:#fff;}
.esupport__card .elink{color:var(--ivory);}
.esupport__faq{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  text-decoration:none;color:rgba(247,241,230,.7);}
.esupport__faq:hover{color:var(--ivory);}
@media (max-width:900px){.esupport__in{grid-template-columns:1fr;}}

/* ---- Footer additions -------------------------------------------------- */
.efoot-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:20px 0;
  border-top:1px solid rgba(247,241,230,.14);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:rgba(247,241,230,.72);}
.efoot-trust i{font-style:normal;color:rgba(247,241,230,.34);}
.efoot-mail{display:inline-block;margin-top:14px;font-size:.85rem;color:rgba(247,241,230,.82);
  text-decoration:none;border-bottom:1px solid rgba(247,241,230,.3);padding-bottom:2px;word-break:break-word;}
.efoot-mail:hover{color:#fff;}

/* ---- Product card trust row -------------------------------------------- */
.ctrust{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px 6px;}
.ctrust li{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--inkmut);border:1px solid var(--hair);border-radius:100px;padding:3px 8px;white-space:nowrap;}

/* ---- Shop explainer ----------------------------------------------------- */
.texplain{border:1px solid var(--hair);padding:clamp(20px,3vw,30px);margin:0 0 26px;background:var(--surf);}
.texplain__list{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:8px 22px;}
.texplain__list li{position:relative;padding-left:16px;font-size:.9rem;color:var(--ink);}
.texplain__list li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--terra);}
.texplain__note{margin:16px 0 0;font-size:.85rem;line-height:1.6;color:var(--inkmut);max-width:78ch;}
@media (max-width:820px){.texplain__list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.texplain__list{grid-template-columns:1fr;}}

/* ---- PDP compact trust row ---------------------------------------------- */
.ptrust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(247,241,230,.16);
  display:flex;flex-wrap:wrap;gap:8px 18px;}
.ptrust__i{position:relative;padding-left:16px;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;color:rgba(247,241,230,.8);}
.ptrust__i::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:5px;
  border-radius:50%;background:var(--terra);}

/* ---- PDP origin record --------------------------------------------------- */
.trec{padding:clamp(3rem,6vw,5rem) 0;background:var(--cream);}
.trec__head{max-width:62ch;margin-bottom:26px;}
.trec__head h2{margin:.5rem 0 0;}
.trec__lead{margin:.9rem 0 0;font-size:1rem;line-height:1.65;color:var(--inkmut);}
.trec__grid{margin:0;border-top:1px solid var(--hair-strong);}
.trec__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 2px;border-bottom:1px solid var(--hair);margin:0;}
.trec__row dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);}
.trec__row dd{margin:0;font-size:.96rem;color:var(--ink);text-align:right;}
.trec__row--verify{border-bottom:none;border-top:1px solid var(--hair-strong);margin-top:2px;}
.trec__note{margin:18px 0 0;font-size:.88rem;line-height:1.65;color:var(--inkmut);max-width:82ch;}
@media (max-width:560px){
  .trec__row{flex-direction:column;gap:6px;}
  .trec__row dd{text-align:left;}
}

/* ---- PDP: what the record confirms --------------------------------------- */
.tconf{padding:clamp(2.6rem,5vw,4rem) 0;}
.tconf h2{margin:.5rem 0 0;}
.tconf__list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--hair);}
.tconf__item{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--hair);}
.tconf__mark{font-size:.95rem;line-height:1;color:var(--sage-deep);}
.tconf__item--no .tconf__mark{color:var(--inkmut);}
.tconf__h{font-size:.95rem;color:var(--ink);}
.tconf__v{font-size:.88rem;color:var(--inkmut);text-align:right;}
.tconf__note{margin:16px 0 0;font-size:.86rem;color:var(--inkmut);}
@media (max-width:600px){
  .tconf__item{grid-template-columns:22px 1fr;}
  .tconf__v{grid-column:2;text-align:left;}
}

/* ---- PDP support --------------------------------------------------------- */
.tsupport{padding:clamp(2.4rem,4vw,3.4rem) 0;background:var(--ink);color:var(--ivory);}
.tsupport__in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,60px);align-items:center;}
.tsupport .eyebrow{color:rgba(247,241,230,.6);}
.tsupport h2{margin:.5rem 0 0;color:var(--ivory);}
.tsupport__p{margin:.8rem 0 0;font-size:.96rem;line-height:1.65;color:rgba(247,241,230,.76);max-width:56ch;}
.tsupport__act{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.tsupport__mail{font-family:var(--font-serif);font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--ivory);
  text-decoration:none;border-bottom:1.5px solid var(--terra);padding-bottom:3px;word-break:break-word;}
.tsupport__act .link{color:rgba(247,241,230,.8);}
@media (max-width:820px){.tsupport__in{grid-template-columns:1fr;}}

/* ---- PDP batch pending block --------------------------------------------- */
.batch__pending{display:flex;flex-direction:column;gap:9px;}
.batch__pending .batch__note{margin:0;line-height:1.6;}
.batch__pending strong{font-weight:600;}

/* ---- Documentation state legend ------------------------------------------ */
.dstates{border:1px solid var(--hair);padding:clamp(18px,2.6vw,26px);margin:0 0 26px;background:var(--surf);}
.dstates__grid{margin:14px 0 0;}
.dstates__row{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--hair);}
.dstates__row:first-child{border-top:none;}
.dstates__row dt{margin:0;}
.dstates__row dd{margin:0;font-size:.9rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:640px){.dstates__row{grid-template-columns:1fr;gap:6px;}}

/* ---- Documentation process ------------------------------------------------ */
.dproc__head{max-width:70ch;margin-bottom:26px;}
.dproc__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,38px);}
.dproc__step{display:flex;gap:14px;align-items:flex-start;border-top:1.5px solid var(--ink);padding-top:14px;}
.dproc__n{flex:none;font-size:.8rem;font-weight:700;color:var(--terra);}
.dproc__step h4{font-family:var(--font-serif);font-weight:600;font-size:1.05rem;margin:0 0 5px;}
.dproc__step p{margin:0;font-size:.88rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:1024px){.dproc__steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.dproc__steps{grid-template-columns:1fr;}}

/* ---- Documentation card pending ------------------------------------------- */
.doccard__pending{display:flex;flex-direction:column;gap:7px;width:100%;}
.doccard__pending .doccard__note{margin:0;font-size:.86rem;line-height:1.55;color:var(--inkmut);}
/* The label treatment applies wherever a note carries one, not only inside the
   pending block it was first written for — the dual-lab foot carries the same
   label/sentence pairs and without this they run together. */
.doccard__pending .k,
.doccard__foot .doccard__note .k,
.doccard__slot .doccard__note .k{display:inline-block;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--ink);margin-right:7px;}

/* ---- Standards: the EMBER Trust Standard ----------------------------------- */
.tstd{background:var(--cream);}
.tstd__head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px);}
.tstd__head h2{margin:.5rem 0 0;}
.tstd__lead{margin:.9rem 0 0;font-size:1.02rem;line-height:1.65;color:var(--inkmut);}
.tstd__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px);}
.tstd__item{border-top:1.5px solid var(--ink);padding-top:14px;}
.tstd__n{display:block;font-size:.72rem;font-weight:700;color:var(--terra);margin-bottom:8px;}
.tstd__h{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;margin:0 0 7px;}
.tstd__p{margin:0;font-size:.89rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:1024px){.tstd__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tstd__grid{grid-template-columns:1fr;}}

/* ---- About: built to be checked -------------------------------------------- */
.bchk__head{max-width:62ch;margin-bottom:clamp(24px,3.4vw,38px);}
.bchk__head h2{margin:.5rem 0 0;}
.bchk__lead{margin:.9rem 0 0;font-size:1.02rem;line-height:1.65;color:var(--inkmut);}
.bchk__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,38px);}
.bchk__item{border-top:1px solid var(--hair-strong);padding-top:14px;}
.bchk__h{font-family:var(--font-serif);font-weight:600;font-size:1.1rem;margin:0 0 7px;}
.bchk__p{margin:0;font-size:.9rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:900px){.bchk__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.bchk__grid{grid-template-columns:1fr;}}

/* ---- Support page: direct address + FAQ preview ----------------------------- */
.sdirect{display:grid;grid-template-columns:auto 1fr;gap:14px 34px;align-items:center;
  border:1px solid var(--hair);padding:clamp(18px,2.6vw,26px);margin:0 0 22px;background:var(--surf);}
.sdirect__mail{display:block;margin-top:6px;font-family:var(--font-serif);font-size:clamp(1.1rem,1.9vw,1.45rem);
  color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--terra);padding-bottom:3px;word-break:break-word;}
.sdirect__p{margin:0;font-size:.9rem;line-height:1.6;color:var(--inkmut);}
@media (max-width:760px){.sdirect{grid-template-columns:1fr;}}

.sfaq__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px;}
.sfaq__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.sfaq__item{border-bottom:1px solid var(--hair);}
.sfaq__item a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 2px;text-decoration:none;color:var(--ink);}
.sfaq__item a:hover .sfaq__h{color:var(--terra);}
.sfaq__h{font-size:.95rem;font-weight:600;}
.sfaq__p{font-size:.86rem;color:var(--inkmut);text-align:right;}
@media (max-width:640px){
  .sfaq__item a{flex-direction:column;gap:4px;}
  .sfaq__p{text-align:left;}
}

/* ---- FAQ page --------------------------------------------------------------- */
.faq{display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,5vw,72px);align-items:start;}
.faq__toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;}
.faq__toc .eyebrow{margin-bottom:10px;}
.faq__toc a{font-size:.9rem;color:var(--inkmut);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;}
.faq__toc a:hover{color:var(--ink);border-bottom-color:var(--hair-strong);}
.faq__toc a .numeric{color:var(--terra);font-size:.74rem;font-weight:700;margin-right:7px;}
.faq__tocmail{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);}
.faq__tocmail a{display:block;margin-top:6px;font-size:.86rem;color:var(--ink);word-break:break-word;
  border-bottom:1px solid var(--terra);padding-bottom:2px;}

.faq__sec{margin-bottom:clamp(38px,5vw,64px);scroll-margin-top:110px;}
.faq__sechead{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1.5px solid var(--ink);}
.faq__n{flex:none;font-size:.8rem;font-weight:700;color:var(--terra);padding-top:4px;}
.faq__sechead h2{margin:0;}
.faq__seclead{margin:.5rem 0 0;font-size:.95rem;line-height:1.6;color:var(--inkmut);max-width:66ch;}
.faq__item{border-bottom:1px solid var(--hair);scroll-margin-top:110px;}
.faq__q{margin:0;font-size:1rem;font-weight:500;}
.faq__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;padding:15px 2px;text-align:left;cursor:pointer;color:var(--ink);
  font-family:inherit;font-size:1rem;font-weight:500;line-height:1.45;}
.faq__btn:hover{color:var(--terra);}
.faq__chev{flex:none;display:inline-flex;color:var(--inkmut);transition:transform .22s ease;}
.faq__btn[aria-expanded="true"] .faq__chev{transform:rotate(180deg);}
.faq__panel .acc__inner{padding:0 2px 18px;}
.faq__a{margin:0;font-size:.95rem;line-height:1.7;color:var(--inkmut);max-width:76ch;}
.faq__link{margin:12px 0 0;}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;}
  .faq__toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 16px;
    padding-bottom:18px;border-bottom:1px solid var(--hair);}
  .faq__toc .eyebrow{width:100%;margin-bottom:4px;}
  .faq__tocmail{width:100%;margin-top:10px;}
}

.faq__close{border:1px solid var(--hair);padding:clamp(22px,3.4vw,34px);text-align:center;background:var(--surf);}
.faq__closep{margin:.7rem auto 1.1rem;font-size:.98rem;line-height:1.65;color:var(--inkmut);max-width:62ch;}
.faq__mail{display:inline-block;font-family:var(--font-serif);font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--terra);
  padding-bottom:3px;margin-bottom:14px;word-break:break-word;}
.faq__close .link{display:block;}

/* ==========================================================================
   THE RELEASE RULE — CURRENT COA. EVERY RELEASED LOT.

   These rules add class names and never redefine an approved one. Nothing here
   is a redesign: the four release states reuse the existing status, card and
   panel systems, and the only new shapes are the homepage trust block, the
   Standards release standard, the Testing page policy line and the product
   page release panel.
   ========================================================================== */

/* ---- The four release states, in the one status component --------------
   Available is the only state with a live colour. The other three are
   deliberately quiet: an unreleased product is a statement of fact, not a
   warning, and colouring it red would read as a fault rather than as a stage
   in a documented process. */
.pstat__item--available .pstat__dot { background:#4A7A5C; }
.pstat__item--documentation_review .pstat__dot { background:var(--champagne,#C6A87C); }
.pstat__item--coming_soon .pstat__dot,
.pstat__item--archived .pstat__dot { background:var(--warm-gray,#9A948B); }
.pstat__item--detail { color:var(--inkmut); }
.pstat--dark .pstat__item--detail { color:rgba(238,233,223,.72); }

/* ---- The homepage trust block ---------------------------------------- */
.erelease{background:var(--surf,#F2EDE4);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.erelease__in{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px);}
.erelease__head{max-width:62ch;}
.erelease__short{margin:.5rem 0 0;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.04;letter-spacing:-.01em;}
.erelease__body{margin:1rem 0 0;font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.6;color:var(--inkmut);}
.erelease__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;}
.erelease__row li{position:relative;padding-left:18px;font-size:.9rem;line-height:1.5;color:var(--ink);}
.erelease__row li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;
  border:1px solid var(--terra);border-radius:50%;}
.erelease__foot{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:4px;
  border-top:1px solid var(--hair);}

/* ---- Standards: the release standard --------------------------------- */
.rstd{scroll-margin-top:110px;}
.rstd__head{max-width:70ch;margin-bottom:clamp(24px,3.4vw,38px);}
.rstd__lead{margin:.8rem 0 0;font-size:1rem;line-height:1.65;color:var(--inkmut);}
.rstd__steps{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--hair);}
.rstd__step{display:flex;gap:clamp(16px,2.6vw,30px);align-items:flex-start;
  padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid var(--hair);}
.rstd__n{flex:none;font-size:.8rem;font-weight:700;color:var(--terra);padding-top:3px;min-width:2.2em;}
.rstd__h{margin:0;font-size:1.02rem;font-weight:500;line-height:1.35;}
.rstd__p{margin:.4rem 0 0;font-size:.94rem;line-height:1.65;color:var(--inkmut);max-width:74ch;}
.rstd__stmt{margin:clamp(20px,2.8vw,30px) 0 0;font-family:var(--font-serif);
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.5;color:var(--ink);max-width:62ch;}

/* ---- Testing: the page-level policy ---------------------------------- */
.rpolicy{border:1px solid var(--ink);padding:clamp(18px,2.6vw,28px);background:var(--surf,#F2EDE4);}
.rpolicy__p{margin:.6rem 0 0;font-size:1rem;line-height:1.65;color:var(--ink);max-width:78ch;}
.rpolicy__alt{margin:.6rem 0 0;font-size:.92rem;line-height:1.6;color:var(--inkmut);}

/* ---- Product page: the release panel --------------------------------- */
.prel{padding:clamp(30px,4.4vw,56px) 0;border-top:1px solid var(--hair);scroll-margin-top:110px;}
.prel__head{margin-bottom:clamp(14px,2vw,20px);}
.prel__head h2{margin:.4rem 0 0;}
.prel__not{font-family:var(--font-serif);letter-spacing:.02em;}
.prel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border-top:1px solid var(--hair);margin:0 0 clamp(16px,2.2vw,22px);}
.prel__grid > div{padding:14px 0;border-bottom:1px solid var(--hair);padding-right:20px;}
.prel__grid dt{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--inkmut);}
.prel__grid dd{margin:.35rem 0 0;font-size:.95rem;line-height:1.45;color:var(--ink);}
.prel__stmt{margin:0;font-size:.98rem;line-height:1.68;color:var(--ink);max-width:74ch;}
.prel__note,.prel__rule{margin:.7rem 0 0;font-size:.92rem;line-height:1.65;color:var(--inkmut);max-width:74ch;}
.prel__foot{margin-top:clamp(14px,2vw,20px);}

/* ---- Product page: the panel that replaces the purchase controls ------ */
.pbuy--unreleased{border:1px solid rgba(238,233,223,.28);padding:clamp(16px,2.4vw,24px);}
.pbuy__state{margin:0;font-family:var(--font-serif);font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.2;letter-spacing:.02em;}
.pbuy__statenote{margin:.6rem 0 0;font-size:.92rem;line-height:1.6;opacity:.82;max-width:60ch;}
.pbuy--unreleased .pbuy__actions{margin-top:clamp(14px,2vw,18px);}

/* ---- Shop card: the state note that stands where a price would --------- */
.ccard__relnote{margin:.5rem 0 0;font-size:.82rem;line-height:1.5;color:var(--inkmut);}
.ccard__add--documentation_review,
.ccard__add--coming_soon,
.ccard__add--archived{letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;}
.ecx__add--documentation_review,
.ecx__add--coming_soon,
.ecx__add--archived{letter-spacing:.05em;font-size:.7rem;text-transform:uppercase;}

/* ---- Documentation states, in the dual-lab vocabulary -----------------
   No new colours, no new type: each state borrows an existing token, so a lot
   record reads in the approved palette and a discrepancy hold is legible without
   becoming a warning banner. `missing` is deliberately the same muted ink as
   `under_review` — an absent report is a fact about the record, not an alarm. */
.docstat--published,
.docstat--dual_lab_complete{color:var(--forest,#3E5C46);}
.docstat--under_review{color:var(--inkmut);}
.docstat--missing{color:var(--inkmut);}
.docstat--not_yet_released{color:var(--inkmut);}
.docstat--discrepancy_hold,
.docstat--rejected{color:var(--terra);}
.docstat--archived{color:var(--warm-gray,#9A948B);}

/* ---- The two report slots -------------------------------------------------

   Both slots are always rendered, so the layout has to hold a filled slot beside
   an empty one without either looking broken. Two equal columns on the product
   page and on a lot record; one column under 720px, in source order, so side A
   is always read before side B. Nothing here introduces a new border weight, a
   new radius or a new type size — the slot is the .prel__grid cell idiom
   repeated twice. */
.prel__slots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);
  margin:0 0 clamp(16px,2.2vw,22px);}
.prel__slot{border:1px solid var(--hair);padding:clamp(14px,2vw,20px);background:var(--surf);}
.prel__slot--missing{background:transparent;}
.prel__slothead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--hair);flex-wrap:wrap;}
.prel__slotgrid{margin:10px 0 0;display:grid;gap:8px;}
.prel__slotgrid > div{display:grid;gap:.2rem;}
.prel__slotgrid dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--inkmut);}
.prel__slotgrid dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink);}
.prel__slotnote{margin:10px 0 0;font-size:.85rem;line-height:1.55;color:var(--inkmut);}
.prel__preserved{margin:.7rem 0 0;font-size:.92rem;line-height:1.65;color:var(--inkmut);max-width:74ch;}
@media (max-width:720px){.prel__slots{grid-template-columns:1fr;}}

/* ---- The required test panel --------------------------------------------- */
.prel__panel{border-top:1px solid var(--hair);padding-top:clamp(14px,2vw,18px);
  margin:0 0 clamp(14px,2vw,18px);}
.prel__panelname{margin:.5rem 0 0;font-size:.95rem;color:var(--ink);}
.prel__reqs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;}
.prel__req{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--hair);font-size:.9rem;}
.prel__reqname{color:var(--ink);}
.prel__reqsides{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--inkmut);}
.prel__panelnote{margin:.7rem 0 0;font-size:.85rem;line-height:1.6;color:var(--inkmut);max-width:74ch;}

/* ---- The two report slots on a lot record (Testing page) ------------------ */
.doccard__slots{display:grid;grid-template-columns:1fr 1fr;border-top:var(--hair);}
.doccard__slot{padding:var(--sp-4,16px) var(--sp-5,22px);border-right:var(--hair);}
.doccard__slot:last-child{border-right:0;}
.doccard__slothead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px;}
.doccard__slot .doccard__grid{display:grid;grid-template-columns:1fr;border:0;}
.doccard__slot .doccard__grid > div{padding:6px 0;border:0;border-bottom:var(--hair);}
.doccard__slot .doccard__grid > div:last-child{border-bottom:0;}
.doccard__slot .doccard__note{margin:8px 0 0;}
.doccard__foot .doccard__note{margin:0 0 7px;}
@media (max-width:720px){
  .doccard__slots{grid-template-columns:1fr;}
  .doccard__slot{border-right:0;border-bottom:var(--hair);}
  .doccard__slot:last-child{border-bottom:0;}
}

/* ---- The discrepancy standard, on the Standards page ---------------------- */
.rstd--discrepancy{padding-top:0;}
.rstd__refusals{list-style:none;margin:clamp(18px,2.6vw,26px) 0 0;padding:0;display:grid;gap:8px;}
.rstd__refusals li{padding-left:1.1em;position:relative;font-size:.94rem;line-height:1.6;
  color:var(--inkmut);max-width:74ch;}
.rstd__refusals li::before{content:"\2014";position:absolute;left:0;color:var(--terra);}

/* ---- The report-slot legend on the Testing page -------------------------- */
.dstates--slots{margin-top:-8px;}
.dstates__note{margin:14px 0 0;font-size:.85rem;line-height:1.6;color:var(--inkmut);max-width:78ch;}

/* ---- The lot documentation module on the product page ---------------------
   The dark module keeps its approved treatment; only the state dot follows the
   dual-lab vocabulary, and only by reusing the two colours already declared for
   it in ref.css. */
.batch__state--dual_lab_complete .batch__dot{background:#3f7a54;}
.batch__state--under_review .batch__dot,
.batch__state--not_yet_released .batch__dot{background:var(--warm-gray);}
.batch__state--discrepancy_hold .batch__dot{background:var(--champagne);}

.texplain__rule{display:block;color:var(--terra);margin-bottom:6px;}

/* LIVE AVAILABILITY. The dot follows the live answer rather than the state the
   build happened to know, so the colour and the word can never disagree. */
.pstat__item--out_of_stock .pstat__dot { background: var(--warm-gray, #9A948B); }