/* ==========================================================================
   NGUNI MARKETING — v3 "Highway Gantry & Field Docket"
   Design direction: GEMINI (Mercury Designer, Stage 2). This stylesheet is a
   faithful implementation of docs/DESIGN-DRAFT.md §1 tokens + §3 sketches.
   Build: MiMo (developer) — no framework, no build step.

   Signature moves:
     - Steel billboard gantry heroes (ink bezel, corner gussets, hard offset shadow)
     - 6.0s roadside glance-meter (the one loud kinetic moment)
     - Printed perforated rate-card docket (mono, filterable)
     - B1/B2/B8 highway mileage corridor
     - NamFree steel-blue chromatic sub-brand flip
   ========================================================================== */

/* ---------- FONTS (all OFL, local, relative @font-face — never hotlinked) ---------- */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/syne-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- TOKENS (Gemini §1.1 — the single source of truth) ---------- */
:root {
  /* Colour — sampled from Nguni brand + Namibian landscape */
  --color-bg-sand: #EFE6DC;          /* daylight canvas — warm Kalahari sand */
  --color-bg-docket: #F8F3ED;        /* elevated paper docket / spec sheet */
  --color-bg-ink: #17110E;           /* structural steel, gantry bezel, dark sections */
  --color-bg-charcoal: #221A16;      /* elevated dark inside gantry / footer cards */
  --color-bg-plum-dusk: #7E2A38;     /* sundowner shadow accent */

  /* Brand accents */
  --color-brand-terracotta: #C9451F; /* primary bull terracotta — CTAs, active pins */
  --color-brand-ember: #E06030;      /* hover / high-vis signal / glance bar */
  --color-brand-amber: #F2A922;      /* highway route shield / reflective marker */

  /* Sub-brand — NamFreeWater steel-blue flip */
  --color-namfree-blue: #2F72A5;
  --color-namfree-deep: #1B496B;
  --color-namfree-ice: #EBF3F9;
  --color-namfree-cyan: #56A3D9;

  /* Text hierarchy */
  --color-text-primary: #17110E;
  --color-text-secondary: #4A3C35;
  --color-text-muted: #7A685F;
  --color-text-on-dark: #F8F3ED;
  --color-text-on-dark-muted: #B8A99E;

  /* Structural borders */
  --color-border-hair: #D5C7B8;      /* 1px docket grid rule on light */
  --color-border-strong: #17110E;    /* 2px structural steel frame */
  --color-border-dark-hair: #342923; /* 1px steel seam on ink */

  /* Semantic status (inventory / slot availability) */
  --color-status-available: #1F7A4C;
  --color-status-limited: #D97706;
  --color-status-booked: #991B1B;

  /* Typography */
  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Fluid type scale — roadside visibility down to docket precision */
  --text-hero: clamp(1.9rem, 5.2vw + 1rem, 4.75rem); /* phone-safe: 10-letter uppercase words fit 360px */
  --text-h1: clamp(2.125rem, 4vw + 0.75rem, 3.75rem);
  --text-h2: clamp(1.625rem, 2.5vw + 0.5rem, 2.625rem);
  --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-docket: 0.875rem;
  --text-plate: 0.75rem;

  /* Geometry — industrial, sharp steel corners */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Spacing */
  --space-section-y: clamp(4rem, 7vw, 7rem);
  --space-container-x: clamp(1.25rem, 4vw, 3.5rem);
  --container-max: 1360px;

  /* Hard offset structural shadows (never blurry SaaS elevation) */
  --shadow-gantry: 6px 6px 0px 0px #17110E;
  --shadow-gantry-terracotta: 6px 6px 0px 0px #C9451F;
  --shadow-gantry-namfree: 6px 6px 0px 0px #1B496B;
  --shadow-docket: 0 1px 0 0 #D5C7B8, 4px 4px 0 0 rgba(23, 17, 14, 0.08);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-sand);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; }
:focus-visible { outline: 3px solid var(--color-brand-ember); outline-offset: 2px; }

/* ---------- LAYOUT PRIMITIVES ---------- */
.shell { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-container-x); }
.section { padding-block: var(--space-section-y); }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Section kicker — the mono plate label that opens most sections */
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-plate);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-terracotta);
  margin-bottom: 0.75rem;
}
.kicker--ember { color: var(--color-brand-ember); }
.kicker--amber { color: var(--color-brand-amber); }
.kicker--namfree { color: var(--color-namfree-cyan); }

