/* ============================================================
   VATS Filtration — v10

   Structure and composition come from v7 (the approved design):
   ghosted section numerals, eyebrow + display headline, layered
   rounded panels, numbered rows, mono micro-labels, big numerals
   with deltas, italic pull-quotes.

   Type, palette and airiness come from the Vercel build: Space
   Grotesk display, white + deep navy, green as the single accent,
   generous whitespace, cubic-bezier(0.16,1,0.3,1) motion.

   No cream. No gradient icon tiles.
   ============================================================ */

:root {
  --ink-50:#eff4fe; --ink-100:#d2dffc; --ink-200:#aac2f6; --ink-300:#80a0ea;
  --ink-400:#567edc; --ink-500:#2d5ecf; --ink-600:#234cab; --ink-700:#1e3e88;
  --ink-800:#1b3572; --ink-900:#172e63;

  --green-50:#edf7ef; --green-300:#5fb874; --green-400:#38a157;
  --green-500:#1f8a44; --green-600:#156e36; --green-700:#11592c;

  --white:#fff; --mist:#eff4fe; --paper:#f8fafe;

  /* Literal twins of ink-900 and ink-200, as rgb triplets, for the scrims
     and hairlines that need a per-use alpha and so cannot take a hex token.
     --cta-tail is the third stop of the CTA band gradient. They exist so
     those hard-coded colours follow the ink ramp instead of freezing the old
     navy. The brighter ramp above was a home-only trial on 3 Sept; the client
     approved it for the whole site on 7 Sept. */
  --navy-rgb:23,46,99; --hair-rgb:170,194,246; --cta-tail:#101f47;
  --stone-400:#8a8f88; --stone-500:#6c716a; --stone-600:#51554f;
  --alert:#d8442b;

  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Vercel-scale display type, one notch back from its 8.5rem */
  --t-display:clamp(2.6rem,1.4rem + 4.6vw,5.4rem);
  --t-h1:clamp(2.3rem,1.4rem + 3.4vw,4.4rem);
  --t-h2:clamp(1.9rem,1.25rem + 2.5vw,3.4rem);
  --t-h3:clamp(1.2rem,1.05rem + .75vw,1.6rem);
  --t-lead:clamp(1.05rem,1rem + .35vw,1.28rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:1340px;
  --r:14px; --r-lg:22px; --r-xl:30px;
  --hdr:78px;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 20px)}
body{
  margin:0;font-family:var(--font-sans);font-size:1rem;line-height:1.62;
  color:var(--stone-500);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* clip, never hidden — `hidden` makes body a scroll container and
     silently kills every position:sticky descendant. */
  overflow-x:clip;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:640px){.shell{padding-inline:2rem}}
@media(min-width:1024px){.shell{padding-inline:3.25rem}}

.sec{padding-block:clamp(3rem,2rem + 3vw,5.5rem);position:relative}
.sec--tight{padding-block:clamp(2rem,1.4rem + 1.8vw,3.25rem)}
.sec--dark{background:var(--ink-900);color:var(--ink-100)}
.sec--paper{background:var(--paper)}
/* Impact / oil-saved: the environmental read the tagline promises. Both
   layers sit behind the content at low opacity, so the ledger keeps its
   contrast on the navy. */
.sec--eco{position:relative;isolation:isolate;overflow:hidden}
.sec--eco>*{position:relative;z-index:1}
.sec--eco::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(46,125,50,.28) 0,transparent 220px),
             radial-gradient(120% 90% at 50% 108%,rgba(31,138,68,.42) 0%,rgba(31,138,68,.14) 42%,transparent 72%)}
.treeline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(84px,11vw,150px);
  z-index:0;opacity:.20;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.treeline{transition:opacity .6s var(--ease)}}

.sec--inset{border-radius:var(--r-xl);margin-inline:clamp(0px,2vw,28px);overflow:hidden}

/* ---------- type ---------- */
.display,.h1,.h2,.h3{
  font-family:var(--font-display);font-weight:600;color:var(--ink-900);
  letter-spacing:-.03em;line-height:1.06;
}
.display{font-size:var(--t-display)}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2);line-height:1.1}
.h3{font-size:var(--t-h3);line-height:1.24;letter-spacing:-.015em}
.sec--dark .display,.sec--dark .h1,.sec--dark .h2,.sec--dark .h3,
.hero .display,.hero .h1,.hero .h2,.phero .h1,.phero .h2{color:#fff}

.lead{font-size:var(--t-lead);line-height:1.6;color:var(--stone-500)}
.sec--dark .lead,.phero .lead,.hero .lead{color:var(--ink-200)}
.prose p{margin-bottom:1.05em}.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink-900);font-weight:600}
.sec--dark .prose strong{color:#fff}

.acc{color:var(--green-500)}
.sec--dark .acc,.hero .acc{color:var(--green-300)}

.tagline{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.85rem);
  color:var(--green-500);letter-spacing:-.02em;line-height:1.35;
}
.sec--dark .tagline{color:var(--green-300)}

.mono{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--stone-400);
}
.mono b{color:var(--ink-600);font-weight:500}
.sec--dark .mono,.hero .mono,.phero .mono{color:var(--ink-300)}
.sec--dark .mono b,.hero .mono b,.phero .mono b{color:var(--green-300)}

