/* ==========================================================================
   City VIP Chauffeurs — 2026 refresh
   --------------------------------------------------------------------------
   One stylesheet, no framework, no build step.

   The palette is the one the site already has: the navy off the header, the
   blue off the links and buttons, the red sampled out of the logo artwork,
   the grey the body copy has always been. What changes is how they are used
   — the old theme painted headings the same grey as body text at weight 300,
   so nothing led. Headings are navy here and the grey is kept for prose.
   ========================================================================== */

/* ---- fonts: self-hosted, so no call leaves the server ------------------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-900.woff2') format('woff2');
}

/* A fallback cut to Lato's measurements.
   font-display:swap paints in the system face first and then swaps, and every
   line moves at the swap because Arial sets the same string 0.5% wider and
   8% shorter in the ascent. Measured against Lato at 100px: width 2511.8 vs
   2524.0, ascent 99 vs 91, descent 21 vs 21. These overrides make the stand-in
   occupy the same box, so the swap changes the shapes and nothing else. */
@font-face {
  font-family: 'Lato fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 99.52%;
  ascent-override: 99.5%;
  descent-override: 21.1%;
  line-gap-override: 0%;
}

/* ---- tokens ------------------------------------------------------------- */
:root {
  /* colour — all of it carried over from the existing site */
  --ink:        #222533;   /* header/footer navy, now also headings */
  --ink-soft:   #3a3e4d;
  --body:       #666666;   /* the grey the copy has always been */
  --body-light: #8b9098;
  --blue:       #1e73be;   /* existing link and button blue */
  --blue-dark:  #175c98;
  --blue-wash:  rgba(30, 115, 190, .08);
  --red:        #c43b3b;   /* sampled from the logo arc */
  --surface:    #ffffff;
  --surface-alt:#f4f5f7;
  --line:       #e4e7ec;
  --line-dark:  rgba(255, 255, 255, .14);

  /* type */
  --font: 'Lato', 'Lato fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* a fluid scale: no media queries needed for headings */
  --t-display: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
  --t-h1:      clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --t-h3:      clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-lead:    clamp(1.05rem, 1rem + .4vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-eyebrow: .75rem;

  /* space */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --wrap:    1220px;

  --radius: 3px;          /* restrained: a chauffeur service, not a startup */
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 300; line-height: 1.14; letter-spacing: -.02em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; color: #fff; }

/* ---- layout primitives -------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--alt { background: var(--surface-alt); }
.section--ink { background: var(--ink); }

.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px; background: var(--red); flex: none;
}
.eyebrow--center { justify-content: center; }

.lead { font-size: var(--t-lead); font-weight: 300; line-height: 1.6; color: var(--body); }
.measure { max-width: 62ch; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--t-h2); margin-bottom: 1rem; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: inherit; font-size: .9375rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 1.05rem 2.1rem; min-height: 54px;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #14161f; color: #fff; }
.btn--sm { padding: .8rem 1.5rem; min-height: 46px; font-size: .875rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: var(--t-small);
  letter-spacing: .08em; text-transform: uppercase;
}
.arrow-link svg { transition: transform .2s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
}
/* Transitions only once the first frame is on screen. Otherwise a page that
   opens part-way down -- a reload, or the back button restoring a position --
   paints the transparent bar, runs the scroll handler, and animates to navy
   in front of the visitor. The class is added by site.js after a frame. */
.is-ready .site-header {
  transition: background .3s var(--ease), box-shadow .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
/* The bar keeps one height at every scroll position. Shrinking it on scroll
   looked smart and moved the logo and the whole page under it on every load
   where the browser restored a scroll position. */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 96px; padding-block: .75rem;
}
/* over a hero: transparent. Once scrolled, or on a plain page: solid navy. */
.site-header--solid,
.site-header.is-stuck {
  background: rgba(34, 37, 51, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}

.brand { display: flex; align-items: center; flex: none; }
/* 140 x 67 inside a 96px bar leaves ~14px clear above and below the mark. */
.brand img { width: 140px; height: 67px; }

.nav { display: flex; align-items: center; gap: 2.1rem; }

/* Direct children only. These sit on the dark bar and are white; the dropdown
   below sits on white and must not inherit any of it -- which is exactly what
   happened, and left the current page invisible in its own menu. */
.nav > a, .nav__toggle {
  color: rgba(255,255,255,.82); font-size: var(--t-small); font-weight: 400;
  letter-spacing: .04em; padding: .4rem 0; position: relative;
}
.nav > a:hover, .nav > a[aria-current="page"] { color: #fff; }
.nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }

/* Services itself is "current" whenever one of its children is. */
.nav__group.is-current .nav__toggle { color: #fff; }

/* services dropdown — CSS only, with JS just for the aria state */
.nav__group { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-small); letter-spacing: .04em;
  color: rgba(255,255,255,.82);
}
.nav__toggle:hover, .nav__group:hover .nav__toggle { color: #fff; }
.nav__toggle svg { transition: transform .2s var(--ease); }
.nav__group:hover .nav__toggle svg,
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  min-width: 232px; padding: .55rem;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(16,18,28,.20);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: block; padding: .72rem .95rem; color: var(--ink);
  font-size: var(--t-small); border-radius: 2px;
}
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--blue-wash); color: var(--blue); }
/* The page you are on, marked on white rather than with the bar's white. */
.nav__menu a[aria-current="page"] {
  color: var(--blue); background: var(--blue-wash); font-weight: 700;
}

.header-cta { display: flex; align-items: center; gap: 1.25rem; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.82); font-size: var(--t-small); font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.header-phone:hover { color: #fff; }

.burger {
  display: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 22px; height: 2px; background: #fff; position: relative;
  transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: #fff;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---- mobile drawer ------------------------------------------------------ */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: 96px var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a { display: block; color: #fff; font-size: 1.3rem; font-weight: 300; padding: .85rem 0; border-bottom: 1px solid var(--line-dark); }
.drawer a:hover { color: #fff; padding-left: .4rem; }
.drawer .drawer__sub a { font-size: 1.05rem; padding-left: 1.1rem; color: rgba(255,255,255,.7); }
/* The drawer is dark, so the current page is marked with the brand red rather
   than with white-on-white. */
.drawer a[aria-current="page"] {
  color: #fff; font-weight: 700;
  box-shadow: inset 3px 0 0 var(--red); padding-left: .9rem;
}
.drawer .drawer__sub a[aria-current="page"] { padding-left: 1.4rem; color: #fff; }
/* The two buttons are anchors, so `.drawer a` was reaching them and replacing
   the button's padding with `.85rem 0` and its inline-flex with block -- which
   pushed both labels hard against the left edge. The button rules win back. */
.drawer__actions { margin-top: 2rem; display: grid; gap: .8rem; }
.drawer__actions a.btn {
  display: flex; width: 100%; border-bottom: 0;
  padding: 1.05rem 2.1rem; font-size: .9375rem;
}
.drawer__actions a.btn:hover { padding-left: 2.1rem; }
.drawer__actions a.btn--ghost { border: 1px solid rgba(255,255,255,.55); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,22,31,.72) 0%, rgba(20,22,31,.30) 34%, rgba(20,22,31,.86) 100%),
    linear-gradient(90deg, rgba(20,22,31,.55) 0%, rgba(20,22,31,0) 62%);
}
.hero__inner { padding-block: clamp(9rem, 20vh, 13rem) clamp(3.5rem, 7vw, 5.5rem); }

.hero--home { min-height: min(88vh, 860px); }
.hero--page { min-height: min(56vh, 520px); }

.hero h1 {
  color: #fff; font-size: var(--t-display); font-weight: 300;
  letter-spacing: -.028em; max-width: 16ch; margin-bottom: 1.4rem;
}
.hero--page h1 { font-size: var(--t-h1); max-width: 20ch; margin-bottom: .9rem; }
.hero__kicker {
  display: flex; align-items: center; gap: .75rem;
  color: #fff; font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.5rem;
  opacity: .92;
}
.hero__kicker::before { content: ''; width: 34px; height: 2px; background: var(--red); flex: none; }
.hero__sub {
  color: rgba(255,255,255,.88); font-size: var(--t-lead); font-weight: 300;
  max-width: 44ch; margin-bottom: 2.4rem; line-height: 1.6;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* trust strip sitting on the bottom edge of the home hero */
.hero__strip {
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 4vw, 3.2rem);
}
.hero__strip li {
  display: flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.82); font-size: var(--t-small); letter-spacing: .01em;
}
.hero__strip svg { color: var(--red); flex: none; }

/* ==========================================================================
   Promises (24/7, Clear Rates, Luxury Vehicles)
   ========================================================================== */
.promises { display: grid; gap: clamp(2rem, 4vw, 3.4rem); grid-template-columns: repeat(3, 1fr); }
.promise__icon {
  width: 46px; height: 46px; margin-bottom: 1.4rem; color: var(--blue);
  display: grid; place-items: center;
}
.promise h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.005em; margin-bottom: .6rem; }
.promise p { color: var(--body); margin: 0; }

/* the intro + promises split */
.intro-grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}
.intro-grid h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; }

