/* Chauffeuring Services, Mauritius. One-page site.
   A full-bleed photo hero framed in night, then a light editorial body (porcelain + ink + champagne gold)
   that returns to night for the reservation and footer. No framework, no third-party scripts. */

@font-face { font-family: "Zodiak"; src: url("../fonts/zodiak-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../fonts/zodiak-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  --paper: #f6f4ef;
  --paper-2: #eeeae2;
  --paper-3: #e6e1d7;
  --card: #faf8f4;          /* lifted surfaces on paper-2 */
  --ink: #121211;
  --ink-2: #3a3936;
  --ink-3: #66625a;
  --line: #dcd6ca;
  --line-strong: #c9c1b2;

  --gold: #b08d4c;          /* decorative: rules, icons, frames */
  --gold-ink: #7e6128;      /* gold text on paper, 5.3:1 */
  --gold-hi: #d4b26e;       /* gold text on night, 9.5:1 */
  --gold-a: #c9a65e;
  --gold-b: #b8964f;
  --gold-c: #dcc185;

  --night: #0f0f0e;
  --night-2: #191816;
  --night-3: #23211e;
  --on-night: #ede8de;
  --on-night-2: #aaa397;
  --night-line: #2e2c28;
  --night-field: #6f6a60;   /* input rule on night, 3.6:1 */
  --on-photo: #f6f1e7;      /* type set over photographs, always on a scrim */

  --serif: "Zodiak", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Switzer", "Helvetica Neue", Arial, system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;

  --header-h: 76px;
  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1400px;
  --max-wide: 1680px;       /* header and hero copy follow the full-bleed photo */
  --section-y: clamp(5rem, 3.2rem + 6vw, 9.5rem);

  /* paper grain: warm speckle, under 5% opacity */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .18 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E");

  /* z-index scale */
  --z-actionbar: 40;
  --z-header: 50;
  --z-menu: 60;
}

*, *::before, *::after { box-sizing: border-box; }
/* components set their own display, which would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  /* night above the hero and below the footer when the page overscrolls */
  background: var(--night);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-size: 0.875rem; letter-spacing: 0.04em;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.on-night :focus-visible, .on-night:focus-visible, .on-photo :focus-visible, .site-header.is-dark :focus-visible { outline-color: var(--gold-hi); }
/* controls that float on a photo get a light ring with a dark halo, readable on any frame */
.stage__nav button:focus-visible { outline-color: var(--gold-hi); outline-offset: 2px; box-shadow: 0 0 0 7px rgba(18, 18, 17, 0.55); }

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

/* ---------- Type ---------- */

.display, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
  font-feature-settings: "kern", "liga";
  text-wrap: balance;
}
.display { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.04; }
.h2 { font-size: clamp(2.15rem, 1.25rem + 2.8vw, 4rem); line-height: 1.06; }
.h3 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.35rem); line-height: 1.1; }
.display em, .h2 em, .h3 em { font-style: italic; color: var(--gold-ink); }
.nl { display: block; }

/* small caps label with a gold rule after it */
.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::after {
  content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.7;
  transform-origin: left; transition: transform 1000ms var(--ease-out) 250ms;
}
.on-night .eyebrow { color: var(--gold-c); }
/* a lighter champagne over photographs keeps 4.5:1 against the brightest sky behind it */
.on-photo .eyebrow { color: #e6d09e; }
@media (max-width: 479px) {
  .eyebrow { gap: 12px; letter-spacing: 0.22em; }
  .eyebrow::after { width: 28px; }
}

.lede { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; color: var(--ink-2); max-width: 46ch; }

/* round icon seal used by pillars, car features, services and steps */
.badge {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper-2); color: var(--gold);
}
.badge .icon { width: 24px; height: 24px; }

/* ---------- Buttons & links ---------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px; border-radius: var(--r-xs);
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: scale(0.98); }
.btn--block { width: 100%; }
.btn .icon--after { transition: transform 300ms var(--ease-out); }

.btn--gold {
  color: var(--ink);
  background: linear-gradient(118deg, var(--gold-c) 0%, var(--gold-a) 38%, var(--gold-b) 72%, var(--gold-a) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 30px -14px rgba(126, 97, 40, 0.55);
}
/* a slow sheen across the gold on hover */
.btn--gold::after {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(0) skewX(-18deg);
  transition: transform 900ms var(--ease-out);
}
.btn--ghost { color: var(--ink); border: 1px solid var(--ink); background: transparent; }
.btn--ghost-light { color: var(--on-night); border: 1px solid rgba(237, 232, 222, 0.55); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.72rem; letter-spacing: 0.14em; gap: 10px; }
.btn--sm .icon { width: 18px; height: 18px; }

