/* =========================================================
   Daily Frequency Rentals — Design System
   ========================================================= */

:root {
  /* Brand — the DFR mark pairs chrome/silver with gold */
  --gold:        #FCAF17;
  --gold-deep:   #E39400;
  --gold-soft:   #FFF6E2;
  --silver:      #EDEDF0;
  --silver-2:    #B7B8BF;

  /* Neutrals */
  --ink:         #0B0B0D;
  --ink-2:       #17171B;
  --ink-3:       #26262C;
  --paper:       #FFFFFF;
  --paper-2:     #F6F6F7;
  --paper-3:     #EDEDEF;
  --muted:       #62626D;
  --muted-2:     #8A8A95;
  --line:        rgba(11, 11, 13, .09);
  --line-strong: rgba(11, 11, 13, .16);

  /* Type */
  --font-display: "Archivo", "Archivo Black", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Space & shape */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation — restrained, never muddy */
  --shadow-1: 0 1px 2px rgba(11,11,13,.05), 0 4px 16px rgba(11,11,13,.05);
  --shadow-2: 0 2px 4px rgba(11,11,13,.05), 0 12px 40px rgba(11,11,13,.09);
  --shadow-gold: 0 8px 28px rgba(252,175,23,.32);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
   Reset
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--gold); color: var(--ink); }

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

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--paper { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }

.section-head {
  max-width: 660px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
/* The little gold rule that used to sit before every eyebrow is gone —
   removed at the source rather than hidden per-section. */

.section-title { font-size: clamp(30px, 4.4vw, 50px); }

.section-sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--muted);
  max-width: 56ch;
}
.section-head--center .section-sub { margin-inline: auto; }

.section--ink .section-sub { color: rgba(255,255,255,.66); }
.section--ink .eyebrow { color: var(--gold); }

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { background: var(--gold-deep); box-shadow: var(--shadow-gold); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: rgba(255,255,255,.26);
}
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--sm { padding: 11px 22px; font-size: 14px; }
.btn--lg { padding: 17px 36px; font-size: 16px; }
.btn--block { width: 100%; }

.btn .ico { width: 17px; height: 17px; flex: none; }
.btn--primary .ico-arrow { transition: transform .25s var(--ease); }
.btn--primary:hover .ico-arrow { transform: translateX(3px); }

/* =========================================================
   Header
   ========================================================= */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 84px;
  transition: height .35s var(--ease);
}

.header.is-stuck {
  background: rgba(11, 11, 13, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
}
.header.is-stuck .header__inner { height: 68px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 44px;
  width: auto;
  transition: height .35s var(--ease);
}
.header.is-stuck .brand img { height: 38px; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,.76);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--paper); background: rgba(255,255,255,.08); }

.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.header__phone:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.36); }
.header__phone .ico { width: 15px; height: 15px; color: var(--gold); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 3.5px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(128px, 15vw, 168px);
  padding-bottom: clamp(64px, 8vw, 96px);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim keeps text legible over any video */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 15% 25%, rgba(11,11,13,.90) 0%, rgba(11,11,13,.62) 45%, rgba(11,11,13,.38) 100%),
    linear-gradient(180deg, rgba(11,11,13,.72) 0%, rgba(11,11,13,.34) 40%, rgba(11,11,13,.92) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: 26px;
}
.hero__badge .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.hero__badge .stars svg { width: 14px; height: 14px; }
.hero__badge .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.32);
}

.hero__title {
  font-size: clamp(38px, 6.2vw, 74px);
  letter-spacing: -.035em;
}
.hero__title .accent {
  background: linear-gradient(100deg, var(--gold) 0%, #FFD97A 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: rgba(255,255,255,.74);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* The star/300+ proof strip that used to sit below the CTAs was removed —
   the badge above the headline already carries the review count. */

/* Floating car */
.hero__car { position: relative; }
.hero__car img {
  width: 100%;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
  animation: float 6s ease-in-out infinite;
}
.hero__car::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55) 0%, transparent 72%);
  animation: shadowPulse 6s ease-in-out infinite;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes shadowPulse {
  0%, 100% { transform: scaleX(1);    opacity: .85; }
  50%      { transform: scaleX(.9);   opacity: .55; }
}

/* =========================================================
   Interior page hero (compact)
   ========================================================= */

.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(124px, 13vw, 160px);
  padding-bottom: clamp(48px, 6vw, 72px);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -60% 40% 30% -15%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(252,175,23,.18) 0%, transparent 70%);
}
.page-hero__title { font-size: clamp(34px, 5vw, 56px); }
.page-hero__sub {
  margin-top: 16px;
  max-width: 52ch;
  font-size: clamp(16px, 1.4vw, 18px);
  color: rgba(255,255,255,.72);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .5; }

/* =========================================================
   Booking page
   ========================================================= */

.booking__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

/* ---------------------------------------------------------
   Native booking form
   Posts to GoHighLevel — see BOOKING_ENDPOINT in main.js
   --------------------------------------------------------- */

.bookform-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.bookform,
.bookform__done { padding: clamp(24px, 3.4vw, 40px); }

.bookform__head h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  letter-spacing: -.03em;
}
.bookform__head p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 52ch;
}

/* Endpoint-not-configured banner. Deliberately loud — a booking form that
   looks fine but goes nowhere is worse than no form at all. */
.bookform__notice {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: var(--gold-soft);
  border-bottom: 1px solid rgba(227,148,0,.28);
  font-size: 14px;
  line-height: 1.5;
  color: #6B4A00;
}
.bookform__notice strong { display: block; margin-bottom: 2px; color: #4A3300; }

.bookform__hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bookform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 26px;
}
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}
.field__req { color: var(--gold-deep); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(252,175,23,.22);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #C2352B; }
.field.is-invalid input:focus,
.field.is-invalid select:focus { box-shadow: 0 0 0 3px rgba(194,53,43,.18); }

.field__hint { margin-top: 6px; font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }
.field__err {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #C2352B;
}
.field__err:empty { display: none; }

/* Checkbox rows — consent and out-of-state */
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  margin-bottom: 0 !important;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--gold-deep);
  cursor: pointer;
}
.check em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-2);
}

/* The A2P consent notice is a long legal paragraph rather than a short label,
   so it sits a step down in size and weight. Only the presentation is ours —
   the wording itself is registered with the carrier and must not change. */
.check--legal {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  color: var(--muted);
}
.check--legal .field__req { color: var(--gold-deep); }
.check em a { text-decoration: underline; }

