/* ==========================================================================
   Box Truck Team — Design System
   Dark, sleek, photographic. Alternating charcoal and warm-light sections;
   crimson as the single action color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-400: #f23d63;
  --brand-500: #ed0032;
  --brand-600: #d1002c;
  --brand-800: #8e001e;
  --brand-tint-05: rgba(237, 0, 50, 0.05);
  --brand-tint-12: rgba(242, 61, 99, 0.12);
  --brand-ring: 0 0 0 3px rgba(237, 0, 50, 0.12);

  /* Ink (dark surfaces) — neutral charcoal, no blue cast */
  --ink-page: #17171a;
  --ink-surface: #232327;
  --ink-deep: #0e0e10;
  --ink-strip: #1c1c20;

  /* Signal */
  --mint: #00d6ae;
  --teal: #007c68;
  --warm-signal: #ffd166;

  /* Light surfaces */
  --canvas: #fff8f9;
  --mist: #f2eef0;
  --ink-text: #17141a;
  --graphite: #5e5a62;

  /* Text on dark */
  --dark-body: #b2b2b7;
  --dark-muted: #7d7d84;
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --section-y: 96px;
  --header-h: 76px;

  /* Motion + shape */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-card: 16px;
  --radius-field: 10px;
  --radius-pill: 999px;
  --shadow-light: 0 6px 20px rgba(35, 35, 39, 0.05);
  --shadow-raised: 0 18px 44px rgba(14, 14, 16, 0.14);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-deep);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: var(--brand-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--brand-600);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

p,
figure,
dl,
dd,
fieldset {
  margin: 0;
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h1 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.08;
}

h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 17px;
  font-weight: 600;
}

strong {
  font-weight: 800;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--brand-400);
}

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 40px, var(--container-narrow));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-600);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 14px;
}

.text-center {
  text-align: center;
}

.stack-sm {
  margin-top: 22px;
}

.stack-md {
  margin-top: 28px;
}

.stack-lg {
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   3. Sections
   -------------------------------------------------------------------------- */
.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section--tight {
  padding: 64px 0;
}

.section--dark {
  background: var(--ink-page);
  color: var(--dark-body);
  font-size: 15px;
  line-height: 1.65;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
}

.section--deep {
  background: var(--ink-deep);
}

.section--light {
  background: var(--canvas);
  color: var(--graphite);
}

.section--white {
  background: #fff;
  color: var(--graphite);
}

.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4,
.section--white h1,
.section--white h2,
.section--white h3,
.section--white h4 {
  color: var(--ink-text);
}

/* Section headers */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--brand-500);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
}

.section--dark .eyebrow,
.cta-band .eyebrow {
  color: var(--brand-400);
}

.cta-band .eyebrow {
  color: #fff;
}

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow::after,
.text-center > .eyebrow::after {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
}

.section-head--wide {
  max-width: 860px;
}

.section-lede {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.7;
}

.section--dark .section-lede {
  color: var(--dark-body);
  font-size: 16px;
}

.prose > * + * {
  margin-top: 18px;
}

.prose p {
  max-width: 68ch;
}

.section-head--center .prose p,
.section-head--center .section-lede {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  min-height: 52px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

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

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 10px 26px rgba(237, 0, 50, 0.24);
}

.btn--primary:hover {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 14px 32px rgba(237, 0, 50, 0.32);
}

.btn--secondary {
  border-color: var(--mist);
  background: transparent;
  color: var(--ink-text);
}

.btn--secondary:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.section--dark .btn--secondary,
.hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.btn--inverse {
  background: #fff;
  color: var(--brand-600);
}

.btn--inverse:hover {
  color: var(--brand-800);
  box-shadow: 0 14px 32px rgba(14, 14, 16, 0.2);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn--outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn--small {
  padding: 11px 22px;
  min-height: 44px;
  font-size: 14px;
}

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

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.btn-group--center {
  justify-content: center;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand-500);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s var(--ease);
}

.link-arrow:hover {
  color: var(--brand-600);
}

.link-arrow:hover::after,
a.card:hover .link-arrow::after {
  transform: translateX(4px);
}

a.card:hover .link-arrow {
  color: var(--brand-500);
}

.section--dark a.card:hover .link-arrow {
  color: #fff;
}

.section--dark .link-arrow {
  color: var(--brand-400);
}

.section--dark .link-arrow:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: var(--ink-deep);
  border-bottom-color: var(--hairline);
}

.site-header__inner {
  height: var(--header-h);
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
  color: #fff;
}

