/* ==========================================================================
   JRD Equipment Service LLC
   Design language: industrial / service-manual. Dark theme locked to brand.
   Radius scale: 0 everywhere (machined, hard-edged). One accent: safety yellow.
   ========================================================================== */

/* Self-hosted fonts (latin subset), vendored from Google Fonts.
   Downloaded 2026-08-12. License: OFL (all three families). */

/* Archivo and JetBrains Mono are VARIABLE fonts (wght 100-900 and 400-800).
   They were vendored three and two times under weight-specific filenames, but
   every copy is byte-identical - verified by sha256: all three archivo files are
   8f704806..., both jetbrains files are 83c005d4.... Different URLs, so the
   browser fetched each one: 101,288 bytes of duplicate download per cold load,
   for three requests that returned data it already had. One face per family with
   a weight RANGE renders all the same weights from one file.
   Barlow is genuinely static - four real files, four different hashes - so it
   stays as it is. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-600.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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500.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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.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;
}

/* Metric-matched fallbacks. Every face is font-display:swap and none was
   preloaded, so the fallback is what paints first and its widths decide how far
   the text jumps when the real font lands. Archivo is a wide grotesque and the
   stack fell through to Arial Narrow, which is far narrower - the worst possible
   substitute. size-adjust brings each stand-in to the real face's advance widths
   so the swap costs no layout shift. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 101%;
}
@font-face {
  font-family: 'Barlow Fallback';
  src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 94%;
}

:root {
  /* Surfaces. No pure black. */
  --bg:            #0e0f11;
  --bg-raised:     #15171a;
  --bg-sunk:       #0a0b0c;
  --line:          #24272c;
  --line-strong:   #34383f;
  /* Form-control boundaries only. --line-strong is 1.67:1 and is the sole
     boundary these controls have, which WCAG 1.4.11 puts at 3:1. This clears
     it on both field grounds: 3.42:1 on --bg-sunk, 3.11:1 on --bg-raised.
     Deliberately separate from --line-strong so the seven decorative users
     of that token (logo plates, chips, spec grid, callout) do not change. */
  --line-control:  #62666d;

  /* Text */
  --text:          #f2f4f5;
  --text-dim:      #9ba3ab;
  /* 4.7:1+ on every surface incl. bg-raised. The previous #6d747b failed
     WCAG AA (3.8-4.2:1) on all three backgrounds at normal text sizes. */
  --text-faint:    #7d848b;

  /* Single accent: high-visibility safety yellow (13:1 on --bg) */
  --accent:        #ffc12b;
  --accent-deep:   #e0a608;
  --on-accent:     #16130a;

  /* Type */
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body:    "Barlow", "Barlow Fallback", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Rhythm */
  --pad-section:  clamp(3.5rem, 8vw, 7rem);
  --gutter:       clamp(1.25rem, 4vw, 3rem);
  --maxw:         1360px;

  /* Header height drives scroll offsets, the mobile menu origin and the
     sticky form aside. Change it here only.
     At rest the logo is large. Once the page scrolls, html gets .scrolled
     and the header compacts so it does not eat the viewport on the way down. */
  --header-h:      148px;
  /* What the header actually measures once html.scrolled is on. Any in-page
     anchor lands AFTER the compaction, so this - not --header-h - is what
     scroll-padding-top has to reserve. Restated per tier below. */
  --header-h-compact: 84px;
  --logo-h:        124px;
  /* The at-rest height, used only by the spacer. Never changes on scroll, so
     the document never reflows when the header resizes. See .site-header. */
  --header-h-rest: 148px;
  --header-ease:  0.24s cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --z-header: 100;
  --z-skip:   200;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 16px);
  /* The bar is fixed to the bottom below 640px and was swallowing whatever
     the keyboard focused - 14 controls came to rest under it, three of them
     completely hidden, including the Send request button. */
  scroll-padding-bottom: 78px;
}


body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x:hidden here. It silently breaks position:sticky further
     down the tree. Bleeding elements clip against their own section instead. */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--pad-section); }

.section--sunk { background: var(--bg-sunk); }

.rule-top { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(min(1.9rem, 9.5vw), 4.2vw, 3rem);
  max-width: 22ch;
}

.section-intro {
  margin-top: 1.15rem;
  max-width: 62ch;
  color: var(--text-dim);
}

