/* =============================================
   Scroll-triggered header search bar
   ============================================= */
.headerhide {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
}
.headerhide.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   Header search form
   ============================================= */
.search-city-wrap {
  width: 250px;
}
.search-category-wrap {
  min-width: 250px;
}
.suggestions-dropdown {
  top: 100%;
  z-index: 999;
}
.searchBarBtn {
  border: none;
  background: none;
}

/* =============================================
   Mobile location select
   ============================================= */
.mobile-location-select {
  width: 303px;
}

/* =============================================
   Mega Menu
   ============================================= */
.mega-menu-li {
  position: static !important;
}
.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 3px solid #fec201;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 24px 30px;
  z-index: 999;
  width: 100%;
}
.mega-menu.mega-open {
  display: flex;
}
.mega-menu .mega-col {
  flex: 1;
  padding: 0 15px;
  border-right: 1px solid #f0f0f0;
}
.mega-menu .mega-col:last-child {
  border-right: none;
}
.mega-menu .mega-col h6 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #041c2f;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fec201;
}
.mega-menu .mega-col a {
  display: block;
  font-size: 13px;
  color: #444;
  padding: 5px 0;
  text-decoration: none;
  transition: color 0.2s;
}
.mega-menu .mega-col a:hover {
  color: #fec201;
  padding-left: 6px;
}

/* ================================================================
   Contact Page
   ================================================================ */

