/* Monarch Rentals - public site. Locked dark theme, platinum on near-black, radius 0 everywhere. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/CormorantGaramond-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/CormorantGaramond-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/CormorantGaramond-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Manrope-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Manrope-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Manrope-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Manrope-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --bg-2: #101013;
  --bg-3: #161619;
  --bg-4: #1d1d22;
  --line: rgba(236, 235, 230, 0.12);
  --line-strong: rgba(236, 235, 230, 0.28);
  --text: #ecebe6;
  --text-2: #b9b8b2;
  --muted: #8b8b91;
  --platinum: #d8d6cf;
  --white: #f8f7f3;
  --danger: #d98b83;
  --success: #a9c9a0;
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Manrope', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --accent: #c9b37e;
  --accent-soft: rgba(201, 179, 126, 0.35);
  --container: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5rem, 10vw, 9rem);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
/* Any author `display` beats the UA sheet's [hidden] rule, so JS-toggled elements need this to actually hide. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.05; margin: 0 0 1rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h4 { font-size: 1.35rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.prose ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1.25rem; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--platinum); outline-offset: 3px; }
::selection { background: var(--platinum); color: var(--bg); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--platinum); color: var(--bg); padding: 0.75rem 1rem; font-weight: 600; }
.skip-link:focus { top: 1rem; }
.sentinel { position: absolute; top: 0; left: 0; height: 120px; width: 1px; pointer-events: none; }

.icon { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.2em; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 1.75rem;
  font: 600 0.78rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--platinum); color: var(--platinum); background: transparent;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.2s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover { background: var(--platinum); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--platinum); color: var(--bg); }
.btn--solid:hover { background: var(--white); border-color: var(--white); }
.btn--outline { border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--platinum); background: transparent; color: var(--white); }
.btn--ghost { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--text); }
.btn--ghost:hover { background: transparent; color: var(--white); }
.btn--ghost .icon { transition: transform 0.35s var(--ease); }
.btn--ghost:hover .icon { transform: translateX(4px); }
.btn--lg { min-height: 3.75rem; padding: 0 2.25rem; }
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: var(--bg); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.link { color: var(--platinum); border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s; }
.link:hover { border-color: var(--platinum); }
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.78rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--platinum); }
.arrow-link .icon { transition: transform 0.35s var(--ease); }
.arrow-link:hover .icon { transform: translate(3px, -3px); }

/* ---------- Header ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h);
  background: rgba(11, 11, 13, 0.86); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
/* Home page: the header stays off-screen while the banner is on screen (see .hero-bar) */
body.is-home:not(.nav-solid) .nav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; gap: 2rem; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.8rem; justify-self: start; }
/* The supplied logo is the crest stacked over the wordmark, so it is sized by height and carries the brand
   name itself; the separate crest image and text wordmark it replaced are gone. */
.nav__logo { height: 46px; width: auto; display: block; }
.nav__crest { width: 36px; height: 29px; object-fit: contain; }
.nav__wordmark { font: 500 0.95rem/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); }
.nav__links ul { display: flex; gap: 2.5rem; }
.nav__links ul a { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); padding: 0.5rem 0; position: relative; transition: color 0.3s; }
.nav__links ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--platinum); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav__links ul a:hover, .nav__links ul a[aria-current="page"] { color: var(--white); }
.nav__links ul a[aria-current="page"]::after, .nav__links ul a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 1.5rem; justify-self: end; }
.nav__phone { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.8rem/1 var(--sans); letter-spacing: 0.06em; color: var(--text-2); transition: color 0.3s; }
.nav__phone:hover { color: var(--white); }
.nav__cta { min-height: 2.6rem; padding: 0 1.4rem; font-size: 0.7rem; }
.nav .nav__menu { display: none; }

/* Menu toggle: two lines + label, used in the header and over the banner */
.menu-toggle { display: inline-flex; align-items: center; gap: 0.75rem; height: 44px; padding: 0 0.25rem; color: var(--white); }
.menu-toggle__lines { display: grid; gap: 5px; width: 26px; }
.menu-toggle__lines i { display: block; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.menu-toggle__lines i:last-child { width: 70%; justify-self: end; }
.menu-toggle:hover .menu-toggle__lines i:last-child { width: 100%; }
.menu-toggle__label { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }

/* Floating bar over the home banner: wordmark + Menu, nothing else */
/* The bar grows around the large hero-state logo, then collapses once the glass bar takes over. */
.hero-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 39; display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); padding: clamp(0.85rem, 2vw, 1.5rem) var(--gutter); transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), padding 0.5s var(--ease), min-height 0.5s var(--ease); }
.hero-bar__brand { font: 500 0.95rem/1 var(--serif); letter-spacing: 0.34em; text-transform: uppercase; color: var(--white); display: inline-flex; align-items: center; }
/* Prominent while the banner is on screen; steps down to the compact size when the hero ends.
   clamp() carries the responsive behaviour, so phones get a larger mark too without a breakpoint. */
