@import url("../fonts/fonts.css");

/* ============================================================
   KANN FLEET — Container Transport. Nationwide.
   Design system
   ============================================================ */

:root {
  /* --- Navy: the brand's structural colour, sampled from the logo --- */
  --navy-900: #061726;
  --navy-850: #08213c;
  --navy-800: #0b2748;
  --navy:     #14305a;
  --navy-600: #1e4179;
  --navy-500: #2b5495;

  /* --- Steel: the industrial mid-range --- */
  --steel-700: #3f5670;
  --steel-600: #556c88;
  --steel-500: #71879f;
  --steel-300: #afc0d0;
  --steel-200: #cbd7e2;
  --steel-100: #e3eaf1;
  --steel-050: #f1f5f9;
  --paper:     #ffffff;

  /* --- Amber: lifted from the container in the hero photograph.
         Used only for the route line, live states and the primary action. --- */
  --amber:     #ee7a0c;
  --amber-400: #ff9a33;
  --amber-100: #ffd9ae;
  --amber-050: #fff3e6;

  --ink:      var(--navy-900);
  --ink-soft: var(--steel-700);

  /* --- Type --- */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --text:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:    "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  --fs-display-xl: clamp(2.85rem, 6.9vw, 5.9rem);
  --fs-display-l:  clamp(2.1rem, 4.4vw, 3.8rem);
  --fs-display-m:  clamp(1.55rem, 2.5vw, 2.25rem);
  --fs-display-s:  clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lead:       clamp(1.075rem, 1.25vw, 1.3rem);
  --fs-body:       1.0625rem;
  --fs-small:      0.9375rem;
  --fs-label:      0.75rem;

  /* --- Layout --- */
  --header-h: 86px;
  --hero-gap: clamp(1.5rem, 4vh, 3rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 1300px;
  --section-y: clamp(4.75rem, 8.5vw, 8.5rem);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-lift: 0 1px 2px rgba(6, 23, 38, 0.06), 0 12px 28px -12px rgba(6, 23, 38, 0.22);
  --shadow-deep: 0 2px 6px rgba(6, 23, 38, 0.1), 0 30px 60px -24px rgba(6, 23, 38, 0.38);
}

/* ============================================================ Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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

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

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

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

::selection { background: var(--amber); color: var(--navy-900); }

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

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--amber); color: var(--navy-900);
  font-family: var(--data); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-size: var(--fs-label);
  padding: 0.9rem 1.5rem;
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============================================================ Primitives */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1560px; }

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

.label {
  font-family: var(--data);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-600);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

.hairline {
  height: 1px;
  background: var(--steel-100);
  border: 0;
  margin: 0;
}

/* The route rule — the site's connective motif. Draws left-to-right. */
.route-rule {
  position: relative;
  height: 2px;
  background: var(--steel-200);
  transform-origin: left center;
}
.route-rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(72px, 14%, 180px);
  background: var(--amber);
}
.route-rule::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  background: var(--amber);
  transform: rotate(45deg);
}
.on-dark .route-rule { background: rgba(175, 192, 208, 0.26); }

.js .route-rule { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
.js .route-rule.in { transform: scaleX(1); }

/* ============================================================ Buttons */

.btn {
  --btn-bg: var(--amber);
  --btn-fg: var(--navy-900);
  --btn-bd: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.55rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--data);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, transform 160ms var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(0.975); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--amber-400); --btn-bd: var(--amber-400); }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: rgba(255, 255, 255, 0.42);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-bd: var(--paper); }
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: var(--steel-500);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { --btn-bg: var(--navy); --btn-fg: var(--paper); --btn-bd: var(--navy); }
}

.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* Sending state — the label stays put so the button never changes size. */
.btn.is-busy { opacity: 1; cursor: progress; }
.btn__spinner { display: none; }
.btn.is-busy .btn__icon { display: none; }
.btn.is-busy .btn__label { opacity: 0.55; }
.btn.is-busy .btn__spinner {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================ Header */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background-color 320ms ease, box-shadow 320ms ease,
              border-color 320ms ease, transform 380ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 23, 38, 0.62), rgba(6, 23, 38, 0));
  pointer-events: none;
  transition: opacity 320ms ease;
}
.header.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--steel-100);
  box-shadow: 0 1px 24px -6px rgba(6, 23, 38, 0.16);
}
.header.is-stuck::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }

.header__bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  height: 86px;
  position: relative;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; transition: opacity 260ms ease; }
.brand__navy { display: none; }
.header.is-stuck .brand__white { display: none; }
.header.is-stuck .brand__navy { display: block; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); margin-left: auto; }

.nav__link {
  position: relative;
  font-family: var(--data);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  padding-block: 0.55rem;
  transition: color 200ms ease;
}
.header.is-stuck .nav__link { color: var(--steel-700); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out);
}
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--paper); }
  .header.is-stuck .nav__link:hover { color: var(--navy); }
  .nav__link:hover::after { transform: scaleX(1); }
}

.header .btn--nav { padding: 0.75rem 1.25rem; font-size: 0.8125rem; }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--paper);
  cursor: pointer;
  margin-left: auto;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.header.is-stuck .burger { border-color: var(--steel-200); color: var(--navy); }
.burger svg { width: 20px; height: 20px; }
.burger__close { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--navy-900);
  padding: 118px var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out),
              visibility 0s linear 260ms;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.drawer__link {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: -0.03em;
  color: var(--paper);
  padding-block: 0.6rem;
  border-bottom: 1px solid rgba(175, 192, 208, 0.16);
}
.drawer__link:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 1.75rem; }
.drawer__meta {
  margin-top: auto;
  padding-top: 2.5rem;
  color: var(--steel-300);
  font-size: var(--fs-small);
}
.drawer__meta a { display: block; color: var(--paper); font-weight: 600; }

/* ============================================================ Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  background: var(--navy-900);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
  /* Pushed right and down off the left edge so the container clears the headline
     and the action row, and reads at a size you can actually see. */
  transform: scale(1.3);
  transform-origin: 0% 38%;
  /* Grade the photograph into the brand navy; the container stays the one warm point. */
  filter: saturate(0.68) contrast(1.06) brightness(0.9);
}

.hero__grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(6, 23, 38, 0.94) 0%, rgba(6, 23, 38, 0.72) 34%, rgba(6, 23, 38, 0.2) 68%, rgba(6, 23, 38, 0.45) 100%),
    linear-gradient(to bottom, rgba(8, 33, 60, 0.72) 0%, rgba(8, 33, 60, 0.08) 32%, rgba(6, 23, 38, 0.55) 78%, rgba(6, 23, 38, 0.96) 100%),
    linear-gradient(200deg, rgba(20, 48, 90, 0.5), rgba(6, 23, 38, 0.2));
}

/* The top padding carries the fixed header's height, so the block centres inside
   the space below the nav rather than behind it. The equal --hero-gap on both
   sides preserves that centring while guaranteeing breathing room on short
   viewports, where the content is taller than the screen and the flex gaps
   would otherwise collapse to nothing. */
.hero__body {
  position: relative;
  padding-top: calc(var(--header-h) + var(--hero-gap));
  padding-bottom: var(--hero-gap);
  color: var(--paper);
}

.hero__title {
  font-size: var(--fs-display-xl);
  font-weight: 900;
  font-stretch: 118%;
  letter-spacing: -0.035em;
  line-height: 0.94;
  max-width: 17ch;
  text-shadow: 0 2px 40px rgba(6, 23, 38, 0.5);
}
.hero__title em {
  font-style: normal;
  display: block;
  color: var(--amber);
}

.hero__sub {
  margin-top: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(226, 234, 241, 0.9);
  max-width: 46ch;
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero__scroll {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--data);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 234, 241, 0.62);
}
.hero__scroll span {
  display: block;
  width: 54px; height: 1px;
  background: rgba(226, 234, 241, 0.34);
  position: relative;
  overflow: hidden;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateX(-100%);
  animation: track 2.8s var(--ease-io) infinite;
}
@keyframes track {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- Capability strip: the five-second read --- */

.capability {
  background: var(--navy-900);
  border-top: 1px solid rgba(175, 192, 208, 0.14);
  position: relative;
  z-index: 2;
}
.capability__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.capability__cell {
  padding: clamp(1.5rem, 2.4vw, 2.35rem) clamp(0.85rem, 1.8vw, 1.9rem);
  border-left: 1px solid rgba(175, 192, 208, 0.14);
  position: relative;
}
.capability__cell:first-child { border-left: 0; padding-left: 0; }
.capability__cell::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 34px; height: 2px;
  background: var(--amber);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}