/* ---------- section head ---------- */
.shead{display:flex;gap:clamp(1rem,2.5vw,2.25rem);align-items:flex-start}
.shead__n{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(2.6rem,1.6rem + 3.6vw,4.6rem);line-height:.85;
  color:var(--ink-900);opacity:.13;flex:none;
}
.sec--dark .shead__n{color:#fff;opacity:.18}
.shead__eyebrow{
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-600);
  display:block;margin-bottom:.6rem;
}
.sec--dark .shead__eyebrow{color:var(--green-300)}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;
  border:1px solid var(--ink-200);padding:.32rem .85rem;
  font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone-500);background:var(--white);
}
.chip--green{border-color:var(--green-300);color:var(--green-600);background:var(--green-50)}
.chip--dark{border-color:rgba(var(--hair-rgb),.3);color:var(--ink-200);background:transparent}
.chip--onDark-green{border-color:rgba(95,184,116,.55);color:var(--green-300);background:transparent}
.chip .dot{width:6px;height:6px;border-radius:999px;background:var(--green-500)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:999px;padding:.9rem 1.7rem;font-size:.92rem;font-weight:550;
  letter-spacing:-.01em;white-space:nowrap;will-change:transform;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.btn .arw{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--primary{background:var(--ink-800);color:#fff}
.btn--primary:hover{background:var(--ink-900);box-shadow:0 10px 28px -12px rgba(16,29,58,.65)}
.btn--green{background:var(--green-600);color:#fff}
.btn--green:hover{background:var(--green-700);box-shadow:0 10px 28px -12px rgba(17,89,44,.6)}
.btn--ghost{border:1px solid var(--ink-200);color:var(--ink-800);background:#fff}
.btn--ghost:hover{border-color:var(--ink-400);background:var(--ink-50)}
.btn--onDark{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}

.tlink{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;
  font-weight:550;color:var(--ink-700);transition:color .3s var(--ease)}
.tlink .arw{transition:transform .3s var(--ease)}
.tlink:hover{color:var(--green-600)}
.tlink:hover .arw{transform:translateX(4px)}
.sec--dark .tlink{color:var(--ink-100)}
.sec--dark .tlink:hover{color:var(--green-300)}

.rbtn{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--ink-200);color:var(--ink-800);flex:none;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.rbtn svg{width:17px;height:17px}
.rbtn:hover{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.rbtn--solid{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.rbtn--solid:hover{background:var(--green-600);border-color:var(--green-600)}

/* ---------- header ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:120;border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--hdr)}
.hdr.is-stuck{background:rgba(255,255,255,.9);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-bottom-color:var(--mist);
  box-shadow:0 1px 24px -14px rgba(16,29,58,.5)}
.hdr__logo img{height:52px;width:auto}
@media(max-width:640px){.hdr__logo img{height:44px}}
.hdr__logo .logo-light{display:none}
.hdr--overDark:not(.is-stuck) .logo-light{display:block}
.hdr--overDark:not(.is-stuck) .logo-dark{display:none}
.hdr--overDark:not(.is-stuck) .navlink{color:rgba(255,255,255,.94)}
.hdr--overDark:not(.is-stuck) .navlink:hover{color:#fff;background:rgba(255,255,255,.12)}
.hdr--overDark:not(.is-stuck) .burger span{background:#fff}
.hdr__nav{display:none;align-items:center;gap:.2rem}
@media(min-width:1060px){.hdr__nav{display:flex}}
.navlink{position:relative;display:inline-flex;align-items:center;gap:.3rem;
  padding:.55rem .85rem;border-radius:9px;font-size:.94rem;font-weight:500;color:var(--ink-800);
  transition:color .25s var(--ease),background-color .25s var(--ease)}
.navlink:hover{color:var(--ink-600);background:var(--ink-50)}
.navlink[aria-current=page]{color:var(--green-600)}
.navlink .caret{width:9px;height:9px;opacity:.55;transition:transform .25s var(--ease)}
.has-menu:hover .caret{transform:rotate(180deg)}
.has-menu{position:relative}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:272px;background:#fff;
  border:1px solid var(--mist);border-radius:var(--r);box-shadow:0 24px 56px -26px rgba(16,29,58,.5);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:.6rem .7rem;border-radius:8px;transition:background-color .2s var(--ease)}
.menu a:hover{background:var(--ink-50)}
.menu .mt{font-size:.9rem;font-weight:550;color:var(--ink-800)}
.menu .md{font-size:.76rem;color:var(--stone-400);margin-top:1px}
.burger{display:inline-flex;flex-direction:column;gap:4px;padding:.6rem;border-radius:8px}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:var(--ink-800);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobnav{display:none;position:fixed;inset:var(--hdr) 0 0;z-index:119;background:#fff;
  overflow-y:auto;padding:1.25rem 1.25rem 3rem;animation:mobIn .3s var(--ease)}
.mobnav.is-open{display:block}
@keyframes mobIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobnav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--mist);
  font-size:1rem;color:var(--ink-800);font-weight:500}
.mobnav .sub a{padding-left:.9rem;font-size:.9rem;color:var(--stone-500);font-weight:400}
.mobnav .grp{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone-400);padding:1.1rem 0 .3rem}

/* ---------- hero ---------- */
/* The hero must fill the viewport on ANY monitor — it was fixed at ~729px,
   so on a 1440px-tall screen it covered less than half the fold. */
.hero{position:relative;overflow:hidden;background:var(--ink-900);
  min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--hdr) + clamp(2rem,5vw,4rem));padding-bottom:clamp(2rem,5vw,4rem)}
@supports not (min-height:100svh){.hero{min-height:100vh}}
.hero > .shell{width:100%}
.hero__photo{position:absolute;inset:0;z-index:0}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(102deg,rgba(var(--navy-rgb),.95) 0%,rgba(var(--navy-rgb),.86) 44%,rgba(var(--navy-rgb),.55) 100%)}
.hero__in{position:relative;z-index:2}

.phero{position:relative;background:var(--ink-900);color:var(--ink-100);overflow:hidden;
  padding-top:calc(var(--hdr) + clamp(2.5rem,5vw,4rem));padding-bottom:clamp(2.5rem,5vw,4rem)}
.phero::after{content:"";position:absolute;right:-10%;top:10%;width:520px;height:520px;
  border-radius:999px;background:rgba(31,138,68,.13);filter:blur(130px);pointer-events:none}
.phero__in{position:relative;z-index:2}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.15rem}
.crumb a,.crumb span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase}
.crumb a{color:var(--ink-300);transition:color .25s var(--ease)}
.crumb a:hover{color:#fff}
.crumb .sep{color:rgba(var(--hair-rgb),.4)}
.crumb .cur{color:var(--ink-100)}

/* ---------- outcome numbers ---------- */
.outcomes{display:grid;gap:2rem 1rem;grid-template-columns:1fr}
@media(min-width:760px){.outcomes{grid-template-columns:repeat(3,1fr)}}
.outcome{position:relative;padding-right:1.5rem}
@media(min-width:760px){
  .outcome + .outcome{padding-left:2.25rem;border-left:1px solid var(--ink-100)}
  .sec--dark .outcome + .outcome,
  .hero .outcome + .outcome,
  .phero .outcome + .outcome{border-left-color:rgba(var(--hair-rgb),.28)}
}
.outcome__n{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(2.6rem,1.7rem + 3.4vw,4.4rem);line-height:.95;
  color:var(--ink-900);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.35rem}
.sec--dark .outcome__n,.hero .outcome__n,.phero .outcome__n{color:#fff}
.outcome__n .mark{font-size:.4em;transform:translateY(-.45em)}
.outcome--down .outcome__n{color:var(--alert)}
.outcome--up .outcome__n{color:var(--green-500)}
.sec--dark .outcome--up .outcome__n,.hero .outcome--up .outcome__n{color:var(--green-300)}
.outcome__l{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-800);margin-top:.85rem;font-weight:500}
.sec--dark .outcome__l,.hero .outcome__l,.phero .outcome__l{color:var(--ink-100)}
.outcome__d{font-size:.92rem;color:var(--stone-500);line-height:1.55;margin-top:.5rem;max-width:30ch}
.sec--dark .outcome__d,.hero .outcome__d,.phero .outcome__d{color:var(--ink-200)}

.netrule{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  border-top:2px solid var(--ink-900);padding-top:1.4rem;margin-top:2.5rem;justify-content:space-between}
.sec--dark .netrule{border-top-color:rgba(255,255,255,.85)}

/* ---------- numbered rows ---------- */
.nrow{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:center;
  padding:1.05rem 1.25rem;border:1px solid var(--mist);border-radius:var(--r);
  background:#fff;width:100%;text-align:left;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease)}
.nrow + .nrow{margin-top:.6rem}
.nrow__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--stone-400)}
.nrow__t{display:block;font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  color:var(--ink-900);letter-spacing:-.015em}
.nrow__d{display:block;font-size:.86rem;color:var(--stone-500);margin-top:.2rem;line-height:1.5}
.nrow__a{color:var(--ink-300);transition:transform .35s var(--ease),color .35s var(--ease)}
.nrow__a svg{width:18px;height:18px}
.nrow:hover{border-color:var(--ink-200);transform:translateX(3px);
  box-shadow:0 16px 32px -26px rgba(16,29,58,.45)}
.nrow:hover .nrow__a{transform:translateX(3px);color:var(--green-500)}
.nrow.is-on{background:var(--ink-900);border-color:var(--ink-900)}
.nrow.is-on .nrow__n{color:var(--green-300)}
.nrow.is-on .nrow__t{color:#fff}
.nrow.is-on .nrow__d{color:var(--ink-200)}
.nrow.is-on .nrow__a{color:var(--green-300)}

.root{background:var(--ink-900);color:var(--ink-100);border-radius:var(--r-lg);
  padding:clamp(1.6rem,1rem + 2vw,2.6rem);position:relative;overflow:hidden;height:100%}
.root::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:999px;background:radial-gradient(circle,rgba(31,138,68,.22),transparent 68%)}
.root > *{position:relative;z-index:1}
.root__trace{border-top:1px solid rgba(var(--hair-rgb),.22);margin-top:1.5rem;padding-top:1.3rem}

/* ---------- panel / figure ---------- */
.panel{background:#fff;border:1px solid var(--mist);border-radius:var(--r-lg);overflow:hidden}
.sec--dark .panel{background:rgba(255,255,255,.04);border-color:rgba(var(--hair-rgb),.18)}
.figure{border-radius:var(--r-lg);overflow:hidden;background:var(--mist)}
.figure img{width:100%;height:100%;object-fit:cover}
.shadow{box-shadow:0 30px 64px -34px rgba(16,29,58,.55)}
.shadow-lg{box-shadow:0 44px 90px -38px rgba(16,29,58,.62),0 10px 26px -18px rgba(16,29,58,.4)}

/* ---------- product carousel ---------- */
.pcard{display:grid;grid-template-columns:1fr;border:1px solid var(--mist);
  border-radius:var(--r-lg);overflow:hidden;background:#fff}
@media(min-width:900px){.pcard{grid-template-columns:1.05fr 1fr}}
.pcard__media{position:relative;background:#fff;display:grid;place-items:center;
  padding:clamp(1.5rem,3vw,2.75rem);min-height:clamp(180px,24vh,300px)}
.pcard__media img{width:100%;height:100%;object-fit:contain;max-height:clamp(220px,30vh,380px)}
.pcard__badge{position:absolute;top:1rem;left:1rem}
.pcard__body{padding:clamp(1.5rem,3vw,2.75rem);display:flex;flex-direction:column;justify-content:center;gap:.75rem}
.ptabs{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;border-top:1px solid var(--mist);margin-top:1rem}
.ptab{padding:.85rem 0;font-size:.93rem;font-weight:550;color:var(--stone-400);
  border-top:2px solid transparent;margin-top:-1px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.ptab.is-on{color:var(--ink-900);border-top-color:var(--green-500)}

/* ---------- G2D stage strip ---------- */
.g2dwrap{border:1px solid rgba(var(--hair-rgb),.22);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.03)}
.g2dwrap__hd,.g2dwrap__ft{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:.95rem 1.25rem}
.g2dwrap__hd{border-bottom:1px solid rgba(var(--hair-rgb),.16)}
.g2dwrap__ft{border-top:1px solid rgba(var(--hair-rgb),.16)}
.g2dwrap__body{padding:clamp(1.25rem,1rem + 1vw,2rem)}
.stages{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:720px){.stages{grid-template-columns:repeat(5,1fr)}}
.stg{padding:1rem 1.1rem;min-height:0;border:1px solid rgba(var(--hair-rgb),.2);border-radius:11px;
  background:rgba(255,255,255,.02);transition:background-color .45s var(--ease),
  border-color .45s var(--ease),transform .45s var(--ease)}
.stg__n{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--ink-300)}
.stg__t{font-weight:600;color:#fff;font-size:.98rem;line-height:1.25;margin-top:.3rem;letter-spacing:-.01em}
.stg__d{font-size:.84rem;color:var(--ink-200);line-height:1.5;margin-top:.25rem}
.stg.is-on{background:rgba(31,138,68,.16);border-color:rgba(95,184,116,.55);transform:translateY(-2px)}
.stg.is-on .stg__n{color:var(--green-300)}

.g2d svg{width:100%;height:auto;display:block}
.g2d .band{transition:fill-opacity .55s var(--ease),stroke-opacity .55s var(--ease)}
.g2d .band.is-hot{fill-opacity:.34;stroke-opacity:.62}
.g2d .pore{transition:opacity .5s var(--ease)}
.g2d .band.is-hot .pore{opacity:.9}
/* The SVG scales with the column, so at phone widths these 9.5-unit captions
   render around 4px. Scale them up in user units there; the side caption is
   dropped rather than enlarged because at that size it would run into the
   ring, and the stage cards below already carry the same wording. */
@media(max-width:640px){
  .g2d .g2dcap{font-size:19px;letter-spacing:1.2}
  .g2d .g2dcap--side{display:none}
}
.g2d .particle{transition:transform 1.1s var(--ease),opacity .6s var(--ease)}

/* ---------- tiles ---------- */
.grid{display:grid;gap:clamp(1.15rem,.8rem + .6vw,1.9rem)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.tile{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.tile__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--navy-rgb),.94) 0%,rgba(var(--navy-rgb),.5) 46%,rgba(var(--navy-rgb),.12) 100%)}
.tile__body{position:absolute;inset-inline:0;bottom:0;padding:1.25rem;z-index:2}
.tile__t{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:#fff;letter-spacing:-.02em}
.tile__d{font-size:.84rem;color:rgba(214,224,244,.92);margin-top:.28rem;line-height:1.45}
.tile:hover{transform:translateY(-5px);box-shadow:0 30px 56px -30px rgba(16,29,58,.55)}
.tile:hover img{transform:scale(1.07)}

/* ---------- editorial card ---------- */
.ecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.ecard:hover{transform:translateY(-5px);border-color:var(--ink-200);
  box-shadow:0 30px 58px -34px rgba(16,29,58,.48)}
.ecard__fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.ecard__fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ecard:hover .ecard__fig img{transform:scale(1.05)}
.ecard__n{position:absolute;top:.85rem;left:.85rem;z-index:2}
.ecard__body{padding:1.35rem 1.45rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.ecard__foot{margin-top:auto;padding-top:1rem}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.92rem}
.spec th,.spec td{text-align:left;padding:.75rem 0;border-bottom:1px solid var(--mist);vertical-align:top}
.spec th{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--stone-400);font-weight:500;width:44%}
.spec td{color:var(--ink-900);font-weight:500}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.sec--dark .spec th,.phero .spec th{color:var(--ink-300)}
.sec--dark .spec td,.phero .spec td{color:#fff}
.sec--dark .spec th,.sec--dark .spec td,.phero .spec th,.phero .spec td{border-bottom-color:rgba(var(--hair-rgb),.18)}

/* ---------- job list ---------- */
.job{border:1px solid var(--mist);border-radius:var(--r);background:#fff;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.job + .job{margin-top:.65rem}
.job:hover{border-color:var(--ink-200);box-shadow:0 18px 36px -28px rgba(16,29,58,.42)}
.job summary{list-style:none;cursor:pointer;padding:1.15rem 1.3rem;display:grid;
  grid-template-columns:1fr auto;gap:.35rem .9rem;align-items:center}
.job summary::-webkit-details-marker{display:none}
.job__t{font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  color:var(--ink-900);letter-spacing:-.02em}
.job__meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.35rem}
.job__meta span{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone-400)}
.job__toggle{grid-row:span 2;width:34px;height:34px;border-radius:999px;border:1px solid var(--ink-200);
  display:grid;place-items:center;color:var(--ink-600);
  transition:transform .35s var(--ease),background-color .3s var(--ease)}
.job__toggle svg{width:15px;height:15px}
.job[open] .job__toggle{transform:rotate(180deg);background:var(--ink-50)}
.job__body{padding:0 1.3rem 1.4rem}

/* ---------- form ---------- */
.field{display:grid;gap:.35rem}
.field > span{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--stone-400)}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;
  border:1px solid var(--ink-200);border-radius:10px;font:inherit;font-size:.94rem;
  color:var(--ink-900);background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;
  border-color:var(--green-500);box-shadow:0 0 0 3px rgba(31,138,68,.14)}
