@charset "UTF-8";
/* ==========================================================================
   KJS Transport Inc. — built from Figma design "KJS website"
   Breakpoints (from Figma frames): 2560 / 1440 / 1200 / 992 / 375
   ========================================================================== */

:root {
  --blue: #274787;
  --red: #db3227;
  --red-alt: #d93427;
  --footer-black: #0f0f0f;
  --gray-sep: #b4b4b4;
  --gray-text: #8f8f8f;
  --ssp: 'Source Sans 3', 'Source Sans Pro', Carlito, 'Segoe UI', Arial, sans-serif;
  --inter: 'Inter', 'Segoe UI', FreeSans, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ssp);
  color: #1a1a1a;
  background: #fff;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 0;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: var(--ssp);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
  transition: background-color .25s ease;
}
.btn--red { background: var(--red); }
.btn--red:hover { background: var(--blue); }
.btn--blue { background: var(--blue); }
.btn--blue:hover { background: var(--red); }
.btn--icon { position: relative; padding-left: 48px; justify-content: flex-end; }
.btn--icon img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
}
.header-inner {
  display: flex;
  align-items: center;
  height: clamp(150px, 7.23vw, 185px);
  padding: 0 clamp(20px, 1.64vw, 42px);
  gap: 30px;
  max-width: 1850px;
  margin: 0 auto;
}
.header-logo { flex-shrink: 0; }
.header-logo img { width: clamp(150px, 13vw, 269px); height: auto; }

.header-right {
  /* right-packed block like the 2560 design (975px next to 25 YEARS);
     fills the middle on smaller desktops, capped so it never scatters */
  flex: 1 1 auto;
  max-width: 800px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, .9vw, 23px);
  min-width: 0;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(12px, 1.09vw, 28px);
  flex-wrap: nowrap;
}
.header-row--top { gap: clamp(14px, 1.21vw, 31px); }
.header-phone {
  font-family: var(--inter);
  font-weight: 700;
  font-size: clamp(18px, 1.1vw, 32px);
  color: var(--red-alt);
  white-space: nowrap;
}
.header-phone:hover { color: var(--blue); }
.header-linkedin img { width: 32px; height: auto; }
.header-linkedin:hover { opacity: .75; }

.header-row--nav { position: relative; gap: clamp(16px, 1.1vw, 28px); }
.header-row--nav .header-phone,
.header-row--nav .header-linkedin { display: none; }
.nav-item {
  font-family: var(--ssp);
  font-weight: 400;
  font-size: clamp(16px, 1.29vw, 18px);
  letter-spacing: .15em;
  color: var(--blue);
  white-space: nowrap;
  padding: 8px 0 0;
}
.nav-item > a { color: var(--blue); }
.has-submenu > a { color: var(--red-alt); }
a.nav-item:hover, .nav-item > a:hover { color: var(--red); }
.has-submenu > a:hover { color: var(--blue); }
.nav-sep { color: var(--gray-sep); font-size: clamp(16px, 1.29vw, 18.5px); font-family: var(--inter); }