/* These utilities replace what used to be inline style="" attributes, so the
   Content-Security-Policy can ship style-src 'self' without 'unsafe-inline'.
   Do not add new inline styles to the HTML: the CSP will silently drop them. */
.svg-sprite { position: absolute; }

/* Honeypot wrapper: off-screen, not display:none (bots learn to skip that) */
.hp { position: absolute; left: -9999px; }

.link-underline:hover { color: var(--text); }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: var(--z-skip);
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* Hazard bar. Used twice on the page, deliberately, as a section marker. */
.hazard {
  height: 6px;
  width: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 14px,
    #0e0f11 14px 28px
  );
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Fixed, not sticky, and deliberately so.
   A sticky header occupies space in normal flow, so shrinking it on scroll
   removes layout from above the viewport. The browser's scroll anchoring then
   pulls the scroll position up by the same amount to keep content steady,
   which drags the sentinel back into view, which grows the header, which
   pushes the scroll back down: an endless shake right around the threshold.
   Fixed positioning takes the header out of flow, so its height can change
   without moving anything. .header-spacer reserves the at-rest height. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: rgba(14, 15, 17, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

html.scrolled { --header-h: 84px; --logo-h: 64px; }

/* Holds the place of the fixed header. Fixed height on purpose: if this
   tracked --header-h it would reintroduce the reflow the fixed header exists
   to avoid. */
.header-spacer {
  /* +1px is the header's own bottom hairline, which the token does not count. */
  height: calc(var(--header-h-rest) + 1px);
  flex-shrink: 0;
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: height var(--header-ease);
}

/* Sits at the top of the document, outside layout flow. When it scrolls out
   of view the header compacts. Cheaper and smoother than a scroll listener. */
.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 60px;
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

/* The logo is black linework plus yellow. On a near-black header the black
   vanishes, so it sits on a light plate and reads like a decal on the truck. */
.brand img {
  height: var(--logo-h);
  width: var(--logo-h);
  object-fit: contain;
  color: #16130a;
  background: #f2f4f5;
  padding: 6px;
  border: 1px solid var(--line-strong);
  transition: height var(--header-ease), width var(--header-ease);
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.brand-text span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 2rem; }

.nav a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.header-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--line-strong);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }

.nav-toggle-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Icon swaps with the open state so the control always shows the action */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  /* Inline padding in vw, not rem: at 200% text zoom a rem-based 1.6rem each
     side plus "Call 815-842-7117" (kept nowrap on purpose - a split phone
     number is worse than a tight button) was wider than a 390px screen. vw
     padding does not grow with the text, so the label keeps its room. */
  padding: 0.95rem clamp(0.7rem, 4vw, 1.6rem);
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.08s ease;
}

.btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.85rem; }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Hero. Asymmetric split: copy left, photo right, photo bleeds off-canvas.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.hero-copy { max-width: 42rem; }

.hero h1 {
  font-size: clamp(min(2.2rem, 11vw), 4.8vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
}
/* Forces a deterministic two-line headline without a <br> in the markup */
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(min(1.05rem, 5.3vw), 1.7vw, 1.22rem);
  color: var(--text-dim);
  max-width: 46ch;
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Verified claims only: after-hours, insured, travel quoted up front. */
.hero-proof {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-proof span { color: var(--accent); margin-inline: 0.35rem; }

.hero-media {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--bg) 0%, rgba(14, 15, 17, 0.35) 18%, transparent 42%);
  pointer-events: none;
}

/* Capability strip directly under the hero. Hairline dividers, no cards. */
.capstrip {
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
}

/* The strip's cells carry their own padding, so the wrap's gutter comes off
   (this was an inline style before the CSP tightening). */
.capstrip .wrap { padding-inline: 0; }

.capstrip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capstrip-item {
  padding: 1.75rem var(--gutter);
  border-left: 1px solid var(--line);
}
.capstrip-item:first-child { border-left: 0; }

.capstrip-item dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.45rem;
}
.capstrip-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Process. Three columns, numbered by verb not by digit.
   -------------------------------------------------------------------------- */

