/* ==========================================================================
   STEELMAN PIPING SOLUTIONS — main.css
   Dark-only industrial system. Two surface families (navy = story,
   gunmetal = data). No white anywhere. 2px radius. Hairlines over shadows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · FONTS  (self-hosted WOFF2, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-stretch: 125%; font-display: swap;
}
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/archivo-expanded-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-stretch: 125%; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ── SURFACE FAMILY 1 · NAVY (brand) ── */
  --navy-950: #010D22;
  --navy-900: #011837;
  --navy-800: #02234E;
  --navy-700: #06305F;
  --navy-600: #0C4681;

  /* ── SURFACE FAMILY 2 · GUNMETAL (machined steel) ── */
  --gun-900: #12171D;
  --gun-800: #1A2128;
  --gun-700: #232C35;
  --gun-600: #2F3A45;
  --gun-500: #3D4A57;

  /* ── TEXT ── */
  --text-hi: #E9EEF5;
  --text-mid: #A9B6C6;
  /* The brief specifies #6F7E90 here and also flags the risk of slipping under
     4.5:1 on a dark site. It does slip: text-low carries captions, table
     headers and mono meta at 10-13px, which WCAG treats as body text, and
     #6F7E90 measures 3.4:1 on gun-700 and 3.7:1 on navy-800. Lightened to the
     nearest value that clears 4.5:1 on every surface it is used on while
     keeping three clearly separated tonal steps. */
  --text-low: #8E99A8;

  /* ── ACCENTS ── */
  --cyan-400: #71CBE3;
  --cyan-600: #2E9CBE;
  --amber-400: #FF8A2B;
  --amber-600: #C55A00;

  /* ── WELD (forming sequence only) ── */
  --weld-hot: #FFF3D6;
  --weld-mid: #FF7A18;
  --weld-cool: #8C2A00;

  /* ── SILVER ── */
  --steel-200: #CECECE;
  --steel-300: #D7D6D4;

  /* ── TYPE ── */
  --font-display: 'Archivo Expanded', 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* ── RHYTHM ── */
  --max: 1320px;
  --gut: 24px;
  --radius: 2px;
  --rule: 1px;

  /* ── MOTION ── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 180ms;
  --t-slow: 600ms;

  /* ── HAIRLINES (per surface family; sections override) ── */
  --hair: rgba(113, 203, 227, 0.14);
  --hair-strong: rgba(113, 203, 227, 0.28);

  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --gut: 48px; --header-h: 84px; }
}

/* --------------------------------------------------------------------------
   3 · RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

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

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: var(--rule) solid var(--hair); margin: 0; }

::selection { background: var(--cyan-600); color: var(--navy-950); }

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

.skip-link {
  position: absolute; top: -100px; left: var(--gut); z-index: 200;
  background: var(--navy-800); color: var(--text-hi);
  border: var(--rule) solid var(--cyan-400); border-radius: var(--radius);
  padding: 12px 20px; font-family: var(--font-mono); font-size: 0.8125rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4 · TYPOGRAPHY
   -------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4 {
  font-family: var(--display-face, var(--font-display));
  font-stretch: 125%;
  font-weight: 700;
  color: var(--text-hi);
  text-wrap: balance;
}

.h1 { font-size: clamp(2.75rem, 6vw, 5rem);       line-height: 0.98; letter-spacing: -0.025em; }
.h2 { font-size: clamp(2rem, 4vw, 3.25rem);       line-height: 1.05; letter-spacing: -0.02em; }
.h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2;  letter-spacing: -0.01em; font-weight: 600; }
.h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-mid);
  text-wrap: pretty;
}

.prose p { color: var(--text-mid); margin-bottom: 1.15em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text-hi); font-weight: 500; }

/* Mono is load-bearing: every grade, dimension and standard sits in it. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.mono--up { text-transform: uppercase; }
.mono--cy { color: var(--cyan-400); }
.mono--am { color: var(--amber-400); }
.mono--lo { color: var(--text-low); }

/* Inline spec inside body copy — the brief mandates mono for every alphanumeric spec. */
.spec {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.01em;
  color: var(--text-hi);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5 · LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }

.section { padding-block: clamp(72px, 9vw, 140px); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 80px); }
.section--flush { padding-block: 0; }

.grid { display: grid; gap: clamp(24px, 3vw, 48px); }

/* Asymmetric splits — 6/6 reads as a template, so this system never uses it. */
@media (min-width: 900px) {
  .grid--5-7 { grid-template-columns: 5fr 7fr; }
  .grid--7-5 { grid-template-columns: 7fr 5fr; }
  .grid--4-8 { grid-template-columns: 4fr 8fr; }
  .grid--8-4 { grid-template-columns: 8fr 4fr; }
  .grid--3   { grid-template-columns: repeat(3, 1fr); }
  .grid--2   { grid-template-columns: repeat(2, 1fr); }
  .grid--4   { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .grid--3, .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.stack > * + * { margin-top: var(--stack, 24px); }

/* --------------------------------------------------------------------------
   6 · SURFACE FAMILIES
   Navy = story. Gunmetal = data. Each family carries its own texture so the
   buyer learns the difference without being told.
   -------------------------------------------------------------------------- */
.surf { position: relative; isolation: isolate; }

.surf--navy-950 { background-color: var(--navy-950); }
.surf--navy-900 { background-color: var(--navy-900); }
.surf--navy-800 { background-color: var(--navy-800); }

/* Navy surfaces get atmosphere: a soft off-centre light, like a mill floor at night. */
.surf--navy-950::before,
.surf--navy-900::before,
.surf--navy-800::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(12, 70, 129, 0.30), transparent 62%),
    radial-gradient(80% 70% at 100% 100%, rgba(1, 13, 34, 0.85), transparent 60%);
}

/* Gunmetal surfaces get ruled hairlines — the texture of a mill test certificate. */
.surf--gun-900,
.surf--gun-800 { background-color: var(--gun-800); }
.surf--gun-900 { background-color: var(--gun-900); }

.surf--gun-900::before,
.surf--gun-800::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(233, 238, 245, 0.030) 0 1px,
    transparent 1px 32px
  );
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 30%, transparent 92%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000 30%, transparent 92%);
}

