/* ==========================================================================
   Phoenix Limo Biz - site design system

   The homepage (index.html, built by build-home.mjs from the design handoff)
   is the reference design. This file carries the same tokens, the same
   navigation, the same night hero and the same footer onto every other page
   so the site reads as one piece of work.

   Loaded by build.mjs (the static pages) and by inc/layout.php (fleet.php,
   vehicle.php). Tailwind's theme is remapped to these tokens in both, so the
   utility classes already in the page markup resolve to this palette.

   Dark mode follows the visitor's OS setting (prefers-color-scheme) - there
   is no toggle. Every colour that changes is a token here, and the dark
   values are set once, in the block at the end of this file.
   ========================================================================== */

:root{
  color-scheme:light dark;
  /* The palette Tailwind reads, as bare rgb channels so opacity modifiers
     (text-paper/80, placeholder:text-inksoft/50) keep working. Same colours
     as the page tokens below. chip is the round icon well on a card and
     linehover the border a card takes on hover. */
  --c-paper:251 250 254; --c-surface:255 255 255; --c-tint:244 238 252; --c-chip:244 238 252;
  --c-ink:18 13 28; --c-inksoft:101 93 115; --c-line:231 224 240; --c-linehover:221 208 238;
  --c-gold:124 58 237; --c-goldink:91 33 182;
  /* page */
  --page-bg:#FBFAFE; --surface:#FFFFFF; --tint:#F4EEFC;
  --ink:#120D1C; --ink-2:#4A4258; --muted:#655D73; --label:#726A86;
  --line:#E7E0F0; --line-soft:#ECE6F3; --field-bg:#F6F2FB;
  /* brand. --violet fills buttons and draws borders; --violet-ink is the
     same violet used as text or an icon, which has to lighten on dark. */
  --violet-ink:#7C3AED;
  --violet:#7C3AED; --violet-deep:#5B21B6; --violet-btn-top:#8B4DF5;
  --violet-btn-bot:#6D28D9; --violet-night:#3B1580; --violet-black:#13072A;
  /* studio panels */
  --studio-body:#D4C8F5; --studio-eyebrow:#C4B5FD; --studio-accent:#E9DDFF;
  /* night (hero + header) */
  --noct:#0A0611; --noct-2:#150E24; --sodium:#FFD79A;
  --pearl:#F8F5FD; --ash:#B3A6CE;
  /* type */
  --font-sans:'Geist','Helvetica Neue',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --font-serif:'Instrument Serif',Georgia,serif;
  /* radii */
  --r-field:14px; --r-card:26px; --r-panel:36px; --r-footer:48px;
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;max-width:100%;overflow-x:hidden;background:var(--page-bg);color:var(--ink);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,iframe,svg{max-width:100%}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet-ink);outline-offset:2px;border-radius:4px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

/* The handoff sets headings in Geist at 600 with tight tracking and reserves
   Instrument Serif for the italic phrase that closes the line. */
.font-display{font-weight:600;letter-spacing:-.035em}
.ser{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.012em}
[class*="tracking-eyebrow"]{font-family:var(--font-mono);font-weight:500}
.rule-top{border-top:1px solid var(--line)}

/* Every call to action on the site already carries .bg-gold; lifting that one
   class to the handoff's gradient pill restyles all of them at once. */
a.bg-gold,button.bg-gold{
  background-image:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
  box-shadow:0 10px 24px -12px rgba(109,40,217,.65);
  transition:transform .18s ease,box-shadow .25s ease,filter .2s ease,background-color .2s ease;
}
a.bg-gold:hover,button.bg-gold:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 16px 32px -14px rgba(109,40,217,.8)}
a.bg-gold:active,button.bg-gold:active{transform:translateY(0)}

/* ---------- skip link ---------- */
/* Parked by clipping rather than at left:-9999px: an element 9999px wide
   off-canvas registers as a 9999px overflow box in layout tooling. */
