/* ═══════════════════════════════════════════════════════════
   SAKSHI TOOLS — Precision Engineering
   Design language: technical drawing sheet. Hairlines, crop
   marks, dimension callouts, monospace data, copper accent.
   ═══════════════════════════════════════════════════════════ */

/* ───────── tokens ───────── */
:root{
  --bg:#07080A;
  --bg-2:#0A0C0F;
  --bg-3:#0E1116;
  --panel:#101319;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);

  --ink:#EEF0F3;
  --ink-2:#98A0AA;
  --ink-3:#7B838E;

  --cu:#D2622F;          /* copper — from the TS monogram */
  --cu-lt:#F18A54;
  --cu-dim:rgba(210,98,47,.16);
  /* #D2622F under white text is 3.80:1 — below the 4.5:1 AA needs at this
     size. #BC5624 measures 4.67:1. --cu stays for hairlines and mono labels
     on the dark ground, where it already reads 5.27:1. */
  --cu-btn:#BC5624;
  --line-ui:rgba(255,255,255,.34);   /* interactive boundaries need 3:1, hairlines do not */
  --arc:#C6E4FF;         /* welding arc */

  /* ── the viewing room ──────────────────────────────────────────────────
     A film-viewing room is dark so that the box is the only light in it. The
     copper the shop already owned becomes the safelight: the one warm source
     in the building, and the only warm thing on the page.

     Radiographic film is read as a negative — dense metal stops the beam and
     leaves the film light, a void lets it through and leaves the film dark. So
     structure is the bright thing here and absence is the dark thing, which is
     the opposite of every dark UI convention and the reason the room reads as
     film rather than as a theme.
     ──────────────────────────────────────────────────────────────────────── */
  --room:#0A0A0C;        /* the room with the lamps off */
  --room-2:#101015;      /* a wall catching the box */
  --box:#E9EDF0;         /* the light box itself, emissive */
  --box-warm:#F2EDE2;    /* older tubes, toward the safelight */
  --film:#C9D2D8;        /* emulsion at reading density */
  --film-dense:#EDF2F5;  /* thick section — the beam barely got through */
  --film-void:#14171B;   /* a void, a crack, the edge of the part */
  --safelight:#D2622F;   /* the same copper, doing an honest job */
  --grease:#8A2B1F;      /* the interpreter own marks, oxide red */

  /* Bricolage Grotesque is the display voice: a grotesque that fits tightly
     and carries real character without becoming decorative. Archivo stays
     behind it as the fallback, so a failed font load degrades to what the site
     used before rather than to a system face. */
  --f-disp:'Bricolage Grotesque','Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* One family, two optical sizes. Bricolage carries an opsz axis from 12 to
     96, so the text face and the display face are the same voice at different
     sizes rather than two faces that happen to sit together. It also takes
     Inter off the page, which is the face every generated interface reaches
     for, and drops a font request. */
  --f-body:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(20px,5vw,72px);
  --maxw:1400px;
  --nav-h:74px;
}

/* ───────── reset ───────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
body{font-variation-settings:"opsz" 14,"wdth" 100;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:'cv05' 1,'ss01' 1;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--cu);color:#fff}

/* focus — visible and on-brand */
:focus-visible{
  outline:2px solid var(--cu-lt);
  outline-offset:3px;
  border-radius:2px;
}

/* ───────── utility ───────── */
.mono{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* skip link — visible only once focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  padding:12px 20px;background:var(--cu-btn);color:#fff;
  font-size:.9rem;font-weight:600;border-radius:0 0 2px 0;
}
.skip:focus{left:0}


/* attribution under the welding quote */

/* what happens to a drawing once it is sent */
.form__conf{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.8rem;line-height:1.65;
}
.form__conf b{color:var(--ink-2)}
.cinfo dd a[target]{border-bottom:1px solid rgba(210,98,47,.4)}

/* ═══════════════ BOOT / PRELOADER ═══════════════ */
/* The overlay lifts itself after three seconds whatever happens. <noscript>
   covers a browser with JS switched off, but not the likelier case: main.js
   loads, throws, and never adds .is-done — which left a solid CALIBRATING
   screen and no way past it. The class only ever makes this faster. */
.boot{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
  animation:bootlift .6s var(--ease) 3s forwards;
}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{display:grid;justify-items:center;gap:20px;width:min(260px,70vw)}
.boot__mark{color:var(--cu);animation:bootspin 2.4s linear infinite}
.boot__ring{
  stroke-dasharray:60 216;
  stroke-linecap:round;
  opacity:.9;
}
@keyframes bootspin{to{transform:rotate(360deg)}}
@keyframes bootlift{to{opacity:0;visibility:hidden;pointer-events:none}}
.boot__label{display:flex;justify-content:space-between;width:100%;color:var(--ink-3)}
.boot__status{color:var(--cu)}
.boot__bar{width:100%;height:1px;background:var(--line)}
.boot__bar i{
  display:block;height:100%;width:0%;
  background:var(--cu);
  transition:transform .35s var(--ease);
}

/* ═══════════════ GRAIN + SCROLL RAIL ═══════════════ */
.grain{
  position:fixed;inset:0;z-index:150;
  pointer-events:none;opacity:.028;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{background-position:0 0}
  20%{background-position:-40px 30px}
  40%{background-position:30px -40px}
  60%{background-position:-30px -30px}
  80%{background-position:40px 20px}
}
.scrollrail{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:transparent;pointer-events:none;
}
.scrollrail i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cu),var(--cu-lt));
  box-shadow:0 0 12px rgba(210,98,47,.6);
}

/* ═══════════════ NAV ═══════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding-inline:var(--pad);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.nav__brand img{width:34px;height:auto}
.nav__brandtxt{display:grid;line-height:1.15}
.nav__brandtxt b{
  font-family:var(--f-disp);
  font-size:.86rem;font-weight:700;
  letter-spacing:.13em;
}
.nav__brandtxt i{
  font-family:var(--f-mono);font-style:normal;
  font-size:.55rem;letter-spacing:.16em;
  color:var(--ink-3);
}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 11px;border-radius:2px;
  font-size:.83rem;color:var(--ink-2);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__links a .mono{font-size:.55rem;color:var(--ink-3);transition:color .3s}
.nav__links a:hover{color:var(--ink);background:rgba(255,255,255,.045)}
.nav__links a:hover .mono{color:var(--cu)}
.nav__cta{flex-shrink:0}

/* buttons */
.btn{
  --bg-btn:var(--cu-btn);
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  background:var(--bg-btn);color:#fff;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--bg-btn);border-radius:2px;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn em{font-style:normal;transition:transform .4s var(--ease)}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(210,98,47,.55)}
.btn:hover em{transform:translateX(4px)}
.btn:hover::after{transform:translateX(120%)}
.btn--sm{padding:10px 17px;font-size:.8rem}
.btn--ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line-2);
}
.btn--ghost:hover{border-color:var(--ink);box-shadow:none;background:rgba(255,255,255,.04)}
.btn--full{width:100%;justify-content:center;margin-top:6px}
.btn--bare{
  background:transparent;border-color:transparent;
  color:var(--ink-2);padding-inline:14px;
  font-weight:500;
}
.btn--bare .mono{color:var(--cu);font-size:.58rem}
.btn--bare:hover{color:var(--ink);box-shadow:none;transform:translateY(-1px)}
.btn--bare::after{display:none}