/* Hairline tokens switch with the family so borders always sit right. */
.surf--gun-900, .surf--gun-800 {
  --hair: rgba(233, 238, 245, 0.10);
  --hair-strong: rgba(233, 238, 245, 0.20);
  --card-bg: var(--gun-700);
  --card-border: var(--gun-600);
}
.surf--navy-950, .surf--navy-900, .surf--navy-800 {
  --hair: rgba(113, 203, 227, 0.15);
  --hair-strong: rgba(113, 203, 227, 0.30);
  --card-bg: var(--navy-700);
  --card-border: var(--navy-600);
}

.rule-top { border-top: var(--rule) solid var(--hair); }
.rule-bot { border-bottom: var(--rule) solid var(--hair); }

/* --------------------------------------------------------------------------
   7 · STRUCTURAL DEVICES
   Diagonal corner ticks (top-left + bottom-right) stand in for full boxes —
   the crop marks on a dimensioned drawing rather than a SaaS card border.
   -------------------------------------------------------------------------- */
.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--cyan-400); opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease);
}
.ticks::before { top: -1px; left: -1px;  border-top: var(--rule) solid; border-left: var(--rule) solid; }
.ticks::after  { bottom: -1px; right: -1px; border-bottom: var(--rule) solid; border-right: var(--rule) solid; }

/* Eyebrow: mono label led by a hairline, like a drawing annotation leader. */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-400);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 28px; height: var(--rule); flex: none;
  background: currentColor; opacity: 0.6;
}
.eyebrow--am { color: var(--amber-400); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .lead { margin-top: 20px; }

/* Mono chip — the atom of every grade list on the site. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: var(--text-mid); background: rgba(233, 238, 245, 0.035);
  border: var(--rule) solid var(--hair); border-radius: var(--radius);
  padding: 5px 10px 5px 8px; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.chip::before {
  content: ''; width: 3px; height: 3px; flex: none; background: var(--cyan-400);
  opacity: 0.7;
}
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; }
a.chip:hover, a.chip:focus-visible { color: var(--text-hi); border-color: var(--hair-strong); }
.chip.is-match { color: var(--amber-400); border-color: rgba(255, 138, 43, 0.45); background: rgba(255, 138, 43, 0.08); }
.chip.is-match::before { background: var(--amber-400); }
.chip.is-hidden { display: none; }

/* Stat / figure pair — display numeral over a mono label. Never invented data. */
.figpair { display: flex; flex-direction: column; gap: 4px; }
.figpair__n { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.figpair__l { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); }

/* --------------------------------------------------------------------------
   8 · BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius); border: var(--rule) solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--cyan-400); color: var(--navy-950); border-color: var(--cyan-400);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--cyan-600); border-color: var(--cyan-600); color: var(--navy-950); }

.btn--ghost { border-color: var(--hair-strong); color: var(--text-hi); background: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--cyan-400); color: var(--cyan-400); }

.btn--block { display: flex; width: 100%; }

/* Text link with a sliding rule — the site's only decorative link treatment. */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-400);
  padding-bottom: 6px; position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: var(--rule); width: 100%;
  background: currentColor; opacity: 0.35;
  transform-origin: left; transform: scaleX(0.34);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); opacity: 0.8; }
.tlink svg { transition: transform var(--t-fast) var(--ease); }
.tlink:hover svg, .tlink:focus-visible svg { transform: translateX(4px); }

.ilink { color: var(--cyan-400); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(113,203,227,0.4); transition: text-decoration-color var(--t-fast) var(--ease); }
.ilink:hover { text-decoration-color: var(--cyan-400); }

/* --------------------------------------------------------------------------
   9 · HEADER
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: var(--rule) solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.hdr.is-solid {
  background: var(--navy-950);
  border-bottom-color: var(--navy-600);
  box-shadow: 0 12px 32px rgba(1, 13, 34, 0.6);
}
.hdr.is-open { background: var(--navy-950); border-bottom-color: var(--navy-600); }

.hdr__in {
  height: 100%; display: flex; align-items: center; gap: 24px;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
}

.hdr__brand { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr__mark { width: 34px; height: 34px; flex: none; }
.hdr__word {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700;
  font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--text-hi);
  line-height: 1;
}
.hdr__word span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.5625rem; letter-spacing: 0.24em; color: var(--cyan-400); margin-top: 4px; }

.hdr__nav { display: none; margin-left: auto; }
.hdr__actions { display: none; margin-left: 20px; }

@media (min-width: 1080px) {
  .hdr__nav { display: flex; align-items: center; gap: 4px; height: 100%; }
  .hdr__actions { display: flex; align-items: center; gap: 12px; }
}

.nav__item { position: relative; height: 100%; display: flex; align-items: center; }

.nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid);
  padding: 10px 14px; border-radius: var(--radius); background: none; border: 0; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--text-hi); }
.nav__link[aria-expanded="true"] { color: var(--cyan-400); }
.nav__item.is-current > .nav__link { color: var(--cyan-400); }

.nav__caret { width: 8px; height: 8px; opacity: 0.6; transition: transform var(--t-fast) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Mega panel */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  background: var(--navy-950); border: var(--rule) solid var(--navy-600);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(1, 13, 34, 0.75);
  padding: 28px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }

.mega--wide { width: min(880px, calc(100vw - 48px)); }
.mega--mid  { width: min(660px, calc(100vw - 48px)); }
.mega--slim { width: min(340px, calc(100vw - 48px)); }

.mega__grid { display: grid; gap: 4px 28px; }
.mega--wide .mega__grid { grid-template-columns: repeat(2, 1fr); }
.mega--mid  .mega__grid { grid-template-columns: repeat(3, 1fr); }

.mega__head {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-low);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: var(--rule) solid var(--navy-600);
  grid-column: 1 / -1;
}

