/* ============================================================
   Nagesh Trading — Fly Ash Supply
   Industrial / conversion redesign
   Palette : carbon charcoal + concrete paper + engineering blue
   Type    : Space Grotesk (display) · Archivo (body) · Space Mono (data)
   ============================================================ */

:root{
  /* surfaces */
  --carbon:#16181C;     /* deep charcoal — coal origin, dark grounds */
  --carbon-2:#1F2228;   /* raised dark surface */
  --paper:#EDEFF2;      /* cool concrete paper — main light ground */
  --paper-2:#E3E6EB;    /* recessed light surface */
  --card:#F6F8FB;       /* light cards */

  /* ink + line */
  --ink:#16181C;
  --concrete:#7C818B;   /* mid grey captions */
  --line:#CDD2DA;       /* light hairline */
  --line-dk:#34373E;    /* dark hairline */
  --mute-dk:#9AA0A8;    /* muted text on dark */

  /* accent — engineering blue (the signature).
     --accent        : primary, buttons/CTAs on light  (white text)
     --accent-deep   : hover / pressed depth, kickers on light
     --accent-bright : lighter blue for accents on dark grounds (contrast pop)
     --accent-ink    : text/foreground on solid blue */
  --amber:#2563EB;
  --amber-deep:#1D4ED8;
  --amber-bright:#5C9CFF;
  --amber-ink:#ffffff;
  /* alias names (semantics), keep --amber* for minimal churn */
  --accent:var(--amber);
  --accent-deep:var(--amber-deep);
  --accent-bright:var(--amber-bright);
  --accent-ink:var(--amber-ink);

  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,80px);
  --maxw:1220px;
  --head-h:68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px);
  overflow-x:hidden;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.04vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--amber);color:var(--amber-ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---------- shared bits ---------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-deep);display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--amber-deep)}
.kicker.on-dark{color:var(--amber-bright)}
.kicker.on-dark::before{background:var(--amber-bright)}

.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--amber);z-index:120}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 6px 0 0 var(--amber-deep)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 8px 0 0 var(--amber-deep)}
.btn-amber:active{transform:translateY(3px);box-shadow:0 2px 0 0 var(--amber-deep)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero .btn-ghost{color:var(--paper)}
.hero .btn-ghost:hover{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn-sm{padding:11px 18px;font-size:12px}
.btn-block{width:100%}
.wa{width:18px;height:18px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(236,236,231,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
header.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.5)}
.topbar{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brandmark{display:flex;align-items:center;gap:12px}
.brandmark .logo{width:18px;color:var(--ink)}
.brandtext{font-family:var(--disp);font-weight:500;line-height:1;font-size:15px;letter-spacing:.02em}
.brandtext b{font-weight:700}
.brandtext small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--concrete);margin-top:4px}

nav.links{display:flex;gap:22px}
nav.links a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--concrete);
  position:relative;padding:4px 0;transition:color .2s;
}
nav.links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--amber);transition:width .25s}
nav.links a:hover,nav.links a.is-active{color:var(--ink)}
nav.links a:hover::after,nav.links a.is-active::after{width:100%}

.head-cta{display:flex;align-items:center;gap:14px}
.hamburger{display:none;width:40px;height:40px;border:1px solid var(--line);background:transparent;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.hamburger span{width:18px;height:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobnav{
  display:none;flex-direction:column;gap:4px;padding:0 var(--gutter);
  max-height:0;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line);
  transition:max-height .35s ease,padding .35s ease;
}
.mobnav.open{max-height:520px;padding:16px var(--gutter) 26px}
.mobnav a{font-family:var(--mono);font-size:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobnav a.btn{margin-top:14px;border-bottom:none}

/* six nav items need more room than five — collapse to the hamburger sooner */
@media(max-width:1080px){
  nav.links{display:none}
  .head-cta .btn-amber{display:none}
  .hamburger{display:flex}
  .mobnav{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--carbon);color:var(--paper);overflow:hidden;
  padding:clamp(48px,8vw,96px) 0 0}
#grains{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero::after{ /* amber glow lower-right */
  content:"";position:absolute;right:-10%;bottom:-30%;width:60%;height:90%;
  background:radial-gradient(closest-side,rgba(37,99,235,.16),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);align-items:center}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-bright);display:inline-flex;align-items:center;gap:10px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--amber-bright);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--amber-bright);
  animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

.hero-title{
  font-family:var(--disp);font-weight:700;line-height:.96;letter-spacing:-.02em;
  font-size:clamp(2.8rem,7.2vw,5.6rem);text-transform:uppercase;
  margin:clamp(20px,3vw,30px) 0 clamp(18px,2.5vw,26px);
}
.hero-title .hl{color:var(--amber-bright)}
.hero-sub{max-width:46ch;color:#cfd0cb;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.55}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:clamp(26px,3.5vw,38px) 0 26px}

.trust-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;
  padding-top:22px;border-top:1px solid var(--line-dk)}
.trust-chips li{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute-dk)}
.trust-chips b{color:var(--paper);font-weight:700}

/* hero powder visual */
.hero-visual{display:flex;flex-direction:column;justify-content:center;align-items:center}
/* names the lot the floating cards are quoting, so they read as results
   rather than as marketing round numbers */
.hero-visual-note{margin:30px auto 0;max-width:34ch;text-align:center;
  font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.02em;color:var(--mute-dk)}
.powder-stage{position:relative;width:min(100%,460px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center}
.powder{position:relative;z-index:2;width:88%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  animation:powderFloat 11s ease-in-out infinite;will-change:transform;
  transform:translateZ(0);backface-visibility:hidden}
/* smooth, sine-like float with a gentle sway (multi-stop → organic, seamless loop) */
@keyframes powderFloat{
  0%   {transform:translate3d(0,0,0)       rotate(0deg)}
  25%  {transform:translate3d(-4px,-9px,0) rotate(.5deg)}
  50%  {transform:translate3d(0,-15px,0)   rotate(0deg)}
  75%  {transform:translate3d(4px,-9px,0)  rotate(-.5deg)}
  100% {transform:translate3d(0,0,0)       rotate(0deg)}
}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(37,99,235,.25)}
.ring-1{width:78%;height:78%;animation:spin 26s linear infinite}
.ring-2{width:98%;height:98%;border-style:dashed;border-color:rgba(255,255,255,.1);
  animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.float-card{position:absolute;z-index:3;background:rgba(31,34,40,.82);backdrop-filter:blur(6px);
  border:1px solid var(--line-dk);padding:10px 14px;border-radius:2px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7);will-change:transform;backface-visibility:hidden}
.float-card .fc-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-dk);margin-bottom:3px}
.float-card .fc-v{font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--paper)}
.float-card .fc-v small{font-size:.62em;color:var(--amber-bright);font-weight:500;margin-left:2px}
/* each card drifts on its own amplitude / direction / period → gentle parallax,
   never in lockstep with the powder or each other */
.card-a{top:6%;left:-4%;animation:floatCardA 9.5s ease-in-out infinite}
.card-b{bottom:14%;right:-6%;animation:floatCardB 11.5s ease-in-out infinite}
.card-c{bottom:-2%;left:10%;animation:floatCardC 8.5s ease-in-out infinite}
@keyframes floatCardA{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-5px,-13px,0) rotate(-.8deg)}
}
@keyframes floatCardB{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(6px,-11px,0) rotate(.8deg)}
}
@keyframes floatCardC{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-4px,-16px,0) rotate(.6deg)}
}