.brand img {
  height: 30px;
  width: auto;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

/* Groups the call shortcut with the menu button. Hidden outright above the
   drawer breakpoint so the header keeps exactly two flex children at every
   width and space-between goes on behaving as it did before this existed. */
.header-actions {
  display: none;
  align-items: center;
  gap: 10px;
  flex: none;
}

.header-call {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.header-call:hover {
  border-color: var(--brand-400);
  background: var(--brand-tint-12);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-link[aria-current="page"] {
  color: #fff;
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
}

.nav-item--menu {
  display: flex;
  align-items: center;
}

.nav-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.nav-disclosure:hover {
  color: #fff;
}

.nav-disclosure svg {
  transition: transform 0.2s var(--ease);
}

.nav-disclosure[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 10;
  min-width: 292px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--ink-surface);
  box-shadow: 0 24px 60px rgba(6, 6, 7, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
}

.nav-item--menu:hover .nav-submenu,
.nav-item--menu:focus-within .nav-submenu,
.nav-submenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-submenu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-body);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.nav-submenu a:hover,
.nav-submenu a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-cta {
  flex: none;
}

/* Below the desktop breakpoint the inline nav is replaced wholesale by the
   drawer below, so it is removed rather than re-styled into a panel. */
@media (max-width: 1000px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header-actions {
    display: flex;
  }

  .site-nav {
    display: none;
  }
}

/* The call shortcut is for the band between a plus-size phone and the desktop
   nav: 414px is the narrowest viewport where a second 46px control still fits
   beside the wordmark without crowding it, and above 1000px the inline nav
   carries Contact and the quote CTA already. */
@media (min-width: 414px) and (max-width: 1000px) {
  .header-call {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   5b. Mobile drawer
   Opened with dialog.showModal(), which puts it in the top layer. Nothing in
   the ancestor chain — transform, filter, backdrop-filter, overflow, z-index —
   can clip, trap or repaint over it, and focus containment, Escape and
   background inertness come from the platform instead of hand-rolled JS.
   -------------------------------------------------------------------------- */
.drawer {
  /* left/bottom are reset explicitly: the UA sheet sets left:0 on dialog and
     inset-block-end:0 on dialog:modal, which would over-constrain the box and
     drop it against the left edge instead of sliding in from the right. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: min(360px, 86vw);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hairline);
  background: var(--ink-deep);
  color: var(--dark-body);
  overflow: hidden;
  translate: 100% 0;
  transition: translate 0.32s var(--ease), overlay 0.32s var(--ease) allow-discrete,
    display 0.32s var(--ease) allow-discrete;
}

.drawer[open] {
  translate: 0 0;
}

.drawer::backdrop {
  background: rgba(6, 6, 7, 0.62);
  opacity: 0;
  transition: opacity 0.32s var(--ease), overlay 0.32s var(--ease) allow-discrete,
    display 0.32s var(--ease) allow-discrete;
}

.drawer[open]::backdrop {
  opacity: 1;
}

/* Entry side of the transition. Browsers without @starting-style simply snap
   the drawer open, which is a cosmetic loss and nothing more. */
@starting-style {
  .drawer[open] {
    translate: 100% 0;
  }

  .drawer[open]::backdrop {
    opacity: 0;
  }
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px 22px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.drawer__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: -6px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.drawer__close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.drawer__link {
  display: block;
  padding: 15px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.drawer__sub {
  padding: 2px 0 14px 1px;
}

.drawer__sub a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-body);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.drawer__sub a:hover {
  color: #fff;
}

.drawer__link[aria-current="page"],
.drawer__sub a[aria-current="page"] {
  color: var(--brand-400);
}

.drawer__foot {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: auto;
  padding-top: 30px;
}

.drawer__foot .btn {
  width: 100%;
  margin-bottom: 10px;
}

.drawer__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-body);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

/* Inherits the link colour so the glyph brightens with the label on hover
   rather than sitting at a fixed tint. */
.drawer__meta svg {
  flex: none;
}

.drawer__meta:hover {
  color: #fff;
}

/* Desktop keeps the inline nav, so the drawer must never be openable there. */
@media (min-width: 1001px) {
  .drawer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer::backdrop {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 96px) 0 96px;
  background: var(--ink-page);
  color: var(--dark-body);
  isolation: isolate;
}

/* The home hero is the one place the photograph is the point, so the copy is
   pushed down the frame to leave the top half of the image uncovered. */
.hero--home {
  padding: calc(var(--header-h) + 208px) 0 96px;
}

/* Key light on the subject side of the frame. This is a second copy of the
   same photograph — background:inherit — brightened with a filter and masked
   in over the first. Doing it this way keeps the black point where it was:
   laying a translucent white over the image would raise the shadows too and
   read as haze rather than light. */
.hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(1.4) contrast(1.14) saturate(1.3);
  -webkit-mask-image: radial-gradient(
    58% 74% at 80% 44%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 42%,
    rgba(0, 0, 0, 0.3) 66%,
    transparent 84%
  );
  mask-image: radial-gradient(
    58% 74% at 80% 44%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.74) 42%,
    rgba(0, 0, 0, 0.3) 66%,
    transparent 84%
  );
}

/* The home photograph sits its subject further right and lower in the frame
   than the page heroes, so the light is aimed to match. It is also a sunset
   that is already vivid and already has deep shadows, so unlike the dim dock
   and night photographs it only wants the brightness lift — pushing contrast
   and saturation on top of it reads as oversaturated. */
.hero--home .hero__art::before {
  filter: brightness(1.35) contrast(1.02) saturate(1.04);
  -webkit-mask-image: radial-gradient(
    54% 80% at 78% 54%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.32) 68%,
    transparent 88%
  );
  mask-image: radial-gradient(
    54% 80% at 78% 54%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.32) 68%,
    transparent 88%
  );
}

/* The centred hero has no textless side to light. */
.hero--center .hero__art::before {
  display: none;
}

/* Every hero is photographic. The image is chosen per page further down;
   this is the fallback for any page that does not set one. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Scrim holds the headline side dark while opening up over the subject, which
   every hero photograph places on the right. Copy never runs past the middle
   of the frame, so nothing but the header wash touches the right-hand side. */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* The nav spans the full width, so this one does too, but it clears high
       enough to leave the subject lit. */
    linear-gradient(
      180deg,
      rgba(14, 14, 16, 0.8) 0%,
      rgba(14, 14, 16, 0.6) 11%,
      rgba(14, 14, 16, 0.15) 26%,
      transparent 36%
    ),
    /* Text bed. */
    linear-gradient(
      90deg,
      rgba(23, 23, 26, 0.9) 0%,
      rgba(23, 23, 26, 0.86) 44%,
      rgba(23, 23, 26, 0.7) 56%,
      rgba(23, 23, 26, 0.26) 70%,
      rgba(23, 23, 26, 0.05) 84%,
      transparent 100%
    ),
    /* Floor, so the join with the section below is not a hard edge. */
    linear-gradient(180deg, transparent 64%, rgba(14, 14, 16, 0.2) 85%, rgba(14, 14, 16, 0.44) 100%);
}