/* dropdown submenu */
.has-submenu { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: clamp(-24px, -1.2vw, -16px);
  width: clamp(310px, 14.2vw, 364px);
  padding-top: 29px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
.submenu .padding {
  padding: 9px 20px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
}
.submenu a {
  display: block;
  padding: 12px 10px;
  font-size: clamp(15px, .86vw, 18px);
  letter-spacing: .1em;
  color: var(--blue);
  line-height: 1.25;
}
.submenu a:hover { color: var(--red); }
.submenu-line { height: 1px; background: var(--blue); opacity: .35; }

/* 25 YEARS (png, stacked) */
.header-years {
  flex-shrink: 0;
  margin-left: clamp(0px, 2vw, 73px);
  width: clamp(64px, 3.5vw, 89px);
}
.header-years img { display: block; width: 100%; height: auto; }

/* sticky header (added once scrolled past the hero top) */
body.header-stuck .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  animation: hdr-slide .28s ease;
}
body.header-stuck .mobile-menu {
  position: fixed;
  top: 143px; left: 0; right: 0;
  z-index: 69;
}
@keyframes hdr-slide {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* hamburger + mobile bars: hidden on desktop */
.hamburger { display: none; }
.header-mobile-bar { display: none; }
.mobile-menu { display: none; }

/* ==========================================================================
   Scroll-reveal animations (classes applied by js/main.js)
   ========================================================================== */
.rv-up, .rv-left, .rv-right, .rv-fade {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.rv-up    { transform: translateY(46px); }
.rv-left  { transform: translateX(-70px); }
.rv-right { transform: translateX(70px); }
/* .rv-fade never touches transform, so elements with layout transforms stay put */
.rv-up.in-view, .rv-left.in-view, .rv-right.in-view { opacity: 1; transform: none; }
.rv-fade.in-view { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv-up, .rv-left, .rv-right, .rv-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(560px + 27vw);
  max-height: 1300px;
  padding-top: clamp(150px, 7.23vw, 185px);
  padding-bottom: 18.7vw;
  background: var(--blue) url('../assets/hero-bg.jpg') center / cover no-repeat;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero { overflow: hidden; }
.hero-title {
  position: relative;
  width: 100%;
  max-width: 1330px;
  text-align: center;
  color: #fff;
  z-index: 2;
  padding: 0 20px;
}
.hero-title h1 {
  font-family: var(--inter);
  font-weight: 700;
  font-size: clamp(40px, 2.89vw, 74px);
  line-height: 1.22;
  white-space: nowrap;
}
.hero-title p {
  font-family: var(--inter);
  font-weight: 400;
  font-size: clamp(26px, 1.95vw, 50px);
  letter-spacing: .04em;
  line-height: 1.22;
  white-space: nowrap;
}

/* ==========================================================================
   The Chosen (dark section w/ diagonal top & bottom)
   ========================================================================== */
.chosen {
  position: relative;
  z-index: 2;
  margin-top: -18.7vw;
  aspect-ratio: 2560 / 1359;
  background: url('../assets/chosen-bg.jpg') center / cover no-repeat; /* jpg fallback */
  background: url('../assets/chosen-bg.png') center / 100% 100% no-repeat;
}
.chosen-leaf {
  position: absolute;
  left: 50%;
  top: 4.2vw;
  transform: translateX(-50%);
  width: 8.3vw;
  height: auto;
  z-index: 3;
}
.chosen-content {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1124px, 82vw);
  display: flex;
  gap: 35px;
  align-items: flex-start;
}
.chosen-left { flex-shrink: 0; }
.chosen-left h2 span { white-space: nowrap; }
.chosen-left h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}
.chosen-left h2 span { width: fit-content; }
.ch-1 { font-size: clamp(50px, 3.59vw, 92px); line-height: .98; }
.ch-2 { font-size: clamp(45px, 3.2vw, 82px); line-height: .93; }
.ch-3 { font-size: clamp(70px, 5.04vw, 129px); line-height: .95; }
.ch-4 {
  font-weight: 400;
  font-size: clamp(20px, 1.45vw, 37px);
  letter-spacing: .07em;
  color: var(--red);
  margin-top: 6px;
  line-height: 1.1;
}
.chosen-right {
  flex: 1;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 49px;
}
.chosen-right p {
  font-family: var(--inter);
  font-size: clamp(17px, .9vw, 20px);
  line-height: 1.4;
  color: #fff;
  max-width: 559px;
}
.chosen-buttons { display: flex; gap: 35px; }

.chosen-truck {
  position: absolute;
  left: 50%;
  bottom: -4.2vw;
  transform: translateX(-50%);
  width: 40.5vw;
  height: auto;
  z-index: 4;
}

/* parallax background layers (translated by js/main.js on scroll).
   Each layer is viewport-sized and counter-translated every frame so the
   background appears fixed to the viewport while the section scrolls over
   it — same look as background-attachment: fixed, but works on touch too. */
.plx {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background: url('../assets/crossborder-map.jpg') center / cover no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .plx { height: 100%; }
}
.crossborder > :not(.plx),
.whychoose > :not(.plx) {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Cross-border
   ========================================================================== */
.crossborder {
  position: relative;
  z-index: 1;
  background: var(--blue);
  overflow: hidden;
  padding: 12vw 20px 12vw;
  text-align: center;
}
.crossborder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.crossborder h2 {
  font-family: var(--inter);
  font-weight: 700;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.cb-1 { font-size: clamp(38px, 2.89vw, 74px); line-height: 1.15; }
.cb-2 { font-size: clamp(33px, 2.5vw, 64px); line-height: 1.1; }

/* ==========================================================================
   Why choose KJS
   ========================================================================== */
.whychoose {
  position: relative;
  z-index: 2;
  background: #fff url('../assets/whychoose-bg.jpg') center / cover no-repeat;
  overflow: hidden;
  padding: clamp(70px, 5.12vw, 131px) 20px clamp(130px, 10.9vw, 280px);
  text-align: center;
}
.whychoose h2 {
  font-weight: 700;
  font-size: clamp(46px, 3.47vw, 89px);
  color: var(--red);
  padding: 10px;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
  padding: 10px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
}
.stat-num {
  font-weight: 700;
  font-size: clamp(58px, 4.3vw, 110px);
  line-height: 1.06;
  color: var(--blue);
}
.stat-num sup {
  font-weight: 300;
  font-size: clamp(34px, 2.5vw, 64px);
  vertical-align: baseline;
  position: relative;
  top: -6px;
  line-height: 1;
}
.stat-label {
  font-weight: 400;
  font-size: clamp(15px, .94vw, 24px);
  letter-spacing: .07em;
  color: var(--blue);
  margin-top: 10px;
  white-space: nowrap;
}
.stat-divider {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(150px, 8.65vw, 221px);
}
.stat-divider::before,
.stat-divider::after {
  content: "";
  flex: 1;
  width: 2px;
  background: var(--red-alt);
}
.stat-divider img { width: clamp(20px, 1.05vw, 27px); height: auto; }

/* "2 YEARS" is the one stat whose number line is a phrase rather than a
   figure, so it is the only one that could break onto two lines. */
.stat--phrase .stat-num { white-space: nowrap; }
@media (min-width: 993px) and (max-width: 1200px) {
  /* the three-column grid is capped at 900px through this band, which leaves a
     248px column. "2 YEARS" needs 254px at the 72px the other figures use, so
     it comes down just far enough to fit with room to spare. */
  .stat--phrase .stat-num { font-size: 66px; }
}


/* ==========================================================================
   Bonded & certified
   ========================================================================== */
.bonded {
  position: relative;
  z-index: 3;
  background: var(--blue);
  padding: clamp(120px, 9.45vw, 242px) 20px clamp(80px, 5.5vw, 141px);
  text-align: center;
  color: #fff;
}
.bonded-truck {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -69%);
  width: 40.7vw;
  max-width: 1043px;
  min-width: 300px;
  z-index: 3;
}
.bonded-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bonded h2 {
  font-weight: 700;
  font-size: clamp(48px, 3.75vw, 96px);
  letter-spacing: .07em;
  line-height: 1.1;
}
.bonded-sub {
  font-weight: 400;
  font-size: clamp(31px, 2.42vw, 62px);
  letter-spacing: .09em;
  line-height: 1.1;
  margin-top: 4px;
}
.bonded-body {
  font-weight: 400;
  font-size: clamp(16px, 1.05vw, 27px);
  line-height: 1.3;
  max-width: clamp(560px, 33.5vw, 857px);
  margin-top: 40px;
}
.affiliations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 3.05vw, 78px);
  margin-top: 60px;
}
.aff-break { display: none; }
@media (min-width: 601px) and (max-width: 1200px) {
  /* balance the affiliation logos 4 + 3 instead of 6 + 1 */
  .aff-break { display: block; flex-basis: 100%; height: 0; }
}
.affiliations img { width: auto; flex-shrink: 0; }
.affiliations img[alt="CTPAT"] { height: clamp(24px, 1.33vw, 34px); }
.affiliations img[alt^="PIP"]  { height: clamp(31px, 1.72vw, 44px); }
.affiliations img[alt^="CSA"]  { height: clamp(25px, 1.41vw, 36px); }
.affiliations img[alt^="FAST"] { height: clamp(22px, 1.21vw, 31px); }
.affiliations img[alt="ACE"]   { height: clamp(35px, 1.95vw, 50px); }
.affiliations img[alt="CAMSC"] { height: clamp(43px, 2.38vw, 61px); }
.affiliations img[alt^="CBSA"] { height: clamp(41px, 2.27vw, 58px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--footer-black);
  color: #fff;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(40px, 3vw, 76px) clamp(40px, 4.53vw, 116px) clamp(32px, 2.6vw, 66px);
  max-width: 2560px;
  margin: 0 auto;
}
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-logo { width: clamp(260px, 14.6vw, 374px); height: auto; }
.footer-info {
  display: flex;
  align-items: center;
  gap: 28px;
}
.footer-phone {
  font-size: clamp(22px, 1.25vw, 32px);
  letter-spacing: .05em;
  color: var(--red-alt);
}
.footer-phone:hover { color: #fff; }
.footer-email {
  font-size: clamp(22px, 1.25vw, 32px);
  letter-spacing: .05em;
  color: #fff;
}
.footer-email:hover { color: var(--red-alt); }
.footer-linkedin img { width: 37px; height: 37px; }
.footer-linkedin:hover { opacity: .75; }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
}
.footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-menu a {
  font-size: clamp(14px, .74vw, 19px);
  letter-spacing: .05em;
  color: #fff;
  padding: 5px 0;
  text-align: right;
}
.footer-menu a:hover { color: var(--red-alt); }
.footer-disclaimer {
  font-family: var(--inter);
  font-size: clamp(13px, .74vw, 19px);
  color: var(--gray-text);
  text-align: right;
  padding: 0;
}
.footer-disclaimer strong { font-weight: 700; color: var(--gray-text); }
.footer-disclaimer a { color: inherit; }
.footer-disclaimer a:hover { color: var(--red-alt); }

