/* ════════════════════════════════════════════════════════════════
   RIGID CONCEPTS — "MEASURED & MOLTEN"
   Precision-instrument design system · hand-written, zero-build
   ─────────────────────────────────────────────────────────────────
   Two layers, one voice:
   · Cold titanium dark — the shop floor, cinematic, real video
   · Engineering-document paper — title blocks, OP numbers, datums
   Display: Archivo (expanded black, echoes the logo skeleton)
   Technical: IBM Plex Mono (every number, label, and callout)
   Accent: molten amber — the color of a hot chip leaving the cut
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Tokens ─────────────────────────── */
:root {
  /* Cold titanium darks (cool, not warm — machined, not cozy) */
  --bg0:      #07080A;
  --bg1:      #0B0D10;
  --bg2:      #101318;
  --surface:  #141820;
  --surface2: #1A1F29;
  --line:     #222834;
  --line2:    #303949;
  --hairline: rgba(159, 178, 200, 0.14);

  --ink:    #EEF2F6;
  --ink2:   #C8CFD8;
  --muted:  #919BA8;
  --muted2: #6F7987;

  /* Molten amber — action, heat, the cut */
  --amber:      #FFAE00;
  --amber2:     #FFC93C;
  --ember:      #FF7A1A;
  --amber-soft: rgba(255, 174, 0, 0.12);
  --heat: linear-gradient(97deg, #FFD24A 0%, #FFAE00 48%, #FF7A1A 100%);

  /* Steel cyan — measurement hairlines only. Never a fill. */
  --steel:      #9BD8E8;
  --steel-dim:  rgba(155, 216, 232, 0.32);

  /* Drawing-sheet paper (light sections) */
  --paper:       #EDEAE0;
  --paper2:      #E5E1D4;
  --paper-ink:   #14161A;
  --paper-mut:   #565B66;
  --paper-line:  #C6C0AF;
  --paper-line2: #D8D3C4;

  --maxw: 1320px;
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);

  /* Machined corners: square-ish radii + chamfers, never pills */
  --r:  4px;
  --r2: 8px;
  --chamfer: 14px;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.83, 0, 0.17, 1);
  --dur: 0.55s;

  --font-d: 'Archivo', system-ui, sans-serif;
  --font-m: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --nav-h: 132px;   /* tall resting header band so the logo reads large; condenses on scroll */
}

/* ─────────────────────────── Reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Per standing client decision (2026-06-01): animations play for ALL visitors.
   prefers-reduced-motion is intentionally not honored on this site. */

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-d);
  font-weight: 410;
  font-size: 1.0rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--amber); color: #140D00; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: fixed; left: 1rem; top: -120px; z-index: 400;
  background: var(--amber); color: #140D00; padding: 0.65rem 1.1rem; border-radius: var(--r);
  font-weight: 700; font-family: var(--font-m); font-size: 0.85rem; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Film grain + vignette atmosphere */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Scroll progress — a thin cut line across the very top */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 320; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0%; background: var(--heat); box-shadow: 0 0 12px rgba(255, 174, 0, 0.55); }

/* ───────────────────── Custom reticle cursor ───────────────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  body.has-reticle, body.has-reticle a, body.has-reticle button,
  body.has-reticle [data-cursor], body.has-reticle label, body.has-reticle select { cursor: none; }
  body.has-reticle input, body.has-reticle textarea { cursor: text; }
}
.reticle {
  position: fixed; left: 0; top: 0; z-index: 360; pointer-events: none;
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  opacity: 0; transition: opacity 0.25s;
  will-change: transform;
}
.reticle.is-on { opacity: 1; }
.reticle::before, .reticle::after {
  content: ""; position: absolute; background: rgba(238, 242, 246, 0.92);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.reticle::before { left: 50%; top: 4px; bottom: 4px; width: 1px; transform: translateX(-50%); }
.reticle::after  { top: 50%; left: 4px; right: 4px; height: 1px; transform: translateY(-50%); }
.reticle__dot {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  transform: translate(-50%, -50%); background: var(--amber); border-radius: 50%;
  transition: transform 0.3s var(--ease);
}
.reticle__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(238, 242, 246, 0.0);
  transform: scale(0.6);
  transition: transform 0.35s var(--ease), border-color 0.35s;
}
.reticle.is-hot::before, .reticle.is-hot::after { background: var(--amber); transform: translateX(-50%) scaleY(0.45); }
.reticle.is-hot::after { transform: translateY(-50%) scaleX(0.45); }
.reticle.is-hot .reticle__ring { transform: scale(1); border-color: rgba(255, 174, 0, 0.85); }
.reticle.is-hot .reticle__dot { transform: translate(-50%, -50%) scale(1.6); }
.reticle.is-down .reticle__ring { transform: scale(0.82); }
/* On light "paper" sections the near-white crosshair vanishes — flip it to a
   dark ink line and the molten-amber dot to the paper accent so the reticle
   stays legible on both the dark shop-floor and the light drawing-sheet. */
.reticle.on-paper::before,
.reticle.on-paper::after { background: rgba(20, 22, 26, 0.92); }
.reticle.on-paper .reticle__dot { background: #B4540A; }
.reticle.on-paper.is-hot::before,
.reticle.on-paper.is-hot::after { background: #B4540A; }
.reticle.on-paper.is-hot .reticle__ring { border-color: rgba(180, 84, 10, 0.9); }

/* ───────────────────────── Boot loader ───────────────────────── */
.boot {
  position: fixed; inset: 0; z-index: 500; background: var(--bg0);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.7s var(--ease-io), visibility 0s 0.7s;
}
.boot.is-done { transform: translateY(-101%); visibility: hidden; }
.boot__inner { text-align: center; }
.boot__logo { height: 74px; width: auto; margin-inline: auto; filter: invert(1); opacity: 0.95; }
.boot__dro {
  margin-top: 1.4rem; font-family: var(--font-m); font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--muted); display: flex; gap: 1.6rem; justify-content: center;
}
.boot__dro b { color: var(--amber); font-weight: 500; }
.boot__bar { margin: 1.3rem auto 0; width: 210px; height: 1px; background: var(--line2); position: relative; overflow: hidden; }
.boot__bar span { position: absolute; inset: 0; background: var(--heat); transform-origin: left; transform: scaleX(0); }
.boot.is-armed .boot__bar span { transition: transform 1.05s var(--ease-io); transform: scaleX(1); }

/* ─────────────────────────── Buttons ───────────────────────────
   Chamfered like a deburred edge — one corner cut at 45°.        */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-m); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  font-size: 0.82rem; line-height: 1; padding: 1.02rem 1.65rem;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  white-space: nowrap; border: 0;
}
.btn svg { transition: transform 0.3s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(4px); }

.btn--hot { background: var(--amber); color: #181000; }
.btn--hot::after, .btn--ghost::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 64%);
  transform: translateX(-130%); transition: transform 0.7s var(--ease);
}
.btn--hot:hover { background: var(--amber2); box-shadow: 0 10px 40px -10px rgba(255, 174, 0, 0.55); }
.btn--hot:hover::after, .btn--ghost:hover::after { transform: translateX(130%); }

/* Secondary action — a solid "machined steel" button, NOT a faint outline.
   Reads clearly against the dark shop-floor sections and stays distinct from
   the molten-amber primary so the hierarchy is obvious. */
.btn--ghost {
  background: var(--ink2); color: var(--bg0);
  box-shadow: inset 0 0 0 1px rgba(7, 8, 10, 0.18);
}
.btn--ghost:hover { background: #fff; color: var(--bg0); box-shadow: 0 10px 30px -12px rgba(238, 242, 246, 0.5); }
/* On light drawing-sheet sections, invert to a dark fill so it stays just as solid. */
.paper .btn--ghost { background: var(--paper-ink); color: var(--paper); box-shadow: none; }
.paper .btn--ghost:hover { background: #000; color: var(--paper); box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.5); }

.btn--paper { background: var(--paper-ink); color: var(--paper); }
.btn--paper:hover { background: #000; box-shadow: 0 10px 34px -12px rgba(20, 22, 26, 0.6); }

.btn--lg { padding: 1.18rem 2.1rem; font-size: 0.88rem; }
.btn--sm { padding: 0.78rem 1.15rem; font-size: 0.74rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--amber2); outline-offset: 3px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn.is-loading .btn__label { opacity: 0.6; }

/* Text-arrow link */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-m); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber2); position: relative; padding-bottom: 4px;
}
.arrow-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--amber); transform: scaleX(0.32); transform-origin: left; transition: transform 0.35s var(--ease); }
.arrow-link:hover::after { transform: scaleX(1); }
.arrow-link svg { transition: transform 0.3s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ───────────────────── Type & shared atoms ───────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; row-gap: 0.3rem;
  font-family: var(--font-m); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b, .eyebrow strong { color: var(--amber); font-weight: 500; }
.eyebrow span { white-space: nowrap; }
.eyebrow i { font-style: normal; color: var(--muted2); }
.eyebrow::before { content: "//"; color: var(--amber); letter-spacing: 0; }
.eyebrow--bare::before { content: none; }
/* Hero: swap the // marker for a live, pulsing gold status dot. */
.eyebrow--certs::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--amber); align-self: center; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 174, 0, 0.55); animation: eyebrowPulse 1.9s var(--ease) infinite;
}
@keyframes eyebrowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 174, 0, 0.55); }
  70%  { box-shadow: 0 0 0 0.55rem rgba(255, 174, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 174, 0, 0); }
}

