/* ============================================================
   Causa Labs — site styles
   Every colour, face, radius and duration comes from tokens.css.
   If you need a value that isn't there, add it there, not here.
   ============================================================ */

/* ---------- Faces. Local files, no CDN. ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* The UA stylesheet's [hidden]{display:none} is author-overridable, so any
   rule like .mobile-nav{display:flex} silently defeats the hidden attribute.
   That shipped: the mobile drawer was open on every page and could not be
   closed. Author-origin and !important so it cannot happen again. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0;}
ul,ol{list-style:none; padding:0;}
img,svg{display:block; max-width:100%;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
a{color:inherit; text-decoration:none;}
table{border-collapse:collapse; width:100%;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-fg);
  padding:var(--space-3) var(--space-4); border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-strong); font-weight:700;
}
.skip:focus{left:0;}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px;}

/* ---------- Page ---------- */
body{
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.wrap{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Type roles, straight off the source scale ---------- */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; color:var(--text-primary);}
h1{
  font-size:clamp(2.35rem, 1.5rem + 3.6vw, 4.15rem);
  line-height:1.06; letter-spacing:var(--track-display); text-wrap:balance;
}
h1 em{font-style:normal; color:var(--text-muted);}
h2{
  font-size:clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  line-height:var(--leading-title); letter-spacing:var(--track-title); text-wrap:balance;
}
h3{font-size:1.0625rem; line-height:1.3; letter-spacing:-0.005em;}

.eyebrow{
  font-family:var(--font-strong); font-weight:700;
  font-size:var(--text-xs); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--space-3);
}
.lede{
  font-size:1.0625rem; line-height:1.62; color:var(--text-muted);
  max-width:52ch; margin-top:var(--space-5);
}
.section-lede{
  color:var(--text-muted); max-width:var(--max-w-prose); margin-top:var(--space-4);
}
.section-lede em{font-style:italic; color:var(--text-primary);}
.fine{
  font-family:var(--font-mono); font-size:0.6875rem; line-height:1.7;
  color:var(--text-muted); margin-top:var(--space-4);
}

/* ---------- Preview banner (delete for launch) ---------- */
.preview-banner{
  background:#E2B457; color:#0B0C0A;
  font-family:var(--font-mono); font-size:0.6875rem; line-height:1.6;
  text-align:center; padding:7px var(--space-4);
}
.preview-banner strong{font-family:var(--font-strong); font-weight:700;}

/* ---------- Announcement ---------- */
.announce{
  border-bottom:1px solid var(--border-subtle);
  background:var(--surface-alt);
}
.announce p{
  font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.02em;
  color:var(--text-muted); text-align:center; padding:9px 0;
}
.announce a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface-page) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
.nav-inner{display:flex; align-items:center; gap:var(--space-5); min-height:66px;}

.brand{display:flex; align-items:center; gap:10px; color:var(--mark-open); flex:none;}
.brand-mark{width:30px; height:30px;}
.brand-word{
  font-family:var(--font-display); font-weight:800; font-size:0.9375rem;
  letter-spacing:0.01em; line-height:1; color:var(--text-primary);
}
.brand-word em{
  display:block; font-style:normal; font-family:var(--font-caption); font-weight:500;
  font-size:0.5rem; letter-spacing:0.42em; margin-top:3px; color:var(--text-muted);
}

.nav-links{display:none; gap:var(--space-5); margin-inline:auto;}
.nav-links a{
  font-family:var(--font-ui); font-weight:600; font-size:0.875rem;
  color:var(--text-muted); transition:color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover{color:var(--text-primary);}

.nav-tools{display:none; align-items:center; gap:var(--space-3); margin-left:auto;}
.icon-btn{
  display:grid; place-items:center; width:36px; height:36px;
  border-radius:var(--radius-pill); color:var(--text-muted);
  border:1px solid transparent;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{color:var(--text-primary); border-color:var(--border-subtle);}
.icon-btn svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ico-moon{display:none;}
[data-theme='light'] .ico-sun{display:none;}
[data-theme='light'] .ico-moon{display:block;}

.menu-btn{margin-left:auto;}
@media (min-width:900px){
  .nav-links{display:flex;}
  .nav-tools{display:flex;}
  .menu-btn{display:none;}
}
.mobile-nav{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-3) var(--gutter) var(--space-5);
  border-top:1px solid var(--border-subtle);
}
.mobile-nav a{
  font-family:var(--font-ui); font-weight:600; font-size:1rem;
  color:var(--text-muted); padding:11px 0;
}
.mobile-nav a:hover{color:var(--text-primary);}
@media (min-width:900px){ .mobile-nav{display:none !important;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-strong); font-weight:700; font-size:0.8125rem;
  letter-spacing:0.055em; text-transform:uppercase;
  padding:13px 24px; border-radius:var(--radius-pill);
  border:1px solid transparent; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--accent-fg);}