.js .capability__cell::after { transform: scaleX(0); }
.js .capability__cell.in::after { transform: scaleX(1); }
.capability__cell:first-child::after { left: 0; }

.capability__value {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: clamp(1.15rem, 2.05vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--paper);
  /* two lines' worth, so every cell's key sits on the same line */
  min-height: 2.08em;
}
.capability__key {
  margin-top: 0.5rem;
  font-family: var(--data);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel-500);
}

/* ============================================================ Section heads */

.head { max-width: 940px; }
.head__title { font-size: var(--fs-display-l); }
.head__title .soft { color: var(--steel-500); }
.head .lead { margin-top: 1.5rem; }
.head + .route-rule { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.on-dark { color: var(--paper); }
.on-dark .lead { color: rgba(198, 213, 227, 0.86); }
.on-dark .label { color: var(--steel-500); }
.on-dark .head__title .soft { color: var(--steel-600); }

/* ============================================================ Intro */

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.intro__statement {
  font-size: var(--fs-display-l);
  line-height: 1.0;
}
.intro__copy { display: grid; gap: 1.25rem; }
.intro__copy p { color: var(--ink-soft); max-width: 60ch; }

.pledge {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--steel-100);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--fs-display-s);
  letter-spacing: -0.02em;
  color: var(--navy);
}
.pledge svg { width: 22px; height: 22px; color: var(--amber); align-self: baseline; position: relative; top: 4px; flex: none; }

/* ============================================================ Container scale drawing */

.spec { margin-top: clamp(3.5rem, 7vw, 6rem); }

.spec__stage {
  background: var(--steel-050);
  border: 1px solid var(--steel-100);
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.spec__stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--steel-200) 0 14px, transparent 14px 26px);
}
.spec__drawing { width: 100%; height: auto; }

.spec__note {
  margin-top: 1.25rem;
  font-family: var(--data);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-600);
}

.spec__grid {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--steel-100);
}
.spec__item {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem) 0.5rem;
  border-left: 1px solid var(--steel-100);
}
.spec__item:first-child { border-left: 0; padding-left: 0; }
.spec__item h3 {
  font-size: var(--fs-display-s);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.1em; /* keeps the four paragraphs on one baseline */
}
.spec__item h3 svg { width: 26px; height: 26px; color: var(--amber); flex: none; }
.spec__item p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.62;
}

/* ============================================================ Flow band (import / export) */

.band {
  position: relative;
  background: var(--navy-900);
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.05) brightness(0.72);
}
.band__grade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(6, 23, 38, 0.95) 0%, rgba(6, 23, 38, 0.78) 45%, rgba(8, 33, 60, 0.55) 100%),
    linear-gradient(to bottom, rgba(6, 23, 38, 0.7), rgba(6, 23, 38, 0.3) 40%, rgba(6, 23, 38, 0.82));
}

.flow {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.flow__col { position: relative; }
.flow__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(175, 192, 208, 0.22);
}
.flow__head h3 { font-size: var(--fs-display-m); }
.flow__head svg { width: 30px; height: 30px; color: var(--amber); flex: none; }
.flow__col p {
  margin-top: 1.3rem;
  color: rgba(198, 213, 227, 0.88);
  max-width: 48ch;
}

/* the movement diagram */
.leg {
  margin-top: 1.75rem;
  max-width: 26rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: var(--data);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.leg__node {
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(175, 192, 208, 0.3);
  color: var(--paper);
  background: rgba(6, 23, 38, 0.42);
}
.leg__link {
  flex: 1 1 32px;
  min-width: 32px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--amber) 0 7px, transparent 7px 13px);
  position: relative;
}
.leg__link::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 8px; height: 10px;
  transform: translateY(-50%);
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============================================================ Services index */

.services__list { border-top: 1px solid var(--steel-100); }