/* ==========================================================================
   Services grid
   ========================================================================== */
.services { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); grid-template-columns: repeat(3, 1fr); }
.service {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius); background: var(--ink);
  min-height: 340px; display: flex; align-items: flex-end;
  transition: transform .35s var(--ease);
}
.service img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: grayscale(100%) contrast(1.04);
}
/* The stops are not a guess. The card copy is 15px white, so it needs 4.5:1,
   and the six photographs run from luminance .19 (the jet engine) to .43 (the
   gallery). Measured against the lightest of them, the text sits at 55% down
   the card where this gradient is ~.61 — which lands at 4.7:1. A gentler
   overlay looked better on the dark photographs and failed on the light ones. */
.service::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgba(20,22,31,.08) 0%,
              rgba(20,22,31,.18) 30%,
              rgba(20,22,31,.66) 58%,
              rgba(20,22,31,.93) 100%);
  transition: background .35s var(--ease);
}
.service:hover img { transform: scale(1.06); filter: grayscale(0%) contrast(1); }
.service:hover::after {
  background: linear-gradient(180deg,
              rgba(20,22,31,.12) 0%,
              rgba(20,22,31,.24) 28%,
              rgba(20,22,31,.72) 58%,
              rgba(20,22,31,.95) 100%);
}
.service__body { padding: clamp(1.5rem, 3vw, 2.1rem); width: 100%; }
.service h3 {
  color: #fff; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  font-weight: 300; margin-bottom: .45rem;
}
.service p {
  color: rgba(255,255,255,.76); font-size: var(--t-small); margin: 0 0 1rem;
  max-width: 34ch;
}
.service__go {
  display: inline-flex; align-items: center; gap: .5rem; color: #fff;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.service__go svg { transition: transform .25s var(--ease); }
.service:hover .service__go svg { transform: translateX(5px); }
/* whole card clickable without nesting interactive elements */
.service__link { position: absolute; inset: 0; z-index: 2; }

/* ==========================================================================
   Fleet
   ========================================================================== */
.fleet-grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.fleet-grid h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; }
.fleet-cars { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.2rem; }
.fleet-car {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1rem; text-align: center; background: #fff;
}
.fleet-car strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.fleet-car span { font-size: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--body-light); }
.fleet-media { position: relative; }
.fleet-media img { width: 100%; height: auto; }
.fleet-media--plate {
  background: var(--surface-alt); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem); display: grid; place-items: center;
}