.btn-ghost{border-color:var(--border-strong, var(--border-subtle)); color:var(--text-primary);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:9px 17px; font-size:0.75rem;}
.link-arrow{
  font-family:var(--font-strong); font-weight:700; font-size:0.8125rem;
  color:var(--accent); white-space:nowrap;
}
.link-arrow:hover{text-decoration:underline; text-underline-offset:4px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3.5rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 5vw, 6rem);
  background:var(--surface-grad);
}
/* one off-centre wash + a noise film, so a large dark ground doesn't go flat */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 78% 8%,
    color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 58%);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.hero-grid{position:relative; display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:center;}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.05fr 0.95fr;} }
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6);}

.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-6);}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  padding:6px 13px; background:var(--surface-glass);
}
.chip-ico{width:14px; height:14px; flex:none; fill:none; stroke:var(--accent);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.ruo-line{
  font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-muted); margin-top:var(--space-5);
}

.hero-art{display:flex; flex-direction:column; gap:var(--space-4);}
.hero-plate{
  position:relative; border-radius:var(--radius);
  border:1px solid var(--border-subtle); background:var(--surface-glass);
  padding:clamp(1.5rem,3vw,2.5rem);
}
.hero-field{width:100%; height:auto; border-radius:var(--radius-sm); background:var(--e-light-bg);}
.hero-seal{
  position:absolute; top:-16px; right:-10px;
  width:92px; height:92px; border-radius:50%;
  background:var(--accent); color:var(--accent-fg);
  display:grid; place-content:center; text-align:center; gap:1px;
  border:1px solid var(--surface-page);
}
.hero-seal-n{font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1;}
.hero-seal-l{
  font-family:var(--font-mono); font-size:0.5625rem;
  letter-spacing:0.14em; text-transform:uppercase;
}
.hero-cap{
  font-family:var(--font-mono); font-size:0.6875rem; line-height:1.7;
  color:var(--text-muted);
}

/* ---------- Marquee ----------
   Two identical tracks side by side, the pair translated -50%. At the end of
   the cycle set B sits exactly where set A began, so the reset is invisible
   and there is no JS involved. `min-width:max-content` stops flex from
   squashing the sets and breaking the seam. */
.marquee{
  position:relative; overflow:hidden;
  border-block:1px solid var(--border-subtle);
  background:var(--surface-alt);
  padding-block:13px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex; width:max-content; animation:marquee 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-set{
  display:flex; align-items:center; min-width:max-content;
  margin:0; padding:0; list-style:none;
}
.marquee-set li{
  font-family:var(--font-strong); font-weight:700; font-size:0.6875rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap;
  padding-inline:var(--space-5);
  display:flex; align-items:center;
}
/* separator - a small rotated square, not a glyph, so it can't shift per font */
.marquee-set li::after{
  content:''; width:4px; height:4px; margin-left:var(--space-5);
  background:var(--accent); transform:rotate(45deg); flex:none;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; width:auto;}
  /* the duplicate set is aria-hidden and purely for the loop - drop it */
  .marquee-set[aria-hidden="true"]{display:none;}
  .marquee{overflow-x:auto;}
}

/* ---------- Service area ---------- */
.areas{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--space-6);
}
.areas li{
  font-family:var(--font-mono); font-size:0.8125rem; color:var(--text-primary);
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  background:var(--surface-glass); padding:9px 18px;
}

/* ---------- FAQ ---------- */
.faq{
  margin-top:var(--space-6);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  overflow:hidden;
}
.faq details{border-bottom:1px solid var(--border-subtle); background:var(--surface-glass);}
.faq details:last-child{border-bottom:0;}
.faq summary{
  cursor:pointer; list-style:none;
  padding:var(--space-4) var(--space-5);
  font-family:var(--font-strong); font-weight:700; font-size:0.9375rem;
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  transition:color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary::after{
  content:''; flex:none; width:9px; height:9px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-fast) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px);}
.faq details p{
  padding:0 var(--space-5) var(--space-5);
  font-size:0.9375rem; color:var(--text-muted); max-width:74ch;
}
.faq details p a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

/* ---------- Bands ---------- */
.band{padding-block:var(--section-y);}
.band-alt{
  background:var(--surface-alt);
  border-block:1px solid var(--border-subtle);
}
.band-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-5); flex-wrap:wrap;
}

