/* artucltd.com: "Arc Reactor" design language shared with the Logistics Master IETM.
   Layout: a HUD console. Top bar (drawer menu on phones), a blueprint-drawing M113 hero (inline SVG, no script),
   then console panels: part search, capabilities,
   programmes, Logistics Master, about, contact.
   Roles: --pri = hologram blue (from logo blue #16ACFB): chrome, focus, selection.
          --ok  = matrix green: only confirmed/live state. Square corners everywhere. */

@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/Oxanium-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/Oxanium-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/Inter-var.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/JetBrainsMono.woff2) format('woff2'); }

/* ---------- tokens: dark first; light follows the system or the toggle */
:root {
  --bg: #02070d; --bg-2: #06111b; --panel: rgba(4,16,28,.78); --panel-2: #040e18;
  --line: rgba(61,194,255,.16); --line-2: rgba(61,194,255,.32); --bracket: rgba(61,194,255,.6);
  --text: #e4f5ff; --text-2: #b4d3e6; --muted: #8fb2ca;
  --pri: #3dc2ff; --pri-soft: rgba(22,172,251,.12); --pri-glow: rgba(22,172,251,.45);
  --ok: #2bff5e; --ok-soft: rgba(0,255,65,.1);
  --brand-b: #16acfb; --brand-g: #00ff41; --on-pri: #001421;
  --brand-b-text: var(--brand-b); --brand-g-text: var(--brand-g); /* words in the A logo colours (owner, 2026-11-12) */
  --grid: rgba(61,194,255,.05); --scrim: rgba(1,6,12,.6);
  --f-display: 'Oxanium', 'Arial Narrow', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --top: 64px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #e9f2f8; --bg-2: #f6fafd; --panel: rgba(255,255,255,.82); --panel-2: #fbfdff;
  --line: rgba(8,90,140,.16); --line-2: rgba(8,90,140,.3); --bracket: rgba(8,119,184,.55);
  --text: #04223a; --text-2: #284f6b; --muted: #4a6b84;
  --pri: #0870ad; --pri-soft: rgba(10,143,214,.1); --pri-glow: rgba(10,143,214,.22);
  --ok: #007a28; --ok-soft: rgba(0,150,50,.09); --brand-g: #00c234; --brand-g-text: #007a28; --brand-b-text: #0870ad; --on-pri: #fff; --grid: rgba(8,90,140,.05); --scrim: rgba(4,34,58,.35);
  color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #e9f2f8; --bg-2: #f6fafd; --panel: rgba(255,255,255,.82); --panel-2: #fbfdff;
  --line: rgba(8,90,140,.16); --line-2: rgba(8,90,140,.3); --bracket: rgba(8,119,184,.55);
  --text: #04223a; --text-2: #284f6b; --muted: #4a6b84;
  --pri: #0870ad; --pri-soft: rgba(10,143,214,.1); --pri-glow: rgba(10,143,214,.22);
  --ok: #007a28; --ok-soft: rgba(0,150,50,.09); --brand-g: #00c234; --brand-g-text: #007a28; --brand-b-text: #0870ad; --on-pri: #fff; --grid: rgba(8,90,140,.05); --scrim: rgba(4,34,58,.35);
  color-scheme: light; }

/* ---------- base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--panel-2); }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
p a, dd a { text-decoration: underline; text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
::selection { background: var(--pri); color: var(--on-pri); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
.wrap { width: 100%; max-width: 1760px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.mono { font-family: var(--f-mono); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--pri); color: var(--on-pri); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
.amark { display: block; }
.amark .a-b { fill: var(--brand-b); }
.amark .a-g { fill: var(--brand-g); }

/* ---------- top bar; on phones a drawer (built by site.js; without JS the links wrap under the brand) */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 20px; min-height: var(--top); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); min-height: 44px; }
.brand:hover { text-decoration: none; }
.brand .amark { width: 38px; height: 32px; flex: none; transform-origin: 50% 62%; }
@media (prefers-reduced-motion: no-preference) { .brand .amark { transform-origin: 50% 60%; will-change: transform; animation: beat 1.6s ease-in-out infinite; } } /* owner, 2026-11-12: a smooth, continuous heartbeat */
.brand b { display: block; font: 600 18px/1 var(--f-display); letter-spacing: .16em; white-space: nowrap; }
.brand small { display: block; font: 400 13px/1 var(--f-mono); color: var(--muted); letter-spacing: .12em; margin-top: 6px; white-space: nowrap; }
.topnav { display: flex; gap: 2px; margin-left: 8px; }
.topnav a { display: flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: 0 12px; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--pri); text-decoration: none; border-bottom-color: var(--pri); }
.spacer { flex: 1; }
.meta { display: flex; gap: 18px; font: 400 13px var(--f-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.meta b { color: var(--text); font-weight: 500; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--line-2); cursor: pointer; color: var(--text-2); flex: none; }
.iconbtn:hover { color: var(--pri); border-color: var(--pri); }
.iconbtn svg { width: 18px; height: 18px; }
#menuBtn { display: none; }
.sun { display: none; }
:root[data-theme="light"] .sun { display: block; } :root[data-theme="light"] .moon { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sun { display: block; } :root:not([data-theme="dark"]) .moon { display: none; } }
.scrim { position: fixed; inset: 0; z-index: 70; background: var(--scrim); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(340px, 86vw); background: var(--panel-2); border-left: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) 16px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer-head span { font: 500 13px var(--f-mono); color: var(--muted); letter-spacing: .16em; }
.drawer nav { display: grid; }
.drawer nav a { display: flex; align-items: center; min-height: 52px; padding: 0 12px; font: 600 16px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--line); }
.drawer nav a::before { content: '›'; color: var(--pri); margin-right: 12px; }
.drawer nav a:hover { text-decoration: none; background: var(--pri-soft); }
.drawer .dmeta { margin-top: auto; font: 400 14px/1.8 var(--f-mono); color: var(--muted); padding: 16px 12px 0; }
.drawer .dmeta b { color: var(--text); font-weight: 500; }

