/* ==========================================================================
   Blackbird Transportation — main stylesheet
   Mobile-first. Bootstrap 5 supplies reboot + grid; everything visual is here.
   All entrance / scroll / looping motion is driven by GSAP (assets/js/animations.js).
   CSS only defines the hidden start states (under html.js) and hover/focus states.

   01 Fonts        06 Header & drawer   11 Why
   02 Tokens       07 Hero              12 Process
   03 Base         08 Stats             13 CTA strip
   04 Typography   09 About             14 Footer
   05 Buttons      10 Services+ticker   15 Inner-page components
                                        15b About + Contact pages
                                        16 Motion start states
   ========================================================================== */

/* 01 Fonts — Manrope variable (200–800), self-hosted from assets/vendor/fonts (SIL OFL).
   One family site-wide; hierarchy comes from weight only. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

/* 02 Tokens — palette drawn from the logo: deep logo blue + a lighter sky-blue accent */
:root {
  --navy: #004289; /* logo blue */
  --accent: #6bb6f5;
  --accent-hi: #9ccdf8;
  --text: #424242;
  --white: #ffffff;
  --soft: #f4f5f8;
  --dark: #10182d;
  --error: #b3261e;

  --line: rgba(0, 66, 137, 0.14);
  --line-light: rgba(255, 255, 255, 0.14);
  --muted-light: rgba(255, 255, 255, 0.74);

  --ff-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-head: var(--ff-base);
  --ff-body: var(--ff-base);
  --ff-nav: var(--ff-base);
  --ff-mono: var(--ff-base);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --header-h: 76px;
  --header-bar: 6px;
  --focus: var(--navy);
  --section-y: clamp(4rem, 2.5rem + 6vw, 7rem);
  --stats-lift: clamp(3rem, 2rem + 3vw, 4.5rem); /* about page: stats card overlap */

  /* Global type scale: change these values to update the matching role site-wide. */
  --fs-section-heading: clamp(2.2rem, min(0.7rem + 3.6vw, 7.5vh), 4rem);
  --fs-subheading: 1.25rem;
  --fs-small-heading: 0.75rem;
  --fs-paragraph: 1rem;
  --fs-button: 1rem;
  --fs-eyebrow: 0.75rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 992px) {
  :root {
    --header-h: 130px;
    --section-y: clamp(3.5rem, 8.5vh, 6.5rem);
  }
}

/* 03 Base */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}
img,
svg {
  max-width: 100%;
}
img {
  display: block;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
p a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a[href^="tel:"] {
  white-space: nowrap;
}

.container-xxl {
  --bs-gutter-x: 2.5rem;
}
@media (min-width: 992px) {
  .container-xxl {
    --bs-gutter-x: 4rem;
  }
}
@media (min-width: 1600px) {
  .container-xxl {
    max-width: 1520px;
  }
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}
.hero,
.section--dark,
.bb-drawer__body,
.ticker {
  --focus: var(--accent);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--accent);
  color: var(--dark);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus {
  top: 1rem;
}

.section {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}
.section > .container-xxl {
  position: relative;
  z-index: 1;
}
.section--dark {
  background-color: var(--dark);
  color: var(--muted-light);
}
.grain {
  background-image: var(--grain);
}

/* 04 Typography */
h1,
h2,
h3,
.display-head {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display-head {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #000;
  margin-bottom: 1.75rem;
  text-transform: capitalize;
}
.display-head em {
  font-style: normal;
  color: var(--navy);
}
.section--dark .display-head {
  color: var(--white);
}
.section--dark .display-head em,
.hero .display-head em,
.page-hero .display-head em {
  color: var(--accent);
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 10px;
  margin-bottom: 0px;
}
.line > span {
  display: inline-block;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}
.eyebrow--accent {
  color: var(--accent);
}

.tech-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-small-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.lead-bb {
  color: #2f2f2f;
  line-height: 1.6;
}

.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.75rem, 5vw, 5rem);
}
.section-head > * {
  min-width: 0; /* a long word must not widen the grid track */
}
.section-head .display-head {
  margin-bottom: 0;
}
.section-head__aside {
  max-width: 28rem;
  margin: 0;
}
.section-head__aside > p {
  margin-bottom: 1rem;
}
.section-head--light .section-head__aside {
  color: var(--muted-light);
}
@media (min-width: 992px) {
  .section-head {
    grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr);
    align-items: end;
    gap: 4rem;
    margin-bottom: clamp(1.75rem, 4.5vh, 3.25rem);
  }
  .section-head__aside {
    justify-self: end;
    border-left: 1px solid var(--line);
    padding-left: 1.75rem;
  }
  .section-head--light .section-head__aside {
    border-left-color: var(--line-light);
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--accent);
}
.text-link .bi {
  transition: transform 0.35s var(--ease-out);
}
.text-link:hover .bi {
  transform: translateX(4px);
}

/* Shared decorative bits (motion added by GSAP) */
.route-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}
.route-dash {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 2 14;
  stroke-linecap: round;
}
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 0 rgba(107, 182, 245, 0.6);
}

/* 05 Buttons */
.btn-bb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: var(--fs-button);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.1;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition:
    color 0.35s,
    border-color 0.35s,
    background-color 0.35s,
    box-shadow 0.35s;
}
.btn-bb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-io);
}
.btn-bb:hover::before {
  transform: none;
}
.btn-bb .bi {
  transition: transform 0.35s var(--ease-out);
}
.btn-bb:hover .bi-arrow-right {
  transform: translateX(4px);
}
.btn-bb--sm {
  min-height: 44px;
  padding: 0.65rem 1.15rem;
}
.btn-bb--accent {
  background: var(--accent);
  color: var(--dark);
}
.btn-bb--accent::before {
  background: var(--accent-hi);
}
.btn-bb--accent:hover {
  color: var(--dark);
  box-shadow: 0 14px 30px -14px rgba(107, 182, 245, 0.7);
}
.btn-bb--navy {
  background: var(--navy);
  color: var(--white);
}
.btn-bb--navy::before {
  background: var(--dark);
}
.btn-bb--navy:hover {
  color: var(--white);
}
.btn-bb--dark {
  background: var(--dark);
  color: var(--white);
}
.btn-bb--dark::before {
  background: var(--navy);
}
.btn-bb--dark:hover {
  color: var(--white);
}
.btn-bb--ghost-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-bb--ghost-light::before {
  background: var(--white);
}
.btn-bb--ghost-light:hover {
  color: var(--dark);
  border-color: var(--white);
}
.btn-bb[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* 06 Header --------------------------------------------------------------
   White bar so the original (dark grey + navy) logo reads clearly, with a thick
   navy brand bar underneath — after the reference layout. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1030;
}
.mainbar {
  height: var(--header-h);
  background: var(--white);
  color: var(--navy);
  border-bottom: 3px solid var(--navy);
  transition: box-shadow 0.45s;
}
.mainbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
/* Header keeps one fixed height (no shrink), so it can never detach from the hero. */
.is-scrolled .mainbar {
  box-shadow: 0 16px 40px -24px rgba(16, 24, 45, 0.45);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand__logo {
  height: 56px;
  width: auto;
}
.brand-tagline {
  padding-left: 1.5rem;
  border-left: 2px solid var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--navy);
}
@media (min-width: 992px) {
  .brand__logo {
    height: 105px;
  }
}

.nav-desktop {
  gap: clamp(1.1rem, 1.7vw, 2.2rem);
}
.nav-link-bb {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0;
  font-family: var(--ff-nav);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  transition: color 0.25s;
}
.nav-link-bb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-link-bb:hover,
.nav-link-bb.is-active {
  color: #000;
}
.nav-link-bb:hover::after,
.nav-link-bb.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--navy);
  border: 0;
  border-radius: 2px;
  color: var(--white);
}
.hamburger span {
  display: block;
  height: 1px;
  width: 22px;
  background: currentColor;
  transition: width 0.35s var(--ease-out);
}
.hamburger span:nth-child(2) {
  width: 14px;
  background: var(--accent);
}
.hamburger span:nth-child(3) {
  width: 18px;
}
.hamburger:hover span {
  width: 22px;
}

/* Mobile drawer (Bootstrap offcanvas-start = slides in from the left) */
.bb-drawer.offcanvas {
  --bs-offcanvas-width: min(88vw, 420px);
  --bs-offcanvas-bg: var(--dark);
  --bs-offcanvas-color: var(--white);
  --bs-offcanvas-transition: transform 0.55s var(--ease-io);
  --bs-offcanvas-border-width: 0;
  background-image: var(--grain);
  border-right: 3px solid var(--accent) !important;
}
.offcanvas-backdrop {
  --bs-backdrop-bg: #070b16;
  --bs-backdrop-opacity: 0.65;
}
.bb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0.3rem 1.25rem;
  background: var(--white);
  border-bottom: var(--header-bar) solid var(--navy);
}
.bb-drawer__head .brand__logo {
  height: 52px;
}
.bb-drawer__close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 2px;
  font-size: 1.1rem;
  transition:
    background-color 0.25s,
    color 0.25s,
    transform 0.4s var(--ease-out);
}
.bb-drawer__close:hover {
  background: var(--accent);
  color: var(--dark);
  transform: rotate(90deg);
}
.bb-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
}
.bb-drawer__links {
  margin: 0 0 2rem;
}
.bb-drawer__links a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--ff-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition:
    color 0.25s,
    padding-left 0.35s var(--ease-out);
}
.bb-drawer__links a:hover,
.bb-drawer__links a.is-active {
  color: var(--accent);
  padding-left: 0.4rem;
}
.bb-drawer__foot {
  margin-top: auto;
  display: grid;
  gap: 1rem;
  color: var(--muted-light);
}
.bb-drawer__foot .tech-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bb-drawer__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-family: var(--ff-head);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