/* The three tier checkboxes sit on one row. */
.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.check--inline { width: auto; }

.bookform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.bookform__foot-note { font-size: 12.5px; color: var(--muted-2); max-width: 34ch; }

#bookformSubmit[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
#bookformSubmit.is-sending .ico-arrow { display: none; }

.bookform__error {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: #FDF1F0;
  border: 1px solid rgba(194,53,43,.3);
  font-size: 14px;
  line-height: 1.5;
  color: #8E2118;
}
.bookform__error a { text-decoration: underline; font-weight: 600; }

/* Success state — replaces the form outright */
.bookform__done { text-align: center; }
.bookform__done-mark {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--gold-soft);
}
.bookform__done-mark svg { width: 30px; height: 30px; color: var(--gold-deep); }
.bookform__done h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.03em; }
.bookform__done p {
  margin-top: 12px;
  color: var(--muted);
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
}
.bookform__done-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

@media (max-width: 620px) {
  .bookform__grid { grid-template-columns: 1fr; }
  .bookform__foot { flex-direction: column; align-items: stretch; }
  .bookform__foot .btn { width: 100%; }
  .bookform__foot-note { max-width: none; text-align: center; }
}

/* Shown only when JavaScript is off */
.form-fallback {
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.form-fallback h3 { font-size: 20px; }
.form-fallback p { margin-top: 10px; color: var(--muted); max-width: 46ch; margin-inline: auto; }
.form-fallback .btn { margin-top: 20px; }

.booking__aside { display: grid; gap: 16px; position: sticky; top: 108px; }

.panel {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.panel h3 { font-size: 18px; letter-spacing: -.02em; }
.panel > p { margin-top: 10px; font-size: 14.5px; color: var(--muted); }

.panel--ink {
  background: var(--ink);
  border-color: transparent;
  color: var(--paper);
}
.panel--ink > p { color: rgba(255,255,255,.68); }

.panel__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.panel__list li { display: flex; gap: 11px; font-size: 14.5px; color: var(--muted); }
.panel__list svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); margin-top: 2px; }
.panel--ink .panel__list li { color: rgba(255,255,255,.82); }
.panel--ink .panel__list svg { color: var(--gold); }

.panel__call {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.panel__call:hover { color: var(--gold); }

@media (max-width: 1000px) {
  .booking__layout { grid-template-columns: 1fr; }
  .booking__aside { position: static; }
}

/* =========================================================
   Brand marquee
   ========================================================= */

.marquee {
  padding-block: clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.marquee__label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 30px;
}

/* Edge fades are overlays, NOT -webkit-mask-image.
   Masking a container whose child runs a transform animation stops iOS
   Safari repainting that layer: the animation advances in the compositor but
   the pixels never update, so the row animates on desktop and sits dead
   still on an iPhone. Overlaid gradients look identical and leave
   compositing alone. Colour-matched rgba rather than `transparent`, which
   some engines interpolate through transparent-black and smear grey. */
.marquee__viewport {
  position: relative;
  overflow: hidden;
}
.marquee__viewport::before,
.marquee__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  z-index: 2;
  pointer-events: none;
}
.marquee__viewport::before { left: 0;  background: linear-gradient(90deg,  var(--paper), rgba(255,255,255,0)); }
.marquee__viewport::after  { right: 0; background: linear-gradient(270deg, var(--paper), rgba(255,255,255,0)); }
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(40px, 6vw, 76px);
  animation: scroll-x 38s linear infinite;
  will-change: transform;
}

/* The logos are decoration, not navigation. They render at full colour all the
   time — no dimmed resting state, no hover change, and the track never pauses,
   so nothing about them invites a click. pointer-events keeps the cursor from
   suggesting otherwise. */
.marquee__track img {
  height: clamp(34px, 4vw, 48px);
  width: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   Fleet
   ========================================================= */

/* Tier groups — Core / Plus / Premium, each with its own card grid. */
.fleet__tier + .fleet__tier { margin-top: clamp(48px, 6vw, 72px); }

.fleet__tier-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.fleet__tier-name { margin: 0; line-height: 1; }

/* The tier label is a button so phones can collapse the tier behind it. At
   this size it does nothing, so it's stripped back to look like plain text —
   no button chrome, default cursor, chevron hidden. */
.fleet__tier-toggle {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.fleet__tier-chev { display: none; }

.fleet__tier-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
/* Each tier reads a step warmer than the last, so the hierarchy is legible
   before you've read a word of the copy. */
.fleet__tier-badge--core    { background: var(--paper-3); color: var(--ink); }
.fleet__tier-badge--plus    { background: var(--ink);     color: var(--paper); }
.fleet__tier-badge--premium { background: var(--gold);    color: var(--ink); }

.fleet__tier-note {
  flex: 1 1 300px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.fleet__tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 22px;
}

.car {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.car:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-2);
}

.car__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(165deg, var(--paper-2) 0%, var(--paper-3) 100%);
  overflow: hidden;
}
.car__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.car:hover .car__media img { transform: scale(1.05); }

.car__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.car__tag svg { width: 15px; height: 15px; color: var(--gold-deep); }

.car__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* 20px rather than 22px: buys back 4px of footer width, which is what keeps
     the four-across Premium tier's button pair on one row. */
  padding: 20px 20px 22px;
}

.car__name { font-size: 21px; letter-spacing: -.022em; }

.car__examples {
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--muted);
}

.car__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  /* This is a <ul>, so it needs the same list reset every other list here
     gets. Without it the browser's default padding-inline-start indents the
     whole spec row 40px inside the card — at every breakpoint, not just
     mobile — and the UA block margins stack on top of margin-top. */
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.car__specs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.car__specs svg { width: 14px; height: 14px; color: var(--ink); opacity: .5; }

/* Card buttons run smaller than the site's default .btn. A four-across tier
   (Premium) leaves ~218px of footer, and the full-size pill pair wants 267px —
   so both buttons are trimmed here rather than only on the narrow tier, which
   keeps every card identical whichever tier it sits in. flex-wrap is the
   backstop: if a label ever grows, the pair stacks instead of clipping. */
.car__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}
.car__foot .btn {
  flex: 1 1 auto;
  padding: 12px 14px;
  font-size: 13.5px;
}

