/* =========================================================================
   Force International
   Black ground, one metallic gold sampled from the logo (5th-95th percentile
   of its opaque pixels), warm bone text. Big Shoulders for display: it was
   drawn from Chicago's industrial signage, and the company works out of the
   Chicago freight corridor. Barlow, from highway signage, for everything else.
   ========================================================================= */

:root {
  --black: #0b0a08;
  --ink: #14120e;
  --char: #1d1a14;

  --gold: #e9bc53;
  --gold-hi: #f7dc7b;
  --gold-deep: #c3943f;
  --gold-dark: #a06f2d;

  --bone: #f3eee4;
  --bone-2: rgba(243, 238, 228, 0.86);
  --muted: #bdb4a4;
  --line: rgba(243, 238, 228, 0.12);
  --line-gold: rgba(233, 188, 83, 0.3);

  --font-display: "Big Shoulders", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --head-h: 72px;
  --logo-h: 52px;
}

@media (min-width: 1024px) {
  :root {
    --head-h: 96px;
    --logo-h: 72px;
  }
}

/* ------------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--black);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-ui);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: none;
}

.shell {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--black);
}

.btn-gold:hover {
  background: var(--gold-hi);
}

.btn-gold:active {
  background: var(--gold-deep);
  transform: translateY(1px);
}

.btn-sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--text-sm);
}

.btn-arrow {
  transition: transform 0.25s var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* the secondary action: a phone number, not a second button */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  transition: color 0.2s ease;
}

.btn-line svg {
  color: var(--gold);
}

.btn-line > span {
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.25s var(--ease);
}

.btn-line:hover {
  color: var(--gold-hi);
}

.btn-line:hover > span {
  background-size: 100% 1px;
}

.btn-line:active {
  color: var(--gold-deep);
}

/* ---------------------------------------------------------------- header */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-head.is-solid,
.menu-open .site-head {
  background: rgba(11, 10, 8, 0.94);
  border-bottom-color: var(--line);
}

.head-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--head-h);
}

.brand {
  display: block;
  flex-shrink: 0;
  padding-block: var(--space-sm);
}

.brand img {
  width: auto;
  height: var(--logo-h);
}

.nav {
  margin-left: auto;
}

.nav ul {
  display: flex;
  gap: clamp(24px, 2.6vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  position: relative;
  display: block;
  padding-block: 12px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-2);
  transition: color 0.2s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav a:hover {
  color: var(--bone);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Below desktop width the header is logo + burger while the hero's own button
   is on screen; one "Get a Quote" per phone screen is enough. On desktop the
   header keeps it: hiding it there leaves a visible hole at the end of the row.
   Only hidden once main.js is running, so it can never go missing. */
@media (max-width: 1023px) {
  .js .head-quote {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0s linear 0.25s, background-color 0.2s ease;
  }

  .js .head-quote.is-shown,
  .js .menu-open .head-quote {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0s, background-color 0.2s ease;
  }
}

.head-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  transition: color 0.2s ease;
}

.head-phone:hover {
  color: var(--gold-hi);
}

.burger {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger-bars,
.burger-bars::before,
.burger-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bone);
  transition: transform 0.25s var(--ease), background-color 0.2s ease;
}

.burger-bars {
  position: relative;
}

.burger-bars::before,
.burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger-bars::before {
  transform: translateY(-7px);
}

.burger-bars::after {
  transform: translateY(7px);
}

.burger[aria-expanded="true"] .burger-bars {
  background: transparent;
}

.burger[aria-expanded="true"] .burger-bars::before {
  transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger-bars::after {
  transform: rotate(-45deg);
}

.burger:hover .burger-bars:not([aria-expanded="true"] *),
.burger:hover .burger-bars::before,
.burger:hover .burger-bars::after {
  background-color: var(--gold-hi);
}

.burger[aria-expanded="true"]:hover .burger-bars {
  background-color: transparent;
}

@media (max-width: 1023px) {
  .nav,
  .head-phone {
    display: none;
  }

  .head-actions {
    margin-left: auto;
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .burger,
  .menu {
    display: none !important;
  }
}

@media (max-width: 359px) {
  .head-actions .btn-sm {
    display: none;
  }
}

/* ------------------------------------------------------------------ menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  padding-top: var(--head-h);
  background: var(--black);
}

.menu-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-height: 100%;
  padding-block: var(--space-xl);
}

.menu-links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.menu-links a {
  display: block;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.menu-links a:hover {
  color: var(--gold-hi);
}

.menu-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: auto;
}

.menu-foot .btn {
  margin-bottom: var(--space-md);
}

.menu-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--bone-2);
  transition: color 0.2s ease;
}

.menu-contact:hover {
  color: var(--gold-hi);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--black);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* centred: the trucks cross the whole frame, so no side deserves the crop */
  object-position: var(--focus-x, 50%) 50%;
}

/* the portrait cut is already centred on the truck (3:4, same threshold as main.js) */
@media (max-aspect-ratio: 3/4) {
  .hero-poster,
  .hero-video {
    object-position: 50% 50%;
  }
}

.hero-video {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.hero-video.is-playing {
  opacity: 1;
}

/* iOS draws a "tap to play" badge when autoplay is refused, even without controls */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 10, 8, 0.8) 0%, rgba(11, 10, 8, 0.5) 32%, rgba(11, 10, 8, 0.1) 58%, rgba(11, 10, 8, 0) 76%),
    linear-gradient(180deg, rgba(11, 10, 8, 0.6) 0%, rgba(11, 10, 8, 0) 20%, rgba(11, 10, 8, 0) 55%, rgba(11, 10, 8, 0.85) 100%);
}

.hero-inner {
  margin-top: auto;
  padding-top: calc(var(--head-h) + var(--space-2xl));
  padding-bottom: clamp(var(--space-xl), 8vh, var(--space-3xl));
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 5.4vw, 7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone);
}

.hero-title .ln {
  display: block;
}

.hero-title .gold {
  color: var(--gold);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* two stops of the logo's own metal, so the word reads as the mark, not as a highlight */
  .hero-title .gold {
    background: linear-gradient(180deg, var(--gold-hi) 10%, var(--gold-deep) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero-lede {
  max-width: 34ch;
  margin: clamp(var(--space-md), 3vh, var(--space-xl)) 0 0;
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  color: var(--bone-2);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: clamp(var(--space-lg), 4.5vh, var(--space-xl));
}

/* Portrait: the truck fills the middle of the frame, so the copy splits around it,
   message over the sky, actions over the road. Same 3:4 threshold as the cut. */
@media (max-aspect-ratio: 3/4) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(11, 10, 8, 0.8) 0%,
      rgba(11, 10, 8, 0.5) 30%,
      rgba(11, 10, 8, 0) 46%,
      rgba(11, 10, 8, 0) 64%,
      rgba(11, 10, 8, 0.82) 100%
    );
  }

  .hero-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 0;
    padding-top: calc(var(--head-h) + clamp(var(--space-lg), 4vh, var(--space-2xl)));
    padding-bottom: clamp(var(--space-lg), 4vh, var(--space-xl));
  }

  .hero-cta {
    margin-top: auto;
    padding-top: var(--space-xl);
    gap: var(--space-md) var(--space-lg);
  }
}