@media (hover: hover) {
  .btn--gold:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 16px 34px -14px rgba(126, 97, 40, 0.7); }
  .btn--gold:hover::after { transform: translateX(420%) skewX(-18deg); }
  .btn:hover .icon--after { transform: translateX(4px); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .btn--ghost-light:hover { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size 400ms var(--ease-out); }
.link-arrow .icon { width: 18px; height: 18px; color: var(--gold-ink); transition: transform 300ms var(--ease-out); }
.link-arrow--light { color: var(--on-photo); }
.link-arrow--light .icon { color: var(--gold-c); }
@media (hover: hover) {
  .link-arrow:hover span { background-size: 0 1px; background-position: 100% 100%; }
  .link-arrow:hover .icon { transform: translateX(5px); }
}

/* ---------- Header ---------- */
/* Transparent over the hero; glass once the page moves. JS sets .is-dark while a
   data-header="dark" section sits under it, so the type always reads. */

.site-header {
  --h-fg: var(--ink);
  --h-fg-2: var(--ink-2);
  --h-accent: var(--gold-ink);
  --h-inverse: var(--paper);
  --h-glass: rgba(246, 244, 239, 0.86);
  --h-line: var(--line);
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  color: var(--h-fg);
  border-bottom: 1px solid transparent;
  transition: background-color 450ms var(--ease-out), border-color 450ms var(--ease-out), color 350ms ease;
}
.site-header.is-dark {
  --h-fg: var(--on-photo);
  --h-fg-2: rgba(246, 241, 231, 0.94);
  --h-accent: #e6d09e;
  --h-inverse: var(--night);
  --h-glass: rgba(17, 16, 15, 0.52);
  --h-line: rgba(237, 232, 222, 0.12);
}
/* without JS the header cannot change colour, so it stays over the hero and scrolls away with it */
.site-header.is-static { position: absolute; }
.site-header.is-scrolled {
  background: var(--h-glass);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
  border-bottom-color: var(--h-line);
}
.site-header__inner { max-width: var(--max-wide); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.brand__mark {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  border: 1px solid var(--gold);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fbfaf6 0%, var(--paper) 70%);
  box-shadow: 0 4px 14px -6px rgba(10, 10, 9, 0.35);
}
.brand__mark img { width: 23px; height: auto; }
.brand__text { display: grid; line-height: 1; }
.brand__name { font-family: var(--serif); font-size: 1.06rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.brand__place { margin-top: 6px; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-ink); }
.site-header .brand, .site-header .brand__name { color: inherit; }
.site-header .brand__place { color: var(--h-accent); transition: color 350ms ease; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav a {
  position: relative; display: inline-block; padding: 10px 0;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--h-fg-2);
  transition: color 250ms ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease-out);
}
.nav a[aria-current="true"] { color: var(--h-fg); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav a:hover { color: var(--h-fg); }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.header-cta { display: none; }
.site-header .btn--ghost { color: var(--h-fg); border-color: color-mix(in srgb, var(--h-fg) 70%, transparent); }
/* over the photo the outline button gets a little smoked glass, so palm fronds never fight the label */
.site-header.is-dark:not(.is-scrolled) .btn--ghost { background: rgba(10, 10, 9, 0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) {
  .site-header .btn--ghost:hover { background: var(--h-fg); color: var(--h-inverse); border-color: var(--h-fg); }
}

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.site-header .menu-btn { color: inherit; border-radius: 999px; transition: background-color 300ms ease; }
.site-header.is-dark:not(.is-scrolled) .menu-btn { padding-inline: 10px; background: rgba(10, 10, 9, 0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu-btn .icon { width: 24px; height: 24px; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-btn { display: none; }
}
/* small laptops: the header button keeps its icon, the hero carries the full label */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-cta { width: 44px; padding: 0; }
  .header-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav ul { gap: 24px; }
}
@media (max-width: 420px) {
  .brand__mark { width: 44px; height: 44px; }
  .brand__mark img { width: 20px; }
  .brand__name { font-size: 0.92rem; letter-spacing: 0.1em; }
  .brand__place { letter-spacing: 0.34em; }
  .menu-btn__label { display: none; }
}

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

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-drawer), visibility 0s linear 420ms;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-drawer), visibility 0s; }
.menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu__nav { margin-top: clamp(24px, 6vh, 64px); }
.menu__nav li + li { border-top: 1px solid var(--line); }
.menu__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem); line-height: 1.1; color: var(--ink);
}
.menu__nav a .icon { width: 22px; height: 22px; color: var(--gold); }
.menu__foot { margin-top: auto; display: grid; gap: 14px; }
.menu__foot .btn { width: 100%; }
.menu__contact { font-size: 0.95rem; color: var(--ink-3); text-align: center; }
.menu__contact a { color: var(--ink); }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__nav li { animation: fade-up 600ms var(--ease-out) both; }
  .menu.is-open .menu__nav li:nth-child(2) { animation-delay: 50ms; }
  .menu.is-open .menu__nav li:nth-child(3) { animation-delay: 100ms; }
  .menu.is-open .menu__nav li:nth-child(4) { animation-delay: 150ms; }
}

/* ---------- Hero ---------- */
/* Phones and tablets: the photo runs from the top edge behind the header and melts into
   night, with the copy below it so the car is never under text. Desktop: one full-bleed frame. */

.hero { position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--on-photo); }
.hero__media { position: relative; height: clamp(300px, 48svh, 560px); }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
/* phones load a crop that starts at the sea wall; this keeps the car's nose and plate in frame */
@media (max-width: 639px) { .hero__img { object-position: 26% 50%; } }
/* the overlay runs 2px past the photo: a fractional 48svh height otherwise leaves a hairline seam */
.hero__media::after {
  content: ""; position: absolute; inset: 0 0 -2px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 9, 0.8) 0, rgba(10, 10, 9, 0.62) 64px, rgba(10, 10, 9, 0.2) 124px, rgba(10, 10, 9, 0) 176px),
    linear-gradient(0deg, var(--night) 0%, var(--night) 3%, rgba(15, 15, 14, 0.62) 14%, rgba(15, 15, 14, 0) 32%);
}
.hero__inner { position: relative; max-width: var(--max-wide); margin-top: -28px; padding-bottom: clamp(52px, 10vw, 80px); }
.hero__copy { display: grid; justify-items: start; gap: 22px; }
/* phones: sized so "Effortless journeys." holds one line down to a 360px screen */
.hero__title { color: var(--on-photo); padding-bottom: 0.06em; font-size: clamp(2.05rem, 9.2vw, 3.6rem); }
.hero__title em { color: var(--gold-c); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__title .line > span { display: block; }
.hero__lede { max-width: 40ch; color: rgba(246, 241, 231, 0.86); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.hero__cue { display: none; }

@media (min-width: 1024px) {
  .hero { display: grid; min-height: 100vh; min-height: 100svh; }
  .hero__media { position: absolute; inset: 0; z-index: -1; height: auto; }
  .hero__img { object-position: 47% 64%; }
  /* measured, not guessed: these keep the copy at WCAG contrast over the brightest sky and sea
     behind it while the car on the right stays untouched */
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 9, 0.64) 0, rgba(10, 10, 9, 0.32) 80px, rgba(10, 10, 9, 0) 180px),
      radial-gradient(60% 55% at 18% 40%, rgba(10, 10, 9, 0.38) 0%, rgba(10, 10, 9, 0) 100%),
      linear-gradient(90deg, rgba(10, 10, 9, 0.76) 0%, rgba(10, 10, 9, 0.66) 20%, rgba(10, 10, 9, 0.44) 34%, rgba(10, 10, 9, 0.14) 46%, rgba(10, 10, 9, 0) 58%),
      linear-gradient(0deg, rgba(10, 10, 9, 0.5) 0%, rgba(10, 10, 9, 0) 22%);
  }
  .hero__inner {
    margin-top: 0; display: grid; grid-template-rows: 1fr auto; gap: 40px;
    padding-top: calc(var(--header-h) + clamp(28px, 6vh, 110px)); padding-bottom: clamp(28px, 4vh, 44px);
  }
  .hero__copy { align-self: start; max-width: 620px; }
  .hero__title { font-size: clamp(3rem, 4.4vw, 4.9rem); }
  .hero__actions { column-gap: 24px; }
  .hero__title .line > span { white-space: nowrap; }
  .hero__lede { text-shadow: 0 1px 22px rgba(10, 10, 9, 0.4); }
  .hero__link { display: none; }
  .hero__cue {
    display: inline-flex; align-items: center; gap: 18px; justify-self: start; min-height: 44px;
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(246, 241, 231, 0.82);
    transition: color 250ms ease;
  }
  .hero__cue i { position: relative; width: 84px; height: 1px; overflow: hidden; background: rgba(246, 241, 231, 0.3); transform-origin: left; transition: transform 500ms var(--ease-out); }
  .hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--gold-c); transform: translateX(-100%); }
}
@media (min-width: 1024px) and (hover: hover) {
  .hero__cue:hover { color: var(--on-photo); }
  .hero__cue:hover i { transform: scaleX(1.4); }
}
/* small laptops: the car is wide in frame, so keep its nose clear of the copy */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__img { object-position: 4% 64%; }
  .hero__title { font-size: clamp(2.8rem, 4.4vw, 3.5rem); }
}

