/* ===========================================================================
   DTS Lux Transport — premium platform styles
   Brand colour: #fca50d (gold/amber) — preserved from the original brand.
   =========================================================================== */
:root {
  --gold: #fca50d;
  --gold-light: #ffbf45;
  --gold-dark: #d98a00;
  --ink: #0e0f12;
  --ink-soft: #17181d;
  --ink-card: #1d1f26;
  --text: #2a2d34;
  --muted: #6b7280;
  --line: #e8e8ec;
  --bg-soft: #f7f7f9;
  --white: #ffffff;
  --radius: 14px;
  --shadow-sm: 0 4px 14px rgba(14, 15, 18, 0.07);
  --shadow-md: 0 14px 38px rgba(14, 15, 18, 0.12);
  --shadow-gold: 0 12px 30px rgba(252, 165, 13, 0.32);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--white);
  margin: 0;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a { text-decoration: none; transition: color 0.25s var(--ease); }

img { max-width: 100%; }

.text-gold { color: var(--gold) !important; }
.bg-ink { background: var(--ink) !important; }
.bg-soft { background: var(--bg-soft) !important; }

/* ---- Preloader ---------------------------------------------------------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-logo {
  font-size: 1.9rem; font-weight: 800; letter-spacing: 0.35em;
  color: var(--white); text-transform: uppercase;
}
.preloader-logo span { color: var(--gold); }
.preloader-bar {
  width: 190px; height: 3px; margin: 18px auto 0;
  background: rgba(255, 255, 255, 0.12); border-radius: 4px; overflow: hidden;
}
.preloader-bar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--gold); border-radius: 4px;
  animation: loadbar 1s infinite var(--ease);
}
@keyframes loadbar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn-gold, .btn-outline-gold, .btn-ink {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 30px; border-radius: 50px; font-weight: 600;
  font-size: 0.95rem; border: 2px solid transparent; cursor: pointer;
  transition: all 0.3s var(--ease); letter-spacing: 0.2px;
}
.btn-gold {
  background: var(--gold); color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  background: var(--gold-dark); color: var(--ink);
  transform: translateY(-3px);
}
.btn-outline-gold {
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.btn-outline-gold:hover {
  background: var(--gold); color: var(--ink); transform: translateY(-3px);
}
.btn-ink {
  background: var(--ink); color: var(--white);
}
.btn-ink:hover { background: #000; color: var(--gold); transform: translateY(-3px); }
.btn-sm { padding: 9px 20px; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  background: var(--ink); color: #cfd0d6;
  font-size: 0.82rem; padding: 8px 0;
}
.topbar a { color: #cfd0d6; }
.topbar a:hover { color: var(--gold); }
.topbar .sep { color: #3a3b42; margin: 0 4px; }

/* ---- Navbar ------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 1000;
  /* Solid 99%-opaque background — a backdrop-filter here would create a
     containing block that traps the position:fixed mobile menu panel. */
  background: rgba(255, 255, 255, 0.99);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), padding 0.3s var(--ease);
}
.site-nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 20px;
}
.nav-brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 800; font-size: 1.25rem; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nav-brand img { height: 50px; width: auto; }
.nav-brand span { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--ink); font-weight: 500; font-size: 0.94rem;
  padding: 9px 14px; border-radius: 8px; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--gold); transform: scaleX(0);
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-dark); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--ink);
}
@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    background: var(--ink); flex-direction: column; align-items: stretch;
    padding: 90px 22px 30px; gap: 4px; transform: translateX(100%);
    transition: transform 0.35s var(--ease); z-index: 1100;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { color: #fff; padding: 14px 12px; font-size: 1rem; }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a.active { color: var(--gold); }
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1050;
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }
  .nav-close {
    position: absolute; top: 22px; right: 22px; background: none;
    border: none; color: #fff; font-size: 1.6rem; cursor: pointer;
  }
}
.nav-close { display: none; }
@media (max-width: 991px) { .nav-close { display: block; } }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  color: #fff; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.05);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(10,11,14,0.94) 0%,
              rgba(10,11,14,0.78) 45%, rgba(10,11,14,0.42) 100%);
}
.hero-inner { padding: 90px 0; max-width: 720px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(252, 165, 13, 0.4);
  padding: 7px 16px; border-radius: 50px; margin-bottom: 22px;
}
.hero h1 {
  color: #fff; font-size: clamp(2.3rem, 5.2vw, 4rem);
  margin: 0 0 18px; font-weight: 800;
}
.hero h1 .accent { color: var(--gold); }
.hero p { font-size: 1.12rem; color: #d6d7dc; margin-bottom: 30px; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 42px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.13);
}
.hero-trust .num { font-size: 1.7rem; font-weight: 800; color: var(--gold); }
.hero-trust .lbl { font-size: 0.82rem; color: #b9bac0; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Quick booking strip ----------------------------------------------- */
.quick-book {
  margin-top: -54px; position: relative; z-index: 5;
}
.quick-book-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 26px; display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr) auto;
}
.quick-book-card .qb-field { display: flex; flex-direction: column; gap: 5px; }
.quick-book-card label {
  font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.quick-book-card input, .quick-book-card select {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  font-family: inherit; font-size: 0.92rem; color: var(--text);
}
.quick-book-card input:focus, .quick-book-card select:focus {
  outline: none; border-color: var(--gold);
}
@media (max-width: 860px) {
  .quick-book { margin-top: 30px; }
  .quick-book-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) { .quick-book-card { grid-template-columns: 1fr; } }

/* ---- Sections ----------------------------------------------------------- */
.section { padding: 86px 0; }
.section-sm { padding: 56px 0; }
.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-dark); display: block;
  margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 0 0 14px; }
.section-head p { color: var(--muted); margin: 0; }

/* ---- Cards: services ---------------------------------------------------- */
.card-grid { display: grid; gap: 26px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px; transition: all 0.35s var(--ease); position: relative;
  overflow: hidden;
}
.service-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { width: 100%; }
.service-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--ink); margin-bottom: 20px;
  transition: transform 0.35s var(--ease);
}
.service-card:hover .service-icon { transform: rotate(-8deg) scale(1.06); }
.service-card h3 { font-size: 1.2rem; margin: 0 0 10px; }
.service-card p { color: var(--muted); font-size: 0.93rem; margin: 0 0 16px; }
.card-link { color: var(--gold-dark); font-weight: 600; font-size: 0.9rem; }
.card-link i { transition: transform 0.25s var(--ease); }
.card-link:hover i { transform: translateX(5px); }

