/* ==========================================================================
   Seven Fleet Group LLC — style.css
   All colors, spacing and type scale live in the :root block below.
   Change a token here and it propagates site-wide.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --c-black:        #0A0A0A;
  --c-black-soft:   #121212;
  --c-black-panel:  #171717;
  --c-white:        #FFFFFF;
  --c-off-white:    #F6F5F3;
  --c-light-panel:  #EFEDE9;
  --c-gold:         #C9A961;
  --c-gold-dim:     #A8873F;
  --c-gold-faint:   rgba(201, 169, 97, 0.34);
  --c-gold-ghost:   rgba(201, 169, 97, 0.08);

  --c-text-dark:    #0A0A0A;   /* text on light sections */
  --c-text-dark-2:  #5A5A5A;   /* muted text on light sections */
  --c-text-light:   #F2F2F2;   /* text on dark sections */
  --c-text-light-2: #9A9A9A;   /* muted text on dark sections */

  --c-rule-dark:    rgba(255, 255, 255, 0.12);
  --c-rule-light:   rgba(10, 10, 10, 0.12);
  --c-error:        #D9534F;
  --c-error-dark:   #FF6B66;

  /* --- Spacing ---------------------------------------------------------- */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;

  --section-y:      var(--s-9);      /* vertical rhythm of a section */
  --wrap-max:       1280px;
  --wrap-narrow:    780px;
  --wrap-pad:       1.25rem;
  --nav-h:          72px;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --track-eyebrow: 0.28em;
  --track-display: -0.02em;
  --track-btn:     0.14em;

  /* --- Shape & motion --------------------------------------------------- */
  --radius:      2px;
  --border-thin: 1px;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         0.6s;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-text-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--c-gold);
  color: var(--c-black);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  padding-block: var(--section-y);
  scroll-margin-top: var(--nav-h);
}
.section--tight { padding-top: 0; }

.section--dark {
  background: var(--c-black);
  color: var(--c-text-light);
}
.section--light {
  background: var(--c-off-white);
  color: var(--c-text-dark);
}

.section__head { margin-bottom: var(--s-8); }
.section__head--center { text-align: center; }

/* ==========================================================================
   Type
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold);
  margin-bottom: var(--s-4);
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.04;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
}
.display--xl { font-size: clamp(2.5rem, 8.5vw, 5.5rem); }
.display--sm { font-size: clamp(1.6rem, 4vw, 2.25rem); }

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

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-bd: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.95rem 1.85rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-thin) solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-black);
  --btn-bd: var(--c-gold);
}
.btn--gold:hover { --btn-bg: #D8BC7C; --btn-bd: #D8BC7C; }

.btn--dark {
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-black);
}
.btn--dark:hover { --btn-bg: var(--c-gold); --btn-fg: var(--c-black); --btn-bd: var(--c-gold); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--c-white);
  --btn-bd: rgba(255, 255, 255, 0.45);
  padding: 0.7rem 1.35rem;
}
.btn--outline:hover { --btn-bd: var(--c-gold); --btn-fg: var(--c-gold); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-text-light);
  --btn-bd: var(--c-rule-dark);
}
.btn--ghost:hover { --btn-bd: var(--c-gold); --btn-fg: var(--c-gold); }

.btn--block { width: 100%; padding-block: 1.1rem; }

/* ==========================================================================
   Image placeholders — deliberate while empty
   ========================================================================== */

.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(201, 169, 97, 0.05) 0%, transparent 55%),
    var(--c-black-panel);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

/* Uncommenting the <img> inside a slot is enough — it covers the label. */
.media-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Per-photo framing. The k4 shots are tall phone frames with the car sitting
   high in shot, so a centred cover crop into the 16:10 slot clips its roof. */
.media-slot img.is-framed-high { object-position: center 36%; }

.media-slot__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold);
  opacity: 0.75;
  text-align: center;
  padding-inline: var(--s-4);
}



/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: var(--border-thin) solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.97);
  border-bottom-color: var(--c-rule-dark);
}

.nav__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-white);
}
.brand__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold);
  margin-top: 4px;
}