/* burger + mobile nav */
.burger{
  display:none;width:42px;height:42px;
  background:none;border:1px solid var(--line);border-radius:2px;
  cursor:pointer;padding:0;
  place-items:center;gap:5px;flex-direction:column;
}
.burger span{
  display:block;width:16px;height:1.5px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .3s;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mnav{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:105;
  max-height:calc(100svh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;align-content:start;
  background:rgba(7,8,10,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad) 30px;
  display:grid;gap:2px;
}
.mnav[hidden]{display:none}
.mnav a{
  display:flex;align-items:center;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-disp);font-size:1.15rem;font-weight:600;
}
.mnav a .mono{color:var(--cu);font-size:.6rem}
.mnav__cta{color:var(--cu);border-bottom:none!important;padding-top:24px!important}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,3.2vh,42px);
  padding:calc(var(--nav-h) + 22px) var(--pad) clamp(30px,5vh,60px);
  overflow:hidden;
  isolation:isolate;
}
.hero__gl{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:-2;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero__gl.is-live{opacity:1}
/* fallback shown only when WebGL is unavailable */
/* Shown from the first paint, not only when WebGL fails. It used to start at
   opacity 0 and appear only under .no-gl, which meant that for the seconds
   three.js spent downloading and building a scene the hero was an empty
   canvas — and the boot screen had to stay down to hide it. The photograph is
   the same one the scene is built from, so it is what the hero is supposed to
   look like anyway, and the canvas fades in on top of it when it is ready. */
.hero__fallback{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(1200px 700px at 68% 42%,rgba(210,98,47,.18),transparent 65%),
    url('../assets/img/welding-arc.webp') center/cover no-repeat;
  filter:saturate(.8) brightness(.55);
  opacity:1;transition:opacity 1s var(--ease);
}
/* Once the scene is live it owns the hero; the still underneath it goes, so a
   transparent frame never shows both at once. */
.hero__gl.is-live ~ .hero__fallback{opacity:0}
.hero__vignette{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.88) 0%,transparent 26%,transparent 58%,rgba(7,8,10,.93) 92%),
    radial-gradient(120% 82% at 50% 46%,transparent 34%,rgba(7,8,10,.62) 100%);
}
.hero__body{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-bottom:clamp(28px,5vh,56px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:26px;
}
.eyebrow .mono{color:var(--cu);font-size:.66rem}
.eyebrow .tick{
  display:block;width:22px;height:1px;background:var(--cu);
  position:relative;flex-shrink:0;
}
.eyebrow .tick::before,.eyebrow .tick::after{
  content:'';position:absolute;width:1px;height:6px;background:var(--cu);top:-2.5px;
}
.eyebrow .tick::before{left:0}
.eyebrow .tick::after{right:0}

.hero__h1{
  font-family:var(--f-disp);
  font-size:clamp(2.1rem,4.6vw,4.1rem);
  font-weight:700;
  font-stretch:112%;
  line-height:.92;
  letter-spacing:-.035em;
  text-wrap:balance;
  margin-bottom:clamp(20px,3vw,32px);
}
.hero__h1 .line{display:block}
/* one flat copper, no gradient: the emphasis is the colour and the weight,
   and a three-stop ramp across a word is decoration standing in for both.
   The lighter copper rather than the safelight, so that every keyword the
   page emphasises — purpose, intent, confidence — is the one colour. */
.hero__h1 em{font-style:normal;color:var(--cu-lt)}
.hero__sub{
  max-width:60ch;font-size:clamp(.98rem,1.35vw,1.14rem);
  color:var(--ink-2);line-height:1.62;
}
.hero__sub b{color:var(--ink);font-weight:600}
/* A filled pill beside an outlined pill beside a third bare one is the
   landing-page default. One real action, one plain route, and the telephone
   set as printed data rather than dressed as a third button. */
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.hero__alt{
  font-size:.88rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hero__alt:hover,.hero__alt:focus-visible{color:var(--cu-lt);border-color:var(--cu-lt)}
.hero__call{
  margin-top:20px;display:flex;align-items:center;gap:11px;
  font-size:.58rem;letter-spacing:.2em;color:var(--ink-3);
}
.hero__call a{color:var(--ink-2);text-decoration:none}
.hero__call a:hover,.hero__call a:focus-visible{color:var(--cu-lt)}

.hero__rail{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat{
  padding:22px 24px 26px;
  border-right:1px solid var(--line);
  display:grid;gap:5px;
}
.stat:last-child{border-right:none}
.stat b{
  font-family:var(--f-disp);
  font-size:clamp(1.5rem,2.9vw,2.4rem);
  font-weight:700;font-stretch:108%;
  letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat b i{font-style:normal;color:var(--cu);margin-inline:1px}
.stat .mono{color:var(--ink-3);font-size:.6rem}


/* ═══════════════ TICKER ═══════════════ */
.ticker{
  border-block:1px solid var(--line);
  background:var(--bg-2);
  overflow:hidden;padding:13px 0;
}
.ticker__track{
  display:flex;align-items:center;gap:26px;
  white-space:nowrap;width:max-content;
  animation:tick 44s linear infinite;
}
.ticker__track span{
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.2em;color:var(--ink-2);
}
.ticker__track i{color:var(--cu);font-size:.45rem;font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}
/* two tracks, unique content: one full track width per cycle */
@keyframes logoloop{to{transform:translateX(-100%)}}
.ticker:hover .ticker__track{animation-play-state:paused}
/* global motion switch — see the toggle in main.js */
html[data-motion="off"] .ticker__track,
html[data-motion="off"] .logos__track{animation-play-state:paused!important}
html[data-motion="off"] .grain{display:none}

/* ═══════════════ SECTION SHELL ═══════════════ */
.sec{position:relative;padding:clamp(80px,11vw,150px) 0}
.sechead{max-width:850px;margin-bottom:clamp(48px,6vw,80px)}
.sechead--center{margin-inline:auto;text-align:center}
/* Not every section is a chapter. Certifications and Customers support the
   argument rather than making it, so their headline steps down instead of
   opening at the same scale as Welding and Products. Seven identical
   entrances read as a template; a hierarchy reads as a document. */
.sechead--sm{margin-bottom:clamp(34px,4vw,52px)}
.sechead--sm .h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.sechead--sm .lead{font-size:clamp(.95rem,1.15vw,1.03rem)}

/* ═══════════════ ASYMMETRIC SECTION HEADS ═══════════════
   Every section entered the same way — eyebrow, headline, lead, all in one
   850px column, thirteen times over. Setting the lead beside the headline and
   bottom-aligning the two gives each section a horizon instead of a stack, and
   it costs nothing: same markup, same reading order, same content.

   The centred heads are deliberately left alone. Welding and Capability are
   composed around a backdrop and want their symmetry.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  .sechead:not(.sechead--center){
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(34px,4.4vw,80px);
    align-items:end;
  }
  .sechead:not(.sechead--center)>.eyebrow{grid-column:1;grid-row:1}
  .sechead:not(.sechead--center)>.h2{grid-column:1;grid-row:2}
  /* the loupe note is a note after the lede, not a label above it: without an
     explicit placement it auto-placed into row 1 column 2 — the cell the
     removed eyebrow used to hold */
  .sechead:not(.sechead--center)>.loupe-hint{grid-column:2;grid-row:3;margin-top:16px}
  .sechead:not(.sechead--center)>.lead{
    grid-column:2;grid-row:2;
    margin-top:0;max-width:42ch;
    padding-bottom:.42em;      /* sits on the headline baseline, not its box */
  }
}
.sechead--center .eyebrow{justify-content:center}
/* Bricolage carries an optical-size axis; pinning it to the display end is
   what keeps the joins crisp at 80px instead of letting it render text-grade */
.h2,.hero__h1,.proof__v{font-variation-settings:"opsz" 96,"wdth" 92}
.h2{
  font-family:var(--f-disp);
  font-size:clamp(2.1rem,6vw,5rem);
  font-weight:700;font-stretch:106%;
  line-height:.98;letter-spacing:-.038em;
  text-wrap:balance;
}
.h2--sm{font-size:clamp(1.7rem,3.6vw,2.9rem)}
.lead{
  margin-top:22px;max-width:62ch;
  font-size:clamp(.98rem,1.25vw,1.1rem);
  color:var(--ink-2);line-height:1.66;
}
.sechead--center .lead{margin-inline:auto}

/* ═══════════════ 01 · LAWS ═══════════════ */
.sec--standard{background:var(--bg)}
.sec--standard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 75% 55% at 50% 42%,#000 5%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 42%,#000 5%,transparent 72%);
  opacity:.55;
}
.laws{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  position:relative;
}
.law{
  padding:clamp(26px,3vw,40px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .5s var(--ease);
}
.law::before{
  content:'';position:absolute;top:0;left:0;width:0;height:1px;
  background:var(--cu);transition:transform .6s var(--ease);
}
.law:hover{background:rgba(255,255,255,.022)}
.law:hover::before{width:100%}
@media (min-width:1080px){ .laws{grid-template-columns:repeat(3,1fr)} }
.law__n{
  color:var(--cu);display:block;margin-bottom:18px;font-size:.6rem;
}
.law h3{
  font-family:var(--f-disp);
  font-size:1.32rem;font-weight:600;font-stretch:104%;
  letter-spacing:-.02em;margin-bottom:12px;
}
.law p{color:var(--ink-2);font-size:.94rem;line-height:1.68}

/* quality definition showpiece */
.qdef{
  position:relative;
  margin-top:clamp(56px,7vw,96px);
  padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%);
  text-align:center;
}
.qdef__marks i{
  position:absolute;width:13px;height:13px;
  border:1px solid var(--cu);opacity:.85;
}
.qdef__marks i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.qdef__marks i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.qdef__marks i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.qdef__marks i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.qdef__cap{color:var(--cu);display:block;margin-bottom:26px}
.qdef__line{
  font-family:var(--f-disp);
  font-size:clamp(1.55rem,4.1vw,3.3rem);
  font-weight:600;font-stretch:104%;
  line-height:1.1;letter-spacing:-.028em;
}
.qdef__line em{
  font-style:normal;color:var(--cu-lt);
  position:relative;white-space:nowrap;
}
.qdef__line em::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;
  height:2px;background:var(--cu);opacity:.35;
}
.qdef__dim{margin:clamp(30px,4vw,48px) auto 0;max-width:520px}
.dimline{display:flex;align-items:center;gap:12px}
.dimline i{flex:1;height:1px;background:var(--line-2);position:relative}
.dimline i::before{
  content:'';position:absolute;top:-3px;width:1px;height:7px;background:var(--line-2);
}
.dimline i:first-child::before{left:0}
.dimline i:last-child::before{right:0}
.dimline b{color:var(--ink-3);font-size:.58rem;white-space:nowrap}
.qdef__vals{
  display:flex;justify-content:center;gap:clamp(16px,4vw,44px);
  margin-top:18px;
}
.qdef__vals span{font-size:.86rem;letter-spacing:.06em}
.qdef__vals .bad{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(210,98,47,.7)}
.qdef__vals .good{color:var(--cu-lt);font-weight:500}
.qdef__note{
  margin:30px auto 0;max-width:56ch;
  color:var(--ink-2);font-size:.94rem;
}

/* ═══════════════ 02 · WELDING ═══════════════ */
.sec--weld{
  background:var(--bg-2);
  border-block:1px solid var(--line);
  overflow:hidden;
}
/* Capped so the clip is never enlarged past its own pixels. At 1440x900 the
   box comes out 1526x846 against a 2048x1152 source — a 0.75 scale, i.e. the
   video is still being scaled DOWN. The fade below already ends on the section
   colour, so the cap is invisible. */
.weld__bg{position:absolute;inset:0;bottom:auto;height:min(94vh,1000px);z-index:0}
.weld__bg img,
.weld__bg video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.5;
  filter:contrast(1.16) saturate(.9);
  transform:scale(1.06);
}
/* The poster is the resting state rather than a blank. If playback is ever
   refused — iOS Low Power Mode does exactly that — the section still carries an
   image instead of going empty, and the clip simply fades the last two
   hundredths when it does start. */