/* The home scrim is weighted into the bottom-left corner rather than run down
   the whole left edge, which leaves the upper half of the photograph close to
   its own brightness while the copy below still sits on a dark bed. */
.hero--home .hero__art::after {
  background:
    /* The header floats on bare photography, so a shallow wash carries it and
       then clears well above the headline. */
    linear-gradient(
      180deg,
      rgba(14, 14, 16, 0.78) 0%,
      rgba(14, 14, 16, 0.56) 10%,
      rgba(14, 14, 16, 0.1) 26%,
      transparent 36%
    ),
    /* Text bed. Anchored past the bottom-left corner so it covers the copy
       column from the headline down while the sky and the top of the cab keep
       close to their own brightness. */
    radial-gradient(
      120% 128% at -4% 108%,
      rgba(14, 14, 16, 0.93) 0%,
      rgba(14, 14, 16, 0.86) 52%,
      rgba(14, 14, 16, 0.52) 74%,
      rgba(14, 14, 16, 0.16) 90%,
      transparent 100%
    ),
    /* Floor, so the join with the section below is not a hard edge. */
    linear-gradient(180deg, transparent 58%, rgba(14, 14, 16, 0.24) 82%, rgba(14, 14, 16, 0.5) 100%);
}

/* Centred heroes need the scrim weighted to the middle instead. */
.hero--center .hero__art::after {
  background: radial-gradient(
      88% 82% at 50% 50%,
      rgba(23, 23, 26, 0.9) 0%,
      rgba(23, 23, 26, 0.84) 45%,
      rgba(23, 23, 26, 0.62) 100%
    ),
    linear-gradient(180deg, rgba(14, 14, 16, 0.84) 0%, transparent 40%, rgba(14, 14, 16, 0.7) 100%);
}

/* Per-page hero photography. */
body[data-page="services"] .hero__art {
  background-image: url("../assets/hero-services.jpg");
}

body[data-page="about"] .hero__art {
  background-image: url("../assets/hero-about.jpg");
}

body[data-page="careers"] .hero__art {
  background-image: url("../assets/hero-careers.jpg");
}

body[data-page="contact"] .hero__art {
  background-image: url("../assets/hero-contact.jpg");
}

body[data-page="quote"] .hero__art {
  background-image: url("../assets/hero-quote.jpg");
}

body[data-page="404"] .hero__art {
  background-image: url("../assets/hero-404.jpg");
}