/* 07 Hero — full-bleed cinematic image, centred statement ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--white);
  text-align: center;
}
.hero .btn-bb.btn-bb--ghost-light {
    backdrop-filter: blur(0px);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 63%; /* keep the truck and the sunset in frame */
  transform-origin: 50% 270%;
  will-change: transform;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /*background:*/
  /*  radial-gradient(*/
  /*    ellipse 65% 55% at 50% 48%,*/
  /*    rgba(16, 24, 45, 0.5),*/
  /*    rgba(16, 24, 45, 0) 72%*/
  /*  ),*/
  /*  linear-gradient(*/
  /*    180deg,*/
  /*    rgba(16, 24, 45, 0.45) 0%,*/
  /*    rgba(16, 24, 45, 0.12) 32%,*/
  /*    rgba(16, 24, 45, 0.35) 70%,*/
  /*    rgba(16, 24, 45, 0.9) 100%*/
  /*  );*/
  background: radial-gradient(ellipse 65% 55% at 50% 48%, rgb(16 24 45 / 48%), rgba(16, 24, 45, 0) 72%), linear-gradient(180deg, rgb(16 24 45 / 0%) 0%, rgba(16, 24, 45, 0.12) 32%, rgba(16, 24, 45, 0.35) 70%, rgb(16 24 45 / 0%) 100%);
}
.hero__route {
  position: absolute;
  left: 0;
  bottom: 3rem;
  width: 100%;
  height: 30%;
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-bottom: 3.5rem;
}
.hero__title {
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  font-weight: 800;
  line-height: 1;
}
.hero__kicker {
  display: block;
  margin-bottom: clamp(0.4rem, 1.5vh, 1rem);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: clamp(0.85rem, 0.65rem + 0.8vw, 1.3rem);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero__word {
  display: block;
  font-size: clamp(2.4rem, min(0.5rem + 8.5vw, 16vh), 5.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.hero__word > span {
  display: inline-block;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 0 0.08em;
}
.hero__word em {
  font-style: normal;
  color: var(--accent);
}
.hero__word .char {
  display: inline-block;
}
.hero__word .char-mask {
  display: inline-block;
  overflow: hidden;
  padding: 0.02em 0.03em 0.06em;
  margin: 0 -0.03em;
  vertical-align: top;
}
.hero__lead {
  max-width: 47rem;
  margin: 0 auto clamp(1.75rem, 4vh, 2.5rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}
.hero__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(16, 24, 45, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.hero__strip-inner p,
.hero__strip-inner a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__strip-inner i {
  font-style: normal;
  color: var(--accent);
}
.flag {
  display: inline-block;
  width: auto;
  height: 1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 24, 45, 0.14);
  vertical-align: -0.12em;
}
.hero__strip-inner .flag {
  height: 12px;
  margin-right: -0.25rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.flag-pair {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: 0.75rem;
  vertical-align: middle;
}
.flag-pair .flag {
  height: 0.42em;
  border-radius: 3px;
}
.footer__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.footer__flags span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer__flags .flag {
  height: 14px;
}
.hero__strip-inner a:hover {
  color: var(--accent);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(56px + 1.25rem);
  z-index: 2;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
}
.hero__scroll span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
}
@media (max-width: 575.98px) {
  .hero__ctas .btn-bb {
    width: 100%;
  }
  .hero__strip-inner {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}
@media (max-height: 720px), (max-width: 767.98px) {
  .hero__scroll {
    display: none;
  }
}

/* 08 At a glance (counters) + Get in touch form -------------------------
   Desktop: white left half with counters, navy right half (bleeds to the viewport
   edge) holding the form. Mobile: stacked, form on a full-width navy block. */
.glance {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.glance > .container-xxl {
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .glance::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    background: var(--navy) var(--grain);
  }
}

.glance__stats {
  padding: var(--section-y) 0;
}
.glance__stats .display-head {
  margin-bottom: 1rem;
}
.glance__intro {
  max-width: 32rem;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
}
.glance__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0;
}
.gstat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.25rem 1.2rem 1.4rem;
  background: var(--soft);
  border: 1px solid var(--line);
  transition:
    color 0.4s,
    border-color 0.4s,
    box-shadow 0.5s;
}
.gstat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-io);
}
.gstat:hover {
  border-color: var(--navy);
  box-shadow: 0 26px 40px -28px rgba(16, 24, 45, 0.6);
}
.gstat:hover::before {
  transform: none;
}
.gstat__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
  background: var(--navy);
  color: var(--white);
  font-size: 1.15rem;
  transition:
    background-color 0.4s,
    color 0.4s;
}
.gstat__value {
  margin: 20px 0 0.35rem;
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 0.95;
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.6rem);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s;
}
.gstat__label {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.4s;
  margin-top: 10px;
}
.gstat__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(var(--fill, 1));
  transform-origin: left;
}
.gstat:hover .gstat__icon {
  background: var(--accent);
  color: var(--dark);
}
.gstat:hover .gstat__value {
  color: var(--white);
}
.gstat:hover .gstat__label {
  color: var(--muted-light);
}
.gstat--feature {
  background: var(--navy);
  background-image: var(--grain);
  border-color: var(--navy);
}
.gstat--feature .gstat__icon {
  background: var(--accent);
  color: var(--dark);
}
.gstat--feature .gstat__value {
  color: var(--accent);
}
.gstat--feature .gstat__label {
  color: var(--muted-light);
}
.gstat--feature::before {
  background: var(--dark);
}
@media (max-width: 359.98px) {
  .glance__grid {
    gap: 0.6rem;
  }
  .gstat {
    padding: 1rem 0.9rem 1.2rem;
  }
}

.glance__form {
  --focus: var(--accent);
  position: relative;
  color: var(--muted-light);
  background-color: var(--navy);
  margin-inline: -1.25rem; /* = container padding (the g-0 row zeroes --bs-gutter-x) */
  padding: var(--section-y) 1.25rem;
}
.glance__form .display-head {
  color: var(--white);
  margin-bottom: 1rem;
}
.glance__form-intro {
  max-width: 34rem;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
@media (min-width: 992px) {
  .glance__stats {
    padding-right: clamp(2rem, 4vw, 4.5rem);
  }
  .glance__form {
    margin-inline: 0;
    padding: var(--section-y) 0 var(--section-y) clamp(2rem, 4vw, 4.5rem);
    background: transparent;
  }
}

/* Dark form fields (shared field structure with the quote form) */
.contact-form__grid {
  display: grid;
  gap: 1rem 1.1rem;
}
@media (min-width: 576px) {
  .contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-form .field--full {
    grid-column: 1 / -1;
  }
}
.contact-form .field label {
  color: rgba(255, 255, 255, 0.85);
}
.contact-form .field label span {
  color: var(--accent);
}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  height: 45px;
  padding: 0.5rem 1rem;
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-form .field textarea {
  min-height: 96px;
}
.contact-form .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236bb6f5' stroke-width='2'/%3E%3C/svg%3E");
}
.contact-form .field select option {
  color: var(--dark);
  background: var(--white);
}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.contact-form .field input:hover,
.contact-form .field select:hover,
.contact-form .field textarea:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 5px rgba(107, 182, 245, 0.2);
}
.contact-form .field__error {
  color: #ffb4a8;
}
.contact-form .field.has-error input,
.contact-form .field.has-error select {
  border-color: #ff8a7a;
  background-color: rgba(255, 90, 70, 0.1);
}
/* Homepage driver application form */
.glance__form--application .glance__form-title { max-width: 14ch; }
.application-form--home {
  display: block;
  padding: 0;
}
.application-form--home .contact-form__grid {
  gap: 0.7rem 1rem;
}
.application-form--home .field--full { grid-column: 1 / -1; }
.application-form--home .field input[type="file"] {
  height: auto;
  min-height: 48px;
  padding: 0.55rem;
  color: var(--white);
  border-style: dashed;
}
.application-form--home .field small,
.application-form--home .application-form__submit > span {
  color: rgba(255, 255, 255, 0.72);
}
.application-form--home .application-form__check { color: rgba(255, 255, 255, 0.88); }
.application-form--home .application-form__check input { accent-color: var(--accent); }
.application-form--home .application-form__privacy { color: rgba(255, 255, 255, 0.72); }
.application-form--home .application-form__status.is-success,
.application-form--home .application-form__status.is-error { margin-top: 1rem; }
.application-form--home .contact-form__foot { margin-top: 1.25rem; }
@media (min-width: 1200px) {
  .application-form--home .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .application-form--home .field--full,
  .application-form--home .application-form__status { grid-column: 1 / -1; }
}
.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.4rem;
}
.contact-form__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--muted-light);
  transition: color 0.25s;
}
.contact-form__call strong {
  color: var(--white);
  font-weight: 600;
}
.contact-form__call .bi {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(107, 182, 245, 0.5);
  color: var(--white);
}
.contact-form__call:hover strong {
  color: var(--accent);
}
  @media (max-width: 575.98px) {
  .contact-form__foot .btn-bb {
    width: 100%;
  }
}
/* Short laptop screens: keep the section within one viewport */
@media (min-width: 992px) and (max-height: 800px) {
  .glance__intro,
  .glance__form-intro {
    display: none;
  }
  .contact-form .field textarea {
    min-height: 72px;
  }
  .gstat {
    padding: 1rem 1.1rem 1.15rem;
  }
  .gstat__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.6rem;
  }
}

/* "Canadian-based • North American reach • Est. 2018" pill in the about section */
.about__badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1.1rem;
  font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 24px -18px rgba(0, 66, 137, 0.45);
}
.about__badge i {
  font-style: normal;
  color: var(--accent);
}
.about__badge .flag {
  height: 11px;
}
/* 09 About -------------------------------------------------------------- */
.about {
  background: var(--soft);
}
.about__figure {
  position: relative;
  margin: 0 0 4.5rem;
}
.tilt {
  perspective: 1200px;
}
.tilt__inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  will-change: transform;
}
.tilt__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 60%;
  transition: transform 1.2s var(--ease-out);
}
/* truck 708 photo: landscape frame, trim the sky so the rig sits above the quote card */
.about .tilt__inner {
  aspect-ratio: 16 / 10;
}
.about .tilt__inner img {
  object-position: 50% 100%;
}
.tilt:hover .tilt__inner img {
  transform: scale(1.06);
}
.about__caption {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: rgba(16, 24, 45, 0.82);
  color: var(--white);
  padding: 0.45rem 0.7rem;
  margin: 0;
}
.about__accent {
  position: absolute;
  right: 0;
  bottom: -3.5rem;
  z-index: 2;
  width: min(300px, 78%);
  padding: 1.6rem 1.6rem 1.4rem;
  background: var(--navy);
  background-image: var(--grain);
  color: var(--white);
  border-top: 3px solid var(--accent);
  box-shadow: 0 30px 60px -30px rgba(16, 24, 45, 0.6);
}
.about__accent p {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.1;
  margin-bottom: 0.85rem;
}
.about__accent .tech-label {
  color: var(--accent);
}
.about__accent-mark {
  width: 40px;
  height: 32px;
  margin-bottom: 0.9rem;
}
.about__content {
  position: relative;
}
.about__features {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 576px) {
  .about__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.about__features li {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.1rem 1.15rem;
  background: var(--white);
  border-left: 3px solid var(--accent);
  box-shadow: 0 18px 36px -28px rgba(16, 24, 45, 0.45);
}
.about__features h3 {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
  line-height: 1.1;
}
.about__features p {
  margin: 0;
  line-height: 1.5;
}
.about__feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: var(--navy);
  color: var(--white);
  font-size: 1.15rem;
}
@media (min-width: 992px) {
  .about__figure {
    margin: 0 1.5rem 0 0;
  }
  .about .tilt__inner {
    /* aspect-ratio: auto; */
    width: 100%;
    height: 450px;
    position: relative;
    top: -30px;
  }
  .about__accent {
    right: -1.5rem;
    bottom: -3rem;
  }
  .about__content {
    padding-left: 2.5rem;
  }
  .about__content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1px;
    height: 9rem;
    background: linear-gradient(var(--accent), transparent);
  }
}
@media (min-width: 992px) and (max-height: 840px) {
  .about__extra {
    display: none;
  }
}

/* Ticker band (looped + scroll-velocity aware via GSAP) */
.ticker {
  --mark-bird: var(--white);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding: 1.1rem 0;
  border-top: 3px solid var(--accent);
}
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-right: clamp(1.25rem, 2.5vw, 2.5rem);
}
.ticker span {
  font-family: var(--ff-head);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--accent);
}
.ticker svg {
  width: 40px;
  height: 32px;
  flex: none;
}