.field textarea{resize:vertical;min-height:112px}
.formgrid{display:grid;gap:.95rem;grid-template-columns:1fr}
@media(min-width:620px){.formgrid{grid-template-columns:1fr 1fr}.formgrid .full{grid-column:1/-1}}

.ctile{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem;border:1px solid var(--mist);
  border-radius:var(--r);background:#fff;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.ctile:hover{transform:translateY(-3px);border-color:var(--ink-200);box-shadow:0 22px 42px -30px rgba(16,29,58,.42)}
.ctile__t{font-weight:600;color:var(--ink-900);font-size:.96rem}
.ctile__v{font-size:.92rem;color:var(--stone-500);line-height:1.55;margin-top:.15rem}
.ctile__v a{color:var(--ink-700)}
.ctile__v a:hover{color:var(--green-600)}
.ctile__k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-600);flex:none;padding-top:.2rem;width:2rem}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:2rem}
.tl::before{content:"";position:absolute;left:6px;top:.5rem;bottom:.5rem;width:2px;
  background:linear-gradient(to bottom,var(--green-400),var(--ink-300),transparent)}
.tlitem{position:relative;padding-bottom:2rem}
.tlitem:last-child{padding-bottom:0}
.tlitem::before{content:"";position:absolute;left:-2rem;top:.4rem;width:14px;height:14px;
  border-radius:999px;background:#fff;border:3px solid var(--green-500);box-shadow:0 0 0 4px rgba(31,138,68,.12)}
.tlitem__y{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--green-600)}
.tlitem__t{font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  color:var(--ink-900);letter-spacing:-.02em;margin-top:.2rem}
.tlitem__d{font-size:.93rem;color:var(--stone-500);line-height:1.6;margin-top:.3rem}
.sec--dark .tlitem::before{background:var(--ink-900)}
.sec--dark .tlitem__t{color:#fff}
.sec--dark .tlitem__d{color:var(--ink-200)}

/* ---------- marquee ---------- */
.mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.mq__track{display:flex;width:max-content;animation:vats-mq 44s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__set{display:flex;align-items:center;gap:4.5rem;padding-right:4.5rem;flex:none}
.mq__set img{height:66px;width:auto;object-fit:contain;opacity:.9;
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
/* Client reversed this on 7 Sept: the customer logos run in full colour. */
.mq__set img:hover{opacity:1}
@keyframes vats-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.mq__set img{height:48px}.mq__set{gap:3rem;padding-right:3rem}}

/* ---------- section rail ---------- */
.rail{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:90;
  display:none;flex-direction:column;gap:.85rem;align-items:flex-end}
@media(min-width:1280px){.rail{display:flex}}
.rail a{display:flex;align-items:center;gap:.6rem;color:var(--ink-300);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.rail i{display:block;width:26px;height:1.5px;background:currentColor;opacity:.45;
  transition:width .35s var(--ease),opacity .35s var(--ease),background-color .35s var(--ease)}
.rail span{opacity:0;transform:translateX(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rail a:hover span,.rail a.is-on span{opacity:1;transform:none}
.rail a:hover i,.rail a.is-on i{width:42px;opacity:1;background:var(--green-500)}
.rail a.is-on{color:var(--ink-800)}
.rail.on-dark a.is-on{color:#fff}

/* ---------- pinned scroll ---------- */
.pin{position:relative;overflow:visible}
.pin__stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
@supports not (min-height:100svh){.pin__stage{min-height:100vh}}
.pin__slide{display:none}
.pin__slide.is-active{display:block;animation:pinIn .55s var(--ease)}
@keyframes pinIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:900px){
  .pin__stage{padding-block:clamp(.75rem,2.2vh,1.75rem)}
  .pin__stage .h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem)}
  .pin__stage .lead{font-size:1rem}
  .pin__stage .g2d svg{max-height:24vh}
  .pin__stage .pcard__media{min-height:0}
  .pin__stage .pcard__media img{max-height:34vh}
  .pin__stage .stg__d{display:none}
  .pin__stage .stg.is-on .stg__d{display:block}
}
@media(max-width:899px){
  .pin{height:auto!important}
  .pin__stage{position:static;min-height:0;display:block}
  .pin__slide{display:block;margin-bottom:2.5rem}
  .ptabs{display:none}
}

/* ---------- motion primitives ---------- */
[data-reveal]{opacity:0;transform:translateY(26px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-stagger] > *{opacity:0;transform:translateY(22px)}
[data-stagger].is-in > *{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ml{display:block}
.ml__line{display:block;overflow:hidden}
.ml__line > span{display:block;transform:translateY(110%)}
.ml.is-in .ml__line > span{transform:none;transition:transform .9s var(--ease)}
/* do NOT set display here — .wr lands on the <p>, and `inline`
   makes it ignore max-width. Only the <w> children are inline. */
.wr w{display:inline-block;opacity:.14;transition:opacity .25s linear;will-change:opacity}
.wr w.is-lit{opacity:1}

/* ---------- footer ---------- */
.ftr{background:var(--ink-900);color:var(--ink-200);padding-top:clamp(2.5rem,1.5rem + 2.2vw,3.5rem)}
.ftr__grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:720px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1100px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.ftr__logo img{height:42px;width:auto;filter:brightness(0) invert(1)}
.ftr h4{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-300);margin-bottom:1rem;font-weight:500}
.ftr li{margin-bottom:.6rem}
.ftr a{font-size:.92rem;color:var(--ink-100);transition:color .25s var(--ease)}
.ftr a:hover{color:var(--green-300)}
.ftr__note{font-size:.87rem;color:var(--ink-300);line-height:1.6}
.ftr__bar{margin-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid rgba(var(--hair-rgb),.16);
  padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}
.ftr__bar,.ftr__bar a{font-size:.8rem;color:var(--ink-300)}
.soc{display:flex;gap:.55rem}
.soc a{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(var(--hair-rgb),.24);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.soc a:hover{background:rgba(255,255,255,.1);border-color:rgba(var(--hair-rgb),.5);transform:translateY(-2px)}
.soc svg{width:16px;height:16px;fill:currentColor}

/* ---------- utilities ---------- */
.stack{display:flex;flex-direction:column}
.gap-xs{gap:.5rem}.gap-sm{gap:.9rem}.gap-md{gap:1.4rem}.gap-lg{gap:2.2rem}
.row{display:flex;flex-wrap:wrap;align-items:center}
.mt-sm{margin-top:.9rem}.mt-md{margin-top:1.5rem}.mt-lg{margin-top:2rem}.mt-xl{margin-top:2.6rem}
.mb-sm{margin-bottom:.9rem}.mb-md{margin-bottom:1.6rem}.mb-lg{margin-bottom:2.6rem}
.maxw-sm{max-width:46ch}.maxw-md{max-width:58ch}.maxw-lg{max-width:70ch}
.center{text-align:center;margin-inline:auto}
.hr{height:1px;background:var(--mist);border:0}
.sec--dark .hr{background:rgba(var(--hair-rgb),.18)}
.split{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--wide{grid-template-columns:1.15fr .85fr}
  .split--narrow{grid-template-columns:.85fr 1.15fr}}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink-900);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important}
  .ml__line > span{transform:none!important}
  .wr w{opacity:1!important}
  .mq__track{animation:none!important}
  .pin{height:auto!important}
  .pin__stage{position:static;min-height:0;display:block}
  .pin__slide{display:block;margin-bottom:2.5rem}
}


/* ---------- v11: rhythm, CTA/footer separation, image fit ---------- */

/* Consecutive sections of the same tone doubled their padding at the seam. */
.sec + .sec{padding-top:clamp(2rem,1.4rem + 1.6vw,3.25rem)}
.sec--dark + .sec--dark{padding-top:clamp(2rem,1.4rem + 1.6vw,3.25rem)}

/* THE CTA BAND. It used to be a full-bleed navy section sitting directly on
   the navy footer, so the two read as one block. It is now a rounded dark
   panel floating on white — v7's layered-panel move — which puts a clear
   white gutter between the call to action and the footer on every page. */
.ctaband{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--ink-800) 0%,var(--ink-900) 58%,var(--cta-tail) 100%);
  color:var(--ink-100);
  padding:clamp(2rem,1.4rem + 2.6vw,3.75rem);
  box-shadow:0 40px 80px -46px rgba(16,29,58,.6);
}
.ctaband::after{
  content:"";position:absolute;right:-12%;top:-40%;width:520px;height:520px;
  border-radius:999px;background:radial-gradient(circle,rgba(31,138,68,.28),transparent 66%);
  pointer-events:none;
}
.ctaband > *{position:relative;z-index:1}
.ctaband .h2,.ctaband .display{color:#fff}
.ctaband .lead{color:var(--ink-200)}
.ctaband .shead__eyebrow{color:var(--green-300)}
.ctaband .mono{color:var(--ink-200)}
.ctaband .tagline{color:var(--green-300)}
/* the wrapper section stays light so the panel reads as a card */
.sec--cta{background:var(--white);padding-block:clamp(2.5rem,1.6rem + 2.4vw,4.5rem)}

/* IMAGE FIT.
   Plant photos are scenes and crop fine. Product photos are studio shots of a
   machine on a plain sweep — cropping them cuts the machine, which is what
   read as "skimmed and stretched". Those must be CONTAINED on a paper field. */
.ecard__fig--product{background:var(--paper)}
.ecard__fig--product img{object-fit:contain;padding:1.1rem}
.ecard:hover .ecard__fig--product img{transform:scale(1.03)}

.figure--product{background:var(--paper);display:grid;place-items:center}
.figure--product img{object-fit:contain;padding:clamp(1rem,2vw,2rem)}

/* Never let an <img> distort: default every content image to cover unless a
   --product modifier opts into contain. */
.ecard__fig img,.tile img,.figure img{object-fit:cover}
.figure--product img,.ecard__fig--product img,.pcard__media img{object-fit:contain}


/* ============================================================
   v11 — components that were emitted with NO css at all.
   .card was the "stretched product image" bug: with no rule the
   img fell back to object-fit:fill and rendered 609x896 (ratio
   0.68) against a 1200x896 source (1.34) — a 2x vertical stretch.
   ============================================================ */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:var(--ink-200);
  box-shadow:0 30px 58px -34px rgba(16,29,58,.48)}