.nav__links ul {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav__links a {
  color: var(--c-text-light);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-block: var(--s-2);
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav__links ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links ul a:hover { color: var(--c-gold); }
.nav__links ul a:hover::after { transform: scaleX(1); }

.nav__cta-mobile { display: none; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  cursor: pointer;
  place-items: center;
}
.nav__toggle-bars {
  display: block;
  position: relative;
  width: 20px;
  height: 12px;
}
.nav__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 5px; }
.nav__toggle-bars span:nth-child(3) { top: 10px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Height tracks viewport WIDTH, not height, and is a hard height rather than
     a floor. The artwork is 2.72:1: let content dictate the height and the box
     grows tall, which crops the image horizontally and eats the empty dark side
     the headline sits on. At 44.2vw the crop is width-independent — the visible
     window is always image-x 366..2070, holding all four vehicles with a dark
     gutter to spare. */
  min-height: clamp(490px, 44.2vw, 780px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-8));
  padding-bottom: var(--s-9);
  background: var(--c-black);
  color: var(--c-text-light);
  scroll-margin-top: var(--nav-h);
}

/* --------------------------------------------------------------------------
   Hero artwork. cover never distorts, only crops; anchoring the crop to the
   right edge means the four vehicles are always held and the surplus comes
   off the empty dark side, which the scrim covers anyway.
   -------------------------------------------------------------------------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg picture { display: contents; }
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

/* Three passes, each doing one job, kept as light as the text allows:
   left, so the headline holds; top, so the nav clears the lit skyline; foot,
   so the stats row reads off the pavement. The left pass is deliberately weak
   through the 25-45% band — the Telluride sits there and it is already black,
   so white display type survives without the scrim erasing the vehicle. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10, 10, 10, 0.86) 0%,
      rgba(10, 10, 10, 0.58) 24%,
      rgba(10, 10, 10, 0.28) 44%,
      rgba(10, 10, 10, 0.08) 62%,
      transparent 76%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, transparent 18%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.52) 0%, transparent 30%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

.hero__sub {
  margin-top: var(--s-5);
  max-width: 42ch;
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  color: var(--c-text-light-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--border-thin) solid var(--c-rule-dark);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-text-light-2);
}
.hero__facts li { display: flex; align-items: center; gap: var(--s-5); }
.hero__facts li + li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--c-gold);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-text-light-2);
  transition: color 0.25s var(--ease);
}
.hero__scroll:hover { color: var(--c-gold); }
.hero__scroll svg { animation: nudge 2.4s var(--ease) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Hero below 900px. A full-bleed cover crop into a portrait viewport would
   hold barely one vehicle out of four, so the artwork becomes a contained
   cinematic band: the whole lineup stays legible and the headline sits on
   solid black beneath it rather than fighting the image for contrast.
   -------------------------------------------------------------------------- */


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

.fleet__grid {
  display: grid;
  /* auto-fit lets the grid collapse to one column on its own, so the fixed
     2-col / 4-col breakpoints below are no longer needed. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--border-thin) solid var(--c-rule-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.card:hover {
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(10, 10, 10, 0.45);
}

.card__media { aspect-ratio: 16 / 10; border: 0; border-bottom: var(--border-thin) solid var(--c-gold-faint); }

/* Stage for transparent-background vehicle cutouts. The contact shadow is
   baked into each asset, so no pseudo-element shadow is painted here. */
.card__stage {
  position: relative;
  display: block;
  /* Matches the artwork's 1.68:1 so the image fills the stage at any card
     width. A fixed height could not: the auto-fit grid resizes cards
     continuously, so the box ratio drifted from 1.66 on phones to 1.31 wide. */
  aspect-ratio: 1.68;
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-light-panel) 100%);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
  overflow: hidden;
}

.card__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Lifts the pale alloys clear of the gold/white bodywork at card size, where
     quarter-scale rendering flattens them into the stage gradient. Kept mild so
     the paint still reads as the colour named under each card. */
  filter: contrast(1.10) saturate(1.03);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.card__trim {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
  margin-top: var(--s-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: var(--border-thin) solid var(--c-rule-light);
  border-radius: var(--radius);
  background: var(--c-light-panel);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dark);
  white-space: nowrap;
}
.chip svg { color: var(--c-gold-dim); flex: none; }

.card__features {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-text-dark-2);
}

.card__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
}
.card__foot .btn { width: 100%; }

.price { display: flex; align-items: baseline; gap: 4px; }
.price__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.price__unit {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-dark-2);
}

/* "$639/week" over "7-day minimum". */
.price-block { display: flex; flex-direction: column; gap: 3px; }
.price-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--c-text-dark-2);
}

/* Second line under the grid - same muted treatment, tucked up to the rates
   note so the two read as one block rather than two separate notes. */
.fleet__note--fine {
  margin-top: var(--s-2);
  padding-top: 0;
  border-top: 0;
}

.fleet__note {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--border-thin) solid var(--c-rule-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
  text-align: center;
}