/* 11 Why ---------------------------------------------------------------- */
.why {
  background: var(--white);
}
.why__title {
  margin-bottom: 1.5rem;
}
.why__visual {
  position: relative;
  height: 100%;
  padding: 1.5rem 0;
}
.why__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: 28%;
  background: var(--navy);
  background-image: var(--grain);
  transform-origin: left;
}
.why__img {
  position: relative;
  width: 88%;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
}
.why__img img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  object-position: 70% 70%;
}
/* yard line-up photo: trucks sit low and to the right */
.why__img--yard img {
  object-position: 72% 50%;
}
.why__badge {
  --mark-bird: var(--navy);
  position: absolute;
  right: 0;
  bottom: 3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border-left: 3px solid var(--accent);
  box-shadow: 0 24px 40px -24px rgba(16, 24, 45, 0.55);
}
.why__badge svg {
  width: 42px;
  height: 33px;
  flex: none;
}
.why__badge .tech-label {
  display: block;
  color: var(--text);
}
.why__badge strong {
  display: block;
  font-family: var(--ff-head);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
@media (min-width: 992px) {
  .why__img {
    width: 86%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 380px;
  }
}

.why-grid {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.75rem;
}
@media (min-width: 576px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.why-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.2rem 1.25rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  transition:
    box-shadow 0.5s,
    color 0.4s,
    border-color 0.4s;
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-io);
}
.why-card:hover {
  box-shadow: 0 26px 40px -26px rgba(16, 24, 45, 0.6);
  color: var(--muted-light);
  border-color: var(--navy);
}
.why-card:hover::before {
  transform: none;
}
.why-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}
.why-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: var(--navy);
  color: var(--white);
  font-size: 1.2rem;
  transition:
    background-color 0.4s,
    color 0.4s;
}
.why-card:hover .why-card__icon {
  background: var(--accent);
  color: var(--dark);
}
.why-card__title {
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
  transition: color 0.4s;
}
.why-card:hover .why-card__title {
  color: var(--white);
}
.why-card p {
  margin: 0;
  line-height: 1.55;
}

/* 12 Process — rail + travelling truck; --p (0..1) driven by GSAP ------- */
.proc {
  --p: 1;
  --g: 1.25rem;
  position: relative;
}
.proc__rail {
  position: absolute;
  z-index: 1;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0 6px,
    transparent 6px 12px
  );
}
.proc__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(var(--p));
  transform-origin: top;
  box-shadow: 0 0 14px rgba(107, 182, 245, 0.6);
}
.proc__truck {
  position: absolute;
  left: 50%;
  top: calc(var(--p) * 100%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--dark);
  font-size: 1.05rem;
  transform: translate(-50%, -50%) rotate(90deg);
  box-shadow: 0 0 0 6px rgba(107, 182, 245, 0.18);
}
.proc__steps {
  position: relative;
  display: grid;
  gap: var(--g);
  margin: 0;
}
.proc-step {
  position: relative;
  padding-left: 76px;
}
.proc-step__node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  transition:
    background-color 0.5s,
    border-color 0.5s,
    color 0.5s,
    box-shadow 0.5s;
}
.proc-step.is-on .proc-step__node,
.proc:not(.is-scrubbing) .proc-step__node {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
  box-shadow: 0 0 0 8px rgba(107, 182, 245, 0.14);
}
.proc-step__card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 1.5rem 1.4rem 1.6rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background-color 0.5s,
    border-color 0.5s;
}
.proc-step__card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.proc-step.is-on .proc-step__card::before,
.proc:not(.is-scrubbing) .proc-step__card::before,
.proc-step__card:hover::before {
  transform: scaleX(1);
}
.proc-step__card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(107, 182, 245, 0.4);
}
.proc-step__title {
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.55rem;
}
.proc-step p {
  margin: 0;
  line-height: 1.55;
  max-width: 24rem;
}
@media (min-width: 992px) {
  .proc {
    --g: 1.5rem;
  }
  .proc__rail {
    left: calc((100% - 3 * var(--g)) / 8);
    right: calc((100% - 3 * var(--g)) / 8);
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.28) 0 6px,
      transparent 6px 12px
    );
  }
  .proc__fill {
    transform: scaleX(var(--p));
    transform-origin: left;
  }
  .proc__truck {
    left: calc(var(--p) * 100%);
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .proc__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .proc-step {
    padding-left: 0;
    padding-top: 80px;
  }
  .proc-step__node {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 12b Certifications — logo marquee (pure CSS loop, pauses on hover) ----- */
.certs {
  background: var(--soft);
}
.certs__marquee {
  position: relative;
  overflow: hidden;
  /* fade the logos in and out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.certs__track {
  display: flex;
  width: max-content;
  animation: certs-scroll 70s linear infinite;
}
.certs__marquee:hover .certs__track {
  animation-play-state: paused;
}
.certs__group {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin: 0;
  padding: 0.5rem clamp(0.375rem, 0.75vw, 0.75rem) 1.5rem;
}
@keyframes certs-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .certs__track {
    animation: none;
  }
  .certs__marquee {
    overflow-x: auto;
  }
}
.cert {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(200px, 22vw, 280px);
  height: clamp(120px, 11vw, 150px);
  padding: 1.25rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s;
}
.cert::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.cert:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 24px 44px -28px rgba(0, 66, 137, 0.45);
}
.cert:hover::after {
  transform: scaleX(1);
}
.cert__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cert__logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  /* fixed cap (tile height minus padding): a % height doesn't resolve inside the grid,
     which let tall logos like Samsara overflow and get clipped */
  max-height: clamp(80px, calc(11vw - 2.5rem), 110px);
  object-fit: contain;
}
/* the FAST artwork has wide empty margins, so enlarge it to match the others */
.cert__logo--fast img {
  transform: scale(1.45);
}
/* 13 CTA strip ---------------------------------------------------------- */
.cta-strip {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--dark);
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  --focus: var(--dark);
}
.cta-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -4rem;
  width: 45%;
  background: repeating-linear-gradient(
    -60deg,
    rgba(16, 24, 45, 0.07) 0 2px,
    transparent 2px 26px
  );
  pointer-events: none;
}
.cta-strip__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-strip__text {
  margin: 0;
  font-family: var(--ff-head);
  font-weight: 800;
  letter-spacing: -0.025em;
  /* two fixed lines: "Ready to move forward?" / "Let's get in touch." */
  font-size: clamp(1.4rem, 0.8rem + 2.4vw, 3rem);
  line-height: 1.1;
  white-space: nowrap;
}
.cta-strip__text span {
  display: block;
  color: var(--navy);
}
.cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}
.cta-strip__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--dark);
}

/* truck photo on the right; its slanted edge follows the -60deg stripes */
.cta-strip__media {
  display: none;
}
@media (min-width: 768px) {
  .cta-strip__media {
    --slant: 10rem;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1; /* above the stripe overlay */
    width: min(40vw, 640px);
    background: var(--navy);
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  .cta-strip__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 30%; /* cab faces right; the slant only trims the trailer */
    clip-path: polygon(
      calc(var(--slant) + 8px) 0,
      100% 0,
      100% 100%,
      8px 100%
    );
  }
  /* truck 708 photo: rig sits mid-frame, so centre it vertically */
  .cta-strip__media--sunny img {
    object-position: right 36%;
  }
  /* stack copy + actions on the left so they never run under the photo */
  .cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-strip__text,
  .cta-strip__actions {
    max-width: 55%;
  }
}

/* 14 Footer — light background so the original logo reads clearly -------- */
.site-footer {
  background: var(--soft);
  color: var(--text);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 1.75rem;
  font-size: 0.95rem;
  border-top: var(--header-bar) solid var(--navy);
}
.footer__logo {
  width: 210px;
  height: auto;
  margin-bottom: 1.25rem;
}
.footer__about {
  max-width: 22rem;
}
.footer__tagline {
  margin-bottom: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.footer__tagline i {
  font-style: normal;
  color: var(--accent);
  margin: 0 0.3em;
}
.footer__title {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.footer__links li + li {
  margin-top: 0.3rem;
}
.footer__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition:
    color 0.25s,
    padding-left 0.35s var(--ease-out);
}
.footer__links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.35s var(--ease-out);
}
.footer__links a:hover {
  color: var(--navy);
  padding-left: 1.1rem;
}
.footer__links a:hover::before {
  width: 0.7rem;
}
.footer__contact li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 40px;
}
.footer__contact .bi {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--navy);
  color: var(--white);
  font-size: 0.9rem;
}
.footer__contact a {
  transition: color 0.25s;
  overflow-wrap: anywhere;
}
.footer__contact span a {
  font-weight: 600;
  color: var(--navy);
}
.footer__contact a:hover {
  color: var(--navy);
}
.footer__social {
  display: flex;
  gap: 0.5rem;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--navy);
  transition:
    background-color 0.3s,
    color 0.3s;
}
.footer__social a:hover {
  background: var(--navy);
  color: var(--white);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: #5b5f6b;
}
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--ff-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.footer__top .bi {
  transition: transform 0.3s var(--ease-out);
}
.footer__top:hover .bi {
  transform: translateY(-3px);
}