body[data-service="middle-mile"] .hero__art {
  background-image: url("../assets/hero-middle-mile.jpg");
}

body[data-service="dedicated-route"] .hero__art {
  background-image: url("../assets/hero-dedicated-route.jpg");
}

body[data-service="commercial-final-mile"] .hero__art {
  background-image: url("../assets/hero-final-mile.jpg");
}

body[data-service="expedited"] .hero__art {
  background-image: url("../assets/hero-expedited.jpg");
}

.hero__inner {
  position: relative;
  max-width: 780px;
}

.hero--center .hero__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.hero--center .btn-group {
  justify-content: center;
}

.hero h1 {
  color: #fff;
  max-width: 18ch;
}

/* Picks the service name out of the headline. This red is bright rather than
   dark — R is 254, so its luminance is close to a mid grey — which means it
   needs a genuinely dark bed behind it. It gets one on phones, where the
   headline sits on flat ink: 4.5:1. On desktop the headline crosses the sunset
   and it measures 1.79:1 at worst against the 3:1 required of large text. Kept
   deliberately; do not reuse it on body copy, where it would be further out. */
.hero__accent {
  color: #fe0237;
}

/* Smaller than the page heroes so the photograph carries the frame, and held
   in a narrow column so the copy stays clear of the truck on the right. */
.hero--home h1 {
  font-size: clamp(30px, 3.7vw, 46px);
  max-width: 16ch;
}

.hero--home .hero__lede {
  max-width: 44ch;
}

.hero--center h1 {
  margin-inline: auto;
}

.hero__lede {
  margin-top: 24px;
  /* Also keeps the lede clear of the brighter right half of the photography. */
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--dark-body);
}

.hero--center .hero__lede {
  margin-inline: auto;
}

/* Body grey rather than muted grey: at 14px over photography the muted tone
   lands around 3.8:1. */
.hero__note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--dark-body);
}

.hero__note a {
  color: var(--warm-signal);
  font-weight: 700;
}

/* Breadcrumbs */
.breadcrumbs {
  position: relative;
  margin-bottom: 26px;
  font-size: 13px;
  color: var(--dark-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--dark-muted);
  border-top: 1.5px solid var(--dark-muted);
  transform: rotate(45deg);
}

.breadcrumbs a {
  color: var(--dark-body);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

/* White rather than crimson: at 13px over photography the crimson tops out
   around 4.7:1, and this marks location rather than an action. */
.breadcrumbs [aria-current="page"] {
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Credibility strip
   -------------------------------------------------------------------------- */
.cred-strip {
  background: var(--ink-strip);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.cred-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.cred-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 28px;
  border-left: 1px solid var(--hairline);
}

.cred-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.cred-item:last-child {
  padding-right: 0;
}

.cred-item svg {
  flex: none;
  color: var(--mint);
}

.cred-item span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

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

  .cred-item {
    padding: 22px 20px;
  }

  .cred-item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .cred-item:nth-child(n + 3) {
    border-top: 1px solid var(--hairline);
  }
}

@media (max-width: 540px) {
  .cred-strip__grid {
    grid-template-columns: 1fr;
  }

  .cred-item {
    border-left: 0;
    padding: 18px 0;
  }

  .cred-item + .cred-item {
    border-top: 1px solid var(--hairline);
  }
}

/* --------------------------------------------------------------------------
   8. Cards + grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.grid--4 .card {
  padding: 26px 24px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--ink-surface);
  color: var(--dark-body);
  font-size: 15px;
  line-height: 1.65;
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.card h3 {
  color: #fff;
}

.card p {
  margin-top: 12px;
}

.section--light .card,
.section--white .card {
  background: #fff;
  border-color: var(--mist);
  box-shadow: var(--shadow-light);
  color: var(--graphite);
}

.section--light .card h3,
.section--white .card h3 {
  color: var(--ink-text);
}

a.card:hover,
.card--link:hover {
  transform: translateY(-3px);
  border-color: rgba(242, 61, 99, 0.4);
}

.section--light a.card:hover,
.section--white a.card:hover {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-raised);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--brand-tint-12);
  color: var(--brand-400);
  flex: none;
}

.section--light .card__icon,
.section--white .card__icon {
  background: var(--brand-tint-05);
  color: var(--brand-500);
}

.card .card__footer {
  margin-top: auto;
  padding-top: 22px;
}

.card .card__best-for {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

.section--light .card__best-for,
.section--white .card__best-for {
  border-top-color: var(--mist);
}

.card__best-for strong {
  color: var(--ink-text);
}

.section--dark .card__best-for strong {
  color: #fff;
}

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  flex: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.badge--priority {
  background: rgba(255, 209, 102, 0.12);
  color: var(--warm-signal);
}

.badge--status {
  background: rgba(0, 214, 174, 0.12);
  color: var(--mint);
}

.section--light .badge--priority,
.section--white .badge--priority {
  background: rgba(255, 209, 102, 0.22);
  color: #7a5600;
}

.section--light .badge--status,
.section--white .badge--status {
  background: rgba(0, 124, 104, 0.1);
  color: var(--teal);
}

.card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
}

/* --------------------------------------------------------------------------
   9. Lists
   -------------------------------------------------------------------------- */
.checklist {
  display: grid;
  gap: 14px;
}

.checklist--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.checklist li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.6;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 214, 174, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.5' fill='none' stroke='%2300D6AE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

.section--light .checklist li::before,
.section--white .checklist li::before {
  background-color: rgba(0, 124, 104, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.5' fill='none' stroke='%23007C68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dash-list {
  display: grid;
  gap: 12px;
}

.dash-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 2px;
  background: var(--brand-500);
}

.section--dark .dash-list li::before {
  background: var(--brand-400);
}

.dash-list--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}

@media (max-width: 720px) {
  .checklist--2,
  .dash-list--2 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   10. Split layout + spec panel
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.split--wide-left {
  grid-template-columns: 1.15fr 0.85fr;
}

.split--top {
  align-items: start;
}

.split__panel {
  padding: 36px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--ink-surface);
}

.section--light .split__panel,
.section--white .split__panel {
  background: #fff;
  border-color: var(--mist);
  box-shadow: var(--shadow-light);
}

.spec-panel {
  padding: 8px 36px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--ink-surface);
}

