/* =====================================================
   ALP Executive Ride — clean light design system
   ===================================================== */
:root {
  --bg:       #f5f5f5;   /* neutral off-white (page) */
  --bg-alt:   #f5f5f5;   /* same as --bg: one page colour */
  --card:     #ffffff;
  --ink:      #121212;
  --ink-dim:  #565656;
  --ink-mute: #949494;
  --line:     rgba(18,18,18,.1);
  --ghost:    #e2e2e2;   /* giant background type  */
  --accent:   #b78e4e;   /* gold accent */
  --dark:     #111111;   /* banners, footer        */
  --whatsapp: #25d366;
  --whatsapp-dark:#128c7e;
  --whatsapp-ink:#063b2f;
  --sms:      #111111;
  --sms-ink:  #ffffff;
  --media-grayscale: none;
  --radius:   18px;
  --radius-lg:28px;
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --container:1200px;
  --serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(90px + env(safe-area-inset-top)); }
body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.menu-open { overflow:hidden; overscroll-behavior:none; }
img { display:block; max-width:100%; }

/* ---------- Monochrome photography ----------
   Every photographic surface on the page. Flip --media-grayscale to `none`
   in :root to bring the colour originals back — the source files are
   untouched. */
.hero-media img,
.hero-media video,
.areas::before,
.areas-video,
.ss-bg,
.ss-car,
.fleet-car { filter:var(--media-grayscale); }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; touch-action:manipulation; }
::selection { background:var(--ink); color:#fff; }
:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

.skip-link { position:fixed; left:20px; top:16px; z-index:1000; padding:10px 16px; background:#fff; color:var(--ink); border-radius:100px; transform:translateY(-160%); transition:transform .25s var(--ease); }
.skip-link:focus { transform:none; }
.page-progress { position:fixed; inset:0 0 auto; height:2px; z-index:300; pointer-events:none; }
.page-progress span { display:block; width:100%; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; will-change:transform; mix-blend-mode:difference; }
.route-wipe { position:fixed; inset:0; z-index:250; display:grid; place-items:center; background:var(--dark); color:#fff; clip-path:inset(100% 0 0 0); pointer-events:none; will-change:clip-path; }
.route-wipe span { font-size:clamp(3.5rem,10vw,8rem); font-weight:700; letter-spacing:-.07em; opacity:.95; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }

/* =====================================================
   SCROLL ANIMATIONS
   ===================================================== */
/* fade-up reveal */
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out) var(--d,0s), transform 1s var(--ease-out) var(--d,0s); }
.reveal.in { opacity:1; transform:none; }

/* masked line reveal (headlines) */
.reveal-lines .line { display:block; overflow:hidden; }
.reveal-lines .line > span { display:block; transform:translateY(115%); transition:transform 1.1s var(--ease-out); }
.reveal-lines .line:nth-child(2) > span { transition-delay:.12s; }
.reveal-lines .line:nth-child(3) > span { transition-delay:.24s; }
.reveal-lines.in .line > span { transform:none; }

/* vehicle slide-in */
.reveal-car { opacity:0; transform:translateY(60px) scale(.96); transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal-car.in { opacity:1; transform:none; }

.compact-ui .reveal,
.compact-ui .reveal-car,
.compact-ui .reveal-lines .line > span {
  opacity:1 !important; transform:none !important; transition:none !important;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-car, .reveal-lines .line > span { opacity:1 !important; transform:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  [data-parallax] { transform:none !important; }
  .areas-video { display:none; animation:none; }
  .route-wipe { display:none; }
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.9em 1.9em; border-radius:100px;
  font-size:.9rem; font-weight:700; letter-spacing:.01em;
  border:1px solid transparent; transition:all .35s var(--ease); white-space:nowrap;
}
.btn:active { transform:translateY(0); }
.btn-pill { background:var(--ink); color:#fff; }
.btn-pill:hover { background:#000; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.btn-light { background:#fff; color:var(--ink); }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.25); }
.btn-outline-light { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.btn-block { width:100%; }

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  color:#fff; padding:12px 0;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled {
  background:transparent;
  color:#fff;
  border-bottom-color:transparent;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between; height:62px; gap:24px;
  max-width:1120px; padding:0 12px 0 26px;
  /* Same surface as the persistent action bar at the foot of the page. */
  background:rgba(17,17,17,.92); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.site-header.scrolled .header-inner {
  background:rgba(17,17,17,.94); border-color:rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.logo { display:flex; align-items:center; gap:.5em; min-width:44px; min-height:44px; }
.logo-mark { font-family:var(--serif); font-size:1.65rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.logo-text { font-size:.76rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; opacity:.9; }

.nav { display:flex; gap:34px; }
.nav a { font-size:.9rem; font-weight:600; opacity:.82; position:relative; transition:opacity .3s; }
.nav a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:currentColor; transition:width .35s var(--ease); }
.nav a:hover { opacity:1; }
.nav a:hover::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:14px; }
.lang-select { position:relative; }
.lang-btn { display:flex; align-items:center; gap:6px; background:none; border:none; color:inherit; opacity:.85; font-size:.85rem; font-weight:700; letter-spacing:.05em; padding:8px; transition:opacity .3s; }
.lang-btn:hover { opacity:1; }
.lang-menu {
  position:absolute; top:calc(100% + 10px); right:0; min-width:160px;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .3s var(--ease); box-shadow:0 24px 50px rgba(0,0,0,.14);
}
.lang-select:hover .lang-menu, .lang-select:focus-within .lang-menu { opacity:1; visibility:visible; transform:none; }
.lang-menu li { padding:9px 12px; font-size:.85rem; color:var(--ink-dim); border-radius:9px; cursor:pointer; transition:.2s; }
.lang-menu li:hover { background:var(--bg); color:var(--ink); }

.site-header .btn-book { background:#fff; color:var(--ink); padding:.72em 1.5em; }
.site-header.scrolled .btn-book { background:#fff; color:var(--ink); }

.menu-toggle { display:none; width:48px; height:48px; align-items:center; justify-content:center; flex-direction:column; gap:6px; background:none; border:none; color:inherit; padding:0; border-radius:50%; }
.menu-toggle span { width:24px; height:2px; background:currentColor; border-radius:2px; transition:.35s var(--ease); }
.menu-toggle.open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.mobile-drawer { display:none; }

/* =====================================================
   HERO
   ===================================================== */
.hero { position:relative; padding:calc(62px + 34px) clamp(12px,2vw,22px) 0; }
/* The media is a rounded card inset from the page edge; the header now sits
   above it on the page colour instead of floating over the video. */
.hero-card {
  position:relative; overflow:hidden; border-radius:clamp(18px,2vw,30px);
  height:min(78svh,700px); min-height:430px; display:flex; align-items:center;
  background:var(--ink);
}
.hero-media { position:absolute; inset:0; z-index:0; overflow:hidden; line-height:0; border-radius:inherit; }
.hero-media img, .hero-media video { display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.12); animation:heroZoom 16s var(--ease-out) forwards; }
.hero-media .hero-mobile-poster { display:none; }
.hero-media video { pointer-events:none; }
@keyframes heroZoom { to { transform:scale(1.02); } }
.hero-overlay { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; background:
  radial-gradient(circle at 50% 44%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.32) 75%),
  linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.3) 34%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.68) 100%); }

/* Copy sits left inside the card, not centred over a full-bleed image. */
.hero-copy {
  position:relative; z-index:2; color:#fff;
  width:100%; max-width:920px;
  padding:clamp(26px,4.4vw,60px);
}
.hero-book {
  display:inline-flex; align-items:center; margin-top:clamp(20px,2.6vw,30px);
  padding:.95em 2.1em; border-radius:100px; background:#fff; color:var(--ink);
  font-weight:600;
}
.hero-book:hover { background:var(--bg-alt); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.hero-scroll {
  position:absolute; z-index:2; right:clamp(20px,3vw,36px); bottom:clamp(18px,2.6vw,30px);
  display:flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.82); font-size:.82rem;
}
.hero-scroll-arrow {
  display:block; width:1px; height:22px; background:currentColor; position:relative;
}
.hero-scroll-arrow::after {
  content:""; position:absolute; left:-3px; bottom:0;
  width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.hero-title { font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4.5vw,3.9rem); line-height:1.06; letter-spacing:-.04em; text-shadow:0 2px 40px rgba(0,0,0,.35); }
/* The service line names what we do; the sub-line names where. It carries a
   full sentence now, so it drops the tagline's uppercase + .22em tracking. */
.hero-services {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:4px 12px; margin-top:20px;
  font-size:clamp(.82rem,1.35vw,1.02rem); font-weight:600; letter-spacing:.01em;
  opacity:.95; text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-services span { opacity:.45; }

/* ---------- Booking (Blacklane-style bar) ---------- */
.booking-wrap { margin-top:clamp(34px,5vw,60px); display:flex; flex-direction:column; align-items:center; gap:18px; }

.booking-tabs {
  display:inline-flex; padding:5px; border-radius:100px;
  background:#1b1b19;
  border:1px solid rgba(255,255,255,.12);
}
.booking-tab {
  padding:10px 26px; border:none; border-radius:100px; background:transparent;
  color:rgba(255,255,255,.75); font-size:.92rem; font-weight:700; transition:all .35s var(--ease);
}
.booking-tab.active { background:#fff; color:var(--ink); }

.booking-bar {
  width:100%; max-width:1060px;
  background:#141413;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 52px rgba(19,19,17,.22);
  padding:10px;
}
.booking-panel { display:none; align-items:center; gap:0; }
.booking-panel.active { display:flex; animation:fadeIn .5s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

.bfield { flex:1 1 0; min-width:0; padding:12px 22px; display:flex; flex-direction:column; gap:4px; }
.bfield-sm { flex:0 0 175px; }
.bfield label { font-size:.78rem; font-weight:600; color:rgba(255,255,255,.85); }
.bfield input, .bfield select {
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,.3); outline:none;
  color:#fff; font-family:inherit; font-size:.95rem; font-weight:500; padding:5px 0 7px;
  transition:border-color .3s; width:100%;
}
.bfield input:focus, .bfield select:focus { border-bottom-color:#fff; }
.bfield input:focus-visible, .bfield select:focus-visible {
  outline:2px solid #fff; outline-offset:4px; border-radius:2px;
}
.bfield input::placeholder { color:rgba(255,255,255,.42); }
.bfield input[type=date], .bfield input[type=time] { color-scheme:dark; }
.bfield select { appearance:none; cursor:pointer; }
.bfield option { background:#1b1b19; color:#fff; }
.bdivider { width:1px; align-self:stretch; margin:10px 0; background:rgba(255,255,255,.14); }
.booking-submit { margin:0 8px 0 14px; flex:none; }
.booking-details {
  margin-top:10px; padding:16px 12px 10px; border-top:1px solid rgba(255,255,255,.14);
}
.booking-details-heading { margin:0 4px 12px; color:#fff; }
.booking-details-title { font-size:.86rem; font-weight:800; letter-spacing:.01em; }
.booking-details-heading > div > p:last-child {
  margin-top:2px; color:rgba(255,255,255,.66); font-size:.72rem; line-height:1.45;
}
.booking-details-grid {
  display:grid; grid-template-columns:minmax(120px,.55fr) minmax(110px,.5fr) minmax(430px,2.2fr) auto;
  gap:10px; align-items:stretch;
}
.booking-count-field {
  min-width:0; padding:10px 14px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); border-radius:13px;
}
.child-seat-group {
  min-width:0; margin:0; padding:8px 12px 10px;
  border:1px solid rgba(255,255,255,.1); border-radius:13px; color:#fff;
  background:rgba(255,255,255,.055);
}
.child-seat-group legend {
  padding:0 5px; font-size:.78rem; font-weight:700; color:rgba(255,255,255,.9);
}
.child-seat-group legend span { margin-left:5px; color:rgba(255,255,255,.5); font-size:.66rem; font-weight:500; }
.child-seat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.child-seat-option {
  min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:rgba(255,255,255,.9); font-size:.72rem; font-weight:650; line-height:1.2;
}
.child-seat-option > span { min-width:0; }
.child-seat-option small { display:block; margin-top:2px; color:rgba(255,255,255,.5); font-size:.61rem; font-weight:500; }
.child-seat-option select {
  width:48px; min-width:48px; min-height:40px; padding:0 5px; border:1px solid rgba(255,255,255,.24);
  border-radius:9px; background:#232321; color:#fff; font:700 .82rem var(--sans); text-align:center;
}
.child-seat-option select:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.booking-submit-shared { min-height:100%; margin:0; align-self:stretch; white-space:nowrap; }
.booking-area-note {
  max-width:760px; margin:-2px auto 0; color:var(--ink-dim);
  font-size:.82rem; font-weight:500; line-height:1.55; text-align:center;
}

/* ---------- Address autocomplete ---------- */
.ac-field { position:relative; }

.ac-clear {
  position:absolute; right:16px; bottom:14px; z-index:3;
  width:26px; height:26px; display:grid; place-items:center;
  border:0; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.55);
  transition:color .2s, background .2s;
}
.ac-clear:hover { color:#fff; background:rgba(255,255,255,.12); }
.ac-clear svg { width:15px; height:15px; }
@media (pointer:coarse) {
  .ac-field input { padding-right:48px; }
  .ac-clear { right:3px; bottom:5px; width:44px; height:44px; }
}

.ac-panel {
  position:absolute; z-index:60; top:calc(100% + 10px); left:6px; right:6px;
  display:flex; flex-direction:column; overflow:hidden;
  background:#1c1c1e; color:#fff;
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  animation:acIn .18s var(--ease);
}
/* A bare `display:flex` would override the hidden attribute, leaving an empty
   panel floating under the field and showing local
   results — both selectors below need the extra specificity to win. */
.ac-panel[hidden], .ac-attrib[hidden], .ac-selected-attrib[hidden], .dt-panel[hidden], .ac-clear[hidden] { display:none; }
.ac-panel.panel-up, .dt-panel.panel-up { top:auto; bottom:calc(100% + 10px); animation-name:acInUp; }
@keyframes acIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes acInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Phone suggestions use a viewport-level sheet. It remains above the software
   keyboard instead of flipping around while the visual viewport is resizing. */
.ac-panel.ac-panel-sheet {
  position:fixed; z-index:160; top:auto;
  right:max(12px,env(safe-area-inset-right),calc((100vw - 560px)/2));
  bottom:var(--ac-sheet-bottom,max(12px,env(safe-area-inset-bottom)));
  left:max(12px,env(safe-area-inset-left),calc((100vw - 560px)/2));
  border-radius:18px; animation-name:acSheetIn;
}
@keyframes acSheetIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.ac-list {
  margin:0; padding:8px; list-style:none;
  max-height:310px; overflow-y:auto; overscroll-behavior:contain;
  touch-action:pan-y; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.ac-list::-webkit-scrollbar { width:8px; }
.ac-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

.ac-item {
  display:flex; align-items:flex-start; gap:15px;
  padding:13px 14px; border-radius:11px; cursor:pointer;
  transition:background .15s;
}
.ac-item.active, .ac-item:hover { background:rgba(255,255,255,.08); }
.ac-icon { flex:none; width:21px; height:21px; margin-top:2px; color:rgba(255,255,255,.62); }
.ac-text { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ac-text strong { font-size:.97rem; font-weight:700; letter-spacing:-.01em; }
.ac-text small {
  font-size:.83rem; line-height:1.35; color:rgba(255,255,255,.52);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.ac-attrib {
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  padding:11px 20px; background:#161618;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:Roboto,"Plus Jakarta Sans",sans-serif; font-size:.76rem; font-weight:400;
  letter-spacing:normal; white-space:nowrap; color:#fff;
}
.ac-field > label { display:flex; align-items:center; gap:10px; }
.ac-selected-attrib {
  margin-left:auto; flex:none; color:#fff; font-family:Roboto,"Plus Jakarta Sans",sans-serif;
  font-size:.75rem; font-style:normal; font-weight:400; letter-spacing:normal; white-space:nowrap;
}
.ac-message { padding:15px 14px; color:rgba(255,255,255,.78); font-size:.84rem; line-height:1.45; }
.ac-live {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Date & time pickers ---------- */
.dt-field { position:relative; }
.dt-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:5px 0 7px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff; font-family:inherit; font-size:.95rem; font-weight:500; text-align:left;
  cursor:pointer; transition:border-color .3s;
}
.dt-trigger:hover, .dt-trigger[aria-expanded="true"] { border-bottom-color:#fff; }
.dt-trigger:focus-visible { border-bottom-color:#fff; outline:2px solid #fff; outline-offset:4px; border-radius:2px; }
.dt-value { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-value.is-placeholder { color:rgba(255,255,255,.42); }
.dt-icon { flex:none; display:grid; place-items:center; color:rgba(255,255,255,.6); }
.dt-icon svg { width:17px; height:17px; }

.dt-panel {
  position:absolute; z-index:60; top:calc(100% + 10px); left:0; min-width:288px;
  display:flex; flex-direction:column; overflow:hidden;
  background:#1c1c1e; color:#fff;
  border:1px solid rgba(255,255,255,.1); border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  animation:acIn .18s var(--ease);
}
.bfield:last-of-type .dt-panel, .bfield-sm:nth-last-of-type(2) .dt-panel { left:auto; right:0; }

.dt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 15px 9px; }
.dt-head strong { font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.dt-nav {
  width:30px; height:30px; display:grid; place-items:center; padding:0;
  background:none; border:0; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.75); transition:background .18s, color .18s;
}
.dt-nav svg { width:16px; height:16px; }
.dt-nav:hover:not(:disabled) { background:rgba(255,255,255,.12); color:#fff; }
.dt-nav:disabled { opacity:.28; cursor:default; }

.dt-weekdays, .dt-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 12px; }
.dt-weekdays { padding-bottom:6px; }
.dt-weekdays span { text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.42); }
.dt-grid { padding-bottom:14px; }
.dt-day {
  aspect-ratio:1; display:grid; place-items:center; padding:0;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:#fff; font:600 .87rem inherit; transition:background .15s, color .15s;
}
.dt-day.is-blank { pointer-events:none; }
.dt-day:hover:not(:disabled):not(.is-selected) { background:rgba(255,255,255,.12); }
.dt-day:disabled { color:rgba(255,255,255,.2); cursor:default; }
.dt-day.is-today:not(.is-selected) { color:var(--accent); }
.dt-day.is-selected { background:#fff; color:#121210; font-weight:700; }

.dt-times {
  padding:8px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.dt-times::-webkit-scrollbar { width:8px; }
.dt-times::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.dt-time {
  display:block; width:100%; padding:9px 14px; margin-bottom:2px;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:#fff; font:600 .9rem inherit; text-align:left; transition:background .15s;
}
.dt-time:hover:not(:disabled):not(.is-selected) { background:rgba(255,255,255,.09); }
.dt-time:disabled { color:rgba(255,255,255,.22); cursor:default; }
.dt-time.is-selected { background:#fff; color:#121210; font-weight:700; }

@media (prefers-reduced-motion:reduce) { .ac-panel, .dt-panel { animation:none; } }

/* ---------- Scroll indicator ---------- */
.scroll-indicator { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; }
.scroll-line { display:block; width:1.5px; height:52px; background:rgba(255,255,255,.25); overflow:hidden; border-radius:2px; }
.scroll-dot { display:block; width:100%; height:14px; background:#fff; border-radius:2px; animation:scrollDot 2s var(--ease) infinite; }
@keyframes scrollDot { 0%{transform:translateY(-16px);} 70%{transform:translateY(54px);} 100%{transform:translateY(54px);} }

/* =====================================================
   BRAND STATEMENT
   ===================================================== */
/* Single column since the supporting paragraph was removed. */
/* Sized for a full sentence rather than the two-word headline it replaced;
   at the old clamp(3rem,7.4vw,7rem) this ran to a wall of 112px type. */
/* The last line used to be dimmed as a two-tone effect. It now carries three
   of the town names, so it reads at full strength like the rest. */
@media (prefers-reduced-motion:reduce) {
}

/* =====================================================
   SECTIONS
   ===================================================== */
/* ---------- FAQ accordion ---------- */
.faq-panel {
  max-width:900px; margin:0 auto; padding:clamp(28px,4vw,54px) clamp(20px,3vw,44px) clamp(24px,3vw,40px);
  background:var(--card); border:1px solid var(--line); border-radius:clamp(20px,2.4vw,32px);
  box-shadow:0 18px 50px rgba(19,19,17,.07);
}
.faq-panel .section-title { text-align:center; margin-bottom:clamp(24px,3vw,38px); }
.faq-group-title { margin:26px 0 12px; font-size:.95rem; font-weight:700; color:var(--ink-dim); }
.faq-group-title:first-of-type { margin-top:0; }
.faq-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.faq-item {
  background:var(--bg); border:1px solid transparent; border-radius:16px;
  transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open] {
  background:var(--card); border-color:#d9d9d5;
  box-shadow:0 10px 30px rgba(19,19,17,.08);
}
.faq-q {
  display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none;
  padding:16px 18px; font-size:.95rem; font-weight:600; line-height:1.45;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-num { flex:none; width:18px; font-size:.78rem; font-weight:500; color:var(--ink-mute); }
.faq-text { flex:1; min-width:0; }
/* Plus that becomes a cross when the row opens. */
.faq-toggle {
  flex:none; position:relative; display:block; width:34px; height:34px; border-radius:50%;
  background:var(--ink); transition:transform .3s var(--ease), background .25s var(--ease);
}
.faq-toggle::before, .faq-toggle::after {
  content:""; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-toggle::before { width:13px; height:1.6px; }
.faq-toggle::after { width:1.6px; height:13px; transition:opacity .25s var(--ease); }
.faq-item[open] .faq-toggle { transform:rotate(135deg); }
.faq-a { padding:0 18px 18px 50px; }
.faq-a p { color:var(--ink-dim); font-size:.9rem; line-height:1.7; max-width:62ch; }
.faq-more { margin-top:30px; text-align:center; color:var(--ink-dim); font-size:.9rem; }
.faq-more a { font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:560px){
  .faq-q { gap:10px; padding:14px; font-size:.9rem; }
  .faq-a { padding:0 14px 16px 14px; }
  .faq-num { display:none; }
}
@media (prefers-reduced-motion:reduce){ .faq-item, .faq-toggle { transition:none; } }

/* ---------- Why travel with ALP: four values in a row ---------- */
.values-head { max-width:660px; margin:0 auto clamp(32px,4vw,48px); text-align:center; }
.values-head .section-lead { margin-left:auto; margin-right:auto; }
.values-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,40px); }
.value-item { text-align:center; }
.value-icon {
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px;
  border-radius:50%; background:var(--bg-alt); color:var(--ink);
}
/* --bg-alt matches the page now, so the badge needs its own tint to read. */
.value-icon { background:rgba(19,19,17,.055); }
.value-icon svg { width:26px; height:26px; }
.value-item h3 { font-size:1rem; font-weight:700; line-height:1.4; }
.value-item p { margin-top:10px; color:var(--ink-dim); font-size:.9rem; line-height:1.65; max-width:30ch; margin-inline:auto; }
@media (max-width:860px){ .values-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; } }
@media (max-width:460px){ .values-grid { grid-template-columns:minmax(0,1fr); } }

/* ---------- Our Services: copy beside a photo mosaic ---------- */
.services-split { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,2fr); gap:clamp(30px,4vw,60px); align-items:center; }
.services-copy .section-title { margin-top:2px; }
.services-lead { margin-top:22px; color:var(--ink-dim); font-size:1rem; line-height:1.8; max-width:44ch; }
.services-list { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 20px; }
.services-list li { position:relative; padding-left:15px; font-size:.9rem; font-weight:600; line-height:1.6; }
.services-list li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:1px; background:var(--accent); }
.services-cta {
  display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  padding:.95em 1.7em; border-radius:100px; background:var(--ink); color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.services-cta svg { width:18px; height:18px; transition:transform .25s var(--ease); }
.services-cta:hover { background:#000; transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.22); }
.services-cta:hover svg { transform:translateX(4px); }

/* Tall / stacked pair / tall — the two middle cells share one column. */
.services-mosaic { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px; height:clamp(520px,58vw,760px); }
.mosaic-item { position:relative; margin:0; overflow:hidden; border-radius:18px; background:var(--bg-alt); }
/* Scrim so the label stays legible over a bright sky or a dark doorway. */
.mosaic-item::after {
  content:""; position:absolute; inset:auto 0 0 0; height:78%; pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,8,.82) 0%,rgba(8,8,8,.46) 42%,rgba(8,8,8,0) 100%);
}
.mosaic-title { display:block; font-size:clamp(.85rem,.95vw,1rem); font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.mosaic-desc { display:block; margin-top:5px; font-size:.78rem; font-weight:400; line-height:1.45; color:rgba(255,255,255,.85); }
.mosaic-label {
  position:absolute; z-index:1; left:0; right:0; bottom:0;
  padding:14px 15px; color:#fff; font-family:var(--serif);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
/* Placed explicitly: auto-flow fills row 1 across all three columns first,
   which leaves the last tall image only one row to span. */
.services-mosaic > :nth-child(1) { grid-column:1; grid-row:1 / span 2; }  /* Airport */
.services-mosaic > :nth-child(2) { grid-column:2; grid-row:2 / span 2; }  /* Corporate */
.services-mosaic > :nth-child(3) { grid-column:3; grid-row:1; }           /* Hourly */
.services-mosaic > :nth-child(4) { grid-column:3; grid-row:2; }           /* Point-to-Point */
.services-mosaic > :nth-child(5) { grid-column:1; grid-row:3; }           /* Special Events */
.services-mosaic > :nth-child(6) { grid-column:3; grid-row:3; }           /* Group */
.services-mosaic > :nth-child(7) { grid-column:2; grid-row:1; }           /* Mountain */
.mosaic-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mosaic-item:hover img { transform:scale(1.04); }

@media (max-width:1000px){
  .services-split { grid-template-columns:minmax(0,1fr); gap:36px; }
  .services-mosaic { height:clamp(460px,74vw,640px); }
  .services-lead { max-width:60ch; }
}
@media (max-width:560px){
  .services-list { grid-template-columns:minmax(0,1fr); }
  /* Two side-by-side tall images plus a stacked pair is too fine-grained on a
     phone, so the mosaic becomes a simple 2x2. */
  .services-mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; height:auto; gap:10px; }
  .services-mosaic > :nth-child(n) { grid-column:auto; grid-row:auto; }
  .mosaic-item { aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .mosaic-item:hover img, .services-cta:hover, .services-cta:hover svg { transform:none; }
}

/* Sits on the dark booking surface inside the hero. */
.route-prefill-note {
  max-width:760px; margin:0 auto; padding:11px 16px;
  border:1px solid rgba(255,255,255,.32); border-radius:14px;
  color:#fff; font-size:.88rem; line-height:1.5; text-align:center;
}

/* ---------- Popular routes ---------- */
.popular-routes { background:var(--bg-alt); overflow:hidden; }
/* Fanned coverflow: the centred card stands upright and its neighbours tuck
   behind it, progressively smaller and rotated. main.js sets each transform
   from the card's real distance to the track centre, so the effect survives
   any card width or overlap. */
/* Full-bleed so the fan runs to the viewport edges instead of being cut off
   at the 1200px container. The section clips the overflow, so widening to
   100vw here cannot add a horizontal page scrollbar. */
.routes-carousel {
  position:relative; --card-w:300px;
  width:100vw; margin-inline:calc(50% - 50vw);
}
.routes-track {
  display:flex; align-items:center;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:44px calc(50% - var(--card-w)/2) 62px;
  /* The outermost cards dissolve rather than ending on a hard edge. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.routes-track::-webkit-scrollbar { display:none; }
.routes-track:focus-visible { outline:2px solid var(--ink); outline-offset:4px; border-radius:var(--radius); }
.route-card {
  flex:0 0 var(--card-w); scroll-snap-align:center;
  margin-inline:-30px; transform-origin:50% 50%;
  will-change:transform,opacity;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 20px 46px rgba(0,0,0,.22);
}
/* Only the centred card takes the pointer; a click on any other one brings
   it to the centre first (main.js), so overlap can never mis-fire a booking. */
.route-card:not(.is-active) .route-card-cta { pointer-events:none; }
.route-card-photo { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
/* Body is a column so every Book Now lines up regardless of title length. */
.route-card-body { display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.route-card-line { font-size:.82rem; font-weight:500; letter-spacing:0; color:var(--ink-mute); }
.route-card-title { margin-top:8px; font-family:var(--serif); font-size:1.05rem; font-weight:600; line-height:1.35; letter-spacing:-.02em; }
.route-card .route-card-cta {
  margin-top:auto; align-self:stretch; justify-content:center;
  min-height:44px; padding:.72em 1.2em; border:1px solid var(--ink);
  background:transparent; color:var(--ink); border-radius:100px;
}
.route-card .route-card-cta:hover { background:var(--ink); color:#fff; }
/* Carousel controls */
.routes-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:6px; }
.routes-nav button {
  display:grid; place-items:center; width:48px; height:48px; flex:none;
  border:1px solid var(--ink); border-radius:100px; background:transparent; color:var(--ink);
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.routes-nav button:hover:not(:disabled) { background:var(--ink); color:#fff; }
.routes-nav button:disabled { opacity:.3; cursor:default; }
.routes-nav svg { width:18px; height:18px; }
.routes-count { min-width:74px; text-align:center; font-size:.85rem; font-weight:700; color:var(--ink-dim); font-variant-numeric:tabular-nums; }

@media (max-width:520px){
  .routes-carousel { --card-w:min(268px,78vw); }
  .route-card { margin-inline:-22px; }
  .route-card-photo { aspect-ratio:16/10; }
  .routes-track { padding-top:40px; }
}
/* Flat, upright row when motion is unwelcome — still scrollable. */
@media (prefers-reduced-motion:reduce){
  .route-card { margin-inline:8px; transform:none !important; opacity:1 !important; }
}

.section { padding:clamp(56px,6.5vw,86px) 0; position:relative; }
.section-head { max-width:640px; margin-bottom:clamp(30px,4vw,48px); }
.section-head.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-title { font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.04em; }
.section-lead { color:var(--ink-dim); font-size:1.08rem; margin-top:18px; font-weight:400; max-width:520px; }

/* =====================================================
   SERVICES — cinematic scroll
   ===================================================== */
.services-cinematic { background:var(--bg); padding:0; }
.services-cinematic.is-static { background:var(--bg-alt); padding:0; }
.ss-head {
  position:absolute; top:clamp(96px,12vh,136px); left:0; right:0; z-index:5;
  color:#fff; pointer-events:none;
}
.ss-head .section-eyebrow { color:rgba(255,255,255,.68); }
.ss-head .section-title {
  width:fit-content; color:#fff; background:none;
  text-shadow:none;
}
.ss-head .section-title .line,
.ss-head .section-title .line > span {
  background:transparent !important; box-shadow:none !important;
  text-shadow:none !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.ss-head .section-title.reveal-lines.in .line { overflow:visible; }
.ss-head .section-lead { color:rgba(255,255,255,.82); text-shadow:0 2px 20px rgba(0,0,0,.4); }

.ss-pin { position:relative; }
.ss-stage {
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--dark); opacity:0; transition:opacity .7s var(--ease-out);
}
.ss-stage.is-ready { opacity:1; }

.ss-media-layer { position:absolute; inset:0; z-index:1; }
.ss-panel { position:absolute; inset:0; opacity:0; will-change:opacity,transform; transform:translate3d(0,0,0) scale(1.035); }
.ss-panel:first-child { opacity:1; }
.ss-bg { position:absolute; inset:0; background-size:cover; background-position:center; }

.ss-car-layer {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:1.5%; pointer-events:none;
}
.ss-car {
  width:min(74%,940px); max-height:60%; object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.4));
  transform:translate3d(-48vw,0,0);
  will-change:transform;
}

.ss-text-layer { position:absolute; inset:0; z-index:3; pointer-events:none; }
.ss-text-panel {
  position:absolute; left:0; right:0; bottom:0; padding-bottom:120px;
  opacity:0; will-change:opacity,transform; pointer-events:none;
}
.ss-text-panel:first-child { opacity:1; }
.ss-text-panel h3 {
  font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.035em;
  text-shadow:0 4px 30px rgba(0,0,0,.4); max-width:600px;
}
.ss-text-panel p { color:rgba(255,255,255,.82); margin-top:14px; max-width:460px; font-size:1.02rem; }

.ss-progress {
  position:absolute; left:0; right:0; bottom:36px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.ss-progress-track { width:min(560px,70%); height:2px; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; }
.ss-progress-fill { height:100%; width:0%; background:#fff; }
.ss-dots { display:flex; gap:6px; pointer-events:auto; }
.ss-dot {
  width:36px; height:30px; border:none; background:transparent; border-radius:8px;
  color:rgba(255,255,255,.5); font-size:.72rem; font-weight:700; letter-spacing:.02em; transition:.3s var(--ease);
}
.ss-dot:hover { color:rgba(255,255,255,.85); }
.ss-dot.active { color:#131311; background:#fff; }

/* Static fallback: no GSAP, or prefers-reduced-motion */
.is-static .ss-stage {
  position:relative; height:auto; overflow:visible; opacity:1; background:var(--bg-alt);
  display:flex; flex-direction:column; gap:0; padding:18px;
  border-radius:0;
}
.is-static .ss-pin { height:auto !important; }
.is-static .ss-head {
  position:relative; inset:auto; order:-1; padding-top:74px; padding-bottom:34px;
  color:var(--ink); pointer-events:auto;
}
.is-static .ss-head .section-eyebrow { color:var(--ink-mute); }
.is-static .ss-head .section-title { color:var(--ink); }
.is-static .ss-head .section-lead { color:var(--ink-dim); text-shadow:none; }
.is-static .ss-media-layer,
.is-static .ss-text-layer { display:contents; }
.is-static .ss-car-layer,
.is-static .ss-progress { display:none; }
.is-static .ss-panel,
.is-static .ss-text-panel { order:var(--i,0); }
.is-static .ss-panel {
  position:relative; inset:auto; opacity:1; aspect-ratio:16/10; margin-top:18px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden;
  transform:none; will-change:auto; isolation:isolate; contain:paint;
}
.is-static .ss-panel .ss-bg { width:100%; height:100%; border-radius:inherit; }
.is-static .ss-text-panel { position:relative; opacity:1; padding:22px 24px 26px; pointer-events:auto; background:var(--card); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.is-static .ss-text-panel h3 { color:var(--ink); text-shadow:none; }
.is-static .ss-text-panel p { color:var(--ink-dim); }

/* =====================================================
   FLEET (Rivian-style showcase)
   ===================================================== */
.fleet { background:var(--bg-alt); padding:0 0 clamp(20px,3vw,36px); }
.fleet-side-title { padding:0 28px; text-align:center; }
.fleet-side-title > span { display:block; color:var(--ink-mute); font-size:.9rem; font-weight:400; }
.fleet-side-title h2 { margin-top:10px; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:500; letter-spacing:-.04em; line-height:1; }
.fleet-side-title .split-char { display:inline-block; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; will-change:transform,opacity; }
.fleet-side-title .split-space { display:inline-block; width:.28em; font-size:inherit; }

.fleet-item { padding:clamp(30px,4vw,52px) 24px clamp(26px,3vw,40px); text-align:center; position:relative; overflow:hidden; }
.fleet-stage { position:relative; max-width:900px; margin:0 auto; display:flex; justify-content:center; align-items:flex-end; min-height:340px; }
.ghost {
  /* The word is wider than the 900px stage, and an over-wide line overflows
     to the right of its box instead of centring, which pushed the watermark
     off-centre from the vehicle. A viewport-wide box centred on the stage
     gives text-align:center room to actually work. Centring via transform is
     not an option — the parallax loop overwrites transform on this element. */
  position:absolute; left:50%; top:0; z-index:0;
  width:100vw; margin-left:-50vw; text-align:center;
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(4.6rem,15vw,12.5rem); line-height:.9; letter-spacing:-.03em;
  color:var(--ghost); user-select:none; pointer-events:none;
  will-change:transform;
}
.fleet-car { position:relative; z-index:1; max-height:330px; width:auto; max-width:88%; object-fit:contain; mix-blend-mode:multiply; }

.fleet-info { position:relative; z-index:2; width:100%; max-width:720px; margin:34px auto 0; text-align:center; }
.fleet-info h3 { font-family:var(--serif); font-size:2rem; font-weight:600; letter-spacing:-.03em; }
.fleet-tag { color:var(--ink-dim); margin-top:6px; }
.fleet-specs { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 26px; color:var(--ink-dim); font-size:.95rem; font-weight:600; }
.fleet-specs span { display:inline-flex; align-items:center; gap:8px; }
.fleet-specs .dot { color:var(--ink-mute); }
.spec-ic { width:19px; height:19px; color:var(--ink); }

/* Horizontal scroll enhancement (JS adds .is-horizontal when GSAP is
   available and motion isn't reduced; otherwise the items above stack
   vertically exactly as before). */
/* overflow:hidden lives on the static pin wrapper, not on .fleet-track —
   .fleet-track is the wide (300%) element that gets transformed, so
   clipping it to its own box would cut off item 2/3 before the transform
   ever slides them into view. */
.fleet-pin { position:relative; overflow:hidden; }
.fleet-pin.is-horizontal .fleet-side-title {
  position:absolute; left:clamp(18px,3vw,56px); top:0; bottom:0; z-index:5; padding:0;
  display:grid; place-items:center; text-align:left; pointer-events:none;
}
.fleet-pin.is-horizontal .fleet-side-title > span { display:none; }
.fleet-pin.is-horizontal .fleet-side-title h2 {
  /* Rotation lives on the heading, not the wrapper: with writing-mode on a
     flex/grid parent the main axis flips and the heading gets squeezed. */
  /* height:100% gives the vertical run the whole track; sized to content it
     came up 40px short and the tail of the word was clipped away. */
  margin:0; height:100%; text-align:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:rgba(19,19,17,.82); font-size:clamp(2.6rem,6vw,5.6rem);
  font-weight:600; line-height:.9; letter-spacing:-.03em; white-space:nowrap;
}
.fleet-track.is-horizontal {
  /* Must match the viewport: this element is pinned, and anything shorter
     leaves a band of empty section visible under it while it is held. */
  position:relative; height:100dvh;
}
.fleet-track.is-horizontal .fleet-item {
  position:absolute; inset:0; width:100%; height:100%; opacity:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:20px 24px 40px; pointer-events:none;
  will-change:opacity;
}
.fleet-track.is-horizontal .fleet-car,
.fleet-track.is-horizontal .fleet-info,
.fleet-track.is-horizontal .ghost {
  will-change:transform,opacity;
  /* .reveal-car/.reveal (below) carry a 1-1.2s opacity/transform CSS
     transition meant for the one-time page-load fade-in. Once horizontal
     mode drives these same properties continuously via gsap.set() on
     every scroll tick, that leftover transition fights it — every GSAP
     update gets smoothed over ~1.2s instead of applying instantly, which
     is what made the car look perpetually half-faded/washed out. */
  transition:none !important;
}

.fleet-progress { display:none; }
.fleet-pin.is-horizontal .fleet-progress {
  position:absolute; left:0; right:0; bottom:28px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.fleet-progress-track { width:min(320px,50%); height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.fleet-progress-fill { height:100%; width:0%; background:var(--ink); }
.fleet-dots { display:flex; gap:6px; }
.fleet-dot {
  width:36px; height:30px; border:none; background:transparent; border-radius:8px;
  color:var(--ink-mute); font-size:.72rem; font-weight:700; letter-spacing:.02em; transition:.3s var(--ease);
}
.fleet-dot:hover { color:var(--ink); }
.fleet-dot.active { color:#fff; background:var(--ink); }

/* =====================================================
   SERVICE AREAS
   ===================================================== */
.areas { position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center; }
.areas::before {
  content:""; position:absolute; inset:0;
  background:url('../assets/images/airport-bg.jpg') center 30%/cover no-repeat;
  z-index:0;
}
.areas-video {
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none;
  animation:areasZoom 22s ease-in-out infinite alternate;
}
@keyframes areasZoom { from { transform:scale(1); } to { transform:scale(1.09); } }
.areas::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to left, rgba(12,11,10,.82) 0%, rgba(12,11,10,.55) 55%, rgba(12,11,10,.3) 100%),
             linear-gradient(to bottom, rgba(12,11,10,.35), transparent 25%, transparent 75%, rgba(12,11,10,.35));
  z-index:1;
}
.areas-inner { position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .9fr; gap:64px; align-items:center; }
.areas .section-eyebrow { color:rgba(255,255,255,.6); }
.areas .section-title { color:#fff; }
.areas .section-lead { color:rgba(255,255,255,.78); }
.areas-panel { max-width:640px; }
.areas-panel-title {
  font-size:.95rem; font-weight:600;
  color:rgba(255,255,255,.5); margin-bottom:4px;
}

/* =====================================================
   OPTION WHEEL — vanilla port of react-bits' OptionWheel.
   No React/build step: main.js drives the same eased rAF
   layout loop directly over these DOM nodes. Falls back to
   a plain static list (no absolute positioning) until JS
   adds .option-wheel--ready, so it degrades cleanly with
   no-JS or if the enhancement script fails. No card chrome —
   it sits directly on the video background; position is
   scrubbed by the section's scroll progress (see main.js).
   ===================================================== */
.areas-wheel-row {
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(190px,.72fr);
  gap:clamp(24px,4vw,60px); align-items:center;
}
.option-wheel {
  --ow-text-color: rgba(255,255,255,.3);
  --ow-active-color: #ffffff;
  --ow-font-size: clamp(3.2rem, 5.7vw, 5.8rem);
  --ow-inset: clamp(72px,7vw,104px);
  position:relative; width:100%; height:clamp(480px,68vh,720px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  outline:none; user-select:none;
}
.option-wheel:focus-visible { outline:1px solid rgba(255,255,255,.4); outline-offset:4px; border-radius:8px; }
.option-wheel--ready { cursor:grab; touch-action:none; }
.option-wheel--ready.option-wheel--dragging { cursor:grabbing; }

.option-wheel__item {
  display:block; padding:6px 0; font-family:var(--serif); font-weight:600;
  font-size:1.4rem; color:var(--ow-text-color); cursor:pointer;
}
.option-wheel__item--selected { color:#fff; }

.option-wheel--ready .option-wheel__item {
  position:absolute; top:50%; left:var(--ow-inset); padding:0;
  white-space:nowrap; font-size:var(--ow-font-size); line-height:1;
  letter-spacing:-.02em; transform-origin:left center; will-change:transform,opacity,filter;
  color:var(--ow-text-color);
  color:color-mix(in srgb, var(--ow-active-color) calc(var(--ow-p,0) * 100%), var(--ow-text-color));
}

.areas-wheel-detail { padding-left:0; min-width:0; }
.areas-wheel-name { color:#fff; font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.3; }

/* =====================================================
   REVIEWS
   ===================================================== */
.reviews { background:var(--bg-alt); }
.reviews .section-head { max-width:720px; margin-inline:auto; }
.reviews .section-lead { max-width:620px; margin:18px auto 0; }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:52px; }
.review-card {
  display:flex; flex-direction:column; min-width:0; min-height:330px; padding:30px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 14px 40px rgba(22,18,12,.06); transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.review-card--featured { background:var(--ink); color:#fff; border-color:transparent; box-shadow:0 20px 52px rgba(22,18,12,.16); }
.review-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.review-stars { color:var(--accent); font-size:.94rem; letter-spacing:.16em; white-space:nowrap; }
.review-trip { color:var(--ink-mute); font-size:.8rem; font-weight:500; text-align:right; }
.review-card--featured .review-trip { color:rgba(255,255,255,.62); }
.review-card blockquote { margin:34px 0 32px; color:var(--ink); font-family:var(--serif); font-size:clamp(1.25rem,1.45vw,1.55rem); line-height:1.48; letter-spacing:-.015em; }
.review-card--featured blockquote { color:#fff; }
.review-card footer { display:flex; align-items:center; gap:12px; margin-top:auto; }
.review-avatar { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:var(--bg-alt); color:var(--ink); font-size:.72rem; font-weight:800; letter-spacing:.06em; }
.review-card--featured .review-avatar { background:rgba(255,255,255,.13); color:#fff; }
.review-card footer > span:last-child { display:grid; gap:2px; min-width:0; }
.review-card footer strong { font-size:.88rem; }
.review-card footer small { color:var(--ink-mute); font-size:.76rem; line-height:1.4; }
.review-card--featured footer small { color:rgba(255,255,255,.62); }
.reviews-disclosure { margin:24px auto 0; color:var(--ink-mute); font-size:.72rem; line-height:1.5; text-align:center; }
@media (hover:hover) and (pointer:fine){
  .review-card:hover { transform:translateY(-5px); box-shadow:0 22px 54px rgba(22,18,12,.1); }
  .review-card--featured:hover { box-shadow:0 26px 62px rgba(22,18,12,.2); }
}
@media (max-width:1024px) and (min-width:761px){
  .review-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .review-card:last-child { grid-column:1 / -1; min-height:280px; }
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact { background:var(--bg); }
.contact-inner { max-width:900px; }

/* ---------- Contact as a message thread ---------- */
.contact-thread { max-width:760px; }
/* Shared bubble shape; the tail is a rotated square tucked under one corner. */
.bubble { position:relative; border-radius:30px; }
/* A tapered tail, clipped to a triangle. A rotated square left a flat
   horizontal ledge cutting across the bubble’s rounded corner, which read as
   the bubble being sliced off. It overlaps 5px into the body so no seam shows,
   and sits clear of the 30px corner radius where the bottom edge is straight.
   background:inherit means each colour variant gets a matching tail. */
.bubble::after {
  content:""; position:absolute; bottom:-9px; width:20px; height:14px;
  background:inherit;
}
.bubble-lead {
  display:inline-block; padding:clamp(20px,3vw,34px) clamp(28px,4vw,52px);
  background:var(--card); box-shadow:0 18px 46px rgba(19,19,17,.09);
}
.bubble-lead::after { left:32px; clip-path:polygon(0 0, 100% 0, 0 100%); }
.bubble-lead .section-title { margin:0; }
.thread-note { margin:26px 0 0; max-width:52ch; color:var(--ink-dim); font-size:.95rem; line-height:1.7; }

.bubble-list { list-style:none; margin:clamp(26px,4vw,40px) 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.bubble-row { display:flex; }
.bubble-row--right { justify-content:flex-end; }
.bubble-list .bubble {
  display:inline-flex; align-items:center; gap:14px; max-width:min(100%,460px);
  padding:14px 22px 14px 16px; color:#fff;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bubble-row--left .bubble::after  { left:30px;  clip-path:polygon(0 0, 100% 0, 0 100%); }
.bubble-row--right .bubble::after { right:30px; clip-path:polygon(0 0, 100% 0, 100% 100%); }
.bubble-list .bubble:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(19,19,17,.18); }
.bubble-icon {
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.18);
}
.bubble-icon svg { width:19px; height:19px; }
.bubble-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bubble-text small { font-size:.76rem; color:rgba(255,255,255,.8); }
.bubble-text strong { font-size:1rem; font-weight:600; overflow-wrap:anywhere; }

/* Each channel wears its own colour, darkened so white text clears AA. */
.bubble--sms  { background:#0a6ed6; }  /* messages blue  4.98:1 */
.bubble--call { background:#111111; }  /* ink           18.9:1  */
.bubble--wa   { background:#0f7c6f; }  /* WhatsApp      5.08:1  */
.bubble--mail { background:#c0392b; }  /* mail red      5.44:1  */

.thread-follow {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:34px; font-size:.85rem; color:var(--ink-dim);
}
.socials-sm a { width:38px; height:38px; }
.socials-sm svg { width:16px; height:16px; }
@media (max-width:560px){
  .bubble-list .bubble { max-width:100%; padding:12px 16px 12px 12px; gap:11px; }
  .bubble-icon { width:34px; height:34px; }
  .bubble-text strong { font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce){ .bubble-list .bubble:hover { transform:none; } }
/* Contact details as a card: icon tile, small label, bold value per row. */
.socials-sm a { width:38px; height:38px; }
.socials-sm svg { width:16px; height:16px; }
@media (max-width:560px){
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer { background:#fff; color:var(--ink); padding-top:clamp(48px,6vw,68px); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:44px; padding-bottom:56px; }
.footer-brand .logo { margin-bottom:22px; }
.footer-addr { color:var(--ink-dim); font-size:.93rem; line-height:1.95; }
.footer-addr a { display:inline-flex; align-items:center; min-height:44px; }
.footer-addr a:hover { color:var(--ink); }
.socials { display:flex; gap:12px; margin-top:24px; }
.socials a { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; color:var(--ink-dim); transition:all .3s var(--ease); }
.socials a svg { width:18px; height:18px; }
.socials a:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-3px); }
.footer-col h4 { font-size:.9rem; margin-bottom:20px; font-weight:600; color:var(--ink-mute); }
.footer-col a { display:block; color:var(--ink-dim); font-size:.93rem; padding:6px 0; transition:color .3s, transform .3s; }
.footer-col a:hover { color:var(--ink); }
.footer-cta p { color:var(--ink-dim); font-size:.93rem; margin-bottom:20px; }
.footer-col a.btn-light { display:inline-flex; background:var(--ink); color:#fff; padding:.9em 1.9em; }
.footer-col a.btn-light:hover { background:#000; color:#fff; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:24px 28px; border-top:1px solid var(--line); color:var(--ink-mute); font-size:.85rem; }
.footer-legal { display:flex; gap:28px; }
.footer-legal a { display:flex; align-items:center; min-height:44px; }
.footer-legal a:hover { color:#fff; }

/* =====================================================
   SMS FAB
   ===================================================== */
/* Persistent action bar — always on screen, on every viewport. */
.cta-bar {
  position:fixed; z-index:96; left:0; right:0; bottom:0;
  padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  border-radius:20px 20px 0 0;
  background:rgba(17,17,17,.92);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
}
.cta-bar-inner { width:100%; max-width:var(--container); margin:0 auto; display:flex; gap:10px; }
.cta-bar .btn { flex:1 1 0; min-height:48px; justify-content:center; border-radius:100px; padding:.8em 1.2em; }
.cta-bar-price { background:#fff; color:var(--ink); }
.cta-bar-price:hover { background:#f0f0f0; transform:translateY(-1px); }
.cta-bar-text { background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; }
.cta-bar-text:hover { background:rgba(255,255,255,.1); border-color:#fff; }
/* The drawer is a modal layer; the bar must not float above it. */
body.menu-open .cta-bar { opacity:0; visibility:hidden; pointer-events:none; }
/* Keep the bar from covering the end of the page. */
body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
html { scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
@media (min-width:761px) {
  .cta-bar-inner { max-width:520px; margin-left:auto; margin-right:auto; }
}

.fab-sms { position:fixed; bottom:26px; right:26px; z-index:90; width:56px; height:56px; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:var(--sms); color:var(--sms-ink); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .3s var(--ease),background-color .2s ease,box-shadow .2s ease,opacity .2s ease,visibility .2s; }
.fab-sms.is-mobile-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); }
.fab-sms svg { width:27px; height:27px; }
.fab-sms:hover { background:#2b2b2b; box-shadow:0 14px 34px rgba(0,0,0,.36); transform:scale(1.08); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1024px){
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .booking-panel.active { flex-wrap:wrap; }
  .bfield { flex:1 1 45%; }
  .bfield-sm { flex:1 1 45%; }
  .bdivider { display:none; }
  .booking-submit { flex:1 1 100%; margin:8px 12px 10px; }
  .booking-details-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .child-seat-group { grid-column:1 / -1; }
  .booking-submit-shared { grid-column:1 / -1; min-height:52px; margin:0; }
  .ss-car { width:min(76%,780px); max-height:56%; }
  .ss-text-panel { padding-bottom:100px; }
}
@media (max-width:960px){
  .nav { display:none; }
  .btn-book { display:none; }
  .lang-select { display:none; }
  .menu-toggle { display:flex; }
  .areas-inner { grid-template-columns:1fr; gap:44px; }
  .areas-copy { order:-1; }
  .areas { padding-top:100px; padding-bottom:70px; }
  .areas-wheel-row { grid-template-columns:minmax(180px,1fr) minmax(145px,.75fr); gap:24px; }
  .option-wheel { --ow-font-size:clamp(2.75rem,11vw,4.6rem); --ow-inset:clamp(48px,8vw,72px); height:clamp(390px,58vh,560px); }
  .areas-wheel-name { font-size:1.05rem; }
  .ss-dots { display:none; }
  .ss-progress { bottom:22px; }
  .ss-text-panel { padding-bottom:64px; }
  .ss-text-panel h3 { font-size:clamp(1.5rem,5.5vw,2rem); }
  .ss-car { width:min(88%,620px); max-height:48%; }

  .mobile-drawer { display:block; position:fixed;
    top:calc(84px + env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); z-index:99;
    background:rgba(246,245,241,.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.75); box-shadow:0 24px 70px rgba(0,0,0,.2);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:max-height .35s var(--ease),opacity .22s ease,transform .35s var(--ease),visibility 0s linear .35s;
    color:var(--ink); border-radius:22px; }
  .mobile-drawer.open { max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  .mobile-nav { display:flex; flex-direction:column; padding:22px 28px 32px; gap:4px; }
  .mobile-nav a { display:flex; align-items:center; min-height:48px; padding:10px 0; font-size:1.05rem; font-weight:600; color:var(--ink-dim); border-bottom:1px solid var(--line); }
  .mobile-nav a.btn { width:100%; align-self:stretch; justify-content:center; border:none; margin:16px 0 0; color:#fff; }
}
@media (max-width:560px){
  .container { padding:0 20px; }
  .section { padding:clamp(52px,7vw,72px) 0; }
  .services-cinematic { padding:0; }
  .ss-head { top:92px; }
  .areas { padding-top:86px; padding-bottom:48px; }
  .areas-inner { gap:24px; }
  .areas-wheel-row { grid-template-columns:minmax(135px,1fr) minmax(120px,.82fr); gap:16px; }
  .option-wheel { --ow-font-size:clamp(2.5rem,13vw,3.75rem); --ow-inset:36px; height:clamp(340px,52vh,470px); }
  .areas-wheel-name { font-size:.95rem; }
  .footer-grid { grid-template-columns:1fr; }
  .bfield, .bfield-sm { flex:1 1 100%; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .fleet-item { padding:32px 16px 28px; }
  .fleet-stage { min-height:210px; }
  .fleet-car { max-height:190px; }
  .is-static .ss-panel { aspect-ratio:4/3; }
}

/* Phone-first refinements */
@media (max-width:960px){
  .site-header { padding-top:calc(12px + env(safe-area-inset-top)); }
  .header-inner {
    width:auto; height:60px; gap:12px;
    margin-left:max(12px,env(safe-area-inset-left));
    margin-right:max(12px,env(safe-area-inset-right));
    padding:0 6px 0 18px;
  }
  .header-actions { gap:8px; }
  .lang-btn { min-width:44px; min-height:44px; justify-content:center; }
}

.option-wheel--compact {
  width:100%; height:auto; overflow:visible; padding:4px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  -webkit-mask-image:none; mask-image:none; touch-action:pan-y; cursor:default;
}
.option-wheel--compact .option-wheel__item {
  position:static; min-width:0; min-height:48px; padding:10px 8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28); border-radius:12px;
  color:rgba(255,255,255,.76); font-size:1rem; font-weight:700;
  line-height:1; letter-spacing:.04em; text-align:center;
  transform:none !important; filter:none !important; opacity:1 !important;
  white-space:normal; transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.option-wheel--compact .option-wheel__item--selected {
  background:#fff; border-color:#fff; color:var(--ink);
}

@media (max-width:760px){
  .container { padding-right:max(20px,env(safe-area-inset-right)); padding-left:max(20px,env(safe-area-inset-left)); }
  .hero { min-height:100svh; }
  .hero-media img, .hero-media video { object-position:58% center; animation:none; transform:scale(1.02); }
  .hero-media .hero-video { display:none; }
  .hero-media .hero-mobile-poster { display:block; }
  .hero-overlay { background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,.28) 30%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.82)); }
  .hero-eyebrow { margin-bottom:14px; font-size:.72rem; letter-spacing:.25em; }
  .hero-title { font-size:clamp(1.95rem,9.5vw,2.5rem); line-height:1.08; letter-spacing:-.045em; }
  .hero-title .line { overflow:visible; }
  .hero-services { margin-top:14px; gap:2px 10px; font-size:.78rem; }

  .booking-wrap { margin-top:30px; gap:12px; }
  .booking-tabs { width:100%; padding:4px; }
  .booking-tab { flex:1; min-height:46px; padding:10px 12px; font-size:.9rem; }
  .booking-bar { padding:10px; border-radius:22px; }
  .booking-panel.active { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:10px; }
  .bfield, .bfield-sm {
    width:100%; min-width:0; flex:none; padding:9px 14px 10px; gap:2px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); border-radius:13px;
  }
  .bfield label { font-size:.75rem; }
  .bfield input, .bfield select, .dt-trigger { min-height:44px; padding:4px 0 6px; font-size:16px; }
  .booking-submit { width:100%; min-height:52px; margin:0; align-self:stretch; justify-self:stretch; font-size:.95rem; }
  .booking-details { margin-top:12px; padding:16px 0 0; }
  .booking-details-heading { margin-right:4px; margin-left:4px; }
  .booking-details-heading > div > p:last-child { font-size:.75rem; }
  .booking-details-grid { grid-template-columns:minmax(0,1fr); }
  .booking-count-field, .child-seat-group, .booking-submit-shared { grid-column:auto; }
  .booking-count-field { width:100%; padding:9px 14px 10px; }
  .child-seat-group { padding:10px 13px 12px; }
  .child-seat-option select { min-height:44px; font-size:16px; }
  .booking-area-note { margin-top:0; padding:0 4px; font-size:.875rem; line-height:1.55; }
  .ac-clear { right:3px; bottom:5px; width:44px; height:44px; }
  .ac-panel { left:0; right:0; top:calc(100% + 8px); border-radius:14px; }
  .ac-panel.panel-up { bottom:calc(100% + 8px); }
  .ac-list { max-height:min(300px,48dvh); }
  .ac-item { min-height:52px; padding:12px; }

  .is-static .ss-stage { padding:0 16px; }
  .is-static .ss-head { padding:72px 4px 24px; }
  .is-static .ss-panel { aspect-ratio:4/3; margin-top:14px; }
  .is-static .ss-text-panel { padding:20px 20px 24px; }
  .is-static .ss-text-panel h3 { font-size:1.35rem; }
  .is-static .ss-text-panel p { margin-top:8px; font-size:.95rem; line-height:1.6; }

  .fleet { padding-bottom:24px; }
  .fleet-side-title { padding:68px 20px 0; }
  .fleet-item { padding:58px 16px 62px; }
  .fleet-stage { min-height:190px; }
  .fleet-car { max-height:180px; max-width:96%; }
  .ghost { font-size:clamp(3.5rem,20vw,6rem); }
  .fleet-info { margin-top:20px; }
  .fleet-info h3 { font-size:1.65rem; }
  .fleet-specs { flex-wrap:wrap; gap:8px 12px; margin:14px 0 22px; }
  .fleet-specs .dot { display:none; }

  .areas { min-height:auto; padding:76px 0 64px; }
  .areas-video { display:none; }
  .areas::after { background:linear-gradient(to bottom,rgba(12,11,10,.68),rgba(12,11,10,.78)); }
  .areas-wheel-row { display:block; }
  .areas-wheel-detail { margin-top:18px; min-height:48px; }
  .areas-wheel-name { font-size:1rem; line-height:1.5; }

  .review-grid { grid-template-columns:1fr; gap:16px; margin-top:34px; }
  .review-card { min-height:0; padding:24px; }
  .review-card blockquote { margin:26px 0 28px; font-size:1.22rem; }
  .fab-sms {
    right:max(18px,env(safe-area-inset-right));
    bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
    width:52px; height:52px;
  }
  .site-footer { padding-bottom:env(safe-area-inset-bottom); }
  .footer-col a { min-height:44px; display:flex; align-items:center; }
  .footer-col a.btn-light { display:inline-flex; }
  .footer-bottom { padding:24px 20px; }
}

@media (max-width:560px){
  .lang-select { display:none; }
  .header-inner { width:auto; }
  .logo-mark { font-size:1.5rem; }
  .logo-text { font-size:.68rem; letter-spacing:.18em; }
  .section { padding:52px 0; }
  .section-title { font-size:clamp(2rem,11vw,2.8rem); }
  .section-lead { font-size:1rem; }
  .mobile-nav { padding:16px 22px 24px; }
  .option-wheel--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:430px){
  .child-seat-grid { grid-template-columns:minmax(0,1fr); gap:6px; }
  .child-seat-option { min-height:44px; }
  .child-seat-option small { display:inline; margin:0 0 0 4px; }
}

@media (max-width:360px){
  .logo-text { display:none; }
  .hero-title { font-size:1.9rem; }
  .hero-services { font-size:.72rem; }
  .booking-wrap { margin-top:24px; }
  .bfield, .bfield-sm { padding-right:11px; padding-left:11px; }
  .option-wheel--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-height:500px) and (max-width:960px){
  .container { padding-right:max(20px,env(safe-area-inset-right)); padding-left:max(20px,env(safe-area-inset-left)); }
  .hero-copy { padding:22px; }
  .hero-eyebrow { margin-bottom:8px; }
  .hero-title { max-width:620px; font-size:clamp(2rem,6vw,3rem); }
  .booking-wrap { margin-top:20px; }
  .booking-tab { min-height:44px; }
  .booking-panel.active { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:10px; }
  .bfield, .bfield-sm { width:100%; min-width:0; flex:none; }
  .bfield input, .bfield select, .dt-trigger { min-height:44px; font-size:16px; }
  .booking-submit { width:100%; min-height:52px; margin:0; align-self:stretch; justify-self:stretch; }
  .mobile-drawer.open { max-height:calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .mobile-nav { padding:6px 18px; gap:0; }
  .mobile-nav a { min-height:44px; padding:4px 0; }
  .mobile-nav a.btn { min-height:44px; margin-top:4px; }
  .fleet-item { padding-top:48px; padding-bottom:48px; }
}

/* Coarse pointers identify touch-first devices even when a wide landscape
   viewport would otherwise fall back to the two-column tablet form. */
@media (pointer:coarse) and (max-width:1024px){
  .booking-panel.active { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:10px; }
  .bfield, .bfield-sm {
    width:100%; min-width:0; flex:none; padding:9px 14px 10px; gap:2px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); border-radius:13px;
  }
  .bfield input, .bfield select, .dt-trigger { min-height:44px; padding:4px 0 6px; font-size:16px; }
  .booking-submit { width:100%; min-height:52px; margin:0; align-self:stretch; justify-self:stretch; }
}

@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce){
  .hero-media .hero-video, .areas-video { display:none; }
  .hero-media .hero-mobile-poster { display:block; animation:none; transform:scale(1.02); }
}

@media (hover:none){
  .btn:hover, .btn-pill:hover, .btn-light:hover, .socials a:hover { transform:none; box-shadow:none; }
}