/* hero stat bar */
.hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,6vw,76px);border-top:1px solid var(--line-dk)}
.hero-stats .stat{padding:26px 22px 30px;border-left:1px solid var(--line-dk)}
.hero-stats .stat:first-child{border-left:0;padding-left:0}
.hero-stats .count{display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--amber-bright);line-height:1}
.hero-stats .stat span{display:block;margin-top:8px;font-size:.86rem;color:var(--mute-dk)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,40px)}
  .hero-visual{order:-1}
  .powder-stage{width:min(70%,360px)}
}
@media(max-width:760px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats .stat{border-left:0;border-top:1px solid var(--line-dk);padding:20px 0}
  .hero-stats .stat:nth-child(even){padding-left:20px}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--amber);color:var(--amber-ink);overflow:hidden;
  border-top:2px solid var(--carbon);border-bottom:2px solid var(--carbon)}
.marquee-track{display:flex;align-items:center;gap:30px;white-space:nowrap;
  padding:13px 0;width:max-content;animation:scroll-x 34s linear infinite}
.marquee-track span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.marquee-track i{font-style:normal;font-size:9px;opacity:.6}
@keyframes scroll-x{to{transform:translateX(-50%)}}
@media(hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}

/* ============================================================
   SECTION SHELL + HEADINGS
   ============================================================ */
section{position:relative;padding:clamp(64px,9vw,128px) 0}
.sec-head{margin-bottom:clamp(38px,5vw,64px);max-width:760px}
.sec-head h2{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(1.8rem,4vw,3rem);margin-top:16px}
.sec-head.on-dark h2{color:var(--paper)}

/* ============================================================
   MATERIAL / WHAT IT IS
   ============================================================ */
.material-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
.material-copy .lede{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.4;margin-bottom:1.1em}
.material-copy p{margin-bottom:1.1em;max-width:52ch}
.material-copy p:last-child{margin-bottom:0}
.material-copy b{font-weight:600;box-shadow:inset 0 -.5em 0 rgba(37,99,235,.28)}

.reaction{background:var(--card);border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.rx-cap{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--concrete);margin-bottom:26px}
.rx-cap .dot{color:var(--amber-deep)}
.rx-stage{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rx-node{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;flex:1;min-width:78px;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.reaction.in .rx-node{opacity:1;transform:none}
.reaction.in .n1{transition-delay:.1s}
.reaction.in .n2{transition-delay:.45s}
.reaction.in .n3{transition-delay:1s}
.rx-node svg{width:clamp(46px,7vw,62px);height:auto}
.rx-node span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.4;color:var(--concrete)}
.rx-node .sphere{fill:none;stroke:var(--ink);stroke-width:2}
.rx-node .hilite{fill:var(--amber)}
.reaction.in .n1 .sphere{animation:pop .5s .15s both}
.rx-node .lime{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.rx-node .csh{fill:rgba(37,99,235,.16);stroke:var(--ink);stroke-width:2}
.rx-node .csh-grid{stroke:var(--amber-deep);stroke-width:1.4}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.rx-op{font-family:var(--disp);font-weight:500;font-size:1.6rem;color:var(--concrete);opacity:0;transition:opacity .5s}
.reaction.in .rx-op{opacity:1;transition-delay:.7s}
.rx-arrow{color:var(--amber-deep)}
.reaction.in .rx-arrow{transition-delay:.95s}
.rx-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--concrete)}
@media(max-width:860px){.material-grid{grid-template-columns:1fr}}

/* ============================================================
   WHY BUY
   ============================================================ */
.why{background:var(--paper-2)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.why-card{background:var(--card);border:1px solid var(--line);padding:clamp(24px,2.6vw,34px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.why-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -26px rgba(0,0,0,.45);border-color:var(--amber)}
.ic{display:block;width:56px;height:56px;
  background-color:rgba(37,99,235,.14);
  background-image:var(--icon);background-repeat:no-repeat;background-position:center;background-size:30px 30px;
  margin-bottom:22px;transition:background-color .25s,transform .25s}
.why-card:hover .ic{background-color:var(--amber);transform:translateY(-2px)}
.why-card h3{font-family:var(--disp);font-weight:600;font-size:1.25rem;margin-bottom:8px}
.why-card p{color:var(--concrete);font-size:.94rem}
@media(max-width:820px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}}

/* ============================================================
   CALCULATOR (signature, dark)
   ============================================================ */
.calc{background:var(--carbon);color:var(--paper)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.calc-controls,.calc-out{min-width:0}
.calc-intro{color:var(--mute-dk);max-width:42ch;margin-bottom:30px}
.ctrl{margin-bottom:26px}
.ctrl label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-dk);
  margin-bottom:14px}
.ctrl output{font-family:var(--disp);font-weight:700;font-size:1.4rem;color:var(--amber-bright);letter-spacing:0}
.ctrl label em{font-style:normal;color:var(--mute-dk);text-transform:none;letter-spacing:.02em}
.ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--line-dk);border-radius:4px;outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--amber-bright);cursor:pointer;
  border:3px solid var(--carbon);box-shadow:0 0 0 1px var(--amber-bright)}
.ctrl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber-bright);
  cursor:pointer;border:3px solid var(--carbon);box-shadow:0 0 0 1px var(--amber-bright)}
.calc-note{font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;color:#6f757d;margin-top:8px}

/* market switch — ₹ for India, AED for the Gulf */
.calc-market{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 28px}
.calc-market .cm-lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-dk)}
.cm-seg{display:inline-flex;border:1px solid var(--line-dk);background:var(--carbon-2)}
.cm-btn{appearance:none;background:none;border:0;cursor:pointer;padding:8px 15px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute-dk);transition:background .2s,color .2s}
.cm-btn + .cm-btn{border-left:1px solid var(--line-dk)}
.cm-btn:hover{color:var(--paper)}
.cm-btn.is-on{background:var(--amber);color:var(--amber-ink);font-weight:700}

/* the assumptions, stated up front rather than in fine print */
.calc-assume{border:1px solid var(--line-dk);background:rgba(255,255,255,.02);
  padding:16px 18px;margin:6px 0 0}
.calc-assume .ca-lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-bright);margin-bottom:10px}
.calc-assume ul{list-style:none;margin:0;padding:0}
.calc-assume li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:.88rem;color:var(--mute-dk)}
.calc-assume li b{font-family:var(--mono);font-size:12px;color:var(--paper);text-align:right}
.calc-assume p{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-dk);
  font-family:var(--mono);font-size:10.5px;line-height:1.6;color:#6f757d}

.calc-out{background:var(--carbon-2);border:1px solid var(--line-dk);padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:18px 0;border-bottom:1px solid var(--line-dk)}
.readout .ro-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-dk)}
.readout .ro-v{font-family:var(--disp);font-weight:500;font-size:1.3rem}
.readout .ro-v b{font-weight:700}
.readout .ro-v em{font-style:normal;font-size:.6em;color:var(--mute-dk);margin-left:3px}
.readout.amber .ro-v{color:var(--amber-bright)}
.readout.amber .ro-v{font-size:1.7rem}