/* hero entrance */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .line > span { animation: rise 1100ms var(--ease-out) both; }
  .hero__title .line:nth-child(2) > span { animation-delay: 90ms; }
  .hero__title .line:nth-child(3) > span { animation-delay: 180ms; }
  .hero__copy .eyebrow { animation: fade-up 900ms var(--ease-out) 60ms both; }
  .hero__copy .eyebrow::after { animation: draw 1200ms var(--ease-out) 300ms both; }
  .hero__lede { animation: fade-up 900ms var(--ease-out) 380ms both; }
  .hero__actions { animation: fade-up 900ms var(--ease-out) 480ms both; }
  .hero__cue { animation: fade 1200ms ease 1100ms both; }
  .hero__cue i::after { animation: cue 2800ms var(--ease-in-out) 1600ms infinite; }
  .hero__img { animation: settle 2800ms var(--ease-out) both; }
  .site-header { animation: fade 900ms ease 200ms both; }
}
@keyframes rise { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settle { from { scale: 1.1; } to { scale: 1; } }
@keyframes cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* desktop: the photo drifts slower than the page and the copy lifts away (scroll-driven, progressive) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .hero__media { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero__inner { animation: hero-lift linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  }
}
@keyframes hero-drift { to { translate: 0 24vh; } }
@keyframes hero-lift { to { opacity: 0; translate: 0 -7vh; } }

/* ---------- Pillars ---------- */

/* A ruled index under the hero: every column hangs from one hairline, marked in gold, with an
   index number and an outlined seal over a two-line serif title. 2 x 2 up to 1099px, one row above. */

.pillars { padding-block: clamp(3.25rem, 2.3rem + 3vw, 5.25rem) clamp(3.75rem, 2.6rem + 3.6vw, 6rem); background: var(--paper) var(--grain); }
.pillars__title { display: flex; margin-bottom: clamp(20px, 2.4vw, 30px); }
.pillars__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.pillar { --pad: clamp(14px, 3.4vw, 32px); position: relative; display: grid; align-content: start; padding: 22px var(--pad) 28px 0; }
/* the gold mark on the rule above each column; it draws in with its column */
.pillar::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px; background: var(--gold);
  transform-origin: left; transition: transform 1100ms var(--ease-out) calc(var(--d, 0ms) + 250ms);
}
.pillar__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pillar__num { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
.pillar .badge { width: 42px; height: 42px; background: transparent; border: 1px solid rgba(176, 141, 76, 0.45); }
.pillar .badge .icon { width: 20px; height: 20px; }
.pillar h3 {
  margin-top: clamp(20px, 3vw, 40px);
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.18rem, 0.95rem + 1.1vw, 1.75rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink);
}
.pillar h3 span { display: block; }
.pillar > p { margin-top: 10px; max-width: 30ch; font-size: 0.92rem; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 1099px) {
  .pillar:nth-child(even) { padding: 22px 0 28px var(--pad); border-left: 1px solid var(--line); }
  .pillar:nth-child(even)::before { left: var(--pad); }
  .pillar:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .pillars__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pillar { padding: 30px var(--pad) 6px; border-left: 1px solid var(--line); }
  .pillar::before { left: var(--pad); }
  .pillar:first-child { padding-left: 0; border-left: 0; }
  .pillar:first-child::before { left: 0; }
  .pillar:last-child { padding-right: 0; }
  .pillar .badge { width: 48px; height: 48px; }
  .pillar .badge .icon { width: 22px; height: 22px; }
  .pillar > p { margin-top: 14px; font-size: 0.98rem; }
}

/* ---------- Section heads ---------- */

.section { padding-block: var(--section-y); }
.section-head { display: grid; justify-items: start; gap: 22px; max-width: 760px; }
.section-head .lede { max-width: 54ch; }

/* ---------- Fleet showroom ---------- */
/* Phones: head, stage, rail, details. Desktop (the mockup): head and stage on the left,
   a ruled spec panel on the right, the rail across the bottom. */