.mega__link {
  display: flex; gap: 14px; align-items: center;
  padding: 10px; border-radius: var(--radius);
  border: var(--rule) solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mega__link:hover, .mega__link:focus-visible { background: var(--navy-800); border-color: var(--navy-600); }
.mega__thumb {
  width: 52px; height: 39px; flex: none; object-fit: cover;
  border-radius: var(--radius); border: var(--rule) solid var(--navy-600);
  background: var(--navy-800); filter: saturate(0.8) contrast(1.05);
}
.mega__t { font-size: 0.9375rem; font-weight: 500; color: var(--text-hi); line-height: 1.3; }
.mega__d { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--text-low); margin-top: 3px; line-height: 1.4; }

/* Brochure action — inner pages only. The homepage carries the WhatsApp float
   and nothing else, so one body class flips this everywhere at once. */
.hdr__brochure, .drawer__brochure { display: none; }
body.has-brochure-cta .hdr__brochure { display: inline-flex; }
body.has-brochure-cta .drawer__brochure { display: flex; }

/* Burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; padding: 0 10px;
  background: none; border: 0; cursor: pointer; border-radius: var(--radius);
}
.burger span { display: block; height: 1.5px; background: var(--text-hi); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.burger span:nth-child(1) { width: 24px; }
.burger span:nth-child(2) { width: 18px; }
.burger span:nth-child(3) { width: 24px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1080px) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--navy-950);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
  padding: 8px var(--gut) 64px;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1080px) { .drawer { display: none; } }

.drawer__group { border-bottom: var(--rule) solid var(--navy-600); }
.drawer__toggle,
.drawer__solo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-hi);
}
.drawer__toggle .nav__caret { width: 10px; height: 10px; }
.drawer__toggle[aria-expanded="true"] { color: var(--cyan-400); }
.drawer__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.drawer__panel { display: none; padding: 0 4px 16px; }
.drawer__panel.is-open { display: block; }
.drawer__panel a {
  display: block; min-height: 48px; padding: 12px 0 12px 16px;
  color: var(--text-mid); font-size: 0.9375rem;
  border-left: var(--rule) solid var(--navy-600);
}
.drawer__panel a:hover, .drawer__panel a:focus-visible { color: var(--cyan-400); border-left-color: var(--cyan-400); }
.drawer__foot { margin-top: 28px; display: grid; gap: 10px; }

/* --------------------------------------------------------------------------
   10 · FOOTER
   -------------------------------------------------------------------------- */
.ftr { background: var(--navy-900); border-top: var(--rule) solid var(--navy-600); position: relative; }
.ftr__top { display: grid; gap: 44px; padding-block: clamp(56px, 7vw, 88px); }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 4fr 8fr; gap: 64px; } }

.ftr__logo { width: 148px; height: auto; }
.ftr__tag { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-low); margin-top: 18px; max-width: 32ch; line-height: 1.6; }

.ftr__cols { display: grid; gap: 32px; }
@media (min-width: 560px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ftr__cols { grid-template-columns: repeat(4, 1fr); } }

.ftr__h {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan-400);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: var(--rule) solid var(--navy-600);
}
.ftr__cols li + li { margin-top: 9px; }
.ftr__cols a { font-size: 0.9375rem; color: var(--text-mid); transition: color var(--t-fast) var(--ease); }
.ftr__cols a:hover, .ftr__cols a:focus-visible { color: var(--cyan-400); }

.ftr__contact { display: grid; gap: 24px; padding-block: 36px; border-top: var(--rule) solid var(--navy-600); }
@media (min-width: 760px) { .ftr__contact { grid-template-columns: repeat(3, 1fr); } }
.ftr__person .h4 { margin-bottom: 8px; }
.ftr__person a { display: block; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-mid); line-height: 1.8; }
.ftr__person a:hover { color: var(--cyan-400); }

.ftr__certs { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 24px; border-top: var(--rule) solid var(--navy-600); }

.ftr__legal {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-block: 24px 32px; border-top: var(--rule) solid var(--navy-600);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--text-low);
}
.ftr__legal a { color: var(--text-mid); }
.ftr__legal a:hover { color: var(--cyan-400); }

/* --------------------------------------------------------------------------
   11 · WHATSAPP FLOAT  (the only float on the site — client rule 3)
   -------------------------------------------------------------------------- */
.wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-800); border: var(--rule) solid var(--cyan-400);
  box-shadow: 0 10px 28px rgba(1, 13, 34, 0.7);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
              visibility var(--t-slow), background-color var(--t-fast) var(--ease);
}
.wa.is-in { opacity: 1; visibility: visible; transform: none; }
.wa.is-raised { transform: translateY(-88px); }
.wa:hover, .wa:focus-visible { background: var(--navy-700); }
.wa svg { width: 27px; height: 27px; fill: var(--text-hi); }

/* --------------------------------------------------------------------------
   12 · CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card-bg); border: var(--rule) solid var(--card-border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: rgba(233, 238, 245, 0.06); pointer-events: none;
}
a.card:hover, a.card:focus-visible { border-color: var(--cyan-400); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-950); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
a.card:hover .card__media img, a.card:focus-visible .card__media img { transform: scale(1.03); }

.card__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__t { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.card__d { font-size: 0.9375rem; color: var(--text-mid); line-height: 1.55; }
.card__arrow { flex: none; color: var(--cyan-400); transition: transform var(--t-fast) var(--ease); }
a.card:hover .card__arrow, a.card:focus-visible .card__arrow { transform: translateX(4px); }
.card__foot { margin-top: auto; padding-top: 6px; }

.card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .card--wide { flex-direction: row; }
  .card--wide .card__media { aspect-ratio: auto; width: 42%; flex: none; }
  .card--wide .card__body { padding: 32px; justify-content: center; }
}

/* ── Photography treatment (brief §7) ──────────────────────────────────────
   Three cases, because the supplied shots fall into three kinds.

   1 · CUT OUT — studio shots keyed to transparent. The metal sits directly on
       the section surface with a soft elliptical contact shadow beneath it.
       This is the expensive-looking one, so it goes on the hero shots. */
.card__media--cut {
  background:
    radial-gradient(58% 46% at 50% 42%, rgba(12, 70, 129, 0.30), transparent 70%),
    var(--navy-950);
  display: grid; place-items: center; padding: 7%;
}
.img--cut {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(1, 13, 34, 0.75)) contrast(1.06) saturate(0.9);
}
a.card:hover .img--cut, a.card:focus-visible .img--cut { transform: scale(1.03); }