@media (max-aspect-ratio: 3/4) and (max-width: 479px) {
  .hero-cta .btn {
    padding-inline: 20px;
  }
}

/* the broker's role, drawn as a lane: shipper, Force, carrier */
.hero-rail {
  border-top: 1px solid var(--line);
  background: rgba(11, 10, 8, 0.55);
}

.rail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  min-height: 64px;
  padding-block: 14px;
}

.route {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.route li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.route li + li::before {
  content: "";
  flex-shrink: 1;
  width: clamp(20px, 4vw, 64px);
  height: 1px;
  margin-inline: 14px;
  background:
    linear-gradient(90deg, transparent, var(--gold-hi), transparent) -40% 0 / 40% 100% no-repeat,
    var(--line-gold);
}

.route .is-force {
  color: var(--gold);
}

.creds {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.creds div {
  display: flex;
  gap: var(--space-sm);
}

.creds dt {
  font-weight: 500;
  color: var(--muted);
}

.creds dd {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}

@media (max-width: 479px) {
  .route {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
  }

  .route li + li::before {
    margin-inline: 10px;
  }

  .route-long {
    display: none;
  }
}

/* =========================================================================
   Below the hero
   Rules, type and a little gold carry the structure: no cards, no shadows,
   no rounded boxes. Every section sits on the same .shell as the hero.
   ========================================================================= */

:root {
  --space-4xl: 128px;
  --section-y: clamp(var(--space-2xl), 8vw, var(--space-4xl));
  --title-2: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  --title-3: clamp(1.625rem, 1.25rem + 1vw, 2.25rem);
  --line-strong: rgba(243, 238, 228, 0.28);
  --line-input: rgba(243, 238, 228, 0.42);
  --error: #ef8a6c;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

html.has-sheet {
  overflow: hidden;
}

section[id],
footer[id] {
  scroll-margin-top: var(--head-h);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-2);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}

.section-lede {
  max-width: 42ch;
  margin: var(--space-lg) 0 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--bone-2);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- more buttons */

.btn-ghost {
  background: transparent;
  border-color: var(--line-input);
  color: var(--bone);
}

.btn-ghost:hover {
  border-color: var(--bone-2);
}

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

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-gold[aria-disabled="true"]:hover,
.btn-gold:disabled:hover {
  background: var(--gold);
}

.btn[aria-disabled="true"]:active,
.btn:disabled:active {
  transform: none;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  color: var(--bone-2);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.text-btn:hover {
  color: var(--bone);
  text-decoration-color: var(--gold);
}

/* --------------------------------------------------------------- proof */

.proof {
  border-bottom: 1px solid var(--line);
}

.proof-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
}

.proof-figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl) 0;
  font-weight: inherit;
}

.proof-num {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 3rem + 6.5vw, 10rem);
  font-weight: 800;
  line-height: 0.8;
  color: var(--gold);
}

.proof-label {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--title-3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
}

.proof-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof-point {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-2xl) var(--space-xl);
  border-left: 1px solid var(--line);
}

.proof-point:last-child {
  padding-right: 0;
}

.proof-point-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.375rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
}

.proof-point p {
  max-width: 30ch;
  margin: var(--space-md) 0 0;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--bone-2);
  text-wrap: pretty;
}

/* the figure sits above the three points until they have room for one-line titles beside it */
@media (max-width: 1279px) {
  .proof-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .proof-figure {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: var(--space-lg);
    padding: var(--space-2xl) 0 var(--space-xl);
    border-bottom: 1px solid var(--line);
  }

  .proof-label {
    margin-top: 0;
    padding-bottom: 0.1em;
  }

  .proof-point {
    justify-content: flex-start;
    padding: var(--space-xl) var(--space-lg);
  }

  .proof-point:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 639px) {
  .proof-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .proof-point,
  .proof-point:first-child {
    padding: var(--space-lg) 0;
    border-left: 0;
  }

  .proof-point + .proof-point {
    border-top: 1px solid var(--line);
  }

  .proof-point:last-child {
    padding-bottom: var(--space-xl);
  }
}

/* ------------------------------------------------------------- services */

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

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: start;
}

.service-list {
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.service {
  position: relative;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}

.service-heading {
  margin: 0;
}

.service-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--title-3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone-2);
  transition: color 0.2s ease;
}

/* the whole row is the hit area, and the focus ring is drawn around the row */
.service-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-trigger:focus-visible {
  outline: none;
}

.service-trigger:focus-visible::after {
  outline: 2px solid var(--gold-hi);
  outline-offset: -2px;
}

.service-plus {
  flex: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.service-line {
  max-width: 46ch;
  margin: var(--space-sm) 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

.service:hover .service-trigger,
.service-trigger:focus-visible {
  color: var(--bone);
}

.service:hover .service-plus,
.service-trigger:focus-visible .service-plus {
  color: var(--gold);
}

.service-more p {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
  color: var(--bone-2);
}

.js .service-more,
.services-stage {
  display: none;
}

/* one column wherever there is no stage: below desktop width, or without script */
html:not(.js) .services-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1023px) {
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  /* the lane marker under the service that is on stage */
  .service::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }

  .service.is-active::before {
    transform: scaleX(1);
  }

  .service.is-active .service-trigger {
    color: var(--bone);
  }

  .service.is-active .service-plus {
    color: var(--gold);
  }

  .js .services-stage {
    position: sticky;
    top: calc(var(--head-h) + var(--space-lg));
    display: block;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    max-height: calc(100vh - var(--head-h) - var(--space-2xl));
    background: var(--ink);
    border: 1px solid var(--line);
    container-type: inline-size;
    cursor: pointer;
  }
}

.stage-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stage-layer.is-active {
  opacity: 1;
}

.stage-plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(var(--space-lg), 5cqi, var(--space-2xl));
}

.stage-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 13cqi, 8rem);
  font-weight: 800;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--bone);
}

.stage-copy {
  position: relative;
  max-width: 34ch;
  margin: 0;
  padding-top: var(--space-lg);
  font-size: clamp(1.0625rem, 2.3cqi, 1.375rem);
  line-height: 1.5;
  color: var(--bone-2);
  text-wrap: pretty;
}

.stage-copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--space-2xl);
  height: 2px;
  background: var(--gold);
}

.stage-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stage-layer.has-photo .stage-photo {
  opacity: 1;
}

/* ------------------------------------------------------------------ why */

.why {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  row-gap: var(--space-2xl);
  align-items: start;
}

.why-head {
  position: sticky;
  top: calc(var(--head-h) + var(--space-xl));
}

