/* Royal Reserve Limo site styles.
   Lifted out of index.html so the booking page can share exactly the same
   rules rather than carrying a second copy that drifts. */
/* ============================================================
   Tokens

   The palette, type, easing and header height all come from premium.css. This
   page used to restate them, which meant the design system could be changed
   without the home page noticing, and worse: a plain :root here outranks a
   media query there, so premium.css's mobile header height never applied.
   Only what is genuinely particular to this page is declared now.
   ============================================================ */
:root{
  /* A narrower measure than the portal pages, for reading rather than data. */
  --maxw: 1180px;
  /* Slower than the product default: this page is meant to unfold. */
  --dur: 0.85s;
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-size:clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* clip (not hidden) so position:sticky in the hero keeps working */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-serif); font-weight:400; line-height:1.06; letter-spacing:-0.01em; }
p{ margin:0; }

::selection{ background:var(--brass-wash); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--brass); color:var(--on-brass);
  padding:.75rem 1.1rem; border-radius:0 0 6px 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4.5rem, 9vw, 8.5rem); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.eyebrow{
  font-family:var(--ff-sans);
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:var(--brass);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--brass); opacity:.65;
}

.display{ font-size:clamp(2.35rem, 1.4rem + 4.4vw, 4.6rem); }
.h2{ font-size:clamp(1.9rem, 1.2rem + 2.9vw, 3.15rem); }
.lede{ color:var(--ink-2); font-size:clamp(1.08rem, 1rem + 0.5vw, 1.3rem); line-height:1.5; max-width:60ch; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:0.95em 1.6em;
  font-size:0.82rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  border-radius:2px; border:1px solid transparent;
  transition:background var(--dur) var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  will-change:transform;
}
.btn:active{ transform:translateY(1px); }
.btn--brass{ background:var(--brass); color:var(--on-brass); }
.btn--brass:hover{ background:var(--brass-deep); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn--wide{ width:100%; }

.arrowlink{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--brass);
}
.arrowlink svg{ transition:transform .4s var(--ease); }
.arrowlink:hover svg{ transform:translateX(5px); }

/* ============================================================
   Header
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:oklch(0.132 0.008 66 / 0.86);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand__mark{ width:15px; height:15px; transform:rotate(45deg); border:1px solid var(--brass); position:relative; flex:none; }
.brand__mark::after{ content:""; position:absolute; inset:3px; background:var(--brass); }
.brand__name{ font-size:0.95rem; font-weight:600; letter-spacing:0.26em; text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:0.78rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2);
  position:relative; padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }

/* The .tel text link that used to live here is gone; see .header__call at the
   end of this file for the button that replaced it. */
.header__cta{ display:flex; align-items:center; gap:1rem; }

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); border-radius:2px;
}
.burger span{ display:block; width:20px; height:1.5px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg-deep);
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:var(--gutter);
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .6s var(--ease), opacity .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--ff-serif); font-size:2rem; color:var(--ink); padding-block:.55rem; border-bottom:1px solid var(--line); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:1.5rem; }

/* ============================================================
   Hero — cinematic night drive (looping video)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
  background:var(--bg-deep);
}
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bg-deep) url("hero-poster.jpg") center 52% / cover no-repeat; }
/* Blocked autoplay is common on phones and under data saving, so playback is
   always manually controllable rather than silently dead. */
/* The pause control: out of sight, still reachable.
 *
 * Asked for it to go, and visually it has. It is not deleted, because the hero
 * plays a looping video on load and moving content that runs for more than a
 * few seconds has to offer a way to stop it. Taking the button away entirely
 * would leave anyone who needs that with nothing.
 *
 * So it sits off screen until it is focused, in the same way as the skip link
 * above, and reappears in place the moment someone tabs to it. Nobody browsing
 * with a mouse will ever see it. prefers-reduced-motion is still honoured
 * separately, and holds the poster frame instead of playing at all. */
