/* Taxi Plug – site styles
   Tokens first, then base, components, homepage, booking, pages. Dark is the brand default. */

:root {
  color-scheme: dark;
  --bg: #121316;
  --bg-alt: #18191d;
  --surface: #1f2126;
  --surface-2: #272a30;
  --surface-glass: rgba(31, 33, 38, 0.78);
  --line: #34373e;
  --line-soft: #2a2d33;
  --text: #f3f0e9;
  --muted: #a9a59c;
  --gold: #d6b25e;
  --gold-hi: #ecd08a;
  --gold-text: #e4c477;
  --gold-soft: rgba(214, 178, 94, 0.12);
  --on-gold: #16171a;
  --danger: #f2948a;
  --danger-bg: rgba(242, 148, 138, 0.1);
  --ok: #94cfa3;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-sm: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
  --spot: rgba(214, 178, 94, 0.16);
  --floor: rgba(255, 255, 255, 0.04);

  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  --cut: 18px;
  --cut-sm: 10px;
  --gutter: 16px;
  --container: 1240px;
  --header-h: 68px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drive: cubic-bezier(0.55, 0, 0.25, 1);
  --dur: 180ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3ee;
  --bg-alt: #ece8e0;
  --surface: #ffffff;
  --surface-2: #f3f0ea;
  --surface-glass: rgba(255, 255, 255, 0.86);
  --line: #d9d3c8;
  --line-soft: #e6e1d8;
  --text: #17181b;
  --muted: #5b5850;
  --gold: #c9a246;
  --gold-hi: #b48f36;
  --gold-text: #7c5d10;
  --gold-soft: rgba(201, 162, 70, 0.12);
  --on-gold: #17181b;
  --danger: #b3261e;
  --danger-bg: rgba(179, 38, 30, 0.08);
  --ok: #2e7d4a;
  --shadow: 0 24px 60px -32px rgba(40, 32, 10, 0.4);
  --shadow-sm: 0 10px 24px -18px rgba(40, 32, 10, 0.35);
  --spot: rgba(201, 162, 70, 0.18);
  --floor: rgba(0, 0, 0, 0.035);
}

@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-text); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
main:focus { outline: none; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon-sm { width: 1em; height: 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
output, .route-price, .vehicle-price, .summary-amount, .google-score strong { font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--on-gold); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.theme-light-only { display: none !important; }
:root[data-theme="light"] .theme-light-only { display: revert !important; }
:root[data-theme="light"] .theme-dark-only { display: none !important; }

/* ---------- Bevel: the hexagon cut from the logo ---------- */
.bevel { position: relative; background: var(--surface); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.bevel::before { content: ''; position: absolute; left: 0; top: 0; width: calc(var(--cut) * 1.4142); height: 2px; background: var(--gold); transform-origin: 0 0; transform: translateY(var(--cut)) rotate(-45deg); pointer-events: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.4em; border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active, .qty-btn:active, .icon-btn:active, .seg button:active, .swap-btn:active { transform: scale(0.97); }
.qty-btn, .icon-btn, .seg button { transition: transform 160ms var(--ease-out), border-color var(--dur), color var(--dur), background-color var(--dur); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hi); color: var(--on-gold); }
:root[data-theme="light"] .btn-gold:hover { color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--text); }
.btn-sm { min-height: 40px; padding: 0 1em; font-size: 0.9rem; }
.btn-block { width: 100%; min-height: 54px; font-size: 1.05rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.bevel-btn { clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm)); }
.bevel-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--text); }
.link-btn { background: none; border: 0; padding: 0; color: var(--gold-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 0.4em; min-height: 32px; font-weight: 600; }
.link-btn:hover { color: var(--gold-hi); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color var(--dur), color var(--dur); }
.icon-btn:hover { border-color: var(--gold); color: var(--gold-text); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.when-paused { display: none; }
.is-paused .when-paused { display: block; }
.is-paused .when-playing { display: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.site-header.is-scrolled { border-bottom-color: var(--line-soft); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto; }
.brand-mark { width: 34px; height: auto; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1; display: flex; flex-direction: column; }
.brand-name small { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.main-nav a { display: block; padding: 10px 12px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.main-nav a:hover { color: var(--gold-text); }
.nav-phone { display: none !important; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; }
.nav-toggle .when-open { display: none; }
.nav-toggle[aria-expanded="true"] .when-open { display: block; }
.nav-toggle[aria-expanded="true"] .when-closed { display: none; }
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { border-color: var(--gold); }
.lang-switch[open] summary .icon-sm { transform: rotate(180deg); }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 50; }
.lang-switch a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; color: var(--text); text-decoration: none; }
.lang-switch a:hover, .lang-switch a[aria-current] { background: var(--surface-2); }
.lang-switch a[aria-current] { color: var(--gold-text); }
.lang-code { font-family: var(--font-display); font-weight: 600; width: 24px; color: var(--muted); }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-grid; }
  .header-cta { display: none; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 39; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; display: none; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--line-soft); }
  .nav-phone { display: flex !important; align-items: center; gap: 10px; margin-top: 12px; color: var(--gold-text) !important; border: 0 !important; }
}
@media (max-width: 420px) { .brand-name small { display: none; } .lang-switch summary .icon:first-child { display: none; } }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field-label, .qty-label { font-weight: 600; font-size: 0.875rem; }
.optional { font-weight: 400; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; min-height: 50px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 0; font-size: 1rem; line-height: 1.4; transition: border-color var(--dur), box-shadow var(--dur);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; align-items: start; } }
.help { color: var(--muted); font-size: 0.875rem; margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.help .icon { color: var(--gold-text); margin-top: 2px; }
.field-error { color: var(--danger); font-size: 0.875rem; margin: 0; font-weight: 500; }
.form-alert { color: var(--danger); background: var(--danger-bg); border-left: 3px solid var(--danger); padding: 12px 14px; margin: 0; font-size: 0.95rem; }
.form-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-left: 3px solid var(--ok); padding: 12px 14px; margin: 0; display: flex; gap: 10px; align-items: flex-start; }