.section--light .spec-panel,
.section--white .spec-panel {
  background: #fff;
  border-color: var(--mist);
  box-shadow: var(--shadow-light);
}

.spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.section--light .spec-row,
.section--white .spec-row {
  border-top-color: var(--mist);
}

.spec-row:first-child {
  border-top: 0;
}

.spec-row__value {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  flex: none;
}

.section--light .spec-row__value,
.section--white .spec-row__value {
  color: var(--ink-text);
}

.spec-row__value small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 4px;
}

.spec-row__label {
  font-size: 14px;
  line-height: 1.5;
}

.spec-note {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark-muted);
}

.section--light .spec-note,
.section--white .spec-note {
  color: var(--graphite);
}

.figure-art {
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--ink-surface);
  overflow: hidden;
}

.figure-art img {
  width: 100%;
}

@media (max-width: 960px) {
  .split,
  .split--wide-left {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* --------------------------------------------------------------------------
   11. Steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 24px;
  counter-reset: step;
}

.steps--3 {
  grid-template-columns: repeat(3, 1fr);
}

.steps--4 {
  grid-template-columns: repeat(4, 1fr);
}

.step {
  position: relative;
  padding: 32px 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--ink-surface);
}

.section--light .step,
.section--white .step {
  background: #fff;
  border-color: var(--mist);
  box-shadow: var(--shadow-light);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--brand-tint-12);
  color: var(--brand-400);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.section--light .step__num,
.section--white .step__num {
  background: var(--brand-tint-05);
  color: var(--brand-500);
}

.step p {
  margin-top: 12px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--brand-500);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-align: center;
}

.cta-band .container {
  position: relative;
}

.cta-band h2 {
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band p {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: 17px;
}

.cta-band .btn-group {
  justify-content: center;
}

.cta-band .eyebrow {
  justify-content: center;
}

.cta-band .eyebrow::after {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   Native <details> disclosure. Usable without JS; the chevron is decorative.
   -------------------------------------------------------------------------- */
.accordion {
  display: grid;
  gap: 12px;
}

.accordion__item {
  border: 1px solid var(--mist);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.section--white .accordion__item {
  box-shadow: var(--shadow-light);
}

.accordion__item[open] {
  border-color: rgba(237, 0, 50, 0.3);
  box-shadow: var(--shadow-light);
}

.accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-text);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.accordion__item summary::-webkit-details-marker,
.accordion__item summary::marker {
  display: none;
  content: none;
}

.accordion__item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5l6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5l6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s var(--ease);
}

.accordion__item[open] summary,
.accordion__item summary:hover {
  color: var(--brand-600);
}

.accordion__item[open] summary::after {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 0 26px 24px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.7;
}

.accordion__body p + p {
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 8px;
}

.fieldset {
  margin: 0 0 28px;
  padding: 34px;
  border: 1px solid var(--mist);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-light);
}

.fieldset > legend,
.fieldset__legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-text);
}

.fieldset__intro {
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--graphite);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-grid > .field--full {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}

.field-grid .field {
  margin-bottom: 0;
}

