/* =========================================================
   Taxi Near Me: Design System
   Brand: eco-green (from taxinearme.ie) + Lynk-style structure
   ========================================================= */

:root {
  /* Brand colors (sourced from taxinearme.ie palette) */
  --green-900: #0a3d0a;
  --green-800: #0d4d0d;
  --green-700: #005400;
  --green-600: #146b14;
  --green-500: #2e9418;
  --green-400: #4fae2e;
  --green-300: #6dc15c;
  --green-100: #e7f5e2;
  --green-50: #f3faf0;

  --sky: #3dbfe8;
  --sky-dark: #1a8fb3;

  --navy-900: #0e1a14;
  --navy-800: #14231b;
  --navy-700: #192a3d;
  --navy-600: #2a3f4f;
  --slate-600: #3a4f66;
  --slate-500: #5b6b78;
  --slate-300: #9aa8b1;

  --gold: #c9a34a;
  --gold-light: #e7cd8b;

  /* Used sparingly: the star rating + a couple of small accents, echoing
     the yellow in the logo mark and the real Google star color. */
  --yellow: #ffc400;
  --yellow-dark: #b98600;

  --cream: #f7f5ef;
  --white: #ffffff;
  --ink: #14231b;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 8px rgba(14, 26, 20, 0.08);
  --shadow-md: 0 12px 32px rgba(14, 26, 20, 0.12);
  --shadow-lg: 0 24px 64px rgba(14, 26, 20, 0.18);
  --shadow-glow: 0 8px 28px rgba(46, 148, 24, 0.35);

  --container: 1220px;
  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Lato", "Segoe UI", Arial, sans-serif;

  /* Spacing scale: keep new spacing decisions on this scale rather than
     one-off pixel values. */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
/* overflow-x:hidden on body alone isn't enough on mobile Safari: an
   off-screen child (even one clipped by an overflow:hidden ancestor, like
   the marquee tracks below) can still widen the page's layout viewport,
   which iOS then "fixes" by zooming the whole page out to fit. Locking it
   on html too, plus a hard max-width safety net, stops that at the root. */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
  /* Comfortable minimum tap-target padding on touch devices */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head); margin: 0 0 0.5em; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em;
  /* Avoids a single orphan word wrapping onto its own line */
  text-wrap: balance;
  overflow-wrap: break-word;
}
p { margin: 0 0 1em; color: var(--slate-600); line-height: 1.7; overflow-wrap: break-word; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 22px; height: 22px; flex-shrink: 0; }

@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn-call {
  background: linear-gradient(135deg, var(--green-500), var(--green-700));
  color: #fff; box-shadow: var(--shadow-glow);
}
.btn-call:hover { box-shadow: 0 12px 34px rgba(46,148,24,.5); transform: translateY(-1px); }
.btn-call .call-label { font-size: 14px; font-weight: 600; opacity: .92; }
.btn-call .call-num { font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: .01em; }
@media (max-width: 480px) { .btn-call .call-num { font-size: 18px; } }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { background: transparent; border-color: var(--green-700); color: var(--green-700); }
.btn-outline-dark:hover { background: var(--green-50); }
.btn-light { background: #fff; color: var(--green-800); }
.btn-light:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--navy-900); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600);
  margin-bottom: 14px; white-space: nowrap;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green-500); display: inline-block; }
.eyebrow.on-dark { color: var(--green-300); }

/* ---------- Google reviews bar (very top of every page) ----------
   A slow ambient marquee of rating highlights, with a plain button
   underneath as the actual link to the real Google reviews page. */
.google-bar-wrap { background: var(--navy-900); padding: 7px 0 9px; }
.google-bar-marquee {
  overflow: hidden;
  /* Stops the oversized .marquee-track (below) from ever being counted
     toward the page's layout width, on top of the html/body rules above. */
  contain: layout paint;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 26s linear infinite; }