.fleet { background: var(--paper-2) var(--grain); }
.showroom { display: grid; gap: 28px; }
.showroom__head { margin-bottom: 4px; }

/* 3:2, the shape of every fleet photo, so no car loses its roof or its plate */
.stage { position: relative; isolation: isolate; overflow: clip; aspect-ratio: 3 / 2; border-radius: var(--r-md); background: var(--paper-3); touch-action: pan-y; }
.stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 700ms var(--ease-out), scale 1200ms var(--ease-out);
  scale: 1.035;
}
.stage__img.is-active { opacity: 1; scale: 1; }
/* showroom light passing over the car when it changes */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
.stage.is-sweeping::after { animation: sweep 1100ms var(--ease-in-out); }
@keyframes sweep { to { transform: translateX(120%); } }

.stage__count {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; overflow: hidden;
  border-radius: 999px; background: rgba(18, 18, 17, 0.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--on-photo); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
.stage__count span:nth-child(2) { opacity: 0.55; }
.stage__now { display: inline-block; }

.stage__nav { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 10px; }
.stage__nav button {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(250, 248, 244, 0.94); color: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(18, 18, 17, 0.5);
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.stage__nav .icon { width: 19px; height: 19px; }
.stage__nav button:active { transform: scale(0.94); }
@media (max-width: 639px) {
  .stage__count { left: 12px; bottom: 12px; height: 30px; padding: 0 12px; font-size: 0.7rem; }
  .stage__nav { right: 12px; bottom: 12px; gap: 8px; }
  .stage__nav button { width: 44px; height: 44px; }
}
@media (hover: hover) { .stage__nav button:hover { background: var(--ink); color: var(--paper); } }

/* every panel shares one grid cell so the block keeps the tallest car's height and nothing jumps */
.car-panels { display: grid; }
.car { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px; visibility: hidden; }
.car.is-current { visibility: visible; }
.car__head { display: grid; justify-items: start; gap: 8px; }
.car__brand { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-ink); }
.car__model { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.7rem + 2.3vw, 3.7rem); line-height: 1; letter-spacing: -0.015em; color: var(--ink); }
.car__cat { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); }
.car__cat::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 20px; background: var(--gold); }
.car__tagline { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 1.12rem + 0.55vw, 1.6rem); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.car__desc { font-size: 0.98rem; line-height: 1.65; color: var(--ink-3); max-width: 54ch; }
.car__features { border-top: 1px solid var(--line-strong); }
.car__features li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-strong); }
.car__features .badge { width: 46px; height: 46px; background: var(--paper-3); }
.car__features .badge .icon { width: 22px; height: 22px; }
.car__features p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-3); }
.car__features strong { display: block; margin-bottom: 2px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.car__cta { margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .car.is-entering > * { animation: fade-up 560ms var(--ease-out) both; }
  .car.is-entering > *:nth-child(2) { animation-delay: 40ms; }
  .car.is-entering > *:nth-child(3) { animation-delay: 80ms; }
  .car.is-entering > *:nth-child(4) { animation-delay: 120ms; }
  .car.is-entering > *:nth-child(5) { animation-delay: 160ms; }
}

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(164px, 1fr); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail__item {
  scroll-snap-align: start; position: relative; text-align: left;
  display: grid; align-content: start; gap: 12px; padding: 6px 6px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color 260ms ease, box-shadow 320ms ease, translate 320ms var(--ease-out);
}
.rail__item img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: 5px; background: var(--paper-3); }
.rail__text { display: grid; gap: 4px; padding-inline: 6px; }
.rail__name { font-size: 0.88rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.rail__cat { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--ink-3); transition: color 260ms ease; }
.rail__cat::after {
  content: ""; display: block; width: 26px; height: 1px; margin-top: 9px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out);
}
.rail__item[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 16px 30px -20px rgba(126, 97, 40, 0.65); }
.rail__item[aria-selected="true"] .rail__cat { color: var(--gold-ink); }
.rail__item[aria-selected="true"] .rail__cat::after { transform: scaleX(1); }
@media (hover: hover) {
  .rail__item:hover { translate: 0 -3px; border-color: var(--line-strong); }
  .rail__item[aria-selected="true"]:hover { border-color: var(--gold); }
}

.fleet__note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--ink-3); max-width: 80ch; }
.fleet__note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-ink); }

@media (min-width: 1024px) {
  .showroom {
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr);
    grid-template-areas: "head panel" "stage panel" "rail rail" "note note";
    column-gap: 0; row-gap: 40px;
  }
  .showroom__head { grid-area: head; margin: 0; padding-right: clamp(32px, 4vw, 64px); }
  .stage { grid-area: stage; align-self: end; margin-right: clamp(32px, 4vw, 64px); }
  .car-panels { grid-area: panel; padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid var(--line-strong); }
  .car__cta { margin-top: auto; }
  .rail { grid-area: rail; margin: 0; padding: 4px 2px 14px; scroll-padding-inline: 2px; }
  .fleet__note { grid-area: note; margin-top: -12px; }
}
@media (min-width: 1200px) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; padding: 0; }
}

/* ---------- Services ---------- */

.services { background: var(--paper) var(--grain); }
.services__grid { display: grid; gap: clamp(40px, 5vw, 80px); }
.services__list { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-strong); }
/* rows: [photo on phones] / title / text; seal left, arrow right */
.svc { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.svc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out);
}
.svc__media-m { grid-row: 1; grid-column: 1 / -1; margin-bottom: 14px; aspect-ratio: 16 / 10; overflow: clip; border-radius: var(--r-sm); background: var(--paper-3); }
.svc__media-m img { width: 100%; height: 100%; object-fit: cover; }
.svc__icon { grid-row: 2 / span 2; grid-column: 1; align-self: start; width: 44px; height: 44px; }
.svc__icon .icon { width: 21px; height: 21px; }
.svc__title { grid-row: 2; grid-column: 2; font-family: var(--serif); font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.1; color: var(--ink); transition: color 300ms ease, transform 500ms var(--ease-out); }
.svc__text { grid-row: 3; grid-column: 2; font-size: 0.98rem; color: var(--ink-3); max-width: 46ch; line-height: 1.55; }
.svc__go { grid-row: 2 / span 2; grid-column: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 400ms var(--ease-out); }
.svc__go .icon { width: 18px; height: 18px; }
.svc:active .svc__go { transform: scale(0.94); }
@media (hover: hover) {
  .svc:hover .svc__title { transform: translateX(6px); }
  .svc:hover .svc__go { transform: rotate(45deg); }
}