.ro-bar{position:relative;height:10px;background:var(--line-dk);margin:26px 0 10px;overflow:hidden}
.ro-bar-fill{position:absolute;inset:0 100% 0 0;background:var(--amber-bright);transition:right .5s cubic-bezier(.6,0,.2,1)}
.ro-bar-lab{position:absolute;left:0;top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#6f757d}
#calc-cta{margin-top:auto}
@media(max-width:780px){.calc-grid{grid-template-columns:1fr}}

/* ============================================================
   PRODUCT RANGE
   ============================================================ */
.range-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.grade{background:var(--card);border:1px solid var(--line);padding:clamp(28px,3.2vw,44px);
  display:flex;flex-direction:column;transition:border-color .25s}
.grade.feat{background:var(--carbon);color:var(--paper);border-color:var(--carbon)}
.grade:hover{border-color:var(--amber)}
.grade-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.grade .ref{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--amber-deep);
  background:rgba(37,99,235,.14);padding:4px 10px}
.grade.feat .ref{color:var(--amber-bright);background:rgba(37,99,235,.2)}
.grade .role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--concrete)}
.grade.feat .role{color:var(--mute-dk)}
.grade h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:14px}
.grade p{color:var(--concrete);font-size:.96rem;margin-bottom:26px}
.grade.feat p{color:#c4c6c1}
/* says what the figures below it are: a measured lot, or a target */
.spec-basis{margin-top:auto;display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);
  padding:7px 10px;margin-bottom:14px;background:rgba(37,99,235,.1);
  border-left:2px solid var(--amber-deep)}
.grade.feat .spec-basis{color:var(--amber-bright);background:rgba(37,99,235,.16);
  border-left-color:var(--amber-bright)}
.spec-basis.is-target{color:var(--concrete);background:rgba(120,124,130,.14);border-left-color:var(--concrete)}
.grade.feat .spec-basis.is-target{color:var(--mute-dk);background:rgba(255,255,255,.06);border-left-color:var(--mute-dk)}
.spec-basis + .grade-specs{margin-top:0}
.grade-specs{margin-top:auto;border-top:1px solid var(--line)}
.grade.feat .grade-specs{border-top-color:var(--line-dk)}
.grade-specs div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.grade.feat .grade-specs div{border-bottom-color:var(--line-dk)}
.grade-specs dt{color:var(--concrete);letter-spacing:.02em}
.grade.feat .grade-specs dt{color:var(--mute-dk)}
.grade-specs dd{font-weight:700;color:var(--ink)}
.grade.feat .grade-specs dd{color:var(--paper)}
.grade-link{margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--amber-deep);display:inline-flex;gap:8px;align-items:center}
.grade.feat .grade-link{color:var(--amber-bright)}
.grade-link .arr{transition:transform .2s}
.grade-link:hover .arr{transform:translateX(4px)}
@media(max-width:720px){.range-grid{grid-template-columns:1fr}}

/* ============================================================
   SPEC TABLE
   ============================================================ */
.spec{background:var(--paper-2)}
.table-wrap{overflow-x:auto}
.spectable{width:100%;border-collapse:collapse;min-width:480px}
.spectable.cols-4{min-width:760px}
.spectable thead th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete);text-align:left;font-weight:400;padding:0 0 16px;border-bottom:2px solid var(--ink)}
.spectable thead th.num{text-align:right}
.spectable td{padding:18px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.spectable tbody tr{transition:background .2s}
.spectable tbody tr:hover{background:rgba(37,99,235,.07)}
.spectable td.param{font-family:var(--disp);font-weight:500;font-size:clamp(1rem,1.5vw,1.15rem)}
.spectable td.param .psub{font-family:var(--body);font-weight:400;color:var(--concrete);font-size:.78rem}
.spectable td.num{text-align:right;font-family:var(--mono);white-space:nowrap;font-size:.92rem}
.spectable td.num b{color:var(--amber-deep);font-weight:700}
/* a limit column, a result column and a lot-history column need air between
   them, and each needs to say which report it came from */
.spectable th + th,.spectable td + td{padding-left:22px}
.spectable thead th .psub{display:block;margin-top:5px;font-family:var(--body);
  text-transform:none;letter-spacing:.01em;font-size:.72rem;color:var(--concrete);opacity:.85}
.spectable td.num .psub{display:block;font-family:var(--body);color:var(--concrete);
  font-size:.72rem;margin-top:3px}
.spec-foot{margin-top:24px;color:var(--concrete);font-size:.86rem;max-width:64ch}
@media(max-width:520px){.spectable td.param .psub{display:none}}

/* ============================================================
   APPLICATIONS
   ============================================================ */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.app{background:var(--card);padding:clamp(26px,3vw,40px);min-height:200px;
  display:flex;flex-direction:column;transition:background .25s}
.app:hover{background:#fff}
.app .ic{width:52px;height:52px;margin-bottom:auto;background-size:28px 28px}
.app:hover .ic{background-color:var(--amber)}
.app h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.4rem);
  line-height:1.15;margin:22px 0 8px}
.app p{color:var(--concrete);font-size:.92rem}
@media(max-width:820px){.apps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.apps{grid-template-columns:1fr}}

/* ============================================================
   SUPPLY (dark, process)
   ============================================================ */
.supply{background:var(--carbon);color:var(--paper)}
.excavator-band{position:relative;height:clamp(120px,18vw,210px);margin-bottom:clamp(20px,3vw,40px);
  border-bottom:1px solid var(--line-dk)}
.excavator-band .excavator{position:absolute;bottom:0;right:0;width:clamp(160px,26vw,320px);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.excavator-band .crane{position:absolute;bottom:30%;left:0;width:clamp(150px,24vw,300px);opacity:.9}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);counter-reset:s}
.step{border-top:2px solid var(--line-dk);padding-top:20px;position:relative}
.step .step-n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--amber-bright);
  display:block;margin-bottom:14px}
.step h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;margin-bottom:8px;color:var(--paper)}
.step p{color:var(--mute-dk);font-size:.9rem}
.step::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--amber-bright);transition:width .6s ease}
.steps.in .step::before{width:40px}
.steps.in .step:nth-child(2)::before{transition-delay:.15s}
.steps.in .step:nth-child(3)::before{transition-delay:.3s}
.steps.in .step:nth-child(4)::before{transition-delay:.45s}

.supply-caps{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(34px,4vw,56px);
  padding-top:26px;border-top:1px solid var(--line-dk)}
.supply-caps span{font-family:var(--mono);font-size:12px;color:var(--mute-dk)}
.supply-caps b{color:var(--paper);font-weight:700}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}

/* ============================================================
   QUOTE / CONTACT
   ============================================================ */
.quote{background:var(--carbon-2);color:var(--paper)}
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.quote-intro h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.06;letter-spacing:-.015em;margin:16px 0 18px;color:var(--paper)}
.quote-intro p{color:var(--mute-dk);max-width:40ch;margin-bottom:30px}
.contact-lines a,.contact-lines span{display:block;font-family:var(--disp);font-size:1.15rem;
  padding:14px 0;border-bottom:1px solid var(--line-dk);transition:color .2s}