.process-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.process-step {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.process-step h3 {
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}
.process-step h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}
.process-step p { color: var(--text-dim); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   Services. Asymmetric bento: 5 cells total - 4 services and 1 photo.
   -------------------------------------------------------------------------- */

.services-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.svc {
  background: var(--bg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
}

/* 6-col track. Row 1: wide(4) + photo(2). Row 2: three cells of 2.
   Five cells over two full rows, no empty tiles. */
.svc--wide { grid-column: span 4; }
.svc--third { grid-column: span 2; }

.svc-photo {
  grid-column: span 2;
  padding: 0;
  position: relative;
  min-height: 240px;
  background: var(--bg-sunk);
}
.svc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}

.svc-icon {
  width: 26px;
  height: 26px;
  fill: var(--accent);
  margin-bottom: 1.1rem;
}

.svc h3 { font-size: 1.22rem; margin-bottom: 0.6rem; }
.svc p { color: var(--text-dim); font-size: 0.97rem; }

.svc-list {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.svc-list li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  padding: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------------
   Brands roster. Dense text grid, equipment-plate feel.
   -------------------------------------------------------------------------- */

.brands-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.brand-cell {
  background: var(--bg);
  padding: 1.15rem 1.1rem;
}

.brand-cell strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.brand-cell span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.brand-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Diagnostics. Two-column split, mono readout.
   -------------------------------------------------------------------------- */

.diag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.readout {
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  /* <dl> carries a UA margin-block: 1em that the ul/ol reset does not cover. */
  margin: 0;
}

.readout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.readout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 1.2rem;
}
.readout-row + .readout-row { border-top: 1px solid var(--line); }

.readout-row dt {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.97rem;
}
.readout-row dd {
  /* UA margin-inline-start: 40px would push the right column out. */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-align: right;
}

/* Policy notes: emissions compliance, travel charges. Marked with an accent
   rule so they read as a stated position rather than sales copy. */
.compliance {
  margin-top: 1.75rem;
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1rem 0.9rem 1.15rem;
  font-size: 0.93rem;
  color: var(--text-dim);
  background: var(--bg-raised);
}
.compliance strong { color: var(--text); font-weight: 600; }

/* Underlined, not colour-only, so the links survive colour blindness. */
.compliance a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.compliance a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   Truck. Full-bleed photo, content overlaid.
   -------------------------------------------------------------------------- */

.truck {
  position: relative;
  min-height: 560px;
  display: grid;
  align-items: end;
  isolation: isolate;
  border-block: 1px solid var(--line);
}

.truck-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.truck-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05) brightness(0.78);
}
.truck::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--bg) 4%, rgba(14, 15, 17, 0.72) 45%, rgba(14, 15, 17, 0.35) 100%);
}

.truck-content { padding-block: clamp(3rem, 7vw, 5rem); }

/* The heading now carries .section-title like every other section head, so the
   scale lives in one place. This keeps only the narrower measure, which is the
   one thing that was genuinely different about it. */
.truck-content .section-title { max-width: 18ch; }

.truck-specs {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  max-width: 62rem;
}