/* the slogan under the title in the logo's gold, the closing line in full bone */
.why-head .why-tagline {
  font-family: var(--font-ui);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.why-head .why-sign {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bone);
}

.why-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}

.why-item:last-child {
  border-bottom: 1px solid var(--line);
}

/* a short gold lane marker opens each reason */
.why-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--space-2xl);
  height: 2px;
  background: var(--gold);
}

.why-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
}

.why-body p {
  max-width: 38ch;
  margin: var(--space-md) 0 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--bone-2);
  text-wrap: pretty;
}

@media (max-width: 1199px) {
  .why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-head {
    position: static;
  }
}

/* the heading block only holds beside the reasons while all of it fits on screen: a short window scrolls it */
@media (min-width: 1200px) and (max-height: 559px) {
  .why-head {
    position: static;
  }
}

@media (max-width: 639px) {
  .why-item {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-lg) var(--space-xl);
  }
}

/* -------------------------------------------------------------- clients */

.clients {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.client-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.client {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(144px, 12vw, 192px);
  padding: var(--space-xl) var(--space-lg);
}

.client + .client {
  border-left: 1px solid var(--line);
}

/* width comes from the HTML attributes (optically matched sizes); only ever scale down, never distort */
.client img {
  max-width: 100%;
  height: auto;
  opacity: 0.8;
}

@media (max-width: 1023px) {
  /* three over two */
  .client-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .client {
    grid-column: span 2;
  }

  .client:nth-child(n + 4) {
    grid-column: span 3;
    border-top: 1px solid var(--line);
  }

  .client + .client {
    border-left: 0;
  }

  .client:nth-child(2),
  .client:nth-child(3),
  .client:nth-child(5) {
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 639px) {
  .client-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client,
  .client:nth-child(n + 4) {
    grid-column: auto;
    min-height: 120px;
    padding: var(--space-lg) var(--space-md);
    border-left: 0;
    border-top: 0;
  }

  .client:nth-child(2n) {
    border-left: 1px solid var(--line);
  }

  .client:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .client:last-child {
    grid-column: 1 / -1;
    border-left: 0;
  }
}

/* ---------------------------------------------------------- quote band */

.quote-cta {
  padding-block: 0 var(--section-y);
  background: var(--ink);
  border-top: 1px solid var(--line);
}

.quote-cta-grid {
  display: grid;
  padding-top: var(--section-y);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  row-gap: var(--space-xl);
  align-items: end;
}

.quote-cta-title {
  font-size: clamp(3rem, 1.2rem + 5.2vw, 7rem);
}

.quote-cta-copy .section-lede {
  margin-top: var(--space-xl);
}

.quote-cta-steps {
  max-width: 44ch;
  margin: var(--space-sm) 0 0;
  color: var(--muted);
}

.quote-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
}

@media (max-width: 1023px) {
  .quote-cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- footer */

.site-foot {
  padding-block: var(--space-3xl) var(--space-xl);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr));
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
}

.foot-brand img {
  width: auto;
  height: 64px;
}

.foot-tag {
  margin: var(--space-md) 0 0;
  color: var(--muted);
}

.foot-label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--muted);
}

.foot-address {
  font-style: normal;
}

.foot-address p {
  margin: 0 0 var(--space-xs);
  color: var(--bone-2);
}

.foot-link {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  color: var(--bone);
  transition: color 0.2s ease;
}

.foot-link:hover {
  color: var(--gold-hi);
}

.foot-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-creds {
  margin: 0;
  font-family: var(--font-ui);
}

.foot-creds div {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-height: 36px;
}

.foot-creds dt {
  font-weight: 500;
  color: var(--muted);
}

.foot-creds dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}

.foot-base {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.foot-base p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (max-width: 1023px) {
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 639px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------- sheets */

.sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--bone);
}

@supports (height: 100dvh) {
  .sheet {
    height: 100dvh;
  }
}

.sheet[open] {
  display: flex;
  flex-direction: column;
}

.sheet::backdrop {
  background: var(--black);
}

.sheet-bar {
  flex: none;
  border-bottom: 1px solid var(--line);
}

.sheet-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--head-h);
}

.sheet-logo {
  width: auto;
  height: calc(var(--logo-h) * 0.8);
}

.sheet-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  margin-left: auto;
  margin-right: calc(var(--space-md) * -1);
  padding: 0 var(--space-md);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color 0.2s ease;
}

.sheet-close:hover {
  color: var(--gold-hi);
}

.sheet-close:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sheet-close:disabled:hover {
  color: var(--bone);
}

.sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sd-title:focus,
.qd-question:focus,
.qd-result-title:focus {
  outline: none;
}

/* ------------------------------------------------------- service detail */

.sd {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  row-gap: var(--space-2xl);
  padding-block: var(--space-2xl) var(--space-xl);
}

.sd-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1.4rem + 5vw, 7rem);
  font-weight: 800;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}

.sd-lede {
  max-width: 32ch;
  margin: var(--space-lg) 0 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.45;
  color: var(--bone);
  text-wrap: pretty;
}

.sd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
}

.sd-copy {
  align-self: end;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.sd-copy p {
  max-width: 60ch;
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--bone-2);
  text-wrap: pretty;
}

.sd-copy p + p {
  margin-top: var(--space-md);
}

.sd-media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-md);
}

.sd-cover {
  margin: 0;
}

.sd-cover img,
.sd-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink);
}

.sd-gallery {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--space-md);
}

.sd-cover:empty,
.sd-gallery:empty {
  display: none;
}

.sd-pager {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.sd-pager-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--bone-2);
}

.sd-pager-next {
  align-items: flex-end;
  padding: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  border-left: 1px solid var(--line);
  text-align: right;
}

.sd-pager-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}

.sd-pager-name {
  font-family: var(--font-display);
  font-size: var(--title-3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.sd-pager-btn:hover .sd-pager-name {
  color: var(--gold-hi);
}

@media (max-width: 1023px) {
  .sd {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
    padding-top: var(--space-xl);
  }

  .sd-copy {
    align-self: auto;
  }

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

  .sd-gallery {
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------- quote sheet */

.qd-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--bone);
}

.qd-count {
  margin: 0 0 0 auto;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bone-2);
}

.quote-sheet .sheet-close {
  margin-left: var(--space-md);
}

/* on the result screens the step count is gone, so Close takes the far end itself */
.quote-sheet .qd-count[hidden] + .sheet-close {
  margin-left: auto;
}

.qd-progress {
  height: 2px;
  background: var(--line);
}

.qd-progress-bar {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.quote-sheet[data-step="2"] .qd-progress-bar {
  transform: scaleX(0.4);
}

.quote-sheet[data-step="3"] .qd-progress-bar {
  transform: scaleX(0.6);
}

.quote-sheet[data-step="4"] .qd-progress-bar {
  transform: scaleX(0.8);
}

.quote-sheet[data-step="5"] .qd-progress-bar,
.quote-sheet[data-step="done"] .qd-progress-bar {
  transform: scaleX(1);
}

.qd-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: start;
  padding-block: var(--space-2xl);
}

.qd-summary {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.qd-form,
.qd-result {
  grid-column: 2;
  grid-row: 1;
  max-width: 760px;
}

.qd-summary-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--muted);
}