/* ==========================================================================
   Split CTA band
   ========================================================================== */
.band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.band__inner {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center;
}
.band h2 { color: #fff; font-size: var(--t-h2); margin-bottom: .9rem; }
.band p { color: rgba(255,255,255,.72); max-width: 46ch; margin: 0; }
.band__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: flex-end; }
.band::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 18%, var(--blue) 18%, var(--blue) 100%);
}

/* ==========================================================================
   Service page: prose beside an at-a-glance panel
   --------------------------------------------------------------------------
   A single 62ch paragraph alone on a 1220px page reads fine and looks
   unfinished. The facts panel fills the measure without padding the copy out
   with words nobody wrote.
   ========================================================================== */
.svc-grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: start;
}
.svc-facts {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem); background: var(--surface-alt);
}
.svc-facts h2 {
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 1.25rem;
}
.svc-facts li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--t-small); line-height: 1.6; padding-block: .6rem;
}
.svc-facts li + li { border-top: 1px solid var(--line); }
.svc-facts svg { color: var(--blue); flex: none; margin-top: .25rem; }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Two-up booking panel (Book Online / Book by Phone)
   ========================================================================== */
.book-two { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(2, 1fr); }
.book-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem); background: #fff;
  display: flex; flex-direction: column;
}
.book-card__icon { color: var(--blue); margin-bottom: 1.25rem; }
.book-card h3 { font-size: var(--t-h3); font-weight: 700; margin-bottom: .7rem; }
.book-card p { margin-bottom: 1.6rem; }
.book-card__foot { margin-top: auto; }
.tel-list { display: grid; gap: .35rem; margin-bottom: 1.5rem; }
.tel-list a { color: var(--ink); font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
.tel-list a:hover { color: var(--blue); }

/* ==========================================================================
   Booking form
   ========================================================================== */
.form-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.form-row--full { grid-column: 1 / -1; }

.form-row label {
  display: block; font-size: var(--t-small); font-weight: 700;
  color: var(--ink); margin-bottom: .45rem; letter-spacing: .01em;
}
.form-row label .req { color: var(--red); }

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%; box-sizing: border-box;
  padding: .9rem 1rem; min-height: 52px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.form-row textarea { min-height: 128px; resize: vertical; padding-top: .8rem; }
.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
.form-row input[aria-invalid="true"],
.form-row select[aria-invalid="true"] { border-color: var(--red); background: #fffafa; }

.form-err { display: none; color: var(--red); font-size: .875rem; margin-top: .4rem; }
.form-err.show { display: block; }

.form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; margin-bottom: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--radius); font-size: var(--t-small); line-height: 1.6; }
.form-status.show { display: block; }
.form-status.ok  { background: #eef7ee; border: 1px solid #cfe6cf; color: #2c6a2c; }
.form-status.bad { background: #fdf0ef; border: 1px solid #f0cfcc; color: #a33227; }

.form-note { font-size: var(--t-small); color: var(--body-light); margin-top: 1.1rem; }

.booking-layout {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start;
}
.contact-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--surface-alt);
}
.contact-panel h2 { font-size: var(--t-h3); font-weight: 700; margin-bottom: .6rem; }
.contact-panel + .contact-panel { margin-top: 1.25rem; }