/* 2 · FRAMED — shot on tarpaulin, paper or a shadowed bench, where backdrop
      and steel are the same tone and no key can separate them.
      These used to carry brightness(0.70) plus a vignette reaching 92% opacity
      at the edges, which is what made the products read as near-black shapes.
      Measured, the masters are NOT underexposed — the darkness was entirely
      this treatment. So there is no darkening here at all now: the photograph
      runs at full brightness and is seated on the surface with a hairline and
      a contact shadow, exactly as the revision brief asks. */
.img--onwhite { filter: contrast(1.04) saturate(0.94); }
.card__media--onwhite {
  background: var(--navy-950);
  box-shadow: inset 0 0 0 1px rgba(233, 238, 245, 0.12);
}
/* 3 · GRADED — a light touch of grade so shots taken in different light read
      as one set. No brightness reduction, and only enough edge shading to
      seat the photograph on the surface. */
.img--graded { filter: contrast(1.04) saturate(0.94); }
.media-vignette { position: relative; }
.media-vignette::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(92% 86% at 50% 45%, transparent 66%, rgba(1, 13, 34, 0.26) 100%);
}
/* The leadership portrait is not product photography and keeps its darker,
   more cinematic grade — the brief scopes the brightening to products only. */
.lead-block__media .img--graded { filter: saturate(0.88) contrast(1.06) brightness(0.92); }
.lead-block__media.media-vignette::after {
  background:
    radial-gradient(78% 70% at 50% 45%, transparent 42%, rgba(1, 13, 34, 0.6) 100%),
    linear-gradient(to bottom, rgba(2, 35, 78, 0.10), rgba(1, 13, 34, 0.3));
}
/* Banner and CTA imagery still needs its scrim — text sits on top of it. */
.pbanner__bg .img--onwhite, .pbanner__bg .img--graded,
.ctaband__bg .img--onwhite, .ctaband__bg .img--graded { filter: contrast(1.02) saturate(0.9); }

/* Pillar / step / industry tiles */
.tile {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px; border: var(--rule) solid var(--hair); border-radius: var(--radius);
  background: rgba(233, 238, 245, 0.018);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
a.tile:hover, a.tile:focus-visible { border-color: var(--cyan-400); background: rgba(113, 203, 227, 0.05); }
.tile__ico { width: 34px; height: 34px; color: var(--cyan-400); }
.tile__n {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--text-low);
}
.tile__d { font-size: 0.9375rem; color: var(--text-mid); line-height: 1.55; }

/* --------------------------------------------------------------------------
   13 · TABLES
   -------------------------------------------------------------------------- */
.tbl-scroll { overflow-x: auto; border: var(--rule) solid var(--hair); border-radius: var(--radius); }
.tbl-scroll:focus-visible { outline-offset: -2px; }

.tbl { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.01em; min-width: 560px; }
.tbl caption {
  text-align: left; padding: 16px 18px; color: var(--text-low);
  font-size: 0.75rem; letter-spacing: 0.04em; border-bottom: var(--rule) solid var(--hair);
  background: rgba(233, 238, 245, 0.02);
}
.tbl th {
  text-align: left; font-weight: 500; color: var(--text-low);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem;
  padding: 13px 18px; background: rgba(233, 238, 245, 0.035);
  border-bottom: var(--rule) solid var(--hair); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.tbl td { padding: 13px 18px; color: var(--text-mid); border-bottom: var(--rule) solid var(--hair); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) td { background: rgba(233, 238, 245, 0.016); }
.tbl tbody tr:hover td { background: rgba(113, 203, 227, 0.055); color: var(--text-hi); }
.tbl th:first-child, .tbl td:first-child { color: var(--text-hi); }
.tbl .is-na { color: var(--text-low); }
.tbl .is-hit { color: var(--amber-400); }
.tbl tr.is-hidden { display: none; }

/* Spec table — label / value pairs, the core of every product page. */
.spectbl { width: 100%; font-family: var(--font-mono); font-size: 0.8125rem; }
.spectbl th {
  width: 30%; min-width: 150px; text-align: left; vertical-align: top;
  font-weight: 400; color: var(--text-low); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.6875rem; padding: 16px 20px 16px 0;
  border-bottom: var(--rule) solid var(--hair);
}
.spectbl td { padding: 16px 0; color: var(--text-hi); line-height: 1.7; border-bottom: var(--rule) solid var(--hair); }
.spectbl tr:last-child th, .spectbl tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) {
  .spectbl, .spectbl tbody, .spectbl tr, .spectbl th, .spectbl td { display: block; width: 100%; }
  .spectbl th { border-bottom: 0; padding: 16px 0 6px; }
  .spectbl td { padding: 0 0 16px; }
}

/* --------------------------------------------------------------------------
   14 · FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__l {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-low);
}
.field__l .req { color: var(--amber-400); }

.input, .select, .textarea {
  width: 100%; background: var(--gun-700); color: var(--text-hi);
  border: var(--rule) solid var(--gun-600); border-radius: var(--radius);
  padding: 13px 14px; font-family: var(--font-mono); font-size: 0.875rem;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-low); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gun-500); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cyan-400); outline: none; background: var(--gun-800); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 1px; }
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F7E90' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px;
  padding-right: 36px;
}
.select option { background: var(--gun-700); color: var(--text-hi); }

.form-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } .form-grid .is-full { grid-column: 1 / -1; } }

.form-note {
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.7;
  color: var(--text-low); letter-spacing: 0.02em;
}
.form-err {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--amber-400);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   15 · PAGE BLOCKS
   -------------------------------------------------------------------------- */