.qd-answers {
  margin: 0;
}

.qd-answer {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

.qd-answer dt {
  font-size: var(--text-sm);
  color: var(--muted);
}

.qd-answer.is-current dt {
  color: var(--gold);
}

.qd-answer dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 44px;
  margin: 0;
}

.qd-answer-value {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--bone);
}

.qd-answer-value.is-empty {
  font-weight: 500;
  color: var(--muted);
}

.qd-edit {
  flex: none;
  min-height: 44px;
  padding: 0 0 0 var(--space-md);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  color: var(--gold);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.qd-edit:hover {
  color: var(--gold-hi);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] {
    animation: fade 0.25s ease;
  }

  .qd-step:not([hidden]),
  .qd-state:not([hidden]) {
    animation: fade 0.25s ease;
  }
}

.qd-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}

.qd-group {
  min-width: 0;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border: 0;
}

.qd-legend {
  margin-bottom: var(--space-md);
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--bone-2);
}

.qd-choices {
  display: grid;
  gap: var(--space-sm);
}

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

.qd-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-md);
  min-height: 60px;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.qd-choice:hover {
  border-color: rgba(243, 238, 228, 0.55);
}

.qd-choice:has(.qd-choice-input:checked) {
  background: var(--ink);
  border-color: var(--gold);
}

.qd-choice:has(.qd-choice-input:focus-visible) {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.qd-choice:has(.qd-choice-input[aria-invalid="true"]) {
  border-color: rgba(239, 138, 108, 0.55);
}

.qd-choice-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.qd-choice-mark {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px; /* centred on the first line of the option name */
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

.qd-choice-mark::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform 0.2s var(--ease);
}

.qd-choice:has(.qd-choice-input:checked) .qd-choice-mark {
  border-color: var(--gold);
}

.qd-choice:has(.qd-choice-input:checked) .qd-choice-mark::after {
  transform: scale(1);
}

.qd-choice-text {
  display: grid;
  gap: 2px;
}

.qd-choice-name {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--bone);
}

.qd-choice-desc {
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 768px) {
  .qd-choice-rich .qd-choice-text {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-lg);
  }
}

.qd-field {
  margin-top: var(--space-xl);
}

.qd-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-lg);
}

.qd-label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--bone-2);
}

.qd-hint {
  font-weight: 500;
  color: var(--muted);
}

.qd-input {
  width: 100%;
  min-height: 60px;
  padding: 0 var(--space-md);
  background: var(--ink);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--bone);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qd-input:hover {
  border-color: rgba(243, 238, 228, 0.6);
}

/* the focus ring is a 2px gold edge on the field itself */
.qd-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.qd-input[aria-invalid="true"] {
  border-color: var(--error);
}

.qd-input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 1px var(--error);
}

.qd-input:-webkit-autofill {
  -webkit-text-fill-color: var(--bone);
  transition: background-color 600000s 0s;
}

.qd-error {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-base);
  color: var(--error);
}

.qd-error:empty {
  margin: 0;
}

.qd-note {
  margin: var(--space-xl) 0 0;
  color: var(--muted);
}

.qd-footer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--black);
}

.qd-footer-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  padding-block: var(--space-md);
}

.qd-footer-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 760px;
}

.qd-footer-actions [data-qd-next] {
  margin-left: auto;
}

.qd-result-mark {
  margin-bottom: var(--space-lg);
  color: var(--gold);
}

.qd-result-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}

.qd-state > p {
  max-width: 54ch;
  margin: var(--space-lg) 0 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--bone-2);
  text-wrap: pretty;
}

.qd-state strong {
  font-weight: 500;
  color: var(--bone);
}

.qd-state p a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}

.qd-state p a:hover {
  color: var(--gold-hi);
}

.qd-preview {
  max-width: 560px;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--ink);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  color: var(--bone-2);
}

.qd-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}

.qd-state > .qd-copy-status {
  margin-top: var(--space-md);
  font-size: var(--text-base);
  color: var(--muted);
}

.qd-state > .qd-copy-status:empty {
  margin: 0;
}

@media (max-width: 1023px) {
  .qd-layout,
  .qd-footer-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .qd-layout {
    padding-block: var(--space-xl);
  }

  .qd-summary {
    display: none;
  }

  .qd-form,
  .qd-result,
  .qd-footer-actions {
    grid-column: 1;
  }
}

@media (max-width: 639px) {
  .quote-sheet .sheet-logo {
    display: none;
  }

  .qd-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .qd-count {
    margin-left: 0;
  }

  .quote-sheet .sheet-close {
    margin-left: auto;
  }

  .qd-choices-grid,
  .qd-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .qd-choice {
    padding-inline: var(--space-md);
  }

  .qd-footer-actions .btn {
    padding-inline: 20px;
  }
}

/* ----------------------------------------------------------------- photos
   Every photo comes out of _tools/photos.py with one shared grade, so pictures made separately read as
   one set. They sit straight on the black ground: no frames, radii, shadows or text laid over them. */

.proof-photo,
.why-photo,
.clients-photo,
.quote-cta-band,
.quote-cta-photo {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.proof-photo img,
.why-photo img,
.clients-photo img,
.quote-cta-band img,
.quote-cta-photo img,
.service-thumb img,
.qd-choice-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof-photo {
  aspect-ratio: 3 / 2;
  margin-bottom: var(--space-lg);
}

.why-photo {
  aspect-ratio: 3 / 2;
}

@media (max-width: 639px) {
  .why-photo {
    aspect-ratio: 16 / 9;
  }
}

/* stage: the cover photo fills the frame, the service name sits on a solid plate in the corner */
.stage-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-md) var(--space-lg) calc(var(--space-md) - 2px);
  background: var(--black);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5cqi, 2.75rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stage-layer.has-photo .stage-tag {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .stage-photo {
    transition: opacity 0.35s ease, transform 0.9s var(--ease);
  }

  .services-stage:hover .stage-layer.is-active .stage-photo {
    transform: scale(1.02);
  }
}

/* rows below desktop width: the same cover photo as a thumbnail, the text beside it */
.service-thumb {
  display: none;
}

@media (max-width: 1023px) {
  .service.has-thumb {
    display: grid;
    grid-template-columns: clamp(104px, 22vw, 208px) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--space-lg);
  }

  .service.has-thumb .service-thumb {
    display: block;
    grid-column: 1;
    grid-row: 1 / 5;
    align-self: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink);
  }

  .service.has-thumb .service-heading {
    grid-column: 2;
    grid-row: 2;
  }

  .service.has-thumb .service-line {
    grid-column: 2;
    grid-row: 3;
  }
}