/* ==========================================================================
   LAPTOP  (1201 – 1440-ish)
   ========================================================================== */
@media (max-width: 1650px) {
  /* chosen: 1440 background crop */
  .chosen {
    aspect-ratio: 1440 / 1068;
    background: url('../assets/chosen-bg-1440.png') center / 100% 100% no-repeat;
    margin-top: -19vw;
  }
  .chosen-leaf { top: 1.5vw; width: 10vw; }
  .chosen-content { width: min(1000px, 86vw); }
  .chosen-right { gap: 30px; }
  .chosen-right p { max-width: 480px; }
  .chosen-buttons { gap: 24px; }

  .crossborder { padding: 16vw 20px 14vw; }

  /* stats: 3 columns x 2 rows, two tall dividers (design 1440/1200) */
  .stats {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 34px;
    column-gap: 24px;
    max-width: 1100px;
    margin: 38px auto 0;
  }
  .stat { padding: 0; }
  .stats > :nth-child(1)  { grid-column: 1; grid-row: 1; }      /* 25      */
  .stats > :nth-child(3)  { grid-column: 1; grid-row: 2; }      /* 200+    */
  .stats > :nth-child(7)  { grid-column: 3; grid-row: 1; }      /* 40,000+ */
  .stats > :nth-child(5)  { grid-column: 3; grid-row: 2; }      /* 600+    */
  /* five stats, so the last column holds one — spanning both rows centres it
     against the stacked pair beside it instead of leaving a hole underneath */
  .stats > :nth-child(9)  { grid-column: 5; grid-row: 1 / 3; }  /* 2       */
  .stats > :nth-child(2)  { grid-column: 2; grid-row: 1 / 3; min-height: 0; }
  .stats > :nth-child(4)  { grid-column: 4; grid-row: 1 / 3; min-height: 0; }
  .stats > :nth-child(6),
  .stats > :nth-child(8)  { display: none; }
  .whychoose { padding-bottom: 200px; }

  .bonded { padding-top: 242px; }
  .bonded-truck { transform: translate(-50%, -50%); }

  /* footer: stacked & centered (design 1440) */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 56px 40px 40px;
  }
  .footer-left { align-items: center; gap: 26px; }
  .footer-logo { width: 300px; }
  .footer-right { align-items: center; gap: 20px; }
  .footer-menu { align-items: center; }
  .footer-menu a, .footer-disclaimer { text-align: center; }
}

/* ==========================================================================
   TABLET  (601 – 1200): hamburger header
   ========================================================================== */