/* ── Hero ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-950); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1, 24, 55, 0.55) 0%, rgba(1, 24, 55, 0.62) 38%, rgba(1, 13, 34, 0.94) 100%),
    radial-gradient(90% 70% at 15% 30%, rgba(2, 35, 78, 0.5), transparent 70%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: 140px 48px; }
.hero__h1 { max-width: 17ch; }
.hero__h1 .ln { display: block; }
.hero__h1 .ln--cy { color: var(--cyan-400); }
.hero__sub { max-width: 52ch; margin-top: 26px; }
.hero__cta { margin-top: 38px; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 56px; padding-top: 24px; border-top: var(--rule) solid rgba(113, 203, 227, 0.2); }
.hero__cred { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); }
.hero__cred li { display: flex; align-items: center; gap: 8px; }
.hero__cred li::before { content: ''; width: 4px; height: 4px; background: var(--cyan-400); flex: none; }

.scrollcue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-low);
  transition: opacity var(--t-slow) var(--ease);
}
.scrollcue.is-gone { opacity: 0; }
.scrollcue__bar { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--cyan-400), transparent); }
@media (max-width: 899px) { .scrollcue { display: none; } }

/* ── The film ──────────────────────────────────────────────────────────────
   Contained 16:9, not full bleed. Space around it reads as more considered
   than edge to edge, and it keeps the sequence as the page's only spectacle.

   The pin releasing, the wordmark and the film are one beat — pipe forms, name
   resolves, film runs — so the top padding here is only enough to read as a
   new moment, not as a new section. The bottom keeps the section rhythm. */
.film { padding-top: clamp(20px, 2.4vw, 40px); }
@media (max-width: 899px) { .film { padding-top: 16px; } }

.film__frame {
  position: relative; margin: 24px auto 0;
  max-width: 1240px; aspect-ratio: 16 / 9;
  border: var(--rule) solid var(--navy-600); border-radius: var(--radius);
  overflow: hidden; background: var(--navy-950);
  box-shadow: 0 30px 80px rgba(1, 13, 34, 0.55);
}
.film__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(1, 13, 34, 0.72); color: var(--text-hi);
  border: var(--rule) solid var(--cyan-400);
  transition: background-color var(--t-fast) var(--ease);
}
.film__play[hidden] { display: none; }
.film__play svg { width: 30px; height: 30px; margin-left: 3px; }
.film__play:hover, .film__play:focus-visible { background: var(--navy-700); }
@media (max-width: 899px) {
  .film__frame { margin-top: 18px; box-shadow: 0 18px 44px rgba(1, 13, 34, 0.5); }
  .film__play { width: 60px; height: 60px; }
}

/* ── Credential strip ── */
.credstrip { border-top: var(--rule) solid var(--navy-600); border-bottom: var(--rule) solid var(--navy-600); }
.credstrip__in { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; padding-block: 20px; }
.credstrip__i { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); }
.credstrip__i svg { width: 15px; height: 15px; color: var(--cyan-400); flex: none; }

/* ── Media pairing (About, narrative blocks) ── */
.pair { align-items: center; }
.pair__media { position: relative; border: var(--rule) solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.pair__media img { width: 100%; height: auto; }
.pair__kw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

/* ── Materials filter ── */
.matfilter { position: relative; margin-bottom: 40px; max-width: 520px; }
.matfilter__input {
  width: 100%; background: var(--gun-700); border: var(--rule) solid var(--gun-600);
  color: var(--text-hi); border-radius: var(--radius);
  padding: 15px 46px 15px 44px; font-family: var(--font-mono); font-size: 0.875rem;
  transition: border-color var(--t-fast) var(--ease);
}
.matfilter__input:focus { border-color: var(--cyan-400); outline: none; }
.matfilter__input:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 1px; }
.matfilter__ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-low); pointer-events: none; }
.matfilter__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: none; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--text-low); border-radius: var(--radius);
}
.matfilter__clear.is-on { display: grid; }
.matfilter__clear:hover { color: var(--text-hi); }
.matfilter__count { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-low); margin-top: 10px; }
.matfilter__count b { color: var(--amber-400); font-weight: 400; }

.matfam { padding-block: 28px; border-top: var(--rule) solid var(--hair); }
.matfam:first-of-type { border-top: 0; padding-top: 0; }
.matfam.is-hidden { display: none; }
.matfam__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* ── Process steps ── */
.steps { counter-reset: none; }
.step { position: relative; padding-top: 26px; border-top: var(--rule) solid var(--hair-strong); }
.step__n { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--cyan-400); margin-bottom: 18px; }
.step__ico { width: 44px; height: 44px; color: var(--cyan-400); margin-bottom: 20px; }
.step__d { color: var(--text-mid); font-size: 0.9375rem; line-height: 1.6; margin-top: 10px; }

/* ── Industries grid ── */
.indgrid { display: grid; gap: 1px; background: var(--hair); border: var(--rule) solid var(--hair); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 480px) { .indgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .indgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .indgrid { grid-template-columns: repeat(4, 1fr); } }
.ind {
  display: flex; align-items: center; gap: 16px; padding: 24px 20px;
  background: var(--navy-800); min-height: 96px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ind:hover, .ind:focus-visible { background: var(--navy-700); color: var(--cyan-400); }
.ind__ico { width: 30px; height: 30px; flex: none; color: var(--cyan-400); }
.ind__n { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.ind--more { background: var(--navy-900); }
.ind--more .ind__n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-400); }

/* ── Global reach map ── */
.gmap { position: relative; }
.gmap svg { width: 100%; height: auto; overflow: visible; }
.gmap__land { fill: rgba(113, 203, 227, 0.10); stroke: rgba(113, 203, 227, 0.28); stroke-width: 0.5; }
.gmap__mk { fill: var(--amber-400); }
.gmap__ring { fill: none; stroke: var(--amber-400); stroke-width: 0.8; opacity: 0.5; }
.gmap__lbl { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; fill: var(--text-mid); text-transform: uppercase; }

/* ── Leadership ── */
.lead-block { display: grid; gap: 0; align-items: stretch; }
@media (min-width: 900px) { .lead-block { grid-template-columns: 5fr 7fr; } }
.lead-block__media { position: relative; min-height: 380px; background: var(--navy-950); }
.lead-block__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.lead-block__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 80px); }
.lead-block__q {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.38; letter-spacing: -0.012em;
  color: var(--text-hi); text-wrap: pretty;
}
.lead-block__q::before { content: '\201C'; color: var(--cyan-400); }
.lead-block__q::after { content: '\201D'; color: var(--cyan-400); }
.lead-block__by { margin-top: 28px; padding-top: 20px; border-top: var(--rule) solid var(--hair); }