.hero-bar__logo { height: clamp(56px, 7.5vw, 104px); width: auto; display: block; transition: height 0.5s var(--ease); }
body.nav-solid .hero-bar__logo { height: 48px; }
body.nav-solid .hero-bar--persistent { padding-block: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .hero-bar, .hero-bar__logo { transition: none; }
}
.hero-bar__menu { padding: 0; transition: color 0.3s; }
.hero-bar__menu:hover { color: var(--platinum); }
body.nav-solid .hero-bar, body.menu-open .hero-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
/* Persistent variant (home page): never hides on scroll, it turns into a slim glass bar instead */
.hero-bar--persistent { border-bottom: 1px solid transparent; transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease), opacity 0.5s var(--ease); }
body.nav-solid .hero-bar--persistent { transform: none; opacity: 1; pointer-events: auto; background: rgba(11, 11, 13, 0.86); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: var(--line); }
body.menu-open .hero-bar--persistent { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Full-screen menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); visibility: hidden; opacity: 0; transition: opacity 0.5s var(--ease), visibility 0s 0.5s; overflow-y: auto; }
.menu:focus { outline: none; } /* container focus only, links and buttons keep their focus ring */
body.menu-open .menu { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease); }
body.menu-open { overflow: hidden; }
.menu__inner { min-height: 100%; display: flex; flex-direction: column; }
.menu__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); border-bottom: 1px solid var(--line); flex: none; }
.menu__wordmark { font: 500 0.95rem/1 var(--serif); letter-spacing: 0.34em; text-transform: uppercase; color: var(--white); }
.menu__brand { display: inline-flex; align-items: center; }
.menu__logo { height: 40px; width: auto; display: block; }
.menu__close { display: inline-flex; align-items: center; gap: 0.6rem; height: 44px; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); }
.menu__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: stretch; padding: clamp(1.25rem, 3vh, 2.5rem) 0 clamp(1.5rem, 4vh, 3rem); }
/* Left column: links, then the contact details and the booking button beneath them. */
.menu__main { min-width: 0; display: grid; align-content: center; gap: clamp(1.4rem, 3.2vh, 2.5rem); }
.menu__nav li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.08s + var(--i, 0) * 0.06s); }
body.menu-open .menu__nav li { opacity: 1; transform: none; }
.menu__nav a { display: flex; align-items: baseline; gap: 1.25rem; padding: clamp(0.9rem, 2vh, 1.4rem) 0; font: 500 clamp(2.4rem, 5.5vw, 4.6rem)/1.05 var(--serif); color: var(--text); transition: color 0.3s, padding-left 0.4s var(--ease); }
.menu__nav a small { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.2em; color: var(--muted); min-width: 2rem; }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--white); padding-left: 0.5rem; }
/* Menu aside: a framed interior photo with a light sweep, then contact details in one type voice */
.menu__aside { display: grid; align-content: stretch; color: var(--text-2); padding-bottom: 0; }
.menu__aside p { margin: 0; font-size: 0.95rem; line-height: 1.7; }
.menu__photo { position: relative; margin: 0; width: 100%; aspect-ratio: 3 / 4; max-height: 100%; align-self: center; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line-strong); isolation: isolate; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 0.7s var(--ease) 0.15s, clip-path 1s var(--ease) 0.15s; }
body.menu-open .menu__photo { opacity: 1; clip-path: inset(0 0 0 0); }
.menu__photo::before { content: ''; position: absolute; inset: 0.7rem; border: 1px solid rgba(201, 179, 126, 0.45); z-index: 2; pointer-events: none; }
.menu__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(0.9); transform: scale(1.14); transition: transform 7s var(--ease); }
body.menu-open .menu__photo img { transform: scale(1); }
.menu__photo:hover img { transform: scale(1.05); transition-duration: 1.4s; }
.menu__photo-sweep { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 34%; z-index: 1; background: linear-gradient(100deg, transparent 0%, rgba(248, 247, 243, 0.16) 45%, rgba(201, 179, 126, 0.22) 55%, transparent 100%); transform: skewX(-18deg) translateX(0); pointer-events: none; }
body.menu-open .menu__photo-sweep { animation: menu-sweep 1.5s var(--ease) 0.55s both; }
.menu__photo:hover .menu__photo-sweep { animation: menu-sweep 1.1s var(--ease) both; }
@keyframes menu-sweep { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(460%); } }
.menu__photo figcaption { position: absolute; left: 1.4rem; bottom: 1.3rem; z-index: 2; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--white); padding: 0.55rem 0.8rem; background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu__poster-head { position: absolute; z-index: 2; top: clamp(1.5rem, 3.4vw, 2.4rem); left: clamp(1.5rem, 3.4vw, 2.4rem); right: clamp(1.5rem, 3.4vw, 2.4rem); margin: 0; font: 500 clamp(1.4rem, 2.4vw, 2.1rem)/1.15 var(--serif); color: var(--white); text-shadow: 0 1px 24px rgba(11, 11, 13, 0.75); }
.menu__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.menu__block .eyebrow { margin-bottom: 0.7rem; }
.menu__phone { display: block; font: 500 1.6rem/1.15 var(--serif); color: var(--white); letter-spacing: 0.01em; }
.menu__phone:hover { color: var(--accent); }
.menu__mail { display: inline-block; margin-top: 0.4rem; font: 400 1rem/1.3 var(--serif); font-style: italic; color: var(--platinum); border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s, color 0.3s; }
.menu__mail:hover { color: var(--white); border-color: var(--platinum); }
.btn--gold { border-color: rgba(201, 179, 126, 0.7); color: var(--accent, #c9b37e); }
.btn--gold:hover { background: var(--accent, #c9b37e); border-color: var(--accent, #c9b37e); color: var(--bg); }
.menu__cta { justify-self: start; }
.menu__cta .icon { transition: transform 0.35s var(--ease); }
.menu__cta:hover .icon { transform: translate(3px, -3px); }
/* Contact details and button rise in after the links */
.menu__contact, .menu__cta { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease) 0.45s, transform 0.6s var(--ease) 0.45s; }
.menu__cta { transition-delay: 0.6s; }
body.menu-open .menu__contact, body.menu-open .menu__cta { opacity: 1; transform: none; }

@media (max-width: 1023px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__phone, .nav__cta { display: none; }
  .nav .nav__menu { display: inline-flex; }
  .menu__body { grid-template-columns: 1fr; align-items: start; }
  .menu__main { align-content: start; }
  .menu__photo { display: none; }
}
@media (max-width: 767px) {
  /* Phones: the whole menu on one screen, nothing to scroll. The photo goes, the links tighten up, and the
     contact details sit in two short columns above the button, spread to fill whatever height is left. */
  /* Links, then the contact details, then the button, all packed from the top with one even gap between
     them. Everything still fits one screen; whatever height is left over collects at the bottom rather than
     opening a hole in the middle, which is what align-content: space-between used to do. */
  .menu__body { padding: 0.9rem 0 1.25rem; gap: clamp(1.75rem, 5vh, 3rem); align-content: start; }
  .menu__nav a { font-size: clamp(1.95rem, 8.4vw, 2.5rem); padding: 0.7rem 0; gap: 0.95rem; }
  .menu__nav a small { min-width: 1.7rem; }
  .menu__photo { display: none; }
  .menu__aside { gap: 1.1rem; padding-bottom: 0; }
  .menu__aside p { font-size: 0.84rem; line-height: 1.5; }
  .menu__contact { gap: 1rem 1.25rem; }
  .menu__block .eyebrow { margin-bottom: 0.4rem; }
  .menu__phone { font-size: 1.35rem; }
  /* The e-mail was small, italic and dim against the panel; upright, larger and in the body colour it reads. */
  .menu__mail { font-size: 1rem; font-style: normal; color: var(--text); margin-top: 0.4rem; overflow-wrap: anywhere; }
}
/* Narrow phones: two columns leave the e-mail too little room and it breaks mid-word, so the blocks stack. */
@media (max-width: 419px) {
  .menu__contact { grid-template-columns: 1fr; gap: 1.1rem; }
  .menu__cta { padding: 0.8rem 1.2rem; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section--tight { padding: calc(var(--section) * 0.6) 0; }
.section--line { border-top: 1px solid var(--line); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head h2 { margin: 0; }
.eyebrow { display: block; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.lede { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.4; color: var(--text-2); max-width: 60ch; }
.prose { max-width: 68ch; color: var(--text-2); }
.prose p { margin-bottom: 1.25rem; }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-top: 3rem; color: var(--text); }
.prose h3 { font-size: 1.4rem; margin-top: 2rem; color: var(--text); }
.prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.muted { color: var(--muted); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100dvh, 1100px); display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 2rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--bg-2); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.hero__media img { animation: kenburns 24s var(--ease) both; transform-origin: 60% 60%; }
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; filter: brightness(1.22) contrast(0.98); }
.hero__media video.is-playing { opacity: 1; }
.hero__media video.is-fading { opacity: 0; transition-duration: 0.7s; }
.hero__media img { transition: opacity 0.8s ease; }
.hero__media video.is-playing + img { opacity: 0; }
.hero__media video.is-fading + img { opacity: 1; }
/* Fog: three drifting tileable layers (screen-blended) plus a warm backlight, no video needed */
.hero__media img { filter: saturate(0.85) contrast(1.06); }
.hero__fog { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  /* keep the car's face crisp; smoke wraps around it */
  -webkit-mask-image: radial-gradient(ellipse 34% 40% at 50% 52%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.5) 65%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 40% at 50% 52%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.5) 65%, #000 100%); }
.hero__glow { position: absolute; left: 50%; top: 36%; width: 130vw; height: 100vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255, 150, 112, 0.62) 0%, rgba(255, 108, 128, 0.34) 28%, rgba(200, 110, 150, 0.12) 48%, rgba(200, 110, 150, 0) 66%); mix-blend-mode: screen; animation: glow-breathe 9s ease-in-out infinite alternate; }
.fog { position: absolute; left: 0; bottom: -8%; width: max(300%, calc(100vw + 2048px)); height: 520px; background-repeat: repeat; background-size: 1024px 512px; mix-blend-mode: screen; will-change: transform; }
.fog--far  { background-image: url('../images/site/fog-1.png'); opacity: 0.28; bottom: 6%; height: 600px; animation: fog-drift-left 95s linear infinite; }
.fog--mid  { background-image: url('../images/site/fog-2.png'); opacity: 0.3; height: 560px; animation: fog-drift-right 70s linear infinite; }
.fog--near { background-image: url('../images/site/fog-3.png'); opacity: 0.42; height: 460px; bottom: -16%; animation: fog-drift-left 48s linear infinite; }
.fog--haze { background-image: url('../images/site/fog-2.png'); background-size: 2048px 1024px; height: 1024px; bottom: auto; top: -24%; opacity: 0.16; animation: fog-drift-right 160s linear infinite; }
@keyframes fog-drift-left  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1024px, 0, 0); } }
@keyframes fog-drift-right { from { transform: translate3d(-1024px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes glow-breathe { from { opacity: 0.75; transform: translate(-50%, -50%) scale(1); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.fog--haze { animation-name: fog-drift-right; }
@keyframes fog-drift-right-wide { from { transform: translate3d(-2048px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.fog--haze { animation-name: fog-drift-right-wide; }
/* Scrim: a soft pool of shade behind the banner copy, because the video's white backlight
   rises through the text zone and would otherwise swallow the sub-line. */
.hero__scrim { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 70% 34% at 50% 15%, rgba(11, 11, 13, 0.88) 0%, rgba(11, 11, 13, 0.74) 48%, rgba(11, 11, 13, 0.3) 76%, rgba(11, 11, 13, 0) 100%),
  linear-gradient(180deg, rgba(11, 11, 13, 0.7) 0%, rgba(11, 11, 13, 0.35) 20%, rgba(11, 11, 13, 0) 38%, rgba(11, 11, 13, 0) 84%, rgba(11, 11, 13, 0.6) 100%); }
.hero__scrim--bare { background: linear-gradient(180deg, rgba(11, 11, 13, 0.32) 0%, rgba(11, 11, 13, 0) 18%, rgba(11, 11, 13, 0) 90%, rgba(11, 11, 13, 0.5) 100%); }
.hero__media img { filter: none; }
/* Banner copy: centred in the upper part of the frame, the three cars fill the lower part of the video */
/* Measured on the clip: only the top ~22% of the frame stays dark for all 10 s (the backlight bloom
   rises as the cars approach). The whole copy block must therefore live inside that band. */
.hero { align-items: flex-start; padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 0; }
.hero__inner { display: flex; justify-content: center; width: 100%; min-width: 0; max-width: var(--container); }
.hero__copy { display: grid; justify-items: center; text-align: center; max-width: 64rem; }
.hero__eyebrow { display: block; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--platinum); margin-bottom: 0.9rem; text-shadow: 0 1px 14px rgba(11, 11, 13, 0.7); }
.hero__title { max-width: none; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; margin-bottom: 0.75rem; color: var(--white); text-wrap: balance; text-shadow: 0 2px 28px rgba(11, 11, 13, 0.6); }
.hero__title em { font-style: italic; font-weight: 400; }
.hero__text { max-width: min(64ch, 100%); font-size: clamp(0.95rem, 1.1vw, 1.08rem); color: var(--accent, #c9b37e); margin: 0; letter-spacing: 0.02em; text-wrap: balance; text-shadow: 0 1px 18px rgba(11, 11, 13, 0.8); }
.hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-2); }
.hero__scroll i { display: block; width: 1px; height: 44px; background: linear-gradient(180deg, var(--platinum), transparent); animation: scroll-cue 2.2s var(--ease) infinite; }
@keyframes scroll-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero__aside { justify-self: end; text-align: right; color: var(--text-2); font-size: 0.85rem; letter-spacing: 0.04em; }
.hero__aside strong { display: block; font: 500 clamp(2rem, 3vw, 2.8rem)/1 var(--serif); color: var(--white); letter-spacing: 0; margin-bottom: 0.35rem; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--nav-h) + 2rem); }
  .hero { padding-top: calc(var(--nav-h) + 0.5rem); }
  .hero__eyebrow { max-width: 100%; letter-spacing: 0.18em; font-size: 0.62rem; margin-bottom: 0.7rem; }
  .hero__title { max-width: 100%; font-size: clamp(1.8rem, 7.6vw, 2.3rem); margin-bottom: 0.6rem; }
  .hero__text { font-size: 0.9rem; max-width: 34ch; }
  .hero__aside { display: none; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.hero .reveal { transition-duration: 1.2s; }

/* ---------- Fleet showcase (home) ---------- */
.showcase { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(220px, 21vw, 340px); gap: 0.75rem; }
.showcase > * { position: relative; }
.showcase > :nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; }
.showcase > :nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 2; }
.showcase > :nth-child(3) { grid-column: 6 / 9; grid-row: 2 / 3; }
.showcase > :nth-child(4) { grid-column: 9 / 13; grid-row: 2 / 3; }
.showcase > :nth-child(5) { grid-column: 1 / 7; grid-row: 3 / 4; }
.showcase > :nth-child(6) { grid-column: 7 / 13; grid-row: 3 / 4; }
@media (max-width: 767px) {
  .showcase { display: flex; flex-direction: column; }
  .showcase > * { aspect-ratio: 4 / 5; }
}

.tile { display: block; position: relative; overflow: hidden; background: var(--bg-3); height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.8s var(--ease); }
.tile:hover img { transform: scale(1.045); }
.tile__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0) 45%, rgba(11, 11, 13, 0.85) 100%); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.tile__name { display: block; font: 500 clamp(1.2rem, 1.5vw, 1.6rem)/1.1 var(--serif); color: var(--white); margin: 0 0 0.3rem; text-wrap: balance; }
.tile__meta { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.showcase > :nth-child(1) .tile__name { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.tile__price { text-align: right; white-space: nowrap; }
.tile__price strong { display: block; font: 500 1.5rem/1 var(--serif); color: var(--white); }
.tile__price span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tile__go { position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(248, 247, 243, 0.5); color: var(--white); background: rgba(11, 11, 13, 0.35); backdrop-filter: blur(6px); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: none; }

/* ---------- Statement (about band) ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.statement__text { font: 400 clamp(1.6rem, 2.9vw, 2.6rem)/1.3 var(--serif); color: var(--text); text-wrap: pretty; }
.statement__text strong { font-weight: 500; color: var(--white); }
.statement__figure { margin: 0; overflow: hidden; background: var(--bg-3); }
.statement__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.statement--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.statement--flip .statement__figure { order: -1; }
@media (max-width: 767px) { .statement, .statement--flip { grid-template-columns: 1fr; } .statement--flip .statement__figure { order: 0; } }

/* ---------- Brands (headline + brand tiles + tagline row) ---------- */
.brands__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 200px clamp(200px, 18.5vw, 265px); gap: 1.5rem; }
.brands__head { grid-column: 1 / 7; grid-row: 1; align-self: start; padding: 0; }
.brands__head h2 { margin: 0; font-size: clamp(2.2rem, 3.8vw, 3.5rem); line-height: 1.05; max-width: 14ch; text-wrap: balance; }
.brand { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--bg-3); }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform-origin: var(--focus, 50% 50%); transform: scale(var(--zoom, 1.6)); filter: brightness(1.12) saturate(1.1); transition: transform 1.4s var(--ease); }
.brand:hover img { transform: scale(calc(var(--zoom, 1.6) * 1.05)); }
.brand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0) 55%, rgba(11, 11, 13, 0.45) 100%); }
.brand--large { grid-column: 7 / 13; grid-row: 1 / 3; }
.brand:not(.brand--large) { grid-row: 2; }
.brand:nth-child(3) { grid-column: 1 / 4; }
.brand:nth-child(4) { grid-column: 4 / 7; }
.brand:nth-child(5), .brand:nth-child(6) { display: none; }
.brand__chip, .brand__count { position: absolute; bottom: 1.25rem; z-index: 1; font: 600 0.9rem/1 var(--sans); }
.brand__chip { left: 1.25rem; padding: 0.7rem 1rem; border-radius: 999px; background: var(--white); color: var(--bg); }
.brand__count { right: 1.25rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--white); }
.brand__count .icon { width: 1.4em; height: 1.4em; }
.brands__foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.brands__foot h3 { margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.4rem); max-width: 12ch; }
.brands__foot p { margin: 0; color: var(--text-2); max-width: 56ch; }
.brands__foot .btn { justify-self: end; }
.btn--pill { border-radius: 999px; padding-left: 3rem; padding-right: 3rem; }
@media (max-width: 899px) {
  .brands__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .brands__head { grid-column: 1 / -1; grid-row: auto; padding-bottom: 0.5rem; }
  .brand--large { grid-column: 1 / -1; grid-row: auto; height: 300px; }
  .brand:not(.brand--large) { grid-row: auto; height: 220px; }
  .brand:nth-child(3), .brand:nth-child(4) { grid-column: auto; }
  .brands__foot { grid-template-columns: 1fr; }
  .brands__foot .btn { justify-self: start; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.steps__intro { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
.steps__list > li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; padding: 2.25rem 0; border-top: 1px solid var(--line); }
.steps__list > li:last-child { border-bottom: 1px solid var(--line); }
.steps__num { font: 400 2.4rem/1 var(--serif); color: var(--muted); }
.steps__list h3 { margin-bottom: 0.5rem; }
.steps__list p { color: var(--text-2); margin: 0; max-width: 52ch; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } .steps__intro { position: static; } }

/* ---------- Testimonials ---------- */
/* Client stories: equal cards in one row, stars first, the quote in italic serif, then the person */
.reviews__head { text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.reviews__head .eyebrow { display: block; }
.reviews__head h2 { margin: 0; }
/* Client stories: a snap-scrolling track rather than a grid, so the same markup is three cards to a page on
   a wide screen, two on a laptop and one on a phone, swiped sideways. assets/js/site.js adds a dot per page
   underneath only when there is more than one page, so the three reviews published today show as a plain
   row of three on a desktop with no indicator, and the dots appear on their own once a fourth is added.
   Sized so the whole section fits one screen: tighter card padding, a smaller quote face and a shorter
   excerpt (includes/home-sections.php). */
.quotes { position: relative; --quotes-gap: 1.6rem; --quotes-per-view: 3; }
.quotes__track { position: relative; display: grid; grid-auto-flow: column; gap: var(--quotes-gap);
  grid-auto-columns: calc((100% - (var(--quotes-per-view) - 1) * var(--quotes-gap)) / var(--quotes-per-view));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 0; margin: -4px 0; } /* room for the hover lift, which the scroll box would otherwise clip */
.quotes__track::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; background: var(--bg-2); border: 1px solid var(--line); padding: clamp(1.75rem, 2.6vw, 2.35rem); display: flex; flex-direction: column; gap: 1.5rem; min-height: 22rem; margin: 0; transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); }
.quotes__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.quotes__dots[hidden] { display: none; }
.quotes__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid rgba(201, 179, 126, 0.55); background: transparent; cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.quotes__dot:hover { border-color: var(--accent); }
.quotes__dot.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
@media (max-width: 1199px) { .quotes { --quotes-per-view: 2; } }
@media (max-width: 767px) { .quotes { --quotes-per-view: 1; } .quote { padding: 1.6rem 1.5rem; min-height: 20rem; } }
.quote:hover { border-color: rgba(201, 179, 126, 0.45); transform: translateY(-3px); }
.quote__stars { display: inline-flex; gap: 3px; color: var(--accent); }
.quote__stars .icon { width: 15px; height: 15px; }
.quote__text { font: italic 400 clamp(1.08rem, 1.25vw, 1.22rem)/1.65 var(--serif); color: var(--text); margin: 0; flex: 1; }
.quote__by { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.quote__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(201, 179, 126, 0.6); background: rgba(201, 179, 126, 0.08); color: var(--accent); font: 500 1.15rem/1 var(--serif); }
.quote__by strong { display: block; font-weight: 600; color: var(--white); margin-bottom: 0.15rem; }
.quote__by span span { color: var(--accent); font-size: 0.8rem; }