.truck-spec {
  background: rgba(14, 15, 17, 0.9);
  padding: 1.25rem 1.15rem;
}
.truck-spec strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
}
.truck-spec span { font-size: 0.88rem; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Common calls. Grouped chunks, scroll-snap on mobile.
   -------------------------------------------------------------------------- */

.calls-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.call-group {
  background: var(--bg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.call-group h3 {
  font-size: 1.1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.call-group li {
  font-family: var(--font-mono);
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-dim);
  padding-block: 0.32rem;
}
.call-group li::before {
  content: "> ";
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Coverage
   -------------------------------------------------------------------------- */

.coverage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.town-columns {
  columns: 3;
  column-gap: 2rem;
  font-size: 0.95rem;
}
.town-columns li {
  padding-block: 0.28rem;
  color: var(--text-dim);
  break-inside: avoid;
}

.county-line {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-dim);
}
.county-line strong { color: var(--text); font-weight: 600; }

/* No max-width here. The rule above the note is drawn by this element's
   border, so capping the width would cut the rule short of the column. */
.town-note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-body p + p { margin-top: 1.1rem; }
.about-body p { color: var(--text-dim); }
.about-body .section-title + p { margin-top: 1.25rem; }

.about-card {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* The logo is black linework on transparency, so it needs a light plate to
   read against the dark panel. */
.about-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 1.6rem;
  background: #f2f4f5;
  /* Light plate, so alt text has to be dark or it is invisible when images are
     blocked or fail to load. 18.56:1 on #f2f4f5. Same for the other two plates. */
  color: #16130a;
  padding: 1rem;
  border: 1px solid var(--line-strong);
}

.about-id {
  text-align: center;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-strong);
}

.about-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.about-role {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.about-contact { display: grid; gap: 1.05rem; }

/* The email address is one unbreakable 234.5px token. At 320 CSS px it makes the
   About card 314.5px wide inside a 280px column and the whole document loses 15px
   of width - a WCAG 1.4.10 Reflow failure on the card that carries the contact
   details. `anywhere` and not `break-word`: break-word does not change intrinsic
   min-content sizing, so it was measured completely inert here. Zero desktop
   effect - the span measures 234.5x42.2 with and without the rule at 961, 1100
   and 1440. */
.about-contact span,
.legal p,
.legal a,
.footer-col a { overflow-wrap: anywhere; }

.about-contact a,
.about-contact div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
}
.about-contact a:hover { color: var(--accent); }
.about-contact svg {
  width: 18px; height: 18px;
  fill: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.about-contact b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The form is long. Keeping the aside pinned means the phone number stays
   reachable the whole way down instead of scrolling away at the top. */
.form-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.form-aside .btn { margin-top: 1.75rem; }

.callout {
  margin-top: 2rem;
  border: 1px solid var(--line-strong);
  padding: 1.35rem;
  background: var(--bg-raised);
}
.callout h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.callout p { font-size: 0.92rem; color: var(--text-dim); }

.form { display: grid; gap: 1.6rem; }

.fieldset {
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
  margin: 0;
  background: var(--bg-raised);
}

.fieldset legend {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-inline: 0.6rem;
  margin-left: -0.6rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
.field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field--full { grid-column: 1 / -1; }

/* align-content:start stops inputs stretching to match a taller neighbour
   that carries hint text, which otherwise gives one row two input heights. */
.field { display: grid; gap: 0.45rem; align-content: start; }

.field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.field label .req { color: var(--accent); }

.field .hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.45;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-sunk);
  border: 1px solid var(--line-control);
  padding: 0.7rem 0.85rem;
  font-size: 0.97rem;
  color: var(--text);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.field textarea { resize: vertical; min-height: 118px; }

.field input::placeholder,
.field textarea::placeholder { color: #7c848c; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ba3ab'%3E%3Cpath d='M12 15.5 5.5 9h13z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 18px;
  padding-right: 2.4rem;
}

/* Radio / checkbox groups are real fieldsets so a screen reader announces
   the group question with each option. Styled to match .field labels, so
   they are visually identical to the text inputs around them. */
.choice-fieldset {
  grid-column: 1 / -1;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.choice-fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0;
  margin-bottom: 0.55rem;
}

/* Radio / checkbox groups rendered as selectable tiles */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem;
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line-control);
  background: var(--bg-sunk);
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.choice:hover { border-color: var(--text-faint); }

.choice input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255, 193, 43, 0.07);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}
.form-footer p { font-size: 0.82rem; color: var(--text-faint); max-width: 44ch; }

/* Form status message: inline, not a toast */
.form-status {
  display: none;
  border: 1px solid var(--accent);
  border-left-width: 3px;
  background: rgba(255, 193, 43, 0.08);
  padding: 1rem 1.2rem;
  font-size: 0.93rem;
}
.form-status.is-visible { display: block; }
.form-status strong { display: block; margin-bottom: 0.3rem; font-family: var(--font-display); }

.field-error {
  display: none;
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
}
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* min() rather than a fixed width so the plate shrinks with the column on a
   phone instead of overflowing it. aspect-ratio keeps the plate square while
   the width flexes. */