/* ── CTA banner ── */
.ctaband { position: relative; overflow: hidden; background: var(--navy-950); }
.ctaband__bg { position: absolute; inset: 0; z-index: 0; }
.ctaband__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ctaband__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(1, 13, 34, 0.96) 0%, rgba(1, 24, 55, 0.9) 45%, rgba(2, 35, 78, 0.62) 100%);
}
.ctaband__in { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 120px); }
.ctaband__body { max-width: 640px; }

/* ── Page banner (inner pages) ── */
.pbanner { position: relative; overflow: hidden; background: var(--navy-950); min-height: 40vh; display: flex; align-items: flex-end; padding-top: var(--header-h); }
.pbanner__bg { position: absolute; inset: 0; z-index: 0; }
.pbanner__bg img { width: 100%; height: 100%; object-fit: cover; }
.pbanner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(1, 13, 34, 0.86) 0%, rgba(1, 13, 34, 0.72) 45%, rgba(1, 13, 34, 0.97) 100%);
}
.pbanner__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 6vw, 72px); }
.pbanner__sum { max-width: 62ch; margin-top: 18px; }
.pbanner--plain { min-height: 0; background: var(--navy-950); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--text-low); margin-bottom: 22px; }
.crumbs a { color: var(--text-mid); }
.crumbs a:hover { color: var(--cyan-400); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; color: var(--gun-500); }
.crumbs [aria-current] { color: var(--cyan-400); }

/* ── Product page layout ── */
.plyt { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .plyt { grid-template-columns: 300px 1fr; } }

.sidebar { display: grid; gap: 20px; }
@media (min-width: 1000px) { .sidebar { position: sticky; top: calc(var(--header-h) + 24px); } }
.sidebar__box { border: var(--rule) solid var(--hair); border-radius: var(--radius); background: rgba(233, 238, 245, 0.02); }
.sidebar__h {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-low);
  padding: 16px 18px; border-bottom: var(--rule) solid var(--hair);
}
.sibs li + li { border-top: var(--rule) solid var(--hair); }
.sibs a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; font-size: 0.9375rem; color: var(--text-mid);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sibs a:hover, .sibs a:focus-visible { color: var(--text-hi); background: rgba(113, 203, 227, 0.06); }
.sibs [aria-current="page"] { color: var(--cyan-400); background: rgba(113, 203, 227, 0.08); box-shadow: inset 2px 0 0 var(--cyan-400); }
.sidebar__actions { display: grid; gap: 10px; }
.sidebar__help { padding: 18px; font-size: 0.875rem; color: var(--text-mid); line-height: 1.6; }
.sidebar__help a { color: var(--cyan-400); font-family: var(--font-mono); font-size: 0.8125rem; display: block; margin-top: 6px; }

/* ── Gallery ── */
.gal { display: grid; gap: 12px; }
.gal__main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: var(--rule) solid var(--hair); border-radius: var(--radius); background: var(--navy-950); }
.gal__main img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal__thumb {
  position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; cursor: pointer;
  border: var(--rule) solid var(--hair); border-radius: var(--radius);
  background: var(--navy-950);
  transition: border-color var(--t-fast) var(--ease);
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb:hover { border-color: var(--hair-strong); }
.gal__thumb[aria-current="true"] { border-color: var(--cyan-400); }

/* ── Long-form technical prose ── */
.tech { max-width: 72ch; }
.tech h3 { margin-top: 40px; margin-bottom: 14px; }
.tech h3:first-child { margin-top: 0; }
.tech p { color: var(--text-mid); margin-bottom: 1.15em; text-wrap: pretty; }
.tech ul { margin: 0 0 1.15em; display: grid; gap: 9px; }
.tech ul li { position: relative; padding-left: 22px; color: var(--text-mid); }
.tech ul li::before { content: ''; position: absolute; left: 4px; top: 0.65em; width: 6px; height: var(--rule); background: var(--cyan-400); }
.tech strong { color: var(--text-hi); font-weight: 500; }

/* ── Calculator ── */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--rule) solid var(--hair); margin-bottom: 28px; }
.tab {
  background: none; border: 0; cursor: pointer; padding: 13px 16px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-low); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text-hi); }
.tab[aria-selected="true"] { color: var(--cyan-400); border-bottom-color: var(--cyan-400); }
.tabpanel[hidden] { display: none; }

.calcout { border: var(--rule) solid var(--hair); border-radius: var(--radius); background: rgba(233, 238, 245, 0.025); padding: 24px; }
.calcout__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: var(--rule) solid var(--hair); }
.calcout__row:last-of-type { border-bottom: 0; }
.calcout__l { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-low); }
.calcout__v { font-family: var(--font-mono); font-size: clamp(1.125rem, 2.4vw, 1.625rem); font-weight: 500; color: var(--amber-400); font-variant-numeric: tabular-nums; }
.calcout__v small { font-size: 0.6em; color: var(--text-low); margin-left: 6px; letter-spacing: 0.06em; }

.copybtn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  background: none; border: var(--rule) solid var(--hair); border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer; color: var(--text-mid);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.copybtn:hover { color: var(--cyan-400); border-color: var(--cyan-400); }

/* ── Glossary ── */
.gloss { display: grid; gap: 0; }
.gloss__i { padding-block: 28px; border-top: var(--rule) solid var(--hair); display: grid; gap: 12px; }
@media (min-width: 800px) { .gloss__i { grid-template-columns: 4fr 8fr; gap: 32px; } }
.gloss__i:first-child { border-top: 0; }
.gloss__t { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 500; color: var(--cyan-400); letter-spacing: 0.01em; }
.gloss__s { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-low); margin-top: 6px; }
.gloss__d { color: var(--text-mid); line-height: 1.65; }

/* ── Notice / caution box ── */
.notice {
  display: flex; gap: 14px; padding: 18px 20px;
  border: var(--rule) solid rgba(255, 138, 43, 0.32); border-radius: var(--radius);
  background: rgba(255, 138, 43, 0.06);
}
.notice svg { width: 18px; height: 18px; flex: none; color: var(--amber-400); margin-top: 2px; }
.notice p { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.7; color: var(--text-mid); letter-spacing: 0.01em; }