.contact-lines .lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#6f757d;display:block;margin-bottom:5px}
.contact-lines a:hover{color:var(--amber-bright)}

/* proof nudge under the contact lines — points at the published lab reports */
.quote-proof{margin-top:clamp(28px,3.5vw,40px);padding-top:24px;border-top:1px solid var(--line-dk)}
.quote-proof .qp-lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-bright);display:block;margin-bottom:10px}
.quote-intro .quote-proof p{color:var(--mute-dk);font-size:.92rem;max-width:42ch;margin-bottom:16px}
.qp-link{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--amber-bright);
  display:inline-flex;align-items:center;gap:9px}
.qp-link .arr{transition:transform .2s}
.qp-link:hover{color:var(--paper)}
.qp-link:hover .arr{transform:translateX(4px)}
html[data-theme="light"] .qp-link:hover{color:var(--ink)}

form{background:var(--carbon);border:1px solid var(--line-dk);padding:clamp(24px,3vw,40px);display:grid;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-dk);display:block;margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--carbon-2);border:1px solid var(--line-dk);
  color:var(--paper);font-family:var(--body);font-size:1rem;padding:13px 14px;border-radius:0;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber-bright)}
.field input.invalid,.field textarea.invalid{border-color:#d66}
.field textarea{resize:vertical;min-height:90px}
.field select{appearance:none;cursor:pointer}
.form-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#6f757d;text-align:center}
/* WhatsApp is the primary send; email sits beside it as the equal-weight
   fallback for anyone on desktop without WhatsApp. */
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .btn-ghost{color:var(--paper);border-color:var(--line-dk)}
form .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(max-width:780px){.quote-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}
@media(max-width:480px){.form-actions{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--carbon);color:var(--mute-dk);padding:40px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:12px;color:var(--paper);font-family:var(--disp);font-size:14px}
.foot-brand .logo{width:16px;color:var(--amber-bright)}
.foot-links{display:flex;gap:22px}
.foot-links a{font-family:var(--mono);font-size:12px;color:var(--mute-dk);transition:color .2s}
.foot-links a:hover{color:var(--amber-bright)}
.foot-meta{font-family:var(--mono);font-size:12px}

/* ============================================================
   FLOATING CTA
   ============================================================ */
.floating-cta{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:var(--amber-ink);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;padding:14px 20px;white-space:nowrap;
  max-width:calc(100vw - 2 * clamp(16px,3vw,28px));
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);transform:translateY(160%);transition:transform .4s ease}
.floating-cta.show{transform:none}
.floating-cta:hover{background:var(--amber-deep)}
.fc-dot{width:8px;height:8px;border-radius:50%;background:var(--amber-ink);flex:none;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
@media(max-width:520px){.floating-cta{font-size:12px;padding:12px 16px;letter-spacing:.04em}}

/* ============================================================
   MULTI-PAGE — active nav state
   ============================================================ */
nav.links a[aria-current="page"]{color:var(--ink)}
nav.links a[aria-current="page"]::after{width:100%}
.mobnav a[aria-current="page"]{color:var(--accent-deep)}
.foot-links a[aria-current="page"]{color:var(--amber-bright)}

/* ============================================================
   PAGE HERO (interior page banner) + BREADCRUMB
   ============================================================ */
.page-hero{position:relative;background:var(--carbon);color:var(--paper);overflow:hidden;
  padding:clamp(38px,7vw,72px) 0 clamp(34px,5vw,58px)}
.page-hero::after{content:"";position:absolute;right:-8%;top:-40%;width:52%;height:120%;
  background:radial-gradient(closest-side,rgba(37,99,235,.20),transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-dk)}
.breadcrumb a{color:var(--mute-dk);transition:color .2s}
.breadcrumb a:hover{color:var(--amber-bright)}
.breadcrumb span[aria-current]{color:var(--amber-bright)}
.breadcrumb i{font-style:normal;opacity:.5}
.page-hero h1{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.02;
  text-transform:uppercase;font-size:clamp(2.1rem,5.4vw,3.6rem);margin:clamp(14px,2vw,22px) 0 0}
.page-hero h1 .hl{color:var(--amber-bright)}
.page-hero .ph-sub{max-width:56ch;color:#cfd0cb;font-size:clamp(1rem,1.4vw,1.18rem);
  margin-top:clamp(14px,2vw,20px)}
.page-hero .ph-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line-dk)}
.page-hero .ph-chips li{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute-dk)}
.page-hero .ph-chips b{color:var(--paper);font-weight:700}

/* ============================================================
   PROSE (content pages)
   ============================================================ */
.prose{max-width:70ch}
.prose p{margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
.prose b{font-weight:600;box-shadow:inset 0 -.5em 0 rgba(37,99,235,.22)}
.lede{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.4;margin-bottom:1.1em}

/* ============================================================
   CLOSING CTA BAND
   ============================================================ */
.cta-band{background:var(--carbon);color:var(--paper);text-align:center}
.cta-band .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-band h2{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(1.7rem,4vw,2.8rem);max-width:20ch}
.cta-band p{color:var(--mute-dk);max-width:52ch}
.cta-band .cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}

/* ============================================================
   CASE STUDY
   ============================================================ */
.cs-lead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:start}
.cs-facts{background:var(--card);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.cs-facts h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete);margin-bottom:18px}
.cs-facts dl{display:grid;gap:0}
.cs-facts dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.cs-facts dl div:last-child{border-bottom:0}
.cs-facts dt{font-family:var(--body);color:var(--concrete);font-size:.9rem}
.cs-facts dd{font-family:var(--mono);font-weight:700;font-size:.9rem;text-align:right;color:var(--ink)}

.cs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);
  margin-top:clamp(30px,4vw,48px)}
.cs-metric{background:var(--carbon);color:var(--paper);padding:clamp(22px,2.6vw,30px)}
.cs-metric b{display:block;font-family:var(--disp);font-weight:700;line-height:1;
  font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--amber-bright)}
.cs-metric span{display:block;margin-top:10px;font-size:.86rem;color:var(--mute-dk)}
@media(max-width:820px){.cs-metrics{grid-template-columns:1fr 1fr}}

blockquote.cs-quote{margin:clamp(30px,4vw,52px) 0;padding:clamp(24px,3vw,40px);
  background:var(--paper-2);border-left:4px solid var(--accent)}
blockquote.cs-quote p{font-family:var(--disp);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.35;letter-spacing:-.01em}
blockquote.cs-quote cite{display:block;margin-top:16px;font-family:var(--mono);font-style:normal;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--concrete)}

.cs-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.cs-outcome{background:var(--card);border:1px solid var(--line);padding:clamp(22px,2.6vw,32px)}
.cs-outcome .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent-deep);
  background:rgba(37,99,235,.1);padding:3px 9px}
.cs-outcome h3{font-family:var(--disp);font-weight:600;font-size:1.2rem;margin:18px 0 8px}
.cs-outcome p{color:var(--concrete);font-size:.94rem}
@media(max-width:820px){.cs-outcomes{grid-template-columns:1fr}}

.cs-timeline{list-style:none;border-top:1px solid var(--line)}
.cs-timeline li{display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,3vw,40px);
  padding:22px 0;border-bottom:1px solid var(--line)}