/* ==========================================================================
   Why choose us
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.pillar {
  padding-left: 0;
  border-top: var(--border-thin) solid var(--c-gold-faint);
  padding-top: var(--s-5);
}
.pillar__icon { color: var(--c-gold); display: block; }
.pillar__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pillar__text {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  color: var(--c-text-light-2);
  max-width: 32ch;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}
.step {
  border-top: var(--border-thin) solid var(--c-rule-light);
  padding-top: var(--s-5);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 7vw, 4rem);
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: -0.03em;
}
.step__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.step__text {
  margin-top: var(--s-2);
  color: var(--c-text-dark-2);
  max-width: 30ch;
}
.steps__arrow { display: none; color: var(--c-gold); }

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

.req {
  background: var(--c-light-panel);
  border: var(--border-thin) solid var(--c-rule-light);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.req__head { margin-bottom: var(--s-6); }

.req__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.req__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: var(--s-3);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
  margin-bottom: var(--s-4);
}

.ticks li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: 0.9375rem;
  color: #333;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--c-gold-dim);
}

/* ==========================================================================
   Booking form
   ========================================================================== */

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-text-light-2);
  margin-bottom: var(--s-2);
}
.field__opt { text-transform: none; letter-spacing: 0.06em; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--c-black-panel);
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  color: var(--c-text-light);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  background: #1C1C1C;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field option { background: var(--c-black-panel); color: var(--c-text-light); }

/* Date inputs on WebKit render a dark-on-dark calendar glyph without this. */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.has-error .check__box {
  border-color: var(--c-error-dark);
}

.field__error {
  min-height: 0;
  margin-top: var(--s-2);
  font-size: 0.75rem;
  color: var(--c-error-dark);
}
.field__error:empty { margin-top: 0; }

/* Specificity has to beat `.field label` above, or the checkbox label picks up
   the uppercase mono treatment and loses its flex layout. */
.field .check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text-light-2);
}
.field .check input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  /* The input is invisible but sits ON TOP of the drawn box, so a real mouse
     click hits the input, toggles it, then bubbles to the wrapping label which
     forwards a second click - two toggles, no net change. Letting pointer
     events pass through means every click reaches the label and forwards once.
     Keyboard focus and Space are unaffected by pointer-events. */
  pointer-events: none;
}
.field .check__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  background: var(--c-black-panel);
  display: grid;
  place-items: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field .check__box::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease);
}
.field .check input:checked + .check__box { background: var(--c-gold); border-color: var(--c-gold); }
.field .check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.field .check input:focus-visible + .check__box { outline: 2px solid var(--c-gold); outline-offset: 3px; }

.form__status {
  margin-top: var(--s-4);
  font-size: 0.875rem;
  text-align: center;
  color: var(--c-error-dark);
}
.form__status:empty { margin-top: 0; }

.form__success {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  background: var(--c-gold-ghost);
}
.form__success-mark { color: var(--c-gold); display: block; margin: 0 auto var(--s-4); width: 40px; }
.form__success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.form__success p {
  color: var(--c-text-light-2);
  max-width: 44ch;
  margin: 0 auto var(--s-6);
}

/* Honeypot. Kept in the DOM and fillable by bots, but off-screen, zero-size
   and out of the tab order so no real visitor can reach or perceive it.
   display:none is avoided because some bots skip undisplayed inputs. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rate, prorate and deposit terms shown beside the form. */
.form__terms {
  margin-top: var(--s-6);
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-text-light-2);
  text-align: center;
}
.form__terms[hidden] { display: none; }

.form__note {
  margin-top: var(--s-6);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-text-light-2);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

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

.faq {
  border-top: var(--border-thin) solid var(--c-rule-light);
}
.faq__item { border-bottom: var(--border-thin) solid var(--c-rule-light); }
.faq__h { margin: 0; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: var(--c-text-dark);
  transition: color 0.25s var(--ease);
}
.faq__q:hover { color: var(--c-gold-dim); }
.faq__q[aria-expanded="true"] { color: var(--c-gold-dim); }

.faq__icon {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; }
.faq__icon::after  { left: 50%; top: 0; height: 100%; width: 1.5px; margin-left: -0.75px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  height: 0;
  overflow: hidden;
  transition: height 0.35s var(--ease);
}
.faq__a-inner {
  padding-bottom: var(--s-5);
  padding-right: var(--s-6);
  color: var(--c-text-dark-2);
  font-size: 0.9375rem;
  line-height: 1.7;
}

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