/* ---------- BUTTONS (hard-offset steel, never pills) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-docket);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-brand-terracotta);
  color: var(--color-bg-docket);
  box-shadow: 4px 4px 0px 0px #17110E;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-brand-ember); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); box-shadow: none; }
.btn--ghost:hover { background: var(--color-bg-docket); color: var(--color-bg-ink); }
.btn--ghost-dark { background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong); box-shadow: none; }
.btn--ghost-dark:hover { background: var(--color-bg-ink); color: var(--color-bg-docket); }
.btn--namfree { background: var(--color-namfree-blue); border-color: var(--color-namfree-deep); box-shadow: 4px 4px 0px 0px #1B496B; }
.btn--namfree:hover { background: var(--color-namfree-deep); }
.btn--sm { padding: 0.55rem 0.9rem; font-size: 0.72rem; }

/* ---------- 1. TOP DISPATCH BAR ---------- */
.dispatch {
  background: var(--color-bg-ink);
  color: var(--color-text-on-dark);
  border-bottom: 1px solid var(--color-border-dark-hair);
  font-family: var(--font-mono);
  font-size: var(--text-plate);
}
.dispatch__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.dispatch__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.dispatch__hq { text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-on-dark-muted); }
.dispatch__tag { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dispatch__live {
  width: 8px; height: 8px; flex: none;
  background: var(--color-brand-ember);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.dispatch__right { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.dispatch__right a { text-decoration: none; transition: color var(--dur-fast); }
.dispatch__right a:hover { color: var(--color-brand-ember); }
.dispatch__tel b { color: var(--color-brand-ember); }

/* ---------- 2. STRUCTURAL HEADER ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239, 230, 220, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--color-border-strong);
}
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; min-width: 0; }
.brand__mark { height: 3rem; width: auto; flex-shrink: 0; transition: transform var(--dur); }
.brand:hover .brand__mark { transform: scale(1.05); }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(0.95rem, 4vw, 1.4rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
@media (max-width: 359px) { .brand__name { white-space: normal; } } /* wrap to 2 lines rather than overflow */
.brand__name span { color: var(--color-brand-terracotta); }
.brand__tag { display: none; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-text-secondary); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .brand__tag { display: block; } }

.nav { display: none; align-items: center; gap: 0.15rem; }
.nav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav a:hover { background: var(--color-bg-ink); color: var(--color-text-on-dark); }
.nav a.is-active { background: var(--color-bg-ink); color: var(--color-text-on-dark); }
.nav__flag {
  background: var(--color-brand-terracotta); color: var(--color-bg-docket);
  font-size: 0.58rem; padding: 0.15rem 0.35rem; line-height: 1; letter-spacing: 0.06em;
}
.nav__namfree { color: var(--color-namfree-blue); border: 1px solid rgba(47, 114, 165, 0.3); background: rgba(235, 243, 249, 0.6); }
.nav__namfree:hover, .nav__namfree.is-active { background: var(--color-namfree-blue); color: #fff; }
.nav__dot { width: 8px; height: 8px; background: var(--color-namfree-blue); flex: none; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
/* Header CTA duplicates the drawer's CTA — hide it below xl so brand + menu fit 360px */
.header__actions > .btn { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--color-bg-docket); color: var(--color-text-primary);
  border: 2px solid var(--color-border-strong); border-radius: var(--radius-xs);
}
.menu-btn svg { width: 1.5rem; height: 1.5rem; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--color-bg-ink);
  padding: 1.5rem var(--space-container-x);
  display: none; flex-direction: column; gap: 0.5rem;
  overflow-y: auto;
}
.drawer.is-open { display: flex; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer__title { font-family: var(--font-mono); font-size: var(--text-plate); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brand-ember); }
.drawer__close { background: none; border: 2px solid var(--color-border-dark-hair); color: var(--color-text-on-dark); width: 2.75rem; height: 2.75rem; }
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0.75rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase;
  color: var(--color-text-on-dark);
  border-bottom: 1px solid var(--color-border-dark-hair);
}
.drawer a:hover { background: var(--color-bg-charcoal); }
.drawer__badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; padding: 0.2rem 0.45rem; background: var(--color-brand-terracotta); color: var(--color-bg-docket); letter-spacing: 0.06em; }
.drawer__badge--namfree { background: var(--color-namfree-blue); }
.drawer__cta { margin-top: 1.5rem; justify-content: center; border: none; }