.hero__video-control{
  position:absolute; z-index:4; right:var(--gutter); top:calc(var(--header-h) + 1rem);
  min-height:42px; padding:.65rem .9rem;
  border:1px solid oklch(0.935 0.012 82 / 0.28); border-radius:2px;
  background:oklch(0.118 0.008 66 / 0.78); color:var(--ink);
  font:600 .72rem/1 var(--ff-sans); letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:blur(8px);
  /* clip-path rather than display:none, which would take it out of the tab
     order and defeat the point of keeping it. */
  opacity:0; pointer-events:none;
  transform:translateY(-.4rem);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
/* :focus as well as :focus-visible. focus-visible is a heuristic, and a
   control that is invisible until the browser agrees the focus was "visible
   enough" is a control that can fail to come back. Any focus reveals it. */
/* Visible when it is needed: focused, or when autoplay was refused and the
   poster is all there is. In that second case it is the only way to start the
   video, so hiding it would leave a still frame and no explanation. */
.hero__video-control:focus,
.hero__video-control:focus-visible,
.hero__video-control.is-needed{
  opacity:1; pointer-events:auto; transform:none;
  border-color:var(--brass); color:var(--brass);
}
@media (max-width:640px){ .hero__video-control{ top:calc(var(--header-h) + .6rem); right:1rem; padding:.5rem .7rem; } }

/* No zoom, no grain: both were removed for playback cost on phones. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 52%;
  transform:none; animation:none; filter:none; will-change:auto;
}
.hero__veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, oklch(0.07 0.006 66 / 0.55) 0%, transparent 20%, oklch(0.07 0.006 66 / 0.28) 44%, oklch(0.07 0.006 66 / 0.80) 74%, oklch(0.06 0.006 66 / 0.98) 100%),
    linear-gradient(90deg, oklch(0.06 0.006 66 / 0.88) 0%, oklch(0.06 0.006 66 / 0.48) 34%, transparent 62%);
}

.hero__inner{
  position:relative; z-index:3; width:100%;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:clamp(3rem, 9vh, 6.5rem);
}
/* above-the-fold entrance — runs on load, never waits on a scroll observer */
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero__lockup{ animation:heroIn .6s var(--ease) both; }
.hero__h1{ animation:heroIn .6s .08s var(--ease) both; }
.hero__sub{ animation:heroIn .6s .16s var(--ease) both; }
.hero__actions{ animation:heroIn .6s .24s var(--ease) both; }
.hero__lockup{ display:inline-flex; align-items:center; gap:.6rem; color:var(--brass); margin-bottom:1.6rem; }
.hero__lockup svg{ width:20px; height:20px; }
.hero__lockup span{ font-size:0.72rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; }
.hero__h1{
  font-family:var(--ff-serif); font-weight:300; letter-spacing:-0.02em; line-height:0.98;
  font-size:clamp(3rem, 1.3rem + 7vw, 6.6rem); max-width:15ch;
  text-shadow:0 2px 40px oklch(0.05 0.01 66 / 0.5);
}
.hero__h1 em{ font-style:italic; }
.hero__sub{ margin-top:1.5rem; max-width:42ch; color:var(--ink); opacity:0.9;
  font-size:clamp(1.05rem, 1rem + 0.5vw, 1.32rem); line-height:1.5;
  text-shadow:0 1px 24px oklch(0.05 0.01 66 / 0.55); }
.hero__actions{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }

.hero__scroll{
  position:absolute; z-index:3; right:var(--gutter); bottom:clamp(3rem, 9vh, 6.5rem);
  display:flex; align-items:center; gap:.7rem; color:var(--ink-2);
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase; writing-mode:vertical-rl;
}
.hero__scroll .line{ writing-mode:horizontal-tb; width:1px; height:46px; background:linear-gradient(var(--brass), transparent); }
@media (max-width:820px){ .hero__scroll{ display:none; } }

@media (max-width:640px){
  .hero{ align-items:flex-end; }
  .hero__h1{ font-size:clamp(2.9rem, 1.2rem + 9vw, 4.6rem); }
  .hero__sub{ max-width:34ch; }
}

@media (prefers-reduced-motion:reduce){
  .hero__video{ animation:none; }
}

/* ============================================================
   Trust bar
   ============================================================ */
.trust{ background:var(--bg-deep); border-block:1px solid var(--line); }
.trust__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.trust__item{
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1rem,2.5vw,2rem);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.35rem;
}
.trust__item:first-child{ border-left:0; }
.trust__item .k{ font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); font-weight:600; }
.trust__item .v{ color:var(--ink-2); font-size:0.95rem; }
/* Two across on a tablet. premium.css had this, but site.css loads second and
   its top-level four-column rule outranked it, so the rule never applied and
   tablets got four columns squeezed to a quarter width each. One stylesheet
   owns the whole ladder now. */
@media (max-width:1050px){
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item:nth-child(odd){ border-left:0; }
  .trust__item:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:760px){
  /* One column, one separator, stated in full.
   *
   * This was a two column grid whose items took a border-top from here and a
   * border-bottom from premium.css, so every row between them was drawn twice
   * at 2px, while padding:1rem 0!important removed the horizontal padding and
   * ran the text into the edge. Two stylesheets each describing half of a
   * layout is how that happens, so this block now sets every side rather than
   * adding to whatever the other one left behind.
   *
   * A single column, because "Professional Chauffeurs" wraps to two lines in
   * half of a 390px screen and the four items stop reading as a row. */
  .trust__grid{ grid-template-columns:1fr; padding-inline:var(--gutter); }
  .trust__item{
    border:0;
    border-top:1px solid var(--line);
    padding:1.15rem 0;
    min-height:0;
  }
  .trust__item:first-child{ border-top:0; }
}

/* ============================================================
   Section intro pattern
   ============================================================ */
.sec-head{ display:grid; grid-template-columns:1fr; gap:1.1rem; max-width:64ch; }
.sec-head--split{
  max-width:none; grid-template-columns:1fr; gap:1.4rem;
}
@media (min-width:900px){
  .sec-head--split{ grid-template-columns:0.9fr 1.1fr; align-items:end; gap:3rem; }
}

/* ============================================================
   Services — editorial index
   ============================================================ */
.svc-list{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2rem;
  padding-block:clamp(1.8rem,3.5vw,2.6rem);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.svc:hover{ background:oklch(0.185 0.009 66 / 0.5); }
.svc__no{ font-family:var(--ff-serif); font-size:0.95rem; color:var(--brass); padding-top:.5rem; letter-spacing:0.05em; }
.svc__body{ display:grid; grid-template-columns:1fr; gap:.7rem; }
@media (min-width:820px){ .svc__body{ grid-template-columns:0.85fr 1.15fr; gap:2.5rem; align-items:start; } }
.svc__title{ font-size:clamp(1.5rem,1rem+1.6vw,2.15rem); font-weight:400; }
.svc__desc{ color:var(--ink-2); max-width:52ch; }
.svc__tag{ display:inline-block; margin-top:.9rem; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); }

/* ============================================================
   Fleet
   ============================================================ */