.car__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.car__more:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* =========================================================
   Modal (vehicle details / contact)
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,11,13,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .38s var(--ease-out), opacity .3s var(--ease);
}
.modal.is-open .modal__panel { transform: none; opacity: 1; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.modal__close:hover { background: var(--paper); transform: rotate(90deg); }
.modal__close svg { width: 17px; height: 17px; }

.modal__hero {
  aspect-ratio: 16 / 8;
  background: var(--paper-3);
}
.modal__hero img { width: 100%; height: 100%; object-fit: cover; }

.modal__body { padding: clamp(24px, 3.4vw, 34px); }
.modal__title { font-size: clamp(24px, 3vw, 32px); }
.modal__lede { margin-top: 12px; color: var(--muted); }

.modal__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--line);
  overflow: hidden;
}
.modal__specs div { padding: 16px 18px; background: var(--paper); }
.modal__specs dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.modal__specs dd {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.modal__list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.modal__list li { display: flex; gap: 11px; font-size: 15px; color: var(--muted); }
.modal__list svg { width: 19px; height: 19px; flex: none; color: var(--gold-deep); margin-top: 2px; }

.modal__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* =========================================================
   Reviews
   ========================================================= */

/* Eyebrow, headline, sub and the rating card all stack on the centre axis
   rather than sitting headline-left / rating-right. */
.reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(30px, 3.4vw, 44px);
  text-align: center;
}
.reviews__head .section-head { margin-bottom: 0; }

/* Second proof point under the rating card. Deliberately quiet — a line of
   text, not another card, so it supports the rating rather than competing. */
.reviews__stat {
  margin-top: -8px;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.55);
}
.reviews__stat strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gold);
}

/* Sits under the card rows, centred. */
.reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1.4vw, 16px);
}

.rating-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  flex: none;
}
.rating-card__score {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.rating-card .stars { display: flex; gap: 3px; color: var(--gold); }
.rating-card .stars svg { width: 16px; height: 16px; }
.rating-card__meta { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px; }

/* Gap is small because each viewport now carries its own vertical padding
   for the card shadows to live in — see below. */
.reviews__rows { display: grid; gap: 0; }

/* Overlay fades, not a mask — see the note on .marquee__viewport.
   The vertical padding is load-bearing: overflow:hidden is required to clip
   the marquee horizontally, and CSS won't let one axis be hidden while the
   other stays visible (the visible axis silently becomes auto). Without room
   inside the clip, every card's drop shadow got sliced off top and bottom and
   the panels stopped looking like they were floating at all. */
.reviews__viewport {
  position: relative;
  overflow: hidden;
  padding-block: 12px 38px;
}
.reviews__viewport::before,
.reviews__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7%;
  z-index: 2;
  pointer-events: none;
}
.reviews__viewport::before { left: 0;  background: linear-gradient(90deg,  var(--ink), rgba(11,11,13,0)); }
.reviews__viewport::after  { right: 0; background: linear-gradient(270deg, var(--ink), rgba(11,11,13,0)); }
.reviews__track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: scroll-x 44s linear infinite;
  will-change: transform;
}
.reviews__track--reverse { animation-direction: reverse; animation-duration: 52s; }
/* Pause-to-read, but only where a real pointer exists. On a touchscreen
   :hover latches after a tap and never clears, so on a phone this rule
   stopped the row permanently — you'd see the first two reviews and nothing
   would ever move again. */
@media (hover: hover) {
  .reviews__viewport:hover .reviews__track { animation-play-state: paused; }
}

/* Tilted, lit panels rather than flat boxes.
   perspective() is inside the transform rather than on the viewport on
   purpose: a perspective on the parent is anchored to the parent's centre, so
   cards would swing through different angles as the marquee carried them
   across. Per-card perspective means every panel holds the same tilt wherever
   it happens to be in the row.
   The shadow does the floating (a long soft cast plus a tight contact one) and
   the inset top line is the lit edge that sells the angle. */
.review {
  width: clamp(300px, 30vw, 400px);
  flex: none;
  display: flex;
  flex-direction: column;
  /* Stars top-centre, quote centred, attribution centred at the foot. */
  text-align: center;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
  background: linear-gradient(158deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.032) 100%);
  box-shadow:
    0 26px 50px -14px rgba(0,0,0,.7),
    0 6px 14px -4px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform: perspective(1100px) rotateY(-7deg);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
@media (hover: hover) {
  .review:hover { border-color: rgba(255,255,255,.26); }
}

.review .stars { display: flex; justify-content: center; gap: 2px; color: var(--gold); margin-bottom: 14px; }
.review .stars svg { width: 14px; height: 14px; }

/* Clamped so no single long review can set the height for the whole row.
   margin-bottom is the minimum gap before the attribution; the auto margin on
   .review__author absorbs whatever slack is left over. */
.review__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top:auto pins the attribution to the foot of the card. Combined with
   the flex column and the line clamp above, every card in a row ends up the
   same height and all the name rows line up across the row — a short review
   no longer leaves a slab of dead space under it. */
.review__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: left;
}
.review__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.review__name { font-size: 14px; font-weight: 600; }
.review__src { font-size: 12px; color: rgba(255,255,255,.46); }

/* =========================================================
   Requirements
   ========================================================= */

/* Cards sit in a row under a centred heading rather than beside it, so they
   fit as many across as the width allows and reflow down to one on a phone. */
.req__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon on top, title, then note — all on the centre line. */
.req__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  padding: 28px 20px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* Lifts rather than slides now that the cards sit side by side. */
.req__item:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow-1);
}

.req__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 15px;
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.req__icon svg { width: 25px; height: 25px; }