@media (max-width: 1200px) {
  .btn { font-size: clamp(19px, 2.5vw, 25px); height: 50px; min-width: 0; }
  .site-header { position: static; background: #fff; }
  .header-inner {
    display: flex;
    justify-content: space-between;
    height: 162px;
    padding: 0 clamp(24px, 12vw, 150px); /* design: content grouped toward the centre */
    background: #fff;
  }
  .header-logo { padding: 0; }
  .header-logo img { width: clamp(210px, 28vw, 279px); }
  .header-right { display: none; }
  .header-years { margin: 0; padding: 0; width: clamp(66px, 9vw, 89px); }
  .header-mobile-bar { background: transparent; }
  .header-right { display: none; }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    order: 3;
    width: 62px;
    height: 52px;
    padding: 6px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .hamburger span {
    display: block;
    height: 7px;
    border-radius: 2px;
    background: var(--red);
    transition: transform .25s ease, opacity .2s ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(15px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-15px) rotate(-45deg); }

  .header-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 7vw, 84px);
    padding: 6px 24px 36px;
    background: transparent;
  }
  .header-mobile-bar .header-phone { font-size: 30px; }
  .header-years--mobile { display: none; }
  body.header-stuck .mobile-menu { top: 78px; }
  /* compact sticky: just the logo and hamburger */
  body.header-stuck .header-mobile-bar { display: none; }
  body.header-stuck .header-inner { height: 78px; padding: 0 24px; }
  body.header-stuck .header-inner .header-years { display: none; }
  body.header-stuck .header-logo img { width: 160px; }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.96);
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  .mobile-menu.open { max-height: 480px; }
  .mobile-menu a {
    padding: 14px 28px;
    font-size: 18px;
    letter-spacing: .9px;
    color: var(--blue);
    border-top: 1px solid rgba(39,71,135,.12);
  }
  .mobile-menu a:hover { color: var(--red); }
  .mobile-menu .mobile-sub { font-size: 15px; padding-left: 44px; }
  .mobile-menu .mobile-phone { font-weight: 700; color: var(--red); }

  .hero {
    height: min(970px, 96vw);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-title { position: static; transform: none; margin-top: 4vw; }
  .hero-title h1 { font-size: clamp(30px, 5.2vw, 54px); white-space: normal; line-height: 1.15; }
  .hero-title p { font-size: clamp(16px, 3.2vw, 34px); white-space: normal; line-height: 1.2; margin-top: 8px; }

  .chosen {
    margin-top: 0;
    aspect-ratio: auto;
    background: #0d0d0d url('../assets/chosen-bg-dark.jpg') center top / cover no-repeat;
    padding: clamp(80px, 17vw, 169px) 0 0;
  }
  .chosen-leaf {
    display: block;
    top: clamp(-52px, -4.5vw, -30px);
    width: clamp(64px, 9vw, 104px);
  }
  .chosen-content {
    position: static;
    transform: none;
    margin: 0 auto;
    flex-direction: column;
    gap: 35px;
    width: min(559px, 88vw);
  }
  .chosen-left { width: 100%; }
  .chosen-left h2 {
    align-items: flex-start;
    text-align: left;
    width: 100%;
    margin: 0;
  }
  .chosen-right { width: 100%; }
  .ch-1 { font-size: clamp(52px, 9.3vw, 92px); }
  .ch-2 { font-size: clamp(46px, 8.3vw, 82px); }
  .ch-3 { font-size: clamp(72px, 13vw, 129px); }
  .ch-4 { font-size: clamp(20px, 3.75vw, 37px); }
  .chosen-right { padding-top: 0; gap: 49px; }
  .chosen-right p { font-size: clamp(18px, 2.02vw, 20px); line-height: 1.45; max-width: 559px; }
  .chosen-truck {
    position: static;
    margin: clamp(20px, 3vw, 36px) auto 0;
    width: 46vw;
    /* slide the truck itself down over the blue section — works even if
       something fixes the section height (aspect-ratio, min-height, ...) */
    transform: translateY(28%);
  }
  /* white divider between the dark section and the blue map; the truck
     rides across it into the blue */
  .crossborder { border-top: clamp(8px, 0.8vw, 12px) solid #fff; }

  .crossborder { padding: 19vw 20px 16vw; }
  .cb-1 { font-size: 44px; }
  .cb-2 { font-size: 38px; }

  .whychoose { padding-top: 80px; padding-bottom: 150px; }
  .whychoose h2 { font-size: 54px; }
  .stats { max-width: 900px; }
  .stat-num { font-size: 72px; }
  .stat-num sup { font-size: 42px; }
  .stat-label { font-size: 16px; }

  .bonded { padding: 160px 20px 90px; }
  .bonded-truck { width: 52vw; transform: translate(-50%, -62%); }
  .bonded h2 { font-size: 54px; letter-spacing: 3.8px; }
  .bonded-sub { font-size: 34px; letter-spacing: 3.1px; }
  .bonded-body { font-size: 18px; max-width: 600px; }
  .affiliations { gap: 40px; max-width: 820px; margin-left: auto; margin-right: auto; }

}

/* ==========================================================================
   MOBILE LG (601 – 992): stats 2-up
   ========================================================================== */
@media (max-width: 992px) {
  .whychoose {
    background-image: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), url('../assets/whychoose-bg.jpg');
  }
  .header-mobile-bar .header-phone { display: none; }
  .header-mobile-bar { gap: clamp(40px, 12vw, 124px); } /* design 992: two buttons, 124px apart */
  .chosen-buttons { justify-content: flex-start; }

  /* stats: 2 columns x 3 rows, horizontal leaf dividers between rows (design 992) */
  .stats {
    grid-template-columns: 1fr 1fr;
    max-width: 560px;
    row-gap: 30px;
  }
  .stats > :nth-child(1)  { grid-column: 1;    grid-row: 1; }  /* 25      */
  .stats > :nth-child(3)  { grid-column: 2;    grid-row: 1; }  /* 200+    */
  .stats > :nth-child(7)  { grid-column: 1;    grid-row: 3; }  /* 40,000+ */
  .stats > :nth-child(5)  { grid-column: 2;    grid-row: 3; }  /* 600+    */
  .stats > :nth-child(9)  { grid-column: 1/-1; grid-row: 5; }  /* 2       */
  .stats > :nth-child(2),
  .stats > :nth-child(4) {
    display: flex;
    flex-direction: row;
    grid-column: 1 / -1;
    min-height: 0;
    width: 100%;
    max-width: 520px;
  }
  .stats > :nth-child(2) { grid-row: 2; }
  .stats > :nth-child(4) { grid-row: 4; }
  .stats > :nth-child(2)::before, .stats > :nth-child(2)::after,
  .stats > :nth-child(4)::before, .stats > :nth-child(4)::after {
    width: auto;
    height: 2px;
  }
  .stats > :nth-child(6),
  .stats > :nth-child(8)  { display: none; }

  .whychoose { padding-bottom: 130px; }
  .bonded { padding-top: 130px; }
}

/* ==========================================================================
   MOBILE (≤ 600): 375 design
   ========================================================================== */
