/* ==========================================================================
   SAFAR VAN RENTAL — Journey With Comfort
   Main stylesheet
   --------------------------------------------------------------------------
   Contents
   01. Design tokens
   02. Base & typography
   03. Buttons
   04. Section furniture (eyebrow / title / lead)
   05. Preloader
   06. Header & navigation
   07. Hero
   08. Quote form
   09. About & animated stats
   10. Fleet cards
   11. Services grid
   12. Why choose us
   13. How it works
   14. Popular rental purposes
   15. Testimonials
   16. FAQ accordion
   17. Call to action
   18. Contact
   19. Footer
   20. Floating controls (call button / scroll to top)
   21. Page header (inner pages) & 404
   22. Scroll reveal + reduced motion
   ========================================================================== */

/* ==========================================================================
   01. Design tokens
   ========================================================================== */
:root {
  /* Brand palette */
  --black: #050a13;
  --navy: #07152b;
  --navy-deep: #0b1e39;
  --gold: #d6a532;
  --gold-light: #f3d477;
  --gold-dark: #b98a22;
  --white: #ffffff;
  --gray: #f4f5f7;

  /* Derived ink colours (contrast-checked) */
  --ink: #0c1524;              /* headings on light backgrounds */
  --body: #55617a;             /* body copy on light backgrounds */
  --body-dark: #c3cbd8;        /* body copy on dark backgrounds */
  --gold-ink: #8a6410;         /* gold-toned text that stays readable on white */
  --line: #e4e7ec;
  --line-dark: rgba(214, 165, 50, 0.22);

  /* Type */
  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Shape & depth */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 4px 18px rgba(5, 10, 19, 0.06);
  --shadow-md: 0 14px 40px rgba(5, 10, 19, 0.09);
  --shadow-lg: 0 26px 70px rgba(5, 10, 19, 0.16);
  --shadow-gold: 0 18px 45px rgba(214, 165, 50, 0.28);

  /* Rhythm */
  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --header-h: 86px;
}

/* ==========================================================================
   02. Base & typography
   ========================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;              /* guards against accidental sideways scroll */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

p { margin-bottom: 1.05rem; }
a { color: var(--gold-ink); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; height: auto; }

.container { max-width: 1240px; }

/* Visible, on-brand focus ring for keyboard users everywhere */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  transition: top 0.25s ease;
}
.skip-link:focus { top: 1rem; color: var(--black); }

/* Reusable surfaces */
.bg-light-gray { background: var(--gray); }
.bg-dark-brand {
  background:
    radial-gradient(1200px 600px at 78% 20%, rgba(214, 165, 50, 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--black) 100%);
  color: var(--body-dark);
}
.bg-dark-brand h2,
.bg-dark-brand h3,
.bg-dark-brand h4 { color: var(--white); }

.text-gold { color: var(--gold); }
.divider-gold {
  width: 68px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

/* ==========================================================================
   03. Buttons
   ========================================================================== */
.btn {
  --bs-btn-padding-y: 0.9rem;
  --bs-btn-padding-x: 1.85rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border-width: 2px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease,
              color 0.28s ease, border-color 0.28s ease;
}
.btn:active { transform: translateY(1px); }

/* Primary gold button with a restrained shine sweep on hover */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  border-color: transparent;
  color: var(--black);
  box-shadow: var(--shadow-gold);
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-22deg);
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  color: var(--black);
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(214, 165, 50, 0.4);
}
.btn-gold:hover::after,
.btn-gold:focus-visible::after { left: 115%; }

/* Outline variants */
.btn-outline-gold {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(214, 165, 50, 0.06);
}
.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-3px);
}
.btn-outline-dark-brand {
  border-color: rgba(12, 21, 36, 0.18);
  color: var(--ink);
  background: transparent;
}
.btn-outline-dark-brand:hover,
.btn-outline-dark-brand:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--black);
  transform: translateY(-3px);
}
.btn-lg { --bs-btn-padding-y: 1.05rem; --bs-btn-padding-x: 2.3rem; font-size: 1rem; }
.btn-sm { --bs-btn-padding-y: 0.6rem; --bs-btn-padding-x: 1.35rem; font-size: 0.85rem; }

/* ==========================================================================
   04. Section furniture
   ========================================================================== */