.footer {
  background: var(--c-black);
  color: var(--c-text-light);
  padding-top: var(--s-8);
  border-top: var(--border-thin) solid var(--c-rule-dark);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
.footer__tagline {
  margin-top: var(--s-4);
  color: var(--c-text-light-2);
  font-size: 0.9375rem;
  max-width: 34ch;
}
.footer__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold);
  margin-bottom: var(--s-4);
}
.footer__col li { margin-bottom: var(--s-3); }
.footer__col a,
.footer__col span {
  color: var(--c-text-light-2);
  font-size: 0.9375rem;
  transition: color 0.25s var(--ease);
}
.footer__col a:hover { color: var(--c-gold); }

/* Registered entity + address. Branding stays as-is in the header and logo. */
.footer__address {
  font-style: normal;
  color: var(--c-text-light-2);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.footer__entity {
  display: block;
  color: var(--c-text-light);
  font-weight: 500;
}
.footer--minimal { padding-top: 0; }
.footer--minimal .footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 0;
}
.footer--minimal .footer__address {
  font-size: 0.8125rem;
  /* .footer__bottom uppercases its text; a registered address should not be. */
  text-transform: none;
  font-family: var(--font-body);
  letter-spacing: normal;
}
.footer--minimal .footer__entity { display: inline; }

.footer__bottom {
  padding-block: var(--s-5);
  border-top: var(--border-thin) solid var(--c-rule-dark);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-light-2);
  text-align: center;
}

/* ==========================================================================
   Scroll animations
   ========================================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive — mobile-first breakpoints
   ========================================================================== */

@media (min-width: 600px) {
  .req__cols  { grid-template-columns: repeat(2, 1fr); }
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .pillars    { grid-template-columns: repeat(2, 1fr); }
  .req        { padding: var(--s-8) var(--s-7); }
}

@media (min-width: 900px) {
  :root {
    --nav-h: 84px;
    --wrap-pad: 2.5rem;
    --section-y: var(--s-10);
  }

  .nav__toggle { display: none; }
  .hero__scroll { display: flex; }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-9); }
  /* Hard height so the copy can never stretch the box and re-crop the art. */
  .hero { height: clamp(490px, 44.2vw, 780px); }
  .hero__grid { align-content: center; }
  /* The hero is now width-driven and shorter, so a centred scroll cue lands
     on the stats rule. Park it against the right edge, clear of the copy. */
  .hero__scroll { left: auto; right: var(--s-6); transform: none; }

  .steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s-6);
  }
  .steps__arrow {
    display: block;
    align-self: center;
    padding-top: var(--s-6);
    opacity: 0.7;
  }

  .pillars {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .pillar {
    border-top: 0;
    padding-top: 0;
    padding-inline: var(--s-6);
    border-left: var(--border-thin) solid var(--c-gold-faint);
  }
  .pillar:first-child { padding-left: 0; border-left: 0; }
  .pillar:last-child  { padding-right: 0; }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr;
    gap: var(--s-6);
  }
  .footer__bottom { text-align: left; }
}

@media (min-width: 1100px) {
  .card__foot { flex-wrap: wrap; }
}