/* Place combobox */
.combo { position: relative; }
.combo > .icon { position: absolute; left: 14px; top: 15px; color: var(--gold-text); pointer-events: none; }
.combo input { padding-left: 44px; padding-right: 44px; }
.combo input.is-resolved { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.combo-clear { position: absolute; right: 4px; top: 4px; width: 42px; height: 42px; display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; }
.combo-clear:hover { color: var(--text); }
.combo-clear .icon { width: 1em; height: 1em; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); max-height: min(380px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
/* Dropdowns grow out of their field, never from nowhere */
.combo-list:not([hidden]), .lang-switch[open] ul { animation: drop-in 180ms var(--ease-out); transform-origin: top center; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.combo-group { padding: 10px 10px 4px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.combo-opt { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; cursor: pointer; }
.combo-ico { width: 32px; height: 32px; display: grid; place-items: center; background: var(--surface-2); color: var(--gold-text); }
.combo-ico .icon { width: 1em; height: 1em; }
.combo-txt { display: grid; min-width: 0; }
.combo-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-txt span { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-code { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--gold-text); border: 1px solid var(--line); padding: 2px 6px; }
.combo-opt[aria-selected="true"], .combo-opt:hover { background: var(--surface-2); }
.combo-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--gold); }
.combo-empty { padding: 12px; color: var(--muted); }
.combo-powered { padding: 6px 10px 2px; font-size: 0.7rem; color: var(--muted); text-align: right; }

/* Date & time picker */
.dt-field { position: relative; }
.dt-trigger { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: border-color var(--dur); }
.dt-trigger .icon { color: var(--gold-text); }
.dt-trigger:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.dt-field.is-open .dt-trigger { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.dt-value { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-trigger.has-value .dt-value { color: var(--text); font-weight: 500; }
.dt-chev { color: var(--muted) !important; transition: transform var(--dur); }
.dt-field.is-open .dt-chev { transform: rotate(180deg); }
.dt-pop { position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 2 * var(--gutter))); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px; display: none; }
.dt-pop.is-open { display: block; animation: pop-in 160ms var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.dt-tab { display: grid; text-align: left; gap: 2px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.dt-tab small { font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; color: var(--muted); }
.dt-tab[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.dt-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dt-month-label { font-family: var(--font-display); font-weight: 600; text-transform: capitalize; }
.dt-nav { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 1px solid transparent; cursor: pointer; color: var(--text); }
.dt-nav:hover { border-color: var(--line); }
.dt-nav:disabled { opacity: 0.3; cursor: default; }
.dt-week, .dt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-week span { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--muted); padding: 4px 0; text-transform: capitalize; }
.dt-day { aspect-ratio: 1; display: grid; place-items: center; background: none; border: 1px solid transparent; cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); transition: background-color 120ms, border-color 120ms; }
.dt-day:hover:not(:disabled) { background: var(--surface-2); }
.dt-day.is-today { border-color: var(--line); }
.dt-day.is-selected { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.dt-day:disabled { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; }
.dt-time { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dt-col { display: grid; gap: 6px; }
.dt-col-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.dt-list { height: 236px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; align-content: start; scroll-snap-type: y proximity; padding-right: 4px; }
.dt-opt { min-height: 40px; background: var(--bg); border: 1px solid transparent; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; scroll-snap-align: center; color: var(--text); }
.dt-opt:hover:not(:disabled) { border-color: var(--line); }
.dt-opt.is-selected { background: var(--gold); color: var(--on-gold); }
.dt-opt:disabled { color: color-mix(in srgb, var(--muted) 40%, transparent); cursor: default; }
.dt-foot { margin-top: 12px; }
.dt-foot .btn { width: 100%; }
/* floating on <body>: top/left come from the script on desktop */
.dt-pop.is-floating { position: fixed; z-index: 70; color: var(--text); }
.dt-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, 0.55); }
@media (max-width: 640px) {
  .dt-pop, .dt-pop.is-floating { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 88svh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-width: 1px 0 0; }
  .dt-pop.is-open { animation: sheet-in 220ms var(--ease-out); }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Quantity steppers */
.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.qty-grid { display: grid; gap: 0 28px; grid-template-columns: 1fr; border-top: 1px solid var(--line-soft); }
@media (min-width: 560px) { .qty-grid { grid-template-columns: 1fr 1fr; } }
.qty-grid .qty { border-bottom: 1px solid var(--line-soft); }
.qty-controls { display: flex; align-items: center; gap: 4px; }
.qty-btn { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); cursor: pointer; color: var(--text); transition: border-color var(--dur); touch-action: manipulation; }
.qty-btn:hover:not(:disabled) { border-color: var(--gold); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qty output { min-width: 34px; text-align: center; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.qty-compact { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; }
.qty-compact .qty-controls { height: 50px; border: 1px solid var(--line); background: var(--bg); justify-content: space-between; padding: 0 3px; }
.qty-compact .qty-btn { border: 0; background: none; width: 42px; height: 42px; }
.qty-compact .qty-btn:hover:not(:disabled) { color: var(--gold-text); }

/* Switch */
.switch { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { flex: none; width: 44px; height: 26px; margin-top: 1px; background: var(--surface-2); border: 1px solid var(--line); position: relative; transition: background-color var(--dur); }
.switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--muted); transition: transform var(--dur) var(--ease-out), background-color var(--dur); }
.switch input:checked + .switch-ui { background: var(--gold-soft); border-color: var(--gold); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); background: var(--gold); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch strong { display: block; }
.switch small { color: var(--muted); font-size: 0.85rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 660px; margin-bottom: clamp(26px, 4vw, 44px); }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.split { max-width: none; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; }
.section-head.split > div { max-width: 660px; }

/* ---------- Hero: a dark, cinematic stage in both themes ---------- */
.hero, .showcase, .band, .finale {
  /* the stages are always dark, so the cars and the gold read like a showroom at night */
  --bg: #0e0f11; --bg-alt: #15161a; --surface: #1c1e22; --surface-2: #25282d; --surface-glass: rgba(24, 26, 30, 0.72);
  --line: #34373e; --line-soft: #26292e; --text: #f3f0e9; --muted: #a9a59c; --gold: #d6b25e; --gold-hi: #ecd08a; --gold-text: #e4c477; --on-gold: #16171a; --ok: #94cfa3;
  color-scheme: dark;
  position: relative; overflow: hidden; color: var(--text);
}
.hero {
  padding: clamp(28px, 4.5vw, 64px) 0 clamp(36px, 4vw, 64px);
  background: radial-gradient(ellipse 60% 55% at 32% 80%, rgba(214, 178, 94, 0.16), transparent 70%), linear-gradient(180deg, #17181c, #0e0f11 80%);
}
.hero-backdrop { position: absolute; inset: 0; pointer-events: none; }
.hero-word {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 17vw, 17rem); line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(214, 178, 94, 0.2);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}
.hero-ridge { position: absolute; left: 0; width: 100%; bottom: 16%; height: 30%; }
.hero-ridge path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-ridge .ridge-near { stroke: var(--gold); stroke-width: 1.2; opacity: 0.5; }
.hero-ridge .ridge-far { stroke: var(--gold); stroke-width: 1; opacity: 0.18; }
.hero-spot { position: absolute; left: 4%; width: 60%; bottom: 0; height: 75%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 236, 190, 0.08), transparent 65%); }
.hero-word, .hero-ridge, .hero-show { will-change: transform; }
.hero-grid { position: relative; display: grid; gap: 28px; align-items: start; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; } }
.hero-main { position: relative; min-width: 0; }
.rating-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); background: var(--surface-glass); color: var(--text); text-decoration: none; font-size: 0.9rem; margin-bottom: 18px; }
.rating-pill:hover { border-color: var(--gold); color: var(--text); }
.rating-pill strong { font-family: var(--font-display); font-size: 1rem; }
.rating-pill span:last-child { color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars .icon { fill: currentColor; width: 15px; height: 15px; }
.hero h1 { font-size: clamp(2.2rem, 1.2rem + 3.3vw, 4rem); font-weight: 500; letter-spacing: -0.025em; max-width: 15ch; margin-bottom: 0.35em; }
.hero-claims { display: grid; max-width: 560px; min-height: 3.4em; }
.hero-claim { grid-area: 1 / 1; margin: 0; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.hero-claim strong { color: var(--gold-text); font-weight: 600; }
.hero-claim.is-active { opacity: 1; transform: none; }

/* Showroom: the real cars drive onto a spot-lit stage, one per claim */
.hero-show { position: relative; width: min(100%, 780px); margin-top: clamp(4px, 1.6vw, 14px); }
.hero-stage { position: relative; aspect-ratio: 2.25; transform-origin: 50% 80%; }
.stage-spot { position: absolute; left: 50%; top: -42%; width: 78%; height: 150%; translate: -50% 0; background: radial-gradient(ellipse 46% 62% at 50% 0%, rgba(255, 232, 186, 0.17), rgba(255, 232, 186, 0.05) 55%, transparent 72%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); pointer-events: none; }
.stage-floor { position: absolute; left: 0; right: 0; bottom: 2%; height: 34%; background: radial-gradient(ellipse 48% 42% at 50% 46%, rgba(214, 178, 94, 0.26), rgba(214, 178, 94, 0.06) 55%, transparent 72%); }
.hero-car { position: absolute; left: 50%; bottom: 14%; width: var(--w); margin: 0; translate: -50% 0; opacity: 0; pointer-events: none; }
.hero-car.is-active { opacity: 1; }
.hero-car img { display: block; width: 100%; height: auto; -webkit-box-reflect: below -3px linear-gradient(transparent 64%, rgba(255, 255, 255, 0.16)); }
/* contact shadow under the tyres */
.hero-car::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 12%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.85), transparent 70%); filter: blur(4px); }
/* a band of light crosses the paintwork once the car has stopped (masked to the car itself) */
.car-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 220, 0.5) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 135% 0; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.car-flare { position: absolute; left: var(--hx); top: var(--hy); width: 22%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 252, 240, 0.95) 0, rgba(255, 238, 200, 0.4) 14%, rgba(255, 220, 160, 0.08) 38%, transparent 62%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.car-label { position: absolute; left: 0; bottom: -26%; display: flex; gap: 10px; align-items: baseline; font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: 0; }
.car-label b { color: var(--gold-text); font-weight: 600; }
.hero-car.is-active .car-label { opacity: 1; transition: opacity 600ms ease 700ms; }
@media (max-width: 760px) { .hero-stage { aspect-ratio: 1.9; } .hero-car { bottom: 18%; } .car-label { bottom: -30%; } }
.hero-film-toggle { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; display: grid; place-items: center; background: var(--surface-glass); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.hero-film-toggle:hover { color: var(--text); border-color: var(--gold); }
.hero-film-toggle .icon { width: 14px; height: 14px; }
@media (max-width: 760px) { .hero-word { top: 46%; font-size: 26vw; } .hero-ridge { bottom: 34%; height: 18%; } }
/* Booking card */
.book-card { position: relative; z-index: 2; padding: clamp(20px, 3vw, 28px); background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 14px; }
.book-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.book-card-title { font-size: 1.45rem; margin: 0; }
.book-card-sub { margin: -8px 0 0; color: var(--muted); font-size: 0.92rem; }
.route-fields { position: relative; display: grid; gap: 10px; }
/* Swap sits exactly halfway between the two address boxes: the container middle lies inside the
   gap above the second label, so it moves down by half of that label row (line + 6px gap). */
.swap-btn { position: absolute; right: 14px; top: calc(50% + 0.875rem * 0.8 + 3px); translate: 0 -50%; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 50%; color: var(--gold-text); cursor: pointer; box-shadow: 0 0 0 5px var(--surface-glass), var(--shadow-sm); transition: transform 160ms var(--ease-out), border-color var(--dur), background-color var(--dur); }
@media (hover: hover) and (pointer: fine) { .swap-btn:hover { border-color: var(--gold); background: var(--gold-soft); } .swap-btn:hover .icon { transform: rotate(180deg); } }
.swap-btn .icon { width: 1.1em; height: 1.1em; transition: transform 360ms var(--ease-out); }
.route-fields .field:first-of-type .combo input { padding-right: 56px; }
.book-row { display: grid; grid-template-columns: 1fr 132px; gap: 10px; align-items: end; }
.book-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.875rem; color: var(--muted); }
.book-assure li { display: flex; gap: 8px; align-items: center; }
.book-assure .icon { color: var(--ok); width: 1.1em; height: 1.1em; }
.book-assure.inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }

/* Trust strip */
.trust { border-block: 1px solid var(--line-soft); background: var(--surface); }
.trust-list { list-style: none; margin: 0 auto; padding-block: 24px; display: grid; gap: 18px 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .trust-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .trust-list { grid-template-columns: repeat(4, 1fr); } }
.trust-list li { display: flex; gap: 14px; align-items: flex-start; }
.trust-list .icon { color: var(--gold-text); margin-top: 3px; }
.trust-list strong { display: block; font-weight: 600; }
.trust-list span { color: var(--muted); font-size: 0.9rem; }