.weld__bg video{opacity:.5;transition:opacity 1.2s var(--ease);z-index:1}
.weld__bg video.is-playing{opacity:.58}
.weld__bgfade{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 40%,rgba(198,228,255,.11),transparent 70%),
    linear-gradient(180deg,var(--bg-2) 0%,rgba(10,12,15,.5) 30%,rgba(10,12,15,.84) 66%,var(--bg-2) 100%);
}
.sec--weld .wrap{position:relative;z-index:1}
.weld__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.panel{
  background:rgba(10,12,15,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(26px,3vw,38px);
}
.panel--accent{background:rgba(16,19,25,.92)}
.panel__t{
  color:var(--cu);margin-bottom:26px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.proc li{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.proc li:last-child{border-bottom:none;padding-bottom:0}
.proc b{
  font-family:var(--f-mono);font-size:.78rem;font-weight:500;
  color:var(--ink);letter-spacing:.08em;
  min-width:56px;flex-shrink:0;
}
.proc span{color:var(--ink-2);font-size:.9rem}
.acc{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:none;padding-bottom:0}
.acc img{
  width:66px;height:66px;flex-shrink:0;object-fit:contain;
  padding:5px;border-radius:50%;
  background:rgba(255,255,255,.93);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 18px -6px rgba(0,0,0,.7);
}
.acc b{
  display:block;font-family:var(--f-disp);
  font-size:1.06rem;font-weight:700;letter-spacing:.01em;
  margin-bottom:7px;
}
.acc p{font-size:.88rem;color:var(--ink-2);line-height:1.6}
/* The rule above this one makes every <b> in an accordion a block heading,
   which is right for the item's title and wrong for a bold word inside its
   prose — written naturally, it silently broke a sentence onto three lines.
   Emphasis inside the paragraph stays inline and simply brightens. */
.acc p b{display:inline;font-family:inherit;font-size:inherit;font-weight:600;
  letter-spacing:inherit;margin:0;color:var(--ink)}
.check li{
  position:relative;padding:11px 0 11px 26px;
  font-size:.92rem;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.check li:last-child{border-bottom:none}
.check li::before{
  content:'';position:absolute;left:0;top:19px;
  width:9px;height:5px;
  border-left:1.5px solid var(--cu);border-bottom:1.5px solid var(--cu);
  transform:rotate(-45deg);
}
.weld__quote{
  margin-top:clamp(48px,6vw,80px);text-align:center;
  font-family:var(--f-disp);
  font-size:clamp(1.35rem,3.4vw,2.6rem);
  font-weight:500;font-stretch:102%;
  letter-spacing:-.025em;line-height:1.18;
  color:var(--ink-2);text-wrap:balance;
}
.weld__quote em{font-style:normal;color:var(--cu-lt)}

/* ═══════════════ 03 · PRODUCTS ═══════════════ */
.sec--products{background:var(--bg)}
.prods{display:grid;gap:clamp(20px,2.4vw,30px)}
.prod{
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.028),transparent 55%);
  overflow:hidden;
  /* transform is driven by the rAF lerp in main.js; transitioning it here
     fought that loop. preserve-3d was neutralised by overflow:hidden. */
  transition:border-color .5s var(--ease);
}
.prod:hover{border-color:var(--line-2)}
.prod--wide{
  display:grid;grid-template-columns:1.25fr .95fr;align-items:center;
}
/* alternate the feature rows so the page does not march down one rail */
.prod--flip{grid-template-columns:.95fr 1.25fr}
.prod--flip .prod__stage{order:2}
.prod--flip .prod__meta{order:1}

/* the four supporting products */
.prods__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}
/* Keep every catalogue card aligned: the product copy begins at the same
   vertical position even when the product photograph has a different aspect ratio. */
.prods__grid .prod{
  display:flex;
  flex-direction:column;
}
.prods__grid .prod__stage--sm{
  height:clamp(420px,31vw,560px);
  min-height:0;
  flex:0 0 clamp(420px,31vw,560px);
}
.prods__grid .prod__meta{
  flex:1 1 auto;
}
.prod__stage{
  position:relative;
  padding:clamp(30px,4vw,60px);
  display:grid;place-items:center;
  min-height:340px;
  overflow:hidden;
}

.prod__stage img{
  position:relative;z-index:1;
  width:100%;max-height:400px;object-fit:contain;
  filter:drop-shadow(0 32px 44px rgba(0,0,0,.75));
  transform:scale(var(--zoom,1));
  transition:transform .8s var(--ease);
}
.prod:hover .prod__stage img{will-change:transform;
  transform:translateY(-8px) scale(calc(var(--zoom,1) * 1.035));
}
.prod__glow{
  position:absolute;inset:0;
  background:radial-gradient(50% 46% at 50% 54%,rgba(198,228,255,.15),transparent 70%);
  transition:opacity .7s var(--ease);opacity:.75;
}
.prod__glow--red{background:radial-gradient(50% 46% at 50% 54%,rgba(210,98,47,.22),transparent 70%)}
.prod:hover .prod__glow{opacity:1}
.prod__marks i{
  position:absolute;width:11px;height:11px;
  border:1px solid var(--line-2);z-index:2;
  transition:border-color .5s var(--ease);
}
.prod:hover .prod__marks i{border-color:var(--cu)}
.prod__marks i:nth-child(1){top:16px;left:16px;border-right:0;border-bottom:0}
.prod__marks i:nth-child(2){top:16px;right:16px;border-left:0;border-bottom:0}
.prod__marks i:nth-child(3){bottom:16px;left:16px;border-right:0;border-top:0}
.prod__marks i:nth-child(4){bottom:16px;right:16px;border-left:0;border-top:0}
.prod__meta{padding:clamp(26px,3vw,44px)}
.prod--wide .prod__meta{border-left:1px solid var(--line)}
.prod--flip .prod__meta{border-left:none;border-right:1px solid var(--line)}
.prod__meta p em{font-style:normal;color:var(--cu-lt)}
.prod__code{color:var(--cu);display:block;margin-bottom:14px;font-size:.6rem}
.prod__meta h3{
  font-family:var(--f-disp);
  font-size:clamp(1.3rem,2.2vw,1.85rem);
  font-weight:700;font-stretch:104%;
  letter-spacing:-.025em;margin-bottom:14px;
}
.prod__meta p{color:var(--ink-2);font-size:.94rem;line-height:1.65}
.spec{margin-top:26px;border-top:1px solid var(--line)}
.spec > div{
  display:flex;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.spec dt{color:var(--ink-3);font-size:.58rem;flex-shrink:0}
.spec dd{color:var(--ink);font-size:.86rem;text-align:right}
.range{
  position:relative;
  margin-top:clamp(24px,3vw,36px);
  padding:clamp(32px,4.5vw,60px) clamp(24px,4vw,56px);
  border:1px solid var(--line);
  background:
    linear-gradient(140deg,rgba(210,98,47,.07),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%);
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.range__marks{position:absolute;inset:0;pointer-events:none}
.range__marks i{position:absolute;width:13px;height:13px;border:1px solid var(--cu);opacity:.8}
.range__marks i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.range__marks i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.range__marks i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.range__marks i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.range__head .mono{color:var(--cu);display:block;margin-bottom:18px}
.range__head h3{
  font-family:var(--f-disp);
  font-size:clamp(1.45rem,2.7vw,2.3rem);
  font-weight:700;font-stretch:104%;
  line-height:1.08;letter-spacing:-.028em;margin-bottom:16px;
}
.range__head p{color:var(--ink-2);font-size:.98rem;line-height:1.68;max-width:46ch}
.range__list{border-top:1px solid var(--line)}
.range__list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.range__list b{
  font-family:var(--f-disp);font-size:1.02rem;font-weight:600;
  letter-spacing:-.015em;flex-shrink:0;
}
.range__list span{color:var(--ink-3);font-size:.84rem;text-align:right}

/* real welders, in the welding section */

/* ═══════════════ SPECIFICATION INDEX ═══════════════ */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.specs{margin-top:clamp(30px,4vw,52px);border:1px solid var(--line)}
.specs__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:20px clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line);
}
.specs__t{color:var(--cu)}
.specs__filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid var(--line-ui);
  color:var(--ink-2);font-size:.82rem;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.chip .mono{font-size:.55rem;color:var(--ink-3);transition:color .3s var(--ease)}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.is-on{color:#fff;background:var(--cu-btn);border-color:var(--cu-btn)}
.chip.is-on .mono{color:#fff}

.specs__scroll{overflow-x:auto}
.specs__scroll:focus-visible{outline:2px solid var(--cu-lt);outline-offset:-2px}
.spec-table{width:100%;border-collapse:collapse;min-width:760px}
.spec-table th{
  text-align:left;padding:14px clamp(14px,1.8vw,22px);
  color:var(--ink-3);font-size:.55rem;font-weight:500;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.spec-table td{
  padding:15px clamp(14px,1.8vw,22px);
  border-bottom:1px solid var(--line);
  font-size:.9rem;color:var(--ink-2);vertical-align:top;
}
.spec-table tr:last-child td{border-bottom:none}
.spec-table tbody tr{transition:background .35s var(--ease)}
.spec-table tbody tr:hover{background:rgba(255,255,255,.03)}
.spec-table tbody tr[hidden]{display:none}
.spec__code{color:var(--cu);font-size:.62rem;white-space:nowrap}
.spec__code a,.prod__code a{
  color:inherit;border-bottom:1px solid rgba(210,98,47,.45);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.spec__code a:hover,.prod__code a:hover{color:var(--cu-lt);border-bottom-color:var(--cu-lt)}
.spec__name{color:var(--ink);font-weight:500}
.spec__cap{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.spec__cap.is-blank{color:var(--ink-3)}
.specs__note{
  padding:18px clamp(18px,2.4vw,28px);
  border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.85rem;line-height:1.65;
}

.prods__foot{
  margin-top:clamp(36px,4vw,56px);text-align:center;
  color:var(--ink-2);font-size:1rem;
}
.prods__foot b{color:var(--ink);font-weight:600}
.prods__foot a{
  color:var(--cu-lt);font-weight:600;
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.prods__foot a:hover{border-bottom-color:var(--cu-lt)}

.crumbs{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  color:var(--ink-3);margin-bottom:clamp(24px,3vw,40px);
}
.crumbs a{color:var(--ink-2);border-bottom:1px solid transparent;transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--cu-lt)}
.prod__cta{margin-top:26px}

/* ═══════════════ 04 · CAPABILITY ═══════════════ */
.sec--cap{background:var(--bg-2);border-block:1px solid var(--line)}
.caps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.cap{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  min-height:320px;
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.cap--tall{grid-row:span 2;min-height:660px}
.cap--wide{grid-column:span 2}
.cap img,
.cap video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.06) brightness(.82);
  transition:transform 1.1s var(--ease),filter .7s var(--ease);
}
.cap::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,8,10,.96) 4%,rgba(7,8,10,.55) 42%,rgba(7,8,10,.1) 78%);
  transition:background .6s var(--ease);
}
.cap:hover img,.cap:hover video{transform:scale(1.06);filter:grayscale(0) contrast(1.08) brightness(.94)}
.cap figcaption{padding:clamp(22px,2.6vw,34px);width:100%}
.cap figcaption .mono{
  color:var(--cu);display:block;margin-bottom:12px;font-size:.58rem;
}
.cap figcaption b{
  display:block;font-family:var(--f-disp);
  font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:700;font-stretch:104%;
  letter-spacing:-.022em;margin-bottom:9px;
}
.cap figcaption p{color:var(--ink-2);font-size:.9rem;line-height:1.6;max-width:52ch}

/* ═══════════════ HOW WE WORK ═══════════════ */
.sec--flow{background:var(--bg-2);border-block:1px solid var(--line)}
.flow{
  display:grid;
  border-top:1px solid var(--line);
  counter-reset:flow;
}
.flow__step{
  display:grid;
  grid-template-columns:clamp(72px,9vw,130px) 1fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(24px,3vw,38px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.flow__step::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--cu);transition:transform .7s var(--ease);
}
.flow__step:hover::before{width:100%}
.flow__n{
  color:var(--cu);font-size:.8rem;letter-spacing:.1em;
  padding-top:.35em;
}
.flow__body h3{
  font-family:var(--f-disp);
  font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:700;font-stretch:104%;
  letter-spacing:-.024em;margin-bottom:10px;
}
.flow__body p{
  color:var(--ink-2);font-size:.96rem;line-height:1.68;
  max-width:60ch;margin-bottom:14px;
}
.flow__rec{
  display:inline-block;
  color:var(--ink-3);font-size:.55rem;line-height:1.7;
  padding:6px 12px;border:1px solid var(--line);border-radius:2px;
}
.flow__foot{
  margin-top:clamp(28px,3.5vw,44px);
  color:var(--ink-2);font-size:1rem;text-align:center;
}
.flow__foot a{
  color:var(--cu-lt);font-weight:600;margin-left:10px;
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.flow__foot a:hover{border-bottom-color:var(--cu-lt)}

/* ═══════════════ 05 · CERTIFICATIONS ═══════════════ */
.sec--certs{background:var(--bg)}
.certs{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
}
.cert{
  padding:clamp(30px,3.4vw,48px) 20px;
  display:grid;justify-items:center;gap:14px;text-align:center;
  border-right:1px solid var(--line);
  transition:background .5s var(--ease);
}
.cert:last-child{border-right:none}
.cert:hover{background:rgba(255,255,255,.025)}
.cert img{
  width:clamp(78px,7vw,106px);height:auto;
  padding:8px;border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 26px -10px rgba(0,0,0,.8);
  filter:saturate(.55);
  transition:filter .5s var(--ease),transform .6s var(--ease),box-shadow .5s var(--ease);
}
.cert:hover img{
  filter:saturate(1);transform:scale(1.05) translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 16px 34px -12px rgba(0,0,0,.9);
}
.cert b{
  font-family:var(--f-disp);font-size:1.02rem;font-weight:700;letter-spacing:.005em;
}
.cert .mono{color:var(--ink-3);font-size:.55rem;line-height:1.5}


/* ═══════════════ 06 · CUSTOMERS ═══════════════ */
.sec--cust{background:var(--bg-2);border-block:1px solid var(--line);padding-bottom:clamp(60px,8vw,110px)}
.logos{
  display:flex;gap:0;overflow:hidden;width:100%;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logos__track{
  display:flex;align-items:center;gap:clamp(40px,6vw,88px);
  padding-inline:clamp(20px,3vw,44px);
  flex-shrink:0;
  animation:logoloop 84s linear infinite;
  animation-play-state:paused;   /* started when the row is actually on screen */
}
.logos__track img{
  height:clamp(42px,4.8vw,62px);width:auto;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.56;
  transition:filter .5s var(--ease),opacity .5s var(--ease);
}
.logos__track img:hover{filter:none;opacity:1}

.logos__track img.logo--lead:hover{opacity:1}


/* Indian Railways customer mark — simplified grey train + INDIA RAILWAYS, full emblem on hover */
.railways-logo{
  position:relative;
  flex:0 0 auto;
  width:clamp(92px,8vw,116px);
  height:clamp(96px,8.5vw,122px);
  display:grid;
  place-items:center;
  transition:transform .35s var(--ease);
}
.railways-logo__loop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.9;
  filter:none;
  transition:opacity .35s var(--ease),filter .35s var(--ease),transform .35s var(--ease);
}
.railways-logo__core{
  position:absolute;
  width:82%;
  height:82%;
  object-fit:contain;
  opacity:0;
  filter:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.railways-logo:hover .railways-logo__loop{
  opacity:0;
  transform:scale(.94);
}
.railways-logo:hover .railways-logo__core{
  opacity:1;
  transform:scale(1.04);
}
.railways-logo:hover{
  transform:scale(1.04);
}
.logos__track .railways-logo.logo--lead{
  height:clamp(96px,8.5vw,122px);
  width:clamp(92px,8vw,116px);
  opacity:1;
}
.logos__track .railways-logo.logo--lead:hover{opacity:1}
@media (max-width:900px){.logos__track .railways-logo{order:-1}}

/* The two rules above lose to `.logos__track img` (class+element beats a bare
   class), so both layers were inheriting that wall's opacity:.56 and its
   brightness(0) invert(1) — which flattened the red emblem to a white blob,
   sized both layers 62px inside a 115px box, and left the hover reveal dead
   because the core never actually sat at opacity 0. Re-stated at matching
   specificity so the intended behaviour survives. */
.logos__track .railways-logo__loop,
.logos__track .railways-logo__core{
  position:absolute;
  width:100%;height:100%;
  object-fit:contain;
}
.logos__track .railways-logo__loop{
  opacity:.62;
  filter:grayscale(1) brightness(1.95) contrast(.85);
}
.logos__track .railways-logo__core{
  width:88%;height:88%;
  opacity:0;
  filter:none;
}
.logos__track .railways-logo:hover .railways-logo__loop{opacity:0;transform:scale(.94)}
.logos__track .railways-logo:hover .railways-logo__core{opacity:1;transform:scale(1.04)}
.logos.is-live .logos__track{animation-play-state:running}
.logos.is-live:hover .logos__track{animation-play-state:paused}

/* ═══════════════ THE WORKS (aerial) ═══════════════ */
.aerial{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(320px,52vh,560px);
  display:flex;align-items:flex-end;
  border-block:1px solid var(--line);
}
.aerial video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05) brightness(.72);
  transform:scale(1.04);
}
.aerial__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(7,8,10,.95) 3%,rgba(7,8,10,.35) 45%,rgba(7,8,10,.12) 100%);
}
.aerial__cap{padding-block:clamp(26px,4vw,48px)}
.aerial__cap .mono{color:var(--cu);display:block;margin-bottom:12px;font-size:.6rem}
.aerial__cap p{
  font-family:var(--f-disp);
  font-size:clamp(1.3rem,3.2vw,2.4rem);
  font-weight:600;font-stretch:104%;
  letter-spacing:-.028em;line-height:1.1;
}