.req__title { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.req__note { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* =========================================================
   Steps
   ========================================================= */

/* A vertical flow, not a row of cards: number badge, label, and a chevron
   between rows carrying the eye down to the next one. Width-capped and centred
   so it reads as a single column of steps instead of sprawling on a monitor. */
.steps {
  display: grid;
  gap: 42px;
  max-width: 440px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

/* Number badge on top, label beneath it, both on the centre line — then the
   chevron below carries you to the next one. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* The animated hint between steps. Rotating the square 45deg makes a chevron;
   because the translate is applied before the rotation, a (3px, 3px) nudge
   comes out as straight down on screen. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* Dead centre of the column, not under the number badge — the chevrons form
     one straight line down the middle of the screen. */
  left: 50%;
  bottom: -30px;
  width: 11px;
  height: 11px;
  margin-left: -6px;
  border-right: 2.5px solid var(--gold-deep);
  border-bottom: 2.5px solid var(--gold-deep);
  transform: rotate(45deg);
  animation: step-hint 1.7s ease-in-out infinite;
}
@keyframes step-hint {
  0%, 100% { transform: rotate(45deg) translate(0, 0);     opacity: .45; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

.step__label {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.steps__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(38px, 5vw, 56px);
}

/* Desktop runs the four steps left to right instead of top to bottom. Each
   step keeps its stacked shape — number above label — and only the connector
   changes: it moves to the right-hand gap and turns to point sideways.
   Phones keep the vertical column exactly as it is. */
@media (min-width: 561px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3.4vw, 46px);
    max-width: 940px;
    align-items: start;
  }
  .step:not(:last-child)::after {
    left: auto;
    right: calc(clamp(28px, 3.4vw, 46px) / -2 - 5px);
    bottom: auto;
    top: 23px;                       /* centre of the 46px number badge */
    margin-left: 0;
    transform: rotate(-45deg);
    animation-name: step-hint-right;
  }
}
/* Same nudge as the vertical version — the translate is applied before the
   rotation, so at -45deg a (3px, 3px) offset resolves to straight right. */
@keyframes step-hint-right {
  0%, 100% { transform: rotate(-45deg) translate(0, 0);     opacity: .45; }
  50%      { transform: rotate(-45deg) translate(3px, 3px); opacity: 1; }
}

/* =========================================================
   CTA band
   ========================================================= */

.cta {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px);
}
.cta::before {
  content: "";
  position: absolute;
  inset: -40% 30% 40% -20%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(252,175,23,.20) 0%, transparent 70%);
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}

.cta__intro { text-align: center; }
.cta__title { font-size: clamp(28px, 3.8vw, 44px); }
.cta__sub { margin-top: 16px; color: rgba(255,255,255,.7); max-width: 44ch; margin-inline: auto; }

.cta__points { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.cta__points li { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 15px; color: rgba(255,255,255,.86); }
.cta__points svg { width: 19px; height: 19px; flex: none; color: var(--gold); }

.cta__panel {
  text-align: center;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta__panel h3 { font-size: 19px; }
.cta__panel p { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.64); }
.cta__panel .btn { margin-top: 20px; }

/* The "Or call us / (216) 677-5250" block below the panel button is gone —
   the button itself is the call now. */

/* =========================================================
   FAQ
   ========================================================= */

/* Single column, width-capped so question lines don't run the full 1200px
   and turn into a wall of text. */
.faq__list {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-1); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  cursor: pointer;
}
.faq__q:hover { color: var(--gold-deep); }

.faq__chev {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--paper-2);
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.faq__chev svg { width: 15px; height: 15px; }
.faq__item.is-open .faq__chev { transform: rotate(180deg); background: var(--gold); color: var(--ink); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 22px 22px;
  font-size: 15px;
  color: var(--muted);
}
.faq__a ul {
  margin: 0;
  padding: 0 22px 8px 42px;
  font-size: 15px;
  color: var(--muted);
}
.faq__a ul li { margin-bottom: 4px; }

/* Sits under the questions now, not beside them, so the sticky positioning
   that made it a sidebar is gone. */
.faq__aside {
  text-align: center;
  max-width: 820px;
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.faq__aside h3 { font-size: 21px; }
.faq__aside p { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
/* inline-flex, so centring the text centres the button itself too. */
.faq__aside .btn { margin-top: 20px; }

/* =========================================================
   Careers page
   ========================================================= */

/* Photo variant of .page-hero. The image + scrim stand in for the radial
   gradient the booking and privacy heroes use, so that has to be switched off. */
.page-hero--photo::before { display: none; }
.page-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(11,11,13,.86) 0%,
    rgba(11,11,13,.58) 42%,
    rgba(11,11,13,.92) 100%);
}
.page-hero--center { text-align: center; }
.page-hero--center .crumbs { justify-content: center; }
.page-hero--center .page-hero__sub { margin-inline: auto; }
.chero__cta { display: flex; justify-content: center; margin-top: 28px; }

/* ----- Perks bar -----
   Five columns at every width. The labels are deliberately two short words so
   they still fit when the whole strip shrinks to phone size — see the mobile
   block, where the descriptions drop away and only icon + label remain. */
.perks-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.perks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: clamp(22px, 3vw, 34px) 0;
  list-style: none;
}
.perk {
  text-align: center;
  padding-inline: clamp(6px, 1.6vw, 22px);
  border-right: 1px solid var(--line);
}
.perk:last-child { border-right: 0; }
.perk__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.perk__icon svg { width: 22px; height: 22px; }
.perk__title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.perk__text { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ----- Open positions ----- */
/* Width-capped so auto-fit settles on three columns for three roles. At the
   full 1200px container it made four, leaving the cards left-aligned against
   an empty fourth slot. A fourth role would wrap onto a second row. */
.jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 16px;
  max-width: 1020px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.job {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.job:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-1); }
.job__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gold-soft);
  color: var(--gold-deep);
}
.job__icon svg { width: 27px; height: 27px; }
.job__title { font-size: 18px; letter-spacing: -.02em; }
.job__meta { font-size: 12.5px; font-weight: 600; color: var(--gold-deep); }
.job__text { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
/* Pushes the button to the foot so it lines up across cards of unequal text. */
.job .btn { margin-top: auto; }

/* ----- Business hero -----
   Split on desktop (copy left, feature panel right) like the home hero;
   collapses to one centred column below 900px with the panel underneath. */
.biz-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.biz-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bizfeat {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  background: rgba(11,11,13,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  list-style: none;
}
.bizfeat__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 6px;
}
.bizfeat__item + .bizfeat__item { border-top: 1px solid rgba(255,255,255,.1); }
.bizfeat__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(252,175,23,.35);
  color: var(--gold);
}
.bizfeat__icon svg { width: 20px; height: 20px; }
.bizfeat__title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.bizfeat__text { margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.66); }

/* ----- Solutions ----- */
.solutions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  max-width: 1040px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.solution:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-1); }
.solution__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 20px;
}
.solution__media img { width: 100%; height: 100%; object-fit: cover; }
/* Sits astride the bottom edge of the photo, centred. */
.solution__icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 3px solid var(--paper);
}
.solution__icon svg { width: 23px; height: 23px; }
.solution__title { font-size: 18px; letter-spacing: -.02em; padding-inline: 20px; }
.solution__text { font-size: 13.5px; line-height: 1.55; color: var(--muted); padding-inline: 20px; }
.solution .btn { margin-top: auto; }