.site-skip{position:absolute;left:0;top:0;z-index:999;background:var(--violet);color:#fff;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  padding:12px 20px;border-radius:0 0 12px 0;font-size:14px;font-weight:600;text-decoration:none}
.site-skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* ==========================================================================
   Header - the handoff's glass bar, lit for night
   ========================================================================== */
.site-top{background:var(--noct);color:var(--ash);font-size:12px}
.site-top-in{margin:0 auto;max-width:1200px;padding:0 20px;height:36px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-top a{color:var(--ash);text-decoration:none;transition:color .18s ease}
.site-top a:hover{color:var(--pearl)}
.site-top i{color:var(--sodium);font-size:13px}
.site-top-right{display:flex;align-items:center;gap:20px;margin-left:auto}

.site-head{position:sticky;top:0;z-index:50;background:rgba(10,6,17,.74);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(233,221,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .25s ease,box-shadow .25s ease}
.site-head.is-stuck{background:rgba(10,6,17,.97);box-shadow:0 18px 40px -28px rgba(0,0,0,.9)}
.site-head-in{margin:0 auto;max-width:1200px;padding:0 20px;min-height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}

.site-brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.site-brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0}
.site-brand b{display:block;font-size:16px;font-weight:600;color:var(--pearl);letter-spacing:-.015em;line-height:1.15}
.site-brand small{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--studio-eyebrow);line-height:1.6}

.site-head-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
.site-cta{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;border-radius:999px;
  background:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
  color:#fff;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 22px -12px rgba(109,40,217,.8);transition:transform .18s ease,filter .2s ease}
.site-cta:hover{transform:translateY(-1px);filter:brightness(1.06);color:#fff}
.site-burger{display:none;width:40px;height:40px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(233,221,255,.16);
  color:var(--pearl);font-size:20px;align-items:center;justify-content:center}
.site-burger:hover{background:rgba(255,255,255,.14)}
/* Below 390px the wordmark and the booking button together need 389px, so
   the bar steps down: no sub-label, a smaller mark, and the wordmark free
   to truncate rather than push the button off the screen. */
@media (max-width:389.98px){
  .site-head-in{padding:0 14px;gap:10px;min-height:60px}
  .site-brand > span{min-width:0}
  .site-brand img{width:32px;height:32px}
  .site-brand b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-brand small{display:none}
  .site-head-act{gap:8px}
  .site-cta{height:36px;padding:0 14px;font-size:12.5px}
  .site-burger{width:36px;height:36px;font-size:18px}
}

/* ---------- the hover menus (identical to the homepage) ---------- */
.plb-nav{display:flex;align-items:center;gap:2px;font-size:14px}
.plb-nav-item{position:relative}
.plb-nav-top{
  display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 12px;border:0;
  border-radius:999px;background:transparent;color:var(--ash);font-family:inherit;font-size:14px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.plb-nav-top:hover,
.plb-nav-item.is-open > .plb-nav-top,
.plb-nav-top.is-current{color:var(--pearl);background:rgba(255,255,255,.08)}
.plb-nav-top.is-current{font-weight:500}
.plb-chev{opacity:.7;transition:transform .2s ease}
.plb-nav-item.is-open .plb-chev{transform:rotate(180deg)}
.plb-nav-menu{
  position:absolute;left:0;top:calc(100% + 10px);display:none;flex-direction:column;gap:1px;
  padding:8px;border-radius:18px;background:rgba(14,9,25,.99);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.85),inset 0 0 0 1px rgba(233,221,255,.12);z-index:60;
}
.plb-nav-menu.is-wide{grid-template-columns:repeat(2,minmax(196px,1fr));gap:1px 4px}
/* an invisible strip across the 10px gap above an open menu: without it the
   pointer leaves the item on its way down and the menu shuts */
.plb-nav-menu::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.plb-nav-menu.is-right{left:auto;right:0}
.plb-nav-item.is-open > .plb-nav-menu{display:flex;animation:plbMenuIn .16s ease both}
.plb-nav-item.is-open > .plb-nav-menu.is-wide{display:grid}
@keyframes plbMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.plb-nav-menu a{
  padding:9px 12px;border-radius:11px;color:var(--ash);font-size:13.5px;text-decoration:none;
  white-space:nowrap;transition:background .14s ease,color .14s ease;
}
.plb-nav-menu a:hover{background:rgba(255,255,255,.09);color:var(--pearl)}
.plb-nav-menu .is-lead{color:var(--studio-eyebrow);font-weight:500}

/* ---------- the phone panel: the same tree, disclosed ---------- */
.plb-panel{position:relative;z-index:40;padding:0 16px 14px}
.plb-panel[hidden]{display:none}
.plb-panel-inner{
  display:flex;flex-direction:column;gap:1px;padding:10px;border-radius:22px;
  max-height:calc(100vh - 150px);overflow-y:auto;
  background:rgba(14,9,25,.99);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(233,221,255,.12);animation:plbMenuIn .2s ease both;
}
.plb-panel-group summary{
  display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:13px;
  color:var(--pearl);font-size:15px;font-weight:500;
}
.plb-panel-group summary:hover{background:rgba(255,255,255,.06)}
.plb-panel-group[open] summary .plb-chev{transform:rotate(180deg)}
.plb-panel-group > div{display:flex;flex-direction:column;padding:2px 0 8px}
.plb-panel-group a{padding:10px 14px 10px 26px;color:var(--ash);font-size:14px;text-decoration:none}
.plb-panel-group a:hover{color:var(--pearl)}
.plb-panel-flat{display:flex;flex-direction:column;margin-top:4px;padding-top:5px;
  border-top:1px solid rgba(233,221,255,.1)}
.plb-panel-flat a{padding:13px 14px;color:var(--pearl);font-size:15px;font-weight:500;text-decoration:none}
.plb-panel-call{display:flex;align-items:center;justify-content:center;height:50px;margin-top:8px;
  border-radius:999px;background:var(--violet);color:#FFFFFF !important;font-size:15px;font-weight:600;
  text-decoration:none}

@media (max-width:1279.98px){
  .site-head .plb-nav{display:none}
  .site-burger{display:inline-flex}
}
@media (min-width:1280px){
  .plb-panel{display:none}
}
@media (max-width:640px){
  .site-top-hide{display:none}
}

/* ==========================================================================
   Interior hero - the night section the homepage opens on
   ========================================================================== */
.site-hero{position:relative;background:var(--noct);color:var(--pearl);overflow:hidden;isolation:isolate}

/* ---------- 1. the street plan ----------
   Phoenix is a grid city and we drive it for a living, so the backdrop is a
   section map: minor streets every 44px, a mile arterial every sixth. It is
   masked away from the headline so the type never sits on a line. */
.site-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(196,181,253,.052) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196,181,253,.052) 1px, transparent 1px),
    linear-gradient(to right, rgba(196,181,253,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196,181,253,.11) 1px, transparent 1px);
  background-size:44px 44px,44px 44px,264px 264px,264px 264px;
  background-position:50% 0;
  -webkit-mask-image:radial-gradient(ellipse 66% 92% at 76% 42%,#000 6%,rgba(0,0,0,.52) 52%,transparent 86%);
          mask-image:radial-gradient(ellipse 66% 92% at 76% 42%,#000 6%,rgba(0,0,0,.52) 52%,transparent 86%);
}

/* ---------- 2. a headlight crossing the frame ----------
   One pass every fourteen seconds. Long and low, the way a car's beam rakes a
   wall at night rather than a spotlight sweep. */
.site-hero::after{
  content:"";position:absolute;left:0;top:-40%;width:46%;height:180%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,215,154,.05) 38%,rgba(248,245,253,.075) 50%,rgba(255,215,154,.04) 62%,transparent);
  transform:translateX(-120%) skewX(-13deg);
  animation:plbHeadlamp 14s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes plbHeadlamp{
  0%     {transform:translateX(-120%) skewX(-13deg);opacity:0}
  12%    {opacity:.85}
  78%    {opacity:.85}
  100%   {transform:translateX(330%)  skewX(-13deg);opacity:0}
}

/* ---------- 3. city glow and the sodium lamps ----------
   The violet dome is the light the Valley throws up at night; the two warm
   pools are the street lamps the hero photograph was lit by. */
.site-hero-glow{position:absolute;left:-10%;right:-10%;top:-34%;height:760px;pointer-events:none;
  background:
    radial-gradient(ellipse 32% 50% at 50% 44%, rgba(124,58,237,.44), transparent 70%),
    radial-gradient(circle at 13% 74%, rgba(255,215,154,.13), transparent 42%),
    radial-gradient(circle at 88% 66%, rgba(255,215,154,.09), transparent 40%),
    radial-gradient(circle at 64% 16%, rgba(124,58,237,.2), transparent 54%);
}

/* ---------- 4. the plate itself ----------
   Two ridgelines for the Valley, rim-lit by the same sodium, and tonight's run
   drawn across them the way dispatch draws a route: dotted, with the stops
   marked and a light running the length of it. */
.site-hero-art{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.h-ridge-far{fill:rgba(59,21,128,.5)}
.h-ridge-near{fill:#0C0718}
.h-rim{fill:none;stroke:rgba(255,215,154,.26);stroke-width:1;vector-effect:non-scaling-stroke}
.h-route-ghost{fill:none;stroke:rgba(196,181,253,.24);stroke-width:1.5;stroke-dasharray:5 8;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.h-route-live{fill:none;stroke:var(--sodium);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:18 1600;stroke-dashoffset:1618;
  filter:drop-shadow(0 0 5px rgba(255,215,154,.75));
  animation:plbRun 11s linear infinite}
@keyframes plbRun{from{stroke-dashoffset:1618}to{stroke-dashoffset:0}}
.h-stop{fill:var(--noct);stroke:var(--sodium);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.8}
/* The run belongs beside the type, never under it: it is masked into the
   right of the frame on desktop and dropped altogether on a phone, where
   the column is full width and there is nowhere clear for it to go. */
@media (max-width:1023.98px){ .h-run{display:none} }
.h-stop-core{fill:var(--sodium);opacity:.9}

/* On a phone the plate is cropped to its middle, so the lamps come in tighter
   and the street grid loosens - a 44px block at 390px wide reads as noise. */
@media (max-width:640px){
  .site-hero::before{background-size:56px 56px,56px 56px,280px 280px,280px 280px;
    -webkit-mask-image:radial-gradient(ellipse 86% 70% at 62% 72%,#000 0%,rgba(0,0,0,.5) 54%,transparent 88%);
            mask-image:radial-gradient(ellipse 86% 70% at 62% 72%,#000 0%,rgba(0,0,0,.5) 54%,transparent 88%)}
  .site-hero-glow{height:560px}
}

@media (prefers-reduced-motion:reduce){
  .site-hero::after{animation:none;opacity:.5;transform:translateX(120%) skewX(-13deg)}
  .h-route-live{animation:none;stroke-dasharray:none;opacity:.55}
}

.site-hero-noise{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.2;
  mix-blend-mode:overlay;pointer-events:none}
.site-hero-rule{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.6) 22%,var(--sodium) 50%,rgba(124,58,237,.6) 78%,transparent)}
.site-hero-in{position:relative;z-index:1;margin:0 auto;max-width:1200px;padding:64px 20px 72px}
.site-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ash);margin:0 0 20px}
.site-crumb a{color:var(--ash);text-decoration:none}
.site-crumb a:hover{color:var(--pearl)}
.site-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--studio-eyebrow)}
.site-eyebrow::before{content:"";width:22px;height:1px;background:var(--sodium);opacity:.85}
.site-hero h1{margin:0;max-width:17ch;font-size:clamp(34px,5.4vw,62px);line-height:1.02;font-weight:600;
  letter-spacing:-.045em;color:var(--pearl)}
.site-hero h1 .ser{color:var(--sodium)}
.site-hero-lead{margin:22px 0 0;max-width:62ch;font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--ash)}
.site-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.btn-night{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;
  border-radius:999px;background:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
  color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  box-shadow:0 14px 30px -14px rgba(139,77,245,.95);transition:transform .18s ease,filter .2s ease}
