
/* ============================================================
   SOARIS — DESIGN TOKENS  v1.21
   ============================================================ */
:root{
  --ink:#0A1420; --ink-2:#101E2D; --ink-3:#1A2B3D; --ink-4:#22384E;
  --blue:#0044AA; --blue-dk:#00337F; --aqua:#2AD4FF;
  --bone:#EEF1F5; --bone-2:#DDE3EA; --slate:#54646F; --white:#FFFFFF;
  --flag:#E0A22B;
  --f-display:'Archivo', system-ui, sans-serif;
  --f-body:'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --gut:clamp(20px,5vw,64px);
  --max:1240px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* v1.15 — stop anchor jumps clear of the sticky header (65px compact)
   rather than underneath it. */
section[id], .qual[id], footer[id]{ scroll-margin-top:116px; }
@media (max-width:900px){ section[id], .qual[id], footer[id]{ scroll-margin-top:104px; } }
/* v1.20 — body was plain white, so the plain .band sections (About,
   Validation, Markets, Products, RFQ) gave white cards no separation from
   the page. Body now uses the same --bone grey already used on Capabilities/
   Processes/Why-Soaris, so every section's cards read as distinct boxes.
   Those three sections are bumped to the darker --bone-2 so the light/dark
   band alternation still reads instead of collapsing into one shade. */
body{ margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }
.band{ padding-block:clamp(68px,8.5vw,124px); }
.band--tight{ padding-block:clamp(46px,5.6vw,74px); }
.band--dark{ background:var(--ink); color:var(--bone); }
.band--bone{ background:var(--bone-2); }

/* v1.7 — label legibility on light backgrounds */
.eyebrow{ font-family:var(--f-body); font-size:14.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue-dk); display:flex; align-items:center; gap:12px; margin:0 0 22px; }
.eyebrow::before{ content:""; width:28px; height:2px; background:var(--aqua); flex:none; }
.band--dark .eyebrow, .dp .eyebrow{ font-family:var(--f-mono); font-size:13.5px;
  letter-spacing:.15em; color:var(--aqua); }

.h2{ font-family:var(--f-display); font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(30px,3.9vw,49px); line-height:1.08; letter-spacing:-.015em; margin:0 0 20px; text-wrap:balance; }
/* CHANGE 3 — sub-section headers enlarged */
.h3{ font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(24px,2.55vw,32px); line-height:1.14; letter-spacing:-.014em; margin:0 0 14px; }
.h4{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 600;
  font-size:clamp(19px,1.85vw,23px); line-height:1.2; letter-spacing:-.01em; margin:0 0 12px; }
.lede{ font-size:clamp(17px,1.5vw,19.5px); color:var(--slate); max-width:62ch; margin:0; }
.band--dark .lede,.dp .lede{ color:#9AAEC2; }
.sublabel{ font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-dk); margin:0 0 14px; }
.band--dark .sublabel{ font-family:var(--f-mono); font-size:12px; font-weight:400;
  letter-spacing:.15em; color:var(--aqua); }