/* ---- Mobile nav (under 900px) ---- */
@media (max-width: 899px) {
  .nav__toggle { display: grid; }
  .nav__cta { display: none; }
  .nav__cta-mobile { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    background: #0A0A0A;
    border-bottom: var(--border-thin) solid var(--c-rule-dark);
    padding: var(--s-5) var(--wrap-pad) var(--s-7);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__links ul li { border-bottom: var(--border-thin) solid var(--c-rule-dark); }
  .nav__links ul a {
    display: block;
    padding-block: var(--s-4);
    font-size: 1rem;
  }
  .nav__links ul a::after { display: none; }
  .nav__cta-mobile { align-self: flex-start; }

  body.nav-open { overflow: hidden; }
}

/* ---- Small phones ---- */
@media (max-width: 599px) {
  /* The facts list wraps here, which would strand a separator at line start. */
  .hero__facts li + li::before { display: none; }
  .hero__facts { gap: var(--s-2) var(--s-5); }
}

@media (max-width: 400px) {
  .hero__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero between 900 and 1199px. The copy column narrows faster than the type
   scale does, so the headline wraps to four lines and blows past a
   width-driven hero. Widen the column, ease the display size and tighten the
   vertical padding so the copy still clears the box at 1024.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1199px) {
  .hero {
    padding-top: calc(var(--nav-h) + var(--s-5));
    padding-bottom: var(--s-6);
  }
  .hero__grid { grid-template-columns: 1.45fr 0.55fr; gap: var(--s-7); }
  .hero .display--xl { font-size: clamp(2.5rem, 6.4vw, 4.25rem); }
  /* Shorter measure keeps the line off the lit K5 bonnet at this width. */
  .hero__sub { margin-top: var(--s-4); max-width: 30ch; }
  .hero__actions,
  .hero__facts { margin-top: var(--s-5); }
}

@media (max-width: 899px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--nav-h) + var(--s-5));
    padding-bottom: var(--s-8);
  }

  .hero__bg {
    position: relative;
    inset: auto;
    aspect-ratio: 2 / 1;
    margin-bottom: var(--s-7);
    border-top: var(--border-thin) solid var(--c-rule-dark);
    border-bottom: var(--border-thin) solid var(--c-rule-dark);
  }

  /* Holds the Telluride, K5 and K4 whole with the Fusion entering frame. */
  .hero__bg img { object-position: 58% 50%; }

  /* Only a foot of shading to settle the band against the page. */
  .hero__bg::after {
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.45) 0%, transparent 34%);
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-animate] { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .nav, .hero__scroll, .form, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .hero, .footer { background: #fff !important; color: #000 !important; }
  [data-animate] { opacity: 1 !important; transform: none !important; }
  .faq__a { height: auto !important; }
}

/* ==========================================================================
   ===== BOOKING FLOW =====
   Everything below styles booking.html only. Tokens come from :root at the
   top of this file — nothing new is hard-coded.
   ========================================================================== */

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

/* The booking page has no hero, so the nav is solid from the first pixel. */
.nav--solid {
  background: rgba(10, 10, 10, 0.97);
  border-bottom-color: var(--c-rule-dark);
}

.bk-body {
  background: var(--c-off-white);
  color: var(--c-text-dark);
  /* Room for the fixed action bar so nothing hides underneath it. */
  padding-bottom: 96px;
}

.bk { padding-top: var(--nav-h); }

/* --------------------------------------------------------------------------
   Progress indicator
   -------------------------------------------------------------------------- */

.bk-progress-band {
  background: var(--c-black);
  color: var(--c-text-light);
  padding-block: var(--s-6) var(--s-7);
  border-bottom: var(--border-thin) solid var(--c-gold-faint);
}

.bk-steps { display: none; }

.bk-step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  position: relative;
  min-width: 0;
}

/* Connector rule between steps. */
.bk-step + .bk-step::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule-dark);
  margin-right: var(--s-3);
  transition: background-color 0.35s var(--ease);
}
.bk-step.is-done + .bk-step::before,
.bk-step.is-current + .bk-step::before { background: var(--c-gold-dim); }

.bk-step__dot {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: var(--border-thin) solid var(--c-rule-dark);
  background: transparent;
  color: var(--c-text-light-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}
.bk-step__check { display: none; }

.bk-step.is-current .bk-step__dot {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
  font-weight: 700;
}
.bk-step.is-done .bk-step__dot {
  background: transparent;
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.bk-step.is-done .bk-step__num { display: none; }
.bk-step.is-done .bk-step__check { display: block; }

.bk-step__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-light-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.bk-step.is-current .bk-step__label { color: var(--c-white); }
.bk-step.is-done .bk-step__label { color: var(--c-gold); }

/* Compact indicator — the only one shown under 700px. */
.bk-compact__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-light);
  margin-bottom: var(--s-3);
}
.bk-bar {
  height: 3px;
  background: var(--c-rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.bk-bar__fill {
  height: 100%;
  background: var(--c-gold);
  transition: width 0.4s var(--ease);
}

/* --------------------------------------------------------------------------
   Step panels
   -------------------------------------------------------------------------- */

.bk-panel { padding-block: var(--s-8); }
.bk-panel--flush { padding-block: 0; }
.bk-panel[hidden] { display: none; }

.bk-head { margin-bottom: var(--s-7); }
.bk-head--center { text-align: center; }
.bk-head__sub {
  margin-top: var(--s-4);
  color: var(--c-text-dark-2);
  max-width: 52ch;
}
.bk-head--center .bk-head__sub { margin-inline: auto; }

.bk-subhead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: var(--s-8) 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
}

.bk-note {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--border-thin) solid var(--c-rule-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Step 1 — vehicle cards
   -------------------------------------------------------------------------- */

.bk-vgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.bk-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 2px solid var(--c-rule-light);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.bk-vcard:hover {
  border-color: var(--c-gold-dim);
  transform: translateY(-3px);
}
.bk-vcard:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
.bk-vcard[aria-checked="true"] {
  border-color: var(--c-gold);
  box-shadow: 0 14px 34px -22px rgba(10, 10, 10, 0.5);
}

.bk-vcard__media { border: 0; border-bottom: var(--border-thin) solid var(--c-gold-faint); }

.bk-vcard__badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-black);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.bk-vcard[aria-checked="true"] .bk-vcard__badge { opacity: 1; transform: scale(1); }

.bk-vcard__body { padding: var(--s-5); }
.bk-vcard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  line-height: 1.25;
}
.bk-vcard__trim {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
  margin-top: var(--s-2);
}
.bk-vcard .chips { margin-top: var(--s-4); }
.bk-vcard .price-block { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Step 2 — dates and running total
   -------------------------------------------------------------------------- */

.bk-dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}
.bk-dates__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