/* ==========================================================================
   Pricing tables
   ========================================================================== */
.rate-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.rate-table caption {
  text-align: left; font-size: var(--t-h3); font-weight: 700; color: var(--ink);
  padding-bottom: .9rem;
}
.rate-table th, .rate-table td {
  text-align: left; padding: 1rem 1rem; border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.rate-table thead th {
  font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--ink); font-weight: 700;
}
.rate-table td:first-child { color: var(--ink); }
.rate-table tbody tr:hover { background: var(--surface-alt); }
.rate-table td + td, .rate-table th + th { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rate-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
  /* A four-column rate table will not fit a phone. Each row becomes a small
     stacked card, with the column heading carried down as a label, so nothing
     has to be scrolled sideways to read a price. */
  .rate-table, .rate-table tbody, .rate-table tr, .rate-table td { display: block; width: 100%; }
  .rate-table thead { display: none; }
  .rate-table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .4rem .2rem; margin-bottom: .9rem; background: #fff;
  }
  .rate-table td { border: 0; padding: .5rem 1rem; display: flex; justify-content: space-between; gap: 1rem; }
  .rate-table td + td { text-align: right; }
  .rate-table td:first-child { font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin-bottom: .3rem; }
  .rate-table td[data-label]::before {
    content: attr(data-label); color: var(--body-light);
    font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; flex: none;
  }
}