.service {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.4rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--steel-100);
  position: relative;
  transition: background-color 260ms ease;
}
.service::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
  top: -1px; bottom: -1px;
  background: var(--steel-050);
  opacity: 0;
  z-index: -1;
  transition: opacity 260ms ease;
}
.service__icon {
  width: 40px; height: 40px;
  color: var(--navy-600);
  transition: color 260ms ease, transform 400ms var(--ease-out);
}
.service h3 {
  font-size: clamp(1.15rem, 1.65vw, 1.42rem);
  letter-spacing: -0.02em;
  align-self: center;
}
.service p {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 56ch;
  align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .service:hover::before { opacity: 1; }
  .service:hover .service__icon { color: var(--amber); transform: translateX(4px); }
}

/* ============================================================ Sectors */

.sectors { background: var(--steel-050); border-block: 1px solid var(--steel-100); }

.marquee {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  overflow: hidden;
  position: relative;
  contain: content;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  /* The track is several thousand pixels wide, so it only ever runs while the
     band is actually on screen. JS adds .is-running; without JS it just sits still. */
  animation: slide 46s linear infinite;
  animation-play-state: paused;
}
.marquee__track.is-running { animation-play-state: running; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-right: 1.25rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  letter-spacing: -0.025em;
  color: var(--navy);
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}
.marquee__item:nth-child(even) { color: var(--steel-500); }

.sectors__foot {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--steel-200);
}
.sectors__foot p {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--fs-display-s);
  letter-spacing: -0.02em;
  max-width: 34ch;
}

/* ============================================================ Why */

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(175, 192, 208, 0.2);
}
.why__item {
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.25rem, 2.4vw, 2.2rem) clamp(1.75rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid rgba(175, 192, 208, 0.2);
  border-right: 1px solid rgba(175, 192, 208, 0.2);
}
.why__item:nth-child(3n) { border-right: 0; padding-right: 0; }
.why__item:not(:nth-child(3n)) { padding-left: 0; }
.why__item:nth-child(3n+2), .why__item:nth-child(3n) { padding-left: clamp(1.25rem, 2.4vw, 2.2rem); }

.why__item h3 {
  font-size: var(--fs-display-s);
  margin-top: 1rem;
}
.why__item p {
  margin-top: 0.85rem;
  color: rgba(198, 213, 227, 0.82);
  font-size: var(--fs-small);
  line-height: 1.62;
  max-width: 40ch;
}
.why__item svg { width: 30px; height: 30px; color: var(--amber); }

.why__item--feature {
  grid-column: span 3;
  border-right: 0;
  border-bottom: 0;
  padding-right: 0;
  padding-left: 0 !important;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.why__item--feature h3 { margin-top: 0; font-size: var(--fs-display-m); }
.why__item--feature p { margin-top: 0.7rem; max-width: 58ch; }
.bbbee {
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  border: 1px solid var(--amber);
  color: var(--amber);
  flex: none;
}
.bbbee strong {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.bbbee span {
  font-family: var(--data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================ Process */

.process { position: relative; }
.process__track {
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
/* runs from the centre of the first marker to the centre of the last */
.process__road {
  position: absolute;
  left: 28px; right: calc(20% - 28px);
  top: 27px;
  height: 2px;
  background: var(--steel-100);
  overflow: hidden;
}
.process__road::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 1200ms var(--ease-out);
}

.step { padding-right: clamp(1rem, 2.4vw, 2rem); position: relative; }
.step__marker {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--steel-200);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--steel-500);
  position: relative;
  z-index: 1;
  transition: border-color 400ms var(--ease-out), color 400ms var(--ease-out),
              background-color 400ms var(--ease-out);
}
.step.in .step__marker {
  border-color: var(--amber);
  color: var(--navy-900);
  background: var(--amber);
}
.step h3 {
  margin-top: 1.35rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  min-height: 2em; /* two-line headings must not push their paragraph out of line */
}
.step p {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 30ch;
}

/* ============================================================ Reach / map */

.reach { background: var(--navy-900); color: var(--paper); }
.reach__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.reach__copy .lead { margin-top: 1.5rem; }
.reach__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

.reach__legend {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(175, 192, 208, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  font-family: var(--data);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.reach__legend span { display: flex; align-items: center; gap: 0.6rem; }
.reach__legend i {
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--amber);
  flex: none;
}
.reach__legend i.hub { background: var(--paper); }

.map { width: 100%; height: auto; }
.map__land { fill: rgba(30, 65, 121, 0.32); stroke: rgba(175, 192, 208, 0.5); stroke-width: 4; }
.map__hole { fill: var(--navy-900); stroke: rgba(175, 192, 208, 0.34); stroke-width: 3.5; }
.map__route {
  fill: none;
  stroke: var(--amber);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.9;
}
.js .map__route {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1500ms var(--ease-out);
}
.js .map.in .map__route { stroke-dashoffset: 0; }
.map__city { fill: var(--paper); }
.map__hub { fill: var(--amber); }
/* Scaled by transform rather than by animating `r`, so it composites
   instead of forcing a repaint of the map on every frame. */
.map__pulse {
  fill: none;
  stroke: var(--amber);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.map__pulse.is-running { animation: pulse 3.2s var(--ease-out) infinite; }
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
.map__city { r: 11; }
.map__hub { r: 17; }
.map__label {
  font-family: var(--data);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--steel-300);
  paint-order: stroke;
  stroke: var(--navy-900);
  stroke-width: 6px;
  stroke-linejoin: round;
}
.map__label--hub {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 38px;
  letter-spacing: -0.01em;
  fill: var(--paper);
  paint-order: stroke;
  stroke: var(--navy-900);
  stroke-width: 7px;
  stroke-linejoin: round;
}

/* ============================================================ Quote */

.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.quote__aside .lead { margin-top: 1.5rem; }

.contact-list {
  margin-top: 2.5rem;
  display: grid;
  gap: 1px;
  background: var(--steel-100);
  border-block: 1px solid var(--steel-100);
}
.contact-list a, .contact-list div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  background: var(--paper);
  transition: color 200ms ease;
}
.contact-list svg { width: 22px; height: 22px; color: var(--amber); flex: none; }
.contact-list b {
  font-family: var(--data);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steel-600);
  display: block;
}
.contact-list span {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--navy);
}
@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover span { color: var(--amber); }
}