.section { padding: var(--section-y) 0; }
.section-sm { padding: clamp(3rem, 5vw, 4.5rem) 0; }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.section-head.center .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.bg-dark-brand .eyebrow { color: var(--gold); }

.section-lead { font-size: 1.09rem; margin-bottom: 0; }
.bg-dark-brand .section-lead { color: var(--body-dark); }

/* ==========================================================================
   05. Preloader
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  gap: 1.25rem;
  background: linear-gradient(160deg, var(--navy) 0%, var(--black) 100%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader__logo { width: 74px; height: 74px; animation: floatMark 2.2s ease-in-out infinite; }
.preloader__name {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.1rem 0 0.85rem;
}
.preloader__bar {
  width: 168px;
  height: 3px;
  margin: 0 auto;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  animation: loadSlide 1.15s ease-in-out infinite;
}
@keyframes floatMark { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@keyframes loadSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* ==========================================================================
   06. Header & navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 1.1rem 0;
  background: linear-gradient(180deg, rgba(5, 10, 19, 0.72), rgba(5, 10, 19, 0));
  transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease,
              backdrop-filter 0.35s ease;
}
/* Solid glass panel once the visitor scrolls */
.site-header.is-scrolled {
  padding: 0.6rem 0;
  background: rgba(5, 10, 19, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(5, 10, 19, 0.35);
  border-bottom: 1px solid var(--line-dark);
}
/* Inner pages start with the solid header because there is no hero image */
.site-header.is-solid {
  background: rgba(5, 10, 19, 0.94);
  border-bottom: 1px solid var(--line-dark);
}

.header-inner { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 200px; height: auto; transition: width 0.35s ease; }
.site-header.is-scrolled .brand img { width: 176px; }

/* Seven nav items plus two buttons is a tight row: the links must never wrap
   onto a second line, so they are nowrap and the row itself does not shrink. */
.main-nav { margin-left: auto; flex: 0 1 auto; min-width: 0; }
.main-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.55rem 0.6rem;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 8px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--white); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--gold-light); }

.header-actions { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 48px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  font-size: 1.35rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: rgba(214, 165, 50, 0.16); }

/* Mobile slide-in panel */
.mobile-nav {
  background: linear-gradient(165deg, var(--navy) 0%, var(--black) 100%);
  border-left: 1px solid var(--line-dark);
  width: min(360px, 88vw);
}
.mobile-nav .offcanvas-header { padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--line-dark); }
.mobile-nav .offcanvas-header img { width: 168px; }
.mobile-nav .btn-close-custom {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  font-size: 1.2rem;
  display: inline-grid;
  place-items: center;
}
.mobile-nav .offcanvas-body { padding: 1.4rem; }
.mobile-nav ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.mobile-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mobile-nav a.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0.25rem;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  /* staggered entrance, driven by --i set in the markup */
  opacity: 0;
  transform: translateX(24px);
  animation: menuIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 90ms);
}
.mobile-nav a.mobile-link i { color: var(--gold); font-size: 0.85rem; }
.mobile-nav a.mobile-link:hover,
.mobile-nav a.mobile-link:focus-visible { color: var(--gold-light); }
.mobile-nav a[aria-current="page"] { color: var(--gold-light); }
@keyframes menuIn { to { opacity: 1; transform: translateX(0); } }

.mobile-nav .mobile-contact {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
  color: var(--body-dark);
  font-size: 0.92rem;
}

/* 1200–1399px: the full nav needs the room the "Call Now" button takes.
   The number stays one tap away in the hero, the FAQ and the sticky mobile bar. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-inner { gap: 1rem; }
  .header-actions .btn-call-header { display: none; }
}

@media (max-width: 1199.98px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-actions .btn-quote { display: none; }
}
@media (max-width: 575.98px) {
  .header-actions .btn-call-header { display: none; }
  .brand img { width: 168px; }
  .site-header.is-scrolled .brand img { width: 150px; }
}

/* ==========================================================================
   07. Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3.5rem) 0 clamp(6rem, 12vw, 9rem);
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/hero-dallas-skyline.jpg") center 38% / cover no-repeat;
  transform: scale(1.06);
  animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }

/* Dark overlay keeps every headline readable over the photography */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(5, 10, 19, 0.94) 0%, rgba(5, 10, 19, 0.78) 42%, rgba(7, 21, 43, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 10, 19, 0.7) 0%, transparent 32%, rgba(5, 10, 19, 0.85) 100%);
}