/* ---------- Trust rail ---------- */
.rail{
  display:grid; gap:var(--space-4); margin-top:var(--space-7);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.rail-item{
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass); padding:var(--space-5);
}
.rail-ico{
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:var(--radius-pill); background:var(--surface-muted);
  border:1px solid var(--border-subtle); margin-bottom:var(--space-4);
}
.rail-ico svg{width:20px; height:20px; fill:none; stroke:var(--accent);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.rail-item h3{margin-bottom:8px;}
.rail-item p{font-size:0.875rem; line-height:1.55; color:var(--text-muted);}

/* ---------- Stepper ---------- */
.stepper{
  display:grid; gap:var(--space-5); margin-top:var(--space-7);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.step{position:relative; padding-top:var(--space-2);}
.step-bead{
  position:relative; z-index:1;
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--radius-pill);
  background:var(--surface-page); border:1px solid var(--border-subtle);
  font-family:var(--font-mono); font-weight:700; font-size:0.875rem;
  color:var(--text-primary);
}
.step.is-done .step-bead{
  background:var(--accent); border-color:var(--accent); color:var(--accent-fg);
}
.step-line{
  position:absolute; top:calc(var(--space-2) + 20px); left:40px; right:0; height:1px;
  background:var(--border-subtle);
}
.step:last-child .step-line{display:none;}
.step h3{margin-top:var(--space-4); font-size:0.9375rem;}
.step p{margin-top:6px; font-size:0.8125rem; line-height:1.55; color:var(--text-muted); max-width:26ch;}

/* Hovering a step lights that step, not just the terminal one. Steps are not
   controls, so this is affordance rather than interaction - but it is
   keyboard-reachable via :focus-within for the links inside the copy. */
.step-bead, .step h3, .step-line{
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.stepper:hover .step.is-done .step-bead{
  background:var(--surface-page); border-color:var(--accent); color:var(--accent);
}
.step:hover .step-bead,
.step:focus-within .step-bead,
.stepper:hover .step.is-done:hover .step-bead{
  background:var(--accent); border-color:var(--accent); color:var(--accent-fg);
}
.step:hover h3, .step:focus-within h3{color:var(--accent);}
.step:hover .step-line, .step:focus-within .step-line{background:var(--accent);}
.step:hover p, .step:focus-within p{color:var(--text-secondary);}
@media (hover:none){
  /* touch: no hover state to discover, so leave the terminal step lit */
  .stepper:hover .step.is-done .step-bead{
    background:var(--accent); border-color:var(--accent); color:var(--accent-fg);
  }
}

.callout{
  margin-top:var(--space-6);
  border:1px solid var(--border-subtle); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); background:var(--surface-glass);
  padding:var(--space-5);
}
.callout p{font-size:0.9375rem; color:var(--text-muted); max-width:78ch;}
.callout strong{color:var(--text-primary); font-family:var(--font-strong); font-weight:700;}

/* ---------- Lot table ---------- */
.lot-lead{
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  margin-top:var(--space-6);
  border:1px solid var(--border-subtle); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:var(--surface-glass); padding:var(--space-4) var(--space-5);
}
.lot-lead-k{
  font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--text-muted);
}
.lot-lead-n{font-family:var(--font-display); font-weight:800; font-size:1.0625rem;}
.lot-lead-p{
  margin-left:auto; font-family:var(--font-mono); color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.lot-lead-p b{font-size:1.375rem; font-weight:700;}
.lot-lead-p span{font-size:0.625rem; color:var(--text-muted); margin-left:4px;}
.lot-lead-v{font-family:var(--font-mono); font-size:0.6875rem; color:var(--accent);}

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-subtle); border-top:0;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.lot-table{min-width:560px; font-size:0.875rem;}
.lot-table th{
  text-align:left; font-family:var(--font-strong); font-weight:700;
  font-size:0.625rem; letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); background:var(--surface-muted);
  padding:10px var(--space-5); white-space:nowrap;
}
.lot-table td{
  padding:12px var(--space-5); border-top:1px solid var(--border-subtle);
  vertical-align:middle;
}
.lot-table tbody tr{transition:background var(--dur-fast) var(--ease-out);}
.lot-table tbody tr:hover{background:var(--surface-glass);}
.cell-lot{font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); white-space:nowrap; width:1%;}
.cell-name{font-weight:600; color:var(--text-primary);}
.cell-date{font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); white-space:nowrap; width:1%;}
.cell-status{font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); white-space:nowrap; width:1%; text-align:right;}

/* ---------- Product cards ---------- */
.cards{
  display:grid; gap:var(--space-4); margin-top:var(--space-7);
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
}
.card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.card:hover{transform:translateY(-3px); border-color:var(--accent);}
.card-art{width:100%; aspect-ratio:1; background:var(--e-light-bg);}
.card-body{display:flex; flex-direction:column; gap:7px; padding:var(--space-4);}
.card-verif{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
/* no qualifying assay yet - stated plainly, not dressed up as a pass */
.card-verif.is-pending{color:var(--text-muted);}
.card-tick{
  display:grid; place-items:center; flex:none;
  width:15px; height:15px; border-radius:50%;
  background:var(--accent); color:var(--accent-fg);
  font-size:0.5625rem; font-family:var(--font-body);
}
.card-name{font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--text-primary);}
.card-kit{font-size:0.8125rem; color:var(--text-muted);}
.card-spec{
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); margin-top:var(--space-2);
}
.card-stock{
  font-family:var(--font-mono); font-size:0.625rem; color:var(--text-muted);
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  padding:4px 10px; font-variant-numeric:tabular-nums;
}

/* ---------- About ---------- */
.about-grid{display:grid; gap:clamp(2rem,4vw,4rem);}
@media (min-width:900px){ .about-grid{grid-template-columns:1.1fr 0.9fr;} }
.facts{
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass); padding:var(--space-2) var(--space-5);
  align-self:start;
}
.facts > div{padding-block:var(--space-4); border-bottom:1px solid var(--border-subtle);}
.facts > div:last-child{border-bottom:0;}
.facts dt{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); margin-bottom:5px;
}
.facts dd{font-size:0.9375rem; color:var(--text-primary); line-height:1.5;}
.todo{
  display:inline-block; margin-left:7px; font-size:0.5rem;
  color:var(--gold); vertical-align:middle; cursor:help;
}