/* ═══════════════ PEOPLE / HISTORY ═══════════════ */
.sec--people{background:var(--bg)}
.people{
  display:grid;grid-template-columns:1fr 1.08fr;
  gap:clamp(34px,5vw,80px);align-items:start;
}
.people__media{position:relative;border:1px solid var(--line);overflow:hidden}
.people__media img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:60% center;
  filter:grayscale(.28) contrast(1.06) brightness(.86);
  transition:filter .7s var(--ease),transform 1.1s var(--ease);
}
.people__media:hover img{filter:grayscale(0) brightness(.95);transform:scale(1.03)}
.people__marks i{
  position:absolute;width:12px;height:12px;border:1px solid var(--cu);z-index:2;opacity:.8;
}
.people__marks i:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0}
.people__marks i:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0}
.people__marks i:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0}
.people__marks i:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0}
.people__body > p{color:var(--ink-2);font-size:1rem;line-height:1.72;margin-top:20px}

/* ── the landing-page figure ───────────────────────────────────────────────
   Every landing page shipped with one <img> on it and that image was the
   header logo. On a site whose whole argument is "we made this, here is how",
   a page of unbroken prose is the weakest thing it can be.

   Two treatments, because the material is two things. A photograph is cropped
   to the frame and carries the same graded, slightly desaturated look the
   history photograph does, lifting to full colour on hover. A part is a
   cut-out with alpha: it keeps its whole silhouette, sits on the page's own
   ground, and is never cropped — cropping a cut-out amputates it rather than
   framing it. */
/* Capped at the width the file actually holds, and centred. The plant clips
   are 800x450 — that is the ceiling, and no encoder invents detail above it.
   Left to fill the 1152px column the figure rendered at 1.28x, which on top of
   the 1.13x taken getting to 900 is about 1.44x from the original: visibly
   soft, on a site whose whole argument is that things are made precisely.
   Smaller and sharp beats bigger and mushy here. */
.pagefig{
  margin-top:clamp(34px,4vw,54px);
  max-width:900px;
  margin-inline:auto;
}
.pagefig__frame{
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
}
.pagefig__frame img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(.24) contrast(1.05) brightness(.9);
  transition:filter .7s var(--ease),transform 1.1s var(--ease);
}
.pagefig__frame:hover img{filter:none;transform:scale(1.02)}

/* A part is an object, not a scene: no grade, no crop, no zoom on hover —
   there is no scene for the zoom to reveal. */
.pagefig--part .pagefig__frame{background:var(--bg-2)}
.pagefig--part .pagefig__frame img{
  object-fit:contain;
  padding:clamp(18px,3vw,36px);
  filter:none;
}
.pagefig--part .pagefig__frame:hover img{transform:none}

.pagefig__marks i{
  position:absolute;width:12px;height:12px;border:1px solid var(--cu);z-index:2;opacity:.8;
}
.pagefig__marks i:nth-child(1){top:12px;left:12px;border-right:0;border-bottom:0}
.pagefig__marks i:nth-child(2){top:12px;right:12px;border-left:0;border-bottom:0}
.pagefig__marks i:nth-child(3){bottom:12px;left:12px;border-right:0;border-top:0}
.pagefig__marks i:nth-child(4){bottom:12px;right:12px;border-left:0;border-top:0}

.pagefig figcaption{
  margin-top:12px;
  color:var(--cu);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

@media (prefers-reduced-motion:reduce){
  .pagefig__frame img,.pagefig__frame:hover img{transition:none;transform:none}
}
.timeline{
  display:flex;align-items:center;gap:16px;
  margin-top:30px;color:var(--cu);
}
.timeline .mono{font-size:.68rem;flex-shrink:0}
.timeline__bar{flex:1;height:1px;background:var(--line-2);position:relative}
.timeline__bar i{
  position:absolute;inset:0;width:0;background:var(--cu);
  transition:transform 1.8s var(--ease);
}
.timeline.is-in .timeline__bar i{width:100%}
.timeline__bar::before,.timeline__bar::after{
  content:'';position:absolute;top:-4px;width:1px;height:9px;background:var(--line-2);
}
.timeline__bar::before{left:0}
.timeline__bar::after{right:0}
.people__second{margin-top:34px;border:1px solid var(--line);overflow:hidden}
.people__second img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:grayscale(.3) brightness(.84);
  transition:filter .7s var(--ease);
}
.people__second:hover img{filter:grayscale(0) brightness(.95)}
.mission{
  margin-top:34px;padding:26px 28px;
  border-left:2px solid var(--cu);
  background:linear-gradient(90deg,var(--cu-dim),transparent 70%);
  color:var(--ink-2);font-size:.96rem;line-height:1.7;
}
.mission .mono{display:block;color:var(--cu);margin-bottom:10px;font-size:.58rem}