.fleet{ background:var(--bg-deep); }
.fleet__grid{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:840px){ .fleet__grid{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; } }
.veh{
  background:var(--bg-panel); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.veh:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.veh--feature{ border-color:oklch(0.72 0.082 74 / 0.4); }
.veh__media{
  aspect-ratio:16/10; position:relative;
  background:
    radial-gradient(120% 90% at 50% 120%, oklch(0.30 0.03 74 / 0.5), transparent 60%),
    linear-gradient(160deg, oklch(0.22 0.010 66), oklch(0.135 0.008 66));
  display:flex; align-items:flex-end; padding:1.2rem 1.4rem;
  overflow:hidden;
}
.veh__media::before{ /* soft floor reflection line */
  content:""; position:absolute; left:10%; right:10%; bottom:20%; height:1px;
  background:linear-gradient(90deg, transparent, oklch(0.75 0.06 82 / 0.35), transparent);
}
.veh__class{ font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--brass); font-weight:600; position:relative; z-index:2; }
.veh__silhouette{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5; }
.veh__silhouette svg{ width:66%; height:auto; }
.veh__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .8s var(--ease); }
.veh:hover .veh__img{ transform:scale(1.04); }
.veh__media::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, oklch(0.11 0.008 66 / 0.2) 0%, transparent 34%, oklch(0.11 0.008 66 / 0.9) 100%); }
.veh__body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:1.1rem; flex:1; }
.veh__name{ font-size:1.7rem; }
.veh__models{ color:var(--ink-3); font-size:0.86rem; margin-top:-.5rem; }
.veh__note{ color:var(--ink-2); font-size:0.95rem; }
.veh__specs{ display:flex; gap:1.8rem; padding-top:1.1rem; border-top:1px solid var(--line); margin-top:auto; }
.veh__spec .n{ font-family:var(--ff-serif); font-size:1.35rem; color:var(--ink); }
.veh__spec .l{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.veh__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.veh__rate .from{ font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); display:block; }
.veh__rate .amt{ font-family:var(--ff-serif); font-size:1.5rem; color:var(--ink); }
.veh__rate .amt small{ font-size:0.8rem; color:var(--ink-2); }

/* ============================================================
   How it works
   ============================================================ */
.steps{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:2.5rem; grid-template-columns:1fr; counter-reset:s; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:0; } }
.step{ position:relative; padding-block:1rem; }
@media (min-width:820px){ .step{ padding-inline:2.2rem; border-left:1px solid var(--line); } .step:first-child{ border-left:0; padding-left:0; } }
.step__no{ font-family:var(--ff-serif); font-size:0.85rem; color:var(--brass); letter-spacing:0.1em; }
.step__title{ font-size:1.65rem; margin-top:.9rem; }
.step__desc{ color:var(--ink-2); margin-top:.8rem; max-width:38ch; }

/* ============================================================
   Rates
   ============================================================ */
.rates{ background:var(--bg-deep); }
.rates__table{ margin-top:clamp(2.5rem,5vw,3.5rem); width:100%; border-collapse:collapse; }
.rates__table caption{ text-align:left; color:var(--ink-3); font-size:0.85rem; margin-bottom:1rem; }
.rates__table th, .rates__table td{ text-align:left; padding:1.15rem 1.2rem; border-bottom:1px solid var(--line); }
.rates__table thead th{
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
  border-bottom-color:var(--line-2);
}
.rates__table tbody tr{ transition:background .4s var(--ease); }
.rates__table tbody tr:hover{ background:oklch(0.185 0.009 66 / 0.55); }
.rates__table .svc-name{ color:var(--ink); font-weight:500; }
.rates__table .veh-name{ color:var(--ink-2); }
.rates__table .price{ font-family:var(--ff-serif); font-size:1.2rem; color:var(--brass); white-space:nowrap; text-align:right; }
.rates__table th:last-child{ text-align:right; }
.rates__fine{ margin-top:1.6rem; color:var(--ink-3); font-size:0.85rem; max-width:70ch; }
.rates__wrap{ overflow-x:auto; }

/* About figure */
.about__since{ margin-top:1.8rem; display:flex; align-items:baseline; gap:.9rem; }
.about__fig{ font-family:var(--ff-serif); font-size:clamp(2.4rem,1.5rem+2.6vw,3.4rem); font-weight:300; color:var(--brass); line-height:1; }
.about__figlab{ font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); max-width:14ch; line-height:1.4; }

/* ============================================================
   Coverage
   ============================================================ */
.coverage__grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:900px){ .coverage__grid{ grid-template-columns:1fr 1.05fr; gap:4rem; align-items:center; } }
.areas{ list-style:none; margin:0; padding:0; column-gap:2.5rem; }
@media (min-width:520px){ .areas{ columns:2; } }
.areas li{ padding:.75rem 0; border-bottom:1px solid var(--line); font-family:var(--ff-serif); font-size:1.3rem; color:var(--ink); display:flex; align-items:center; gap:.8rem; break-inside:avoid; }
.areas li::before{ content:""; width:5px; height:5px; background:var(--brass); border-radius:50%; flex:none; }
.coverage-map{ margin:0; border:1px solid var(--line); background:var(--bg-panel); }
.coverage-map img{ display:block; width:100%; height:auto; aspect-ratio:32/21; object-fit:cover; }
.coverage-map__fallback{ padding:1.6rem 1.2rem; color:var(--ink-2); line-height:1.6; }
.coverage-map figcaption{ padding:.85rem 1.1rem; border-top:1px solid var(--line); color:var(--ink-3); font-size:.8rem; }
.map{ aspect-ratio:4/3; border:1px solid var(--line); background:var(--bg-panel); position:relative; overflow:hidden; }
.map svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ============================================================
   Testimonials
   ============================================================ */