.card__media{position:relative;aspect-ratio:4/3;background:var(--paper);
  display:grid;place-items:center;padding:clamp(1rem,2vw,1.9rem);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__badge{position:absolute;top:1rem;left:1rem;z-index:2}
.card__body{padding:1.35rem 1.45rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card__foot{margin-top:auto;padding-top:1rem}

.compare{display:grid;gap:clamp(1.15rem,.8rem + .6vw,1.9rem);grid-template-columns:1fr}
@media(min-width:900px){.compare{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.compare--3{grid-template-columns:repeat(3,1fr)}}

.eyebrow{font-family:var(--font-mono);font-size:.82rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600);display:block;margin-bottom:.6rem}
.sec--dark .eyebrow,.phero .eyebrow,.hero .eyebrow{color:var(--green-300)}

.outcome--flat .outcome__n{color:var(--ink-900)}
.sec--dark .outcome--flat .outcome__n,.hero .outcome--flat .outcome__n{color:#fff}

.panel__q{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600);display:block}
.sec--dark .panel__q{color:var(--green-300)}
.panel__list{margin-top:1.1rem;display:grid;gap:.55rem}
.panel__list a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.75rem .95rem;border-radius:10px;background:var(--ink-50);
  font-size:.92rem;font-weight:550;color:var(--ink-800);
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.panel__list a:hover{background:var(--ink-100);transform:translateX(3px)}
.panel__list .sub{display:block;font-size:.77rem;font-weight:400;color:var(--stone-400);margin-top:1px}

/* Product studio shots must be CONTAINED — cropping cuts the machine. */
.figure--product,.ecard__fig--product{background:var(--paper);display:grid;place-items:center}
.figure--product img,.ecard__fig--product img{object-fit:contain;padding:clamp(.9rem,1.6vw,1.6rem)}

/* Large-monitor tier: --shell was frozen at 1340px, so content filled
   only 48% of a 2560px screen with type stuck at its 1920px size. */
@media(min-width:1800px){
  :root{--shell:1500px;
    --t-display:clamp(5.4rem,3rem + 3.4vw,6.6rem);
    --t-h2:clamp(3.4rem,2rem + 1.6vw,4rem)}
}
@media(min-width:2400px){:root{--shell:1660px}}

/* Tabs are hidden under 900px but stayed visible (and dead) under
   reduced motion, looking clickable with no effect. */
@media(prefers-reduced-motion:reduce){.ptabs{display:none}}

/* ============================================================
   v11 — diagnosis convergence diagram
   Scroll scrubs --p (0..1) on .dg; every path uses pathLength="1"
   so one custom property draws beziers and straight lines alike.
   ============================================================ */
.dg{width:100%;--p:0}
.dg svg{width:100%;height:auto;display:block;overflow:visible}

/* nodes fade+rise in sequence */
.dgnode{opacity:0;transform:translateY(14px);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * .06s)}
.dg.is-in .dgnode{opacity:1;transform:none}

/* lines draw themselves as scroll progresses */
.dgline{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease);transition-delay:calc(var(--i) * .09s)}
.dg.is-in .dgline{stroke-dashoffset:calc(1 - var(--p))}