.display {
  font-family: var(--font-d); font-weight: 860; font-stretch: 116%;
  text-transform: uppercase; letter-spacing: -0.012em; line-height: 0.96;
  margin: 0;
}
.section-title { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.gold { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.outline-ink {
  color: transparent; -webkit-text-stroke: 1.5px rgba(238, 242, 246, 0.34);
}

.section { padding-block: clamp(4.5rem, 9.5vw, 8.5rem); position: relative; }
.section-head { max-width: 880px; margin-bottom: clamp(2.6rem, 5.5vw, 4.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .section-title { margin-top: 1.05rem; }
.section-intro { margin-top: 1.15rem; color: var(--muted); font-size: 1.07rem; max-width: 62ch; }
.section-head--center .section-intro { margin-inline: auto; }

/* Dimension-line ornament — ├──────┤ with a label */
.dim {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--muted2); text-transform: uppercase; margin-top: 1.6rem;
}
.dim::before, .dim::after {
  content: ""; height: 1px; flex: 1; max-width: 130px;
  background: currentColor; opacity: 0.65;
  -webkit-mask: linear-gradient(#000, #000);
}
.dim::before { box-shadow: -1px -3px 0 -2px currentColor, -1px 3px 0 -2px currentColor; }

/* Corner ticks — crosshair register marks on framed blocks */
.ticks { position: relative; }
.ticks::before, .ticks::after,
.ticks > .tick-b::before, .ticks > .tick-b::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 0 solid var(--steel-dim); z-index: 3;
}
.ticks::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.ticks::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.ticks > .tick-b::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.ticks > .tick-b::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.tick-b { position: absolute; inset: 0; pointer-events: none; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].in { transform: none; }

/* ════════════════════════════ NAV ════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 330; /* above the mobile-menu overlay so the burger can close it */
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s;
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
  opacity: 0; transition: opacity 0.4s;
}
.nav.scrolled { background: rgba(7, 8, 10, 0.78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.nav.scrolled::after { opacity: 1; }
.nav__inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--nav-h); transition: height 0.4s var(--ease);
}
.nav.scrolled .nav__inner { height: 66px; }
.brand { display: inline-flex; align-items: center; flex: none; }
/* Logo lives IN the nav bar at a prominent resting size and condenses on scroll.
   A prior "splash" treatment scaled it ~5× over the hero; at desktop widths it
   overlapped the hero headline on the homepage and the breadcrumb/H1 on
   sub-pages, so it was retired for this overlap-proof in-bar logo. */
.brand__logo { height: 92px; width: auto; display: block; filter: invert(1); transition: height 0.4s var(--ease), opacity 0.3s; }
.brand:hover .brand__logo { opacity: 0.85; }
.nav.scrolled .brand__logo { height: 42px; }
@media (max-width: 900px) { .brand__logo { height: 64px; } .nav.scrolled .brand__logo { height: 40px; } }
@media (max-width: 560px) { .brand__logo { height: 52px; } .nav.scrolled .brand__logo { height: 34px; } }

/* HOMEPAGE TEST (body.is-home): logo ~30% larger than the standard in-bar size,
   with the header band grown to match so it still clears the hero. Setting
   --nav-h directly on body wins over the inherited :root value for the whole
   home subtree (nav band + hero padding both key off it). If approved, fold
   these numbers into the global .brand__logo / --nav-h rules above and drop the
   .is-home scope to roll it out site-wide. Scrolled/condensed size is unchanged. */
.is-home { --nav-h: 170px; }
.is-home .brand__logo { height: 120px; }
@media (max-width: 900px) { .is-home { --nav-h: 124px; } .is-home .brand__logo { height: 83px; } }
@media (max-width: 560px) { .is-home { --nav-h: 108px; } .is-home .brand__logo { height: 68px; } }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav__links > a, .has-menu > a {
  font-family: var(--font-d); font-size: 0.93rem; font-weight: 560;
  letter-spacing: 0.01em; text-transform: none; color: var(--ink2);
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0;
  position: relative; transition: color 0.25s;
}
.nav__links > a::after, .has-menu > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav__links > a:hover, .has-menu > a:hover, .nav__links > a.is-active, .has-menu.is-active > a { color: #fff; }
.nav__links > a:hover::after, .has-menu > a:hover::after, .nav__links > a.is-active::after, .has-menu.is-active > a::after { transform: scaleX(1); }
.has-menu { position: relative; }
.has-menu .caret { width: 11px; height: 11px; opacity: 0.6; transition: transform 0.3s; }
.has-menu:hover .caret { transform: rotate(180deg); }

/* Dropdown — machined panel */
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 10px);
  min-width: 560px; padding: 1.1rem; z-index: 290;
  background: rgba(11, 13, 16, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: var(--r2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
.dropdown::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
  background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dropdown a {
  display: flex; align-items: baseline; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--r);
  font-family: var(--font-d); font-size: 0.93rem; font-weight: 560; color: var(--ink2);
  transition: background 0.2s, color 0.2s, transform 0.25s var(--ease);
}
.dropdown a:hover { background: rgba(255, 174, 0, 0.08); color: #fff; transform: translateX(3px); }
.dropdown a .dd-no { font-family: var(--font-m); font-size: 0.68rem; color: var(--amber); letter-spacing: 0.06em; flex: none; width: 1.5rem; }
.dropdown a span.dd-sub { display: block; font-size: 0.74rem; color: var(--muted2); font-weight: 410; letter-spacing: 0.01em; margin-top: 1px; }
.dropdown__all { grid-column: 1 / -1; margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.dropdown__all a { color: var(--amber2); font-family: var(--font-m); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }

.nav__cta { display: flex; align-items: center; gap: 1rem; flex: none; }

.nav__burger {
  display: none; flex-direction: column; gap: 6px; padding: 10px; z-index: 320; position: relative;
}
.nav__burger span { width: 26px; height: 2px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s; }
.nav__burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu — full screen */
.mobile-menu {
  position: fixed; inset: 0; z-index: 310; background: rgba(7, 8, 10, 0.97);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  padding: calc(var(--nav-h) + 1rem) var(--pad) 3rem; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.3rem; max-width: 560px; margin-inline: auto; }
.m-link, .m-group__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--font-d); font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(1.6rem, 6.5vw, 2.2rem); letter-spacing: 0.01em; color: var(--ink);
  padding: 0.9rem 0; border-bottom: 1px solid var(--line); text-align: left;
}
.m-link:hover, .m-group__head:hover { color: var(--amber2); }
.m-group__head .caret { width: 22px; height: 22px; transition: transform 0.3s; }
.m-group.open .m-group__head .caret { transform: rotate(180deg); }
.m-group__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.m-group.open .m-group__panel { grid-template-rows: 1fr; }
.m-group__panel-inner { overflow: hidden; }
.m-group__panel a {
  display: flex; gap: 0.8rem; align-items: baseline; padding: 0.62rem 0.3rem;
  font-size: 1.02rem; color: var(--ink2); font-weight: 500;
}
.m-group__panel a:hover { color: var(--amber2); }
.m-group__panel a .dd-no { font-family: var(--font-m); font-size: 0.68rem; color: var(--amber); }
.mobile-menu .btn { margin-top: 1.6rem; }
.mobile-menu__meta { margin-top: 2rem; font-family: var(--font-m); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--muted2); text-transform: uppercase; line-height: 2; }

/* ════════════════════════════ HERO (home) ════════════════════════════ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0.68; pointer-events: none; }
.hero__photo { position: absolute; inset: 0; background: url("../assets/images/hero-poster.jpg") center / cover no-repeat; transform: scale(1.06); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, 0.62) 0%, rgba(7, 8, 10, 0.18) 38%, rgba(7, 8, 10, 0.62) 74%, rgba(7, 8, 10, 0.95) 100%),
    linear-gradient(100deg, rgba(7, 8, 10, 0.88) 0%, rgba(7, 8, 10, 0.42) 46%, rgba(7, 8, 10, 0.15) 100%);
}
.hero__frame { position: absolute; inset: clamp(0.9rem, 2.2vw, 1.8rem); z-index: 2; pointer-events: none; }
.hero__frame i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(238, 242, 246, 0.4); }
.hero__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hero__content { position: relative; z-index: 4; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: calc(var(--nav-h) + 4vh) var(--pad) 0; }
.hero .eyebrow { color: var(--ink2); }
.hero__title {
  font-family: var(--font-d); font-weight: 880; font-stretch: 122%;
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.014em;
  font-size: clamp(2.7rem, 7vw, 6.2rem); /* match .page-hero h1 (inner pages) */
  margin: 1.4rem 0 0;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-io); }