@media (max-width: 600px) {
  body.header-stuck .mobile-menu { top: 64px; }
  body.header-stuck .header-inner { height: 64px; padding: 0 14px; }
  body.header-stuck .header-logo img { width: 130px; }
  .header-inner { height: 137px; padding: 0 14px; }
  .hamburger { margin-left: auto; }
  .header-inner .header-years { display: none; }
  .header-logo img { width: min(236px, 60vw); }
  .hamburger { width: 50px; height: 46px; gap: 7px; }
  .hamburger span { height: 6px; }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(13px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }

  .header-mobile-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 14px;
  }
  .header-mobile-bar .btn {
    border-radius: 0;
    justify-content: center;
    gap: 14px;
    padding: 0 18px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 7px;
  }
  /* icon rides beside the label so the pair centres as one group */
  .header-mobile-bar .btn--icon { padding-left: 18px; }
  .header-mobile-bar .btn--icon img {
    position: static;
    transform: none;
    left: auto;
    width: 32px;
  }
  .header-mobile-bar .header-phone { display: none; }
  .header-years--mobile { display: none; }

  .hero {
    margin-top: 0;
    height: 360px;
    background-image: url('../assets/hero-bg-tall.jpg');
    background-position: center;
  }
  .hero-title { margin-top: 0; padding: 0 10px; }
  .hero-title h1 { font-size: clamp(17px, 5.8vw, 28px); line-height: 1.15; }
  .hero-title p { font-size: clamp(11px, 3.8vw, 18px); letter-spacing: .5px; line-height: 1.2; }

  .chosen {
    margin-top: 0;
    background: #0d0d0d url('../assets/chosen-bg-dark.jpg') center top / cover no-repeat;
    padding: 62px 0 0;
  }
  .chosen-leaf { display: block; top: -26px; width: 58px; }
  .chosen-content {
    position: static;
    transform: none;
    margin: 0 auto;
    width: min(296px, 88vw);
  }
  .ch-1 { font-size: 52px; }
  .ch-2 { font-size: 46px; }
  .ch-3 { font-size: 72px; }
  .ch-4 { font-size: 20px; letter-spacing: 1.4px; }
  .chosen-right { gap: 35px; }
  .chosen-right p { font-size: 18px; line-height: 1.45; }
  .chosen-buttons { flex-direction: column; gap: 21px; align-items: center; }
  .chosen-buttons .btn { width: 242px; }
  .chosen-truck {
    position: static;
    margin: 40px auto 0;
    width: 269px;
    transform: translateY(29%);
  }

  .crossborder { padding: 120px 16px 90px; }
  .cb-1 { font-size: 30px; }
  .cb-2 { font-size: 25px; }

  .whychoose { padding: 60px 16px 90px; }
  .whychoose h2 { font-size: 36px; }

  /* stats: single column, red line-leaf-line separators */
  .stats { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .stats > .stat,
  .stats > .stat-divider,
  .stats > :nth-child(2), .stats > :nth-child(4),
  .stats > :nth-child(6), .stats > :nth-child(8) {
    display: flex;
  }
  .stat-divider,
  .stats > :nth-child(2), .stats > :nth-child(4) {
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-self: center;
    min-height: 0;
    width: 240px;
    max-width: 70vw;
  }
  .stat-divider::before, .stat-divider::after {
    display: block !important;
    width: auto;
    height: 2px;
    flex: 1;
  }
  /* design 375 order: 25, 200+, 40,000+, 600+, 2 */
  .stats > :nth-child(1)  { order: 1; }
  .stats > :nth-child(2)  { order: 2; }
  .stats > :nth-child(3)  { order: 3; }
  .stats > :nth-child(4)  { order: 4; }
  .stats > :nth-child(7)  { order: 5; }
  .stats > :nth-child(6)  { order: 6; }
  .stats > :nth-child(5)  { order: 7; }
  .stats > :nth-child(8)  { order: 8; }
  .stats > :nth-child(9)  { order: 9; }
  .stat-num { font-size: 64px; }
  .stat-num sup { font-size: 38px; }
  .stat-label { font-size: 15px; }

  .bonded { padding: 90px 16px 70px; }
  .bonded-truck { width: 316px; min-width: 0; transform: translate(-50%, -55%); }
  .bonded h2 { font-size: 34px; letter-spacing: 2.4px; }
  .bonded-sub { font-size: 22px; letter-spacing: 2px; }
  .bonded-body { font-size: 15px; }
  .affiliations { flex-direction: column; align-items: center; gap: 22px; }
  .affiliations img { transform: none; }

  .footer-inner { padding: 60px 20px 40px; }
  .footer-logo { width: 273px; }
  .footer-info { flex-direction: column; gap: 8px; }
  .footer-phone, .footer-email { font-size: 24px; }
  .footer-menu a { padding: 9px; font-size: 16px; }
  .footer-disclaimer { font-size: 14px; padding: 20px 10px 0; }
}

/* ==========================================================================
   Subpage (Domestic & Cross Border Transportation)
   ========================================================================== */
.nav-item.is-active > a { color: var(--red); }


.feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breadcrumb {
  padding: clamp(22px, 1.6vw, 40px) 20px 0;
}
.breadcrumb p {
  width: min(1450px, 90vw);
  margin: 0 auto;
  font-family: var(--ssp);
  font-size: clamp(12px, .63vw, 16px);
  letter-spacing: .16em;
  color: var(--blue);
}
.breadcrumb a { color: var(--blue); }
.breadcrumb a:hover { color: var(--red); }
.bc-sep { color: var(--blue); padding: 0 6px; }
.bc-current { color: var(--red-alt); }

.sp-body {
  padding: clamp(36px, 3vw, 78px) 20px 0;
}
.sp-grid {
  width: min(1450px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(340px, 20.7vw, 530px) 1fr;
  gap: clamp(60px, 7.3vw, 187px);
  align-items: start;
}
.sp-heading {
  font-family: var(--ssp);
  font-weight: 700;
  font-size: clamp(28px, 2.5vw, 64px);
  line-height: 1.32;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--red-alt);
}
.sp-sub {
  font-family: var(--ssp);
  font-weight: 600;
  font-size: clamp(21px, 1.18vw, 30px);
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--blue);
  margin-bottom: clamp(10px, 0.8vw, 20px);
}
.sp-sub--caps {
  font-weight: 600;
  font-size: clamp(21px, 1.09vw, 28px);
  letter-spacing: .08em;
  /*text-transform: uppercase;*/
}
.sp-sub + .sp-sub, .sp-copy + .sp-sub, .sp-list + .sp-sub { margin-top: clamp(24px, 2vw, 48px); }
.sp-copy {
  font-family: var(--ssp);
  font-size: clamp(16px, 1vw, 18.5px);
  line-height: 1.6;
  letter-spacing: .02em;
  color: #555;
}
.sp-copy + .sp-sub { margin-top: clamp(24px, 2vw, 48px); }
.sp-list {
  list-style: none;
  padding-left: 0;
  font-family: var(--ssp);
  font-size: clamp(16px, 1vw, 18.5px);
  line-height: 1.6;
  letter-spacing: .02em;
  color: #555;
}
.sp-list li {
  position: relative;
  padding-left: 1.1em;
}
.sp-list li::before {
  /* Bullet written as a CSS escape, not as a literal character. A server that
     sends styles.css without "charset=UTF-8" makes the browser read the bytes
     as Latin-1, which turns a literal bullet into mojibake. \2022 is plain
     ASCII so it survives any encoding. The trailing space is part of the
     escape syntax: it terminates the hex digits and is not printed. */
  content: "\2022 ";
  position: absolute;
  left: 0;
  color: #555;
}
/*.sp-list li + li { margin-top: clamp(10px, 0.8vw, 20px); }*/