.google-bar-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; padding-right: 40px; white-space: nowrap; }
.marquee-item { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 700; }
.marquee-item .stars-inline { display: inline-flex; gap: 2px; color: var(--yellow); }
.marquee-item .stars-inline .icon { width: 12px; height: 12px; }
.marquee-sep { color: rgba(255,255,255,.35); margin: 0 20px; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.google-bar-btn {
  display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12px; font-weight: 800; color: #fff;
}
.google-bar-btn .icon { width: 13px; height: 13px; }
.google-bar-btn .icon:first-child { color: var(--yellow); }
.google-bar-btn:hover { text-decoration: underline; }
@media (max-width: 560px) { .marquee-item { font-size: 11px; } .google-bar-btn { font-size: 11.5px; } }

/* ---------- Top utility bar ---------- */
/* Kept deliberately minimal: phone number + an "Open 24/7" tag, nothing
   else. Fixed heights here previously let wrapped content on narrow
   screens spill into the header below it: min-height + auto padding
   avoids that regardless of how narrow the screen gets. */
.topbar {
  background: var(--navy-700); color: #cfd8de; font-size: 13px;
}
.topbar .container {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 34px; padding-top: 6px; padding-bottom: 6px; flex-wrap: nowrap;
}
.topbar-phone { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.topbar-phone:hover { color: var(--green-300); }
.topbar-open { display: inline-flex; align-items: center; gap: 6px; color: #9fb0a8; white-space: nowrap; }
.topbar .icon { width: 14px; height: 14px; }
@media (max-width: 400px) { .topbar-open { display: none; } }

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(14,26,20,0.06);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 24px; }
@media (max-width: 480px) { .nav-row { height: 68px; } }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--navy-700); white-space: nowrap; }
.logo-badge-img { width: 38px; height: auto; flex-shrink: 0; filter: drop-shadow(0 2px 5px rgba(14,26,20,.25)); }
@media (max-width: 480px) { .logo { font-size: 17px; } .logo small { font-size: 9.5px; } .logo-badge-img { width: 32px; } }
.logo small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .06em; color: var(--green-600); text-transform: uppercase; }
.nav-icon { color: var(--green-600); margin-right: 2px; }

nav.main-nav { display: flex; align-items: center; gap: 2px; }
nav.main-nav > ul { display: flex; align-items: center; gap: 2px; }
nav.main-nav > ul > li { position: relative; }
nav.main-nav > ul > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 12px 16px; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--navy-700);
  border-radius: 10px; transition: color .15s, background .15s;
}
nav.main-nav > ul > li > a:hover, nav.main-nav > ul > li.open > a { color: var(--green-700); background: var(--green-50); }
nav.main-nav .chev { width: 13px; height: 13px; transition: transform .15s; }
nav.main-nav li.open .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
  border: 1px solid rgba(14,26,20,0.06);
}
li.open .dropdown, li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--slate-600); }
.dropdown a:hover { background: var(--green-50); color: var(--green-700); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone { display: flex; flex-direction: column; text-align: right; }
.header-phone .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); font-weight: 700; }
.header-phone .num { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--navy-700); white-space: nowrap; }
@media (max-width: 980px) { .header-phone { display: none; } }