.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:13px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  padding:15px 26px; border:1.5px solid transparent; cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn--pri{ background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn--pri:hover{ background:var(--blue-dk); border-color:var(--blue-dk); }
.btn--aqua{ background:var(--aqua); color:var(--ink); border-color:var(--aqua); }
.btn--aqua:hover{ background:#5FE0FF; border-color:#5FE0FF; }
.btn--ghost{ background:transparent; color:var(--bone); border-color:#2E4459; }
.btn--ghost:hover{ border-color:var(--aqua); color:var(--aqua); }
.btn__ar{ transition:transform .18s ease; }
.btn:hover .btn__ar{ transform:translateX(4px); }
:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:2px; }

/* review banner */
.rb{ background:#1B1408; border-bottom:1px solid rgba(224,162,43,.4); color:#F0D9AC; }
.rb__in{ display:flex; align-items:flex-start; gap:16px; padding-block:13px; }
.rb__tag{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); background:var(--flag); padding:4px 9px; flex:none; margin-top:2px; }
.rb__tx{ font-size:13.5px; line-height:1.62; margin:0; }
.rb__tx b{ color:#FFE9C4; font-weight:600; }
.rb__x{ margin-left:auto; flex:none; background:none; border:1px solid rgba(224,162,43,.4);
  color:#F0D9AC; font-family:var(--f-mono); font-size:11px; padding:5px 10px; cursor:pointer; }
.rb__x:hover{ border-color:var(--flag); }

/* ============================================================
   CHANGE 1 — HEADER REDESIGN (two-tier instrument bar)
   ============================================================ */
.hdr{ position:sticky; top:0; z-index:60; background:var(--ink); }
.hdr__util{ background:#07101A; border-bottom:1px solid var(--ink-3); }
.hdr__util-in{ display:flex; align-items:center; gap:22px; height:36px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.07em; color:#6C8199; }
.hdr__util-in b{ color:#A9BECF; font-weight:500; }
.hdr__util-phone{ display:none; }
.hdr__util-in .sep{ color:#2E4459; }
.hdr__util-r{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.hdr__util-r a{ color:#6C8199; text-decoration:none; transition:color .16s ease; }
.hdr__util-r a:hover{ color:var(--aqua); }

.hdr__main{ border-bottom:1px solid var(--ink-3); position:relative; }
/* v1.16 — the two flanking cells share one width so the header reads as
   a balanced pair: Soaris box left, USA mark box right, nav centred between. */
.hdr__in{ display:flex; align-items:stretch; height:82px; transition:height .22s ease;
  --hdr-side:clamp(156px,17vw,210px); }
.hdr.small .hdr__in{ height:64px; }
.hdr.small .hdr__util{ display:none; }
.hdr__logo{ display:flex; align-items:center; padding-right:34px;
  flex:0 0 var(--hdr-side); border-right:1px solid var(--ink-3); }
.hdr__logo img{ height:34px; width:auto; transition:height .22s ease; }
.hdr.small .hdr__logo img{ height:27px; }
/* CHANGE v1.3 — wordmark-only header lockup, sized up now the icon is gone */
.hdr__logo--word img{ height:30px; }
.hdr.small .hdr__logo--word img{ height:24px; }
@media (min-width:900px){
  .hdr__logo--word img{ height:38px; }
  .hdr.small .hdr__logo--word img{ height:29px; }
}
.hdr__nav{ display:flex; margin-inline:auto; }
.hdr__nav a{ position:relative; display:flex; align-items:center; padding:0 20px;
  font-family:var(--f-body); font-size:14.5px; font-weight:500; color:#B7C6D6;
  text-decoration:none; border-right:1px solid var(--ink-3); transition:color .16s ease,background .16s ease; }
.hdr__nav a:first-child{ border-left:1px solid var(--ink-3); }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--aqua); transform:scaleX(0); transition:transform .2s ease; }
.hdr__nav a:hover{ color:var(--white); background:var(--ink-2); }
.hdr__nav a:hover::after{ transform:scaleX(1); }
/* ---- v1.11 capabilities dropdown ---------------------------------
   Opens on click/tap only. No hover trigger: hover does not exist on
   touch, and mixed hover/tap behaviour misfires on touchscreen laptops. */
.nav__grp{ position:relative; display:flex; }
.nav__grp > a{ border-right:0 !important; padding-right:10px; }
.nav__cvt{ display:flex; align-items:center; padding:0 13px 0 3px; background:none;
  border:0; border-right:1px solid var(--ink-3); color:#B7C6D6; cursor:pointer;
  font:inherit; line-height:0; transition:color .16s ease,background .16s ease; }
.nav__cvt:hover{ color:var(--white); background:var(--ink-2); }
.nav__cvt svg{ width:11px; height:11px; transition:transform .2s ease; }
.nav__grp.open .nav__cvt{ color:var(--aqua); background:var(--ink-2); }
.nav__grp.open .nav__cvt svg{ transform:rotate(180deg); }
.nav__menu{ display:none; position:absolute; top:100%; left:0; min-width:290px; z-index:60;
  background:var(--ink); border:1px solid var(--ink-3); border-top:2px solid var(--aqua);
  box-shadow:0 18px 44px rgba(0,0,0,.5); padding:6px 0; }
.nav__grp.open .nav__menu{ display:block; }
.nav__menu a{ display:block; padding:11px 18px; border:0 !important; white-space:nowrap;
  font-size:14px; color:#B7C6D6; text-decoration:none; }
.nav__menu a::after{ display:none; }
.nav__menu a:hover,.nav__menu a:focus-visible{ color:var(--white); background:var(--ink-2); outline:none; }
.nav__menu .nav__sep{ height:1px; background:var(--ink-3); margin:6px 0; }
/* v1.16 — Made in the USA mark replaces the header quote button. Request a
   Quote remains in the hero, the RFQ block and the footer, so nothing is lost.
   The white disc doubles as its own halo against the dark bar; the soft glow
   lifts it off the ink background without adding a second shape. */
.hdr__usa{ display:flex; align-items:center; justify-content:center;
  flex:0 0 var(--hdr-side); padding:0 14px; border-left:1px solid var(--ink-3); }
/* v1.18 — Soaris-owned banner, drawn as outlined paths so there is no font
   to load and nothing to convert. Its own dark card supplies the background,
   so the white plate and its hairline are gone. */
/* v1.19 — banner geometry rebuilt with simpler stripe/canton layering; this
   pass turned out not to fix the actual problem (see v1.20). */
/* v1.20 — the wave stripes were the real problem, not the layering: at
   header scale (~50px for 13 stripes) the wave amplitude was comparable to
   a stripe's own height, so stripes visually crossed. Rebuilt as flat
   rectangles — correct call. Paired it with shape-rendering:crispEdges,
   which was the wrong call: at non-integer display scaling (Windows 125%/
   150%, very common) crispEdges rounds each stripe's edges independently,
   making stripes visibly uneven, and it also stripped anti-aliasing from
   the star polygons in the same group, making them blockier than before.
   Only tested at 1x/2x DPR that round, which is why this was missed. */
/* v1.21 — converted the whole mark from inline SVG to a base64 PNG (img),
   matching how every other photo on the site is embedded. Three rounds of
   SVG-specific rendering bugs (wave geometry, then crispEdges pixel-
   snapping) made the case: a raster image is fixed at export and doesn't
   depend on the viewer's rendering engine or display scale. Rasterized at
   1800×760 (viewBox 900×380 ×2) — well above the 158px max display width,
   with headroom for high-DPI screens. Also added ~10 units of extra gap
   between "I" and "N" per Scott's request; letters are outlined paths, so
   this only required moving the N glyph's transform-x. */
.hdr__usa img{ width:100%; max-width:158px; height:auto; display:block;
  transition:max-width .22s ease; }
.hdr.small .hdr__usa img{ max-width:122px; }
.hdr__burger{ display:none; margin-left:auto; align-self:center; background:none;
  border:1px solid var(--ink-3); color:var(--bone); padding:11px 14px; cursor:pointer;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; }

/* ============================================================
   HERO — CHANGE 2 (headline reduced)
   ============================================================ */
.hero{ position:relative; background:var(--ink); color:var(--bone); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:58% 50%; opacity:.5; }
.hero__veil{ position:absolute; inset:0;
  background:linear-gradient(100deg,var(--ink) 4%,rgba(10,20,32,.94) 38%,rgba(10,20,32,.62) 74%,rgba(10,20,32,.84) 100%); }
.hero__grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(42,212,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(42,212,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 85% at 70% 45%,#000 0%,transparent 72%); }
.hero__glow{ position:absolute; width:900px; height:900px; right:-280px; top:-340px;
  background:radial-gradient(circle,rgba(0,68,170,.4) 0%,transparent 66%); pointer-events:none; }
.hero__in{ position:relative; z-index:2; padding-block:clamp(64px,8vw,104px) clamp(50px,6vw,78px); }
.hero__tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--aqua); display:flex; align-items:center; gap:11px; margin:0 0 28px; flex-wrap:wrap; }
.hero__dot{ width:7px; height:7px; background:var(--aqua); border-radius:50%; flex:none;
  animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.72)} }
.hero__sep{ color:#3D566E; }
.hero h1{ font-family:var(--f-display); font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(33px,4.9vw,66px); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 24px; max-width:19ch; text-wrap:balance; }
.hero h1 .dumb{ color:var(--aqua); position:relative; white-space:nowrap; }
.hero h1 .dumb::after{ content:""; position:absolute; left:0; right:0; bottom:.05em; height:3px;
  background:var(--aqua); opacity:.34; }
.hero__sub{ font-size:clamp(16.5px,1.55vw,19px); color:#A8BCD0; max-width:58ch; margin:0 0 34px; }
.hero__sub b{ color:var(--white); font-weight:600; }
.hero__btns{ display:flex; gap:14px; flex-wrap:wrap; }

.tele{ position:relative; z-index:2; border-top:1px solid var(--ink-3);
  display:grid; grid-template-columns:repeat(4,1fr); }
.tele__cell{ padding:22px 0 26px; border-right:1px solid var(--ink-3); }
.tele__cell:last-child{ border-right:0; }
.tele__k{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#5E7891; }
.tele__v{ font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 600;
  font-size:clamp(19px,2.1vw,26px); color:var(--bone); margin-top:5px; letter-spacing:-.01em; }
.tele__v em{ font-style:normal; color:var(--aqua); }

/* ============================================================
   CHANGES 4 + 6 — CERT STRIP ENLARGED, LOGO SLOTS
   ============================================================ */
.certs{ background:var(--ink-2); border-top:1px solid var(--ink-3); }
.certs__top{ display:flex; align-items:baseline; gap:14px; padding-top:30px; flex-wrap:wrap; }
.certs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 0 34px; }
/* v1.12 — badges are links; each lands on the section that backs the claim */
.cert{ display:flex; align-items:center; gap:15px; border:1px solid var(--ink-3);
  background:#0C1826; padding:15px 17px; text-decoration:none;
  transition:border-color .2s ease, background .2s ease; }
a.cert:hover,a.cert:focus-visible{ border-color:var(--aqua); background:#102133; outline:none; }
a.cert:hover .cert__t,a.cert:focus-visible .cert__t{ color:var(--white); }
.cert__slot{ width:62px; height:62px; flex:none; border:1px dashed #33506B;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-mono); font-size:8px; letter-spacing:.09em; text-transform:uppercase;
  color:#4E6C88; line-height:1.35; padding:4px; }
.cert__t{ display:block; font-family:var(--f-display); font-variation-settings:'wdth' 104,'wght' 600;
  font-size:15.5px; color:var(--bone); letter-spacing:-.005em; line-height:1.25; }
.cert__d{ display:block; font-family:var(--f-mono); font-size:10.5px; color:#6C8199; margin-top:5px;
  letter-spacing:.05em; line-height:1.5; }

/* ============================================================
   ABOUT + CHANGE 5 (stat hierarchy corrected)
   ============================================================ */
/* v1.8 — About rebuilt as three horizontal tiers:
   head -> photo+facts -> prose+map. Replaces the old lopsided 2-col grid
   that stranded the facility photo with dead space beside it. */
.pos__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5.6vw,78px); align-items:start; }
.abt__head{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,72px);
  align-items:start; margin-bottom:clamp(38px,4.6vw,60px); }
.abt__head p{ color:var(--slate); margin:0; }
.abt__mid{ display:grid; grid-template-columns:1.24fr .76fr; gap:clamp(24px,3vw,40px);
  align-items:stretch; margin-bottom:clamp(38px,4.6vw,60px); }
.abt__fig{ border:1px solid var(--bone-2); overflow:hidden; aspect-ratio:16/10; }
.abt__fig img{ width:100%; height:100%; object-fit:cover; object-position:center 72%;
  display:block; }
.abt__low{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:center; }
.abt__low p{ color:var(--slate); margin:0 0 18px; }
.abt__low p:last-child{ margin-bottom:0; }
.abt__low strong{ color:var(--ink); font-weight:600; }
.abt__map{ margin:0; text-align:center; }
.abt__map img{ width:100%; max-width:460px; aspect-ratio:1; height:auto; display:block;
  margin:0 auto; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--bone-2), 0 10px 30px rgba(10,20,32,.09); }
.abt__map figcaption{ margin-top:22px; color:var(--slate); font-size:15.5px; line-height:1.62;
  max-width:460px; margin-left:auto; margin-right:auto; text-align:left; }
.abt__map figcaption strong{ color:var(--ink); font-weight:600; }
@media (max-width:900px){
  .abt__head,.abt__mid,.abt__low{ grid-template-columns:1fr; }
  .abt__mid{ gap:0; }
  .facts{ margin-top:0; border-top:0; }
}
.pos__body p{ color:var(--slate); margin:0 0 18px; }
.pos__body strong{ color:var(--ink); font-weight:600; }
.pos__fig{ border:1px solid var(--bone-2); }
.pos__fig--todo{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#F4F0E4 0 10px,#EFE9D8 10px 20px);
  border:1px solid rgba(224,162,43,.5); }
.pos__fig--todo span{ font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#9A7420; text-align:center; line-height:1.7;
  border:1px dashed rgba(224,162,43,.75); padding:12px 16px; }
/* .locmap retired in v1.8 — the circular map sits on the background directly */
.pos__cap{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); padding:11px 14px; background:var(--bone); border-top:1px solid var(--bone-2); }

/* v1.6 — quality panel: zero-defects + policy, side by side */
.qual{ border:1px solid var(--bone-2); }
.qual__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bone-2); }
.qual__col{ background:var(--white); display:flex; flex-direction:column; }
/* v1.7 — policy presented as a controlled document */
.qpol{ padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; height:100%;
  background:var(--bone); }
/* v1.9 — inset blue rule inside the sheet edge, controlled-document convention.
   The inner frame stops above the footer bar so it reads as part of the page. */
.qpol__doc-sheet{ position:relative; background:var(--white); border:1px solid var(--bone-2);
  box-shadow:0 1px 2px rgba(10,20,32,.05), 0 8px 22px rgba(10,20,32,.07);
  --qpad:clamp(22px,2.8vw,34px);
  padding:clamp(24px,3vw,36px) var(--qpad) clamp(20px,2.2vw,26px); display:flex;
  flex-direction:column; height:100%; }
.qpol__doc-sheet::before{ content:""; position:absolute; pointer-events:none;
  top:10px; left:10px; right:10px; bottom:10px;
  border:1px solid rgba(0,68,170,.42); }
.qpol__doc-sheet > *{ position:relative; }
.qpol__mark{ width:132px; height:auto; margin:0 auto 20px; display:block; }
.qpol__ttl{ font-family:var(--f-display); font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(21px,2.1vw,26px); letter-spacing:.02em; text-transform:uppercase;
  text-align:center; color:var(--ink); margin:0 0 6px; }
.qpol__rule{ width:56px; height:2px; background:var(--blue); margin:0 auto 22px; }
.qpol__mis{ font-size:15px; color:var(--ink); margin:0 0 16px; line-height:1.62; }
.qpol__mis b{ font-weight:600; color:var(--blue-dk); }
.qpol__intro{ font-size:14px; color:var(--slate); margin:0 0 6px; }
.qpol__l{ margin:0 0 22px; padding:0 0 0 20px; list-style:disc; }
.qpol__l li{ padding:9px 0 0; font-size:14px; color:var(--slate); line-height:1.6; }
.qpol__l li::marker{ color:var(--blue); }
.qpol__l b{ font-weight:600; color:var(--ink); }
.qpol__doc{ margin:auto 0 0; padding:12px 0 0;
  border-top:1px solid rgba(0,68,170,.28); background:transparent;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); display:flex; flex-wrap:wrap; gap:6px 16px; }
.qpol__doc span{ color:var(--blue-dk); font-weight:600; }
@media (max-width:860px){ .qual__cols{ grid-template-columns:1fr; } }
.qual__hd{ background:var(--ink); color:var(--bone); padding:22px 24px; }
.qual__hd .h4{ margin:0 0 6px; color:var(--white); }
.qual__hd p{ margin:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:#7E93A8; }
.qual__lead{ padding:30px 24px; border-bottom:1px solid var(--bone-2); background:var(--white); }
.qual__lead-v{ font-family:var(--f-display); font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(46px,6vw,72px); line-height:.94; color:var(--blue); letter-spacing:-.03em; }
.qual__lead-v em{ font-style:normal; font-size:.34em; color:var(--aqua); margin-left:7px;
  letter-spacing:0; vertical-align:.6em; }
.qual__lead-k{ font-size:16.5px; color:var(--ink); margin-top:12px; font-weight:500; }
.qual__lead-s{ font-family:var(--f-mono); font-size:11.5px; color:var(--slate); margin-top:8px; line-height:1.7; }
.qual__list{ padding:6px 24px; background:var(--white); }
.qual__li{ padding:14px 0; border-top:1px solid var(--bone-2); font-size:14.5px; color:var(--slate); }
.qual__li:first-child{ border-top:none; }
.qual__li b{ color:var(--ink); font-weight:600; }
.qual__sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bone-2); }
.qsub{ background:var(--white); padding:19px 18px 21px; }
.qsub__v{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 600;
  font-size:22px; color:var(--ink); line-height:1; letter-spacing:-.015em; }
.qsub__k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); margin-top:8px; line-height:1.55; }
.qual__ft{ background:var(--bone); padding:14px 18px; margin:0; font-family:var(--f-mono);
  font-size:11px; color:var(--slate); line-height:1.65; border-top:1px solid var(--bone-2); }

.facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bone-2);
  border:1px solid var(--bone-2); margin-top:26px; }
/* v1.8 — facts now sit beside the facility photo, matching its height */
.abt__mid .facts{ margin-top:0; grid-template-rows:1fr 1fr; }
.abt__mid .fact{ display:flex; flex-direction:column; justify-content:center; }
.fact{ background:var(--white); padding:20px 20px 22px; }
.fact__v{ font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700;
  font-size:29px; line-height:1; color:var(--blue); letter-spacing:-.02em; }
.fact__v sup{ font-size:.44em; top:-.85em; color:var(--aqua); }
.fact__k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); margin-top:8px; line-height:1.55; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.sec__head{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
  margin-bottom:clamp(32px,4.2vw,54px); }
.cap__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bone-2);
  border:1px solid var(--bone-2); }
.cap{ background:var(--white); padding:clamp(24px,2.7vw,34px); transition:background .2s ease; }
.cap:hover{ background:#F7F9FB; }
/* v1.8 — aqua on white measured 1.55:1; blue on Plex Sans reads at 10.4:1 */
.cap__n{ font-family:var(--f-body); font-size:12.5px; letter-spacing:.11em;
  color:var(--blue-dk); font-weight:600; text-transform:uppercase; }
.cap .h3{ margin-top:12px; }
.cap__d{ color:var(--slate); font-size:15.5px; margin:0 0 18px; }
.cap__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.cap__list li{ font-family:var(--f-mono); font-size:11.5px; color:#3E5162; background:var(--bone);
  padding:6px 10px; }

/* ============================================================
   CHANGES 8 + 9 — ELECTRONICS OPERATION
   ============================================================ */
.el__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-3);
  border:1px solid var(--ink-3); }