.sp-side {
  position: relative;
  z-index: 0;
  margin-top: clamp(-210px, -8.1vw, -40px);
}
.sp-body { position: relative; z-index: 1; }
.sp-side img {
  display: block;
  width: min(68.3vw, calc(((100vw - min(1450px, 90vw)) / 2 + clamp(340px, 20.7vw, 530px) + clamp(60px, 7.3vw, 187px) - 30px) * 1.52));
  max-width: 1749px;
  height: auto;
}

.affbar {
  background: var(--blue);
  padding: clamp(24px, 1.3vw, 33px) 20px;
}
.affbar .affiliations { margin-top: 0; }

/* subpage responsive */
@media (max-width: 1200px) {
  .sp-grid { grid-template-columns: 1fr; gap: 40px; }
  .sp-heading { font-size: clamp(26px, 3.2vw, 38px); }
  .sp-sub { font-size: 23px; }
  .sp-sub--caps { font-size: 20px; }
  .sp-copy, .sp-list { font-size: 16px; }
  .sp-side { margin-top: 40px; }
  .sp-side img { width: 100%; max-width: none; }
  .breadcrumb { padding-top: 26px; }
}
@media (max-width: 600px) {
  .breadcrumb p { text-align: center; font-size: 12px; }
  .sp-body { padding-top: 40px; }
  .sp-heading { font-size: 24px; }
  .sp-sub { font-size: 20px; }
  .sp-sub--caps { font-size: 18px; }
  .sp-copy, .sp-list { font-size: 16px; }
  .sp-side { margin-top: 30px; }
}

/* ==========================================================================
   Subpage additions — breadcrumb parent, copy rhythm, CTA rows
   ========================================================================== */
.bc-parent { color: var(--blue); }

/* vertical rhythm between stacked copy blocks */
.sp-copy + .sp-copy,
.sp-copy + .sp-list,
.sp-list + .sp-copy { margin-top: clamp(10px, 0.8vw, 20px); }

.sp-copy--lead {
  font-size: clamp(15px, .8vw, 20px);
  color: #444;
}

.sp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1vw, 26px);
  margin-top: clamp(30px, 2.3vw, 58px);
}
.sp-cta + .sp-sub { margin-top: clamp(24px, 2vw, 48px); }
.sp-cta .btn { height: clamp(40px, 2.35vw, 60px); font-size: clamp(15px, .78vw, 20px); }
.sp-cta .btn--icon { padding-left: clamp(48px, 2.9vw, 74px); }
.sp-cta .btn--icon img { width: clamp(26px, 1.4vw, 36px); }

/* ==========================================================================
   Terminal location map (North American Coverage)
   ========================================================================== */
.map-section {
  padding: clamp(50px, 2.7vw, 120px) 20px clamp(40px, 3.5vw, 90px);
}
.map-inner {
  width: min(1700px, 92vw);
  margin: 0 auto;
}
.map-title {
  font-family: var(--ssp);
  font-weight: 700;
  font-size: clamp(21px, 1.4vw, 36px);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: center;
  margin-bottom: clamp(28px, 2.3vw, 58px);
}
.map-figure {
  position: relative;
  line-height: 0;
}
.map-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Blinking terminal markers.
   The red markers are baked into the map artwork — these overlays sit
   exactly on top of them and pulse, so the map itself is untouched.
   Positions come from $markersDesktop / $markersMobile in coverage.php,
   and each one gets its own --pin-delay so they blink in sequence. */