.cs-timeline .yr{font-family:var(--disp);font-weight:700;font-size:1.3rem;color:var(--accent-deep)}
.cs-timeline h3{font-family:var(--disp);font-weight:600;font-size:1.1rem;margin-bottom:6px}
.cs-timeline p{color:var(--concrete);font-size:.92rem;max-width:62ch}
@media(max-width:600px){.cs-timeline li{grid-template-columns:1fr;gap:6px}}

.cs-sources{margin-top:clamp(28px,3vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.cs-sources h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete);margin-bottom:14px}
.cs-sources ol{margin-left:18px;color:var(--concrete);font-size:.86rem;line-height:1.9}
.cs-sources a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
@media(max-width:820px){.cs-lead{grid-template-columns:1fr}}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */
.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.sitemap-col{background:var(--card);border:1px solid var(--line);padding:clamp(22px,2.6vw,32px)}
.sitemap-col h2{font-family:var(--disp);font-weight:600;font-size:1.25rem;margin-bottom:6px}
.sitemap-col > p{color:var(--concrete);font-size:.9rem;margin-bottom:16px}
.sitemap-col ul{list-style:none;border-top:1px solid var(--line)}
.sitemap-col li{border-bottom:1px solid var(--line)}
.sitemap-col li a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 0;font-family:var(--mono);font-size:13px;color:var(--ink);transition:color .2s}
.sitemap-col li a:hover{color:var(--accent-deep)}
.sitemap-col li a .arr{color:var(--accent);transition:transform .2s}
.sitemap-col li a:hover .arr{transform:translateX(4px)}
@media(max-width:820px){.sitemap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sitemap-grid{grid-template-columns:1fr}}

/* ============================================================
   THEME TOGGLE (button in header)
   ============================================================ */
.theme-toggle{width:40px;height:40px;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s,background .2s;flex:none}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-deep)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .ic-moon{display:none}
html[data-theme="light"] .theme-toggle .ic-sun{display:none}
html[data-theme="light"] .theme-toggle .ic-moon{display:block}

/* ============================================================
   LIGHT THEME
   The base design uses carbon (dark) grounds for the hero, calculator,
   supply, quote, page-hero, cta-band, featured cards and footer. Light
   theme remaps those surface tokens to cool light greys and flips the
   text that was explicitly light back to ink. Remapping --amber-bright to
   the deeper blue re-tones every "accent on dark" spot in one move.
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --paper:#F5F7FA;
  --paper-2:#EBEEF3;
  --card:#FFFFFF;
  --carbon:#E4E8EF;     /* former dark bands → cool light grey */
  --carbon-2:#EFF2F7;
  --ink:#16181C;
  --concrete:#6B717C;
  --line:#DBE0E8;
  --line-dk:#D2D8E1;    /* was dark hairline; now a light hairline */
  --mute-dk:#5A616D;    /* was muted-on-dark; now readable mid grey on light */
  --amber-bright:#1D4ED8; /* accent-on-dark spots → deep blue for contrast on light */
}
html[data-theme="light"] header{background:rgba(245,247,250,.86)}

/* section text that was explicitly light → back to ink */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .calc,
html[data-theme="light"] .supply,
html[data-theme="light"] .quote,
html[data-theme="light"] .cta-band,
html[data-theme="light"] .grade.feat,
html[data-theme="light"] .cs-metric,
html[data-theme="light"] footer{color:var(--ink)}

html[data-theme="light"] .sec-head.on-dark h2,
html[data-theme="light"] .trust-chips b,
html[data-theme="light"] .float-card .fc-v,
html[data-theme="light"] .quote-intro h2,
html[data-theme="light"] .step h3,
html[data-theme="light"] .supply-caps b,
html[data-theme="light"] .grade.feat .grade-specs dd,
html[data-theme="light"] .ph-chips b,
html[data-theme="light"] .foot-brand,
html[data-theme="light"] .hero .btn-ghost,
html[data-theme="light"] form .btn-ghost,
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .calc-assume li b,
html[data-theme="light"] .cm-btn:hover,
html[data-theme="light"] .field select{color:var(--ink)}

/* the assumptions panel reads as a raised tint on dark, an inset one on light */
html[data-theme="light"] .calc-assume{background:rgba(22,24,28,.03)}

/* hardcoded light-grey copy → readable on light */
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .page-hero .ph-sub,
html[data-theme="light"] .grade.feat p{color:#495059}

/* surfaces that were hardcoded dark */
html[data-theme="light"] .float-card{background:rgba(255,255,255,.9);border-color:var(--line);
  box-shadow:0 12px 30px -14px rgba(20,30,60,.28)}
html[data-theme="light"] .cs-metric{border:1px solid var(--line)}
html[data-theme="light"] .grade.feat{box-shadow:0 20px 50px -34px rgba(20,30,60,.4)}

/* glows sit better a touch stronger on light */
html[data-theme="light"] .hero::after{background:radial-gradient(closest-side,rgba(37,99,235,.14),transparent 70%)}

/* ============================================================
   PARALLAX LAYERS
   JS sets --parallax-y on each [data-parallax] node from scroll
   position. Most nodes translate themselves; page-hero moves only
   its decorative glow (::after) so the heading text stays crisp.
   ============================================================ */
[data-parallax]{--parallax-y:0px}
[data-parallax]:not(.page-hero){transform:translate3d(0,var(--parallax-y),0);will-change:transform}
.page-hero[data-parallax]::after{transform:translate3d(0,var(--parallax-y),0);will-change:transform}
@media(prefers-reduced-motion:reduce){
  [data-parallax]:not(.page-hero){transform:none}
  .page-hero[data-parallax]::after{transform:none}
}

/* ============================================================
   SMARTPHONE REFINEMENTS
   Fine-tunes the layout below the existing breakpoints so the
   page reads perfectly on real handsets (≤600px and ≤380px).
   ============================================================ */
@media(max-width:600px){
  :root{--head-h:58px}
  section{padding:clamp(48px,13vw,72px) 0}

  /* hero */
  .hero{padding-top:32px}
  .hero-title{font-size:clamp(2.3rem,10.5vw,3.4rem)}
  .hero-sub{font-size:1.02rem;max-width:100%}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px}
  .hero-cta .btn{width:100%}
  .trust-chips{gap:8px 18px}

  /* hero visual — keep the floating spec cards inside the frame */
  .powder-stage{width:min(76%,290px)}
  .float-card{padding:8px 11px}
  .float-card .fc-v{font-size:1.12rem}
  .float-card .fc-k{font-size:9px}
  .card-a{top:0;left:0}
  .card-b{bottom:10%;right:-2%}
  .card-c{bottom:-2%;left:4%}

  /* section headings + spacing */
  .sec-head{margin-bottom:32px}
  .page-hero h1{font-size:clamp(2rem,8.4vw,2.8rem)}

  /* closing CTA + hero buttons stack full-width for easy thumbs */
  .cta-band .cta-row{width:100%;flex-direction:column}
  .cta-band .cta-row .btn{width:100%}

  /* bigger tap targets in the mobile menu */
  .mobnav a{padding:14px 0;font-size:15px}
  .mobnav.open{max-height:560px}

  /* momentum scroll for the spec table */
  .table-wrap{-webkit-overflow-scrolling:touch}
}

