/* === CTA SECTION ===
   Shared component. Full-width textured-orange band (bg image). Left: "READY TO JOIN?"
   (white helvetica-bold 40px) + subtext. Center: white truck line-art (2 SVGs). Right:
   Apply Now (white pill, orange text) + Or Call (transparent, 2px white border). */
.cta {
  /* url() is resolved relative to this stylesheet (assets/css/), so step up to assets/images/ */
  background: url('../images/shared/cta-band.jpg') center center / cover no-repeat;
}
.cta-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 215px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-heading {
  font-family: var(--body-font);
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 56px;
}
.cta-sub {
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 21px;
  margin-top: 2px;
}
.cta-truck { flex-shrink: 0; line-height: 0; margin-left: 24px; margin-right: auto; transform: translateY(-12px); }
/* Only the wide hauler line-art is shown. The other SVG is a hidden variant in the
   original (Wix comp-m93c722r, visibility:hidden) — kept hidden here to match. */
.cta-truck .truck-top { display: none; }
.cta-truck .truck-bottom { display: block; width: 134px; height: auto; fill: #ffffff; }
.cta-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.cta-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 146px; padding: 14px 22px;
  background: #ffffff; color: var(--orange);
  border: 2px solid #ffffff;
  font-family: var(--body-font); font-size: 14px; font-weight: 700; letter-spacing: 1.4px;
  border-radius: 25px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.cta-apply svg { width: 13px; height: 13px; fill: currentColor; }
/* hover: white fill → transparent, text → white (white outline on the band) */
.cta-apply:hover { background: transparent; color: #ffffff; }
/* chevron turns BLACK on hover in the original (text goes white, arrow goes black) */
.cta-apply:hover svg { fill: #000000; }
.cta-call {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 146px; padding: 16px 14px;
  background: transparent; color: #ffffff;
  border: 2px solid #ffffff;
  font-family: var(--body-font); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border-radius: 25px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
/* hover: fills white, text → black (matches original) */
.cta-call:hover { background: #ffffff; color: #000000; }

/* --- CTA responsive --- */
@media (max-width: 900px) {
  /* Comfortable padding top and bottom so the band has room to breathe and doesn't
     butt up against the footer below. (A previous version trimmed the bottom to ~8px
     to keep the heading below the fixed header at absolute max-scroll, but that made
     the CTA look cramped on every visit for a rare edge case — the heading is seen in
     full while scrolling through, so breathing room wins.) */
  .cta-inner { flex-direction: column; text-align: center; gap: 12px; padding: 44px 24px 44px; }
  .cta-truck { display: none; }
}
@media (max-width: 480px) {
  .cta-heading { font-size: 38px; }
  /* Stacked buttons inherit the desktop 7px gap (tuned for two pills sitting
     side by side) which reads as cramped once they stack vertically — give
     them proper breathing room between taps. */
  .cta-actions { flex-direction: column; width: 100%; gap: 14px; }
  .cta-apply, .cta-call { width: 100%; }
  .cta-call { font-size: 14px; }
}