/* clients: two photos over the logo row */
.clients-photos {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.clients-photo-lead {
  aspect-ratio: 3 / 2;
}

@media (max-width: 639px) {
  .clients-photos {
    grid-template-columns: minmax(0, 1fr);
  }

  .clients-photo {
    aspect-ratio: 3 / 2;
  }
}

/* quote band: a full-width road photo opens the section, the dock photo stands beside the call to action */
.quote-cta-band {
  height: clamp(220px, 30vw, 540px);
  border-bottom: 1px solid var(--line);
}

.quote-cta-band img {
  object-position: 50% 62%;
}

.quote-cta-photo {
  aspect-ratio: 4 / 5;
  max-height: 680px;
}

@media (max-width: 1023px) {
  .quote-cta-photo {
    aspect-ratio: 3 / 2;
    max-height: none;
  }
}

/* quote builder: each service choice carries that service's cover photo */
.qd-choice.has-thumb {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.qd-choice-thumb {
  width: clamp(72px, 11vw, 120px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  align-self: center;
}

/* a phone has no room for a wide crop beside four lines of text: the photo takes a square of its own instead */
@media (max-width: 639px) {
  .qd-choice.has-thumb {
    grid-template-columns: auto minmax(0, 1fr) clamp(72px, 21vw, 96px);
  }

  .qd-choice-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  .hero-title .ln,
  .hero-lede,
  .hero-cta {
    animation: rise 0.9s var(--ease) both;
  }

  .hero-title .ln:nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero-lede {
    animation-delay: 0.2s;
  }

  .hero-cta {
    animation-delay: 0.3s;
  }

  .hero-rail {
    animation: fade 0.9s ease 0.45s both;
  }

  .route li + li::before {
    animation: lane 3.2s linear infinite;
  }

  .route li + li + li::before {
    animation-delay: 1.1s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lane {
  from {
    background-position: -40% 0, 0 0;
  }
  to {
    background-position: 140% 0, 0 0;
  }
}

/* ----------------------------------------------------------- scroll story
   js/motion.js adds these hooks. Starting states (a shut door, a lowered heading) only exist under
   html.motion, which is never set with reduced motion or without script. */

main {
  position: relative;
}

/* the route: one lane from the 23K strip to the quote button; the section titles are its stops */
.route-line {
  position: absolute;
  z-index: 1;
  width: 1px;
  pointer-events: none;
}

.route-track,
.route-fill {
  position: absolute;
  inset: 0;
}

.route-track,
.route-turn {
  background: rgba(233, 188, 83, 0.16);
}

.route-fill,
.route-turn-fill {
  background: var(--gold);
}

.route-fill {
  transform: scaleY(0);
  transform-origin: top;
}

.route-turn {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--across, 0px);
  height: 1px;
}

.route-turn-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
}

.route-stop,
.route-end {
  position: absolute;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  background: var(--black);
  border: 1px solid rgba(233, 188, 83, 0.5);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}

.route-end {
  top: 100%;
  left: var(--across, 0px);
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
}

.route-stop.is-reached,
.route-end.is-reached {
  background: var(--gold);
  border-color: var(--gold);
}

.route-stop.is-reached {
  transform: scale(1.2);
}

/* full-width media sits over the lane, like a road passing under a bridge */
.quote-cta-band {
  position: relative;
  z-index: 2;
}

@media (max-width: 639px) {
  .route-stop {
    width: 7px;
    height: 7px;
    margin: -3px 0 0 -3px;
  }

  .route-end {
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
  }
}

/* loading-dock door: a panel with a gold bottom rail lifts off the photo as it arrives. js/story.js drives
   --door from 0 to 1 with the scroll; the photo settles and drifts underneath it. */
.door {
  position: relative;
}

.story .door::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink);
  box-shadow: inset 0 -2px 0 var(--gold);
  transform: translateY(calc(var(--door, 0) * -101%));
  pointer-events: none;
}

/* phones and tablets: the stage becomes a photo panel that sticks under the header while the rows pass
   beneath it, so the tour works there too; the row thumbnails step aside */
@media (max-width: 1023px) {
  .js .services-main {
    display: contents;
  }

  .js .services-stage {
    position: sticky;
    top: var(--head-h);
    z-index: 3;
    display: block;
    order: 1;
    aspect-ratio: 16 / 10;
    /* never more than about half the screen under the header, so rows always pass beneath it where they can be
       seen; upright phones and tablets never reach this, a phone on its side does */
    max-height: max(150px, calc((100vh - var(--head-h)) * 0.55));
    max-height: max(150px, calc((100svh - var(--head-h)) * 0.55));
    margin-top: var(--space-xl);
    overflow: hidden;
    background: var(--ink);
    border: 1px solid var(--line);
    container-type: inline-size;
    cursor: pointer;
  }

  .js .service-list {
    order: 2;
  }

  .js .service.has-thumb {
    display: block;
  }

  .js .service.has-thumb .service-thumb {
    display: none;
  }

  .js .service::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }

  .js .service.is-active::before {
    transform: scaleX(1);
  }

  .js .service.is-active .service-trigger {
    color: var(--bone);
  }

  .js .service.is-active .service-plus {
    color: var(--gold);
  }
}

/* while a service stays on stage, its other photos take turns over the cover */
.stage-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.stage-alt.is-shown {
  opacity: 1;
}

.motion .stage-alt.is-shown {
  animation: stage-drift 7s linear both;
}

@keyframes stage-drift {
  from {
    transform: scale(1.07);
  }
  to {
    transform: scale(1.01);
  }
}

/* the road photo stays the band it is in the page: no full-screen hold (js/story.js no longer runs finale()) */
.story .quote-cta-band {
  overflow: clip;
}

/* smooth scrolling (Lenis, js/story.js): the library's own rules, and native smooth anchors switched off while it
   steers, since two easings on the same scroll make jumps land short */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* the head of the route: a small load travelling at the tip of the lane, and a pulse where it arrives */
.route-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 14px;
  margin: -7px 0 0 -2px;
  background: var(--gold-hi);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.route-end.is-reached {
  animation: route-arrive 1.6s ease-out 2;
}

@keyframes route-arrive {
  from {
    box-shadow: 0 0 0 0 rgba(233, 188, 83, 0.6);
  }
  to {
    box-shadow: 0 0 0 14px rgba(233, 188, 83, 0);
  }
}

/* 23K odometer (js/motion.js): one window per character; each digit strip rolls a full turn to its value */
.odo {
  display: inline-flex;
}

.odo-win {
  display: inline-block;
  height: 1em;
  margin-block: -0.1em;
  overflow: hidden;
}

.odo-strip {
  display: block;
  transition: transform 1.9s cubic-bezier(0.16, 0.84, 0.24, 1);
}