/* ---------- Video ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.video-card { background: var(--bg-2); border: 1px solid var(--line); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); overflow: hidden; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame--portrait { aspect-ratio: 9 / 16; max-height: 70vh; }
.video-card__body { padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.video-card__body h3 { margin: 0; font-size: 1.35rem; }

/* ---------- Band (partner CTA) ---------- */
.band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--section); } /* padding-block, not padding, so the container's side gutter is kept on phones */
.band__figure { margin: 0; overflow: hidden; }
.band__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }
@media (max-width: 767px) { .band__inner { grid-template-columns: 1fr; } }

/* ---------- Visit strip ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.visit dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem 3rem; margin: 0; }
.visit dt { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.visit dd { margin: 0; font-size: 1.05rem; color: var(--text); }
.visit dd a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .visit { grid-template-columns: 1fr; } }

/* ---------- Page header ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem)) 0 clamp(2.5rem, 5vw, 4.5rem); }
.page-head h1 { margin-bottom: 1.25rem; max-width: 16ch; text-wrap: balance; }
.page-head .lede { margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.crumbs a:hover { color: var(--white); }
.crumbs li + li::before { content: '/'; margin-right: 0.6rem; color: var(--line-strong); }
@media (max-width: 1023px) { .page-head { padding-top: calc(var(--nav-h) + clamp(2.5rem, 8vw, 5rem)); } }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filters a { padding: 0.7rem 1.2rem; border: 1px solid var(--line); font: 600 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); transition: all 0.3s var(--ease); }
.filters a:hover { border-color: var(--platinum); color: var(--white); }
.filters a[aria-current="page"] { background: var(--platinum); border-color: var(--platinum); color: var(--bg); }

/* ---------- Fleet grid + cards ---------- */
.fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1rem; }
@media (max-width: 1023px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .fleet-grid { grid-template-columns: 1fr; } }
.card { display: block; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.4s var(--ease); }
.card:hover { border-color: var(--line-strong); }
/* 16:9 to match the studio renders the "Also in the fleet" cards now carry; a 4/5 frame cropped them to a
   vertical slice and cut the roof and wheels off the car. */
