/* ===== TOKENS ===== */
:root {
  --navy: #0D2D5E;
  --navy-dark: #081D3F;
  --navy-mid: #1A4080;
  --red: #C8102E;
  --red-dark: #A30D24;
  --bg: #fff;
  --bg-alt: #EEF4FF;
  --heading: #0D2D5E;
  --body: #2D3E52;
  --muted: #607A96;
  --border: #C4D8EE;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Helvetica Neue', Arial, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; line-height: 1.2; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ===== LAYOUT ===== */
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.5rem; }
.sec { padding: 5rem 0; }

/* ===== EYEBROW ===== */
.eye {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .625rem;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 2rem;
  border-radius: 3px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
  font-family: inherit;
}
.btn:focus-visible { outline: 3px solid var(--navy-mid); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 0 4px 18px rgba(200,16,46,.32); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.48); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-mid); }

/* ===========================
   NAV — DESKTOP
   =========================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--navy);
  border-bottom: 3px solid var(--red);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  /* 1220px matches the site's shared content width (footer, lang-bar, etc.),
     but the nav row's own items (logo+tagline, links, phone/CTA, all
     no-wrap) need up to ~1664px in Georgian to lay out without their flex
     items refusing to shrink and spilling past this box — capped as-is,
     that overflow pushes .nav-right off the visible header. 1680px gives
     that content room; see the 1700px hamburger-mode breakpoint below,
     which keeps this bar from ever rendering below that width. */
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 1.125rem;
  height: 74px;
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 34px; }
.nav-logo img { height: 58px; width: auto; object-fit: contain; display: block; }
.nav-logo-divider { width: 1px; height: 30px; background: rgba(255,255,255,.22); margin: 0 .75rem; flex-shrink: 0; }
.nav-tagline {
  color: rgba(255,255,255,.62);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  max-width: 108px;
  white-space: normal;
}
/* Below the shield-only breakpoint there's no room for a tagline next to the icon.
   Note: nav-links already hide at 1460px (see below) and .nav-phone is always
   display:none, so nothing else competes for width between this breakpoint and
   1460px — the full wordmark + tagline can stay visible across that whole range. */
@media (max-width: 640px) {
  .nav-logo-divider, .nav-tagline { display: none; }
}

/* Desktop nav links container */
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > a {
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .375rem;
  border-radius: 3px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links > a:hover,
.nav-links > a[aria-current] {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* Nav dropdown item */
.nav-item { position: relative; }

/* Dropdown trigger button */
.nav-drop-btn {
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .375rem;
  border-radius: 3px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  transition: color .15s, background .15s;
  height: 74px;
}
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] {
  color: #fff;
  background: rgba(255,255,255,.1);
}
.nav-drop-btn:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; border-radius: 3px; }
.caret { font-size: .55rem; opacity: .65; transition: transform .2s; display: inline-block; }
.nav-drop-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 230px;
  background: var(--navy-dark);
  border-top: 2px solid var(--red);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  z-index: 400;
  padding: .5rem 0;
}
.nav-dropdown.open { display: block; }
.nav-item.dd-right .nav-dropdown { left: auto; right: 0; }
.nav-dropdown li a {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  padding: .6rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color .12s, background .12s;
  white-space: nowrap;
}
.nav-dropdown li:last-child a { border-bottom: none; }
.nav-dropdown li a:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Unbuilt page placeholder — shown in dropdown but not clickable */
.nav-nolink {
  display: block;
  color: rgba(255,255,255,.28);
  font-size: .82rem;
  padding: .5rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: default;
  font-style: italic;
}
.nav-dropdown li:last-child .nav-nolink { border-bottom: none; }