/* ---------- 3. GANTRY HERO (the steel billboard frame) ---------- */
.gantry {
  background: var(--color-bg-ink);
  color: var(--color-text-on-dark);
  border-bottom: 4px solid var(--color-brand-terracotta);
  overflow: hidden;
}
.gantry__plate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding-bottom: 0.75rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-dark-hair);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-text-on-dark-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.gantry__plate-left, .gantry__plate-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.plate-tag { background: var(--color-brand-terracotta); color: var(--color-bg-docket); font-weight: 700; padding: 0.15rem 0.5rem; letter-spacing: 0.1em; }
.plate-status { color: var(--color-brand-amber); font-weight: 700; }

.gantry__frame {
  position: relative;
  border: 4px solid var(--color-border-dark-hair);
  background: var(--color-bg-charcoal);
  box-shadow: 8px 8px 0px 0px var(--color-brand-terracotta);
  margin-bottom: 2.5rem;
}
/* corner gusset bolts */
.gantry__frame::before, .gantry__frame::after {
  content: ''; position: absolute; top: 0.5rem; z-index: 20;
  width: 0.75rem; height: 0.75rem;
  border: 1px solid rgba(184, 169, 158, 0.5); background: var(--color-bg-ink);
}
.gantry__frame::before { left: 0.5rem; }
.gantry__frame::after { right: 0.5rem; }

.gantry__img-wrap { position: relative; min-height: 34rem; display: flex; flex-direction: column; justify-content: flex-end; }
.gantry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gantry__scrim-v { position: absolute; inset: 0; background: linear-gradient(to top, #17110E 0%, rgba(23, 17, 14, 0.75) 45%, transparent 100%); }
.gantry__scrim-h { position: absolute; inset: 0; background: linear-gradient(to right, rgba(23, 17, 14, 0.9) 0%, rgba(23, 17, 14, 0.4) 45%, transparent 100%); }
.gantry__content { position: relative; z-index: 10; padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 2rem; align-items: end; }
.gantry__eyebrow {
  display: inline-flex; align-items: center;
  background: rgba(23, 17, 14, 0.9); border: 1px solid var(--color-brand-ember);
  color: var(--color-brand-ember);
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.4rem 0.75rem; margin-bottom: 1.25rem;
  width: fit-content;
}
.gantry__title { font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.03em; color: var(--color-text-on-dark); overflow-wrap: anywhere; hyphens: auto; }
.gantry__title em { font-style: normal; color: var(--color-brand-ember); text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.gantry__lede { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.6; color: var(--color-bg-sand); max-width: 42rem; margin-top: 1.25rem; }
.gantry__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* ---------- 4. THE 6-SECOND GLANCE-METER (signature) ---------- */
.glance {
  background: rgba(23, 17, 14, 0.96);
  border: 2px solid var(--color-brand-ember);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.glance__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border-dark-hair);
  font-family: var(--font-mono); font-size: var(--text-plate);
}
.glance__label { color: var(--color-brand-ember); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.glance__counter { color: var(--color-text-on-dark); background: var(--color-bg-charcoal); padding: 0.15rem 0.5rem; font-weight: 700; white-space: nowrap; }
.glance__body { min-height: 5.5rem; display: flex; flex-direction: column; justify-content: center; }
.glance__text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--color-text-on-dark); text-transform: none; letter-spacing: 0; }
.glance__track { height: 6px; background: var(--color-border-dark-hair); overflow: hidden; }
.glance__bar { height: 100%; width: 0%; background: var(--color-brand-ember); }
.glance__steps { display: flex; gap: 0.4rem; }
.glance__step {
  flex: 1; min-width: 44px; padding: 0.4rem 0.25rem;
  background: transparent; border: 1px solid var(--color-border-dark-hair);
  color: var(--color-text-on-dark-muted);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  transition: all var(--dur-fast);
}
/* Touch devices: full 44px pill height (WCAG 2.5.5) */
@media (pointer: coarse) {
  .glance__step { min-height: 44px; }
  .gallery-filter, .service-pill span { min-height: 44px; display: inline-flex; align-items: center; }
  .map-pin { min-width: 44px; min-height: 44px; }
}
.glance__step:hover { border-color: var(--color-brand-ember); color: var(--color-brand-ember); }
.glance__step.is-active { background: var(--color-brand-terracotta); border-color: var(--color-brand-terracotta); color: var(--color-bg-docket); }

/* ---------- 5. SPEC MATRIX (four visibility engines) ---------- */
.matrix { display: grid; gap: 0; border: 2px solid var(--color-border-strong); background: var(--color-border-strong); grid-template-columns: 1fr; }
.engine {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-bg-docket); text-decoration: none; overflow: hidden;
  transition: background var(--dur);
}
.engine:hover { background: #fff; }
.engine__img-wrap { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-charcoal); }
.engine__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.engine:hover .engine__img { transform: scale(1.04); }
.engine__no {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--color-bg-ink); color: var(--color-brand-amber);
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  padding: 0.35rem 0.6rem; letter-spacing: 0.1em;
}
.engine__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.engine__title { font-size: 1.35rem; color: var(--color-text-primary); }
.engine__desc { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.55; }
.engine__meta {
  margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--color-border-hair);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-brand-terracotta);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.engine--namfree { background: var(--color-namfree-ice); }