.el{ background:var(--ink-2); padding:clamp(24px,2.7vw,32px); }
.el ul{ list-style:none; margin:0; padding:0; }
.el li{ font-size:15px; color:#A8BCD0; padding:9px 0 9px 22px; position:relative;
  border-bottom:1px solid var(--ink-3); }
.el li:last-child{ border-bottom:0; }
.el li::before{ content:""; position:absolute; left:0; top:17px; width:7px; height:7px;
  border:1.5px solid var(--aqua); transform:rotate(45deg); }
.el li b{ color:var(--white); font-weight:600; }
.el__fig{ margin-top:clamp(28px,3.4vw,42px); display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--ink-3); border:1px solid var(--ink-3); }
.el__fig figure{ margin:0; background:var(--ink-2); }
.el__fig img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.el__fig figcaption{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#6C8199; padding:12px 15px; border-top:1px solid var(--ink-3); }
.el__fig--todo{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#1E2A38 0 10px,#182330 10px 20px); }
.el__fig--todo span{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#E0A22B; text-align:center; line-height:1.7;
  border:1px dashed rgba(224,162,43,.6); padding:10px 14px; }

/* ============================================================
   CHANGE 10 — VALIDATION
   ============================================================ */
.val__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.4vw,64px); align-items:start; }
.val__figs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.val__figs figure{ margin:0; border:1px solid var(--bone-2); background:var(--white); }
.val__figs img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
/* v1.16 — line-art/CAD figures are letterboxed rather than cropped. */
.val__figs img.fit{ object-fit:contain; background:var(--white); padding:10px; }
.val__figs figcaption{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate); padding:10px 12px; border-top:1px solid var(--bone-2); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; }
.split ul{ list-style:none; margin:0; padding:0; }
.split li{ font-size:15px; color:var(--slate); padding:8px 0 8px 20px; position:relative;
  border-bottom:1px dashed var(--bone-2); }
.split li:last-child{ border-bottom:0; }
.split li::before{ content:""; position:absolute; left:0; top:16px; width:7px; height:1.5px;
  background:var(--aqua); }
.band--dark .split li{ color:#9AAEC2; border-bottom-color:var(--ink-3); }

/* ============================================================
   CHANGE 11 — SOFTWARE
   ============================================================ */
.sw__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4.6vw,68px); align-items:center; }
.stack{ border:1px solid var(--ink-3); }
.stack__row{ display:grid; grid-template-columns:98px 1fr; border-bottom:1px solid var(--ink-3); }
.stack__row:last-child{ border-bottom:0; }
.stack__who{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; padding:16px 14px; border-right:1px solid var(--ink-3); }
.stack__who.cust{ color:#7E93A8; background:#0C1826; }
.stack__who.soaris{ color:var(--ink); background:var(--aqua); font-weight:600; }
.stack__what{ padding:15px 18px; background:var(--ink-2); }
.stack__t{ font-family:var(--f-display); font-variation-settings:'wdth' 104,'wght' 600;
  font-size:16px; color:var(--bone); }
.stack__s{ font-family:var(--f-mono); font-size:10.5px; color:#6C8199; margin-top:4px; letter-spacing:.05em; }

/* ============================================================
   SIGNATURE — DUMB PLACES
   ============================================================ */
.dp{ background:var(--ink); color:var(--bone); position:relative; overflow:hidden; }
.dp__glow{ position:absolute; width:800px; height:800px; left:-300px; bottom:-380px;
  background:radial-gradient(circle,rgba(0,68,170,.34) 0%,transparent 66%); pointer-events:none; }
.dp__in{ position:relative; z-index:2; }
.dp__head{ max-width:62ch; margin-bottom:clamp(32px,4.2vw,52px); }
.dp__layout{ display:grid; grid-template-columns:300px 1fr; gap:1px; background:var(--ink-3);
  border:1px solid var(--ink-3); }
.dp__menu{ background:var(--ink); display:flex; flex-direction:column; }
.dp__btn{ appearance:none; background:none; border:0; border-bottom:1px solid var(--ink-3);
  text-align:left; padding:19px 22px; cursor:pointer; color:#8FA5BA; font-family:var(--f-body);
  display:block; width:100%; transition:background .18s ease,color .18s ease; position:relative; }
.dp__btn:last-child{ border-bottom:0; }
.dp__btn::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--aqua); transform:scaleY(0); transform-origin:top; transition:transform .22s ease; }
.dp__btn:hover{ color:var(--bone); background:var(--ink-2); }
.dp__btn[aria-selected="true"]{ background:var(--ink-2); color:var(--white); }
.dp__btn[aria-selected="true"]::before{ transform:scaleY(1); }
.dp__btn-k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:#556F88; display:block; margin-bottom:5px; }
.dp__btn[aria-selected="true"] .dp__btn-k{ color:var(--aqua); }
.dp__btn-t{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 600; font-size:18px; }
.dp__panel{ background:var(--ink-2); padding:clamp(26px,3.4vw,42px); }
.dp__panel-top{ display:grid; grid-template-columns:1fr auto; gap:26px; align-items:start;
  padding-bottom:24px; border-bottom:1px solid var(--ink-3); }