.quotes{ display:grid; gap:0; margin-top:clamp(2.5rem,5vw,4rem); }
.quote{
  padding-block:clamp(2.2rem,4vw,3.4rem); border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr; gap:1.4rem;
}
@media (min-width:820px){ .quote{ grid-template-columns:auto 1fr; gap:3rem; align-items:start; } }
.quote__mark{ font-family:var(--ff-serif); font-size:3.4rem; line-height:0.7; color:var(--brass); opacity:.75; }
.quote__text{ font-family:var(--ff-serif); font-weight:300; font-size:clamp(1.35rem,1rem+1.4vw,2rem); line-height:1.32; color:var(--ink); max-width:32ch; }
.quote__by{ margin-top:1.3rem; }
.quote__name{ font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.quote__role{ font-size:0.82rem; color:var(--ink-3); margin-top:.2rem; }

/* ============================================================
   Booking
   ============================================================ */
/* Sits directly under the trust band, which is also recessed, so the booking
   section takes the page ground to keep the two apart. */
.book{ background:var(--bg); padding-block:clamp(3rem,6vw,5.5rem); }
.book__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:960px){ .book__grid{ grid-template-columns:0.82fr 1.18fr; gap:5rem; align-items:start; } }
.book__aside .lede{ margin-top:1.3rem; }
.book__contactline{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.9rem 2.5rem; }
.book__contactline a{ display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); font-size:1.05rem; }
.book__contactline a:hover{ color:var(--brass); }
.book__contactline .lab{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.15rem; }

.form{
  background:var(--bg-panel); border:1px solid var(--line);
  padding:clamp(1.6rem,3.5vw,2.6rem);
}
.form__row{ display:grid; gap:1.3rem; grid-template-columns:1fr; }
@media (min-width:560px){ .form__row.two{ grid-template-columns:1fr 1fr; } }
.form__row + .form__row{ margin-top:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.field label .req{ color:var(--brass); }
.field input, .field select{
  width:100%; background:var(--bg-deep); color:var(--ink);
  border:1px solid var(--line-2); border-radius:2px;
  padding:0.85em 0.9em; font:inherit; font-size:0.98rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.field input::placeholder{ color:var(--ink-3); }
.field input:focus, .field select:focus{ border-color:var(--brass); outline:none; background:oklch(0.132 0.008 66); }
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8a888' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
}
/* dark date/time picker hint */
.field input[type="date"]{ color-scheme:dark; }
.field .err{ font-size:0.78rem; color:var(--danger); min-height:0; display:none; }
.field.invalid input, .field.invalid select{ border-color:var(--danger); }
.field.invalid .err{ display:block; }
.form__submit{ margin-top:1.8rem; }
.form__note{ margin-top:1rem; font-size:0.8rem; color:var(--ink-3); text-align:center; }

/* confirmation state */
/* ============================================================
   Reservation engine
   ============================================================ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Layout classes below set display, so hidden needs the last word.
 *
 * Repeated deliberately. A single [hidden] scores one attribute selector, and
 * the phone stylesheet forces layout with two-class selectors carrying
 * !important, which outranks it. That is not theoretical: .form__row.two
 * beat this rule below 760px, so a one way booking showed the return date and
 * return time fields, and an hourly booking's fields showed on every trip
 * type. Three attribute selectors put it out of reach of anything a layout
 * rule is likely to use. */
[hidden][hidden][hidden]{ display:none !important; }

/* Trust bar payment line */
.trust__note{
  border-top:1px solid var(--line);
  padding:1.1rem var(--gutter);
  text-align:center; color:var(--ink-2); font-size:0.92rem;
}
.trust__note b{ color:var(--ink); font-weight:500; }

.book__head{ margin-bottom:clamp(2rem,4vw,3.2rem); }
@media (min-width:900px){ .book__head{ align-items:start; } }

/* Engine shell */
.engine{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){ .engine{ grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); } }
.engine__form{ border:1px solid var(--line); background:var(--bg-panel); padding:clamp(1.1rem,3vw,2rem); }