.engine--namfree .engine__no { background: var(--color-namfree-deep); color: var(--color-namfree-cyan); }
.engine--namfree .engine__meta { color: var(--color-namfree-blue); border-top-color: rgba(47, 114, 165, 0.25); }

/* ---------- 6. COVERAGE MAP CONSOLE ---------- */
.console { display: grid; gap: 2rem; align-items: start; }
.console__map {
  background: var(--color-bg-charcoal); border: 2px solid var(--color-border-dark-hair);
  padding: 1.5rem; position: relative;
}
.console__maphead {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-text-on-dark-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem;
}
.map-figure { position: relative; width: 100%; }
.map-figure svg { width: 100%; height: auto; display: block; }
/* Town pin: 14px visual dot inside a 44×44 touch target (WCAG 2.5.5). */
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0; background: none; border: none;
  cursor: pointer;
}
.map-pin i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-brand-terracotta);
  border: 2px solid var(--color-bg-ink);
  transition: transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.map-pin.is-digital i { background: var(--color-brand-amber); }
.map-pin:hover i, .map-pin:focus-visible i, .map-pin.is-active i { transform: scale(1.35); }
.map-pin.is-active i { box-shadow: 0 0 0 3px rgba(224, 96, 48, 0.45); }
.map-pin:focus-visible { outline-offset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 12px; height: 12px; display: inline-block; }
.legend .sw-static { background: var(--color-brand-terracotta); }
.legend .sw-digital { background: var(--color-brand-amber); }