.odo-digit {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.odo-letter .odo-strip {
  transform: translateY(105%);
  transition: transform 0.8s var(--ease) 1.3s;
}

.odo.is-rolling .odo-letter .odo-strip {
  transform: none;
}

/* 23K network (js/story.js): a dot map of the lower 48 with gold lanes. Wide, tall screens hold the strip
   and lay the map behind the figure and the points; elsewhere it sits between them. */
.story .net {
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 975 / 610;
  margin-top: var(--space-lg);
  pointer-events: none;
}

.story .net canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* held (js/story.js adds .is-network exactly when it pins the strip): the map fills the screen under the header */
.story .proof.is-network .net {
  position: absolute;
  inset: var(--head-h) 0 0;
  margin: 0;
  aspect-ratio: auto;
}

/* Portrait hold (.is-portrait, phones held upright). The lower 48 is a wide shape: on a tall narrow screen it
   reads as a band across the top rather than a map lost in the middle, with the shipment playing over it and the
   space beneath it left for the figure, then for the three points as they dock. */
.story .proof.is-network.is-portrait .net {
  /* The strip above the band is left clear for the lane coming down out of the hero, and for the figure once it
     has stepped up there. The band is capped at 30vh as well as the page width, so a short phone gets a smaller
     map rather than a panel with no room left for its photo. */
  inset: calc(var(--head-h) + clamp(64px, 10vh, 88px)) 0 auto;
  width: min(100%, 48vh);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 975 / 610;
}

/* why force under js/story.js: a magazine spread. Photos run large and alternate sides, each text panel
   overlaps its photo's edge on the page black, and a four-part meter under the heading fills reason by reason. */
.story .why {
  overflow-x: clip;
}

.why-meter {
  display: flex;
  gap: 6px;
  max-width: 240px;
  margin-top: var(--space-xl);
}

.why-meter i {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(233, 188, 83, 0.2);
}

.why-meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}

.story .why-item::before {
  transform: scaleX(var(--mark, 1));
  transform-origin: left;
}

/* Phones get the same spread stood upright: the photo runs the full width of the page and the text panel steps
   over its bottom edge on the page black, on whichever side the switchback is coming from. Tablets keep the two
   columns but swap the photo across with the line, so the reason always opens toward the load. */
@media (max-width: 639px) {
  .story .why-item {
    padding-block: var(--space-lg) var(--space-2xl);
  }

  .story .why-photo {
    aspect-ratio: 5 / 4;
  }

  .story .why-body {
    position: relative;
    z-index: 1;
    width: min(100%, 31ch);
    margin-top: calc(var(--space-2xl) * -1);
    padding: var(--space-md) var(--space-lg) 0 0;
    background: var(--black);
  }

  .story .why-item.is-rtl .why-body {
    margin-left: auto;
    padding: var(--space-md) 0 0 var(--space-lg);
  }

  .story .why-body p {
    margin-top: var(--space-sm);
    font-size: var(--text-base);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .story .why-item.is-rtl .why-photo {
    order: 2;
  }
}

@media (min-width: 1200px) {
  .story .why-item {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 0;
    padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--space-lg));
  }

  .story .why-item:nth-child(even) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .story .why-item:nth-child(even) .why-photo {
    order: 2;
  }

  .story .why-body {
    position: relative;
    z-index: 1;
    align-self: end;
    margin: 0 0 calc(var(--space-lg) * -1) calc(var(--space-2xl) * -1);
    padding: var(--space-lg);
    background: var(--black);
  }

  .story .why-item:nth-child(even) .why-body {
    margin: 0 calc(var(--space-2xl) * -1) calc(var(--space-lg) * -1) 0;
  }
}

/* clients under js/story.js: the section holds while a grid of freight photos slides in by column, dims and
   opens around the title, and the logos arrive in the clearing. The two client photos stay for screen readers. */
.cgrid {
  display: none;
}

/* js/story.js sets .is-landscape exactly when it holds this scene in the desktop composition: on desktops and
   laptops, and on landscape phones and short windows (.is-short, below) */
.story .clients.is-landscape {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding-block: 0;
  overflow: hidden;
  background: var(--black);
}

.story .clients.is-landscape > .shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-top: var(--head-h);
  text-align: center;
}

.story .clients.is-landscape .section-title {
  font-size: clamp(3rem, 1.5rem + 4.6vw, 6.5rem);
}

.story .clients.is-landscape .clients-photos {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.story .clients.is-landscape .client-list {
  margin-top: var(--space-2xl);
}

.story .clients.is-landscape .cgrid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 2vw;
  padding: 0 8vw;
  pointer-events: none;
}

.story .clients.is-landscape .cgrid-col {
  display: grid;
  gap: 2vw;
}

.story .clients.is-landscape .cgrid figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}

.story .clients.is-landscape .cgrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* clients, phones held upright: the same held scene in two columns instead of three, with the logos landing
   two to a row in the clearing the montage leaves behind */
@media (max-width: 1023px) and (min-height: 560px) {
  .story .clients.is-portrait {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 0;
    overflow: hidden;
    background: var(--black);
  }

  /* a vignette over the montage: it shapes the photos while they are the scene, and keeps the logos readable
     once they land in the middle of it */
  .story .clients.is-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(135% 78% at 50% 50%, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, 0.5) 62%, rgba(11, 10, 8, 0.92) 100%);
    pointer-events: none;
  }

  .story .clients.is-portrait > .shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--head-h);
    padding-bottom: clamp(16px, 3vh, 40px);
    text-align: center;
  }

  .story .clients.is-portrait .section-title {
    font-size: clamp(2.25rem, 1.2rem + 6vw, 3.75rem);
  }

  .story .clients.is-portrait .clients-photos {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .story .clients.is-portrait .client-list {
    margin-top: clamp(var(--space-lg), 4vh, var(--space-2xl));
  }

  .story .clients.is-portrait .client {
    min-height: clamp(88px, 12vh, 132px);
  }

  .story .clients.is-portrait .cgrid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3vw;
    padding: 0 5vw;
    pointer-events: none;
  }

  .story .clients.is-portrait .cgrid-col {
    display: grid;
    gap: 3vw;
  }

  .story .clients.is-portrait .cgrid figure {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink);
  }

  .story .clients.is-portrait .cgrid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* services stage under js/story.js: a roll-up door of slats replaces the wipe */
.story .stage-layer.is-active {
  animation: none;
}

.story .stage-layer.is-active::after {
  content: none;
}