/* Right cluster */
.nav-right { display: flex; align-items: center; gap: .875rem; flex-shrink: 0; margin-left: auto; }
/* Phone hidden from desktop nav bar — visible in mobile menu and page content */
.nav-phone { display: none; }
.nav-phone-ico { height: 22px; width: 22px; flex-shrink: 0; }
.nav-cta { font-size: .8125rem; padding: .5rem .9rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .5rem;
  background: none;
  border: none;
  margin-left: .25rem;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================
   NAV — MOBILE
   =========================== */
.nav-mobile {
  position: fixed;
  top: 77px;
  left: 0;
  right: 0;
  background: var(--navy-dark);
  padding-bottom: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 299;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  overflow-y: auto;
  max-height: calc(100vh - 77px);
}
.nav-mobile > a {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  font-weight: 500;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color .12s, background .12s;
}
.nav-mobile > a:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Mobile accordion groups */
.mob-group { border-bottom: 1px solid rgba(255,255,255,.05); }
.mob-group summary {
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  font-weight: 500;
  padding: .75rem 1.25rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mob-group summary::-webkit-details-marker { display: none; }
.mob-group summary::after {
  content: '▾';
  font-size: .6rem;
  opacity: .6;
  transition: transform .2s;
  flex-shrink: 0;
}
.mob-group[open] summary::after { transform: rotate(180deg); }
.mob-group summary:hover { color: #fff; background: rgba(255,255,255,.06); }
.mob-group a {
  display: block;
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  padding: .5rem 1.25rem .5rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: color .12s, background .12s;
}
.mob-group a:last-child { border-bottom: none; }
.mob-group a:hover { color: #fff; background: rgba(255,255,255,.06); }
/* Unbuilt page placeholder in mobile nav */
.mob-nolink {
  display: block;
  color: rgba(255,255,255,.28);
  font-size: .84rem;
  padding: .45rem 1.25rem .45rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
  cursor: default;
  font-style: italic;
}

/* Mobile CTA & phone */
.mob-cta-link {
  display: block;
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-align: center;
  border-radius: 4px;
  margin: .75rem 1.25rem .25rem;
  padding: .75rem 1rem;
  border-bottom: none !important;
  transition: background .15s !important;
}
.mob-cta-link:hover { background: var(--red-dark) !important; }
.mobile-phone {
  color: #FF8A9C !important;
  font-weight: 700 !important;
  text-align: center;
  display: block;
  padding: .75rem 1.25rem !important;
  border-bottom: none !important;
}

/* ===========================
   PAGE HERO (inner pages)
   =========================== */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 4rem 0 3.5rem;
  border-bottom: 3px solid var(--red);
}
.page-hero-in { max-width: 1220px; margin: 0 auto; padding: 0 1.5rem; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.42);
  margin-bottom: 1rem;
}
.breadcrumb a { color: rgba(255,255,255,.55); transition: color .15s; }
.breadcrumb a:hover { color: rgba(255,255,255,.9); }
.breadcrumb-sep { opacity: .35; }
.page-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(200,16,46,.18);
  border: 1px solid rgba(200,16,46,.38);
  color: #FFA0B0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .875rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.page-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  color: #fff;
  margin-bottom: .875rem;
}
.page-hero h1 em { font-style: normal; color: #FF8A9C; }
.page-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  max-width: 56ch;
  line-height: 1.72;
}

/* ===========================
   PAGE HERO — PHOTO VARIANT
   Two-column layout: text left, image right.
   .page-hero--photo modifier only — all other .page-hero rules unchanged.
   =========================== */
.page-hero--photo .page-hero-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Aspect-ratio container — prevents layout shift before image loads */
.page-hero-photo {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,.06); /* subtle placeholder while loading */
}

.page-hero-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Inset ring to integrate the photo with the dark hero background */
.page-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  pointer-events: none;
}

/* Mobile: collapse to single column; hide photo panel.
   Combined with data-URI <img> fallback and media-gated <source> elements,
   mobile devices make zero network requests for hero panel images. */
@media (max-width: 767px) {
  .page-hero--photo .page-hero-in {
    grid-template-columns: 1fr;
  }
  .page-hero-photo {
    display: none;
  }
}