/* ---------- Contact ---------- */
.contact{max-width:64ch;}
.contact .hero-cta{margin-top:var(--space-6);}

/* ---------- Order form ----------
   The one place on the site that asks the reader for something, so it gets a
   panel of its own rather than sitting loose on the page. */
.order-form{
  display:flex; flex-direction:column; gap:var(--space-5);
  margin-top:var(--space-7); padding:var(--space-6);
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass);
}
.field{display:flex; flex-direction:column; gap:7px; border:0; padding:0; margin:0; min-width:0;}
.field-row{display:flex; gap:var(--space-4); flex-wrap:wrap;}
.field-row > .field{flex:1 1 14rem;}
.field-row > .field-narrow{flex:0 1 7rem;}

.field > label, .field > legend{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); padding:0;
}
.field-note{font-size:0.75rem; color:var(--text-muted); margin:0;}

.order-form input[type=text],
.order-form input[type=email],
.order-form input[type=number],
.order-form select,
.order-form textarea{
  width:100%; font-family:var(--font-ui); font-size:0.9375rem;
  color:var(--text-primary); background:var(--surface-page);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:11px 13px; appearance:none;
}
.order-form textarea{resize:vertical; min-height:6rem; line-height:1.55;}
.order-form select{
  cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.order-form select option{background:var(--surface-page); color:var(--text-primary);}
.order-form input:hover, .order-form select:hover, .order-form textarea:hover{
  border-color:var(--border-strong);
}
.order-form input:focus-visible,
.order-form select:focus-visible,
.order-form textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}

.choice{
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.875rem; color:var(--text-secondary); line-height:1.5; cursor:pointer;
}
.choice + .choice{margin-top:9px;}
.choice input{flex:none; margin-top:2px; accent-color:var(--accent); cursor:pointer;}
.choice-confirm{
  padding:var(--space-4); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); background:var(--surface-page);
}

.form-foot{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;}
.form-status{margin:0; font-size:0.8125rem; color:var(--text-muted);}
.form-status.is-ok{color:var(--accent);}
.form-status.is-bad{color:var(--gold);}
.order-form button[disabled]{opacity:0.55; cursor:progress;}

/* Honeypot. Off-screen rather than display:none - some bots skip hidden
   fields, and none of them are using a screen reader. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--border-subtle);
  padding-block:var(--space-8) var(--space-6);
  background:var(--surface-page);
}
.foot-grid{
  display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-bottom:var(--space-7);
}
.foot-note{
  font-size:0.8125rem; color:var(--text-muted);
  margin-top:var(--space-4); max-width:34ch;
}
.foot nav{display:flex; flex-direction:column; gap:9px;}
.foot nav h3{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); margin-bottom:3px;
}
.foot nav a{font-size:0.875rem; color:var(--text-muted);}
.foot nav a:hover{color:var(--text-primary);}

.ruo-block{
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:var(--space-5); text-align:center;
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:2.2;
  color:var(--text-muted);
}
.foot-legal{
  margin-top:var(--space-5);
  font-family:var(--font-mono); font-size:0.625rem; line-height:1.9;
  color:var(--text-muted); max-width:88ch;
}

/* ============================================================
   Interior pages
   ============================================================ */

/* CSS math needs whitespace around + and -. Without it the value is rejected,
   and because this declaration also contains var() the rejection happens at
   computed-value time, so it still beats .band and then resolves to unset -
   i.e. zero padding on every hero on the site. */
.band-tight{padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--section-y);}
.band-tight h1{margin-bottom:var(--space-4);}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.unset{color:var(--text-muted); font-style:italic;}

/* ---------- Breadcrumbs ---------- */
.crumbs{border-bottom:1px solid var(--border-subtle); background:var(--surface-alt);}
.crumbs .wrap{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-block:11px;
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
}
.crumbs a{color:var(--text-muted);}
.crumbs a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.crumbs [aria-current]{color:var(--text-primary);}
.crumb-sep{opacity:.45;}

/* ---------- Long-form prose ---------- */
.prose{max-width:72ch;}
.prose h2{
  font-size:clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
  margin-top:var(--space-7); margin-bottom:var(--space-4);
}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:var(--space-4); color:var(--text-muted);}
.prose p strong{color:var(--text-primary); font-family:var(--font-strong); font-weight:700;}
.prose em{color:var(--text-primary); font-style:italic;}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.prose ul.plain{margin-bottom:var(--space-4);}
.prose .fine{margin-top:var(--space-5);}

/* ---------- Prose + figure column ----------
   A 72ch measure leaves half the page empty on desktop. The figures go in that
   space and stick while the argument scrolls past them. */
.prose-grid{display:grid; gap:var(--space-7); align-items:start;}
@media (min-width:1000px){
  .prose-grid{grid-template-columns:minmax(0,1fr) minmax(300px,26rem); gap:var(--space-8);}
  .prose-aside{position:sticky; top:var(--space-7);}
}
.prose-aside{display:flex; flex-direction:column; gap:var(--space-5); min-width:0;}