.hero.is-in .hero__title .line > span { transform: none; }
.hero__title .line:nth-child(2) > span { transition-delay: 0.12s; }
.hero__title .line:nth-child(3) > span { transition-delay: 0.24s; }
.hero__title em { font-style: normal; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title .ghost { color: transparent; -webkit-text-stroke: 2px rgba(238, 242, 246, 0.5); }

.hero__sub { margin-top: 1.6rem; max-width: 56ch; color: var(--ink2); font-size: clamp(1.02rem, 1.4vw, 1.18rem); font-weight: 430; }
.hero__sub strong { color: #fff; font-weight: 640; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }

/* DRO readout — lives right side of hero, types like a control */
.hero__dro {
  position: absolute; right: clamp(1.4rem, 3.4vw, 3rem); top: 50%; transform: translateY(-72%);
  z-index: 4; font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.16em;
  color: rgba(238, 242, 246, 0.66);
  border-right: 1px solid var(--steel-dim); padding-right: 1.1rem;
  /* Two columns: axis letters left, values right-aligned with tabular figures so
     every decimal point stacks regardless of sign or integer-digit count. */
  display: grid; grid-template-columns: auto auto;
  column-gap: 0.7rem; row-gap: 0.55rem; align-items: baseline; justify-items: end;
  font-variant-numeric: tabular-nums;
}
.hero__dro .lbl { grid-column: 1 / -1; color: rgba(238, 242, 246, 0.38); margin-bottom: 0.3rem; }
.hero__dro .ax { justify-self: start; color: rgba(238, 242, 246, 0.38); }
.hero__dro b { color: var(--steel); font-weight: 500; }

/* Stat bar pinned to hero bottom */
.hero__stats {
  position: relative; z-index: 4; margin-top: clamp(2.6rem, 6vh, 4.6rem);
  border-top: 1px solid rgba(238, 242, 246, 0.16);
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.25), rgba(7, 8, 10, 0.62));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__stats-inner {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero__stat { padding: 1.35rem 1.6rem 1.45rem 0; border-right: 1px solid rgba(238, 242, 246, 0.12); }
.hero__stat:last-child { border-right: 0; }
.hero__stat dt { font-family: var(--font-d); font-weight: 830; font-stretch: 114%; text-transform: uppercase; font-size: clamp(1.1rem, 1.7vw, 1.5rem); letter-spacing: 0.005em; color: #fff; }
.hero__stat dt .count, .hero__stat dt .unit { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__stat dd { margin: 0.3rem 0 0; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.hero__scroll {
  position: absolute; bottom: 7.6rem; left: 50%; transform: translateX(-50%); z-index: 5;
  display: none;
}
/* SCROLL cue sits in the corner frame instead */
.hero__cue {
  position: absolute; right: clamp(1.7rem, 3vw, 2.6rem); bottom: 8.4rem; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.34em; color: var(--muted);
  writing-mode: vertical-rl; text-transform: uppercase;
}
.hero__cue i { width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--amber)); overflow: hidden; position: relative; }
.hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--bg0); animation: cue-drip 2.2s var(--ease-io) infinite; }
@keyframes cue-drip { 0% { transform: translateY(0); } 55%, 100% { transform: translateY(105%); } }

/* ════════════════════════ MARQUEE RIBBON ════════════════════════ */
.marquee { border-block: 1px solid var(--line); background: var(--bg1); overflow: clip; position: relative; }
.marquee__track { display: flex; gap: 3.2rem; width: max-content; padding: 1.05rem 0; animation: marq 36s linear infinite; }
@media (hover: hover) { .marquee:hover .marquee__track { animation-play-state: paused; } }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-m); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 3.2rem; white-space: nowrap;
}
.marquee__track span::after { content: "◆"; color: var(--amber); font-size: 0.6rem; }

/* ═══════════════════════ STATEMENT (home) ═══════════════════════ */
.statement { background: var(--bg0); position: relative; overflow: clip; }
.statement__bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(58% 64% at 78% 30%, rgba(255, 122, 26, 0.07), transparent 70%),
    radial-gradient(40% 50% at 16% 80%, rgba(155, 216, 232, 0.045), transparent 70%);
}
.statement__head {
  font-size: clamp(2.7rem, 7.4vw, 6.4rem); margin-top: 1.3rem;
}
.statement__head .strike { position: relative; white-space: nowrap; color: var(--muted2); }
.statement__head .strike::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 51%; height: 0.08em; background: var(--ember);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-io) 0.45s;
}
.statement__head .strike.in::after { transform: scaleX(1); }
.statement__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); margin-top: clamp(2rem, 4.5vw, 3.4rem); max-width: 1080px; }
.statement__lead { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 560; color: var(--ink); line-height: 1.5; }
.statement__body { color: var(--muted); font-size: 1.02rem; }

/* ═══════════════════ NICHE — ENG + MFG (home) ═══════════════════ */
.niche { background: var(--bg1); border-block: 1px solid var(--line); overflow: clip; }
.niche__grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: clamp(2.4rem, 5.5vw, 5.5rem); align-items: start; }
.niche__text .section-title { margin-top: 1.05rem; }
.niche__lead { margin-top: 1.3rem; color: var(--muted); font-size: 1.07rem; max-width: 56ch; }
.niche__lead strong { color: var(--ink); font-weight: 620; }
.niche__text .btn { margin-top: 2rem; }
.niche__sig {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--font-m); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted2);
  display: flex; gap: 2rem; flex-wrap: wrap;
}
.niche__sig b { color: var(--amber); font-weight: 500; }

.niche__list { display: flex; flex-direction: column; gap: 0.9rem; }
.niche__item {
  position: relative; display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.5rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s;
}
.niche__item:hover { transform: translateX(8px); border-color: var(--line2); background: var(--surface2); }
.niche__item > span {
  font-family: var(--font-m); font-size: 0.78rem; color: var(--amber); letter-spacing: 0.1em;
  border: 1px solid rgba(255, 174, 0, 0.35); padding: 0.34rem 0.5rem; border-radius: var(--r); flex: none; margin-top: 0.2rem;
}
.niche__item strong { display: block; font-weight: 700; font-size: 1.06rem; letter-spacing: 0.005em; }
.niche__item p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.95rem; }

/* ═══════════════════ SERVICES INDEX (home) ═══════════════════ */
.svc { background: var(--bg0); }
.svc__list { border-top: 1px solid var(--line); }
.svc__row {
  position: relative; display: grid; grid-template-columns: 5.2rem 1fr auto auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem); padding: 1.45rem 0.4rem; border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease), padding 0.35s var(--ease);
}
.svc__row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--heat); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.svc__row:hover { background: rgba(255, 174, 0, 0.03); padding-left: 1.1rem; }
.svc__row:hover::after { transform: scaleX(1); }
.svc__no { font-family: var(--font-m); font-size: 0.8rem; color: var(--muted2); letter-spacing: 0.1em; transition: color 0.3s; }
.svc__row:hover .svc__no { color: var(--amber); }
.svc__name {
  font-family: var(--font-d); font-weight: 820; font-stretch: 114%; text-transform: uppercase;
  font-size: clamp(1.35rem, 3.1vw, 2.5rem); letter-spacing: 0; line-height: 1.04; color: var(--ink);
  transition: color 0.3s;
}
.svc__row:hover .svc__name { color: #fff; }
.svc__desc { font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); max-width: 30ch; text-align: right; line-height: 1.7; }
.svc__arrow {
  width: 46px; height: 46px; border: 1px solid var(--line2); border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  transition: background 0.35s, color 0.35s, transform 0.45s var(--ease), border-color 0.35s;
}
.svc__row:hover .svc__arrow { background: var(--amber); border-color: var(--amber); color: #181000; transform: rotate(-45deg); }

/* floating image preview */
.svc-preview {
  position: fixed; z-index: 90; width: 320px; aspect-ratio: 4 / 3; pointer-events: none;
  border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line2);
  box-shadow: 0 36px 80px -22px rgba(0, 0, 0, 0.75);
  opacity: 0; transform: scale(0.86) rotate(-2deg); transition: opacity 0.32s var(--ease), transform 0.42s var(--ease);
  will-change: transform;
}
.svc-preview.on { opacity: 1; }
.svc-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.svc-preview img.show { opacity: 1; }
.svc-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }

/* ═══════════════════════ WORK WALL (home) ═══════════════════════ */
.work { background: var(--bg1); border-block: 1px solid var(--line); padding-block: clamp(4rem, 8vw, 7rem); overflow: clip; }
.work .section-head { padding-inline: var(--pad); max-width: calc(var(--maxw)); margin-inline: auto; }
.work__rows { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; }
.work__row { display: flex; gap: 1.1rem; width: max-content; animation: work-drift 64s linear infinite; }
.work__row--rev { animation-direction: reverse; }
@media (hover: hover) { .work__rows:hover .work__row { animation-play-state: paused; } }
@keyframes work-drift { to { transform: translateX(-50%); } }
.work__item { position: relative; height: clamp(190px, 25vw, 295px); aspect-ratio: 4 / 3; flex: none; overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); }
.work__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.7) contrast(1.04); transform: scale(1.01); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); }
.work__item:hover img { filter: none; transform: scale(1.07); }
.work__item::after {
  content: attr(data-cap); position: absolute; left: 0.8rem; bottom: 0.6rem;
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.18em; color: rgba(238, 242, 246, 0.85);
  background: rgba(7, 8, 10, 0.55); padding: 0.28rem 0.5rem; border-radius: 3px; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s var(--ease);
}
.work__item:hover::after { opacity: 1; transform: none; }
.work__hint { margin-top: 1.7rem; text-align: center; }