@media(max-width:380px){
  :root{--gutter:16px}
  .brandtext small{display:none}
  .hero-title{font-size:clamp(1.95rem,10.5vw,2.5rem)}
  .hero-stats{grid-template-columns:1fr}
  .hero-stats .stat:nth-child(even){padding-left:0}
  .float-card{padding:7px 9px}
  .float-card .fc-v{font-size:1rem}
  .float-card .fc-k{letter-spacing:.1em}
  .btn{padding:13px 18px}
  .theme-toggle,.hamburger{width:38px;height:38px}
}

/* ============================================================
   PHOTOGRAPHY — export banner, facility gallery, source figure
   Real photographs of supply logistics and the source facility,
   dropped into the home, products and about pages.
   ============================================================ */
.export{background:var(--carbon);color:var(--paper)}
/* Stacked, not side by side — both banners carry set type that becomes
   unreadable at half width. */
.export-figures{display:grid;gap:clamp(14px,2vw,24px)}
.export-figure{border:1px solid var(--line-dk);overflow:hidden;background:#000;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8);margin:0}
.export-figure img{width:100%;height:auto;display:block}
.export-caps{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--line-dk)}
.export-caps span{font-family:var(--mono);font-size:12px;color:var(--mute-dk)}
.export-caps b{color:var(--paper);font-weight:700}

.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)}
.facility-grid figure{position:relative;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/4;background:var(--paper-2)}
.facility-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.facility-grid figure:hover img{transform:scale(1.05)}
.facility-foot{margin-top:24px;color:var(--concrete);font-size:.9rem;max-width:64ch}
@media(max-width:760px){
  .facility-grid{grid-template-columns:1fr 1fr}
  .facility-grid figure{aspect-ratio:4/3}
}
@media(max-width:520px){.facility-grid{grid-template-columns:1fr}}

.photo-figure{margin-top:clamp(32px,4vw,56px);border:1px solid var(--line);overflow:hidden;position:relative}
.photo-figure img{width:100%;height:clamp(240px,40vw,440px);object-fit:cover;object-position:center 42%}
.photo-figure figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.6;
  color:var(--concrete);padding:14px 16px;border-top:1px solid var(--line);background:var(--card)}

/* ============================================================
   TEST REPORTS / CERTIFICATES PAGE
   A register of the real lab documents: headline numbers, a summary
   table, then one horizontal card per report — page thumbnail on the
   left, extracted results and PDF links on the right.
   ============================================================ */
.sec-head .sec-sub{margin-top:16px;color:var(--concrete);max-width:62ch}
.sec-head.on-dark .sec-sub{color:var(--mute-dk)}

/* headline numbers — reuses .cs-metric from the case study */
.cert-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);
  margin-bottom:clamp(34px,4.5vw,60px)}
.cert-metrics .cs-metric b small{font-family:var(--mono);font-size:.36em;font-weight:700;
  letter-spacing:.02em;margin-left:2px}
.cert-metrics .cs-metric span i{display:block;font-family:var(--mono);font-style:normal;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-bright);margin-top:6px}
@media(max-width:820px){.cert-metrics{grid-template-columns:1fr 1fr}}

/* summary table — the "Report" column links down to the document */
.cert-summary .spectable{min-width:620px}
.cert-summary .spectable td.num a{color:var(--amber-deep);text-decoration:underline;
  text-underline-offset:3px;font-size:.82rem}
.cert-summary .spectable td.num a:hover{color:var(--ink)}
.cert-summary .spectable td.num .psub{display:block;font-family:var(--body);color:var(--concrete);
  font-size:.74rem;letter-spacing:0}

/* the document register */
.reports{background:var(--paper-2)}
.cert-grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.cert{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(20px,3vw,40px);
  background:var(--card);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);
  scroll-margin-top:calc(var(--head-h) + 24px);transition:border-color .25s,box-shadow .25s}
.cert:hover{border-color:var(--amber);box-shadow:0 20px 44px -32px rgba(20,30,60,.45)}
.cert:target{border-color:var(--amber)}

/* The two halves of NBML report 1070 are the pair that proves IS 3812
   conformity end to end, so they lead the grid and carry a heavier frame.
   The flag spans both columns above the thumbnail and body. */
.cert-primary{border-color:var(--amber);border-width:2px;
  box-shadow:0 18px 40px -30px rgba(20,30,60,.5);
  padding:clamp(24px,3vw,36px);grid-template-columns:minmax(200px,280px) 1fr}
.cert-primary h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}

/* Other tests sit below the primary pair, deliberately quieter: hairline
   frame, smaller thumbnail, muted heading. The contrast is what marks the
   primary reports as the ones to read first. */
.cert-compact{grid-template-columns:minmax(130px,168px) 1fr;padding:clamp(16px,2vw,24px)}
.cert-compact h3{font-size:clamp(1.02rem,1.6vw,1.2rem)}
.cert-compact .cert-lab{font-size:10px}
.cert-compact .cert-results{margin-top:14px}
.cert-flag{grid-column:1/-1;justify-self:start;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber);
  padding:5px 11px;margin-bottom:-6px}

/* Divider label between the primary pair and the corroborating reports. */
.cert-band{border-top:2px solid var(--ink);padding-top:16px;display:grid;
  grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(20px,3vw,40px);align-items:baseline}
/* "Other tests" — collapsed by default, so the primary pair owns the page. */
.cert-other{border-top:1px solid var(--line);margin-top:clamp(16px,2.4vw,30px)}
.cert-other summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:minmax(180px,240px) 1fr auto;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:18px 0}
.cert-other summary::-webkit-details-marker{display:none}
.cert-other summary:hover .cert-band-lab,.cert-other summary:hover b{color:var(--ink)}
.cert-other .cert-band-lab{color:var(--concrete);transition:color .2s}
.co-desc{color:var(--concrete);font-size:.92rem;max-width:70ch}
.co-toggle{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.co-toggle b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:400;transition:color .2s}
/* Chevron: a rotated corner, pointing down when closed and up when open. */
.co-ind{width:8px;height:8px;border-right:2px solid var(--amber-deep);
  border-bottom:2px solid var(--amber-deep);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease}
.cert-other[open] .co-ind{transform:rotate(-135deg)}
.cert-other-grid{display:grid;gap:clamp(18px,2.4vw,28px);padding:6px 0 clamp(6px,1vw,12px)}
.cert-band-lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-deep)}
.cert-band p{color:var(--concrete);font-size:.92rem;max-width:70ch}
.cert-band + .cert{margin-top:-4px}

.cert-thumb{position:relative;display:block;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);aspect-ratio:1/1.414}
.cert-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s ease}
.cert:hover .cert-thumb img{transform:scale(1.04)}
.cert-open{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-ink);background:var(--amber);
  transform:translateY(100%);transition:transform .25s ease}
.cert-thumb:hover .cert-open,.cert-thumb:focus-visible .cert-open{transform:none}

.cert-body{display:flex;flex-direction:column;min-width:0}
.cert-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:10px 16px;margin-bottom:12px}
.cert-lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--concrete)}
.cert-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--amber-deep);
  background:rgba(37,99,235,.1);padding:4px 10px;white-space:nowrap}