.dp__ttl{ font-family:var(--f-display); font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(24px,2.8vw,34px); margin:0 0 10px; letter-spacing:-.018em; line-height:1.12; }
.dp__desc{ color:#9AAEC2; margin:0; font-size:16.5px; max-width:52ch; }
.dp__badge{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aqua); border:1px solid #24506B; padding:7px 12px; white-space:nowrap; }
.dp__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.2vw,44px); padding-top:26px; }
.dp__sub{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#7E93A8; margin:0 0 16px; display:flex; align-items:center; flex-wrap:wrap; }
.stress{ display:flex; flex-direction:column; gap:13px; }
.stress__row{ display:grid; grid-template-columns:88px 1fr 52px; gap:12px; align-items:center; }
.stress__k{ font-family:var(--f-mono); font-size:11.5px; color:#A8BCD0; }
.stress__bar{ height:5px; background:#1D3143; position:relative; overflow:hidden; }
.stress__fill{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--blue),var(--aqua));
  width:0; transition:width .55s cubic-bezier(.22,.9,.3,1); }
.stress__v{ font-family:var(--f-mono); font-size:10.5px; color:#5E7891; text-align:right; }
.spec{ list-style:none; margin:0; padding:0; }
.spec li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px dashed #1D3143; font-family:var(--f-mono); font-size:12px; }
.spec li:last-child{ border-bottom:0; }
.spec b{ color:#7E93A8; font-weight:400; letter-spacing:.05em; text-transform:uppercase; font-size:10.5px; }
.spec span{ color:var(--bone); text-align:right; }
.dp__out{ margin-top:26px; padding-top:22px; border-top:1px solid var(--ink-3);
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.dp__out-k{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#5E7891; }
.dp__out-v{ font-family:var(--f-display); font-variation-settings:'wdth' 104,'wght' 600;
  font-size:clamp(16px,1.7vw,20px); color:var(--aqua); letter-spacing:-.008em; }

/* ============================================================
   CHANGE 7 — PRODUCTS
   ============================================================ */
.prod__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bone-2);
  border:1px solid var(--bone-2); }
.prod{ background:var(--white); display:flex; flex-direction:column; }
.prod__fig{ aspect-ratio:4/3; background:var(--white); border-bottom:1px solid var(--bone-2); overflow:hidden; }
.prod__fig img{ width:100%; height:100%; object-fit:contain; padding:16px; }
.prod__b{ padding:22px clamp(20px,2.2vw,26px) clamp(24px,2.5vw,28px); }
.prod__t{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 700;
  font-size:21px; margin:0 0 10px; letter-spacing:-.012em; line-height:1.2; }
.prod__d{ color:var(--slate); font-size:15px; margin:0 0 14px; line-height:1.62; }
.prod__m{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); margin:0; }

/* ============================================================
   CHANGE 12 — APPLICATION EXPERIENCE
   ============================================================ */
.app__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-3);
  border:1px solid var(--ink-3); }
.app{ background:var(--ink-2); padding:26px 24px 28px; }
.app__n{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--aqua); }
.app__t{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 600;
  font-size:20px; color:var(--white); margin:11px 0 10px; letter-spacing:-.012em; }
.app__d{ color:#8FA5BA; font-size:14.5px; margin:0; line-height:1.6; }

/* ============================================================
   DIFFERENCE / RFQ / FOOTER
   ============================================================ */
.diff__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,52px); }
.diff__d{ color:var(--slate); font-size:16px; margin:0; }
.diff__ic{ width:38px; height:38px; color:var(--aqua); }

.rfq{ background:var(--blue); color:var(--white); position:relative; overflow:hidden; }
.rfq__glow{ position:absolute; width:760px; height:760px; right:-240px; top:-300px;
  background:radial-gradient(circle,rgba(42,212,255,.3) 0%,transparent 66%); }
.rfq__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto;
  gap:clamp(28px,4vw,60px); align-items:center; }
.rfq h2{ font-family:var(--f-display); font-variation-settings:'wdth' 114,'wght' 700;
  font-size:clamp(27px,3.5vw,44px); margin:0 0 14px; letter-spacing:-.022em; line-height:1.08; max-width:19ch; }
.rfq p{ margin:0; color:#C6DDFF; max-width:54ch; font-size:17px; }
.rfq__btns{ display:flex; flex-direction:column; gap:12px; }

.ft{ background:var(--ink); color:#8FA5BA; }
/* v1.13 — footer reduced to two columns; the link list runs in two
   sub-columns so it sits level with the address block instead of
   running tall beside it. */
.ft__top{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(26px,3.4vw,56px);
  padding-block:clamp(48px,6vw,76px); }
.ft__l--split{ column-count:2; column-gap:clamp(24px,2.6vw,40px); }
.ft__l--split li{ break-inside:avoid; }
@media (max-width:640px){ .ft__l--split{ column-count:1; } }
.ft__logo{ height:30px; width:auto; margin-bottom:20px; }
.ft__ad{ font-style:normal; font-size:14.5px; line-height:1.8; }
.ft__ad a{ color:var(--aqua); text-decoration:none; }
.ft__ad a:hover{ text-decoration:underline; }
.ft__h{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); margin:0 0 16px; }
.ft__l{ list-style:none; margin:0; padding:0; }
.ft__l li{ margin-bottom:10px; }
.ft__l a{ text-decoration:none; font-size:14.5px; transition:color .16s ease; }
.ft__l a:hover{ color:var(--aqua); }
.ft__bot{ border-top:1px solid var(--ink-3); padding-block:22px; display:flex;
  justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--f-mono);
  font-size:11px; color:#556F88; }
.ft__bot a{ color:#556F88; text-decoration:none; margin-left:20px; }
.ft__bot a:hover{ color:var(--aqua); }

.rv{ opacity:0; transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1); }
.rv.on{ opacity:1; transform:none; }

/* ============================================================
   v1.2 — PROCESSES / CAREERS / CERT ARTWORK / DIAGRAM CARD
   ============================================================ */
/* v1.7 — group headings enlarged and given more presence */
.proc__grouphd{ font-family:var(--f-display); font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(19px,1.9vw,24px); letter-spacing:-.008em; text-transform:none;
  color:var(--ink); margin:clamp(30px,3.4vw,44px) 0 18px; padding-bottom:12px;
  border-bottom:2px solid var(--blue); display:flex; align-items:baseline; gap:13px; }
.proc__grouphd::after{ content:""; flex:1; height:1px; background:var(--bone-2); }
.proc__grid:first-of-type + .proc__grouphd{ margin-top:0; }
.proc__grouphd:first-of-type{ margin-top:0; }
/* v1.7 — 6-track grid so rows of fewer than three centre cleanly.
   Card borders (not a grey gap-grid) so unused tracks show nothing. */
.proc__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  margin-bottom:clamp(34px,4.2vw,52px); }
.proc{ background:var(--white); display:flex; flex-direction:column;
  grid-column:span 2; border:1px solid var(--bone-2); margin:0 -1px -1px 0; }