.stage-slats {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.stage-slats i {
  flex: 1;
  background: var(--black);
  box-shadow: inset 0 -1px 0 rgba(233, 188, 83, 0.55);
  transform: scaleY(0);
}

.stage-tag {
  z-index: 3;
}

/* 23K network, wide screens: after the lanes draw, the three proof points travel in from the right as large panels
   over the dimmed map, with a progress rail along the bottom. Elsewhere the points span the full width below the map. */
.story .proof-points {
  grid-column: 1 / -1;
}

.story .proof.is-network.is-landscape {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
}

.story .proof.is-network.is-landscape .proof-row {
  position: absolute;
  inset: var(--head-h) 0 0;
  z-index: 1;
  display: block;
}

.story .proof.is-network.is-landscape .proof-figure {
  position: absolute;
  left: var(--gutter);
  bottom: 7vh;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  transform-origin: left top;
}

.story .proof.is-network.is-landscape .proof-points {
  position: absolute;
  top: 53%;
  left: 0;
  display: flex;
  gap: 7vw;
  width: max-content;
  margin: 0;
}

.story .proof.is-network.is-landscape .proof-point {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 3.2vw;
  width: min(66vw, 1080px);
  padding: 0;
  border: 0;
}

.story .proof.is-network.is-landscape .proof-photo {
  grid-row: 1 / 4;
  width: 100%;
  max-height: 58vh;
  margin: 0;
}

.story .proof.is-network.is-landscape .proof-index {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.story .proof.is-network.is-landscape .proof-point-title {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2.4vh;
  font-size: clamp(2.25rem, 1.1rem + 2.5vw, 4.25rem);
}

.story .proof.is-network.is-landscape .proof-point p {
  grid-column: 2;
  grid-row: 3;
  max-width: 30ch;
  margin-top: 2.4vh;
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.375rem);
}

@media (min-width: 1024px) and (min-height: 560px) {
  .proof-progress {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 4vh;
    z-index: 1;
    height: 1px;
    background: rgba(233, 188, 83, 0.2);
  }

  .proof-progress i {
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* 23K network and clients on landscape phones, small tablets on their side and short windows (.is-short): the
   desktop compositions sized to the height there is. Everything here scales with the screen's height, since that
   is what these screens run short of. */
.story .proof.is-network.is-short .proof-figure {
  bottom: clamp(12px, 5vh, 48px);
}

.story .proof.is-network.is-short .proof-num {
  font-size: clamp(3rem, 16vh, 7rem);
}

.story .proof.is-network.is-short .proof-label {
  margin-top: 0.25em;
  font-size: clamp(1rem, 4.8vh, 2rem);
}

.story .proof.is-network.is-short .proof-points {
  top: 50%;
  gap: 6vw;
}

.story .proof.is-network.is-short .proof-point {
  column-gap: 3vw;
  width: min(66vw, 120vh);
}

.story .proof.is-network.is-short .proof-photo {
  max-height: 54vh;
}

.story .proof.is-network.is-short .proof-index {
  font-size: clamp(10px, 3vh, 14px);
}

.story .proof.is-network.is-short .proof-point-title {
  margin-top: 1.4vh;
  font-size: clamp(1.25rem, 7.2vh, 3rem);
}

.story .proof.is-network.is-short .proof-point p {
  max-width: 34ch;
  margin-top: 1.4vh;
  font-size: clamp(0.8125rem, 3.9vh, 1.25rem);
  line-height: 1.4;
}

.story .clients.is-landscape.is-short .section-title {
  font-size: clamp(2rem, 11vh, 5rem);
}

/* one row of five, whatever the width, so the load runs straight along it as it does on a desktop */
.story .clients.is-short .client-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(12px, 5vh, 48px);
}

.story .clients.is-short .client,
.story .clients.is-short .client:nth-child(n + 4) {
  grid-column: auto;
  min-height: clamp(60px, 22vh, 150px);
  padding: clamp(8px, 2.4vh, 24px) clamp(8px, 1.6vw, 20px);
  border-top: 0;
  border-left: 0;
}

.story .clients.is-short .client + .client {
  border-left: 1px solid var(--line);
}

/* 23K network, phones held upright: the same held scene turned on its side. The map band runs across the top,
   the figure stands under it while the shipment is drawn, and once it has been delivered the figure steps up
   over the dimmed map and the three points dock upward one at a time into the space it leaves. --panel-top and
   --panel-h are measured by js/story.js from where the map band actually ends, so a short phone gets a shorter
   photo instead of a panel that runs off the bottom of the screen. */
@media (max-width: 1023px) and (min-height: 560px) {
  .story .proof.is-network.is-portrait {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }

  .story .proof.is-network.is-portrait .proof-row {
    position: absolute;
    inset: var(--head-h) 0 0;
    z-index: 1;
    display: block;
  }

  /* the figure stands right under the map band while the shipment is drawn, so the two read as one lockup */
  .story .proof.is-network.is-portrait .proof-figure {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: var(--fig-top, 56%);
    bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: var(--space-md);
    padding: 0;
    border: 0;
    transform-origin: left top;
  }

  .story .proof.is-network.is-portrait .proof-num {
    font-size: clamp(4.5rem, 2rem + 13vw, 7rem);
  }

  .story .proof.is-network.is-portrait .proof-label {
    margin-top: 0;
    padding-bottom: 0.08em;
    font-size: clamp(1.5rem, 1rem + 2.6vw, 2.125rem);
  }

  /* the window is one panel tall: the track of all three slides through it, so only the panel on show is seen */
  .story .proof.is-network.is-portrait .proof-window {
    position: absolute;
    top: var(--panel-top, 52%);
    left: 0;
    right: 0;
    height: var(--panel-h, 46vh);
    overflow: hidden;
  }

  .story .proof.is-network.is-portrait .proof-points {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .story .proof.is-network.is-portrait .proof-point {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    align-content: stretch;
    justify-content: stretch;
    row-gap: clamp(6px, 1.2vh, 14px);
    height: var(--panel-h, 46vh);
    padding: clamp(6px, 1.4vh, 16px) var(--gutter) 0;
    border: 0;
  }

  .story .proof.is-network.is-portrait .proof-photo {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
  }

  .story .proof.is-network.is-portrait .proof-index {
    grid-row: 2;
    margin-top: clamp(4px, 1vh, 12px);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--gold);
  }

  .story .proof.is-network.is-portrait .proof-point-title {
    grid-row: 3;
    font-size: clamp(1.625rem, 1rem + 3.4vw, 2.5rem);
  }

  .story .proof.is-network.is-portrait .proof-point p {
    grid-row: 4;
    max-width: 34ch;
    margin: 0;
    font-size: clamp(1rem, 0.92rem + 0.5vw, 1.125rem);
    line-height: 1.45;
  }
}

/* services tour (wide, tall screens): the list and the stage hold while scrolling steps through each
   service, one step per service. js/services.js sets .is-tour and --tour-count. */
@media (min-width: 1024px) {
  .services.is-tour {
    --tour-step: 36vh;
  }

  .services.is-tour .services-grid {
    align-items: stretch;
  }

  /* the hold length is a spacer after the list: a sticky box only travels inside its parent's content box */
  .services.is-tour .services-main::after {
    content: "";
    display: block;
    height: calc((var(--tour-count, 7) - 1) * var(--tour-step));
  }

  .services.is-tour .service-list {
    position: sticky;
    top: calc(var(--head-h) + var(--space-lg));
  }

  .services.is-tour .service {
    padding-block: 18px;
  }

  /* the list is names only while it holds; each description shows on the stage with its photo and stays
     in the list for screen readers */
  .services.is-tour .service-line {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .services.is-tour .stage-tag-line {
    display: block;
  }

  .services.is-tour .services-stage {
    align-self: start;
  }
}

/* laptops (560-699px of height): the held list has seven rows to fit on screen, so they close up */
@media (min-width: 1024px) and (max-height: 699px) {
  .services.is-tour .service {
    padding-block: clamp(9px, 2.6vh - 3px, 16px);
  }
}

/* the stage tag counts the tour: DRY VAN 01 / 07 */
.stage-tag-line {
  display: none;
  max-width: 38ch;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  color: var(--bone-2);
}

.stage-tag-name::after {
  content: attr(data-step);
  margin-left: 0.9em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  vertical-align: 0.35em;
  color: var(--gold);
}

/* a service arriving on stage wipes in over the one before it, in the direction of travel, led by a gold rail */
.motion .stage-layer.is-active {
  z-index: 2;
  animation: stage-in 0.8s var(--ease) both;
}

.motion .stage-layer.was-active {
  z-index: 1;
  opacity: 1;
  transition: none;
}

.motion .stage-layer.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  animation: stage-rail 0.8s var(--ease) both;
}

.motion .stage-layer.is-active .stage-photo {
  animation: stage-settle 1.2s var(--ease) backwards;
}

.motion [data-dir="up"] .stage-layer.is-active {
  animation-name: stage-in-up;
}

.motion [data-dir="up"] .stage-layer.is-active::after {
  animation-name: stage-rail-up;
}

@keyframes stage-in {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes stage-in-up {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes stage-rail {
  from {
    top: 100%;
    opacity: 1;
  }
  85% {
    top: 0;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes stage-rail-up {
  from {
    top: 0;
    opacity: 1;
  }
  85% {
    top: calc(100% - 2px);
    opacity: 1;
  }
  to {
    top: calc(100% - 2px);
    opacity: 0;
  }
}

@keyframes stage-settle {
  from {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   The Force Line (js/line.js, js/line-work.js, drawn from js/story.js): one gold route with a load at its head,
   curving through each section's own content. Only under html.story, which is set while motion is allowed.
   ========================================================================= */

/* each drawing stays inside its own section: a load running close to the page edge is cut at the edge rather than
   reaching past it */
.ln-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.ln-fixed {
  position: fixed;
  z-index: 2;
}

.ln-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ln-track {
  fill: none;
  stroke: rgba(233, 188, 83, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.ln-thin {
  fill: none;
  stroke: rgba(243, 238, 228, 0.34);
  stroke-width: 1;
}

.ln-wire {
  fill: none;
  stroke: rgba(233, 188, 83, 0.42);
  stroke-width: 1;
}

.ln-ring {
  fill: none;
  stroke: rgba(233, 188, 83, 0.8);
  stroke-width: 1;
}

.ln-node {
  fill: var(--black);
  stroke: var(--gold);
  stroke-width: 1.5;
}

.ln-node.is-on {
  fill: var(--gold);
}

.ln-dot {
  fill: var(--bone);
}

.ln-load-body {
  fill: var(--gold-hi);
}

.ln-load-streak {
  fill: var(--gold);
  opacity: 0.35;
}

.ln-load-trailer {
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.2;
}

/* the hero's rail carries the first stretch: its lanes and labels stay as they are, the line draws over them */
.story .hero-rail {
  position: relative;
}

.ln-rail {
  z-index: 1;
}

.story .route li {
  transition: color 0.3s ease;
}

.story .route li.is-lit {
  color: var(--bone);
}

.story .route li.is-force.is-lit {
  color: var(--gold-hi);
}

/* 23K network: the shipment's stops are named on the map */
.story .proof {
  position: relative;
}

.net-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.net-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 8px;
  background: rgba(11, 10, 8, 0.86);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
  opacity: 0;
  visibility: hidden;
}

.net-tag.is-gold {
  color: var(--gold-hi);
}

/* the map is only a band wide on a phone, so the names sit tighter and lean on a darker plate to stay legible
   over the dots */
@media (max-width: 1023px) {
  .net-tag {
    padding: 3px 7px;
    background: rgba(11, 10, 8, 0.92);
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* services: the route itself underlines the service on show */
.story .services.has-line .service::before {
  content: none;
}

/* why: the marker grows toward the load, whichever way the switchback runs */
.story .why {
  position: relative;
}

.story .why-item.is-rtl::before {
  transform-origin: right;
}

/* clients: each logo lights as the load reaches it */
.story .clients {
  position: relative;
}

.story .clients.has-line .client img {
  transition: opacity 0.45s ease;
}

.story .clients.has-line .client:not(.is-lit) img {
  opacity: 0.28;
}

/* quote: a frame on the road photo that holds with it, then the dock at Start Your Quote */
.story .quote-cta {
  position: relative;
}

.story .quote-cta-grid {
  position: relative;
  z-index: 1;
}

.story .quote-cta-band .ln-band {
  z-index: 1;
}

.story .quote-cta-actions .btn {
  position: relative;
}

.story .quote-cta-actions .btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--gold);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
  pointer-events: none;
}

.story .quote-cta-actions .btn.is-docked::after {
  opacity: 0.85;
  transform: none;
}

/* The load arrives: the button takes the hit, a gold ring pushes out of it, the frame snaps round it and a
   light runs across its face — the one moment on the page where the route ends in something you can press. */
.story .quote-cta-actions .btn.is-docked {
  animation: quote-land 0.8s var(--ease);
}

@keyframes quote-land {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(233, 188, 83, 0.6), 0 0 0 0 rgba(233, 188, 83, 0.35);
  }
  22% {
    transform: scale(1.05);
  }
  46% {
    transform: scale(0.992);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 22px rgba(233, 188, 83, 0), 0 0 0 40px rgba(233, 188, 83, 0);
  }
}

/* the frame draws itself out from the side the load came in on before it settles */
.story .quote-cta-actions .btn.is-docked::after {
  animation: quote-frame 0.55s var(--ease) 0.06s backwards;
}

@keyframes quote-frame {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 0.85;
    clip-path: inset(0 0 0 0);
  }
}

.story .quote-cta-actions .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(255, 253, 246, 0) 38%, rgba(255, 253, 246, 0.55) 50%, rgba(255, 253, 246, 0) 62%) 210% 0 / 240% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
}

.story .quote-cta-actions .btn.is-docked::before {
  animation: quote-shine 0.85s var(--ease) 0.18s;
}

@keyframes quote-shine {
  from {
    opacity: 1;
    background-position: 210% 0;
  }
  to {
    opacity: 1;
    background-position: -130% 0;
  }
}