.trip-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:1.6rem; }
.trip-tab{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  padding:.85rem .5rem; font-size:0.76rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; border-radius:2px;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.trip-tab:hover{ border-color:var(--line-2); color:var(--ink); }
.trip-tab[aria-pressed="true"]{ border-color:var(--brass); color:var(--brass); background:var(--brass-wash); }

.step-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.5rem; }
.step-title{ font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem); margin-top:.25rem; }
.step-title:focus{ outline:none; }
.step-counter{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.step-dots{ display:flex; gap:.35rem; margin-top:.55rem; }
.step-dot{ width:26px; height:2px; background:var(--line-2); }
.step-dot.active, .step-dot.done{ background:var(--brass); }
.form-step[hidden]{ display:none; }

/* Addresses */
/* Explicit placement, so a hidden control in the middle cannot shunt the
   destination into the narrow track reserved for the swap button. */
.address-row{ display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:.8rem; align-items:start; }
.address-row > .field:first-child{ grid-column:1; }
.address-row > .swap{ grid-column:2; }
.address-row > #dropoffField{ grid-column:3; }
.address-row.solo{ grid-template-columns:1fr; }
@media (max-width:760px){
  /* One column on a phone, so the explicit placement above has to be undone
     or each field would claim a track of its own. */
  .address-row{ grid-template-columns:1fr; }
  .address-row > .field:first-child,
  .address-row > .swap,
  .address-row > #dropoffField{ grid-column:1; }
}
.swap{
  width:44px; height:46px; margin-top:1.72rem; border:1px solid var(--line); background:transparent;
  color:var(--brass); font-size:1rem; border-radius:2px;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.swap:hover{ border-color:var(--brass); background:var(--brass-wash); }
@media (max-width:760px){ .swap{ width:100%; justify-self:start; } }
.stop-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; margin-top:.8rem; }
.stop-row input{
  width:100%; padding:0.85rem 1rem; background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:2px; font:inherit;
}
.stop-remove{
  border:1px solid var(--line); background:transparent; color:var(--ink-3);
  padding:0 .9rem; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; border-radius:2px;
}
.stop-remove:hover{ color:var(--brass); border-color:var(--brass); }
.add-stop{
  margin-top:.9rem; background:none; border:0; padding:0;
  color:var(--brass); font-size:0.76rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
}
.add-stop:hover{ color:var(--ink); }
/* Address suggestions. Drawn by us, because Google's own element cannot be
   made to match these fields. */
.ac-list{
  position:absolute; z-index:60; margin:.3rem 0 0; padding:.3rem; list-style:none;
  background:var(--bg-raise); border:1px solid var(--line-2); border-radius:2px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  max-height:17rem; overflow-y:auto;
}
.ac-list[hidden]{ display:none; }
.ac-option{
  display:grid; gap:.1rem; padding:.6rem .7rem; cursor:pointer; border-radius:2px;
  transition:background .18s var(--ease);
}
.ac-option.is-active{ background:var(--brass-wash); }
.ac-option__main{ font-size:0.9rem; color:var(--ink); line-height:1.35; }
.ac-option__sub{ font-size:0.76rem; color:var(--ink-3); line-height:1.35; }
.ac-option.is-active .ac-option__main{ color:var(--brass); }
@media (prefers-reduced-motion:reduce){ .ac-option{ transition:none; } }

.route-status{ margin-top:1rem; min-height:1.4rem; font-size:0.88rem; color:var(--ink-3); }
.map-frame{ height:clamp(190px,26vw,280px); margin-top:.9rem; border:1px solid var(--line); background:var(--bg-deep); }
.map-frame--still{ display:block; width:100%; object-fit:cover; }
.map-frame--still[hidden]{ display:none; }
.map-fallback{
  margin-top:.9rem; border:1px solid var(--line); background:var(--bg-deep);
  padding:1.1rem; display:grid; gap:.6rem; justify-items:start; color:var(--ink-3); font-size:0.88rem;
}
.route-status.success{ color:oklch(0.82 0.09 145); }
.route-status.error{ color:oklch(0.74 0.13 32); }

/* Vehicle choice */
.vehicle-choice{ display:grid; gap:.7rem; }
.vehicle-option{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:1rem; align-items:center;
  border:1px solid var(--line); padding:1rem 1.1rem; cursor:pointer;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.vehicle-option:hover{ border-color:var(--line-2); }
.vehicle-option:has(input:checked){ border-color:var(--brass); background:var(--brass-wash); }
.vehicle-option input{ accent-color:oklch(0.815 0.072 82); width:16px; height:16px; }
.vehicle-option strong{ display:block; font-weight:500; }
.vehicle-option small{ display:block; color:var(--ink-3); font-size:0.82rem; margin-top:.2rem; }
/* Drawn, not photographed: these are placeholders for pictures of the real
   cars, which will always sell better than an illustration. */
.vehicle-art{ width:86px; height:38px; flex:none; color:var(--ink-3); transition:color .35s var(--ease); }
.vehicle-option:has(input:checked) .vehicle-art{ color:var(--brass); }
.vehicle-option:hover .vehicle-art{ color:var(--ink-2); }
@media (max-width:520px){ .vehicle-art{ width:64px; height:28px; } }
.vehicle-option .rate{ font-family:var(--ff-serif); color:var(--brass); font-size:1.15rem; white-space:nowrap; }

/* Gratuity */
.tip-modes{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tip-mode{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  padding:.6rem .95rem; font-size:0.74rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; border-radius:2px;
}
.tip-mode[aria-pressed="true"]{ border-color:var(--brass); color:var(--brass); background:var(--brass-wash); }
.tip-presets{ display:flex; gap:.4rem; margin-top:.7rem; }
.tip-choice{ position:relative; }
.tip-choice input{ position:absolute; opacity:0; pointer-events:none; }
.tip-choice span{
  display:inline-block; border:1px solid var(--line); padding:.55rem 1rem;
  font-size:0.84rem; color:var(--ink-2); cursor:pointer;
}
.tip-choice input:checked + span{ border-color:var(--brass); color:var(--brass); background:var(--brass-wash); }
.tip-choice input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:3px; }

/* Policy + navigation */
.hourly-notice{ margin-top:1rem; border:1px solid var(--line-2); background:var(--brass-wash); padding:1rem; color:var(--ink-2); line-height:1.6; font-size:.9rem; }
.hourly-notice strong{ display:block; color:var(--ink); margin-bottom:.3rem; }
.hourly-notice .arrowlink{ margin-top:.7rem; background:none; border:0; padding:0; }
.hourly-terms{ margin-top:1rem; padding:.9rem 1rem; border:1px solid var(--line); color:var(--ink-2); font-size:.84rem; line-height:1.6; }
.policy-row{ display:flex; gap:.8rem; align-items:flex-start; margin-top:1.6rem; color:var(--ink-2); font-size:0.9rem; line-height:1.6; }
.policy-row input{ margin-top:.3rem; accent-color:oklch(0.815 0.072 82); width:16px; height:16px; flex:none; }
.form-nav{ display:flex; justify-content:space-between; gap:.8rem; margin-top:1.8rem; }
.form-nav .btn{ min-width:132px; }
.form-alert{
  border:1px solid var(--danger); background:oklch(0.74 0.13 32 / 0.1);
  color:oklch(0.86 0.08 32); padding:.85rem 1rem; font-size:0.9rem; margin-bottom:1.2rem;
}

/* Estimate rail */
.estimate{ border:1px solid var(--line); background:var(--bg-panel); padding:1.4rem; }
@media (min-width:1000px){ .estimate{ position:sticky; top:calc(var(--header-h) + 1.25rem); } }
.estimate h3{ font-size:1.35rem; color:var(--brass); }
.estimate__route{ margin-top:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.estimate__when{ display:block; color:var(--ink-3); font-size:0.82rem; margin-top:.7rem; }
.route__empty{ display:block; font-weight:500; color:var(--ink-2); }
/* A plain From / To route: each leg is a small label plus a place, with a gap
   between the two. It reads cleanly on a phone: the label column is fixed so
   the two places line up, and long addresses wrap instead of clipping. */
.route{ display:grid; gap:1rem; }
.route__leg{ display:grid; grid-template-columns:2.9rem minmax(0,1fr); gap:.55rem; align-items:baseline; }
.route__tag{ font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.route__place{ grid-column:2; font-weight:500; color:var(--ink); overflow-wrap:anywhere; line-height:1.4; }
.route__leg.is-muted .route__place{ color:var(--ink-3); font-weight:400; }
.estimate-lines{ display:grid; gap:.6rem; padding-block:1rem; }
.estimate-line{ display:flex; justify-content:space-between; gap:1rem; font-size:0.9rem; color:var(--ink-2); }
.estimate-line strong{ color:var(--ink); font-weight:500; text-align:right; }
.estimate__total{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); padding-top:1rem; }
.estimate__total span{ font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); max-width:11ch; line-height:1.5; }
.estimate__total strong{ font-family:var(--ff-serif); font-size:2.1rem; color:var(--brass); font-weight:400; line-height:1; }

/* How payment works */
.beats{ margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.3rem; display:grid; gap:1.1rem; }
.beat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem; align-items:start; }
.beat__no{ font-family:var(--ff-serif); color:var(--brass); font-size:0.95rem; line-height:1.4; }
.beat p{ color:var(--ink-2); font-size:0.86rem; line-height:1.6; }
.beat b{ color:var(--ink); font-weight:500; display:block; margin-bottom:.15rem; font-size:0.9rem; }

/* Fallback and handoff */
.fallback{ border:1px solid var(--line); background:var(--bg-panel); padding:clamp(1.2rem,3vw,2rem); }
.fallback h3{ font-size:1.6rem; }
.fallback p{ color:var(--ink-2); margin-top:.9rem; max-width:52ch; }
.fallback__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.handoff{ border:1px solid var(--brass); background:var(--brass-wash); padding:clamp(1.4rem,4vw,2.4rem); text-align:center; }
.handoff h3{ font-size:1.9rem; }
.handoff p{ color:var(--ink-2); margin-top:.9rem; max-width:46ch; margin-inline:auto; }
.handoff__ref{ margin-top:1.4rem; display:inline-block; padding:.7rem 1.2rem; border:1px solid var(--line-2); font-size:0.85rem; letter-spacing:0.12em; }
.handoff .btn{ margin-top:1.5rem; }

/* The fare dock belongs to phones only. Declared here rather than inside the
   phone block so that on a wide screen it is absent rather than positioned:
   without this the element sits at the end of the page as a stray line of
   text, because the rules that place it never match. */
.fare-dock{ display:none; }

/* Phones: the engine is the page, so it gets the room */
@media (max-width:640px){
  .engine__form{ padding:1.1rem .9rem; }
  .trip-tab{ padding:.75rem .25rem; font-size:0.68rem; letter-spacing:0.06em; }
  .step-head{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .step-counter{ order:-1; }
  .form-nav{ flex-direction:column-reverse; }
  .form-nav .btn{ width:100%; }
  .vehicle-option{ grid-template-columns:auto auto minmax(0,1fr); }
  .vehicle-option .rate{ grid-column:2; margin-top:.2rem; }
  .estimate{ padding:1.1rem; }
  .estimate__total strong{ font-size:1.85rem; }

  /* The fare, where the decision is made.
   *
   * On a phone the estimate panel is below the form, so by the time someone
   * reaches Continue the price is a screen and a half behind them. They are
   * being asked to commit to a number they cannot see. The total rides along
   * the bottom instead, once there is one to show.
   *
   * It is the same #estTotal, not a copy: two elements showing a price is two
   * chances to show different prices. */
  .fare-dock{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    align-items:center; justify-content:space-between; gap:1rem;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
    background:oklch(0.118 0.008 66 / 0.94);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    transform:translateY(110%);
    transition:transform .32s var(--ease);
  }
  .fare-dock.is-live{ transform:none; }
  .fare-dock__label{ color:var(--ink-3); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
  .fare-dock__amount{ display:block; font-family:var(--ff-serif); font-size:1.5rem; color:var(--brass); line-height:1.2; }
  .fare-dock__note{ color:var(--ink-3); font-size:.68rem; }
  /* Room to scroll past the dock, so it never covers the last control. */
  body.has-fare-dock{ padding-bottom:5.5rem; }
  .tip-modes{ display:grid; grid-template-columns:1fr 1fr; }
  .beats{ margin-top:1.2rem; }
}

/* Google Places dropdown, matched to the page */
.pac-container{
  z-index:9999; background:var(--bg-panel); border:1px solid var(--line-2);
  border-top:0; box-shadow:0 24px 70px rgba(0,0,0,.35); font-family:var(--ff-sans);
}
.pac-item{ padding:.55rem .8rem; color:var(--ink-2); border-top:1px solid var(--line); cursor:pointer; }
.pac-item:hover, .pac-item-selected{ background:var(--bg-raise); }
.pac-item-query{ color:var(--ink); }
.pac-icon{ display:none; }
.pac-logo::after{ filter:invert(1) grayscale(1) opacity(.45); }

.confirm{
  display:none; text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem;
}
.confirm.show{ display:block; animation:fadeUp .7s var(--ease) both; }
.confirm__mark{
  width:64px; height:64px; margin:0 auto 1.6rem; border-radius:50%;
  border:1px solid var(--brass); display:flex; align-items:center; justify-content:center;
}
.confirm__mark svg{ width:26px; height:26px; }
.confirm h3{ font-size:1.9rem; }
.confirm p{ color:var(--ink-2); margin-top:.9rem; max-width:42ch; margin-inline:auto; }
.confirm__ref{ margin-top:1.6rem; display:inline-block; padding:.7rem 1.2rem; border:1px solid var(--line-2); font-size:0.85rem; letter-spacing:0.12em; }
.confirm__ref b{ color:var(--brass); font-weight:600; }
.confirm .btn{ margin-top:2rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer__top{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
/* Four columns now that the footer carries a booking section, and two on a
   tablet rather than three squeezed ones. The brand column keeps more room
   than the link lists, which are short. */
@media (min-width:760px){ .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; } }
@media (min-width:1040px){ .footer__top{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; } }
.footer__brand .brand{ margin-bottom:1.2rem; }
.footer__brand p{ color:var(--ink-2); max-width:34ch; }
.footer h3{ font-family:var(--ff-sans); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:1.1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer li a, .footer li{ color:var(--ink-2); font-size:0.95rem; }
.footer li a:hover{ color:var(--brass); }
.footer__bottom{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.footer__legal{ color:var(--ink-3); font-size:0.8rem; max-width:60ch; }
.footer__legal a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:.18em; }
.footer__legal a:hover{ color:var(--brass); }
.policy-row a{ color:var(--brass); text-decoration:underline; text-underline-offset:.18em; }
.footer__social{ display:flex; gap:1.4rem; }
.footer__social a{ font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); }
.footer__social a:hover{ color:var(--brass); }

/* ============================================================
   Mobile sticky call bar
   ============================================================ */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; grid-template-columns:1fr 1fr;
  background:oklch(0.118 0.008 66 / 0.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:.6rem; gap:.6rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
}
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem; font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; border-radius:2px;
}
.callbar .call{ border:1px solid var(--line-2); color:var(--ink); }
.callbar .reserve{ background:var(--brass); color:var(--on-brass); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }

/* scroll offset for anchors under fixed header */
section[id], footer[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* ============================================================
   Responsive header
   ============================================================ */
@media (max-width:1180px){
  /* The links and the two buttons cannot share the bar below this width: the
     full row measures ~1125px and what clips is Reserve a Ride, at the far
     right. The links fold into the burger and the buttons stay, since the
     buttons are what the bar is for.

     premium.css asks for this at 1050px, but it never took effect: the
     unconditional `.nav{display:flex}` earlier in this file sits in a later
     stylesheet and outranks a media query in an earlier one. The nav has in
     fact been collapsing at 940 all along.

     Only .header--collapsing opts in, and only the home page carries it,
     because it is the only page with a mobile menu and the script to open
     one. Folding links into a burger is an improvement exactly where the
     burger works and a disappearance everywhere else. */
  .header--collapsing .nav{ display:none; }
  .header--collapsing .burger{ display:inline-flex; }
}
@media (max-width:1180px){
  /* The airport pages have a nav but no burger and no mobile menu, so their
     links cannot fold anywhere. They tighten instead. Without this the row
     overflows between 941px and 1080px, which used to show up as the brand
     name and Reserve a Ride wrapping onto second lines. */
  .header:not(.header--collapsing) .nav{ gap:1.15rem; }
  .header:not(.header--collapsing) .nav a{ font-size:0.72rem; letter-spacing:0.08em; }
}
@media (max-width:940px){
  /* Pages without a working burger keep the behaviour they have always had:
     the links go at 940 and the brand carries the way home. */
  .header:not(.header--collapsing) .nav{ display:none; }
  /* Both header buttons go here, because the callbar turns on at this exact
     width and pins Call and Reserve to the bottom of the screen, which beats
     a cramped bar at the top on a phone. Keeping the header copies as well
     would put Call on screen three times over. */
  .header__cta .btn--brass,
  .header__cta .header__call{ display:none; }
  .callbar{ display:grid; }
  body{ padding-bottom:0; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__scene{ animation:none; }
}

/* ------------------------------------------------------- home search bar
   The booking engine used to live here, squeezed between two marketing
   sections. It has its own page now, and the home page asks only for what is
   needed to price a trip, then hands over. */
.quickbook{
  border:1px solid var(--line); background:var(--bg-panel);
  border-radius:2px; padding:clamp(1.1rem,3vw,1.75rem);
}
.quickbook__tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:1.25rem; max-width:420px; }
.quickbook__row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) auto; gap:.8rem; align-items:end; }
.quickbook__go{ min-height:52px; white-space:nowrap; }
.quickbook__note{ margin:1rem 0 0; color:var(--ink-3); font-size:.82rem; }
.field__optional{ color:var(--ink-3); font-size:.62rem; letter-spacing:.1em; text-transform:lowercase; }
@media(max-width:1000px){
  .quickbook__row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .quickbook__go{ grid-column:1 / -1; }
}
@media(max-width:560px){
  .quickbook__row{ grid-template-columns:1fr; }
  .quickbook__tabs{ max-width:none; }
}

/* ============================================================
   Airport landing pages

   One page per airport, so each can rank for its own search. They share the
   design system rather than restating it: the only new things here are the
   breadcrumb, the live fare cards and the two-column arrivals and departures.
   ============================================================ */
.landing{ padding-top:calc(var(--header-h) + clamp(2rem,6vw,4.5rem)); padding-bottom:clamp(3rem,8vw,6rem); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; color:var(--ink-3); font-size:.76rem; margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.crumbs a{ color:var(--ink-2); }
.crumbs a:hover{ color:var(--brass); }
.crumbs strong{ color:var(--ink); font-weight:500; }
.landing__h1{ font-size:clamp(2.4rem,1.4rem + 4.2vw,4.4rem); line-height:1.06; letter-spacing:-.02em; margin:1rem 0 1.2rem; max-width:16ch; }
.landing__lede{ max-width:62ch; }
.landing__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 clamp(3rem,7vw,5rem); }

.landing__fare{ border-top:1px solid var(--line); padding-top:clamp(2rem,5vw,3.2rem); margin-bottom:clamp(3rem,7vw,5rem); }
.landing__fare .lede{ margin:1rem 0 1.6rem; }
.fare-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.fare-cards__loading{ grid-column:1 / -1; background:var(--bg-panel); padding:1.5rem 1.25rem; color:var(--ink-2); margin:0; }
.fare-card{ background:var(--bg-panel); padding:1.6rem 1.35rem; display:grid; gap:.4rem; align-content:start; }
.fare-card__class{ color:var(--ink-2); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.fare-card__price{ font-family:var(--ff-serif); font-size:clamp(2rem,4vw,2.7rem); font-weight:400; color:var(--brass); line-height:1.1; }
.fare-card__note{ color:var(--ink-3); font-size:.84rem; }
.fare-card__basis{ grid-column:1 / -1; background:var(--bg-panel); margin:0; padding:1rem 1.35rem; color:var(--ink-3); font-size:.82rem; border-top:1px solid var(--line); }

.landing__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2rem,5vw,3.5rem); border-top:1px solid var(--line); padding-top:clamp(2rem,5vw,3.2rem); margin-bottom:clamp(3rem,7vw,5rem); }
.landing__cols .h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); margin-bottom:.9rem; }