/* ---------- hero: the M113 blueprint drawing */
.hero { position: relative; background:
  linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 40px 40px,
  radial-gradient(60% 70% at 70% 50%, var(--pri-soft), transparent 70%); }
.hero .wrap { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 28px; align-items: center; padding-block: 44px; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-width: 0; }
.eyebrow { font: 500 14px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pri); margin: 0; }
.hero h1 { margin: 0; font: 600 clamp(40px, 4.6vw, 88px)/1.03 var(--f-display); letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--pri); }
.lede { margin: 0; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.5; color: var(--text-2); max-width: 56ch; } /* owner, 2026-11-12: bigger */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; padding: 9px 11px; border: 1px solid var(--line-2); color: var(--text-2); background: var(--panel); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; font: 600 15px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--pri); cursor: pointer; } /* never underlined, also inside a paragraph (owner, 2026-11-13) */
.btn.pri { background: var(--pri); color: var(--on-pri); }
.btn.ghost { background: transparent; color: var(--pri); }
.btn:hover { text-decoration: none; filter: brightness(1.1); }

.viewport { position: relative; aspect-ratio: 16 / 11; border: 1px solid var(--line); background: var(--panel); min-width: 0; overflow: hidden; margin: 0; }
.corner { position: absolute; width: 20px; height: 20px; border: 0 solid var(--bracket); pointer-events: none; z-index: 2; }
.corner.tl { left: 10px; top: 10px; border-width: 2px 0 0 2px; } .corner.tr { right: 10px; top: 10px; border-width: 2px 2px 0 0; }
.corner.bl { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; } .corner.br { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
.vp-title { position: absolute; left: 24px; top: 18px; font: 500 13px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); pointer-events: none; z-index: 2; margin: 0; }
.vp-title span { color: var(--muted); display: block; }
/* blueprint hero (owner: a drawing, not a 3D model): inline SVG traced by tools/render-blueprint.js on a drafting grid;
   a one-time scanner reveal, none with reduced motion */
