/* MVP Air Springs — "drawing sheet" industrial style.
   Brand colors are fixed; neutrals are cool, paper-like grays. */
:root {
  --navy: #13235b;
  --navy-deep: #0b1638;
  --red: #b73a36;
  --red-dark: #962e2b;
  --blue: #3f5195;

  --paper: #f5f6f8;
  --paper-2: #eceef2;
  --white: #ffffff;
  --ink: #0e1630;
  --ink-2: #3b4360;
  --ink-3: #5c6480;
  --rule: #d5d9e2;
  --rule-strong: #9aa2b8;
  --on-dark: #e9ecf5;
  --on-dark-2: #aeb6d0;
  --grid-dark: rgba(140, 160, 220, 0.09);
  --focus: #3f5195;

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 2px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0 0 .5em; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
.mono, code { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { top: 12px; color: #fff; }

/* Eyebrow: small technical label, like a drawing callout */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 .78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--red); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-dark .eyebrow { color: #e7807c; }

/* Placeholders for unconfirmed facts */
.tbc {
  display: inline-block; padding: 0 .4em; border: 1.5px dashed var(--rule-strong);
  color: var(--ink-3); font-style: normal; background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(63,81,149,.05) 6px 12px);
}
.on-dark .tbc { border-color: #56628c; color: var(--on-dark-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: var(--radius);
  font: 600 1.05rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-line:hover { background: var(--navy); color: #fff; }
.on-dark .btn-line { border-color: var(--on-dark-2); color: #fff; }
.on-dark .btn-line:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- Header ----------
   Deep navy with white text on every page. The sticker logo has a white
   outline, so it reads on the dark bar. On the home page the bar starts
   transparent over the hero video and turns navy once the page scrolls
   (js/common.js adds .scrolled). */
:root { --header-h: 73px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy-deep); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.site-header .brand { color: #fff; }
.brand img { height: 56px; width: auto; }
.brand-name { font: 700 1.2rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; border-left: 1px solid rgba(255,255,255,.25); padding-left: 12px; }
.brand-name small { display: block; font: 500 .66rem/1.4 var(--font-mono); color: var(--on-dark-2); letter-spacing: .08em; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { white-space: nowrap; }
/* the brand line gives way to the menu before the menu has to wrap */
@media (max-width: 1180px) { .brand-name { display: none; } }
.nav a:not(.btn) {
  font: 600 1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-dark); text-decoration: none; padding: 14px 12px; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
.nav .btn { margin-left: 10px; min-height: 44px; }
.site-header.over-video { background: transparent; border-bottom-color: transparent; transition: background-color .3s, box-shadow .3s; }
.site-header.over-video.scrolled, .site-header.over-video:has(.nav.open) { background: rgba(11,22,56,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.hero.under-header { margin-top: calc(-1 * var(--header-h)); padding-top: calc(clamp(28px, 3.5vw, 48px) + var(--header-h)); }
.nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); background: transparent; border-radius: var(--radius); cursor: pointer; color: #fff; }
.nav-toggle svg { margin: auto; }

@media (max-width: 900px) {
  .brand-name { display: none; }
  .nav-toggle { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-deep); border-bottom: 1px solid rgba(255,255,255,.12); padding: 8px var(--gutter) 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav a[aria-current="page"] { border-bottom-color: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--red); padding-left: 12px; }
  .nav .btn { margin: 16px 0 0; }
}

/* ---------- Dark "blueprint" sections ---------- */
.on-dark {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(var(--grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark a:not(.btn) { color: #c9d2f2; }

/* ---------- Hero ---------- */
.hero { padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero h1 .line2 { color: #c6cff0; display: block; }
.hero h1 .mark { color: var(--red); }
.hero .lede { font-size: 1.2rem; color: var(--on-dark-2); max-width: 36em; margin-bottom: 32px; }
/* Factory footage behind the hero, under a navy film that keeps the text readable.
   js/hero-video.js starts it; reduced motion and Save-Data keep the poster frame. */
.hero-video { position: absolute; inset: 0; z-index: 0; background: var(--navy-deep); }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(rgba(11,22,56,.55), rgba(11,22,56,0) 180px),
    linear-gradient(90deg, rgba(11,22,56,.88), rgba(11,22,56,.82) 50%, rgba(11,22,56,.6));
  background-size: 32px 32px, 32px 32px, auto, auto; }
.hero .wrap { position: relative; z-index: 1; }
/* The model sits low in its frame (the camera looks down on it), so the frame
   rides up beside the headline instead of centring on the text column. */
@media (min-width: 901px) { .hero .viewer3d { align-self: start; margin-top: -40px; } }
.hero-video-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(11,22,56,.6); color: #fff; cursor: pointer; }
.hero-video-toggle:hover { background: rgba(11,22,56,.85); }
.hero-video-toggle svg { width: 16px; height: 16px; }
.hero-video-toggle .i-play, .hero-video-toggle[aria-pressed="true"] .i-pause { display: none; }
.hero-video-toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 900px) {
  .hero-video::after { background-image: linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px),
    linear-gradient(rgba(11,22,56,.86), rgba(11,22,56,.86)); }
}
/* 3D air spring in the hero */
.viewer3d { margin: 0; }
.v3d-stage { position: relative; aspect-ratio: 4 / 5; max-height: 560px; margin: 0 auto;
  background: radial-gradient(closest-side, rgba(143,160,216,.28), rgba(143,160,216,.08) 60%, transparent 100%); }
.v3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; cursor: grab; touch-action: pan-y; }
.v3d-stage canvas:active { cursor: grabbing; }
/* Still of the model's opening view, shown until WebGL is ready, so the swap is invisible. */
.v3d-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; }
.viewer3d.ready canvas { opacity: 1; }
.viewer3d.ready .v3d-fallback { opacity: 0; }
.viewer3d figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px;
  font: 500 .8rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark-2); }
.v3d-views, .v3d-models { display: inline-flex; border: 1px solid #56628c; border-radius: var(--radius); }
.v3d-models button { font-family: var(--font-mono) !important; letter-spacing: 0 !important; }
.v3d-hint { flex-basis: 100%; }
.v3d-hint a { color: #c9d2f2; }
.v3d-views button, .v3d-models button { min-height: 44px; min-width: 64px; padding: 0 12px; background: transparent; color: var(--on-dark-2); border: 0; cursor: pointer;
  font: 600 .9rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
.v3d-views button + button, .v3d-models button + button { border-left: 1px solid #56628c; }
.v3d-views button[aria-pressed="true"], .v3d-models button[aria-pressed="true"] { background: #fff; color: var(--navy); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .v3d-stage { aspect-ratio: 1 / 1; max-width: 420px; }
}

/* ---------- Cross-reference search ---------- */
.xref { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 20px; box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -24px rgba(11,22,56,.55); max-width: 640px; }
.xref label { display: block; font: 600 1.05rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--navy); margin-bottom: 4px; }
.xref .hint { font-size: .92rem; color: var(--ink-3); margin: 0 0 12px; }
.xref-row { display: flex; gap: 8px; }
.xref input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px;
  font: 500 1.1rem/1 var(--font-mono); color: var(--ink);
  border: 2px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper);
}
.xref input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(63,81,149,.25); }
.xref input::placeholder { color: #7a8199; }
.xref .btn { min-height: 52px; }
.xref-brands { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font: 500 .75rem/1.4 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.xref-status { font-size: .95rem; color: var(--ink-2); margin: 14px 0 0; min-height: 1.4em; }
.xref-results { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.xref-results:empty { display: none; }
.xref-results li { border-bottom: 1px solid var(--rule); }
.xref-results a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center;
  padding: 12px 6px; text-decoration: none; color: var(--ink); min-height: 56px;
}
.xref-results a:hover, .xref-results a:focus-visible { background: var(--paper); }
.xref-results .from { font: 500 .95rem/1.3 var(--font-mono); }
.xref-results .from small { display: block; font: 500 .7rem/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.xref-results .arrow { color: var(--rule-strong); }
.xref-results .to { font: 600 1.15rem/1 var(--font-mono); color: var(--navy); justify-self: end; }
.xref-results mark { background: rgba(183,58,54,.14); color: inherit; padding: 0 1px; }
.xref-results .sample-flag { grid-column: 1 / -1; }
/* In the hero the search box is frosted glass over the factory video; the field stays light. */
.hero .xref { background: rgba(255,255,255,.07); color: var(--on-dark); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 20px 40px -24px rgba(0,0,0,.6); }
.hero .xref label { color: #fff; }
.hero .xref .hint, .hero .xref-brands { color: var(--on-dark-2); }
.hero .xref input { background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.4); }
.hero .xref input:focus { background: #fff; border-color: #8fa0d8; box-shadow: 0 0 0 3px rgba(143,160,216,.35); }
.hero .xref-status { color: var(--on-dark); }
.hero .xref-results { border-top-color: rgba(255,255,255,.2); }
.hero .xref-results li { border-bottom-color: rgba(255,255,255,.12); }
.hero .xref-results a { color: var(--on-dark); }
.hero .xref-results a:hover, .hero .xref-results a:focus-visible { background: rgba(255,255,255,.08); }
.hero .xref-results .from small { color: var(--on-dark-2); }
.hero .xref-results .arrow { color: rgba(255,255,255,.35); }
.hero .xref-results .to { color: #fff; }
.hero .xref-results mark { background: rgba(231,128,124,.35); }
@media (max-width: 520px) {
  .xref-row { flex-direction: column; }
  .xref-results a { grid-template-columns: 1fr auto; }
  .xref-results .arrow { display: none; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 6vw, 80px) 0; }
/* Heading and intro side by side, the intro centred on the heading. */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 40px; }
.section-head p { color: var(--ink-2); font-size: 1.15rem; max-width: 34em; margin: 0; }
.on-dark .section-head p { color: var(--on-dark-2); }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; gap: 8px; } }

/* Private label manufacturing: one quiet panel, copy on the left, drawing on the right */
.range { padding-top: 0; }
.pl-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 40px;
  background: #fff; border: 1px solid var(--rule-strong); padding: clamp(28px, 5vw, 56px); position: relative; }
.pl-panel::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); pointer-events: none; }
.pl-copy { position: relative; }
.pl-copy h2 { margin-bottom: 16px; }
.pl-text { color: var(--ink-2); font-size: 1.12rem; max-width: 34em; margin-bottom: 28px; }
/* Half-section air spring after the catalog drawings: bead plate with studs,
   rubber sleeve (two strokes make the wall), piston with the bumper cut. */
.pl-art { position: relative; display: grid; place-items: center; }
.pl-art svg { width: 100%; max-width: 260px; height: auto; }
.pl-art path, .pl-art rect, .pl-art circle { fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linejoin: round; }
.pl-art line { stroke: var(--navy); stroke-width: 1; }
.pl-art .soft { stroke: var(--rule-strong); stroke-width: 1.2; }
.pl-art .cl { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.pl-art .solid, .pl-art .bead { fill: #fff; }
.pl-art .plate { fill: var(--paper-2); }
.pl-art .hatch { fill: url(#pl-hatch); }
.pl-art .wall { stroke-width: 7; stroke-linecap: butt; }
.pl-art .wall-in { stroke: var(--paper-2); stroke-width: 3.6; stroke-linecap: butt; }
.pl-art .brand-area { stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 6 4; fill: #fbf3f3; }
.pl-art .mask { fill: #fff; stroke: none; }
.pl-art text { font: 600 15px/1 var(--font-mono); letter-spacing: .12em; fill: var(--red-dark); stroke: none; }
.pl-art .pn { font-size: 10px; fill: var(--ink-3); }
@media (max-width: 800px) {
  .pl-panel { grid-template-columns: 1fr; gap: 28px; }
  .pl-art { order: -1; }
  .pl-art svg { max-width: 190px; }
}

/* Engineered for heavy-duty performance: Onur's cutaway (numbers and leaders are
   in the image, background cut away) beside the matching numbered list. */
.marking { padding-top: 0; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.mk-figure { margin: 0; }
.mk-figure img { width: 100%; height: auto; display: block; }
.mk-copy h2 { margin-bottom: 14px; }
.nowrap { white-space: nowrap; }
.mk-text { color: var(--ink-2); font-size: 1.12rem; max-width: 34em; margin: 0 0 12px; }
.mk-copy .num-list { margin-bottom: 28px; }
@media (max-width: 800px) { .mk-grid { grid-template-columns: 1fr; } }

/* Route map: Bursa → USA, Canada, Mexico → Elk Grove Village → across the USA.
   Stages are cumulative classes s1…s4 set by js/route-map.js. */
.route-map { margin: 0 0 32px; border: 1px solid var(--rule-strong); padding: clamp(12px, 3vw, 28px); }
.map-holder { aspect-ratio: 1000 / 447; overflow: hidden; }
.map-holder svg { width: 100%; height: 100%; display: block; }
.route-map .cam { transform-origin: 0 0; transform-box: view-box; transition: transform 1.9s cubic-bezier(.6,0,.2,1); }
.route-map .land { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity 1.2s; }
.route-map .world { stroke: #4a5c9e; stroke-width: 3.6; }
.route-map .fine { opacity: 0; stroke-width: 3.6; }
.route-map .fine.usa { stroke: #6f82c8; }
.route-map .fine.other { stroke: #34447e; }
/* Routes keep normal (scaling) strokes: pathLength-based dashes break with non-scaling-stroke. */
.route-map .route { fill: none; stroke: #e7807c; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.route-map .dist .route { stroke-width: 1.4; }
.route-map .dist { opacity: 0; }
.route-map.s4 .dist { opacity: 1; }
.route-map .pin path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-map .pin .ring { stroke: #fff; stroke-width: 17; }
.route-map .pin .dot { stroke: var(--red); stroke-width: 11; }
.route-map .dest .dot { stroke: #8fa0d8; }
.route-map .pin, .route-map .city, .route-map .layer { transition: opacity .6s; }
.route-map .pin text { fill: #fff; font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; paint-order: stroke; stroke: var(--navy-deep); stroke-width: 8px; stroke-linejoin: round; }
.route-map .pin text.sub { fill: var(--on-dark-2); font-weight: 500; }
.route-map .warehouse text { stroke-width: 0; }
.route-map .label-bg { fill: var(--navy-deep); fill-opacity: .9; stroke: #56628c; stroke-width: .6; }
.route-map .city { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.route-map .factory, .route-map .dest, .route-map .warehouse { opacity: 0; }

.route-map.s1 .factory { opacity: 1; }
.route-map.s2 .export .route { transition: stroke-dashoffset 2.2s cubic-bezier(.45,0,.25,1); stroke-dashoffset: 0; }
.route-map.s2 .export .r-usa { transition-delay: .2s; }
.route-map.s2 .export .r-mexico { transition-delay: .4s; }
.route-map.s2 .dest { opacity: 1; transition-delay: 2.1s; }
.route-map.s3 .world { opacity: 0; }
.route-map.s3 .fine { opacity: 1; }
.route-map.s3 .export { opacity: 0; }
.route-map.s3 .warehouse { opacity: 1; transition-delay: 1.5s; }
.route-map.s4 .dist .route { transition: stroke-dashoffset 1.4s cubic-bezier(.45,0,.25,1) calc(var(--i) * 70ms); stroke-dashoffset: 0; }
.route-map.s4 .city { opacity: 1; transition-delay: calc(1.1s + var(--i) * 70ms); }
.route-map.instant *, .route-map.instant { transition: none !important; }

.route-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.map-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 560px; }
.map-steps button {
  width: 100%; min-height: 56px; text-align: left; cursor: pointer; padding: 10px 12px;
  background: transparent; color: var(--on-dark-2); border: 0; border-top: 2px solid #34447e;
  font: 500 .92rem/1.3 var(--font-body); transition: color .2s, border-color .2s;
}
.map-steps button span { display: block; font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; color: #8fa0d8; margin-bottom: 6px; }
.map-steps button:hover { color: #fff; }
.map-steps button[aria-current="step"] { color: #fff; border-top-color: #e7807c; }
.map-steps button[aria-current="step"] span { color: #e7807c; }
@media (max-width: 800px) { .map-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .route-map .pin text, .route-map .label-bg { display: none; }
  .route-map .land { stroke-width: 1.7; }
  .route-map .pin .ring { stroke-width: 10; }
  .route-map .pin .dot { stroke-width: 6; }
  .route-map .city { stroke-width: 4; }
}

/* Product lines: one tractor-trailer with the cab, truck and trailer air springs
   called out. The drawing draws itself in once; js/lines-drive.js then rolls it
   over potholes, and the pick cards below highlight a product line on the rig. */
.lines { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }
.rig { background: #fff; border: 1px solid var(--rule-strong); position: relative; }
.rig::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); pointer-events: none; z-index: 1; }
.rig-stage { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 18px 16px 10px;
  background-image: linear-gradient(var(--paper-2) 1px, transparent 1px), linear-gradient(90deg, var(--paper-2) 1px, transparent 1px); background-size: 16px 16px; }
.rig-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.rig .draw * { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.rig .draw .rib { stroke: var(--rule-strong); stroke-width: 1; }
.rig .draw .ghost { stroke: var(--rule-strong); }
.rig .road { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; }
.rig .pits { fill: var(--rule); stroke: none; }
.rig .lane { stroke: var(--rule-strong); stroke-width: 1.4; stroke-dasharray: 12 10; fill: none; }
.rig .chassis, .rig .axle, .rig .steer, .rig .spring { transform-box: view-box; }
.rig .spring .lobe { fill: var(--red); stroke: var(--red-dark); stroke-width: 1.2; transition: fill .2s, filter .2s; }
.rig .spring .plate { fill: var(--ink-2); }
.rig .callout .leader, .rig .callout .bracket { stroke: var(--red); stroke-width: 1; fill: none; }
.rig .callout .dot { fill: var(--red); }
.rig .callout .pill { fill: #fff; stroke: var(--red); stroke-width: 1; transition: fill .2s; }
.rig .callout text { font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em; fill: var(--red-dark); transition: fill .2s; }
.rig .callout { transition: opacity .25s; }
/* a picked product line lights up; the others step back */
.rig svg[data-show] .callout { opacity: .3; }
.rig svg[data-show="cab"] .callout[data-group="cab"], .rig svg[data-show="truck"] .callout[data-group="truck"], .rig svg[data-show="trailer"] .callout[data-group="trailer"] { opacity: 1; }
.rig svg[data-show="cab"] .callout[data-group="cab"] .pill, .rig svg[data-show="truck"] .callout[data-group="truck"] .pill, .rig svg[data-show="trailer"] .callout[data-group="trailer"] .pill { fill: var(--red); }
.rig svg[data-show="cab"] .callout[data-group="cab"] text, .rig svg[data-show="truck"] .callout[data-group="truck"] text, .rig svg[data-show="trailer"] .callout[data-group="trailer"] text { fill: #fff; }
.rig svg[data-show="cab"] .spring[data-group="cab"] .lobe, .rig svg[data-show="truck"] .spring[data-group="truck"] .lobe, .rig svg[data-show="trailer"] .spring[data-group="trailer"] .lobe { fill: #e0524c; filter: drop-shadow(0 0 3px rgba(183,58,54,.9)); }

/* Phones: the whole rig fits the width. The drawing's own labels would be too small
   there, so short HTML labels sit where its pills are (x from the pill centres,
   just under the road, via container width units). */
.rig-labels { display: none; }
@media (max-width: 720px) {
  .rig-stage { overflow: visible; padding: 14px 10px 18px; container-type: inline-size; position: relative; }
  .rig .callout .pill, .rig .callout text { display: none; }
  .rig-labels { display: block; position: absolute; left: 10px; right: 10px; top: calc(14px + (100cqw - 20px) * 0.2722 * 0.97); height: 0; }
  .rig-label { position: absolute; left: var(--x); transform: translate(-50%, -50%); padding: 3px 8px; border: 1px solid var(--red); border-radius: 999px; background: #fff;
    font: 600 .64rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red-dark); white-space: nowrap; transition: background-color .2s, color .2s, opacity .25s; }
  .rig:has(svg[data-show]) .rig-label { opacity: .4; }
  .rig:has(svg[data-show="cab"]) .rig-label[data-group="cab"], .rig:has(svg[data-show="truck"]) .rig-label[data-group="truck"], .rig:has(svg[data-show="trailer"]) .rig-label[data-group="trailer"] { opacity: 1; background: var(--red); color: #fff; }
}
.line-picks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pick { width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 14px 14px 18px; color: var(--ink); font: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.pick:hover, .pick:focus-visible { border-color: var(--navy); box-shadow: 0 12px 26px -20px rgba(11,22,56,.6); transform: translateY(-2px); }
.pick[aria-pressed="true"] { border-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.pick-photo { display: block; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--rule); margin-bottom: 14px; overflow: hidden; }
.pick-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .35s; }
.pick:hover .pick-photo img { transform: scale(1.04); }
.pick-title { font: 700 1.5rem/1.05 var(--font-display); text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.pick-text { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) {
  .pick { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 12px; }
  .pick-photo { grid-row: 1 / span 2; width: 104px; height: 104px; aspect-ratio: auto; margin: 0; }
  .pick-title { align-self: end; }
}
@media (max-width: 900px) { .line-picks { grid-template-columns: 1fr; gap: 12px; } }

@media (prefers-reduced-motion: no-preference) {
  .rig.armed .draw *, .rig.armed .road { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rig.armed .spring, .rig.armed .callout { opacity: 0; }
  .rig.in .draw *, .rig.in .road { transition: stroke-dashoffset 1.2s cubic-bezier(.45,0,.25,1); stroke-dashoffset: 0; }
  .rig.in .spring { opacity: 1; transition: opacity .4s 1s; }
  .rig.in .callout { opacity: 1; transition: opacity .5s 1.2s; }
  .rig.armed .rig-label { opacity: 0; }
  .rig.in .rig-label { opacity: 1; transition: opacity .5s 1.2s; }
}

/* Why MVP Air Springs: six manufacturer facts as big figures */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: rgba(140,160,220,.22); border: 1px solid rgba(140,160,220,.22); }
.pillar { background: var(--navy-deep); padding: 30px 28px 32px; display: flex; flex-direction: column; position: relative; }
.pillar .icon { width: 30px; height: 30px; color: #e7807c; margin-bottom: 22px; }
.pillar-label { font: 500 .74rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--on-dark-2); }
.pillar-value { font: 700 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--font-display); text-transform: uppercase; color: #fff; margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.pillar p { color: var(--on-dark-2); margin: 0; }
.pillar::after { content: ""; position: absolute; left: 28px; top: 0; width: 36px; height: 3px; background: var(--red); }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pillars.values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pillars.values { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } .pillar { padding: 24px 20px 26px; } .pillar::after { left: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .pillars.armed .pillar { opacity: 0; transform: translateY(12px); }
  .pillars.in .pillar { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
  .pillars.in .pillar:nth-child(2) { transition-delay: .08s; } .pillars.in .pillar:nth-child(3) { transition-delay: .16s; }
  .pillars.in .pillar:nth-child(4) { transition-delay: .24s; } .pillars.in .pillar:nth-child(5) { transition-delay: .32s; }
  .pillars.in .pillar:nth-child(6) { transition-delay: .40s; }
}

/* ---------- Drawing-sheet card (signature element) ---------- */
.sheet { background: #fff; border: 1px solid var(--rule-strong); position: relative; }
.sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--rule); pointer-events: none; }
.titleblock { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--rule-strong); font-family: var(--font-mono); position: relative; background: #fff; }
.titleblock > div { padding: 8px 12px; }
.titleblock > div + div { border-left: 1px solid var(--rule-strong); }
.titleblock .lbl { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.titleblock .val { font-weight: 500; font-size: 1rem; color: var(--ink); }

.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
/* Home page showcase: one row that drifts sideways (4 cards visible on desktop). */
.rail { position: relative; }
.catalog-rail {
  display: grid; grid-auto-flow: column;
  grid-template-columns: none; grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.catalog-rail > li { min-width: 0; }
/* Cards fade in and out at the edges while the row drifts. */
.catalog-rail.drifting {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.rail-btn .i-play, .rail-btn[aria-pressed="true"] .i-pause { display: none; }
.rail-btn[aria-pressed="true"] .i-play { display: block; }
.catalog-rail:focus-visible { outline-offset: 6px; }
.rail-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.rail-btn {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--navy); border: 1px solid var(--navy); border-radius: var(--radius);
  transition: background-color .18s, color .18s;
}
.rail-btn svg { width: 22px; height: 22px; }
.rail-btn:hover:not(:disabled) { background: var(--navy); color: #fff; }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-all { margin-left: auto; }
@media (max-width: 1100px) { .catalog-rail { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 800px) { .catalog-rail { grid-auto-columns: calc((100% - 20px) / 2.2); } }
@media (max-width: 560px) { .catalog-rail { grid-auto-columns: 78%; } }

.part-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); transition: border-color .18s, box-shadow .18s; }
.part-card:hover { border-color: var(--navy); box-shadow: 0 10px 28px -18px rgba(11,22,56,.5); color: var(--ink); }
.part-card .thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; position: relative; }
.part-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.part-card .titleblock { margin-top: auto; }
.part-card .part-no { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.part-card .xrefs { padding: 10px 12px 12px; border-top: 1px solid var(--rule); font: 500 .8rem/1.6 var(--font-mono); color: var(--ink-2); position: relative; background: #fff; }
.part-card .xrefs span { color: var(--ink-3); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; margin-right: 6px; }

.drawing-missing { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--ink-3); font: 500 .8rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.drawing-missing svg { width: 64%; max-width: 260px; margin: 0 auto 10px; color: var(--rule-strong); }

.sample-flag { display: inline-block; font: 500 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; padding: 5px 7px; background: #fbeceb; color: var(--red-dark); border: 1px solid #efc8c6; }
.part-card .sample-flag { position: absolute; top: 14px; left: 14px; }

/* ---------- Catalog page tools ---------- */
.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.page-head p { color: var(--on-dark-2); max-width: 40em; font-size: 1.1rem; margin: 0; }

/* ---------- About page ---------- */
.about-head .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-head h1 { margin-bottom: 18px; }
.about-photo { margin: 0; aspect-ratio: 4 / 3; border: 1px solid rgba(140,160,220,.35); overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-missing { display: grid; place-items: center; border: 1.5px dashed #56628c; color: var(--on-dark-2);
  font: 500 .8rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 800px) { .about-head .wrap { grid-template-columns: 1fr; } }
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.mv-item { background: #fff; padding: clamp(28px, 4vw, 44px); position: relative; }
.mv-item::after { content: ""; position: absolute; left: clamp(28px, 4vw, 44px); top: 0; width: 36px; height: 3px; background: var(--red); }
.mv-label { font: 500 .78rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 14px; }
.mv-text { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 500; color: var(--navy); margin: 0; }
@media (max-width: 700px) { .mv { grid-template-columns: 1fr; } }
.values .pillar-value { font-size: clamp(2.1rem, 3.6vw, 2.8rem); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chip {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); background: #fff; border-radius: var(--radius);
  font: 600 .95rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.count { font: 500 .85rem/1 var(--font-mono); color: var(--ink-3); margin: 0 0 16px; }
.empty { padding: 40px; border: 1px dashed var(--rule-strong); text-align: center; color: var(--ink-2); background: #fff; }

/* ---------- Product page ---------- */
.crumbs { font: 500 .8rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: 20px 0 0; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.product { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: 24px 0 96px; align-items: start; }
.product-drawing .canvas { aspect-ratio: 4 / 3; padding: 28px; display: grid; place-items: center; background-image: linear-gradient(var(--paper-2) 1px, transparent 1px), linear-gradient(90deg, var(--paper-2) 1px, transparent 1px); background-size: 24px 24px; background-color: #fff; }
.product-drawing .canvas img { width: 100%; height: 100%; object-fit: contain; }
.product-drawing .titleblock { grid-template-columns: 2fr 1fr 1fr; }
.view-tabs { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 1px solid var(--rule-strong); }
.view-tabs button { min-height: 44px; padding: 0 18px; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  font: 600 1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.view-tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--red); }
.product-3d { padding: 16px; border: 1px solid var(--rule-strong); }
.product-3d .v3d-stage { aspect-ratio: 4 / 3; max-height: none; }
.product-3d canvas { opacity: 0; }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 14px 0 4px; font-size: .9rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.units-note { font-size: .88rem; color: var(--ink-3); margin: 0; }
.product-drawing .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.product-info h1 { font-size: clamp(2.6rem, 6vw, 4rem); text-transform: none; margin-bottom: 6px; }
.product-info h1 .mono { font-weight: 600; letter-spacing: -.01em; }
.product-info .desc { color: var(--ink-2); font-size: 1.1rem; }
.spec { width: 100%; border-collapse: collapse; margin: 0 0 32px; background: #fff; border: 1px solid var(--rule); }
.spec caption { text-align: left; font: 700 1.25rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--navy); padding: 0 0 10px; }
.spec th, .spec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec thead th { font: 500 .7rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); background: var(--paper); }
.spec tbody th { font-weight: 500; color: var(--ink-2); width: 45%; }
.spec td { font-family: var(--font-mono); font-weight: 500; }
.spec td .alt { color: var(--ink-3); margin-left: 8px; font-size: .9em; }
.spec td.missing { font-family: var(--font-body); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.cta-box { border: 1px solid var(--navy); padding: 22px; background: #fff; }
.cta-box h2 { font-size: 1.5rem; margin-bottom: 6px; }
.cta-box p { color: var(--ink-2); margin-bottom: 16px; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

/* ---------- Form ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; padding: 56px 0 96px; align-items: start; }
.form-aside h2 { font-size: 1.6rem; }
.form-aside ol, .num-list { padding-left: 0; list-style: none; counter-reset: s; margin: 0 0 32px; }
.form-aside li, .num-list li { counter-increment: s; padding: 14px 0 14px 48px; position: relative; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.form-aside li::before, .num-list li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 500 .9rem/1.5 var(--font-mono); color: var(--red); }
.form-aside li strong, .num-list li strong { display: block; color: var(--ink); }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; gap: 32px; } }

.form { background: #fff; border: 1px solid var(--rule); padding: clamp(20px, 4vw, 40px); }
fieldset { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
legend { font: 700 1.3rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--navy); padding: 0 0 6px; border-bottom: 2px solid var(--navy); width: 100%; margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 20px; }
.field > label, .field > .label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--red); }
.field .opt { color: var(--ink-3); font-weight: 400; font-size: .9em; }
.field .help { font-size: .9rem; color: var(--ink-3); margin: -2px 0 8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink);
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,81,149,.25); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field .error { display: none; color: var(--red-dark); font-size: .92rem; font-weight: 600; margin-top: 6px; }
.field .error.show { display: flex; gap: 6px; align-items: flex-start; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
@media (max-width: 480px) { .checks { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
.hp { position: absolute; left: -9999px; }
.error-summary { border: 2px solid var(--red); padding: 18px 20px; margin-bottom: 28px; background: #fdf3f2; }
.error-summary h2 { font-size: 1.3rem; color: var(--red-dark); margin-bottom: 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--red-dark); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-note { font-size: .9rem; color: var(--ink-3); margin: 0; }
.form-part { margin: 4px 0 0; padding: 12px 16px; background: var(--paper); border-left: 3px solid var(--red); color: var(--ink-2); }
.form-part strong { white-space: nowrap; }
.success { border: 2px solid var(--navy); padding: 28px; background: #fff; }
.success h2 { color: var(--navy); }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(44px, 6vw, 64px) 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { margin: 0 0 8px; }
.cta-band p { margin: 0; color: var(--on-dark-2); max-width: 36em; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer ---------- */
/* Outline maps under the warehouse and factory addresses (Natural Earth, public domain;
   regenerate with the footer map script noted in README). */
.footer-map { display: block; width: 100%; max-width: 210px; height: auto; margin-top: 18px; }
.footer-map .land { fill: var(--blue); stroke: var(--blue); stroke-width: .6; stroke-linejoin: round; }
.footer-map .pin-ring { fill: #fff; }
.footer-map .pin-dot { fill: var(--red); }
.site-footer { background: var(--white); border-top: 4px solid var(--navy); padding: 56px 0 28px; font-size: .95rem; color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h2 { font: 600 .78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid address { font-style: normal; }
.footer-grid .brand img { height: 76px; }
.footer-tag { font: 700 1.25rem/1.2 var(--font-display); text-transform: uppercase; color: var(--navy); margin-top: 16px; }
.disclaimer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.disclaimer p { margin: 0; max-width: 62em; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.notice { background: #fff8e6; border: 1px solid #ecd9a4; color: #5b4a12; padding: 12px 16px; font-size: .95rem; margin: 16px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer .footer-grid, .cta-box, .product-drawing .actions, .crumbs, .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .product { grid-template-columns: 1fr; padding: 0; gap: 16px; }
  .sheet, .spec { break-inside: avoid; }
  .site-footer { border: 0; padding: 0; }
}