/* ════════════════ PAPER — drawing-sheet sections ════════════════ */
.paper {
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(20, 22, 26, 0.045) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(20, 22, 26, 0.035) 27px 28px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper2) 100%);
  color: var(--paper-ink);
  position: relative;
}
.paper .eyebrow { color: var(--paper-mut); }
.paper .eyebrow::before { color: #B4540A; }
.paper .section-intro { color: var(--paper-mut); }
.paper .gold { background: linear-gradient(97deg, #D98A0B, #B4540A); -webkit-background-clip: text; background-clip: text; }

/* sheet border with zone letters, like a real drawing frame */
.sheet { position: relative; max-width: var(--maxw); margin-inline: auto; padding: clamp(2.2rem, 5vw, 4rem) var(--pad); }
.sheet__frame { position: absolute; inset: 1.1rem; border: 1px solid var(--paper-line); pointer-events: none; }
.sheet__frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--paper-line2); }
.sheet__zones { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(20, 22, 26, 0.42); }
.sheet__zones i { position: absolute; font-style: normal; }
.sheet__zones .zt { top: 0.15rem; } .sheet__zones .zb { bottom: 0.15rem; }
.sheet__zones .z1 { left: 18%; } .sheet__zones .z2 { left: 50%; } .sheet__zones .z3 { left: 82%; }
.sheet__zones .zl { left: 0.3rem; } .sheet__zones .zr { right: 0.3rem; }
.sheet__zones .za { top: 26%; } .sheet__zones .zc { top: 72%; }

/* Title block — the signature footer of each paper sheet */
.titleblock {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  border: 1px solid var(--paper-ink); background: rgba(255, 255, 255, 0.45);
  display: grid; grid-template-columns: 2fr 1.1fr 1.1fr 0.9fr 0.9fr;
  font-family: var(--font-m);
}
.titleblock > div { padding: 0.55rem 0.8rem 0.62rem; border-right: 1px solid var(--paper-ink); min-width: 0; }
.titleblock > div:last-child { border-right: 0; }
.titleblock .tb-l { display: block; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-mut); }
.titleblock .tb-v { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titleblock .tb-v .ok { color: #B4540A; }

/* NUMBERS band (paper) */
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--paper-ink); background: rgba(255, 255, 255, 0.4); }
.num-cell { padding: clamp(1.4rem, 3vw, 2.3rem) clamp(1rem, 2.4vw, 1.9rem); border-right: 1px solid var(--paper-ink); position: relative; }
.num-cell:last-child { border-right: 0; }
.num-cell__value {
  font-family: var(--font-d); font-weight: 880; font-stretch: 118%;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -0.015em; color: var(--paper-ink);
  display: flex; align-items: baseline; gap: 0.18rem;
}
.num-cell__value small { font-size: 0.42em; font-weight: 760; color: #B4540A; letter-spacing: 0; }
.num-cell__label { margin-top: 0.55rem; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-mut); }
.num-cell::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.7rem; height: 5px; opacity: 0.5;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 1px) left center / 100% 1px no-repeat;
  color: var(--paper-line);
}

/* PROCESS — OP sheet (paper) */
.ops { counter-reset: op; display: flex; flex-direction: column; margin-top: 0.6rem; }
.op {
  position: relative; display: grid; grid-template-columns: 7.2rem 1fr; gap: clamp(1.2rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3.2vw, 2.1rem) 0.4rem; border-bottom: 1px dashed var(--paper-line);
}
.op:last-child { border-bottom: 0; }
.op__no {
  font-family: var(--font-m); font-weight: 600; font-size: 1rem; letter-spacing: 0.06em; color: #B4540A;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.op__no small { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--paper-mut); text-transform: uppercase; font-weight: 500; }
.op h3 { font-family: var(--font-d); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.15rem, 2.1vw, 1.6rem); letter-spacing: 0.004em; }
.op p { margin: 0.45rem 0 0; color: var(--paper-mut); max-width: 70ch; font-size: 0.99rem; }
.op::before {
  content: ""; position: absolute; left: 3.05rem; top: 0; bottom: 0; width: 1px;
  background: var(--paper-line);
}
.op::after {
  content: ""; position: absolute; left: 2.83rem; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid #B4540A; transform: translateY(-50%);
}

/* ═══════════════════════ MATERIALS (dark) ═══════════════════════ */
.materials { background: var(--bg0); }
.mat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.mat-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.7rem 1.4rem 1.5rem; overflow: hidden; min-height: 240px; display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease), border-color 0.4s, background 0.4s;
}
.mat-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s;
  background: linear-gradient(160deg, rgba(255, 174, 0, 0.1), transparent 55%);
}
.mat-card:hover { transform: translateY(-7px); border-color: var(--line2); background: var(--surface2); }
.mat-card:hover::before { opacity: 1; }
.mat-card__sym {
  font-family: var(--font-m); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em;
  color: var(--amber); display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--bg1); position: relative;
}
.mat-card__sym::after { content: attr(data-n); position: absolute; top: 3px; right: 5px; font-size: 0.52rem; color: var(--muted2); letter-spacing: 0; }
.mat-card h3 { margin-top: 1.05rem; font-weight: 760; font-stretch: 110%; text-transform: uppercase; font-size: 1.02rem; letter-spacing: 0.01em; }
.mat-card p { margin-top: 0.45rem; color: var(--muted); font-size: 0.88rem; line-height: 1.6; flex: 1; }
.mat-card__tag {
  margin-top: 0.9rem; align-self: flex-start; font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--amber); border: 1px solid rgba(255, 174, 0, 0.4); padding: 0.3rem 0.55rem; border-radius: 3px;
}
.mat-card--primary { border-color: rgba(255, 174, 0, 0.4); background: linear-gradient(170deg, rgba(255, 174, 0, 0.08), var(--surface) 55%); }

/* ═══════════════════════ INDUSTRIES (dark) ═══════════════════════ */
.industries { background: var(--bg1); border-top: 1px solid var(--line); }
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ind-card {
  position: relative; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16 / 11; display: flex; align-items: flex-end;
}
.ind-card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(0.55) contrast(1.04) brightness(0.8); transform: scale(1.01); transition: transform 0.7s var(--ease), filter 0.6s var(--ease); }
.ind-card:hover .ind-card__photo { transform: scale(1.07); filter: grayscale(0) brightness(0.92); }
.ind-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(185deg, rgba(7, 8, 10, 0.06) 38%, rgba(7, 8, 10, 0.88) 88%); }
.ind-card__label { position: relative; z-index: 2; padding: 1.25rem 1.35rem; width: 100%; display: flex; align-items: baseline; gap: 0.9rem; }
.ind-card__no { font-family: var(--font-m); font-size: 0.7rem; color: var(--amber); letter-spacing: 0.12em; }
.ind-card__label h3 { font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.01em; }
.ind-card__label p { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--ink2); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s var(--ease); }
.ind-card:hover .ind-card__label p { opacity: 1; transform: none; }
.ind-card__arrow {
  position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(238, 242, 246, 0.3); display: grid; place-items: center; color: #fff;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.4s var(--ease), background 0.3s, color 0.3s;
}
.ind-card:hover .ind-card__arrow { opacity: 1; transform: rotate(-45deg); background: var(--amber); border-color: var(--amber); color: #181000; }

/* ═══════════════════ SHOWCASE VIDEO (content video) ═══════════════════ */
.showcase { background: var(--bg0); }
.showcase__grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.showcase__text h2 { margin-top: 1.05rem; }
.showcase__text p { margin-top: 1.2rem; color: var(--muted); max-width: 46ch; }
.showcase__text .spec { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.65rem; font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.showcase__text .spec b { color: var(--steel); font-weight: 500; }
.showcase__media { position: relative; }
.showcase__media figure { margin: 0; position: relative; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line2); background: #000; }
.showcase__media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.showcase__media figcaption {
  position: absolute; left: 1rem; top: 1rem; z-index: 2; pointer-events: none;
  font-family: var(--font-m); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(238, 242, 246, 0.9); background: rgba(7, 8, 10, 0.55); padding: 0.35rem 0.6rem; border-radius: 3px; backdrop-filter: blur(5px);
}

/* ═════════════════════ RESOURCES STRIP (home) ═════════════════════ */
.resband { background: var(--bg1); border-block: 1px solid var(--line); }
.resband__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(2.2rem, 4.5vw, 3.4rem); flex-wrap: wrap; }
.resband h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.resband p { color: var(--muted); margin-top: 0.55rem; max-width: 58ch; }

/* ═══════════════════════ ABOUT BAND (home) ═══════════════════════ */
.about { background: var(--bg0); overflow: clip; }
.about__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2.4rem, 5.5vw, 5rem); align-items: center; }
.about__media { position: relative; }
.about__photo { border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line2); aspect-ratio: 4 / 4.6; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.02); }
.about__badge {
  position: absolute; right: -1.1rem; bottom: 2rem; z-index: 2;
  background: var(--amber); color: #181000; border-radius: var(--r);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-m); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; line-height: 1.5;
  box-shadow: 0 22px 50px -16px rgba(255, 174, 0, 0.45);
}
.about__badge-star { font-size: 1.5rem; line-height: 1; }
.about__plate {
  position: absolute; left: -1rem; top: -1rem; z-index: -1; inset-inline: -1rem; top: -1rem; bottom: 30%;
  border: 1px solid var(--line); border-radius: var(--r2); pointer-events: none;
}
.about__content .section-title { margin-top: 1.05rem; }
.about__content > p { margin-top: 1.2rem; color: var(--muted); max-width: 60ch; }
.about__content > p strong { color: var(--ink); font-weight: 620; }
.about__creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.1rem; }
.cred {
  border: 1px solid var(--line); border-radius: var(--r2); padding: 1.1rem 1.1rem 1.05rem; background: var(--surface);
  transition: border-color 0.35s, transform 0.4s var(--ease);
}
.cred:hover { border-color: rgba(255, 174, 0, 0.45); transform: translateY(-4px); }
.cred__title { display: block; font-family: var(--font-m); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; color: var(--amber2); }
.cred__sub { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted); }

/* ═══════════════════════ RFQ (home + contact) ═══════════════════════ */
.quote { background: var(--bg1); border-top: 1px solid var(--line); position: relative; overflow: clip; }
.quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 84% 18%, rgba(255, 122, 26, 0.075), transparent 70%);
}
.quote__inner { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 5.5vw, 5rem); align-items: start; }
.quote__intro .section-title { margin-top: 1.05rem; }
.quote__lead { margin-top: 1.2rem; color: var(--muted); max-width: 50ch; }
.quote__contact { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.quote__contact-item { display: flex; gap: 1rem; align-items: center; color: var(--ink2); }
.quote__contact-item svg { color: var(--amber); flex: none; }
.quote__contact-item strong { color: #fff; font-size: 1.05rem; letter-spacing: 0.01em; }
.quote__contact-item span small { display: block; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted2); margin-top: 2px; }
a.quote__contact-item:hover strong { color: var(--amber2); }
.quote__itar {
  margin-top: 2.3rem; padding: 1rem 1.1rem; border: 1px dashed var(--line2); border-radius: var(--r2);
  font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); line-height: 1.8;
}
.quote__itar b { color: var(--steel); font-weight: 500; }