.viewport.bp {
  --grid: color-mix(in srgb, var(--pri) 13%, transparent); --grid-2: color-mix(in srgb, var(--pri) 6%, transparent);
  background-color: var(--panel);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: -1px -1px;
}
.bp svg { display: block; fill: none; stroke: var(--pri); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* stroke widths in drawing units (cm), per view scale; about 1.7 / 1 / 0.6 px at laptop size */
.bp-iso .o { stroke-width: 2.6; } .bp-iso .e { stroke-width: 1.5; } .bp-iso .f { stroke-width: .9; opacity: .8; }
.bp-views .o { stroke-width: 5.6; } .bp-views .e { stroke-width: 3.4; } .bp-views .f { stroke-width: 2; opacity: .8; }
.bp .dim path { stroke-width: 2.6; opacity: .85; } .bp .dim .arw { fill: var(--pri); stroke: none; }
.bp-iso { position: absolute; left: 2%; top: 13%; width: 62%; height: 84%; }
.bp-views { position: absolute; right: 3%; top: 4%; bottom: 5%; width: 33%; container-type: size; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.bp-view { display: flex; flex-direction: column; align-items: center; }
/* @blueprint-sizes:start (generated by tools/render-blueprint.js; do not edit by hand) */
.bp-views { --k: min(100cqw / 529.7, (100cqh - 84px) / 1016.4); }
.bp-side { width: calc(529.7 * var(--k)); height: calc(371.2 * var(--k)); }
.bp-front { width: calc(274 * var(--k)); height: calc(371.2 * var(--k)); }
.bp-plan { width: calc(529.7 * var(--k)); height: calc(274 * var(--k)); }
/* @blueprint-sizes:end */
.bp-cap { margin: 4px 0 0; font: 500 13px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bp-sheet { position: absolute; inset: 0; }
/* draw-in: a scanner line sweeps across once and uncovers the drawing (transform + clip, ~1.6 s, then nothing runs) */
@media (prefers-reduced-motion: no-preference) {
  .bp-sheet { animation: bp-reveal 1.6s cubic-bezier(.45, 0, .25, 1) .15s both; }
  .viewport.bp::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent calc(100% - 3px), var(--pri) calc(100% - 3px));
    box-shadow: 6px 0 18px -4px var(--pri); transform: translateX(-100%); animation: bp-scan 1.6s cubic-bezier(.45, 0, .25, 1) .15s both; }
}
@keyframes bp-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bp-scan { 0% { transform: translateX(-100%); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

/* ---------- sections */
section.band { padding-block: 44px; } /* owner, 2026-11-12: less space between sections */
.sec-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.sec-head h2 { margin: 0; font: 600 clamp(32px, 2.8vw, 52px)/1.08 var(--f-display); letter-spacing: .02em; }
.sec-head .eq { margin: 0; font: 500 14px/1.5 var(--f-mono); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.sec-head .eq b { color: var(--pri); font-weight: 500; }
.eq .brand-g { color: var(--brand-g-text); } .eq .brand-b { color: var(--brand-b-text); }
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 28px; min-width: 0; }
.panel::before, .panel::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--bracket); pointer-events: none; }
.panel::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.panel::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.panel h3 { margin: 0 0 12px; font: 600 19px/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.panel p { margin: 0; color: var(--text-2); }
.label { font: 500 13px/1.5 var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.label.sub { margin: 22px 0 10px; }
.menus-h { margin: 0 0 10px; }
.js .menus-h { display: none; }

/* part search */
/* search on top at full width, platform boxes in horizontal rows underneath (owner) */
.parts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--pri); background: var(--panel-2); box-shadow: 0 0 0 4px var(--pri-soft); }
.search input { border: 0; background: transparent; height: 60px; padding: 0 20px; font: 400 17px var(--f-mono); letter-spacing: .02em; min-width: 0; }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: 0 0 0 4px var(--pri-glow); }
.search button { min-height: 60px; padding: 0 28px; border: 0; background: var(--pri); color: var(--on-pri); font: 600 15px var(--f-display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.search-hint { margin: 12px 0 0; font: 400 14px/1.6 var(--f-mono); color: var(--muted); }
.platforms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.plat { border: 1px solid var(--line); padding: 12px 14px; background: var(--panel); }
.plat b { font: 600 17px/1 var(--f-display); letter-spacing: .05em; }
.plat-sub { margin: 6px 0 0; color: var(--text-2); }

/* capabilities */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.caps .panel svg { width: 38px; height: 38px; color: var(--pri); margin-bottom: 16px; display: block; }

/* engineering programmes: rail of links + panels (all visible without JS; one at a time with JS) */
.prog { display: grid; grid-template-columns: 330px minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); }
.rail { border-right: 1px solid var(--line); margin: 0; padding: 8px 0; list-style: none; }
.no-js .rail { position: sticky; top: calc(var(--top) + 8px); align-self: start; }
.rail a { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; border-left: 3px solid transparent; padding: 13px 20px; min-height: 52px; color: var(--text-2); }
.rail a span:first-child { font: 400 13px var(--f-mono); color: var(--muted); }
.rail a span:last-child { font: 500 16px/1.3 var(--f-display); letter-spacing: .05em; }
.rail a:hover { background: var(--pri-soft); color: var(--text); text-decoration: none; }
.rail a[aria-current="true"] { border-left-color: var(--pri); background: var(--pri-soft); color: var(--pri); }
.prog-body { min-width: 0; }
/* owner, 2026-11-12: the frame keeps one height across the programmes: every panel sits in the same cell, the hidden ones keep
   their space but are not shown nor read (laptop and wider; on phones the panels stack and each keeps its own height) */
@media (min-width: 901px) {
  .js .prog-body { display: grid; grid-template-columns: minmax(0, 1fr); }
  .js .prog-body > .prog-panel { grid-area: 1 / 1; min-width: 0; }
  .js .prog-body > .prog-panel[hidden] { display: block !important; visibility: hidden; }
}
.prog-panel { padding: 34px 40px; }
.prog-panel .eq { margin: 0; font: 500 14px var(--f-mono); color: var(--muted); letter-spacing: .1em; }
.prog-panel h3 { margin: 8px 0 18px; font: 600 clamp(26px, 2.2vw, 38px)/1.15 var(--f-display); }
.prog-panel p { margin: 0 0 16px; color: var(--text-2); }
.prog-panel > p:not(.eq) { text-align: justify; hyphens: auto; } /* owner, 2026-11-12: full width, justified */
.prog-panel p b { color: var(--text); }
/* stat strip: one panel, cells share their borders; an optional result line closes it */
/* figures read like an instrument readout (owner: no tables): big number, small label, a hairline with a short
   blue accent above each; no cells, no boxes */
.stats { margin: 8px 0 30px; max-width: 980px; }
.stats dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px 36px; }
.stats dl div { position: relative; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.stats dl div::before { content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; background: var(--pri); }
.stats dt { font: 400 13px/1.45 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.stats dd { margin: 0; font: 600 clamp(32px, 2.6vw, 44px)/1 var(--f-display); color: var(--pri); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.stats dd.code { font: 600 clamp(24px, 2vw, 30px)/1.1 var(--f-mono); letter-spacing: .04em; }
/* the claim: a statement with an accent bar, not a table row */
.prog-panel .stats-claim, .stats-claim { max-width: 62ch; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 2px 0 2px 18px; border-left: 3px solid var(--pri); font: 600 clamp(19px, 1.5vw, 22px)/1.35 var(--f-display); letter-spacing: .01em; color: var(--text); }
.stats dl + .stats-claim { margin-top: 26px; }
.stats-claim span { font: 500 13px var(--f-mono); color: var(--pri); letter-spacing: .14em; text-transform: uppercase; }
/* figure icons (owner, 2026-11-12): blueprint line drawings in the theme's blue, generated inline by tools/render-maps.js (the world
   from Natural Earth, the M113 from the hero's side view); each sits above its figure, 72 px high, and is decorative (the text says it) */
.fig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stats .fig dd svg { display: block; height: 72px; width: auto; max-width: 100%; margin: 0 0 16px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }
.stats .fig dd svg[data-icon="m113"], .stats .fig dd svg[data-icon^="world"] { stroke-width: 1.4px; }
.stats .fig dd svg[data-icon="m113"] { fill: var(--pri-soft); }
.stats .fig dd svg[data-icon^="world"] { fill: var(--pri-soft); }
.stats .fig dd svg .land { stroke-width: .8px; opacity: .5; }
.stats .fig dd svg use[data-a3] { fill: var(--panel-2); stroke: var(--pri); stroke-width: 1.1px; }
.stats .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats:has(> .figs) { max-width: none; }
/* owner, 2026-11-12: the four figures of the row (built, nations, service, in use) are one size */
.stats .figs { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.stats .figs.figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Repair & Overhaul: the parts of the work as icon cards (owner, 2026-11-12), the line style of the figures */
.prog-panel ul.icon-cards { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; max-width: none; }
.prog-panel .icon-cards li { padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font: 600 clamp(18px, 1.4vw, 22px)/1.2 var(--f-display); color: var(--text); }
.prog-panel .icon-cards li::before { content: none; }
.prog-panel .icon-cards svg { width: 72px; height: 56px; fill: none; stroke: var(--pri); } /* every drawing fitted to the same box */
/* one line weight for every line icon, whatever its drawing is scaled to */
.prog-panel .icon-cards svg *, .stats .fig dd svg:not([data-icon="m113"]):not([data-icon^="world"]) * { vector-effect: non-scaling-stroke; stroke-width: 2.2px; }
.stats .figs-words dd { font-size: clamp(22px, 1.7vw, 30px); line-height: 1.15; } /* Armoring: the protections are words, not numbers */
.stats .fig dd { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stats .figs .fig { align-items: center; text-align: center; } /* owner, 2026-11-12: icon, figure and label centred in each card */
/* Battle tested: five country outlines of one size, each with its name as text; a hairline and short accent above each, no boxes */
.battle { margin: 8px 0 12px; container-type: inline-size; } /* owner, 2026-11-12: as wide as the figures above */
.prog-panel .battle h4 { margin: 0 0 20px; font: 600 clamp(22px, 1.7vw, 30px)/1.2 var(--f-display); letter-spacing: .02em; color: var(--text); text-transform: none; text-align: center; } /* owner, 2026-11-12: a real heading, centred over the countries */
.prog-panel ul.bt-grid { margin: 0; max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 24px; }
.prog-panel .bt-grid li { position: relative; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.prog-panel .bt-grid li::before { content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; border: 0; transform: none; background: var(--pri); }
.bt-grid svg { display: block; width: 100%; max-width: 136px; height: auto; aspect-ratio: 1; fill: var(--pri-soft); stroke: var(--pri); stroke-width: 1.4px; stroke-linejoin: round; stroke-linecap: round; }
.bt-grid svg .tk { fill: none; stroke: var(--muted); stroke-width: 1px; opacity: .7; }
.bt-name { font: 600 16px/1.3 var(--f-display); color: var(--text); letter-spacing: .01em; }
@container (max-width: 759px) { .prog-panel ul.bt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 479px) { .prog-panel ul.bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* owner, 2026-11-12: no lines above the figures and the countries */
.stats .figs .fig, .prog-panel .bt-grid li { border-top: 0; padding-top: 0; }
.stats .figs .fig::before, .prog-panel .bt-grid li::before { content: none; }
/* lists: rows with a blueprint diamond and a hairline, in columns; no boxes */
.prog-panel ul { margin: 4px 0 24px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 36px; max-width: 960px; }
.prog-panel li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--text); }
.prog-panel li::before { content: ""; position: absolute; left: 2px; top: calc(11px + .75em - 4px); width: 7px; height: 7px; border: 1.5px solid var(--pri); transform: rotate(45deg); }

/* Logistics Master */
.lm-hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center; margin-bottom: 36px; }
.lm-pitch { display: flex; flex-direction: column; gap: 16px; }
.lm-pitch p { margin: 0; color: var(--text-2); font-size: clamp(17px, 1.15vw, 20px); max-width: 56ch; }
.lm-pitch .lm-lead { font: 600 clamp(26px, 2.2vw, 40px)/1.2 var(--f-display); color: var(--text); letter-spacing: .01em; text-wrap: balance; }
.console { border: 1px solid var(--line-2); background: var(--panel-2); box-shadow: 0 30px 80px rgba(0,0,0,.3); min-width: 0; margin: 0; }
.console-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 13px var(--f-mono); color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.console-bar .amark { width: 24px; height: 20px; }
.console-bar b { color: var(--text); font-weight: 500; }
.console-bar .live { margin-left: auto; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.console-bar .live i { width: 7px; height: 7px; background: var(--ok); }
.console-main { display: grid; grid-template-columns: 1fr; }
.js .console-main { grid-template-columns: 96px minmax(0, 1fr); }
.crail { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.crail button { flex: 1; min-height: 52px; border: 0; border-left: 3px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); padding: 6px 2px; }
.crail button svg { width: 20px; height: 20px; }
.crail button span { font: 500 13px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.crail button:hover { color: var(--text); background: var(--pri-soft); }
.crail button[aria-pressed="true"] { color: var(--pri); border-left-color: var(--pri); background: var(--pri-soft); }
.cview { min-width: 0; }
.cview picture, .cview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ccap { padding: 14px 18px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.ccap b { font: 600 17px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pri); }
.ccap span { color: var(--text-2); font-size: 16px; }
.ccap small { font: 400 13px var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.lm-menus { margin: 0 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.js .lm-menus { display: none; }
.lm-menus li { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; font-size: 16px; color: var(--text-2); }
.lm-menus b { display: block; color: var(--text); font: 600 16px var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.feat { border: 1px solid var(--line); background: var(--panel); padding: 22px; min-width: 0; }
.feat svg { width: 32px; height: 32px; color: var(--pri); margin-bottom: 12px; display: block; }
.feat h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--f-display); letter-spacing: .04em; }
.feat p { margin: 0; color: var(--text-2); font-size: 16px; }
.langs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; padding: 0; list-style: none; }
.langs li { font: 500 13px/1 var(--f-mono); border: 1px solid var(--line-2); padding: 7px 8px; }
/* "Built for your fleet" (owner, 2026-11-12): a sales card in the hologram-blue family: a blue-tinted panel on the drafting grid of the hero,
   the exploded M113 final drive as a line drawing (tools/render-fleet-figure.js) as large as the card allows, a strong heading, the demo
   button first. The card is as tall as the id card beside it (see .dossier): the drawing takes the height the text leaves, never less than
   --fig-min, and is drawn in the page colours (currentColor), so it shows in both themes */
.lm-cta {
  --fig-min: 190px; --tint: var(--pri);
  container-type: inline-size; padding: 24px 28px; border-color: var(--bracket);
  background-color: var(--panel-2);
  background-image:
    linear-gradient(150deg, color-mix(in srgb, var(--tint) 20%, transparent), color-mix(in srgb, var(--tint) 5%, transparent) 55%, color-mix(in srgb, var(--tint) 15%, transparent)),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px; background-position: 0 0, -1px -1px, -1px -1px;
}
.lm-cta-in { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(var(--fig-min), 1fr) auto; gap: 10px 0; }
.lm-cta-copy { min-width: 0; }
.lm-cta h3 { margin: 0 0 8px; font: 700 clamp(24px, 2vw, 32px)/1.15 var(--f-display); letter-spacing: .02em; text-transform: none; color: var(--text); }
.lm-cta p { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 64ch; }
.lm-fig { margin: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.lm-fig-art { position: relative; flex: 1 1 0; min-height: 0; color: var(--pri); }
.lm-fig-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lm-fig-art .hv { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.lm-fig-art .lt { stroke-width: .8px; vector-effect: non-scaling-stroke; opacity: .8; }
.lm-cta .ctas { margin: 0; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; justify-self: center; align-self: end; } /* owner, 2026-11-12: one row, side by side, centred, the same size, one line each */
.lm-cta .ctas .btn { white-space: nowrap; }
.lm-cta .ctas .btn { min-height: 52px; }
.lm-cta .btn.pri { min-height: 52px; box-shadow: 0 10px 26px -12px var(--pri-glow); }
.lm-cta .btn.ghost { color: var(--text); border-color: var(--bracket); background: var(--panel); }
/* Wide and low (the id card is short): text and buttons left, the drawing right. Beside the id card the card is a size container, so the choice is
   made on its shape: wide and low, text left; otherwise (a high id card) the drawing takes the width under the text. One above the other
   (one column) the card is as high as its content and the choice is the width. */
@media (min-width: 1201px) { .js .lm-cta { container-type: size; min-height: 300px; } }
.no-js .lm-cta { --fig-min: 280px; }
@container (min-aspect-ratio: 3 / 2) {
  .lm-cta-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; }
  .lm-cta-copy { grid-area: 1 / 1; }
  .lm-fig { grid-area: 1 / 2 / 3 / 3; align-self: stretch; }
  .lm-cta .ctas { grid-area: 2 / 1 / 3 / -1; align-self: end; justify-self: center; }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .lm-cta-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .lm-cta-copy { grid-area: 1 / 1; }
  .lm-fig { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  .lm-cta .ctas { grid-area: 2 / 1 / 3 / -1; align-self: end; justify-self: center; }
}
@media (max-width: 1200px) { .lm-cta-in { height: auto; } .lm-fig-art { flex: none; aspect-ratio: 827 / 578; } }
@media (max-width: 600px) { .lm-cta .ctas { grid-auto-flow: row; justify-self: stretch; } }
/* "Request a demo" flips the card to the demo form (owner). Without script the form sits under the card; with script
   both faces share one grid cell and the card turns over; reduced motion swaps at once */
.flip-inner { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.js .flip { perspective: 1800px; }
.js .flip-inner { display: grid; gap: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.js .flip .face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.js .flip .back { transform: rotateY(180deg); }
/* The row of the About section is as high as the id card (owner: no empty space under its fields). The form does not count for the height of the
   row while the front is shown (it lies on the card's area, out of the flow); once the card has turned it is in the flow and the card may grow to
   show the whole form. Without script both faces stand one under the other and nothing is cut. */
.js .flip-inner { position: relative; }
.js .flip:not(.flipped) .back { position: absolute; inset: 0; }
.js .flip.flipped .flip-inner { transform: rotateY(180deg); }
.demo { background: linear-gradient(225deg, var(--pri-soft), transparent 70%), var(--panel); border-color: var(--line-2); }
.demo h3 { margin: 0; font: 600 clamp(22px, 1.8vw, 30px)/1.2 var(--f-display); letter-spacing: .02em; text-transform: none; }
.demo textarea { min-height: 96px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* inside the turning card the off-screen honeypot would be mirrored to the right edge: clip it in place instead */
.rfq.demo .hp { left: 0; top: 0; clip-path: inset(50%); }

/* demo form: the unit picker. Checkboxes and "All units" (first); a long list scrolls inside its own box. Body text 16 px, boxes 44 px */
.units { border: 0; margin: 0; padding: 0; min-width: 0; }
.units legend { padding: 0; margin-bottom: 8px; font: 500 13px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.units .req { color: var(--text-2); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.units .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 8px; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.units .chk { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-2); background: var(--panel-2); font: 400 16px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.units .chk.all { border-color: var(--pri); }
.units .chk:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }
.units .chk:has(input:focus-visible) { outline: 3px solid var(--pri); outline-offset: 2px; }
.units input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; padding: 0; flex: none; accent-color: var(--pri); }
.units .hint { margin: 8px 0 0; font: 400 16px/1.5 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.has-error .units .chk { border-color: var(--err); }

/* About: company card */
.dossier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; } /* the id card and the demo card, the same size (owner, 2026-11-12) */
.no-js .dossier { align-items: start; } /* no empty space under the id fields when the form stands under the demo card */
.dossier > .flip, .dossier > .flip > .flip-inner, .dossier > .flip .face { height: 100%; }
.idcard { padding: 0; display: flex; flex-direction: column; }
.idhead { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--pri-soft), transparent); }
.idhead .amark { width: 64px; height: 54px; flex: none; }
.idhead h3 { margin: 0; font: 600 26px/1.1 var(--f-display); letter-spacing: .12em; }
.idhead p { margin: 4px 0 0; font: 400 14px var(--f-mono); color: var(--muted); letter-spacing: .14em; }
.idfields { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.idfields dt, .idfields dd { margin: 0; padding: 14px 26px; border-bottom: 1px solid var(--line); }
.idfields dt { font: 500 13px/1.7 var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; padding-right: 10px; }
.idfields dd { font-size: 17px; font-weight: 500; }
.idfields dd.code { font: 600 22px/1.3 var(--f-mono); color: var(--pri); letter-spacing: .08em; }

/* the id card also holds the way to write and call (owner, 2026-11-12): links keep a 44 px target, the copy buttons sit beside them */
.idfields dd:has(> a) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.idfields dd a { display: inline-flex; align-items: center; min-height: 44px; }
.idfields address { font-style: normal; }
.copy { min-height: 44px; min-width: 64px; font: 500 13px var(--f-mono); background: none; border: 1px solid var(--line-2); padding: 0 12px; cursor: pointer; color: var(--text-2); }
.copy:hover { border-color: var(--pri); color: var(--pri); }
.rfq { display: flex; flex-direction: column; gap: 16px; }
.rfq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rfq .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rfq .field.grow { flex: 1 1 auto; }
.rfq .field.grow textarea { flex: 1 1 auto; }
.rfq label { font: 500 13px var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.rfq input, .rfq textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--line-2); padding: 12px 14px; font-size: 17px; min-height: 48px; }
.rfq input:focus, .rfq textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.rfq textarea { min-height: 140px; resize: vertical; }
.rfq .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rfq .btn { align-self: flex-start; }
.form-note { margin: 0; font: 400 14px/1.6 var(--f-mono); color: var(--muted); }
.site-foot { padding-block: 28px; font: 400 13px var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.site-foot p { margin: 0; }

@keyframes beat { 0%, 100% { transform: scale(1) } 15% { transform: scale(1.08) } 30% { transform: scale(1) } 45% { transform: scale(1.05) } 65% { transform: scale(1) } }

/* ---------- big screens use the space */
@media (min-width: 2400px) {
  body { font-size: 18px; }
  .wrap { max-width: 2480px; }
  .caps, .outcomes { gap: 24px; } .prog { grid-template-columns: 380px 1fr; }
}
@media (max-width: 1380px) { .meta .opt { display: none; } .lm-menus { grid-template-columns: repeat(2, 1fr); } .outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1200px) {
  .js .topnav, .meta { display: none; }
  .js #menuBtn { display: grid; }
  .no-js .topbar .wrap { flex-wrap: wrap; padding-block: 8px; }
  .no-js .topnav { order: 3; flex-basis: 100%; flex-wrap: wrap; margin: 0; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .lm-hero, .dossier, .parts-grid { grid-template-columns: 1fr; }
  .platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 32px; }
  .prog { grid-template-columns: 1fr; }
  .rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .no-js .rail { position: static; }
  .rail a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; grid-template-columns: auto auto; }
  .rail a[aria-current="true"] { border-bottom-color: var(--pri); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  :root { --top: 60px; }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar .wrap { gap: 10px; } .brand b { font-size: 16px; } .brand small { font-size: 13px; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .viewport { aspect-ratio: 1 / 1; }
  .vp-title { left: 18px; top: 14px; }
  .bp-views { display: none; } .bp-iso { left: 5%; top: 20%; width: 90%; height: 72%; }
  section.band { padding-block: 32px; }
  .panel { padding: 22px 18px; }
  .caps, .outcomes,   .search { grid-template-columns: 1fr; } .search button { min-height: 52px; }
  .search input { padding: 0 14px; } /* room for the whole placeholder on the narrowest panel (the empty quote list at 360 px), issue #99 */
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plat { padding: 10px; } .plat b { font-size: 16px; }
  .prog-panel { padding: 24px 18px; }
  .stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } .stats dl div:only-child { grid-column: 1 / -1; } .stats dd { font-size: 30px; }
  .stats .figs, .stats .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .console-main { grid-template-columns: 1fr; }
  .crail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .crail button { min-width: 76px; border-left: 0; border-bottom: 3px solid transparent; }
  .crail button[aria-pressed="true"] { border-bottom-color: var(--pri); }
  .console-bar .opt { display: none; }
  .idhead { padding: 18px; } .idhead h3 { font-size: 22px; }
  .idfields { grid-template-columns: 1fr; } .idfields dt { padding: 12px 18px 0; border-bottom: 0; } .idfields dd { padding: 4px 18px 12px; }
  .rfq-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* ---------- error pages (404, 405, 410, 429, 500, 503): the page chrome of the home page plus this block */
.err .wrap { max-width: 920px; margin-left: auto; margin-right: auto; display: grid; gap: 20px; }
.err h1 { margin: 0; font: 600 clamp(32px, 5vw, 56px)/1.1 var(--f-display); letter-spacing: .01em; }
.err-lead, .err-retry { margin: 0; font-size: 18px; line-height: 1.6; max-width: 60ch; }
.err-retry { color: var(--pri); font-family: var(--f-mono); }
.err-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }

/* ---------- catalogue pages (F2.4): the landing page and the search results, in the page chrome of the home page.
   Every text is 16 px or more; the rows stack on phones. */
.cat .wrap { max-width: 1100px; margin-left: auto; margin-right: auto; display: grid; gap: 20px; }
.cat h1 { margin: 0; font: 600 clamp(32px, 5vw, 56px)/1.1 var(--f-display); letter-spacing: .01em; overflow-wrap: anywhere; }
.cat .eyebrow a { color: inherit; }
.cat-lead { margin: 0; font-size: 18px; line-height: 1.6; max-width: 68ch; color: var(--text-2); }
.cat .search-hint { margin: -8px 0 0; }
.cat-next p, .noresult li { color: var(--text-2); }
.res-summary, .dym { margin: 0; font: 400 16px/1.6 var(--f-mono); color: var(--muted); }
.dym { color: var(--text); }
.dym a { text-decoration: underline; text-underline-offset: 3px; }
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.result { display: grid; grid-template-columns: minmax(150px, 20ch) minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.result .pn { font: 500 18px/1.4 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.result .desc { color: var(--text-2); overflow-wrap: anywhere; }
.result .nsn { font: 400 16px/1.4 var(--f-mono); color: var(--muted); white-space: nowrap; }
.noresult ul { margin: 12px 0 18px; padding-left: 20px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pager ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); font: 500 16px var(--f-mono); }
.pager a:hover { text-decoration: none; border-color: var(--pri); background: var(--pri-soft); }
.pager span[aria-current] { background: var(--pri); border-color: var(--pri); color: var(--on-pri); }
@media (max-width: 700px) {
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .nsn { white-space: normal; }
}

/* ---------- part pages (F2.5): the page of one part number, in the page chrome of the catalogue pages. Every text is
   16 px or more except the small caps labels the home page uses; the rows and the related list stack on phones. */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 10px; list-style: none; margin: 0; padding: 0; font: 400 16px/1.5 var(--f-mono); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-2); }
.crumbs a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs [aria-current] { color: var(--text); overflow-wrap: anywhere; }
.prow { display: grid; gap: 16px; }
.prow .owner { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 24px; margin: 0; }
.pfacts dt { font: 500 13px/1.5 var(--f-mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.pfacts dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--text-2); }
.mono { font-family: var(--f-mono); }
.quote-line { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.quote-line .btn { text-decoration: none; }
.updated { margin: 0; font: 400 16px/1.6 var(--f-mono); color: var(--muted); }
.related { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.related li { display: grid; grid-template-columns: minmax(150px, 20ch) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.related .pn { font: 500 18px/1.4 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.related .desc { color: var(--text-2); overflow-wrap: anywhere; }
.search-links { margin: 0; line-height: 2.2; }
.search-links a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .related li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cross-document view transitions: a short cross-fade between pages, never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- quote list (F3, WP-F3-07; WP-F3-08 refines it): the top-bar count, the add form, the notices and the list
   page. Every text is 16 px or more except the small caps labels; tap targets are 44 px or more; no motion. */
.qlcount { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--pri); font: 500 14px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pri); white-space: nowrap; }
.qlcount:hover { background: var(--pri-soft); text-decoration: none; }
.addform { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 12px 0 0; }
.addform label, .ql-edit label { font: 500 13px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.addform .qty, .ql-edit .qty, .ql-edit .note { min-height: 48px; background: var(--panel-2); border: 1px solid var(--line-2); padding: 0 12px; font: 400 17px var(--f-mono); }
.addform .qty, .ql-edit .qty { width: 112px; }
.addform .qty:focus, .ql-edit input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.addform .btn, .ql-edit .btn, .ql-remove .btn, .notice .btn, .ql-removed .btn { min-height: 48px; padding: 0 20px; }
.result .addform { grid-column: 1 / -1; margin: 6px 0 0; }
.prow .addform { margin: 0; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 12px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--pri); background: var(--pri-soft); }
.notice p { margin: 0; }
.notice a { text-decoration: underline; text-underline-offset: 3px; }
.result .notice { grid-column: 1 / -1; }
.ql-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ql-line { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 12px 24px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.ql-part { display: grid; gap: 4px; min-width: 0; }
.ql-part .pn { font: 500 18px/1.4 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.ql-part .desc { color: var(--text-2); overflow-wrap: anywhere; }
.ql-part .nsn { font: 400 16px/1.4 var(--f-mono); color: var(--muted); }
.ql-part .unlisted { color: var(--text-2); border-left: 3px solid var(--line-2); padding-left: 10px; }
.ql-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ql-edit .note { width: min(100%, 320px); }
.ql-remove, .ql-removed form { margin: 0; }
.ql-line:last-child { border-bottom: 0; } /* the totals bar draws the one line under the list (owner, 2026-11-12) */
.ql-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 0; border-top: 1px solid var(--line-2); background: var(--bg); }
.ql-total { margin: 0; font: 500 16px/1.4 var(--f-mono); }
.ql-removed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ql-removed li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 48px; }
.ql-removed .pn { font: 500 16px var(--f-mono); }
.ql-resume .resume-link { width: 100%; min-height: 48px; background: var(--panel-2); border: 1px solid var(--line-2); padding: 0 12px; font: 400 16px var(--f-mono); }
.ql-resume .hint { color: var(--muted); }
.ql-empty .search { margin: 12px 0 0; }
/* The way to go on adding parts is a search box above the list, not a link (owner, 2026-11-13). */
.ql-search { display: grid; gap: 12px; margin: 0 0 24px; }
.ql-search h2 { margin: 0; }
.ql-empty .btn, .ql-bar .btn { text-decoration: none; }
@media (max-width: 900px) {
  .ql-line { grid-template-columns: minmax(0, 1fr); }
}
.ql-bar { position: sticky; bottom: 0; z-index: 40; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* The bar is about 113 px high on a phone and sticks over the lines while the list scrolls: a field that takes the keyboard focus
   (Tab, or a tap) is scrolled above it, not left under it (issue #99). */
html:has(.ql-bar) { scroll-padding-bottom: 140px; }
@media (max-width: 700px) {
  .ql-bar .btn { flex: 1 1 200px; }
}
@media (max-width: 600px) {
  /* The brand and the two buttons fill a phone's top bar: the count takes a row of its own under them. */
  .topbar .wrap { flex-wrap: wrap; row-gap: 0; }
  .qlcount { order: 9; flex: 1 0 100%; justify-content: center; margin-bottom: 8px; }
  html:has(.qlcount) { scroll-padding-top: 112px; }
  /* Without JavaScript the top bar also shows the section links under the brand, about 200 px, and the anchor of an add
     (#part-...) must land below all of it, or the confirmation next to the row is hidden. */
  html.no-js:has(.addform) { scroll-padding-top: 212px; }
  html.no-js:has(.addform):has(.qlcount) { scroll-padding-top: 264px; }
}

/* ---------- quote list in the browser (F3, WP-F3-08): quantity steppers, the Undo bar, a pressed state. quote.js adds the
   steppers and the bar; without the script none of this is on the page. 48 px targets, no motion. */
.stepper { display: inline-flex; align-items: stretch; }
.stepper .qty { width: 84px; text-align: center; border-left: 0; border-right: 0; appearance: textfield; -moz-appearance: textfield; }
.stepper .qty::-webkit-outer-spin-button, .stepper .qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.step { min-width: 48px; min-height: 48px; padding: 0; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font: 500 22px/1 var(--f-mono); cursor: pointer; }
.step:hover { background: var(--pri-soft); border-color: var(--pri); }
.step[aria-disabled="true"] { color: var(--muted); cursor: default; }
.step[aria-disabled="true"]:hover { background: var(--panel-2); border-color: var(--line-2); }
.ql-undo-item { padding: 10px 4px; border-bottom: 1px solid var(--line); }
.ql-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 48px; padding: 8px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--pri); background: var(--pri-soft); }
.ql-undo p { margin: 0; }
.ql-undo .btn { min-height: 48px; padding: 0 20px; }
.addform [type="submit"] { min-width: 168px; }

/* ---------- RFQ form, thank-you page, contact and demo pages (F3, WP-F3-09; WP-F3-10 refines the browser side). The form
   reuses the home page's .rfq look. Errors sit in the field's own slot and in a summary at the top; every text is 16 px or
   more except the small caps labels the home page uses; tap targets are 44 px or more; no motion. */
:root { --err: #ff9b9b; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --err: #a8201a; } }
:root[data-theme="light"] { --err: #a8201a; }
.rfqpage .lead, .rfqpage .form-note { margin: 0; font-size: 17px; line-height: 1.6; max-width: 70ch; }
.rfqpage .form-note { color: var(--muted); font-size: 16px; }
.rfqform { gap: 24px; }
.rfqform .group { border: 1px solid var(--line); margin: 0; padding: 20px 20px 24px; min-width: 0; }
.rfqform .group > legend { padding: 0 10px; font: 600 15px/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--pri); }
.rfqform .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.rfqform .field.wide { grid-column: 1 / -1; }
.rfqform .req { color: var(--text-2); font-weight: 400; letter-spacing: .04em; text-transform: none; }
.rfqform select { width: 100%; min-height: 48px; background: var(--panel-2); border: 1px solid var(--line-2); padding: 0 12px; font-size: 17px; color: var(--text); }
.rfqform select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.rfqform textarea { min-height: 104px; }
.rfqform .hint { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.rfqform .field-error { margin: 0; color: var(--err); font-size: 16px; line-height: 1.5; font-weight: 600; }
.rfqform .field-error:empty { display: none; }
.rfqform .has-error input, .rfqform .has-error select, .rfqform .has-error textarea { border-color: var(--err); }
.rfqform .choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.rfqform .choice legend { padding: 0; margin-bottom: 8px; font: 500 13px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rfqform .radios { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.rfqform .radio, .rfqform .check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-2); background: var(--panel-2); font: 400 17px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.rfqform .check { padding: 8px 16px; }
.rfqform input[type="radio"], .rfqform input[type="checkbox"] { width: 22px; min-height: 22px; height: 22px; padding: 0; flex: none; accent-color: var(--pri); }
.rfqform .compliance { margin: 0 0 12px; padding: 14px 16px; border: 1px dashed var(--line-2); font-size: 16px; line-height: 1.6; }
.rfqform .compliance p { margin: 0; }
.rfqpage .privacy-note { margin: 16px 0 0; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.rfqform .form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rfqform .form-actions .btn { min-height: 48px; padding: 0 28px; }
.error-summary { margin: 0 0 8px; padding: 16px 20px; border: 1px solid var(--err); border-left: 4px solid var(--err); background: var(--panel); }
.error-summary:focus { outline: 3px solid var(--pri); outline-offset: 2px; }
.error-summary h2 { margin: 0 0 8px; font: 600 22px/1.2 var(--f-display); color: var(--err); }
.error-summary p { margin: 0 0 8px; }
.error-summary ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.error-summary a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 24px; }
.sentpage .refcard { display: grid; gap: 8px; padding: 24px; justify-items: start; }
.sentpage .ref { margin: 0; font: 600 clamp(34px, 7vw, 64px)/1.1 var(--f-mono); letter-spacing: .04em; color: var(--ok); overflow-wrap: anywhere; user-select: all; }
.sentpage .refmeta { margin: 0; color: var(--text-2); }
.sentpage .copy[hidden], .sentpage [data-print][hidden] { display: none; }
.sent-list, .sent-next { display: grid; gap: 12px; }
.sent-list h2, .sent-next h2 { margin: 0; }
.sent-next p { margin: 0; max-width: 70ch; line-height: 1.6; }
.sent-qty { margin: 0; font: 500 16px/1.4 var(--f-mono); white-space: nowrap; }
.sentpage .ql-line { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 700px) {
  .rfqform .fields { grid-template-columns: 1fr; }
  .rfqform .group { padding: 16px 14px 20px; }
  .rfqform .form-actions .btn { flex: 1 1 100%; }
}
@media print {
  .skip, .topbar, footer, .err-links, .eyebrow, .copy, [data-print], .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .sentpage .panel, .sentpage .ql-line { background: none; border-color: #000; }
  .sentpage .ref { color: #000; font-size: 48px; }
  .sentpage a { color: #000; text-decoration: none; }
}

/* ---------- RFQ form in the browser (F3, WP-F3-10): the country filter box, the note about a restored draft and the locked
   submit button. rfq-form.js adds the first two; without the script none of this is on the page. */
.cfilter { width: 100%; min-height: 48px; margin: 0 0 8px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line-2); font: 400 17px var(--f-body); color: var(--text); }
.cfilter:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.cfilter-none { margin: 4px 0 0; }
.cfilter-none:empty, .draft-note:empty { display: none; }
.draft-note { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--pri); background: var(--pri-soft); }
.rfqform .form-actions .btn[disabled] { opacity: .7; cursor: progress; }
main:focus { outline: none; }
/* A keyboard user sees where the focus is: a solid ring on every field of the list and the form (the 3 px glow alone is faint). */
.addform .qty:focus, .ql-edit input:focus, .cfilter:focus, .rfqform :is(input, select, textarea):focus, .rfqform input[type="date"]:focus-within { outline: 2px solid var(--pri); outline-offset: 2px; }
/* With the quote-list count in the top bar, a laptop (1201 to 1380 px) has no room for the NCAGE line as well. */
@media (max-width: 1380px) { .topbar:has(.qlcount) .meta { display: none; } }
/* Buttons and links that look like buttons on the F3 pages are 16 px (the base button is 15 px); labels stay small caps. */
.ql .btn, .quote-line .btn, .rfqpage .btn, .sentpage .btn, .ql-bar .btn, .addform .btn, .notice .btn, .ql-undo .btn, .err-links .btn { font-size: 16px; }

/* ---------- search suggestions (F2, WP-F2-08): the list box search.js adds under the search box. Without the script none of it is on
   the page. Every text is 16 px or more, every option is 48 px high at least, the list never leaves the width of the box. */
.search { position: relative; }
.sg-list { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 580px); overflow-y: auto; background: var(--panel-2); border: 1px solid var(--pri); box-shadow: 0 14px 34px var(--scrim); }
.sg-opt { display: grid; grid-template-columns: minmax(130px, 18ch) minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--text); }
.sg-opt:last-child { border-bottom: 0; }
.sg-opt:hover { background: var(--pri-soft); text-decoration: none; }
.sg-opt[aria-selected="true"] { background: var(--pri-soft); outline: 2px solid var(--pri); outline-offset: -2px; }
.sg-pn { font: 500 17px/1.4 var(--f-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.sg-desc { font: 400 16px/1.4 var(--f-body); color: var(--text-2); overflow-wrap: anywhere; }
.sg-nsn { font: 400 16px/1.4 var(--f-mono); color: var(--muted); }
@media (max-width: 700px) { .sg-opt { grid-template-columns: minmax(0, 1fr); } }
/* The hint under the search box of the landing page was 14 px (the home page's size); on the catalogue pages it is 16 px. */
.cat .search-hint { font-size: 16px; }