/* ==========================================================================
   Long-form prose (terms)
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 700; margin: 2.6rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose ol { margin: 0 0 1.15em; padding-left: 1.3rem; list-style: decimal; }
.prose li { margin-bottom: .55rem; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.66); padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
.footer-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
.site-footer h2 {
  color: #fff; font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.4rem;
}
.site-footer a { color: rgba(255,255,255,.66); }
.site-footer a:hover { color: #fff; }
.footer-links li + li { margin-top: .6rem; }
.footer-links a { font-size: var(--t-small); }
.footer-brand img { width: 168px; margin-bottom: 1.4rem; }
.footer-brand p { font-size: var(--t-small); max-width: 34ch; }
.footer-contact { font-size: var(--t-small); font-style: normal; }
.footer-contact a { display: block; }
.footer-contact strong { color: #fff; font-weight: 700; }
.pco {
  display: inline-block; margin-top: 1.2rem; padding: .4rem .7rem;
  border: 1px solid var(--line-dark); border-radius: 2px;
  font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.footer-bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-block: 1.6rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: var(--t-small);
}
.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--line-dark); border-radius: 2px;
  display: grid; place-items: center; color: rgba(255,255,255,.7);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ==========================================================================
   Reveal on scroll — opt-in, and off entirely if motion is reduced
   ========================================================================== */
/* Anything already on screen when the page opens is shown immediately and
   never animates: watching the first two sections fade up under the cursor on
   every single load reads as a flicker, not as polish. Only blocks further
   down, which the visitor scrolls to, get the entrance.
   .reveal stays visible until JS marks it, so a failed script cannot hide the
   page -- see the no-JS guard in site.js. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal--armed { opacity: 0; transform: translateY(18px); }
  .is-ready .reveal--armed {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .reveal--armed.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav, .header-phone { display: none; }
  .burger { display: inline-flex; }
  .intro-grid, .fleet-grid, .band__inner { grid-template-columns: 1fr; }
  .band__actions { justify-content: flex-start; }
  .promises { grid-template-columns: 1fr; gap: 2.2rem; }
  .book-two { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .services { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .fleet-cars { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .service { min-height: 290px; }

  /* At 375px the full-size mark, the Book now button and the burger were
     fighting over the row. The mark stays legible much smaller than it looks,
     and 116 x 56 in an 80px bar keeps 12px clear above and below it. */
  .brand img { width: 116px; height: 56px; }
  .site-header__inner { min-height: 80px; gap: .75rem; padding-block: .75rem; }
  .header-cta { gap: .35rem; }
  .btn--sm { padding: .7rem 1rem; letter-spacing: .05em; }
  .drawer { padding-top: 104px; }
}

@media (max-width: 380px) {
  /* Last resort on the narrowest phones: the burger and the phone number are
     both still one tap away, so the header button can go. */
  .header-cta .btn--sm { display: none; }
  .brand img { width: 128px; height: 62px; }
}

/* print: the pricing page is the one people print */
@media print {
  .site-header, .drawer, .band, .site-footer, .hero__actions { display: none !important; }
  .hero { min-height: 0; }
  body { color: #000; }
}