/* ── Inline b-roll panel ── */
.broll { position: relative; border: var(--rule) solid var(--hair); border-radius: var(--radius); overflow: hidden; background: var(--navy-950); }
.broll video { width: 100%; height: 100%; object-fit: cover; display: block; }
.broll__lbl {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mid);
  background: rgba(1, 13, 34, 0.8); border: var(--rule) solid var(--hair);
  padding: 6px 10px; border-radius: var(--radius);
}

/* ── Technical SVG diagrams (categories with no photograph) ── */
.card__media--diagram,
.gal__main--diagram {
  display: grid; place-items: center; padding: 8%;
  background:
    linear-gradient(160deg, rgba(12, 70, 129, 0.16), transparent 60%),
    var(--navy-950);
}
.gal__main--diagram { aspect-ratio: 4 / 3; border: var(--rule) solid var(--hair); border-radius: var(--radius); }
.tdiag { width: 100%; height: auto; }
.tdiag .td-face { fill: rgba(113, 203, 227, 0.10); stroke: var(--cyan-400); stroke-width: 1.4; }
.tdiag .td-bore { fill: var(--navy-950); stroke: var(--cyan-400); stroke-width: 1.2; }
.tdiag .td-line { stroke: rgba(169, 182, 198, 0.55); stroke-width: 1.2; fill: none; }
.tdiag .td-dim  { stroke: var(--amber-400); stroke-width: 1; fill: none; }
.tdiag .td-weld { stroke: var(--amber-400); stroke-width: 1.6; fill: none; }
.tdiag .td-t {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  fill: var(--text-low);
}

/* ── Sortable table headers ── */
.th-sort {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.th-sort::after { content: '\2195'; opacity: 0.4; font-size: 0.9em; }
.th-sort:hover { color: var(--text-hi); }
[aria-sort="ascending"] .th-sort::after { content: '\2191'; opacity: 1; color: var(--cyan-400); }
[aria-sort="descending"] .th-sort::after { content: '\2193'; opacity: 1; color: var(--cyan-400); }

/* --------------------------------------------------------------------------
   16 · REVEAL ON SCROLL
   -------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.no-js .rv { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16b · NO-JS FALLBACK
   The nav markup is static, so without JS the drawer simply becomes a plain
   block of links under the header and every page stays fully navigable.
   -------------------------------------------------------------------------- */
.no-js .hdr { position: static; }
.no-js .burger { display: none; }
.no-js .drawer {
  display: block;
  position: static; inset: auto; opacity: 1; visibility: visible; transform: none;
  height: auto; overflow: visible; border-bottom: var(--rule) solid var(--navy-600);
}
.no-js .drawer__panel { display: block; }
.no-js .drawer__toggle { display: none; }
/* Without JS the whole menu is on the page at once, so lay it out in columns
   rather than one very long list. */
@media (min-width: 760px) {
  .no-js .drawer__panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
  .no-js .drawer__panel a { min-height: 40px; padding-block: 8px; }
}
.no-js .hdr__nav, .no-js .hdr__actions { display: none; }
.no-js .wa { opacity: 1; visibility: visible; transform: none; }

/* --------------------------------------------------------------------------
   17 · UTILITIES
   -------------------------------------------------------------------------- */
.u-mt-s { margin-top: 16px; }
.u-mt-m { margin-top: 28px; }
.u-mt-l { margin-top: 44px; }
.u-mb-m { margin-bottom: 28px; }
.u-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.u-center { text-align: center; }
.u-maxw { max-width: 68ch; }

/* --------------------------------------------------------------------------
   18 · REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .card__media img { transition: none; }
}

/* --------------------------------------------------------------------------
   19 · PRINT  (the site is dark; print gets legible ink)
   -------------------------------------------------------------------------- */
@media print {
  .hdr, .drawer, .wa, .scrollcue, .forge, .ctaband, video { display: none !important; }
  body { background: #fff; color: #000; }
  .surf::before { display: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* ── FAQ (product category pages) ── */
.faq { border-top: var(--rule) solid var(--hair); }
.faq__i { border-bottom: var(--rule) solid var(--hair); }
.faq__q {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; color: var(--text-hi);
  min-height: 44px; transition: color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: '+'; flex: none; width: 18px;
  font-family: var(--font-mono); font-size: 1.125rem; line-height: 1.35;
  color: var(--cyan-400);
}
.faq__i[open] .faq__q::before { content: '\2212'; }
.faq__q:hover { color: var(--cyan-400); }
.faq__a { padding: 0 0 20px 32px; }
.faq__a p { color: var(--text-mid); line-height: 1.7; margin: 0; text-wrap: pretty; }

/* ==========================================================================
   20 · REVISION 2 — MOBILE PASS AND POLISH
   ========================================================================== */

/* ── Headings: nothing should run past three lines on a phone ── */
@media (max-width: 620px) {
  .h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.04; }
  .h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.1; }
  .h3 { font-size: 1.1875rem; }
  .lead { font-size: 1rem; }
  /* Sections were generous enough on mobile that scrolling dragged. */
  .section { padding-block: clamp(48px, 11vw, 76px); }
  /* ...except the film, which has to stay welded to the wordmark above it.
     Restated here because this block would otherwise win on padding-block. */
  .film { padding-top: 16px; }
  .section-head { margin-bottom: 28px; }
  .u-mt-l { margin-top: 28px; }
  .card__body { padding: 18px; }
  .tile { padding: 22px 18px; }
  .plyt { gap: 28px; }
  .lead-block__body { padding: 32px 24px; }
  .ctaband__in { padding-block: 56px; }
}

/* ── Tables: always scroll in their own container, with an edge-fade hint ── */
.tbl-scroll { position: relative; -webkit-overflow-scrolling: touch; }
.tbl-scroll::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to right, transparent, rgba(1, 13, 34, 0.92));
  transition: opacity var(--t-fast) var(--ease);
}
.tbl-scroll.is-scrollable::after { opacity: 1; }
.tbl-scroll.is-end::after { opacity: 0; }
@media (max-width: 620px) {
  .tbl { font-size: 0.75rem; }
  .tbl th, .tbl td { padding: 11px 13px; }
}