.services__media { display: none; }

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  /* the active row only means something beside the photo panel, so it lives at this width */
  .svc { column-gap: 20px; }
  .svc__icon { width: 52px; height: 52px; }
  .svc__icon .icon { width: 24px; height: 24px; }
  .svc__go { width: 46px; height: 46px; }
  .svc.is-active::after { transform: scaleX(1); }
  .svc.is-active .svc__title { color: var(--gold-ink); }
  .svc.is-active .svc__go { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .svc__media-m { display: none; }
  .svc__icon, .svc__go { grid-row: 1 / span 2; }
  .svc__title { grid-row: 1; }
  .svc__text { grid-row: 2; }
  .services__media {
    display: block; position: sticky; top: calc(var(--header-h) + 40px);
    aspect-ratio: 4 / 3; width: 100%; overflow: clip; border-radius: var(--r-md); background: var(--paper-3);
    box-shadow: 0 40px 70px -46px rgba(58, 46, 22, 0.55);
  }
  .services__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; scale: 1.06; transition: opacity 800ms var(--ease-out), scale 1400ms var(--ease-out);
  }
  .services__media img.is-active { opacity: 1; scale: 1; }
  .services__media img[data-index="0"] { object-position: 18% 50%; }
  .services__media img[data-index="1"] { object-position: 74% 50%; }
  .services__media img[data-index="2"] { object-position: 36% 50%; }
  .services__media img[data-index="3"] { object-position: 92% 50%; }
  .services__media::after { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(246, 244, 239, 0.6); border-radius: 8px; pointer-events: none; }
}

/* ---------- Experience band ---------- */

/* night meets night above and below at fractional offsets; the 1px overlap keeps the paper body from showing through as a hairline */
.manifesto, .footer { margin-top: -1px; }
.manifesto { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: clamp(540px, 40vw, 660px); background: var(--night); color: var(--on-photo); }
/* the photo stops 2px short: at a fractional bottom edge its last row otherwise shows as a hairline over the footer */
.manifesto__media { position: absolute; inset: 0 0 2px; z-index: -2; overflow: clip; }
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.manifesto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 75% at 14% 62%, rgba(10, 10, 9, 0.5) 0%, rgba(10, 10, 9, 0) 100%),
    /* the foot melts into the footer below, which closes the page */
    linear-gradient(to top, #0b0b0a 0%, rgba(10, 10, 9, 0.88) 14%, rgba(10, 10, 9, 0.5) 44%, rgba(10, 10, 9, 0.05) 76%),
    linear-gradient(to right, rgba(10, 10, 9, 0.6) 0%, rgba(10, 10, 9, 0) 62%);
}
.manifesto__inner { padding-block: clamp(4rem, 3rem + 4vw, 7rem); display: grid; justify-items: start; gap: 22px; }
.manifesto .h2 { color: var(--on-photo); max-width: 17ch; }
.manifesto .h2 em { color: var(--gold-c); }
.manifesto__text { max-width: 50ch; color: rgba(246, 241, 231, 0.86); font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem); }
.manifesto .link-arrow { margin-top: 4px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto__media img { animation: pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes pan { from { transform: translateX(2.5%) scale(1.07); } to { transform: translateX(-2.5%) scale(1.07); } }

/* ---------- Reservation (night) ---------- */

.reserve { position: relative; background: var(--night); color: var(--on-night-2); color-scheme: dark; overflow: clip; }
.reserve .h2 { color: var(--on-night); }
.reserve .h2 em { color: var(--gold-hi); }
.reserve__grid { position: relative; z-index: 1; display: grid; gap: clamp(44px, 5vw, 72px); padding-block: var(--section-y); }
.reserve__copy { display: grid; justify-items: start; gap: 24px; align-content: start; }
.reserve__copy .lede { color: var(--on-night-2); }

/* three steps joined by a hairline */
.steps { position: relative; display: grid; gap: 26px; margin-top: 12px; }
.steps::before { content: ""; position: absolute; left: 23.5px; top: 26px; bottom: 26px; width: 1px; background: linear-gradient(var(--night-line), rgba(212, 178, 110, 0.45), var(--night-line)); }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center; }
.step .badge { grid-row: span 2; width: 48px; height: 48px; background: var(--night); border: 1px solid rgba(212, 178, 110, 0.42); color: var(--gold-hi); }
.step .badge .icon { width: 22px; height: 22px; }
.step h3 { align-self: end; font-family: var(--sans); font-weight: 500; font-size: 0.98rem; color: var(--on-night); letter-spacing: 0.01em; }
.step p { align-self: start; font-size: 0.94rem; line-height: 1.5; }

.reserve__contact { justify-self: stretch; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--night-line); display: grid; gap: 6px; font-size: 0.95rem; }
.reserve__contact a { color: var(--on-night); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; }
.reserve__contact a .icon { color: var(--gold-hi); }

/* the booking card: a lifted panel on the night, full-bleed on phones */
.booking {
  position: relative; padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(180deg, rgba(212, 178, 110, 0.05), rgba(212, 178, 110, 0) 200px), var(--night-2);
  border: 1px solid var(--night-line); border-radius: var(--r-md);
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.9);
}
@media (max-width: 719px) {
  .booking { margin-inline: calc(var(--gutter) * -1); padding: 28px var(--gutter) 32px; border-inline: 0; border-radius: 0; }
}