/* Soft floating gold light accents */
.hero__accent {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
.hero__accent--1 { width: 320px; height: 320px; top: 12%; right: 8%; background: rgba(214, 165, 50, 0.42); animation: floatA 13s ease-in-out infinite; }
.hero__accent--2 { width: 240px; height: 240px; bottom: 16%; left: 6%; background: rgba(243, 212, 119, 0.26); animation: floatB 17s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-32px, 28px); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -30px); } }

.hero__content { max-width: 760px; position: relative; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero__badge i { font-size: 0.9rem; }
.hero h1 { color: var(--white); margin-bottom: 1.35rem; }
.hero h1 .hl {
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__text {
  font-size: clamp(1.03rem, 1.5vw, 1.19rem);
  color: #d8dee8;
  max-width: 620px;
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3rem; }

/* Trust points */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 860px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.trust-item:hover {
  border-color: rgba(214, 165, 50, 0.5);
  background: rgba(214, 165, 50, 0.1);
  transform: translateY(-3px);
}
.trust-item i { color: var(--gold); font-size: 1.15rem; flex: 0 0 auto; }

/* Scroll cue */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  z-index: 2;
}
.scroll-indicator:hover { color: var(--gold-light); }
.scroll-indicator__mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  position: relative;
}
.scroll-indicator__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: wheelDrop 1.8s ease-in-out infinite;
}
@keyframes wheelDrop {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* --------------------------------------------------------------------------
   Split hero: headline column + quote form column.
   The form is the tallest element, so the section no longer needs the deep
   bottom padding that made room for the old overlapping card.
   -------------------------------------------------------------------------- */
.hero--split { padding: calc(var(--header-h) + 2.25rem) 0 clamp(3rem, 5vw, 4.5rem); }
.hero--split .hero__content { max-width: 620px; }
.hero--split .hero__actions { margin-bottom: 2rem; }
.hero--split .hero__trust {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
}
/* The scroll cue only appears from xl up, where the column offset leaves a
   clear gap for it; below that it would sit on top of the form card. */
.hero--split .scroll-indicator { display: none; }
@media (min-width: 1200px) {
  .hero--split .scroll-indicator { display: inline-flex; }
}

@media (max-width: 991.98px) {
  .hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scroll-indicator { display: none; }
}
@media (max-width: 575.98px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   08. Quote form
   ========================================================================== */
/* Standalone variant, kept for any page that wants the form in its own band */
.quote-section { position: relative; padding-bottom: var(--section-y); background: var(--gray); }
.quote-section--overlap { margin-top: clamp(-7rem, -8vw, -4.5rem); padding-top: 0; }

.quote-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3.5vw, 3rem);
}
.quote-card__head { margin-bottom: 1.85rem; }
.quote-card__head h2 { margin-bottom: 0.5rem; }
.quote-card__head p { margin-bottom: 0; }