/* The form — styled like a job traveler */
.rfq {
  position: relative; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r2);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.rfq__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-m);
}
.rfq__head b { font-size: 0.86rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.rfq__head span { font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted2); text-transform: uppercase; }
.rfq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { margin-bottom: 1.1rem; min-width: 0; }
.field label {
  display: block; font-family: var(--font-m); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem;
}
.field label em { color: var(--amber); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg1); color: var(--ink);
  border: 1px solid var(--line2); border-radius: var(--r);
  font-family: var(--font-d); font-size: 0.96rem; padding: 0.78rem 0.9rem;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23919BA8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.16); background: var(--bg2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted2); }

/* File drop — fixture plate with corner bolt holes */
.filedrop { position: relative; border: 1.5px dashed var(--line2); border-radius: var(--r2); background: var(--bg1); transition: border-color 0.3s, background 0.3s; }
.filedrop.drag { border-color: var(--amber); background: var(--amber-soft); }
.filedrop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.filedrop__inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: 1.7rem 1rem 1.5rem; pointer-events: none; }
.filedrop__inner svg { color: var(--amber); }
.filedrop__text { font-size: 0.95rem; color: var(--ink2); }
.filedrop__browse { color: var(--amber2); text-decoration: underline; text-underline-offset: 3px; }
.filedrop__hint { font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted2); text-transform: uppercase; }
.filedrop::before, .filedrop::after,
.filedrop .bolt::before, .filedrop .bolt::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--bg2);
}
.filedrop::before { top: 7px; left: 7px; } .filedrop::after { top: 7px; right: 7px; }
.filedrop .bolt::before { bottom: 7px; left: 7px; } .filedrop .bolt::after { bottom: 7px; right: 7px; }
.filedrop__list { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.filedrop__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--ink2);
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r); padding: 0.5rem 0.7rem;
}
.filedrop__list button { color: var(--muted); font-size: 1rem; line-height: 1; padding: 0.1rem 0.3rem; }
.filedrop__list button:hover { color: var(--ember); }

/* honeypot */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Slider captcha — styled as an axis jog */
.captcha { margin: 1.2rem 0 1.4rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r2); }
.captcha__q { font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.captcha__q strong { color: var(--ink); font-weight: 600; }
.captcha__track { position: relative; height: 44px; margin-top: 0.9rem; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); }
.captcha__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, rgba(255, 174, 0, 0.18), rgba(255, 174, 0, 0.05)); border-radius: var(--r) 0 0 var(--r); pointer-events: none; }
.captcha__stops { position: absolute; inset: 0; pointer-events: none; }
.captcha__stop {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-m); font-size: 0.84rem; font-weight: 500; color: var(--muted);
}
.captcha__handle {
  position: absolute; top: 50%; left: 7%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: var(--r);
  background: var(--surface2); border: 2px solid var(--amber); color: var(--amber2);
  display: grid; place-items: center; font-size: 0; touch-action: none;
  animation: handleRing 1.5s ease-out infinite;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
/* Glowing → cue, pulsing on/off, to pull the eye to the slider. The ⋮ grip glyph
   is hidden (font-size:0 on the button) and replaced by this arrow. */
.captcha__handle::after {
  content: "\2192"; font-size: 1.2rem; font-weight: 700; line-height: 1; color: inherit;
  animation: handleArrow 1.5s ease-in-out infinite;
}
.captcha__handle:hover { border-color: var(--amber); color: var(--amber); }
@keyframes handleArrow {
  0%, 100% { opacity: 0.42; text-shadow: none; }
  50%      { opacity: 1; text-shadow: 0 0 7px rgba(255, 174, 0, 0.9), 0 0 14px rgba(255, 174, 0, 0.5); }
}
@keyframes handleRing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 174, 0, 0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 174, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 174, 0, 0); }
}
/* Solved = GREEN with a check, so the user sees at a glance the handle is on the right number. */
.captcha.is-solved .captcha__handle { background: #1E9E54; border-color: #1E9E54; color: #FFFFFF; box-shadow: 0 0 0 3px rgba(34, 158, 84, 0.30); animation: none; }
.captcha.is-solved .captcha__handle::after { content: "\2713"; color: #FFFFFF; text-shadow: none; animation: none; }
.captcha.is-solved .captcha__track { border-color: #1E9E54; }
.captcha.is-solved .captcha__fill { background: linear-gradient(90deg, rgba(34, 158, 84, 0.32), rgba(34, 158, 84, 0.08)); }
.captcha__hint { margin: 0.7rem 0 0; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted2); }
.captcha.is-solved .captcha__hint { color: #1C8045; }
.captcha--nudge { animation: nudge 0.45s var(--ease); }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-7px); } 65% { transform: translateX(5px); } }