.card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__status { position: absolute; left: 1rem; top: 1rem; padding: 0.45rem 0.7rem; background: rgba(11, 11, 13, 0.7); backdrop-filter: blur(6px); font: 600 0.66rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.card__body { padding: 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: baseline; }
.card__name { font: 500 1.5rem/1.1 var(--serif); color: var(--white); margin: 0; }
.card__tag { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0; }
.card__price { text-align: right; }
.card__price strong { display: block; font: 500 1.4rem/1 var(--serif); color: var(--white); }
.card__price span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.card__specs { grid-column: 1 / -1; display: flex; gap: 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--text-2); }
.card__specs span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- Fleet page: banner ---------- */
.btn--gold-solid { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--gold-solid:hover { background: #dcc893; border-color: #dcc893; color: var(--bg); }
.fleet-hero { position: relative; min-height: min(88dvh, 900px); display: flex; align-items: center; padding: calc(var(--nav-h) + 3rem) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.fleet-hero__bg { position: absolute; inset: 0; z-index: -2; }
.fleet-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; filter: saturate(0.85); animation: kenburns 24s var(--ease) both; transform-origin: 50% 70%; }
.fleet-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 70% 60% at 50% 38%, rgba(11, 11, 13, 0.82) 0%, rgba(11, 11, 13, 0.55) 55%, rgba(11, 11, 13, 0.2) 100%),
  linear-gradient(180deg, rgba(11, 11, 13, 0.85) 0%, rgba(11, 11, 13, 0.1) 35%, rgba(11, 11, 13, 0.15) 70%, var(--bg) 100%); }
.fleet-hero__inner { display: grid; justify-items: center; text-align: center; width: 100%; }
.fleet-hero__crumbs { justify-self: start; margin-bottom: clamp(2rem, 5vh, 4rem); }
.fleet-hero__eyebrow { color: var(--accent); letter-spacing: 0.3em; margin-bottom: 1.25rem; }
.fleet-hero__title { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 0.98; margin: 0 0 1.25rem; color: var(--white); max-width: 14ch; text-wrap: balance; }
.fleet-hero__title em { font-style: normal; color: var(--accent); }
.fleet-hero__lede { max-width: 52ch; margin: 0 0 2.25rem; font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.65 var(--sans); color: var(--text-2); }
.fleet-hero__actions { display: flex; align-items: center; gap: 1.25rem 2.25rem; flex-wrap: wrap; justify-content: center; }
.fleet-hero__actions .btn .icon { transition: transform 0.35s var(--ease); }
.fleet-hero__actions .btn:hover .icon { transform: translateY(3px); }
.fleet-hero__facts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(1.5rem, 4vw, 4rem); padding: 1.1rem var(--gutter); border-top: 1px solid var(--line); background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 0.82rem; color: var(--text-2); }
.fleet-hero__facts b { font-weight: 600; color: var(--white); }
@media (max-width: 767px) {
  .fleet-hero { min-height: 0; padding-bottom: 7rem; }
  .fleet-hero__facts { gap: 0.4rem 1.25rem; font-size: 0.74rem; }
}