.figpanel{
  margin:0; padding:var(--space-5);
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass);
}
.fig-head{display:flex; flex-direction:column; gap:3px; margin-bottom:var(--space-5);}
.fig-title{
  font-family:var(--font-strong); font-weight:700; font-size:0.6875rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-primary);
}
.fig-note{font-family:var(--font-mono); font-size:0.625rem; color:var(--text-muted);}

/* ---------- Chromatogram ---------- */
.chromo svg{display:block; width:100%; height:auto; overflow:visible;}
.chromo-grid line{stroke:var(--border-subtle); stroke-width:1;}
.chromo-base{stroke:var(--border-strong) !important;}
.chromo-trace{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round;
}
.chromo-marker line{stroke:var(--accent); stroke-width:1; stroke-dasharray:2 4; opacity:0.5;}
.chromo-marker text{
  fill:var(--text-muted); font-family:var(--font-mono); font-size:10px;
}
/* Animation is opt-in: JS adds .anim-init only when motion is allowed, so with
   JS off or reduced motion the finished figure is what renders. */
.chromo.anim-init .chromo-trace{stroke-dasharray:1; stroke-dashoffset:1;}
.chromo.anim-init .chromo-marker{opacity:0;}
.chromo.anim-init.is-in .chromo-trace{
  stroke-dashoffset:0; transition:stroke-dashoffset 1.9s var(--ease-out);
}
.chromo.anim-init.is-in .chromo-marker{opacity:1; transition:opacity .5s ease 1.5s;}

/* ---------- Purity bars ---------- */
.pbars{display:flex; flex-direction:column; gap:7px;}
.pbar-row{
  display:grid; grid-template-columns:minmax(0,9.5rem) 1fr auto;
  align-items:center; gap:10px;
}
.pbar-name{
  font-size:0.75rem; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pbar-track{
  height:7px; border-radius:999px; background:var(--surface-page);
  border:1px solid var(--border-subtle); overflow:hidden;
}
.pbar-fill{
  display:block; height:100%; width:var(--w); border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
}
.pbar-val{font-size:0.6875rem; color:var(--text-muted);}
.puritychart.anim-init .pbar-fill{width:0;}
.puritychart.anim-init.is-in .pbar-fill{width:var(--w); transition:width 1.1s var(--ease-out);}
.puritychart.anim-init.is-in .pbar-row:nth-child(n+2) .pbar-fill{transition-delay:.06s;}
.puritychart.anim-init.is-in .pbar-row:nth-child(n+5) .pbar-fill{transition-delay:.12s;}
.puritychart.anim-init.is-in .pbar-row:nth-child(n+9) .pbar-fill{transition-delay:.18s;}

/* ---------- Route diagram ----------
   Two identical layers. The base is dim; the lit copy sits exactly on top and
   is revealed left-to-right by clip-path, so the filled rail and the lit stops
   track the pip with no per-element timing to keep in sync. --p0 is the first
   stop's centre (50%/n) and --span the distance to the last. */
.lane + .lane{margin-top:var(--space-7);}
.lane-label{
  display:block; margin-bottom:11px;
  font-family:var(--font-mono); font-size:0.625rem;
  letter-spacing:0.04em; color:var(--text-muted);
}
.lane.is-local .lane-label{color:var(--accent);}
.lane-meta{
  display:block; margin-top:10px;
  font-family:var(--font-mono); font-size:0.5625rem; color:var(--text-muted);
}
.lane-track{position:relative;}
.lane-layer{display:block; position:relative;}
.lane-layer.is-lit{
  position:absolute; inset:0; color:var(--accent);
  clip-path:inset(0 100% 0 0);      /* fully hidden until animated */
}
.lane-rail{
  position:absolute; top:5px; left:var(--p0); width:var(--span);
  height:2px; border-radius:2px; background:var(--border-subtle);
}
.is-lit .lane-rail{background:var(--accent);}
.lane-stops{
  display:grid; grid-template-columns:repeat(var(--n),1fr);
  align-items:start; padding-top:13px;
}
.lane-stop{display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0;}
.lane-stop i{
  width:9px; height:9px; border-radius:50%; margin-top:-13px; flex:none;
  background:var(--surface-page); border:2px solid var(--border-strong);
}
.is-lit .lane-stop i{border-color:var(--accent); background:var(--accent);}
.lane-stop em{
  font-style:normal; font-family:var(--font-mono); font-size:0.5625rem;
  color:var(--text-muted); text-align:center; line-height:1.3;
}
.is-lit .lane-stop em{color:var(--accent);}
.lane-pip{
  position:absolute; top:1px; left:var(--p0); z-index:2;
  width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:var(--accent); opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Static fallback: no JS or reduced motion leaves the journey complete. */
.routefig .lane-layer.is-lit{clip-path:inset(0 calc(100% - var(--p0) - var(--span)) 0 0);}
.routefig.anim-init .lane-layer.is-lit{clip-path:inset(0 calc(100% - var(--p0)) 0 0);}
.routefig.anim-init .lane-pip{opacity:1;}

/* `left`, not translateX: a percentage transform resolves against the pip's
   own 10px, not the track it has to cross. */
.routefig.anim-init.is-in .lane--5 .lane-pip{animation:pip-5 var(--dur) var(--ease-out) infinite;}
.routefig.anim-init.is-in .lane--5 .lane-layer.is-lit{animation:lit-5 var(--dur) var(--ease-out) infinite;}
.routefig.anim-init.is-in .lane--2 .lane-pip{animation:pip-2 var(--dur) var(--ease-out) infinite;}
.routefig.anim-init.is-in .lane--2 .lane-layer.is-lit{animation:lit-2 var(--dur) var(--ease-out) infinite;}

/* five stops, four legs - move, halt, move, halt */
@keyframes pip-5{
  0%  {opacity:0; left:var(--p0);}
  4%  {opacity:1; left:var(--p0);}
  15% {left:calc(var(--p0) + var(--span) * 0.25);}
  27% {left:calc(var(--p0) + var(--span) * 0.25);}
  37% {left:calc(var(--p0) + var(--span) * 0.5);}
  49% {left:calc(var(--p0) + var(--span) * 0.5);}
  59% {left:calc(var(--p0) + var(--span) * 0.75);}
  71% {left:calc(var(--p0) + var(--span) * 0.75);}
  81% {opacity:1; left:calc(var(--p0) + var(--span));}
  96% {opacity:1; left:calc(var(--p0) + var(--span));}
  100%{opacity:0; left:calc(var(--p0) + var(--span));}
}
@keyframes lit-5{
  0%,4%  {clip-path:inset(0 calc(100% - var(--p0)) 0 0);}
  15%,27%{clip-path:inset(0 calc(100% - var(--p0) - var(--span) * 0.25) 0 0);}
  37%,49%{clip-path:inset(0 calc(100% - var(--p0) - var(--span) * 0.5) 0 0);}
  59%,71%{clip-path:inset(0 calc(100% - var(--p0) - var(--span) * 0.75) 0 0);}
  81%,96%{clip-path:inset(0 calc(100% - var(--p0) - var(--span)) 0 0);}
  100%   {clip-path:inset(0 calc(100% - var(--p0)) 0 0);}
}
/* two stops, one leg */
@keyframes pip-2{
  0%  {opacity:0; left:var(--p0);}
  8%  {opacity:1; left:var(--p0);}
  52% {left:calc(var(--p0) + var(--span));}
  92% {opacity:1; left:calc(var(--p0) + var(--span));}
  100%{opacity:0; left:calc(var(--p0) + var(--span));}
}
@keyframes lit-2{
  0%,8%  {clip-path:inset(0 calc(100% - var(--p0)) 0 0);}
  52%,92%{clip-path:inset(0 calc(100% - var(--p0) - var(--span)) 0 0);}
  100%   {clip-path:inset(0 calc(100% - var(--p0)) 0 0);}
}

/* ---------- Recent-lots table ---------- */
.pmini{display:flex; align-items:center; gap:10px;}
.pmini-track{
  flex:1 1 auto; max-width:8rem; height:5px; border-radius:999px;
  background:var(--surface-page); border:1px solid var(--border-subtle);
  overflow:hidden;
}
.pmini-fill{
  display:block; height:100%; width:var(--w); border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
}
.pmini b{font-weight:700; font-variant-numeric:tabular-nums;}
/* Rows arrive in sequence. Scoped to .reveal, which only JS adds, so a no-JS
   or reduced-motion visitor gets the finished table. */
.table-wrap.reveal .lot-table--recent tbody tr{opacity:0; transform:translateY(8px);}
.table-wrap.reveal.is-in .lot-table--recent tbody tr{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--r) * 90ms);
}
.table-wrap.reveal .lot-table--recent .pmini-fill{width:0;}
.table-wrap.reveal.is-in .lot-table--recent .pmini-fill{
  width:var(--w);
  transition:width .8s var(--ease-out);
  transition-delay:calc(var(--r) * 90ms + 200ms);
}