.rfq__status { margin-top: 1rem; font-size: 0.92rem; min-height: 1.3em; }
.rfq__status.ok { color: #7BE3A0; }
.rfq__status.err { color: #FF8B6B; }
.rfq__fineprint { margin-top: 1rem; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted2); line-height: 1.8; }

/* ════════ Light / white quote form ════════
   The form is a white card so it pops against the dark section and reads easily.
   Overrides the dark .rfq styling above; same form everywhere (home, contact,
   free-dfm-review), so this restyles .rfq globally — no modifier class needed.
   Uses background-color (not the `background` shorthand) on inputs so the select
   arrow image survives; drop-shadow (not box-shadow) so the chamfer casts right. */
.rfq { background: #F8F7F3; border-color: #DAD6CA; filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.5)); }
.rfq__head { border-bottom-color: #DCD8CC; }
.rfq__head b { color: var(--paper-ink); }
.rfq__head span { color: var(--paper-mut); }
.field label { color: #4C515A; }
.field label em { color: #B4540A; }
.field input, .field select, .field textarea { background-color: #FFFFFF; color: var(--paper-ink); border-color: #CCC7B7; }
.field input::placeholder, .field textarea::placeholder { color: #9A958A; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23565B66' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.25); background-color: #FFFFFF; }
.filedrop { background: #FFFFFF; border-color: #CCC7B7; }
.filedrop.drag { border-color: var(--amber); background: rgba(255, 174, 0, 0.09); }
.filedrop__text { color: #3F444E; }
.filedrop__browse { color: #B4540A; }
.filedrop__hint { color: #8C877C; }
.filedrop::before, .filedrop::after,
.filedrop .bolt::before, .filedrop .bolt::after { border-color: #CCC7B7; background: #ECE9DF; }
.filedrop__list li { background: #FFFFFF; border-color: #DCD8CC; color: var(--paper-ink); }
.filedrop__list button { color: var(--paper-mut); }
.captcha { background: #F1EFE8; border-color: #DCD8CC; }
.captcha__q { color: var(--paper-mut); }
.captcha__q strong { color: var(--paper-ink); }
.captcha__track { background: #FFFFFF; border-color: #CCC7B7; }
.captcha__stop { color: var(--paper-mut); }
.captcha__handle { background: #FFFFFF; border-color: var(--amber); color: #B4540A; }
.captcha__handle:hover { border-color: #B4540A; color: #B4540A; }
.captcha__hint { color: #8C877C; }
.captcha.is-solved .captcha__hint { color: #1C8045; }
.rfq__status.ok { color: #1C7A43; }
.rfq__status.err { color: #C0392B; }
.rfq__fineprint { color: #8C877C; }

/* ═══════════════════════ CTA BAND (detail pages) ═══════════════════════ */
.cta-band { position: relative; background: var(--bg0); overflow: clip; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 75% at 50% 115%, rgba(255, 122, 26, 0.16), transparent 72%),
    radial-gradient(35% 45% at 14% -8%, rgba(155, 216, 232, 0.05), transparent 70%);
}
.cta-band__inner { position: relative; text-align: center; max-width: 920px; margin-inline: auto; }
.cta-band__title { font-size: clamp(2.5rem, 6.4vw, 5.2rem); margin-top: 1.2rem; }
.cta-band__lead { margin: 1.4rem auto 0; color: var(--muted); max-width: 58ch; font-size: 1.05rem; }
.cta-band__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
.cta-band__meta { margin-top: 2.6rem; font-family: var(--font-m); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted2); display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.cta-band__meta b { color: var(--amber); font-weight: 500; }

/* ═══════════════════════ PAGE HERO (subpages) ═══════════════════════ */
.page-hero { position: relative; min-height: 72svh; display: flex; align-items: flex-end; overflow: clip; padding-top: calc(var(--nav-h) + 0.5rem); padding-bottom: clamp(2.6rem, 6vh, 4.5rem); }
.page-hero--tall { min-height: 86svh; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.page-hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s; }
.page-hero__bg video.is-playing { opacity: 1; }
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, 0.72) 0%, rgba(7, 8, 10, 0.3) 40%, rgba(7, 8, 10, 0.86) 92%),
    linear-gradient(98deg, rgba(7, 8, 10, 0.85) 8%, rgba(7, 8, 10, 0.35) 55%, rgba(7, 8, 10, 0.2) 100%);
}
.page-hero__watermark {
  position: absolute; right: -0.04em; bottom: -0.18em; z-index: 1; pointer-events: none;
  font-family: var(--font-d); font-weight: 900; font-stretch: 125%; line-height: 1;
  font-size: clamp(9rem, 26vw, 24rem); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(238, 242, 246, 0.14);
}
.page-hero .container { position: relative; z-index: 3; }
.crumbs { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--amber2); }
.crumbs i { font-style: normal; color: var(--muted2); }
.crumbs .here { color: var(--ink2); }
.page-hero h1 { font-size: clamp(2.7rem, 7vw, 6.2rem); margin-top: 1.15rem; max-width: 12em; }
.page-hero h1 em, .doc-hero h1 em { font-style: normal; background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero__sub { margin-top: 1.5rem; color: var(--ink2); max-width: 58ch; font-size: clamp(1rem, 1.35vw, 1.14rem); }
.page-hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.1rem; }

/* Trust strip under heroes */
.trust { background: var(--bg1); border-block: 1px solid var(--line); }
.trust__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 2rem; padding-block: 1.05rem; }
.trust__item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.trust__item::before { content: ""; width: 5px; height: 5px; background: var(--amber); transform: rotate(45deg); flex: none; }

/* ═══════════════ DETAIL PAGE — spec sheet + prose ═══════════════ */
.detail { background: var(--bg0); }
.detail__grid { display: grid; grid-template-columns: 1.55fr 0.9fr; gap: clamp(2.4rem, 5vw, 4.6rem); align-items: start; }
.prose h2 {
  font-family: var(--font-d); font-weight: 820; font-stretch: 113%; text-transform: uppercase;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem); letter-spacing: 0.004em; line-height: 1.1;
  margin: 2.6em 0 0.7em;
}
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }
.prose h2 em { font-style: normal; color: var(--amber2); }
.prose p { color: var(--muted); margin: 0.95em 0; max-width: 66ch; }
.prose p strong, .prose li strong { color: var(--ink); font-weight: 620; }
.prose a { color: var(--amber2); text-decoration: underline; text-decoration-color: rgba(255, 174, 0, 0.4); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--amber); }
.checks { margin: 1.3em 0; display: flex; flex-direction: column; gap: 0.65rem; }
.checks li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--ink2); font-size: 0.99rem; }
.checks li::before {
  content: "⊕"; font-family: var(--font-m); color: var(--amber); flex: none; line-height: 1.55;
}
.prose .figure { margin: 1.8em 0; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line2); position: relative; }
.prose .figure img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; }
.prose .figure figcaption {
  position: absolute; left: 0.9rem; bottom: 0.8rem; font-family: var(--font-m); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238, 242, 246, 0.9);
  background: rgba(7, 8, 10, 0.6); padding: 0.32rem 0.55rem; border-radius: 3px; backdrop-filter: blur(4px);
}

/* Spec card — title-block table, sticky sidebar */
.side { position: sticky; top: calc(var(--nav-h) + 1rem); display: flex; flex-direction: column; gap: 1.3rem; }
.spec-card {
  border: 1px solid var(--line2); border-radius: var(--r2); overflow: hidden; background: var(--surface);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.spec-card__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line2); background: var(--bg1);
  font-family: var(--font-m);
}
.spec-card__head b { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.spec-card__head span { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; }
.spec-card table { width: 100%; border-collapse: collapse; }
.spec-card th, .spec-card td { text-align: left; padding: 0.78rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-card tr:last-child th, .spec-card tr:last-child td { border-bottom: 0; }
.spec-card th { font-family: var(--font-m); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted2); width: 34%; padding-top: 0.92rem; }
.spec-card td { font-size: 0.9rem; color: var(--ink2); line-height: 1.55; }
.spec-card td b { color: var(--amber2); font-weight: 600; }

.side__cta { border: 1px solid var(--line); border-radius: var(--r2); padding: 1.4rem; background: linear-gradient(170deg, rgba(255, 174, 0, 0.07), var(--surface) 60%); }
.side__cta b { font-weight: 760; font-stretch: 112%; text-transform: uppercase; font-size: 1.05rem; display: block; }
.side__cta p { margin: 0.55rem 0 1.1rem; color: var(--muted); font-size: 0.88rem; }
.side__cta .btn { width: 100%; }
.side__cta .side__phone { display: block; text-align: center; margin-top: 0.85rem; font-family: var(--font-m); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted); }
.side__cta .side__phone:hover { color: var(--amber2); }
.side__links { border: 1px solid var(--line); border-radius: var(--r2); padding: 1.2rem 1.3rem; background: var(--surface); }
.side__links b { font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted2); font-weight: 500; }
.side__links a { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.1rem; font-size: 0.9rem; color: var(--ink2); border-bottom: 1px solid var(--line); transition: color 0.2s, padding-left 0.25s var(--ease); }
.side__links a:last-child { border-bottom: 0; }
.side__links a:hover { color: var(--amber2); padding-left: 0.35rem; }
.side__links a::after { content: "→"; color: var(--muted2); font-size: 0.8rem; }

/* ═══════════════════════ FAQ accordions ═══════════════════════ */
.faq { background: var(--bg1); border-top: 1px solid var(--line); }
.faq__list { max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;
  padding: 1.35rem 0.2rem; text-align: left; font-family: var(--font-d); font-weight: 650;
  font-size: 1.06rem; color: var(--ink); transition: color 0.25s;
}
.faq__q:hover { color: var(--amber2); }
.faq__q i {
  flex: none; width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-family: var(--font-m); font-size: 1rem; color: var(--muted);
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
.faq__item.open .faq__q i { transform: rotate(45deg); background: var(--amber); border-color: var(--amber); color: #181000; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p { margin: 0 0 1.4rem; color: var(--muted); max-width: 64ch; padding-right: 2rem; }

/* ═══════════════════════ RELATED cards ═══════════════════════ */
.related { background: var(--bg0); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.rel-card {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: 1.6rem 1.5rem 1.4rem; overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.35s, background 0.35s;
}
.rel-card:hover { transform: translateY(-6px); border-color: var(--line2); background: var(--surface2); }
.rel-card__no { font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--amber); }
.rel-card h3 { font-weight: 790; font-stretch: 112%; text-transform: uppercase; font-size: 1.12rem; letter-spacing: 0.005em; }
.rel-card p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.rel-card .arrow-link { margin-top: 0.8rem; font-size: 0.72rem; }
.rel-card::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 68px; height: 68px; transform: rotate(45deg);
  background: rgba(255, 174, 0, 0.0); transition: background 0.4s;
}
.rel-card:hover::after { background: rgba(255, 174, 0, 0.14); }

/* ═══════════════ CAPABILITIES HUB — big cards ═══════════════ */
.hub { background: var(--bg0); }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.hub-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.7rem 1.6rem 1.5rem; min-height: 290px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: transform 0.45s var(--ease), border-color 0.35s, background 0.4s;
}
.hub-card:hover { transform: translateY(-7px); border-color: var(--line2); background: var(--surface2); }
.hub-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; }
.hub-card__no { font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--amber); }
.hub-card__icon { color: var(--muted); transition: color 0.35s, transform 0.45s var(--ease); }
.hub-card:hover .hub-card__icon { color: var(--amber2); transform: rotate(-8deg) scale(1.08); }
.hub-card h3 { font-weight: 800; font-stretch: 113%; text-transform: uppercase; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.06; margin-top: 2.2rem; }
.hub-card p { margin-top: 0.6rem; color: var(--muted); font-size: 0.93rem; flex-grow: 0; }
.hub-card__spec { margin-top: 1.1rem; font-family: var(--font-m); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted2); }
.hub-card__spec b { color: var(--steel); font-weight: 500; }
.hub-card .arrow-link { margin-top: 1.2rem; font-size: 0.72rem; }
.hub-card--wide { grid-column: span 1; }

/* Finishing grid (chips with spec) */
.fin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fin-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: 1.4rem 1.3rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem;
  transition: transform 0.4s var(--ease), border-color 0.35s;
}
.fin-card:hover { transform: translateY(-5px); border-color: rgba(255, 174, 0, 0.4); }
.fin-card h3 { font-weight: 760; font-stretch: 110%; text-transform: uppercase; font-size: 1rem; }
.fin-card p { color: var(--muted); font-size: 0.86rem; flex: 1; }
.fin-card .fin-spec { font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-top: 0.6rem; }

/* ════════════════════════════ FOOTER ════════════════════════════ */
.footer { background: var(--bg0); border-top: 1px solid var(--line); position: relative; overflow: clip; }
.footer__ghost {
  display: block; white-space: nowrap; text-align: center; user-select: none; pointer-events: none;
  font-family: var(--font-d); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(4rem, 13.5vw, 12.5rem); line-height: 0.9; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(238, 242, 246, 0.07);
  margin-top: clamp(2rem, 5vw, 4rem);
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.6rem, 5vw, 4rem);
}
.footer__brand .brand__logo { height: 52px; filter: invert(1); }
.footer__tagline { margin-top: 1.2rem; font-weight: 740; font-stretch: 113%; text-transform: uppercase; font-size: 1.18rem; letter-spacing: 0.01em; }
.footer__tagline .gold { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer__certs { margin-top: 1rem; font-family: var(--font-m); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2); line-height: 2.1; }
.footer__col h4 { font-family: var(--font-m); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted2); margin: 0 0 1rem; }
.footer__col a, .footer__col span { display: block; padding: 0.32rem 0; font-size: 0.92rem; color: var(--ink2); }
.footer__col a:hover { color: var(--amber2); }
.footer__col a.hot { color: var(--amber2); font-weight: 600; }