.proc__grid--5 .proc:nth-child(4){ grid-column:2 / span 2; }
.proc__grid--4 .proc:nth-child(4){ grid-column:3 / span 2; }
.proc__grid--2 .proc:nth-child(1){ grid-column:2 / span 2; }
.proc__grid--1 .proc:nth-child(1){ grid-column:3 / span 2; }
.proc__fig{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--bone-2);
  background:var(--ink-2); }
.proc__fig img{ width:100%; height:100%; object-fit:cover; }
.proc__fig--todo{ display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#F4F0E4 0 10px,#EFE9D8 10px 20px);
  border-bottom:1px solid rgba(224,162,43,.5); }
.proc__fig--todo span{ font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#9A7420; text-align:center;
  line-height:1.7; border:1px dashed rgba(224,162,43,.75); padding:9px 13px; }
.proc__fig--duo{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--bone-2); }
.proc__fig--duo img{ width:100%; height:100%; object-fit:cover; }
.proc__b{ padding:20px clamp(18px,2vw,24px) clamp(22px,2.3vw,26px); }
.proc__t{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 700;
  font-size:18.5px; margin:0 0 9px; letter-spacing:-.012em; line-height:1.22; }
#processes .eyebrow{ font-size:16px; margin-bottom:26px; }
#processes .eyebrow::before{ width:36px; height:3px; }
.proc__d{ color:var(--slate); font-size:14.5px; margin:0; line-height:1.62; }

.shotlist{ border:1px solid rgba(224,162,43,.55); background:rgba(224,162,43,.1);
  padding:20px 24px; }
.shotlist__h{ font-family:var(--f-body); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#8A6413; margin:0 0 8px; }
.shotlist__b{ margin:0; font-size:14.5px; color:#6B5A33; max-width:74ch; }

.car__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(34px,4.6vw,68px);
  align-items:start; }
.jobs{ border:1px solid var(--ink-3); }
.jobs__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; background:#0C1826; padding:16px 20px; border-bottom:1px solid var(--ink-3);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#A9BECF; }
.jobs__l{ list-style:none; margin:0; padding:0; }
.jobs__l li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--ink-3); background:var(--ink-2); }
.jobs__t{ font-size:15.5px; color:var(--bone); }
.jobs__d{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#6C8199; white-space:nowrap; }
.jobs__ft{ margin:0; padding:15px 20px; background:#0C1826; font-family:var(--f-mono);
  font-size:11px; color:#6C8199; line-height:1.65; }

/* ============================================================
   SLA — v1.3
   ============================================================ */
/* v1.9 — SLA is the second movement of Careers, not its own section.
   Divider dropped, gap halved, column ratio matched to .car__grid above. */
.sla{ margin-top:clamp(22px,2.6vw,34px); }
.sla__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(34px,4.6vw,68px);
  align-items:start; }
.sla__right{ display:flex; flex-direction:column; }
/* logo rises into the open space beside Send a Resume while staying
   horizontally adjacent to the SLA copy on its left */
.sla__logo{ width:66%; max-width:320px; min-width:190px; height:auto; display:block;
  margin:clamp(-186px,-16vw,-118px) auto 26px; }
.sla__lead{ font-family:var(--f-body); font-size:13px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:#7FA8D4; margin:0 0 12px; }
.sla__h{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 700;
  font-size:clamp(23px,2.4vw,30px); line-height:1.16; letter-spacing:-.018em;
  color:var(--white); margin:0 0 18px; }
@media (max-width:900px){
  .sla__logo{ margin-top:0; }
}
.sla__body p{ color:#9AAEC2; margin:0 0 16px; }
.sla__body p:last-child{ margin-bottom:0; }
.sla__fig{ background:var(--ink-2); border:1px solid var(--ink-3); padding:clamp(14px,2vw,22px); }
.sla__fig svg{ width:100%; height:auto; display:block; }
.sla__fig img{ width:100%; height:auto; display:block; background:var(--white); }

/* ============================================================
   COMMUNITY SERVICE — v1.3
   ============================================================ */
/* real certification artwork in the badge slots */
.cert__slot--art{ border:0; padding:0; background:transparent; }
.cert__slot--art img{ width:100%; height:100%; object-fit:contain; }

/* ============================================================
   GOVERNMENT & DEFENSE — v1.12
   Becomes its own page at the split.
   ============================================================ */
.gov__cred{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(34px,4vw,48px); padding:0;
  list-style:none; }
.gov__cred li{ font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--aqua); border:1px solid var(--ink-4);
  background:#0C1826; padding:9px 14px; }
.gov__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-3);
  border:1px solid var(--ink-3); margin-bottom:clamp(34px,4vw,48px); }
.gov__c{ background:var(--ink-2); padding:24px 22px 26px; }
.gov__c h3{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 700;
  font-size:17.5px; color:var(--white); margin:0 0 10px; letter-spacing:-.01em; line-height:1.25; }
.gov__c p{ color:#9AAEC2; font-size:14.5px; line-height:1.62; margin:0; }
.gov__c-n{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--aqua);
  display:block; margin-bottom:12px; }
.gov__cols{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,3.6vw,52px);
  align-items:start; }
.gov__reg{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-3); }
.gov__reg li{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--ink-3); }
.gov__reg b{ font-family:var(--f-mono); font-size:10.5px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:#7E93A8; flex:none; }
.gov__reg span{ font-size:15px; color:var(--bone); text-align:right; }
.gov__reg .todo{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--flag); border:1px dashed rgba(224,162,43,.6);
  padding:3px 8px; white-space:nowrap; }