/* ── Calculators and forms on a phone ── */
@media (max-width: 620px) {
  .input, .select, .textarea, .matfilter__input {
    min-height: 48px; font-size: 1rem;   /* 16px stops iOS zooming on focus */
  }
  .tabs { gap: 2px; }
  .tab { padding: 13px 12px; min-height: 44px; }
  .calcout { padding: 18px; }
  .calcout__v { font-size: 1.5rem; }
  .btn { padding: 15px 20px; min-height: 48px; }
}

/* ── Tap targets: chips were tight ── */
.chip { min-height: 32px; }
a.chip, .chips a { min-height: 44px; padding-block: 10px; }
@media (max-width: 620px) {
  .chip { min-height: 40px; padding: 9px 12px 9px 10px; font-size: 0.75rem; }
  .chip-set { gap: 8px; }
  .sibs a { min-height: 52px; }
  .crumbs { font-size: 0.625rem; }
}

/* ── WhatsApp float: never over content, always clear of the footer ── */
.wa {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}
@media (min-width: 620px) { .wa { right: 24px; bottom: 24px; } }
.wa.is-raised { transform: translateY(-96px); }
/* Reserve the corner so body copy never sits under the float. */
@media (max-width: 620px) {
  .ftr__legal { padding-bottom: 84px; }
  .rfq .u-flex { padding-right: 64px; }
}

/* ── No page may scroll sideways ── */
html, body { max-width: 100%; overflow-x: clip; }
.tbl-scroll, .gal, .chip-set, .indgrid { max-width: 100%; }
pre, code, .spec { overflow-wrap: anywhere; }

/* ── Section transitions: let the two surface families bleed into each other
      rather than butting up hard against one another ── */
.surf + .surf { position: relative; }
.surf--gun-800::after, .surf--gun-900::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 88px;
  pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, rgba(1, 24, 55, 0.55), transparent);
}
.surf--navy-800::after, .surf--navy-900::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 88px;
  pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, rgba(18, 23, 29, 0.4), transparent);
}

/* ── Reveal choreography: data reveals tighter and faster than narrative ── */
.surf--gun-800 .rv, .surf--gun-900 .rv { transform: translateY(10px); }
.surf--gun-800 .rv.is-in, .surf--gun-900 .rv.is-in { transition-duration: 420ms; }

/* ── Empty state for the grade filter ── */
.matempty {
  display: none; padding: 28px 24px; text-align: center;
  border: var(--rule) dashed var(--hair); border-radius: var(--radius);
}
.matempty.is-on { display: block; }
.matempty p { color: var(--text-mid); margin-bottom: 6px; }
.matempty .mono { color: var(--text-low); }

/* ── Consistent hover affordance on desktop ── */
@media (hover: hover) {
  .gloss__i:hover .gloss__t { color: var(--cyan-400); }
  .credstrip__i:hover svg { color: var(--amber-400); }
  .spectbl tr:hover td { color: var(--text-hi); }
}

/* ── Typographic rhythm ── */
.h1, .h2, .h3, .lead, .forge__card-t { text-wrap: balance; }
.prose p, .tech p, .card__d, .tile__d { text-wrap: pretty; }

/* ── Grid children must be allowed to shrink ───────────────────────────────
   Grid and flex items default to min-width:auto, which resolves to their
   min-content width. On a phone the spec tables (min-width 560px) were
   therefore forcing the whole single-column .plyt grid — and the sidebar
   sitting in it — out to the table's width. overflow-x:clip was hiding the
   symptom; this fixes the cause. */
.plyt > *, .grid > *, .two > *, .form-grid > * { min-width: 0; }

/* ── Standalone links need a real tap target on a phone.
      Inline links inside a sentence stay inline — making those 44px tall
      would break the paragraph, and WCAG 2.1 AA does not require it. ── */
.tlink { min-height: 44px; align-items: center; }
@media (max-width: 620px) {
  .ftr__cols a, .ftr__person a, .drawer__panel a, .mega__link {
    display: flex; align-items: center; min-height: 44px;
  }
  .ftr__cols li + li { margin-top: 2px; }
  .ftr__person a { line-height: 1.4; }
}

/* Long inline specs (e.g. a full SAE flange stamping) must be allowed to
   wrap on a phone rather than pushing the column wide. */
@media (max-width: 620px) {
  .spec { white-space: normal; overflow-wrap: anywhere; }
}

/* Family heading and its descriptor stack on a phone rather than fighting
   each other for a 342px row. */
@media (max-width: 620px) {
  .matfam__h { display: block; }
  .matfam__h .mono { margin-top: 4px; }
  .matfam { padding-block: 22px; }
}

/* Light-background photos keep full brightness in the centre; only the very
   edge is eased into the card so there is no hard bright rectangle. This is
   a seating device, not the darkening overlay that was removed. */
.card__media--onwhite::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(94% 88% at 50% 45%, transparent 68%, rgba(1, 13, 34, 0.30) 100%);
}

/* ── Brochure download ─────────────────────────────────────────────────────
   Secondary to the RFQ call to action: cyan outline, never a solid fill.
   Downloads directly — there is no gate, form or modal anywhere near it. */
.btn--brochure {
  border-color: var(--cyan-400); color: var(--cyan-400);
  background: transparent; gap: 10px;
}
.btn--brochure:hover, .btn--brochure:focus-visible {
  background: rgba(113, 203, 227, 0.10); border-color: var(--cyan-400); color: var(--cyan-400);
}
.btn--brochure svg { width: 16px; height: 16px; flex: none; }
.btn__meta {
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: none;
  color: var(--text-low); white-space: nowrap;
}
.btn--brochure:hover .btn__meta { color: var(--text-mid); }
/* The header has no room for the file meta; the drawer and page blocks do. */
.hdr__brochure .btn__meta { display: none; }

.broch {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  align-items: center; justify-content: space-between;
  border: var(--rule) solid var(--hair); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  background: rgba(233, 238, 245, 0.02);
}
.broch > div { max-width: 62ch; }
.broch__d { color: var(--text-mid); margin-top: 12px; line-height: 1.6; }
@media (max-width: 620px) {
  .broch { padding: 22px; gap: 20px; }
  .btn--brochure { flex-wrap: wrap; }
}