/* ---------- Fleet page: list rows ---------- */
.fleet-list__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.fleet-list__head h2 { margin: 0; }
.fleet-list__head .filters { margin: 0; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); transition: background 0.4s var(--ease); }
.row:hover { background: linear-gradient(90deg, rgba(201, 179, 126, 0.04), transparent 60%); }
.row__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }
.row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.row:hover .row__media img { transform: scale(1.05); }
.row__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0) 65%, rgba(11, 11, 13, 0.55) 100%); pointer-events: none; }
.row__num { position: absolute; left: 1rem; top: 1rem; z-index: 1; font: 500 0.8rem/1 var(--serif); letter-spacing: 0.2em; color: var(--white); background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(6px); padding: 0.45rem 0.65rem; }
.row__status { position: absolute; right: 1rem; top: 1rem; z-index: 1; padding: 0.45rem 0.7rem; background: rgba(11, 11, 13, 0.7); backdrop-filter: blur(6px); font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.row--booked .row__media img { filter: grayscale(0.4) brightness(0.8); }
.row__kicker { display: block; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.row__name { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0 0 0.35rem; }
.row__name a:hover { color: var(--accent); }
.row__tag { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.row__specs { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0 0 1rem; font-size: 0.8rem; color: var(--text-2); }
.row__specs li { display: inline-flex; align-items: center; gap: 0.45rem; }
.row__specs li b { font-weight: 600; color: var(--white); }
.row__specs .icon { width: 1rem; height: 1rem; color: var(--platinum); }
.row__desc { margin: 0; max-width: 60ch; color: var(--text-2); font-size: 0.92rem; }
.row__aside { display: grid; gap: 0.6rem; justify-items: stretch; min-width: 170px; text-align: center; }
.row__price { margin-bottom: 0.5rem; }
.row__price small { display: block; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.row__price strong { display: block; font: 500 clamp(2rem, 2.8vw, 2.6rem)/1 var(--serif); color: var(--accent); letter-spacing: -0.01em; }
.row__price span { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
.row__aside .btn { min-height: 2.9rem; padding: 0 1.4rem; }
@media (max-width: 1023px) {
  .row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .row__aside { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
  .row__price { margin: 0 1rem 0 0; }
}
@media (max-width: 767px) {
  .fleet-list__head { flex-direction: column; align-items: flex-start; }
  .row { grid-template-columns: 1fr; gap: 1.25rem; }
  .row__aside { grid-auto-flow: row; justify-items: stretch; text-align: center; }
  .row__price { margin: 0 0 0.25rem; }
}
.empty { padding: 4rem 0; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); }

/* ---------- Vehicle detail ---------- */
.vehicle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gallery__main { position: relative; overflow: hidden; background: var(--bg-3); aspect-ratio: 4 / 5; }
.gallery__main.is-landscape { aspect-ratio: 16 / 9; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.gallery__thumbs button { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); border: 1px solid transparent; padding: 0; transition: border-color 0.3s; }
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: opacity 0.3s; }
.gallery__thumbs button[aria-current="true"], .gallery__thumbs button:hover { border-color: var(--platinum); }
.gallery__thumbs button[aria-current="true"] img, .gallery__thumbs button:hover img { opacity: 1; }
.summary { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.summary h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin-bottom: 0.5rem; }
.summary__tag { font: 400 1.25rem/1.4 var(--serif); font-style: italic; color: var(--text-2); margin-bottom: 1.75rem; }
.summary__price { display: flex; align-items: baseline; gap: 0.6rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.summary__price strong { font: 500 2.6rem/1 var(--serif); color: var(--white); }
.summary__price span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.summary__price em { margin-left: auto; font-style: normal; font-size: 0.85rem; color: var(--text-2); }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1rem; margin-bottom: 2rem; }
.specs div { display: flex; flex-direction: column; gap: 0.35rem; }
.specs dt { font: 600 0.66rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0; font-size: 1.05rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.summary__actions { display: flex; flex-direction: column; gap: 0.75rem; }
.summary__note { margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 899px) { .vehicle { grid-template-columns: 1fr; } .summary { position: static; } .specs { grid-template-columns: repeat(2, 1fr); } }

.detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); }
.requirements li { display: flex; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--line); color: var(--text-2); }
.requirements li:last-child { border-bottom: 1px solid var(--line); }
.requirements .icon { color: var(--platinum); margin-top: 0.2rem; }
@media (max-width: 899px) { .detail { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
/* align-items:start matters: without it the grid stretches both fields to the height of
   the taller one, so an error message under one control resizes and lowers its neighbour. */
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 599px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
/* align-content:start keeps the label and the control at their natural height if the field
   is ever stretched by its container, instead of the input growing to absorb the slack. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-content: start; }
.field label { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.field label .req { color: var(--platinum); margin-left: 0.2rem; }
/* Every form grid column is minmax(0, 1fr), not the default auto: Safari lets an auto column grow to a
   control's own intrinsic width (a textarea's 20 columns, a date input's native size), which pushed
   the booking steps past the panel's right edge on narrow iPhones. min-width:0 lets controls shrink. */
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text);
  padding: 0.95rem 1rem; font: 400 1rem/1.4 var(--sans); border-radius: 0; transition: border-color 0.3s, background 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: #6f6f75; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--platinum); background: var(--bg-3); }
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input[type="date"] { color-scheme: dark; }
/* iOS Safari only (-webkit-touch-callout exists nowhere else). Its native date control ignores
   width:100% and came out narrow; with the native look removed it instead laid its padding and
   border outside the width, so an earlier min-width:100% fix ran 34px past the panel and stood
   32px taller than the selects. Here the control has no horizontal padding and draws its frame
   with an inset shadow, so it is exactly the column's width and 3.5rem tall whichever way iOS
   sizes it; the date text is inset by its own margin instead. */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"] {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center;
    width: 100%; min-width: 0; max-width: 100%;
    padding: 0; border: 0; box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: box-shadow 0.3s, background 0.3s;
  }
  .field input[type="date"]::-webkit-date-and-time-value { margin: 0 1rem; text-align: left; }
  .field input[type="date"]:focus { box-shadow: inset 0 0 0 1px var(--platinum); }
  .field.has-error input[type="date"] { box-shadow: inset 0 0 0 1px var(--danger); }
}
/* A <select>, a text <input> and a date <input> each derive a slightly different intrinsic
   height from the same font, so a date sat ~2px taller than the time select beside it.
   Pinning the single-line controls to one height keeps every pair in a row flush.
   File, checkbox and radio inputs keep their own sizing. */
.field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.field select { height: 3.5rem; }
.field .help { font-size: 0.82rem; color: var(--muted); margin: 0; }
.field .error { font-size: 0.85rem; color: var(--danger); margin: 0; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
/* Live availability answer on the booking form's first step. */
.availability { margin: 0; padding: 0.85rem 1rem; border-left: 3px solid var(--line-strong); background: var(--bg-2); font-size: 0.92rem; color: var(--text-2); }
.availability--taken { border-left-color: var(--danger); color: var(--text); }
.availability--free { border-left-color: var(--platinum); }
.form__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.form__actions .muted { font-size: 0.82rem; }
.form-panel { background: var(--bg-2); border: 1px solid var(--line); padding: clamp(1.75rem, 4vw, 3rem); }

/* ---------- Multi-section forms (booking) ---------- */
[data-driver2-fields], [data-insurance-renter] { display: grid; gap: 1.25rem; }
.form__row--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
@media (max-width: 699px) { .form__row--3 { grid-template-columns: minmax(0, 1fr); } }
.field--check { display: flex; align-items: flex-start; gap: 0.65rem; }
.field--check input { width: auto; margin-top: 0.25rem; accent-color: var(--platinum); }
.field--check label { font: 400 0.95rem/1.4 var(--sans); text-transform: none; letter-spacing: normal; color: var(--text); }
.field input[type="file"] { padding: 0.65rem; font-size: 0.9rem; color: var(--text-2); }
.field input[type="file"]::file-selector-button { margin-right: 0.85rem; padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--text); font: 600 0.7rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0; cursor: pointer; transition: all 0.25s var(--ease); }
.field input[type="file"]::file-selector-button:hover { border-color: var(--platinum); color: var(--white); }
.field input[type="time"] { color-scheme: dark; }
.option-list { display: grid; gap: 0.6rem; }
.option-list label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-2); border: 1px solid var(--line); padding: 0.85rem 1rem; cursor: pointer; font: 400 0.95rem/1.4 var(--sans); text-transform: none; letter-spacing: normal; color: var(--text); }
.option-list label:has(input:checked) { border-color: var(--platinum); }
.option-list input { width: auto; accent-color: var(--platinum); }
.option-list .option-name { display: flex; align-items: center; gap: 0.65rem; }
.option-list .option-price { color: var(--platinum); font-weight: 600; white-space: nowrap; }
.booking-summary { background: var(--bg-2); border: 1px solid var(--line-strong); padding: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.booking-summary .row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: var(--text-2); padding: 0; border-bottom: 0; }
.booking-summary .row strong { color: var(--text); font-weight: 500; }
.booking-summary .row--total { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-top: 0.3rem; font-size: 1.05rem; }
.booking-summary .row--total strong { color: var(--platinum); }
.booking-summary .note { font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0; }
.booking-summary .row:hover { background: none; }
/* Pay-now / at-pickup split under the total when online payment is on */
.booking-summary .row--split { border-top: 1px dashed var(--line); padding-top: 0.7rem; margin-top: 0.3rem; }
.booking-summary .row--split strong { color: var(--platinum); }
.booking-step > p.help { margin: 0; }

/* ---------- Booking wizard (vehicle detail page) ---------- */
.booking-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 899px) { .booking-layout { grid-template-columns: minmax(0, 1fr); } }

.booking-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--bg-2); border: 1px solid var(--line); padding: 1.75rem; display: grid; gap: 1.25rem; }
.booking-aside__title { font: 500 1.35rem/1.2 var(--serif); color: var(--white); margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.booking-aside__list { display: grid; gap: 0.85rem; margin: 0; }
.booking-aside__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.booking-aside__list dt { font: 600 0.66rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.booking-aside__list dd { margin: 0; color: var(--text); font-size: 0.95rem; white-space: nowrap; }
.booking-aside__note { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (max-width: 899px) { .booking-aside { position: static; } }

.booking-page { min-width: 0; }
.booking-page__head { margin-bottom: 2rem; }
.booking-page__head h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0; }
.booking-page__eyebrow { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--platinum); margin: 0 0 0.85rem; }

/* Stepper: numbered markers because the steps are a real sequence you move through in order. */
.stepper { display: flex; align-items: flex-start; margin: 0 0 2rem; padding: 0; list-style: none; }
.stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; position: relative; text-align: center; min-width: 0; }
.stepper__step::before, .stepper__step::after { content: ""; position: absolute; top: 0.95rem; height: 1px; background: var(--line-strong); }
.stepper__step::before { left: 0; right: 50%; margin-right: 1.1rem; }
.stepper__step::after { left: 50%; right: 0; margin-left: 1.1rem; }
.stepper__step:first-child::before, .stepper__step:last-child::after { display: none; }
.stepper__step.is-done::before, .stepper__step.is-done::after, .stepper__step.is-current::before { background: var(--platinum); }
.stepper__num { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); font: 600 0.75rem/1 var(--sans); position: relative; z-index: 1; transition: all 0.3s var(--ease); }
.stepper__label { font: 600 0.62rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); }
.stepper__step.is-done .stepper__num { border-color: var(--platinum); color: var(--platinum); }
.stepper__step.is-current .stepper__num { border-color: var(--platinum); background: var(--platinum); color: var(--bg); }
.stepper__step.is-current .stepper__label { color: var(--white); }
@media (max-width: 719px) { .stepper__label { display: none; } .stepper { margin-bottom: 1.5rem; } }

.booking-page__progress { height: 2px; background: var(--line); margin-bottom: 2rem; }
.booking-page__progress span { display: block; height: 100%; width: 0; background: var(--platinum); transition: width 0.35s var(--ease); }

.booking-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.booking-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.booking-step > h3 { font: 500 1.6rem/1.15 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--white); margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.booking-page__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.booking-page__hint { flex: 1; text-align: center; font-size: 0.78rem; }
.booking-page__nav .btn { min-width: 8rem; }
@media (max-width: 599px) {
  .booking-page__hint { display: none; }
  .booking-page__nav .btn { flex: 1; min-width: 0; }
  /* "Submit booking request" is ~205px of spaced capitals; half the row is 103-158px on phones, so the
     label ran under Back and off the edge. On the last step Submit takes its own full-width row above
     Back, and on the narrowest phones it may wrap onto a second line. */
  .booking-page__nav { flex-wrap: wrap; }
  .booking-page__nav [data-step-submit] { flex-basis: 100%; order: -1; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.4; padding: 0.85rem 1.25rem; }
}

.flash { padding: 1rem 1.25rem; border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--text); margin-bottom: 1.5rem; }
.flash--success { border-color: var(--success); }
.flash--error { border-color: var(--danger); }
.flash--info { border-color: var(--line-strong); }

/* ---------- Contact split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.contact-list { display: grid; gap: 1.75rem; }
.contact-list dt { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.contact-list dd { margin: 0; font-size: 1.1rem; }
.contact-list dd a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split__aside { position: static; } }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font: 500 1.45rem/1.25 var(--serif); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 22px; height: 22px; color: var(--platinum); transition: transform 0.4s var(--ease); flex: none; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq summary:hover { color: var(--white); }
.faq .faq__body { padding: 0 0 1.75rem; color: var(--text-2); max-width: 64ch; }

/* ---------- Values list (about) ---------- */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
.values > li { padding: 2rem 0; border-top: 1px solid var(--line); }
.values h3 { margin-bottom: 0.5rem; }
.values p { color: var(--text-2); margin: 0; }
@media (max-width: 767px) { .values { grid-template-columns: 1fr; } }
.wide-figure { margin: 0; overflow: hidden; background: var(--bg-3); }
.wide-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 60%; }
@media (max-width: 767px) { .wide-figure img { aspect-ratio: 4 / 3; } }