/* ---------- Lots page blocks ---------- */
.lot-block + .lot-block{margin-top:var(--space-8);}
.lot-block > h2{margin-bottom:var(--space-3);}
.lot-block .section-lede{margin-bottom:var(--space-6);}
.lot-block .table-wrap{margin-top:0;}
.pill-wait{
  display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); background:var(--surface-page);
  font-family:var(--font-mono); font-size:0.625rem; color:var(--text-muted);
}

/* ---------- Catalog controls ---------- */
.controls{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-5); flex-wrap:wrap; margin-top:var(--space-6);
}
.controls .filters{margin-top:0;}
.sortwrap{display:flex; align-items:center; gap:10px; flex:none;}
.sortwrap > span{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted);
}
.sortwrap select{
  font-family:var(--font-ui); font-weight:600; font-size:0.8125rem;
  color:var(--text-primary); background:var(--surface-glass);
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  padding:9px 34px 9px 15px; cursor:pointer; appearance:none;
  /* chevron drawn in the border colour so it themes with everything else */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.sortwrap select:hover{border-color:var(--accent);}
.sortwrap select option{background:var(--surface-page); color:var(--text-primary);}

/* ---------- Catalog filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-6);}
.filter{
  font-family:var(--font-ui); font-weight:600; font-size:0.8125rem;
  padding:9px 17px; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); background:var(--surface-glass);
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.filter:hover{color:var(--text-primary); border-color:var(--border-strong,var(--border-subtle));}
.filter.is-on{background:var(--accent); border-color:var(--accent); color:var(--accent-fg);}
.count{
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
  margin-top:var(--space-5); font-variant-numeric:tabular-nums;
}
.cards .card[hidden]{display:none;}

/* card is a whole link now */
.card-link{display:flex; flex-direction:column; height:100%; color:inherit;}
.card-link:hover .card-name{color:var(--accent);}
.card-name{transition:color var(--dur-fast) var(--ease-out);}

/* ---------- Product page ---------- */
.product{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start;}
@media (min-width:900px){ .product{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);} }
.product-plate{
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass); padding:clamp(1rem,2vw,1.75rem);
}
.product-art{width:100%; height:auto; border-radius:var(--radius-sm); background:var(--e-light-bg);}
.product-media .fine{margin-top:var(--space-4);}
.product-main h1{margin-bottom:var(--space-5);}