/* Route cards */
.seg { display: inline-flex; border: 1px solid var(--line); padding: 3px; gap: 3px; background: var(--surface); }
.seg button { display: inline-flex; gap: 8px; align-items: center; min-height: 42px; padding: 0 16px; background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg button .icon { width: 1.05em; height: 1.05em; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }
/* Routes read like a departures board: hairline rows, a gold wash sweeps in on hover */
.route-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .route-grid { grid-template-columns: 1fr 1fr; } }
.route-grid > li { border-bottom: 1px solid var(--line); }
.route-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 22px; gap: 16px; align-items: center; padding: 20px 8px; height: 100%; color: var(--text); text-decoration: none; transition: color var(--dur); }
.route-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--gold-soft), transparent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out); }
.route-go { color: var(--gold-text); opacity: 0.45; transition: transform 320ms var(--ease-out), opacity 320ms; }
.route-go .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .route-card:hover { color: var(--text); }
  .route-card:hover::before { transform: scaleX(1); }
  .route-card:hover .route-go { transform: translateX(4px); opacity: 1; }
  .route-card:hover .route-ico { background: var(--gold); color: var(--on-gold); }
}
.route-card:active { transform: scale(0.99); }
.route-ico { width: 44px; height: 44px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-text); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); transition: background-color 320ms, color 320ms; }
.route-to { display: grid; min-width: 0; }
.route-to strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.route-to small { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 420px) { .route-card { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; } .route-ico { width: 36px; height: 36px; } .route-go { display: none; } }
.route-price { display: grid; text-align: right; line-height: 1.2; }
.route-price s { color: var(--muted); font-size: 0.85rem; text-decoration-thickness: 1px; }
.route-price strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-text); font-weight: 600; }
.route-note { margin: 18px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Arrival story: a real sequence on one gold line, not another card grid */
.arrival-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.arrival-line::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 15%, transparent)); }
.arrival-line li { position: relative; padding-left: 72px; }
.arrival-node { position: absolute; left: 0; top: 0; width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg); color: var(--gold-text); border: 1px solid var(--gold); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.arrival-node::after { content: ''; position: absolute; inset: 1px; background: var(--gold-soft); clip-path: inherit; z-index: -1; }
.arrival-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--gold-text); margin: 4px 0 6px; }
.arrival-line h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.arrival-line p { color: var(--muted); margin: 0; max-width: 34ch; }
@media (min-width: 900px) {
  .arrival-line { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .arrival-line::before { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 15%, transparent)); }
  .arrival-line li { padding-left: 0; padding-top: 70px; }
}

/* Promise + comparison */
.promise { background: radial-gradient(ellipse 50% 80% at 0% 50%, var(--gold-soft), transparent 70%), var(--bg-alt); }
.promise-layout { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .promise-layout { grid-template-columns: 0.8fr 1.2fr; gap: 72px; } }
.promise-mark { width: 44px; height: auto; margin-bottom: 22px; }
.promise-copy > p { color: var(--muted); font-size: 1.05rem; max-width: 44ch; }
.promise-sign { display: grid; gap: 2px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 44ch; }
.promise-sign strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--text); }
.promise-sign span { color: var(--muted); font-size: 0.9rem; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line-soft); }
.compare-table caption { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; padding-bottom: 14px; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
.compare-table thead th { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); }
.compare-table thead th.is-us { color: var(--gold-text); }
.compare-table tbody th { font-weight: 600; width: 26%; }
.compare-table td { color: var(--muted); }
.compare-table td.is-us { color: var(--text); background: var(--gold-soft); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gold) 40%, transparent), inset -1px 0 0 color-mix(in srgb, var(--gold) 40%, transparent); }
.compare-table td.is-us .icon { width: 1em; height: 1em; color: var(--gold-text); margin-right: 8px; vertical-align: -2px; }
.compare-table thead th.is-us { background: var(--gold-soft); box-shadow: inset 0 2px 0 var(--gold); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 640px) {
  .compare-table thead { display: none; }
  .compare-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-soft); }
  .compare-table tbody th { grid-column: 1 / -1; width: auto; border: 0; padding-bottom: 6px; }
  .compare-table td { border: 0; padding-top: 8px; box-shadow: none !important; }
  .compare-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
  .compare-table td.is-us::before { color: var(--gold-text); }
}

/* Reviews */
.section-reviews { background: radial-gradient(ellipse 60% 70% at 85% 30%, var(--gold-soft), transparent 70%), var(--bg); }
.reviews-layout { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .reviews-layout { grid-template-columns: 0.75fr 1.25fr; gap: 64px; } }
.reviews-head h2 { margin-bottom: 0.6em; }
.google-score { display: inline-flex; gap: 14px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; margin-bottom: 12px; }
.google-score:hover { border-color: var(--gold); color: var(--text); }
.google-g { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: #4285f4; font-family: Arial, sans-serif; font-weight: 700; font-size: 1.3rem; }
.google-score > span:last-child { display: grid; gap: 2px; }
.google-score strong { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.google-score small { color: var(--muted); }
.reviews-head .link-btn { display: flex; }
.review-carousel { position: relative; }
.review-track { display: grid; }
.review-slide { grid-area: 1 / 1; margin: 0; padding: clamp(24px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line-soft); opacity: 0; visibility: hidden; filter: blur(3px); transform: translateX(12px); transition: opacity 420ms ease, transform 420ms var(--ease-out), filter 420ms ease, visibility 0s 420ms; }
.review-slide.is-active { opacity: 1; visibility: visible; filter: none; transform: none; transition: opacity 420ms ease, transform 420ms var(--ease-out), filter 420ms ease; }
.review-slide blockquote { margin: 16px 0 22px; }
.review-slide blockquote p { margin: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.55; }
.review-slide figcaption { display: flex; gap: 12px; align-items: center; }
.review-avatar { width: 42px; height: 42px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-text); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.review-slide figcaption > span:last-child { display: grid; }
.review-slide figcaption small { color: var(--muted); font-size: 0.82rem; }
.review-controls { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.review-dots { display: flex; gap: 6px; margin: 0 8px; }
.review-dots button { width: 28px; height: 4px; padding: 0; border: 0; background: var(--line); cursor: pointer; position: relative; }
.review-dots button::after { content: ''; position: absolute; inset: -10px 0; }
.review-dots button[aria-current="true"] { background: var(--gold); }
.review-controls [data-review-toggle] { margin-left: auto; }

/* Business */
.business { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .business { grid-template-columns: 1fr 1fr; gap: 64px; } }
.business-copy > p { color: var(--muted); font-size: 1.05rem; }
.check-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 14px; align-items: center; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line-soft); font-weight: 500; }
.check-list .icon { color: var(--gold-text); }
.business-form { padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.business-form h3 { margin: 0 0 4px; }

/* FAQ */
.faq-layout { display: grid; gap: 28px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 0.7fr 1.3fr; gap: 64px; } }
.faq-contact { color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 2px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { color: var(--gold-text); transition: transform var(--dur) var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { color: var(--muted); padding: 0 40px 20px 2px; margin: 0; max-width: 70ch; }

/* Closing CTA actions (the finale stage itself is styled with the cinematic sections) */
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-inline { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); font-size: 0.92rem; }
.contact-inline li { display: flex; gap: 8px; align-items: center; }
.contact-inline .icon { color: var(--gold-text); width: 1.1em; height: 1.1em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-alt); padding-top: 56px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1fr; } }
.footer-brand img { width: 180px; margin-bottom: 16px; }
.footer-brand p { color: var(--muted); max-width: 36ch; }
.footer-title { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links a, .footer-links .link-btn, .footer-address { display: inline-flex; gap: 10px; align-items: center; min-height: 36px; color: var(--muted); text-decoration: none; font-weight: 400; }
.footer-links .link-btn { font-size: 1rem; }
.footer-links a:hover, .footer-links .link-btn:hover { color: var(--gold-text); }
.footer-address { align-items: flex-start; padding-top: 6px; }
.footer-links .icon { color: var(--gold-text); }
.footer-base { margin-top: 48px; padding-block: 20px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.875rem; }
.footer-base p { margin: 0; }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .action-bar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .action-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--line); }
  .action-bar .action-book { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
  .consent { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- Consent ---------- */
.consent { position: fixed; z-index: 60; left: var(--gutter); right: var(--gutter); bottom: 16px; max-width: 560px; margin-left: auto; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 20px; }
.consent p { font-size: 0.9rem; color: var(--muted); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Booking page ---------- */
.booking-page { padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 8vw, 100px); }
.booking-page:has(.booking-hero) { padding-top: 0; }
/* Booking header: the same dark stage as the homepage, with the reasons to trust us next to the title */
.booking-hero {
  --bg: #0e0f11; --surface: #1c1e22; --surface-2: #25282d; --line: #34373e; --line-soft: #26292e; --text: #f3f0e9; --muted: #a9a59c; --gold: #d6b25e; --gold-hi: #ecd08a; --gold-text: #e4c477; --ok: #94cfa3;
  color-scheme: dark; color: var(--text); margin-bottom: clamp(24px, 4vw, 40px); padding-top: clamp(28px, 5vw, 56px);
  background: radial-gradient(ellipse 50% 90% at 85% 0%, rgba(214, 178, 94, 0.14), transparent 70%), linear-gradient(180deg, #17181c, #0e0f11);
}
.booking-hero .stepper { margin-bottom: 0; }
.booking-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; color: var(--muted); }
.booking-trust li, .booking-trust a { display: inline-flex; align-items: center; gap: 8px; }
.booking-trust a { color: var(--muted); text-decoration: none; }
.booking-trust a:hover { color: var(--text); }
.booking-trust strong { color: var(--text); font-family: var(--font-display); }
.booking-trust .icon { color: var(--ok); width: 1.1em; height: 1.1em; }
.booking-trust .stars .icon { color: var(--gold); }
.booking-head { max-width: 680px; margin-bottom: 22px; }
.booking-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 500; }
.booking-head p { color: var(--muted); margin: 0; }
.stepper { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 6px; }
.stepper li { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; border-top: 3px solid var(--line); color: var(--muted); font-weight: 600; font-size: 0.9rem; transition: color var(--dur); }
/* the gold fills each step from the left as it is reached */
.stepper li::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.stepper li[aria-current], .stepper li.is-done { color: var(--text); }
.stepper li[aria-current]::before, .stepper li.is-done::before { transform: scaleX(1); }
.step-num { font-family: var(--font-display); color: var(--gold-text); }
@media (max-width: 560px) { .stepper .step-name { display: none; } .stepper li[aria-current] .step-name { display: inline; } }
.booking-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .booking-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px; } }
.booking-form { display: grid; gap: 20px; min-width: 0; }
.step { padding: clamp(20px, 3.5vw, 32px); display: grid; gap: 18px; min-width: 0; }
.step-title { font-size: 1.5rem; margin: 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.step-title span { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--gold-text); }
.step-title:focus { outline: none; }
.sub-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin: 8px 0 -6px; padding: 0; }
.step-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.step-actions:has(> :only-child) { justify-content: flex-end; }
.step-actions.center { justify-content: center; }
.error-summary { background: var(--danger-bg); border-left: 3px solid var(--danger); padding: 14px 16px; }
.error-summary:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
.error-summary ul { margin: 8px 0 0; padding-left: 20px; }
.error-summary a { color: var(--danger); }
.places, .stops { display: grid; gap: 14px; }
.stops:empty { display: none; }
.stop-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.stop-row .icon-btn { height: 50px; width: 50px; margin-bottom: 0; }
.stop-row .field-error:not([hidden]) ~ * { margin-bottom: 0; }
.add-stop { justify-self: start; text-decoration: none; }
.flight-box { padding: 16px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }

.vehicles { display: grid; gap: 12px; }
.vehicle-card { display: grid; grid-template-columns: 112px 1fr auto; grid-template-areas: "img name price" "img desc price" "img models state" "img cap state"; gap: 2px 16px; align-items: center; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--dur), background-color var(--dur); }
.vehicle-card img { grid-area: img; width: 112px; height: auto; transition: transform 500ms var(--ease-cine); }
@media (min-width: 521px) { .vehicle-card { grid-template-columns: 150px 1fr auto; } .vehicle-card img { width: 150px; } }
.vehicle-name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.vehicle-desc { grid-area: desc; font-size: 0.875rem; color: var(--muted); }
.vehicle-models { grid-area: models; font-size: 0.8rem; color: var(--muted); }
.vehicle-cap { grid-area: cap; font-size: 0.8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.vehicle-cap:empty { display: none; }
.vehicle-price { grid-area: price; text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.vehicle-price s { color: var(--muted); font-size: 0.85rem; }
.vehicle-price s:empty { display: none; }
.vehicle-price strong { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; color: var(--gold-text); }
.vehicle-price small { color: var(--ok); font-size: 0.72rem; font-weight: 600; }
.vehicle-state { grid-area: state; justify-self: end; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.vehicle-state .when-on { display: none; align-items: center; gap: 4px; color: var(--gold-text); }
.vehicle-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.vehicle input:checked + .vehicle-card { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--bg)); box-shadow: inset 0 0 0 1px var(--gold); }
.vehicle input:checked + .vehicle-card .when-on { display: inline-flex; }
.vehicle input:checked + .vehicle-card .when-off { display: none; }
.vehicle input:focus-visible + .vehicle-card { outline: 2px solid var(--gold); outline-offset: 2px; }
.vehicle.is-unsuitable .vehicle-card { opacity: 0.55; }
.vehicle-warn { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); font-size: 0.875rem; margin: 6px 0 0; font-weight: 500; }
@media (max-width: 520px) {
  .vehicle-card { grid-template-columns: 84px 1fr; grid-template-areas: "img name" "img price" "desc desc" "models models" "cap cap" "state state"; }
  .vehicle-card img { width: 84px; }
  .vehicle-price { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .vehicle-state { justify-self: start; margin-top: 6px; }
}
.pay { border: 0; padding: 0; margin: 0; }
.pay-grid { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 720px) { .pay-grid { grid-template-columns: repeat(3, 1fr); } }
.pay-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--dur); }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt .icon { color: var(--gold-text); margin-top: 2px; }
.pay-opt span { display: grid; gap: 2px; }
.pay-opt small { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.pay-opt:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pay-opt:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--bg)); }
.pay-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.terms-note { font-size: 0.875rem; color: var(--muted); margin: 0; }

.booking-side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1000px) { .booking-side { position: sticky; top: calc(var(--header-h) + 16px); } }
.map-wrap { padding: 0; aspect-ratio: 4 / 3; max-height: 340px; width: 100%; background: var(--surface-2); }
.map { position: absolute; inset: 0; }
.map-msg { position: absolute; inset: auto 16px 16px 16px; margin: 0; padding: 12px 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); font-size: 0.9rem; }
.map-msg.is-error { border-color: var(--danger); }
.map-msg.is-loading::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 10px; border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.summary { padding: 22px 24px; }
/* the chosen class's car waits on a small lit stage at the top of the summary */
.summary-amount strong.is-bump { animation: bump 700ms var(--ease-out); }
@keyframes bump { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 70%, transparent); } 100% { text-shadow: 0 0 0 transparent; } }
.after { padding: 20px 24px; }
.after h2 { font-size: 1.05rem; margin-bottom: 12px; }
.after ol { list-style: none; counter-reset: after; margin: 0; padding: 0; display: grid; gap: 10px; }
.after li { counter-increment: after; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 0.92rem; color: var(--muted); }
.after li::before { content: counter(after, decimal-leading-zero); font-family: var(--font-display); font-weight: 600; color: var(--gold-text); }
/* Step 1: the Smart-Traveler card makes the return trip an offer, not a checkbox */
.bonus-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; cursor: pointer; background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, var(--bg)), var(--bg) 70%); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); transition: border-color var(--dur), box-shadow var(--dur); }
.bonus-card input { position: absolute; opacity: 0; pointer-events: none; }
.bonus-card input:checked + .switch-ui { background: var(--gold-soft); border-color: var(--gold); }
.bonus-card input:checked + .switch-ui::after { transform: translateX(18px); background: var(--gold); }
.bonus-card input:focus-visible + .switch-ui { outline: 2px solid var(--gold); outline-offset: 2px; }
.bonus-card:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.bonus-text { display: grid; gap: 2px; }
.bonus-text strong { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.05rem; }
.bonus-tag { flex: none; padding: 2px 8px; background: var(--gold); color: var(--on-gold); font-size: 0.8rem; letter-spacing: 0.02em; white-space: nowrap; }
.bonus-text > span { font-weight: 500; }
.bonus-text small { color: var(--muted); font-size: 0.85rem; }
.route-ok { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ok); font-weight: 600; font-size: 0.95rem; }
.route-ok .icon { width: 1.1em; height: 1.1em; }
.bonus-note { display: flex; gap: 8px; align-items: center; margin: 0; padding: 12px 14px; color: var(--text); background: var(--gold-soft); border-left: 3px solid var(--gold); font-weight: 500; }
.bonus-note .icon { color: var(--gold-text); }

/* Step 2: big class cards; each one shows all its cars in turn */
.vehicles { gap: 14px; }
.vehicle-card { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) auto; grid-template-areas: none; gap: 0 20px; align-items: stretch; padding: 0; overflow: hidden; }
.vehicle-media { position: relative; display: block; min-height: 170px; background: radial-gradient(ellipse 60% 40% at 50% 82%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), linear-gradient(180deg, #1a1c20, #0f1013); }
.vehicle-media img { position: absolute; left: 6%; right: 6%; bottom: 22%; width: 88%; height: auto; opacity: 0; transform: translateX(-14px); filter: blur(3px); transition: opacity 600ms ease, transform 800ms var(--ease-cine), filter 600ms ease; }
.vehicle-media img.is-active { opacity: 1; transform: none; filter: none; }
.vehicle-media img.is-leaving { opacity: 0; transform: translateX(14px); filter: blur(3px); }
.vehicle-card img { width: 88%; grid-area: auto; }
.vehicle input:checked + .vehicle-card .vehicle-media img.is-active { transform: scale(1.04); }
.vehicle-model { position: absolute; left: 12px; bottom: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #cfc9bd; }
.vehicle-badge { position: absolute; left: 10px; top: 10px; z-index: 1; white-space: nowrap; padding: 3px 8px; background: var(--gold); color: var(--on-gold); font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; }
.vehicle-info { display: grid; align-content: center; gap: 4px; padding: 16px 0; min-width: 0; }
.vehicle-info > *, .vehicle-buy > * { grid-area: auto; }
.vehicle-buy { display: grid; align-content: center; justify-items: end; gap: 8px; padding: 16px 18px 16px 0; text-align: right; }
.vehicle-pp { color: var(--muted) !important; font-weight: 500 !important; }
.vehicle-pp:empty { display: none; }
@media (max-width: 760px) {
  .vehicle-card { grid-template-columns: 1fr; }
  /* height from the padding (47.6% of the width = 2.1:1): Safari ignores aspect-ratio on a stretched grid item
     whose children are all absolutely positioned, which collapsed the photo to nothing on iPhones */
  .vehicle-media { min-height: 0; height: 0; padding-bottom: 47.6%; }
  .vehicle-media img { left: 11%; width: 78%; bottom: 12%; }
  .vehicle-info { padding: 14px 16px 0; }
  .vehicle-buy { grid-auto-flow: column; justify-content: space-between; align-items: end; justify-items: start; padding: 10px 16px 16px; text-align: left; }
}

/* Step 3: how the guest arrives */
.arrival { border: 0; margin: 0; padding: 0; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.mode-opt { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 8px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 0.92rem; text-align: center; transition: border-color var(--dur), background-color var(--dur), color var(--dur); }
.mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mode-opt .icon { width: 1.4em; height: 1.4em; color: var(--gold-text); }
.mode-opt:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.mode-opt:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--bg)); box-shadow: inset 0 0 0 1px var(--gold); }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.arrival-fields { display: grid; gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .arrival-fields:not([hidden]) { animation: step-in 420ms var(--ease-cine) both; } }

/* Step 5: review with edit links and an itemised price */
.review { display: grid; gap: 12px; }
.review-group { padding: 14px 16px; background: var(--bg); border: 1px solid var(--line-soft); }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.review-head h3 { margin: 0; font-size: 1rem; }
.review-head .link-btn { min-height: 28px; font-size: 0.88rem; }
.review dl, .review-price dl { margin: 0; display: grid; gap: 6px; }
.review dl > div { display: grid; grid-template-columns: minmax(110px, 0.4fr) 1fr; gap: 12px; font-size: 0.93rem; }
.review dt { color: var(--muted); }
.review dd { margin: 0; overflow-wrap: anywhere; }
.review-price { padding: 16px 18px; background: color-mix(in srgb, var(--gold) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
.review-price:empty { display: none; }
.review-price h3 { font-size: 1rem; margin: 0 0 10px; }
.review-price dl > div { display: flex; justify-content: space-between; gap: 16px; }
.review-price dd { margin: 0; font-variant-numeric: tabular-nums; }
.review-price .is-bonus { color: var(--ok); font-weight: 600; }
.review-price .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; }
.review-price .is-total dd { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-text); }
@media (max-width: 520px) { .review dl > div { grid-template-columns: 1fr; gap: 0; } }

/* "Route bestätigen" waits until the route is complete (still clickable, it then explains what is missing) */
.btn.is-waiting { opacity: 0.45; filter: saturate(0.4); }
.btn.is-waiting:hover { background: var(--gold); }

/* Return leg of the Smart-Traveler bonus */
.return-fields { display: grid; gap: 12px; padding: 14px 16px; background: var(--bg); border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); }
.return-route { display: flex; gap: 12px; align-items: center; margin: 0; }
.return-route .icon { color: var(--gold-text); flex: none; }
.return-route span { display: grid; min-width: 0; }
.return-route small { color: var(--muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.return-route strong { overflow-wrap: anywhere; }
.return-hint { color: var(--gold-text); }

/* Step 3: four folding groups keep the optional extras short */
.opt-group { border: 1px solid var(--line); background: var(--bg); }
.opt-group + .opt-group { margin-top: -10px; border-top: 0; }
.opt-group summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; cursor: pointer; list-style: none; font-weight: 600; }
.opt-group summary::-webkit-details-marker { display: none; }
.opt-group summary > .icon:first-child { color: var(--gold-text); }
.opt-title { flex: 1; }
.opt-sum { color: var(--gold-text); font-weight: 600; font-size: 0.85rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-chev { color: var(--muted); transition: transform 240ms var(--ease-out); }
.opt-group[open] .opt-chev { transform: rotate(180deg); }
.opt-group[open] summary { border-bottom: 1px solid var(--line-soft); }
.opt-body { display: grid; gap: 14px; padding: 16px; }
.opt-body .mode-grid { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .opt-group[open] .opt-body { animation: step-in 360ms var(--ease-cine) both; } }

/* Review: an icon per block, the saving and a nudge for the return trip */
.review-head { justify-content: flex-start; align-items: center; }
.review-head h3 { flex: 1; }
.review-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: none; background: var(--gold-soft); color: var(--gold-text); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.review-ico .icon { width: 17px; height: 17px; }
.review-save { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: color-mix(in srgb, var(--ok) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); }
.review-save .review-ico { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.review-save div { display: grid; }
.review-save strong { color: var(--ok); font-size: 1.05rem; }
.review-save span { color: var(--muted); font-size: 0.9rem; }
.add-return { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, var(--bg)), var(--bg) 70%); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); }
.add-return div { display: grid; gap: 2px; }
.add-return span:not(.bonus-tag) { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 640px) { .add-return { grid-template-columns: auto 1fr; } .add-return .btn { grid-column: 1 / -1; } }