.btn-night:hover{transform:translateY(-1px);filter:brightness(1.07);color:#fff}
.btn-wire{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;
  border-radius:999px;border:1px solid rgba(233,221,255,.26);color:var(--pearl);font-size:15px;
  text-decoration:none;transition:background .2s ease,border-color .2s ease}
.btn-wire:hover{background:rgba(255,255,255,.08);border-color:rgba(233,221,255,.45);color:#fff}
.site-hero-marks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;
  font-size:13px;color:var(--ash)}
.site-hero-marks li{display:inline-flex;align-items:center;gap:7px}
.site-hero-marks i{color:var(--sodium)}

/* Phones: the hero was 587px of a 844px screen before a word of the page.
   Everything in it steps down and the two buttons share one row. */
@media (max-width:640px){
  .site-hero-in{padding:28px 18px 36px}
  .site-crumb{font-size:10px;margin-bottom:13px}
  .site-eyebrow{font-size:10px;margin-bottom:9px;gap:7px}
  .site-eyebrow::before{width:16px}
  .site-hero h1{font-size:clamp(24px,6.6vw,29px);line-height:1.1;letter-spacing:-.035em;max-width:none}
  .site-hero-lead{font-size:14px;line-height:1.55;margin-top:12px;max-width:none}
  .site-hero-act{margin-top:18px;gap:8px}
  .btn-night,.btn-wire{height:44px;padding:0 17px;font-size:13.5px}
  .site-hero-marks{margin-top:16px;gap:5px 14px;font-size:11.5px}
}

/* ==========================================================================
   Vehicle card - the fleet, in the layout the client asked for
   ========================================================================== */
.vgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.vcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .3s ease}
.vcard:hover{transform:translateY(-4px);border-color:#DDD0EE;
  box-shadow:0 26px 48px -28px rgba(18,13,28,.5)}