.form { display: grid; gap: 28px; align-content: start; }
.form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 20px; border-bottom: 1px solid var(--night-line); }
.form__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.15; color: var(--on-night); }
.form__time { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--on-night-2); }
.form__time .icon { width: 16px; height: 16px; color: var(--gold-hi); }
.form__pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }

.field { display: grid; gap: 8px; position: relative; }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; margin-bottom: 14px; }
.field > label, .field .field__label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-night-2); display: flex; align-items: center; gap: 10px; }
.field > label .icon, .field__label .icon { width: 16px; height: 16px; color: var(--gold-hi); }
.field .opt { letter-spacing: 0.06em; text-transform: none; font-weight: 400; color: #8c867b; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 0 12px;
  background: transparent; border: 0; border-bottom: 1px solid var(--night-field); border-radius: 0;
  color: var(--on-night); font-size: 1rem;
  transition: border-color 200ms ease, box-shadow 300ms var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select { padding-right: 32px; cursor: pointer; }
.field select option { background: var(--night-2); color: var(--on-night); }
.field__caret { position: absolute; right: 2px; bottom: 16px; width: 16px; height: 16px; color: var(--on-night-2); pointer-events: none; }
.field input::placeholder, .field textarea::placeholder { color: #8c867b; opacity: 1; }
@media (hover: hover) { .field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: #8c867b; } }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--gold-hi); box-shadow: 0 1px 0 0 var(--gold-hi); }
.field input[type="date"], .field input[type="time"] { cursor: pointer; }
.field input::-webkit-calendar-picker-indicator { filter: invert(0.85) sepia(0.3); opacity: 0.8; cursor: pointer; }
.field [aria-invalid="true"] { border-bottom-color: #e8a28f; }
.field__error { font-size: 0.85rem; color: #f0b6a6; display: flex; gap: 8px; align-items: center; }
.field__error[hidden] { display: none; }
.field__error .icon { width: 16px; height: 16px; }

/* service: four tiles, a radio group underneath */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: block; cursor: pointer; }
.tiles .tile input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.tile__box {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 58px; padding: 10px 14px;
  border: 1px solid rgba(237, 232, 222, 0.14); border-radius: var(--r-sm); background: rgba(15, 15, 14, 0.55);
  color: var(--on-night); font-size: 0.92rem; font-weight: 500; line-height: 1.25;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 160ms var(--ease-out);
}
.tile__box .icon { width: 22px; height: 22px; color: var(--on-night-2); transition: color 220ms ease; }
.tile input:checked + .tile__box { border-color: var(--gold-hi); background: rgba(212, 178, 110, 0.1); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.tile input:checked + .tile__box .icon { color: var(--gold-hi); }
.tile input:focus-visible + .tile__box { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.tile:active .tile__box { transform: scale(0.98); }
@media (hover: hover) { .tile:hover input:not(:checked) + .tile__box { border-color: rgba(237, 232, 222, 0.34); } }

/* the chosen car, beside its name (phones to small laptops; wide screens use the panel) */
.pick {
  display: grid; grid-template-columns: clamp(104px, 32%, 150px) minmax(0, 1fr); align-items: center; gap: 16px;
  margin-top: -12px; padding: 8px 14px 8px 8px;
  border: 1px solid rgba(212, 178, 110, 0.28); border-radius: var(--r-sm); background: rgba(15, 15, 14, 0.5);
}
.pick__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 5px; background: var(--night-3); }
.pick__text { display: grid; gap: 3px; }
.pick__brand { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-hi); }
.pick__model { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; color: var(--on-night); }
.pick__cat { font-size: 0.8rem; line-height: 1.35; color: var(--on-night-2); }
@media (prefers-reduced-motion: no-preference) { .pick.is-entering { animation: fade-up 500ms var(--ease-out) both; } }

/* the route: a hollow dot at the pick-up, a solid one at the drop-off, a dotted line between */
.route { display: grid; gap: 22px; }
.route .field { padding-left: 30px; }
.route .field::before {
  content: ""; position: absolute; left: 3px; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--gold-hi);
}
.route .field:last-child::before { background: var(--gold-hi); box-shadow: 0 0 0 4px rgba(212, 178, 110, 0.16); }
.route .field:first-child::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: -22px; border-left: 1px dashed rgba(212, 178, 110, 0.5); }
.field__quick {
  position: absolute; right: 0; top: -8px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(212, 178, 110, 0.38);
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; color: var(--gold-hi);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.field__quick .icon { width: 15px; height: 15px; }
.field__quick:active { transform: scale(0.96); }
@media (hover: hover) { .field__quick:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--night); } }

/* date and time: a field-like button that opens a small dialog under the pair */
.field--picker { position: static; }
.picker {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 48px; padding: 10px 0 12px; text-align: left;
  border-bottom: 1px solid var(--night-field); color: var(--on-night); font-size: 1rem;
  transition: border-color 200ms ease, box-shadow 300ms var(--ease-out);
}
.picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker.is-empty .picker__value { color: #8c867b; }
.picker .icon { width: 16px; height: 16px; color: var(--on-night-2); transition: transform 300ms var(--ease-out); }
.picker[aria-expanded="true"], .picker:focus-visible { outline: none; border-bottom-color: var(--gold-hi); box-shadow: 0 1px 0 0 var(--gold-hi); }
.picker[aria-expanded="true"] .icon { transform: rotate(180deg); }
.picker[aria-invalid="true"] { border-bottom-color: #e8a28f; }
@media (hover: hover) { .picker:hover { border-bottom-color: #8c867b; } }

.pop {
  position: absolute; z-index: 20; top: calc(100% + 10px); left: 0;
  width: min(100%, 360px); padding: 14px 14px 10px;
  border: 1px solid rgba(212, 178, 110, 0.26); border-radius: var(--r-md);
  background: #1e1c19; color: var(--on-night);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.35);
  transform-origin: 0 0;
}
.pop--time { left: auto; right: 0; transform-origin: 100% 0; }
@media (prefers-reduced-motion: no-preference) { .pop:not([hidden]) { animation: pop-in 220ms var(--ease-out); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 12px; }
.pop__title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; color: var(--on-night); }
.pop__nav { display: flex; gap: 6px; }
.pop__nav button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(237, 232, 222, 0.16); color: var(--on-night);
  transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}
.pop__nav button:disabled { opacity: 0.28; cursor: default; }
.pop__nav .icon { width: 16px; height: 16px; }
@media (hover: hover) { .pop__nav button:not(:disabled):hover { border-color: var(--gold-hi); color: var(--gold-hi); } }
.pop__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--night-line); }
.pop__chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(237, 232, 222, 0.16);
  font-size: 0.82rem; color: var(--on-night); transition: border-color 200ms ease, color 200ms ease;
}
.pop__done { margin-left: auto; min-height: 36px; padding: 0 6px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); }
@media (hover: hover) { .pop__chip:hover { border-color: var(--gold-hi); color: var(--gold-hi); } }