.verif-panel{
  display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
  border:1px solid var(--border-subtle); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); background:var(--surface-glass);
  padding:var(--space-5); margin-bottom:var(--space-5);
}
.verif-figure{font-family:var(--font-mono); color:var(--text-primary); font-variant-numeric:tabular-nums;}
.verif-figure b{font-size:2rem; font-weight:700; line-height:1;}
.verif-figure span{font-size:0.6875rem; color:var(--text-muted); margin-left:4px;}
.verif-figure.is-pending b{color:var(--text-muted);}
.verif-figure.is-pending span{margin-left:6px;}
.verif-meta{flex:1 1 16rem;}
.verif-meta p{font-size:0.8125rem; color:var(--text-muted); display:flex; align-items:center; gap:7px;}
.verif-meta p + p{margin-top:5px;}
.verif-meta .mono{font-size:0.75rem;}
.verif-panel .btn{margin-left:auto;}

.stock-line{display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-5);}
.stock-line .fine{margin-top:0;}

.product-detail{
  display:grid; gap:var(--space-7); margin-top:var(--space-9);
  padding-top:var(--space-7); border-top:1px solid var(--border-subtle);
}
@media (min-width:900px){ .product-detail{grid-template-columns:1fr 1fr;} }
.product-detail h2{font-size:1.125rem; margin-bottom:var(--space-4);}
.product-detail p{color:var(--text-muted); margin-bottom:var(--space-3); max-width:62ch;}
.product-detail ul.plain{font-size:0.9375rem;}

.specs{border-top:1px solid var(--border-subtle);}
.specs > div{
  display:flex; gap:var(--space-4); justify-content:space-between;
  padding-block:11px; border-bottom:1px solid var(--border-subtle);
}
.specs dt{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-muted); flex:none;
}
.specs dd{font-size:0.875rem; color:var(--text-primary); text-align:right;}

.related{margin-top:var(--space-9); padding-top:var(--space-7); border-top:1px solid var(--border-subtle);}
.related h2{font-size:1.125rem; margin-bottom:var(--space-5);}

/* ---------- COA page ---------- */
.coa{
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  overflow:hidden; margin-top:var(--space-6);
}
.coa-head{
  display:flex; flex-wrap:wrap; gap:var(--space-6);
  padding:var(--space-5); background:var(--surface-glass);
  border-bottom:1px solid var(--border-subtle);
}
.coa-k{
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted);
}
.coa-v{font-size:0.9375rem; color:var(--text-primary); margin-top:4px;}
.coa-v a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.coa-figure{
  margin-left:auto; font-family:var(--font-mono); color:var(--accent);
  font-variant-numeric:tabular-nums; align-self:center;
}
.coa-figure b{font-size:2.25rem; font-weight:700; line-height:1;}
.coa-figure span{font-size:0.6875rem; color:var(--text-muted); margin-left:4px;}
.coa-table{font-size:0.875rem;}
.coa-table th{
  text-align:left; font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted);
  background:var(--surface-alt); padding:10px var(--space-5); white-space:nowrap;
}
.coa-table td{padding:12px var(--space-5); border-top:1px solid var(--border-subtle); color:var(--text-muted);}
.coa-table td:first-child{color:var(--text-primary); font-weight:600;}
.cell-ok{color:var(--accent); font-family:var(--font-mono); font-size:0.8125rem;}
.cell-num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
.coa-foot{padding:var(--space-5); border-top:1px solid var(--border-subtle); background:var(--surface-glass);}
.coa-foot .fine{margin-top:0;}
.lot-table a{color:var(--accent);}
.lot-table a:hover{text-decoration:underline; text-underline-offset:3px;}
.lot-table .cell-name a{color:var(--text-primary);}
.lot-table .cell-name a:hover{color:var(--accent);}