/* 15 Inner-page components (industries, route diagram, testimonials, quote form) */
.industries {
  background: var(--soft);
}
.ind-list {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.ind {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.ind__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 1.45rem;
  background: var(--white);
  transition:
    background-color 0.35s,
    color 0.35s;
}
.ind:hover .ind__icon {
  background: var(--navy);
  color: var(--accent);
}
.ind__title {
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.ind__text {
  margin: 0;
  max-width: 34rem;
}

.route__map {
  margin: 0;
  background: var(--dark);
  background-image: var(--grain);
  padding: clamp(1rem, 3vw, 2.5rem);
  position: relative;
}
.route__map svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-dot {
  fill: rgba(255, 255, 255, 0.13);
}
.map-region {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-dasharray: 4 6;
}
.route__map .route-base {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}
.route-draw {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.node text {
  fill: var(--white);
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.14em;
}
.node__core {
  fill: var(--accent);
}
.node__halo {
  fill: rgba(107, 182, 245, 0.16);
  stroke: rgba(107, 182, 245, 0.5);
  transform-box: fill-box;
  transform-origin: center;
}
.node {
  transition: opacity 0.5s;
}
.route__map.is-scrubbing .node {
  opacity: 0.3;
}
.route__map.is-scrubbing .node.is-on {
  opacity: 1;
}
.route__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 575.98px) {
  .node text {
    display: none;
  }
}

.testimonial {
  position: relative;
  max-width: 60rem;
  margin: 0;
}
.testimonial__quote {
  position: relative;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.testimonial__cite {
  color: var(--muted-light);
}

.quote-form {
  --focus: var(--navy);
  position: relative;
  background: var(--white);
  color: var(--text);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-top: 4px solid var(--accent);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.quote-form__grid {
  display: grid;
  gap: 1.15rem 1.25rem;
}
@media (min-width: 576px) {
  .quote-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field--full {
    grid-column: 1 / -1;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.field label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--dark);
  background: var(--soft);
  border: 1px solid #c9cedb;
  border-radius: 2px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23004289' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--navy);
  outline-offset: 0;
  border-color: var(--navy);
  background-color: var(--white);
  box-shadow: 0 0 0 5px rgba(107, 182, 245, 0.45);
}
.field__error {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--error);
}
.field__error:empty {
  display: none;
}
.field.has-error input,
.field.has-error select {
  border-color: var(--error);
  background-color: #fff6f5;
}
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.quote-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}
.form-status:empty {
  display: none;
}
.form-status {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 4px solid;
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-status strong {
  display: block;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.form-status.is-success {
  background: #eef7f0;
  border-color: #2e7d32;
  color: #1d4a20;
}
.form-status.is-warning {
  background: #e8f2fd;
  border-color: var(--accent);
  color: #3d2a00;
}
.form-status.is-error {
  background: #fdeceb;
  border-color: var(--error);
  color: #5f1410;
}

/* 15b About + Contact pages ------------------------------------------------ */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: var(--header-h);
  /* bottom padding leaves room for the stats card that overlaps this edge */
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 calc(clamp(3rem, 2rem + 4vw, 5rem) + var(--stats-lift));
  background-color: var(--dark);
  color: var(--muted-light);
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 24, 45, 0.78),
    rgba(16, 24, 45, 0.92)
  );
}
.page-hero__img,
.page-hero__img img {
  width: 100%;
  height: 100%;
}
.page-hero__img img {
  object-fit: cover;
  object-position: 30% 60%;
}
.page-hero__title {
  color: var(--white);
  margin-bottom: 1.5rem;
}
.page-hero__lead {
  max-width: 32rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 992px) {
  .page-hero {
    min-height: clamp(520px, 70vh, 720px);
    display: flex;
    align-items: center;
  }
  .page-hero__inner {
    width: 100%;
  }
  .page-hero__inner > * {
    max-width: 44%;
  }
  /* photo on the right, slanted edge like the CTA strip */
  .page-hero__media {
    left: auto;
    width: 54%;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-hero__media::after {
    background: linear-gradient(
      90deg,
      rgba(16, 24, 45, 0.45),
      rgba(16, 24, 45, 0) 45%
    );
  }
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--accent);
}
.crumbs a {
  color: var(--white);
}
.crumbs a:hover {
  color: var(--accent);
}

.page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* stats card pulled up over the hero's bottom edge */
.about-stats {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--stats-lift));
}
.about-stats__card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: #dde0ea; /* opaque: the card overlaps the dark hero */
  border-top: 4px solid var(--accent);
  box-shadow: 0 40px 70px -40px rgba(16, 24, 45, 0.55);
}
@media (min-width: 992px) {
  .about-stats__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.astat {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--white);
  transition: background-color 0.35s;
}
.astat:hover {
  background: #f3f8fe;
}
.astat__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  background: var(--soft);
  color: var(--navy);
  font-size: 1.2rem;
  transition:
    background-color 0.35s,
    color 0.35s;
}
.astat:hover .astat__icon {
  background: var(--navy);
  color: var(--white);
}
.astat__value {
  margin: 0 0 0.35rem;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--navy);
}
.astat__label {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

/* story photo collage: big tilting photo, small overlapping photo, slogan badge */
.collage {
  position: relative;
  padding: 0 16% 18% 0;
}
@media (max-width: 991.98px) {
  .collage {
    max-width: 34rem; /* keep the stacked collage from towering on tablets */
  }
}
.collage__main .tilt__inner {
  overflow: hidden;
}
.collage__main img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: 30% center;
}
.collage__small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 8px solid var(--white);
  box-shadow: 0 30px 50px -30px rgba(16, 24, 45, 0.6);
  overflow: hidden;
}
.collage__small img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.collage__badge {
  --mark-bird: var(--white);
  position: absolute;
  left: clamp(-0.5rem, -2vw, -1.5rem);
  bottom: 9%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 62%;
  padding: 1rem 1.25rem;
  background-color: var(--navy);
  background-image: var(--grain);
  border-left: 4px solid var(--accent);
  color: var(--white);
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 0 24px 40px -24px rgba(16, 24, 45, 0.7);
}
.collage__badge svg {
  width: 40px;
  height: 32px;
  flex: none;
}
@media (max-width: 575.98px) {
  .collage__badge {
    left: 0;
    max-width: 75%;
  }
}

.story__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}
.story__checks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.story__checks .bi {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  background: var(--navy);
  color: var(--white);
  font-size: 1rem;
}

.deliver {
  background: var(--soft);
}

/* six service quick links under the solution cards */
.svc-links {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.svc-links__title {
  margin-bottom: 1rem;
  font-weight: 400;
  color: var(--text);
}
.svc-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 768px) {
  .svc-links__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .svc-links__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.svc-links__list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
  min-height: 64px;
  padding: 1rem 1.1rem;
  background: var(--white);
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--navy);
  transition:
    background-color 0.35s,
    color 0.35s;
}
.svc-links__list a > .bi:first-child {
  color: var(--accent);
  font-size: 1.2rem;
}
.svc-links__list a > .bi:last-child {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.45;
  transition:
    transform 0.35s var(--ease-out),
    opacity 0.35s;
}
.svc-links__list a:hover {
  background: var(--navy);
  color: var(--white);
}
.svc-links__list a:hover > .bi:last-child {
  opacity: 1;
  transform: translate(3px, -3px);
}
@media (max-width: 399.98px) {
  .svc-links__list a {
    padding: 0.9rem 0.75rem;
    font-size: 0.9rem;
  }
  .svc-links__list a > .bi:last-child {
    display: none;
  }
}

/* Headings are a single .line span: let the text wrap naturally */
.display-head .line > span,
.zz-row__title .line > span {
  white-space: normal;
}
.story__body > p {
  max-width: 44rem;
}
.story__sign {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--navy);
}
.story__sign svg {
  --mark-bird: var(--navy);
  width: 48px;
  height: 38px;
  flex: none;
}
@media (min-width: 992px) {
  .story__body {
    padding-left: clamp(0rem, 2vw, 2.5rem);
  }
}

.solutions {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .solutions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.solution {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 30vw, 440px);
  background-color: var(--dark);
  color: var(--muted-light);
}
.solution__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.solution__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
  transition: transform 1.4s var(--ease-out);
}
.solution:hover .solution__media img {
  transform: scale(1.06);
}
.solution--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(16, 24, 45, 0.1) 0%,
    rgba(16, 24, 45, 0.6) 45%,
    rgba(16, 24, 45, 0.96) 100%
  );
}
/* accent icon tile in the card's top-left corner */
.solution__badge {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: clamp(52px, 4vw + 32px, 68px);
  aspect-ratio: 1;
  background: var(--navy);
  color: var(--white);
  font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem);
  transition: background-color 0.35s;
}
.solution:hover .solution__badge {
  background: var(--white);
}
.solution::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.solution:hover::after,
.solution:focus-within::after {
  transform: scaleX(1);
}
.solution__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 30rem;
}
.solution__num {
  color: var(--accent);
}
.solution__title {
  margin: 0.6rem 0 0.75rem;
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1;
  color: var(--white);
}
.solution p {
  margin-bottom: 1.25rem;
}
.text-link--light {
  color: var(--white);
}

.pillar-list {
  display: grid;
  gap: 2.5rem 2rem;
  margin: 0;
}
@media (min-width: 768px) {
  .pillar-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pillar {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
}
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.pillar:hover::before {
  transform: scaleX(1);
}
.pillar__num {
  position: absolute;
  top: 1.25rem;
  right: 0;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(107, 182, 245, 0.55);
}
.pillar__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.5rem;
  background: var(--navy);
  color: var(--white);
  font-size: 1.45rem;
}
.pillar__title {
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.1;
  color: var(--white);
}
.pillar p {
  margin: 0;
}

.crew__img {
  overflow: hidden;
}
.crew__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  object-fit: cover;
}
.crew__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 2rem;
}
.crew__roles li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  font-family: var(--ff-head);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.crew__roles .bi {
  color: var(--accent);
  font-size: 1.1rem;
}

/* ---- Contact page ---- */
.page-hero__img--cab-right img {
  object-position: right 70%;
}

/* contact cards reuse the floating .about-stats__card grid; one column on phones so
   phone numbers and email addresses never get squeezed */
@media (max-width: 575.98px) {
  .ccards {
    grid-template-columns: 1fr;
  }
}
.ccard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: var(--white);
  transition: background-color 0.35s;
}
.ccard:hover {
  background: #f3f8fe;
}
.ccard:hover .astat__icon {
  background: var(--navy);
  color: var(--white);
}
.ccard__label {
  margin: 0 0 0.5rem;
  font-family: var(--ff-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text);
}
.ccard__main {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 0.9rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.ccard__main:hover,
.ccard__mail:hover {
  color: var(--accent);
}
.ccard__mail {
  max-width: 100%;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: var(--navy);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line);
}
.ccard__mail--lg {
  margin-top: 0;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 0.75rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.ccard__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* form section: intro + direct lines on the left, white form card on the right */
.reach__intro {
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.82);
}
.reach__list {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
}
.reach__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--white);
}
.reach__list li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.reach__list .tech-label {
  margin-bottom: 0.2rem;
  color: var(--accent);
}
.reach__list a {
  overflow-wrap: anywhere;
  color: var(--white);
}
.reach__list a:hover {
  color: var(--accent);
}
.reach__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--line-light);
  color: var(--white);
  font-size: 1.15rem;
}
.quote-form__head {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.quote-form__title {
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--navy);
}
.quote-form__call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--navy);
}
.quote-form__call:hover {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* "What to include" checklist */
.prep-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}
@media (min-width: 576px) {
  .prep-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .prep-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.prep-item {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--soft);
  border-top: 3px solid var(--navy);
  transition:
    border-color 0.35s,
    transform 0.5s var(--ease-out);
}
.prep-item:hover {
  border-top-color: var(--accent);
  transform: translateY(-4px);
}
.prep-item__num {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 66, 137, 0.3);
}
.prep-item__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  background: var(--navy);
  color: var(--white);
  font-size: 1.25rem;
}
.prep-item__title {
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}
.prep-item p {
  margin: 0;
}

/* ---- Services page ---- */
.page-hero__img--low img {
  object-position: 60% 78%;
}
/* about: truck 707 at night, keep the cab and lit trailer in frame */
.page-hero__img--night img {
  object-position: 40% 60%;
}

/* floating jump nav reuses the .svc-links__list cells */
.svc-jump {
  border-top: 4px solid var(--accent);
  box-shadow: 0 40px 70px -40px rgba(16, 24, 45, 0.55);
}
.svc-jump .svc-links__list {
  background: #dde0ea; /* opaque: the card overlaps the dark hero */
  border: 0;
}
.svc-jump .svc-links__list a {
  min-height: 76px;
}
.svc-jump .svc-links__list a:hover > .bi:last-child {
  transform: translate(2px, 2px);
}