.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { padding: 0 0 6px; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--on-night-2); }
.cal td { padding: 2px; }
.cal__day {
  display: grid; place-items: center; width: 100%; max-width: 44px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--on-night);
  transition: background-color 160ms ease, color 160ms ease;
}
.cal__day:disabled { color: rgba(237, 232, 222, 0.24); cursor: default; }
.cal__day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgba(212, 178, 110, 0.65); }
.cal__day[aria-pressed="true"] { background: linear-gradient(135deg, var(--gold-c), var(--gold-a)); color: var(--ink); font-weight: 500; box-shadow: none; }
.cal__day:focus-visible, .times button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
@media (hover: hover) { .cal__day:not(:disabled):not([aria-pressed="true"]):hover { background: rgba(237, 232, 222, 0.09); } }

.pop__clock { font-family: var(--serif); font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.pop__label { margin: 2px 4px 8px; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-night-2); }
.times { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.times + .pop__label { margin-top: 14px; }
.times button {
  min-height: 40px; border-radius: var(--r-sm); background: rgba(237, 232, 222, 0.05);
  font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--on-night);
  transition: background-color 160ms ease, color 160ms ease;
}
.times button[aria-pressed="true"] { background: linear-gradient(135deg, var(--gold-c), var(--gold-a)); color: var(--ink); font-weight: 500; }
@media (hover: hover) { .times button:not([aria-pressed="true"]):hover { background: rgba(237, 232, 222, 0.12); } }

/* passengers and bags: a number between a minus and a plus */
.stepper {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; min-height: 48px; padding-bottom: 4px;
  border-bottom: 1px solid var(--night-field); transition: border-color 200ms ease, box-shadow 300ms var(--ease-out);
}
.stepper button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(237, 232, 222, 0.2); color: var(--on-night);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out);
}
.stepper button:active { transform: scale(0.92); }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper .icon { width: 16px; height: 16px; }
.field .stepper input {
  min-height: 40px; padding: 0; border: 0; text-align: center;
  font-family: var(--serif); font-size: 1.4rem; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field .stepper input:focus-visible { box-shadow: none; }
.stepper:focus-within { border-bottom-color: var(--gold-hi); box-shadow: 0 1px 0 0 var(--gold-hi); }
@media (hover: hover) { .stepper button:not(:disabled):hover { background: var(--on-night); border-color: var(--on-night); color: var(--night); } }

/* fingers get 44px targets; the small controls keep their size and grow an invisible hit area */
@media (pointer: coarse) {
  .stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .stepper button { width: 44px; height: 44px; }
  .times button, .pop__chip, .pop__done { min-height: 44px; }
  .field__quick::after { content: ""; position: absolute; inset: -5px -4px; }
}

.form__actions { display: grid; gap: 14px; padding-top: 4px; }
.form__note { font-size: 0.84rem; color: var(--on-night-2); text-align: center; text-wrap: balance; }

.form-done { display: grid; gap: 14px; align-content: start; }
.form-done[hidden] { display: none; }
.form-done .icon { width: 36px; height: 36px; color: var(--gold-hi); }
.form-done h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--on-night); line-height: 1.15; }
.form-done p { font-size: 0.98rem; }
.form-done a:not(.btn) { color: var(--on-night); text-decoration: underline; text-underline-offset: 4px; }
.form-done .btn { justify-self: start; }

/* phones: a full-bleed banner of the Porsche above the copy */
.reserve__visual {
  order: -1; position: relative; overflow: clip;
  height: clamp(240px, 62vw, 420px);
  margin: calc(var(--section-y) * -1) calc(var(--gutter) * -1) 0;
}
/* 2px short of the bottom, like the experience photo: a fractional edge otherwise leaves a hairline of the car's floor */
.reserve__visual img { width: 100%; height: calc(100% - 2px); object-fit: cover; object-position: 50% 76%; }
.reserve__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 15, 14, 0) 50%, var(--night) 100%); }

/* wide screens: the chosen vehicle rides beside the form, held in view while it scrolls */
.ride { display: none; }
.ride__frame { position: relative; overflow: clip; aspect-ratio: 3 / 2; border-radius: var(--r-md); background: var(--night-2); }
.ride__frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(237, 232, 222, 0.2); border-radius: 8px; pointer-events: none; }
.ride__img { width: 100%; height: 100%; object-fit: cover; transition: opacity 450ms var(--ease-out), scale 900ms var(--ease-out); }
.ride__img.is-out { opacity: 0; scale: 1.035; }
.ride__frame.is-any .ride__img { object-position: 50% 74%; }
.ride__brand { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-hi); }
.ride__model { margin-top: 8px; font-family: var(--serif); font-size: clamp(1.9rem, 1.1rem + 1.1vw, 2.5rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--on-night); }
.ride__cat { margin-top: 10px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-night-2); }
.ride__cat::after { content: ""; display: block; width: 44px; height: 1px; margin-top: 18px; background: var(--gold); }
.ride__tagline { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--on-night); text-wrap: balance; }
.ride__nav { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--night-line); }
.ride__nav button {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(237, 232, 222, 0.22); color: var(--on-night);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.ride__nav button:active { transform: scale(0.94); }
.ride__nav .icon { width: 18px; height: 18px; }
.ride__count { display: inline-flex; gap: 7px; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--on-night-2); }
.ride__count span:nth-child(2) { opacity: 0.55; }
@media (hover: hover) { .ride__nav button:hover { background: var(--on-night); border-color: var(--on-night); color: var(--night); } }
@media (prefers-reduced-motion: no-preference) { .ride__text.is-entering > * { animation: fade-up 520ms var(--ease-out) both; } .ride__text.is-entering > :nth-child(2) { animation-delay: 40ms; } .ride__text.is-entering > :nth-child(3) { animation-delay: 80ms; } .ride__text.is-entering > :nth-child(4) { animation-delay: 120ms; } }