/* --- form --- */

.form {
  border: 1px solid var(--steel-200);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}
.form__head {
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.35rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--steel-100);
  background: var(--steel-050);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.form__head h3 { font-size: var(--fs-display-s); }
.form__body {
  padding: clamp(1.35rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
}
.form__foot {
  padding: 0 clamp(1.35rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 1rem;
}
.form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.form__actions .btn { flex: 1 1 220px; justify-content: center; }
.form__note { font-size: 0.875rem; color: var(--steel-600); line-height: 1.55; }

/* Whole-form failure — a wrong password or an unreachable server, not a bad field. */
.form__alert {
  position: relative;
  padding: 0.9rem 1.1rem 0.9rem 2.35rem;
  background: #fff5ef;
  border: 1px solid #e8b79a;
  color: #8a2c07;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.form__alert::before {
  content: "";
  position: absolute;
  left: 1.1rem; top: 1.35rem;
  width: 8px; height: 8px;
  background: #c2410c;
  transform: rotate(45deg);
}
.form__alert[hidden] { display: none; }

.field { display: grid; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }

.field > label {
  font-family: var(--data);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-700);
}
.field > label .opt { color: var(--steel-500); letter-spacing: 0.08em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--steel-200);
  border-radius: 0;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  appearance: none;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
/* steel-500 measures 3.7:1 on white — below the 4.5 floor for placeholder text */
.field input::placeholder, .field textarea::placeholder { color: #5c7186; opacity: 1; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5670' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 17px;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #c2410c;
  background: #fff8f3;
}
.field__error {
  display: none;
  font-family: var(--data);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #b03a09;
}
.field.is-invalid .field__error { display: block; }

/* segmented choice — replaces a select where there are only two answers */
.choice { display: flex; gap: 0; border: 1px solid var(--steel-200); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  flex: 1;
  text-align: center;
  padding: 0.8rem 0.5rem;
  font-family: var(--data);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-700);
  cursor: pointer;
  border-left: 1px solid var(--steel-200);
  transition: background-color 180ms ease, color 180ms ease;
  user-select: none;
}
.choice label:first-of-type { border-left: 0; }
.choice input:checked + label { background: var(--navy); color: var(--paper); }
.choice input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .choice input:not(:checked) + label:hover { background: var(--steel-050); color: var(--navy); }
}