.footer-brand img {
  width: min(252px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  color: #16130a;
  background: #f2f4f5;
  padding: 14px;
  border: 1px solid var(--line-strong);
  margin-bottom: 1.4rem;
}
.footer-brand p { font-size: 0.92rem; color: var(--text-dim); max-width: 38ch; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer-col li { padding-block: 0.28rem; }
.footer-col a, .footer-col address {
  font-size: 0.93rem;
  color: var(--text-dim);
  font-style: normal;
  line-height: 1.6;
}
.footer-col address { margin-top: 1rem; }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* Sticky call bar, mobile only. This audience calls. */
.callbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  border-top: 1px solid var(--accent-deep);
}

/* --------------------------------------------------------------------------
   Scroll reveal. Gated on prefers-reduced-motion in JS and CSS.
   -------------------------------------------------------------------------- */

/* The hidden start state is applied only when JS is running (the .js class is
   set on <html> before first paint). Without JS, everything renders normally
   instead of staying invisible forever. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .reveal.is-in { opacity: 1; transform: none; animation: none; }
}

/* Second, independent failsafe for the same hazard the inline script in
   index.html guards against. That one needs JS to run at all; this one needs
   only the stylesheet. If the reveal never got wired within 4s, the content
   reveals itself. Belt and braces on the failure that blanks the page.

   The disarm on the second line is essential and was missing when this
   shipped on 2026-09-06. Without it the keyframe fires for every element the
   visitor has not yet scrolled to, so the entire page stood revealed 4s into
   every visit and the scroll reveal was dead. main.js sets data-reveal-ready
   at the END of its reveal wiring, so the guard is disarmed only once the
   reveal genuinely works - a throw above that point leaves it armed. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal { animation: reveal-failsafe 1ms linear 4s forwards; }
  html[data-reveal-ready] .reveal { animation: none; }
}

@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .capstrip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capstrip-item:nth-child(3) { border-left: 0; }
  .capstrip-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .truck-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .town-columns { columns: 2; }
}

/* The full nav needs 1236px of usable width alongside the brand block and
   the call button. Media queries match the viewport including the scrollbar,
   so the breakpoint carries roughly 20px of headroom for it. Below this the
   nav becomes a labelled hamburger, on tablet as well as phone. */
@media (max-width: 1260px) {
  .nav {
    /* Landscape phones: 360px of height, a 148px header and six links do not
       fit. Without this the panel overruns the viewport and the last link is
       unreachable at any scroll position. dvh so it tracks the URL bar. */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 960px) {
  :root { --header-h: 108px; --logo-h: 88px; --header-h-rest: 108px; --header-h-compact: 72px; }
  html.scrolled { --header-h: 72px; --logo-h: 54px; }
  .brand-text { font-size: 1.15rem; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { margin-inline: calc(var(--gutter) * -1); order: -1; }
  .hero-media img { aspect-ratio: 16 / 10; }
  .hero-media::after {
    background: linear-gradient(to bottom, rgba(14, 15, 17, 0.15), var(--bg) 96%);
  }
  .hero-copy { max-width: none; }

  .process-grid,
  .calls-grid { grid-template-columns: minmax(0, 1fr); }

  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc--wide, .svc--third, .svc-photo { grid-column: span 2; }
  .svc-photo { min-height: 220px; }

  .brands-layout,
  .diag-layout,
  .coverage-layout,
  .about-layout,
  .form-layout { grid-template-columns: minmax(0, 1fr); }

  .about-layout { gap: 2.5rem; }
  .form-aside { position: static; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --header-h: 84px; --logo-h: 64px; --header-h-rest: 84px; --header-h-compact: 64px; }
  html.scrolled { --header-h: 64px; --logo-h: 48px; }

  /* The brand block and a labelled menu button do not both fit at phone
     widths at full size. The wordmark wraps to two lines, the trade line
     comes out, and the whole block is allowed to shrink rather than
     push the menu button off screen. */
  .header-inner { gap: 0.75rem; }
  .brand { gap: 0.6rem; min-width: 0; flex-shrink: 1; }
  .brand-text {
    font-size: 0.92rem;
    max-width: 8.5em;
    overflow: hidden;
  }
  .brand-text span { display: none; }

  /* The sticky call bar covers the phone number down here, so the header
     button comes out and the row keeps room for the labelled menu button. */
  .header-cta .btn { display: none; }
  .nav-toggle { padding: 0.55rem 0.7rem; flex-shrink: 0; }
  .nav-toggle-label { font-size: 0.82rem; }

  body { font-size: 1rem; }
  .capstrip-grid { grid-template-columns: minmax(0, 1fr); }
  .capstrip-item { border-left: 0; }
  .capstrip-item + .capstrip-item { border-top: 1px solid var(--line); }
  .truck-specs { grid-template-columns: minmax(0, 1fr); }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .town-columns { columns: 2; font-size: 0.9rem; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .svc--wide, .svc--third, .svc-photo { grid-column: span 1; }
  .field-grid,
  .field-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; }

  .callbar { display: block; }
  body { padding-bottom: 62px; }
  /* Clear the fixed call bar, or the panel's last link sits behind it. */
  .nav { padding-bottom: calc(1.25rem + 62px); }
  .callbar .btn { border-radius: 0; padding-block: 1.05rem; }
}

/* Smallest phones only. Above this the wordmark still fits beside the
   menu button, and most phones report 375px or wider. */
@media (max-width: 359px) {
  .brand-text { display: none; }
}

/* --------------------------------------------------------------------------
   Error pages (403 / 404 / 500). Shared here so one edit fixes all three;
   the pages previously carried three identical inline <style> blocks.
   -------------------------------------------------------------------------- */
.err-page { display: flex; flex-direction: column; min-height: 100dvh; }
  .err-stage { flex: 1; display: grid; place-items: center; padding-block: clamp(2.5rem, 7vw, 5rem); }
  .err-card {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    border: 1px solid var(--line);
    background: var(--bg-raised);
    padding: clamp(1.75rem, 4vw, 3rem);
  }
  .err-code {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(min(5rem, 25vw), 16vw, 9.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    margin: 0 0 0.5rem;
  }
  .err-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(min(1.6rem, 8vw), 3.4vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    max-width: none;
  }
  .err-body { color: var(--text-dim); max-width: 56ch; margin: 0 0 2rem; }
  .err-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
  .err-meta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
  }
  .err-meta div + div { margin-top: 0.4rem; }
  .err-meta dt { display: inline-block; width: 7rem; color: var(--text-faint); }
  .err-meta dd { display: inline; margin: 0; color: var(--text-dim); }
  .err-foot { margin-top: 0 !important; border: 0 !important; padding: 0 !important; }

/* Legal prose (privacy page), reusing the error-card shell */
.legal h2 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.6rem;
}
.legal p { color: var(--text-dim); max-width: 60ch; }
.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { color: var(--text); }
.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.legal .err-actions { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Print

   The site is a dark theme, so on paper every token was wrong: #f2f4f5 body text
   printed on white, and headings measured 2.62:1. Browsers do not print
   backgrounds by default, so the dark ground never arrives to carry that text.
   Remapping the tokens fixes every component at once rather than per-selector.

   The header is position:fixed, which Chrome repeats on all 13 printed pages.
   Static puts it in the flow once - and the hero is capped in the same block,
   because a static header above a full-height hero turns page 1 into a header
   with nothing under it.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm 12mm; }

  :root {
    color-scheme: light;
    --bg:          #fff;
    --bg-raised:   #fff;
    --bg-sunk:     #fff;
    --line:        #bbb;
    --line-strong: #888;
    --text:        #000;
    --text-dim:    #222;
    --text-faint:  #444;
    --accent:      #7a5a00;
    --accent-deep: #7a5a00;
    --on-accent:   #000;
  }

  html, body { background: #fff; color: #000; }
  body { font-size: 10.5pt; }

  .site-header { position: static; }
  .header-spacer,
  .callbar,
  .skip-link,
  .nav,
  .nav-toggle,
  .hazard,
  .hero-media,
  .truck-media,
  form { display: none !important; }

  /* A full-height hero under a now-static header would print as page 1 alone. */
  .hero { min-height: 0; }
  .hero-grid { display: block; }
  .section { padding-block: 6mm; }

  /* The reveal transition is already scoped to @media screen, so nothing is
     hidden here - but be explicit, because that scoping is easy to lose. */
  .js .reveal { opacity: 1; transform: none; }

  /* A printed page cannot be clicked, so spell the destinations out. */
  a { color: #000; text-decoration: underline; }
  .btn { border: 1px solid #000; }
  .readout-row, .svc-card, .section-title { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* --------------------------------------------------------------------------
   Windows High Contrast / forced colours

   The logo is dark linework on a light plate. Forced colours repaint the plate
   with the theme's Canvas - black on a dark theme - and the wordmark and
   linework disappear into it. These three are artwork on a baked-in field, not
   coloured UI, so the field is pinned. CanvasText for the border, not a fixed
   grey: a #34383f edge on a black ground is invisible, which defeats the point
   of drawing one.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .brand img,
  .about-logo,
  .footer-brand img {
    forced-color-adjust: none;
    background: #f2f4f5;
    border: 1px solid CanvasText;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion

   THIS BLOCK MUST STAY LAST. It used to sit near the top of the file, before
   every transition it was meant to cancel, and at equal specificity the later
   rules won - so under `prefers-reduced-motion: reduce` the header still
   animated its height and the logo still animated its size. Measured: the
   computed transitions were unchanged. Keeping it at the end also means
   anything added to the sheet later is covered by default.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-inner,
  .brand img,
  .skip-link { transition: none; }
}