/* bottom bar as drawing title block */
.footer__tb { border-top: 1px solid var(--line); }
.footer__tb-grid {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: repeat(5, auto) 1fr; gap: 0;
  font-family: var(--font-m); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2);
}
.footer__tb-grid > div { padding: 0.75rem 1.3rem 0.85rem 0; margin-right: 1.3rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.footer__tb-grid > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; align-items: flex-end; justify-content: center; }
.footer__tb-grid b { color: var(--muted); font-weight: 500; }
.footer__tb-grid a { color: var(--muted); }
.footer__tb-grid a:hover { color: var(--amber2); }
.footer__legal { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.footer__legal .sep { opacity: 0.4; }

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 1180px) {
  .mat-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .fin-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__dro, .hero__cue { display: none; }
}
@media (max-width: 1023px) {
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: flex; }
  .svc__desc { display: none; }
  .detail__grid { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 900px) {
  :root { --nav-h: 96px; }
  .hero__stats-inner { grid-template-columns: repeat(2, 1fr); }
  .hero__stat { border-bottom: 1px solid rgba(238, 242, 246, 0.1); }
  .hero__stat:nth-child(2n) { border-right: 0; }
  .statement__grid, .niche__grid, .about__grid, .quote__inner, .showcase__grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .rel-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div { border-bottom: 1px solid var(--paper-ink); }
  .titleblock > div:nth-child(2n) { border-right: 0; }
  .numbers__grid { grid-template-columns: 1fr 1fr; }
  .num-cell:nth-child(2n) { border-right: 0; }
  .num-cell { border-bottom: 1px solid var(--paper-ink); }
  .svc__row { grid-template-columns: 3.4rem 1fr auto; }
  .about__badge { right: 1rem; }
  .footer__tb-grid { grid-template-columns: 1fr 1fr; }
  .footer__tb-grid > div { border-right: 0; }
}
@media (max-width: 640px) {
  .mat-grid, .fin-grid, .hub-grid, .ind-grid { grid-template-columns: 1fr; }
  .rfq__row { grid-template-columns: 1fr; }
  .hero__cue { display: none; }
  .hero__stats-inner { grid-template-columns: 1fr 1fr; }
  .hero__stat { padding: 1rem 0.9rem 1rem 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .sheet__frame, .sheet__zones { display: none; }
  .op { grid-template-columns: 1fr; gap: 0.5rem; }
  .op::before, .op::after { display: none; }
  .btn--lg { padding: 1.05rem 1.5rem; }
}

/* ═══════════ PHASE 2 — documents, sitemap, resource form ═══════════ */

/* Compact document hero (legal pages) */
.doc-hero { background: var(--bg1); border-bottom: 1px solid var(--line); padding: calc(var(--nav-h) + clamp(2.6rem, 6vw, 4.6rem)) 0 clamp(2.1rem, 4.5vw, 3.2rem); }
.doc-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); margin-top: 1.05rem; }
.doc-hero .page-hero__sub { margin-top: 1rem; }

/* Verbatim legal prose rendered on the drawing-sheet paper */
.paper .prose { color: var(--paper-ink); }
.paper .prose h2 { color: var(--paper-ink); margin: 2.2em 0 0.6em; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.paper .prose > h2:first-child { margin-top: 0; }
.paper .prose h3 { font-family: var(--font-m); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #B4540A; margin: 1.9em 0 0.5em; font-weight: 600; }
.paper .prose p { color: #3F444E; }
.paper .prose p.lead { font-size: 1.13rem; color: var(--paper-ink); font-weight: 500; }
.paper .prose p strong { color: var(--paper-ink); }
.paper .prose a { color: #B4540A; text-decoration: underline; text-decoration-color: rgba(180, 84, 10, 0.4); text-underline-offset: 3px; }
.paper .prose a:hover { text-decoration-color: #B4540A; }
.paper .prose ul.ticklist { margin: 1em 0 1.5em; display: flex; flex-direction: column; gap: 0.5rem; }
.paper .prose ul.ticklist li { padding-left: 1.4rem; position: relative; color: #3F444E; }
.paper .prose ul.ticklist li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: rgba(180, 84, 10, 0.85); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.paper .prose ul.ticklist li strong { color: var(--paper-ink); }
.paper .prose .rc-emaillink { background: none; border: 0; padding: 0; color: #B4540A; text-decoration: underline; cursor: pointer; font: inherit; }
.doc-sheet { max-width: 1020px; }

/* Sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2rem; }
.sitemap-grid h2 { font-family: var(--font-m); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); margin: 0 0 0.9rem; font-weight: 600; }
.sitemap-grid ul { display: flex; flex-direction: column; gap: 0.1rem; }
.sitemap-grid a { display: inline-block; padding: 0.26rem 0; color: var(--ink2); font-size: 0.94rem; }
.sitemap-grid a:hover { color: var(--amber2); }

/* Mini numbered steps (DFM landing) */
.ministeps { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 2.1rem; }
.ministep { display: flex; gap: 1.2rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); padding: 1.2rem 1.3rem; }
.ministep > span { font-family: var(--font-m); color: var(--amber); font-size: 0.76rem; border: 1px solid rgba(255, 174, 0, 0.35); padding: 0.3rem 0.5rem; border-radius: var(--r); flex: none; margin-top: 0.15rem; }
.ministep strong { display: block; font-weight: 700; }
.ministep p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: 1fr; } }

/* utility */
.hide { display: none !important; }
.center { text-align: center; }


/* ════════ Start the conversation (3 doors) ════════ */
.start__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.6rem}
.start__door{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:1.9rem 1.6rem;background:var(--surface);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)));color:var(--ink);text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.start__door:hover{border-color:var(--line2);transform:translateY(-4px);background:var(--surface2)}
.start__no{position:absolute;top:1.2rem;right:1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--muted2)}
.start__icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--steel)}
.start__door h3{font-size:1.18rem;margin:.35rem 0 0;line-height:1.2;color:var(--ink)}
.start__door p{color:var(--ink2);font-size:.95rem;line-height:1.6;margin:0;flex:1}
.start__cta{margin-top:.5rem;font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--amber);display:inline-flex;align-items:center;gap:.4rem}
.start__cta svg{transition:transform .25s var(--ease)}
.start__door:hover .start__cta svg{transform:translateX(4px)}
.start__door--hot{border-color:var(--amber)}
.start__door--hot .start__icon{color:var(--amber);border-color:var(--amber)}
@media(max-width:860px){.start__grid{grid-template-columns:1fr}}


/* ════════════════════════════════════════════════════════════════
   THEME TOGGLE CONTROL  ·  sun / moon switch injected by main.js
   Styled with the same machined idioms as the nav. Works in both
   themes; the light-mode tweaks live in the html[data-theme="light"]
   block far below.
   ════════════════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; color: var(--ink2);
  border: 1px solid var(--line2); border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.3s var(--ease);
}
.theme-toggle:hover { color: var(--amber2); border-color: var(--amber); background: rgba(255, 174, 0, 0.06); }
.theme-toggle:focus-visible { outline: 2px solid var(--amber2); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* sun and moon are stacked; JS toggles which is shown via .is-light on the button */
.theme-toggle .icon-sun { display: none; }
.theme-toggle.is-light .icon-sun { display: block; }
.theme-toggle.is-light .icon-moon { display: none; }

/* Mobile menu variant — a full-width labelled row that matches the .m-link rhythm */
.theme-toggle--m {
  width: 100%; height: auto; justify-content: space-between; gap: 0.8rem;
  padding: 0.9rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink);
  font-family: var(--font-d); font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(1.6rem, 6.5vw, 2.2rem); letter-spacing: 0.01em;
}
.theme-toggle--m:hover { color: var(--amber2); border-color: var(--line); background: none; }
.theme-toggle--m svg { width: 26px; height: 26px; }
.theme-toggle--m .tt-label::after { content: "Light mode"; }
.theme-toggle--m.is-light .tt-label::after { content: "Dark mode"; }


/* ════════════════════════════════════════════════════════════════
   ░░░  LIGHT THEME  ·  html[data-theme="light"]  ░░░
   Opt-in, warm "drawing-sheet" light skin. Dark stays the default
   (no attribute, or data-theme="dark") and is left untouched.
   Most of the flip happens by remapping the base tokens; everything
   that hard-codes a dark-assuming colour gets a targeted override
   below. The molten-amber accent family is intentionally preserved
   — it reads on both skins.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  /* Warm off-white "paper" backgrounds (light → lighter as you go up a layer) */
  --bg0:      #F4F2EC;
  --bg1:      #FAF8F3;
  --bg2:      #FFFFFF;
  --surface:  #FFFFFF;
  --surface2: #F3F1EA;

  /* Dark-on-light structure lines */
  --line:     #DAD5C8;
  --line2:    #C7C1B1;
  --hairline: rgba(20, 22, 26, 0.12);

  /* Ink → near-black; muted → warm mid-grays */
  --ink:    #15171B;
  --ink2:   #353A42;
  --muted:  #5C616B;
  --muted2: #686D76;

  /* Amber family preserved. Soft amber fill nudged a touch denser so it
     registers on white. */
  --amber-soft: rgba(255, 174, 0, 0.16);

  /* Steel measurement hairline → darker so it shows on light */
  --steel:      #2C7C90;
  --steel-dim:  rgba(28, 124, 144, 0.35);

  /* Paper sheets are already light — give them a distinct *cooler/whiter*
     tint in light mode so they still read as a separate inserted sheet
     against the warm page. */
  --paper:       #FBFAF6;
  --paper2:      #F2F0E8;
  --paper-line:  #D8D3C4;
  --paper-line2: #E6E2D7;
}

/* Body base — explicit so the cold dark default never leaks */
html[data-theme="light"] body { background: var(--bg0); color: var(--ink); }

/* ::selection — keep amber, already fine */

/* Grain overlay: overlay-blend of noise reads as harsh speckle on white.
   Drop it way down so the light surfaces stay clean. */
html[data-theme="light"] .grain { opacity: 0.025; mix-blend-mode: multiply; }

/* Outline / stroked display text was keyed to near-white ink — flip to dark ink */
html[data-theme="light"] .outline-ink { -webkit-text-stroke-color: rgba(21, 23, 27, 0.30); }
html[data-theme="light"] .hero__title .ghost { -webkit-text-stroke-color: rgba(21, 23, 27, 0.42); }
html[data-theme="light"] .page-hero__watermark { -webkit-text-stroke-color: rgba(21, 23, 27, 0.12); }
html[data-theme="light"] .footer__ghost { -webkit-text-stroke-color: rgba(21, 23, 27, 0.08); }