.vcard-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--noct)}
.vcard-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.vcard:hover .vcard-shot img{transform:scale(1.055)}
.vcard-shot::after{content:"";position:absolute;left:0;right:0;top:0;height:96px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,17,.52),transparent)}
.vcard-pill{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;border-radius:999px;background:rgba(10,6,17,.58);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(233,221,255,.22);
  color:#fff;font-size:11.5px;font-weight:500;white-space:nowrap}
.vcard-pill i{font-size:13px;color:var(--studio-accent)}
.vcard-fav{position:absolute;right:12px;top:12px;z-index:3;display:grid;place-items:center;
  width:34px;height:34px;border:0;border-radius:999px;cursor:pointer;color:#fff;font-size:17px;
  background:rgba(10,6,17,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(233,221,255,.22);transition:background .2s ease,transform .2s ease}
.vcard-fav:hover{background:rgba(10,6,17,.78);transform:scale(1.06)}
.vcard-fav[aria-pressed="true"]{color:#F0ABFC}
.vcard-body{display:flex;flex-direction:column;flex-grow:1;padding:18px 20px 20px}
.vcard-body h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.vcard-body h3 a{color:var(--ink);text-decoration:none;transition:color .2s ease}
.vcard:hover .vcard-body h3 a{color:var(--violet-ink)}
/* the whole card is the link; the heart sits above it */
.vcard-body h3 a::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}
.vcard-blurb{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard-meta{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.vcard-meta i{font-size:16px}
.vcard-rate{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}
.vcard-rate p{margin:14px 0 0;font-size:14px;color:var(--muted)}
.vcard-rate p:first-child{margin-top:0}
.vcard-rate b{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.vcard-rate small{display:block;margin-top:2px;font-size:11.5px;color:var(--label)}
.vcard-rate.is-soft b{font-size:19px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .vcard,.vcard-shot img{transition:none}
  .vcard:hover{transform:none}
  .vcard:hover .vcard-shot img{transform:none}
}

/* ---------- the group header + filter chips ---------- */
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.vhead h2{margin:0;font-size:clamp(23px,3vw,34px);font-weight:600;letter-spacing:-.035em}
.vhead p{margin:7px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--label)}
.vhead-act{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;border:0;background:none;
  padding:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--violet-ink);
  text-decoration:none}
.vhead-act:hover{color:var(--violet-deep)}
.vchips{display:flex;gap:8px;overflow-x:auto;padding:0 0 20px;margin:0;scrollbar-width:none}
.vchips::-webkit-scrollbar{display:none}
.vchip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-family:inherit;
  font-size:13.5px;white-space:nowrap;cursor:pointer;transition:all .2s ease}
.vchip:hover{border-color:#D8C9EC;color:var(--ink)}
.vchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vchip[aria-pressed="true"] i{color:var(--studio-eyebrow)}

/* ==========================================================================
   Footer - the handoff's rounded night panel
   ========================================================================== */
.site-foot{position:relative;overflow:hidden;margin-top:96px;border-radius:var(--r-footer) var(--r-footer) 0 0;
  background:radial-gradient(ellipse 80% 70% at 50% 0%,#7C3AED 0%,#3B1580 45%,#13072A 100%);color:#fff}
.site-foot-noise{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.22;
  mix-blend-mode:overlay;pointer-events:none}
.site-foot-beam{position:absolute;left:50%;top:-20px;width:900px;height:110%;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(233,221,255,.26),rgba(233,221,255,.04) 70%,transparent);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(6px);
  animation:plbSpot 5s ease-in-out infinite;pointer-events:none}
.site-foot-spark{position:absolute;border-radius:50%;background:#E9DDFF;box-shadow:0 0 8px #C4B5FD;
  pointer-events:none}
@keyframes plbSpot{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes plbRise{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-200px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .site-foot-beam,.site-foot-spark{animation:none}
}
.site-foot-in{position:relative;z-index:1;margin:0 auto;max-width:1200px;padding:72px 20px 40px;
  display:flex;flex-direction:column;gap:52px}
.site-foot-say{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.site-foot-say h2{margin:12px 0 0;font-size:clamp(28px,4.2vw,50px);line-height:1.04;font-weight:600;
  letter-spacing:-.04em;color:#fff;max-width:18ch}
.site-foot-say h2 .ser{color:var(--studio-accent)}
.site-foot-say .site-eyebrow{color:var(--studio-eyebrow);margin:0}
.site-foot-say .site-eyebrow::before{background:var(--studio-accent)}
.site-foot-tel{font-family:var(--font-mono);font-size:15px;color:#fff;text-decoration:none;white-space:nowrap}
.site-foot-tel:hover{color:var(--studio-accent)}
.site-foot-map{position:relative;height:340px;border-radius:30px;overflow:hidden;background:#0E0620;
  border:1px solid rgba(255,255,255,.1)}
.site-foot-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85)}
.site-foot-card{position:absolute;left:24px;top:24px;width:min(330px,calc(100% - 48px));padding:22px;
  border-radius:22px;background:rgba(19,7,42,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:13px}
.site-foot-card .live{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;color:var(--studio-eyebrow)}
.site-foot-card .live i{width:7px;height:7px;border-radius:50%;background:#5EE6A8;
  animation:plbPing 1.8s ease-out infinite}
@keyframes plbPing{0%{box-shadow:0 0 0 0 rgba(94,230,168,.55)}100%{box-shadow:0 0 0 12px rgba(94,230,168,0)}}
.site-foot-card b{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff}
.site-foot-card span{font-size:13.5px;color:var(--studio-body)}
.site-foot-card .go{display:flex;align-items:center;justify-content:center;height:44px;border-radius:999px;
  background:#fff;color:#3B1580;font-size:14px;font-weight:600;text-decoration:none}
.site-foot-card .go:hover{background:var(--studio-accent)}
.site-foot-cols{display:grid;gap:36px;grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
.site-foot-cols h4{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--studio-eyebrow)}
.site-foot-cols a,.site-foot-cols span{display:block;font-size:13.5px;line-height:2;color:var(--studio-accent);
  text-decoration:none}
.site-foot-cols a:hover{color:#fff}
.site-foot-about p{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--studio-body);max-width:30ch}
.site-foot-social{display:flex;gap:8px;margin-top:16px}
.site-foot-social a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:var(--studio-accent);font-size:13px;text-decoration:none;line-height:1}
.site-foot-social a:hover{background:rgba(255,255,255,.1);color:#fff}
.site-foot-social a svg{width:15px;height:15px;margin-right:7px;flex:0 0 auto}
/* ---------- the Arizona tourism bureaus ---------- */
.site-foot-local{padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.site-foot-local h4{margin:0 0 13px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:var(--studio-eyebrow)}
.site-foot-local ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.site-foot-local a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 7px;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:var(--studio-accent);font-size:12.5px;line-height:1;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.site-foot-local a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.36);color:#fff}
.gl-mark{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:7px;
  overflow:hidden;background:rgba(233,221,255,.14);font-family:var(--font-mono);font-size:9px;
  letter-spacing:.03em;color:#fff}
.gl-mark img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.gl-mark--lg{width:44px;height:44px;border-radius:13px;font-size:14px;letter-spacing:.04em;
  background:var(--tint);color:var(--goldink,#5B21B6)}
@media (max-width:560px){
  .site-foot-local{padding-top:20px}
  .site-foot-local a{height:33px;font-size:12px;padding:0 11px 0 6px;gap:7px}
  .gl-mark{width:20px;height:20px;font-size:8.5px}
}
.site-foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:var(--studio-body)}
@media (max-width:980px){
  .site-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot-about{grid-column:1/-1}
}
@media (max-width:560px){
  .site-foot{margin-top:64px;border-radius:32px 32px 0 0}
  .site-foot-in{padding:52px 18px 32px;gap:40px}
  .site-foot-map{height:300px}
  .site-foot-card{left:14px;top:14px;width:calc(100% - 28px);padding:18px}
  .site-foot-cols{grid-template-columns:1fr;gap:26px}
}

/* ---------- floating call button ---------- */
.site-call{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  height:52px;padding:0 20px;border-radius:999px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  background:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
  box-shadow:0 18px 36px -14px rgba(109,40,217,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .2s ease,filter .2s ease}
.site-call:hover{transform:translateY(-2px);filter:brightness(1.07);color:#fff}
.site-call i{font-size:20px}
@media (max-width:520px){.site-call span{display:none}.site-call{padding:0;width:52px;justify-content:center}}

/* ---------- travel guides (guidePage() in build.mjs) ----------
   Tailwind's preflight strips list markers and link styling, and guide copy
   is written as plain HTML, so the guide body gets its own small set. */
.guide-body p + p{margin-top:.9rem}
.guide-body a{color:var(--violet-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.guide-body a:hover{color:var(--violet-deep)}
.guide-body strong{color:var(--ink);font-weight:600}
.guide-body em{font-style:italic}
.guide-body ul{list-style:disc;padding-left:1.25rem;margin-top:.75rem}
.guide-body li + li{margin-top:.55rem}
.guide-body li::marker{color:var(--violet-ink)}
.guide-toc ol a{color:var(--ink-2);text-decoration:none}
.guide-toc ol a:hover{color:var(--violet-ink)}

/* ---------- fleet: rates at a glance (top of fleet.php) ---------- */
.vrates-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.vrates-head h2{margin:0;font-size:clamp(21px,2.6vw,28px);font-weight:600;letter-spacing:-.03em}
.vrates-head p{margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--label)}
.vrates{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.vrate{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.vrate:hover{border-color:var(--violet);transform:translateY(-2px);color:var(--ink)}
.vrate-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.vrate-meta{font-size:12.5px;color:var(--muted)}
.vrate-price{display:flex;align-items:baseline;gap:4px;margin-top:8px;font-size:13px;color:var(--muted)}
.vrate-price small{font-size:12px}
.vrate-price b{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--violet-ink)}
.vrate.is-call{background:var(--tint);border-color:#DDD0EE}
.vrate.is-call .vrate-price{align-items:center;gap:7px}
.vrate.is-call .vrate-price b{font-size:17px;color:var(--violet-deep)}
.vrate.is-call .vrate-price i{font-size:18px;color:var(--violet-ink)}
.vrates-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.vrates-note a,.vcard-rate small a{color:var(--violet-ink);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.vrate{transition:none}.vrate:hover{transform:none}}

/* ==========================================================================
   VEHICLE PAGE (vehicle.php) - after the client's single-vehicle reference
   ========================================================================== */
.vp-top .vp-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:22px}
.vp-crumb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:var(--ash)}
.vp-crumb a{color:var(--ash);text-decoration:none;display:inline-flex}
.vp-crumb a:hover{color:var(--pearl)}
.vp-crumb i{font-size:14px;opacity:.7}
.vp-crumb a:first-child i{font-size:19px;opacity:1}
.vp-crumb [aria-current]{color:var(--pearl);font-weight:600}
.vp-top-acts{display:flex;gap:6px}
.vp-act{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;
  background:transparent;color:var(--pearl);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.vp-act:hover{background:rgba(255,255,255,.08)}
.vp-act i{font-size:19px}
.vp-act[aria-pressed="true"] i{color:#F0ABFC}

.vp{padding-top:28px}

/* photo mosaic */
.vp-gallery{position:relative;display:grid;gap:10px;height:clamp(280px,32vw,440px);border-radius:22px;overflow:hidden}
.vp-gallery--1{grid-template-columns:1fr}
.vp-gallery--2{grid-template-columns:1fr 1fr}
.vp-gallery--3,.vp-gallery--4,.vp-gallery--5{grid-template-rows:1fr 1fr}
.vp-gallery--3{grid-template-columns:2fr 1fr}
.vp-gallery--4,.vp-gallery--5{grid-template-columns:2fr 1fr 1fr}
.vp-gallery--3 .vp-shot:first-child,.vp-gallery--4 .vp-shot:first-child,.vp-gallery--5 .vp-shot:first-child{grid-row:1 / span 2}
.vp-gallery--4 .vp-shot:nth-child(2){grid-column:2 / span 2}
.vp-shot{display:block;padding:0;border:0;overflow:hidden;background:var(--field-bg);cursor:zoom-in}
.vp-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vp-shot:hover img{transform:scale(1.03)}
.vp-all{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  border:0;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:0 10px 30px -12px rgba(18,13,28,.5)}
.vp-all span{color:var(--muted);font-weight:500}
.vp-all:hover{background:#fff}

/* body */
.vp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding:36px 0 72px}
.vp-title{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.vp-title h1{margin:0;font-size:clamp(30px,4.2vw,48px);line-height:1.05;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.vp-badge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1.5px solid var(--violet);border-radius:999px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-deep);white-space:nowrap}
.vp-badge i{font-size:10px;color:var(--violet-ink)}
.vp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:16px;font-size:15px}
.vp-rating{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none}
.vp-rating:hover span{text-decoration:underline;text-underline-offset:3px}
.vp-g{width:18px;height:18px}
.vp-rating .ph-star{color:#F2B01E;font-size:17px}
.vp-rating b{font-weight:600}
.vp-rating span{color:var(--muted)}
.vp-chip{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.vp-chip i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--violet-ink);font-size:17px}
.vp-tag{margin:22px 0 0;font-size:21px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.vp-best{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.vp-best b{color:var(--ink);font-weight:600}
.vp-ticks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)}
.vp-ticks li{display:inline-flex;align-items:center;gap:6px}
.vp-ticks i{color:var(--violet-ink)}

.vp-block{margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.vp-block h2{margin:0 0 16px;font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.vp-story p{margin:0;font-size:16.5px;line-height:1.65;color:var(--muted)}
.vp-story h3{margin:18px 0 4px;font-size:16px;font-weight:600;color:var(--ink)}
.vp-story:not(.is-open) > :nth-child(n+4){display:none}
.vp-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:0;border:0;background:none;font:inherit;
  font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.vp-more[hidden]{display:none}
.vp-more i{transition:transform .2s ease}
.vp-more[aria-expanded="true"] i{transform:rotate(180deg)}
.vp-popular{margin:24px 0 0;font-size:15px;line-height:1.95;color:var(--muted)}
.vp-popular span{color:var(--ink);font-weight:500;margin-right:4px}
.vp-popular a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.vp-popular a:hover{color:var(--violet-ink);text-decoration-color:var(--violet-ink)}
.vp-popular em{font-style:normal;color:var(--label)}

.vp-has{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.vp-has li{display:flex;align-items:center;gap:14px}
.vp-has-ico{display:grid;place-items:center;flex:0 0 auto;width:50px;height:50px;border-radius:50%;background:var(--tint);
  border:1px solid #E4D9F3;color:var(--violet-ink);font-size:22px}
.vp-has b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.vp-has small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--muted)}

.vp-faq details{border-bottom:1px solid var(--line)}
.vp-faq details:first-child{border-top:1px solid var(--line)}
.vp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-weight:500;color:var(--ink)}
.vp-faq summary i{flex:0 0 auto;color:var(--muted);transition:transform .2s ease}
.vp-faq details[open] summary i{transform:rotate(180deg)}
.vp-faq p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* the rate card */
.vp-side{position:sticky;top:96px}
.vp-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;
  box-shadow:0 24px 60px -36px rgba(76,29,149,.4)}
.vp-card-head{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 18px;font-size:15px;font-weight:600;color:var(--ink)}
.vp-card-head i{font-size:19px;color:var(--violet-ink)}
.vp-rates{display:flex;flex-direction:column;gap:10px}
.vp-rate{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px;
  border:1.5px solid var(--line);border-radius:16px;background:#fff;font:inherit;text-align:left;color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.vp-rate:hover{border-color:#CDBFEA}
.vp-rate.is-on{border-color:var(--violet);background:#FDFBFF;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.vp-rate-flag{position:absolute;top:-11px;left:16px;padding:3px 10px;border-radius:999px;background:var(--violet);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.vp-rate-name{min-width:0}
.vp-rate-name b{font-size:15.5px;font-weight:600}
.vp-rate-name em{display:inline-block;margin-left:6px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;
  font-style:normal;font-size:12px;color:var(--muted);vertical-align:2px}
.vp-rate-name small{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.vp-rate-price{flex:0 0 auto;text-align:right}
.vp-rate-price b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.vp-rate-price small{font-size:12.5px;color:var(--muted)}
.vp-reserve{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;margin-top:16px;border-radius:999px;
  background:var(--violet);color:#fff;font-size:16px;font-weight:600;text-decoration:none;transition:background .18s ease}
.vp-reserve:hover{background:var(--violet-btn-bot);color:#fff}
.vp-reserve--ghost{margin-top:10px;background:transparent;color:var(--violet-ink);border:1.5px solid var(--line)}
.vp-reserve--ghost:hover{background:var(--tint);color:var(--violet-deep)}
.vp-oncall{position:relative;padding:24px 16px 16px;border:1.5px solid var(--violet);border-radius:16px;background:#FDFBFF}
.vp-oncall p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.vp-oncall b{display:block;margin-bottom:4px;font-size:16px;font-weight:600;color:var(--ink)}
.vp-fine{margin:14px 0 0;text-align:center;font-size:12.5px;line-height:1.55;color:var(--muted)}
.vp-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.vp-card-acts a{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none}
.vp-card-acts a:only-child{grid-column:1 / -1}
.vp-card-acts a:hover{border-color:var(--violet);color:var(--violet-ink)}
.vp-dispatch{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.vp-dispatch a{color:var(--violet-ink)}

/* phone bar - hidden on desktop, where the card is always in view */
.vp-bar{display:none}

/* all photos */
.vp-viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,6,17,.97);color:#fff}
.vp-viewer::backdrop{background:rgba(10,6,17,.7)}
.vp-viewer-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em}
.vp-viewer-top button,.vp-nav{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}
.vp-viewer-top button:hover,.vp-nav:hover{background:rgba(255,255,255,.22)}
.vp-viewer-stage{position:relative;display:flex;align-items:center;justify-content:center;height:calc(100% - 74px);padding:0 72px 24px}
.vp-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.vp-viewer-stage img[hidden]{display:none}
.vp-nav{position:absolute;top:50%;transform:translateY(-50%)}
.vp-nav--prev{left:16px}
.vp-nav--next{right:16px}

@media (max-width:1023.98px){
  /* one column: the rate card comes straight after the ticks */
  .vp-grid{display:flex;flex-direction:column;gap:0;padding:26px 0 48px}
  .vp-main{display:contents}
  .vp-title{order:1}.vp-meta{order:2}.vp-tag{order:3}.vp-best{order:4}.vp-ticks{order:5}
  .vp-side{order:6;position:static;margin-top:26px}
  .vp-block{order:7}
  .vp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -18px rgba(18,13,28,.35)}
  .vp-bar-price{font-size:13px;color:var(--muted)}
  .vp-bar-price b{font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
  .vp-bar-btn{display:inline-flex;align-items:center;height:48px;padding:0 28px;border-radius:999px;background:var(--violet);
    color:#fff;font-size:15.5px;font-weight:600;text-decoration:none}
  .vp-bar-btn:hover{color:#fff;background:var(--violet-btn-bot)}
  /* the floating call pill would sit on top of the bar */
  body:has(.vp-bar) .site-call{display:none}
  body:has(.vp-bar){padding-bottom:76px}
}
@media (max-width:767.98px){
  /* photos become a swipeable strip */
  .vp-gallery{display:flex;gap:8px;height:250px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;scrollbar-width:none}
  .vp-gallery::-webkit-scrollbar{display:none}
  .vp-shot{flex:0 0 88%;border-radius:14px;scroll-snap-align:start}
  .vp-gallery--1 .vp-shot{flex-basis:100%}
  .vp-has{grid-template-columns:1fr}
  .vp-viewer-stage{padding:0 12px 24px}
  .vp-nav{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .vp-shot img,.vp-rate,.vp-more i,.vp-faq summary i{transition:none}
  .vp-shot:hover img{transform:none}
}

/* ==========================================================================
   Dark - when the visitor's device is set to it (prefers-color-scheme)

   The palette is shared with the homepage. The pieces that were already
   night - the header, the interior hero, the violet studio panels and the
   footer - keep their colours; what flips is the paper, the cards, the
   lines and the ink on them. Filled buttons keep the brand violet with
   white type; violet used as text or an icon lightens so it still reads
   on near-black.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --c-paper:10 9 13; --c-surface:19 17 24; --c-tint:18 15 24; --c-chip:26 23 33;
    --c-ink:242 239 247; --c-inksoft:163 155 178; --c-line:42 38 51; --c-linehover:67 59 82;
    --c-gold:167 139 250; --c-goldink:196 181 253;
    --page-bg:#0A090D; --surface:#131118; --tint:#120F18;
    --ink:#F2EFF7; --ink-2:#CBC4D6; --muted:#A39BB2; --label:#958DA6;
    --line:#2A2633; --line-soft:#211E29; --field-bg:#1A1721;
    --violet-ink:#A78BFA; --violet-deep:#C4B5FD;
  }

  /* .bg-gold now resolves to the text violet; the pills keep the brand fill
     under their gradient */
  a.bg-gold,button.bg-gold,a.bg-gold:hover,button.bg-gold:hover{background-color:var(--violet)}

  /* form fields sit a step above the card they are on */
  input.bg-paper,select.bg-paper,textarea.bg-paper{background-color:var(--field-bg)}
  :root .placeholder\:text-inksoft\/50::placeholder{color:rgb(var(--c-inksoft) / .75)}

  /* fleet cards, chips and rates */
  .vcard:hover{border-color:rgb(var(--c-linehover));box-shadow:0 26px 48px -28px rgba(0,0,0,.85)}
  .vchip:hover{border-color:rgb(var(--c-linehover))}
  .vchip[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
  .vchip[aria-pressed="true"] i{color:var(--studio-accent)}
  .vrate.is-call{border-color:rgb(var(--c-linehover))}

  /* vehicle page */
  .vp-all{background:rgba(19,17,24,.9);color:var(--ink);
    box-shadow:inset 0 0 0 1px rgba(242,239,247,.14),0 10px 30px -12px rgba(0,0,0,.6)}
  .vp-all:hover{background:var(--field-bg)}
  .vp-has-ico{border-color:var(--line)}
  .vp-card{box-shadow:0 24px 60px -36px rgba(0,0,0,.8)}
  .vp-rate{background:var(--surface)}
  .vp-rate:hover{border-color:rgb(var(--c-linehover))}
  .vp-rate.is-on{border-color:var(--violet);background:#1D1629;box-shadow:0 0 0 3px rgba(167,139,250,.16)}
  .vp-oncall{background:#1D1629}
  .vp-bar{box-shadow:0 -12px 30px -18px rgba(0,0,0,.8)}
}

/* ==========================================================================
   Landing-page blocks (2026-10-07)
   How it works / reviews / the Valley calendar / the phone action bar
   ========================================================================== */

/* ---------- how it works ---------- */
.hiw{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));counter-reset:hiw}
.hiw li{position:relative;padding:26px 22px 24px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--page-bg)}
/* the line that carries the eye from one step to the next */
.hiw li + li::before{content:'';position:absolute;left:-16px;top:50%;width:16px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line))}
.hiw-n{position:absolute;right:18px;top:14px;font-family:var(--font-mono);font-size:30px;
  line-height:1;font-weight:500;color:var(--violet);opacity:.14}
.hiw-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;
  background:var(--tint);color:var(--violet-ink,var(--violet))}
.hiw-ico i{font-size:24px}
.hiw h3{margin:16px 0 0;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hiw p{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
@media (max-width:640px){
  .hiw{margin-top:24px;gap:10px}
  .hiw li{padding:18px 16px 17px}
  .hiw li + li::before{display:none}
  .hiw-ico{width:40px;height:40px;border-radius:13px}
  .hiw-ico i{font-size:21px}
  .hiw-n{font-size:25px;right:14px;top:11px}
  .hiw h3{margin-top:12px;font-size:15.5px}
  .hiw p{font-size:13px}
}

/* ---------- reviews ---------- */
.rvb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rvb-score{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);text-decoration:none;transition:border-color .2s ease}
.rvb-score:hover{border-color:#D8C9EC}
.rvb-score b{font-size:19px;font-weight:600;color:var(--ink)}
.rvb-stars{display:inline-flex;gap:1px;color:#F2B01E;font-size:13px}
.rvb-n{font-size:12.5px;color:var(--muted)}
.rvb-grid{display:grid;gap:16px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rvb-card{position:relative;margin:0;padding:26px 22px 20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--surface)}
.rvb-q{position:absolute;left:18px;top:4px;font-family:var(--font-serif);font-size:58px;
  line-height:1;color:var(--violet);opacity:.16}
.rvb-card blockquote{margin:0;position:relative;font-family:var(--font-serif);
  font-size:19px;line-height:1.45;color:var(--ink)}
.rvb-card figcaption{display:flex;align-items:center;gap:11px;margin-top:18px;
  padding-top:15px;border-top:1px solid var(--line-soft)}
.rvb-av{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:999px;
  overflow:hidden;
  background:var(--tint);color:var(--violet-ink,var(--violet));
  font-family:var(--font-mono);font-size:12px;font-weight:500}
.rvb-av img{width:100%;height:100%;object-fit:cover;display:block}
.rvb-card figcaption b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.rvb-card figcaption em{display:block;margin-top:1px;font-family:var(--font-mono);font-style:normal;
  font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
@media (max-width:640px){
  .rvb-grid{margin-top:20px;gap:10px}
  .rvb-card{padding:20px 16px 16px}
  .rvb-card blockquote{font-size:16.5px}
  .rvb-q{font-size:46px;left:14px}
}

/* ---------- the Valley calendar ---------- */
.ssn{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(236px,1fr))}
.ssn-card{padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--page-bg);transition:border-color .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.ssn-card:hover{border-color:#D8C9EC;transform:translateY(-3px)}
.ssn-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--tint);color:var(--violet-ink,var(--violet))}
.ssn-ico i{font-size:22px}
.ssn-card h3{margin:15px 0 0;font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ssn-when{margin:4px 0 0 !important;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--violet-ink,var(--violet))}
.ssn-card p{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ssn-cta{display:inline-flex;align-items:center;gap:7px;margin-top:24px;
  font-size:15px;font-weight:600;color:var(--violet-ink,var(--violet));text-decoration:none}
.ssn-cta:hover{color:var(--violet-deep)}
.ssn-cta span{transition:transform .2s ease}
.ssn-cta:hover span{transform:translateX(3px)}
@media (max-width:640px){
  .ssn{margin-top:22px;gap:10px}
  .ssn-card{padding:17px 15px 16px}
  .ssn-ico{width:38px;height:38px;border-radius:12px}
  .ssn-card h3{margin-top:12px;font-size:15.5px}
  .ssn-card p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ssn-card:hover{transform:none}
  .ssn-cta:hover span{transform:none}
}

/* ==========================================================================
   The phone action bar
   The booking button leaves the screen within a second of scrolling a landing
   page, so it is pinned instead - with the phone beside it, because about
   half of chauffeur bookings are made by voice.
   ========================================================================== */
.site-bar{display:none}
@media (max-width:860px){
  .site-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:1fr auto;gap:9px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,6,17,.9);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid rgba(233,221,255,.14);
  }
  .site-bar-book{
    display:flex;align-items:center;justify-content:center;height:48px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
    color:#fff !important;font-size:15.5px;font-weight:600;text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 22px -12px rgba(109,40,217,.9);
  }
  .site-bar-call{
    display:flex;align-items:center;justify-content:center;gap:7px;
    height:48px;padding:0 18px;border-radius:999px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 0 1px rgba(233,221,255,.22);
    color:var(--pearl) !important;font-size:15px;font-weight:600;text-decoration:none;
  }
  .site-bar-call i{font-size:18px}
  /* the bar replaces the floating pill rather than stacking with it */
  .site-call{display:none}
  /* nothing should end up underneath it */
  body{padding-bottom:78px}
  .site-foot{margin-bottom:0}
}
@media (max-width:860px) and (max-width:380px){
  .site-bar-call span{display:none}
  .site-bar-call{padding:0 15px}
}