.dossier { background: var(--color-bg-docket); border: 2px solid var(--color-border-strong); padding: 1.5rem; }
.dossier__town { font-size: var(--text-h3); margin-bottom: 0.25rem; }
.dossier__coord { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.dossier__rows { display: flex; flex-direction: column; }
.dossier__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-hair); font-family: var(--font-mono); font-size: var(--text-docket); }
.dossier__row dt { color: var(--color-text-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; }
.dossier__row dd { margin: 0; font-weight: 700; text-align: right; }
.badge-static { background: var(--color-brand-terracotta); color: var(--color-bg-docket); padding: 0.1rem 0.4rem; font-size: 0.6rem; font-weight: 700; }
.badge-digital { background: var(--color-brand-amber); color: var(--color-bg-ink); padding: 0.1rem 0.4rem; font-size: 0.6rem; font-weight: 700; }

/* ---------- 7. HIGHWAY MILEAGE CORRIDOR ---------- */
.corridor { display: flex; flex-direction: column; }
.corridor__node {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--color-border-dark-hair);
  align-items: center;
}
.corridor__km {
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  color: var(--color-brand-amber); white-space: nowrap; letter-spacing: 0.06em;
  background: var(--color-bg-charcoal); border: 1px solid var(--color-border-dark-hair);
  padding: 0.3rem 0.6rem;
}
.corridor__town { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; color: var(--color-text-on-dark); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.corridor__route-label {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--color-bg-ink); background: var(--color-brand-amber); padding: 0.15rem 0.45rem;
}

/* ---------- 8. FORMAT SPECS ---------- */
.formats { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.format {
  background: var(--color-bg-docket); border: 2px solid var(--color-border-strong);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;
  box-shadow: var(--shadow-docket);
}
.format__no { font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; color: var(--color-brand-terracotta); letter-spacing: 0.1em; }
.format__title { font-size: 1.3rem; overflow-wrap: anywhere; hyphens: auto; }
.format__dims { font-family: var(--font-mono); font-size: var(--text-docket); color: var(--color-text-primary); font-weight: 700; }
.format__desc { font-size: 0.95rem; color: var(--color-text-secondary); }
.format__towns { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--color-border-hair); font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- 9. RATE-CARD DOCKET (the printed perforated sheet) ---------- */
.docket { background: var(--color-bg-docket); border: 2px solid var(--color-border-strong); position: relative; }
.docket__perf {
  height: 12px;
  background-image: radial-gradient(circle at 6px 6px, var(--color-bg-sand) 4px, transparent 5px);
  background-size: 16px 12px;
  border-bottom: 1px dashed var(--color-border-hair);
}
.docket__head { padding: 1.25rem 1.5rem; border-bottom: 2px solid var(--color-border-strong); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.docket__title { font-size: var(--text-h3); }
.docket__sub { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.25rem; }
.docket__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border-hair); background: var(--color-bg-sand); }
.filter-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; max-width: 100%; }
.filter-field label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.filter-field select, .filter-field input {
  font-family: var(--font-mono); font-size: var(--text-docket);
  padding: 0.45rem 0.6rem; min-height: 2.25rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
  background: var(--color-bg-docket); color: var(--color-text-primary);
  min-width: 0; max-width: 100%; width: 100%;
}
.filter-count { margin-left: auto; align-self: flex-end; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; color: var(--color-brand-terracotta); text-transform: uppercase; letter-spacing: 0.06em; }

.docket__tablewrap { overflow-x: auto; }
.docket table { width: 100%; font-family: var(--font-mono); font-size: var(--text-docket); text-align: left; }
.docket thead th {
  background: var(--color-bg-ink); color: var(--color-text-on-dark);
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.7rem 0.75rem; white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.docket tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--color-border-hair); vertical-align: middle; }
.docket tbody tr:nth-child(even) { background: rgba(239, 230, 220, 0.5); }
.docket tbody tr:hover { background: rgba(224, 96, 48, 0.08); }
.docket .cell-code { font-weight: 700; color: var(--color-brand-terracotta); white-space: nowrap; }
.docket .cell-rate { font-weight: 700; white-space: nowrap; text-align: right; }
.docket .cell-num { text-align: right; white-space: nowrap; }
.docket__empty { padding: 2.5rem 1.5rem; text-align: center; font-family: var(--font-mono); font-size: var(--text-docket); color: var(--color-text-muted); }