/* ---- Cards: vehicles ---------------------------------------------------- */
.vehicle-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: all 0.35s var(--ease); display: flex; flex-direction: column;
}
.vehicle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.vehicle-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-soft);
}
.vehicle-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.vehicle-card:hover .vehicle-media img { transform: scale(1.08); }
.vehicle-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--gold); color: var(--ink); font-size: 0.72rem;
  font-weight: 700; padding: 5px 12px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.vehicle-badge.muted { background: #6b7280; color: #fff; }
.vehicle-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.vehicle-body h3 { font-size: 1.12rem; margin: 0 0 4px; }
.vehicle-brand { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.vehicle-specs {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.vehicle-specs span { font-size: 0.83rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.vehicle-specs i { color: var(--gold-dark); }
.vehicle-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.vehicle-price { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.vehicle-price small { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

/* ---- Cards: drivers ----------------------------------------------------- */
.driver-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-align: center; transition: all 0.35s var(--ease);
}
.driver-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.driver-photo {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.driver-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.driver-card:hover .driver-photo img { transform: scale(1.07); }
.driver-avatar {
  font-size: 3rem; font-weight: 800; color: var(--gold);
  letter-spacing: 0.05em;
}
.driver-body { padding: 22px; }
.driver-body h3 { font-size: 1.12rem; margin: 0 0 3px; }
.driver-role { font-size: 0.85rem; color: var(--gold-dark); font-weight: 600; }
.driver-meta { font-size: 0.84rem; color: var(--muted); margin: 12px 0; }
.driver-stars { color: var(--gold); font-size: 0.85rem; }

/* ---- Stats band --------------------------------------------------------- */
.stats-band {
  background: var(--ink); color: #fff; padding: 60px 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(252,165,13,0.14), transparent 45%);
}
.stat { text-align: center; }
.stat .stat-num {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--gold);
  line-height: 1;
}
.stat .stat-label { color: #b9bac0; font-size: 0.88rem; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- Why / features ----------------------------------------------------- */
.feature-item { display: flex; gap: 16px; margin-bottom: 26px; }
.feature-item .fi-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
  background: rgba(252, 165, 13, 0.13); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.feature-item h4 { font-size: 1.05rem; margin: 0 0 5px; }
.feature-item p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.media-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md);
  position: relative;
}
.media-frame img { width: 100%; display: block; }
/* Stage 23 — visibility-only fix for the .media-badge. Root cause:
   Stage 14 gave .media-frame img z-index:1 and .media-frame::after
   corner accents z-index:2, but the badge had z-index:auto — so the
   framed image painted directly over it. z-index:3 lifts the badge
   above both layers. Design, color, padding and typography are
   intentionally preserved exactly as before; nothing else changed. */
.media-badge {
  position: absolute; bottom: 22px; left: 22px;
  z-index: 3;
  background: var(--gold); color: var(--ink); padding: 16px 22px;
  border-radius: 12px; font-weight: 700;
}
.media-badge .mb-num { font-size: 1.8rem; line-height: 1; }
.media-badge .mb-lbl { font-size: 0.78rem; text-transform: uppercase; }

/* ---- Page header (sub pages) ------------------------------------------- */
.page-header {
  position: relative; padding: 110px 0 70px; color: #fff; text-align: center;
  background: var(--ink);
  background-image: linear-gradient(rgba(10,11,14,0.82), rgba(10,11,14,0.88)),
                    radial-gradient(circle at 80% 0%, rgba(252,165,13,0.2), transparent 50%);
  background-size: cover; background-position: center;
}
.page-header h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 12px; }
.breadcrumbs { font-size: 0.88rem; color: #b9bac0; }
.breadcrumbs a { color: var(--gold); }
.breadcrumbs .sep { margin: 0 8px; color: #555; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-radius: 20px; padding: 56px 48px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 8px; }
.cta-band p { margin: 0; font-weight: 500; }

/* ---- Testimonials ------------------------------------------------------- */
.testimonial-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; height: 100%;
}
.testimonial-card .quote-mark { color: var(--gold); font-size: 2.4rem; line-height: 0.5; }
.testimonial-card .t-stars { color: var(--gold); margin: 14px 0 10px; }
.testimonial-card p.t-text { color: var(--text); font-size: 0.95rem; }
.t-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.t-person .t-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: var(--ink); color: var(--gold); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.t-person h5 { margin: 0; font-size: 0.97rem; }
.t-person span { font-size: 0.82rem; color: var(--muted); }

/* ---- Gallery ------------------------------------------------------------ */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1 / 1; cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .g-overlay {
  position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(10,11,14,0.85));
  opacity: 0; transition: opacity 0.3s var(--ease);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 18px;
}
.gallery-item:hover .g-overlay { opacity: 1; }
.gallery-item .g-overlay h5 { color: #fff; margin: 0; font-size: 0.95rem; }
.gallery-item .g-overlay span { color: var(--gold); font-size: 0.78rem; text-transform: uppercase; }

/* ---- Filter chips ------------------------------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.chip {
  padding: 9px 20px; border-radius: 50px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-size: 0.86rem; font-weight: 500;
  cursor: pointer; transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-dark); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Forms -------------------------------------------------------------- */
.form-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-sm);
}
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 6px; }
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  font-family: inherit; font-size: 0.93rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(252,165,13,0.16);
}
.field-error { color: #c0392b; font-size: 0.8rem; margin-top: 4px; }
.help-text { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }

/* ---- Booking tabs ------------------------------------------------------- */
.booking-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.booking-tab {
  flex: 1; min-width: 150px; padding: 16px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  text-align: center; transition: all 0.25s var(--ease);
}
.booking-tab i { font-size: 1.3rem; color: var(--muted); display: block; margin-bottom: 6px; }
.booking-tab span { font-weight: 600; font-size: 0.92rem; }
.booking-tab small { display: block; color: var(--muted); font-size: 0.76rem; }
.booking-tab:hover { border-color: var(--gold); }
.booking-tab.active { border-color: var(--gold); background: rgba(252,165,13,0.07); }
.booking-tab.active i { color: var(--gold-dark); }
.booking-pane { display: none; }
.booking-pane.active { display: block; animation: fadeIn 0.4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Alerts / messages -------------------------------------------------- */
.alert { border-radius: 10px; border: none; padding: 14px 18px; font-size: 0.92rem; }
.toast-stack { position: fixed; top: 86px; right: 20px; z-index: 1200; max-width: 340px; }

/* ---- Detail page -------------------------------------------------------- */
.detail-gallery-main {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--bg-soft);
}
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.detail-thumb {
  width: 84px; height: 62px; border-radius: 8px; overflow: hidden;
  cursor: pointer; border: 2px solid transparent; opacity: 0.7;
  transition: all 0.2s var(--ease);
}
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumb:hover, .detail-thumb.active { opacity: 1; border-color: var(--gold); }
.spec-list { list-style: none; padding: 0; margin: 0; }
.spec-list li {
  display: flex; justify-content: space-between; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 0.92rem;
}
.spec-list li span:first-child { color: var(--muted); }
.spec-list li span:last-child { font-weight: 600; color: var(--ink); }
.feature-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.feature-pills span {
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 50px; font-size: 0.82rem;
}
.feature-pills span i { color: var(--gold-dark); margin-right: 6px; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #b9bac0; padding: 70px 0 0; }
.site-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand img { height: 52px; }
.footer-brand strong { color: #fff; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-brand strong span { color: var(--gold); }
.site-footer p { font-size: 0.9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: #b9bac0; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; }
.footer-links a i { color: var(--gold); font-size: 0.7rem; }
.footer-links a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: 0.9rem; }
.footer-contact i { color: var(--gold); margin-top: 4px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.07); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease);
}
.footer-social a:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }
.footer-newsletter input {
  width: 100%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: #fff; border-radius: 10px; padding: 12px 14px; font-family: inherit;
}
.footer-newsletter input::placeholder { color: #777; }
.footer-bottom {
  margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.08);
  padding: 22px 0; font-size: 0.85rem; display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a { color: var(--gold); }

/* ---- WhatsApp float ----------------------------------------------------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  transition: transform 0.25s var(--ease);
}
.wa-float:hover { transform: scale(1.1); color: #fff; }

/* ---- Scroll reveal ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(34px); transition: all 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Map ---------------------------------------------------------------- */
.map-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ---- Empty state -------------------------------------------------------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state i { font-size: 2.6rem; color: var(--line); margin-bottom: 14px; }

/* ---- Customer / Driver portal ------------------------------------------ */
.portal-nav { list-style: none; padding: 0; margin: 0; }
.portal-nav a {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  color: var(--text); font-weight: 500; font-size: 0.92rem;
  border-radius: 10px; margin-bottom: 3px; transition: all 0.2s var(--ease);
}
.portal-nav a i { width: 18px; text-align: center; color: var(--muted); }
.portal-nav a:hover { background: var(--bg-soft); }
.portal-nav a.active { background: var(--ink); color: #fff; }
.portal-nav a.active i { color: var(--gold); }
.portal-user {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  border-bottom: 1px solid var(--line);
}
.portal-user .pu-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--ink);
  color: var(--gold); display: flex; align-items: center;
  justify-content: center; font-weight: 700; flex-shrink: 0;
}
.portal-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; text-align: center;
}
.portal-stat .ps-num { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1; }
.portal-stat .ps-label { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.status-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 50px; text-transform: capitalize;
}
.sp-pending { background: #fef3c7; color: #b45309; }
.sp-confirmed { background: #dbeafe; color: #1d4ed8; }
.sp-completed { background: #dcfce7; color: #15803d; }
.sp-cancelled { background: #fee2e2; color: #b91c1c; }
.sp-succeeded { background: #dcfce7; color: #15803d; }
.sp-failed { background: #fee2e2; color: #b91c1c; }
.sp-refunded { background: #ede9fe; color: #6d28d9; }
.sp-unpaid { background: #f3f4f6; color: #6b7280; }
.sp-verified { background: #dcfce7; color: #15803d; }
.sp-unsubmitted { background: #f3f4f6; color: #6b7280; }
.sp-rejected { background: #fee2e2; color: #b91c1c; }
.sp-submitted { background: #dbeafe; color: #1d4ed8; }
.sp-under_review { background: #e0e7ff; color: #4338ca; }

/* ---- Star rating input ------------------------------------------------- */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px;
  font-size: 1.7rem; line-height: 1; }
.star-input input { display: none; }
.star-input label { color: #d4d4d8; cursor: pointer; transition: color .12s; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f59e0b; }
.review-stars { color: #f59e0b; letter-spacing: 1px; }
.review-stars .empty { color: #d4d4d8; }
.review-card {
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.review-card:last-child { border-bottom: none; }

/* ---- Schedule calendar (portal) ---------------------------------------- */
.veh-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.veh-cal th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 6px; text-align: center;
}
.veh-cal td {
  border: 1px solid var(--line); height: 80px; vertical-align: top;
  padding: 4px; width: 14.28%;
}
.veh-cal td.out { background: #fafafa; }
.veh-cal td.today { background: #fffaf0; }
.vc-day { font-size: .78rem; font-weight: 600; color: var(--ink); }
.veh-cal td.out .vc-day { color: #c4c4cc; }
.vc-ev {
  font-size: .65rem; padding: 2px 5px; border-radius: 4px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-booking { background: #dbeafe; color: #1d4ed8; }
.vc-off { background: #fef3c7; color: #b45309; }
.vc-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
  font-size: .78rem; color: var(--muted);
}
.vc-dot {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  vertical-align: middle; margin-right: 4px;
}
.vc-dot.vc-booking { background: #1d4ed8; }
.vc-dot.vc-off { background: #b45309; }
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th {
  text-align: left; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.portal-table td {
  padding: 13px 14px; font-size: 0.88rem; border-bottom: 1px solid var(--line);
}
.portal-table tr:last-child td { border-bottom: none; }

/* ---- Utilities ---------------------------------------------------------- */
.divider-gold { width: 60px; height: 3px; background: var(--gold); border-radius: 4px; }
.text-muted-2 { color: var(--muted) !important; }
.lift { transition: transform 0.3s var(--ease); }
.lift:hover { transform: translateY(-4px); }

@media (max-width: 991px) {
  .section { padding: 60px 0; }
  .cta-band { padding: 40px 28px; text-align: center; justify-content: center; }
}

/* ===========================================================================
   Mobile responsiveness & overflow hardening
   =========================================================================== */
/* Never allow the page to scroll sideways — fixes shifted content and the
   broken fixed-position mobile menu that horizontal overflow causes. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
input, select, textarea,
.form-control, .form-select { max-width: 100%; }

/* Lock background scrolling while the mobile menu is open. */
body.nav-open { overflow: hidden; }

/* Preloader safety net: fade out after 6s even if JavaScript never runs,
   so a slow/broken load can never trap the user on a blank screen. */
@keyframes dtsPreloaderAuto { to { opacity: 0; visibility: hidden; } }
#preloader { animation: dtsPreloaderAuto 0.5s ease 6s forwards; }
#preloader.hidden { animation: none; }

/* Clean fallback shown in the route-preview box if Google Maps fails. */
.dts-map-failed {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 22px; height: 100%;
  color: var(--muted); font-size: 0.9rem; line-height: 1.6;
}
.dts-map-failed i { color: var(--gold); margin-right: 6px; }
/* Suppress Google's raw error UI — we render our own message instead. */
.gm-err-container, .gm-err-content { display: none !important; }

@media (max-width: 991px) {
  /* ---- Premium mobile navigation drawer ------------------------------- */
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 340px); max-width: 340px; height: 100%;
    background: linear-gradient(180deg, #15171c 0%, #0d0e11 100%);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 84px 16px 30px; margin: 0;
    transform: translateX(105%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -20px 0 55px rgba(0, 0, 0, 0.55);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 120;          /* drawer sits above its backdrop */
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links li { width: 100%; list-style: none; }
  .nav-links a {
    display: flex; align-items: center; width: 100%;
    color: #f4f5f7; font-weight: 600; font-size: 1.02rem;
    padding: 15px 14px; border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a:active, .nav-links a.active {
    color: var(--gold); background: rgba(252, 165, 13, 0.10);
  }
  .nav-links a.active { box-shadow: inset 3px 0 0 var(--gold); }
  .nav-links li:last-child a { border-bottom: none; }
  /* Full-screen dim overlay — sits just under the drawer. */
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(7, 8, 11, 0.68);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;          /* backdrop — sits below the drawer (120) */
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }
  /* Backdrop must never capture clicks while hidden. */
  .nav-overlay:not(.show) { pointer-events: none; }
  .nav-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%; line-height: 1;
    background: rgba(255, 255, 255, 0.09); border: none;
    color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 121;
  }
  .nav-close:hover { background: rgba(252, 165, 13, 0.22); color: var(--gold); }
  .nav-brand { font-size: 1.05rem; gap: 8px; }
  .nav-brand img { height: 40px; }
  .nav-inner { gap: 10px; }
  #bookingMap { height: 260px !important; }
}

@media (max-width: 600px) {
  .preloader-logo { font-size: 1.3rem; letter-spacing: 0.2em; }
  .preloader-bar { width: 150px; }

  /* Hero */
  .hero { min-height: auto; }
  .hero-inner { padding: 52px 0 58px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .hero p { font-size: 1rem; }
  .hero-actions { gap: 10px; }
  .hero-actions > a, .hero-actions > button {
    width: 100%; justify-content: center;
  }
  .hero-trust { gap: 18px; margin-top: 26px; padding-top: 20px; }
  .hero-trust .num { font-size: 1.4rem; }

  /* Sections & headers */
  .section { padding: 46px 0; }
  .page-header { padding: 88px 0 46px; }

  /* Buttons */
  .btn-gold, .btn-outline-gold, .btn-ink {
    padding: 12px 22px; font-size: 0.9rem;
  }

  /* Booking page */
  .form-panel { padding: 22px 16px; }
  #bookingMap { height: 220px !important; }
  #estimatePanel .ps-num { font-size: 0.95rem !important; }
}

@media (max-width: 420px) {
  .booking-tab { min-width: 100%; }
}

/* ===========================================================================
   Booking estimate panel — premium responsive result cards
   =========================================================================== */
.est-panel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.est-card {
  background: #f6f7f9; border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 12px; text-align: center;
}
.est-card .est-ico {
  font-size: 1.15rem; color: var(--gold-dark); margin-bottom: 8px;
}
.est-card .est-val {
  font-size: 1.02rem; font-weight: 800; color: var(--ink); line-height: 1.3;
}
.est-card .est-lbl {
  font-size: 0.72rem; color: var(--muted); margin-top: 5px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.est-card-fare {
  background: linear-gradient(135deg,
    rgba(252, 165, 13, 0.16), rgba(252, 165, 13, 0.05));
  border-color: var(--gold);
}
.est-card-fare .est-ico { color: var(--gold-dark); }
.est-card-fare .est-val { color: var(--gold-dark); font-size: 1.2rem; }
@media (max-width: 560px) {
  .est-panel { grid-template-columns: 1fr; gap: 10px; }
  .est-card {
    display: flex; align-items: center; gap: 13px;
    text-align: left; padding: 14px 16px;
  }
  .est-card .est-ico {
    margin-bottom: 0; font-size: 1.35rem; width: 26px; text-align: center;
  }
  .est-card .est-val { font-size: 1.05rem; }
  .est-card .est-lbl { margin-top: 0; margin-left: auto; white-space: nowrap; }
}

/* ---- "Use my current location" button ----------------------------------- */
.dts-geo-btn {
  margin-top: 7px; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(252, 165, 13, 0.12); color: var(--gold-dark);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 8px 13px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dts-geo-btn:hover { background: var(--gold); color: #0e0f12; }
.dts-geo-btn:disabled { opacity: 0.6; cursor: progress; }
.dts-geo-status {
  font-size: 0.78rem; margin-top: 5px; color: var(--muted); line-height: 1.5;
}
.dts-geo-status.ok { color: #15803d; }
.dts-geo-status.err { color: #b91c1c; }

/* ===========================================================================
   Payment method cards — professional, mobile-friendly
   =========================================================================== */
.pay-methods { display: flex; flex-direction: column; gap: 14px; }
.pay-method {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pay-method:hover {
  border-color: var(--gold); box-shadow: 0 6px 20px rgba(252, 165, 13, 0.12);
}
.pay-method-head {
  display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1;
}
.pay-ico {
  font-size: 2rem; flex-shrink: 0; width: 40px; text-align: center;
}
.pay-method-info { display: flex; flex-direction: column; min-width: 0; }
.pay-method-info strong { font-size: 1rem; color: var(--ink); }
.pay-method-info span { font-size: 0.82rem; color: var(--muted); }
.pay-method form { margin: 0; }
.pay-btn { white-space: nowrap; }
.pay-unavailable { font-size: 0.82rem; color: var(--muted); }
.pay-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.82rem; color: var(--muted); margin: 16px 0 0;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .pay-method { flex-direction: column; align-items: stretch; gap: 13px; }
  .pay-method form, .pay-method .pay-btn { width: 100%; }
  .pay-method .pay-btn { justify-content: center; }
}

/* ===========================================================================
   SweetAlert2 — always on top & always interactive
   The confirmation dialog (Confirm / Cancel buttons) must render above every
   navbar, drawer, backdrop, sidebar and sticky header on the site so its
   buttons are never covered and can always be clicked.
   =========================================================================== */
.swal2-container { z-index: 100000 !important; }
.swal2-popup { pointer-events: auto !important; }

/* ===========================================================================
   Premium billing-type switch (rental booking + add-ons step)
   Replaces the default <select> with a luxury gold/black pill toggle.
   =========================================================================== */
.billing-switch-wrap { margin-bottom: 1rem; }
.billing-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  background: #f4f5f8;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(15, 16, 20, .04);
}
.billing-switch-pill {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
  color: #4a4f5b;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease,
              transform .12s ease;
}
.billing-switch-pill i { font-size: 1.05rem; color: #6b7280; margin-bottom: 4px; }
.billing-switch-pill .bs-title {
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
}
.billing-switch-pill .bs-sub {
  font-size: .76rem;
  color: #7a808b;
}
.billing-switch-pill:hover { background: #fff; color: var(--ink); }
.billing-switch-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(252, 165, 13, .35);
}
.billing-switch-pill.is-active {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 6px 16px -8px rgba(252, 165, 13, .55),
              inset 0 0 0 1px rgba(252, 165, 13, .25);
}
.billing-switch-pill.is-active i { color: var(--gold); }
.billing-switch-pill.is-active .bs-sub { color: #f1d089; }
.billing-switch-pill:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .billing-switch { grid-template-columns: 1fr; gap: 6px; }
  .billing-switch-pill { padding: 12px 14px; }
}

/* Compact variant used inside the /fleet/<slug>/ Quick Rent panel */
.billing-switch-compact .billing-switch-pill { padding: 10px 12px; }
.billing-switch-compact .billing-switch-pill .bs-title { font-size: .92rem; }
.billing-switch-compact .billing-switch-pill .bs-sub { font-size: .72rem; }

/* Read-only billing-type badge — shown on the classic rental form; the
   actual selector lives on /fleet/<slug>/ Quick Rent. */
.billing-readonly {
  background: #f4f5f8;
  border: 1px solid #e3e6ed;
  border-radius: 12px;
  padding: 12px 14px;
}
.billing-readonly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.billing-readonly-value {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}

/* Auto-detected billing mode panel — driven by the rental duration.
   States: empty / hour / day / error. Used on /fleet/<slug>/ Quick Rent
   and on /booking/classic/ rental form. Users never pick billing mode. */
.billing-auto {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px;
  background: #f7f8fb;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  transition: background .2s ease, border-color .2s ease;
}
.billing-auto[data-state="hour"] {
  background: linear-gradient(180deg, rgba(252,165,13,.06) 0%, #fff 100%);
  border-color: rgba(252,165,13,.35);
}
.billing-auto[data-state="day"] {
  background: linear-gradient(180deg, rgba(252,165,13,.10) 0%, #fff 100%);
  border-color: var(--gold);
}
.billing-auto[data-state="error"] {
  background: #fef2f2;
  border-color: #f3b0b0;
}
.billing-auto-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(252,165,13,.12);
  color: var(--gold);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.billing-auto[data-state="error"] .billing-auto-icon {
  background: rgba(220,53,69,.12); color: #b42330;
}
.billing-auto-body { min-width: 0; flex: 1; }
.billing-auto-label {
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7a808b;
  font-weight: 600;
}
.billing-auto-value {
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink);
  margin-top: 2px;
  margin-bottom: 4px;
}
.billing-auto-hint {
  font-size: .82rem;
  color: #51596a;
  line-height: 1.45;
}
.billing-auto[data-state="error"] .billing-auto-value { color: #b42330; }
@media (max-width: 480px) {
  .billing-auto { padding: 12px 12px; gap: 10px; }
  .billing-auto-icon { width: 34px; height: 34px; font-size: .95rem; }
}

.quick-rent-card {
  background: #fff;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 24px -18px rgba(15, 16, 20, .25);
}
.quick-rent-card h5 { font-weight: 700; margin: 0 0 4px; }
.quick-rent-card .form-control {
  border-radius: 10px;
}

/* ===========================================================================
   Rental add-ons step (card grid shown between review and payment)
   Mobile-first, premium gold/black, no horizontal overflow.
   =========================================================================== */
.addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.addon-card {
  position: relative;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  background: #fff;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.addon-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 10px 24px -16px rgba(252, 165, 13, .45),
              0 0 0 1px rgba(252, 165, 13, .25) inset;
}
.addon-card.is-bundle { background: #f3faf3; border-color: #c7e7c8; }
.addon-card.is-bundle.is-selected { border-color: var(--gold); background: #fff8e6; }
.addon-card .addon-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
}
.addon-card .addon-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(252, 165, 13, .12);
  color: var(--gold);
  font-size: 1.1rem;
}
.addon-card .addon-title {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0;
}
.addon-card .addon-desc {
  color: #51596a;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
}
.addon-card .addon-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed #eceff5;
}
.addon-card .addon-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.addon-card .addon-price small { font-size: .7rem; color: #6b7280; font-weight: 500; }
.addon-toggle {
  appearance: none;
  border: 1px solid var(--gold);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.addon-toggle:hover { background: var(--gold); color: var(--ink); }
.addon-toggle.is-selected {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
.addon-toggle:active { transform: translateY(1px); }

.addons-summary {
  position: sticky;
  top: 80px;
  background: #fff;
  border: 1px solid #e3e6ed;
  border-radius: 14px;
  padding: 18px;
}
.addons-summary h4 { font-weight: 700; margin: 0 0 12px; font-size: 1.05rem; }
.addons-summary .as-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: .9rem; color: #51596a;
}
.addons-summary .as-row strong { color: var(--ink); }
.addons-summary .as-divider {
  height: 1px; background: #eceff5; margin: 10px 0;
}
.addons-summary .as-total {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  padding-top: 4px;
}

/* ===========================================================================
   Stage 12 — Premium animated hero / Why-Choose-Us / About visuals
   ------------------------------------------------------------------
   Pure-CSS animations, no new image assets, no external CDN. Adds a slow
   Ken-Burns zoom + gold-shimmer overlay to .hero-bg, and a diagonal gold
   light sweep + soft float to every .media-frame img (Why-Choose-Us, About).
   All animations honour prefers-reduced-motion. Underlying images still
   render fully if animations fail — graceful degradation.
   =========================================================================== */
.hero-bg {
  animation: heroKenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
.hero {
  /* Pseudo-element layer behind the dark gradient that adds a slow
     gold-sparkle drift — gives the hero a subtle premium 3D feel. */
  position: relative;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(252,165,13,0.22), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(252,165,13,0.15), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(252,165,13,0.08), transparent 55%);
  mix-blend-mode: screen;
  animation: heroGoldDrift 18s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.13) translate3d(-1.5%, -1%, 0); }
  100% { transform: scale(1.08) translate3d(1.5%, 0.6%, 0); }
}
@keyframes heroGoldDrift {
  0%   { opacity: 0.65; transform: translate3d(0, 0, 0); }
  50%  { opacity: 1;    transform: translate3d(1%, -0.8%, 0); }
  100% { opacity: 0.78; transform: translate3d(-0.6%, 0.8%, 0); }
}

/* Subtle diagonal gold "sweep" + soft float on the framed marketing images
   (Why Choose Us section + About page Story image). The sweep uses a
   pseudo-element so the underlying <img> isn't touched. */
.media-frame {
  position: relative;
  isolation: isolate;
}
.media-frame img {
  display: block;
  transform: translateZ(0);   /* hint the GPU layer */
  animation: mediaFloat 9s ease-in-out infinite alternate;
}
.media-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
              transparent 0%, transparent 38%,
              rgba(252,165,13,0.22) 50%,
              transparent 62%, transparent 100%);
  background-size: 220% 220%;
  background-position: -120% -120%;
  mix-blend-mode: screen;
  border-radius: inherit;
  animation: mediaSweep 6.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes mediaFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1.00); }
  100% { transform: translate3d(0, -6px, 0) scale(1.015); }
}
@keyframes mediaSweep {
  0%   { background-position: -120% -120%; opacity: 0; }
  30%  { opacity: 1; }
  100% { background-position: 220% 220%;   opacity: 0; }
}

/* Accessibility — respect the system's reduced-motion preference. The
   visuals remain present (static), just without movement. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero::after,
  .media-frame img, .media-frame::before {
    animation: none !important;
  }
}

/* ===========================================================================
   Stage 13 — Cinematic luxury-transport hero + premium media spotlight
   ------------------------------------------------------------------
   Pure-CSS layered scene — NO new image assets, NO external libraries.
   Suggests a luxury SUV in motion through perspective road lines that
   stream toward the camera, twin gold headlight cones that pulse, and
   slow gold-dust particles drifting through the frame. Atmospheric +
   premium, never "childish". All animations respect
   prefers-reduced-motion. GPU-friendly transforms only; total CSS
   weight ~2 KB.

   Markup contract (added to core/templates/core/home.html):

     <section class="hero">
       <div class="hero-bg" ...></div>            (existing)
       <div class="hero-road"  aria-hidden="true"></div>
       <div class="hero-headlights" aria-hidden="true">
         <span class="hl hl-left"></span>
         <span class="hl hl-right"></span>
       </div>
       <div class="hero-particles" aria-hidden="true">
         <span></span><span></span><span></span>
         <span></span><span></span><span></span>
       </div>
       <div class="container">...</div>
     </section>
   =========================================================================== */

/* ---- Perspective road lines streaming forward ---------------------------- */
.hero-road {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  perspective: 600px;
  overflow: hidden;
}
.hero-road::before, .hero-road::after {
  content: ""; position: absolute;
  left: 50%; bottom: -20%; width: 240vw; height: 180%;
  transform-origin: 50% 0%;
  transform: translateX(-50%) rotateX(72deg);
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(252,165,13,0.0) 0px,
      rgba(252,165,13,0.0) 38px,
      rgba(252,165,13,0.55) 38px,
      rgba(252,165,13,0.55) 56px);
  mask-image: radial-gradient(ellipse at 50% 0%,
              rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 38%,
              rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%,
              rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 38%,
              rgba(0,0,0,0) 70%);
  opacity: 0.55;
  animation: roadStream 4.2s linear infinite;
  will-change: background-position;
}
/* Second layer offset for parallax depth */
.hero-road::after {
  filter: blur(1px);
  opacity: 0.32;
  animation-duration: 6.5s;
  animation-delay: -1.5s;
}
@keyframes roadStream {
  0%   { background-position: 0 0;    }
  100% { background-position: 0 480px; }
}

/* ---- Twin gold headlight cones with subtle pulse ------------------------- */
.hero-headlights {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.hero-headlights .hl {
  position: absolute; bottom: 8%; width: 60vw; height: 80vh;
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: opacity, transform;
}
.hero-headlights .hl-left {
  left: 8%;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(252,210,90,0.55) 0%,
              rgba(252,165,13,0.30) 28%,
              rgba(252,165,13,0)     65%);
  animation: headlightPulse 5.4s ease-in-out infinite;
}
.hero-headlights .hl-right {
  right: 8%;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(252,210,90,0.55) 0%,
              rgba(252,165,13,0.30) 28%,
              rgba(252,165,13,0)     65%);
  animation: headlightPulse 5.4s ease-in-out 0.7s infinite;
}
@keyframes headlightPulse {
  0%,100% { opacity: 0.48; transform: scale(1.00); }
  50%     { opacity: 0.78; transform: scale(1.06); }
}

/* ---- Slow gold-dust particles drifting through the frame ----------------- */
.hero-particles {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.hero-particles span {
  position: absolute; bottom: -10px;
  width: 4px; height: 4px;
  background: rgba(252,210,90,0.85);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(252,210,90,0.7),
              0 0 16px rgba(252,165,13,0.3);
  opacity: 0;
  animation: particleDrift 18s linear infinite;
  will-change: transform, opacity;
}
.hero-particles span:nth-child(1) { left:  8%; width: 3px; height: 3px;
  animation-delay:  0s;   animation-duration: 22s; }
.hero-particles span:nth-child(2) { left: 22%; width: 5px; height: 5px;
  animation-delay: -4s;   animation-duration: 16s; }
.hero-particles span:nth-child(3) { left: 41%; width: 3px; height: 3px;
  animation-delay: -9s;   animation-duration: 24s; }
.hero-particles span:nth-child(4) { left: 60%; width: 4px; height: 4px;
  animation-delay: -2s;   animation-duration: 20s; }
.hero-particles span:nth-child(5) { left: 78%; width: 6px; height: 6px;
  animation-delay: -12s;  animation-duration: 26s; }
.hero-particles span:nth-child(6) { left: 92%; width: 3px; height: 3px;
  animation-delay: -7s;   animation-duration: 19s; }
@keyframes particleDrift {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    opacity: 0;   }
  10%  {                                                       opacity: 0.9; }
  90%  { transform: translate3d(-14px, -85vh, 0) scale(1.4); opacity: 0.9; }
  100% { transform: translate3d(-20px, -95vh, 0) scale(1.6); opacity: 0;   }
}

/* ---- Cinematic vignette tightens focus on the headline ------------------- */
.hero {
  /* Subtle inner vignette painted by box-shadow inset — keeps the image
     intact (no extra DOM nodes needed). */
  box-shadow:
    inset 0 -80px 140px rgba(10,11,14,0.55),
    inset 0  60px 120px rgba(10,11,14,0.35);
}

/* ---- Premium media-frame "spotlight" + corner gold accents --------------- */
/* Anchors a new <span class="mf-spotlight"> element added inside every
   .media-frame in core/templates/core/home.html + about.html. Casts a
   slow gold spotlight behind the image — reads as "headlights washing
   the bodywork" without overpowering the existing photo. */
.media-frame { position: relative; }
.media-frame .mf-spotlight {
  position: absolute; inset: -8% -6% -12% -6%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 35%,
              rgba(252,210,90,0.32) 0%,
              rgba(252,165,13,0.18) 22%,
              rgba(252,165,13,0)    52%);
  filter: blur(14px);
  border-radius: 32px;
  animation: spotlightPulse 7s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes spotlightPulse {
  0%   { opacity: 0.70; transform: translate3d(-2%, 0,    0) scale(1.00); }
  100% { opacity: 1.00; transform: translate3d( 3%, 1.5%, 0) scale(1.08); }
}
/* Gold corner accents on the framed photo — the kind of detail you'd
   see on luxury-magazine layouts. Uses the existing .media-frame, no
   extra markup needed. */
.media-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 2;
  background:
    linear-gradient(135deg, var(--gold) 0 12%, transparent 12.5%) top left    / 38px 38px no-repeat,
    linear-gradient(225deg, var(--gold) 0 12%, transparent 12.5%) top right   / 38px 38px no-repeat,
    linear-gradient( 45deg, var(--gold) 0 12%, transparent 12.5%) bottom left / 38px 38px no-repeat,
    linear-gradient(315deg, var(--gold) 0 12%, transparent 12.5%) bottom right/ 38px 38px no-repeat;
  opacity: 0.75;
  mix-blend-mode: screen;
}

/* ---- Mobile + reduced-motion safeties ------------------------------------ */
@media (max-width: 768px) {
  /* Drop the heaviest animations on small screens — the static gold
     wash + vignette is still premium without burning battery. */
  .hero-road, .hero-particles { display: none; }
  .hero-headlights .hl { filter: blur(28px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-road::before, .hero-road::after,
  .hero-headlights .hl, .hero-particles span,
  .media-frame .mf-spotlight {
    animation: none !important;
  }
}

/* ===========================================================================
   Stage 14 — Premium image hero + glassmorphism treatment
   ------------------------------------------------------------------
   The hero now uses a real luxury-transport photo (core/static/image/6.jpg)
   instead of the SVG illustration. We wrap the .hero-inner content in a
   glass card (backdrop-filter blur + soft gold border + subtle inner
   glow), and the framed photos in .media-frame get a polished glass
   pane behind them. All effects degrade gracefully on browsers that
   don't support backdrop-filter (Firefox <103, older Safari) — the
   panel still renders as a soft translucent dark surface.
   =========================================================================== */

/* Larger photo backgrounds need slightly more darkening to keep the
   white headline readable. We stack a second gradient on top of the
   existing .hero::before (which stays in place). */
.hero-bg {
  background-color: #0a0b0e;   /* fallback while image loads */
}

/* The previous "glass card" treatment around .hero-inner was removed
   here. The hero content now sits directly on the cinematic
   background image with no card framing, no border, no backdrop blur,
   no inner shadow, and no gold corner glow.

   The base `.hero-inner { padding: 90px 0; max-width: 720px; }` rule
   (line ~194) and the `.hero--centered .hero-inner { ... }` rules
   (line ~1936) continue to drive vertical breathing room, container
   width and centering — so hero content position is unchanged.

   Properties intentionally NO LONGER applied to .hero-inner:
     position: relative
     padding: 48px 38px
     border-radius: 22px
     background: linear-gradient(...)
     border: 1px solid ...
     box-shadow: ...
     -webkit-backdrop-filter / backdrop-filter: blur(...) saturate(...)
     isolation: isolate

   The .hero-inner::before (gold top hairline) and .hero-inner::after
   (gold corner glow) pseudo-elements that decorated the card are
   removed entirely. The mobile-only @media (max-width: 768px)
   override that re-applied padding + backdrop-filter to .hero-inner
   is also removed; .hero--centered's own mobile padding rule still
   handles small-screen breathing room on the homepage hero. */

/* Glass pane behind every framed image — sits between the spotlight
   and the photo, giving the photo a premium "studio mount" feel. */
.media-frame {
  background: linear-gradient(160deg,
              rgba(28,30,38,0.55) 0%,
              rgba(28,30,38,0.30) 100%);
  border: 1px solid rgba(252,165,13,0.18);
  border-radius: 24px;
  padding: 10px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.media-frame img {
  border-radius: 18px;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}
/* Reposition Stage-13 corner accents so they hug the photo, not the
   outer glass padding. */
.media-frame::after {
  inset: 10px;
  border-radius: 18px;
}

/* Reduced-motion fallback covers Stage 14 too (no animations added,
   but kept for completeness if we add any later). */

/* ===========================================================================
   Stage 15 — Premium Texas-map destination visual
   ------------------------------------------------------------------
   Pure inline SVG state outline + five animated city pins, sitting on
   a dark glass card. NO Google Maps dependency, NO image asset, NO JS
   library. Total CSS ~2 KB. Mobile-responsive (collapses to single
   column under 900 px); reduced-motion honoured.
   =========================================================================== */
.tx-map-section {
  background:
    radial-gradient(circle at 20% 30%, rgba(252,165,13,0.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(252,165,13,0.05), transparent 50%),
    linear-gradient(180deg, #0e1014 0%, #14171d 100%);
  color: #eaeaef;
}
.tx-map-section .section-eyebrow,
.tx-map-section .section-head h2 { color: #fff; }
.tx-map-section .section-head p  { color: #b9bac0; }
.tx-map-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding: 28px;
  margin: 24px 0 36px;
  border-radius: 24px;
  background: linear-gradient(160deg,
              rgba(28,30,38,0.55) 0%,
              rgba(20,22,28,0.30) 100%);
  border: 1px solid rgba(252,165,13,0.22);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.tx-map {
  display: block;
  width: 100%;
  max-height: 520px;
  height: auto;
  filter: drop-shadow(0 14px 38px rgba(252,165,13,0.18));
}

/* The state outline itself */
.tx-map .tx-outline {
  /* Subtle slow pulse on the gold stroke — feels alive, never busy. */
  animation: txOutlinePulse 6s ease-in-out infinite alternate;
}
@keyframes txOutlinePulse {
  0%   { filter: drop-shadow(0 0 4px  rgba(252,165,13,0.45)); }
  100% { filter: drop-shadow(0 0 16px rgba(252,165,13,0.85)); }
}

/* Route dashes flowing between pins */
.tx-map .tx-routes line {
  stroke-dashoffset: 0;
  animation: txRouteDash 14s linear infinite;
}
@keyframes txRouteDash {
  0%   { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -100; }
}

/* Pin styling — dot + pulsing halo + label */
.tx-map .tx-pin .pin-dot {
  fill: #fca50d;
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(252,165,13,0.9));
}
.tx-map .tx-pin .pin-pulse {
  fill: none;
  stroke: #fca50d;
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  animation: pinPulse 2.4s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes pinPulse {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.tx-map .tx-pin .pin-label {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: rgba(10,11,14,0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Glass info card next to the map */
.tx-map-card {
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(160deg,
              rgba(20,22,28,0.65) 0%,
              rgba(20,22,28,0.35) 100%);
  border: 1px solid rgba(252,165,13,0.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.tx-map-card .tx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(252,165,13,0.42);
  padding: 6px 14px; border-radius: 50px; margin-bottom: 14px;
}
.tx-map-card h3 {
  color: #fff; font-size: 1.55rem; margin: 0 0 14px; line-height: 1.25;
}
.tx-map-card p {
  color: #c9cad0; margin: 0 0 20px; font-size: 0.98rem; line-height: 1.6;
}
.tx-map-card strong { color: var(--gold); }
.tx-map-card .btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
}

/* Mobile fallback — stack the glass card below the map. */
@media (max-width: 900px) {
  .tx-map-wrap { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .tx-map { max-height: 380px; }
  .tx-map-card { padding: 22px; }
}
@media (max-width: 480px) {
  .tx-map-wrap { padding: 14px; border-radius: 18px; }
  .tx-map { max-height: 320px; }
  .tx-map-card h3 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tx-map .tx-outline,
  .tx-map .tx-routes line,
  .tx-map .tx-pin .pin-pulse {
    animation: none !important;
  }
  .tx-map .tx-pin .pin-pulse { opacity: 0; }
}

/* ===========================================================================
   Stage 16a — Fleet image gallery: zoom hint + premium lightbox overlay
   --------------------------------------------------------------------------
   The existing thumbnail strip + click-to-swap viewer stays unchanged;
   this layer adds a single-click full-screen viewer with prev/next nav
   and keyboard support. Pure CSS overlay + tiny JS in vehicle_detail.html
   — no new libraries.
=========================================================================== */
.detail-gallery-main { position: relative; cursor: zoom-in; }
.detail-gallery-main .gallery-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(252,165,13,0.55);
  background: rgba(10,11,14,0.65); color: var(--gold, #fca50d);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .18s ease, background .18s ease;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.detail-gallery-main .gallery-zoom:hover {
  transform: scale(1.08); background: rgba(252,165,13,0.18);
}
.detail-gallery-main .gallery-zoom i { font-size: 1rem; }

.vehicle-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8,9,12,0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.vehicle-lightbox.open { display: flex; }
.vehicle-lightbox-figure {
  margin: 0; max-width: 1100px; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.vehicle-lightbox-figure img {
  max-width: 100%; max-height: 82vh;
  border-radius: 14px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(252,165,13,0.22);
  object-fit: contain; background: #0e0f12;
}
.vehicle-lightbox-figure figcaption {
  color: #d6d7dc; font-size: 0.95rem; text-align: center;
  max-width: 800px;
}
.vehicle-lightbox-close,
.vehicle-lightbox-nav {
  position: absolute; border: 1px solid rgba(252,165,13,0.45);
  background: rgba(20,22,28,0.7); color: #fff;
  border-radius: 999px; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.vehicle-lightbox-close:hover,
.vehicle-lightbox-nav:hover {
  background: rgba(252,165,13,0.18); color: var(--gold, #fca50d);
  transform: scale(1.06);
}
.vehicle-lightbox-close {
  top: 18px; right: 18px;
  width: 46px; height: 46px; font-size: 1.6rem; line-height: 1;
}
.vehicle-lightbox-nav {
  top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; font-size: 2rem; line-height: 1;
}
.vehicle-lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.vehicle-lightbox-nav.prev { left: 22px; }
.vehicle-lightbox-nav.next { right: 22px; }

@media (max-width: 600px) {
  .vehicle-lightbox { padding: 12px; }
  .vehicle-lightbox-figure img { max-height: 72vh; }
  .vehicle-lightbox-close { top: 10px; right: 10px;
                            width: 40px; height: 40px; font-size: 1.4rem; }
  .vehicle-lightbox-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .vehicle-lightbox-nav.prev { left: 10px; }
  .vehicle-lightbox-nav.next { right: 10px; }
}

/* ===========================================================================
   Frontend audit (Stage 22) — mobile polish without breaking the desktop look.
   ---------------------------------------------------------------------------
   Root causes of the reported mobile bugs:

   (a) ".media-frame .mf-spotlight" had inset:-8% -6% -12% -6%; — that
       -12% bottom let the gold spotlight bleed DOWN into the text below
       the image on every mobile-stacked Why-Choose-Us / About story
       section. To the user it read as "image overlaying text".
   (b) ".media-frame::after" gold corner accents at z-index:2 were
       fine, but on small screens the glow + corner accents together
       made the framed photo feel cramped against the next column's
       text once .row stacked to a single column.
   (c) Bootstrap's .g-5 vertical gap is large but applied to the row,
       so the stacked image -> text gap was uneven when the frame
       carried an extra spotlight halo.

   Fix policy: clip the bleed AND give the frame a hard bottom margin
   on small screens. Keep the gold glow on desktop where the columns
   sit side-by-side and the halo never touches text.
   =========================================================================== */
@media (max-width: 991px) {
  /* Pull the spotlight inside the frame so it can't wash over the
     adjacent text column when the row stacks. */
  .media-frame .mf-spotlight {
    inset: 0;
    border-radius: 18px;
    filter: blur(10px);
  }
  /* Make the corner accents a touch smaller on tablet/mobile so the
     frame stays a "frame" rather than a busy gold-cornered card. */
  .media-frame::after {
    background-size: 26px 26px;
    opacity: 0.55;
  }
  /* Guaranteed visual gap between the stacked photo and the text. */
  .media-frame {
    margin-bottom: 28px;
  }
}

@media (max-width: 768px) {
  /* Hard-cap the framed image height on phones so a portrait photo
     never pushes the section eyebrow off-screen. */
  .media-frame img {
    max-height: 60vh;
    object-fit: cover;
  }
  /* Tighten the media badge so it doesn't dwarf a small phone view. */
  .media-badge {
    bottom: 12px; left: 12px;
    padding: 10px 14px; border-radius: 10px;
  }
  .media-badge .mb-num { font-size: 1.4rem; }
  .media-badge .mb-lbl { font-size: 0.68rem; }
  /* Bootstrap .row.align-items-center centers vertically — that's the
     right call on desktop side-by-side layouts, but on mobile stack
     the natural top alignment reads better. */
  .row.align-items-center { align-items: stretch !important; }
  /* Section eyebrows can overlap on very narrow screens if the row
     has the alternating .order-lg-* trick; reset margin. */
  .section-eyebrow { margin-top: 4px; }
  /* Feature-item icons + text never overflow on narrow phones. */
  .feature-item { gap: 10px; }
  .feature-item .fi-icon {
    flex-shrink: 0; width: 42px; height: 42px;
  }
}

@media (max-width: 414px) {
  /* Tightest phones (iPhone 11/14 mini etc.) — drop the corner accents
     entirely so the framed photo doesn't feel busy. */
  .media-frame::after { display: none; }
  .media-frame {
    padding: 6px;
    border-radius: 18px;
  }
  .media-frame img { border-radius: 14px; }
  /* The hero "cinematic" overlay sometimes pushes the H1 below the
     fold on tiny phones — reduce hero inner padding. */
  .hero-inner { padding: 26px 16px !important; }
  .section { padding: 50px 0; }
  /* Page-header (sub-page hero) gets squeezed at 320–414 — reduce
     vertical padding so the breadcrumb stays visible above the fold. */
  .page-header { padding: 80px 0 40px; }
}

/* Respect reduced-motion at every breakpoint. */
@media (prefers-reduced-motion: reduce) {
  .media-frame .mf-spotlight,
  .media-frame::after { animation: none !important; }
}

/* ===========================================================================
   Stage 22 — Centered hero headline + luxury-car background
   ------------------------------------------------------------------
   Scoped to the .hero--centered modifier on <section class="hero"> so
   nothing else on the site can drift if this block is reverted. The
   underlying Stage 13 + 14 layers (ken-burns, headlights, particles,
   glass card, gold corner accents) all keep working — we only adjust:

     * .hero-inner alignment (max-width + auto margins + text-align)
     * .hero h1 line-height, letter-spacing, balanced wrap, clamp()
     * .hero p, .hero-actions, .hero-trust horizontal centering
     * background-position (slightly higher on mobile so the car
       silhouette stays in frame instead of just road / sky)
     * overlay strength (the new shot is darker than the legacy
       frontImg.jpg, so the existing left-to-right gradient gets a
       full-card darken pass to keep white text fully readable)

   No new DOM elements, no JS, no extra image requests, no layout
   shift (heights stay clamped to the existing min-height: 92vh).
   =========================================================================== */
.hero--centered .hero-bg {
  /* The car sits in the lower-right of the photo. Pulling the focal
     point slightly off-center on desktop keeps the headline-side
     darker for contrast, while the car remains visible on the right.
     Mobile media query below re-centers to keep the car composition
     intact when the card stacks vertically. */
  background-position: center 40%;
}
/* Replace the old left-to-right gradient with a balanced vignette
   that holds white text in the center on every breakpoint. The
   .hero::before pseudo-element is the original one (line ~189), we
   just override the gradient via a higher-specificity selector. */
.hero--centered::before {
  background:
    radial-gradient(ellipse at center,
                    rgba(10,11,14,0.55) 0%,
                    rgba(10,11,14,0.78) 55%,
                    rgba(10,11,14,0.92) 100%),
    linear-gradient(180deg, rgba(10,11,14,0.20), rgba(10,11,14,0.50));
}
/* Center the glass card itself + everything inside it. */
.hero--centered .hero-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
  text-align: center;
}
.hero--centered .eyebrow {
  /* The eyebrow is inline-flex already; centering its container is
     enough — no width tweak needed. */
  margin-left: auto;
  margin-right: auto;
}
.hero--centered .hero h1,
.hero--centered h1 {
  /* Tighter, more cinematic clamp for the big headline:
       360 px:  ~2.05 rem
       768 px:  ~3.05 rem
       1440 px: ~3.85 rem
     line-height = 1.08 keeps the two-line wrap tight on desktop and
     readable on phones. text-wrap: balance breaks the line on a
     natural word boundary instead of an awkward orphan. */
  font-size: clamp(2.05rem, 4.6vw + 0.4rem, 3.85rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0 auto 18px;
  max-width: 18ch;     /* keeps the headline from sprawling on ultra-wide */
}
.hero--centered .hero p,
.hero--centered p {
  margin-left: auto;
  margin-right: auto;
  max-width: 56ch;
  line-height: 1.65;
}
.hero--centered .hero-actions {
  justify-content: center;
}
.hero--centered .hero-trust {
  justify-content: center;
  border-top-color: rgba(255,255,255,0.18);
}
.hero--centered .hero-trust > div { text-align: center; }

/* Tablet — slight max-width + padding squeeze so the card breathes. */
@media (max-width: 1024px) {
  .hero--centered .hero-inner {
    max-width: 720px;
    padding: 40px 32px;
  }
}
/* Mobile — re-center the car and let the card go almost full width. */
@media (max-width: 768px) {
  .hero--centered .hero-bg {
    /* Recentre the focal point so on a portrait phone we still see
       the car body, not just empty asphalt. */
    background-position: 60% center;
  }
  .hero--centered::before {
    /* Darker overall on mobile — small text needs extra contrast. */
    background:
      radial-gradient(ellipse at center,
                      rgba(10,11,14,0.65) 0%,
                      rgba(10,11,14,0.85) 60%,
                      rgba(10,11,14,0.95) 100%),
      linear-gradient(180deg, rgba(10,11,14,0.30), rgba(10,11,14,0.65));
  }
  .hero--centered .hero-inner {
    max-width: 100%;
    padding: 30px 20px;
  }
  .hero--centered .hero-trust {
    gap: 18px;
    margin-top: 28px;
    padding-top: 20px;
  }
  .hero--centered .hero-actions {
    gap: 10px;
  }
  /* Make the action buttons span the centered card on narrow phones
     so they're easy to tap and visually balanced under the headline. */
  .hero--centered .hero-actions .btn-gold,
  .hero--centered .hero-actions .btn-outline-gold {
    flex: 1 1 160px;
    justify-content: center;
  }
}
/* Very small phones (iPhone SE etc.) — shrink the trust block so it
   doesn't push the buttons off-screen. */
@media (max-width: 380px) {
  .hero--centered .hero-trust .num { font-size: 1.4rem; }
  .hero--centered .hero-trust .lbl { font-size: 0.72rem; }
}
/* Older browsers without text-wrap: balance fall back to a sensible
   word-break — no JS polyfill needed. */
@supports not (text-wrap: balance) {
  .hero--centered .hero h1 { word-break: break-word; }
}

/* ===========================================================================
   Three-line hero headline — refined typography pass.
   Stack:
     .welcome-line — Poppins Light, uppercase, letter-spaced (eyebrow feel)
     .brand-line   — Poppins ExtraBold, biggest, one line on desktop,
                     gentle fade-up reveal + a one-pass gold shimmer
     .accent       — Poppins italic, smaller, gold, supporting tagline

   Everything stays in the brand's Poppins family so the hero reads as
   one cohesive premium identity. The accent uses synthesised italic so
   we don't need a new font file. clamp() drives every size; the brand
   line is held to ONE line on desktop (white-space: nowrap) and is
   allowed to wrap cleanly on phones (word-break: keep-all so it splits
   between words, never inside one).

   Animation safety:
   - Welcome + accent start at opacity 1, animation only nudges them.
   - Brand line uses opacity:1 as a hard fallback AND `animation-fill-mode:
     both` so a stalled keyframe can never leave the brand invisible.
   - prefers-reduced-motion holds the final state with zero motion.
   =========================================================================== */
.hero h1.hero-headline {
  display: block;
  margin: 0 auto 22px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  /* No artificial max-width here — each child line drives its own box
     so the brand-line never wraps just because the H1 was sized for
     the eyebrow line. */
  max-width: none;
  font-size: 1rem;
}

/* Welcome to — Poppins Light, uppercase, generous tracking. Reads
   as a luxury hotel-style eyebrow. Medium size, never bigger than
   the brand line. */
.hero h1.hero-headline .welcome-line {
  display: block;
  font-family: inherit;                /* Poppins from <body> */
  font-style: normal;
  font-weight: 300;
  color: #efeae0;
  font-size: clamp(1rem, 1.6vw + 0.4rem, 1.55rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 8px;
  opacity: 1;
  animation: heroSettle 0.9s ease 0.05s both;
}

/* DTS Lux Transport — Poppins ExtraBold, white, BIGGEST.
   Premium infinite shimmer: a soft gold light bar drifts across the
   text every 7 s. The text stays white the whole time; only a narrow
   ~18-% slice of the gradient is gold, so the brand is always
   readable. One-pass entrance reveal layers on top of the loop so
   the brand fades up cleanly on first paint. */
.hero h1.hero-headline .brand-line {
  display: block;
  font-family: inherit;                /* Poppins ExtraBold from base CSS */
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw + 0.4rem, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  /* Stay on one line on tablets + desktop so the brand reads as one
     unit. Mobile re-enables wrap via the breakpoint below. */
  white-space: nowrap;
  word-break: keep-all;
  /* Colour stack:
     - color: white = the readable fallback when background-clip:text
       isn't supported (old browsers, certain print contexts).
     - The background gradient is a wide horizontal band of WHITE
       with a single narrow gold light slice. Clipped to text + paired
       with the animation, this produces a moving gold reflection
       that drifts across "DTS Lux Transport" infinitely. */
  color: #ffffff;
  /* Visible gold band on a white-everywhere base. The gradient is
     200% wide so it ALWAYS fully covers the text at every animation
     frame — there's no position where the right side of the brand
     falls outside the gradient (which would otherwise show the dark
     hero through the transparent letterforms — the "dark DTS" bug).
     The gold band sits at 50% of the gradient with soft warm-white
     edges so the sweep reads as a rolling reflection, not a stripe. */
  background-image: linear-gradient(
    100deg,
    #ffffff 0%,
    #ffffff 35%,
    rgba(255, 240, 200, 0.96) 43%,
    rgba(255, 218, 130, 1)    48%,
    var(--gold)               50%,
    rgba(255, 218, 130, 1)    52%,
    rgba(255, 240, 200, 0.96) 57%,
    #ffffff 65%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  /* repeat-x is BELT-AND-BRACES: if any frame slips outside the math
     (sub-pixel rounding on certain GPUs), the gradient tiles white
     either side so the text is NEVER transparent against the dark
     hero. The visible gold band still reads as one sweep because
     each tile is wider than the text. */
  background-repeat: repeat-x;
  -webkit-background-clip: text;
          background-clip: text;
  /* transparent on -webkit-text-fill-color lets the gradient show
     THROUGH the letterforms instead of being painted behind a solid
     colour. The base `color: #ffffff` above is the fallback for any
     browser that can't background-clip text. */
  -webkit-text-fill-color: transparent;
  opacity: 1;                         /* hard fallback */
  /* Three-layer animation, all looping:
     1. heroBrandReveal — one-pass fade-up on first paint (0-1.1 s).
     2. heroBrandSweep  — INFINITE gradient drift, faster (4.8 s loop)
                           so the gold reflection is always visible
                           every few seconds.
     3. heroBrandGlow   — INFINITE soft gold-glow pulse (5.4 s).
     Each is gated for prefers-reduced-motion by the block below. */
  animation:
    heroBrandReveal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both,
    heroBrandSweep  4.8s linear 1.2s infinite,
    heroBrandGlow   5.4s ease-in-out 1.5s infinite;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 22px 50px rgba(0, 0, 0, 0.45);
  /* will-change is a paint hint — keeps the moving gradient on its
     own compositor layer so the rest of the hero doesn't repaint. */
  will-change: background-position, filter;
}

/* Luxury and class Defined — Poppins italic, gold, SMALLEST. Refined
   tagline that sits quietly under the brand. */
.hero h1.hero-headline .accent {
  display: block;
  font-family: inherit;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  font-size: clamp(0.95rem, 1.4vw + 0.3rem, 1.3rem);
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin-top: 2px;
  opacity: 1;
  animation: heroSettle 0.9s ease 0.55s both;
}

@keyframes heroSettle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroBrandReveal {
  0%   { opacity: 0; transform: translateY(14px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
/* Infinite gold-light sweep. The 200%-wide gradient stays on top of
   the text at every frame (the white edges always cover whatever the
   gold band isn't touching). Position drifts from 100% → 0% over
   4.8 s, which moves the central gold band fully across the text
   from one side to the other. repeat-x means there's never a frame
   where the gradient is "absent" — the text is always filled. */
@keyframes heroBrandSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0%   0; }
}
/* Soft gold glow underneath the text. Uses `filter: drop-shadow(...)`
   so it composes with the gradient fill instead of competing for
   text-shadow. Gentle 5.4 s ease-in-out so it breathes quietly. */
@keyframes heroBrandGlow {
  0%, 100% { filter: drop-shadow(0 0 0    rgba(252, 165, 13, 0)); }
  50%      { filter: drop-shadow(0 0 22px rgba(252, 165, 13, 0.30)); }
}

/* Reduced motion — hold the final state, zero movement, and strip
   the gradient fill so the brand line renders as solid white with
   no shimmer + no glow. Required: users who request reduced motion
   should NOT see a looping animation, no matter how subtle. */
@media (prefers-reduced-motion: reduce) {
  .hero h1.hero-headline .welcome-line,
  .hero h1.hero-headline .brand-line,
  .hero h1.hero-headline .accent {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero h1.hero-headline .brand-line {
    background-image: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    filter: none !important;
    will-change: auto;
  }
}

/* Tablet — still fits "DTS Lux Transport" on one line in the 720 px
   inner card. Slightly tightened tracking helps. */
@media (max-width: 1024px) {
  .hero h1.hero-headline .brand-line {
    font-size: clamp(2rem, 6.4vw, 3.5rem);
    letter-spacing: -0.01em;
  }
}

/* Phones — re-enable wrap, drop the size, keep two-word break.
   "DTS Lux Transport" wraps as two clean lines max:
       DTS Lux
       Transport
   (word-break: keep-all guarantees the split happens between words,
   never inside one — that's the fix for the "DTS / Lux / Transport"
   stack the previous build produced.) */
@media (max-width: 768px) {
  .hero h1.hero-headline .brand-line {
    white-space: normal;
    font-size: clamp(1.9rem, 8.6vw, 2.8rem);
    line-height: 1.08;
  }
}
@media (max-width: 414px) {
  .hero h1.hero-headline .welcome-line {
    font-size: clamp(0.9rem, 4.2vw, 1.1rem);
    letter-spacing: 0.16em;
  }
  .hero h1.hero-headline .brand-line {
    font-size: clamp(1.75rem, 9.2vw, 2.4rem);
    line-height: 1.06;
  }
  .hero h1.hero-headline .accent {
    font-size: clamp(0.9rem, 3.8vw, 1.1rem);
    line-height: 1.35;
  }
}
@media (max-width: 360px) {
  .hero h1.hero-headline .welcome-line { font-size: 0.85rem; letter-spacing: 0.14em; }
  .hero h1.hero-headline .brand-line   { font-size: clamp(1.6rem, 9vw, 2.1rem); }
  .hero h1.hero-headline .accent       { font-size: 0.88rem; }
}

/* Defeat the `.hero--centered h1` clamp (line ~1957) which would
   otherwise inherit a 2-3.8 rem fixed clamp onto our parent H1.
   Each child line drives its own size, so the parent stays at 1rem. */
.hero--centered .hero h1.hero-headline,
.hero--centered h1.hero-headline {
  font-size: 1rem;
  line-height: 1;
  max-width: none;
}

/* ===========================================================================
   Google OAuth — "Continue with Google" button (login + signup pages).
   Premium dark-card styling that matches the DTS gold/dark theme: white
   pill with the official Google "G" mark, subtle gold focus ring, and an
   "or" divider above it. Full-width to line up with the gold Sign-In button.
   =========================================================================== */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
  color: #9aa0a6;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.oauth-form { margin: 0; }

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: #1f2329;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease,
              background 0.18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-google:hover {
  background: #f7f8f8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.btn-google:active { transform: translateY(0); }
.btn-google:focus-visible {
  outline: none;
  /* Brand-gold focus ring for keyboard users. */
  box-shadow: 0 0 0 3px rgba(252, 165, 13, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-google .g-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.btn-google .g-text { line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-google { transition: none; }
  .btn-google:hover { transform: none; }
}