/* ── Page header ── */
.contact-hero {
  background: linear-gradient(135deg, #0d3b6e 0%, #1a6fbf 100%);
  color: #fff;
  padding: 52px 0 40px;
  text-align: center;
}
.contact-hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
.contact-hero p  { font-size: 1rem; opacity: .88; max-width: 560px; margin: 0 auto; }

/* ── Sticky mobile CTA bar ── */
.contact-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1050;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 -3px 16px rgba(0,0,0,.14);
  gap: 10px;
}
.contact-sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: #fff;
}
.cta-call      { background: #1a6fbf; }
.cta-whatsapp  { background: #25d366; }
.cta-call:hover     { background: #155fa0; color: #fff; }
.cta-whatsapp:hover { background: #1ebe5d; color: #fff; }
@media (max-width: 767px) {
  .contact-sticky-cta { display: flex; }
  body { padding-bottom: 70px; }
}

/* ── Layout ── */
.contact-section { padding: 52px 0 64px; background: #f6f8fb; }

/* ── Form card ── */
.contact-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  padding: 36px 32px;
}
.contact-form-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0d3b6e;
  margin-bottom: 6px;
}
.contact-form-card p {
  color: #6b7280;
  font-size: .92rem;
  margin-bottom: 24px;
}
.contact-form-card .form-group {
  position: relative;
  margin-bottom: 18px;
}
.contact-form-card .form-group .field-icon {
  position: absolute;
  top: 50%; left: 13px;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  pointer-events: none;
}
.contact-form-card .form-group.textarea-group .field-icon { top: 14px; transform: none; }
.contact-form-card .form-control {
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  padding: 11px 12px 11px 36px;
  font-size: .93rem;
  color: #1f2937;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.contact-form-card .form-control:focus {
  border-color: #1a6fbf;
  box-shadow: 0 0 0 3px rgba(26,111,191,.12);
  outline: none;
}
.contact-form-card textarea.form-control { resize: vertical; min-height: 130px; }
.btn-submit {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #1a6fbf, #0d3b6e);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  letter-spacing: .3px;
}
.btn-submit:hover  { opacity: .92; }
.btn-submit:active { transform: scale(.98); }

/* ── Contact card ── */
.contact-info-card {
  background: linear-gradient(160deg, #0d3b6e 0%, #1a6fbf 100%);
  border-radius: 16px;
  padding: 34px 28px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(13,59,110,.28);
  position: sticky;
  top: 90px;
}
.contact-info-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.contact-info-card .subtitle {
  font-size: .85rem;
  opacity: .75;
  margin-bottom: 28px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 20px;
  text-decoration: none;
  color: #fff;
  padding: 13px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  transition: background .2s;
}
.contact-info-item:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.contact-info-item.non-link { cursor: default; }
.contact-info-item.non-link:hover { background: rgba(255,255,255,.1); }
.ci-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ci-body { display: flex; flex-direction: column; }
.ci-label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }
.ci-value { font-size: .95rem; font-weight: 600; line-height: 1.4; }
.ci-badge {
  display: inline-block;
  background: #25d366;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
.contact-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: 20px 0;
}
.contact-hours {
  font-size: .85rem;
  opacity: .82;
  line-height: 1.7;
  padding: 0 2px;
}
.contact-hours strong { display: block; font-size: .9rem; opacity: 1; margin-bottom: 4px; }
.contact-socials { display: flex; gap: 10px; margin-top: 20px; }
.contact-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s;
}
.contact-socials a:hover { background: rgba(255,255,255,.3); color: #fff; }
#contactFeedback { display: none; margin-top: 14px; border-radius: 9px; }

/* =============================================
   Main header nav
   ============================================= */
header {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  font-family: "Open Sans", Roboto, sans-serif;
  transition: padding .25s ease, box-shadow .25s ease;
}
header.is-scrolled {
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(13, 35, 64, .08);
}
header .logo img {
  width: 210px;
  height: auto;
  transition: width .25s ease;
}
header.is-scrolled .logo img { width: 180px; }
header .main-nav {
  align-items: center;
  gap: 0;
}
header .main-nav li { margin: 0; }
header .main-nav li + li { margin-left: 4px; }
header .main-nav .nav-link-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #2a3854;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
header .main-nav .nav-link-main:hover,
header .main-nav .mega-menu-li:hover > .nav-link-main {
  background: #f3f6fa;
  color: #0d1b3e;
}
header .main-nav .nav-link-main.active { color: #0d1b3e; }
header .main-nav .nav-link-main::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: #f5c343;
  transform: scaleX(0);
  transition: transform .2s ease;
}
header .main-nav .nav-link-main.active::after { transform: scaleX(1); }
header .main-nav .nav-caret {
  font-size: 12px;
  -webkit-text-stroke: 1px;
  transition: transform .2s ease;
}
header .main-nav .mega-menu-li:hover .nav-caret { transform: rotate(180deg); }

/* Divider between the links and the action buttons */
header .main-nav li.nav-btn-li { margin-left: 10px; }
header .main-nav li.d-md-none + li.nav-btn-li {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #e6ebf2;
}
header .main-nav .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
header .main-nav .nav-btn i { font-size: 17px; }
header .main-nav .nav-btn:hover { transform: translateY(-1px); }
header .main-nav .nav-btn-yellow {
  background: #f5c343;
  color: #0d1b3e !important;
  box-shadow: 0 6px 16px rgba(245, 195, 67, .35);
}
header .main-nav .nav-btn-yellow i { color: #0d1b3e; }
header .main-nav .nav-btn-yellow:hover {
  background: #f0b92b;
  color: #0d1b3e !important;
  box-shadow: 0 8px 20px rgba(245, 195, 67, .45);
}
header .main-nav .nav-btn-navy {
  background: #0d2340;
  color: #fff !important;
}
header .main-nav .nav-btn-navy:hover {
  background: #17345c;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(13, 35, 64, .25);
}
header .main-nav li:last-child { margin-left: 12px; }
header .main-nav .hum-menu2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
header .main-nav .hum-menu2:hover { background: #f3f6fa; border-color: #cfd7e3; }
header .main-nav .hum-menu2 i {
  font-size: 26px;
  color: #0d1b3e;
  line-height: 1;
  -webkit-text-stroke: .4px;
}

/* Fit everything on one row on smaller desktops */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  header .logo img { width: 190px; }
  header .main-nav .nav-link-main { padding: 10px 12px; font-size: 15px; }
  header .main-nav .nav-link-main::after { left: 12px; right: 12px; }
  header .main-nav li.d-md-none + li.nav-btn-li { margin-left: 14px; padding-left: 14px; }
  header .main-nav .nav-btn { padding: 0 16px; font-size: 14.5px; }
}
@media screen and (min-width: 997px) and (max-width: 1199px) {
  header { padding: 10px 0; }
  header .logo img, header.is-scrolled .logo img { width: 150px; }
  header .main-nav li + li { margin-left: 0; }
  header .main-nav .nav-link-main { padding: 8px 9px; font-size: 14px; }
  header .main-nav .nav-link-main::after { left: 9px; right: 9px; }
  header .main-nav li.nav-btn-li { margin-left: 6px; }
  header .main-nav li.d-md-none + li.nav-btn-li { margin-left: 10px; padding-left: 10px; }
  header .main-nav .nav-btn { height: 40px; padding: 0 12px; font-size: 13px; gap: 6px; }
  header .main-nav .nav-btn i { font-size: 14px; }
  header .main-nav li:last-child { margin-left: 8px; }
  header .main-nav .hum-menu2 { width: 40px; height: 40px; }
  header .main-nav .hum-menu2 i { font-size: 22px; }
}

/* Mobile slide-out menu */
@media screen and (max-width: 996px) {
  header { padding: 12px 0; }
  header .logo img { width: 180px; }
  header .main-nav {
    align-items: stretch;
  }
  header .main-nav li,
  header .main-nav li + li,
  header .main-nav li.nav-btn-li,
  header .main-nav li.d-md-none + li.nav-btn-li,
  header .main-nav li:last-child {
    margin: 6px 0;
  }
  header .main-nav li.d-md-none + li.nav-btn-li { padding-left: 0; border-left: 0; }
  header.is-scrolled .logo img { width: 180px; }
  header .main-nav .nav-link-main {
    padding: 6px 0;
    font-size: 17px;
  }
  header .main-nav .nav-link-main::after {
    display: none;
  }
  header .main-nav .nav-link-main.active {
    color: #d9a520;
  }
  header .main-nav .nav-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================
   Home hero + stats
   ============================================= */
@media screen and (min-width: 1400px) {
  .topbar > .container,
  header > .container,
  .home-hero > .container,
  .hd-results > .container,
  .home-banners { max-width: 1440px; }
}

.home-hero {
  position: relative;
  padding: 88px 0 48px;
  font-family: "Open Sans", Roboto, sans-serif;
  background:
    radial-gradient(900px 420px at 0% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #e6eef7 0%, #eef3f8 55%, #f5f7fb 100%);
}
.home-hero > .container { position: relative; }
.home-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  overflow: hidden; /* clipped here, not on .home-hero, so the city list can overflow the hero */
  /* fade the left and bottom edges into the background (no hard photo edge) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(180deg, #000 70%, transparent 100%);
          mask-composite: intersect;
}
.home-hero-photo img {
  display: block;
  width: auto;
  height: 100%;
}
.home-hero-content { position: relative; z-index: 4; max-width: 1010px; } /* above .hd-results so the city list overlaps it */
.home-hero-bar {
  display: block;
  width: 64px;
  height: 6px;
  margin-bottom: 24px;
  border-radius: 3px;
  background: #f5c343;
}
.home-hero-title {
  max-width: 720px;
  margin: 0 0 22px;
  font-family: inherit;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1px;
  color: #0d1b3e;
}
.home-hero-sub {
  margin: 0 0 48px;
  text-align: left !important; /* overrides mobile p { justify !important } in transopedia.min.css */
  font-size: 26px;
  font-weight: 400;
  color: #3d4b66;
}

.hero-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 8px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
}
.hero-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
  height: 72px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}
.hero-field:first-child { flex-grow: 1.2; }
.hero-field:hover { background: #f5f7fb; }
.hero-field:focus-within { background: #fff8e1; }
/* thin dividers between fields, hidden next to a highlighted field */
.hero-field ~ .hero-field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #e1e7ef;
  transition: opacity .2s ease;
}
.hero-field:hover::before,
.hero-field:focus-within::before,
.hero-field:hover + * + .hero-field::before,
.hero-field:hover + .hero-field::before,
.hero-field:focus-within + .hero-field::before,
.hero-field:focus-within + * + .hero-field::before { opacity: 0; }
.hero-field-icon { width: 26px; font-size: 22px; text-align: center; color: #0d2340; flex-shrink: 0; }
svg.hero-field-icon { height: 24px; }
.hero-field-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hero-search .hero-field-label {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.3;
  font-size: 15px;
  font-weight: 600;
  color: #0d1b3e;
  cursor: pointer;
}
.hero-field-label em { font-style: normal; font-weight: 400; color: #7a8599; }
.hero-search .hero-field input,
.hero-search .hero-field select {
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  line-height: 22px;
  background: transparent;
  font-size: 15px;
  color: #0d1b3e;
  text-overflow: ellipsis;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.hero-field input { cursor: text; }
.hero-field input::placeholder { color: #8a94a6; opacity: 1; }
.hero-field select option { color: #0d1b3e; }
.hero-field-caret {
  font-size: 15px;
  color: #8a94a6;
  -webkit-text-stroke: .6px;
  pointer-events: none;
}
.hero-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13, 35, 64, .12);
}
.hero-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 190px;
  margin-left: 8px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  background: #0d2340;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transition: background-color .2s ease;
}
.hero-search-btn i { font-size: 22px; -webkit-text-stroke: .5px; }
.hero-search-btn:hover { background: #17345c; }

@media screen and (max-width: 1399px) {
  .home-hero-title { font-size: 50px; }
  .hero-search-btn { min-width: 170px; font-size: 17px; }
}
@media screen and (max-width: 1199px) {
  .home-hero { padding: 70px 0 84px; }
  .home-hero-title { max-width: 600px; font-size: 44px; }
  .home-hero-sub { max-width: 560px; font-size: 22px; margin-bottom: 36px; }
  .hero-search { flex-wrap: wrap; gap: 8px; max-width: 760px; }
  .hero-field, .hero-field:first-child { flex: 1 1 calc(50% - 4px); background: #f5f7fb; }
  .hero-field ~ .hero-field::before { display: none; }
  .hero-search-btn { flex: 1 1 calc(50% - 4px); height: 72px; margin-left: 0; }
}
@media screen and (max-width: 991px) {
  .home-hero { padding: 48px 0 56px; }
  .home-hero-photo { opacity: .35; }
  .home-hero-title { font-size: 38px; }
  .home-hero-sub { font-size: 20px; }
}
@media screen and (max-width: 767px) {
  .home-hero { padding: 32px 0 36px; }
  .home-hero-photo { opacity: .15; }
  .home-hero-bar { width: 48px; height: 5px; margin-bottom: 16px; }
  .home-hero-title { font-size: 30px; letter-spacing: -.5px; margin-bottom: 12px; }
  .home-hero-sub { font-size: 17px; margin-bottom: 24px; }
  .hero-search { flex-direction: column; gap: 8px; padding: 8px; }
  .hero-field, .hero-field:first-child, .hero-search-btn { flex: 0 0 auto; width: 100%; height: 64px; }
  .hero-search-btn { height: 54px; }
}

/* Hero search results */
.hd-results {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  padding: 24px 24px 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(13, 35, 64, .14);
  animation: hdReveal .25s ease;
}
@keyframes hdReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.home-hero.has-results { padding-bottom: 48px; }
.hd-results-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1f4f8;
  color: #3d4b66;
  font-size: 14px;
  transition: background-color .2s ease;
}
.hd-results-close:hover { background: #e2e7ee; }
.hd-results .hd-results-head { padding-right: 44px; }
.hd-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.hd-results-title {
  margin: 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  color: #0d1b3e;
}
.hd-results-sub { margin: 4px 0 0; font-size: 15px; color: #5a6780; text-align: left !important; }
.hd-results-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 8px;
  background: #0d2340;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease;
}
.hd-results-all:hover { background: #17345c; color: #fff; }
.hd-results-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff8e3;
  color: #7a5a00;
  font-size: 14px;
  text-align: left !important;
}
.hd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(13, 35, 64, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* thin brand strip along the top edge */
.hd-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f5c343 0%, #f0a922 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.hd-card:hover { transform: translateY(-4px); border-color: #dbe2ec; box-shadow: 0 16px 34px rgba(13, 35, 64, .13); }
.hd-card:hover::before { opacity: 1; }

.hd-card-head { display: flex; align-items: center; gap: 12px; }
.hd-card-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #16345e 0%, #0d2340 100%);
  color: #f5c343;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 6px 14px rgba(13, 35, 64, .22);
}
.hd-card-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hd-card-id { flex: 1; min-width: 0; }
.hd-card-id h3 {
  margin: 0 0 3px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #0d1b3e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd-card-type {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #5a6780;
}
.hd-card-type i { margin-right: 4px; color: #0d2340; font-size: 12px; }
.hd-avail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e8f7ee;
  color: #17803a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.hd-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22b35e;
  box-shadow: 0 0 0 3px rgba(34, 179, 94, .2);
}

.hd-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}
.hd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.hd-badge-verified { background: #e6f6ec; color: #17803a; }
/* Transopedia ID chip: click to copy */
.hd-tpid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 9px 3px 4px;
  border: 1px dashed #c9d3e0;
  border-radius: 8px;
  background: #f7f9fc;
  color: #0d1b3e;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.hd-tpid:hover { border-color: #f5c343; background: #fffaeb; }
.hd-tpid-label {
  padding: 1px 6px;
  border-radius: 5px;
  background: #0d2340;
  color: #f5c343;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}
.hd-tpid-value {
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-tpid i { color: #8a94a6; font-size: 12px; }
.hd-tpid.is-copied { border-color: #22b35e; background: #e8f7ee; }
.hd-tpid.is-copied i { color: #17803a; }

.hd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-bottom: 14px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fafbfd;
}
.hd-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 10px;
  text-align: center;
}
.hd-stat + .hd-stat { border-left: 1px solid #edf0f4; }
.hd-stat strong {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: #0d1b3e;
}
.hd-stat span { font-size: 11px; font-weight: 600; color: #8a94a6; white-space: nowrap; }

.hd-card-facts {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: #3d4b66;
}
.hd-card-facts li { display: flex; align-items: flex-start; gap: 9px; margin: 0; }
.hd-card-facts i { width: 16px; margin-top: 1px; text-align: center; color: #d99a00; font-size: 14px; }
.hd-card-actions { display: flex; gap: 8px; margin-top: auto; }
.hd-card-hire,
.hd-card-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hd-card-hire { flex: 1; background: #f5c343; color: #0d1b3e; }
.hd-card-hire:hover { background: #edb625; color: #0d1b3e; }
.hd-card-view { border: 1px solid #cfd7e3; color: #0d2340; }
.hd-card-view:hover { border-color: #0d2340; background: #0d2340; color: #fff; }
.hd-card-skeleton {
  min-height: 268px;
  background: linear-gradient(90deg, #f1f4f8 25%, #e7ecf3 37%, #f1f4f8 63%);
  background-size: 400% 100%;
  animation: hdShimmer 1.2s ease infinite;
  box-shadow: none;
}
@keyframes hdShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.hd-results-empty {
  padding: 36px 20px;
  border: 1px dashed #cfd7e3;
  border-radius: 14px;
  text-align: center;
  color: #5a6780;
}
.hd-results-empty i { font-size: 34px; color: #9aa6b8; }
.hd-results-empty p { margin: 8px 0 16px; text-align: center !important; }
.hd-results-empty .hd-card-hire { display: inline-flex; padding: 0 24px; }
.hero-search-btn.is-loading { opacity: .75; cursor: progress; }

@media screen and (max-width: 991px) {
  .hd-cards { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .hd-results { margin-top: 14px; padding: 18px 14px 16px; }
  .hd-results-close { top: 10px; right: 10px; }
  .hd-results .hd-results-head { padding-right: 0; }
  .hd-results-title { padding-right: 40px; }
  .home-hero.has-results { padding-bottom: 28px; }
  .hd-results-head { flex-direction: column; align-items: flex-start; }
  .hd-results-title { font-size: 23px; }
  .hd-results-all { width: 100%; justify-content: center; }
  .hd-cards { grid-template-columns: 1fr; gap: 14px; }
}

/* Hero comboboxes: vehicle, location, route */
.hero-field-caret { transition: transform .2s ease; }
.hero-combo.is-open { background: #fff8e1; }
.hero-combo.is-open .hero-field-caret { transform: rotate(180deg); }
.hero-combo-clear {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: #a3adbd;
  font-size: 15px;
  line-height: 1;
}
.hero-combo-clear[hidden] { display: none; }
.hero-combo-clear:hover { color: #3d4b66; }
.hero-suggestions {
  min-width: 300px;
  max-height: 340px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(13, 35, 64, .16);
  cursor: default;
}
.hero-suggestions-group {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8a94a6;
}
.hero-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.hero-option:hover,
.hero-option.is-active { background: #fdf6e1; }
.hero-option > i { color: #d99a00; font-size: 15px; }
.hero-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hero-option-name { font-size: 14.5px; font-weight: 600; color: #0d1b3e; }
.hero-option-sub { font-size: 12px; color: #7a8599; }
.hero-option-count {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f1f4f8;
  font-size: 11.5px;
  font-weight: 600;
  color: #5a6780;
}
.hero-suggestions-empty { padding: 12px 10px; font-size: 13.5px; color: #5a6780; }

@media screen and (max-width: 767px) {
  .hero-suggestions { min-width: 0; max-height: 280px; }
}

/* =============================================
   Hero trust row + bottom fade into Services
   ============================================= */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #24324f;
}
.hero-trust i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(13, 35, 64, .1);
  color: #d99a00;
  font-size: 13px;
}

/* =============================================
   Services: slider + category tiles
   ============================================= */
.home-explore {
  padding: 20px 0 72px;
  background: #f5f7fb;
  font-family: "Open Sans", Roboto, sans-serif;
}
.home-explore-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #b07d00;
}
.home-eyebrow::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #f5c343;
}
.home-explore-title {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #0d1b3e;
}
.home-explore-sub {
  max-width: 620px;
  margin: 0;
  font-size: 17px;
  color: #4a5875;
  text-align: left !important;
}
.home-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 48px;
  padding: 0 22px;
  border: 1.5px solid #0d2340;
  border-radius: 8px;
  color: #0d2340;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.home-explore-link:hover { background: #0d2340; color: #fff; }
.home-explore-link i { transition: transform .2s ease; }
.home-explore-link:hover i { transform: translateX(3px); }

@media screen and (max-width: 1199px) {
  .home-explore-title { font-size: 31px; }
}
@media screen and (max-width: 767px) {
  .hero-trust { gap: 8px 16px; margin-top: 16px; }
  .hero-trust li { font-size: 13px; }
  .hero-trust i { width: 22px; height: 22px; font-size: 11px; }
  .home-explore { padding: 4px 0 48px; }
  .home-explore-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
  .home-explore-title { font-size: 25px; }
  .home-explore-sub { font-size: 15px; }
  .home-explore-link { width: 100%; justify-content: center; }
}

.home-explore-sub { max-width: 700px; }

/* =============================================
   Get started: hire drivers / register as driver
   ============================================= */
.home-join {
  padding: 72px 0;
  background: #fff;
  font-family: "Open Sans", Roboto, sans-serif;
}
/* left-aligned like the other home section heads */
.home-join-head {
  max-width: 860px;
  margin: 0 0 36px;
  text-align: left;
}
.home-join-title {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #0d1b3e;
}
.home-join-sub {
  max-width: 640px;
  margin: 0;
  font-size: 17px;
  color: #4a5875;
  text-align: left !important;
}
.home-join-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.join-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 36px 34px 34px;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(13, 35, 64, .12);
  isolation: isolate;
}
.join-hire {
  background: linear-gradient(135deg, #0d2340 0%, #0b2f57 100%);
  color: rgba(255, 255, 255, .86);
}
.join-driver {
  background: linear-gradient(135deg, #fcd34d 0%, #f5c343 100%);
  color: #2a3550;
}
.join-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 26px;
}
.join-hire .join-icon { background: rgba(245, 195, 67, .16); color: #f5c343; }
.join-driver .join-icon { background: rgba(13, 35, 64, .1); color: #0d2340; }
.join-tag {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.join-hire .join-tag { color: #f5c343; }
.join-driver .join-tag { color: #6b4e00; }
.join-card h3 {
  margin: 0 0 18px;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
}
.join-hire h3 { color: #fff; }
.join-driver h3 { color: #0d1b3e; }
.join-points {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.join-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
}
.join-points i { flex-shrink: 0; margin-top: 2px; font-size: 17px; }
.join-hire .join-points i { color: #f5c343; }
.join-driver .join-points i { color: #0d2340; }
.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.join-btn .bi-arrow-right { transition: transform .2s ease; }
.join-btn:hover .bi-arrow-right { transform: translateX(3px); }
.join-btn-primary { background: #f5c343; color: #0d1b3e; }
.join-btn-primary:hover { background: #ffd666; color: #0d1b3e; }
.join-btn-ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.join-btn-ghost:hover { border-color: #fff; background: #fff; color: #0d2340; }
.join-btn-dark { background: #0d2340; color: #fff; }
.join-btn-dark:hover { background: #163a66; color: #fff; }
.join-btn-ghost-dark { border-color: rgba(13, 35, 64, .45); color: #0d2340; }
.join-btn-ghost-dark:hover { border-color: #0d2340; background: #0d2340; color: #fff; }
/* large faint watermark icon in the corner */
.join-mark {
  position: absolute;
  right: -18px;
  bottom: -34px;
  z-index: -1;
  font-size: 190px;
  line-height: 1;
  pointer-events: none;
}
.join-hire .join-mark { color: rgba(255, 255, 255, .05); }
.join-driver .join-mark { color: rgba(13, 35, 64, .07); }

@media screen and (max-width: 1199px) {
  .home-join-title { font-size: 31px; }
  .join-card { padding: 30px 26px 28px; }
  .join-card h3 { font-size: 25px; }
}
@media screen and (max-width: 991px) {
  .home-join-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .home-join { padding: 48px 0; }
  .home-join-head { margin-bottom: 24px; }
  .home-join-title { font-size: 25px; }
  .home-join-sub { font-size: 15px; }
  .join-card { padding: 26px 20px 24px; border-radius: 14px; }
  .join-card h3 { font-size: 22px; }
  .join-points li { font-size: 14.5px; }
  .join-actions { flex-direction: column; }
  .join-btn { width: 100%; }
  .join-mark { font-size: 140px; }
}

/* =============================================
   Top bar: contacts + social icons
   ============================================= */
.topbar {
  position: relative;
  background: linear-gradient(90deg, #06182b 0%, #0b2140 55%, #06182b 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: "Open Sans", Roboto, sans-serif;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 50px;
}
.topbar-contacts {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar-contacts li { display: flex; align-items: center; margin: 0; }
.topbar-contacts li + li::before {
  content: "";
  width: 1px;
  height: 18px;
  margin: 0 18px;
  background: rgba(255, 255, 255, .14);
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .88);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.topbar-link:hover { color: #f5c343; }
.topbar-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(245, 195, 67, .14);
  color: #f5c343;
  font-size: 13px;
  transition: background-color .2s ease, color .2s ease;
}
.topbar-link:hover .topbar-ico { background: #f5c343; color: #0d1b3e; }
.topbar-whatsapp .topbar-ico { background: rgba(37, 211, 102, .16); color: #25d366; font-size: 14px; }
.topbar-whatsapp:hover { color: #25d366; }
.topbar-whatsapp:hover .topbar-ico { background: #25d366; color: #fff; }
.topbar-badge {
  padding: 2px 8px;
  border-radius: 20px;
  background: #1fa45a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
}

.topbar-social { display: flex; align-items: center; gap: 8px; }
.topbar-follow {
  margin-right: 6px;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
}
.topbar-soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.topbar-soc:hover { transform: translateY(-2px); border-color: transparent; color: #fff; }
.soc-facebook:hover { background: #1877f2; }
.soc-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc-youtube:hover { background: #ff0000; }
.soc-x:hover { background: #000; border-color: rgba(255, 255, 255, .3); }
.soc-linkedin:hover { background: #0a66c2; }

@media screen and (max-width: 1199px) {
  .topbar-secondary, .topbar-follow { display: none !important; }
  .topbar-contacts li + li::before { margin: 0 12px; }
  .topbar-link { font-size: 13.5px; }
}
@media screen and (max-width: 991px) {
  .topbar-email { display: none; }
  .topbar-soc { width: 30px; height: 30px; font-size: 13px; }
}

/* =============================================
   Drawer menu (hamburger) — overrides legacy .desktop-menu
   ============================================= */
.desktop-menu {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  z-index: 1200;
  width: 100%;
  height: 100vh;
  padding: 0;
  background: rgba(6, 24, 43, .5);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  font-family: "Open Sans", Roboto, sans-serif;
}
.desktop-menu.active { right: 0; opacity: 1; visibility: visible; }
html.dm-open { overflow: hidden; }
/* the drawer sits inside the sticky header, so lift the header above floating widgets while open */
html.dm-open header { z-index: 100000; }
.dm-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(820px, 94vw);
  background: #fff;
  box-shadow: -20px 0 50px rgba(6, 24, 43, .25);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto;
}
.desktop-menu.active .dm-panel { transform: none; }
.dm-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
}
.dm-head img { width: 170px; height: auto; }
.dm-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e1e7ef;
  border-radius: 50%;
  background: #fff;
  color: #0d1b3e;
  font-size: 16px;
  transition: background-color .2s ease, transform .2s ease;
}
.dm-close:hover { background: #f3f6fa; transform: rotate(90deg); }

.dm-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 24px 32px 8px;
}
.dm-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #f8fafc;
  color: #0d1b3e;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.dm-action:hover { transform: translateY(-2px); border-color: #cfd7e3; background: #fff; color: #0d1b3e; }
.dm-action strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.dm-action small { display: block; margin-top: 2px; font-size: 12px; color: #6a768c; }
.dm-action-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #0d2340;
  color: #f5c343;
  font-size: 18px;
}
.dm-action-yellow { border-color: #f5d77e; background: #fff8e1; }
.dm-action-yellow:hover { border-color: #f5c343; background: #fff4d0; }
.dm-action-yellow .dm-action-ico { background: #f5c343; color: #0d1b3e; }

.dm-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
  padding: 16px 32px 24px;
}
.dm-group { padding: 12px 0; }
.dm-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0f4;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a94a6;
}
.dm-group-title i { color: #d99a00; font-size: 14px; }
.dm-link {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #24324f;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, padding .15s ease;
}
.dm-link::after {
  content: "\F285"; /* bootstrap-icons chevron-right */
  font-family: "bootstrap-icons";
  margin-left: auto;
  font-size: 12px;
  color: #b4bdcb;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.dm-link:hover { background: #f3f6fa; color: #0d1b3e; }
.dm-link:hover::after { opacity: 1; transform: none; }
.dm-link.active { background: #fff8e1; color: #0d1b3e; font-weight: 700; }
.dm-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: #f5c343;
}

.dm-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding: 18px 32px;
  border-top: 1px solid #edf0f4;
  background: #f8fafc;
}
.dm-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  background: #fff;
  color: #24324f;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.dm-contact a i { color: #d99a00; }
.dm-contact a:hover { border-color: #0d2340; color: #0d1b3e; }
.dm-contact .dm-whatsapp i { color: #25d366; }

@media screen and (max-width: 767px) {
  .dm-panel { width: 100vw; }
  .dm-head { padding: 14px 18px; }
  .dm-head img { width: 140px; }
  .dm-actions { grid-template-columns: 1fr; padding: 16px 18px 4px; gap: 10px; }
  .dm-groups { grid-template-columns: 1fr; padding: 8px 18px 16px; }
  .dm-contact { padding: 14px 18px; }
}

/* =============================================
   Service tiles
   ============================================= */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.svc-tile {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #0d2340;
  color: #fff;
  font-family: "Open Sans", Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(13, 35, 64, .14);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.svc-tile:hover { color: #fff; }
.svc-tile:focus-visible { outline: 3px solid #f5c343; outline-offset: 3px; }
.svc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
/* dark fade so the text on the photo always reads */
.svc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 18, 36, .35) 0%, rgba(6, 18, 36, 0) 22%),
    linear-gradient(180deg, rgba(6, 18, 36, 0) 38%, rgba(6, 18, 36, .6) 62%, rgba(6, 18, 36, .94) 100%);
  transition: opacity .5s ease;
  pointer-events: none;
}

/* glass icon chip, top-left */
.svc-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  font-size: 19px;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.svc-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 18px 18px;
}
.svc-title {
  position: relative;
  padding-top: 12px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.1px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
/* yellow accent line that stretches on hover */
.svc-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: #f5c343;
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
.svc-desc {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 13px;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* Coming Soon teaser cards */
.svc-tile.is-soon {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(245, 195, 67, .28) 0%, rgba(245, 195, 67, 0) 60%),
    linear-gradient(165deg, #1a3a6b 0%, #0b1b33 100%);
}
.svc-tile.is-soon::after {
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
/* a "Coming Soon" tile with a photo keeps the normal dark fade so its text reads */
.svc-tile.is-soon.has-img::after {
  background:
    linear-gradient(180deg, rgba(6, 18, 36, .35) 0%, rgba(6, 18, 36, 0) 22%),
    linear-gradient(180deg, rgba(6, 18, 36, 0) 38%, rgba(6, 18, 36, .6) 62%, rgba(6, 18, 36, .94) 100%);
  -webkit-mask-image: none;
          mask-image: none;
}
.svc-mark {
  position: absolute;
  top: 26%;
  left: 50%;
  z-index: 1;
  font-size: 118px;
  line-height: 1;
  color: rgba(255, 255, 255, .1);
  transform: translateX(-50%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), color .5s ease;
}
.svc-tile.is-soon .svc-icon { background: rgba(245, 195, 67, .16); border-color: rgba(245, 195, 67, .45); color: #f5c343; }
.svc-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 11px;
  border: 1px solid rgba(245, 195, 67, .5);
  border-radius: 999px;
  background: rgba(245, 195, 67, .12);
  color: #f5c343;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Hover / keyboard focus */
@media (hover: hover) {
  .svc-tile:hover { transform: translateY(-8px); box-shadow: 0 26px 48px rgba(13, 35, 64, .28); }
  .svc-tile.is-soon:hover { transform: translateY(-4px); }
}
.svc-tile:hover .svc-img,
.svc-tile:focus-visible .svc-img { transform: scale(1.08); }
.svc-tile:hover .svc-icon,
.svc-tile:focus-visible .svc-icon { background: #f5c343; border-color: #f5c343; color: #0d1b3e; transform: rotate(-8deg) scale(1.06); }
.svc-tile:hover .svc-title::before,
.svc-tile:focus-visible .svc-title::before { width: 56px; }
.svc-tile:hover .svc-arrow,
.svc-tile:focus-visible .svc-arrow { background: #f5c343; border-color: #f5c343; color: #0d1b3e; transform: translateX(4px); }
.svc-tile.is-soon:hover .svc-mark { transform: translateX(-50%) scale(1.08) rotate(-4deg); color: rgba(255, 255, 255, .14); }

@media (prefers-reduced-motion: reduce) {
  .svc-tile, .svc-img, .svc-icon, .svc-title::before, .svc-arrow, .svc-mark { transition: none !important; }
}

@media screen and (max-width: 1399px) {
  .svc-grid { gap: 14px; }
  .svc-body { padding: 0 14px 15px; }
  .svc-title { font-size: 17px; }
  .svc-desc { font-size: 12.5px; }
  .svc-icon { top: 12px; left: 12px; width: 38px; height: 38px; font-size: 17px; }
  .svc-mark { font-size: 96px; }
}
@media screen and (max-width: 1199px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-tile { aspect-ratio: 4 / 5; }
  .svc-title { font-size: 19px; }
  .svc-mark { top: 18%; font-size: 120px; }
}
@media screen and (max-width: 767px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .svc-tile { aspect-ratio: 3 / 4; border-radius: 16px; }
  .svc-body { padding: 0 12px 13px; }
  .svc-title { font-size: 15px; padding-top: 10px; }
  .svc-desc { font-size: 11.5px; }
  .svc-link { margin-top: 9px; font-size: 12px; }
  .svc-arrow { width: 24px; height: 24px; font-size: 11px; }
  .svc-soon { margin-top: 9px; padding: 5px 9px; font-size: 10.5px; }
  .svc-icon { top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  .svc-mark { top: 16%; font-size: 84px; }
}


/* =============================================
   /hiring/truck-driver/ page
   ============================================= */
@media screen and (min-width: 1400px) {
  .drv-head > .container,
  .drv-listing > .container,
  .hth > .container,
  .drv-about .container { max-width: 1440px; }
}

/* Simple header: title, short description and the search bar */
.drv-head {
  position: relative;
  padding: 40px 0 36px;
  background: linear-gradient(180deg, #eaf1f8 0%, #f5f7fb 100%);
  font-family: "Open Sans", Roboto, sans-serif;
}
.drv-head .hero-search { position: relative; z-index: 4; max-width: 1010px; }
.drv-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #5a6780;
}
.drv-crumbs a { color: #5a6780; text-decoration: none; }
.drv-crumbs a:hover { color: #0d1b3e; }
.drv-crumbs i { font-size: 11px; color: #a3adbd; }
.drv-crumbs span { color: #0d1b3e; }
.drv-title {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #0d1b3e;
}
.drv-sub { margin: 0 0 24px; font-size: 17px; color: #4a5875; text-align: left !important; }

/* Driver preview */
.drv-listing {
  padding: 32px 0 56px;
  background: #f5f7fb;
  font-family: "Open Sans", Roboto, sans-serif;
}
.drv-listing-head { margin-bottom: 22px; }
.drv-listing-title {
  margin: 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #0d1b3e;
}
.drv-listing-title #driverCount { color: #d99a00; }
.drv-listing-sub { margin: 6px 0 0; font-size: 15px; color: #5a6780; text-align: left !important; }
.drv-listing-sub a { color: #0d2340; font-weight: 700; }
.drv-grid { grid-template-columns: repeat(4, 1fr); }
.drv-grid .hd-card { background: #fff; }
.drv-grid .hd-card-skeleton { min-height: 300px; }
.drv-empty { background: #fff; }
.drv-empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.drv-empty-actions .hd-card-hire { flex: 0 0 auto; padding: 0 22px; }
.drv-more { display: flex; justify-content: center; margin-top: 30px; }
.drv-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: #0d2340;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(13, 35, 64, .2);
  transition: background-color .2s ease, transform .2s ease;
}
.drv-more-btn:hover { background: #17345c; color: #fff; transform: translateY(-2px); }
.drv-more-btn i { transition: transform .2s ease; }
.drv-more-btn:hover i { transform: translateX(3px); }

/* How to hire */
.hth {
  padding: 64px 0 72px;
  background: #fff;
  font-family: "Open Sans", Roboto, sans-serif;
  color: #24324f;
}
.hth-intro { max-width: 720px; margin-bottom: 32px; }
.hth-title {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: #0d1b3e;
}
.hth-lead { margin: 0; font-size: 17px; color: #4a5875; text-align: left !important; }
.hth-card {
  padding: 26px;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(13, 35, 64, .05);
}
.hth-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  color: #0d1b3e;
}
.hth-card-title i { color: #d99a00; }
.hth-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: start;
}

/* Flowchart */
.hth-flow-card { position: sticky; top: 110px; background: #f8fafc; }
.hth-flow { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; }
.hth-row { display: flex; justify-content: center; width: 100%; margin: 0; }
.hth-row.is-pair {
  gap: 10px;
  padding: 10px;
  border: 1.5px dashed #9cc0e8;
  border-radius: 14px;
  background: rgba(47, 111, 209, .05);
}
.hth-node {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  border: 1px solid #dde3ec;
  border-radius: 12px;
  background: #fff;
  color: #0d1b3e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(13, 35, 64, .05);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hth-row.is-pair .hth-node { flex: 1; max-width: none; }
.hth-node:hover { border-color: #f5c343; color: #0d1b3e; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13, 35, 64, .1); }
.hth-node i { color: #2f6fd1; font-size: 15px; }
.hth-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0d2340;
  color: #f5c343;
  font-size: 12.5px;
  font-weight: 800;
}
.hth-arrow {
  position: relative;
  width: 2px;
  height: 26px;
  margin: 2px 0;
  background: #c7d2e0;
}
.hth-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #c7d2e0;
  border-bottom: 2px solid #c7d2e0;
  transform: translateX(-50%) rotate(45deg);
}

/* Step-by-step guide */
.hth-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.hth-step {
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: 14px;
  scroll-margin-top: 110px;
  transition: background-color .2s ease;
}
.hth-step:hover, .hth-step:target { background: #f8fafc; }
.hth-step:target { box-shadow: inset 3px 0 0 #f5c343; }
.hth-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #fff4d0;
  color: #b07d00;
  font-size: 15px;
  font-weight: 800;
}
.hth-step-body h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-family: inherit; font-size: 16px; font-weight: 800; color: #0d1b3e; }
.hth-step-body h4 i { color: #2f6fd1; font-size: 15px; }
.hth-step-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4a5875; text-align: left !important; }
.hth-step-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hth-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  background: #fff;
  color: #0d2340;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.hth-open span {
  margin-right: 2px;
  padding-right: 8px;
  border-right: 1px solid #e1e7ef;
  color: #5a6780;
  font-weight: 600;
}
.hth-open > i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #f5c343; color: #0d1b3e; font-size: 10px; }
.hth-open:hover { border-color: #f5c343; background: #fffaeb; color: #0d2340; }
.hth-open-ghost { padding: 5px 12px; }
.hth-open-ghost > i { background: none; width: auto; }

/* Payment */
.hth-pay { margin-top: 24px; }
.hth-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eef6ff;
  color: #24456e;
  font-size: 14.5px;
  text-align: left !important;
}
.hth-note i { color: #2f6fd1; margin-top: 2px; }
.hth-pay-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.hth-pay-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  background: #f8fafc;
}
/* chevron between payment steps */
.hth-pay-step:not(:last-child)::after {
  content: "\F285";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 26px;
  right: -14px;
  z-index: 1;
  color: #a3adbd;
  font-size: 13px;
}
.hth-pay-step h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-family: inherit; font-size: 15px; font-weight: 800; color: #0d1b3e; }
.hth-pay-step p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.55; color: #4a5875; text-align: left !important; }
.hth-pay-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0d2340;
  color: #f5c343;
  font-size: 14px;
  font-weight: 800;
}
.hth-pay-step.is-done { border-color: #bfe5cc; background: #f1fbf4; }
.hth-pay-step.is-done .hth-pay-num { background: #1fa45a; color: #fff; }
.hth-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f0fd;
  color: #2357c6;
  font-size: 11px;
  font-weight: 700;
}
.hth-sub { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8a94a6; }
.hth-issues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hth-issue { padding: 16px 18px; border-radius: 14px; }
.hth-issue p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; text-align: left !important; }
.hth-issue.is-bad { border: 1px solid #f6c9c9; background: #fff5f5; color: #7a2a2a; }
.hth-issue.is-pending { border: 1px solid #f5dc8f; background: #fffbea; color: #6b5200; }

/* Good to know + statuses */
.hth-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.hth-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hth-facts li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; }
.hth-facts i { color: #1fa45a; margin-top: 2px; }
.hth-status-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hth-status-group { margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8a94a6; }
.hth-statuses { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hth-statuses li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; font-size: 13.5px; color: #4a5875; }
.hth-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.hth-badge.is-pending { background: #fff3cd; color: #8a6100; }
.hth-badge.is-ok { background: #e3f6ea; color: #17803a; }
.hth-badge.is-muted { background: #eef1f5; color: #5a6780; }
.hth-badge.is-bad { background: #fde8e8; color: #b42318; }

/* CTA band at the end of the guide */
.drv-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: 20px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(245, 195, 67, .22) 0%, rgba(245, 195, 67, 0) 60%),
    linear-gradient(135deg, #0d2340 0%, #16345e 100%);
  color: #fff;
}
.drv-cta-text { display: flex; align-items: center; gap: 18px; }
.drv-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(245, 195, 67, .16);
  color: #f5c343;
  font-size: 26px;
}
.drv-cta h3 { margin: 0 0 4px; font-family: inherit; font-size: 22px; font-weight: 800; color: #fff; }
.drv-cta p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .78); text-align: left !important; }
.drv-cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.drv-cta-primary,
.drv-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}
.drv-cta-primary { background: #f5c343; color: #0d1b3e; }
.drv-cta-primary:hover { background: #f0b92b; color: #0d1b3e; transform: translateY(-1px); }
.drv-cta-secondary { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.drv-cta-secondary:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.drv-cta-secondary i { color: #25d366; }

/* SEO copy below the guide */
.drv-about { padding: 64px 0 72px; background: #f5f7fb; font-family: "Open Sans", Roboto, sans-serif; color: #3d4b66; }
.seo-hire-head { max-width: 860px; margin-bottom: 32px; }
.seo-hire-head h2 {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.4px;
  color: #0d1b3e;
}
.seo-lead { margin: 0; font-size: 17px; line-height: 1.7; color: #4a5875; text-align: left !important; }
.seo-hire-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: start;
}
.seo-hire-main section { margin-bottom: 30px; }
.seo-hire-main h3,
.seo-faq h3 {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  color: #0d1b3e;
}
.seo-hire-main p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; text-align: left !important; }
.seo-hire-main a { color: #0d2340; font-weight: 700; text-decoration: underline; text-decoration-color: #f5c343; text-underline-offset: 3px; }
.seo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-chips li { margin: 0; }
.seo-hire-main .seo-chips a {
  display: inline-flex;
  padding: 7px 14px;
  border: 1px solid #dde3ec;
  border-radius: 999px;
  background: #fff;
  color: #24324f;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.seo-hire-main .seo-chips a:hover { border-color: #f5c343; background: #fffaeb; color: #0d1b3e; }
.seo-points, .seo-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.seo-points li, .seo-checklist li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.65;
}
.seo-points li::before {
  content: "\F26A"; /* bootstrap-icons check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: #1fa45a;
  font-size: 17px;
}
.seo-checklist { counter-reset: seo-check; }
.seo-checklist li { counter-increment: seo-check; }
.seo-checklist li::before {
  content: counter(seo-check);
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #0d2340;
  color: #f5c343;
  font-size: 11.5px;
  font-weight: 800;
}
.seo-points strong, .seo-checklist strong { color: #0d1b3e; }
.seo-contact {
  padding: 16px 18px;
  border-left: 4px solid #f5c343;
  border-radius: 0 12px 12px 0;
  background: #fff;
}

/* FAQ accordion */
.seo-faq {
  position: sticky;
  top: 110px;
  padding: 24px;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(13, 35, 64, .05);
}
.seo-faq h3 { margin-bottom: 14px; }
.seo-faq details { border-top: 1px solid #edf0f4; }
.seo-faq details:first-of-type { border-top: 0; }
.seo-faq summary {
  position: relative;
  padding: 14px 30px 14px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #0d1b3e;
  list-style: none;
  cursor: pointer;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: "\F64D"; /* bootstrap-icons plus-lg */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 4px;
  top: 15px;
  color: #d99a00;
  font-size: 14px;
  transition: transform .2s ease;
}
.seo-faq details[open] summary::after { transform: rotate(45deg); }
.seo-faq details p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: #4a5875; text-align: left !important; }

@media screen and (max-width: 1199px) {
  .drv-grid { grid-template-columns: repeat(3, 1fr); }
  .hth-main { grid-template-columns: 1fr; }
  .hth-flow-card { position: static; }
  .hth-pay-steps { grid-template-columns: repeat(3, 1fr); }
  .hth-pay-step:nth-child(3)::after { display: none; }
  .drv-cta { flex-direction: column; align-items: flex-start; }
  .seo-hire-grid { grid-template-columns: 1fr; }
  .seo-faq { position: static; }
}
@media screen and (max-width: 991px) {
  .drv-grid { grid-template-columns: repeat(2, 1fr); }
  .hth-bottom { grid-template-columns: 1fr; }
  .hth-pay-steps { grid-template-columns: repeat(2, 1fr); }
  .hth-pay-step::after { display: none; }
}
@media screen and (max-width: 767px) {
  .drv-head { padding: 22px 0 24px; }
  .drv-crumbs { margin-bottom: 10px; font-size: 13px; }
  .drv-title { font-size: 26px; }
  .drv-sub { margin-bottom: 18px; font-size: 15px; }
  .drv-listing { padding: 24px 0 40px; }
  .drv-listing-title { font-size: 22px; }
  .drv-grid { grid-template-columns: 1fr; }
  .drv-more-btn { width: 100%; justify-content: center; }
  .hth { padding: 40px 0 48px; }
  .hth-title { font-size: 25px; }
  .hth-lead { font-size: 15px; }
  .hth-card { padding: 18px 14px; border-radius: 14px; }
  .hth-card-title { font-size: 18px; margin-bottom: 14px; }
  .hth-row.is-pair { flex-direction: column; }
  .hth-node { max-width: none; }
  .hth-step { padding: 12px 6px; gap: 12px; }
  .hth-pay-steps, .hth-issues, .hth-status-groups { grid-template-columns: 1fr; }
  .drv-cta { padding: 22px 18px; }
  .drv-cta-text { align-items: flex-start; }
  .drv-cta-actions { width: 100%; flex-direction: column; }
  .drv-cta-primary, .drv-cta-secondary { justify-content: center; }
  .drv-about { padding: 40px 0 48px; }
  .seo-hire-head h2 { font-size: 24px; }
  .seo-lead { font-size: 15.5px; }
  .seo-hire-main h3, .seo-faq h3 { font-size: 18px; }
  .seo-faq { padding: 16px 14px; }
}

/* =============================================
   Driver job board (/drivers-jobs)
   ============================================= */
.dj-hero, .dj-chips-wrap, .dj-results, .dj-flow-sec, .dj-guide, .dj-faq {
  font-family: "Open Sans", Roboto, sans-serif;
}
.dj-hero {
  padding: 36px 0 40px;
  background:
    radial-gradient(circle at 85% 0%, rgba(245, 195, 67, .16), transparent 45%),
    linear-gradient(135deg, #0d2340 0%, #0b2f57 100%);
  color: rgba(255, 255, 255, .86);
}
.dj-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13.5px; }
.dj-crumb a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.dj-crumb a:hover { color: #f5c343; }
.dj-crumb span { color: rgba(255, 255, 255, .5); }
.dj-crumb [aria-current] { color: #f5c343; }
.dj-title {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: #fff;
}
.dj-sub { max-width: 720px; margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .8); text-align: left !important; }

/* search bar reuses the home hero dropdowns (.hero-search / .hero-combo) */
.dj-hero-search { position: relative; z-index: 25; border: 0; box-shadow: 0 18px 40px rgba(3, 14, 30, .28); }

.dj-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; }
.dj-stats li { margin: 0; }
.dj-stats strong { margin-right: 4px; font-size: 18px; font-weight: 800; color: #f5c343; }

.dj-chips-wrap { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #e8edf5; }
.dj-chips {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.dj-chips::-webkit-scrollbar { display: none; }
.dj-chips li { flex-shrink: 0; margin: 0; }
.dj-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid #d9e0ec;
  border-radius: 999px;
  color: #2a3550;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.dj-chip span { padding: 1px 7px; border-radius: 999px; background: #eef2f8; font-size: 12px; color: #4a5875; }
.dj-chip:hover { border-color: #0d2340; color: #0d2340; }
.dj-chip.is-active { border-color: #0d2340; background: #0d2340; color: #fff; }
.dj-chip.is-active span { background: #f5c343; color: #0d1b3e; }

.dj-results { padding: 34px 0 56px; background: #f5f7fb; }
.dj-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dj-results-head h2 { margin: 0; font-family: inherit; font-size: 22px; font-weight: 800; color: #0d1b3e; }
.dj-active { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dj-active li { margin: 0; }
.dj-active a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px 5px 12px; border-radius: 999px;
  background: #fff4d6; color: #6b4e00; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.dj-active a:hover { background: #ffe9a8; }
.dj-active .dj-clear { background: transparent; color: #0d2340; text-decoration: underline; }

/* LinkedIn-style board: compact list (left) + sticky detail pane (right) */
.dj-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dj-board.is-js { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
.dj-list { overflow: hidden; border: 1px solid #e4e9f2; border-radius: 10px; background: #fff; }
.dj-item { position: relative; border-bottom: 1px solid #e8edf5; }
.dj-item:last-child { border-bottom: 0; }
.dj-item-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.dj-board.is-js .dj-item { cursor: pointer; transition: background .15s ease; }
.dj-board.is-js .dj-item:hover { background: #f8fafd; }
.dj-board.is-js .dj-item.is-active { background: #eef4ff; box-shadow: inset 3px 0 0 #0a66c2; }
.dj-logo {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 8px; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .5px;
}
.dj-item-main { flex: 1; min-width: 0; }
.dj-item-title { margin: 0 0 2px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; }
.dj-item-title a { color: #0a66c2; text-decoration: none; }
.dj-item-title a:hover, .dj-item.is-active .dj-item-title a { text-decoration: underline; }
.dj-item-main p { margin: 0; text-align: left !important; }
.dj-item-company { font-size: 14px; color: #1d2433; }
.dj-item-meta { font-size: 13.5px; color: #5e6b85; }
.dj-item-salary { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 13.5px; font-weight: 600; color: #1d2433; }
.dj-item-salary i { color: #18794e; }
.dj-item-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px !important; font-size: 12.5px; color: #6b7894; }
.dj-item-verified { color: #18794e; font-weight: 700; }

/* the detail block: inline under each item without JS, copied into the pane with JS */
.dj-item-detail { padding: 0 18px 18px; }
.dj-board.is-js .dj-item-detail { display: none; }
.dj-pane { display: none; }
.dj-board.is-js .dj-pane {
  display: block; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto;
  border: 1px solid #e4e9f2; border-radius: 10px; background: #fff; overscroll-behavior: contain;
}
.dj-pane-bar { display: none; }
.dj-pane-body { padding: 24px 26px 28px; }

.dj-d-head { padding-bottom: 18px; border-bottom: 1px solid #e8edf5; }
.dj-d-company { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #1d2433; }
.dj-d-company .dj-logo { width: 36px; height: 36px; font-size: 13px; border-radius: 6px; }
.dj-d-title { margin: 12px 0 6px; font-family: inherit; font-size: 24px; font-weight: 800; line-height: 1.25; color: #0d1b3e; }
.dj-d-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font-size: 14px; color: #5e6b85; text-align: left !important; }
.dj-d-meta span + span::before { content: "·"; margin: 0 8px; color: #a3adc2; }
.dj-d-hiring { color: #18794e; font-weight: 700; }
.dj-d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.dj-d-apply {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px;
  background: #0a66c2; color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s ease;
}
.dj-d-apply:hover { background: #004182; }
.dj-d-share {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid #0a66c2; border-radius: 999px;
  background: #fff; color: #0a66c2; font-size: 15px; font-weight: 700; cursor: pointer;
}
.dj-d-share:hover { background: #eef4ff; }
.dj-d-login-note { margin: 10px 0 0; font-size: 12.5px; color: #6b7894; text-align: left !important; }

.dj-d-highlights { display: grid; gap: 12px; margin: 0; padding: 18px 0; border-bottom: 1px solid #e8edf5; list-style: none; }
.dj-d-highlights li { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.dj-d-highlights i { width: 22px; flex-shrink: 0; color: #5e6b85; font-size: 18px; text-align: center; }
.dj-d-highlights strong { display: block; font-size: 15px; font-weight: 700; color: #1d2433; }
.dj-d-highlights span { display: block; font-size: 13.5px; color: #5e6b85; }

.dj-d-sec { padding: 18px 0; border-bottom: 1px solid #e8edf5; }
.dj-d-sec h3 { margin: 0 0 12px; font-family: inherit; font-size: 18px; font-weight: 800; color: #0d1b3e; }
.dj-d-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.dj-d-facts div { min-width: 0; }
.dj-d-facts dt { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: #6b7894; text-transform: uppercase; letter-spacing: .3px; }
.dj-d-facts dd { margin: 0; font-size: 15px; font-weight: 600; color: #1d2433; overflow-wrap: anywhere; }
.dj-d-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dj-d-perks li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; background: #e7f6ee; color: #18794e; font-size: 13.5px; font-weight: 600; }
.dj-d-text { margin: 0; font-size: 15px; line-height: 1.65; color: #2a3550; text-align: left !important; }
.dj-d-employer .dj-d-company { margin-bottom: 10px; }
.dj-d-employer .dj-d-company .dj-logo { width: 48px; height: 48px; font-size: 16px; }
.dj-d-employer .dj-d-company div strong { display: block; font-size: 15px; }
.dj-d-employer .dj-d-company div span { display: block; font-size: 13.5px; font-weight: 400; color: #5e6b85; }
.dj-d-safety { display: flex; gap: 8px; margin: 18px 0 0; padding: 12px 14px; border-radius: 8px; background: #fff8e6; color: #6b4e00; font-size: 13.5px; text-align: left !important; }

.dj-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 28px; }
.dj-page-info { font-size: 14px; color: #6b7894; }
.dj-page-link {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
  border: 1.5px solid #0d2340; border-radius: 8px; color: #0d2340; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.dj-page-link:hover { background: #0d2340; color: #fff; }
.dj-more { background: #0d2340; color: #fff; }
.dj-more:hover { background: #163a66; }
.dj-more.is-loading { opacity: .6; pointer-events: none; }

.dj-empty { max-width: 560px; margin: 10px auto; padding: 36px 28px; border-radius: 16px; background: #fff; text-align: center; }
.dj-empty > i { font-size: 42px; color: #d99a00; }
.dj-empty h3 { margin: 10px 0 8px; font-family: inherit; font-size: 21px; font-weight: 800; color: #0d1b3e; }
.dj-empty p { margin: 0 0 20px; color: #4a5875; text-align: center !important; }
.dj-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.dj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dj-btn-primary { background: #f5c343; color: #0d1b3e; }
.dj-btn-primary:hover { background: #ffd666; color: #0d1b3e; }
.dj-btn-ghost { border-color: #0d2340; color: #0d2340; }
.dj-btn-ghost:hover { background: #0d2340; color: #fff; }
.dj-btn-ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.dj-btn-ghost-light:hover { border-color: #fff; background: #fff; color: #0d2340; }

/* ---- flowchart ---- */
.dj-flow-sec { padding: 64px 0; background: #fff; }
.dj-sec-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.dj-sec-head .home-eyebrow::after { content: ""; width: 36px; height: 4px; border-radius: 2px; background: #f5c343; }
.dj-sec-head h2 { margin: 0 0 8px; font-family: inherit; font-size: 32px; font-weight: 800; line-height: 1.2; color: #0d1b3e; }
.dj-sec-head p { margin: 0; font-size: 16.5px; color: #4a5875; text-align: center !important; }
.dj-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dj-flow-step {
  position: relative;
  margin: 0;
  padding: 22px 18px 18px;
  border: 1.5px solid #e4e9f2;
  border-radius: 14px;
  background: #fbfcfe;
  text-align: center;
}
/* connector arrow to the next step (left-to-right within a row) */
.dj-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -36px;
  width: 28px;
  height: 14px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M0 7h24M19 1.5 25 7l-6 5.5' fill='none' stroke='%23d99a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateY(-50%);
}
/* Snake layout: steps 1-4 run left to right, 5-7 come back right to left,
   so the down arrow under step 4 lands on step 5. */
.dj-flow-step:nth-child(5) { grid-column: 4; grid-row: 2; }
.dj-flow-step:nth-child(6) { grid-column: 3; grid-row: 2; }
.dj-flow-step:nth-child(7) { grid-column: 2; grid-row: 2; }
.dj-flow-step:nth-child(4)::after {
  top: auto;
  right: 50%;
  bottom: -34px;
  transform: translateX(50%) rotate(90deg);
}
.dj-flow-step:nth-child(5)::after,
.dj-flow-step:nth-child(6)::after {
  right: auto;
  left: -36px;
  transform: translateY(-50%) rotate(180deg);
}
.dj-flow-num {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #0d2340; color: #f5c343; font-size: 13px; font-weight: 800;
}
.dj-flow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 10px; border-radius: 14px; background: #fff4d6; color: #b07d00; font-size: 24px;
}
.dj-flow-step h3 { margin: 0 0 6px; font-family: inherit; font-size: 16.5px; font-weight: 800; color: #0d1b3e; }
.dj-flow-step p { margin: 0; font-size: 14px; line-height: 1.5; color: #4a5875; text-align: center !important; }
/* the verification step is a decision point (diamond) */
.dj-flow-step.is-check { border-color: #f5c343; background: #fffaf0; }
.dj-flow-step.is-check .dj-flow-icon { width: 44px; height: 44px; margin: 4px 0 14px; border-radius: 8px; background: #0d2340; color: #f5c343; transform: rotate(45deg); }
.dj-flow-step.is-check .dj-flow-icon i { transform: rotate(-45deg); }
.dj-flow-branch {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 9px;
  border-radius: 6px; background: #fdecea; color: #a63a2b; font-size: 12px; font-weight: 600; line-height: 1.35;
}
.dj-flow-step:last-child { border-color: #18794e; background: #effaf4; }
.dj-flow-step:last-child .dj-flow-icon { background: #18794e; color: #fff; }
.dj-flow-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* ---- guide ---- */
.dj-guide { padding: 64px 0; background: #f5f7fb; }
.dj-guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.dj-guide-main { padding: 34px; border-radius: 16px; background: #fff; color: #2a3550; }
.dj-guide-main h2 { margin: 0 0 14px; font-family: inherit; font-size: 28px; font-weight: 800; color: #0d1b3e; }
.dj-guide-main h3 { margin: 30px 0 12px; font-family: inherit; font-size: 20px; font-weight: 800; color: #0d1b3e; }
.dj-guide-main p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.7; text-align: left !important; }
.dj-table-wrap { overflow-x: auto; border: 1px solid #e4e9f2; border-radius: 12px; }
.dj-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14.5px; }
.dj-table th, .dj-table td { padding: 11px 14px; border-bottom: 1px solid #eef2f8; text-align: left; white-space: nowrap; }
.dj-table thead th { background: #0d2340; color: #fff; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.dj-table tbody th { font-weight: 700; color: #0d1b3e; }
.dj-table tbody tr:last-child th, .dj-table tbody tr:last-child td { border-bottom: 0; }
.dj-table td:last-child { font-weight: 700; color: #18794e; }
.dj-note { margin-top: 10px !important; font-size: 13.5px !important; color: #6b7894; }
.dj-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dj-checklist li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.55; }
.dj-checklist i { flex-shrink: 0; margin-top: 2px; color: #d99a00; }
.dj-guide-side { display: grid; gap: 18px; position: sticky; top: 72px; }
.dj-side-card { padding: 22px; border-radius: 14px; background: #fff; }
.dj-side-card h3 { margin: 0 0 12px; font-family: inherit; font-size: 17px; font-weight: 800; color: #0d1b3e; }
.dj-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.dj-links li { margin: 0; }
.dj-links a { font-size: 14px; color: #2a5a9e; text-decoration: none; }
.dj-links a:hover { color: #b07d00; text-decoration: underline; }
.dj-side-contact p { margin: 0 0 14px; font-size: 14.5px; color: #4a5875; text-align: left !important; }
.dj-contact { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.dj-contact li { margin: 0; }
.dj-contact a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e4e9f2; border-radius: 10px; color: #0d1b3e; font-size: 14.5px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; transition: border-color .15s ease, background .15s ease; }
.dj-contact a:hover { border-color: #f5c343; background: #fffbef; }
.dj-contact small { display: block; font-size: 12px; font-weight: 600; color: #6b7894; }
.dj-contact-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff4d6; color: #b07d00; font-size: 16px; }
.dj-contact-ico.dj-contact-wa { background: #e7f6ee; color: #18794e; }
.dj-contact-btn { width: 100%; }
.dj-side-hire { background: linear-gradient(135deg, #0d2340 0%, #0b2f57 100%); color: rgba(255, 255, 255, .82); }
.dj-side-hire h3 { color: #fff; }
.dj-side-hire p { margin: 0 0 16px; font-size: 14.5px; text-align: left !important; }
.dj-side-hire .dj-btn { width: 100%; margin-top: 8px; }

/* ---- FAQ ---- */
.dj-faq { padding: 64px 0 72px; background: #fff; }
.dj-faq-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.dj-faq details { border: 1px solid #e4e9f2; border-radius: 12px; background: #fbfcfe; }
.dj-faq details[open] { border-color: #f5c343; background: #fff; }
.dj-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; color: #0d1b3e; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none;
}
.dj-faq summary::-webkit-details-marker { display: none; }
.dj-faq summary::after { content: "+"; flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: #b07d00; }
.dj-faq details[open] summary::after { content: "\2212"; }
.dj-faq details p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: #4a5875; text-align: left !important; }

@media screen and (max-width: 1199px) {
  .dj-board.is-js { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .dj-guide-grid { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media screen and (max-width: 991px) {
  .dj-title { font-size: 32px; }
  /* board: list only; the detail pane becomes a full-screen sheet */
  .dj-board.is-js { grid-template-columns: minmax(0, 1fr); }
  .dj-board.is-js .dj-item.is-active { background: #fff; box-shadow: none; }
  .dj-board.is-js .dj-pane { display: none; position: fixed; inset: 0; z-index: 100000; max-height: none; border: 0; border-radius: 0; }
  .dj-board.is-js .dj-pane.is-open { display: block; }
  .dj-pane-bar { display: block; position: sticky; top: 0; z-index: 1; padding: 10px 12px; border-bottom: 1px solid #e8edf5; background: #fff; }
  .dj-pane-close { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: #0d1b3e; font-size: 15px; font-weight: 700; cursor: pointer; }
  .dj-pane-body { padding: 18px 16px 28px; }
  body.dj-sheet-open { overflow: hidden; }
  /* flowchart becomes one vertical column with downward arrows */
  .dj-flow { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 38px; }
  .dj-flow-step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .dj-flow-step:nth-child(n)::after { top: auto; right: 50%; left: auto; bottom: -32px; transform: translateX(50%) rotate(90deg); }
  .dj-guide-grid { grid-template-columns: minmax(0, 1fr); }
  .dj-guide-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-side-hire { grid-column: 1 / -1; }
}
@media screen and (max-width: 767px) {
  .dj-hero { padding: 24px 0 28px; }
  .dj-title { font-size: 26px; }
  .dj-sub { font-size: 15px; margin-bottom: 20px; }
  .dj-stats { gap: 8px 18px; font-size: 13.5px; }
  .dj-stats strong { font-size: 16px; }
  .dj-results { padding: 24px 0 40px; }
  .dj-results-head h2 { font-size: 19px; }
  .dj-item-row { padding: 14px; }
  .dj-d-title { font-size: 21px; }
  .dj-d-facts { grid-template-columns: minmax(0, 1fr); }
  .dj-d-actions a, .dj-d-actions button { flex: 1; justify-content: center; }
  .dj-pager .dj-page-link { width: 100%; justify-content: center; }
  .dj-flow-sec, .dj-guide, .dj-faq { padding: 44px 0; }
  .dj-sec-head h2 { font-size: 24px; }
  .dj-flow-cta .dj-btn { width: 100%; }
  .dj-guide-main { padding: 22px 18px; }
  .dj-guide-main h2 { font-size: 22px; }
  .dj-table { font-size: 13.5px; }
  .dj-table th, .dj-table td { padding: 10px; white-space: normal; }
  .dj-guide-side { grid-template-columns: minmax(0, 1fr); }
  .dj-faq summary { padding: 14px 16px; font-size: 15px; }
  .dj-faq details p { padding: 0 16px 16px; }
}

/* ===================== Home: quote section (hire drivers / transport) ===================== */
.hq {
  position: relative; padding: 84px 0; font-family: "Open Sans", Roboto, sans-serif;
  background: radial-gradient(circle at 0% 0%, rgba(245, 195, 67, .12), transparent 38%), radial-gradient(circle at 100% 100%, rgba(13, 35, 64, .07), transparent 40%), #f6f8fc;
}
.hq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }

/* left: intro + steps */
.hq-title { margin: 12px 0 14px; font-family: inherit; font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: -.8px; color: #0d1b3e; }
.hq-title span { color: #c28a00; }
.hq-lead { max-width: 540px; margin: 0 0 32px; font-size: 17px; line-height: 1.6; color: #4a5875; text-align: left !important; }

.hq-steps { position: relative; display: grid; gap: 4px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: hq; }
.hq-steps[hidden] { display: none; }
.hq-steps::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 21px; width: 2px; background: linear-gradient(#f5c343, rgba(245, 195, 67, .2)); border-radius: 2px; }
.hq-step { position: relative; display: flex; align-items: flex-start; gap: 18px; margin: 0; padding: 12px 14px 12px 0; border-radius: 14px; transition: background .2s ease; }
.hq-step:hover { background: rgba(255, 255, 255, .7); }
.hq-step-icon {
  position: relative; z-index: 1; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: #0d2340; color: #f5c343; font-size: 19px;
  box-shadow: 0 0 0 5px #f6f8fc, 0 8px 18px rgba(13, 35, 64, .18);
}
.hq-step-num { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #c28a00; }
.hq-step h3 { margin: 0 0 3px; font-family: inherit; font-size: 17px; font-weight: 700; color: #0d1b3e; }
.hq-step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #5a6780; text-align: left !important; }

.hq-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hq-trust li { margin: 0; padding: 14px 16px; border: 1px solid #e3e9f2; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(13, 35, 64, .04); }
.hq-trust strong { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; color: #0d1b3e; }
.hq-trust span { font-size: 12.5px; color: #6b7894; }

/* right: form card */
.hq-card { padding: 26px 28px 0; border: 1px solid #e3e9f2; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px rgba(13, 35, 64, .1); }

/* segmented toggle with sliding thumb */
.hq-toggle-wrap { margin-bottom: 22px; }
.hq-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid #e1e7ef; border-radius: 999px; background: #eef2f8; }
.hq-toggle-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: linear-gradient(135deg, #0d2340 0%, #17406e 100%); box-shadow: 0 8px 18px rgba(13, 35, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.hq-toggle[data-active="transport"] .hq-toggle-thumb { transform: translateX(100%); }
.hq-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent; color: #4a5875; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: color .25s ease;
}
.hq-tab i { font-size: 17px; transition: color .25s ease; }
.hq-tab:hover { color: #0d1b3e; }
.hq-tab.active, .hq-tab.active:hover { color: #fff; }
.hq-tab.active i { color: #f5c343; }
.hq-tab:focus-visible { outline: 2px solid #f5c343; outline-offset: 2px; }

.hq-panel[hidden] { display: none; }
.hq-panel { animation: hq-in .3s ease; }
@keyframes hq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hq-panel-head h3 { margin: 0 0 4px; font-family: inherit; font-size: 22px; font-weight: 800; color: #0d1b3e; }
.hq-panel-head p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: #5e6b85; text-align: left !important; }
.hq-group { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px !important; font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a94a6; text-align: left !important; }
.hq-group::after { content: ""; flex: 1; height: 1px; background: #edf1f6; }
.hq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hq-span-2 { grid-column: 1 / -1; }
.hq-field { display: block; margin: 0; font-weight: 400; }
.hq-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: #1d2433; }
.hq-label em { font-style: normal; color: #d64545; }
.hq-label small { font-weight: 400; color: #8a94a6; }
.hq-input { position: relative; display: block; }
.hq-input > i { position: absolute; top: 14px; left: 14px; color: #8a94a6; font-size: 16px; pointer-events: none; transition: color .15s ease; }
.hq-input input, .hq-input select, .hq-input textarea {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px 0 42px;
  border: 1px solid #dde4ee; border-radius: 12px; outline: 0; background: #fbfcfe; box-shadow: none;
  color: #0d1b3e; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hq-input select {
  padding-right: 36px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: #fbfcfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a94a6' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.hq-input-area textarea { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.hq-input input::placeholder, .hq-input textarea::placeholder { color: #a3adc2; opacity: 1; }
.hq-input input:hover, .hq-input select:hover, .hq-input textarea:hover { border-color: #c9d3e1; }
.hq-input input:focus, .hq-input select:focus, .hq-input textarea:focus { border-color: #0d2340; background-color: #fff; box-shadow: 0 0 0 4px rgba(245, 195, 67, .3); }
.hq-input:focus-within > i { color: #0d2340; }
/* jQuery Validate (form_validation.js) */
.hq-input input.error, .hq-input select.error { border-color: #d64545; }
.hq-input input.valid, .hq-input select.valid, .hq-input textarea.valid { border-color: #dde4ee; }
.hq-input label.error { display: block; margin: 5px 0 0; font-size: 12.5px; font-weight: 600; color: #d64545; }

.hq-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 22px;
  border: 0; border-radius: 14px; background: linear-gradient(135deg, #f5c343 0%, #ffd666 100%); color: #0d1b3e; font-size: 16.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 24px rgba(245, 195, 67, .35); transition: transform .15s ease, box-shadow .15s ease;
}
.hq-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(245, 195, 67, .45); }
.hq-submit:active { transform: translateY(0); }
.hq-submit:disabled { opacity: .7; cursor: progress; }
.hq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 14px 0 20px !important; font-size: 13px; color: #6b7894; text-align: left !important; }
.hq-foot a { color: #1b5bff; font-weight: 700; text-decoration: none; }
.hq-foot a:hover { text-decoration: underline; }
.hq-form .alert { margin-bottom: 14px; }

.hq-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0 -28px; padding: 14px 20px; border-top: 1px solid #edf1f6; border-radius: 0 0 24px 24px; background: #fafbfd; font-size: 14px; color: #5e6b85; }
.hq-call a { display: inline-flex; align-items: center; gap: 6px; color: #0d1b3e; font-weight: 700; text-decoration: none; }
.hq-call a:hover { color: #c28a00; }
.hq-call-wa i { color: #18794e; }

@media screen and (max-width: 1199px) {
  .hq-grid { gap: 40px; }
  .hq-title { font-size: 34px; }
}
@media screen and (max-width: 991px) {
  .hq { padding: 56px 0; }
  .hq-grid { grid-template-columns: minmax(0, 1fr); }
  .hq-card { max-width: 640px; }
}
@media screen and (max-width: 767px) {
  .hq { padding: 40px 0; }
  .hq-title { font-size: 27px; letter-spacing: -.4px; }
  .hq-lead { font-size: 15.5px; margin-bottom: 22px; }
  .hq-trust { gap: 8px; }
  .hq-trust li { padding: 10px; }
  .hq-trust strong { font-size: 15px; }
  .hq-card { padding: 18px 16px 0; border-radius: 20px; }
  .hq-call { margin: 0 -16px; border-radius: 0 0 20px 20px; }
  .hq-row { grid-template-columns: minmax(0, 1fr); }
  .hq-tab { gap: 6px; height: 42px; padding: 0 8px; font-size: 14px; }
}

/* ===================== Home: Sonpra Tech promo (brand colours from sonpra.com) ===================== */
.sp { padding: 72px 0; background: #fff; font-family: "Open Sans", Roboto, sans-serif; }
.sp-box {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center;
  padding: 48px; border: 1px solid #e3e9f7; border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, rgba(94, 185, 240, .18), transparent 42%), radial-gradient(circle at 0% 100%, rgba(27, 91, 255, .08), transparent 40%), #f7f9ff;
}
.sp-logo { display: block; width: fit-content; margin-bottom: 18px; }
.sp-logo img { display: block; width: 168px; height: auto; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #edf1fd; color: #1b5bff; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.sp-title { margin: 14px 0 12px; font-family: inherit; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; color: #0f172a; }
.sp-title span { background: linear-gradient(90deg, #1b5bff, #5eb9f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-lead { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: #343f52; text-align: left !important; }

.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.sp-stats li { margin: 0; padding: 12px 14px; border: 1px solid #e3e9f7; border-radius: 12px; background: #fff; }
.sp-stats strong { display: block; font-size: 22px; font-weight: 800; color: #0f172a; }
.sp-stats span { font-size: 12.5px; color: #5b6478; }

.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.sp-btn-primary { background: #1b5bff; color: #fff !important; box-shadow: 0 10px 22px rgba(27, 91, 255, .28); }
.sp-btn-primary:hover { background: #1448d6; transform: translateY(-1px); }
.sp-btn-ghost { border: 1px solid #cdd7ee; background: #fff; color: #0f172a !important; }
.sp-btn-ghost:hover { border-color: #1b5bff; color: #1b5bff !important; }

.sp-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-service { margin: 0; padding: 20px; border: 1px solid #e3e9f7; border-radius: 16px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sp-service:hover { border-color: #5eb9f0; box-shadow: 0 14px 30px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.sp-service-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(135deg, #1b5bff, #5eb9f0); color: #fff; font-size: 20px; }
.sp-service h3 { margin: 0 0 6px; font-family: inherit; font-size: 16.5px; font-weight: 700; color: #0f172a; }
.sp-service p { margin: 0; font-size: 14px; line-height: 1.55; color: #5b6478; text-align: left !important; }

@media screen and (max-width: 1199px) {
  .sp-box { gap: 32px; padding: 36px; }
  .sp-title { font-size: 30px; }
}
@media screen and (max-width: 991px) {
  .sp { padding: 52px 0; }
  .sp-box { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 767px) {
  .sp { padding: 40px 0; }
  .sp-box { padding: 24px 16px; border-radius: 18px; }
  .sp-title { font-size: 25px; }
  .sp-lead { font-size: 15px; }
  .sp-stats strong { font-size: 18px; }
  .sp-stats li { padding: 10px; }
  .sp-services { grid-template-columns: minmax(0, 1fr); }
  .sp-btn { flex: 1 1 100%; }
}

/* ===================== Header: Sonpra Tech link + hover card ===================== */
header .main-nav li.sonpra-li { position: relative; margin-left: 8px; }
header .main-nav .nav-sonpra {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 1px solid #cdd9fb; border-radius: 999px; background: #edf1fd;
  color: #1b5bff !important; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
header .main-nav .nav-sonpra i { font-size: 15px; }
header .main-nav .sonpra-li:hover .nav-sonpra,
header .main-nav .nav-sonpra:focus-visible { background: #1b5bff; border-color: #1b5bff; color: #fff !important; }
.sonpra-pop {
  position: absolute; top: calc(100% + 12px); left: 50%; z-index: 1300; width: 290px; padding: 16px;
  border: 1px solid #e3e9f7; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none; text-align: left;
}
/* bridge the gap so the card stays open while the pointer moves onto it */
.sonpra-pop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.sonpra-pop::after {
  content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-top: 1px solid #e3e9f7; border-left: 1px solid #e3e9f7; background: #fff; transform: rotate(45deg);
}
header .main-nav .sonpra-li:hover .sonpra-pop,
header .main-nav .sonpra-li:focus-within .sonpra-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.sonpra-pop-logo { display: block; width: 120px; height: auto; margin-bottom: 10px; }
.sonpra-pop p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #343f52; white-space: normal; text-align: left !important; }
.sonpra-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
header .main-nav .sonpra-pop-tags li { margin: 0; padding: 3px 9px; border-radius: 999px; background: #edf1fd; color: #1b5bff; font-size: 12px; font-weight: 600; }
/* "Visit sonpra.com": a full-width button (real link) */
header .main-nav .sonpra-pop a.sonpra-pop-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 2px 0 0; padding: 0 16px;
  border-radius: 10px; background: #1b5bff; color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 18px rgba(27, 91, 255, .28); transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
header .main-nav .sonpra-pop a.sonpra-pop-cta i { font-size: 14px; transition: transform .2s ease; }
header .main-nav .sonpra-pop a.sonpra-pop-cta:hover { background: #1448d6; box-shadow: 0 10px 22px rgba(27, 91, 255, .38); transform: translateY(-1px); }
header .main-nav .sonpra-pop a.sonpra-pop-cta:hover i { transform: translate(2px, -2px); }
header .main-nav .sonpra-pop a.sonpra-pop-cta:focus-visible { outline: 3px solid #f5c343; outline-offset: 2px; }
.sonpra-pop-logo-link { display: inline-block; cursor: pointer; }
.sonpra-pop-logo-link:hover .sonpra-pop-logo { opacity: .85; }

@media screen and (min-width: 997px) and (max-width: 1199px) {
  header .main-nav li.sonpra-li { margin-left: 4px; }
  header .main-nav .nav-sonpra { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 13px; }
  /* icon only here: the full row does not fit; the hover card still names it */
  header .main-nav .nav-sonpra-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* slide-out menu: a plain row, no hover card */
@media screen and (max-width: 996px) {
  header .main-nav li.sonpra-li { margin: 6px 0; }
  header .main-nav .nav-sonpra { height: 42px; width: 100%; justify-content: center; }
  .sonpra-pop { display: none; }
}

/* menu drawer: Sonpra Tech card (no hover on phones, so the intro shows inline) */
.dm-sonpra { display: grid; gap: 6px; margin: 4px 18px 14px; padding: 14px; border: 1px solid #cdd9fb; border-radius: 12px; background: #f5f8ff; text-decoration: none; transition: border-color .2s ease; }
.dm-sonpra:hover { border-color: #1b5bff; }
.dm-sonpra img { display: block; width: 96px; height: auto; }
.dm-sonpra span { font-size: 13px; line-height: 1.5; color: #343f52; }
.dm-sonpra strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #1b5bff; }

/* ===================== Site footer ===================== */
/* transo.min.css forces `footer a { color: #fff !important }`, hence the !important colours below */
.ft { background: #041c2f; color: #a9b8c7; font-family: "Open Sans", Roboto, sans-serif; }
.ft a { color: #a9b8c7 !important; text-decoration: none; transition: color .15s ease; }
.ft a:hover { color: #f5c343 !important; }

/* compact CTA strip (not on home) */
.ft-cta { border-bottom: 1px solid rgba(255, 255, 255, .08); background: #0a2742; }
.ft-cta-inner { display: grid; grid-template-columns: 1fr 1fr; }
.ft-cta-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.ft-cta-item + .ft-cta-item { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .1); }
.ft-cta-item:first-child { padding-right: 28px; }
.ft-cta-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(245, 195, 67, .15); color: #f5c343; font-size: 17px; }
.ft-cta-item p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.45; color: #a9b8c7; text-align: left !important; }
.ft-cta-item strong { display: block; font-size: 15px; color: #fff; }
.ft-cta-links { display: flex; flex-shrink: 0; gap: 8px; }
.ft-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.ft .ft-btn-yellow { background: #f5c343; color: #0d1b3e !important; }
.ft .ft-btn-yellow:hover { background: #ffd666; color: #0d1b3e !important; }
.ft .ft-btn-line { border: 1px solid rgba(255, 255, 255, .3); color: #fff !important; }
.ft .ft-btn-line:hover { border-color: #f5c343; color: #f5c343 !important; }

/* main: about + link columns */
.ft-main { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; padding: 40px 0 28px; }
.ft-about-title { margin: 0 0 8px; font-family: inherit; font-size: 17px; font-weight: 800; color: #fff; }
.ft-about p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; text-align: left !important; }
.ft-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(245, 195, 67, .14); color: #f5c343; font-size: 12.5px; font-weight: 700; }
.ft-contact { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ft-contact li { margin: 0; font-size: 13.5px; }
.ft-contact a, .ft-contact span { display: inline-flex; align-items: center; gap: 9px; color: #dbe4ec !important; }
.ft-contact i { width: 16px; color: #f5c343; font-size: 14px; text-align: center; }

.ft-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.ft-col summary { list-style: none; }
.ft-col summary::-webkit-details-marker { display: none; }
.ft-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: .2px; color: #fff; cursor: default; pointer-events: none; }
.ft-title i { display: none; }
.ft-links { margin: 0; padding: 0; list-style: none; }
.ft-links li { margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; }

/* social + app */
.ft-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.ft-mid-label { margin-right: 4px; font-size: 13px; font-weight: 700; color: #fff; }
.ft-social, .ft-app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ft .ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #fff !important; font-size: 15px; transition: background .15s ease; }
.ft .ft-social a:hover { background: #f5c343; color: #0d1b3e !important; }
.ft-app-badge { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #8a99a8; }
.ft-app-badge i { font-size: 18px; }
.ft-app-badge span { display: flex; flex-direction: column; line-height: 1.1; font-size: 13px; font-weight: 600; color: #c6d2dd; }
.ft-app-badge small { font-size: 9.5px; font-weight: 400; color: #8a99a8; }
.ft a.ft-app-badge.is-live:hover { border-color: #f5c343; }
.ft a.ft-app-badge.is-live i { color: #fff; }

.ft-bottom { padding: 12px 0; background: #020f1a; }
.ft-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.ft-copy { margin: 0; font-size: 12.5px; color: #7f93a6; text-align: left !important; }
.ft .ft-copy a { color: #dbe4ec !important; font-weight: 600; }
.ft-reg { margin-left: 8px; color: #5f7387; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.ft-legal li { margin: 0; }

@media screen and (max-width: 1199px) {
  .ft-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ft-about { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 32px; }
  .ft-about .ft-contact { grid-column: 2; grid-row: 1 / span 3; align-content: start; }
  .ft-badge { justify-self: start; }
}
@media screen and (max-width: 991px) {
  .ft-cta-inner { grid-template-columns: minmax(0, 1fr); }
  .ft-cta-item:first-child { padding-right: 0; }
  .ft-cta-item + .ft-cta-item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .ft-cta-item { flex-wrap: wrap; }
  .ft-cta-links { width: 100%; padding-left: 50px; }
  .ft-main { padding: 28px 0 12px; }
  .ft-about { display: block; }
  .ft-about .ft-contact { margin-top: 4px; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ft-col { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .ft-title { margin: 0; padding: 13px 0; cursor: pointer; pointer-events: auto; }
  .ft-title i { display: inline; font-size: 13px; color: #7f93a6; transition: transform .2s ease; }
  .ft-col[open] .ft-title i { transform: rotate(45deg); }
  .ft-col[open] .ft-links { padding-bottom: 8px; }
  .ft-mid { flex-direction: column; align-items: flex-start; }
  .ft-bottom-inner { flex-direction: column; text-align: center; }
  .ft-copy { text-align: center !important; }
  .ft-reg { display: block; margin: 3px 0 0; }
}

/* ===================== Home: driver sections (vehicle types, latest jobs, verification) ===================== */
.dv { padding: 72px 0; font-family: "Open Sans", Roboto, sans-serif; }
.dv-types-sec { background: #fff; }
.dv-jobs-sec { padding-top: 0; background: #fff; }
.dv-verify-sec { padding-top: 0; background: #fff; }
.dv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.dv-title { margin: 10px 0 8px; font-family: inherit; font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; color: #0d1b3e; }
.dv-sub { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.6; color: #5a6780; text-align: left !important; }
.dv-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #d9e0ea; border-radius: 999px; color: #0d1b3e; font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
.dv-link:hover { border-color: #0d2340; background: #f6f8fc; color: #0d1b3e; }

/* vehicle types */
.dv-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dv-types li { margin: 0; }
.dv-type { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px; border: 1px solid #e3e9f2; border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dv-type:hover { border-color: #f5c343; box-shadow: 0 14px 30px rgba(13, 35, 64, .08); transform: translateY(-2px); }
.dv-type-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: #fff6dc; color: #b07d00; font-size: 23px; transition: background .2s ease, color .2s ease; }
.dv-type:hover .dv-type-icon { background: #0d2340; color: #f5c343; }
.dv-type-body { flex: 1; min-width: 0; }
.dv-type-body strong { display: block; overflow: hidden; font-size: 15.5px; font-weight: 700; color: #0d1b3e; text-overflow: ellipsis; white-space: nowrap; }
.dv-type-body small { font-size: 13px; color: #6b7894; }
.dv-type-go { color: #a3adc2; font-size: 15px; transition: color .2s ease, transform .2s ease; }
.dv-type:hover .dv-type-go { color: #0d2340; transform: translate(2px, -2px); }

/* latest jobs: three detailed cards */
.dv-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dv-job {
  display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid #e3e9f2; border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(13, 35, 64, .04); transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.dv-job:hover { border-color: #cfd9e8; box-shadow: 0 22px 44px rgba(13, 35, 64, .1); transform: translateY(-3px); }
.dv-job-head { display: flex; align-items: center; gap: 14px; }
.dv-job-logo { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.dv-job-who { min-width: 0; }
.dv-job-title { margin: 0 0 3px; font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.25; }
.dv-job-title a { color: #0d1b3e; text-decoration: none; }
.dv-job-title a:hover { color: #1b5bff; }
.dv-job-company { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; color: #5a6780; text-align: left !important; }
.dv-job-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #18794e; }

.dv-job-salary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fff8e1 0%, #fff3cf 100%); }
.dv-job-salary-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: #b07d00; font-size: 18px; box-shadow: 0 2px 6px rgba(176, 125, 0, .15); }
.dv-job-salary small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8a6a12; }
.dv-job-salary strong { font-size: 17px; font-weight: 800; color: #0d1b3e; }

.dv-job-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-job-chips li { margin: 0; padding: 5px 11px; border-radius: 999px; background: #eef2f8; color: #3b4866; font-size: 12.5px; font-weight: 600; }
.dv-job-chips li:first-child { background: #0d2340; color: #fff; }

.dv-job-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding: 14px 0 0; border-top: 1px dashed #e3e9f2; list-style: none; }
.dv-job-facts li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin: 0; }
.dv-job-facts i { margin-top: 2px; color: #c28a00; font-size: 15px; }
.dv-job-facts span { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: #1d2433; overflow-wrap: anywhere; }
.dv-job-facts small { display: block; font-size: 11.5px; font-weight: 600; color: #8a94a6; }

.dv-job-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-job-perks li { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 10px; border-radius: 999px; background: #e7f6ee; color: #18794e; font-size: 12.5px; font-weight: 600; }

.dv-job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #edf1f6; }
.dv-job-posted { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7894; }
.dv-job-actions { display: flex; gap: 8px; }
.dv-job-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.dv-job-btn-ghost { border: 1px solid #d9e0ea; color: #0d1b3e !important; }
.dv-job-btn-ghost:hover { border-color: #0d2340; background: #f6f8fc; }
.dv-job-btn-primary { background: #0d2340; color: #fff !important; }
.dv-job-btn-primary:hover { background: #17406e; }

/* verification */
.dv-verify {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 48px;
  border-radius: 24px; color: rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 100% 0%, rgba(245, 195, 67, .18), transparent 40%), linear-gradient(135deg, #0d2340 0%, #0b2f57 100%);
}
.dv-verify-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(245, 195, 67, .15); color: #f5c343; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.dv-verify .dv-title { color: #fff; }
.dv-verify-intro p { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); text-align: left !important; }
.dv-verify-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; background: #f5c343; color: #0d1b3e !important; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s ease; }
.dv-verify-btn:hover { background: #ffd666; }
.dv-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dv-checks li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.dv-check-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(245, 195, 67, .15); color: #f5c343; font-size: 19px; }
.dv-checks strong { display: block; margin-bottom: 4px; font-size: 15.5px; color: #fff; }
.dv-checks span { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

@media screen and (max-width: 1199px) {
  .dv-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-jobs { gap: 14px; }
  .dv-job { padding: 18px; }
  .dv-job-facts { grid-template-columns: minmax(0, 1fr); }
  .dv-verify { gap: 32px; padding: 36px; }
}
@media screen and (max-width: 991px) {
  .dv { padding: 52px 0; }
  .dv-verify { grid-template-columns: minmax(0, 1fr); }
  /* jobs become a swipeable row */
  .dv-jobs { display: flex; margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 4px calc(var(--bs-gutter-x, 1.5rem) * .5) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .dv-jobs::-webkit-scrollbar { display: none; }
  .dv-job { flex: 0 0 min(380px, 72%); scroll-snap-align: start; }
  .dv-job:hover { transform: none; }
}
@media screen and (max-width: 767px) {
  .dv { padding: 40px 0; }
  .dv-title { font-size: 25px; }
  .dv-sub { font-size: 15px; }
  .dv-head { margin-bottom: 20px; }
  .dv-types { gap: 10px; }
  .dv-type { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .dv-type-icon { width: 42px; height: 42px; font-size: 19px; }
  .dv-type-go { position: absolute; top: 14px; right: 14px; }
  .dv-type-body strong { white-space: normal; }
  .dv-job { flex-basis: 86%; }
  .dv-verify { padding: 26px 18px; border-radius: 20px; }
  .dv-checks { grid-template-columns: minmax(0, 1fr); }
  .dv-verify-btn { width: 100%; justify-content: center; }
}

/* ===================== Home polish: alignment, rhythm, reviews, motion ===================== */
/* One content width down the page: header and hero already use 1440px on large screens */
@media screen and (min-width: 1400px) {
  .home-join > .container, .dv > .container, .hq > .container, .sp > .container,
  .ft .container { max-width: 1440px; }
}

/* one heading scale for every home section */
.home-explore-title, .home-join-title, .dv-title, .hq-title, .sp-title { font-size: 36px; letter-spacing: -.6px; }
@media screen and (max-width: 991px) {
  .home-explore-title, .home-join-title, .dv-title, .hq-title, .sp-title { font-size: 30px; }
}
@media screen and (max-width: 767px) {
  .home-explore-title, .home-join-title, .dv-title, .hq-title, .sp-title { font-size: 26px; letter-spacing: -.4px; }
}

/* alternate light/grey backgrounds so sections read as distinct blocks */
.dv-types-sec { background: #f6f8fc; }
.dv-jobs-sec { padding-top: 72px; }
@media screen and (max-width: 991px) { .dv-jobs-sec { padding-top: 52px; } }
@media screen and (max-width: 767px) { .dv-jobs-sec { padding-top: 40px; } }

/* ---- Motion: entrance on load + reveal on scroll ---- */
/* "from" only: each element animates back to its own styles (e.g. the faded hero photo on phones) */
@keyframes tp-rise { from { opacity: 0; transform: translateY(18px); } }
/* grows from its right edge so it never pokes past the viewport (.home-hero cannot clip overflow) */
@keyframes tp-slide-in { from { opacity: 0; transform: scale(.96); } }
@keyframes tp-fade { from { opacity: 0; } }

/* page load: header drops in, then the hero content rises in sequence */
/* header fades only: any transform on it, even mid-animation, would make its fixed-position
   menus (drawer, phone nav) position against the header and overflow the page.
   fill-mode backwards leaves nothing behind on the hero items either (.hero-search dropdown). */
header { animation: tp-fade .5s ease backwards; }
.home-hero .home-hero-bar,
.home-hero h1,
.home-hero .home-hero-sub,
.home-hero .hero-search,
.home-hero .hero-trust { animation: tp-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.home-hero .home-hero-bar { animation-delay: .1s; }
.home-hero h1 { animation-delay: .18s; }
.home-hero .home-hero-sub { animation-delay: .28s; }
.home-hero .hero-search { animation-delay: .38s; }
.home-hero .hero-trust { animation-delay: .5s; }
.home-hero .home-hero-photo { transform-origin: 100% 50%; animation: tp-slide-in .9s cubic-bezier(.2, .7, .2, 1) .2s backwards; }

/* scroll reveal: js/footer adds .rv to blocks below the fold, then .is-in when they enter */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-d, 0s); }
.rv.rv-zoom { transform: translateY(18px) scale(.97); }
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  header, .home-hero *, .hq-panel { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ===================== Home hero v2: text column + photo card (images/transport/hire-drivers.webp) ===================== */
/* background picks up the photo: clear sky blue on the left, warm sunset glow on the right */
.home-hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(640px 420px at 88% 8%, rgba(255, 196, 130, .3) 0%, rgba(255, 196, 130, 0) 70%),
    radial-gradient(900px 480px at 0% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #e4eef9 0%, #eef4fa 55%, #f6f8fc 100%);
}
/* two columns; the card stretches to the height of the text column, results span both */
.home-hero > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 470px); column-gap: 48px; align-items: stretch; }
.home-hero-content { grid-column: 1; grid-row: 1; max-width: none; align-self: center; }
.home-hero-photo { grid-column: 2; grid-row: 1; }
.home-hero > .container > .hd-results { grid-column: 1 / -1; grid-row: 2; }

.home-hero-photo {
  position: relative; top: auto; right: auto; bottom: auto; z-index: 1;
  width: auto; height: auto; min-height: 420px; margin: 0; overflow: hidden;
  border-radius: 28px; background: #c9d6e6;
  box-shadow: 0 30px 60px rgba(13, 35, 64, .2), 0 0 0 6px rgba(255, 255, 255, .7);
  -webkit-mask-image: none; mask-image: none; opacity: 1;
}
.home-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.home-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 35, 64, .18) 0%, rgba(13, 35, 64, 0) 22%, rgba(13, 35, 64, 0) 60%, rgba(13, 35, 64, .6) 100%); pointer-events: none; }

.home-hero-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: inherit; }
.home-hero-badge-top {
  top: 18px; left: 18px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #0d1b3e; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(13, 35, 64, .15);
}
.home-hero-badge-top i { color: #c28a00; font-size: 15px; }
.home-hero-badge-stat {
  left: 18px; right: 18px; bottom: 18px; gap: 12px; padding: 12px 16px; border-radius: 16px;
  background: rgba(13, 35, 64, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.home-hero-badge-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #f5c343; color: #0d1b3e; font-size: 18px; }
.home-hero-badge-stat strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }
.home-hero-badge-stat small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .78); }

/* text column */
.home-hero-title { max-width: 680px; margin-bottom: 18px; }
.home-hero-sub { max-width: 620px; margin-bottom: 36px; }
.home-hero .hero-search { box-shadow: 0 24px 50px rgba(13, 35, 64, .12); }
.home-hero .hero-search-btn { min-width: 168px; padding: 0 22px; }
/* narrower column than the old full-width bar: tighter fields, labels on one line */
.home-hero .hero-field { gap: 10px; padding: 0 14px; }
.home-hero .hero-search .hero-field-label { white-space: nowrap; }
.home-hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.home-hero-stats li { margin: 0; padding: 0 28px; border-left: 1px solid #d5deea; }
.home-hero-stats li:first-child { padding-left: 0; border-left: 0; }
.home-hero-stats strong { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; color: #0d1b3e; }
.home-hero-stats span { font-size: 13.5px; font-weight: 600; color: #5a6780; }

@media screen and (max-width: 1399px) {
  .home-hero > .container { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); column-gap: 36px; }
  .home-hero .hero-search-btn { min-width: 150px; padding: 0 20px; }
}
@media screen and (max-width: 1199px) {
  .home-hero { padding: 56px 0 48px; }
  .home-hero > .container { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 32px; }
  .home-hero-stats strong { font-size: 22px; }
  .home-hero-stats li { padding: 0 20px; }
}
/* tablet + phone: one column, card below the search */
@media screen and (max-width: 991px) {
  .home-hero { padding: 40px 0 36px; }
  .home-hero > .container { grid-template-columns: minmax(0, 1fr); }
  /* photo first on tablet/phone, then the headline and search */
  .home-hero-photo { grid-column: 1; grid-row: 1; min-height: 0; height: 340px; margin: 0 0 26px; }
  .home-hero-content { grid-row: 2; }
  .home-hero > .container > .hd-results { grid-row: 3; }
  .home-hero .home-hero-photo { transform-origin: 50% 50%; }
  .home-hero-title, .home-hero-sub { max-width: none; }
  .home-hero-badge-stat { left: auto; }
}
@media screen and (max-width: 767px) {
  .home-hero { padding: 26px 0 30px; }
  .home-hero-sub { margin-bottom: 22px; }
  .home-hero-stats { margin-top: 20px; }
  .home-hero-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
  .home-hero-stats li { padding: 0 10px; }
  .home-hero-stats strong { font-size: 16px; white-space: nowrap; }
  .home-hero-stats span { font-size: 12px; }
  .home-hero-photo { height: 240px; margin: 0 0 20px; border-radius: 20px; box-shadow: 0 18px 36px rgba(13, 35, 64, .18); }
  .home-hero-badge-top { top: 12px; left: 12px; padding: 6px 11px; font-size: 11.5px; }
  .home-hero-badge-stat { right: 12px; bottom: 12px; padding: 9px 12px; }
  .home-hero-badge-ico { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
  .home-hero-badge-stat strong { font-size: 14px; }
  .home-hero-badge-stat small { font-size: 11px; }
}

/* ===================== Home: vehicle types marquee (below the hero) ===================== */
.vm { padding: 18px 0; border-top: 1px solid #e3e9f2; border-bottom: 1px solid #e3e9f2; background: #fff; font-family: "Open Sans", Roboto, sans-serif; }
@media screen and (min-width: 1400px) { .vm > .container { max-width: 1440px; } }
.vm-inner { display: flex; align-items: center; gap: 20px; }
.vm-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding-right: 20px; border-right: 1px solid #e3e9f2; color: #0d1b3e; font-size: 14px; font-weight: 800; white-space: nowrap; }
.vm-label i { color: #c28a00; }
/* faded edges so chips slide in and out softly */
.vm-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.vm-track { display: flex; width: max-content; animation: vm-scroll 70s linear infinite; }
.vm-viewport:hover .vm-track, .vm-viewport:focus-within .vm-track { animation-play-state: paused; }
@keyframes vm-scroll { to { transform: translateX(-50%); } }
.vm-list { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.vm-list li { margin: 0; }
.vm-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid #e3e9f2; border-radius: 999px;
  background: #f6f8fc; color: #0d1b3e !important; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vm-chip i { color: #c28a00; font-size: 16px; transition: color .2s ease; }
.vm-chip:hover, .vm-chip:focus-visible { border-color: #0d2340; background: #0d2340; color: #fff !important; }
.vm-chip:hover i, .vm-chip:focus-visible i { color: #f5c343; }

@media screen and (max-width: 767px) {
  .vm { padding: 12px 0; }
  .vm-label { display: none; }
  .vm-track { animation-duration: 50s; }
  .vm-chip { height: 36px; padding: 0 13px; font-size: 13px; }
}
/* reduced motion: no auto-scroll, swipe instead */
@media (prefers-reduced-motion: reduce) {
  .vm-viewport { overflow-x: auto; }
  .vm-track { animation: none; }
  .vm-list[aria-hidden="true"] { display: none; }
}

/* hero photo: frosted-glass "Verified Drivers" label with a green tint */
.home-hero-badge-top {
  gap: 10px; padding: 7px 16px 7px 7px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, rgba(16, 98, 62, .62) 0%, rgba(24, 121, 78, .3) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  color: #fff; box-shadow: 0 10px 28px rgba(4, 28, 47, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* slow light sweep across the label */
.home-hero-badge-top::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); animation: hh-sheen 4.5s ease-in-out 1.5s infinite; pointer-events: none;
}
.home-hero-badge-top > i {
  position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #16a34a); color: #fff; font-size: 15px; text-shadow: none;
  animation: hh-pulse 2.4s ease-out infinite;
}
.home-hero-badge-top strong { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.15; letter-spacing: .2px; }
.home-hero-badge-top small { display: block; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .85); }
@keyframes hh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@keyframes hh-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* the whole card is a link to the app: lift, slow zoom, sheen sweep and a CTA on hover */
a.home-hero-photo { display: block; color: #fff; text-decoration: none; cursor: pointer; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
a.home-hero-photo img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.home-hero-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 1s ease;
}
/* the CTA takes the rating badge's place at the bottom on hover, so no faces are covered */
.home-hero-cta {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: #0d1b3e; font-size: 16px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 14px 30px rgba(4, 28, 47, .3); opacity: 0; transform: translateY(14px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.home-hero-badge-stat { transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.home-hero-cta i { color: #1b5bff; }
@media (hover: hover) {
  a.home-hero-photo:hover { transform: translateY(-6px); box-shadow: 0 40px 70px rgba(13, 35, 64, .28), 0 0 0 6px rgba(255, 255, 255, .8); }
  a.home-hero-photo:hover img { transform: scale(1.07); }
  a.home-hero-photo:hover .home-hero-shine { transform: translateX(120%); }
  a.home-hero-photo:hover .home-hero-cta { opacity: 1; transform: none; }
  a.home-hero-photo:hover .home-hero-badge-stat { opacity: 0; transform: translateY(14px); }
}
a.home-hero-photo:focus-visible { outline: 3px solid #f5c343; outline-offset: 4px; }
a.home-hero-photo:focus-visible .home-hero-cta { opacity: 1; transform: none; }
a.home-hero-photo:focus-visible .home-hero-badge-stat { opacity: 0; }

@media screen and (max-width: 767px) {
  .home-hero-badge-top { gap: 8px; padding: 5px 12px 5px 5px; }
  .home-hero-badge-top > i { width: 24px; height: 24px; font-size: 12px; }
  .home-hero-badge-top strong { font-size: 12px; }
  .home-hero-badge-top small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-badge-top::after, .home-hero-badge-top > i { animation: none; }
  a.home-hero-photo, a.home-hero-photo img, .home-hero-shine, .home-hero-cta { transition: none; }
}

/* ===================== Floating hire + WhatsApp buttons (footer.php) ===================== */
.ghw-tab, .whatsapp-float {
  position: fixed; right: 22px; z-index: 1040; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  font-family: "Open Sans", Roboto, sans-serif; cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
/* hidden until the inline script adds .ghw-visible (see footer.php) */
.ghw-tab { display: none; bottom: 96px; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(145deg, #17406e 0%, #041c2f 100%); color: #f5c343; line-height: 1;
  box-shadow: 0 10px 26px rgba(4, 28, 47, .38), inset 0 1px 0 rgba(255, 255, 255, .15); }
.ghw-tab.ghw-visible { display: flex; }
.ghw-tab .ghw-ico { font-size: 19px; }
.ghw-tab .ghw-label { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; }
/* soft pulse ring so the button is noticed without shouting */
.ghw-tab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(245, 195, 67, .55); animation: fab-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 195, 67, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(245, 195, 67, 0); } }

.whatsapp-float { bottom: 26px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #34d97a 0%, #1ebe5b 100%); color: #fff !important; text-decoration: none;
  box-shadow: 0 10px 26px rgba(30, 190, 91, .4), inset 0 1px 0 rgba(255, 255, 255, .25); }
.whatsapp-float > i { font-size: 28px; line-height: 1; }

/* small info card that slides out to the left on hover */
.fab-tip {
  position: absolute; top: 50%; right: calc(100% + 14px); display: flex; flex-direction: column; gap: 1px; padding: 10px 14px;
  border: 1px solid #e3e9f2; border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(13, 35, 64, .18);
  text-align: left; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(8px, -50%);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1), visibility .2s; pointer-events: none;
}
.fab-tip::after { content: ""; position: absolute; top: 50%; right: -6px; width: 11px; height: 11px; margin-top: -5.5px; border-top: 1px solid #e3e9f2; border-right: 1px solid #e3e9f2; background: #fff; transform: rotate(45deg); }
.fab-tip strong { font-size: 13.5px; font-weight: 800; color: #0d1b3e; text-transform: none; letter-spacing: 0; }
.fab-tip small { font-size: 12px; font-weight: 600; color: #6b7894; text-transform: none; letter-spacing: 0; }
@media (hover: hover) {
  .ghw-tab:hover, .whatsapp-float:hover { transform: translateY(-3px) scale(1.05); }
  .ghw-tab:hover { box-shadow: 0 16px 34px rgba(4, 28, 47, .45); }
  .whatsapp-float:hover { box-shadow: 0 16px 34px rgba(30, 190, 91, .5); }
  .ghw-tab:hover .fab-tip, .whatsapp-float:hover .fab-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
}
.ghw-tab:focus-visible, .whatsapp-float:focus-visible { outline: 3px solid #f5c343; outline-offset: 3px; }
.ghw-tab:focus-visible .fab-tip, .whatsapp-float:focus-visible .fab-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (max-width: 576px) {
  .ghw-tab, .whatsapp-float { right: 14px; width: 52px; height: 52px; }
  .ghw-tab { bottom: 82px; }
  .whatsapp-float { bottom: 18px; }
  .whatsapp-float > i { font-size: 25px; }
  .fab-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ghw-tab::before { animation: none; } }

/* ===================== Hire popup (#globalHireModal) ===================== */
.gh-modal .modal-dialog { max-width: 500px; }
.gh-modal .modal-content { overflow: hidden; border: 0; border-radius: 22px; font-family: "Open Sans", Roboto, sans-serif; box-shadow: 0 40px 80px rgba(4, 28, 47, .35); }
.gh-modal.fade .modal-dialog { transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.gh-modal.show .modal-dialog { transform: none; }
.gh-head {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 22px 56px 20px 22px; color: #fff;
  background: radial-gradient(circle at 100% 0%, rgba(245, 195, 67, .25), transparent 45%), linear-gradient(135deg, #0d2340 0%, #17406e 100%);
}
.gh-head-ico { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #f5c343; color: #0d1b3e; font-size: 22px; }
.gh-title { margin: 2px 0 4px; font-family: inherit; font-size: 20px; font-weight: 800; color: #fff; }
.gh-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); text-align: left !important; }
.gh-close { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; cursor: pointer; transition: background .15s ease, transform .2s ease; }
.gh-close:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg); }

.gh-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-bottom: 1px solid #edf1f6; background: #f6f8fc; list-style: none; counter-reset: gh; }
.gh-steps li { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 11px 6px; font-size: 12.5px; font-weight: 700; color: #3b4866; }
.gh-steps li + li { border-left: 1px solid #edf1f6; }
.gh-steps span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #0d2340; color: #f5c343; font-size: 11px; font-weight: 800; }

.gh-body { padding: 20px 22px 6px; }
.gh-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gh-span-2 { grid-column: 1 / -1; }
.gh-field { display: block; margin: 0; font-weight: 400; }
.gh-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #1d2433; }
.gh-label em { font-style: normal; color: #d64545; }
.gh-input { position: relative; display: block; }
.gh-input > i { position: absolute; top: 14px; left: 14px; z-index: 2; color: #8a94a6; font-size: 15px; pointer-events: none; transition: color .15s ease; }
.gh-input input {
  display: block; width: 100%; height: 46px; margin: 0; padding: 0 14px 0 40px; border: 1px solid #dde4ee; border-radius: 12px; outline: 0;
  background: #fbfcfe; box-shadow: none; color: #0d1b3e; font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gh-input input::placeholder { color: #a3adc2; opacity: 1; }
.gh-input input:focus { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 4px rgba(245, 195, 67, .3); }
.gh-input:focus-within > i { color: #0d2340; }
/* select2 vehicle picker, made to match the inputs */
.gh-input .select2-container { display: block; }
.gh-input .select2-container .select2-selection--single { height: 46px; border: 1px solid #dde4ee; border-radius: 12px; background: #fbfcfe; outline: 0; }
.gh-input .select2-container--open .select2-selection--single, .gh-input .select2-container--focus .select2-selection--single { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 4px rgba(245, 195, 67, .3); }
.gh-input .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 40px; padding-right: 34px; line-height: 44px; font-size: 14.5px; color: #0d1b3e; }
.gh-input .select2-container .select2-selection__placeholder, .gh-input .select2-container .select2-selection__rendered[title=""] { color: #a3adc2; }
.gh-input .select2-container .select2-selection--single .select2-selection__arrow { top: 9px; right: 10px; height: 26px; }
/* jQuery Validate */
.gh-input input.error { border-color: #d64545; }
.gh-input input.valid { border-color: #dde4ee; }
.gh-input label.error { display: block; margin: 5px 0 0; font-size: 12px; font-weight: 600; color: #d64545; }

.gh-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 52px; margin-top: 18px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #f5c343 0%, #ffd666 100%); color: #0d1b3e; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 24px rgba(245, 195, 67, .35); transition: transform .15s ease, box-shadow .15s ease;
}
.gh-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(245, 195, 67, .45); }
.gh-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.gh-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 16px !important; font-size: 12.5px; color: #6b7894; text-align: center !important; }
.gh-form .alert { margin-bottom: 12px; }
.gh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; padding: 13px 18px; border-top: 1px solid #edf1f6; background: #fafbfd; font-size: 13.5px; color: #5e6b85; }
.gh-foot a { display: inline-flex; align-items: center; gap: 6px; color: #0d1b3e; font-weight: 700; text-decoration: none; }
.gh-foot a:hover { color: #c28a00; }
.gh-foot-wa i { color: #1ebe5b; }
@media (max-width: 576px) {
  .gh-modal .modal-dialog { margin: 12px; }
  .gh-head { padding: 18px 52px 16px 16px; }
  .gh-body { padding: 16px 16px 4px; }
  .gh-row { grid-template-columns: minmax(0, 1fr); }
  .gh-steps li { flex-direction: column; gap: 4px; font-size: 11.5px; text-align: center; }
}

/* Hire popup: vehicle dropdown (select2, opened inside the modal) */
/* field icons sit just above their own input, never above the open list */
.gh-input > i { z-index: 1; }
#globalHireModal .select2-container--open { z-index: 1065; }
.gh-input .select2-container .select2-selection--single .select2-selection__arrow { top: 10px; right: 12px; width: 18px; height: 26px; }
.gh-input .select2-container .select2-selection--single .select2-selection__arrow b {
  width: 8px; height: 8px; margin: -6px 0 0 -4px; border: solid #8a94a6; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease;
}
.gh-input .select2-container--open .select2-selection--single .select2-selection__arrow b { margin-top: -2px; border-color: #0d2340; border-width: 0 2px 2px 0; transform: rotate(-135deg); }

#globalHireModal .select2-dropdown {
  overflow: hidden; margin-top: 6px; border: 1px solid #dde4ee !important; border-radius: 14px !important;
  background: #fff; box-shadow: 0 18px 40px rgba(13, 35, 64, .18); font-family: "Open Sans", Roboto, sans-serif;
}
#globalHireModal .select2-dropdown--above { margin-top: -6px; }
#globalHireModal .select2-search--dropdown { position: relative; padding: 10px 10px 6px; }
#globalHireModal .select2-search--dropdown::before {
  content: "\F52A"; position: absolute; top: 50%; left: 22px; margin-top: 2px; transform: translateY(-50%);
  font-family: "bootstrap-icons"; font-size: 14px; color: #8a94a6; pointer-events: none;
}
#globalHireModal .select2-search--dropdown .select2-search__field {
  height: 40px; padding: 0 12px 0 36px; border: 1px solid #dde4ee; border-radius: 10px; outline: 0; background: #f6f8fc; font-size: 14px; color: #0d1b3e;
}
#globalHireModal .select2-search--dropdown .select2-search__field:focus { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 3px rgba(245, 195, 67, .3); }
#globalHireModal .select2-results > .select2-results__options { max-height: 232px; padding: 4px 6px 8px; }
#globalHireModal .select2-results__option { margin: 1px 0; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: #1d2433; }
/* the "Select vehicle type" placeholder is not a real choice */
#globalHireModal .select2-results__option[aria-disabled="true"] { display: none; }
#globalHireModal .select2-results__option--highlighted[aria-selected],
#globalHireModal .select2-results__option--highlighted { background: #fff6dc !important; color: #0d1b3e !important; }
#globalHireModal .select2-results__option[aria-selected="true"] { background: #0d2340; color: #fff; font-weight: 700; }
#globalHireModal .select2-results__option[aria-selected="true"].select2-results__option--highlighted { background: #17406e !important; color: #fff !important; }
#globalHireModal .select2-results__message { color: #6b7894; }

/* Home quote form: searchable vehicle dropdown (select2, dropdownParent = .hq-input) */
.hq-input > i { z-index: 2; }
.hq-input .select2-container { display: block; }
.hq-input .select2-container .select2-selection--single { height: 48px; border: 1px solid #dde4ee; border-radius: 12px; background: #fbfcfe; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.hq-input .select2-container:hover .select2-selection--single { border-color: #c9d3e1; }
.hq-input .select2-container--open .select2-selection--single, .hq-input .select2-container--focus .select2-selection--single { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 4px rgba(245, 195, 67, .3); }
.hq-input .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 42px; padding-right: 36px; line-height: 46px; font-size: 15px; color: #0d1b3e; }
.hq-input .select2-container .select2-selection__placeholder { color: #a3adc2; }
.hq-input .select2-container .select2-selection--single .select2-selection__arrow { top: 11px; right: 12px; width: 18px; height: 26px; }
.hq-input .select2-container .select2-selection--single .select2-selection__arrow b { width: 8px; height: 8px; margin: -6px 0 0 -4px; border: solid #8a94a6; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
.hq-input .select2-container--open .select2-selection--single .select2-selection__arrow b { margin-top: -2px; border-color: #0d2340; border-width: 0 2px 2px 0; transform: rotate(-135deg); }
/* the open list: pinned under the field (beats select2's inline position and the
   stray global `.select2-dropdown{left:-37px!important;width:222.6px!important;z-index:1!important}`) */
.hq-input > .select2-container:not(.select2) { top: 100% !important; left: 0 !important; width: 100% !important; z-index: 30 !important; }
.hq-input .select2-dropdown {
  position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 30 !important;
  overflow: hidden; margin-top: 6px; border: 1px solid #dde4ee !important; border-radius: 14px !important; background: #fff; box-shadow: 0 18px 40px rgba(13, 35, 64, .18);
}
.hq-input .select2-search--dropdown { position: relative; padding: 10px 10px 6px; }
.hq-input .select2-search--dropdown::before { content: "\F52A"; position: absolute; top: 50%; left: 22px; margin-top: 2px; transform: translateY(-50%); font-family: "bootstrap-icons"; font-size: 14px; color: #8a94a6; pointer-events: none; }
.hq-input .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 12px 0 36px; border: 1px solid #dde4ee; border-radius: 10px; outline: 0; background: #f6f8fc; font-size: 14px; color: #0d1b3e; }
.hq-input .select2-search--dropdown .select2-search__field:focus { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 3px rgba(245, 195, 67, .3); }
.hq-input .select2-results > .select2-results__options { max-height: 240px; padding: 4px 6px 8px; }
.hq-input .select2-results__option { margin: 1px 0; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: #1d2433; }
.hq-input .select2-results__option[aria-disabled="true"] { display: none; }
.hq-input .select2-results__option--highlighted { background: #fff6dc !important; color: #0d1b3e !important; }
.hq-input .select2-results__option[aria-selected="true"] { background: #0d2340; color: #fff; font-weight: 700; }
.hq-input .select2-results__option[aria-selected="true"].select2-results__option--highlighted { background: #17406e !important; color: #fff !important; }
/* jQuery Validate places its message right after the hidden <select>; keep it under the box */
.hq-input select.error ~ .select2-container .select2-selection--single { border-color: #d64545; }
.hq-input:has(> select) { display: flex; flex-direction: column; }
.hq-input:has(> select) > .select2-container.select2 { order: 1; }
.hq-input:has(> select) > label.error { order: 2; }

/* ===================== Home: reviews (home/_reviews.php) ===================== */
.rvw {
  padding: 72px 0; overflow: hidden; font-family: "Open Sans", Roboto, sans-serif; color: rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 100% 0%, rgba(245, 195, 67, .14), transparent 40%), linear-gradient(135deg, #041c2f 0%, #0b2f57 100%);
}
@media screen and (min-width: 1400px) { .rvw > .container { max-width: 1440px; } }
.rvw-head { max-width: 760px; margin-bottom: 32px; }
.rvw-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #f5c343; }
.rvw-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: #f5c343; }
.rvw-title { margin: 10px 0 10px; font-family: inherit; font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -.6px; color: #fff; }
.rvw-sub { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .75); text-align: left !important; }

.rvw-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: stretch; }

/* rating summary */
.rvw-score { display: flex; flex-direction: column; padding: 26px; border-radius: 20px; background: #fff; color: #0d1b3e; box-shadow: 0 24px 50px rgba(0, 0, 0, .25); }
.rvw-score-top { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #edf1f6; }
.rvw-num { font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: #0d1b3e; }
.rvw-score-stars { display: block; font-size: 20px; letter-spacing: 2px; color: #f5c343; }
.rvw-score-top small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #6b7894; }
.rvw-bars { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.rvw-bars li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; color: #4a5875; }
.rvw-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #eef2f8; }
.rvw-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5c343, #ffd666); }
.rvw-bars li:nth-child(n+4) .rvw-bar span { background: #9aa6ba; }
.rvw-score-note { display: flex; align-items: center; gap: 8px; margin: auto 0 0 !important; padding-top: 14px; border-top: 1px solid #edf1f6; font-size: 12.5px; font-weight: 600; color: #4a5875; text-align: left !important; }
.rvw-score-note i { color: #18794e; }

/* two rows of testimonial cards drifting in opposite directions */
.rvw-rows { display: grid; gap: 16px; min-width: 0; align-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.rvw-row { overflow: hidden; }
.rvw-track { display: flex; gap: 16px; width: max-content; margin: 0; padding: 0; list-style: none; animation: rvw-scroll 60s linear infinite; }
.rvw-row-rev .rvw-track { animation-direction: reverse; animation-duration: 70s; }
.rvw-rows:hover .rvw-track { animation-play-state: paused; }
@keyframes rvw-scroll { to { transform: translateX(calc(-50% - 8px)); } }
.rvw-card { flex: 0 0 340px; margin: 0; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .06); transition: background .2s ease, border-color .2s ease; }
.rvw-card:hover { border-color: rgba(245, 195, 67, .4); background: rgba(255, 255, 255, .1); }
.rvw-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rvw-card-head img { flex-shrink: 0; width: 44px; height: 44px; border: 2px solid rgba(245, 195, 67, .5); border-radius: 50%; object-fit: cover; background: #1b3a5f; }
.rvw-card-head > div { flex: 1; min-width: 0; }
.rvw-card-head strong { display: block; overflow: hidden; font-size: 15px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.rvw-card-head small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.rv-stars { flex-shrink: 0; font-size: 14px; letter-spacing: 1px; color: #f5c343; }
.rv-star-off { color: rgba(255, 255, 255, .2); }
.rvw-card p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .82); text-align: left !important; }

@media screen and (max-width: 991px) {
  .rvw { padding: 52px 0; }
  .rvw-grid { grid-template-columns: minmax(0, 1fr); }
  .rvw-score { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
  .rvw-score-top { padding: 0; border: 0; }
  .rvw-bars { flex: 1; min-width: 240px; margin: 0; }
  .rvw-score-note { flex-basis: 100%; margin: 0 !important; }
}
@media screen and (max-width: 767px) {
  .rvw { padding: 40px 0; }
  .rvw-title { font-size: 26px; letter-spacing: -.4px; }
  .rvw-sub { font-size: 15px; }
  .rvw-head { margin-bottom: 22px; }
  .rvw-score { padding: 20px; }
  .rvw-num { font-size: 48px; }
  .rvw-card { flex-basis: 280px; padding: 16px; }
  .rvw-track { animation-duration: 45s; }
  .rvw-row-rev .rvw-track { animation-duration: 52s; }
}
@media (prefers-reduced-motion: reduce) {
  .rvw-row { overflow-x: auto; }
  .rvw-track { animation: none; }
  .rvw-card[aria-hidden="true"] { display: none; }
}

/* ===================== Our clients (common/clients.php) ===================== */
.cl { padding: 72px 0; overflow: hidden; background: #f6f8fc; font-family: "Open Sans", Roboto, sans-serif; }
@media screen and (min-width: 1400px) { .cl > .container { max-width: 1440px; } }
.cl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: 34px; }
.cl-title { margin: 10px 0 8px; font-family: inherit; font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -.6px; color: #0d1b3e; }
.cl-sub { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.6; color: #5a6780; text-align: left !important; }

/* two rows drifting in opposite directions, edges faded */
.cl-rows { display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.cl-row { overflow: hidden; }
.cl-track { display: flex; gap: 16px; width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: cl-scroll 55s linear infinite; }
.cl-row-rev .cl-track { animation-direction: reverse; animation-duration: 62s; }
.cl-rows:hover .cl-track { animation-play-state: paused; }
@keyframes cl-scroll { to { transform: translateX(calc(-50% - 8px)); } }
.cl-logo {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 190px; height: 96px; margin: 0; padding: 16px 22px;
  border: 1px solid #e3e9f2; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(13, 35, 64, .04);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cl-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(.95); opacity: .7; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.cl-logo:hover { border-color: #f5c343; box-shadow: 0 14px 28px rgba(13, 35, 64, .1); transform: translateY(-3px); }
.cl-logo:hover img { filter: none; opacity: 1; transform: scale(1.04); }

@media screen and (max-width: 991px) { .cl { padding: 52px 0; } .cl-title { font-size: 30px; } }
@media screen and (max-width: 767px) {
  .cl { padding: 40px 0; }
  .cl-head { margin-bottom: 22px; }
  .cl-title { font-size: 26px; letter-spacing: -.4px; }
  .cl-sub { font-size: 15px; }
      .cl-logo { width: 150px; height: 80px; padding: 12px 16px; border-radius: 14px; }
  /* phones can't hover: show logos in colour */
  .cl-logo img { filter: none; opacity: 1; }
  .cl-track { animation-duration: 40s; }
  .cl-row-rev .cl-track { animation-duration: 46s; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-row { overflow-x: auto; }
  .cl-track { animation: none; }
  .cl-logo[aria-hidden="true"] { display: none; }
}

/* ===================== Home: loading performance ===================== */
/* Sections below the hero are not laid out or painted until they near the viewport;
   "auto" remembers each section's real height once rendered, so scrolling stays stable. */
.home-explore, .home-join, .dv-types-sec, .dv-jobs-sec, .dv-verify-sec, .hq, .rvw, .cl, .sp, .ft {
  content-visibility: auto; contain-intrinsic-size: auto 720px;
}
/* "Latest driver jobs" placeholders until the on-scroll fetch returns */
.dv-job-skeleton { gap: 14px; min-height: 380px; pointer-events: none; }
.dv-job-skeleton span { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #eef2f8 25%, #f7f9fc 50%, #eef2f8 75%); background-size: 200% 100%; animation: dv-shimmer 1.4s ease-in-out infinite; }
.dv-job-skeleton span:nth-child(1) { width: 50px; height: 50px; border-radius: 14px; }
.dv-job-skeleton span:nth-child(2) { width: 70%; height: 18px; }
.dv-job-skeleton span:nth-child(3) { height: 58px; border-radius: 14px; }
.dv-job-skeleton span:nth-child(4) { width: 85%; margin-top: auto; height: 40px; border-radius: 10px; }
@keyframes dv-shimmer { to { background-position: -200% 0; } }
.dv-jobs.is-loaded .dv-job { animation: dv-in .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.dv-jobs.is-loaded .dv-job:nth-child(2) { animation-delay: .07s; }
.dv-jobs.is-loaded .dv-job:nth-child(3) { animation-delay: .14s; }
@keyframes dv-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .dv-job-skeleton span, .dv-jobs.is-loaded .dv-job { animation: none; } }

/* ===================== Mobile polish: reviews, clients, join cards (phones only; desktop untouched) ===================== */
@media screen and (max-width: 767px) {
  /* --- Reviews: compact rating strip + tighter cards --- */
  .rvw { padding: 36px 0; }
  .rvw-head { margin-bottom: 18px; }
  .rvw-title { font-size: 24px; }
  .rvw-sub { font-size: 14px; line-height: 1.55; }
  .rvw-grid { gap: 18px; }
  .rvw-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; border-radius: 16px; }
  .rvw-score-top { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 16px 0 0; border: 0; border-right: 1px solid #edf1f6; }
  .rvw-num { font-size: 42px; letter-spacing: -1.5px; }
  .rvw-score-stars { font-size: 14px; letter-spacing: 1px; }
  .rvw-score-top small { font-size: 11px; }
  .rvw-bars { min-width: 0; gap: 6px; margin: 0; }
  .rvw-bars li { grid-template-columns: 26px 1fr; gap: 8px; font-size: 11.5px; }
  .rvw-bar { height: 6px; }
  .rvw-score-note { display: none; }
  .rvw-rows { gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
  .rvw-track { gap: 10px; }
  .rvw-card { flex-basis: 248px; padding: 14px; border-radius: 14px; }
  .rvw-card-head { gap: 10px; margin-bottom: 8px; }
  .rvw-card-head img { width: 36px; height: 36px; }
  .rvw-card-head strong { font-size: 13.5px; }
  .rvw-card-head small { font-size: 11px; }
  .rv-stars { font-size: 11px; }
  .rvw-card p { font-size: 13px; line-height: 1.5; }

  /* --- Clients: smaller tiles, more logos per screen --- */
  .cl { padding: 36px 0; }
  .cl-head { margin-bottom: 18px; }
  .cl-title { font-size: 24px; }
  .cl-sub { font-size: 14px; line-height: 1.55; }
  .cl-rows { gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
  .cl-track { gap: 10px; padding: 2px 0; }
  .cl-logo { width: 124px; height: 64px; padding: 10px 14px; border-radius: 12px; box-shadow: none; }

  /* --- Join cards: icon beside the title, tighter list, buttons side by side --- */
  .home-join { padding: 36px 0; }
  .home-join-head { margin-bottom: 18px; }
  .home-join-title { font-size: 24px; }
  .home-join-sub { font-size: 14px; }
  .home-join-grid { gap: 14px; }
  .join-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 18px 16px; border-radius: 16px; }
  .join-icon { grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; margin: 0; border-radius: 12px; font-size: 20px; }
  .join-tag { margin-bottom: 2px; font-size: 11px; letter-spacing: .6px; }
  .join-card h3 { margin: 0; font-size: 19px; }
  .join-points { grid-column: 1 / -1; gap: 7px; margin: 14px 0 16px; }
  .join-points li { gap: 8px; font-size: 13.5px; line-height: 1.45; }
  .join-points i { font-size: 14px; }
  .join-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .join-btn { flex: 1 1 0; width: auto; min-width: 0; height: 44px; padding: 0 8px; gap: 6px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .join-btn .bi-arrow-right { display: none; }
  .join-mark { display: none; }
}

/* ===================== Menu drawer: wide desktop layout (everything visible without scrolling) ===================== */
@media screen and (min-width: 992px) {
  .dm-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
    width: min(1240px, 96vw);
  }
  .dm-head, .dm-actions, .dm-groups { grid-column: 1 / -1; }
  .dm-head { padding: 16px 32px; }
  .dm-actions { padding: 20px 32px 4px; }
  /* the four link groups side by side */
  .dm-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; padding: 12px 32px 16px; }
  .dm-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dm-group { padding: 8px 0; }
  .dm-link { padding: 6px 10px; font-size: 14.5px; }
  /* Sonpra card and contact links share the bottom row */
  .dm-sonpra { grid-column: 1; align-self: stretch; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; margin: 0 0 20px 32px; }
  .dm-sonpra img { grid-row: 1; }
  .dm-sonpra span { grid-row: 1; }
  .dm-sonpra strong { grid-row: 1; white-space: nowrap; }
  .dm-contact { grid-column: 2; align-self: stretch; align-content: center; margin: 0 32px 20px 0; padding: 0 0 0 4px; border-top: 0; background: transparent; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .dm-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-sonpra, .dm-contact { grid-column: 1 / -1; margin: 0 32px 14px; }
}

/* ===================== Menu drawer: groups as dropdowns, login card, opening animation ===================== */
.dm-group > summary { list-style: none; }
.dm-group > summary::-webkit-details-marker { display: none; }
.dm-group-caret { display: none; margin-left: auto; color: #8a94a6 !important; font-size: 13px !important; transition: transform .25s ease; }
@media screen and (min-width: 992px) { .dm-group > summary { cursor: default; } }
.dm-action-navy { border-color: #0d2340; background: #0d2340; color: #fff; }
.dm-action-navy:hover { border-color: #17406e; background: #17406e; color: #fff; }
.dm-action-navy small { color: rgba(255, 255, 255, .7); }
.dm-action-navy .dm-action-ico { background: #f5c343; color: #0d1b3e; }

/* tablet + phone: one menu; important actions first, then tap-to-open groups */
@media screen and (max-width: 991px) {
  .dm-panel { width: min(480px, 100vw); }
  .dm-head { padding: 14px 18px; }
  .dm-head img { width: 140px; }
  .dm-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 18px 8px; }
  .dm-action { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .dm-action strong { font-size: 13.5px; }
  .dm-action small { font-size: 11px; }
  .dm-action-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .dm-groups { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 18px 12px; }
  .dm-group { padding: 0; border-bottom: 1px solid #edf0f4; }
  .dm-group > summary { margin: 0; padding: 15px 0; border-bottom: 0; color: #0d1b3e; font-size: 13px; cursor: pointer; }
  .dm-group-caret { display: inline-block; }
  .dm-group[open] .dm-group-caret { transform: rotate(180deg); }
  .dm-group-links { padding: 0 0 10px; }
  .dm-group[open] .dm-group-links { animation: dm-drop .25s ease; }
  .dm-link { padding: 9px 10px; font-size: 14.5px; }
  .dm-sonpra { margin: 14px 18px; }
  .dm-contact { padding: 14px 18px; }
}
@keyframes dm-drop { from { opacity: 0; transform: translateY(-6px); } }

/* opening animation: panel slides in (existing), its contents rise in sequence */
@keyframes dm-rise { from { opacity: 0; transform: translateY(14px); } }
.desktop-menu.active .dm-head,
.desktop-menu.active .dm-action,
.desktop-menu.active .dm-group,
.desktop-menu.active .dm-sonpra,
.desktop-menu.active .dm-contact { animation: dm-rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
.desktop-menu.active .dm-head { animation-delay: .05s; }
.desktop-menu.active .dm-action:nth-child(1) { animation-delay: .1s; }
.desktop-menu.active .dm-action:nth-child(2) { animation-delay: .14s; }
.desktop-menu.active .dm-action:nth-child(3) { animation-delay: .18s; }
.desktop-menu.active .dm-action:nth-child(4) { animation-delay: .22s; }
.desktop-menu.active .dm-group:nth-child(1) { animation-delay: .24s; }
.desktop-menu.active .dm-group:nth-child(2) { animation-delay: .28s; }
.desktop-menu.active .dm-group:nth-child(3) { animation-delay: .32s; }
.desktop-menu.active .dm-group:nth-child(4) { animation-delay: .36s; }
.desktop-menu.active .dm-group:nth-child(n+5) { animation-delay: .4s; }
.desktop-menu.active .dm-sonpra, .desktop-menu.active .dm-contact { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .desktop-menu.active .dm-head, .desktop-menu.active .dm-action, .desktop-menu.active .dm-group,
  .desktop-menu.active .dm-sonpra, .desktop-menu.active .dm-contact, .dm-group[open] .dm-group-links { animation: none; }
}

/* Menu drawer, desktop: height fits its content (no empty white area below the links) */
@media screen and (min-width: 992px) {
  .dm-panel { bottom: auto; max-height: 100vh; border-bottom-left-radius: 24px; }
  .dm-sonpra, .dm-contact { margin-bottom: 24px; }
}

/* ===================== Header: "Hire Drivers" mega menu (tabs + filter + promo) ===================== */
.mega-menu { padding: 0; border-top: 3px solid #f5c343; box-shadow: 0 24px 50px rgba(13, 35, 64, .16); font-family: "Open Sans", Roboto, sans-serif; }
.mega-menu.mega-open { display: block; animation: mm-in .22s ease; }
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } }
.mm { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; max-width: 1440px; margin: 0 auto; max-height: min(560px, calc(100vh - 140px)); }

.mm-tabs { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; border-right: 1px solid #edf1f6; background: #f8fafd; }
.mm-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: #3b4866; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mm-tab i { color: #8a94a6; font-size: 16px; }
.mm-tab small { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #e9eef6; color: #6b7894; font-size: 11.5px; font-weight: 700; }
.mm-tab:hover { background: #eef2f8; color: #0d1b3e; }
.mm-tab.is-active { background: #0d2340; color: #fff; }
.mm-tab.is-active i { color: #f5c343; }
.mm-tab.is-active small { background: rgba(255, 255, 255, .14); color: #fff; }
.mm-all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 12px; color: #1b5bff !important; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.mm-all:hover { text-decoration: underline; }

.mm-main { min-width: 0; padding: 18px 26px 20px; overflow-y: auto; overscroll-behavior: contain; }
.mm-search { position: sticky; top: -18px; z-index: 1; display: block; margin: -18px -26px 14px; padding: 18px 26px 10px; background: #fff; }
.mm-search i { position: absolute; top: 31px; left: 41px; color: #8a94a6; font-size: 14px; pointer-events: none; }
.mm-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid #dde4ee; border-radius: 12px; outline: 0; background: #f6f8fc; color: #0d1b3e; font-size: 14px; }
.mm-search input:focus { border-color: #0d2340; background: #fff; box-shadow: 0 0 0 3px rgba(245, 195, 67, .3); }
.mm-panel[hidden] { display: none; }
.mm-panel-title { display: none; margin: 4px 0 8px !important; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8a94a6; text-align: left !important; }
/* while searching, every tab with matches is shown, each under its own title */
.mega-menu.is-searching .mm-panel-title { display: block; }
.mega-menu.is-searching .mm-panel + .mm-panel:not([hidden]) { margin-top: 12px; }
.mm-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 14px; }
.mm-links-city { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega-menu .mm-links a { display: block; overflow: hidden; padding: 7px 10px; border-radius: 8px; color: #24324f; font-size: 13.5px; font-weight: 500; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.mega-menu .mm-links a:hover { padding-left: 10px; background: #fff6dc; color: #0d1b3e; }
.mega-menu .mm-links a[hidden] { display: none; }
.mm-empty { margin: 16px 0 0 !important; font-size: 14px; color: #6b7894; text-align: left !important; }

.mm-promo { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; color: rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 100% 0%, rgba(245, 195, 67, .2), transparent 45%), linear-gradient(160deg, #0d2340 0%, #0b2f57 100%); }
.mm-promo-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(245, 195, 67, .16); color: #f5c343; font-size: 20px; }
.mm-promo strong { font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.mm-promo p { margin: 0 !important; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); text-align: left !important; }
.mega-menu .mm-promo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 6px; padding: 0; border-radius: 12px; background: #f5c343; color: #0d1b3e !important; font-size: 14.5px; font-weight: 800; text-decoration: none; transition: background .15s ease; }
.mega-menu .mm-promo-btn:hover { padding-left: 0; background: #ffd666; }
.mega-menu .mm-promo-link, .mega-menu .mm-promo-call { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: #fff !important; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.mega-menu .mm-promo-link:hover, .mega-menu .mm-promo-call:hover { padding-left: 0; color: #f5c343 !important; }
.mega-menu .mm-promo-call { margin-top: auto; color: rgba(255, 255, 255, .85) !important; }
.mm-promo-call i { color: #f5c343; }

@media screen and (max-width: 1399px) {
  .mm { grid-template-columns: 210px minmax(0, 1fr) 250px; }
  .mm-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-links-city { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 1199px) {
  .mm { grid-template-columns: 190px minmax(0, 1fr); }
  .mm-promo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mega-menu.mega-open { animation: none; } }

/* Mega menu: contained, stable layout */
.mega-menu { background: #fff; }
/* fixed height capped to the screen; only the links column scrolls */
.mm { grid-template-rows: minmax(0, 1fr); height: min(500px, calc(100vh - 130px)); max-height: none; overflow: hidden; }
.mm-tabs, .mm-promo { min-height: 0; overflow: hidden; }
.mm-main { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9d3e1 transparent; }
.mm-main::-webkit-scrollbar { width: 8px; }
.mm-main::-webkit-scrollbar-thumb { border-radius: 8px; background: #c9d3e1; }
.mm-tabs-title { margin: 0 0 8px !important; padding: 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8a94a6; text-align: left !important; }
.mm-tab span { white-space: nowrap; }
.mm-promo { padding: 22px 20px; }

/* Mega menu promo: second (outline) button + trust points */
.mega-menu .mm-promo-btn-line { margin-top: 0; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff !important; }
.mega-menu .mm-promo-btn-line:hover { border-color: #f5c343; background: rgba(245, 195, 67, .12); color: #f5c343 !important; }
.mm-promo-points { display: grid; gap: 8px; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); list-style: none; }
.mm-promo-points li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .82); }
.mm-promo-points i { color: #f5c343; font-size: 13px; }

/* Latest jobs card v2: posted badge in the header, ID chip, equal-width buttons */
.dv-job-head { align-items: flex-start; }
.dv-job-who { flex: 1; }
.dv-job-head .dv-job-new { display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 10px; border-radius: 999px; background: #e7f6ee; color: #18794e; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dv-job-company { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-job-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
.dv-job-meta-row .dv-job-verified { padding: 4px 10px; border-radius: 999px; background: #e7f6ee; }
.dv-job-ref { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px dashed #d5deea; border-radius: 8px; color: #5a6780; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
.dv-job-meta-row .hd-tpid { margin: 0; }
.dv-job-facts { padding-top: 12px; }
.dv-job-foot { padding-top: 14px; }
.dv-job-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; width: 100%; }
.dv-job-actions .dv-job-btn { width: 100%; height: 44px; }

/* Current Openings / Pay-after jobs: call or WhatsApp Transopedia instead of Apply */
.dj-item-direct { color: #b45309; font-weight: 700; }
.dj-d-call { background: #18794e; }
.dj-d-call:hover { background: #12603d; }
.dj-d-wa { border-color: #25d366; color: #128c4b; text-decoration: none; }
.dj-d-wa:hover { background: #ecfbf2; color: #128c4b; }
.dv-job-contact { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #5a6780; text-align: left !important; }
.dv-job-contact a { color: #0d2340; font-weight: 800; text-decoration: none; }
.dv-job-btn i { margin-right: 6px; }
.dv-job-btn-call { background: #18794e; color: #fff !important; }
.dv-job-btn-call:hover { background: #12603d; }
.dv-job-btn-wa { background: #25d366; color: #fff !important; }
.dv-job-btn-wa:hover { background: #1fb457; }
.dv-job-actions.dv-job-actions-direct { grid-template-columns: 1fr 1fr 1.2fr; }
.dv-job-actions-direct .dv-job-btn { padding: 0 10px; }

/* job detail pane: short view, then a link to the job page */
.dj-d-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0; padding: 10px 16px;
  border: 1px solid #d5deea; border-radius: 999px; color: #0a66c2 !important; font-size: 14.5px; font-weight: 700;
  text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
.dj-d-more-btn:hover { border-color: #0a66c2; background: #eef4ff; }

/* ===================== Job page (/driver-jobs/{slug}) ===================== */
.jd-hero, .jd-body, .jd-related { font-family: "Open Sans", Roboto, sans-serif; }
.jd-hero { padding-bottom: 34px; }
.jd-hero-row { display: flex; align-items: flex-start; gap: 18px; }
.jd-logo { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.jd-hero-main { flex: 1; min-width: 0; }
.jd-company { margin: 2px 0 6px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .78); text-align: left !important; }
.jd-title { font-size: 36px; }
.jd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.jd-badges li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 600; }
.jd-badges .jd-badge-ok { background: rgba(46, 194, 126, .18); color: #8ff0bf; }
.jd-badges .jd-badge-direct { background: #f5c343; color: #0d1b3e; }

.jd-body { padding: 32px 0 56px; background: #f5f7fb; }
.jd-main { display: grid; gap: 18px; min-width: 0; }
.jd-card { padding: 26px 28px; border-radius: 16px; background: #fff; color: #2a3550; }
.jd-card h2 { margin: 0 0 14px; font-family: inherit; font-size: 22px; font-weight: 800; color: #0d1b3e; }
.jd-card h3 { margin: 26px 0 12px; font-family: inherit; font-size: 18px; font-weight: 800; color: #0d1b3e; }
.jd-text { margin: 0; font-size: 15.5px; line-height: 1.7; text-align: left !important; }
.jd-text a { color: #0a66c2; font-weight: 700; }
.jd-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; padding: 0; border: 0; }
.jd-highlights i { color: #b07d00; }
.jd-employer { margin-bottom: 12px; }
.jd-employer strong { display: block; font-size: 16px; color: #0d1b3e; }
.jd-employer div > span { display: block; font-size: 13.5px; font-weight: 400; color: #5e6b85; }

.jd-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: jd-step; }
.jd-steps li { position: relative; margin: 0; padding-left: 50px; counter-increment: jd-step; }
.jd-steps li::before {
  content: counter(jd-step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #fff4d6; color: #b07d00; font-weight: 800;
}
.jd-steps strong { display: block; font-size: 15.5px; color: #0d1b3e; }
.jd-steps span { display: block; font-size: 14.5px; line-height: 1.6; color: #4a5875; }
.jd-steps a { color: #0a66c2; font-weight: 700; }

.jd-apply small { display: block; font-size: 12.5px; font-weight: 600; color: #6b7894; text-transform: uppercase; letter-spacing: .4px; }
.jd-apply-salary { display: block; margin: 2px 0 16px; font-size: 24px; font-weight: 800; color: #18794e; }
.jd-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 10px; padding: 0 16px;
  border-radius: 10px; color: #fff !important; font-size: 15.5px; font-weight: 700; text-decoration: none; transition: background .15s ease;
}
.jd-btn-apply { background: #0a66c2; }
.jd-btn-apply:hover { background: #004182; }
.jd-btn-call { background: #18794e; }
.jd-btn-call:hover { background: #12603d; }
.jd-btn-wa { background: #25d366; }
.jd-btn-wa:hover { background: #1fb457; }
.jd-apply-note { margin: 10px 0 0; font-size: 12.5px; color: #6b7894; text-align: left !important; }
.jd-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef2f8; }
.jd-share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid #d5deea; border-radius: 8px;
  background: #fff; color: #0d1b3e !important; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.jd-share-btn:hover { border-color: #0a66c2; background: #eef4ff; }
.jd-explore { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.jd-explore li { margin: 0; }
.jd-explore a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e4e9f2; border-radius: 10px;
  color: #0d1b3e; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.jd-explore a:hover { border-color: #f5c343; background: #fffbef; }
.jd-explore span { padding: 2px 9px; border-radius: 999px; background: #eef2f8; color: #4a5875; font-size: 12.5px; }

.jd-related { padding: 56px 0; background: #fff; }
.jd-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jd-rel {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid #e4e9f2; border-radius: 14px;
  color: #2a3550; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jd-rel:hover { border-color: #f5c343; box-shadow: 0 10px 24px rgba(13, 35, 64, .08); transform: translateY(-2px); color: #2a3550; }
.jd-rel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.jd-rel-top .dj-logo { width: 42px; height: 42px; font-size: 14px; }
.jd-rel-who { min-width: 0; }
.jd-rel-who strong { display: block; overflow: hidden; color: #0d1b3e; font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.jd-rel-who small { display: block; overflow: hidden; color: #5e6b85; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.jd-rel-line { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #4a5875; }
.jd-rel-salary { font-weight: 700; color: #1d2433; }
.jd-rel-salary i { color: #18794e; }
.jd-rel-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #eef2f8; font-size: 12.5px; color: #6b7894; }
.jd-rel-foot span { color: #0a66c2; font-weight: 700; }
.jd-rel-all { margin: 26px 0 0; text-align: center !important; }
.jd-sticky { display: none; }

@media screen and (max-width: 1199px) {
  .jd-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
  .jd-title { font-size: 28px; }
  .jd-side { position: static; }
  .jd-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* apply bar fixed at the bottom; floating buttons move above it */
  .jd-sticky {
    display: flex; gap: 10px; align-items: center; position: fixed; right: 0; bottom: 0; left: 0; z-index: 1030;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #e4e9f2; background: #fff;
    box-shadow: 0 -6px 18px rgba(13, 35, 64, .08);
  }
  .jd-sticky .jd-btn { flex: 1; margin: 0; }
  .jd-sticky-salary { flex: 1; font-size: 15px; font-weight: 800; color: #18794e; }
  .jd-sticky-salary small { display: block; font-size: 11.5px; font-weight: 600; color: #6b7894; }
  body:has(.jd-sticky) { padding-bottom: 72px; }
  body:has(.jd-sticky) .whatsapp-float, body:has(.jd-sticky) .ghw-tab { margin-bottom: 72px; }
}
@media screen and (max-width: 767px) {
  .jd-hero { padding: 24px 0 26px; }
  .jd-hero-row { gap: 14px; }
  .jd-logo { width: 48px; height: 48px; border-radius: 10px; font-size: 17px; }
  .jd-title { font-size: 24px; }
  .jd-badges li { font-size: 12px; padding: 4px 10px; }
  .jd-body { padding: 18px 0 36px; }
  .jd-card { padding: 20px 16px; border-radius: 12px; }
  .jd-card h2 { font-size: 19px; }
  .jd-highlights { gap: 14px 12px; }
  .jd-rel-grid { grid-template-columns: minmax(0, 1fr); }
  .jd-related { padding: 40px 0; }
}
@media screen and (max-width: 420px) {
  .jd-highlights, .jd-card .dj-d-facts { grid-template-columns: minmax(0, 1fr); }
}