.map-blink {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(16px, 1vw, 26px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(219, 50, 39, .6) 0%, rgba(219, 50, 39, 0) 68%);
  opacity: 0;
  animation: marker-glow 2.2s ease-in-out infinite;
  animation-delay: var(--pin-delay, 0s);
}
.map-blink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
  animation: marker-ring 2.2s ease-out infinite;
  animation-delay: var(--pin-delay, 0s);
}
.map-blink--mob { display: none; }
@keyframes marker-glow {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  45%      { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes marker-ring {
  0%   { transform: scale(.9); opacity: .85; }
  70%  { transform: scale(3);  opacity: 0; }
  100% { transform: scale(3);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-blink, .map-blink::after { animation: none; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
/* Head office sits above the form rather than beside it. Side by side, the
   short address squeezed the form into half the column; stacked, the form
   gets the full width and the fields stop feeling cramped. */
.contact-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 2.6vw, 64px);
  margin-top: clamp(34px, 2.7vw, 70px);
}
/* Address, phone and email sit on one line across the full width, so the
   block reads as a band above the form instead of a short stack with the rest
   of the row empty. They wrap to their own lines when the width runs out. */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(30px, 2.6vw, 56px);
  row-gap: clamp(8px, .6vw, 16px);
}
.contact-details > .sp-sub { flex: 1 0 100%; }
.contact-details .contact-line { margin-top: 0; }

.contact-address,
.contact-line {
  font-family: var(--ssp);
  font-style: normal;
  font-size: clamp(15px, .78vw, 20px);
  line-height: 1.75;
  letter-spacing: .02em;
  color: #555;
}
.contact-line { margin-top: clamp(12px, .9vw, 24px); }
.contact-label { font-weight: 700; color: var(--blue); }
.contact-line a { color: #555; }
.contact-line a:hover { color: var(--red); }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.25vw, 32px);
}
.cf-field { display: flex; flex-direction: column; }
.cf-field--full,
.cf-actions { grid-column: 1 / -1; }
.cf-field label {
  font-family: var(--ssp);
  font-weight: 600;
  font-size: clamp(13px, .68vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(6px, .43vw, 11px);
}
.cf-field input:not([type="radio"]),
.cf-field select,
.cf-field textarea {
  width: 100%;
  font-family: var(--ssp);
  font-size: clamp(15px, .78vw, 20px);
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--gray-sep);
  border-radius: 6px;
  padding: clamp(9px, .7vw, 18px) clamp(11px, .78vw, 20px);
  transition: border-color .25s ease;
}
.cf-field input:not([type="radio"]),
.cf-field select { height: clamp(42px, 2.5vw, 64px); }
.cf-field textarea { resize: vertical; min-height: clamp(140px, 10.5vw, 270px); }
.cf-field input:not([type="radio"]):focus,
.cf-field select:focus,
.cf-field textarea:focus { outline: none; border-color: var(--blue); }
.cf-actions .btn {
  height: clamp(42px, 2.5vw, 64px);
  font-size: clamp(15px, .78vw, 20px);
  padding-left: clamp(34px, 2.3vw, 60px);
  padding-right: clamp(34px, 2.3vw, 60px);
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   Footer credit hover
   ========================================================================== */
.trypm strong { transition: color .25s ease; }
.trypm strong:hover { color: var(--red); }

/* reCAPTCHA v3: the floating badge is replaced by the notice under each form's
   button, which Google allows, so it never covers the page. */
.grecaptcha-badge { visibility: hidden; }

/* ==========================================================================
   Responsive — new modules
   ========================================================================== */
@media (max-width: 1200px) {
  .sp-cta .btn { height: 44px; font-size: 16px; }
  .sp-cta .btn--icon { padding-left: 50px; }
  .sp-cta .btn--icon img { width: 28px; }

  .map-title { font-size: 26px; }

  .contact-cols { gap: 36px; }
  .sp-copy--lead { font-size: 17px; }
  .contact-address, .contact-line { font-size: 17px; }
  .cf-field label { font-size: 14px; }
  .cf-field input:not([type="radio"]), .cf-field select,
  .cf-field textarea, .cf-actions .btn { font-size: 17px; }
  .cf-field input:not([type="radio"]), .cf-field select, .cf-actions .btn { height: 48px; }
  .cf-field textarea { min-height: 170px; }
}
@media (max-width: 600px) {
  .sp-cta { gap: 12px; }
  .sp-cta .btn { width: 100%; }

  /* the phone crop of the map is a separate, tighter artwork, so it gets
     its own set of blink overlays */
  .map-section { padding-top: 44px; overflow-x: clip; }
  .map-title { font-size: 21px; letter-spacing: .06em; }
  .map-figure { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .map-blink--desk { display: none; }
  .map-blink--mob { display: block; }
  .map-blink { width: 14px; }
  .map-blink::after { border-width: 1.5px; }

  .contact-form { grid-template-columns: 1fr; }
  .sp-copy--lead { font-size: 16px; }
  .contact-address, .contact-line { font-size: 16px; }
  .cf-actions .btn { width: 100%; }

  /* one detail per line on a phone: the address is three lines tall and does
     not sit comfortably beside the phone number */
  .contact-details { row-gap: 14px; }
  .contact-details > * { flex: 1 0 100%; }
}

/* ==========================================================================
   Contact form — validation states
   The server decides what is valid; these are only the visual cues. Errors
   show per field (red border + message under the input) plus one banner above
   the form that takes keyboard focus, so the problem is announced immediately.
   ========================================================================== */
.cf-notice {
  font-family: var(--ssp);
  font-size: clamp(15px, .78vw, 20px);
  line-height: 1.5;
  border-radius: 6px;
  padding: clamp(12px, .9vw, 22px) clamp(14px, 1vw, 26px);
  margin: 0 0 clamp(16px, 1.25vw, 32px);
  border-left: 4px solid;
}
.cf-notice:focus { outline: 2px solid var(--blue); outline-offset: 3px; }
.cf-notice--success {
  background: #eef6ee;
  border-color: #2e7d32;
  color: #1e5b22;
}
.cf-notice--error {
  background: #fdeeed;
  border-color: var(--red);
  color: #9c211a;
}

.cf-req { color: var(--red); margin-left: 2px; }

.cf-field.has-error input:not([type="radio"]),
.cf-field.has-error select,
.cf-field.has-error textarea {
  border-color: var(--red);
  background: #fffafa;
}
.cf-field.has-error input:not([type="radio"]):focus,
.cf-field.has-error select:focus,
.cf-field.has-error textarea:focus { border-color: var(--red); }

.cf-error {
  display: block;
  font-family: var(--ssp);
  font-size: clamp(13px, .68vw, 16px);
  line-height: 1.4;
  color: #9c211a;
  margin-top: 6px;
}

.cf-legal {
  font-family: var(--ssp);
  font-size: clamp(12px, .62vw, 15px);
  line-height: 1.5;
  color: #6b6b6b;
  margin: clamp(10px, .7vw, 16px) 0 0;
}

/* The honeypot. Pulled out of the layout and out of the accessibility tree,
   but deliberately NOT display:none — some bots skip hidden inputs, and this
   is the one field we want them to fill in. */
.cf-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip link — lets keyboard users jump past the nav. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--blue);
  color: #fff;
  font-family: var(--ssp);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Visibility utilities
   The site has no CSS framework, so these are the hand-rolled equivalent of
   Bootstrap's d-none / d-md-block. They use this site's own breakpoints:

     mobile   <= 600px
     tablet   601px - 1200px
     desktop  >= 1201px

   Usage:  <img class="hide-mobile"  ...>   hidden on phones, shown elsewhere
           <img class="only-mobile"  ...>   shown ONLY on phones
           <img class="hide"         ...>   hidden everywhere

   "revert" hands the element back its natural display value, so the same
   class works on an <img> (inline), a <div> (block) or a <li> (list-item).
   If you need a specific display mode, add the matching --flex or --grid
   variant, e.g. class="only-desktop only-desktop--flex".
   ========================================================================== */
.hide { display: none !important; }

/* hide-* : visible by default, hidden at that size */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .hide-tablet { display: none !important; }
}
@media (min-width: 1201px) {
  .hide-desktop { display: none !important; }
}

/* only-* : hidden by default, visible only at that size */
.only-mobile,
.only-tablet,
.only-desktop { display: none !important; }

@media (max-width: 600px) {
  .only-mobile { display: revert !important; }
  .only-mobile--flex { display: flex !important; }
  .only-mobile--grid { display: grid !important; }
  .only-mobile--block { display: block !important; }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .only-tablet { display: revert !important; }
  .only-tablet--flex { display: flex !important; }
  .only-tablet--grid { display: grid !important; }
  .only-tablet--block { display: block !important; }
}
@media (min-width: 1201px) {
  .only-desktop { display: revert !important; }
  .only-desktop--flex { display: flex !important; }
  .only-desktop--grid { display: grid !important; }
  .only-desktop--block { display: block !important; }
}
.d-block {
    display: block !important;
}
.d-none {
    display: none !important;
}
@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    .d-md-block {
        display: block !important;
    }
    .feature {
      position: relative;
      aspect-ratio: 2560 / 900;
      overflow: hidden;
      background: var(--blue);
    }
}