.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--navy-700); }
@media (max-width: 940px) {
  nav.main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* Mobile nav drawer */
.mobile-nav { position: fixed; inset: 0; z-index: 200; display: none; }
.mobile-nav.active { display: block; }
.mobile-nav .backdrop { position: absolute; inset: 0; background: rgba(14,26,20,0.5); }
.mobile-nav .panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: #fff; padding: 22px; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.mobile-nav .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mobile-nav details { border-bottom: 1px solid rgba(14,26,20,0.08); }
.mobile-nav summary { padding: 14px 4px; font-family: var(--font-head); font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; }
.mobile-nav a { display: block; padding: 12px 4px; font-weight: 600; color: var(--navy-700); }
.mobile-nav .sub a { padding-left: 14px; font-weight: 500; color: var(--slate-600); font-size: 14.5px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--green-900) 55%, var(--green-800) 100%);
}
.hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; }
.hero-bg-fade {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,20,14,.96) 10%, rgba(10,20,14,.7) 45%, rgba(13,77,13,.55) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 84px 0 96px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.hero-inner > * { min-width: 0; }
@media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; padding: 56px 0 64px; } }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); }
.hero .lede { color: #dfe9e2; font-size: 18px; max-width: 540px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: #fff; white-space: nowrap; }
.hero-stats .stat span { font-size: 12.5px; color: #b9c8bd; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
@media (max-width: 480px) { .hero-stats { gap: 20px 24px; } .hero-stats .stat b { font-size: 21px; } }

/* ---------- Real-reviews scrolling strip (sits right under the hero) ---------- */
.review-strip { background: #fff; overflow: hidden; contain: layout paint; max-width: 100%; padding: 18px 0; border-bottom: 1px solid rgba(14,26,20,.08); }
.review-strip-track { display: flex; width: max-content; animation: review-strip-scroll 38s linear infinite; }
.review-strip:hover .review-strip-track { animation-play-state: paused; }
.review-strip-group { display: flex; gap: 18px; flex-shrink: 0; padding-right: 18px; }
@keyframes review-strip-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .review-strip-track { animation: none; } }
.review-strip-card {
  flex-shrink: 0; width: 320px; background: var(--cream); border: 1px solid rgba(14,26,20,.08);
  border-radius: var(--radius-md); padding: 18px 20px; white-space: normal;
}
.review-strip-card .stars { display: flex; gap: 2px; color: var(--yellow); margin-bottom: 8px; }
.review-strip-card .stars .icon { width: 14px; height: 14px; }
.review-strip-card p { color: var(--slate-600); font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.review-strip-name {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800;
  font-size: 12.5px; color: var(--navy-700);
}
.review-strip-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--green-600); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11.5px;
}
.review-strip-name span:not(.review-strip-avatar) { display: flex; flex-direction: column; }
.review-strip-name small { font-family: var(--font-body); font-weight: 600; color: var(--slate-500); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 480px) { .review-strip-card { width: 260px; padding: 16px; } }

/* Floating fare calculator card in hero */
.fare-card {
  position: relative; background: #fff; color: var(--ink); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-lg);
  /* Without this, a CSS Grid item defaults to min-width:auto, which takes
     the min-content width of its content (the nowrap quick-pick chip row)
     as a floor: that was blowing the whole hero/split grid out past the
     viewport instead of letting .quick-picks scroll internally. */
  min-width: 0;
}
@media (max-width: 480px) { .fare-card { padding: 20px 16px; } }
.fare-card::before {
  content: "Estimate Your Fare"; position: absolute; top: -14px; left: 26px;
  background: var(--gold); color: var(--navy-900); font-family: var(--font-head); font-weight: 800;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.fare-card-coverage {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--green-600); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .02em;
}
.fare-card-coverage .icon { width: 13px; height: 13px; flex-shrink: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--slate-600); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.field select, .field input {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid #dfe6e0;
  /* 16px minimum stops iOS Safari auto-zooming the page on focus */
  font-size: 16px; font-family: var(--font-body); background: #fbfcfa; color: var(--ink);
}
.field select:focus, .field input:focus { outline: none; border-color: var(--green-500); background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Custom location autocomplete (native <datalist> doesn't render on iOS Safari) */
.autocomplete-field { position: relative; }
.autocomplete-menu {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); border: 1px solid rgba(14,26,20,.08);
  max-height: 260px; overflow-y: auto; padding: 6px;
}
.autocomplete-menu.open { display: block; }
.autocomplete-item {
  padding: 12px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.autocomplete-item .icon { width: 15px; height: 15px; color: var(--green-600); flex-shrink: 0; }
.autocomplete-item.active, .autocomplete-item:hover { background: var(--green-50); color: var(--green-700); }
.autocomplete-empty { padding: 12px 14px; font-size: 13.5px; color: var(--slate-500); }

/* Quick-pick chips: puts the core Dublin areas straight into the UI so
   picking one is a single tap, no typing required (mobile-first). */
.quick-picks {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 2px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; max-width: 100%;
}
.quick-picks::-webkit-scrollbar { display: none; }
.quick-picks-label { font-size: 12px; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.quick-pick-chip {
  flex-shrink: 0; border: 1.5px solid #dfe6e0; background: #fbfcfa; color: var(--slate-600);
  font-family: var(--font-body); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.quick-pick-chip:hover, .quick-pick-chip.selected { border-color: var(--green-500); background: var(--green-50); color: var(--green-700); }

.fare-result {
  margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--green-50);
  border: 1.5px dashed var(--green-300); display: none;
}
.fare-result.show { display: block; }
.fare-result .amount { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--green-800); }
.fare-result small { color: var(--slate-500); }

/* ---------- Sticky mobile call bar ---------- */
.sticky-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: none;
  background: var(--navy-700); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.sticky-call-bar a.btn { width: 100%; }
@media (max-width: 720px) { .sticky-call-bar { display: block; } body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } }

.fab-call {
  position: fixed; right: 26px; bottom: 26px; z-index: 150; width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; display: flex;
  align-items: center; justify-content: center; box-shadow: var(--shadow-glow); animation: pulse 2.4s infinite;
}
.fab-call .icon { width: 26px; height: 26px; }
@media (max-width: 720px) { .fab-call { display: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,148,24,.55);} 70% { box-shadow: 0 0 0 16px rgba(46,148,24,0);} 100% {box-shadow: 0 0 0 0 rgba(46,148,24,0);} }

/* ---------- Review-request toast ---------- */
.review-toast {
  position: fixed; left: 20px; bottom: 26px; z-index: 160; width: 280px; max-width: calc(100vw - 40px);
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(14,26,20,.08);
  padding: 20px; transform: translateY(24px) scale(.97); opacity: 0; visibility: hidden;
  transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.review-toast.show { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.review-toast-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: var(--cream); color: var(--slate-500); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.review-toast-close .icon { width: 13px; height: 13px; }
.review-toast-stars { display: flex; gap: 3px; color: var(--yellow); margin-bottom: 10px; }
.review-toast-stars .icon { width: 15px; height: 15px; }
.review-toast-title { font-family: var(--font-head); font-weight: 800; color: var(--navy-700); font-size: 16px; margin: 0 0 4px; }
.review-toast-text { font-size: 13.5px; margin: 0 0 14px; }
.review-toast-later { display: block; width: 100%; text-align: center; background: none; border: none; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--slate-500); cursor: pointer; }
@media (max-width: 720px) {
  .review-toast { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- Page load + scroll-reveal ----------
   Progressive enhancement: elements are fully visible by default. main.js
   only adds .reveal (which starts them faded/offset) if it can also attach
   the IntersectionObserver that brings them back in, so nothing ever gets
   stuck invisible if JS fails to run. */
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-fade-in .45s ease both; }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
}

/* ---------- Sections ---------- */
section { padding: 88px 0; }
section.tight { padding: 56px 0; }
@media (max-width: 720px) {
  section { padding: 56px 0; }
  section.tight { padding: 36px 0; }
}
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
@media (max-width: 720px) { .section-head { margin-bottom: 32px; } }
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); color: var(--navy-700); }
.bg-cream { background: var(--cream); }
.bg-dark { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: #fff; }
.bg-dark p { color: #b9c4c9; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-green { background: linear-gradient(140deg, var(--green-800), var(--green-900)); color: #fff; }
.bg-green p { color: #d6e6cf; }
.bg-green h2, .bg-green h3 { color: #fff; }

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--navy-700); white-space: nowrap; }
.trust-item .icon { color: var(--green-600); }

/* Booking option cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(14,26,20,0.06); transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (max-width: 480px) { .card { padding: 24px 20px; } }
.card .card-icon {
  width: 58px; height: 58px; border-radius: 16px; background: var(--green-50); color: var(--green-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card .card-icon .icon { width: 28px; height: 28px; }
.card h3 { font-size: 19px; color: var(--navy-700); }
.card p:last-child { margin-bottom: 0; }
.card .tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--green-600); background: var(--green-50); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }

.card-dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.card-dark .card-icon { background: rgba(255,255,255,0.1); color: var(--green-300); }
.card-dark h3 { color: #fff; }
.card-dark p { color: #c7d3ce; }

/* Vehicle type cards */
.vehicle-card { text-align: center; }
.vehicle-card .card-icon { margin: 0 auto 16px; }

/* Image + text split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.split.reverse .split-media { order: 2; }
@media (max-width: 900px) { .split, .split.reverse .split-media { grid-template-columns: 1fr; order: 0; } }
.split-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.split ul.checklist li { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; color: var(--slate-600); font-weight: 600; }
.split ul.checklist .icon { color: var(--green-600); margin-top: 3px; }

/* Stats band */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 760px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stats-band .stat b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(28px,4vw,42px); }
.stats-band .stat span { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; opacity: .8; white-space: nowrap; }

/* Testimonials */
.testi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px) { .testi-row { grid-template-columns: 1fr; } }
.testi-card { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(14,26,20,.06); }
.testi-card .stars { color: var(--yellow); display: flex; gap: 3px; margin-bottom: 12px; }
.testi-card .stars .icon { width: 16px; height: 16px; }
.testi-card .quote-mark { color: var(--green-200, var(--green-100)); }
.testi-card footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-head); }
.testi-name { font-weight: 800; font-family: var(--font-head); font-size: 14px; color: var(--navy-700); }
.testi-area { font-size: 12.5px; color: var(--slate-500); }