.gov__ver{ border:1px solid var(--ink-3); background:#0C1826; padding:clamp(22px,2.6vw,30px); }
.gov__ver h3{ font-family:var(--f-display); font-variation-settings:'wdth' 106,'wght' 700;
  font-size:19px; color:var(--white); margin:0 0 12px; letter-spacing:-.012em; }
.gov__ver p{ color:#9AAEC2; font-size:14.5px; line-height:1.66; margin:0 0 18px; }
.gov__ver .btn{ margin-bottom:0; }
@media (max-width:1080px){ .gov__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .gov__grid{ grid-template-columns:1fr; }
  .gov__cols{ grid-template-columns:1fr; }
}

/* diagram-style product card */
.prod__fig--dia{ background:var(--ink); display:flex; align-items:center; justify-content:center; }
.prod__fig--dia svg{ width:100%; height:100%; padding:14px; }

@media (max-width:1080px){
  .proc__grid{ grid-template-columns:repeat(4,1fr); }
  .proc__grid--5 .proc:nth-child(4),
  .proc__grid--4 .proc:nth-child(4),
  .proc__grid--2 .proc:nth-child(1),
  .proc__grid--1 .proc:nth-child(1){ grid-column:span 2; }
  .proc__grid--5 .proc:nth-child(5){ grid-column:2 / span 2; }
}
@media (max-width:900px){
  .proc__grid{ grid-template-columns:repeat(2,1fr); }
  .proc__grid--5 .proc:nth-child(5){ grid-column:span 1; }
  .proc__grid{ grid-template-columns:repeat(2,1fr); }
  .proc{ grid-column:span 1 !important; }
  .car__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cap__grid,.prod__grid,.app__grid,.el__grid{ grid-template-columns:repeat(2,1fr); }
  .certs__grid{ grid-template-columns:repeat(2,1fr); }
  .dp__layout{ grid-template-columns:250px 1fr; }
  /* v1.16 — tighten the flanking header cells before the burger takes over,
     so the nav and the USA mark stop competing for the same pixels. */
  .hdr__in{ --hdr-side:clamp(96px,12vw,150px); }
  .hdr__logo{ padding-right:18px; }
  .hdr__usa{ padding:0 8px; }
  .hdr__usa img{ max-width:124px; }
  .hdr.small .hdr__usa img{ max-width:106px; }
  }
@media (max-width:900px){
  .hdr__nav,.hdr__usa{ display:none; } .hdr__burger{ display:block; }
  .hdr__logo{ border-right:0; flex:none; }
  .hdr__util-r{ display:none; }
  /* condense the utility strip: keep the phone number, drop the rest */
  .hdr__util-in{ gap:0; justify-content:center; }
  .hdr__util-in > span:not(.hdr__util-phone){ display:none; }
  /* v2.1 — align-items:center added. The touch-target padding on the
     <b> below stretched it full height inside this inline-flex row, so
     the number sat lower than "Delavan, WI" until the header went
     compact and hid the bar entirely. */
  .hdr__util-phone{ display:inline-flex !important; gap:8px; letter-spacing:.1em;
    align-items:center; }
  .hdr__nav.open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--ink); border-bottom:1px solid var(--ink-3); padding:6px var(--gut) 18px; z-index:5; }
  .hdr__nav.open a{ padding:14px 0; border:0; border-bottom:1px solid var(--ink-3); }
  .hdr__nav.open a:first-child{ border-left:0; }
  /* v1.11 — Capabilities nests inside the burger panel */
  .hdr__nav.open .nav__grp{ display:flex; flex-wrap:wrap; align-items:center;
    border-bottom:1px solid var(--ink-3); }
  .hdr__nav.open .nav__grp > a{ flex:1; border-bottom:0 !important; padding-right:0; }
  .hdr__nav.open .nav__cvt{ border-right:0; padding:14px 4px 14px 16px; }
  .hdr__nav.open .nav__menu{ position:static; flex-basis:100%; min-width:0; border:0;
    border-top:1px solid var(--ink-3); box-shadow:none; background:var(--ink-2);
    padding:2px 0 6px; }
  .hdr__nav.open .nav__menu a{ padding:12px 0 12px 16px; border-bottom:0; font-size:14.5px; }
  .hdr__nav.open .nav__menu .nav__sep{ display:none; }
  .pos__grid,.val__grid,.sw__grid{ grid-template-columns:1fr; }
  .cap__grid,.prod__grid,.app__grid,.el__grid,.diff__grid{ grid-template-columns:1fr; }
  .sla__grid{ grid-template-columns:1fr; }
  .sec__head{ grid-template-columns:1fr; align-items:start; }
  .dp__layout{ grid-template-columns:1fr; }
  .dp__menu{ flex-direction:row; overflow-x:auto; border-bottom:1px solid var(--ink-3); }
  .dp__btn{ border-bottom:0; border-right:1px solid var(--ink-3); min-width:190px; }
  .dp__btn::before{ width:auto; height:3px; left:0; right:0; top:auto; bottom:0;
    transform:scaleX(0); transform-origin:left; }
  .dp__btn[aria-selected="true"]::before{ transform:scaleX(1); }
  .dp__cols,.rfq__in,.el__fig{ grid-template-columns:1fr; }
  .rfq__btns{ flex-direction:row; flex-wrap:wrap; }
  .ft__top{ grid-template-columns:1fr; }
  .tele{ grid-template-columns:1fr 1fr; }
  .tele__cell{ padding:18px 0; border-bottom:1px solid var(--ink-3); }
  .tele__cell:nth-child(2n){ border-right:0; }
  .tele__cell:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .certs__grid{ grid-template-columns:1fr; }
  .qual__sub{ grid-template-columns:1fr; }
  .split,.val__figs{ grid-template-columns:1fr; }
  .ft__top{ grid-template-columns:1fr; }
  .dp__panel-top{ grid-template-columns:1fr; }
  .stress__row{ grid-template-columns:76px 1fr 46px; }
  .stack__row{ grid-template-columns:80px 1fr; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; }
  html{ scroll-behavior:auto; } .rv{ opacity:1; transform:none; }
}

/* ============================================================
   v1.15 — certification box, USA mark, hero mark, pending chip
   ============================================================ */
/* v1.17 — the USA mark and the "Registered & Certified" label are both gone,
   so the box repacks as three even entries rather than leaving their slots. */