/* Fields */
.form-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-label .req { color: #b3261e; }
.form-control,
.form-select {
  padding: 0.82rem 1rem;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fbfbfc;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.form-control::placeholder { color: #9aa3b2; }
.form-control:focus,
.form-select:focus {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 165, 50, 0.16);
}
.form-control:disabled { background: var(--gray); }
.input-hint { font-size: 0.8rem; color: #7c8797; margin-top: 0.3rem; }

/* Bootstrap validation styling, brand-matched */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid { border-color: #b3261e; }
.invalid-feedback { font-size: 0.83rem; font-weight: 500; }

/* Success confirmation */
.form-success {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(30, 130, 76, 0.28);
  border-left: 4px solid #1e824c;
  border-radius: var(--r-md);
  background: #f1f9f4;
  color: #14532d;
}
.form-success.is-visible { display: flex; }
.form-success i { font-size: 1.5rem; color: #1e824c; line-height: 1.3; }
.form-success h3 { font-size: 1.1rem; color: #14532d; margin-bottom: 0.3rem; }
.form-success p { margin-bottom: 0; font-size: 0.95rem; color: #1f5136; }
.form-success a { color: #14532d; font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Compact variant used inside the split hero. Same fields and validation,
   tighter type and padding so the whole form fits beside the headline.
   -------------------------------------------------------------------------- */
.quote-card--hero {
  padding: clamp(1.35rem, 2vw, 1.9rem);
  border-radius: var(--r-lg);
  /* keeps the card readable over the photography without going fully opaque */
  box-shadow: 0 30px 70px rgba(5, 10, 19, 0.45);
}
.quote-card--hero .quote-card__head { margin-bottom: 1.2rem; }
.quote-card--hero .eyebrow { margin-bottom: 0.55rem; }
.quote-card--hero .quote-card__head h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-bottom: 0.4rem; }
.quote-card--hero .quote-card__head p { font-size: 0.88rem; line-height: 1.6; margin-bottom: 0; }
.quote-card--hero .form-label { font-size: 0.76rem; margin-bottom: 0.28rem; }
.quote-card--hero .form-control,
.quote-card--hero .form-select {
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  border-radius: 10px;
}
.quote-card--hero textarea.form-control { line-height: 1.5; }
.quote-card--hero .invalid-feedback { font-size: 0.78rem; }
.quote-card--hero .btn-lg { --bs-btn-padding-y: 0.85rem; font-size: 0.95rem; }
.quote-card--hero .call-link { font-size: 0.86rem; }

/* ==========================================================================
   09. About & animated stats
   ========================================================================== */
.about-media { position: relative; }
.about-media__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.about-media__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Thin gold rule offset behind the image */
.about-media::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 2px solid var(--gold);
  border-radius: var(--r-xl);
  opacity: 0.5;
  z-index: -1;
}
.about-media__badge {
  position: absolute;
  right: clamp(-0.5rem, 2vw, 1.25rem);
  bottom: clamp(-1.25rem, -2vw, -0.75rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-width: 260px;
}
.about-media__badge i { font-size: 1.7rem; color: var(--gold); }
.about-media__badge strong { display: block; font-family: var(--font-head); color: var(--ink); font-size: 0.98rem; }
.about-media__badge span { font-size: 0.83rem; line-height: 1.4; }

.check-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.check-list i { color: var(--gold); font-size: 1.1rem; line-height: 1.55; flex: 0 0 auto; }

/* Stats strip */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.stat-card {
  padding: 1.75rem 1.35rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.stat-card i { font-size: 1.5rem; color: var(--gold); }
.stat-card__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin: 0.6rem 0 0.25rem;
}
.stat-card__label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}
.bg-dark-brand .stat-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-dark);
  box-shadow: none;
}
.bg-dark-brand .stat-card__num { color: var(--white); }
.bg-dark-brand .stat-card__label { color: var(--body-dark); }

@media (max-width: 767.98px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-media::before { display: none; }
  .about-media__badge { position: static; margin-top: 1.25rem; max-width: none; }
}

/* ==========================================================================
   10. Fleet cards
   ========================================================================== */
.fleet-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.fleet-card:hover,
.fleet-card:focus-within {
  transform: translateY(-10px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.fleet-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy); }
.fleet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.fleet-card:hover .fleet-card__media img { transform: scale(1.07); }
.fleet-card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(5, 10, 19, 0.78);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.fleet-card__capacity {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--black);
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 700;
}
.fleet-card__body { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.fleet-card__body h3 { margin-bottom: 0.55rem; }
.fleet-card__desc { font-size: 0.98rem; }

.feature-list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.94rem; }
.feature-list .ficon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(214, 165, 50, 0.12);
  color: var(--gold-ink);
  font-size: 0.95rem;
}
.fleet-card__actions {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}
.call-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gold-ink);
}
.call-link:hover { color: var(--gold-dark); text-decoration: underline; }

/* ==========================================================================
   11. Services grid
   ========================================================================== */
.service-card {
  height: 100%;
  padding: 2rem 1.65rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}
.service-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(214, 165, 50, 0.18), rgba(243, 212, 119, 0.1));
  border: 1px solid rgba(214, 165, 50, 0.28);
  color: var(--gold-ink);
  font-size: 1.5rem;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.service-card:hover .service-card__icon {
  background: linear-gradient(140deg, var(--gold-light), var(--gold));
  color: var(--black);
  transform: translateY(-2px);
}
.service-card h3 { font-size: 1.13rem; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.94rem; margin-bottom: 0; }