/* ---------- Testing-cost figures ---------- */
.costgrid{
  display:grid; gap:13px; margin:var(--space-6) 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.costcell{
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  background:var(--surface-glass); padding:var(--space-5) var(--space-4);
  text-align:center;
}
.costnum{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.costlab{
  display:block; margin-top:9px;
  font-family:var(--font-strong); font-weight:700; font-size:0.625rem;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-muted);
}

/* ---------- Service-area page ---------- */
.area-grid{
  display:grid; gap:13px; margin-top:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.area-card{
  border:1px solid var(--border-subtle); border-radius:var(--radius);
  background:var(--surface-glass); padding:var(--space-5);
}
.area-card h3{font-size:1.0625rem; margin-bottom:6px;}
.area-card p{font-size:0.875rem; color:var(--text-muted);}

/* ============================================================
   Drop + pricing
   ============================================================ */

/* ---------- Drop bar ---------- */
.dropbar{
  background:var(--accent); color:var(--accent-fg);
  border-bottom:1px solid var(--border-subtle);
}
.dropbar .wrap{
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  padding-block:10px;
}
.dropbar-tag{
  font-family:var(--font-strong); font-weight:700; font-size:0.6875rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  border:1px solid currentColor; border-radius:var(--radius-pill);
  padding:4px 11px; flex:none;
}
.dropbar-txt{font-size:0.8125rem; opacity:.86;}
.dropbar-left{
  font-family:var(--font-mono); font-size:0.75rem; font-weight:700;
  margin-left:auto; flex:none; font-variant-numeric:tabular-nums;
}
.dropbar-cta{
  font-family:var(--font-strong); font-weight:700; font-size:0.75rem;
  letter-spacing:0.04em; text-decoration:underline; text-underline-offset:3px;
  flex:none;
}
@media (max-width:720px){
  .dropbar-txt{display:none;}
  .dropbar-left{margin-left:0;}
}

/* ---------- Price on cards ---------- */
.card-media{position:relative;}
.card-flag{
  position:absolute; top:10px; left:10px; z-index:1;
  font-family:var(--font-strong); font-weight:700; font-size:0.5625rem;
  letter-spacing:var(--track-label); text-transform:uppercase;
  background:var(--accent); color:var(--accent-fg);
  border-radius:var(--radius-pill); padding:4px 10px;
}
.card-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px;}
.card-price b{
  font-family:var(--font-mono); font-weight:700; font-size:1.125rem;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.card-unit{
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- Volume pricing ---------- */
.card-bulk{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.625rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  padding-top:6px; border-top:1px dashed var(--border-subtle);
}
.card-bulk b{color:var(--text-primary); font-weight:700;}
.card-bulk span{color:var(--accent);}

.bulkbox{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap;
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:var(--space-4); margin-top:var(--space-4);
}
.bulkbox-k{
  display:block; font-family:var(--font-strong); font-weight:700;
  font-size:0.8125rem; color:var(--text-primary);
}
.bulkbox-sub{
  display:block; font-family:var(--font-mono); font-size:0.6875rem;
  color:var(--text-muted); margin-top:3px; font-variant-numeric:tabular-nums;
}
.bulkbox-p{text-align:right;}
.bulkbox-p b{
  display:block; font-family:var(--font-mono); font-weight:700; font-size:1.25rem;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.bulkbox-save{
  display:block; font-family:var(--font-mono); font-size:0.625rem;
  color:var(--accent); margin-top:2px;
}

/* ---------- Remaining-in-drop ----------
   A stated fact with a progress track, not a countdown. */
.remain{
  display:inline-flex; flex-direction:column; gap:5px;
  font-family:var(--font-mono); font-size:0.625rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.remain.is-low{color:var(--gold);}
.remain-track{
  display:block; width:74px; height:3px; border-radius:999px;
  background:var(--border-subtle); overflow:hidden;
}
.remain-fill{display:block; height:100%; border-radius:999px; background:var(--accent);}
.remain.is-low .remain-fill{background:var(--gold);}

/* ---------- Fulfilment lead ----------
   Availability and speed are separate claims. Everything is orderable, so the
   accent is spent only on "on hand today" - the one that changes a decision. */
.lead{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-3);
  font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.04em;
  color:var(--text-muted);
}
.lead.is-now{color:var(--accent);}
.lead-dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .lead-dot{animation:lead-pulse 2.4s ease-in-out infinite;}
}
@keyframes lead-pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}
  50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 6%, transparent);}
}
/* flex, not inline-flex: in the buybox this must claim its own row rather than
   running on into the remaining-count badge beside it */
.buybox .lead{display:flex; width:fit-content; margin-top:var(--space-4);}

/* ---------- Catalog meta row ---------- */
.catalog-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-5);
}
.catalog-meta .count{margin-top:0;}
.ship-note{
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
}

/* ---------- Buy box ---------- */
.buybox{
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  background:var(--surface-glass); padding:var(--space-5); margin-bottom:var(--space-5);
}
.buybox-price{display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap;}
.buybox-price b{
  font-family:var(--font-mono); font-weight:700; font-size:2.25rem; line-height:1;
  color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.buybox-unit{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.buybox .remain{margin-top:var(--space-4);}
.buybox-ship{
  font-family:var(--font-mono); font-size:0.6875rem; color:var(--text-muted);
  margin-top:var(--space-4); line-height:1.8;
}
.buybox .hero-cta{margin-top:var(--space-5);}
.buybox-drop{
  font-size:0.8125rem; color:var(--text-muted);
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
}
.buybox-drop strong{color:var(--text-primary); font-family:var(--font-strong); font-weight:700;}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px);}
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none;}
  .btn:hover,.card:hover{transform:none;}
}