/* ============================================================
   APEX EXOTICS — bright luxury · white / electric-blue / chrome
   Type: Clash Display (display) + Satoshi (body)
   ============================================================ */

:root {
  --white: #ffffff;
  --paper: #f4f7fb;
  --mist:  #e9eef4;
  --ink:   #0a1a2f;
  --ink-soft: #51647c;
  --line:  #dde4ec;
  --navy:  #0d2348;  /* logo background — used for the top bar */
  --gold:  #c9a44c;  /* logo trim accent */
  --gold-deep: #9a7a2e;  /* readable gold for small text on white */
  --gold-grad: linear-gradient(100deg, #e7c97a 0%, #c9a44c 46%, #9a7a2e 112%);

  /* "blue" remapped to the logo navy so the whole UI matches the bar */
  --blue:        #0d2348;
  --blue-bright: #1c3e74;
  --blue-deep:   #081a38;
  --blue-wash:   #eaedf4;

  --silver-1: #f1f4f8;
  --silver-2: #cdd5df;
  --silver-3: #97a3b2;
  --chrome: linear-gradient(135deg,#ffffff 0%,#e3e9f0 22%,#b7c2cf 48%,#f4f7fb 68%,#c6cfdb 100%);

  --shadow-sm: 0 2px 10px rgba(10,26,47,.06);
  --shadow-md: 0 18px 40px -18px rgba(10,26,47,.22);
  --shadow-lg: 0 40px 90px -30px rgba(13,35,72,.34);

  --r: 18px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Satoshi", system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- custom Apex logo cursor ---------- */
/* the pointer becomes the Apex "A"; hotspot sits at the tip of the peak.
   The image is used at its natural size — CSS cannot scale a cursor — so
   this points at a 32px copy rather than the 54px original, which sat well
   above the ~32px every other pointer on the system uses. assets/cursor.png
   is the original if a bigger one is ever wanted back. */
*, *::before, *::after { cursor: url("assets/cursor-32.png") 11 7, auto !important; }
/* keep a normal text caret where people actually type */
input:where([type="text"],[type="email"],[type="tel"],[type="password"],[type="date"],[type="search"],[type="number"]),
textarea { cursor: text !important; }

/* grain */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.eyebrow {
  font-family: "Satoshi", sans-serif;
  font-weight: 700; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow--center { text-align: center; }
.section-title {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em;
}
.section-title em {
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head { max-width: 720px; margin: 0 auto clamp(2.4rem,5vw,4rem); text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: 1rem; }
.section-sub, .section-head .section-sub { color: var(--ink-soft); margin-top: 1rem; font-size: 1.05rem; }

/* ---------- buttons (reflective navy — applied to every .btn) ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: 1.02em 1.9em; border-radius: 10px; cursor: pointer; border: 0;
  white-space: nowrap; color: #fff;
  background: linear-gradient(180deg, #2a3c6f 0%, #1a2c5a 52%, #0d2348 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 2px rgba(0,0,0,.40),
    0 12px 26px -10px rgba(13,35,72,.65);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.btn:hover {
  background: linear-gradient(180deg, #32477f 0%, #1f3266 52%, #102a55 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 2px rgba(0,0,0,.40),
    0 20px 38px -12px rgba(13,35,72,.75);
}
/* trailing arrow stays solid + nudges on hover */
.btn > span[aria-hidden] { position: relative; z-index: 2; transition: transform .3s var(--ease); }
.btn:hover > span[aria-hidden] { transform: translateX(4px); }
/* metallic sheen swept across the label text */
.btn__label {
  position: relative; z-index: 2;
  background: linear-gradient(100deg,#ffffff 0%,#ffffff 38%,#cfe0ff 47%,#ffffff 56%,#ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: btn-sheen 3.5s linear infinite;
}
/* Secondary action. This class was on the hero's second button and the
   modal's quote button from the start but had no rule anywhere, so it
   inherited the solid treatment and the page showed two identical primary
   buttons with no hierarchy. The label sheen has to be undone too — it
   paints white text through background-clip, which is invisible without
   the navy fill behind it. */
.btn--ghost {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--silver-2);
  box-shadow: none;
}
.btn--ghost .btn__label {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: inherit; animation: none;
}
.btn--ghost:hover {
  background: rgba(13,35,72,.04);
  border-color: var(--blue);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn--ghost::after { display: none; }
/* on the dark reserve section and the modal, flip it to light-on-dark */
.reserve .btn--ghost, .modal__actions .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.32);
}
.reserve .btn--ghost:hover, .modal__actions .btn--ghost:hover {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.6);
}

/* glossy glare swiping across the whole button on hover */
.btn::after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 60%; height: 100%; transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  pointer-events: none;
}
.btn:hover::after { animation: btn-glare .85s var(--ease); }
.btn--block { width: 100%; }
@keyframes btn-sheen { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes btn-glare { 0% { transform: translateX(-180%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark {
  width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__type {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.18rem;
  letter-spacing: .02em; line-height: 1;
}
.brand__type span { font-weight: 400; color: var(--ink-soft); }
.brand--light .brand__type, .brand--light .brand__type span { color: #fff; }
.brand--light .brand__type span { color: rgba(255,255,255,.55); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1.2rem, 4vw, 3rem);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08); transition: box-shadow .3s, padding .3s;
}
.nav.scrolled { box-shadow: 0 14px 34px -16px rgba(0,0,0,.6); padding-top: .7rem; padding-bottom: .7rem; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a { font-weight: 500; font-size: .98rem; color: rgba(255,255,255,.82); position: relative; padding: .2rem 0; transition: color .25s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { width: 100%; }
.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: rgba(255,255,255,.92); transition: .3s; border-radius: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(7rem,14vw,10rem) clamp(1.2rem,4vw,3rem) 0; overflow: hidden; }
.hero__glow {
  position: absolute; top: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(201,164,76,.18), rgba(201,164,76,0) 62%);
  filter: blur(10px); pointer-events: none;
}
.hero__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items: center;
}
.hero__copy .eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 6rem); line-height: .95; letter-spacing: -.03em;
}
.hero__title span { display: block; }
.hero__title-accent {
  background: linear-gradient(100deg, #e7c97a 0%, var(--gold) 48%, var(--gold-deep) 112%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { max-width: 30rem; margin: 1.8rem 0 2.2rem; color: var(--ink-soft); font-size: 1.12rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__stats { display: flex; gap: clamp(1.4rem,3vw,2.6rem); margin-top: 3rem; }
.hero__stats dt {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: clamp(1.8rem,3vw,2.4rem);
  line-height: 1; color: var(--ink);
}
.hero__stats dd { font-size: .82rem; color: var(--ink-soft); margin-top: .35rem; letter-spacing: .01em; }

.hero__stage { position: relative; aspect-ratio: 4/3.4; }
.hero__platform {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0;
  width: 92%; height: 38%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(201,164,76,.22), rgba(201,164,76,0) 70%);
  filter: blur(6px);
}
.hero__car {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover;
  border-radius: 22px; box-shadow: var(--shadow-lg);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero__tag {
  position: absolute; z-index: 3; background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px; padding: .55rem 1.1rem;
  font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-md);
}
.hero__tag--1 { top: 8%; left: -4%; color: var(--blue); }
.hero__tag--2 { bottom: 14%; right: -2%; color: var(--blue); }

/* marquee */
.marquee { margin-top: clamp(3rem,6vw,5rem); border-block: 1px solid var(--line); overflow: hidden; padding: 1.1rem 0; }
.marquee__track { display: flex; gap: 2.2rem; width: max-content; animation: scroll 32s linear infinite; }
.marquee__track span {
  font-family: "Clash Display", sans-serif; font-weight: 500; font-size: 1.5rem; color: var(--silver-3);
  letter-spacing: .01em; text-transform: uppercase;
}
.marquee__track span:nth-child(odd) { color: var(--ink); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- fleet ---------- */
.fleet { padding: clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,4vw,3rem); max-width: var(--maxw); margin: 0 auto; }
.fleet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--silver-2); }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--chrome); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2; background: var(--gold); color: var(--navy);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 100px; box-shadow: 0 6px 16px -6px rgba(13,35,72,.55);
}