/* Areas grid */
.areas-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 980px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
.area-chip {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(14,26,20,.08); font-weight: 700; color: var(--navy-700); font-size: 14.5px;
  transition: all .15s;
}
.area-chip:hover { border-color: var(--green-500); background: var(--green-50); color: var(--green-700); }
.area-chip .icon { color: var(--green-600); width: 18px; height: 18px; }
.area-chip-more { justify-content: center; border-style: dashed; color: var(--green-700); background: var(--green-50); }

/* FAQ accordion */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(14,26,20,.1); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--navy-700);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform .2s; color: var(--green-600); flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-a { padding: 0 4px 22px; max-width: 720px; }
.faq-category h4 { color: var(--green-700); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 36px 0 6px; }
.faq-category:first-child h4 { margin-top: 0; }

/* CTA banner */
.cta-banner {
  border-radius: var(--radius-xl); padding: 56px; text-align: center;
  background: linear-gradient(135deg, var(--green-600), var(--green-800));
  color: #fff; position: relative; overflow: hidden;
}
@media (max-width: 620px) { .cta-banner { padding: 36px 22px; border-radius: var(--radius-lg); } }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #dcefd6; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner .cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.cta-banner .big-phone {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(19px,5.5vw,32px);
  margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}

/* Verticals / solutions cards with left accent */
.vertical-card { border-left: 4px solid var(--green-500); padding-left: 20px; }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--slate-500); padding: 18px 0; }
.breadcrumb a { color: var(--green-700); font-weight: 700; }
.breadcrumb .sep { margin: 0 8px; }