.cert h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2vw,1.55rem);
  line-height:1.15;margin-bottom:18px}

.cert-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);
  border-top:1px solid var(--line)}
.cert-meta div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.cert-meta dt{font-size:.84rem;color:var(--concrete)}
.cert-meta dd{font-family:var(--mono);font-size:.8rem;font-weight:700;text-align:right;
  color:var(--ink);word-break:break-word}

.cert-results{list-style:none;margin-top:18px;border-top:2px solid var(--ink)}
.cert-results li{display:grid;grid-template-columns:1fr auto 90px;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.cert-results span{font-size:.9rem}
.cert-results b{font-family:var(--mono);font-size:.95rem;color:var(--amber-deep)}
.cert-results i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--concrete);text-align:right}
.cert-note{margin-top:16px;font-size:.86rem;color:var(--concrete);max-width:64ch}

.cert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:auto;
  padding-top:22px}
.cert-dl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--amber-deep);
  display:inline-flex;align-items:center;gap:8px}
.cert-dl:hover{color:var(--ink)}
.cert-dl .arr{transition:transform .2s}
.cert-dl:hover .arr{transform:translateY(3px)}

@media(max-width:760px){
  .cert{grid-template-columns:1fr;gap:22px}
  .cert-thumb{max-width:260px;aspect-ratio:1/1.1}
  .cert-meta{grid-template-columns:1fr}
  .cert-band{grid-template-columns:1fr;gap:10px}
  .cert-flag{margin-bottom:-10px}
  .cert-other summary{grid-template-columns:1fr auto;gap:6px 16px}
  .co-desc{grid-column:1/-1;order:3}
}
@media(max-width:520px){
  .cert-results li{grid-template-columns:1fr auto;row-gap:2px}
  .cert-results i{grid-column:2;text-align:right}
}

/* home-page proof strip — turns the standards claim into linked evidence */
.proof{background:var(--paper-2);padding:clamp(48px,6vw,84px) 0}
.proof-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.proof-copy h2{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(1.6rem,3.2vw,2.4rem);margin:16px 0 12px}
.proof-copy p{color:var(--concrete);max-width:46ch;margin-bottom:26px}
.proof-figs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.proof-figs li{background:var(--card);padding:clamp(18px,2.2vw,26px)}
.proof-figs b{display:block;font-family:var(--disp);font-weight:700;line-height:1;
  font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--amber-deep)}
.proof-figs b small{font-family:var(--mono);font-size:.4em;font-weight:700;margin-left:2px}
.proof-figs span{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--concrete)}
/* second line gives the requirement, third the report and date it came from,
   so the number above can never be read as a bare marketing figure */
.proof-figs span i{display:block;margin-top:5px;font-style:normal;text-transform:none;
  letter-spacing:.04em;font-size:10.5px;color:var(--amber-deep)}
.proof-figs span u{display:block;margin-top:4px;text-decoration:none;text-transform:none;
  letter-spacing:.02em;font-size:9.5px;color:var(--concrete);overflow-wrap:anywhere}
@media(max-width:820px){.proof-inner{grid-template-columns:1fr}}

/* the two primary reports, promoted out of the certificates page */
.proof-reports{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,20px);margin-top:clamp(28px,3.5vw,44px)}
.proof-reports a{display:flex;flex-direction:column;height:100%;background:var(--card);
  border:2px solid var(--ink);padding:clamp(20px,2.4vw,28px);transition:border-color .2s,transform .2s,box-shadow .2s}
.proof-reports a:hover{border-color:var(--amber);transform:translateY(-3px);
  box-shadow:0 18px 40px -30px rgba(20,30,60,.5)}
.pr-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-ink);background:var(--amber);padding:4px 9px;align-self:start}
.proof-reports b{display:block;font-family:var(--disp);font-weight:600;line-height:1.15;
  font-size:clamp(1.15rem,2vw,1.4rem);margin:14px 0 8px}
.pr-meta{display:block;font-size:.88rem;color:var(--concrete);max-width:44ch}
.pr-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--amber-deep)}
.proof-reports a:hover .pr-go .arr{transform:translateX(4px)}
.pr-go .arr{transition:transform .2s}
@media(max-width:820px){.proof-reports{grid-template-columns:1fr}}

/* the laboratories (dark band) */
.labs{background:var(--carbon);color:var(--paper)}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.lab{border-top:2px solid var(--line-dk);padding-top:20px}
.lab .lab-n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--amber-bright);
  display:block;margin-bottom:14px}
.lab h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.4rem);
  margin-bottom:10px;color:var(--paper)}
.lab p{color:var(--mute-dk);font-size:.92rem;max-width:52ch}
@media(max-width:760px){.lab-grid{grid-template-columns:1fr}}

html[data-theme="light"] .labs{color:var(--ink)}
html[data-theme="light"] .lab h3{color:var(--ink)}

/* The light theme remaps --carbon to a pale grey, so anything that painted
   itself --paper on a "dark" band turns near-white on near-white. The export
   band was already affected (its caps read as ghosts); the modes and sourcing
   panel added with it need the same flip. */
html[data-theme="light"] .export{color:var(--ink)}
html[data-theme="light"] .export-caps b,
html[data-theme="light"] .export-mode h3,
html[data-theme="light"] .sourcing .src-list,
html[data-theme="light"] .check-grid label:hover,
html[data-theme="light"] .check-grid input:checked + span{color:var(--ink)}
html[data-theme="light"] .export-figure figcaption,
html[data-theme="light"] .export-mode p,
html[data-theme="light"] .sourcing .src-sub,
html[data-theme="light"] .export-foot{color:var(--mute-dk)}
html[data-theme="light"] .sourcing{background:rgba(37,99,235,.07)}
html[data-theme="light"] .lab p{color:var(--mute-dk)}
html[data-theme="light"] .cert-metrics .cs-metric span i{color:var(--accent-deep)}

/* ============================================================
   REVEAL + A11Y
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .reaction .rx-node,.reaction .rx-op{opacity:1;transform:none}
  .powder{animation:none}
  .marquee-track{animation:none}
}

/* ============================================================
   CLAIM DISCIPLINE & EXPORT MODES
   Styles added with the August 2026 copy pass: everything here
   exists to keep a measured result, a standard requirement and a
   target/indicative figure visibly different from one another.
   ============================================================ */

/* footnote under the hero stat bar — the asterisked figures are guidance
   and a calculation, and they say so in the same eyeline as the numbers */
.hero-stats-foot{position:relative;z-index:2;font-family:var(--mono);font-size:11px;line-height:1.75;
  letter-spacing:.02em;color:var(--mute-dk);max-width:88ch;
  padding-top:16px;padding-bottom:clamp(28px,4vw,44px);margin-top:-2px}
.hero-stats-foot sup{color:var(--amber-bright);font-weight:700}
.hero-stats .stat span sup{color:var(--amber-bright);font-weight:700;margin-left:1px}
/* Not every stat is a counted number now: "15–35%" is a range and "Every lot"
   is a label. Both take the .count typography so the row stays level; the
   worded one drops a size because it is words, not a figure. */
.hero-stats .stat b:not(.count){display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--amber-bright);line-height:1}
.hero-stats .stat b.stat-word{font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14}