/* zig-zag rows hung on a dashed "route" spine */
.zz {
  position: relative;
  display: grid;
  gap: clamp(4.5rem, 3rem + 6vw, 8rem);
}
.zz-row {
  position: relative;
  display: grid;
  gap: 2.25rem;
  align-items: center;
}
.zz-row__media {
  position: relative;
  padding: 0 1.25rem 1.25rem 0;
}
/* offset accent frame behind the photo */
.zz-row__media::before {
  content: "";
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  border: 2px solid var(--accent);
}
.zz-row__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  background: var(--dark);
}
.zz-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.zz-row:hover .zz-row__img img {
  transform: scale(1.05);
}
.zz-row__num {
  position: absolute;
  top: -0.35em;
  right: 0.15em;
  z-index: 1;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 2px var(--navy);
  pointer-events: none;
}
.zz-row__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  background: var(--navy);
  color: var(--white);
  font-size: 1.45rem;
  transition:
    background-color 0.35s,
    color 0.35s;
}
.zz-row:hover .zz-row__icon {
  background: var(--accent);
  color: var(--navy);
}
.zz-row__title {
  margin-bottom: 1.25rem;
  font-weight: 700;
  line-height: 0.95;
  color: #000;
}
.zz-row__title em {
  font-style: normal;
  color: var(--accent);
}
.zz-row__body > p {
  max-width: 34rem;
}
.zz-row__body .story__checks {
  max-width: 34rem;
  margin-top: 1.25rem;
}
.zz-row__actions {
  margin-top: 2rem;
}

@media (min-width: 992px) {
  /* dashed spine down the middle, an accent stop beside each row */
  .zz::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed rgba(0, 66, 137, 0.22);
  }
  .zz-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(5rem, 9vw, 9rem);
  }
  .zz-row::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
      0 0 0 6px var(--white),
      0 0 0 8px var(--navy);
    transform: translate(-50%, -50%);
  }
  /* flip: photo goes right, frame + number mirror */
  .zz-row--flip .zz-row__media {
    order: 2;
    padding: 0 0 1.25rem 1.25rem;
  }
  .zz-row--flip .zz-row__media::before {
    inset: 1.25rem 1.25rem 0 0;
  }
  .zz-row--flip .zz-row__num {
    right: auto;
    left: 0.15em;
  }
}

/* tracking graphic in place of a photo */
.zz-graphic {
  display: grid;
  place-items: center;
  padding: 8% 10%;
  background-color: var(--dark);
}
.zz-graphic svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.zz-graphic .route-base {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 3;
}
.zz-graphic .route-dash {
  stroke-width: 3;
}
.zz-graphic__stop {
  fill: var(--navy);
  stroke: var(--accent);
  stroke-width: 3;
}
.zz-graphic__end {
  fill: var(--accent);
}
.zz-graphic__chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-light);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

/* 16 Motion start states --------------------------------------------------
   Applied only while html.js is present. animations.js removes html.js when the
   user prefers reduced motion or GSAP is unavailable, so content is never stuck hidden. */
.js [data-reveal="up"],
.js [data-reveal="stagger"] > *,
.js [data-hero] {
  opacity: 0;
}
.js [data-reveal="lines"] .line > span {
  transform: translateY(110%);
}
.js [data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
}
.js .hero__media img {
  opacity: 0;
}
.js .bb-drawer__links li,
.js .bb-drawer__foot {
  opacity: 0;
}

@media (min-width: 1024px) {
 .contact-ftr-details {
    padding-left: 0;
    margin-left: -30px;
    padding-right: 0;
 }    
}

@media (min-width: 992px) and (max-height: 780px) {
  .about__features p {
    display: none;
  }
  .about__features li {
    align-items: center;
  }
}

/* 17 Footer bottom bar, floating actions, mobile type scale */
.footer__bottom {
  flex-wrap: nowrap;
}
.footer__credit a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fab-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s var(--ease-out), opacity 0.25s, visibility 0.25s;
}
.fab:hover {
  transform: translateY(-3px);
  color: var(--white);
}
.fab--whatsapp {
  background: #25d366;
}
.fab--top {
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
}
.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767.98px) {
  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
  }
  .footer__about {
    max-width: none;
  }
}
@media (max-width: 575.98px) {
  html {
    font-size: 15px;
  }
  .container-xxl {
    --bs-gutter-x: 2rem;
  }
  .display-head {
    margin-bottom: 1.25rem;
  }
  .hero__word {
    font-size: clamp(2.3rem, 13vw, 3.4rem);
  }
  .hero__kicker {
    font-size: 0.8rem;
    letter-spacing: 0.26em;
  }
  .gstat__value,
  .astat__value {
    font-size: clamp(1.8rem, 1.4rem + 2vw, 2.2rem);
  }
  .zz-row__num,
  .pillar__num {
    font-size: 2.4rem;
  }
  .fab {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
}

/* 18 Mobile type scale — smaller headings/numerals, no overflow */
@media (max-width: 767.98px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }
  .hero__word {
    font-size: clamp(2rem, 11.5vw, 2.7rem);
  }
  .hero__kicker {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }
  .gstat__value,
  .astat__value {
    font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2rem);
  }
  .about__accent p,
  .ccard__main {
    font-size: 1.2rem;
  }
  .solution__badge {
    font-size: 1.15rem;
  }
  .zz-row__num,
  .pillar__num {
    font-size: 2.2rem;
  }
  .cta-strip__text {
    font-size: clamp(1.3rem, 1rem + 3.5vw, 5rem);
  }
  .cta-strip__phone,
  .bb-drawer__phone {
    font-size: 1.1rem;
  }
  .testimonial__quote {
    font-size: clamp(1.15rem, 1rem + 1.5vw, 1.4rem);
  }
  .ticker span {
    font-size: 1.1rem;
  }
  .bb-drawer__links a {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .section-head {
    margin-bottom: 1.75rem;
  }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  iframe,
  video {
    max-width: 100%;
  }
}
@media (max-width: 359.98px) {
  html {
    font-size: 14px;
  }
  .hero__word {
    font-size: 1.9rem;
  }
}