/* Side column: the summary leads, the map follows */
.summary-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.summary .summary-top h2 { margin: 0; }
.sheet-close { display: none; }
@media (min-width: 1000px) { .booking-side { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: thin; } .map-wrap { max-height: 260px; } }

/* Tablets and phones: the summary becomes a sheet that slides up from the price bar */
@media (max-width: 999px) {
  body[data-page="booking"] { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .booking-side { position: fixed; z-index: 62; left: 0; right: 0; bottom: 0; max-height: 84svh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--gold); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45); transform: translateY(105%); visibility: hidden; transition: transform 380ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)), visibility 0s 380ms; }
  .booking-side.is-sheet-open { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1); }
  .sheet-close { display: inline-grid; }
  .map-wrap { aspect-ratio: 16 / 9; }
  body.sheet-open::after { content: ''; position: fixed; inset: 0; z-index: 61; background: rgba(0, 0, 0, 0.5); }
  body.sheet-open { overflow: hidden; }
}

/* phone: price and the next action stay at the thumb */
.book-bar { display: none; }
.book-bar-total { display: grid; line-height: 1.1; padding: 4px 4px 4px 6px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
@media (max-width: 999px) {
  .book-bar:not([hidden]) { position: fixed; z-index: 63; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
}
.book-bar-total small { font-size: 0.72rem; color: var(--muted); }
.book-bar-total strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.book-bar .btn { min-height: 48px; }
@media (max-width: 760px) {
  body[data-page="booking"] .action-bar { display: none; }
  /* compact header on phones: title, one line of trust signals, then the form */
  .booking-hero { padding-top: 18px; margin-bottom: 14px; }
  .booking-head { margin-bottom: 12px; }
  .booking-head h1 { font-size: 1.75rem; margin-bottom: 0.2em; }
  .booking-head > p { display: none; }
  .booking-trust { flex-wrap: nowrap; overflow-x: auto; gap: 16px; margin-top: 8px; font-size: 0.8rem; white-space: nowrap; scrollbar-width: none; }
  .booking-trust::-webkit-scrollbar { display: none; }
  .booking-page .step { padding: 18px 16px; gap: 14px; }
  .booking-page .step-title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .step:not([hidden]):not(.done) { animation: step-in 520ms var(--ease-cine) both; }
  @keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.summary h2 { font-size: 1.2rem; margin-bottom: 14px; }
.summary-list { margin: 0; display: grid; gap: 10px; }
.summary-list dt { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.summary-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sum-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.summary-total > span:first-child { font-weight: 600; display: grid; }
.summary-total > span:first-child small { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.summary-amount { display: grid; text-align: right; line-height: 1.1; }
.summary-amount s { color: var(--muted); font-size: 0.95rem; }
.summary-amount strong { font-family: var(--font-display); font-size: 2rem; color: var(--gold-text); font-weight: 600; }
.summary-save { grid-column: 1 / -1; color: var(--ok); font-weight: 600; font-size: 0.85rem; text-align: right; }
.summary-save:empty { display: none; }
.compare { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 6px; font-size: 0.9rem; }
.compare li { display: flex; justify-content: space-between; color: var(--muted); }
.compare li.is-current { color: var(--text); font-weight: 600; }
.compare li.is-unsuitable { text-decoration: line-through; }

.done { text-align: center; justify-items: center; }
.done:focus { outline: none; }
.done-icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.done-icon .icon { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .done:not([hidden]) .done-icon { animation: done-pop 620ms var(--ease-out) both; }
  .done:not([hidden]) .done-icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: done-draw 460ms var(--ease-out) 280ms forwards; }
  @keyframes done-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
  @keyframes done-draw { to { stroke-dashoffset: 0; } }
}
.done h1, .done h2 { font-size: 1.8rem; margin: 6px 0 0; }
.done p { margin: 0; max-width: 52ch; color: var(--muted); }
.done-ref strong { color: var(--text); font-family: var(--font-display); letter-spacing: 0.04em; }
.done-status { font-weight: 600; color: var(--text) !important; }

/* Legal */
.legal h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 500; }
.legal-note { display: flex; gap: 10px; align-items: center; color: var(--muted); }
.legal-toc { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 14px 0; border-block: 1px solid var(--line); margin-bottom: 20px; }
.legal-toc a { font-weight: 600; }
.legal-block { padding: 28px 0; border-bottom: 1px solid var(--line); }
.legal-block h2 { font-size: 1.6rem; }
.legal-block h3 { font-size: 1.1rem; margin-top: 1.4em; }
.legal-block p, .legal-block li { color: var(--muted); max-width: 72ch; }
.legal-dl { margin: 0; display: grid; gap: 10px; }
.legal-dl div { display: grid; gap: 2px 20px; }
@media (min-width: 640px) { .legal-dl div { grid-template-columns: 240px 1fr; } }
.legal-dl dt { font-weight: 600; }
.legal-dl dd { margin: 0; color: var(--muted); }

/* Root language chooser */
.root-choose { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 20px; padding-block: 40px; }
.root-choose img { width: 220px; }
.root-choose h1 { font-size: 1.4rem; }
.root-choose ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.root-choose a { display: block; padding: 12px 18px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.root-choose a:hover { border-color: var(--gold); }

/* ---------- Route landing pages ---------- */
.route-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.route-hero .hero-word { top: 60%; }
.route-hero h1 { max-width: 18ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-text); }
.crumbs [aria-current] { color: var(--text); }
.route-lead { max-width: 560px; color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); margin: 0 0 24px; }
.route-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 0 0 24px; border: 1px solid var(--line); background: var(--surface-glass); }
.route-facts > div { padding: 14px 16px; min-width: 0; }
.route-facts > div + div { border-left: 1px solid var(--line); }
.route-facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
.route-facts dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem); white-space: nowrap; }
.route-facts dd strong { color: var(--gold-text); font-weight: 600; }

.route-split { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) { .route-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.route-classes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.route-classes li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 18px 12px 10px; background: var(--surface); border: 1px solid var(--line-soft); }
.route-classes img { width: 100%; height: auto; }
.route-classes li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.route-classes small { color: var(--muted); font-size: 0.88rem; }
.route-price { display: grid; justify-items: end; gap: 2px; font-family: var(--font-display); }
.route-price s { color: var(--muted); font-size: 0.85rem; }
.route-price strong { font-size: 1.3rem; color: var(--gold-text); font-weight: 600; }
.route-note { color: var(--muted); font-size: 0.88rem; margin: 0; max-width: 62ch; }
.route-steps { list-style: none; counter-reset: step; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.route-steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
.route-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-family: var(--font-display); color: var(--gold-text); padding-top: 2px; }
.route-steps span { color: var(--muted); font-size: 0.94rem; }
.route-quotes { display: grid; gap: 12px; }
.route-quote { margin: 0; padding: 16px 18px; border-left: 2px solid var(--gold); background: var(--surface); }
.route-quote blockquote { margin: 8px 0; }
.route-quote p { margin: 0; font-size: 0.95rem; }
.route-quote figcaption { color: var(--muted); font-size: 0.85rem; }
.route-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.route-links a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); text-decoration: none; transition: border-color var(--dur) ease; }
.route-links a .icon { color: var(--gold-text); flex: none; }
.route-links a span { flex: 1; min-width: 0; }
.route-links a small { color: var(--muted); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .route-links a:hover { border-color: var(--gold); } }
.route-links a:active { transform: scale(0.98); }
@media (max-width: 560px) {
  .route-facts { grid-template-columns: 1fr 1fr; }
  .route-facts > div:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .route-classes li { grid-template-columns: 84px minmax(0, 1fr); padding-right: 14px; }
  .route-price { grid-column: 1 / -1; grid-auto-flow: column; justify-content: end; align-items: baseline; gap: 10px; }
  .route-classes li > span:nth-child(2) small { display: none; }
}