/* Mobile: table rows become stacked perforated spec cards */
@media (max-width: 767px) {
  .docket thead { display: none; }
  .docket table, .docket tbody, .docket tr, .docket td { display: block; width: 100%; }
  .docket tbody tr {
    border: 1px solid var(--color-border-strong); margin: 0.75rem;
    box-shadow: var(--shadow-docket); background: var(--color-bg-docket) !important;
  }
  .docket tbody td { border-bottom: 1px solid var(--color-border-hair); display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; text-align: left; }
  .docket tbody td::before {
    content: attr(data-label); font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
  }
  .docket .cell-code {
    background: var(--color-bg-ink); color: var(--color-text-on-dark);
    font-size: 1rem; justify-content: space-between; align-items: center;
  }
  .docket .cell-code::before { color: var(--color-text-on-dark-muted); }
  .docket .cell-rate { background: rgba(201, 69, 31, 0.08); font-size: 1.05rem; }
}

/* ---------- 10. NAMFREE SUB-BRAND (chromatic flip) ---------- */
.namfree { background: var(--color-namfree-blue); color: #fff; }
.namfree--deep { background: var(--color-namfree-deep); }
.namfree__kicker { color: var(--color-namfree-cyan); }
.namfree h2, .namfree h3 { color: #fff; }
.namfree__lede { color: rgba(255, 255, 255, 0.88); font-size: var(--text-body-lg); max-width: 44rem; }

.namfree-hero { display: grid; gap: 2rem; align-items: center; }
.namfree-hero__media { position: relative; }
.namfree-hero__backdrop { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--color-namfree-deep); }
.namfree-hero__badge { position: absolute; top: -0.75rem; left: -0.75rem; width: 6rem; height: auto; background: #fff; padding: 0.4rem; border: 2px solid var(--color-namfree-deep); }
.namfree-hero__price {
  position: absolute; bottom: 1rem; right: 1rem;
  background: var(--color-brand-terracotta); color: var(--color-bg-docket);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  padding: 0.6rem 0.9rem; text-transform: uppercase; letter-spacing: 0.06em;
  border: 2px solid var(--color-namfree-deep); box-shadow: 4px 4px 0 0 #1B496B;
}

/* Bottle label anatomy */
.anatomy { display: grid; gap: 1.5rem; align-items: center; }
.anatomy__bottle { position: relative; }
.anatomy__bottle img { width: 100%; border: 3px solid var(--color-namfree-deep); }
.anatomy__list { display: flex; flex-direction: column; gap: 1rem; }
.anatomy__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.anatomy__pct { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--color-namfree-cyan); line-height: 1; }
.anatomy__name { font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 0.3rem; }
.anatomy__note { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); line-height: 1.5; }

/* NamFree ledger (5 advantages) */
.advantages { display: grid; gap: 0; border: 1px solid rgba(255, 255, 255, 0.25); }
.advantage { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); align-items: start; }
.advantage:last-child { border-bottom: none; }
.advantage__no { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--color-namfree-cyan); }
.advantage__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: #fff; margin-bottom: 0.3rem; }
.advantage__note { font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); line-height: 1.55; }

/* NamFree packages */
.packages { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.package { background: var(--color-namfree-ice); color: var(--color-text-primary); border: 2px solid var(--color-namfree-deep); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; box-shadow: 6px 6px 0 0 var(--color-namfree-deep); }
.package__tier { font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-namfree-blue); }
.package__bottles { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--color-namfree-deep); line-height: 1; }
.package__bottles small { font-size: 0.9rem; font-weight: 700; }
.package__foot { font-size: 0.9rem; color: var(--color-text-secondary); }
.package__price { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(27, 73, 107, 0.25); font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem; color: var(--color-brand-terracotta); }

/* Slot scarcity bar */
.slots { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; background: var(--color-namfree-deep); border: 2px solid var(--color-namfree-cyan); }
.slots__count { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 5vw, 1.6rem); color: var(--color-namfree-cyan); text-transform: uppercase; overflow-wrap: anywhere; }
.slots__note { font-family: var(--font-mono); font-size: var(--text-docket); color: rgba(255, 255, 255, 0.8); margin-top: 0.25rem; }