/* ---- Reticle cursor: near-white crosshair must become dark ink on light.
   Mirrors the existing .on-paper rule. ---- */
html[data-theme="light"] .reticle::before,
html[data-theme="light"] .reticle::after { background: rgba(20, 22, 26, 0.92); }
html[data-theme="light"] .reticle__ring { border-color: rgba(20, 22, 26, 0.0); }
/* hot state already uses amber, which is fine on light */
/* ...but the hero (and inner-page heroes) stay dark even in light theme, so flip the
   crosshair back to near-white there. .on-dark is toggled in main.js over dark heroes. */
html[data-theme="light"] .reticle.on-dark::before,
html[data-theme="light"] .reticle.on-dark::after { background: rgba(238, 242, 246, 0.92); }
html[data-theme="light"] .reticle.on-dark .reticle__dot { background: var(--amber); }

/* ---- NAV ----
   The nav is fixed and transparent at the top of every page. On the 77 content
   pages it sits over a DARK hero/page-hero video, so there it must stay LIGHT
   even in light theme — light links + the white (inverted) logo, exactly like
   dark theme — until it condenses into its solid light panel (.scrolled). The
   doc/legal pages (sitemap, privacy, terms, accessibility, sms-opt-in) instead
   open on a LIGHT .doc-hero band and have no dark hero, so they need the dark
   nav from the top.

   Strategy (kept off the buggy ":has() + dynamically-toggled :not(.scrolled)"
   combo): the DEFAULT light-theme nav is LIGHT/inverted (the over-hero case on
   every content page at the top). The scroll flip to dark ink is driven purely
   by the .nav.scrolled class — a plain class toggle the engine invalidates
   reliably (it already powers the nav condense). The 5 doc pages are pulled
   dark up-front via a STATIC body:has(.doc-hero) — evaluated once, never
   toggled, so no :has() invalidation hazard. */

/* Default (transparent over the dark hero): light links + white (inverted) logo. */
html[data-theme="light"] .nav__links > a,
html[data-theme="light"] .has-menu > a { color: #C8CFD8; }
html[data-theme="light"] .nav__links > a:hover,
html[data-theme="light"] .has-menu > a:hover,
html[data-theme="light"] .nav__links > a.is-active,
html[data-theme="light"] .has-menu.is-active > a { color: #fff; }
html[data-theme="light"] .nav__burger span { background: #EEF2F6; }
/* The nav logo art is white (filter:invert(1)); keep it inverted over the hero.
   Footer/boot logos always sit on a light surface, so un-invert them. */
html[data-theme="light"] .footer__brand .brand__logo,
html[data-theme="light"] .boot__logo { filter: none; }

/* Condensed into the solid light panel → dark ink + un-inverted (black) logo. */
html[data-theme="light"] .nav.scrolled {
  background: rgba(250, 248, 243, 0.82);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
html[data-theme="light"] .nav.scrolled .nav__links > a,
html[data-theme="light"] .nav.scrolled .has-menu > a { color: var(--ink2); }
html[data-theme="light"] .nav.scrolled .nav__links > a:hover,
html[data-theme="light"] .nav.scrolled .has-menu > a:hover,
html[data-theme="light"] .nav.scrolled .nav__links > a.is-active,
html[data-theme="light"] .nav.scrolled .has-menu.is-active > a { color: var(--ink); }
html[data-theme="light"] .nav.scrolled .nav__burger span { background: var(--ink); }
html[data-theme="light"] .nav.scrolled .brand__logo { filter: none; }

/* Doc/legal pages open on a LIGHT .doc-hero (no dark hero) → dark nav from the
   top. Static :has(); the .doc-hero never toggles, so this re-evaluates only on
   load, not on any dynamic class change. */
html[data-theme="light"] body:has(.doc-hero) .nav__links > a,
html[data-theme="light"] body:has(.doc-hero) .has-menu > a { color: var(--ink2); }
html[data-theme="light"] body:has(.doc-hero) .nav__links > a:hover,
html[data-theme="light"] body:has(.doc-hero) .has-menu > a:hover,
html[data-theme="light"] body:has(.doc-hero) .nav__links > a.is-active,
html[data-theme="light"] body:has(.doc-hero) .has-menu.is-active > a { color: var(--ink); }
html[data-theme="light"] body:has(.doc-hero) .nav__burger span { background: var(--ink); }
html[data-theme="light"] body:has(.doc-hero) .brand__logo { filter: none; }

/* Dropdown panel → light translucent sheet */
html[data-theme="light"] .dropdown {
  background: rgba(250, 248, 243, 0.97); border-color: var(--line2);
  box-shadow: 0 30px 70px -24px rgba(20, 22, 26, 0.28);
}
html[data-theme="light"] .dropdown::before { border-color: var(--line2); }
html[data-theme="light"] .dropdown a:hover { background: rgba(255, 174, 0, 0.12); color: var(--ink); }

/* Mobile menu overlay → light */
html[data-theme="light"] .mobile-menu { background: rgba(250, 248, 243, 0.98); }

/* ---- HERO / PAGE-HERO ----
   The hero video is dark cinematic footage. Keep the hero CONTENT light over
   the video (the page below stays light), so the overlay scrim is left dark
   on purpose for legibility. Only the hero text colours that derive from the
   light theme are nudged back to light so they stay readable over the video. */
html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] .hero__sub,
html[data-theme="light"] .page-hero__sub,
html[data-theme="light"] .crumbs .here { color: #D7DBE0; }
html[data-theme="light"] .hero__sub strong,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .hero__title { color: #FFFFFF; }
html[data-theme="light"] .crumbs { color: #AFB4BC; }
html[data-theme="light"] .hero__stat dt { color: #FFFFFF; }
html[data-theme="light"] .hero__stat dd { color: #B9BEC6; }
/* hero frame ticks + DRO are over the dark video → keep them light */
html[data-theme="light"] .hero__frame i { border-color: rgba(238, 242, 246, 0.4); }

/* ---- MARQUEE ---- */
html[data-theme="light"] .marquee { background: var(--bg1); border-color: var(--line); }

/* ---- STATEMENT radial wash: lighten so it isn't a muddy smear on white ---- */
html[data-theme="light"] .statement__bg { opacity: 0.7; }

/* ---- CARDS that sit on light now: lift them with a soft shadow so the
   white-on-white surfaces still read as cards. ---- */
html[data-theme="light"] .niche__item,
html[data-theme="light"] .mat-card,
html[data-theme="light"] .rel-card,
html[data-theme="light"] .hub-card,
html[data-theme="light"] .fin-card,
html[data-theme="light"] .cred,
html[data-theme="light"] .ministep,
html[data-theme="light"] .start__door,
html[data-theme="light"] .spec-card,
html[data-theme="light"] .side__links,
html[data-theme="light"] .side__cta {
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 28px -20px rgba(20, 22, 26, 0.25);
}
html[data-theme="light"] .niche__item:hover,
html[data-theme="light"] .mat-card:hover,
html[data-theme="light"] .rel-card:hover,
html[data-theme="light"] .hub-card:hover,
html[data-theme="light"] .start__door:hover { box-shadow: 0 4px 10px rgba(20, 22, 26, 0.06), 0 22px 44px -22px rgba(20, 22, 26, 0.30); }

/* mat-card chip symbol bg was the dark bg1 token — now light, keep contrast */
html[data-theme="light"] .mat-card__sym { background: var(--bg2); }

/* ---- INDUSTRIES photo cards: the dark gradient scrim + light label text is
   correct (photos are dark) — leave as-is. ---- */

/* ---- WORK wall captions / SHOWCASE / DETAIL figure captions sit on photos →
   keep their dark chip + light text. No change needed. ---- */

/* ---- PAPER drawing-sheets ---- already light; the cooler --paper tokens above
   give them a distinct whiter sheet against the warm page. Title-block /
   numbers translucent-white fills get a hair more opacity to stay crisp. ---- */
html[data-theme="light"] .titleblock { background: rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .numbers__grid { background: rgba(255, 255, 255, 0.55); }

/* ---- RFQ form ----
   The form is a white card globally (it pops on the dark sections). On a light
   page white-on-light loses its edge, so re-assert a clear border + shadow so
   it still reads as a distinct traveler card. ---- */
html[data-theme="light"] .rfq {
  border-color: #D7D2C5;
  filter: drop-shadow(0 18px 40px rgba(20, 22, 26, 0.16));
}

/* ---- CTA band radial glow: dial back so it isn't muddy on light ---- */
html[data-theme="light"] .cta-band::before { opacity: 0.85; }

/* ---- FAQ + RELATED + most dark sections flip via tokens. FAQ q icon, accents
   already use amber/line tokens, so they follow. ---- */

/* ---- TRUST strip uses tokens — follows. ---- */

/* ---- FOOTER ---- background flips via --bg0; the table-block borders/links use
   --line/--muted tokens → follow. Just ensure the gold tagline + hot links stay
   legible (they use --heat / --amber2, fine on light). ---- */

/* ---- BOOT loader ---- */
html[data-theme="light"] .boot { background: var(--bg0); }
html[data-theme="light"] .boot__bar { background: var(--line2); }

/* ---- Buttons: --ghost secondary used --ink2 fill / --bg0 text. On light,
   --ink2 is now dark and --bg0 is light, so it stays a dark solid button with
   light text — still correct. Hover went to #fff (now wrong on light) → use
   pure ink. ---- */
html[data-theme="light"] .btn--ghost:hover { background: #000; color: var(--bg2); box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.4); }

/* ---- Scroll-progress glow shadow tuned for light is unnecessary; amber heat
   bar reads fine. ---- */