/* ==========================================================================
   Drive KJS Canada — application form
   The same markup is drawn twice: inside the pop-up on every page, and as the
   page body on drive-canada.php. Everything below styles both, so the two can
   never look like different forms.

   Controls are sized in pixels rather than vw. The rest of the site scales its
   type up to a 2560 viewport, which is right for headings and wrong for a text
   box floating in a 900px dialog.
   ========================================================================== */
.drive-title {
  font-family: var(--ssp);
  font-weight: 700;
  font-size: clamp(24px, 1.5vw, 34px);
  line-height: 1.25;
  letter-spacing: .015em;
  color: var(--red-alt);
}
.drive-lede {
  font-family: var(--ssp);
  font-size: clamp(15px, .8vw, 18px);
  line-height: 1.6;
  color: #555;
  margin-top: 10px;
}
.drive-intro { margin-bottom: clamp(22px, 1.6vw, 34px); }

.drive-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
/* js/main.js hides the form once it has been sent. A class setting `display`
   outranks the browser's own [hidden] rule, so say it here as well. */
.drive-form[hidden] { display: none; }
.drive-form .cf-field input:not([type="radio"]),
.drive-form .cf-field select,
.drive-form .cf-field textarea { font-size: 16px; padding: 10px 14px; }
.drive-form .cf-field input:not([type="radio"]),
.drive-form .cf-field select { height: 46px; }
.drive-form .cf-field textarea { min-height: 110px; }
.drive-form .cf-actions { display: flex; flex-direction: column; }
.drive-form .cf-actions .btn {
  align-self: flex-start;
  height: 48px;
  padding-left: 34px;
  padding-right: 34px;
}
.drive-form .cf-legal { font-size: 13px; }
.drive-form .cf-error { font-size: 13px; }

/* the dropdown keeps the site's chevron instead of the platform's */
.drive-form .cf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23274787' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}

/* Yes / No screening questions: label on the left, answers on the right,
   both dropping onto their own line when the row runs out of room. */
.cf-choice {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}
/* A span rather than a <label>, so the contact form's label rule does not
   reach it. These are its values, kept in step deliberately. */
.cf-choice-label {
  font-family: var(--ssp);
  font-weight: 600;
  font-size: clamp(13px, .68vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  flex: 1 1 260px;
}
@media (max-width: 1200px) {
  .cf-choice-label { font-size: 14px; }
}
.cf-choice-opts { display: flex; align-items: center; gap: 22px; }
.cf-choice .cf-error { flex: 1 0 100%; margin-top: 0; }

.cf-field .cf-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: #444;
  cursor: pointer;
}
.cf-field .cf-radio input[type="radio"] {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* ==========================================================================
   Drive KJS Canada — the pop-up
   A native <dialog>, so the browser handles the top layer, the focus trap and
   the Esc key. Closing only hides it, which means a half-finished application
   is still there when it is reopened — that is also why there is no
   closedby="any": losing the form to a stray backdrop click costs a lead.
   ========================================================================== */
.drive-modal {
  width: min(900px, 100%);
  max-width: 100%;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .4);
  overflow: visible;
}
.drive-modal::backdrop { background: rgba(12, 12, 12, .62); }
.drive-modal__inner {
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(26px, 2.2vw, 46px);
  border-radius: 10px;
}
.drive-modal .drive-intro { padding-right: 46px; }

.drive-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f7;
  color: var(--blue);
  font-family: var(--ssp);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.drive-modal__close:hover { background: var(--red); color: #fff; }
.drive-modal__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.drive-modal .cf-notice { font-size: 15px; padding: 14px 16px; margin-bottom: 20px; }

/* while the dialog is open the page behind it stays put */
html.has-modal { overflow: hidden; }

/* a submit already in flight should not be sent twice */
.drive-form .btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ==========================================================================
   Drive KJS Canada — the standalone page (drive-canada.php)
   ========================================================================== */
.drive-page {
  width: min(900px, 90vw);
  margin: 0 auto;
}
/* On the other subpages the decorative truck tucks up under the body copy,
   which is why .sp-side carries a negative top margin (js/main.js nudges it
   clear of the .sp-heading). A form page has a submit button at the bottom
   and no .sp-heading, so the truck is given clear space instead of landing
   on top of it. */
.subpage-form .sp-side { margin-top: clamp(40px, 3vw, 80px); }
.drive-usa-note {
  font-family: var(--ssp);
  font-size: clamp(15px, .8vw, 18px);
  line-height: 1.6;
  color: #555;
  margin-top: clamp(26px, 2vw, 44px);
  padding-top: clamp(20px, 1.6vw, 32px);
  border-top: 1px solid var(--gray-sep);
}
.drive-usa-link { font-weight: 700; color: var(--blue); }
.drive-usa-link:hover { color: var(--red); }
.drive-usa-link::after { content: " \2197"; }

/* ==========================================================================
   Screen-reader-only text
   Off-screen rather than display:none, so assistive tech still reads it.
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  .drive-form { grid-template-columns: 1fr; }
  .drive-form .cf-actions .btn { align-self: stretch; width: 100%; }
}
@media (max-width: 600px) {
  /* a form this long is easier to fill in edge to edge on a phone */
  .drive-modal {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .drive-modal__inner { max-height: 100dvh; border-radius: 0; padding: 22px 16px 32px; }
  .drive-modal .drive-intro { padding-right: 42px; }
  .drive-title { font-size: 22px; }
  .drive-page { width: 100%; }
  .cf-choice-opts { gap: 26px; }
}