/* Date/time inputs sit on light ground here, so invert the dark-form styling. */
.bk-body .field label { color: var(--c-text-dark-2); }
.bk-body .field input[type="text"],
.bk-body .field input[type="email"],
.bk-body .field input[type="tel"],
.bk-body .field input[type="date"],
.bk-body .field input[type="time"],
.bk-body .field select,
.bk-body .field textarea {
  background: var(--c-white);
  border-color: var(--c-rule-light);
  color: var(--c-text-dark);
}
.bk-body .field input:focus,
.bk-body .field select:focus,
.bk-body .field textarea:focus {
  border-color: var(--c-gold);
  background: var(--c-white);
}
.bk-body .field input[type="date"]::-webkit-calendar-picker-indicator,
.bk-body .field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.6;
}
.bk-body .field option { background: var(--c-white); color: var(--c-text-dark); }
.bk-body .field__error { color: var(--c-error); }
.bk-body .field.has-error input,
.bk-body .field.has-error select,
.bk-body .field.has-error .check__box { border-color: var(--c-error); }

.bk-body .field .check { color: var(--c-text-dark-2); }
.bk-body .field .check__box {
  background: var(--c-white);
  border-color: var(--c-rule-light);
}

.bk-total {
  background: var(--c-black);
  color: var(--c-text-light);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.bk-total__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold);
  margin-bottom: var(--s-5);
}
.bk-total__rows { margin: 0; }
.bk-total__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--border-thin) solid var(--c-rule-dark);
  font-size: 0.875rem;
}
.bk-total__row dt { color: var(--c-text-light-2); }
.bk-total__row dd { margin: 0; text-align: right; }

.bk-total__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--border-thin) solid var(--c-gold-faint);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-light-2);
}
.bk-total__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--c-gold);
  text-transform: none;
}
.bk-total__note {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  color: var(--c-gold);
}
.bk-total__fine {
  margin-top: var(--s-3);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-text-light-2);
}

/* --------------------------------------------------------------------------
   Step 3 — insurance
   -------------------------------------------------------------------------- */

.bk-ins-hero { padding-block: var(--s-8); }
.bk-ins-hero__sub {
  margin-top: var(--s-4);
  color: var(--c-text-light-2);
  max-width: 56ch;
  font-size: 1.0625rem;
}

.bk-ins-body {
  background: var(--c-off-white);
  padding-block: var(--s-8);
}

.bk-ins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

.bk-ins-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 2px solid var(--c-rule-light);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bk-ins-card.is-selected {
  border-color: var(--c-gold);
  box-shadow: 0 14px 34px -22px rgba(10, 10, 10, 0.5);
}

.bk-ins-card__num {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold-dim);
  margin-bottom: var(--s-3);
}
.bk-ins-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.bk-ins-card__text {
  margin-top: var(--s-3);
  font-size: 0.9375rem;
  color: var(--c-text-dark-2);
}
.bk-ins-card__list { margin-top: var(--s-5); }
.bk-ins-card__list li { font-size: 0.875rem; margin-bottom: var(--s-2); }

.bk-ins-card__btn { margin-top: auto; width: 100%; }
.bk-ins-card__list + .bk-ins-card__btn { margin-top: var(--s-6); }

.bk-ins-card__btn[aria-pressed="true"] {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-black);
  --btn-bd: var(--c-gold);
}

.bk-ins-card__foot {
  margin-top: var(--s-4);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-text-dark-2);
}