/* ═══════════════ CONTACT ═══════════════ */
.sec--contact{
  background:var(--bg-2);border-top:1px solid var(--line);
  position:relative;overflow:hidden;
}
.sec--contact::before{
  content:'';position:absolute;top:-30%;left:50%;translate:-50% 0;
  width:900px;height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(210,98,47,.1),transparent 62%);
}
.sec--contact .h2{font-size:clamp(1.9rem,3.5vw,3.1rem)}
.contact{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,80px);align-items:start;
  position:relative;
}
/* what a buyer needs to hand over before we can price it */
.quotekit{
  margin-top:40px;padding:26px clamp(20px,2.4vw,30px);
  border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(255,255,255,.028),transparent 62%);
}
.quotekit__t{color:var(--cu);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.quotekit__list{counter-reset:qk}
.quotekit__list li{
  counter-increment:qk;position:relative;
  padding:14px 0 14px 34px;border-bottom:1px solid var(--line);
}
.quotekit__list li:last-child{border-bottom:none}
.quotekit__list li::before{
  content:counter(qk,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:var(--f-mono);font-size:.56rem;color:var(--cu);letter-spacing:.1em;
}
.quotekit__list b{display:block;color:var(--ink);font-size:.95rem;font-weight:600;margin-bottom:4px}
.quotekit__list span{color:var(--ink-2);font-size:.88rem;line-height:1.6}
.quotekit__note{margin-top:16px;color:var(--ink-3);font-size:.85rem;line-height:1.65}

.cinfo{margin-top:44px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cinfo > div{background:var(--bg-2);padding:22px 24px;display:grid;gap:8px}
.cinfo dt{color:var(--cu);font-size:.58rem}
.cinfo dd{color:var(--ink-2);font-size:.94rem;line-height:1.75}
.cinfo dd a{
  color:var(--ink);
  border-bottom:1px solid rgba(210,98,47,.4);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cinfo dd a:hover{color:var(--cu-lt);border-bottom-color:var(--cu-lt)}

/* Inline links in running prose had no affordance whatsoever. The base rule
   is a{color:inherit;text-decoration:none}, and nothing re-styled anchors
   inside a lead, an accordion body or the history section — so a link sat at
   exactly the parent's colour with no underline and no border, indis-
   tinguishable from the sentence around it. On the pages added for the
   cross-links, the only clue a reader had was a trailing arrow character.

   Same treatment the contact block above and the drawing spec already use:
   ink text on a copper hairline, brightening to cu-lt. Focus is included
   because a keyboard user had even less to go on than a mouse user. */
.lead a,
.acc a,
.foot__base a,
.people__body p a{
  color:var(--ink);
  border-bottom:1px solid rgba(210,98,47,.4);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lead a:hover,.lead a:focus-visible,
.acc a:hover,.acc a:focus-visible,
.people__body p a:hover,.people__body p a:focus-visible{
  color:var(--cu-lt);border-bottom-color:var(--cu-lt);
}
/* Note under the address. One public address is deliberate — a second one
   only helps if the sender knows which to pick, and a buyer who guesses wrong
   waits longer than one who wrote a clear subject line. --ink-3 measures
   5.11:1 on --bg-2, so it sits back from the link without dropping below the
   floor the rest of this file holds to. */
.cinfo dd small{display:block;margin-top:8px;color:var(--ink-3);font-size:.78rem;line-height:1.6;letter-spacing:.01em}

.form{
  border:1px solid var(--line);
  background:linear-gradient(175deg,rgba(255,255,255,.03),transparent 55%);
  padding:clamp(26px,3.2vw,42px);
}
.form__t{
  color:var(--cu);padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;
}
.field label i{color:var(--cu);font-style:normal}
.field input,.field textarea{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--line-ui);border-radius:2px;
  font-size:.95rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  resize:vertical;
}
.field input:focus,.field textarea:focus{
  border-color:var(--cu-lt);
  background:rgba(255,255,255,.05);
}
/* outline:none used to win on specificity and remove the only focus ring
   on the only form on the site */
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--cu-lt);outline-offset:2px;
}
.field input:user-invalid{border-color:#B3452B}
.field--split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field--split .field,.field--split > div{margin-bottom:0}
.qfields{
  border:1px solid var(--line);border-radius:2px;
  padding:18px 16px 4px;margin:4px 0 18px;
}
.qfields legend{
  padding:0 8px;color:var(--cu);font-size:.55rem;
  font-family:var(--f-mono);letter-spacing:.14em;
}
.field select{
  width:100%;padding:13px 15px;
  background:rgba(255,255,255,.028);
  border:1px solid var(--line-ui);border-radius:2px;
  font-size:.95rem;color:var(--ink);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select:focus-visible{outline:2px solid var(--cu-lt);outline-offset:2px}
.field select option{background:var(--panel);color:var(--ink)}
.field input[type=file]{
  padding:11px 13px;font-size:.85rem;color:var(--ink-2);
  background:rgba(255,255,255,.028);border:1px dashed var(--line-ui);
}
.field input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 13px;cursor:pointer;
  background:transparent;border:1px solid var(--line-ui);border-radius:2px;
  color:var(--ink);font:inherit;font-size:.8rem;
}
.field input[type=file]::file-selector-button:hover{border-color:var(--ink-2)}
.field__hint{color:var(--ink-3);margin-left:8px;font-size:.5rem}
.field__files{margin-top:8px;color:var(--cu-lt);font-size:.55rem;line-height:1.8}
.field__read{margin-top:10px;color:var(--ink-3);font-size:.8rem;line-height:1.55}
.field--drop.is-over input[type=file]{border-color:var(--cu-lt);background:var(--cu-dim)}
.form.is-over{outline:1px dashed var(--cu-lt);outline-offset:-6px}

/* ── the light box ──
   A DXF dropped into the form is drawn here before it is sent — the same
   emissive box the welds are read on, now with the customer's own drawing
   clipped to it. The readings sit beneath as film identification would. */
.lbox{
  margin-top:16px;border:1px solid var(--line-2);
  background:var(--panel);
  animation:lboxOn .5s var(--ease) both;
}
@keyframes lboxOn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lbox__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
}
.lbox__t{color:var(--cu);font-size:.6rem;letter-spacing:.16em}
.lbox__file{color:var(--ink-3);font-size:.58rem;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbox__film{
  display:block;width:100%;height:260px;
  background:var(--box);
  box-shadow:inset 0 0 40px rgba(20,23,27,.08);
}
/* ── flat drawing and solid part share one stage ──────────────────────────
   Both live in the same box and the switch swaps which is on top, rather than
   one appearing below the other. Keeping the height fixed means flipping
   between them does not move the read-out down the page under the reader's
   cursor. The 3D canvas is kept in the layout rather than display:none when
   hidden, because a WebGL canvas that has never been laid out reports zero
   size and renders nothing the first time it is shown. */
.lbox__stage{position:relative}
/* Whichever view is showing owns the height, and the other is laid over it.
   This matters because the two are not the same shape: a DXF is drawn into a
   fixed 260px band, while a PDF is shown as the whole sheet and can run to
   1775px for an A4 drawing. Letting the solid inherit that made a bracket
   render into a canvas nearly two thousand pixels tall — correct arithmetic,
   absurd result. Swapping which one is in the flow keeps the flat page as tall
   as it needs to be and the solid in a band the size of the drawing view, so
   turning a part is never a scroll. */
.lbox__solid{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease);
  background:radial-gradient(120% 120% at 50% 30%,#F4F6F8,var(--box));
}
.lbox.is-solid .lbox__solid{position:relative;height:260px}
.lbox.is-solid .lbox__film{position:absolute;inset:0;height:100%}
.lbox__solid canvas{display:block;width:100%;height:100%;cursor:grab}
.lbox__solid canvas:active{cursor:grabbing}
.lbox.is-solid .lbox__solid{opacity:1;visibility:visible;pointer-events:auto}
.lbox.is-solid .lbox__film{opacity:0}
.lbox__film{transition:opacity .28s var(--ease)}
.lbox__hint{
  position:absolute;left:10px;bottom:8px;
  font-size:.5rem;letter-spacing:.14em;color:rgba(20,23,27,.42);pointer-events:none;
}

/* the flat / solid switch — the same segmented language as the read-out */
.lbox__mid{flex:1;display:flex;justify-content:center}
.vsw{display:inline-flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.vsw__b{
  font:500 .55rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;background:transparent;color:var(--ink-3);
  border:0;cursor:pointer;transition:background .18s,color .18s;
}
.vsw__b + .vsw__b{border-left:1px solid var(--line-2)}
.vsw__b:hover{color:var(--ink)}
.vsw__b[aria-pressed="true"]{background:var(--cu);color:#0B0C0E}
.vsw__b:focus-visible{outline:2px solid var(--cu);outline-offset:-2px}
@media (max-width:640px){ .lbox__hint{display:none} }

.lbox.is-empty .lbox__film,.lbox.is-empty .lbox__read{display:none}
.lbox.is-empty .lbox__solid,.lbox.is-empty .vsw{display:none}
.lbox.is-empty .lbox__note{color:var(--ink-2);font-family:var(--f-body);font-size:.85rem;letter-spacing:0;text-transform:none}
.lbox__read{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);
}
.lbox__read>div{padding:12px 14px;border-right:1px solid var(--line)}
.lbox__read>div:nth-child(4){border-right:none}
.lbox__read dt{font-size:.55rem;letter-spacing:.14em;color:var(--ink-3);margin-bottom:5px}
.lbox__read dd{font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.4}
.lbox__wt{grid-column:1/-1;border-top:1px solid var(--line);border-right:none!important;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.lbox__wt dt{margin-bottom:0}
.lbox__wt dd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lbox__wt b{font-weight:600;color:var(--cu-lt)}
.lbox__at{color:var(--ink-3);font-size:.82rem;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.lbox__at input,.lbox__at select{
  font:inherit;font-size:.82rem;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line-ui);border-radius:2px;
  padding:5px 8px;
}
.lbox__at input{width:64px;text-align:right}
.lbox__at select option{background:var(--panel);color:var(--ink)}
.lbox__at input:focus-visible,.lbox__at select:focus-visible{outline:2px solid var(--cu-lt);outline-offset:2px}
.lbox__note{
  padding:10px 14px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.58rem;letter-spacing:.04em;line-height:1.7;
}
@media (max-width:680px){
  .lbox__read{grid-template-columns:1fr 1fr}
  .lbox__read>div:nth-child(2){border-right:none}
  .lbox__read>div:nth-child(3),.lbox__read>div:nth-child(4){border-top:1px solid var(--line)}
  .lbox__film{height:210px}
}
/* honeypot: off-screen, never announced, never tabbed to */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:680px){.field--split{grid-template-columns:1fr}}

.form__note{
  margin-top:14px;font-size:.85rem;min-height:1.2em;
  color:var(--ink-3);
}
.form__note.is-ok{color:var(--cu-lt)}
.form__note a{color:var(--ink);border-bottom:1px solid var(--cu);white-space:nowrap}
.form__note a:hover{color:var(--cu-lt)}
.form__note.is-err{color:#E4795C}

/* the site asks for a drawing; this is where one actually gets sent */
.drawing{
  margin-top:18px;padding:26px clamp(20px,2.4vw,30px);
  border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(210,98,47,.07),transparent 65%);
}
.drawing__t{color:var(--cu);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.drawing__lead{color:var(--ink-2);font-size:.94rem;line-height:1.65;margin-bottom:16px}
.drawing__mail{
  display:inline-block;font-family:var(--f-disp);
  font-size:clamp(1.05rem,1.9vw,1.35rem);font-weight:700;letter-spacing:-.015em;
  color:var(--cu-lt);border-bottom:1px solid rgba(241,138,84,.45);
  padding-bottom:2px;margin-bottom:20px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.drawing__mail:hover{color:#fff;border-bottom-color:#fff}
.drawing__spec{border-top:1px solid var(--line)}
.drawing__spec > div{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:5px}
.drawing__spec > div:last-child{border-bottom:none;padding-bottom:0}
.drawing__spec dt{color:var(--ink-3);font-size:.55rem}
.drawing__spec dd{color:var(--ink-2);font-size:.88rem;line-height:1.6}
.drawing__spec dd a{color:var(--ink);border-bottom:1px solid rgba(210,98,47,.4)}
.drawing__spec dd a:hover{color:var(--cu-lt)}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:var(--bg);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,76px)}
.foot__in{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(30px,4vw,64px);align-items:center;
  padding-bottom:clamp(36px,4vw,56px);
}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__brand img{width:44px;height:auto}
.foot__brand b{
  font-family:var(--f-disp);font-size:1rem;font-weight:700;letter-spacing:.12em;
}
.foot__brand .mono{color:var(--ink-3);font-size:.55rem;margin-top:3px}
.foot__creed{
  font-family:var(--f-disp);
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  font-weight:500;font-stretch:102%;
  line-height:1.24;letter-spacing:-.022em;
  color:var(--ink-2);text-align:center;
}
.foot__right{display:grid;gap:12px;justify-items:end}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end}
.foot__reach{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  font-size:.84rem;color:var(--ink-2);
}
.foot__reach i{color:var(--cu);font-style:normal}
.foot__reach a{transition:color .3s var(--ease)}
.foot__reach a:hover{color:var(--cu-lt)}
.foot__links a{
  font-size:.85rem;color:var(--ink-2);
  transition:color .3s var(--ease);
}
.foot__links a:hover{color:var(--cu-lt)}
.foot__base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:20px 26px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.56rem;
}

/* ═══════════════ REVEAL ═══════════════ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1180px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__cta{display:none}

  /* Every generated page — 19 of the 21 — carried a header that below 1180px
     was a logo and nothing else. The homepage gets away with hiding the nav
     because it has .mnav and a burger to replace them; the product and landing
     pages have neither, so a visitor arriving on a phone from the search
     result the whole SEO effort was built to win had no navigation and no way
     to make contact above the fold.

     Those pages carry .nav--lite and keep the call to action. The four section
     links stay hidden — at 375px they cannot fit beside the wordmark, and they
     are in the footer of every page — but the one control a buyer actually
     wants stays where they will look for it. */
  .nav--lite .nav__cta{display:inline-flex}
  .nav__cta-tight{display:none}
  .caps{grid-template-columns:repeat(2,1fr)}
  .cap--tall{grid-row:span 1;min-height:340px}
  .cap--wide{grid-column:span 2}
  .prods__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  :root{--nav-h:66px}
  .hero__rail{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  
  .prod--wide,.prod--flip{grid-template-columns:1fr}
  .prod--wide .prod__meta,
  .prod--flip .prod__meta{border-left:none;border-right:none;border-top:1px solid var(--line)}
  .prod--flip .prod__stage{order:0}
  .prod--flip .prod__meta{order:0}
  .certs{grid-template-columns:repeat(2,1fr)}
  .cert:nth-child(2){border-right:none}
  .cert:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .people{grid-template-columns:1fr}
  .people__media img{aspect-ratio:16/11}
  .contact{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot__links{justify-content:center}
  .foot__right{justify-items:center}
  .foot__reach{justify-content:center}
}
@media (max-width:680px){
  .hero{min-height:96svh}
  .hero__h1{font-size:clamp(2.5rem,12.5vw,4rem)}
  .caps{grid-template-columns:1fr}
  .cap--wide{grid-column:span 1}
  .prod__stage{min-height:260px}
  .prods__grid .prod__stage--sm{height:300px;min-height:300px;flex-basis:300px}
  .prods__grid{grid-template-columns:1fr}
  .flow__step{grid-template-columns:1fr;gap:10px}
  .specs__head{flex-direction:column;align-items:flex-start}
  .range{grid-template-columns:1fr;gap:28px}
  .range__list span{display:none}
  .foot__base{justify-content:center;text-align:center}
  .qdef__vals{flex-direction:column;gap:8px}
}

/* On phones the vessel sits directly behind the copy, so it steps back
   and the scrim works vertically instead of left-to-right. */
@media (max-width:760px){
  .hero__gl.is-live{opacity:.58}
  .hero__vignette{
    background:
      linear-gradient(180deg,rgba(7,8,10,.88) 0%,rgba(7,8,10,.3) 20%,rgba(7,8,10,.74) 54%,rgba(7,8,10,.97) 84%),
      radial-gradient(125% 80% at 50% 40%,transparent 18%,rgba(7,8,10,.62) 100%);
  }
  .hero{padding-bottom:0}
  .hero__body{padding-bottom:26px}
  .stat{padding:15px 14px 17px;gap:3px}
  .stat .mono{font-size:.5rem;letter-spacing:.1em;line-height:1.45}
  .hero__sub{font-size:.95rem}
  .hero__cta{gap:10px}
  .btn--bare{padding-inline:0;order:-1}
}

/* ═══════════════ MOBILE — VIDEO GEOMETRY, TYPE, TAP TARGETS ═══════════════
   The clips are all landscape (1280x720 / 800x450 / 1100x618). Dropped into
   tall portrait boxes with object-fit:cover they get cropped to a narrow
   vertical strip AND scaled up past their own resolution, which is why the
   footage read as a blur rather than as a plant. Every rule here is about
   keeping a landscape frame landscape on a portrait screen.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* The welding backdrop spanned the whole section — 2086px tall on a phone,
     a 290% upscale of a 720p clip showing about a ninth of the frame. Capping
     it means the video is never enlarged beyond its own pixels. The existing
     fade already blends the bottom edge into the section. */
  .weld__bg{height:min(76svh,600px);bottom:auto}

  /* Same problem, smaller: these boxes were up to 660px tall against a 349px
     column, so two thirds of each frame was cropped away. Shorter boxes show
     far more of the shot and take ~1000px off the page. */
  .cap{min-height:212px}
  .cap--tall{grid-row:auto;min-height:212px}
  .cap--wide{grid-column:span 1}
  /* .aerial is a flex container with the caption as its child and the video
     absolutely positioned behind it. On a phone the caption cannot sit on a
     219px-tall 16:9 band, so the band and the caption stack instead: the clip
     keeps its full frame, the words get their own room underneath. */
  .aerial{display:block;min-height:0}
  .aerial video{
    position:relative;inset:auto;z-index:0;display:block;
    width:100%;height:auto;aspect-ratio:16/9;transform:none;
  }
  .aerial__scrim{display:none}
  .aerial__cap{padding-block:24px 28px}

  /* Nothing readable should sit under ~11.5px on a handset. These were 8.8px
     and 9.6px. */
  .nav__brandtxt i{font-size:.66rem;letter-spacing:.12em}
  .nav__links .mono,.mnav__links .mono{font-size:.72rem}
  .stat .mono{font-size:.6rem}
  .spec-table th{font-size:.66rem}
  .spec__code a{font-size:.8rem}
  .eyebrow .mono{font-size:.72rem}

  /* The product codes in the spec index were 14px tall — far under the 44px
     a fingertip needs. The negative margin keeps the row height unchanged. */
  .spec__code a{display:inline-block;padding:15px 10px 15px 0;margin:-15px 0}
  .nav__brand{padding:7px 0}
  .prod__code a{display:inline-block;padding:14px 12px 14px 0;margin:-14px 0}
  .chip{min-height:44px}
  .mnav .mono{font-size:.72rem}
  /* .mnav a .mono is two classes plus an element, so the plain .mnav .mono
     above loses to it. Match its specificity. */
  .mnav a .mono{font-size:.72rem}

  /* phone and email are the two things a customer actually taps on a phone,
     and both were 19px tall. */
  a[href^="tel:"]:not(.btn),a[href^="mailto:"]:not(.btn){
    display:inline-block;padding:11px 0;
  }
  .drawing__mail{padding:11px 0}
  .foot__links a{display:inline-block;padding:11px 0}
  .flow__foot a{display:inline-block;padding:11px 0}
  /* two-letter codes such as LV were only 27px wide */
  .spec__code a,.prod__code a{min-width:44px}

  /* Trim the stages so ten products do not run to eleven screens. */
  .prod__stage{min-height:220px}
  .prods__grid .prod__stage--sm{height:250px;min-height:250px;flex-basis:250px}
}

/* ═══════════════ CARRYING THE ROOM PAST THE HERO ═══════════════
   One lit box and a dark page around it is an island, not a world. Every
   product photograph is also a plate laid on lit glass, so each one takes the
   same warm rim and the same throw onto the wall behind it. The section rules
   become density step wedges — the graduated strip a radiographer lays beside
   a plate to prove the exposure is readable at all.
   ═════════════════════════════════════════════════════════════════════════ */
.prod__stage{
  border:1px solid rgba(233,237,240,.10);
  box-shadow:
    inset 0 0 0 1px rgba(242,237,226,.05),
    0 30px 90px -40px rgba(226,222,208,.16);
  background:linear-gradient(180deg,rgba(242,237,226,.030),transparent 62%);
}
.prod:hover .prod__stage{
  border-color:rgba(233,237,240,.20);
  box-shadow:
    inset 0 0 0 1px rgba(242,237,226,.09),
    0 36px 110px -38px rgba(226,222,208,.26);
}

/* the step wedge: eleven graduated blocks, light to dark, as every section rule */
.sec + .sec::before,.sec--products::before{content:none}
.wedge{
  height:7px;width:min(240px,34vw);
  background:linear-gradient(90deg,
    rgba(233,237,240,.62) 0 9.09%, rgba(233,237,240,.50) 9.09% 18.18%,
    rgba(233,237,240,.40) 18.18% 27.27%, rgba(233,237,240,.32) 27.27% 36.36%,
    rgba(233,237,240,.25) 36.36% 45.45%, rgba(233,237,240,.19) 45.45% 54.54%,
    rgba(233,237,240,.145) 54.54% 63.63%, rgba(233,237,240,.107) 63.63% 72.72%,
    rgba(233,237,240,.076) 72.72% 81.81%, rgba(233,237,240,.050) 81.81% 90.90%,
    rgba(233,237,240,.030) 90.90% 100%);
  margin-bottom:clamp(20px,2.4vw,34px);
}

/* ═══════════════ THE FILE CONTROL ═══════════════
   Raw OS chrome was sitting on the one element that produces the order. */
input[type=file]{
  font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);
  width:100%;
}
input[type=file]::file-selector-button{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 16px;margin-right:14px;
  background:transparent;color:var(--ink);
  border:1px solid var(--line-ui);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
input[type=file]::file-selector-button:hover{
  border-color:var(--safelight);background:rgba(210,98,47,.10);color:#fff;
}

/* ═══════════════ READING OVER PHOTOGRAPHS ═══════════════
   Body copy set over the arc photograph and over the stage stills was below
   the 4.5:1 floor. The scrim carries the fix rather than the type, so the
   photograph still reads as a photograph.
   ═════════════════════════════════════════════════════════════════════════ */
.sec--weld .lead,.sec--weld .h2{color:var(--ink)}
.weld__bgfade{
  background:
    radial-gradient(70% 55% at 50% 40%,rgba(198,228,255,.09),transparent 70%),
    linear-gradient(180deg,var(--bg-2) 0%,rgba(10,12,15,.72) 28%,rgba(10,12,15,.92) 62%,var(--bg-2) 100%);
}
.cap::after{
  background:linear-gradient(0deg,rgba(7,8,10,.985) 6%,rgba(7,8,10,.80) 46%,rgba(7,8,10,.30) 82%);
}
.cap p{color:var(--ink-2)}
::placeholder{color:#8A929D;opacity:1}

/* ═══════════════ ROUND TWO ═══════════════ */

/* R3 + fix 8: this was mono, uppercase and 7px, sitting exactly where the
   kickers used to sit. It is a sentence, so it is set as one. */
.loupe-hint{
  margin-top:18px;max-width:52ch;
  font-family:var(--f-body);font-size:.92rem;line-height:1.6;
  letter-spacing:0;text-transform:none;color:var(--ink-2);
  padding-left:15px;border-left:1px solid var(--safelight);
}

/* the accreditation entries lost their badges, so they take the register's
   grammar instead of leaving a hole where the art was */
.acc{grid-template-columns:1fr!important;gap:8px!important}
.acc>div{padding-left:15px;border-left:1px solid var(--line-2)}

/* ═══════════════ THE SURFACES WE DID NOT DRAW ═══════════════
   Selection, the caret, the scrollbar and the focus ring ship with defaults
   that belong to no design system. In a dark viewing room a stock blue
   selection is the one thing on screen that was never chosen.
   ═════════════════════════════════════════════════════════════════════════ */
::selection{background:var(--safelight);color:#0A0A0C}
::-moz-selection{background:var(--safelight);color:#0A0A0C}
html{scrollbar-color:rgba(233,237,240,.22) var(--room);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--room)}
::-webkit-scrollbar-thumb{background:rgba(233,237,240,.17);border:3px solid var(--room);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(233,237,240,.30)}
input,textarea,select{caret-color:var(--safelight)}
/* a reading is a measurement, so its digits hold their columns */
.spec-table td,.filmid dd,.jaw__read,.jaw__hold,.proof__v,.num{font-variant-numeric:tabular-nums}
a{text-underline-offset:.22em}

/* ═══════════════ THE LIGHT BOX ═══════════════
   The room is dark so that one thing in it is lit. The box is genuinely
   emissive — it throws light onto the wall behind it and spills onto the
   floor beneath — because a grey rectangle labelled light box is a diagram of
   a light box, not one.

   The canvas is bounded by the box rather than bleeding to the viewport. That
   bound is the whole compositional argument: a floating product render under
   a headline is the arrangement this page refuses.
   ═════════════════════════════════════════════════════════════════════════ */
.lightbox{
  /* The film is laid the width of the room. A strip of film is long and runs
     past its frame, so the sprockets leave the viewport on both sides and the
     box reads through its lit top and bottom edges instead of four corners.
     It was a 52vw plate floating right of a headline, which is the ordinary
     copy-left / visual-right arrangement wearing a costume. */
  padding:clamp(9px,1vw,15px);
  position:relative;
  width:100vw;
  margin-inline:calc(50% - 50vw);
  height:clamp(215px,40vh,420px);
  z-index:0;
  display:grid;
  grid-template-rows:14px minmax(0,1fr) 14px auto;
  background:
    radial-gradient(120% 90% at 50% 44%,var(--box) 0%,var(--box-warm) 58%,#CFC9BC 100%);
  /* the throw: the box lights the wall it hangs on */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    /* the diffuser bleeding past the film edge */
    0 0 34px 2px rgba(242,237,226,.34),
    /* and the throw onto the wall it hangs on */
    0 46px 150px -24px rgba(226,222,208,.46),
    0 170px 320px -70px rgba(226,222,208,.30);
  isolation:isolate;
}

/* One column, explicitly. Without it the fallback claimed column 1 and the
   canvas was auto-placed into a column 2 that should never have existed. */
.lightbox{grid-template-columns:1fr}
.lightbox>*{grid-column:1}
.lightbox__sprocket--top{grid-row:1}
.lightbox__sprocket--bot{grid-row:3}
.filmid{grid-row:4}

/* the film is a plate laid on lit glass, so the glass shows around it */
.lightbox>#gl,.lightbox>.hero__fallback{
  position:relative;inset:auto;
  grid-row:2;
  width:100%;height:100%;min-height:0;
  z-index:1;
  background:var(--film-void);
  opacity:1;
}
.lightbox>.hero__fallback{z-index:0}

/* sprocket edge: the film is a strip, and a strip has perforations */
.lightbox__sprocket{
  position:relative;z-index:2;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 9px, rgba(10,10,12,.86) 9px 17px, transparent 17px 26px);
}
.lightbox__sprocket--top{grid-row:1}
.lightbox__sprocket--bot{grid-row:3}

/* the ID strip an interpreter reads before the image */
.filmid{
  grid-row:4;z-index:2;
  display:flex;flex-wrap:wrap;gap:0;
  background:var(--film-void);
  border-top:1px solid rgba(255,255,255,.10);
}
.filmid>div{
  flex:1 1 auto;min-width:0;
  padding:9px clamp(9px,1.1vw,15px);
  border-left:1px solid rgba(255,255,255,.08);
}
.filmid>div:first-child{border-left:0}
.filmid dt{
  font-family:var(--f-mono);font-size:.46rem;letter-spacing:.2em;
  color:rgba(255,255,255,.42);margin-bottom:3px;
}
.filmid dd{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;
  color:var(--film);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

/* the copy stops where the box starts and hugs the left rail; .hero__body
   centres itself by default, which put it straight under the box */
@media (min-width:1101px){
  /* the claim reads under the film now, so it keeps the page measure and is
     no longer squeezed into the third of the screen the plate left over */
  .hero__sub{font-size:1rem;max-width:72ch}
}
@media (max-width:900px){
  .lightbox{height:clamp(180px,31vh,300px)}
}

/* ═══════════════ THE PROOF BAND ═══════════════
   Four equal cells, each a small mono label over a big value, is the stat row
   every marketing page ships; ruling it with hairlines only dressed it. The
   evidence is not four equal things. One reference outranks the rest, so it
   is set as the statement and the other three are the record underneath it,
   read the way a register is read: label, value, what it was measured
   against. Same four facts, same words, no cells.
   ═════════════════════════════════════════════════════════════════════════ */
.proof{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 60%);
}
.proof__grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(26px,5vw,88px);
  align-items:center;
  padding-block:clamp(32px,4vw,56px);
}
.proof__k{font-size:.56rem;letter-spacing:.2em;color:var(--ink-3)}
/* the railway work is the strongest reference the shop has, so its label is
   the one that carries the accent */
.proof__k--lead{color:var(--cu)}
.proof__v{
  font-family:var(--f-disp);
  font-size:clamp(2rem,4.4vw,3.5rem);
  font-weight:700;font-stretch:104%;
  line-height:.98;letter-spacing:-.034em;
  color:var(--ink);
  margin:13px 0 12px;
}
.proof__n{font-size:.55rem;letter-spacing:.15em;color:var(--ink-3);line-height:1.7}

.proof__rec>div{
  display:grid;
  grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:8px clamp(14px,2vw,28px);
  align-items:baseline;
  padding:clamp(13px,1.5vw,17px) 0;
  border-top:1px solid var(--line);
}
.proof__rec dt{font-size:.56rem;letter-spacing:.2em;color:var(--ink-3)}
.proof__rec dd{
  margin:0;display:flex;flex-direction:column;gap:5px;
  font-size:clamp(1rem,1.5vw,1.18rem);font-weight:600;color:var(--ink);
  letter-spacing:-.012em;
}
.proof__rv{display:block}
.proof__rec dd .mono{
  font-size:.55rem;letter-spacing:.15em;color:var(--ink-3);font-weight:400;
}
@media (max-width:900px){
  .proof__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
}
@media (max-width:520px){
  .proof__rec>div{grid-template-columns:1fr;gap:6px}
}

/* ═══════════════ THE DRAWING BENEATH THE PART ═══════════════
   Pass the caliper over a vessel and the aperture shows the drawing it was
   built from. The linework is derived from each photograph by build/blueprint.js.

   The two images share one grid cell so the drawing sits exactly on the part,
   and because .prod__stage img already carries the sizing, the zoom and the
   hover lift, the drawing tracks all three for free. The aperture is placed in
   percentages, which survive the scale transform that px would not.
   ═════════════════════════════════════════════════════════════════════════ */
@property --ap{syntax:"<length>";inherits:true;initial-value:0px}

.prod__stage>img{grid-area:1/1}
.prod__draw{
  z-index:2;opacity:0;pointer-events:none;
  filter:none;                     /* the photo drop-shadow would smear linework */
  /* --ap is inherited from the stage; declaring it here would override that
     inheritance and pin the aperture shut */
  --apx:50%;--apy:50%;
  -webkit-mask-image:radial-gradient(circle var(--ap) at var(--apx) var(--apy),#000 52%,rgba(0,0,0,.45) 78%,transparent 100%);
  mask-image:radial-gradient(circle var(--ap) at var(--apx) var(--apy),#000 52%,rgba(0,0,0,.45) 78%,transparent 100%);
  transition:opacity .34s var(--ease),--ap .5s var(--ease);
}
.prod__stage.is-scanning{--ap:165px}
.prod__stage.is-scanning .prod__draw{opacity:1}

/* the exposure pass — one sweep through the aperture as it opens, the way a
   radiograph is taken rather than simply switched on */
.prod__scan{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:0;
  -webkit-mask-image:radial-gradient(circle var(--ap) at var(--sx,50%) var(--sy,50%),#000 44%,transparent 100%);
  mask-image:radial-gradient(circle var(--ap) at var(--sx,50%) var(--sy,50%),#000 44%,transparent 100%);
}
.prod__stage.is-scanning .prod__scan{opacity:1}
.prod__scan i{
  position:absolute;left:0;right:0;top:-3px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(196,236,255,.95) 22%,rgba(255,255,255,.98) 50%,rgba(196,236,255,.95) 78%,transparent);
  box-shadow:0 0 20px 5px rgba(110,195,255,.45);
}
.prod__stage.is-scanning .prod__scan i{animation:xrayscan 1.3s var(--ease) 1 both}
@keyframes xrayscan{
  from{top:-3px;opacity:0}
  10%{opacity:1}
  86%{opacity:1}
  to{top:100%;opacity:0}
}
/* the part itself steps back a little so the drawing reads as the layer under it */
.prod__stage.is-scanning>img:not(.prod__draw){filter:drop-shadow(0 32px 44px rgba(0,0,0,.75)) brightness(.82)}

/* ═══════════════ VERNIER RETICLE ═══════════════
   The pointer becomes a measuring instrument. Only on machines that actually
   have a pointer — a phone has no cursor to replace, and hiding the system
   cursor on a touch device would strand anyone using a stylus or a switch.

   The graduations are honest: the upper scale is at a 6px pitch, the lower one
   at 5.4px — nine tenths — which is the ratio that makes a vernier a vernier.
   ═════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){

  html.ret-on,html.ret-on *{cursor:none}
  /* a caret still has to be findable, so text fields keep the system I-beam */
  html.ret-on input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  html.ret-on textarea,html.ret-on select{cursor:text}

  .ret{
    position:fixed;left:0;top:0;z-index:400;
    pointer-events:none;
    width:120px;height:120px;margin:-60px 0 0 -60px;
    opacity:0;transition:opacity .3s var(--ease);
    will-change:transform;
  }
  .ret.is-on{opacity:1}
  .ret.is-text{opacity:0}
  /* The instrument has to stay readable on near-black sections, on the copper
     CTA and on a white product photograph alike. White strokes carry the shape,
     a dark halo lifts them off light surfaces, and copper is kept for the datum
     alone — outlined, so it survives sitting on a copper button. */
  .ret svg{display:block;overflow:visible;filter:drop-shadow(0 0 1.6px rgba(0,0,0,.85))}
  .ret__line{stroke:rgba(255,255,255,.72);stroke-width:1}
  .ret__tick{stroke:rgba(255,255,255,.6);stroke-width:1}
  .ret__tick--major{stroke:rgba(255,255,255,.9)}
  .ret__vern{stroke:var(--cu-lt,#E8834F);stroke-width:1;opacity:.9}
  .ret__dot{fill:var(--cu);stroke:#fff;stroke-width:.9;paint-order:stroke}
  /* the jaws ride on the beam and close on whatever is under the point */
  .ret__jawbar{stroke:rgba(255,255,255,.94);stroke-width:1.3}
  .ret__jaw{transition:transform .26s var(--ease)}
  /* the instrument closes up when it is over something you can act on */
  .ret__g{
    transform-origin:60px 60px;
    transition:transform .3s var(--ease),opacity .3s var(--ease);
  }
  .ret.is-live .ret__g{transform:scale(.92)}
  .ret.is-live .ret__jaw--l{transform:translateX(8px)}
  .ret.is-live .ret__jaw--r{transform:translateX(-8px)}
  /* pressing closes the jaws the rest of the way, the way you would zero one */
  .ret.is-down .ret__jaw--l{transform:translateX(15px)}
  .ret.is-down .ret__jaw--r{transform:translateX(-15px)}

  /* the caliper itself — jaws that close on a part and read its width */
  .jaw{
    position:fixed;left:0;top:0;z-index:399;
    pointer-events:none;opacity:0;
    transition:opacity .24s var(--ease);
    will-change:transform,width,height;
  }
  .jaw.is-on{opacity:1}
  .jaw__l,.jaw__r{
    position:absolute;top:0;bottom:0;width:1px;
    background:linear-gradient(180deg,transparent,var(--cu) 18%,var(--cu) 82%,transparent);
  }
  .jaw__l{left:0}
  .jaw__r{right:0}
  /* the little perpendicular lips that make a jaw read as a jaw */
  .jaw__l::before,.jaw__l::after,.jaw__r::before,.jaw__r::after{
    content:'';position:absolute;width:9px;height:1px;background:var(--cu);
  }
  .jaw__l::before,.jaw__r::before{top:0}
  .jaw__l::after,.jaw__r::after{bottom:0}
  .jaw__l::before,.jaw__l::after{left:0}
  .jaw__r::before,.jaw__r::after{right:0}
  /* The vessels are leak- and pressure-tested as assemblies, so holding the
     caliper on one shows that test rather than only its size. No figure is
     printed: the design and test pressures are not published yet, and a
     number invented for an animation would be a number a customer quotes
     back at you. */
  .jaw__hold{
    position:absolute;left:0;bottom:-24px;
    display:flex;align-items:center;gap:9px;
    font-family:var(--f-mono);font-size:.5rem;letter-spacing:.17em;
    color:var(--cu);white-space:nowrap;
    opacity:0;transition:opacity .3s var(--ease);
  }
  .jaw.is-vessel .jaw__hold{opacity:1}
  .jaw__hold i{
    position:relative;display:block;width:64px;height:2px;
    background:rgba(255,255,255,.16);overflow:hidden;
  }
  .jaw__hold i::after{
    content:"";position:absolute;inset:0;background:var(--cu);
    transform:scaleX(0);transform-origin:left center;
  }
  /* fills, then sits level — the hold is the point, not the climb */
  .jaw.is-vessel .jaw__hold i::after{animation:holdfill 1.6s var(--ease) forwards}
  @keyframes holdfill{from{transform:scaleX(0)}64%{transform:scaleX(1)}to{transform:scaleX(1)}}

  .jaw__read{
    position:absolute;top:-19px;left:50%;transform:translateX(-50%);
    font-family:var(--f-mono);font-size:.54rem;letter-spacing:.14em;
    color:var(--cu);white-space:nowrap;
  }

  /* Lag is the only moving part here, and it is what a motion-sensitive
     visitor would object to. Keep the instrument, drop the drift. */
  @media (prefers-reduced-motion:reduce){
    .ret__g,.ret__jaw,.jaw{transition:none}
  }
}

/* ═══════════════ MOTION PREFERENCES ═══════════════ */
/* motion off: marquees and reveals stand down, the plant footage does not */
@media (prefers-reduced-motion:reduce){
  /* the clips keep playing here by design — see js/main.js */

  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .grain{display:none}
  .timeline__bar i{width:100%}
}

/* ═══════════════ PRINT ═══════════════ */
@media print{
  /* the site is JS-revealed and dark; neither survives paper */
  .reveal{opacity:1!important;transform:none!important}
  .boot,.grain,.scrollrail,.nav,.mnav,.ticker,.logos,
  .hero__gl,.hero__fallback,.hero__vignette,

  html,body{background:#fff!important;color:#111!important}
  /* every panel paints its own dark ground; without this the text goes
     dark-on-dark and the sheet is unreadable */
  .sec,.specs,.specs__head,.specs__note,.spec-table,.spec-table tbody tr,
  .prod,.prod__stage,.prod__meta,.cap,.cap figcaption,.cert,.law,.laws,
  .flow,.flow__step,.quotekit,.panel,.range,.form,.field input,.field textarea,
  .cinfo,.cinfo>div,.foot,.foot__in,.foot__base,.mission,.qdef,.hero,.hero__body,
  .hero__rail,.stat,.people__media,.people__second,.sechead{
    background:none!important;background-image:none!important;background-color:#fff!important;
  }
  .prod__glow,.weld__bgfade,.weld__bg,.hero__vignette,.people__marks,
  .sec--contact::before,.sec--standard::before,.flow__step::before,.law::before{display:none!important}
  .sec,.specs,.prod,.cap,.cert,.law,.flow__step,.quotekit,.panel,.range,
  .cinfo>div,.spec-table th,.spec-table td,.form{border-color:#bbb!important}
  *{color:#111!important;box-shadow:none!important;text-shadow:none!important}
  a{color:#111!important;text-decoration:underline}

  .sec{padding:18px 0!important;break-inside:avoid;border:none!important}
  .wrap{max-width:none;padding-inline:0}
  h1,h2,h3,b,.mono{color:#000!important}
  .h2{font-size:20pt!important;line-height:1.15!important}
  .hero__h1{font-size:26pt!important;line-height:1.05!important}
  .hero__h1 em{-webkit-text-fill-color:#111!important;color:#111!important;background:none!important}
  .lead,p,li,td,dd{font-size:10pt!important;line-height:1.45!important}

  /* the specification index is the reason anyone prints this */
  .specs{break-inside:auto;border:1px solid #999!important}
  .specs__scroll{overflow:visible!important}
  .spec-table{min-width:0!important;width:100%!important;font-size:9pt!important}
  .spec-table th,.spec-table td{
    border-bottom:1px solid #ccc!important;padding:6px 8px!important;
    color:#111!important;
  }
  .spec-table tbody tr{break-inside:avoid}
  .spec-table tbody tr[hidden]{display:table-row!important}

  .prod,.cap,.cert,.law,.flow__step,.quotekit,.cinfo>div{
    border-color:#bbb!important;break-inside:avoid;
  }
  .prod__stage{min-height:0!important;padding:8px!important}
  .prod__stage img{max-height:150px!important;filter:none!important}
  .cap{min-height:0!important;display:block!important}
  .cap figcaption{padding:8px 0!important}
  .cert img,.acc img{filter:none!important;background:none!important;box-shadow:none!important}

  /* a printed page has no clickable phone number */
  .foot__base::after{
    content:"sakshitools.com · +91 93508 25706 · sakshitools@gmail.com · Plot 88, Crown Industrial Town, Village Sidola, Faridabad 121101";
    display:block;margin-top:10px;font-size:9pt;
  }
  @page{margin:14mm}
}


/* A19 — no hover on touch, so show the real emblem there instead of the
   silhouette. The wrapper also lost cursor:pointer: it is a div with no href,
   no button and no handler, so a pointer cursor promised a click that never was. */
@media (hover:none){
  .logos__track .railways-logo__core{opacity:1}
  .logos__track .railways-logo__loop{opacity:0}
}

/* ═══════════════ THE TOUCH ROUTE ═══════════════
   Every instrument on this page was gated on a fine pointer, so a phone got
   the photographs and none of the evidence under them. A tap opens the plate
   whole — there is no aperture to steer with a fingertip, so the fingertip
   gets the whole frame instead.
   ═════════════════════════════════════════════════════════════════════════ */
@media (hover:none){
  .prod__stage{cursor:pointer}
  .prod__stage.is-open .prod__draw{opacity:1;--ap:2400px}
  .prod__stage.is-open>img:not(.prod__draw){filter:brightness(.8)}
  .prod__stage::after{
    content:"TAP TO READ THE RADIOGRAPH";
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    padding:9px 14px;
    font-family:var(--f-mono);font-size:.5rem;letter-spacing:.18em;
    color:var(--film);background:rgba(8,9,11,.82);
    border-top:1px solid rgba(233,237,240,.14);
  }
  .prod__stage.is-open::after{content:"TAP TO CLOSE"}
}

@media (hover:none){.loupe-hint{display:none}}

/* ═══════════════ THE SAFELIGHT ON THE LABELS ═══════════════
   The accent had drained off the page when the kickers went, because that is
   where all of it happened to live. It is the one warm source in the room, so
   it goes back on the field labels of the instruments rather than on a
   decorative label above a heading.
   ═════════════════════════════════════════════════════════════════════════ */
.filmid dt{color:var(--safelight)}
.spec-table th{color:var(--safelight)}
.proof__k{color:var(--safelight)}
.cert span.mono{color:var(--safelight)}

/* the reference block of a step wedge is the one you read the others against */
.wedge{position:relative}
.wedge::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9.09%;
  background:var(--safelight);
}

/* ═══════════════ THE BAND BETWEEN 820 AND 1100 ═══════════════
   The inspected set was 1440 and 390, so this width was never looked at, and
   it is the one the owner actually had open. Two things broke here: the
   register stretched its ruled blanks across a full column, and the range
   list kept two columns until its right-hand copy went ragged.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .range{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .range__list span{text-align:left;flex:1 1 auto}
  .range__list li{flex-wrap:wrap;gap:4px 16px}
}

/* the product card's field labels are instrument labels like every other set */
.spec dt{color:var(--safelight)}
.flow__n{color:var(--safelight)}

/* ═══════════════ PRODUCT PAGE: DEPTH ═══════════════
   The product pages carried 124 to 175 words each, which is not enough for
   Google to rank them against competitors running 400 to 1,200, and not
   enough for a procurement engineer either. These are the blocks that carry
   the rest: where the part is used, how it is proved, and the questions
   buyers actually send us before they send a drawing.
   ═════════════════════════════════════════════════════════════════════════ */
.pgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);
  margin-top:clamp(44px,5vw,72px);
}

/* ── the questions ─────────────────────────────────────────────────────────
   A <dl> and not an accordion: an answer hidden behind a click is an answer
   a crawler weighs less and a hurried buyer never opens. */
.faq{margin-top:clamp(48px,6vw,84px)}
.faq__list{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--line)}
.faq__item{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
.faq__item dt{
  font-family:var(--f-disp);font-size:clamp(1.02rem,1.5vw,1.18rem);
  font-weight:600;letter-spacing:-.018em;color:var(--ink);margin-bottom:9px;
}
.faq__item dd{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.68;max-width:78ch}

/* ── sideways links ───────────────────────────────────────────────────────
   Every product page used to link only back to the homepage, so a buyer
   comparing a 125 and a 150 had to go up and start again, and no authority
   moved between the ten pages at all. */
.related{margin-top:clamp(48px,6vw,84px)}
.related__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(22px,3vw,34px);
}
.related__list a{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(18px,2.2vw,26px);
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.related__list a:hover{border-color:var(--line-ui);transform:translateY(-2px)}
.related__list b{font-family:var(--f-disp);font-size:1.02rem;font-weight:600;letter-spacing:-.018em;line-height:1.25}
.related__list .mono{font-size:.58rem;letter-spacing:.18em;color:var(--cu)}

@media (max-width:820px){
  .pgrid{grid-template-columns:1fr}
}

/* Below about 430px the wordmark and "Request a quote" stop fitting on one
   line together, so the label shortens rather than the button wrapping or the
   header growing a second row. */
@media (max-width:430px){
  .nav--lite .nav__cta-full{display:none}
  .nav--lite .nav__cta-tight{display:inline}
  /* 44px is the floor for a touch target; the shortened button measured 42. */
  .nav--lite .nav__cta{padding-inline:12px;min-height:44px}
}

/* Buyer navigation and enquiry improvements. The established visual system
   stays in this shared sheet; the catalogue has its own small stylesheet. */
.hero__topic{
  color:var(--cu-lt);font-size:.83rem;line-height:1.5;
  max-width:65ch;margin-bottom:18px;
}
.prod__meta h3 a{color:inherit;text-decoration:none}
.prod__meta h3 a:hover{color:var(--cu-lt)}
.prod__meta h3 a:focus-visible{outline:2px solid var(--cu-lt);outline-offset:5px}
.form__intro{color:var(--ink-2);font-size:.9rem;line-height:1.6;margin-bottom:24px}
.quote-details{border-block:1px solid var(--line-2);margin-bottom:24px}
.quote-details summary{padding:18px 0;cursor:pointer;font-size:.95rem;color:var(--ink)}
.quote-details summary span{display:block;color:var(--ink-2);font-size:.78rem;margin:6px 0 0 18px}
.quote-details summary:focus-visible{outline:2px solid var(--cu-lt);outline-offset:4px}
.quote-details .qfields{border:0;margin:0;padding:8px 0 0}
@media screen and (max-width:760px){
  .hero{min-height:0;gap:22px;padding-top:calc(var(--nav-h) + 16px)}
  .hero .lightbox{height:180px}
  .hero__body{padding-bottom:24px}
  .hero__topic{font-size:.76rem;margin-bottom:12px}
  .hero__h1{font-size:clamp(2.35rem,11vw,3.5rem);margin-bottom:16px}
  .hero__sub{font-size:.9rem;line-height:1.55}
  .hero__cta{margin-top:20px;gap:16px}
  .hero__cta .btn{padding:14px 18px}
  .hero__alt{padding-block:12px}
  .hero__call{margin-top:12px}
}

/* ── the standalone drawing reader ─────────────────────────────────────────
   The page at /dxf-cut-length-calculator/ is the light box on its own, away
   from the quote form. The drop target is deliberately large and plain: it is
   the only thing being asked for on the page, and a visitor arriving from a
   search for "cut length" should not have to hunt for where the file goes. */
.tool{margin-top:clamp(30px,4vw,50px)}
.tool__drop{
  position:relative;
  display:grid;place-items:center;
  padding:clamp(34px,6vw,64px) 20px;
  border:1px dashed var(--line-2);
  background:var(--bg-2);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tool__drop.is-over{border-color:var(--cu);background:var(--panel)}
.tool__label{display:grid;gap:8px;justify-items:center;text-align:center;cursor:pointer}
.tool__label b{color:var(--ink);font-size:1.05rem}
.tool__label .mono{color:var(--ink-3);font-size:.6rem;letter-spacing:.17em}
/* The input covers the whole panel so the entire area is clickable, and stays
   a real focusable control rather than being replaced by a styled div. */
.tool__drop input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.tool__drop:focus-within{border-color:var(--cu)}

/* The claim that nothing is uploaded is the reason this page exists, so it is
   stated in copper directly under the drop rather than in small print. */
.tool__privacy{
  margin-top:14px;
  color:var(--cu-lt);
  font-size:.64rem;
  line-height:1.85;
  letter-spacing:.04em;
  max-width:62ch;
}

/* ── the drawing reader, invited from the homepage ─────────────────────────
   A pulsing button would have been quicker and would have looked like every
   other site on the internet. This traces a real profile instead: the outline
   is cut first, then the two holes, and a pierce flashes wherever the beam
   goes through — which is exactly the sequence the shop runs and exactly what
   the tool measures. Somebody who cuts sheet for a living recognises it in
   about a second, which is the whole point.

   The stroke is drawn by pulling the dash offset back to zero. Each element
   waits its turn by delay rather than by any script, so the section costs
   nothing to run and cannot fall out of step. */
.sec--tool{padding-block:clamp(30px,5vw,60px)}

.toolcta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,4vw,52px);
  align-items:center;
  padding:clamp(22px,3.4vw,40px);
  border:1px solid var(--line);
  background:var(--bg-2);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.toolcta:hover,.toolcta:focus-visible{border-color:var(--cu);background:var(--panel)}

.toolcta__film{position:relative;display:block;background:var(--film-void);overflow:hidden}
.toolcta__svg{display:block;width:100%;height:auto}
.toolcta__sheet{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 5}

.toolcta__cut{
  fill:none;
  stroke:var(--cu-lt);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(241,138,84,.45));
}
/* Lengths are generous rather than exact; any value at or above the true path
   length draws cleanly, and over-estimating costs nothing. */
.toolcta__cut--outer{stroke-dasharray:900;stroke-dashoffset:900;animation:toolcut 7s var(--ease) infinite}
.toolcta__cut--h1{stroke-dasharray:80;stroke-dashoffset:80;animation:toolcut 7s var(--ease) infinite;animation-delay:2.1s}
.toolcta__cut--h2{stroke-dasharray:80;stroke-dashoffset:80;animation:toolcut 7s var(--ease) infinite;animation-delay:2.7s}

.toolcta__pierce{fill:var(--ink);opacity:0;animation:toolpierce 7s var(--ease) infinite}
.toolcta__pierce--2{animation-delay:2.1s}
.toolcta__pierce--3{animation-delay:2.7s}

@keyframes toolcut{
  0%   {stroke-dashoffset:var(--len,900)}
  4%   {stroke-dashoffset:var(--len,900)}
  30%  {stroke-dashoffset:0}
  86%  {stroke-dashoffset:0;opacity:1}
  96%  {opacity:0}
  100% {stroke-dashoffset:0;opacity:0}
}
@keyframes toolpierce{
  0%,2%  {opacity:0;r:2}
  5%     {opacity:1;r:5}
  12%    {opacity:.55;r:3}
  86%    {opacity:.55}
  96%,100%{opacity:0}
}

/* Corner ticks, the same language the history photograph and the page figures
   already use, so this reads as part of the site rather than an advert. */
.toolcta__marks i{position:absolute;width:11px;height:11px;border:1px solid var(--cu);opacity:.75}
.toolcta__marks i:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0}
.toolcta__marks i:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0}
.toolcta__marks i:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0}
.toolcta__marks i:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0}

.toolcta__say{display:grid;gap:12px;align-content:center}
.toolcta__eyebrow{color:var(--cu);font-size:.6rem;letter-spacing:.19em}
.toolcta__h{
  font-family:var(--font-display,'Bricolage Grotesque',Archivo,sans-serif);
  font-weight:700;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.3rem);color:var(--ink);
}
.toolcta__p{color:var(--ink-2);font-size:.95rem;line-height:1.7;max-width:46ch}
.toolcta__btn{justify-self:start;margin-top:6px;pointer-events:none}

@media (max-width:820px){
  .toolcta{grid-template-columns:1fr}
}

/* Anybody who has asked their machine to stop moving things gets a finished
   part rather than a frozen half-cut one. */
html[data-motion="off"] .toolcta__cut,
html[data-motion="off"] .toolcta__pierce{animation:none}
html[data-motion="off"] .toolcta__cut{stroke-dashoffset:0}
html[data-motion="off"] .toolcta__pierce{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .toolcta__cut,.toolcta__pierce{animation:none}
  .toolcta__cut{stroke-dashoffset:0}
  .toolcta__pierce{opacity:.55}
}

/* The nav link is the one item in the bar that is not a section of this page,
   so it is marked rather than blended in. */
.nav__tool{color:var(--cu-lt)!important;border:1px solid rgba(210,98,47,.45);border-radius:2px}
.nav__tool:hover{background:rgba(210,98,47,.14)!important;border-color:var(--cu)}