/* Page header banner (for inner pages) */
.page-banner {
  background: linear-gradient(120deg, var(--navy-900), var(--green-900));
  color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { font-size: clamp(30px, 4vw, 46px); }
.page-banner p { color: #d7e4d3; max-width: 640px; font-size: 17px; }
.page-banner-img { position: absolute; inset: 0; object-fit: cover; opacity: .22; }
.badge-pill.sub-brand-kicker { background: rgba(109,193,92,.18); color: var(--green-300); border: 1px solid rgba(109,193,92,.4); }

/* Two-column content + sidebar (blog, legal) */
.content-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .content-layout { grid-template-columns: 1fr; } }
.prose h2 { font-size: 26px; color: var(--navy-700); margin-top: 40px; }
.prose h3 { font-size: 20px; color: var(--navy-700); margin-top: 28px; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.prose ul li { margin-bottom: 8px; color: var(--slate-600); }
.prose a { color: var(--green-700); font-weight: 700; text-decoration: underline; }
.sidebar-card { background: var(--green-50); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 20px; }
.sidebar-card h4 { font-size: 15px; color: var(--navy-700); }
.sidebar-card ul { display: flex; flex-direction: column; gap: 10px; }
.sidebar-card a { font-weight: 700; color: var(--green-700); font-size: 14.5px; }

/* Readable fare table: real text prices, crawlable by search engines and AI
   assistants (unlike numbers locked inside the JS calculator). */
.fare-table-wrap { margin: 28px 0; }
.fare-table-title { font-size: 19px; color: var(--navy-700); margin-bottom: 12px; }
.fare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(14,26,20,.08); }
.fare-table th { background: var(--green-700); color: #fff; text-align: left; padding: 12px 16px; font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.fare-table td { padding: 11px 16px; border-bottom: 1px solid rgba(14,26,20,.06); font-size: 14.5px; color: var(--slate-600); }
.fare-table tr:last-child td { border-bottom: none; }
.fare-table tr:nth-child(even) td { background: var(--green-50); }
.fare-table td:nth-child(2) { font-weight: 800; color: var(--green-800); font-family: var(--font-head); }
.fare-table a { color: var(--green-700); font-weight: 700; }
.fare-table-caption { font-size: 12.5px; color: var(--slate-500); margin-top: 10px; }
@media (max-width: 620px) {
  .fare-table { display: block; overflow-x: auto; }
}

/* Blog cards */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card img { border-radius: var(--radius-md); aspect-ratio: 16/10; object-fit: cover; margin-bottom: 18px; }
.blog-card .meta { font-size: 12.5px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 8px; }
.blog-card h3 { font-size: 20px; }
.blog-card .read-more { font-weight: 800; color: var(--green-700); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-card { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-md); border: 1px solid rgba(14,26,20,.06); }
textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid #dfe6e0; font-family: var(--font-body); font-size: 15px; resize: vertical; min-height: 120px; }
textarea:focus { outline: none; border-color: var(--green-500); }

/* Footer */
footer.site-footer { background: var(--navy-900); color: #b6c1bc; padding-top: 72px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 980px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
.footer-brand .logo { color: #fff; }
.footer-brand p { color: #93a29b; margin-top: 14px; font-size: 14.5px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { background: var(--green-600); }
.footer-col h4 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.5px; color: #9fada6; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #7c8a83; }
.footer-bottom a { color: #9fada6; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.badge-pill.on-light { background: var(--green-50); color: var(--green-700); }
.badge-pill .icon { width: 14px; height: 14px; }

.divider-note { text-align: center; font-size: 13px; color: var(--slate-500); margin-top: 18px; }

/* A short, self-contained answer near the top of a page: written so a
   search engine or an AI assistant can quote it directly (GEO). */
.direct-answer {
  max-width: 780px; margin: 0 auto; text-align: center; font-size: 16.5px;
  line-height: 1.7; color: var(--slate-600); padding: 6px 0;
}
.direct-answer strong { color: var(--navy-700); font-family: var(--font-head); }
.divider-note-link { color: var(--green-700); font-weight: 800; }
.field-hint { display: block; margin-top: 6px; color: var(--slate-500); font-size: 12.5px; }