/* Dark variant of the perks strip, used for the business advantage row. */
.perks-bar--ink {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
  padding-block: clamp(46px, 6vw, 76px);
}
.perks-bar--ink .perks { padding-top: 0; }
.perks-bar--ink .perk { border-right-color: rgba(255,255,255,.12); }
.perks-bar--ink .perk__icon { background: rgba(252,175,23,.14); color: var(--gold); }
.perks-bar--ink .perk__text { color: rgba(255,255,255,.6); }
.perks-bar--ink .section-title { font-size: clamp(24px, 3vw, 36px); }

/* ----- Ready to apply ----- */
.apply {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(28px, 4.5vw, 52px) clamp(20px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--paper);
}
.apply__title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; margin-top: 4px; }
.apply__sub { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.68); }

.apply__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}
.apply__step { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.apply__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--gold);
}
.apply__icon svg { width: 22px; height: 22px; }
.apply__step-title { font-size: 14.5px; font-weight: 700; }
.apply__step-text { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); }

.apply__cta { display: flex; justify-content: center; margin-top: clamp(26px, 3.4vw, 36px); }
.apply__note { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.6); }
.apply__note a { color: var(--gold); }
.apply__note a:hover { text-decoration: underline; }

/* =========================================================
   Legal pages (privacy policy, terms)

   Long-form prose with a sticky section index. Headings carry
   scroll-margin so the fixed header doesn't cover them when the
   index jumps to an anchor.
   ========================================================= */

.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: 108px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.legal__toc h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  gap: 9px;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.legal__toc a::before {
  content: counter(toc);
  flex: none;
  width: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
  font-weight: 600;
}
.legal__toc a:hover { color: var(--ink); }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted-2);
}

.legal__body { max-width: 72ch; }
.legal__body section + section { margin-top: 44px; }

.legal__body h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  letter-spacing: -.02em;
  scroll-margin-top: 110px;
}
.legal__body h3 {
  margin-top: 26px;
  font-size: 17px;
  letter-spacing: -.015em;
}
.legal__body p {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}
.legal__body ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.legal__body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}
.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.legal__body a:hover { color: var(--gold-deep); }