/* sparse scrolling dashes read as discrete droplets, not a moving stripe:
   the gap is 8x the dash on purpose */
.dgflow{stroke-dashoffset:36;animation:dgflow 1.2s linear infinite;opacity:0;
  transition:opacity .4s var(--ease)}
.dg.is-in .dgflow{opacity:calc(var(--p) * .9)}
.dgflow--fast{animation-duration:.8s;stroke-dashoffset:20}
.dgflow--mid{animation-duration:1s;stroke-dashoffset:20}
.dgarrow{opacity:0;transition:opacity .45s var(--ease)}
.dg.is-in .dgarrow{opacity:clamp(0,calc((var(--p) - .55) * 2.6),1)}
@keyframes dgflow{to{stroke-dashoffset:0}}

/* the root node breathes */
.dghalo{opacity:.55;transform-box:fill-box;transform-origin:center;
  animation:dghalo 3s ease-in-out infinite}
@keyframes dghalo{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.12;transform:scale(1.05)}
}

/* caption strip under the diagram */
.dgcap{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:760px){.dgcap{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dgcap{grid-template-columns:repeat(4,1fr)}}
.dgcap__i{border-top:2px solid var(--ink-100);padding-top:.85rem}
.dgcap__i.is-alert{border-top-color:var(--alert)}
.dgcap__i.is-root{border-top-color:var(--green-500)}
.dgcap__t{font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink-900);letter-spacing:-.015em}
.dgcap__d{font-size:.88rem;line-height:1.55;color:var(--stone-500);margin-top:.35rem}

/* Small screens get the diagram stacked as a readable list instead. */
@media(max-width:759px){
  .dg svg{min-width:640px}
  .dg{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(prefers-reduced-motion:reduce){
  .dgnode{opacity:1;transform:none}
  .dgline{stroke-dashoffset:0}
  .dgflow{display:none}
  .dghalo{animation:none;opacity:.5}
}

/* ---------- mission scroll-lock ---------- */
.hold{position:relative}
.hold__stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
@supports not (min-height:100svh){.hold__stage{min-height:100vh}}
@media(max-width:899px){
  .hold{height:auto!important}
  .hold__stage{position:static;min-height:0;display:block;padding-block:clamp(3rem,2rem + 3vw,5.5rem)}
}
@media(prefers-reduced-motion:reduce){
  .hold{height:auto!important}
  .hold__stage{position:static;min-height:0;display:block}
}

/* ---------- impact ledger ---------- */
.ledger{border-top:1px solid rgba(var(--hair-rgb),.2)}
.ledger__row{display:grid;gap:.4rem 1.5rem;align-items:center;
  grid-template-columns:1fr;padding:clamp(1.1rem,.8rem + .8vw,1.7rem) 0;
  border-bottom:1px solid rgba(var(--hair-rgb),.2)}
@media(min-width:900px){.ledger__row{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.ledger__n{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.7rem,1.1rem + 1.7vw,2.6rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ledger__u{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-300);font-weight:500}
.ledger__b{min-width:0}
.ledger__t{font-weight:600;color:#fff;font-size:1rem;letter-spacing:-.01em}
.ledger__d{font-size:.9rem;line-height:1.55;color:var(--ink-200);margin-top:.25rem;max-width:52ch}

/* head split: a wide headline column against a short lead */
.split--head{display:grid;gap:clamp(1.25rem,2.5vw,2.5rem);grid-template-columns:1fr}
@media(min-width:900px){.split--head{grid-template-columns:1.45fr .55fr}}
.split--head .lead{max-width:46ch}

/* ---------- technology: full-width panel, stages get real room ---------- */
.techfoot{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between}
.g2d{max-width:660px;margin-inline:auto}
@media(min-width:720px) and (max-width:1100px){
  .stages{grid-template-columns:repeat(3,1fr)}
}

/* ---------- product showcase (products index) ---------- */
.pshowgrid{display:grid;gap:clamp(1.25rem,.9rem + .8vw,2rem);grid-template-columns:1fr}
@media(min-width:900px){.pshowgrid{grid-template-columns:1fr 1fr}}
/* Standard Products holds exactly three machines; a two-up grid orphans the
   third on its own row. Auto-fit keeps any count balanced. */
@media(min-width:1180px){.pshowgrid--3{grid-template-columns:repeat(3,1fr)}}
.pshow{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--mist);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pshow:hover{transform:translateY(-6px);border-color:var(--ink-200);
  box-shadow:0 36px 68px -36px rgba(16,29,58,.5)}
.pshow__media{position:relative;aspect-ratio:4/3;background:#fff;
  display:grid;place-items:center;padding:clamp(1rem,2vw,2rem);overflow:hidden}
.pshow__media img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
.pshow:hover .pshow__media img{transform:scale(1.05)}
.pshow__badge{position:absolute;top:1rem;left:1rem;z-index:2}
.pshow__body{padding:clamp(1.4rem,1rem + 1vw,2rem);display:flex;flex-direction:column;gap:.55rem}
.pshow__t{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.pshow__use{font-family:var(--font-display);font-style:italic;font-weight:500;
  color:var(--green-600);font-size:1rem;letter-spacing:-.01em}
.pshow__d{font-size:.95rem;line-height:1.6;color:var(--stone-500)}
.pshow__cta{margin-top:.4rem}

/* ---------- comparison table ---------- */
.ctable-wrap{overflow-x:auto;border:1px solid var(--mist);border-radius:var(--r-lg);background:#fff}
.ctable{width:100%;border-collapse:collapse;min-width:880px;font-size:.93rem}
.ctable__act{white-space:nowrap;text-align:right}
.ctable tbody strong a{color:var(--ink-900);border-bottom:1px solid rgba(31,138,68,.35)}
.ctable tbody strong a:hover{color:var(--green-600);border-bottom-color:var(--green-500)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ctable thead th{padding:1.15rem 1rem;text-align:left;vertical-align:bottom;
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink-900);
  letter-spacing:-.015em;border-bottom:2px solid var(--ink-900)}
.ctable thead th:first-child{width:22%}
.ctable thead a{color:var(--ink-900)}
.ctable thead a:hover{color:var(--green-600)}
.ctable tbody th{padding:.95rem 1rem;text-align:left;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400);
  font-weight:500;border-bottom:1px solid var(--mist);white-space:nowrap}
.ctable tbody td{padding:.95rem 1rem;border-bottom:1px solid var(--mist);
  color:var(--ink-800);font-weight:500}
.ctable tbody tr:nth-child(even){background:var(--paper)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}

/* ---------- about: journey grid + founder cards ---------- */
.jgrid{display:grid;gap:clamp(1.25rem,.9rem + .8vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){.jgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.jgrid{grid-template-columns:repeat(4,1fr)}}
.jstep{position:relative;padding-top:1.5rem;border-top:2px solid var(--ink-100)}
.jstep::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  border-radius:999px;background:var(--white);border:3px solid var(--green-500)}
.jstep__y{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-600)}
.jstep__t{font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  color:var(--ink-900);letter-spacing:-.02em;margin-top:.4rem;line-height:1.25}
.jstep__d{font-size:.93rem;line-height:1.6;color:var(--stone-500);margin-top:.5rem}

.founders{display:grid;gap:clamp(1.25rem,.9rem + .8vw,2rem);grid-template-columns:1fr}
@media(min-width:900px){.founders{grid-template-columns:1fr 1fr}}
.founder{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--mist);
  border-radius:var(--r-lg);overflow:hidden}
/* the portrait source is 800x800 — a 4/3 box cropped 25% off it.
   1/1 shows the whole frame and reads far bigger in the card. */
.founder__pic{aspect-ratio:1/1;background:var(--ink-800);overflow:hidden}
.founder__pic img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.founder__pic--mono{display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ink-700),var(--ink-900))}
.founder__pic--mono span{font-family:var(--font-display);font-size:clamp(2.6rem,2rem + 2vw,3.6rem);
  font-weight:600;color:rgba(255,255,255,.9);letter-spacing:-.03em}
.founder__body{padding:clamp(1.4rem,1rem + 1vw,2rem)}
.founder__q{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.05rem;color:var(--green-600);letter-spacing:-.015em;
  margin-top:1rem;padding-left:1rem;border-left:3px solid var(--green-500)}

/* ---------- industries: case comparison + process steps ---------- */
.cases{display:grid;gap:clamp(1.25rem,.9rem + .8vw,2rem);grid-template-columns:1fr}
@media(min-width:900px){.cases{grid-template-columns:1fr 1fr}}
.case{border:1px solid rgba(var(--hair-rgb),.2);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.03)}
.case__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.case__media img{width:100%;height:100%;object-fit:cover}
.case__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--navy-rgb),.96) 0%,rgba(var(--navy-rgb),.35) 60%,transparent 100%)}
.case__tag{position:absolute;top:.9rem;left:.9rem;z-index:2;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-300);
  border:1px solid rgba(95,184,116,.5);border-radius:999px;padding:.25rem .7rem;
  /* the scrim is transparent at the top, so the tag needs its own backing or it
     vanishes on light photography */
  background:rgba(var(--navy-rgb),.72);backdrop-filter:blur(6px)}