/* ===========================
   HERO
   =========================== */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; min-height: 88vh; display: flex; align-items: center; }
.hero-bg-img { position: absolute; inset: 0; pointer-events: none; }
.hero-bg-img img {
  /* New hero photo (2026-08-15) is ~16:9, wider than the hero box's own
     aspect ratio, so plain object-fit:cover already has real horizontal
     slack to work with — no oversize/pan hack needed like the previous
     ~4:3 photo required. Truck is already composed on the right side of
     the source frame with clean dark sky on the left. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: .94;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,29,63,.95) 0%, rgba(8,29,63,.90) 30%, rgba(8,29,63,.46) 52%, rgba(8,29,63,.10) 78%, rgba(8,29,63,.06) 100%); }
.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  display: flex;
  align-items: center;
}
.hero-in > div { max-width: 640px; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(200,16,46,.18);
  border: 1px solid rgba(200,16,46,.38);
  color: #FFA0B0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .875rem;
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.hero h1 { font-family: Georgia, serif; font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 700; color: #fff; line-height: 1.09; margin-bottom: 1.25rem; }
.hero h1 em { font-style: normal; color: #FF8A9C; }
.hero-desc { font-size: 1.05rem; color: rgba(255,255,255,.74); max-width: 50ch; margin-bottom: 2.25rem; line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2.5rem; }
.hero-cta { font-size: 1.0625rem; padding: 1rem 2.25rem; box-shadow: 0 4px 18px rgba(200,16,46,.32); }
.hero-trust { display: flex; align-items: center; gap: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.66); }
.hero-trust-item::before { content: '✓'; color: #FF8A9C; font-weight: 700; font-size: 1rem; }

.hero-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  background: rgba(8,29,63,.88);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: .875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  backdrop-filter: blur(10px);
}
.badge-n { font-family: Georgia, serif; font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; }
.badge-n span { color: #FF8A9C; }
.badge-t { font-size: .78rem; color: rgba(255,255,255,.6); max-width: 9ch; line-height: 1.4; }

/* ===========================
   TRUCKING SPECIALTY SPOTLIGHT
   =========================== */
.trucking-spotlight {
  background: var(--navy-dark);
  color: #fff;
  padding: 5rem 0;
  border-bottom: 3px solid var(--red);
}
.ts-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(200,16,46,.18);
  border: 1px solid rgba(200,16,46,.38);
  color: #FFA0B0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .875rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.ts-title {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: #fff;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
.ts-title em { font-style: normal; color: #FF8A9C; }
.ts-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.78;
  max-width: 48ch;
  margin-bottom: 2rem;
}
.ts-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.ts-coverages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
}
.ts-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 1.125rem 1.25rem;
  transition: background .18s, border-left-color .18s;
}
.ts-card:hover { background: rgba(255,255,255,.08); border-left-color: #FF8A9C; }
.ts-card-title {
  font-family: Georgia, serif;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .375rem;
}
.ts-card-desc { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.55; }

/* Skip-to-content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--navy);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 0 0 4px 4px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: 0; }

/* Staging notice banner */
.staging-notice {
  background: #7c3d0e;
  border-bottom: 2px solid #f59e0b;
  color: #fef3c7;
  padding: .625rem 1.5rem;
  font-size: .8125rem;
  text-align: center;
}
.staging-notice strong { color: #fde68a; }

/* Temp form label */
.form-temp-label {
  display: block;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 4px;
  padding: .625rem 1rem;
  font-size: .78rem;
  color: #fcd34d;
  text-align: center;
  margin-bottom: .75rem;
}

/* ===========================
   DOT & MC CALLOUT
   =========================== */
.dot-callout {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0;
}
.dot-in {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
.dot-icon {
  font-size: 3rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: .25rem;
}
.dot-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
}
.dot-title {
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  color: var(--heading);
  margin-bottom: .875rem;
  line-height: 1.25;
}
.dot-desc {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.dot-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem .75rem;
}
.dot-list li {
  color: var(--body);
  font-size: .9rem;
  padding-left: 1.25rem;
  position: relative;
}
.dot-list li::before {
  content: "✓";
  color: var(--red);
  font-weight: 700;
  position: absolute;
  left: 0;
}

@media (max-width: 960px) {
  .dot-in { flex-direction: column; gap: 1.25rem; }
  .dot-icon { font-size: 2.25rem; }
  .dot-list { grid-template-columns: 1fr; }
}

/* ===========================
   QUOTE CARDS
   =========================== */
.quotes-sec { background: var(--bg-alt); padding: 4.5rem 0; }
.qhead { text-align: center; margin-bottom: 2.5rem; }
.qhead h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--heading); margin-bottom: .5rem; }
.qhead p { color: var(--muted); font-size: .9375rem; }

.qgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.qcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem 1.5rem 1.5rem;
  min-height: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(13,45,94,.08);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.qcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(13,45,94,.18); }
.qcard:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 12px; }

.qcard-icon { width: 44px; height: 44px; color: var(--navy); margin-bottom: 1rem; flex-shrink: 0; }
.qcard-icon svg { width: 100%; height: 100%; }
.qcard-name { font-family: Georgia, serif; font-size: 1.0625rem; font-weight: 700; color: var(--heading); margin-bottom: .375rem; }
.qcard-desc { font-size: .875rem; color: var(--muted); line-height: 1.55; flex: 1; }
.qcard-cta { margin-top: 1.125rem; font-size: .8125rem; font-weight: 600; color: var(--navy); letter-spacing: .02em; }

/* ===========================
   STATS BAR
   =========================== */
.stats { background: var(--navy); padding: 3.5rem 0; color: #fff; }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.sv { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: #fff; line-height: 1; margin-bottom: .5rem; }
.sv span { color: #FF8A9C; }
.sl { font-size: .875rem; color: rgba(255,255,255,.56); letter-spacing: .02em; }

/* ===========================
   PRODUCTS
   =========================== */
.products { background: #fff; }
.shead { text-align: center; margin-bottom: 3rem; }
.stitle { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; color: var(--heading); margin-bottom: .75rem; }
.ssub { font-size: 1rem; color: var(--muted); max-width: 54ch; margin: 0 auto; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pcard {
  background: #fff;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: box-shadow .2s, transform .2s, border-left-color .2s;
}
.pcard:hover { box-shadow: 0 8px 32px rgba(13,45,94,.12); transform: translateY(-3px); border-left-color: var(--red); }
.pcard-head { display: flex; align-items: center; gap: .875rem; }
.pico { width: 44px; height: 44px; background: var(--bg-alt); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0; font-size: 1.375rem; }
.pname { font-family: Georgia, serif; font-size: 1.0625rem; font-weight: 700; color: var(--heading); }
.pdesc { font-size: .9rem; color: var(--muted); line-height: 1.65; flex: 1; }
.plink { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 700; color: var(--red); margin-top: auto; transition: gap .15s; }
.plink:hover { gap: .625rem; }

/* ===========================
   HOW IT WORKS
   =========================== */
.how { background: var(--bg-alt); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; }
.steps::before { content: ''; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background: var(--border); z-index: 0; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .875rem; position: relative; z-index: 1; }
.snum { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid #EEF4FF; box-shadow: 0 0 0 2px var(--navy); }
.stitle-s { font-family: Georgia, serif; font-size: 1.0625rem; font-weight: 700; color: var(--heading); margin-bottom: .375rem; }
.sdesc { font-size: .9rem; color: var(--muted); line-height: 1.65; }

/* ===========================
   ABOUT
   =========================== */
.about-in { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-text { display: flex; flex-direction: column; gap: 1.25rem; }
.ap { font-size: 1rem; color: var(--body); line-height: 1.78; }
.am { font-size: .9375rem; color: var(--muted); line-height: 1.78; }
.bullets { display: flex; flex-direction: column; gap: .75rem; margin-top: .25rem; }
.bullet { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; color: var(--body); }
.bdot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: .45rem; }
.cbox { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cbox-title { font-family: Georgia, serif; font-size: 1.0625rem; font-weight: 700; color: var(--heading); }
.cbox-sub { font-size: .875rem; color: var(--muted); margin-top: -.75rem; }
.cdetail { display: flex; align-items: flex-start; gap: .875rem; }
.cico { width: 36px; height: 36px; background: var(--navy); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .875rem; }
.clbl { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cval { font-size: .9375rem; color: var(--body); font-weight: 500; line-height: 1.5; }

/* ===========================
   CONTACT SECTION (navy)
   =========================== */
.contact-sec { background: var(--navy); color: #fff; padding: 5rem 0; }
.contact-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.cl h2 { font-family: Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.4rem); color: #fff; margin-bottom: 1rem; }
.cl p { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.78; max-width: 38ch; }
.ck { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.ck-item { display: flex; align-items: center; gap: .625rem; color: rgba(255,255,255,.68); font-size: .9rem; }
.ck-item::before { content: '✓'; color: #FFA0B0; font-weight: 700; }
.form { display: flex; flex-direction: column; gap: 1rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: .375rem; }
.fl { font-size: .78rem; font-weight: 600; letter-spacing: .05em; color: rgba(255,255,255,.7); }
.fi {
  padding: .75rem 1rem;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: .9375rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
  appearance: none;
  width: 100%;
}
.fi::placeholder { color: rgba(255,255,255,.3); }
.fi:focus { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.fi:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 1px; }
select.fi { cursor: pointer; }
select.fi option { background: #0D2D5E; color: #fff; }
textarea.fi { resize: vertical; min-height: 100px; }
.fnote { font-size: .78rem; color: rgba(255,255,255,.36); text-align: center; }
.form-success {
  display: none;
  background: rgba(22,101,52,.35);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 6px;
  padding: 1.25rem;
  text-align: center;
  color: #86efac;
  font-size: .9375rem;
}

/* Contact page info layout */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.ci-item { display: flex; align-items: flex-start; gap: .875rem; margin-bottom: 1.25rem; }
.ci-ico { width: 38px; height: 38px; background: var(--red); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.ci-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .125rem; }
.ci-val { font-size: .9375rem; color: rgba(255,255,255,.85); line-height: 1.55; }
.ci-val a { color: rgba(255,255,255,.85); transition: color .15s; }
.ci-val a:hover { color: #fff; }
.map-wrap { margin-top: 1.5rem; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.map-wrap iframe { display: block; width: 100%; height: 220px; border: none; }
.contact-form-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 2.25rem;
}
.contact-form-box h3 { font-family: Georgia, serif; font-size: 1.25rem; color: #fff; margin-bottom: 1.5rem; }

/* ===========================
   CARRIERS
   =========================== */
.carriers { background: var(--bg-alt); padding: 3rem 0; }
.clbl-h { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.75rem; }
.clogos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cbadge { padding: .55rem 1.375rem; background: #fff; border: 1.5px solid var(--border); border-radius: 4px; font-size: .8125rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }

/* ===========================
   FOOTER
   =========================== */
footer { background: #061524; color: rgba(255,255,255,.52); padding: 4rem 0 2rem; }

.fin {
  display: flex;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Brand block — fixed left column */
.fbrand { flex: 0 0 220px; }
.flogo img { height: 48px; width: auto; margin-bottom: .5rem; display: block; }
.flogo-tagline {
  color: rgba(255,255,255,.55);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.fdesc { font-size: .875rem; line-height: 1.78; max-width: 32ch; margin-bottom: .5rem; }
.fhq { font-size: .8rem; color: rgba(255,255,255,.4); margin-bottom: .2rem; }
.flic { font-size: .75rem; color: rgba(255,255,255,.25); margin-bottom: 1rem; }
.fcontact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.fcontact-list a { font-size: .875rem; color: rgba(255,255,255,.5); transition: color .15s; }
.fcontact-list a:hover { color: #fff; }
.fcontact-list li { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.6; }

/* Link columns grid — 3 columns × 2 rows */
.flinks-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.75rem;
}

/* Individual link column */
.fcol-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: .875rem;
  cursor: default;
}
.fchev { display: none; }
.flinks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.flinks a { font-size: .875rem; color: rgba(255,255,255,.5); transition: color .15s; }
.flinks a:hover { color: #fff; }
.flinks li { font-size: .875rem; color: rgba(255,255,255,.5); }

/* Hero licensed states line */
.hero-licensed { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: .625rem; margin-bottom: 0; line-height: 1.5; }

.fbot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: .78rem; color: rgba(255,255,255,.28); }
.fbot a { color: rgba(255,255,255,.28); transition: color .15s; }
.fbot a:hover { color: rgba(255,255,255,.65); }
.fbot-links { display: flex; gap: 1.5rem; }

/* ===========================
   SERVICE PAGES
   =========================== */
.sec-alt { background: var(--bg-alt); }

/* Two-column content split */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

/* Coverage type cards */
.cov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cov-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  border-top: 3px solid var(--navy);
}
.cov-card h3 { font-size: 1rem; color: var(--heading); margin-bottom: .5rem; }
.cov-card p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-top: .5rem; }
.cov-card-note { font-size: .78rem; font-weight: 700; color: var(--red); margin-top: .625rem; }
.cov-card-link { font-size: .82rem; font-weight: 600; color: var(--navy); margin-top: .625rem; display: block; }

/* Commercial Auto vs Trucking comparison cards — match heights.
   Scoped to #split only; .two-col is reused elsewhere (image+text pairs)
   where top-alignment is correct and stretching would distort images. */
#split .two-col { align-items: stretch; }
#split .cov-card { display: flex; flex-direction: column; }
#split .cov-card-link,
#split .plink { margin-top: auto; padding-top: .625rem; }

/* Checkmark list */
.check-list { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; color: var(--body); line-height: 1.55; }
.check-list li::before { content: '✓'; color: var(--navy); font-weight: 700; flex-shrink: 0; margin-top: .1rem; }

/* Arrow list for considerations */
.note-list { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.note-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .95rem; color: var(--body); line-height: 1.55; }
.note-list li::before { content: '→'; color: var(--muted); flex-shrink: 0; }

/* Whitestone advantage grid */
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.adv-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; border-left: 4px solid var(--red); }
.adv-item h3 { font-size: .9375rem; color: var(--heading); margin-bottom: .375rem; }
.adv-item p { font-size: .875rem; color: var(--muted); line-height: 1.55; }

/* FAQ accordion (details/summary) */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.faq-item summary {
  padding: 1.125rem 1.25rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--navy); font-size: 1.375rem; font-weight: 300; flex-shrink: 0; line-height: 1; }
.faq-item[open] > summary::after { content: '−'; }
.faq-item[open] > summary { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.faq-body { padding: 1.125rem 1.25rem 1.25rem; background: #fff; }
.faq-body p { font-size: .9rem; color: var(--body); line-height: 1.7; }
.faq-body p + p { margin-top: .75rem; }

/* Related services grid */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rel-card { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.375rem; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.rel-card:hover { box-shadow: 0 6px 24px rgba(13,45,94,.1); transform: translateY(-2px); }
.rel-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 8px; }
.rel-card-name { font-family: Georgia, serif; font-weight: 700; color: var(--heading); font-size: .9375rem; margin-bottom: .375rem; }
.rel-card-desc { font-size: .8375rem; color: var(--muted); line-height: 1.55; }
.rel-card-link { font-size: .8125rem; font-weight: 600; color: var(--navy); margin-top: .75rem; display: block; }

/* CTA band (navy) */
.cta-band { background: var(--navy); color: #fff; padding: 4.5rem 0; text-align: center; }
.cta-band h2 { font-family: Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.5rem); color: #fff; margin-bottom: 1rem; }
.cta-band p { font-size: 1rem; color: rgba(255,255,255,.72); margin-bottom: 2rem; max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta-band-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Disclaimer box */
.disclaimer {
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.65;
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  margin-top: 3rem;
}

/* Note callout box */
.note-box {
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 2rem;
}
.note-box p { font-size: .9rem; color: var(--muted); line-height: 1.65; }
.note-box strong { color: var(--body); }

/* Service page section h2 */
.sec-title-left { font-family: Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.125rem); color: var(--heading); margin-bottom: 1.25rem; line-height: 1.2; }

/* Responsive: service pages */
@media (max-width: 960px) {
  .cov-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cov-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-band-btns { flex-direction: column; align-items: center; }
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1250px) {
  .nav-logo { margin-right: 22px; }
}
/* Desktop nav's own content (logo + links + phone/CTA, all no-wrap) needs
   ~1046px at this reduced logo margin/padding for English — but Georgian
   nav labels are longer and need up to ~1664px (measured live: .nav-in's
   own content forces it past its 1680px max-width below that). Switch to
   the mobile menu before that point (with a buffer for scrollbar/font-
   rendering variance) so the bar never overflows the viewport in any
   locale. Kept separate from the 960px content-layout breakpoint below
   since that one drives page section grids, not the nav bar. */
@media (max-width: 1700px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 960px) {
  .hero-in { padding-bottom: 3rem; }
  .hero-in > div { max-width: 100%; }
  .hero-bg-img img { object-position: 75% center; } /* mobile box is much
    narrower/taller, giving even more horizontal slack — bias toward the
    truck (right side of source) so the stacked mobile hero doesn't show
    mostly empty sky */
  .hero-overlay { background: linear-gradient(to bottom, rgba(8,29,63,.92) 0%, rgba(8,29,63,.82) 60%, rgba(8,29,63,.70) 100%); }
  .ts-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ts-coverages { grid-template-columns: 1fr 1fr; }
  .qgrid { grid-template-columns: repeat(3, 1fr); }
  .stats-in { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .about-in { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-in { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Footer: stack brand above 2-col link grid */
  .fin { flex-direction: column; gap: 2rem; }
  .fbrand { flex: none; }
  .flinks-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
}
@media (max-width: 600px) {
  .sec { padding: 3.5rem 0; }
  .ts-coverages { grid-template-columns: 1fr; }
  .ts-ctas { flex-direction: column; }
  .qgrid { grid-template-columns: repeat(2, 1fr); }
  .stats-in { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .steps { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
  .contact-form-box { padding: 1.5rem; }
  /* Footer accordion layout */
  .fin { padding-bottom: 0; border-bottom: none; }
  .fbrand { padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .flinks-grid { grid-template-columns: 1fr; gap: 0; }
  .fcol { border-top: 1px solid rgba(255,255,255,.07); }
  .fcol-toggle { cursor: pointer; padding: .875rem 0; margin-bottom: 0; }
  .fchev { display: flex; align-items: center; font-size: .9rem; transition: transform .25s ease; flex-shrink: 0; }
  .fchev::after { content: '▾'; }
  .fcol-toggle[aria-expanded="true"] .fchev { transform: rotate(180deg); }
  .flinks { padding: .375rem 0 1rem; }
  .fbot { border-top: 1px solid rgba(255,255,255,.07); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===========================
   MULTILINGUAL — LANGUAGE BAR / TRANSLATION BANNER (Site C)
   =========================== */
.lang-bar { background: var(--navy-dark, #06183a); padding: .4rem 0; }
.lang-bar-in { max-width: 1220px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
.lang-bar-link { color: rgba(255,255,255,.62); font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; padding: .15rem .3rem; }
.lang-bar-flag { vertical-align: -1px; border-radius: 2px; margin-right: 1px; }
.lang-bar-link:hover { color: #fff; }
.lang-bar-link--active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lang-bar-sep { color: rgba(255,255,255,.28); font-size: .75rem; }
.translation-banner { background: #fff3cd; border-bottom: 1px solid #f59e0b; color: #7c4a00; font-size: .85rem; line-height: 1.6; text-align: center; padding: .6rem 1.5rem; }

/* Persistent language switcher — a floating vertical baton pinned to the
   right edge of the viewport (not the header), so it stays in place while
   scrolling without adding height to the header or shifting the mobile
   drawer's offset. Mirrors .lang-bar's links/route-preservation, just
   restyled into a tab. Shown wherever the hamburger nav is active (same
   1700px breakpoint as .nav-links/.nav-toggle above) — desktop keeps the
   standalone, non-sticky .lang-bar above the header unchanged. Hidden while
   the mobile drawer is open (via :has()) so it never overlaps drawer links. */
.nav-lang-mobile { display: none; }
@media (max-width: 1700px) {
  .lang-bar { display: none; } /* avoid a duplicate visible switcher — the
    floating baton below takes over this role at this width */
  .nav-lang-mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 320;
    background: var(--navy-dark, #06183a);
    border: 1px solid rgba(255,255,255,.14);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 3px 14px rgba(0,0,0,.28);
    overflow: hidden;
  }
  header.nav:has(#mobileMenu:not([hidden])) .nav-lang-mobile { display: none; }
  .nav-lang-mobile-link {
    color: rgba(255,255,255,.68);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    text-align: center;
    padding: .55rem .5rem;
    min-height: 38px;
    min-width: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
  }
  .nav-lang-mobile-flag { width: 16px; height: 11px; border-radius: 2px; }
  .nav-lang-mobile-link:hover, .nav-lang-mobile-link:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
  .nav-lang-mobile-link--active { color: #fff; background: rgba(255,255,255,.14); }
  .nav-lang-mobile-sep { display: block; height: 1px; font-size: 0; line-height: 0; background: rgba(255,255,255,.14); }
}

/* ===========================
   BOOKING CTA + MODAL (Agent-CRM trucking calendar)
   =========================== */
.booking-cta-box { max-width: 640px; margin: 0 auto; text-align: center; }
.booking-cta-box .btn { margin-top: .25rem; }

body.booking-modal-open { overflow: hidden; }
.booking-modal[hidden] { display: none; }
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.booking-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 17, 36, .72);
}
.booking-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.booking-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.booking-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--heading); }
.booking-modal-head-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.booking-modal-fallback-link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy-mid);
  white-space: nowrap;
}
.booking-modal-fallback-link:hover { text-decoration: underline; }
.booking-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: .4rem .6rem;
  border-radius: 6px;
  flex-shrink: 0;
}
.booking-modal-close:hover { background: var(--bg-alt); color: var(--heading); }
.booking-modal-close:focus-visible { outline: 3px solid var(--navy-mid); outline-offset: 2px; }
.booking-modal-body { flex: 1; min-height: 0; }
.booking-modal-iframe { width: 100%; height: 100%; min-height: 620px; border: 0; display: block; }
@media (max-width: 640px) {
  .booking-modal { padding: 0; }
  .booking-modal-panel { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .booking-modal-iframe { min-height: 0; }
  .booking-modal-fallback-link { font-size: .75rem; }
}

/* ===========================
   CONTACT PAGE — FULL EMBEDDED TRUCKING CALENDAR
   =========================== */
.contact-calendar-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.contact-calendar-wrap iframe { display: block; width: 100%; min-height: 900px; border: 0; }
.contact-calendar-fallback { margin-top: 1rem; font-size: .875rem; color: var(--muted); text-align: center; }
.contact-calendar-fallback a { color: var(--navy-mid); text-decoration: underline; font-weight: 600; }