/* an awaited laboratory result — never styled like a passing figure */
.is-pending{color:var(--concrete);font-weight:400;font-style:italic}
.grade-pending{font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.02em;
  color:var(--concrete);margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.grade.feat .grade-pending{color:var(--mute-dk);border-top-color:var(--line-dk)}

/* caption above a results table, naming the lot it belongs to */
.tbl-cap{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.3rem);
  letter-spacing:-.01em;color:var(--ink);margin:clamp(30px,4vw,48px) 0 14px;
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
.tbl-cap:first-of-type{margin-top:0}
.tbl-cap span{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.04em;text-transform:none;color:var(--concrete);margin-top:7px}
.cert-summary + .spec-foot{margin-bottom:8px}

/* report number + date under a headline metric, so no figure travels alone */
.cert-metrics .cs-metric span u{display:block;text-decoration:none;font-family:var(--mono);
  font-size:10px;letter-spacing:.03em;color:var(--concrete);margin-top:5px;word-break:break-word}
/* the "Report" cell carries the document reference over its date */
.spectable td.num .psub{display:block;margin-top:3px}

/* ---- export modes ---- */
.export .sec-head .sec-sub{margin-top:14px}
.export-modes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin:0 0 clamp(28px,4vw,44px);padding:0}
.export-mode{display:flex;flex-direction:column;background:var(--carbon-2);
  border:1px solid var(--line-dk);border-top:2px solid var(--amber-bright);
  padding:clamp(20px,2.4vw,28px)}
.export-mode .em-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--amber-bright)}
.export-mode h3{font-family:var(--disp);font-weight:600;font-size:1.22rem;color:var(--paper);margin:12px 0 10px}
.export-mode p{color:var(--mute-dk);font-size:.94rem;line-height:1.6;margin:0 0 16px}
.export-mode .em-caveat{margin-top:auto;font-family:var(--mono);font-size:10.5px;line-height:1.6;
  letter-spacing:.03em;color:var(--concrete);padding-top:12px;border-top:1px dashed var(--line-dk)}

.export-figure figcaption{font-family:var(--mono);font-size:11px;line-height:1.65;letter-spacing:.03em;
  color:var(--mute-dk);padding:12px 14px;border-top:1px solid var(--line-dk);background:var(--carbon-2)}

.sourcing{margin-top:clamp(24px,3vw,36px);padding:clamp(18px,2.2vw,26px);
  background:rgba(37,99,235,.10);border:1px solid var(--line-dk);border-left:3px solid var(--amber-bright)}
.sourcing .src-lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-bright)}
.sourcing .src-list{display:block;font-family:var(--disp);font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--paper);margin:10px 0 8px}
.sourcing .src-sub{display:block;font-family:var(--mono);font-size:11px;line-height:1.7;
  letter-spacing:.03em;color:var(--mute-dk)}
.export-foot{font-family:var(--mono);font-size:11px;line-height:1.75;letter-spacing:.02em;
  color:var(--mute-dk);max-width:80ch;margin-top:18px}

/* ---- calculator: the price assumptions are the buyer's to edit ---- */
.calc-assume li{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.calc-assume li label{font-family:inherit;font-size:inherit;color:inherit;letter-spacing:inherit;
  text-transform:none;margin:0}
.ca-in{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;
  color:var(--mute-dk);flex:none}
.ca-in .ca-cur{font-style:normal;color:var(--paper)}
.ca-in em{font-style:normal;font-size:11px;color:var(--concrete);white-space:nowrap}
.ca-in input{width:5.6em;background:var(--carbon);border:1px solid var(--line-dk);color:var(--paper);
  font-family:var(--mono);font-size:13px;font-weight:700;padding:7px 8px;border-radius:0;
  text-align:right;transition:border-color .2s}
.ca-in input:focus{outline:none;border-color:var(--amber-bright)}
html[data-theme="light"] .ca-in input{background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-theme="light"] .ca-in .ca-cur{color:var(--ink)}

/* ---- enquiry form: supply mode checkboxes ---- */
.field-check{border:0;padding:0;margin:0;min-width:0}
.field-check legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-dk);padding:0;margin-bottom:10px}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check-grid label{display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--carbon-2);border:1px solid var(--line-dk);padding:12px 13px;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--mute-dk);
  transition:border-color .2s,color .2s}
.check-grid label:hover{border-color:var(--amber-bright);color:var(--paper)}
.check-grid input{width:16px;height:16px;flex:none;accent-color:var(--amber);cursor:pointer;margin:0}
.check-grid input:checked + span{color:var(--paper)}
.check-grid label:focus-within{border-color:var(--amber-bright)}
.field label .lab-opt{font-family:var(--mono);letter-spacing:.06em;text-transform:none;
  color:var(--concrete);margin-left:8px}
@media(max-width:480px){.check-grid{grid-template-columns:1fr}}

/* ============================================================
   MOBILE — handset layout
   The hero spec cards were absolutely positioned against a stage
   that shrinks on small screens, so on a real phone they collided
   with each other and with the caption underneath (and the ones
   hanging off the left edge were clipped by .hero's overflow).
   Below 700px they stop floating and become an ordinary row of
   three under the powder, which is what they were always saying.
   ============================================================ */
@media(max-width:700px){
  .hero-visual{width:100%}

  .float-card{
    position:static;                 /* out of the overlap entirely */
    animation:none;                  /* drifting in a grid just jitters the row */
    transform:none;
    background:rgba(31,34,40,.72);
    padding:11px 12px;
    text-align:center;
    box-shadow:none;
    min-width:0;
  }
  .float-card .fc-k{font-size:8.5px;letter-spacing:.08em;line-height:1.35;
    overflow-wrap:anywhere}
  .float-card .fc-v{font-size:1.05rem;white-space:nowrap}
  .float-card .fc-v small{display:block;margin-left:0;font-size:.55em}

  /* the stage stops being a square canvas and becomes a plain stack:
     powder on top, the three cards in a row under it */
  .powder-stage{display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;align-items:center;justify-items:center;
    width:100%;max-width:420px;aspect-ratio:auto;gap:10px}
  .powder-stage .powder{grid-column:1 / -1;width:min(72%,240px);margin:0 auto}
  .powder-stage .ring{display:none}   /* the rings framed a square stage */
  .hero-visual-note{margin-top:18px;max-width:40ch}
}

@media(max-width:400px){
  /* three cards side by side stop being legible about here */
  .powder-stage{grid-template-columns:1fr 1fr}
  .powder-stage .powder{width:min(66%,200px)}
  .float-card:last-of-type{grid-column:1 / -1}
}

/* ---- the rest of the August 2026 additions, on a handset ---- */
@media(max-width:900px){
  .export-modes{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero-stats-foot{font-size:10px;line-height:1.7;padding-top:14px}
  .export-mode{padding:18px}
  .sourcing .src-list{word-spacing:.04em}
  .tbl-cap{font-size:1.05rem}
  /* number pads have their own spinners; ours only steal width */
  .ca-in input{width:5em}
  .calc-assume li{gap:8px}
}

/* Spinner arrows inside a 5em field push the digits out of view on
   WebKit — the sliders above already give a coarse control. */
.ca-in input::-webkit-outer-spin-button,
.ca-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ca-in input[type=number]{-moz-appearance:textfield;appearance:textfield}