/* favorite heart (Turo-style) */
.card__fav {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(10,26,47,.55); cursor: pointer; transition: transform .2s var(--ease), background .2s;
}
.card__fav:hover { transform: scale(1.08); background: #fff; }
.card__fav svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--ink); stroke-width: 1.7; transition: fill .2s, stroke .2s; }
.card__fav[aria-pressed="true"] svg { fill: #e8556d; stroke: #e8556d; }

.card__body { padding: 1.15rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.card__title { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.16rem; letter-spacing: -.01em; line-height: 1.15; }
.card__year { font-size: .92rem; color: var(--ink-soft); font-weight: 500; flex: none; }

.card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; font-size: .86rem; }
.card__rating { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); }
.card__rating svg { width: .92rem; height: .92rem; fill: var(--gold); }
.card__rating strong { font-weight: 700; }
.card__trips { color: var(--ink-soft); font-weight: 500; }
.card__verified {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; color: var(--gold-deep); background: rgba(201,164,76,.12);
  padding: .22rem .55rem; border-radius: 100px;
}
.card__verified::before { content: "✦"; font-size: .8em; }

.card__loc { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); }
.card__loc svg { width: .95rem; height: .95rem; flex: none; color: var(--silver-3); }

.card__footer { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.card__price { font-family: "Clash Display", sans-serif; color: var(--blue); white-space: nowrap; }
.card__price strong { font-weight: 600; font-size: 1.3rem; }
.card__price small { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }

/* inline availability pill */
.card__avail { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #1a8f3c; }
.card__avail-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #1a8f3c; box-shadow: 0 0 0 3px rgba(26,143,60,.18); flex: none; }
.card__avail--busy { color: #c62d3e; }
.card__avail--busy .card__avail-dot { background: #c62d3e; box-shadow: 0 0 0 3px rgba(198,45,62,.18); }

.card--cta { display: grid; place-items: center; background: linear-gradient(160deg, var(--blue-wash), var(--white)); border-style: dashed; }
.card__body--center { text-align: center; padding: 2rem; }
.card__body--center h3 { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.4rem; margin-bottom: .6rem; }
.card__body--center p { color: var(--ink-soft); margin-bottom: 1.4rem; font-size: .96rem; }

/* clickable cards */
.card[data-car] { cursor: pointer; }
.card[data-car]:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.card[data-car]:hover .card__cta span { transform: translateX(4px); }

/* filtered out / booked */
.card.is-hidden { display: none; }
.card.is-unavailable { opacity: .6; filter: grayscale(.4); }
.card.is-unavailable .card__media::after {
  content: "Booked"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10,26,47,.42); color: #fff; font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: 1.4rem; letter-spacing: .04em; z-index: 1;
}

/* availability + attribute filter */
.fleet__filter {
  display: grid; grid-template-columns: repeat(5, 1fr) auto; align-items: end; gap: 1rem 1.1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.4rem; margin-bottom: 2.4rem;
}
.fleet__filter-field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.fleet__filter-field label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.fleet__filter input[type=date], .fleet__filter select {
  width: 100%; padding: .72rem .85rem; border-radius: 11px; border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: .92rem; color: var(--ink); transition: .25s;
}
.fleet__filter select { cursor: pointer; }
.fleet__filter input[type=date]:focus, .fleet__filter select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash); }
.fleet__filter input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.fleet__filter select option { color: var(--ink); }
.fleet__filter-actions { display: flex; align-items: center; gap: .25rem; }
.fleet__filter .btn { padding-block: .82rem; white-space: nowrap; }
.fleet__filter-clear { border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 600; color: var(--ink-soft); padding: .82rem .5rem; white-space: nowrap; }
.fleet__filter-clear:hover { color: var(--blue); }
.fleet__filter-status { grid-column: 1 / -1; margin: 0; font-size: .92rem; font-weight: 600; }
.fleet__filter-status:empty { display: none; }
.fleet__filter-status.is-ok { color: var(--blue); }
.fleet__filter-status.is-warn { color: #d63a4b; }

/* ---------- car detail modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(10,26,47,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__dialog {
  position: relative; z-index: 2; width: min(880px, 100%); max-height: 92vh; overflow: hidden;
  background: var(--white); border-radius: 24px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 4; width: 40px; height: 40px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: .25s;
}
.modal__close:hover { background: #fff; transform: rotate(90deg); color: var(--blue); }
/* gallery */
.modal__gallery { position: relative; background: var(--chrome); display: flex; flex-direction: column; }
.modal__gallery-main { position: relative; flex: 1; min-height: 0; background: linear-gradient(180deg, #16264f 0%, #0d2348 100%); }
.modal__gallery-main img { width: 100%; height: 100%; object-fit: contain; object-position: center; min-height: 320px; }
.modal__badge { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--navy); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 100px; z-index: 2; }
.modal__thumbs { display: flex; gap: .5rem; padding: .6rem; background: rgba(255,255,255,.6); }
.modal__thumb { flex: 1; height: 56px; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0; background: none; transition: border-color .2s, transform .2s; }
.modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal__thumb:hover { transform: translateY(-2px); }
.modal__thumb.is-active { border-color: var(--gold); }

.modal__body { padding: clamp(1.5rem,3vw,2.2rem); overflow-y: auto; max-height: 92vh; }
.modal__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .5rem; }
.modal__body h3 { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.8rem; letter-spacing: -.01em; line-height: 1.05; }
.modal__pricebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; }
.modal__price { display: flex; align-items: baseline; gap: .3rem; }
.modal__from { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.modal__price strong { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.6rem; color: var(--blue); }
.modal__price small { font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.modal__avail-pill { font-size: .76rem; font-weight: 700; padding: .4rem .9rem; border-radius: 100px; background: var(--paper); white-space: nowrap; }
.modal__avail-pill.is-free { color: #1a8f3c; background: #eafaf0; }
.modal__avail-pill.is-busy { color: #d63a4b; background: #fdeef0; }
.modal__desc { color: var(--ink-soft); margin: 1rem 0 .5rem; font-size: 1rem; }
.modal__h4 { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 1.5rem 0 .8rem; }
.modal__specs, .modal__terms, .modal__discounts { list-style: none; display: grid; gap: .55rem; }
.modal__specs { grid-template-columns: repeat(3, 1fr); gap: 1rem .8rem; }
.modal__specs strong { display: block; font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.2rem; }
.modal__specs span { font-size: .76rem; color: var(--ink-soft); }
.modal__terms li, .modal__discounts li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.modal__terms strong, .modal__discounts strong { font-weight: 600; text-align: right; }
.modal__terms span, .modal__discounts span { color: var(--ink-soft); }
.modal__discounts strong { color: var(--gold-deep); }

/* trip + estimate */
.modal__trip { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.modal__trip-field { display: flex; flex-direction: column; gap: .35rem; }
.modal__trip-field label { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.modal__trip-field input { padding: .75rem .85rem; border-radius: 11px; border: 1px solid var(--line); background: var(--paper); font-family: inherit; font-size: .95rem; color: var(--ink); transition: .2s; }
.modal__trip-field input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px var(--blue-wash); }
.modal__estimate { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.modal__est-row { display: flex; justify-content: space-between; font-size: .92rem; color: var(--ink-soft); margin-bottom: .4rem; }
.modal__est-row.is-disc { color: #1a8f3c; font-weight: 600; }
.modal__est-total { display: flex; justify-content: space-between; padding-top: .6rem; border-top: 1px solid var(--line); font-weight: 700; }
.modal__est-total span:last-child { font-family: "Clash Display", sans-serif; color: var(--gold-deep); font-size: 1.15rem; }
.modal__avail { margin: 1rem 0 1.4rem; }
.modal__avail-line { font-size: .92rem; font-weight: 600; padding: .9rem 1.1rem; border-radius: 12px; background: var(--paper); }
.modal__avail-line.is-free { color: #1a7d38; background: #eafaf0; }
.modal__avail-line.is-busy { color: #c32d3e; background: #fdeef0; }
.modal__actions { display: grid; gap: .7rem; }
.modal__fineprint { font-size: .76rem; color: var(--silver-3); margin-top: 1rem; text-align: center; }

@media (max-width: 720px) {
  .modal__dialog { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .modal__gallery-main img { min-height: 220px; max-height: 280px; }
  .modal__body { max-height: none; }
  .modal__specs { grid-template-columns: repeat(3, 1fr); }
  .fleet__filter-arrow { display: none; }
}

/* ---------- experience ---------- */
.experience { padding: clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,4vw,3rem); background: var(--paper); border-block: 1px solid var(--line); }
.steps { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.step {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 2.4rem 2rem 2.2rem; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step__num {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 3.4rem; line-height: 1;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 1.2rem;
}
.step h3 { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.35rem; margin-bottom: .6rem; }
.step p { color: var(--ink-soft); font-size: .98rem; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.step:hover::before { transform: scaleX(1); }

/* ---------- about ---------- */
.about {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,4vw,3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center;
}
.about__media { aspect-ratio: 4/4.4; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); background: var(--chrome); position: relative; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media--fallback::after {
  content: "APEX"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 4rem; letter-spacing: .1em; color: var(--silver-3);
}
.about__copy .eyebrow { margin-bottom: 1rem; }
.about__copy .section-title { margin-bottom: 1.4rem; }
.about__copy p { color: var(--ink-soft); margin-bottom: 1.1rem; font-size: 1.05rem; }
.about__list { list-style: none; margin-top: 1.6rem; display: grid; gap: .8rem; }
.about__list li { position: relative; padding-left: 1.8rem; font-weight: 500; }
.about__list li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 11px; height: 11px; border-radius: 3px;
  background: var(--blue); box-shadow: 0 0 0 4px var(--blue-wash);
}

/* ---------- reserve ---------- */
.reserve { position: relative; background: var(--ink); color: #fff; overflow: hidden; padding: clamp(4.5rem,9vw,7rem) clamp(1.2rem,4vw,3rem); }
.reserve__glow {
  position: absolute; top: -20%; left: -10%; width: 55vw; height: 55vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(201,164,76,.32), rgba(201,164,76,0) 65%); filter: blur(20px);
}
.reserve__inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items: center;
}
.reserve .eyebrow { color: #fff; margin-bottom: 1rem; display: block; }
.reserve__intro .section-title em { filter: none; }
.reserve__sub { color: rgba(255,255,255,.65); margin: 1.4rem 0 2rem; font-size: 1.08rem; max-width: 26rem; }
.reserve__contacts { display: flex; flex-direction: column; gap: 1rem; }
.reserve__contact {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 1rem 1.3rem; transition: background .3s, border-color .3s, transform .3s;
}
.reserve__contact-icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold);
  background: rgba(201,164,76,.14); border: 1px solid rgba(201,164,76,.32);
}
.reserve__contact-icon svg { width: 20px; height: 20px; }
.reserve__contact-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.reserve__contact-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.reserve__contact-value { font-weight: 700; color: #fff; font-size: 1.02rem; word-break: break-word; }
.reserve__contact:hover { background: rgba(201,164,76,.10); border-color: rgba(201,164,76,.45); transform: translateY(-2px); }

.form {
  display: flex; flex-direction: column; gap: 1.15rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
  padding: clamp(1.6rem,3vw,2.4rem); backdrop-filter: blur(10px);
}
/* every field stacks straight down — single column */
.form__row { display: flex; flex-direction: column; gap: 1.15rem; }
.form label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.form input, .form select, .form textarea {
  width: 100%; margin-top: .55rem; padding: 1rem 1.2rem; border-radius: 4px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-family: inherit; font-size: .98rem; transition: border-color .25s, background .25s, box-shadow .25s;
}
.form textarea { border-radius: 4px; min-height: 130px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.4); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(201,164,76,.10); box-shadow: 0 0 0 4px rgba(201,164,76,.15);
}
.form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); cursor: pointer; }
.form select option { color: var(--ink); }
.form .btn { margin-top: .4rem; }
.form__note { font-size: .76rem; color: rgba(255,255,255,.45); text-align: center; }

/* reservation form feedback */
.form__status { font-size: .84rem; line-height: 1.5; text-align: center; margin: .1rem 0 0; min-height: 0; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #7ee2a8; }
.form__status.is-warn { color: #ffb26b; }

/* fleet loading / empty / error line */
.fleet__state { max-width: var(--maxw); margin: 0 auto; padding: 1.4rem clamp(1.2rem,4vw,3rem); text-align: center; font-size: .92rem; color: rgba(255,255,255,.55); }
.fleet__state.is-warn { color: #ffb26b; }
/* a vehicle saved without a photo still needs a card-shaped block */
.card__media-empty { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }

/* ---------- location ---------- */
.locale { max-width: var(--maxw); margin: 0 auto; padding: clamp(4.5rem,9vw,7rem) clamp(1.2rem,4vw,3rem) clamp(2rem,4vw,3rem); }
.locale__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.6rem; align-items: stretch; }
.locale__map {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md);
  min-height: 380px; background: var(--silver-1);
}
.locale__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; filter: grayscale(.2) contrast(1.02); }
.locale__info {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.6rem,3vw,2.2rem); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.locale__name { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.6rem; }
.locale__addr { color: var(--ink-soft); margin: .6rem 0 1rem; font-size: 1.02rem; }
.locale__open { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #1a8f3c; font-size: .95rem; margin-bottom: 1.3rem; }
.locale__dot { width: 9px; height: 9px; border-radius: 50%; background: #21a945; box-shadow: 0 0 0 4px rgba(33,169,69,.18); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(33,169,69,.18); } 50% { box-shadow: 0 0 0 7px rgba(33,169,69,.05); } }
.locale__hours { display: grid; gap: .55rem; padding: 1.3rem 0; margin-bottom: 1.4rem; border-block: 1px solid var(--line); }
.locale__hours div { display: flex; justify-content: space-between; gap: 1rem; }
.locale__hours dt { font-weight: 600; }
.locale__hours dd { color: var(--ink-soft); }
.locale__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: auto; }

/* ---------- google reviews ---------- */
.reviews { max-width: var(--maxw); margin: 0 auto; padding: clamp(1rem,3vw,2rem) clamp(1.2rem,4vw,3rem) clamp(4.5rem,9vw,7rem); }
.reviews__head {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.8rem; margin-bottom: 1.6rem;
}
.reviews__g { display: grid; place-items: center; width: 56px; height: 56px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.reviews__summary { flex: 1; min-width: 12rem; }
.reviews__rating { display: flex; align-items: center; gap: .6rem; }
.reviews__rating strong { font-family: "Clash Display", sans-serif; font-size: 1.9rem; line-height: 1; }
.reviews__summary p { color: var(--ink-soft); font-size: .92rem; margin-top: .2rem; }
.reviews__summary p strong { color: var(--ink); }
.stars { color: #fbbc04; letter-spacing: .08em; font-size: 1rem; }
.reviews__all { margin-left: auto; }

.reviews__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.review {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.review__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.1rem;
}
.review__top strong { display: block; font-size: .98rem; }
.review__top .stars { font-size: .88rem; }
.review p { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }
.review__date { display: block; margin-top: 1rem; font-size: .8rem; color: var(--silver-3); font-weight: 500; }

@media (max-width: 900px) {
  .locale__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__all { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding: clamp(2.5rem,5vw,3.5rem) clamp(1.2rem,4vw,3rem) 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.footer__top {
  max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
/* five links stopped fitting on a phone once Requirements was added, and
   nowrap pushed the last one off-screen, which scrolled the whole page
   sideways */
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.8rem; }
.footer__links a { color: rgba(255,255,255,.7); font-weight: 500; transition: color .25s; }
.footer__links a:hover { color: #fff; }
.footer__bottom {
  max-width: var(--maxw); margin: 1.6rem auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: .85rem; color: rgba(255,255,255,.5);
}
.footer__credit { font-style: italic; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.in-view { opacity: 1 !important; transform: none !important; }
[data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim].in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
  .reserve__inner, .about { grid-template-columns: 1fr; }
  .fleet__grid, .steps { grid-template-columns: repeat(2,1fr); }
  .fleet__filter { grid-template-columns: repeat(3, 1fr); }
  .fleet__filter-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .fleet__filter-actions .btn { flex: 1; }
}
@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); padding: 1.5rem clamp(1.2rem,4vw,3rem);
    gap: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
  }
  .fleet__grid, .steps { grid-template-columns: 1fr; }
  .fleet__filter { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero__stats { flex-wrap: wrap; gap: 1.4rem 2rem; }
  .hero__tag--1 { left: 2%; }
  .hero__tag--2 { right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, [data-anim] { opacity: 1; transform: none; }
}

/* ---------- included / trust ---------- */
.included {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.2rem, 4vw, 3rem);
}
.included__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
/* These six are guarantees, not gallery. They used to sit on car photos
   blurred to mush — the pictures were unreadable, three of them were the
   same non-exotic cars recycled from elsewhere on the page, and they cost
   ~2.5MB to render at 10% visibility. The icons were in the markup all
   along, hidden by CSS; they do the job the photos were failing at.

   Height follows content rather than a forced 4/5 box, so no card carries
   a dead grey half. */
.included__item {
  position: relative; overflow: hidden; border-radius: var(--r); isolation: isolate;
  background: linear-gradient(168deg, #12294f 0%, var(--ink) 62%);
  border: 1px solid rgba(255,255,255,.09);
  padding: 2rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: 0 20px 44px -26px rgba(10,26,47,.55);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.included__item:hover {
  transform: translateY(-5px); border-color: rgba(201,164,76,.34);
  box-shadow: 0 34px 70px -30px rgba(13,35,72,.6);
}
/* gold reveal line on hover — the site's established hover language */
.included__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.included__item:hover::before { transform: scaleX(1); }

.included__icon {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 13px;
  color: var(--gold); background: rgba(201,164,76,.11);
  border: 1px solid rgba(201,164,76,.28);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.included__item:hover .included__icon { background: rgba(201,164,76,.18); transform: translateY(-2px); }
.included__icon svg { width: 1.45rem; height: 1.45rem; }

.included__text { display: flex; flex-direction: column; }
/* the tag carries the section's whole claim, so it reads as a checked-off
   promise rather than a decorative label */
.included__tag {
  display: inline-flex; align-items: center; gap: .34rem; align-self: flex-start;
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); background: rgba(201,164,76,.12);
  border-radius: 100px; padding: .24rem .6rem .24rem .5rem; margin-bottom: .75rem;
}
.included__tag::before { content: "✓"; font-size: .8em; letter-spacing: 0; }
.included__item h3 {
  font-family: "Clash Display", sans-serif; font-weight: 600; color: #fff;
  font-size: 1.22rem; letter-spacing: -.01em; margin-bottom: .5rem;
}
.included__item p { color: rgba(255,255,255,.7); font-size: .93rem; line-height: 1.6; }

@media (max-width: 980px) {
  .included__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .included__grid { grid-template-columns: 1fr; }
  .included__item { aspect-ratio: 4 / 3.4; min-height: 280px; }
}

/* ---------- chrome price text w/ animated gloss ---------- */
/* TWO layers clipped to the text:
   1) a moving white gloss band (top)  — the animated shine
   2) a STATIC metallic chrome fill (bottom) — always visible, never washes out */
.card__price,
.card__price small,
.modal__price strong {
  background-image:
    linear-gradient(110deg, transparent 12%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.28) 62%, transparent 88%),
    linear-gradient(180deg, #b6c0cd 0%, #93a1b1 45%, #8694a6 60%, #6f7e91 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(13,35,72,.25));
  animation: money-gloss 3s linear infinite;
}
/* only the gloss layer (1st background) moves; the chrome base stays put */
@keyframes money-gloss {
  0%   { background-position: 150% 0, 0 0; }
  100% { background-position: -150% 0, 0 0; }
}

/* ============================================================
   BOOKING FLOW + MULTI-PHOTO GALLERIES
   ============================================================ */

/* Author rules like `.fleet__filter { display: grid }` outrank the UA's
   `[hidden] { display: none }`, so several elements the scripts hide were
   still on screen. One rule settles it for the whole sheet. */
[hidden] { display: none !important; }

/* the loading / empty / error line sits on the white fleet section,
   so white-on-white made it invisible */
.fleet__state { color: var(--ink-soft); }

/* ---------- "pick a car, then tell us about you" steps ---------- */
.booksteps {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: .5rem .45rem; margin-top: 1.7rem;
}
.booksteps__item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px;
  padding: .42rem .95rem .42rem .45rem;
  transition: color .3s, background .3s, border-color .3s;
}
.booksteps__n {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; background: var(--silver-2); color: var(--white);
  transition: background .3s, color .3s;
}
.booksteps__item.is-now { color: var(--ink); background: rgba(201,164,76,.10); border-color: rgba(201,164,76,.5); }
.booksteps__item.is-now .booksteps__n { background: var(--gold-grad); color: var(--navy); }
.booksteps__item.is-done .booksteps__n { background: #1a8f3c; }
.booksteps.is-nudge .booksteps__item.is-now { animation: bookpulse 1.1s var(--ease) 2; }
@keyframes bookpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,164,76,0); }
  45%      { box-shadow: 0 0 0 8px rgba(201,164,76,.22); }
}

/* ---------- card photo carousel ---------- */
.card__shots { position: absolute; inset: 0; }
.card__shots img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s var(--ease), transform .7s var(--ease);
}
.card__shots img.is-active { opacity: 1; }
.card:hover .card__shots img.is-active { transform: scale(1.06); }

.card__shot-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.88); color: var(--ink); display: grid; place-items: center;
  cursor: pointer; opacity: 0;
  box-shadow: 0 6px 16px -8px rgba(10,26,47,.6);
  transition: opacity .25s, background .2s, transform .2s;
}
.card__shot-nav svg { width: 1.05rem; height: 1.05rem; }
.card__shot-nav--prev { left: .6rem; }
.card__shot-nav--next { right: .6rem; }
.card:hover .card__shot-nav, .card:focus-within .card__shot-nav { opacity: 1; }
.card__shot-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.card__shot-nav:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
/* no hover on touch, so the arrows have to stand permanently */
@media (hover: none) { .card__shot-nav { opacity: 1; } }

.card__dots {
  position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 3;
  display: flex; justify-content: center; gap: .32rem; pointer-events: none;
  padding: 0 5rem; /* stay clear of the photo-count badge */
}
.card__dots span {
  width: .4rem; height: .4rem; border-radius: 100px; background: rgba(255,255,255,.55);
  box-shadow: 0 1px 3px rgba(10,26,47,.5); transition: background .25s, width .25s;
}
.card__dots span.is-active { background: #fff; width: 1.15rem; }
.card__count {
  position: absolute; right: .8rem; bottom: .62rem; z-index: 3;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: rgba(10,26,47,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .24rem .55rem; border-radius: 100px;
}

/* ---------- modal gallery: arrows + counter ---------- */
.modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.9); color: var(--ink); display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 8px 22px -10px rgba(10,26,47,.75);
  transition: background .2s, transform .2s;
}
.modal__nav svg { width: 1.25rem; height: 1.25rem; }
.modal__nav--prev { left: .9rem; }
.modal__nav--next { right: .9rem; }
.modal__nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.modal__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.modal__counter {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #fff;
  background: rgba(10,26,47,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .3rem .75rem; border-radius: 100px;
}

/* ---------- step 1: the chosen car, above the reserve form ---------- */
.form__fields { display: flex; flex-direction: column; gap: 1.15rem; }

.pick__step {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.pick__step--fields { margin-top: .3rem; }

.pick__empty { text-align: center; padding: .4rem .2rem .2rem; }
.pick__title {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.5rem;
  color: #fff; margin: .55rem 0 .5rem; letter-spacing: -.01em;
}
.pick__sub { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 30rem; margin: 0 auto 1.5rem; }
.pick__actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.pick__skip, .pick__change {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: rgba(255,255,255,.55); text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.pick__skip { font-size: .85rem; }
.pick__change { font-size: .78rem; }
.pick__skip:hover, .pick__change:hover { color: var(--gold); }

.pick__car {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(201,164,76,.10); border: 1px solid rgba(201,164,76,.38);
  border-radius: 16px; padding: .85rem 1rem;
}
.pick__thumb { flex: none; width: 88px; height: 62px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); }
.pick__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick__info { display: flex; flex-direction: column; gap: .18rem; flex: 1; min-width: 0; }
.pick__name {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.06rem;
  color: #fff; line-height: 1.2;
}
.pick__dates { font-size: .82rem; color: rgba(255,255,255,.6); }
.pick__side { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: none; text-align: right; }
.pick__total { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--gold); white-space: nowrap; }
.pick__total:empty { display: none; }

/* step 2 stays out of sight until there's a car to attach it to */
.form.is-locked .form__fields { display: none; }

@media (max-width: 520px) {
  .pick__car { flex-wrap: wrap; }
  .pick__side { align-items: flex-start; text-align: left; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   REQUIREMENTS PAGE
   ============================================================ */
.reqs { padding-top: 5.5rem; }
.reqs__head {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: clamp(3rem,7vw,5rem) clamp(1.2rem,4vw,3rem) clamp(2rem,4vw,3rem);
}
.reqs__head .section-title { margin-top: 1rem; }

.reqs__grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(1.2rem,4vw,3rem) clamp(3rem,6vw,4.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.reqcard {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 2rem 1.7rem 1.8rem;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.reqcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--silver-2); }
.reqcard__num {
  display: inline-block; font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .1em; color: var(--gold-deep);
  background: rgba(201,164,76,.12); padding: .3rem .7rem; border-radius: 100px; margin-bottom: 1.1rem;
}
.reqcard h2 {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.01em; margin-bottom: .6rem;
}
.reqcard p { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; }
.reqcard em { color: var(--ink); font-style: normal; font-weight: 700; }

/* the practical terms, on the dark band */
.reqs__band { background: var(--ink); color: #fff; padding: clamp(3.5rem,7vw,5.5rem) clamp(1.2rem,4vw,3rem); }
.reqs__band-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 2.6rem;
}
.reqs__band-item h3 {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 1.08rem;
  color: var(--gold); margin-bottom: .55rem;
}
.reqs__band-item p { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.65; }

.reqs__cta {
  max-width: 720px; margin: 0 auto; text-align: center;
  padding: clamp(3.5rem,7vw,5.5rem) clamp(1.2rem,4vw,3rem);
}
.reqs__cta .section-title { margin: 1rem 0 1.2rem; }
.reqs__cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.reqs__note {
  margin-top: 2.4rem; font-size: .84rem; line-height: 1.6; color: var(--silver-3);
  max-width: 34rem; margin-inline: auto;
}

@media (max-width: 980px) {
  .reqs__grid, .reqs__band-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reqs__grid, .reqs__band-inner { grid-template-columns: 1fr; }
}