/* ==========================================================================
   12. Why choose us
   ========================================================================== */
.benefit-card {
  height: 100%;
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.benefit-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.benefit-card__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(214, 165, 50, 0.14);
  color: var(--gold-ink);
  font-size: 1.2rem;
}
.benefit-card h3 { font-size: 1.03rem; margin-bottom: 0.35rem; }
.benefit-card p { font-size: 0.92rem; margin-bottom: 0; }

.why-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); height: 100%; min-height: 340px; }
.why-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   13. How it works
   ========================================================================== */
.steps { position: relative; }
/* Gold progress line, drawn behind the step markers on desktop only */
.steps__track {
  display: none;
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(214, 165, 50, 0.22);
  overflow: hidden;
}
.steps__progress {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left center;
}
.step { text-align: center; position: relative; }
.step__marker {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--navy) 0%, var(--black) 100%);
  border: 2px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(5, 10, 19, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  z-index: 1;
}
.step:hover .step__marker { transform: translateY(-5px); box-shadow: var(--shadow-gold); }
.step h3 { font-size: 1.1rem; margin-bottom: 0.45rem; }
.step p { font-size: 0.93rem; margin-bottom: 0; }
.bg-dark-brand .step p { color: var(--body-dark); }

@media (min-width: 992px) { .steps__track { display: block; } }

/* ==========================================================================
   14. Popular rental purposes
   ========================================================================== */
.purpose-tile {
  position: relative;
  display: block;
  height: 100%;
  min-height: 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-sm);
  color: var(--white);
}
.purpose-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.purpose-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 19, 0.12) 0%, rgba(5, 10, 19, 0.62) 55%, rgba(5, 10, 19, 0.93) 100%);
  transition: background 0.4s ease;
}
.purpose-tile:hover img,
.purpose-tile:focus-visible img { transform: scale(1.09); }
.purpose-tile:hover::after,
.purpose-tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(7, 21, 43, 0.28) 0%, rgba(5, 10, 19, 0.72) 55%, rgba(5, 10, 19, 0.95) 100%);
}
.purpose-tile__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; }
.purpose-tile h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 0.3rem; }
.purpose-tile p { font-size: 0.9rem; color: #cfd6e2; margin-bottom: 0; }
.purpose-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.purpose-tile:hover .purpose-tile__more,
.purpose-tile:focus-visible .purpose-tile__more { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   15. Testimonials
   ========================================================================== */
.testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.testimonial-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.testimonial-card__quote { font-size: 1.9rem; color: var(--gold); line-height: 1; margin-bottom: 0.9rem; }
.testimonial-card blockquote { font-size: 0.98rem; color: var(--body); margin: 0 0 1.5rem; }
.testimonial-card figcaption { margin-top: auto; display: flex; align-items: center; gap: 0.85rem; }
.testimonial-card__avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(214, 165, 50, 0.15);
  color: var(--gold-ink);
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.testimonial-card__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: 0.95rem; display: block; }
.testimonial-card__meta { font-size: 0.82rem; color: #7c8797; }
.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px dashed rgba(214, 165, 50, 0.55);
  border-radius: var(--r-sm);
  background: rgba(214, 165, 50, 0.07);
  font-size: 0.85rem;
  color: var(--gold-ink);
}

/* ==========================================================================
   16. FAQ accordion
   ========================================================================== */
.faq-list { display: grid; gap: 0.9rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.is-open { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-trigger:hover { color: var(--gold-ink); }
.faq-trigger__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(214, 165, 50, 0.14);
  color: var(--gold-ink);
  font-size: 0.85rem;
  transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
.faq-item.is-open .faq-trigger__icon {
  transform: rotate(180deg);
  background: var(--gold);
  color: var(--black);
}
.faq-panel {
  height: 0;
  overflow: hidden;
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-panel__inner { padding: 0 1.4rem 1.35rem; font-size: 0.96rem; }
.faq-panel__inner p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. Call to action
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--body-dark);
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/cta-van.jpg") center / cover no-repeat;
  opacity: 0.9;
}
.cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 460px at 20% 30%, rgba(214, 165, 50, 0.2), transparent 62%),
    linear-gradient(100deg, rgba(5, 10, 19, 0.92) 8%, rgba(5, 10, 19, 0.74) 50%, rgba(7, 21, 43, 0.55) 100%);
}
.cta h2 { color: var(--white); }
.cta p { color: #d6dce6; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (max-width: 575.98px) { .cta__actions .btn { width: 100%; } }

/* ==========================================================================
   18. Contact
   ========================================================================== */
.contact-card {
  height: 100%;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.contact-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(214, 165, 50, 0.18), rgba(243, 212, 119, 0.1));
  border: 1px solid rgba(214, 165, 50, 0.28);
  color: var(--gold-ink);
  font-size: 1.3rem;
}
.contact-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.contact-card p, .contact-card address { font-size: 0.94rem; margin-bottom: 0; font-style: normal; }
.contact-card a { font-weight: 600; }