/* ---------- 11. SERVICE / FABRICATION BLOCKS ---------- */
.fab { display: grid; gap: 0; border: 2px solid var(--color-border-strong); }
.fab__row { display: grid; grid-template-columns: 1fr; background: var(--color-bg-docket); border-bottom: 2px solid var(--color-border-strong); }
.fab__row:last-child { border-bottom: none; }
.fab__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-charcoal); }
.fab__media img { width: 100%; height: 100%; object-fit: cover; }
.fab__no {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--color-bg-ink); color: var(--color-brand-amber);
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  padding: 0.35rem 0.65rem; letter-spacing: 0.1em;
}
.fab__body { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.75rem; justify-content: center; }
.fab__title { font-size: var(--text-h3); }
.fab__desc { color: var(--color-text-secondary); }
.fab__specs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.spec-tag {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem; background: var(--color-bg-sand);
  border: 1px solid var(--color-border-hair); color: var(--color-text-secondary);
}
.fab__row--reverse .fab__media { order: 2; }

/* CMYK registration marks (signs page signature) */
.cmyk { display: flex; gap: 3px; }
.cmyk i { width: 14px; height: 14px; display: inline-block; }
.cmyk .c { background: #00AEEF; } .cmyk .m { background: #EC008C; }
.cmyk .y { background: #FFF200; } .cmyk .k { background: #231F20; }

/* ---------- 12. PIPELINE (design → produce → install) ---------- */
.pipeline { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.stage { background: var(--color-bg-docket); border: 2px solid var(--color-border-strong); padding: 1.5rem; position: relative; box-shadow: var(--shadow-docket); }
.stage__no { font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; color: var(--color-brand-terracotta); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.stage__title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.stage__desc { font-size: 0.92rem; color: var(--color-text-secondary); }

/* ---------- 13. GALLERY ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.gallery-filter {
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0.85rem; background: var(--color-bg-docket);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
  color: var(--color-text-secondary); transition: all var(--dur-fast);
}
.gallery-filter:hover { background: #fff; color: var(--color-text-primary); }
.gallery-filter.is-active { background: var(--color-bg-ink); color: var(--color-text-on-dark); }
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.gallery__item { background: var(--color-bg-docket); border: 1px solid var(--color-border-strong); }
.gallery__item.is-hidden { display: none; }
.gallery__img-wrap { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-charcoal); }
.gallery__img { width: 100%; height: 100%; object-fit: cover; }
.gallery__foot { padding: 0.75rem; font-family: var(--font-mono); font-size: 0.66rem; }
.gallery__caption { font-weight: 700; color: var(--color-text-primary); margin-bottom: 0.25rem; }
.gallery__meta { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- 14. CONTACT / DISPATCH ---------- */
.channels { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.channel {
  background: var(--color-bg-docket); border: 2px solid var(--color-border-strong);
  padding: 1.5rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.4rem;
  box-shadow: var(--shadow-docket); transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.channel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #17110E; }
.channel__label { font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-terracotta); }
.channel__value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: none; letter-spacing: 0; word-break: break-word; }
.channel__hint { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-text-muted); }

.quote-form { background: var(--color-bg-docket); border: 2px solid var(--color-border-strong); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-gantry); }
.form-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); }
.field label .req { color: var(--color-brand-terracotta); }
.field input, .field textarea, .field select {
  font-family: var(--font-sans); font-size: 1rem;
  padding: 0.7rem 0.85rem; min-height: 2.75rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
  background: #fff; color: var(--color-text-primary);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-brand-terracotta); outline: 2px solid var(--color-brand-ember); outline-offset: 1px; }
.field .error { font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-status-booked); }
.service-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-pill { position: relative; }
.service-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.service-pill span {
  display: inline-block; padding: 0.5rem 0.85rem;
  font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs);
  background: var(--color-bg-sand); color: var(--color-text-secondary); cursor: pointer;
  transition: all var(--dur-fast);
}
.service-pill input:checked + span { background: var(--color-brand-terracotta); color: var(--color-bg-docket); border-color: var(--color-brand-terracotta); }
.service-pill input:focus-visible + span { outline: 3px solid var(--color-brand-ember); outline-offset: 2px; }
.form-success { padding: 1.25rem; background: rgba(31, 122, 76, 0.1); border: 2px solid var(--color-status-available); font-family: var(--font-mono); font-size: var(--text-docket); color: var(--color-status-available); margin-bottom: 1.5rem; }