.bk-ins-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  position: relative;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--border-thin) solid var(--c-rule-light);
  font-size: 0.875rem;
  color: var(--c-text-dark);
  cursor: pointer;
}
.bk-ins-confirm input {
  position: absolute;
  top: var(--s-4);
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;   /* same double-toggle guard as .field .check input */
}
.bk-ins-confirm .check__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: var(--border-thin) solid var(--c-rule-light);
  border-radius: var(--radius);
  background: var(--c-white);
  display: grid;
  place-items: center;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.bk-ins-confirm .check__box::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s var(--ease);
}
.bk-ins-confirm input:checked + .check__box {
  background: var(--c-gold);
  border-color: var(--c-gold);
}
.bk-ins-confirm input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.bk-ins-confirm input:focus-visible + .check__box {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.bk-ins-error { text-align: center; margin-top: var(--s-5); }

.bk-trust {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding: var(--s-5);
  border-block: var(--border-thin) solid var(--c-gold-faint);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
  text-align: center;
}

.bk-helper {
  margin-top: var(--s-7);
  background: var(--c-light-panel);
  border: var(--border-thin) solid var(--c-rule-light);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.bk-helper__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}
.bk-helper p { color: var(--c-text-dark-2); font-size: 0.9375rem; }
.bk-helper__link {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-gold-dim);
  border-bottom: var(--border-thin) solid var(--c-gold-faint);
  padding-bottom: 2px;
}
.bk-helper__link:hover { color: var(--c-black); border-bottom-color: var(--c-black); }

/* --------------------------------------------------------------------------
   Step 4 — review
   -------------------------------------------------------------------------- */

.bk-review {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.bk-sum {
  background: var(--c-white);
  border: var(--border-thin) solid var(--c-rule-light);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.bk-sum__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
}
.bk-sum__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold-dim);
}

.bk-edit {
  background: none;
  border: 0;
  padding: var(--s-1) var(--s-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-text-dark-2);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.bk-edit:hover { color: var(--c-black); border-bottom-color: var(--c-gold); }

.bk-sum__vehicle {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.bk-sum__media {
  flex: none;
  width: 132px;
  aspect-ratio: 16 / 10;
}
.bk-sum__media .media-slot__label { font-size: 0.5rem; letter-spacing: 0.18em; }
.bk-sum__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.3;
}
.bk-sum__trim {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-dark-2);
}

.bk-sum__rows { margin: 0; }
.bk-sum__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
  font-size: 0.9375rem;
}
.bk-sum__row:last-child { border-bottom: 0; }
.bk-sum__row dt { color: var(--c-text-dark-2); }
.bk-sum__row dd { margin: 0; text-align: right; font-weight: 500; }
.bk-sum__row--strong dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
}

/* Review-step photo gallery. Static thumbnails - no lightbox by design. */
.bk-gallery {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--border-thin) solid var(--c-rule-light);
}
.bk-gallery[hidden] { display: none; }
.bk-gallery__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-gold-dim);
  margin-bottom: var(--s-4);
}
.bk-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.bk-gallery__item {
  position: relative;
  overflow: hidden;
  border: var(--border-thin) solid var(--c-rule-light);
  border-radius: var(--radius);
  background: var(--c-black-panel);
  aspect-ratio: 16 / 10;
}
.bk-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bk-sum__ins { font-size: 0.9375rem; font-weight: 500; }
.bk-sum__fine {
  margin-top: var(--s-3);
  font-size: 0.75rem;
  color: var(--c-text-dark-2);
}

.bk-rules {
  margin-top: var(--s-7);
  background: var(--c-light-panel);
  border: var(--border-thin) solid var(--c-rule-light);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.bk-rules__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: var(--border-thin) solid var(--c-rule-light);
}

/* --------------------------------------------------------------------------
   Step 5 — confirm and done
   -------------------------------------------------------------------------- */

.bk-confirm {
  background: var(--c-black);
  color: var(--c-text-light);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.bk-final { margin: 0; }
.bk-final__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--border-thin) solid var(--c-rule-dark);
  font-size: 0.875rem;
}
.bk-final__row:last-child { border-bottom: 0; }
.bk-final__row dt {
  color: var(--c-text-light-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-top: 3px;
}
.bk-final__row dd { margin: 0; text-align: right; }

.bk-confirm__note {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--border-thin) solid var(--c-gold-faint);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-text-light-2);
}

.bk-done {
  text-align: center;
  background: var(--c-black);
  color: var(--c-text-light);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  padding: var(--s-8) var(--s-5);
}
.bk-done p {
  margin: var(--s-4) auto var(--s-6);
  max-width: 46ch;
  color: var(--c-text-light-2);
}

/* --------------------------------------------------------------------------
   Fixed action bar
   -------------------------------------------------------------------------- */

.bk-actions {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: rgba(10, 10, 10, 0.97);
  border-top: var(--border-thin) solid var(--c-gold-faint);
}
.bk-actions[hidden] { display: none; }

.bk-actions__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: var(--s-4) var(--wrap-pad);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.bk-actions__inner .btn { flex: 1 1 0; }

.bk-actions__hint {
  display: none;
  flex: 2 1 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-light-2);
}
.bk-actions__hint:empty { display: none; }