.field > label,
.field__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink-text);
  line-height: 1.4;
}

.field .req {
  color: var(--brand-500);
  margin-left: 2px;
}

.field .opt {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--graphite);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-field);
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-text);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5l6-6' fill='none' stroke='%235E5A62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 8px;
}

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

.field input[type="file"] {
  padding: 10px 12px;
  font-size: 14px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--brand-ring);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--brand-600);
}

.field__error {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-600);
}

.field__error.is-visible {
  display: block;
}

/* Choice chips / cards */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-field);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.choice:hover {
  border-color: rgba(237, 0, 50, 0.4);
}

.choice input {
  margin: 3px 0 0;
  accent-color: var(--brand-500);
  width: 18px;
  height: 18px;
  flex: none;
}

.choice__text {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-text);
  line-height: 1.4;
}

.choice__text small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--graphite);
}

.choice:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-tint-05);
}

.choice:has(input:focus-visible) {
  box-shadow: var(--brand-ring);
}

/* Consent / checkbox rows */
.field > .consent,
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-field);
  background: var(--canvas);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--graphite);
  cursor: pointer;
}

.consent input {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--brand-500);
}

.consent + .consent {
  margin-top: 14px;
}

/* Notices */
.notice {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-field);
  border-left: 3px solid var(--warm-signal);
  background: rgba(255, 209, 102, 0.14);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-text);
}

.notice--info {
  border-left-color: var(--brand-500);
  background: var(--brand-tint-05);
}

.notice svg {
  flex: none;
  color: #7a5600;
}

.notice--info svg {
  color: var(--brand-600);
}

.form-note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--graphite);
}

/* Form status panels */
.form-status {
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  border: 1.5px solid var(--mist);
  background: #fff;
  font-size: 15px;
  line-height: 1.6;
}

.form-status[hidden] {
  display: none;
}

.form-status h3 {
  margin-bottom: 8px;
}

.form-status--success {
  border-color: rgba(0, 124, 104, 0.4);
  background: rgba(0, 124, 104, 0.06);
  color: #0b4b40;
}

.form-status--success h3 {
  color: var(--teal);
}

.form-status--error {
  border-color: rgba(209, 0, 44, 0.4);
  background: var(--brand-tint-05);
  color: #6d0018;
}

.form-status--error h3 {
  color: var(--brand-600);
}

.form-status--error ul {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.form-status--error li a {
  color: var(--brand-600);
  font-weight: 700;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Multi-step progress */
.form-steps {
  display: none;
  margin-bottom: 28px;
}

.form-steps.is-active {
  display: block;
}

.form-steps__track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--mist);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--graphite);
}

.form-steps__item[data-state="current"] {
  border-color: var(--brand-500);
  background: var(--brand-tint-05);
  color: var(--brand-600);
}

.form-steps__item[data-state="done"] {
  border-color: rgba(0, 124, 104, 0.35);
  color: var(--teal);
}

.form-steps__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mist);
  font-size: 12px;
  font-weight: 800;
}

.form-steps__item[data-state="current"] .form-steps__count {
  background: var(--brand-500);
  color: #fff;
}

.form-steps__item[data-state="done"] .form-steps__count {
  background: rgba(0, 124, 104, 0.15);
  color: var(--teal);
}

.review-list {
  display: grid;
  gap: 0;
}

.review-group + .review-group {
  margin-top: 12px;
}

.review-group h4 {
  margin-bottom: 6px;
  color: var(--ink-text);
}

.review-list__row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--mist);
  font-size: 14px;
}

.review-list__row dt {
  font-weight: 800;
  color: var(--graphite);
}

.review-list__row dd {
  margin: 0;
  color: var(--ink-text);
}

.review-empty {
  padding: 12px 0;
  font-size: 14px;
  color: var(--graphite);
}

@media (max-width: 720px) {
  .field-grid,
  .field-grid--3 {
    grid-template-columns: 1fr;
  }

  .fieldset {
    padding: 24px 20px;
  }

  .review-list__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* --------------------------------------------------------------------------
   15. Contact details / misc blocks
   -------------------------------------------------------------------------- */
.contact-details {
  display: grid;
  gap: 0;
}

.contact-details__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}

.section--light .contact-details__row,
.section--white .contact-details__row {
  border-top-color: var(--mist);
}

.contact-details__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-details__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-tint-12);
  color: var(--brand-400);
}

.section--light .contact-details__icon,
.section--white .contact-details__icon {
  background: var(--brand-tint-05);
  color: var(--brand-500);
}

.contact-details dt {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}

.section--dark .contact-details dt {
  color: var(--dark-muted);
}

.contact-details dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-text);
}