.certbox{ border:1px solid var(--ink-3); background:#0C1826; margin:26px 0 34px; }
.certbox__row{ display:grid; grid-template-columns:1fr;
  align-items:stretch; padding:20px 22px; }

.ctxt__set{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* v1.18 — justify-content only handled the vertical axis; the labels now
   centre horizontally too. */
.ctxt{ display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; border:1px solid var(--ink-3); background:#0A1420;
  padding:14px 16px; text-decoration:none;
  transition:border-color .2s ease, background .2s ease; }
a.ctxt:hover, a.ctxt:focus-visible{ border-color:var(--aqua); background:#102133; outline:none; }
.ctxt__t{ display:block; font-family:var(--f-display); font-variation-settings:'wdth' 104,'wght' 600;
  font-size:15.5px; color:var(--bone); letter-spacing:-.005em; line-height:1.25; }
a.ctxt:hover .ctxt__t, a.ctxt:focus-visible .ctxt__t{ color:var(--white); }

/* v1.17 — the hero mark is gone; the USA mark now lives only in the header
   bar. The hero runs as one full-width column, with the headline and subhead
   still held to 19ch / 58ch so the measure does not stretch. */
.hero__in{ display:block; }

/* IPC trainer note in the quality panel */
/* v1.16 — the note now matches the 24px side padding of the checklist above
   it, instead of running flush to the white panel edge. */
.qual__note{ margin:18px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink-2);
  border-top:1px solid var(--bone-2); padding:16px 24px 22px; }

@media (max-width:1080px){
  .ctxt__set{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:620px){
  .ctxt__set{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE REFINEMENT PASS — V2.0
   Audit of the split build across 1024 / 820 / 768 / 600 /
   430 / 390 / 360 / 320px. The burger nav, dropdown nesting
   and most grid collapses were already in place from earlier
   versions; this pass fixes what that audit actually found
   rather than rebuilding what already worked.
   ============================================================ */

/* --- 1. Process grid: was still 2-up at phone width, which
   overflowed 320px by 25px because the cards cannot compress
   below their content. Single column below 480px. --- */
@media (max-width:480px){
  .proc__grid{ grid-template-columns:1fr !important; }
  .proc__fig--duo{ grid-template-columns:1fr 1fr; }
}

/* --- 2. Touch targets. The burger measured 38px and every
   footer link 16px tall — both under the 44px minimum for
   reliable tapping. Padding is used rather than fixed heights
   so the text stays vertically centred and nothing reflows on
   desktop. --- */
@media (max-width:900px){
  .hdr__burger{ padding:14px 16px; min-height:44px; }
  .ft__l li{ margin-bottom:2px; }
  .ft__l a{ display:inline-block; padding:11px 0; min-height:44px;
    box-sizing:border-box; }
  .ft__ad a{ display:inline-block; padding:9px 0; min-height:40px;
    box-sizing:border-box; }
  /* inline mailto/tel links inside body copy (e.g. the careers
     contact line) get the same treatment */
  .car__grid p a[href^="mailto:"], .car__grid p a[href^="tel:"]{
    display:inline-block; padding:10px 0; min-height:40px;
    box-sizing:border-box; }
  .hdr__util-phone b{ display:inline-block; padding:6px 0; }
}

/* --- 3. Markets tab strip scrolls horizontally on phone
   (950px of tabs in a ~350px window) but gave no signal that
   more tabs existed off-screen. A right-edge fade cues the
   scroll; momentum scrolling and snap make it feel deliberate
   rather than accidental. --- */
@media (max-width:900px){
  .dp__menu{ position:relative; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scrollbar-width:none; }
  .dp__menu::-webkit-scrollbar{ display:none; }
  .dp__btn{ scroll-snap-align:start; }
  .dp__layout{ position:relative; }
  .dp__layout::after{ content:''; position:absolute; top:0; right:0;
    width:34px; height:var(--dp-menu-h,96px); pointer-events:none;
    background:linear-gradient(to right, rgba(16,30,45,0), var(--ink-2));
    z-index:2; }
}

/* --- 4. Small-text floor. The utility bar and footer headings
   rendered at 10–11px on phone, below comfortable reading size.
   Raised only at phone width; desktop sizing is untouched. --- */
@media (max-width:600px){
  .hdr__util-phone, .hdr__util-phone b{ font-size:12px; }
  .ft__h{ font-size:11.5px; }
  .gov__c-n{ font-size:11px; }
  .proc__d{ font-size:14px; }
}

/* --- 5. Landscape phone: the sticky header ate too much of a
   short viewport, so the compact state is forced early and the
   band padding tightened. --- */
@media (max-height:500px) and (orientation:landscape){
  .band{ padding-block:clamp(40px,6vw,64px); }
  .hdr__util{ display:none; }
}


/* ============================================================
   V2.1 ADDITIONS
   ============================================================ */

/* --- Products: a second product photo alongside the oil pump.
   The pair shares the existing 4/3 figure slot rather than
   stretching the card, so the grid row heights stay level. --- */
.prod__fig--pair{ display:grid; grid-template-columns:1fr 1fr; }
.prod__fig--pair img{ width:100%; height:100%; object-fit:contain; padding:12px; }
.prod__fig--pair img + img{ border-left:1px solid var(--bone-2); }

/* --- "dumb places" is now a link on both the home hero and the
   contact page. The hero rule already carries the aqua colour and
   the underline bar; these rules stop the anchor picking up default
   link styling and give the contact-page instance the same
   treatment on its dark ground. --- */
.hero h1 a.dumb{ text-decoration:none; }
.rfq h2 a.dumb{ color:var(--aqua); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:2px;
  transition:color .16s ease; }
.rfq h2 a.dumb:hover, .rfq h2 a.dumb:focus-visible{ color:var(--white); }
.hero h1 a.dumb:focus-visible, .rfq h2 a.dumb:focus-visible{
  outline:2px solid var(--aqua); outline-offset:3px; }

/* --- Quality panel: link out to the certificate page. --- */
.qual__cert{ margin:0; padding:0 24px 22px; }
.qual__cert a{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#00337F; text-decoration:none;
  border-bottom:1px solid rgba(0,51,127,.35); padding-bottom:2px;
  transition:color .16s ease, border-color .16s ease; }
.qual__cert a:hover, .qual__cert a:focus-visible{ color:var(--ink);
  border-color:var(--ink); }

/* --- Certificate page. The certificate is presented as a document
   sheet on a bone ground, matching the quality-policy treatment,
   so it reads as a controlled record rather than decoration. --- */
.cert__wrap{ max-width:900px; margin:0 auto; }
.cert__sheet{ background:var(--white); border:1px solid var(--bone-2);
  box-shadow:0 18px 44px rgba(6,18,32,.13); padding:clamp(20px,3vw,34px);
  margin-top:clamp(26px,3.4vw,40px); }
.cert__sheet img{ display:block; width:100%; height:auto; }
.cert__meta{ display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:clamp(24px,3vw,34px); padding-top:20px;
  border-top:1px solid var(--bone-2); }
.cert__meta div{ min-width:180px; }
.cert__meta dt{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate); margin:0 0 4px; }
.cert__meta dd{ margin:0; font-size:15px; color:var(--ink); font-weight:500; }
@media (max-width:560px){
  .cert__meta{ gap:16px; }
  .cert__meta div{ min-width:100%; }
}


/* ============================================================
   V2.2 ADDITIONS
   ============================================================ */

/* --- Capability cards: label and "Learn more" share one top row.
   Every card gets the wrapper, including the four with no
   destination, so all nine labels sit on the same baseline and
   the grid rows stay level. --- */
/* min-height matches the button's own 31px so the four cards without
   one keep the same header height; centring rather than baseline
   alignment stops the taller button dragging the label down 5px. */
.cap__hd{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:10px; min-height:31px; }
.cap__hd .cap__n{ margin-bottom:0; }
.cap__more{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:#00337F; border:1px solid rgba(0,51,127,.28);
  padding:6px 10px; background:var(--white);
  transition:color .16s ease, border-color .16s ease, background .16s ease; }
.cap__more:hover, .cap__more:focus-visible{ color:var(--white);
  background:var(--blue); border-color:var(--blue); outline:none; }
.cap__more:hover .btn__ar{ transform:translateX(3px); }

/* --- Quality panel: the certificate link is now a bordered
   button rather than an underlined text link. --- */
.btn--cert{ background:var(--white); color:#00337F; border-color:rgba(0,51,127,.32);
  font-size:12px; padding:11px 18px; }
.btn--cert:hover, .btn--cert:focus-visible{ background:var(--blue);
  color:var(--white); border-color:var(--blue); outline:none; }

/* --- Phone numbers swapped to plain text on non-touch devices
   inherit the surrounding colour instead of the link colour. --- */
.tel-plain{ color:inherit; }
.ft__ad .tel-plain{ color:var(--bone-2); }

/* --- Touch targets: the "Learn more" buttons need the same 44px
   minimum as the rest of the nav and footer at phone width. --- */
@media (max-width:900px){
  .cap__more{ padding:12px 14px; min-height:44px; box-sizing:border-box; }
  /* header row grows with the enlarged button so cards without one
     keep the same header height down to the 480px stack point */
  .cap__hd{ min-height:44px; }
}

/* --- At phone width the card header stacks so a long category
   label ("CONTRACT MANUFACTURING") does not squeeze the button
   into a two-line wrap. --- */
@media (max-width:480px){
  .cap__hd{ flex-direction:column; align-items:flex-start; gap:12px; }
}