/* aria-disabled, not [disabled] - the button must stay clickable so it can
   explain what is missing instead of silently swallowing the click. */
#bk-continue[aria-disabled="true"] {
  opacity: 0.45;
  transform: none;
}
#bk-back[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Booking flow — responsive
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .bk-vgrid { grid-template-columns: repeat(2, 1fr); }
  .bk-dates__fields { grid-template-columns: repeat(2, 1fr); }
  .bk-ins-grid { grid-template-columns: repeat(2, 1fr); }
  .bk-trust {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--s-6);
  }
  .bk-trust li { display: flex; align-items: center; gap: var(--s-6); }
  .bk-trust li + li::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    background: var(--c-gold);
    margin-left: calc(var(--s-6) * -0.5);
  }
}

@media (min-width: 700px) {
  .bk-steps { display: flex; align-items: center; gap: var(--s-3); }
  .bk-compact { display: none; }
  .bk-actions__hint { display: block; }
  .bk-actions__inner .btn { flex: 0 0 auto; min-width: 160px; }
}

@media (min-width: 900px) {
  .bk-vgrid { grid-template-columns: repeat(4, 1fr); }
  .bk-dates { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
  .bk-ins-grid { grid-template-columns: repeat(3, 1fr); }
  .bk-review { grid-template-columns: 1fr 1fr; }
  .bk-review > .bk-sum:first-child { grid-column: 1 / -1; }
  .bk-gallery__grid { grid-template-columns: repeat(5, 1fr); }
  /* :not() keeps the flush insurance panel edge-to-edge — a bare .bk-panel
     here would out-cascade .bk-panel--flush and reopen a gap above its band. */
  .bk-panel:not(.bk-panel--flush) { padding-block: var(--s-9); }
  .bk-ins-hero, .bk-ins-body { padding-block: var(--s-9); }
}

@media (max-width: 599px) {
  .bk-sum__vehicle { flex-direction: column; align-items: flex-start; }
  .bk-sum__media { width: 100%; }
  .bk-actions__inner .btn { padding-inline: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-vcard:hover { transform: none; }
  .bk-bar__fill { transition: none; }
}

/* ==========================================================================
   ===== FLEET PHOTO LIGHTBOX =====
   "View N photos" control on each fleet card, plus the shared modal.
   Tokens only — no new colours introduced.
   ========================================================================== */

/* --- The card control ------------------------------------------------- */

/* Injected by JS, so it only exists when it can actually work. */
.card__photos {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(10, 10, 10, 0.72);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.card__photos svg { flex: none; color: var(--c-gold); transition: color 0.25s var(--ease); }
.card__photos:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}
.card__photos:hover svg { color: var(--c-black); }

/* --- Dialog shell ------------------------------------------------------ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.lb[hidden] { display: none; }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
}

.lb__panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--c-black);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  padding: var(--s-5);
}

/* Locks the page behind the dialog. */
body.lb-open { overflow: hidden; }

/* --- Head -------------------------------------------------------------- */

.lb__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.lb__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-white);
  line-height: 1.25;
}
.lb__view {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-gold);
}

.lb__close {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  color: var(--c-text-light);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.lb__close:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}

/* --- Stage ------------------------------------------------------------- */

.lb__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black-panel);
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.lb__img {
  max-width: 100%;
  max-height: min(62vh, 620px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.72);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.lb__nav:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); }
.lb__nav--prev { left: var(--s-3); }
.lb__nav--next { right: var(--s-3); }

.lb__count {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  padding: 4px 9px;
  background: rgba(10, 10, 10, 0.72);
  border: var(--border-thin) solid var(--c-gold-faint);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}

/* --- Thumbnails -------------------------------------------------------- */

.lb__thumbs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.lb__thumb {
  flex: none;
  width: 92px;
  aspect-ratio: 16 / 10;
  padding: 0;
  background: var(--c-black-panel);
  border: var(--border-thin) solid var(--c-rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb:hover { opacity: 0.85; }
.lb__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--c-gold);
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 640px) {
  .lb { padding: var(--s-3); }
  .lb__panel { padding: var(--s-4); gap: var(--s-3); }
  .lb__img { max-height: 46vh; }
  .lb__nav { width: 40px; height: 40px; }
  .lb__nav--prev { left: var(--s-2); }
  .lb__nav--next { right: var(--s-2); }
  .lb__thumb { width: 70px; }
  .card__photos { font-size: 0.5rem; padding: 6px 9px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .card__photos, .lb__close, .lb__nav, .lb__thumb { transition: none; }
}