/* ---------- Cinematic layer: type scale, eyebrows, stages ---------- */
:root { --ease-cine: cubic-bezier(0.16, 1, 0.3, 1); }
h2 { font-size: clamp(2rem, 1.15rem + 3.1vw, 3.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; }
.section-head h2 { margin-bottom: 0.4em; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.eyebrow span { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-text); letter-spacing: 0.08em; }
.eyebrow span::after { content: ''; width: 40px; height: 1px; background: var(--gold); }

/* Reading progress under the header */
.scroll-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Gold buttons catch the light once on hover */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .btn-gold:hover::after { transform: translateX(120%); transition: transform 760ms var(--ease-out); } }
.btn .icon { transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); } }
.btn-lg { min-height: 58px; padding: 0 1.8em; font-size: 1.05rem; }

/* Hero: a full stage on desktop with a scroll cue */
.hero h1 { font-size: clamp(2.3rem, 1.1rem + 3.9vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; }
@media (min-width: 1040px) and (min-height: 720px) {
  .hero:not(.route-hero) { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; padding-bottom: 72px; }
}
.hero-show { width: min(100%, 820px); }
.hero-cue { position: absolute; left: 50%; bottom: 18px; width: 1px; height: 44px; background: color-mix(in srgb, var(--gold) 30%, transparent); overflow: hidden; display: none; }
.hero-cue span { position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: var(--gold-hi); }
@media (min-width: 1040px) and (min-height: 720px) { .hero-cue { display: block; } }

/* Marquee: destinations drift past as the page scrolls */
.marquee { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px) 0; background: var(--bg); border-bottom: 1px solid var(--line-soft); display: grid; gap: 4px; }
.marquee-row { display: flex; align-items: center; width: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1rem + 5vw, 5.6rem); line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; will-change: transform; }
.marquee-row:first-child { transform: translate3d(0, 0, 0); }
.marquee-row.is-outline { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 55%, transparent); transform: translate3d(-50%, 0, 0); }
.marquee-item { display: inline-flex; align-items: baseline; gap: 0.3em; }
.marquee-item small { font-size: 0.32em; letter-spacing: 0.12em; color: var(--gold-text); -webkit-text-stroke: 0; }
.marquee-sep { display: inline-block; width: 0.42em; height: 0.48em; margin: 0 0.55em; background: var(--gold); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); flex: none; }
.marquee-row.is-outline .marquee-sep { background: color-mix(in srgb, var(--gold) 45%, transparent); }

/* Arrival: the line is drawn by scrolling */
html.motion .arrival-progress { --p: 0; }
.arrival-progress { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); transform: scaleY(var(--p, 1)); transform-origin: top; z-index: 0; }
.arrival-line::before { opacity: 0.35; }
.arrival-line > li { z-index: 1; }
.arrival-node { transition: background-color 420ms var(--ease-out), color 420ms var(--ease-out), transform 420ms var(--ease-out); }
html.motion .arrival-line li .arrival-node { transform: scale(0.9); }
.arrival-line li.is-lit .arrival-node, html:not(.motion) .arrival-node { background: var(--gold); color: var(--on-gold); transform: none; }
@media (min-width: 900px) {
  .arrival-progress { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 1px; transform: scaleX(var(--p, 1)); transform-origin: left; }
}

/* Fleet showcase: one stage, three classes. Pinned and scroll-driven on large screens */
/* overflow must stay visible here, or the sticky pin inside stops working */
.showcase { background: #0b0c0e; overflow: visible; }
.showcase-pin { position: relative; display: flex; flex-direction: column; padding-block: clamp(64px, 9vw, 116px) 40px; }
.showcase-ui { display: contents; }
.showcase-head { order: 1; padding-inline: var(--gutter); max-width: 720px; }
.showcase-head p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; margin: 0; }
.showcase-stage { order: 2; position: relative; aspect-ratio: 4 / 3; margin: 28px 0 0; overflow: hidden; background: #0b0c0e; touch-action: pan-y; }
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 700ms ease, transform 900ms var(--ease-cine); }
.show-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; }
.showcase-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0b0c0e), linear-gradient(90deg, rgba(11, 12, 14, 0.5), transparent 40%); pointer-events: none; }
.showcase-copies { order: 3; display: grid; padding-inline: var(--gutter); margin-top: -36px; position: relative; }
/* inactive classes stay in the accessibility tree (no focusable content inside), just unseen */
.show-copy { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.show-copy.is-active { opacity: 1; pointer-events: auto; }
.show-copy > * { transition: transform 700ms var(--ease-cine); }
.show-copy:not(.is-active) > * { transform: translateY(18px); }
.show-copy.is-active > :nth-child(3) { transition-delay: 40ms; }
.show-copy.is-active > :nth-child(4) { transition-delay: 80ms; }
.show-copy.is-active > :nth-child(5) { transition-delay: 120ms; }
.show-copy.is-active > :nth-child(6) { transition-delay: 160ms; }
.show-word { display: none; }
.show-count { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; color: var(--muted); }
.show-count span { color: var(--gold-text); }
.show-model { margin: 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); }
.show-copy h3 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: 6px 0 14px; }
.show-desc { color: var(--text); font-size: 1.08rem; max-width: 36ch; }
.show-models { font-size: 0.92rem; color: var(--muted); max-width: 40ch; }
.show-models span { color: var(--text); font-weight: 600; }
.show-cap { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--muted); margin: 0; }
.show-cap .icon { color: var(--gold-text); }
.showcase-foot { order: 4; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 26px var(--gutter) 0; }
.showcase-tabs { display: flex; gap: 4px; }
.showcase-tabs button { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0 14px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: color var(--dur), border-color var(--dur); }
.showcase-tabs button span { font-size: 0.72rem; color: var(--gold-text); }
.showcase-tabs button:hover { color: var(--text); }
.showcase-tabs button[aria-current="true"] { color: var(--text); border-bottom-color: var(--gold); }
.showcase-bar { order: 5; display: block; height: 1px; margin: 22px var(--gutter) 0; background: var(--line); }
.showcase-bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0.333); transform-origin: left; transition: transform 500ms var(--ease-out); }
@media (min-width: 640px) { .showcase-stage { aspect-ratio: 16 / 9; } .show-slide img { object-position: 70% 50%; } }

/* Pinned mode: the stage fills the screen and the copy sits in the dark left of each photo */
@media (min-width: 900px) and (min-height: 620px) {
  html.motion .showcase { height: calc(var(--n) * 100svh); }
  html.motion .showcase-pin { position: sticky; top: 0; height: 100svh; display: block; padding: 0; overflow: hidden; }
  html.motion .showcase-stage { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
  html.motion .show-slide { transition: none; will-change: opacity, transform; }
  html.motion .show-slide img { object-position: 72% 55%; }
  html.motion .showcase-shade { background: linear-gradient(90deg, rgba(11, 12, 14, 0.94) 0%, rgba(11, 12, 14, 0.7) 30%, rgba(11, 12, 14, 0) 58%), linear-gradient(180deg, rgba(11, 12, 14, 0.85), transparent 26%, transparent 70%, rgba(11, 12, 14, 0.9)); }
  html.motion .showcase-ui { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; padding-top: calc(var(--header-h) + clamp(28px, 6vh, 64px)); padding-bottom: clamp(24px, 4vh, 44px); }
  html.motion .showcase-head, html.motion .showcase-copies, html.motion .showcase-foot { padding-inline: 0; }
  html.motion .showcase-head h2 { font-size: clamp(2rem, 1rem + 2.4vw, 3rem); }
  html.motion .showcase-head p:not(.eyebrow) { max-width: 44ch; }
  html.motion .showcase-copies { margin: 0; align-content: center; max-width: 470px; position: static; }
  html.motion .showcase-bar { margin-inline: 0; }
  html.motion .showcase-bar span { transition: none; }
  html.motion .show-word { display: block; position: absolute; right: var(--gutter); bottom: 9vh; z-index: -1; font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 15vw, 16rem); line-height: 0.8; letter-spacing: -0.02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(236, 208, 138, 0.22); opacity: 0; transform: translateX(6%); transition: opacity 700ms ease, transform 1100ms var(--ease-cine); pointer-events: none; }
  html.motion .show-copy.is-active .show-word { opacity: 1; transform: none; }
}

/* Promise: the statement is read word by word */
@media (min-width: 980px) { .promise-layout { grid-template-columns: 1fr 1.15fr; } }
.promise-copy > .promise-statement { font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.7rem); line-height: 1.42; letter-spacing: -0.01em; font-weight: 500; color: var(--text); max-width: 30ch; }
html.motion .promise-statement .word { color: color-mix(in srgb, var(--muted) 38%, transparent); transition: color 380ms ease; }
html.motion .promise-statement .word.is-lit { color: var(--text); }