/* Contact block that closes the document */
.legal__contact {
  margin-top: 44px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.legal__contact h2 { scroll-margin-top: 110px; }
.legal__contact ul { margin-top: 16px; }
.legal__contact ul li { padding-left: 0; }
.legal__contact ul li::before { display: none; }

@media (max-width: 1000px) {
  .legal__layout { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
}

/* =========================================================
   Footer
   ========================================================= */

.footer {
  background: var(--ink);
  color: rgba(255,255,255,.66);
  padding-top: clamp(56px, 7vw, 84px);
  padding-bottom: 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Full lockup — sized by width so the tagline stays legible */
.footer__brand img { width: 210px; height: auto; }
.footer__brand p { margin-top: 18px; font-size: 14.5px; max-width: 34ch; line-height: 1.7; }

.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer__social a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.footer__social svg { width: 17px; height: 17px; }

.footer h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 18px;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer ul a, .footer ul li { font-size: 14.5px; }
.footer ul a { transition: color .2s var(--ease); }
.footer ul a:hover { color: var(--gold); }

.footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--gold); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(255,255,255,.44);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__bottom a:hover { color: var(--gold); }

/* =========================================================
   Scroll reveal
   ========================================================= */

/* Quick and short. 0.7s over 22px read as content arriving late; at 0.42s over
   14px the movement is a settle rather than a slide.

   Staggers are authored inline in the markup as --d (up to 300ms on the
   requirements list). Scaling them here keeps the cascade — each item still
   lands after the one before it — without the last item in a group trailing a
   third of a second behind the first. Scaling in calc() means none of the
   inline values have to be rewritten. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) * .4);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */

/* Two-column hero only (the grid collapses to one at 1000px).
   At 74px "Affordable rates." wants 575px and the copy column is 533px, so it
   broke after "Affordable" and the headline rendered three lines instead of
   the two the <br> intends. The container caps at 1200px, so the column never
   grows past ~533px no matter how wide the screen — a wider viewport can't fix
   it, only a smaller cap can. 66px leaves the line ~20px of room to spare. */
@media (min-width: 1001px) {
  .hero__title { font-size: clamp(52px, 5.4vw, 66px); }
}

@media (max-width: 1000px) {
  /* Hero stacks — car above the copy, everything centred on the axis. */
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__car { order: -1; max-width: 300px; margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .cta__grid { grid-template-columns: 1fr; }

  /* Business hero collapses: panel drops beneath the copy and the whole
     column centres, matching how the home hero behaves at this width. */
  .biz-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .biz-hero__copy .crumbs { justify-content: center; }
  .biz-hero .page-hero__sub { margin-inline: auto; }
  .biz-hero__cta { justify-content: center; }
  .bizfeat__item { flex-direction: column; align-items: center; text-align: center; gap: 9px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------
   Nav collapse — 1140px, not the 860px it used to be.

   The header needs roughly 1000px of room (links + logo + phone + Book Now +
   gaps) and the container is only the viewport minus 80px, so below ~1080px
   the actions were being pushed clean off the right edge — measured at 900px
   they ended at x=934 inside a 900px window. Collapsing to the hamburger
   while there's still room fixes that.

   This block sits above the 860px one so the phone-specific header treatment
   below still overrides it, and the nav overlay's `top` matches the 84px
   header height at this size (the 560px block resets it to 64px).
   --------------------------------------------------------- */
@media (max-width: 1140px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 84px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 16px var(--gutter) 24px;
    background: rgba(11,11,13,.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 14px 16px; font-size: 16px; }
}

@media (max-width: 860px) {
  /* Collapsed to a bare icon at this width it read as clutter next to Book
     Now, and the number is still one tap away in the menu and the footer.
     The full "(216) 677-5250" button stays on desktop. */
  .header__phone { display: none; }

  /* Book Now left, logo centred, hamburger right.
     .header__actions goes display:contents so its children become flex items
     of the bar itself and can be ordered independently. The logo is absolutely
     centred rather than auto-margined, so it sits on the true midpoint instead
     of wherever two unequal buttons happen to leave it. */
  .header__inner { position: relative; justify-content: space-between; gap: 10px; }
  .header__actions { display: contents; }
  .header__actions .btn--sm { order: 1; }
  .brand {
    order: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-toggle { order: 3; }

  /* The video is a top-anchored 16:9 band, not a full-height background.
     Contained inside the hero's real height it left ~180px of dead black
     above and below; sizing the band to the footage instead means the whole
     frame shows at full width with no bars at all. It runs up under the
     transparent header, which is what makes the hero read horizontal. */
  .hero__media {
    inset: 0 0 auto 0;
    aspect-ratio: 16 / 9;
  }
  .hero__media video { object-fit: cover; }

  /* Scrim tracks the band and lands on solid ink at its foot, so the footage
     meets the hero background as a fade rather than a visible edge.

     The middle is now barely tinted. Nothing sits over the video any more, so
     the scrim only has two jobs left: keep the logo and Book Now readable at
     the very top, and carry the bottom into --ink. */
  .hero__scrim {
    inset: 0 0 auto 0;
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg,
      rgba(11,11,13,.58) 0%,
      rgba(11,11,13,.10) 28%,
      rgba(11,11,13,.10) 56%,
      rgba(11,11,13,.70) 88%,
      var(--ink) 100%);
  }

  /* Hero copy starts below the footage instead of on top of it. The band is
     16:9 of the full viewport width, so its height is exactly 56.25vw — the
     padding tracks it at every width rather than being a fixed guess. The
     hero simply grows taller; the sections after it move down with it. */
  .hero { padding-top: calc(56.25vw + 16px); }

}

/* ---------------------------------------------------------
   Tablet / large phone — first tightening pass
   --------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-y: 52px;
    --r-lg: 20px;
    --r-md: 14px;
  }

  .section-head { margin-bottom: 30px; }
  .section-title { font-size: clamp(25px, 5.4vw, 34px); }
  .section-sub { margin-top: 12px; font-size: 15px; }
  .eyebrow { margin-bottom: 12px; font-size: 11.5px; }
}

/* ---------------------------------------------------------
   Phone — full condense pass.

   The page reads long on a phone because every component keeps its
   desktop padding and type scale. Everything below steps both down
   rather than hiding anything, so the whole page is still there —
   just with far less air between the parts.
   --------------------------------------------------------- */
@media (max-width: 560px) {

  :root {
    --section-y: 44px;
    --gutter: 18px;
    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 9px;
  }

  /* A shorter fixed header buys back height on every single screen.
     .nav is positioned off the header, and scroll-padding keeps anchor
     jumps from landing under it — all three have to move together. */
  html { scroll-padding-top: 76px; }
  .header__inner { height: 64px; gap: 14px; }
  .brand img,
  .header.is-stuck .brand img { height: 34px; }
  .nav { top: 64px; }
  /* The centred logo is absolutely positioned, so it doesn't push the two
     buttons aside — they have to be small enough to clear it on their own. */
  .header__actions .btn--sm { padding: 9px 15px; font-size: 13px; }

  /* ----- Section furniture ----- */
  .section-head { margin-bottom: 22px; }
  .section-title { font-size: 25px; letter-spacing: -.028em; }
  .section-sub { margin-top: 10px; font-size: 14px; }
  .eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: .12em; }

  /* ----- Hero -----
     The car sits beside the headline rather than above it. Sitting on top it
     pushed the whole stack down and covered the video band; alongside the
     headline it costs no vertical space at all, so more of the footage shows.

     .hero__copy is dissolved with display:contents so the badge, headline,
     sub and CTA become grid items in their own right and can be placed
     individually. Row order on mobile is headline+car, then the review badge,
     then sub, then CTAs — stated explicitly so the car's order:-1 from the
     tablet breakpoint can't reshuffle them.

     Extra top padding pushes the stack down the video band, leaving more of
     the footage clear above the headline. */
  /* padding-top is set in the 860px block, off the video band's height. */
  .hero { padding-bottom: 32px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
    align-items: center;
  }
  .hero__copy { display: contents; }

  /* Sits between the headline/car row and the subtext. */
  .hero__badge {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: center;
    gap: 8px; padding: 5px 12px 5px 7px; font-size: 12px;
  }
  .hero__badge .stars svg { width: 12px; height: 12px; }

  /* Left-aligned so "Affordable" and "Smooth" start on the same edge. */
  .hero__title {
    grid-column: 1; grid-row: 1;
    text-align: left;
    font-size: 26px;
  }
  .hero__sub { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; font-size: 14.5px; }
  /* Content-sized rather than stretched to the full row — two smaller pills
     sitting centred under the copy. */
  .hero__cta { grid-column: 1 / -1; grid-row: 4; gap: 8px; margin-top: 6px; }
  .hero__cta .btn { flex: 0 0 auto; padding: 11px 15px; font-size: 13px; }
  .hero__cta .btn .ico { width: 15px; height: 15px; }
  /* Deliberately small — it's an accent above the headline, not the subject
     of the hero. The video behind it is the subject. */
  /* Fills its 104px column; the tablet rule's auto margins and order are undone.

     Scaled up from the right edge to fill the gap beside the headline. This is
     a transform rather than a bigger width on purpose: a transform is painted,
     not laid out, so the grid track stays 104px and the row stays the
     headline's height — the badge, sub and buttons below don't shift by a
     pixel. Origin at right-centre grows it leftward into the slack next to
     "Smooth rides."; the translateY drops it a touch.

     It goes on the wrapper, not the <img> — the image is running the float
     keyframes, which set transform and would overwrite anything put here. */
  .hero__car {
    grid-column: 2; grid-row: 1;
    order: 0; max-width: none; margin: 0;
    transform: translateY(6px) scale(1.38);
    transform-origin: 100% 50%;
  }

  /* ----- Brand marquee ----- */
  .marquee { padding-block: 24px; }
  .marquee__label { margin-bottom: 16px; font-size: 11px; }
  .marquee__track { gap: 34px; }
  .marquee__track img { height: 30px; }

  /* ----- Fleet — three tap-to-open tiers instead of ten stacked cards -----
     The tier label becomes a full-width bubble in the tier's own colour, and
     its cards live in a panel that expands underneath. Ten cards is a very
     long scroll on a phone; three buttons is a page you can actually take in.

     The blurb under each tier name is hidden here — the whole point is three
     clean bubbles. It still shows on desktop. */
  .fleet__tier + .fleet__tier { margin-top: 10px; }
  .fleet__tier-head {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .fleet__tier-name { display: block; }
  .fleet__tier-note { display: none; }

  .fleet__tier-toggle {
    display: block;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fleet__tier-badge {
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 44px;
    border-radius: var(--r-pill);
    text-align: center;
    font-size: 17px;
    letter-spacing: .04em;
  }
  /* Inside the badge, so it inherits each tier's own text colour. */
  .fleet__tier-chev {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: 17px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    transition: transform .3s var(--ease);
  }
  .fleet__tier-chev svg { width: 18px; height: 18px; }
  .fleet__tier.is-open .fleet__tier-chev { transform: translateY(-50%) rotate(180deg); }

  /* max-height rather than the FAQ's 0fr -> 1fr row trick.
     That trick needs the browser to resolve the panel's intrinsic height, and
     it can't here: .car__media is sized by aspect-ratio, so its height comes
     from its width, which during intrinsic sizing resolves to zero. The 1fr
     track measured 14px — the padding and nothing else — and the cards stayed
     collapsed. A max-height cap sidesteps intrinsic sizing entirely. The cap
     only has to clear the tallest panel (Premium, four cards ~1570px). */
  .fleet__tier-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--ease);
  }
  .fleet__tier.is-open .fleet__tier-panel { max-height: 2000px; }
  .fleet__tier-grid { gap: 14px; }
  /* Only once open — overflow:hidden clips a box's content, not its own
     padding, so an unconditional padding-top left every closed panel 14px
     tall and the bubbles never sat flush. */
  .fleet__tier.is-open .fleet__tier-grid { padding-top: 14px; }

  /* Cards in a collapsed panel have no size, so the reveal observer may never
     see them and they'd open still transparent. The expand is motion enough. */
  .fleet__tier-panel [data-reveal] { opacity: 1; transform: none; }

  .car__media { aspect-ratio: 16 / 9; }
  .car__body { padding: 14px 15px 16px; }
  .car__name { font-size: 17.5px; }
  .car__examples { margin-top: 4px; font-size: 12.5px; }
  /* All four spec pills have to clear one row, or the card grows 30px. The
     binding case is the Electric card — "Electric" is a longer fuel label
     than "Gas", so it sets the padding budget for all of them. */
  .car__specs { gap: 3px; margin-top: 12px; padding-top: 12px; }
  .car__specs li { gap: 5px; padding: 4px 6px; font-size: 11.5px; }
  .car__specs svg { width: 12px; height: 12px; }
  /* Buttons stay side by side. They used to stack here, which cost ~80px on
     each of ten cards; now that they're smaller the pair needs 209px and a
     phone-width card has ~295px of interior, so stacking is just waste. */
  .car__foot { gap: 8px; padding-top: 14px; }

  /* ----- Reviews ----- */
  .reviews__head { gap: 16px; margin-bottom: 22px; }
  .rating-card { gap: 14px; padding: 12px 16px; }
  .reviews__rows { gap: 0; }
  .reviews__track { gap: 12px; animation-duration: 68s; }
  /* One row only — the second viewport is empty on phones (renderReviews). */
  .reviews__viewport + .reviews__viewport { display: none; }
  /* Shadow clearance, scaled down from the desktop values. */
  .reviews__viewport { padding-block: 10px 30px; }

  /* Wider cards, and the clamp from the base rule is deliberately left in
     place: every card ends the same height, so the row reads as one clean
     band instead of a ragged skyline. Cards stretch to match (the default),
     and .review__author's auto margin drops each name row onto the same
     baseline, so a short review no longer leaves dead space beneath it. */
  .review { width: 268px; padding: 18px 18px 16px; }
  .review__text { font-size: 13.5px; line-height: 1.65; margin-bottom: 14px; }
  .review__author { gap: 9px; padding-top: 13px; }
  .review__avatar { width: 30px; height: 30px; font-size: 12px; }
  .review__name { font-size: 13px; }
  .review__src { font-size: 11.5px; }

  /* ----- Requirements ----- */
  .req__list { gap: 9px; }
  .req__list { gap: 10px; }
  .req__item { gap: 10px; padding: 20px 16px 18px; }
  .req__icon { width: 44px; height: 44px; border-radius: 13px; }
  .req__icon svg { width: 22px; height: 22px; }
  .req__title { font-size: 14.5px; }
  .req__note { font-size: 12.5px; line-height: 1.5; }

  /* ----- Steps ----- */
  /* Gap has to clear the chevron sitting in it, so it stays generous here
     even though everything else on mobile tightens up. */
  .steps { gap: 36px; }
  .step { gap: 10px; }
  .step:not(:last-child)::after { bottom: -26px; }
  .step__num { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
  .step__label { font-size: 17px; }
  .steps__cta { margin-top: 34px; }

  /* ----- CTA band ----- */
  .cta { padding: 24px 19px; }
  .cta__grid { gap: 22px; }
  .cta__title { font-size: 25px; }
  .cta__sub { margin-top: 10px; font-size: 14px; }
  .cta__points { gap: 9px; margin-top: 18px; }
  .cta__points li { gap: 10px; font-size: 13.5px; }
  .cta__points svg { width: 17px; height: 17px; }
  .cta__panel { padding: 17px; }
  .cta__panel h3 { font-size: 17px; }
  .cta__panel p { margin-top: 6px; font-size: 13px; }
  .cta__panel .btn { margin-top: 15px; }

  /* ----- Careers ----- */
  .chero__cta { margin-top: 20px; }

  /* Still five across on a phone. Everything shrinks instead of wrapping: the
     descriptions drop, the icon halves and the label goes to 9px — which is
     exactly why those labels were written as two short words. At 320px each
     column is ~54px wide and the longest word ("Schedules") needs ~40px. */
  .perks { padding: 16px 0; }
  .perk { padding-inline: 3px; }
  .perk__icon { width: 30px; height: 30px; margin-bottom: 7px; border-radius: 9px; }
  .perk__icon svg { width: 16px; height: 16px; }
  .perk__title { font-size: 9px; line-height: 1.25; letter-spacing: 0; }
  .perk__text { display: none; }

  /* Compact enough that all three roles land on one screen. */
  .jobs { gap: 10px; }
  .job { gap: 7px; padding: 16px 14px 15px; }
  .job__icon { width: 38px; height: 38px; border-radius: 11px; }
  .job__icon svg { width: 19px; height: 19px; }
  .job__title { font-size: 15px; }
  .job__meta { font-size: 11px; }
  .job__text {
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .job .btn { padding: 8px 16px; font-size: 12.5px; }

  .apply { padding: 24px 17px; }
  .apply__title { font-size: 22px; }
  .apply__sub { margin-top: 8px; font-size: 13.5px; }
  .apply__steps { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
  .apply__icon { width: 40px; height: 40px; }
  .apply__icon svg { width: 19px; height: 19px; }
  .apply__cta { margin-top: 24px; }
  .apply__note { font-size: 12px; }

  /* ----- Business ----- */
  .biz-hero__cta { gap: 8px; margin-top: 20px; }
  .biz-hero__cta .btn { flex: 0 0 auto; padding: 11px 15px; font-size: 13px; }
  .bizfeat { padding: 14px; }
  .bizfeat__item { padding: 12px 4px; }
  .bizfeat__icon { width: 34px; height: 34px; }
  .bizfeat__icon svg { width: 17px; height: 17px; }
  .bizfeat__title { font-size: 13.5px; }
  .bizfeat__text { font-size: 12.5px; }

  .solutions { gap: 12px; }
  .solution { gap: 9px; padding-bottom: 18px; }
  .solution__media { margin-bottom: 16px; }
  .solution__icon { width: 42px; height: 42px; border-width: 2px; }
  .solution__icon svg { width: 19px; height: 19px; }
  .solution__title { padding-inline: 14px; font-size: 16px; }
  .solution__text {
    padding-inline: 14px;
    font-size: 12.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .solution .btn { padding: 8px 16px; font-size: 12.5px; }

  .perks-bar--ink { padding-block: 34px; }
  .perks-bar--ink .section-head { margin-bottom: 16px; }

  /* ----- FAQ ----- */
  .faq__list { gap: 8px; }
  .faq__q { gap: 12px; padding: 14px 15px; font-size: 14.5px; }
  .faq__a p { padding: 0 15px 15px; font-size: 13.5px; }
  .faq__a ul { padding: 0 15px 6px 33px; font-size: 13.5px; }
  .faq__aside { margin-top: 18px; padding: 18px 17px; }
  .faq__aside h3 { font-size: 18px; }
  .faq__aside p { margin-top: 7px; font-size: 13.5px; }
  .faq__aside .btn { margin-top: 15px; }

  /* ----- Footer -----
     Single centred column on the axis: logo, blurb, socials, then each link
     group stacked beneath. Two columns was more compact, but centring three
     groups across two columns always leaves one orphaned. */
  .footer { padding-top: 40px; padding-bottom: 22px; }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-bottom: 26px;
    text-align: center;
    justify-items: center;
  }
  .footer__brand { grid-column: 1 / -1; }
  /* The reset makes images display:block, so text-align on the parent does
     nothing to them — auto side margins are what actually centres the logo. */
  .footer__brand img { width: 165px; margin-inline: auto; }
  .footer__brand p { margin-top: 12px; margin-inline: auto; font-size: 13.5px; line-height: 1.6; }
  .footer__social { gap: 8px; margin-top: 15px; justify-content: center; }
  .footer__social a { width: 34px; height: 34px; }
  /* The contact rows are icon + text flex lines, so they need centring of
     their own — text-align alone won't move them. */
  .footer__contact li { justify-content: center; }
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__bottom nav { justify-content: center; }
  .footer h4 { margin-bottom: 12px; font-size: 11px; }
  /* Gap traded for padding: same row pitch, so the footer is no taller, but
     each link's tap area goes from 16px to 24px. */
  .footer ul { gap: 4px; }
  .footer ul a, .footer ul li { font-size: 13.5px; }
  .footer ul a { display: inline-block; padding-block: 4px; }
  .footer__contact li { align-items: center; }
  .footer__contact svg { margin-top: 0; }
  .footer__bottom { gap: 10px; padding-top: 18px; font-size: 12px; }
  .footer__bottom nav { gap: 14px; }

  /* ----- Booking / legal page headers ----- */
  .page-hero { padding-top: 82px; padding-bottom: 30px; }
  .page-hero__title { font-size: 29px; }
  .page-hero__sub { margin-top: 11px; font-size: 14.5px; }

  /* ----- Booking form ----- */
  .bookform,
  .bookform__done { padding: 18px 17px; }
  .bookform__head h2 { font-size: 20px; }
  .bookform__head p { margin-top: 6px; font-size: 13.5px; }
  .bookform__grid { gap: 14px; margin-top: 18px; }
  .bookform__foot { margin-top: 20px; padding-top: 18px; }
  .field label { margin-bottom: 5px; font-size: 13px; }
  /* 16px is a floor, not a style choice: iOS Safari zooms the whole page
     when you focus a control smaller than that, which wrecks the layout. */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field select,
  .field textarea { padding: 11px 12px; font-size: 16px; }
  .field textarea { min-height: 80px; }
  .panel { padding: 18px 17px; }
  .booking__aside { gap: 12px; }

  .modal__panel { max-height: 92vh; }
}

/* ---------------------------------------------------------
   Very small phones (SE-class, 320px)

   At this width the four spec pills need ~280px against 252px of card
   interior — too far to close with padding. The pill icons are decorative
   duplicates of the text sitting right next to them, so dropping them
   recovers 68px and keeps the row on one line. Nothing is lost but width.
   --------------------------------------------------------- */
@media (max-width: 360px) {
  .car__specs li { gap: 0; }
  .car__specs svg { display: none; }

  /* At 320px the Book Now button ran 22px into the centred logo. Both step
     down again so the three header items clear each other. */
  .header__actions .btn--sm { padding: 8px 12px; font-size: 12px; }
  .brand img,
  .header.is-stuck .brand img { height: 30px; }

  /* Perks strip has ~54px per column here, so one more step down. */
  .perk__icon { width: 26px; height: 26px; margin-bottom: 6px; }
  .perk__icon svg { width: 14px; height: 14px; }
  .perk__title { font-size: 8px; }

  /* A narrower car frees enough column for "Affordable rates." to hold one
     line — at 104px/26px it needs 202px against 168px available and wraps. */
  .hero__grid { grid-template-columns: minmax(0, 1fr) 84px; }
  .hero__title { font-size: 23px; }

  /* The review badge needs 292px and has 284px here, so its text wrapped to a
     second line inside the pill. A step down on type and padding keeps it a
     single clean pill. */
  .hero__badge { gap: 7px; padding: 4px 10px 4px 6px; font-size: 11px; }
  .hero__badge .stars svg { width: 11px; height: 11px; }
}

/* =========================================================
   Motion & print preferences
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* Cancelling a marquee's animation leaves the track frozen at whatever
     transform its last keyframe landed on — the reverse review row parks
     itself ~2400px off to the left, so most of the content is simply gone.
     Reset the transform and hand over a swipeable strip instead: no motion,
     but every logo and review is still reachable. */
  .marquee__track,
  .reviews__track {
    animation: none !important;
    transform: none !important;
  }
  .marquee__viewport,
  .reviews__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Edge fades would sit over a strip the user is now scrolling by hand. */
  .marquee__viewport::before, .marquee__viewport::after,
  .reviews__viewport::before, .reviews__viewport::after { display: none; }
}