.section--dark .contact-details dd {
  color: #fff;
}

.contact-details dd a {
  color: inherit;
  text-decoration: none;
}

.contact-details dd a:hover {
  color: var(--brand-500);
  text-decoration: underline;
}

.empty-state {
  padding: 44px 36px;
  border: 1.5px dashed var(--mist);
  border-radius: var(--radius-card);
  background: #fff;
  text-align: center;
}

.empty-state p {
  max-width: 60ch;
  margin: 14px auto 0;
  color: var(--graphite);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 80px 0 32px;
  background: var(--ink-deep);
  color: var(--dark-body);
  font-size: 15px;
  border-top: 1px solid var(--hairline);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}

.footer-brand .brand {
  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-muted);
}

.footer-col__title {
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}

.footer-col ul {
  display: grid;
  gap: 11px;
}

.footer-col a {
  font-size: 14px;
  color: var(--dark-body);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-col address {
  margin-top: 16px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-body);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 28px;
  font-size: 13px;
  color: var(--dark-muted);
}

.footer-tagline {
  color: var(--dark-body);
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   17. Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 720px) {
  :root {
    --section-y: 64px;
    --header-h: 68px;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .steps--3,
  .steps--4 {
    grid-template-columns: 1fr;
  }

  /* Every hero photograph in the set is 1536x1024 and the phone hero is about
     1:2, so scaling one to fill throws roughly two thirds of it away — and on
     these shots the third that survives is never the part that carries the
     page. So none of them fill. Each is drawn as a band across the top at a
     fixed width, with the copy on flat ink below. 556px at 3:2 is 371px tall,
     which is what the scrim stops further down are keyed to. The home
     photograph is 16:9 and sets its own, slightly shorter, band. A hero shot at
     any other ratio would need its own stop to match. */
  .hero:not(.hero--home) .hero__art {
    background-size: 556px auto;
  }

  /* Copy clears the band. */
  .hero:not(.hero--home) {
    padding: calc(var(--header-h) + 332px) 0 60px;
  }

  /* Clears the home band, which ends at 340px, by enough to breathe. */
  .hero--home {
    padding: calc(var(--header-h) + 296px) 0 60px;
  }

  .hero h1 {
    font-size: 30px;
  }

  /* The desktop measures would force too many lines at this width. */
  .hero h1,
  .hero__lede {
    max-width: none;
  }

  /* Band anchor fallback, top-aligned because the band is shorter than the
     hero. Pages whose subject does not sit here override it below. */
  .hero__art {
    background-position: 90% 0;
  }

  /* The light moves to the top of the frame, above where the copy now sits, and
     is masked in pixels rather than percentages so it lands in the same band
     whatever height the hero ends up. Every photograph puts its subject
     somewhere different, so the geometry is passed in as --light and the
     gradient itself is written once. */
  .hero__art::before,
  .hero--center .hero__art::before {
    display: block;
    --light: 158% 172px at 58% 186px;
    -webkit-mask-image: radial-gradient(
      var(--light),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      transparent 82%
    );
    mask-image: radial-gradient(
      var(--light),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      transparent 82%
    );
  }

  /* This photograph is 16:9 and the phone hero is about 1:2, so scaling it to
     fill the hero throws almost all of it away — at cover roughly a quarter of
     the width survives, which is the trailer and nothing else. The sunset, the
     road and the valley are the point of the shot, so here it is not stretched
     to fill. It is drawn 604px wide, about two thirds of the frame and enough
     to hold the sun through to the back of the truck, as a band across the top
     with the copy on flat ink beneath. Fixed width rather than a percentage so
     the band is 340px tall on every phone and the scrim can be written in the
     same absolute units. */
  .hero--home .hero__art {
    background-size: 604px auto;
    background-position: 85% 0;
  }

  /* Aimed at the truck, which lands right of centre and a little above the
     middle of the band once the photo is framed this way. The gradient is
     restated here rather than only --light because the desktop rule for this
     hero sets mask-image at a higher specificity than the shared rule above. */
  .hero--home .hero__art::before {
    --light: 150% 152px at 66% 168px;
    -webkit-mask-image: radial-gradient(
      var(--light),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      transparent 82%
    );
    mask-image: radial-gradient(
      var(--light),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.76) 48%,
      transparent 82%
    );
  }

  /* Opaque from 369px, just shy of the band's foot at 371px, so the photo's
     bottom edge is covered rather than drawn as a line. Ink rather than the
     near-black used on desktop so the solid part matches the hero's own
     background and the section below it, and both joins disappear. */
  .hero:not(.hero--home) .hero__art::after {
    background: linear-gradient(
      180deg,
      rgba(23, 23, 26, 0.72) 0,
      rgba(23, 23, 26, 0.4) 56px,
      rgba(23, 23, 26, 0.06) 108px,
      rgba(23, 23, 26, 0.06) 288px,
      rgba(23, 23, 26, 0.58) 332px,
      rgba(23, 23, 26, 1) 369px,
      rgba(23, 23, 26, 1) 100%
    );
  }

  /* Paired with the band above: opaque from 336px, just shy of the photo's
     bottom edge at 340px, which is what hides that edge. Ink rather than the
     near-black used elsewhere so the solid part matches the hero's own
     background and the section below and the joins disappear. Between the
     header wash and that ramp is the window the photograph reads through. */
  .hero--home .hero__art::after {
    background: linear-gradient(
      180deg,
      rgba(23, 23, 26, 0.72) 0,
      rgba(23, 23, 26, 0.4) 56px,
      rgba(23, 23, 26, 0.06) 108px,
      rgba(23, 23, 26, 0.06) 258px,
      rgba(23, 23, 26, 0.58) 300px,
      rgba(23, 23, 26, 1) 338px,
      rgba(23, 23, 26, 1) 100%
    );
  }

  /* Per-page framing. Each photograph puts its subject somewhere different, so
     each sets where the band is anchored horizontally and where the key light
     is aimed within it. Pages absent from the anchor list sit at the 90%
     fallback above; every page sets its own light. */

  /* Reads left to right into the dock, and the open trailer is the one lit
     thing in an otherwise very dark frame. */
  body[data-service="middle-mile"] .hero__art {
    background-position: 96% 0;
  }

  body[data-service="middle-mile"] .hero__art::before {
    --light: 150% 165px at 62% 172px;
  }

  /* Reads the other way, with the trails running back out of frame, so it sits
     a touch further right to keep more of them. */
  body[data-service="expedited"] .hero__art {
    background-position: 94% 0;
  }

  body[data-service="expedited"] .hero__art::before {
    --light: 155% 170px at 67% 166px;
  }

  /* The road runs in from the left and the sun sits mid-frame, so this one is
     anchored to keep both alongside the truck, and the light is spread wider
     than the others to carry the sun as well. */
  body[data-service="dedicated-route"] .hero__art {
    background-position: 92% 0;
  }

  body[data-service="dedicated-route"] .hero__art::before {
    --light: 170% 180px at 62% 180px;
  }

  /* The handoff itself — driver, hand truck, lit doorway — is the right third
     of this frame, so it is anchored hard right to keep all of it. */
  body[data-service="commercial-final-mile"] .hero__art {
    background-position: 99% 0;
  }

  body[data-service="commercial-final-mile"] .hero__art::before {
    --light: 155% 172px at 64% 170px;
  }

  /* A row of trucks running back to the dock: the row is the subject and it
     spans most of the frame, so the light is spread along it. */
  body[data-page="services"] .hero__art::before {
    --light: 160% 175px at 56% 190px;
  }

  /* Pulled left of the others to hold the sunset behind the driver, who is
     crouched at the wheel right of centre. */
  body[data-page="about"] .hero__art {
    background-position: 80% 0;
  }

  body[data-page="about"] .hero__art::before {
    --light: 155% 175px at 66% 195px;
  }

  /* Shot from the cab door, so the subject — driver, wheel, sunset through the
     windscreen — sits left of centre rather than right like the rest. */
  body[data-page="careers"] .hero__art::before {
    --light: 155% 170px at 50% 190px;
  }

  /* The lit windows of the building are the warm point in the frame. */
  body[data-page="contact"] .hero__art {
    background-position: 85% 0;
  }

  body[data-page="contact"] .hero__art::before {
    --light: 155% 165px at 60% 195px;
  }

  /* Interior, and the darkest of the set: the loaded trailer and the pallets
     beside it are the only lit things, and they sit left of centre. */
  body[data-page="quote"] .hero__art::before {
    --light: 160% 170px at 46% 185px;
  }

  /* Open road at sunset, truck just right of the sun. */
  body[data-page="404"] .hero__art::before {
    --light: 160% 165px at 58% 190px;
  }

  /* The narrow desktop measure would force too many lines at this width. */
  .hero--home h1 {
    max-width: none;
  }

  .hero--home .hero__lede {
    max-width: none;
  }

  .section-head {
    margin-bottom: 36px;
  }

  .card,
  .step {
    padding: 24px 22px;
  }

  .accordion__item summary {
    padding: 18px 20px;
    font-size: 16px;
    gap: 16px;
  }

  .accordion__body {
    padding: 0 20px 20px;
  }

  .spec-panel {
    padding: 4px 24px;
  }

  .split__panel {
    padding: 26px 22px;
  }
}

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}