/* ---------- Footer ---------- */
.footer { position: relative; border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 6rem) 0 0; overflow: hidden; isolation: isolate; background:
  radial-gradient(ellipse 50% 40% at 50% 0%, rgba(201, 179, 126, 0.07), transparent 70%),
  linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 45%, var(--bg) 100%); }
/* Full width: the footer keeps only a side gutter, not the site's usual container cap. */
.footer > .container { position: relative; z-index: 1; max-width: none; }

/* Newsletter row above the columns */
.footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.footer__cta-title { margin: 0 0 0.35rem; font: 500 clamp(1.3rem, 2vw, 1.75rem)/1.15 var(--serif); color: var(--white); }
.footer__cta-note { margin: 0; font-size: 0.88rem; color: var(--muted); }
.footer__cta .subscribe { min-width: min(100%, 420px); }

/* Contact column: icon beside each line */
.footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--text-2); font-size: 0.92rem; line-height: 1.55; }
.footer__contact a { display: flex; align-items: flex-start; gap: 0.6rem; }
.footer__contact .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.18rem; color: var(--accent); flex: none; }

/* ---------- Footer wordmark: grain-filled letters revealed by a spotlight that follows the pointer ---------- */
/* No negative bottom margin: it used to pull the wordmark off the foot of the page so the letters bled past
   the edge, which cut them a second time on top of the tight viewBox. The name now sits whole above the fold. */
.wordmark { --x: 50%; --y: 60%; position: relative; z-index: 1; margin: clamp(1.5rem, 3vw, 2.75rem) 0 0; pointer-events: none; user-select: none;
  opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.wordmark.is-in { opacity: 1; transform: none; }
/* The pool is given an explicit radius rather than reaching to the farthest corner: on a phone the strip of
   letters is only a few dozen pixels tall, and a corner-sized circle covered all of it at once, so there was
   no pool to see travelling. --wm-r scales with the strip instead. */
.wordmark__mask { --wm-r: 22rem; transition: opacity 0.9s var(--ease);
  -webkit-mask-image: radial-gradient(circle var(--wm-r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.88) 18%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0.14) 100%);
  mask-image: radial-gradient(circle var(--wm-r) at var(--x) var(--y), #000 0%, rgba(0, 0, 0, 0.88) 18%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0.14) 100%); }
@media (max-width: 767px) { .wordmark__mask { --wm-r: 7rem; } }
.wordmark.is-idle .wordmark__mask { opacity: 0.55; }
.wordmark__svg { display: block; width: 100%; height: auto; }
/* The full name is fifteen characters against the old seven, so the type is half the size to span the same
   width at its natural proportions (textLength only fine-tunes); the viewBox in footer.php matches. */
.wordmark__type { font-family: var(--sans); font-weight: 700; font-size: 100px; }
.wordmark__solid { fill: rgba(248, 247, 243, 0.4); }
.wordmark__grain { fill: #fff; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .wordmark { opacity: 1; transform: none; transition: none; }
  .wordmark__mask { -webkit-mask-image: none; mask-image: none; opacity: 0.14; }
}

/* ---------- Tagline band above the footer: sharpens into focus on scroll ---------- */
.tagline { padding: clamp(4rem, 9vw, 7.5rem) var(--gutter); border-top: 1px solid var(--line); text-align: center; overflow: hidden; background: radial-gradient(ellipse 55% 80% at 50% 50%, var(--bg-2) 0%, var(--bg) 78%); }
.tagline__line { margin: 0; font: italic 500 clamp(2rem, 5.4vw, 4.6rem)/1.15 var(--serif); color: var(--white); text-wrap: balance;
  filter: blur(20px); opacity: 0; transform: none; transition: filter 1.3s var(--ease), opacity 1.3s var(--ease); }
.tagline__line.is-visible { filter: blur(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tagline__line { filter: none; opacity: 1; transition: none; } }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 2.5vw, 3rem); }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { width: 64px; height: auto; margin-bottom: 1rem; }
.footer__brand .footer__logo { width: 210px; max-width: 100%; margin-bottom: 1.25rem; }
.footer__name { font: 500 1.1rem/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.footer__blurb { color: var(--muted); max-width: 34ch; font-size: 0.92rem; }
.footer__heading { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1.25rem; }
.footer__col ul li { margin-bottom: 0.6rem; }
.footer__col a { color: var(--text-2); transition: color 0.3s; }
.footer__col a:hover { color: var(--white); }
.footer__address { font-style: normal; color: var(--text-2); line-height: 1.8; }
.footer__hours { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }
.subscribe label { display: block; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.6rem; }
.subscribe__row { display: flex; }
.subscribe__row input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); border-right: 0; color: var(--text); padding: 0 1rem; font: inherit; border-radius: 0; }
.subscribe__row input:focus { outline: none; border-color: var(--platinum); }
.subscribe__row .btn { min-height: 3rem; padding: 0 1.25rem; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.footer__bottom p { margin: 0; }
.footer__credit { color: var(--accent); font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat;
  background-position: 0 100%; transition: background-size 0.4s var(--ease), color 0.3s var(--ease); }
.footer__credit:hover, .footer__credit:focus-visible { color: var(--white); background-size: 100% 1px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.footer__legal a:hover, .footer__social a:hover { color: var(--white); }
.footer__social { display: flex; gap: 1.25rem; margin-left: auto; }
.footer__social .icon { width: 22px; height: 22px; }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer__social { margin-left: 0; } }
@media (max-width: 767px) {
  /* Phones: the four link groups sit in two short columns under the brand rather than one long stack, the
     newsletter moves from the top of the footer to the bottom, and the spacing tightens throughout. */
  .footer { padding-top: 2.75rem; }
  .footer > .container { display: flex; flex-direction: column; }
  .footer__grid { order: 1; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .footer__brand, .footer__grid > .footer__col:last-child { grid-column: 1 / -1; } /* brand and the contact details run full width */
  .footer__brand .footer__logo { width: 170px; margin-bottom: 1rem; }
  /* The 34ch cap is there to keep a readable measure beside the four link columns on a desktop; on a phone
     it just wrapped the text early and left a ragged gap down the right, so the paragraph runs full width. */
  .footer__blurb { font-size: 0.88rem; max-width: none; }
  .footer__heading { margin-bottom: 0.85rem; }
  .footer__col ul li { margin-bottom: 0.5rem; font-size: 0.95rem; }
  .footer__contact li { font-size: 0.88rem; margin-bottom: 0.6rem; }
  .footer__cta { order: 2; display: block; border-bottom: 0; border-top: 1px solid var(--line); padding: 2rem 0 0; margin: 2.25rem 0 0; }
  .footer__cta-title { font-size: 1.25rem; }
  .footer__cta .subscribe { min-width: 0; width: 100%; margin-top: 1.1rem; }
  .footer__bottom { order: 3; margin-top: 2rem; padding-top: 1.25rem; gap: 0.9rem 1.5rem; font-size: 0.8rem; }
}

/* ---------- Error pages ---------- */
/* ---------- Booking confirmation (thank-you.php) ---------- */
/* Standalone page: no navbar, so it carries its own backdrop and centring. */
.thanks-page { min-height: 100dvh; }
.thanks-page__bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.thanks-page__bg::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 13, 0.82); }
.thanks {
  position: relative; z-index: 1; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem); padding: clamp(2rem, 6vw, 4rem) 1.25rem;
}
.thanks__brand { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.thanks__brand img { width: 56px; height: 56px; object-fit: contain; }
.thanks__brand span { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-2); }
.thanks__card {
  width: min(100%, 44rem); background: var(--bg-2); border: 1px solid var(--line-strong);
  padding: clamp(2rem, 5vw, 3.25rem); text-align: center;
}
.thanks__seal {
  display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin: 0 auto 1.5rem;
  border: 1px solid var(--platinum); border-radius: 50%; color: var(--platinum);
}
.thanks__seal svg { width: 1.75rem; height: 1.75rem; }
.thanks__title { font: 400 clamp(2.25rem, 6vw, 3.25rem)/1.05 var(--serif); margin: 0 0 1rem; }
.thanks__lede { font-size: 1.02rem; color: var(--text-2); margin: 0 auto 2rem; max-width: 34rem; }
.thanks__lede strong { color: var(--text); font-weight: 500; }
.thanks__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2rem;
  border-block: 1px solid var(--line); padding: 1.25rem 0;
}
@media (max-width: 599px) { .thanks__facts { grid-template-columns: 1fr; gap: 0.85rem; } }
.thanks__facts dt { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.thanks__facts dd { margin: 0; font-size: 1.05rem; color: var(--platinum); }
.thanks__note { font-size: 0.88rem; color: var(--muted); margin: 0 auto 2rem; max-width: 32rem; }
/* Messages on the payment page (pay.php): a cancelled Checkout, or Stripe being unreachable. */
.thanks__alert { margin: 0 0 1.5rem; padding: 0.8rem 1rem; border-left: 3px solid var(--line-strong); background: var(--bg-2); font-size: 0.9rem; color: var(--text); text-align: left; }
.thanks__alert--error { border-left-color: var(--danger); }
.thanks__actions + .thanks__note { margin-top: 1rem; }
/* Thank-you page, full width: the confirmation on the left, the booked car on the right */
.thanks--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  justify-content: stretch; gap: 0; padding: 0; background: var(--bg);
}
.thanks__panel { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(2rem, 5vw, 4.5rem); min-width: 0; }
.thanks--split .thanks__brand { flex-direction: row; align-items: center; text-align: left; }
.thanks--split .thanks__card { width: 100%; max-width: none; background: none; border: 0; padding: 0; text-align: left; }
.thanks--split .thanks__seal { margin: 0 0 1.25rem; }
.thanks--split .thanks__title { font-size: clamp(2.5rem, 4.5vw, 3.75rem); }
.thanks--split .thanks__lede { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.65; }
.thanks--split .thanks__note { font-size: 0.98rem; line-height: 1.65; }
.thanks--split .thanks__prompt { font-size: 1.02rem; }
.thanks--split .thanks__lede, .thanks--split .thanks__note { margin-left: 0; margin-right: 0; max-width: none; }
.thanks--split .thanks__facts dd { font-size: 1.15rem; }
.thanks--split .pay-breakdown dl > div { font-size: 1rem; }
.thanks--split .pay-breakdown { margin-left: 0; max-width: none; }
.thanks--split .thanks__actions { justify-content: flex-start; }
.thanks--split .thanks__return { align-items: flex-start; }
.thanks__visual { position: sticky; top: 0; height: 100dvh; margin: 0; overflow: hidden; background: var(--bg-3); }
.thanks__visual-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); filter: blur(40px) saturate(1.1) brightness(0.6); }
.thanks__visual-car { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.thanks__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 18%), linear-gradient(0deg, rgba(11, 11, 13, 0.75) 0%, transparent 30%); pointer-events: none; }
.thanks__visual figcaption { position: absolute; z-index: 1; left: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 0.35rem; }
.thanks__visual figcaption span { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.thanks__visual figcaption strong { font: 400 clamp(1.5rem, 2.6vw, 2.25rem)/1.1 var(--serif); color: var(--white); }
@media (max-width: 899px) {
  .thanks--split { grid-template-columns: minmax(0, 1fr); }
  .thanks__visual { order: -1; position: relative; height: 42vh; min-height: 240px; }
  .thanks__visual::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
}

/* What is paid online and what at pickup (pay.php, thank-you.php) */
.pay-breakdown { margin: 0 auto 2rem; max-width: 30rem; text-align: left; }
.pay-breakdown__title { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.6rem; }
.pay-breakdown__title:first-child { margin-top: 0; }
.pay-breakdown dl { margin: 0; display: grid; gap: 0.45rem; }
.pay-breakdown dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.pay-breakdown dt { color: var(--text-2); }
.pay-breakdown dt small { color: var(--muted); font-size: 0.8em; }
.pay-breakdown dd { margin: 0; color: var(--text); white-space: nowrap; }
.thanks__note strong { color: var(--text-2); font-weight: 500; }
.thanks__prompt { font-size: 0.95rem; color: var(--text-2); margin: 0 0 1rem; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.thanks__actions .btn { flex: 1 1 15rem; max-width: 20rem; }
.thanks__return { margin: 2rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.thanks__countdown { font-size: 0.8rem; color: var(--muted); min-height: 1.2em; }

.error-page { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--nav-h) + 4rem) 0 4rem; text-align: left; }
.error-page__code { font: 400 clamp(6rem, 18vw, 14rem)/0.9 var(--serif); color: var(--bg-4); letter-spacing: -0.04em; }
.error-page__ref { font-size: 0.82rem; color: var(--muted); margin-top: 2rem; }
.error-page__ref code { color: var(--text-2); }

/* ---------- Collection index (fleet.php, includes/fleet-index.php) ---------- */
/* One vehicle per full-width row, alternating side to side so the eye zig-zags down the page. The picture
   is the Higgsfield studio render over a blurred copy of itself; hovering the row crossfades it to the
   car's second picture. The client's own photographs are mostly portrait, so the hover image is set to
   object-fit:contain inline (includes/studio-images.php) and the blur fills the space beside it. */
.findex-wrap { padding-top: clamp(2.5rem, 5vw, 4rem); }
.findex { border-top: 1px solid var(--line); }
.findex__row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-bottom: 1px solid var(--line);
}
/* --flip marks every second row ON SHOW (set in fleet-index.php and again by the filters in site.js);
   :nth-child would also count the rows a filter has hidden and break the zig-zag. */