.landing__promises{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:clamp(3rem,7vw,5rem); }
.landing__promises .promise{ background:var(--bg-panel); padding:1.5rem 1.35rem; }
.landing__promises h3{ font-family:var(--ff-sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:.6rem; }
.landing__promises p{ color:var(--ink-2); line-height:1.6; }

.landing__others{ border-top:1px solid var(--line); padding-top:clamp(2rem,5vw,3.2rem); margin-bottom:clamp(3rem,7vw,5rem); }
.other-links{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.3rem; }
.other-link{ display:inline-flex; align-items:baseline; gap:.7rem; border:1px solid var(--line-2); border-radius:2px; padding:.9rem 1.2rem; min-height:52px; transition:border-color .3s var(--ease); }
.other-link:hover{ border-color:var(--brass); }
.other-link strong{ color:var(--ink); font-weight:500; }
.other-link span{ color:var(--ink-3); font-size:.72rem; letter-spacing:.12em; }

.landing__cta{ border-top:1px solid var(--line); padding-top:clamp(2rem,5vw,3.2rem); display:grid; gap:1rem; justify-items:start; }
.landing__cta .lede{ margin-bottom:.4rem; }

@media (max-width:640px){
  .landing__actions .btn{ width:100%; }
  .landing__cta .btn{ width:100%; text-align:center; }
}

/* ============================================================
   Hero actions — four buttons in one row
   ============================================================
   The row grew from two buttons to four (fare, existing booking, phone,
   fleet). Wide screens keep them on one line; the tightening below stops
   that line from becoming four full-width slabs stacked down the hero on a
   phone, which is what the inherited single-column mobile rule did.        */
.hero__actions{ align-items:stretch; }
.hero__actions .btn{ padding-inline:1.25em; }
.hero__call svg{ width:15px; height:15px; flex:none; }
.hero__call-short{ display:none; }

@media (max-width:1180px){
  /* Four buttons no longer fit beside each other; two rows of two reads
     better than one row that wraps a single orphan onto its own line. */
  .hero__actions{ max-width:640px; }
}
@media (max-width:760px){
  .hero__actions{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem; max-width:none; width:100%;
  }
  .hero__actions .btn{
    width:100%; min-height:52px; padding-inline:.75em;
    font-size:.72rem; letter-spacing:.08em;
  }
  /* The number does not fit across half a phone; the icon plus the word
     carries it, and the tel: link still dials the same number. */
  .hero__call-full{ display:none; }
  .hero__call-short{ display:inline; }
}

/* ============================================================
   Header call button
   ============================================================
   The number used to be a bare text link that premium.css set to
   display:none at every width, so it was never on screen at all. It is a
   ghost button now, sitting beside Reserve a Ride and reading as its quieter
   sibling. It is a desktop control only: below 940px the sticky callbar
   already pins Call and Reserve to the bottom of the screen, and the
   responsive header block further down hides this one to match.           */
.header__call{ padding:0.7em 1.1em; font-size:0.76rem; letter-spacing:0.08em; }
.header__call svg{ width:15px; height:15px; flex:none; }
/* Two buttons in the bar instead of one leaves no slack: without this the
   number breaks after "555-" and Reserve a Ride stacks into two lines, which
   is what happened the moment the call button went in. */
.header__cta .btn,
.brand__name{ white-space:nowrap; }
.header__cta{ flex:none; }
.header .wrap{ flex-wrap:nowrap; }