.case__t{position:absolute;left:1.15rem;bottom:1rem;z-index:2;margin:0;
  font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:#fff;letter-spacing:-.02em}
.case__body{padding:1.35rem 1.4rem 1.5rem}
.case__threat{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem;color:#fff;font-weight:600;font-size:1.02rem}
.case__threat span{color:var(--ink-300)}
.case__answer{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.2rem;padding:1rem 1.15rem;border-radius:12px;
  background:rgba(31,138,68,.14);border:1px solid rgba(95,184,116,.4);
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.case__answer:hover{background:rgba(31,138,68,.24);transform:translateX(3px)}
.case__answer .mono{display:block;color:var(--green-300);margin-bottom:.2rem}
.case__answer strong{display:block;color:#fff;font-family:var(--font-display);
  font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.case__answer em{display:block;font-style:normal;font-size:.86rem;color:var(--ink-200);margin-top:.15rem}
.case__answer .arw{color:var(--green-300);flex:none}

.psteps{display:grid;gap:clamp(1.25rem,.9rem + .8vw,2rem);grid-template-columns:1fr}
@media(min-width:700px){.psteps{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.psteps{grid-template-columns:repeat(4,1fr)}}
.pstep{position:relative;padding-top:1.5rem;border-top:2px solid var(--ink-100)}
.pstep::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  border-radius:999px;background:var(--white);border:3px solid var(--green-500)}
.pstep__n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--green-600)}
.pstep__t{font-family:var(--font-display);font-weight:600;font-size:1.12rem;color:var(--ink-900);
  letter-spacing:-.02em;margin-top:.4rem}
.pstep__d{font-size:.93rem;line-height:1.6;color:var(--stone-500);margin-top:.5rem}

/* Hero stat strip: smaller than a section-level outcome band so the longest
   value ("200–20,000 L") stays on one line, and labels align across columns. */
.hero .outcomes{align-items:start}
.hero .outcome__n{font-size:clamp(1.5rem,1.1rem + 1.35vw,2.3rem);white-space:nowrap}
.hero .outcome__l{margin-top:.6rem}
/* pages_home.py sets the stat and outcome sizes inline; nothing here may
   cap them. The only rule that could bite at the larger size is the nowrap
   above, which overflows a phone — so let the stats wrap there. */
@media(max-width:640px){.hero .outcome__n{white-space:normal}}

/* Pinned range card: the product filled only 67% of its panel. */
@media(min-width:900px){
  .pin__stage .pcard__media{padding:clamp(.75rem,1.2vw,1.4rem)}
  .pin__stage .pcard__media img{max-height:46vh}
}
/* mission: give the reveal paragraph air under the display headline */
#mission .display + .lead,#mission [data-wordreveal]{margin-top:2rem}

/* ============================================================
   Application modal (Career)
   Fully interactive so the client can see the whole flow, but
   deliberately NOT wired to a backend — submit shows a preview
   notice instead of sending anything.
   ============================================================ */
.amodal{position:fixed;inset:0;z-index:300;display:none}
.amodal.is-open{display:block}
.amodal__scrim{position:absolute;inset:0;background:rgba(var(--navy-rgb),.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:amFade .25s var(--ease)}
@keyframes amFade{from{opacity:0}to{opacity:1}}
.amodal__box{position:relative;max-width:760px;margin:clamp(1rem,4vh,3rem) auto;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 50px 100px -40px rgba(16,29,58,.7);
  max-height:calc(100svh - clamp(2rem,8vh,6rem));display:flex;flex-direction:column;
  animation:amRise .35s var(--ease)}
@keyframes amRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.amodal__hd{padding:1.4rem 1.5rem;border-bottom:1px solid var(--mist);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex:none}
.amodal__role{font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  color:var(--ink-900);letter-spacing:-.02em;margin-top:.25rem}
.amodal__x{width:36px;height:36px;border-radius:999px;border:1px solid var(--ink-200);
  display:grid;place-items:center;color:var(--ink-700);flex:none;
  transition:background-color .25s var(--ease),transform .25s var(--ease)}
.amodal__x:hover{background:var(--ink-50);transform:rotate(90deg)}
.amodal__x svg{width:15px;height:15px}
.amodal__body{padding:1.5rem;overflow-y:auto}
.amodal__ft{padding:1.1rem 1.5rem;border-top:1px solid var(--mist);flex:none;
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}

/* file drop field */
.filefield{display:block;cursor:pointer}
.filefield input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.filefield__box{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;
  border:1.5px dashed var(--ink-200);border-radius:11px;background:var(--paper);
  transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.filefield:hover .filefield__box{border-color:var(--green-500);background:var(--green-50)}
.filefield.is-set .filefield__box{border-style:solid;border-color:var(--green-500);background:var(--green-50)}
.filefield__ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--ink-200);color:var(--ink-600);flex:none}
.filefield__ico svg{width:16px;height:16px}
.filefield.is-set .filefield__ico{color:var(--green-600);border-color:var(--green-300)}
.filefield__t{font-weight:550;color:var(--ink-900);font-size:.93rem}
.filefield__h{font-size:.8rem;color:var(--stone-400);margin-top:.1rem}
.filefield.is-set .filefield__h{color:var(--green-600)}

/* preview notice shown instead of a real submit */
.amodal__done{display:none;padding:2.2rem 1.5rem;text-align:center}
.amodal.is-done .amodal__body,.amodal.is-done .amodal__ft{display:none}
.amodal.is-done .amodal__done{display:block}
.amodal__done .tick{width:56px;height:56px;border-radius:999px;margin:0 auto 1.1rem;
  display:grid;place-items:center;background:var(--green-50);border:1px solid var(--green-300);color:var(--green-600)}
.amodal__done .tick svg{width:26px;height:26px}
.notice{margin-top:1.2rem;padding:.95rem 1.1rem;border-radius:11px;text-align:left;
  background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:.88rem;line-height:1.55}
.notice b{color:#7c2d12}

/* ---------- Made in India mark ----------
   Placeholder built from the tricolour until the client supplies their own
   "VATS Made in India" logo file (asked for in the 3 Aug comments). */
.madeinindia{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;
  border:1px solid rgba(var(--hair-rgb),.34);padding:.3rem .9rem .3rem .55rem;
  font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.madeinindia__flag{width:22px;height:15px;border-radius:2px;flex:none;
  background:linear-gradient(to bottom,#FF9933 0 33.33%,#fff 33.33% 66.66%,#138808 66.66% 100%);
  position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.madeinindia__flag::after{content:"";position:absolute;left:50%;top:50%;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:999px;
  border:1px solid #000080}
.sec:not(.sec--dark) .madeinindia{color:var(--ink-900);border-color:var(--ink-200)}

/* ---------- application points (industries) ---------- */
/* align-items:start — otherwise the map column stretches to the taller detail
   panel and the connector rail dangles below the last node. */
.ap{display:grid;gap:clamp(1.25rem,1rem + 1vw,2.25rem);grid-template-columns:1fr;
  align-items:start}
@media(min-width:1000px){.ap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.ap__map{position:relative;display:grid;gap:.5rem;align-content:start;padding-left:2.1rem}
.ap__rail{position:absolute;left:11px;top:1.35rem;bottom:1.35rem;width:2px;
  background:linear-gradient(to bottom,var(--green-400),var(--ink-300) 60%,transparent)}
.apnode{position:relative;display:flex;align-items:center;gap:.85rem;width:100%;
  text-align:left;padding:.72rem .95rem;border-radius:11px;border:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.apnode::before{content:"";position:absolute;left:-2.1rem;top:50%;margin-top:-7px;
  width:14px;height:14px;border-radius:999px;background:var(--white);
  border:3px solid var(--ink-200);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.apnode:hover{background:var(--ink-50);transform:translateX(2px)}
.apnode.is-on{background:var(--ink-900);border-color:var(--ink-900)}
.apnode.is-on::before{border-color:var(--green-500);transform:scale(1.15)}
.apnode__n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  color:var(--stone-400);flex:none;width:1.9rem}
.apnode__t{font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink-900);letter-spacing:-.015em;line-height:1.25}
.apnode.is-on .apnode__n{color:var(--green-300)}
.apnode.is-on .apnode__t{color:#fff}
.ap__detail{position:relative}
.appanel{display:none;background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r-lg);padding:clamp(1.35rem,1rem + 1.2vw,2.1rem)}
.appanel.is-on{display:block;animation:apIn .4s var(--ease)}
@keyframes apIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.appanel__d{font-size:.98rem;line-height:1.65;color:var(--stone-500);margin-top:.75rem}
.appanel__m{display:grid;gap:.5rem;margin-top:1.3rem}
.apmach{display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;align-items:center;
  padding:.85rem 1rem;border-radius:11px;background:#fff;border:1px solid var(--ink-100);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.apmach:hover{border-color:var(--green-500);transform:translateX(3px)}
.apmach > span:first-child{font-family:var(--font-display);font-weight:600;
  font-size:1rem;color:var(--ink-900);letter-spacing:-.015em}
.apmach__w{grid-column:1;font-size:.86rem;color:var(--stone-500);line-height:1.45}
.apmach .arw{grid-row:span 2;color:var(--green-600)}
.sec--dark .appanel{background:rgba(255,255,255,.04);border-color:rgba(var(--hair-rgb),.18)}
.sec--dark .appanel__d{color:var(--ink-200)}
.sec--dark .apmach{background:rgba(255,255,255,.05);border-color:rgba(var(--hair-rgb),.2)}
.sec--dark .apmach > span:first-child{color:#fff}
.sec--dark .apnode__t{color:var(--ink-100)}
.sec--dark .apnode::before{background:var(--ink-900)}

/* ---------- about: old-site flow (journey / values / founders) ---------- */
/* Their headline is a full sentence, not a phrase — step it down so two long
   lines still read as a headline instead of shouting. */
.h1--long{font-size:clamp(1.85rem,1.1rem + 2.5vw,3.3rem);line-height:1.14}

.prose--2col{column-gap:clamp(2rem,1rem + 3vw,4.5rem);max-width:none}
@media(min-width:900px){.prose--2col{columns:2}}
.prose--2col p{break-inside:avoid}

.mvgrid{display:grid;gap:clamp(1.25rem,1rem + 1.2vw,2.25rem);grid-template-columns:1fr}
@media(min-width:860px){.mvgrid{grid-template-columns:1fr 1fr}}
/* Three ranks, clearly separated: a ruled mono label, the statement set as
   display type, and the supporting paragraph pushed below a hairline so it
   never competes with the statement. */
.mv{display:flex;flex-direction:column;
  padding:clamp(1.5rem,1rem + 1.6vw,2.5rem);border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(var(--hair-rgb),.18);
  transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.mv:hover{border-color:rgba(var(--hair-rgb),.34);background:rgba(255,255,255,.07)}
/* The mission/vision and core-value rules live in one place, further down.
   A second, older set used to sit here — including a 4-across .cvals grid —
   and it kept resurfacing because it only lost on source order. */

/* ---------- products landing: the three category cards ---------- */
/* These shipped with no rules at all, so the block rendered as a stack of
   unstyled text — the same failure mode as the old .card regression. */
.pcats{display:grid;gap:clamp(1rem,.8rem + .8vw,1.6rem);grid-template-columns:1fr}
@media(min-width:820px){.pcats{grid-template-columns:repeat(3,1fr)}}
.pcat{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:.35rem 1rem;padding:clamp(1.3rem,1rem + 1vw,1.9rem);
  border:1px solid var(--mist);border-radius:var(--r-lg);background:var(--white);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease)}
.pcat:hover{border-color:var(--green-500);transform:translateY(-3px);
  box-shadow:0 14px 34px -18px rgba(16,29,58,.3)}
.pcat__n{grid-column:1;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.16em;color:var(--green-600);padding-top:.35rem}
.pcat > div{grid-column:2}
.pcat .h3{font-size:clamp(1.08rem,1rem + .35vw,1.32rem)}
.pcat__d{font-size:.93rem;line-height:1.55;color:var(--stone-500);margin-top:.4rem}
.pcat .arw{grid-column:3;align-self:center;color:var(--green-600);
  transition:transform .3s var(--ease)}
.pcat:hover .arw{transform:translateX(4px)}

/* ---------- product credential logo strip ----------
   Neutral on purpose: it carries no ground of its own, so it works inside a
   dark section and on the white plaques alike. */
.credstrip{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1rem,.8rem + 1vw,2rem)}
.credstrip img{height:56px;width:auto;display:block}
@media(max-width:640px){.credstrip img{height:44px}}

/* ---------- brochure lead-capture modal ----------
   Same conventions as the career .amodal above, but it starts closed on the
   [hidden] attribute rather than on a class, so it needs no JS to be correct
   before the script runs. Inputs match the contact form fields. */
.bmodal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vh,3rem) 1.25rem;background:rgba(var(--navy-rgb),.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:amFade .25s var(--ease)}
.bmodal[hidden]{display:none}
.bmodal__panel{position:relative;width:100%;max-width:30rem;background:#fff;
  border-radius:var(--r-lg);padding:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  box-shadow:0 50px 100px -40px rgba(16,29,58,.7);
  max-height:calc(100svh - clamp(2rem,8vh,6rem));overflow-y:auto;
  animation:amRise .35s var(--ease)}
.bmodal__close{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;
  border-radius:999px;border:1px solid var(--ink-200);display:grid;place-items:center;
  color:var(--ink-700);
  transition:background-color .25s var(--ease),transform .25s var(--ease)}
.bmodal__close:hover{background:var(--ink-50);transform:rotate(90deg)}
.bmodal__close svg{width:15px;height:15px}
.bmodal__field{display:grid;gap:.35rem;margin-top:1.1rem}
.bmodal__field > span,.bmodal__field > label{font-family:var(--font-mono);font-size:.63rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--stone-400)}
.bmodal__field input{width:100%;padding:.85rem 1rem;border:1px solid var(--ink-200);
  border-radius:10px;font:inherit;font-size:.94rem;color:var(--ink-900);background:#fff;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.bmodal__field input:focus{outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(31,138,68,.14)}
.bmodal__note{font-size:.8rem;line-height:1.55;color:var(--stone-400);margin-top:1.1rem}
.bmodal__err{margin-top:.9rem;padding:.6rem .8rem;border-radius:8px;font-size:.86rem;
  color:#fff;background:var(--alert)}
.bmodal__err[hidden]{display:none}
.bmodal__done[hidden]{display:none}
.bmodal__done .lead{font-size:1rem;margin:0}
.bmodal__done a{color:var(--green-600);border-bottom:1px solid var(--green-500)}

/* ---------- rotating hero banner (client 7 Sept) ----------
   Slides are stacked and cross-faded. Only the first has a src on load; the
   rest are promoted from data-src by site.js once the page is interactive, so
   four extra 1920px photographs never sit in the critical path. */
.hrot{position:absolute;inset:0;overflow:hidden}
.hrot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease)}
.hrot__img.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hrot__img{transition:none}
  .hrot__img:not(.is-on){display:none}
}
/* a photo hero on an inner page still needs the scrim + stacking context */
.phero--photo{position:relative;overflow:hidden}
.phero--photo .hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(102deg,rgba(var(--navy-rgb),.94) 0%,rgba(var(--navy-rgb),.84) 46%,rgba(var(--navy-rgb),.58) 100%)}
.phero--photo .phero__in{position:relative;z-index:2}

/* ---------- About: mission / vision / core values (client 7 Sept) ----------
   The labels were "very, very small"; mission+vision now read as one block and
   the four core values sit 2x2 with the value itself as the headline. */
.mv__k{display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,1.45rem + 2.1vw,3.1rem);letter-spacing:-.025em;line-height:1.05;
  color:var(--green-300);margin-bottom:1.1rem;text-transform:none}
.mv__s{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.42rem,1.15rem + 1.15vw,2.05rem);line-height:1.28;color:#fff;
  letter-spacing:-.015em;max-width:28ch;margin:0}
.mv__d{font-size:1.06rem;line-height:1.68;color:var(--ink-200);margin-top:1.15rem;
  max-width:58ch;border-top:0;padding-top:0}
.mv__d--lead{color:#fff;font-size:1.2rem;line-height:1.55}
.cvals{display:grid;gap:clamp(1.1rem,.8rem + 1vw,2rem);grid-template-columns:1fr}
@media(min-width:820px){.cvals{grid-template-columns:repeat(3,1fr)}}
.cval{border-top:3px solid var(--green-500);padding-top:1.35rem}
.cval__t{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.4rem);line-height:1.24;
  letter-spacing:-.025em;color:var(--ink-900);margin:0}
.sec--dark .cval__t{color:#fff}

/* ============================================================
   Client round of 8 Sept 2026
   ============================================================ */

/* G2D strip caption: the client wants it read as a line, not a micro-label. */
.g2d__cap{font-size:1.05rem;font-weight:600;letter-spacing:.08em}

/* The two client marks on the tech plaque (home) and the tech hub strip. The
   own-filters mark is the one the client wants seen; Make-in-India stays as
   it was. Inline heights were dropped from the markup for these. */
.logo-own{height:96px;width:auto}
.logo-mii{height:58px;width:auto}
@media(max-width:640px){.logo-own{height:72px}.logo-mii{height:44px}}

/* Career "What you would be joining": the four tiles still carry the inline
   color:#fff (and ink-200 body) from when that section was navy; it sits on
   paper now, so the headings vanished. Inline only loses to !important, and
   the markup is not in scope this round. Scoped to inline-styled h3s on paper
   sections; every other such h3 is navy already, so this is a no-op there. */
.sec--paper .h3[style]{color:var(--ink-900)!important}
.sec--paper .h3[style]+p[style]{color:var(--stone-500)!important}

/* Patented seal (components.patent_badge): a drawn gold roundel. md on the
   PRIMA / SENTINA heroes beside the h1, sm pinned top-right of their cards. */
.patent{display:inline-flex;flex:none;vertical-align:middle;
  filter:drop-shadow(0 4px 10px rgba(16,29,58,.25))}
.patent svg{width:100%;height:100%;display:block}
.patent--md{width:84px;height:84px}
.patent--sm{width:48px;height:48px}
.h1+.patent{margin-top:1rem}
.pshow__patent{position:absolute;top:1rem;right:1rem;z-index:2;display:inline-flex}

/* Comparative media performance (components.media_table). Compact, six
   columns; our column is tinted so the eye lands on it without a callout. */
.mtable-wrap{overflow-x:auto;border:1px solid var(--mist);border-radius:var(--r-lg);background:#fff}
.mtable{width:100%;border-collapse:collapse;min-width:820px;font-size:13.5px;line-height:1.45}
.mtable caption{caption-side:top;text-align:left;padding:1.1rem 1rem .35rem;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  color:var(--ink-900);letter-spacing:-.015em}
.mtable th,.mtable td{padding:.7rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--mist)}
.mtable thead th{font-family:var(--font-display);font-weight:600;color:var(--ink-900);
  vertical-align:bottom;border-bottom:2px solid var(--ink-900)}
.mtable tbody th{font-weight:600;color:var(--ink-800);white-space:nowrap}
.mtable td{color:var(--stone-500)}
.mtable tbody tr:last-child th,.mtable tbody tr:last-child td{border-bottom:0}
.mtable .mtable__us{background:var(--green-50);font-weight:600;color:var(--green-700)}
.sec--dark .mtable-wrap{background:rgba(255,255,255,.04);border-color:rgba(var(--hair-rgb),.18)}
.sec--dark .mtable caption,.sec--dark .mtable thead th,.sec--dark .mtable tbody th{color:#fff}
.sec--dark .mtable td{color:var(--ink-200)}
.sec--dark .mtable th,.sec--dark .mtable td{border-bottom-color:rgba(var(--hair-rgb),.18)}
.sec--dark .mtable thead th{border-bottom-color:rgba(255,255,255,.85)}
.sec--dark .mtable .mtable__us{background:rgba(31,138,68,.16);color:var(--green-300)}

/* Three outcome boxes (components.three_boxes): the client's old-site block
   without its 1/2/3 badges. */
.tri{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.1rem}
@media(min-width:700px){.tri{grid-template-columns:repeat(3,1fr)}}
.tri__box{display:grid;place-items:center;text-align:center;padding:2rem;border-radius:14px;
  background:var(--ink-900);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;letter-spacing:-.01em;line-height:1.35}

/* Operating schematics (diagrams.py): brochure-sized figure, centred. */
.opsch{max-width:560px;margin-inline:auto}
.opsch svg{width:100%;height:auto;display:block}
.opsch figcaption{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;
  line-height:1.5;color:var(--stone-500);text-align:center;margin-top:1rem}
.sec--dark .opsch figcaption{color:var(--ink-300)}

/* Field-results chart (charts.quality_chart): chart left, stat panel right. */
.qchart{display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:800px){.qchart{grid-template-columns:1.5fr 1fr}}
.qchart svg{width:100%;height:auto;display:block}
.qchart figcaption{grid-column:1/-1}
.qchart__stat{font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;
  letter-spacing:-.035em;color:var(--green-500);font-variant-numeric:tabular-nums}
.sec--dark .qchart__stat{color:var(--green-300)}

/* Plant process-flow schematic (plant_schematics.py) in place of the node
   list on steel / cement / power. The nodes are SVG <g>s carrying .apnode, so
   the button rules above are inert on them except transform; the marker
   circle takes the state instead. */
.ap__map--plant{display:block;padding-left:0}
.ap__map--plant svg{width:100%;height:auto;display:block}
.ap__map--plant .apnode{cursor:pointer;padding:0;border:0}
.ap__map--plant .apnode circle{transition:fill .3s var(--ease),stroke-width .3s var(--ease)}
.ap__map--plant .apnode:hover circle{fill:var(--green-50)}
.ap__map--plant .apnode.is-on circle{fill:var(--green-500)}
.ap__map--plant .apnode:focus-visible{outline:none}
.ap__map--plant .apnode:focus-visible circle{outline:2px solid var(--green-500);outline-offset:3px;stroke-width:4px}
@media(max-width:699px){
  .ap__map--plant{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ap__map--plant svg{min-width:760px}
}
/* A 1100-unit-wide flow in the half column renders its 15px labels at ~8px.
   Stack it full width above the detail panel instead; the machine rows then
   sit two-up so the panel does not turn into one long column. */
@media(min-width:1000px){
  .ap:has(.ap__map--plant){grid-template-columns:1fr}
  .ap:has(.ap__map--plant) .appanel__d{max-width:70ch}
  .ap:has(.ap__map--plant) .appanel__m{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
/* machines with no page (Fluent TCF / POWER) render as static rows: no link affordance */
.apmach--static{cursor:default}
.apmach--static:hover{border-color:var(--ink-100);transform:none}

/* /products/standard/ hero CTA: pinned to the right of the hero copy on
   desktop, in flow under the lead on smaller screens. The hero copy keeps
   clear of it by reserving the width the button needs. */
.phero__cta{margin-top:1.5rem}
@media(min-width:900px){
  .phero__cta{position:absolute;right:2rem;top:50%;transform:translateY(-50%);margin-top:0}
  .phero__in:has(.phero__cta){padding-right:clamp(380px,38%,460px)}
}
@media(min-width:1024px){.phero__cta{right:3.25rem}}
.qchart__plot{min-width:0}
.qchart__side{min-width:0}
.plantsch{width:100%;height:auto;display:block}