.findex__row--flip .findex__media { order: 2; }

.findex__media { position: relative; display: block; }
.findex__frame {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--bg-3); border: 1px solid var(--line);
}
.findex__ambient {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18); filter: blur(34px) saturate(1.15) brightness(0.72);
}
.findex__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.7s var(--ease), transform 1.4s var(--ease);
}
.findex__photo--main { transform-origin: 50% 60%; }
.findex__ambient--hover, .findex__photo--hover { opacity: 0; transition: opacity 0.7s var(--ease); }
/* The hover crossfade is for real pointers only. On a phone the first tap on a row's name, Book or
   Details would play the crossfade (iOS treats a hover that reveals content as the tap's whole
   job) and only a second tap followed the link. Keyboard focus still swaps the picture. */
.findex__row:focus-within .findex__frame--swap .findex__photo--main { opacity: 0; }
.findex__row:focus-within .findex__frame--swap .findex__ambient--hover,
.findex__row:focus-within .findex__frame--swap .findex__photo--hover { opacity: 1; }
@media (hover: hover) {
  .findex__row:hover .findex__frame--swap .findex__photo--main { opacity: 0; }
  .findex__row:hover .findex__frame--swap .findex__ambient--hover,
  .findex__row:hover .findex__frame--swap .findex__photo--hover { opacity: 1; }
  .findex__row:hover .findex__photo--main { transform: scale(1.04); }
}

/* The numeral sits above the frame, on the page's own dark ground, so it reads the same over the light
   studio renders (Escalade, Range Rover, X4 M) as over the dark ones. It occupies the row's top padding
   and only overflows vertically, so it never causes sideways scroll. */
.findex__num {
  position: absolute; z-index: 2; bottom: calc(100% - 0.26em); left: 0;
  font: 400 clamp(2.75rem, 5vw, 4.5rem)/1 var(--serif); letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none;
}
.findex__row--flip .findex__num { left: auto; right: 0; }
.findex__status {
  position: absolute; z-index: 2; right: 1rem; bottom: 1rem; padding: 0.45rem 0.7rem;
  background: rgba(11, 11, 13, 0.7); backdrop-filter: blur(6px);
  font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
}
.findex__row--booked .findex__photo { filter: grayscale(0.4) brightness(0.8); }