/* Night band: a full-bleed film that opens up as it scrolls in */
.band { display: grid; align-items: end; min-height: min(94svh, 900px); background: #08090a; }
.band-media { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 70%; will-change: transform; }
.band-still { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 74% 50%; transform: translateY(var(--y, 0)); transform-origin: 78% 70%; }
/* drifting low mist over the valley; with the slow push-in it keeps the still alive */
.band-mist { position: absolute; left: -20%; right: -20%; bottom: 8%; height: 46%; background: radial-gradient(ellipse 30% 40% at 20% 60%, rgba(255, 236, 200, 0.12), transparent 70%), radial-gradient(ellipse 26% 36% at 62% 52%, rgba(255, 236, 200, 0.09), transparent 70%), radial-gradient(ellipse 34% 30% at 90% 70%, rgba(255, 236, 200, 0.08), transparent 70%); filter: blur(8px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .band .band-still { animation: push-in 26s ease-in-out infinite alternate; }
  .band .band-mist { animation: mist 18s ease-in-out infinite alternate; }
  .band.is-still .band-still, .band.is-still .band-mist { animation-play-state: paused; }
}
@keyframes push-in { from { scale: 1; } to { scale: 1.09; } }
@keyframes mist { from { translate: -6% 0; opacity: 0.7; } to { translate: 6% -2%; opacity: 1; } }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 9, 10, 0.88) 0%, rgba(8, 9, 10, 0.45) 42%, transparent 70%), linear-gradient(0deg, rgba(8, 9, 10, 0.9), transparent 45%); pointer-events: none; }
.band-copy { position: relative; z-index: 1; padding-block: 22vh clamp(48px, 9vh, 96px); }
.band-copy h2 { font-size: clamp(2.5rem, 1rem + 5.6vw, 6.4rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; max-width: 12ch; margin-bottom: 0.3em; }
.band-copy > p:not(.eyebrow) { max-width: 46ch; font-size: 1.1rem; color: color-mix(in srgb, var(--text) 82%, transparent); }
.band-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.band-toggle { position: static; width: 44px; height: 44px; }
@media (max-width: 640px) { .band { min-height: 82svh; } .band-still { object-position: 72% 50%; } .band::after { background: linear-gradient(0deg, rgba(8, 9, 10, 0.95) 10%, rgba(8, 9, 10, 0.35) 60%, rgba(8, 9, 10, 0.1)); } }

/* Reviews: one large quote mark behind the slide */
.review-carousel { isolation: isolate; }
.review-mark { position: absolute; top: -0.42em; right: 8px; z-index: -1; font-family: Georgia, serif; font-size: clamp(8rem, 14vw, 13rem); line-height: 1; color: var(--gold); opacity: 0.16; pointer-events: none; }

/* Finale: the closing call to action on its own stage */
.finale { padding: clamp(96px, 14vw, 180px) 0 clamp(64px, 9vw, 110px); background: #08090a; text-align: center; }
.finale-media { position: absolute; inset: 0; overflow: hidden; }
.finale-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0.42; transform: scale(1.12); }
.finale::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 9, 10, 0.55), rgba(8, 9, 10, 0.92)); pointer-events: none; }
.finale-inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.finale-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: -1; font-family: var(--font-display); font-weight: 600; font-size: clamp(5rem, 19vw, 19rem); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(214, 178, 94, 0.14); pointer-events: none; }
.finale h2 { font-size: clamp(2.4rem, 1rem + 5vw, 5.6rem); line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; max-width: 14ch; margin-bottom: 0.35em; }
.finale-inner > p { color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 1.1rem; max-width: 52ch; }
.finale .cta-actions { justify-content: center; margin: 18px 0 40px; }
.finale .contact-inline { justify-content: center; }

/* Scene films: real-car loops fade in over their first frame once they actually play */
.scene-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.scene-film.is-playing { opacity: 1; }
.show-slide .scene-film { object-position: 86% 50%; }
@media (min-width: 640px) { .show-slide .scene-film { object-position: 70% 50%; } }
@media (min-width: 900px) and (min-height: 620px) { html.motion .show-slide .scene-film { object-position: 72% 55%; } }
.band .band-film { top: -6%; height: 112%; object-position: 74% 50%; transform: translateY(var(--y, 0)); }
@media (max-width: 640px) { .band .band-film { object-position: 72% 50%; } }
.business-photo .scene-film { object-position: 40% 72%; }
.film-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; background: rgba(14, 15, 17, 0.6); border: 1px solid var(--line); color: var(--muted); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color var(--dur), border-color var(--dur); }
.film-toggle:hover { color: var(--text); border-color: var(--gold); }
.film-toggle .icon { width: 14px; height: 14px; }
.showcase-tabs .film-toggle { align-self: center; margin-left: 10px; flex: none; }
.showcase-tabs { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 480px) { .showcase-tabs button:not(.film-toggle) { padding: 0 9px; font-size: 0.85rem; } .showcase-tabs .film-toggle { margin-left: 4px; } }
.photo-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 1; color: #f3f0e9; border-color: rgba(255, 255, 255, 0.25); }

/* Route pages: the destination scene glows behind the headline and the booking card */
.route-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 60%; opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, rgba(0, 0, 0, 0.25) 40%, #000 76%), linear-gradient(180deg, #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 5%, rgba(0, 0, 0, 0.25) 40%, #000 76%), linear-gradient(180deg, #000 60%, transparent);
  mask-composite: intersect; }
@media (max-width: 1039px) { .route-hero-img { height: 520px; opacity: 0.4; object-position: 82% 50%; } }

/* Business: a quiet photo between the pitch and the benefits */
.business-photo { position: relative; margin: 8px 0 26px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.business-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 72%; }
html.motion .business-photo[data-reveal="zoom"] { opacity: 1; transform: none; clip-path: inset(12% 8% 12% 8%); transition: clip-path 1300ms var(--ease-cine); }
html.motion .business-photo[data-reveal="zoom"] img { transform: scale(1.18); transition: transform 1600ms var(--ease-cine); }
html.motion .business-photo[data-reveal="zoom"].is-in { clip-path: inset(0); }
html.motion .business-photo[data-reveal="zoom"].is-in img { transform: none; }