/* success state */
.form__done {
  display: none;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: left;
}
.form.is-sent .form__body,
.form.is-sent .form__foot { display: none; }
.form.is-sent .form__done { display: block; }
.form__done svg { width: 46px; height: 46px; color: var(--amber); }
.form__done h4 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: var(--fs-display-s); margin: 1.25rem 0 0; letter-spacing: -0.02em; }
.form__done p { margin-top: 0.85rem; color: var(--ink-soft); max-width: 48ch; }
.form__done .btn { margin-top: 1.75rem; }

/* ============================================================ Closing band */

.closer { position: relative; background: var(--navy-900); color: var(--paper); isolation: isolate; overflow: hidden; }
/* Centred copy needs a centred scrim, otherwise the left-to-right band grade
   flattens the photograph into a flat navy field. */
/* the road and dry veld carry contrast; the sky does not */
.closer .band__media img {
  object-position: 50% 76%;
  filter: saturate(0.55) contrast(1.12) brightness(1.02);
}
.closer .band__grade {
  background:
    radial-gradient(78% 66% at 50% 50%, rgba(6, 23, 38, 0.9) 0%, rgba(6, 23, 38, 0.72) 46%, rgba(6, 23, 38, 0.28) 78%, rgba(6, 23, 38, 0.12) 100%),
    linear-gradient(to bottom, rgba(6, 23, 38, 0.82), rgba(8, 33, 60, 0.1) 34%, rgba(8, 33, 60, 0.1) 62%, rgba(6, 23, 38, 0.88));
}
.closer { padding-block: clamp(6rem, 11vw, 11rem); }
.closer__inner { text-align: center; display: grid; justify-items: center; }
.closer__title { font-size: var(--fs-display-l); max-width: 20ch; }
.closer .lead { margin-top: 1.4rem; text-align: center; }
.closer__actions { margin-top: 2.35rem; display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ============================================================ Footer */

.footer { background: var(--navy-900); color: var(--steel-300); border-top: 1px solid rgba(175, 192, 208, 0.16); }
.footer__top {
  padding-block: clamp(3.25rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
}
.footer__brand img { height: 62px; width: auto; }
.footer__tagline {
  margin-top: 0.9rem;
  font-family: var(--data);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.footer__brand p + p { margin-top: 1.5rem; max-width: 34ch; font-size: var(--fs-small); line-height: 1.65; }

.footer h4 {
  font-family: var(--data);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 1.15rem;
  font-stretch: normal;
}
.footer__list { display: grid; gap: 0.6rem; font-size: var(--fs-small); }
.footer__list a { transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__list a:hover { color: var(--amber); } }
.footer__list strong { color: var(--paper); font-weight: 600; }

.footer__bar {
  border-top: 1px solid rgba(175, 192, 208, 0.16);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--data);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--steel-600);
}
.footer__bar strong {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  color: var(--steel-300);
  font-size: 0.9375rem;
}

/* ============================================================ Floating WhatsApp */

.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.15rem;
  background: #1f9d55;
  color: #fff;
  box-shadow: var(--shadow-deep);
  font-family: var(--data);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(calc(100% + 2.5rem));
  transition: transform 420ms var(--ease-out), background-color 200ms ease;
}
.wa.is-in { transform: none; }
.wa:active { transform: scale(0.97); }
.wa.is-in:active { transform: scale(0.97); }
.wa svg { width: 22px; height: 22px; flex: none; }
.wa__text { display: inline; }
@media (hover: hover) and (pointer: fine) { .wa:hover { background: #178548; } }

/* ============================================================ Reveal */

.js .r {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.js .r.in { opacity: 1; transform: none; }

/* ============================================================ Responsive */

@media (max-width: 1080px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why__item:nth-child(3n) { border-right: 1px solid rgba(175, 192, 208, 0.2); padding-right: clamp(1.25rem, 2.4vw, 2.2rem); }
  .why__item { padding-left: clamp(1.25rem, 2.4vw, 2.2rem) !important; padding-right: clamp(1.25rem, 2.4vw, 2.2rem); }
  .why__item:nth-child(2n+1) { padding-left: 0 !important; }
  .why__item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .why__item--feature { grid-column: span 2; padding-left: 0 !important; padding-right: 0; }
  .reach__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .quote__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }
  html { scroll-padding-top: 76px; }
  .header__bar { height: 74px; }
  .brand img { height: 30px; }
  .nav, .header .btn--nav { display: none; }
  .burger { display: flex; }
  .drawer { padding-top: 104px; }

  .capability__grid { grid-template-columns: repeat(2, 1fr); }
  .capability__cell { border-left: 0; padding-left: 0; padding-right: 1rem; border-top: 1px solid rgba(175, 192, 208, 0.14); }
  .capability__cell:nth-child(-n+2) { border-top: 0; }
  .capability__cell::after { left: 0; }
  .capability__cell:last-child { grid-column: span 2; }

  .intro__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .spec__grid { grid-template-columns: repeat(2, 1fr); }
  .spec__item { border-left: 0; padding-left: 0; padding-right: 1.25rem; }
  .spec__item:nth-child(n+3) { border-top: 1px solid var(--steel-100); padding-top: 1.75rem; }

  .flow { grid-template-columns: 1fr; gap: 2.75rem; }

  .service { grid-template-columns: 34px minmax(0, 1fr); gap: 0.35rem 1.15rem; }
  .service__icon { width: 30px; height: 30px; grid-row: 1; }
  .service h3 { grid-column: 2; }
  .service p { grid-column: 2; margin-top: 0.35rem; }

  .process__track { grid-template-columns: 1fr; gap: 0; }
  .process__road {
    top: 0; bottom: 0; left: 27px; right: auto;
    width: 2px; height: auto;
  }
  .process__road::after { transform: scaleY(var(--progress, 0)); transform-origin: top center; }
  .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 1.35rem;
    padding: 0 0 2.25rem;
  }
  .step:last-child { padding-bottom: 0; }
  .step__marker { grid-row: span 2; }
  .step h3 { margin-top: 0.7rem; align-self: start; }
  .step p { grid-column: 2; max-width: 46ch; }

  .why__item--feature { grid-template-columns: auto minmax(0, 1fr); }
  .why__item--feature .btn { grid-column: 1 / -1; justify-self: start; }

  .form__body { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

@media (max-width: 620px) {
  :root { --fs-body: 1rem; }
  .hero { min-height: 92svh; }
  .hero__media img { object-position: 44% 52%; }
  .hero__grade {
    background:
      linear-gradient(to bottom, rgba(6, 23, 38, 0.86) 0%, rgba(6, 23, 38, 0.44) 24%, rgba(6, 23, 38, 0.34) 40%, rgba(6, 23, 38, 0.78) 66%, rgba(6, 23, 38, 0.93) 84%, rgba(6, 23, 38, 0.98) 100%),
      linear-gradient(to right, rgba(6, 23, 38, 0.72), rgba(6, 23, 38, 0.28));
  }
  .hero__scroll { display: none; }
  .capability__grid { grid-template-columns: 1fr 1fr; }
  .capability__value { font-size: 1.05rem; }
  .sectors__foot { flex-direction: column; align-items: flex-start; }
  .why__grid { grid-template-columns: 1fr; }
  .why__item, .why__item:nth-child(2n+1), .why__item:nth-child(2n) {
    padding-left: 0 !important; padding-right: 0; border-right: 0;
  }
  .why__item--feature { grid-column: span 1; grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__brand { grid-column: span 1; }
  .wa__text { display: none; }
  .wa { padding: 0.95rem; }
  .spec__grid { grid-template-columns: 1fr; }
  .spec__item { padding-right: 0; }
  .spec__item:nth-child(n+2) { border-top: 1px solid var(--steel-100); padding-top: 1.65rem; }
  .spec__item:nth-child(n+3) { padding-top: 1.65rem; }
}

/* ============================================================ Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .r { opacity: 1; transform: none; transition: opacity 200ms linear; }
  .js .route-rule,
  .js .capability__cell::after { transform: scaleX(1); }
  .js .map__route { stroke-dashoffset: 0; transition: none; }
  .marquee__track, .marquee__track.is-running { animation: none; }
  .map__pulse.is-running { animation: none; opacity: 0.35; }
  .hero__scroll span::after { animation: none; transform: none; }
  .process__road::after { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The spinner reports live progress, so it keeps turning — just slower.
     A frozen spinner reads as a hung form. */
  .btn.is-busy .btn__spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ============================================================ Print */

@media print {
  .header, .drawer, .wa, .hero__scroll, .form__actions { display: none !important; }
  body { color: #000; }
  .band, .reach, .closer, .footer, .capability { background: #fff !important; color: #000 !important; }
}