.findex__kicker {
  display: block; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem;
}
.findex__name { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.05; margin: 0 0 0.5rem; }
.findex__name a:hover { color: var(--accent); }
.findex__tag { margin: 0 0 1.25rem; color: var(--platinum); font: italic 400 clamp(1rem, 1.4vw, 1.2rem)/1.5 var(--serif); }
.findex__specs { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0 0 1.1rem; font-size: 0.8rem; color: var(--text-2); }
.findex__specs li { display: inline-flex; align-items: center; gap: 0.45rem; }
.findex__specs li b { font-weight: 600; color: var(--white); }
.findex__specs .icon { width: 1rem; height: 1rem; color: var(--platinum); }
.findex__desc { margin: 0; max-width: 56ch; color: var(--text-2); font-size: 0.92rem; }
.findex__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line);
}
.findex__price { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.findex__price small { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.findex__price strong { font: 500 clamp(1.9rem, 2.6vw, 2.4rem)/1 var(--serif); color: var(--accent); letter-spacing: -0.01em; }
.findex__price span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.findex__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.findex__actions .btn { min-height: 2.9rem; padding: 0 1.4rem; }

@media (max-width: 899px) {
  .findex__row { grid-template-columns: 1fr; gap: 1.5rem; }
  .findex__row--flip .findex__media { order: 0; }
  .findex__row--flip .findex__num { left: 1.25rem; right: auto; }
}

/* Gallery arrows: the studio renders are all 16:9, so the stage is too. The arrows sit inside the stage,
   fade up on hover or keyboard focus, and stay permanently visible on touch where there is no hover. */
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--white); cursor: pointer;
  opacity: 0; transition: opacity 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.gallery__arrow--prev { left: 0.85rem; }
.gallery__arrow--next { right: 0.85rem; }
.gallery__arrow .icon { width: 1.15rem; height: 1.15rem; }
.gallery__main:hover .gallery__arrow, .gallery__arrow:focus-visible { opacity: 1; }
.gallery__arrow:hover { background: rgba(11, 11, 13, 0.8); border-color: var(--accent); color: var(--accent); }
.gallery__count {
  position: absolute; right: 0.85rem; bottom: 0.85rem; z-index: 2; margin: 0;
  padding: 0.4rem 0.7rem; background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(8px);
  font: 500 0.72rem/1 var(--serif); letter-spacing: 0.14em; color: var(--text-2);
}
.gallery__count span { color: var(--white); }
@media (hover: none) {
  .gallery__arrow { opacity: 1; }
}

/* ---------- Full-size photo viewer (vehicle.php) ---------- */
/* The main gallery photo is a button so it can be opened from the keyboard as well as clicked. */
.gallery__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__zoom-hint {
  position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem;
  background: rgba(11, 11, 13, 0.55); backdrop-filter: blur(8px);
  font: 600 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.gallery__zoom-hint .icon { width: 0.9rem; height: 0.9rem; }
.gallery__main:hover .gallery__zoom-hint, .gallery__zoom:focus-visible .gallery__zoom-hint { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(6, 6, 8, 0.95); backdrop-filter: blur(12px);
}
.lightbox[hidden] { display: none !important; }
.lightbox__stage { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; max-width: 100%; }
.lightbox__stage img {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 9rem); object-fit: contain; background: var(--bg-3);
}
.lightbox__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-size: 0.82rem; color: var(--text-2);
}
.lightbox__cap i { font: 500 0.85rem/1 var(--serif); font-style: normal; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; }
.lightbox__close, .lightbox__arrow {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0; cursor: pointer; color: var(--white);
  background: rgba(11, 11, 13, 0.6); backdrop-filter: blur(8px); border: 1px solid var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__close:hover, .lightbox__arrow:hover { background: rgba(11, 11, 13, 0.9); border-color: var(--accent); color: var(--accent); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__arrow { top: 50%; transform: translateY(-50%); }
.lightbox__arrow--prev { left: clamp(0.75rem, 2.5vw, 2rem); }
.lightbox__arrow--next { right: clamp(0.75rem, 2.5vw, 2rem); }
.lightbox__close .icon, .lightbox__arrow .icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 599px) {
  /* Keep the arrows clear of the photo on a phone by dropping them to the bottom corners. */
  .lightbox__arrow { top: auto; bottom: clamp(0.75rem, 3vw, 1.5rem); transform: none; }
  .lightbox__stage img { max-height: calc(100vh - 12rem); }
}

/* ---------- Fleet banner (includes/fleet-hero.php) ---------- */
/* Copy left, the fleet nose-in on the right as angled parking bays. Each bay is skewed into a
   parallelogram and the photograph inside is counter-skewed by the same angle, so the bay edges slant
   but the car stays square. --i is the bay's place in the cascade: it drives the offset, the stacking
   order and how far back (dimmer, smaller) the bay sits. */
.fhero { position: relative; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
/* The banner reuses the home page's .fog component (tileable plates, screen-blended, drifting sideways)
   rather than carrying its own; this wrapper just clips them and keeps them behind the content. */
.fhero__fog { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fhero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  /* the nav is fixed, so the banner has to start below it or the breadcrumb lands under the bar */
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  min-height: min(78vh, 760px);
}
.fhero__copy .crumbs { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.fhero__title { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.02; margin: 0.6rem 0 1.25rem; }
.fhero__title em { font-style: italic; color: var(--accent); }
.fhero__lede { margin: 0 0 2rem; max-width: 46ch; color: var(--text-2); font-size: clamp(1rem, 1.2vw, 1.1rem); }
.fhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.fhero__facts {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--muted);
}
.fhero__facts b { color: var(--white); font-weight: 600; }

.fhero__bays {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.55rem, 1.2vw, 0.9rem);
  align-content: center; padding-right: 2.5%;
}
.fbay {
  position: relative; display: block; z-index: 1;
  transform: skewX(-12deg);
  transition: transform 0.55s var(--ease), filter 0.55s var(--ease);
  filter: brightness(calc(0.82 + var(--i) * 0.035));
}
/* The right-hand column drops half a bay so the two rows read as staggered angled bays, not a plain grid. */
.fbay:nth-child(even) { margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.fbay__frame {
  display: block; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}
.fbay__frame img { width: 100%; height: 100%; object-fit: cover; transform: skewX(12deg) scale(1.2); }
.fbay__label {
  position: absolute; left: 0.35rem; bottom: 0.4rem; transform: skewX(12deg);
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.6rem;
  background: rgba(11, 11, 13, 0.62); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.fbay__label b { font: 500 0.8rem/1.2 var(--serif); color: var(--white); }
.fbay__label i { font: 600 0.56rem/1 var(--sans); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.fbay:hover, .fbay:focus-visible {
  z-index: 20; filter: brightness(1.12);
  transform: skewX(-12deg) translateY(-0.5rem) scale(1.035);
}
.fbay:hover .fbay__label, .fbay:focus-visible .fbay__label { opacity: 1; }

@media (max-width: 1023px) {
  .fhero__inner { grid-template-columns: 1fr; min-height: 0; }
  /* Once the banner stacks, the bays sit directly above the collection index, which already lists every
     car - so they would just repeat it. Drop them and let the banner be copy only. The pictures are the
     same -md files the index uses, so nothing extra is downloaded either way. */
  .fhero__bays { display: none; }
}

/* ---------- 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; }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
  .fog, .hero__glow { animation: none; }
}

/* ---------- Partner band ---------- */
/* Composition follows the shared reference: a dim skyline plate at the back, hard diagonal panels over it,
   the car cut out and centred across the panels, then the headline bottom-left and supporting copy
   bottom-right. Palette stays Monarch's own - near-black panels with a single gold band. */
.partner-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-height: clamp(560px, 82vh, 880px);
  display: flex;
  align-items: flex-end;
}
.partner-band__bg { position: absolute; inset: 0; z-index: 0; }
.partner-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; opacity: 0.95; filter: grayscale(0.35); }
/* Warm halo behind the car. The cut-out is a black vehicle on near-black panels; without this it is
   genuinely invisible - it stands in for the backlight the background removal stripped out. */
.partner-band::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 46%;
  width: min(80%, 1180px); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 52%, rgba(201, 179, 126, 0.30) 0%, rgba(201, 179, 126, 0.12) 38%, transparent 70%);
}
/* Diagonal panels, drawn as hard-stop gradients so the edges stay crisp at any width. */
.partner-band::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(11, 11, 13, 0.88)  0%,   rgba(11, 11, 13, 0.88) 34%,
    rgba(16, 16, 19, 0.46) 34%,   rgba(16, 16, 19, 0.46) 52%,
    rgba(22, 22, 25, 0.16) 52%,   rgba(22, 22, 25, 0.16) 74%,
    rgba(29, 29, 34, 0.30) 74%,   rgba(29, 29, 34, 0.30) 100%);
}
/* The reference's accent slash, in gold and kept narrow so it reads as a rule, not a block. */
.partner-band__slash {
  position: absolute; z-index: 2; top: -12%; bottom: -12%; left: 51%;
  width: clamp(2px, 0.3vw, 4px); background: var(--accent); opacity: 0.9;
  transform: skewX(-10deg); pointer-events: none;
}
.partner-band__car {
  position: absolute; z-index: 3; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(72%, 1020px); pointer-events: none;
}
.partner-band__car img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.7)); }
.partner-band__inner {
  position: relative; z-index: 4; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.partner-band__lockup h2 { margin: 0; max-width: 16ch; }
.partner-band__aside { justify-self: end; max-width: 42ch; }
.partner-band__aside p { margin: 0; color: var(--text-2); font-size: 0.98rem; line-height: 1.7; }
.partner-band__aside p + p { margin-top: 1.1rem; }

@media (max-width: 900px) {
  /* Stacked: car on top, then headline, then the copy - the reference read top to bottom. */
  .partner-band { min-height: 0; display: block; }
  /* Inverted for the stack: light end at the top where the car sits, dark end at the bottom under the text. */
  .partner-band::before {
    background: linear-gradient(168deg,
      rgba(22, 22, 25, 0.06)  0%,  rgba(22, 22, 25, 0.06) 40%,
      rgba(16, 16, 19, 0.58) 40%,  rgba(16, 16, 19, 0.58) 56%,
      rgba(11, 11, 13, 0.94) 56%,  rgba(11, 11, 13, 0.94) 100%);
  }
  /* Stronger halo on the stack: the car sits on its own above the copy and needs its own light. */
  .partner-band::after {
    top: 22%; width: 150%; aspect-ratio: 1.6 / 1;
    background: radial-gradient(ellipse at 50% 50%, rgba(201, 179, 126, 0.40) 0%, rgba(201, 179, 126, 0.16) 40%, transparent 72%);
  }
  /* relative, not static: a static box ignores z-index, so the panels and fog painted over the car. */
  .partner-band__car { position: relative; z-index: 3; inset: auto; transform: none; width: 100%; margin: 0 auto; display: block; padding-top: clamp(1.5rem, 6vw, 2.5rem); }
  .partner-band__inner { grid-template-columns: 1fr; gap: 1.5rem; padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2.5rem, 7vw, 4rem); }
  .partner-band__lockup h2 { max-width: none; }
  .partner-band__aside { justify-self: start; max-width: none; }
  .partner-band__slash { left: auto; right: 16%; top: 0; bottom: 55%; }
}

/* Fog and grain lift the band off flat black. Reuses the hero's own drifting layers so the two sections
   read as the same weather rather than two different treatments. */
.partner-band__fog { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.partner-band__fog .fog { bottom: -14%; height: 70%; opacity: 0.22; }
.partner-band__fog .fog--mid { bottom: 4%; height: 55%; opacity: 0.16; }
.partner-band__fog::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../images/site/grain.png'); background-repeat: repeat; background-size: 128px 128px;
  opacity: 0.14; mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .partner-band__fog .fog { animation: none; }
}