/* Map placeholder — swap for a real Google Maps embed */
.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-height: 340px;
  background:
    repeating-linear-gradient(45deg, rgba(214, 165, 50, 0.05) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #eef0f4, #e3e7ee);
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.map-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 2rem;
  gap: 0.4rem;
}
.map-placeholder i { font-size: 2.4rem; color: var(--gold); }
.map-placeholder strong { font-family: var(--font-head); color: var(--ink); }
.map-placeholder span { font-size: 0.88rem; max-width: 340px; }

/* ==========================================================================
   19. Footer
   ========================================================================== */
.site-footer {
  background: linear-gradient(170deg, var(--navy) 0%, var(--black) 62%);
  color: var(--body-dark);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line-dark);
}
.site-footer h4 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.footer-logo { width: 210px; margin-bottom: 1.25rem; }
.site-footer p { font-size: 0.94rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-links a { color: var(--body-dark); font-size: 0.94rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-links a::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: 0.7rem; color: var(--gold); transition: transform 0.25s ease; }
.footer-links a:hover { color: var(--gold-light); }
.footer-links a:hover::before { transform: translateX(3px); }

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.footer-contact li { display: flex; gap: 0.75rem; font-size: 0.94rem; }
.footer-contact i { color: var(--gold); font-size: 1rem; line-height: 1.6; flex: 0 0 auto; }
.footer-contact a { color: var(--white); font-weight: 600; }
.footer-contact a:hover { color: var(--gold-light); }

.social-list { display: flex; gap: 0.6rem; margin-top: 1.35rem; padding: 0; list-style: none; }
.social-list a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold);
  font-size: 1rem;
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}
.social-list a:hover { background: var(--gold); color: var(--black); transform: translateY(-3px); }

.footer-bottom {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.88rem;
}
.footer-bottom a { color: var(--body-dark); }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.35rem; margin: 0; padding: 0; list-style: none; }

/* ==========================================================================
   20. Floating controls
   ========================================================================== */
/* Sticky call bar for phones — the fastest path to a booking on mobile */
.floating-call {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(5, 10, 19, 0.4);
}
.floating-call:hover, .floating-call:focus-visible { color: var(--black); }
@media (max-width: 767.98px) {
  .floating-call { display: flex; }
  body { padding-bottom: 5rem; }   /* keeps the footer clear of the sticky bar */
}

.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 1035;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(5, 10, 19, 0.9);
  color: var(--gold);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--gold); color: var(--black); }
@media (max-width: 767.98px) { .scroll-top { bottom: 5.5rem; right: 1rem; } }