/* 19 Mobile spacing + form gutters */
@media (max-width: 575.98px) {
  :root {
    --section-y: 3rem;
  }
  .glance__form {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
  .glance__stats {
    padding-bottom: 2.5rem;
  }
  .fab-stack {
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.5rem;
  }
  .fab {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
  .footer__logo {
    max-width: 140px;
  }
  .site-footer {
    padding-bottom: 1.5rem;
  }
}

/* 20 Mobile drawer menu + form tightening */
@media (max-width: 767.98px) {
  .bb-drawer__body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .bb-drawer__links {
    margin-bottom: 1.5rem;
  }
  .bb-drawer__links a {
    font-size: 1.25rem;
    padding: 0.7rem 0;
    letter-spacing: 0.02em;
  }
  .bb-drawer__phone {
    font-size: 1rem;
  }
  /* .bb-drawer__head .brand__logo {
    height: 44px;
  } */
  /* .glance__form .display-head {
    font-size: 1.7rem;
  } */
  .glance__form-intro {
    margin-bottom: 1.25rem;
  }
  .contact-form__grid {
    gap: 0.9rem;
  }
  .contact-form .field {
    gap: 0.3rem;
  }
  .contact-form .field input,
  .contact-form .field select {
    height: 46px;
    min-height: 46px;
    font-size: 0.95rem;
  }
  .contact-form .field textarea {
    min-height: 88px;
    padding-block: 0.65rem;
    font-size: 0.95rem;
  }
  .contact-form .field label {
    font-size: 0.7rem;
  }
  .contact-form__foot {
    margin-top: 1.1rem;
  }
}

/* Shared type scale for every page. The homepage hero title stays intentionally
   oversized; all other primary headings and all supporting text use role sizes. */
main .display-head,
main .zz-row__title {
  font-size: var(--fs-section-heading);
}
main .about__features h3,
main .why-card__title,
main .proc-step__title,
main .solution__title,
main .pillar__title,
main .prep-item__title,
main .quote-form__title {
  font-size: var(--fs-subheading);
}
main p:not(.eyebrow):not(.tech-label):not(.astat__value):not(.astat__label):not(.story-feat p):not(.hero__strip-inner p):not(.about__badge):not(.gstat__value):not(.gstat__label):not(.field__error):not(.cta-strip__text):not(.testimonial__quote):not(.about__accent p):not(.story__sign):not(.ccard__note) {
  font-size: var(--fs-paragraph);
}
main .btn-bb,
main .service-tile a {
  font-size: var(--fs-button);
}
main .ccard__label,
main .gstat__label { font-size: var(--fs-small-heading); }

/* Homepage services: responsive icon-card grid, no image carousel. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}
.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  box-shadow: 0 14px 34px -30px rgba(16, 24, 45, 0.5);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
}
.service-tile::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(0, 66, 137, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 1rem rgba(0, 66, 137, 0.025), 0 0 0 2rem rgba(0, 66, 137, 0.02);
  pointer-events: none;
}
.service-tile:hover {
  transform: translateY(-5px);
  border-top-color: var(--accent);
  box-shadow: 0 22px 42px -28px rgba(0, 66, 137, 0.35);
}
.service-tile__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.35rem;
  color: var(--white);
  background: var(--navy);
  border-radius: 3px;
  font-size: 1.5rem;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
}
.service-tile:hover .service-tile__icon {
  color: var(--dark);
  background: var(--accent);
  transform: rotate(-5deg);
}
.service-tile h3 {
  margin: 0 0 0.65rem;
  color: var(--navy);
  font-size: var(--fs-subheading);
  line-height: 1.2;
}
.service-tile p {
  margin: 0 0 1.25rem;
  color: var(--text);
  font-size: var(--fs-paragraph);
  line-height: 1.6;
}
.service-tile a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.8rem;
  color: var(--navy);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.service-tile a .bi { transition: transform 0.25s; }
.service-tile a:hover .bi { transform: translate(3px, -3px); }
@media (max-width: 991.98px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .service-grid { gap: 0.85rem; }
  .service-tile { padding: 1.25rem; }
  .service-tile__icon { width: 48px; height: 48px; margin-bottom: 1rem; }
}
@media (max-width: 399.98px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* Driver application form */
.application.section { background: var(--soft); }
.application__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  background: var(--white);
  box-shadow: 0 24px 70px -46px rgba(16, 24, 45, 0.45);
}
.application__intro {
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--white);
  background: var(--navy);
}
.application__intro h2 {
  margin-bottom: 1rem;
  color: var(--white);
  font-size: var(--fs-section-heading);
  line-height: 1.05;
}
.application__intro p { color: rgba(255,255,255,.82); }
.application__benefits {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.application__benefits li { display: flex; gap: 0.65rem; align-items: flex-start; }
.application__benefits .bi { color: var(--accent); }
.application-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.application-form .field { gap: 0.45rem; }
.application-form .field label,
.application-form legend {
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.application-form input:not([type="checkbox"]):not([type="file"]),
.application-form select,
.application-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid #c9cedb;
  border-radius: 2px;
  color: var(--dark);
  background: #f8f9fb;
  font: inherit;
  font-size: var(--fs-paragraph);
}
.application-form textarea { min-height: 120px; resize: vertical; }
.application-form input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem;
  border: 1px dashed #9aa9bd;
  background: #f8f9fb;
}
.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus { outline: 3px solid rgba(107,182,245,.55); outline-offset: 1px; }
.application-form__full { grid-column: 1 / -1; }
.application-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--text);
  line-height: 1.45;
}
.application-form__check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--navy); }
.application-form__check label { cursor: pointer; font-size: 0.88rem;}
.application-form__privacy { margin: 0; color: #596273; font-size: 0.9rem; }
.application-form__submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.application-form__status { grid-column: 1 / -1; }
.application-form__status:empty { display: none; }
.application-form__status.is-success { padding: 1rem; border-left: 4px solid #2e7d32; background: #eef7f0; color: #1d4a20; }
.application-form__status.is-error { padding: 1rem; border-left: 4px solid var(--error); background: #fff3f2; color: #7d211d; }
@media (max-width: 767.98px) {
  .application__panel { grid-template-columns: 1fr; }
  .application-form { padding: 1.5rem; }
}
@media (max-width: 575.98px) {
  .application-form { grid-template-columns: 1fr; gap: 1rem; }
  .application-form__full,
  .application-form__status { grid-column: auto; }
  .application-form__submit .btn-bb { width: 100%; }
}

/* Keep the homepage application form legible on its dark background. */
.application-form--home .field label { color: rgba(255, 255, 255, 0.88); }
.application-form--home .field input:not([type="checkbox"]):not([type="file"]),
.application-form--home .field select,
.application-form--home .field textarea {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.application-form--home .field input[type="file"] {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}
.application-form--home .field select option { color: var(--dark); background: var(--white); }
.application-form--home .field textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
form.application-form.application-form--home {
  display: block;
  width: 100%;
  padding: 0;
}
.application-form--home .field select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.glance__form--application { padding-block: clamp(2rem, 4vw, 3.25rem); }
.glance__form--application .display-head { margin-bottom: 0.75rem; }
.application-form--home .field textarea { min-height: 76px; }
.application-form--home .contact-form__foot { margin-top: 0.85rem; }
.application-form--home .application-form__check {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: clamp(0.64rem, 0.78vw, 0.8rem);
}

/* ==========================================================================
   21 Global font enforcement
   Manrope everywhere: Bootstrap components, form controls and native widgets
   don't inherit font-family by default, so route them all through --ff-base.
   ========================================================================== */
:root {
  --bs-body-font-family: var(--ff-base);
  --bs-font-sans-serif: var(--ff-base);
  --bs-body-color: var(--text);
  --bs-link-color-rgb: 0, 66, 137;
  --bs-border-radius: 2px;

  --grad-brand: linear-gradient(90deg, var(--navy) 0%, #1d6fc4 55%, var(--accent) 100%);
  --shadow-soft: 0 18px 45px -30px rgba(16, 24, 45, 0.45);
  --shadow-lift: 0 28px 60px -32px rgba(0, 66, 137, 0.45);
}
html,
body,
button,
input,
select,
textarea,
optgroup,
option,
label,
legend,
.btn,
.form-control,
.form-select,
.offcanvas,
.tooltip,
.popover,
.dropdown-menu {
  font-family: var(--ff-base);
}
input::placeholder,
textarea::placeholder {
  font-family: var(--ff-base);
  opacity: 1;
}
h4,
h5,
h6 {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -0.01em;
}
strong,
b {
  font-weight: 700;
}

/* ==========================================================================
   22 Visual polish
   ========================================================================== */
::selection {
  background: var(--navy);
  color: var(--white);
}
/* h1,
h2,
h3,
.display-head {
  text-wrap: balance;
} */
main p {
  text-wrap: pretty;
}

/* Keyboard focus: one consistent, visible ring */
a:focus-visible,
button:focus-visible,
.btn-bb:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Header: brand gradient underline + frosted glass once the page scrolls */
.mainbar {
  position: relative;
  border-bottom: 0;
  transition: box-shadow 0.45s, background-color 0.45s;
}
.mainbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--grad-brand);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .is-scrolled .mainbar {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }
}
.brand__logo {
  transition: transform 0.45s var(--ease-out);
}
.brand:hover .brand__logo {
  transform: scale(1.03);
}

/* Eyebrow + text links pick up the brand gradient */
.eyebrow::before {
  background: var(--grad-brand);
  border-radius: 2px;
}
.text-link {
  border-bottom: 0;
  background: var(--grad-brand) left bottom / 100% 2px no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.text-link:hover {
  background-size: 40% 2px;
}

/* Buttons: soft depth at rest, a little lift on hover */
.btn-bb--navy,
.btn-bb--dark {
  box-shadow: 0 12px 26px -16px rgba(0, 66, 137, 0.65);
}
.btn-bb {
  transition:
    color 0.35s,
    border-color 0.35s,
    background-color 0.35s,
    box-shadow 0.35s,
    transform 0.35s var(--ease-out);
}
.btn-bb:hover {
  transform: translateY(-2px);
}
.btn-bb:active {
  transform: translateY(0);
}

/* Dark sections: faint brand glow so large dark areas have depth */
.section--dark {
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgba(107, 182, 245, 0.12), transparent 60%),
    radial-gradient(40rem 25rem at -10% 110%, rgba(0, 66, 137, 0.35), transparent 60%),
    var(--grain);
}

/* Light sections alternate with a whisper of brand colour */
.services.section {
  background:
    radial-gradient(50rem 22rem at 100% 0%, rgba(107, 182, 245, 0.10), transparent 70%),
    var(--white);
}

/* Cards: gradient top edge, gradient icon chip, deeper hover shadow */
.service-tile {
  border-top: 1px solid var(--line);
  border-radius: 4px;
}
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(0.35);
  transition: transform 0.5s var(--ease-out);
}
.service-tile:hover::before {
  transform: scaleX(1);
}
.service-tile:hover {
  box-shadow: var(--shadow-lift);
}
.service-tile__icon {
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  border-radius: 10px;
  box-shadow: 0 10px 22px -12px rgba(0, 66, 137, 0.7);
}
.service-tile:hover .service-tile__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
}
.why-card,
.proc-step,
.cert {
  border-radius: 4px;
}
.why-card:hover {
  box-shadow: var(--shadow-lift);
}

/* Photos: rounded corners + soft shadow */
.zz-row__img,
.tilt__inner {
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
}

/* Footer: gradient rule along the top edge, gradient divider on links */
.site-footer {
  position: relative;
  border-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-bar);
  background: var(--grad-brand);
}

/* Floating buttons: subtle ring so they read on any background */
.fab {
  box-shadow: 0 12px 28px -12px rgba(16, 24, 45, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.75);
}

/* Slim branded scrollbar (desktop browsers that support it) */
@media (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--navy) var(--soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-bb:hover,
  .brand:hover .brand__logo {
    transform: none;
  }
}

/* ==========================================================================
   23 Viewport fit
   On desktop, sections keep generous breathing room between them while the
   content inside (headings, cards, forms, media) stays compact, so most blocks
   still read within one screen. Mobile keeps its natural stacked flow.
   ========================================================================== */

@media (min-width: 992px) {
  :root {
    --section-y: clamp(4.5rem, 10vh, 7rem);
    --fs-section-heading: clamp(2.75rem, 1rem + 4.2vw, 5rem);
    --fs-section-heading-long: clamp(2.2rem, 0.7rem + 3.4vw, 4rem);
  }
  .section-head {
    margin-bottom: clamp(2.25rem, 5.5vh, 3.75rem);
  }

  /* Homepage services: icon sits beside the title instead of above it */
  .service-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 1rem;
    align-items: center;
    padding: clamp(1.25rem, 2.6vh, 1.75rem);
  }
  .service-tile__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    font-size: 1.3rem;
  }
  .service-tile h3 {
    margin: 0;
  }
  .service-tile p {
    grid-column: 1 / -1;
    align-self: start;
    margin: 0.9rem 0 0.9rem;
  }
  .service-tile a {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0;
    padding-top: 0.65rem;
  }

  /* Forms: tighter fields so the whole form fits beside its intro */
  .field {
    gap: 0.3rem;
  }
  .field input,
  .field select {
    min-height: 46px;
    padding-block: 0.55rem;
  }
  .field textarea {
    min-height: 92px;
  }
  .quote-form {
    padding: clamp(1.5rem, 3.5vh, 2.5rem);
  }
  .quote-form__grid {
    gap: 0.85rem 1.1rem;
  }
  .contact-form__grid {
    gap: 0.75rem 1rem;
  }
  .contact-form .field input,
  .contact-form .field select {
    height: 42px;
    min-height: 42px;
  }
  .application-form--home .field textarea,
  .contact-form .field textarea {
    min-height: 64px;
  }

  /* Media that would otherwise push a section past the fold */
  .solution {
    min-height: clamp(280px, min(28vw, 40vh), 420px);
  }
  .zz-row__img {
    max-height: 66vh;
  }
  .crew__img img {
    max-height: 68vh;
  }
  .collage__main .tilt__inner {
    max-height: 58vh;
  }

  /* Contact quote form: service, origin and destination share one row */
  .quote-form__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .quote-form__grid > .field {
    grid-column: span 3;
  }
  .quote-form__grid > .field:has(#qService),
  .quote-form__grid > .field:has(#qOrigin),
  .quote-form__grid > .field:has(#qDestination) {
    grid-column: span 2;
  }
  .quote-form__grid > .field:has(#qMessage) {
    grid-column: 1 / -1;
  }
  .quote-form__head {
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
  }
  .quote-form__foot {
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   24 Heading scale
   Most section titles are 2-4 words, so they run large. Long titles carry
   .display-head--long and keep the calmer size so they never overpower.
   ========================================================================== */
@media (max-width: 991.98px) {
  :root {
    --fs-section-heading: clamp(2.35rem, 1.3rem + 4.4vw, 4.25rem);
    --fs-section-heading-long: clamp(2rem, 1.15rem + 3.2vw, 3.4rem);
  }
}
main .display-head--long {
  font-size: var(--fs-section-heading-long);
}
.display-head {
  letter-spacing: -0.035em;
}

/* ==========================================================================
   25 About page
   ========================================================================== */

/* Stats card: gradient top edge, big gradient numerals, rounded */
.about-stats__card {
  border-top: 0;
  padding-top: 4px;
  border-radius: 10px;
  overflow: hidden;
  background:
    var(--grad-brand) top / 100% 4px no-repeat,
    #e3e7ef;
    width:69%;
    margin: auto;
}
.astat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.astat__icon {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 66, 137, 0.1), rgba(107, 182, 245, 0.18));
}
.astat:hover .astat__icon {
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
}
main .astat__value {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.astat__value > span:first-child {
  background: linear-gradient(135deg, var(--navy) 20%, #2a86d9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.astat__value .flag-pair {
  display: inline-flex;
  gap: 0.3rem;
}
.astat__value .flag {
  width: 26px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 24, 45, 0.08);
}
main .astat__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5a6475;
}

/* Story: rounded collage, softer checks, signature as a callout */
.collage__main .tilt__inner,
.collage__small {
  border-radius: 10px;
}
.collage__badge {
  border-radius: 8px;
  text-transform: none;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
}
@media (max-width: 991.98px) {
  .collage {
    margin-inline: auto;
  }
}
.story__checks li {
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}
.story__checks .bi {
  border-radius: 6px;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
}
.story__sign {
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(0, 66, 137, 0.07), rgba(107, 182, 245, 0.04) 70%, transparent);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  font-weight: 700;
  text-transform: none;
}