@media (min-width: 1024px) {
  .reserve__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .reserve__visual { display: none; }
}
@media (min-width: 1280px) {
  .reserve__grid { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.12fr) minmax(0, 0.74fr); column-gap: clamp(32px, 3vw, 56px); }
  .reserve .h2 { font-size: clamp(2.15rem, 1.3rem + 1.9vw, 3.3rem); }
  .pick { display: none; }
  .ride { display: grid; gap: 20px; align-content: start; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ---------- Footer (night) ---------- */

/* A closing call to action, then ruled columns and a quiet bottom line. */
.footer { position: relative; isolation: isolate; overflow: clip; background: #0b0b0a; color: var(--on-night-2); padding-block: clamp(4rem, 3rem + 3.5vw, 6.5rem) calc(clamp(1.5rem, 1rem + 1vw, 2rem) + env(safe-area-inset-bottom)); }
/* a low champagne glow behind the call to action; it fades out before the top edge, so the band above flows straight in */
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 18% 45%, rgba(212, 178, 110, 0.08), rgba(212, 178, 110, 0) 70%);
}

.footer__cta { display: grid; gap: 32px; padding-bottom: clamp(48px, 5vw, 76px); border-bottom: 1px solid var(--night-line); }
.footer__lead { display: grid; gap: 20px; justify-items: start; }
.footer__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.012em; color: var(--on-night); text-wrap: balance; }
.footer__title em { font-style: italic; color: var(--gold-hi); }
.footer__actions { display: grid; gap: 12px; }
@media (min-width: 560px) { .footer__actions { grid-auto-flow: column; justify-content: start; } }
@media (min-width: 1024px) { .footer__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; } }

/* phones: brand, then services and explore side by side, then contact; tablets: three columns under the brand */
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; padding-top: clamp(44px, 5vw, 72px); }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; align-content: start; }
.footer__brand img { width: 96px; height: auto; margin-bottom: 8px; }
.footer__tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; color: var(--on-night); }
.footer__about { max-width: 34ch; font-size: 0.95rem; line-height: 1.6; }
.footer__col:last-child { grid-column: 1 / -1; }
.footer__col h2 { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--night-line); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-hi); }
.footer__col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night); font-size: 0.98rem; transition: color 200ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) { .footer__col li a:hover { color: var(--gold-hi); transform: translateX(4px); } }

/* contact: a gold seal, a small label, the number */
.footer__contact { padding-top: 6px; }
.footer__contact li a, .footer__place { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; color: var(--on-night); font-size: 0.98rem; line-height: 1.35; }
.footer__contact .badge { width: 40px; height: 40px; background: transparent; border: 1px solid rgba(212, 178, 110, 0.42); color: var(--gold-hi); transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.footer__contact .badge .icon { width: 18px; height: 18px; }
.footer__contact small { display: block; margin-bottom: 2px; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-night-2); }
@media (hover: hover) {
  .footer__contact li a:hover { color: var(--on-night); transform: none; }
  .footer__contact li a:hover .badge { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--night); }
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col:last-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(32px, 3.5vw, 64px); }
  .footer__brand { grid-column: auto; }
}

.footer__bottom { margin-top: clamp(48px, 5vw, 72px); padding-top: 18px; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; justify-content: space-between; font-size: 0.85rem; }
.footer__bottom a { color: var(--on-night); transition: color 200ms ease; }
@media (hover: hover) { .footer__bottom p a:hover { color: var(--gold-hi); } }
.to-top { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.to-top__ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(237, 232, 222, 0.22); transition: background-color 200ms ease, border-color 200ms ease; }
.to-top .icon { width: 16px; height: 16px; color: var(--gold-hi); rotate: -90deg; transition: translate 300ms var(--ease-out), color 200ms ease; }
@media (hover: hover) {
  .to-top:hover .to-top__ring { background: var(--on-night); border-color: var(--on-night); }
  .to-top:hover .icon { color: var(--night); translate: 0 -2px; }
}
@media (max-width: 639px) { .footer__bottom { flex-direction: column; align-items: flex-start; } }

/* ---------- Mobile action bar ---------- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar);
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 244, 239, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 420ms var(--ease-drawer);
}
.actionbar.is-visible { transform: none; }
.actionbar .btn { min-height: 50px; }
.actionbar .btn--ghost { padding: 0 18px; }
@media (min-width: 1024px) { .actionbar { display: none; } }

/* ---------- Scroll reveal (armed by JS only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  /* rules under eyebrows draw in once their block arrives */
  .reveal-ready [data-reveal]:not(.is-in) .eyebrow::after, .reveal-ready .eyebrow[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
  /* and so do the gold marks over the pillars */
  .reveal-ready .pillar[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

  /* photo frames: the frame stays put and a paper curtain lifts off it. The observed frame is never
     clipped, so IntersectionObserver and lazy loading still see it. */
  .reveal-ready [data-reveal="curtain"] { opacity: 1; transform: none; }
  .reveal-ready [data-reveal="curtain"]::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: var(--curtain, var(--paper-3));
    transform-origin: 50% 0; transition: transform 1100ms var(--ease-in-out); transition-delay: var(--d, 0ms);
  }
  .reveal-ready [data-reveal="curtain"].is-in::before { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .stage::after, .hero__cue i::after { display: none; }
}

.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 16px; pointer-events: none; }