/* ==========================================================================
   21. Inner page header & 404
   ========================================================================== */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 4.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  background: linear-gradient(150deg, var(--navy) 0%, var(--black) 100%);
  color: var(--body-dark);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 380px at 82% 12%, rgba(214, 165, 50, 0.22), transparent 62%),
    radial-gradient(600px 340px at 8% 90%, rgba(243, 212, 119, 0.12), transparent 60%);
}
.page-hero h1 { color: var(--white); margin-bottom: 0.9rem; }
.page-hero p { color: var(--body-dark); max-width: 640px; margin-bottom: 0; font-size: 1.06rem; }
.breadcrumb-brand { margin-bottom: 1.1rem; font-size: 0.86rem; }
.breadcrumb-brand ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb-brand li { display: flex; align-items: center; gap: 0.5rem; color: #93a0b4; }
.breadcrumb-brand li + li::before { content: "/"; color: rgba(214, 165, 50, 0.6); }
.breadcrumb-brand a { color: var(--gold-light); }

.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 4rem) 0 5rem;
  background: linear-gradient(160deg, var(--navy) 0%, var(--black) 100%);
  color: var(--body-dark);
}
.error-code {
  font-family: var(--font-head);
  font-size: clamp(5.5rem, 18vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page h1 { color: var(--white); }

/* ==========================================================================
   22. Scroll reveal + reduced motion
   ========================================================================== */
/* Elements start hidden only when JS is running, so the page degrades safely. */
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal-left { opacity: 0; transform: translateX(-32px); }
html.js .reveal-right { opacity: 0; transform: translateX(32px); }
html.js .reveal-scale { opacity: 0; transform: scale(0.96); }

/* Honour the visitor's motion preference: nothing non-essential moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal,
  html.js .reveal-left,
  html.js .reveal-right,
  html.js .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero__bg,
  .hero__accent--1,
  .hero__accent--2,
  .preloader__logo,
  .preloader__bar span,
  .scroll-indicator__mouse::after { animation: none !important; }
  .steps__progress { transform: scaleX(1) !important; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   23. Link-wrapped card overrides
   Cards that are themselves anchors must not inherit the global link colour.
   ========================================================================== */
a.service-card,
a.benefit-card,
a.contact-card { color: inherit; text-decoration: none; }
a.service-card h3,
a.benefit-card h3 { color: var(--ink); }
a.service-card p,
a.benefit-card p { color: var(--body); }
a.service-card:hover h3,
a.benefit-card:hover h3 { color: var(--gold-ink); }

/* Gold accents keep their contrast on the dark CTA and 404 backgrounds */
.cta .eyebrow,
.error-page .eyebrow { color: var(--gold); }
.error-page .section-lead { color: var(--body-dark); }

/* ==========================================================================
   Mileage rate guide (index.html #mileage)
   ========================================================================== */
.mileage-table {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.mileage-table table { width: 100%; border-collapse: collapse; }
.mileage-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
}
.mileage-table tbody th,
.mileage-table tbody td {
  padding: 1.35rem 1.5rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.mileage-table tbody th { font-family: var(--font-head); color: var(--ink); font-size: 1.05rem; }
.mileage-table tbody strong { color: var(--ink); }
.mileage-table tbody th span,
.mileage-table tbody td span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--body); }
.mileage-table__price { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; color: var(--gold-ink); }

.mileage-example {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 1rem 0 1.25rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--line);
}
.mileage-example div { background: var(--gray); text-align: center; padding: 1rem 0.5rem; }
.mileage-example strong { display: block; font-family: var(--font-head); font-size: 1.8rem; color: var(--ink); line-height: 1.1; }
.mileage-example span { font-size: 0.82rem; color: var(--body); }

.mileage-sum { margin: 0 0 1rem; }
.mileage-sum div {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.mileage-sum dt { font-family: var(--font-head); color: var(--ink); }
.mileage-sum dd { margin: 0; color: var(--body); }
.mileage-sum dd.mileage-sum__total { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.15rem; }

@media (max-width: 575.98px) {
  .mileage-table thead { display: none; }
  .mileage-table tbody tr { display: block; border-top: 1px solid var(--line); padding: 1rem 1.25rem; }
  .mileage-table tbody th,
  .mileage-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.35rem 0; border: 0; }
  .mileage-table tbody th { display: block; margin-bottom: 0.25rem; }
  .mileage-table tbody td { justify-content: flex-start; gap: 0.35rem; }
  .mileage-table tbody td::before { content: attr(data-label); font-size: 0.8rem; color: var(--body); margin-right: auto; }
  .mileage-table tbody td span { display: inline; }
  .mileage-table__price { font-size: 1.5rem; }
  .mileage-example { grid-template-columns: repeat(2, 1fr); }
  .mileage-sum div { grid-template-columns: 1fr auto; }
  .mileage-sum dd:not(.mileage-sum__total) { grid-column: 1; grid-row: 2; font-size: 0.85rem; }
  .mileage-sum dd.mileage-sum__total { grid-row: 1 / span 2; grid-column: 2; }
}