/* Transport and warehouse: let the photos show, rounded cards */
.solution {
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.solution--photo::before {
  background: linear-gradient(
    180deg,
    rgba(16, 24, 45, 0.05) 0%,
    rgba(16, 24, 45, 0.5) 42%,
    rgba(16, 24, 45, 0.95) 100%
  );
}
.solution__badge {
  border-radius: 0 0 12px 0;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
}
.solution:hover .solution__badge {
  color: var(--navy);
}
.solution__body p {
  color: rgba(255, 255, 255, 0.86);
}
.solution__body {
  text-shadow: 0 1px 12px rgba(16, 24, 45, 0.55);
}

/* Freight service links: separate cards instead of a table */
.svc-links__title {
  font-weight: 700;
  color: var(--navy);
}
.svc-links__list {
  gap: 0.75rem;
  background: none;
  border: 0;
}
.svc-links__list a {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 24px -22px rgba(16, 24, 45, 0.5);
  transition:
    background-color 0.35s,
    color 0.35s,
    transform 0.35s var(--ease-out),
    box-shadow 0.35s;
}
.svc-links__list a:hover {
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.svc-links__list a:hover > .bi:first-child {
  color: var(--accent-hi);
}

/* Why choose us: glass cards with hover lift */
.pillar-list {
  gap: 1.25rem;
}
.pillar {
  overflow: hidden;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  transition: transform 0.45s var(--ease-out), background-color 0.45s, border-color 0.45s;
}
.pillar:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(107, 182, 245, 0.4);
}
.pillar::before {
  top: 0;
  height: 3px;
  background: var(--grad-brand);
}
.pillar__num {
  top: clamp(1.25rem, 2vw, 1.75rem);
  right: clamp(1.25rem, 2vw, 1.75rem);
}
.pillar__icon {
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  box-shadow: 0 12px 24px -12px rgba(107, 182, 245, 0.6);
}

/* Team: offset accent frame + floating dispatch badge */
.crew__media {
  position: relative;
  padding: 0 1.25rem 1.25rem 0;
}
.crew__media::before {
  content: "";
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 12px;
}
.crew__img {
  position: relative;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.crew__badge {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(2.25rem, 4vw, 3rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.8rem 1.15rem;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 18px 40px -20px rgba(16, 24, 45, 0.6);
  font-weight: 600;
  color: var(--dark);
}
.crew__badge strong {
  color: var(--navy);
}
.crew__roles li {
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  transition: background-color 0.3s, color 0.3s;
}
.crew__roles li:hover {
  background: var(--navy);
  color: var(--white);
}
@media (max-width: 991.98px) {
  .crew__img img {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar:hover,
  .svc-links__list a:hover {
    transform: none;
  }
}

/* Phones: consent labels wrap so they never widen the form past the screen */
@media (max-width: 767.98px) {
  .application-form--home .application-form__check {
    white-space: normal;
    font-size: 0.82rem;
  }
  .contact-form__grid > * {
    min-width: 0;
  }
}

/* Card labels stay legible over bright photos */
.solution__num {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(16, 24, 45, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-shadow: none;
}

/* Services page row titles are sub-headings inside one section: one step smaller */
main .zz-row__title {
  font-size: var(--fs-section-heading-long);
}

/* ==========================================================================
   26 About: "Who we are" section
   ========================================================================== */
.story {
  background:
    radial-gradient(38rem 30rem at 12% 55%, rgba(107, 182, 245, 0.16), transparent 70%),
    var(--white);
}

/* Dot pattern behind the collage for depth */
.collage::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: -1.5rem;
  width: 45%;
  height: 40%;
  z-index: -1;
  background-image: radial-gradient(rgba(0, 66, 137, 0.28) 1.5px, transparent 1.6px);
  background-size: 16px 16px;
}
.collage {
  isolation: isolate;
}

/* Rotating "Est. 2018" seal on the main photo */
.collage__seal {
  position: absolute;
  top: clamp(-1.5rem, -2vw, -1rem);
  right: 8%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(104px, 9vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 20px 40px -20px rgba(16, 24, 45, 0.55);
}
.collage__seal-ring {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  animation: seal-spin 22s linear infinite;
}
.collage__seal-ring text {
  font-family: var(--ff-base);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--navy);
}
.collage__seal-core {
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  color: var(--white);
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.collage__seal-core small {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
@keyframes seal-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Four feature cards replace the old checklist */
.story__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.75rem 0 0;
}
.story-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 28px -24px rgba(16, 24, 45, 0.5);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
}
.story-feat:hover {
  transform: translateY(-3px);
  border-color: rgba(107, 182, 245, 0.6);
  box-shadow: var(--shadow-lift);
}
.story-feat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  color: var(--white);
  font-size: 1.15rem;
  transition: background 0.35s;
}
.story-feat:hover .story-feat__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: var(--dark);
}
.story-feat__title {
  margin: 0.1rem 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.story-feat p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5a6475;
}
.story__sign {
  margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
  .story__features {
    grid-template-columns: 1fr;
  }
  .collage__seal {
    right: 4%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .collage__seal-ring {
    animation: none;
  }
  .story-feat:hover {
    transform: none;
  }
}
.story__lead {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .story .collage__main .tilt__inner {
    aspect-ratio: 4 / 4;
    max-height: 520px;
  }
}

/* "Who we are": compact title-only feature tiles, shorter collage */
.story-feat {
  align-items: center;
  padding: 0.75rem 1rem;
}
.story-feat__icon {
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
}
.story-feat__title {
  margin: 0;
  font-size: 0.98rem;
}
.story__features {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  .story .collage__main .tilt__inner {
    max-height: 460px;
  }
}
@media (max-width: 991.98px) {
  .story .collage__main .tilt__inner {
    aspect-ratio: 4 / 3.4;
  }
  .collage {
    max-width: 30rem;
  }
}
@media (max-width: 575.98px) {
  .story__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .story-feat {
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
  }
  .story-feat__icon {
    width: 34px;
    height: 34px;
  }
  .story-feat__title {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   27 About: Transport & Warehouse split cards
   Photo on top (no dark overlay), white content panel below.
   ========================================================================== */
.solutions {
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.solution {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 50px -38px rgba(16, 24, 45, 0.55);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.45s;
}
.solution:hover {
  transform: translateY(-6px);
  border-color: rgba(107, 182, 245, 0.55);
  box-shadow: var(--shadow-lift);
}
.solution::before {
  content: none;
}
.solution__media {
  position: relative;
  inset: auto;
  z-index: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--dark);
}
.solution__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 24, 45, 0.35) 0%, transparent 35%);
  pointer-events: none;
}
.solution__media img {
  object-position: center;
}
.solution__badge {
  top: 1rem;
  left: 1rem;
  z-index: 1;
  width: 52px;
  border-radius: 12px;
  font-size: 1.35rem;
  box-shadow: 0 12px 24px -10px rgba(16, 24, 45, 0.6);
}
.solution:hover .solution__badge {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: var(--dark);
}
.solution__num {
  position: absolute;
  top: 1.35rem;
  right: 1rem;
  z-index: 1;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.solution__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: none;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  text-shadow: none;
}
.solution__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--navy);
}
.solution__body p {
  margin-bottom: 1rem;
  color: var(--text);
}
.solution__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
}
.solution__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}
.solution__points .bi {
  color: #1d6fc4;
  font-size: 1rem;
}
.solution__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 0.2rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--grad-brand) left bottom / 100% 2px no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.solution__link .bi {
  transition: transform 0.35s var(--ease-out);
}
.solution__link:hover {
  color: var(--navy);
  background-size: 40% 2px;
}
.solution__link:hover .bi {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .solution:hover {
    transform: none;
  }
}
@media (min-width: 992px) {
  .solution__media {
    aspect-ratio: 2 / 1;
  }
}

/* ==========================================================================
   28 About: Transport & Warehouse — modern bento cards
   Full-bleed photo, frosted-glass content panel floating over it.
   ========================================================================== */
.deliver {
  position: relative;
  background:
    radial-gradient(42rem 26rem at 100% 0%, rgba(107, 182, 245, 0.22), transparent 70%),
    radial-gradient(36rem 24rem at 0% 100%, rgba(0, 66, 137, 0.12), transparent 70%),
    var(--soft);
}