/* Reveals: elements settle in once as they enter (only when motion is welcome and the script runs) */
html.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-cine), transform 1100ms var(--ease-cine); }
html.motion [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); translate: 0 0.4em; transition: clip-path 1100ms var(--ease-cine), translate 1100ms var(--ease-cine); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion [data-reveal="mask"].is-in { clip-path: inset(-0.1em -0.1em -0.25em -0.1em); translate: 0 0; }
html.motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-cine), transform 1000ms var(--ease-cine); transition-delay: calc(var(--i, 0) * 70ms); }
html.motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* The one orchestrated moment: the hero settles in once on load */
  .rating-pill, .hero h1, .hero-claims, .book-card, .crumbs, .route-lead, .route-facts { animation: rise 900ms var(--ease-cine) both; }
  .hero h1 { animation-name: rise-focus; animation-duration: 1200ms; animation-delay: 80ms; }
  .hero-claims, .route-lead { animation-delay: 220ms; }
  .route-facts { animation-delay: 300ms; }
  .book-card { animation-delay: 260ms; }
  /* cars drive in decelerating, stop, catch a band of light and flash their headlights; leaving cars accelerate away */
  .stage-spot, .stage-floor { animation: stage-on 1400ms ease 100ms both; }
  .hero-car.is-active { animation: car-in 1250ms var(--ease-cine) both; }
  .hero-car.is-leaving { animation: car-out 900ms cubic-bezier(0.55, 0, 0.85, 0.25) both; }
  .hero-car.is-active .car-shine { animation: shine 1700ms var(--ease-in-out) 1000ms both; }
  .hero-car.is-active .car-flare { animation: flare 1800ms ease-out 850ms both; }
  @keyframes stage-on { from { opacity: 0; } to { opacity: 1; } }
  /* --dir follows the way each car faces, so it always drives forwards */
  @keyframes car-in { from { opacity: 0; transform: translateX(calc(-34% * var(--dir, 1))); filter: blur(6px) brightness(0.4); } 55% { opacity: 1; filter: blur(0) brightness(0.85); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes car-out { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateX(calc(40% * var(--dir, 1))); filter: blur(8px) brightness(0.5); } }
  @keyframes shine { from { opacity: 1; background-position: 135% 0; } 85% { opacity: 1; } to { opacity: 0; background-position: -35% 0; } }
  @keyframes flare { 0% { opacity: 0; scale: 0.3; } 22% { opacity: 1; scale: 1.15; } 45% { opacity: 0.55; scale: 0.9; } 100% { opacity: 0.4; scale: 0.85; } }
  .hero-cue span { animation: cue 2.2s var(--ease-in-out) 1.4s 6 both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes rise-focus { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes film-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
  @keyframes cue { from { transform: translateY(-14px); } to { transform: translateY(44px); } }
}

/* Return trip with its own pickup and destination */
.return-places { display: grid; gap: 12px; }
@media (min-width: 560px) { .return-places { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Phone number: flag and dial code in front, searchable country list */
.phone-field { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.phone-cc { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 10px 0 12px; background: var(--surface-2); border: 1px solid var(--line); border-right: 0; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--dur), background-color var(--dur), transform 160ms var(--ease-out); }
.phone-cc:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.phone-cc:active { transform: scale(0.97); }
.phone-cc:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.phone-cc .icon-sm { width: 0.8em; height: 0.8em; color: var(--muted); transition: transform 180ms var(--ease-out); }
.phone-cc[aria-expanded="true"] .icon-sm { transform: rotate(180deg); }
.cc-flag { display: inline-grid; line-height: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.cc-flag svg, .cc-opt svg { display: block; }
.cc-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, 100%); display: grid; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: drop-in 180ms var(--ease-out); transform-origin: top left; }
.cc-pop[hidden] { display: none; }
.cc-search { width: 100%; min-height: 42px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 0; color: var(--text); font: inherit; font-size: 1rem; }
.cc-search:focus { outline: none; border-color: var(--gold); }
.cc-list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cc-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; cursor: pointer; }
.cc-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-opt small { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cc-opt:hover, .cc-opt:focus, .cc-opt[aria-selected="true"] { background: var(--surface-2); outline: none; }
.cc-opt[aria-selected="true"] small { color: var(--gold-text); }

/* Vehicle shortcut hint: only where a double-click exists; a tap on phones continues by itself */
.dbl-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .dbl-hint { display: flex; } .vehicle-card { user-select: none; } }
.vehicle-warn.is-soft { color: var(--gold-text); }

.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* ---------- The guest's booking (manage) and the owner's view (admin) share these pieces ---------- */
.manage { display: grid; gap: 20px; }
.manage-loading { display: flex; gap: 10px; align-items: center; color: var(--muted); margin: 0; }
.manage-head h1 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); margin: 10px 0 4px; }
.manage-head .done-ref { color: var(--muted); margin: 0; }
.manage-head .done-ref strong { color: var(--text); font-family: var(--font-display); letter-spacing: 0.04em; }
.manage-status { display: inline-flex; align-items: center; padding: 4px 10px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-text); }
.manage-status.is-paid, .manage-status.is-completed { border-color: var(--ok); color: var(--ok); }
.manage-status.is-cancelled, .manage-status.is-noshow, .manage-status.is-paid_amount_mismatch { border-color: var(--danger); color: var(--danger); }
.manage-status.is-test, .manage-pay.is-test { border-color: #4f8fe8; color: #4f8fe8; }
.manage-trips { display: grid; gap: 12px; }
@media (min-width: 640px) { .manage-trips:has(.manage-trip + .manage-trip) { grid-template-columns: 1fr 1fr; } }
.manage-trip { display: grid; gap: 6px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--line); }
.manage-trip-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.manage-trip-when { font-family: var(--font-display); font-size: 1.2rem; }
.manage-route { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.manage-route li { position: relative; padding-left: 22px; overflow-wrap: anywhere; }
.manage-route li::before { content: ''; position: absolute; left: 3px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.manage-route li.is-via::before { background: var(--muted); width: 7px; height: 7px; left: 4px; }
.manage-route li.is-to::before { background: var(--gold); }
.manage-route li + li::after { content: ''; position: absolute; left: 7px; top: calc(-10px - 0.1em); height: calc(10px + 0.6em); border-left: 1px dashed var(--line); }
.manage-list { margin: 0; display: grid; gap: 0; }
.manage-list > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.manage-list dt { color: var(--muted); font-size: 0.875rem; }
.manage-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.manage-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.manage-total strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.manage-pay { margin: 6px 0 0; font-weight: 600; }
.manage-pay.is-paid, .manage-pay.is-completed { color: var(--ok); }
.manage-pay.is-cancelled { color: var(--muted); }
.manage-actions, .manage-contact, .admin-quick, .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.manage-confirm { padding: 16px 18px; border: 1px solid var(--danger); background: var(--danger-bg); }
.manage-confirm p { margin: 0 0 12px; font-weight: 600; }
.manage-form { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.manage-form h2 { font-size: 1.4rem; margin: 0; }
.manage-form .opt-group + .opt-group { margin-top: -16px; }
.manage-help { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.manage-help p { display: flex; gap: 10px; margin: 0; color: var(--muted); }
.manage-help p .icon { color: var(--gold-text); margin-top: 2px; }

body.admin { min-height: 100vh; }
.admin-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.admin-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); font-family: var(--font-display); font-weight: 600; }
.admin-brand img { width: 132px; height: auto; }
.admin-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px var(--gutter) calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.admin-msg { display: flex; gap: 10px; align-items: center; color: var(--muted); margin: 0; }
.admin-login { display: grid; gap: 14px; padding: 24px; max-width: 520px; }
.admin-login h1 { font-size: 1.6rem; margin: 0; }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.admin-tabs button { flex: none; min-height: 40px; padding: 0 14px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: border-color var(--dur), color var(--dur), background-color var(--dur); }
.admin-tabs button[aria-selected="true"] { border-color: var(--gold); color: var(--on-gold); background: var(--gold); }
.admin-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.admin-day { margin: 14px 0 2px; font-family: var(--font-display); font-weight: 600; color: var(--gold-text); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-day:first-child { margin-top: 0; }
.admin-ride { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); cursor: pointer; transition: border-color var(--dur), transform 160ms var(--ease-out); }
.admin-ride:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.admin-ride:active { transform: scale(0.99); }
.admin-ride.is-paid { border-left-color: var(--ok); }
.admin-ride.is-cancelled, .admin-ride.is-noshow { border-left-color: var(--danger); opacity: 0.7; }
.admin-ride.is-completed { border-left-color: var(--line); opacity: 0.75; }
.admin-ride-time { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-ride-main { display: grid; min-width: 0; }
.admin-ride-main strong, .admin-ride-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ride-main small, .admin-ride-side small { color: var(--muted); font-size: 0.8rem; }
.admin-ride-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.admin-ride-side strong { font-family: var(--font-display); color: var(--gold-text); font-variant-numeric: tabular-nums; }
.admin-ride-side .manage-status { font-size: 0.65rem; padding: 2px 6px; }
@media (max-width: 560px) {
  .admin-ride { grid-template-columns: auto minmax(0, 1fr); }
  .admin-ride-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-start; text-align: left; }
  .admin-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .admin-tabs button { padding: 0 4px; font-size: 0.85rem; }
}
.admin-empty { color: var(--muted); }
.admin-detail { display: grid; gap: 18px; }
.admin-back { justify-self: start; }
.admin-head h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin: 10px 0 4px; }
.admin-ref { margin: 0; color: var(--muted); font-size: 0.9rem; }
.admin-countdown { margin: 4px 0 0; font-weight: 600; color: var(--gold-text); }
.admin-countdown:empty { display: none; }
.admin-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .admin-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin-card { display: grid; gap: 12px; padding: 20px; }
.admin-card h2 { font-size: 1.05rem; margin: 0; color: var(--gold-text); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-card > div { display: grid; gap: 12px; }
.admin-cancel { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.admin-check { display: flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; }
.admin-check input { width: 18px; height: 18px; accent-color: var(--gold); }
.admin-history { margin: 0; padding: 12px 0 0 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.85rem; display: grid; gap: 4px; }
.admin-history:empty { display: none; }
@media (max-width: 560px) { .admin-quick .btn { flex: 1 1 calc(50% - 5px); } }

/* ---------- Thank-you ticket (cash and online bookings); prints as a clean white ticket ---------- */
.ticket { max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: ticket-in 520ms var(--ease-out) both; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; background: #0e0f11; border-bottom: 2px solid var(--gold); }
.ticket-head img { width: 120px; height: auto; }
.ticket-chip { padding: 4px 10px; border: 1px solid var(--ok); color: var(--ok); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ticket-hero { display: grid; justify-items: center; gap: 10px; padding: 28px 24px 22px; text-align: center; }
.ticket-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 4px 0 0; }
.ticket-hero p { margin: 0; color: var(--muted); max-width: 46ch; }
.ticket-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 20px 24px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.ticket-route > div { display: grid; gap: 4px; min-width: 0; }
.ticket-route > div:last-child { text-align: right; }
.ticket-route small, .ticket-grid dt, .ticket-foot small { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ticket-route strong { font-family: var(--font-display); font-size: 1.05rem; overflow-wrap: anywhere; }
.ticket-route-line { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-text); }
.ticket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; padding: 20px 24px; }
.ticket-grid > div { display: grid; gap: 3px; min-width: 0; }
.ticket-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .ticket-grid { grid-template-columns: 1fr; } .ticket-route { grid-template-columns: 1fr; text-align: left; } .ticket-route > div:last-child { text-align: left; } .ticket-route-line { transform: rotate(90deg); } }
.ticket-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-top: 1px dashed var(--line); background: var(--bg); }
.ticket-foot > div { display: grid; gap: 4px; }
.ticket-ref { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.06em; }
.ticket-total { text-align: right; justify-items: end; }
.ticket-total strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-text); font-variant-numeric: tabular-nums; line-height: 1; }
.ticket-total span { font-size: 0.85rem; font-weight: 600; color: var(--gold-text); }
.ticket-total span.is-paid { color: var(--ok); }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 24px 6px; }
.ticket-help { display: grid; justify-items: center; gap: 10px; padding: 12px 24px 24px; text-align: center; }
.ticket-help p { margin: 0; color: var(--muted); font-size: 0.9rem; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #111 !important; }
  body > *:not(main), .site-header, .site-footer, .action-bar, .consent, .ticket-actions, .ticket-help, [data-pay-status] { display: none !important; }
  .booking-page { padding: 0 !important; }
  .ticket { box-shadow: none; border: 1px solid #bbb; background: #fff; color: #111; animation: none; max-width: none; }
  .ticket-head { background: #fff; border-bottom-color: #c9a246; }
  .ticket-hero p, .ticket-route small, .ticket-grid dt, .ticket-foot small { color: #555; }
  .ticket-foot { background: #f6f4ef; }
  .ticket-total strong, .ticket-total span, .ticket-route-line { color: #7c5d10; }
  .ticket-chip, .ticket-total span.is-paid { color: #2e7d4a; border-color: #2e7d4a; }
  .done-icon { background: #c9a246; }
}

/* Narrow phones (320–400 px): long button labels wrap instead of pushing the page sideways */
.step > * { min-width: 0; }
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
  .step-actions .btn { flex: 1 1 auto; }
}

/* ---------- Older iPhones (iOS 14 / early 15): no aspect-ratio, no :has() ----------
   Boxes get their height from padding instead, and the chosen option is marked by a class that
   site.js sets (TP.syncChecked), so every guest sees the photos and what they picked. */
.pay-opt.is-checked, .mode-opt.is-checked, .bonus-card.is-checked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
@supports not (aspect-ratio: 1) {
  .hero-stage { height: 0; padding-bottom: 44.4%; }
  .car-flare { height: 0; padding-bottom: 22%; }
  .showcase-stage { height: 0; padding-bottom: 75%; }
  .business-photo { height: 0; padding-bottom: 62.5%; }
  .business-photo > img, .business-photo > video { position: absolute; inset: 0; }
  .map-wrap { height: 260px; }
  .dt-day { height: 40px; }
  @media (max-width: 760px) { .hero-stage { padding-bottom: 52.6%; } }
  @media (min-width: 640px) { .showcase-stage { padding-bottom: 56.25%; } }
  html.motion .showcase-stage { height: auto; padding-bottom: 0; }
}

/* Desktop: the form column scrolls on its own, like the summary beside it */
@media (min-width: 1000px) {
  .booking-form, .booking-side { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 50%, transparent) transparent; }
  .booking-form { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding-right: 8px; }
}