/* LocalBusiness NAP block */
.nap { background: var(--color-bg-ink); color: var(--color-text-on-dark); border: 2px solid var(--color-border-dark-hair); padding: clamp(1.25rem, 3vw, 2rem); }
.nap__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.nap__title { font-size: var(--text-h3); color: var(--color-text-on-dark); margin-bottom: 1rem; }
.nap__row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-dark-hair); font-family: var(--font-mono); font-size: var(--text-docket); }
.nap__row:last-child { border-bottom: none; }
.nap__key { color: var(--color-text-on-dark-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; min-width: 7.5rem; }
.nap__val { color: var(--color-text-on-dark); overflow-wrap: anywhere; }

/* ---------- 15. SECTION HEADS ---------- */
.sec-head { margin-bottom: 2.5rem; }
.sec-head__title { font-size: var(--text-h2); overflow-wrap: anywhere; hyphens: auto; }
.sec-head__lede { font-size: var(--text-body-lg); color: var(--color-text-secondary); max-width: 46rem; margin-top: 0.75rem; }
.on-dark { background: var(--color-bg-ink); color: var(--color-text-on-dark); }
.on-dark .sec-head__lede { color: var(--color-text-on-dark-muted); }
.on-dark .sec-head__title { color: var(--color-text-on-dark); }
.split { display: grid; gap: 2.5rem; align-items: center; }

/* ---------- 16. DIRECT DOCK + FOOTER ---------- */
.dock { background: var(--color-bg-charcoal); color: var(--color-text-on-dark); border-top: 2px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-dark-hair); }
.dock__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-block: 0.9rem; font-family: var(--font-mono); font-size: var(--text-plate); }
.dock__label { color: var(--color-brand-amber); font-weight: 700; letter-spacing: 0.14em; }
.dock__row a { text-decoration: none; transition: color var(--dur-fast); }
.dock__row a:hover { color: var(--color-brand-ember); }
.dock__cta { margin-left: auto; }

.footer { background: var(--color-bg-ink); color: var(--color-text-on-dark); padding-top: var(--space-section-y); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
.footer__lockup { width: 9rem; height: auto; margin-bottom: 1rem; }
.footer__tag { color: var(--color-text-on-dark-muted); font-size: 0.95rem; max-width: 20rem; }
.footer__title { display: block; font-family: var(--font-mono); font-size: var(--text-plate); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-brand-amber); margin-bottom: 1rem; }
.footer__map { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__map a { text-decoration: none; color: var(--color-text-on-dark); font-size: 0.95rem; transition: color var(--dur-fast); }
.footer__map a:hover { color: var(--color-brand-ember); }
.footer__nap p { font-family: var(--font-mono); font-size: var(--text-docket); color: var(--color-text-on-dark-muted); margin-bottom: 0.4rem; }
.footer__nap a { text-decoration: none; }
.footer__nap a:hover { color: var(--color-brand-ember); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  padding-block: 1.25rem; border-top: 1px solid var(--color-border-dark-hair);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--color-text-on-dark-muted);
}

/* ---------- 17. RESPONSIVE ---------- */
@media (min-width: 640px) {
  .matrix { grid-template-columns: 1fr 1fr; }
  .formats { grid-template-columns: 1fr 1fr; }
  .packages { grid-template-columns: repeat(3, 1fr); }
  .channels { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .nap__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .gantry__content { grid-template-columns: 2fr 1fr; }
  .console { grid-template-columns: 7fr 5fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .anatomy { grid-template-columns: 5fr 7fr; }
  .namfree-hero { grid-template-columns: 1fr 1fr; }
  .fab__row { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .advantages { grid-template-columns: 1fr; }
}

@media (min-width: 1280px) {
  .nav { display: flex; }
  .menu-btn { display: none; }
  .header__actions > .btn { display: inline-flex; }
  .matrix { grid-template-columns: repeat(4, 1fr); }
  .formats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 639px) {
  .dispatch__hq, .dispatch__email, .dispatch__fb { display: none; }
}

/* ---------- 18. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .glance__bar { display: none; }
  .engine:hover .engine__img { transform: none; }
}