.solutions--bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 992px) {
  .solutions--bento {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.solutions--bento .solution {
  position: relative;
  display: block;
  min-height: clamp(440px, 36vw, 540px);
  border: 0;
  border-radius: 22px;
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 40px 70px -45px rgba(16, 24, 45, 0.75);
  transform: none;
}
.solutions--bento .solution:hover {
  transform: none;
  box-shadow: 0 48px 80px -42px rgba(0, 66, 137, 0.65);
}
.solutions--bento .solution::after {
  z-index: 3;
  height: 4px;
  background: var(--grad-brand);
}

/* Photo fills the card */
.solutions--bento .solution__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.solutions--bento .solution__media img {
  transition: transform 1.6s var(--ease-out);
}
.solutions--bento .solution:hover .solution__media img {
  transform: scale(1.07);
}
.solutions--bento .solution__media::after {
  background: linear-gradient(
    180deg,
    rgba(16, 24, 45, 0.45) 0%,
    rgba(16, 24, 45, 0) 28%,
    rgba(16, 24, 45, 0) 45%,
    rgba(16, 24, 45, 0.7) 100%
  );
}

/* Corner chips: glass icon + glass label */
.solutions--bento .solution__badge {
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  width: 54px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
  box-shadow: none;
  transition: background-color 0.4s, color 0.4s, transform 0.4s var(--ease-out);
}
.solutions--bento .solution:hover .solution__badge {
  background: var(--accent);
  color: var(--dark);
  transform: rotate(-6deg);
}
.solutions--bento .solution__num {
  top: clamp(1.4rem, 2.3vw, 1.9rem);
  right: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--white);
}

/* Frosted-glass content panel */
.solutions--bento .solution__body {
  position: absolute;
  left: clamp(0.75rem, 1.6vw, 1.25rem);
  right: clamp(0.75rem, 1.6vw, 1.25rem);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title link"
    "text  text"
    "pts   pts";
  align-items: center;
  column-gap: 1rem;
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(16, 24, 45, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: transform 0.5s var(--ease-out), background-color 0.5s;
}
.solutions--bento .solution:hover .solution__body {
  transform: translateY(-6px);
  background: rgba(16, 24, 45, 0.55);
}
.solutions--bento .solution__title {
  grid-area: title;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.solutions--bento .solution__body p {
  grid-area: text;
  margin: 0.6rem 0 1rem;
  color: rgba(255, 255, 255, 0.86);
}
.solutions--bento .solution__points {
  grid-area: pts;
  margin: 0;
}
.solutions--bento .solution__points li {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.solutions--bento .solution__points .bi {
  color: var(--accent);
}

/* Pill button with arrow circle */
.solutions--bento .solution__link {
  grid-area: link;
  align-self: center;
  justify-self: end;
  gap: 0.6rem;
  margin: 0;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: background-color 0.35s, color 0.35s;
}
.solutions--bento .solution__link .bi {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  color: var(--white);
  font-size: 0.9rem;
  transition: transform 0.4s var(--ease-out), background 0.35s;
}
.solutions--bento .solution__link:hover {
  background: var(--accent);
  background-size: auto;
  color: var(--dark);
}
.solutions--bento .solution__link:hover .bi {
  transform: rotate(45deg);
  background: var(--dark);
}

/* Narrow cards and phones: button drops under the text */
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .solutions--bento .solution__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "pts"
      "link";
  }
  .solutions--bento .solution__link {
    justify-self: start;
    margin-top: 1.1rem;
  }
}
@media (max-width: 575.98px) {
  .solutions--bento .solution {
    min-height: 480px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions--bento .solution:hover .solution__body,
  .solutions--bento .solution:hover .solution__badge {
    transform: none;
  }
}

/* Bento refinements: compact panel, button beside the tags, more photo visible */
.solutions--bento .solution {
  min-height: clamp(500px, 40vw, 560px);
}
.solutions--bento .solution__body {
  grid-template-areas:
    "title title"
    "text  text"
    "pts   link";
  padding: clamp(1rem, 1.8vw, 1.5rem);
}
.solutions--bento .solution__title {
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
}
.solutions--bento .solution__body p {
  margin: 0.45rem 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.solutions--bento .solution__points {
  gap: 0.4rem;
}
.solutions--bento .solution__points li {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .solutions--bento .solution__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "pts"
      "link";
  }
  .solutions--bento .solution__link {
    margin-top: 0.9rem;
  }
}
@media (max-width: 575.98px) {
  .solutions--bento .solution {
    min-height: 540px;
  }
  .solutions--bento .solution__body p {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   29 Careers page
   Reuses page-hero, pillars and the homepage glance + application form.
   ========================================================================== */
.page-hero__img--dock img {
  object-position: 50% 62%;
}

.careers-apply__info .display-head {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}
.careers-apply__subtitle {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Requirements: two clear cards */
.careers-req {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 clamp(1.5rem, 3.5vh, 2.25rem);
}
.careers-req li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 28px -24px rgba(16, 24, 45, 0.5);
  font-weight: 600;
  color: var(--dark);
}
.careers-req .bi {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  color: var(--white);
  font-size: 1.1rem;
}

/* How it works: numbered steps joined by a line */
.careers-steps {
  position: relative;
  display: grid;
  gap: 1.1rem;
  margin: 0;
}
.careers-steps::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg, var(--navy), var(--accent));
  opacity: 0.35;
}
.careers-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.careers-steps__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
}
.careers-steps strong {
  display: block;
  color: var(--navy);
  font-size: 1.05rem;
}
.careers-steps li span:last-child {
  display: block;
  color: #5a6475;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Careers hero has no overlapping stats card, so no extra bottom room */
.page-hero--solo {
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
}

/* Light variant of the pillar cards (careers "Why drive with us") */
.pillars--light {
  background:
    radial-gradient(40rem 24rem at 100% 0%, rgba(107, 182, 245, 0.18), transparent 70%),
    var(--soft);
}
.pillars--light .pillar {
  border-color: var(--line);
  background: var(--white);
  box-shadow: 0 20px 44px -36px rgba(16, 24, 45, 0.55);
}
.pillars--light .pillar:hover {
  background: var(--white);
  border-color: rgba(107, 182, 245, 0.6);
  box-shadow: var(--shadow-lift);
}
.pillars--light .pillar__title {
  color: var(--navy);
}
.pillars--light .pillar p {
  color: var(--text);
}
.pillars--light .pillar__num {
  -webkit-text-stroke: 1px rgba(0, 66, 137, 0.28);
}

/* Very small phones: let longer CTA lines wrap */
@media (max-width: 399.98px) {
  .cta-strip__text {
    white-space: normal;
  }
}

/* ==========================================================================
   30 Services: floating jump menu
   One rounded white panel, six icon-over-label tiles split by hairlines.
   ========================================================================== */
.svc-jump {
  position: relative;
  overflow: hidden;
  border-top: 0;
  border-radius: 18px;
  background: var(--white);
  box-shadow:
    0 40px 70px -40px rgba(16, 24, 45, 0.55),
    0 0 0 1px var(--line);
}
.svc-jump::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: var(--grad-brand);
}
.svc-jump .svc-links__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}
@media (min-width: 768px) {
  .svc-jump .svc-links__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .svc-jump .svc-links__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.svc-jump .svc-links__list a {
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  min-height: 128px;
  padding: 1.5rem 0.75rem 1.25rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--white);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  transform: none;
}
.svc-jump .svc-links__list a > .bi:first-child {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 66, 137, 0.08), rgba(107, 182, 245, 0.22));
  color: var(--navy);
  font-size: 1.35rem;
  transition:
    background 0.35s,
    color 0.35s,
    transform 0.4s var(--ease-out),
    box-shadow 0.35s;
}
.svc-jump .svc-links__list a > .bi:last-child {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.3;
}
.svc-jump .svc-links__list a::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--grad-brand);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease-out);
}

/* Hover / keyboard focus */
.svc-jump .svc-links__list a:hover,
.svc-jump .svc-links__list a:focus-visible {
  transform: none;
  box-shadow: none;
  background: #f3f8fe;
  color: var(--navy);
}
.svc-jump .svc-links__list a:hover > .bi:first-child,
.svc-jump .svc-links__list a:focus-visible > .bi:first-child {
  background: linear-gradient(135deg, var(--navy), #1d6fc4);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -12px rgba(0, 66, 137, 0.7);
}
.svc-jump .svc-links__list a:hover > .bi:last-child {
  opacity: 1;
  transform: translate(2px, 2px);
}
.svc-jump .svc-links__list a:hover::after,
.svc-jump .svc-links__list a:focus-visible::after {
  transform: scaleX(1);
}

@media (max-width: 575.98px) {
  .svc-jump {
    border-radius: 14px;
  }
  .svc-jump .svc-links__list a {
    min-height: 108px;
    padding: 1.15rem 0.5rem 1rem;
    font-size: 0.76rem;
  }
  .svc-jump .svc-links__list a > .bi:first-child {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  .svc-jump .svc-links__list a > .bi:last-child {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-jump .svc-links__list a:hover > .bi:first-child {
    transform: none;
  }
}

/* ==========================================================================
   31 Responsive polish (from full-site audit, 320–1920px)
   ========================================================================== */

/* Small uppercase labels never drop below 12px (base font shrinks on phones) */
.crumbs ol,
.solution__num,
.about__badge,
.field label {
  font-size: max(12px, 0.72rem);
}
@media (max-width: 575.98px) {
  .eyebrow,
  .tech-label,
  .hero__kicker,
  .gstat__label,
  .ccard__label,
  .ccard__note,
  .careers-apply__subtitle,
  .footer__title,
  .hero__strip-inner p,
  .svc-jump .svc-links__list a,
  .contact-form .field label,
  .application-form--home .application-form__check {
    font-size: 12px;
  }
  main .astat__label {
    font-size: 12px;
  }
}

/* Flag icons keep their exact 2:1 shape */
.astat__value .flag {
  width: 26px;
  height: 13px;
  object-fit: contain;
}

/* Touch screens: links get a comfortable 44px tap area */
@media (max-width: 991.98px) {
  .footer__links a {
    min-height: 44px;
  }
  .footer__links li + li {
    margin-top: 0;
  }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.75rem;
  }
  .service-tile a {
    min-height: 44px;
  }
  .hero__strip-inner a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ccard__main {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* email links wrap, so grow the tap area with padding instead of flex */
  .ccard__mail,
  .reach__list a {
    display: inline-block;
    padding-block: 0.7rem;
  }
  .ccard__mail {
    margin-top: 0;
  }
}

/* ==========================================================================
   32 Heading system — three consistent tiers
   1  Section titles: capitalised, 800, tight tracking (size from tokens)
   2  Card titles:    capitalised, 700, one shared size
   3  Small labels:   uppercase, 700, wide tracking, >= 12px
   ========================================================================== */
:root {
  --fs-card-title: 1.3rem;
  --fs-label: max(12px, 0.78rem);
}

/* Tier 1 */
.display-head,
main .zz-row__title {
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: capitalize;
}

/* Tier 2 */
main .service-tile h3,
main .about__features h3,
main .why-card__title,
main .proc-step__title,
main .pillar__title,
main .prep-item__title,
main .quote-form__title,
main .solution__title,
main .story-feat__title {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: capitalize;
}
main .service-tile h3,
main .about__features h3,
main .why-card__title,
main .proc-step__title,
main .pillar__title,
main .prep-item__title,
main .quote-form__title {
  font-size: var(--fs-card-title);
}
/* feature photo cards one step up, compact tiles one step down */
main .solutions--bento .solution__title {
  font-size: calc(var(--fs-card-title) * 1.3);
}
main .story-feat__title {
  font-size: calc(var(--fs-card-title) * 0.78);
}

/* Tier 3 */
.footer__title,
.careers-apply__subtitle,
.ccard__label,
.svc-links__title {
  font-family: var(--ff-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
main .ccard__label {
  font-size: var(--fs-label);
}

/* ---- remaining audit items (small phones) ---- */
.solution__points li,
.footer__flags,
.footer__bottom {
  font-size: max(12px, 0.8rem);
}
@media (max-width: 767.98px) {
  .hero__kicker {
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  main .gstat__label {
    font-size: 12px;
  }
}
@media (max-width: 991.98px) {
  .footer__contact a {
    display: inline-block;
    padding-block: 0.65rem;
  }
  .footer__contact li {
    align-items: center;
  }
}

/* Small phones: bento tags/buttons, hero phone link and long emails stay readable and tappable */
.solutions--bento .solution__points li,
.solutions--bento .solution__link {
  font-size: max(12px, 0.78rem);
}
@media (max-width: 575.98px) {
  .hero__strip-inner a {
    font-size: 12px;
  }
  .ccard__mail {
    padding-block: 0.75rem;
  }
}

/* Restore label and feature-card sizes (were reduced by the tier pass) */
.footer__title {
  font-size: max(12px, 0.875rem);
}
main .solutions--bento .solution__title {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

/* ==========================================================================
   33 Section heading size: 48px on desktop for every section heading
   (page titles, section titles, long titles, Services row titles).
   Phones/tablets scale smoothly up to that size.
   ========================================================================== */
:root {
  --fs-section-heading: clamp(2.2rem, 0.7rem + 3.6vw, 3rem);
  --fs-section-heading-long: clamp(2.2rem, 0.7rem + 3.6vw, 3rem);
}
@media (min-width: 992px) {
  :root {
    --fs-section-heading: 3rem;
    --fs-section-heading-long: 3rem;
  }
}
@media (max-width: 991.98px) {
  :root {
    --fs-section-heading: clamp(2.2rem, 0.7rem + 3.6vw, 3rem);
    --fs-section-heading-long: clamp(2.2rem, 0.7rem + 3.6vw, 3rem);
  }
}