/* ==========================================================================
   Phoenix Limo Biz — homepage styles
   Tokens + base + keyframes copied verbatim from the design handoff
   (phoenix-limo-handoff/tokens.css + animations.css).
   ========================================================================== */

:root{
  /* Page (light) */
  --page-bg:#FBFAFE; --hero-top:#F4EEFC;
  --ink:#120D1C; --ink-2:#4A4258; --muted:#655D73; --label:#726A86;
  --line:#E7E0F0; --line-soft:#ECE6F3; --field-bg:#F6F2FB; --tint:#F4EEFC;
  /* surfaces + states that flip in the dark theme (block at the end) */
  --surface:#FFFFFF; --seg-bg:#EEE8F5; --grab:#DCD3EA; --off:#C6BFD3;
  --focus-row:#FCFAFF; --bad-bg:#FDF5F4; --ride-hover:#CDBFEA; --ride-on:#FDFBFF;
  --cut-bg:#F1ECF8; --glass-bar:rgba(255,255,255,0.82);
  --cap-bg:rgba(255,255,255,0.94); --cap-ink:#2E2740;   /* the seats / bags chip on a car */
  --violet-text:#7C3AED; --violet-text-hover:#5B21B6; --violet-text-deep:#5B21B6;
  /* Brand purple */
  --violet:#7C3AED; --violet-deep:#5B21B6; --violet-btn-top:#8B4DF5;
  --violet-btn-bot:#6D28D9; --violet-night:#3B1580; --violet-black:#13072A;
  /* Studio panels (dark) */
  --studio-text:#FFFFFF; --studio-body:#D4C8F5; --studio-eyebrow:#C4B5FD;
  --studio-caption:#B9A8E6; --studio-accent:#E9DDFF;
  --glass-border:rgba(255,255,255,0.12);
  /* Status */
  --green:#12A36B; --green-glow:#5EE6A8; --gold:#B7892E; --gold-glow:#F5C76B; --pink:#F0ABFC;
  /* Type */
  --font-sans:'Geist','Helvetica Neue',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --font-serif:'Instrument Serif',Georgia,serif;
  /* Radii */
  --r-pill:999px; --r-field:14px; --r-card:26px; --r-panel:36px; --r-footer:48px;
  /* width of the mobile design column (its offset-path coords are pinned to 390) */
  --m-max:390px;
}

/* ---------- base (from the design's <helmet>) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);font-family:var(--font-sans);color:var(--ink);
     overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--violet-text)}
a:hover{color:var(--violet-text-hover)}
img,svg,iframe{max-width:100%}
input,select,button{font-family:inherit}
input::placeholder{color:var(--label)}
input,select{color-scheme:light}
button{transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
button:active{transform:scale(0.98)}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}
.plb-skip{position:absolute;left:-9999px;top:0;z-index:999;
  background:#7C3AED;color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-size:14px;font-weight:600;text-decoration:none}
.plb-skip:focus{left:0;color:#fff}

/* ---------- responsive view switching ----------
   The handoff ships two independent designs. Only the matching one is
   mounted into #app (see assets/home.js), so there is no duplicate DOM. */
#app{display:block}
/* The mobile column is fluid. */
@media (max-width:1023.98px){
  :root{--m-max:100%}
}
/* Between phone and desktop the phone layout would otherwise sit in a narrow
   strip with its tinted section bands stopping mid-window. Instead the column
   runs edge to edge and the side padding grows, so the backgrounds bleed while
   the reading measure stays phone-sized. */
@media (min-width:560px) and (max-width:1023.98px){
  #app > div > section,
  #app > div > footer{
    padding-left:calc((100% - 520px) / 2 + 16px) !important;
    padding-right:calc((100% - 520px) / 2 + 16px) !important;
  }
}

/* ---------- fleet showcase: real vehicle photography ----------
   Replaces the handoff's illustrated SVG cars. The purple stage, its
   lighting and the drive-in animation are unchanged. */
.plb-veh-photo{
  display:block;
  width:600px;
  max-width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:26px;
  border:1px solid rgba(233,221,255,.22);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
}
@media (max-width:1023.98px){
  .plb-veh-photo{
    width:290px;
    border-radius:20px;
    box-shadow:0 26px 50px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18);
  }
}
/* A transparent cutout sits straight on the stage with only a contact
   shadow, no card behind it - per vehicle (.is-cutout, from
   PLB_CONFIG.vehicleCutouts), or for all of them with vehiclePhotoMode
   'cutout'. The box keeps the photo's 16:9 so the stage never jumps. */
.plb-veh-photo.is-cutout,
.plb-cutout .plb-veh-photo{
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.55));
}
/* scroller tiles */
.plb-tile-photo{
  display:block;
  width:100%;
  height:46px;
  object-fit:cover;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  transition:opacity .25s ease;
}
/* a cutout is shown whole in the tile, not cropped to fill it */
.plb-tile-photo.is-cutout{object-fit:contain;padding:3px 6px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
/* and whole in the booking rack, on a soft tint instead of a photo */
.plb-ride-shot[data-cut="true"]{background-size:contain;background-color:var(--cut-bg);background-origin:content-box;padding:4px 6px}
@media (max-width:1023.98px){
  .plb-tile-photo{height:42px}
}

/* ---------- booking field widgets (assets/home-booking.js) ----------
   Custom date / time pickers and the Arizona place autocomplete. Panels are
   appended to <body> (no column overflow can clip them) and are always sized
   to fit the visual viewport - the list inside scrolls, the panel never
   runs off the screen. Phones and short windows get a bottom sheet. */
.plb-pop{
  position:fixed;
  z-index:9999;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  max-width:calc(100vw - 16px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 30px 70px -24px rgba(19,7,42,.45), 0 2px 8px rgba(19,7,42,.06);
  font-family:var(--font-sans);
  color:var(--ink);
  overflow:hidden;
  animation:plbPopIn .16s cubic-bezier(.2,.8,.2,1) both;
}
/* the panel body is the flex child that gets to scroll */
.plb-pop > *{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
@keyframes plbPopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.plb-pop--sheet{
  left:0 !important;
  right:0;
  top:auto !important;
  bottom:0;
  width:auto !important;
  max-width:none;
  border-radius:26px 26px 0 0;
  border-bottom:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  animation:plbSheetIn .22s cubic-bezier(.2,.8,.2,1) both;
}
/* grabber, so the sheet reads as a sheet */
.plb-pop--sheet::before{
  content:'';
  flex:0 0 auto;
  width:38px;
  height:4px;
  margin:9px auto 3px;
  border-radius:999px;
  background:var(--grab);
}
@keyframes plbSheetIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes plbFadeOnly{from{opacity:0}to{opacity:1}}
/* a short-but-wide window (laptop, split screen) gets the sheet treatment
   too, but centred as a dialog rather than a full-width bar */
@media (min-width:720px){
  .plb-pop--sheet{
    left:50% !important;
    right:auto;
    transform:translateX(-50%);
    width:min(560px,calc(100vw - 32px)) !important;
    margin-bottom:16px;
    border-radius:22px;
    border-bottom:1px solid var(--line);
    animation:plbFadeOnly .16s ease both;
  }
}
.plb-pop-backdrop{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(19,7,42,.42);
  animation:plbPopIn .16s ease both;
}
.plb-pop-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 4px 12px;
}
.plb-pop-title{font-size:17px;font-weight:600;letter-spacing:-.02em}
.plb-pop-x{
  width:34px;height:34px;border:0;border-radius:50%;
  background:var(--field-bg);color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;
}

/* --- calendar --- */
.plb-cal{padding:14px;overflow-y:auto;overscroll-behavior:contain}
.plb-cal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.plb-cal-month{font-size:15px;font-weight:600;letter-spacing:-.02em}
.plb-cal-nav{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
}
.plb-cal-nav:disabled{opacity:.3;cursor:default}
.plb-cal-dow{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.plb-cal-dow span{
  text-align:center;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;color:var(--label);
}
.plb-cal-grid{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.plb-cal-pad{display:block;height:38px}
.plb-cal-day{
  height:38px;border:0;border-radius:11px;background:transparent;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
}
.plb-cal-day:hover:not(:disabled){background:var(--tint)}
.plb-cal-day.is-off{color:var(--off);cursor:default}
.plb-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--violet);color:var(--violet-text)}
.plb-cal-day.is-sel{background:var(--violet);color:#FFFFFF;font-weight:600}
.plb-cal-day.is-sel:hover{background:var(--violet-deep)}
.plb-cal-quick{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.plb-chip{
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
}
.plb-chip:hover{border-color:var(--violet);color:var(--violet-text)}

/* --- time list --- */
.plb-clock{padding:14px}
.plb-clock .plb-cal-quick{margin:0 0 10px}
.plb-clock-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px}
.plb-clock-opt{
  padding:11px 14px;border:0;border-radius:11px;background:transparent;
  font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer;
}
.plb-clock-opt:hover{background:var(--tint)}
.plb-clock-opt.is-sel{background:var(--violet);color:#FFFFFF;font-weight:600}

/* --- place autocomplete --- */
.plb-pop--ac{padding:8px}
.plb-pop--ac.plb-pop--sheet{padding:14px}
.plb-ac{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.plb-ac-head{flex:0 0 auto;
  padding:8px 10px 6px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.12em;color:var(--label);
}
.plb-ac-row{
  flex:0 0 auto;width:100%;display:flex;align-items:center;gap:12px;
  padding:10px;border:0;border-radius:14px;background:transparent;
  text-align:left;cursor:pointer;
}
.plb-ac-row.is-active,.plb-ac-row:hover{background:var(--tint)}
.plb-ac-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--field-bg);color:var(--violet-text);
  display:flex;align-items:center;justify-content:center;
}
.plb-ac-ico svg{width:19px;height:19px}
.plb-ac-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.plb-ac-name{font-size:14.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-ac-sub{font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-ac-empty{padding:16px 12px;font-size:13.5px;color:var(--muted)}
.plb-ac-busy{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:10px 12px;font-size:12.5px;color:var(--muted);
}
.plb-ac-busy::before{
  content:'';width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--violet);
  animation:plbSpin .7s linear infinite;
}
@keyframes plbSpin{to{transform:rotate(360deg)}}
.plb-ac-attr{flex:0 0 auto;padding:9px 12px 4px;font-size:11px;color:var(--label)}
.plb-ac-mirror{
  flex:0 0 auto;width:100%;margin-bottom:10px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--field-bg);font-size:16px;color:var(--ink);outline:0;
}
.plb-ac-mirror:focus{border-color:var(--violet)}

/* the two pickers are driven by the popovers, never the OS UI */
[data-plb-date],[data-plb-time]{cursor:pointer}
[data-plb-date]::-webkit-calendar-picker-indicator,
[data-plb-time]::-webkit-calendar-picker-indicator{display:none}

/* ==========================================================================
   THE HERO - book before you scroll
   Built to the client's ride-app reference in our own white and purple: a
   deep purple map band carries the brand and the promise, and the booking
   sheet rises over its lower edge in the page's own white, so the hero hands
   straight on to the rest of the page. Trip first; who you are comes last.
   ========================================================================== */
:root{
  /* night tokens, still used by the menus and the phone panel */
  --noct:#0A0611;
  --noct-2:#150E24;
  --pearl:#F8F5FD;
  --ash:#B3A6CE;
  /* the hero */
  --band:#1B0D35;           /* deep brand purple: the map at night */
  --band-text:#FFFFFF;
  --band-soft:#CFC3EA;      /* secondary type on the band */
  --band-accent:#C4B5FD;    /* the italic in the headline, the route chip */
  --sheet:var(--page-bg);   /* = the page background, so the sheet IS the page */
  --card:var(--surface);
  --card-line:var(--line);
  --track:#EFE9F7;
  --placeholder:#8E86A0;
  --bad:#B3261E;
}

.plb-h{position:relative;isolation:isolate;color:var(--ink)}
/* the tablet measure rule is for the handoff's sections; the hero keeps its
   own measure so the band can still run edge to edge */
#app > div > section.plb-h{padding-left:0 !important;padding-right:0 !important}
.plb-h [hidden]{display:none !important}

.plb-h-plate{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  /* the studio panels' glow, lit from the top right so the headline sits on
     the deep part of it */
  background:radial-gradient(ellipse 72% 88% at 80% -12%, #6D28D9 0%, #3B1580 40%, rgba(27,13,53,0) 74%), var(--band);
}
.plb-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;                 /* beats the global svg{max-width:100%} */
  transform:translate3d(calc(var(--plb-px,0) * 1px),calc(var(--plb-py,0) * 1px),0) scale(1.03);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}

/* ---------- header ---------- */
.plb-h-bar{
  position:relative;
  z-index:50;                     /* the menus open over everything below */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
}
/* the wordmark gives way before the call and menu buttons get pushed off a
   320px screen */
.plb-brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--band-text);text-decoration:none}
.plb-brand:hover{color:var(--band-text)}
.plb-brand > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--font-serif);
  font-size:clamp(17px,5.4vw,22px);
  line-height:1.1;
  letter-spacing:-.01em;
  white-space:nowrap;
}
/* the client's badge, shown whole - it carries its own ring */
.plb-mark{width:46px;height:46px;flex:0 0 auto;object-fit:contain;display:block}
.plb-h-bar--d .plb-mark{width:52px;height:52px}
@media (max-width:359.98px){.plb-mark{width:40px;height:40px}}
.plb-navact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
@media (max-width:359.98px){.plb-navact{gap:8px}}
.plb-call,
.plb-menu-btn{
  width:44px;height:44px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(233,221,255,.16);
  color:var(--band-text);
  text-decoration:none;
  cursor:pointer;
}
.plb-call:hover,
.plb-menu-btn:hover{background:rgba(255,255,255,.17);color:var(--band-text)}
.plb-call svg{width:18px;height:18px}
.plb-menu-btn svg{width:20px;height:20px}
.plb-menu-btn .plb-ico-close,
.plb-menu-btn[aria-expanded="true"] .plb-ico-open{display:none}
.plb-menu-btn[aria-expanded="true"] .plb-ico-close{display:block}
/* the phone menu drops over the hero instead of pushing the headline down */
.plb-h .plb-panel{
  position:absolute;
  left:16px;right:16px;top:62px;
  z-index:60;
  margin:0;
  max-height:calc(100vh - 86px);
  max-height:calc(100dvh - 86px);
  overflow:auto;
  border-radius:22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}

/* ---------- the promise ---------- */
.plb-h-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:30px}
.plb-h-eyebrow{
  margin:0;
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--band-soft);
}
.plb-live{position:relative;width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--green-glow)}
.plb-live::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:plbPing 1.8s ease-out infinite}
.plb-h-title{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(30px,8.6vw,38px);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--band-text);
}
.plb-h-title em{font-style:italic;color:var(--band-accent)}

/* ---------- phone: band + sheet ---------- */
.plb-h-in{position:relative;max-width:560px;margin:0 auto;padding:0 16px}
.plb-h--m .plb-h-band{position:relative;padding:12px 0 84px;color:var(--band-text)}
/* the pin sits exactly on the sheet's top edge, half hidden beneath it */
.plb-h-pin{
  position:absolute;
  left:max(58px, calc(50% - 222px));
  bottom:22px;
  width:12px;height:12px;
  border-radius:50%;
  background:#F4EEFC;
  box-shadow:0 0 0 6px rgba(196,181,253,.24), 0 0 24px rgba(196,181,253,.9);
}
.plb-h-sheet{
  position:relative;
  z-index:2;
  margin-top:-28px;
  padding-top:10px;
  background:var(--sheet);
  border-radius:28px 28px 0 0;
}
.plb-h-grab{display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--grab)}

/* ---------- desktop: headline + card ---------- */
.plb-h--d{color:var(--band-text)}
.plb-h-wrap{position:relative;max-width:1440px;margin:0 auto;padding:22px clamp(28px,5.6vw,80px) clamp(56px,6vw,96px)}
.plb-h-bar--d{min-height:64px;gap:20px}
.plb-h-bar--d .plb-brand{flex:0 0 auto}
.plb-h-bar--d .plb-brand > span:last-child{font-size:26px}
.plb-h-bar--d .plb-nav{flex:0 1 auto;min-width:0}
.plb-h-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.plb-h-phone{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 14px;
  border-radius:999px;
  color:var(--band-text);
  font-family:var(--font-mono);
  font-size:13.5px;
  text-decoration:none;
}
.plb-h-phone:hover{color:var(--band-text);background:rgba(255,255,255,.08)}
.plb-h-phone svg{width:16px;height:16px;color:var(--band-accent)}
.plb-h-book{
  display:inline-flex;align-items:center;
  height:44px;padding:0 20px;
  border-radius:999px;
  background:var(--violet);
  color:#FFFFFF;
  font-size:14px;font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.plb-h-book:hover{background:var(--violet-btn-bot);color:#FFFFFF}
@media (max-width:1279.98px){
  .plb-h-phone{width:44px;padding:0;justify-content:center;box-shadow:inset 0 0 0 1px rgba(233,221,255,.16)}
  .plb-h-phone span{display:none}
  .plb-h-bar--d .plb-nav-top{padding:0 9px}
}
.plb-h-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,460px);
  gap:clamp(40px,5vw,88px);
  align-items:center;
  margin-top:clamp(28px,3.6vw,52px);
}
.plb-h--d .plb-h-copy{padding:0 0 24px;gap:18px}
.plb-h--d .plb-h-eyebrow{font-size:11.5px}
.plb-h--d .plb-h-title{font-size:clamp(54px,calc(7.4vw - 22px),92px);line-height:.98}
.plb-h-sub{margin:6px 0 0;max-width:500px;font-size:15.5px;line-height:1.6;color:var(--band-soft)}   /* 11.9px +30% (client) */
.plb-h--m .plb-h-sub{margin:2px 0 0;max-width:36ch;font-size:12.5px;line-height:1.55;text-wrap:pretty}  /* dropped from 14px (client) */
.plb-h-trust{
  list-style:none;
  margin:12px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 26px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--band-soft);
}
.plb-h-trust li{display:inline-flex;align-items:center;gap:8px}
.plb-h-trust svg{width:16px;height:16px;color:var(--band-accent)}
.plb-h-card{
  position:relative;
  padding:20px;
  border-radius:28px;
  background:var(--sheet);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(233,221,255,.12);
}

/* ==========================================================================
   THE BOOKING SHEET - shared by both layouts
   ========================================================================== */
/* the desktop card sits on the band, so it must not inherit the band's white */
.plb-book{display:flex;flex-direction:column;color:var(--ink);scroll-margin-top:16px}
.plb-book--d{scroll-margin-top:44px}
.plb-book-trip,
.plb-details{display:flex;flex-direction:column;gap:10px}

/* ---------- trip type ---------- */
.plb-seg{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border-radius:15px;
  background:var(--track);
  --seg-i:0;
}
.plb-book[data-trip="airport"] .plb-seg{--seg-i:1}
.plb-book[data-trip="hourly"] .plb-seg{--seg-i:2}
/* the chosen tab's pill glides across instead of jumping (client) */
.plb-seg-thumb{
  position:absolute;
  top:4px;bottom:4px;left:4px;
  width:calc((100% - 16px) / 3);
  border-radius:11px;
  background:var(--card);
  box-shadow:0 1px 2px rgba(18,13,28,.06), 0 6px 16px -8px rgba(76,29,149,.35);
  transform:translateX(calc(var(--seg-i) * (100% + 4px)));
  transition:transform .42s cubic-bezier(.32,.72,.18,1);
  pointer-events:none;
}
.plb-seg-btn{
  position:relative;
  z-index:1;
  height:44px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  font-size:14.5px;
  font-weight:500;
  cursor:pointer;
  transition:color .3s ease;
}
.plb-seg-btn:hover{color:var(--ink)}
.plb-seg-btn[aria-pressed="true"]{
  color:var(--ink);
  font-weight:600;
}
@media (prefers-reduced-motion:reduce){.plb-seg-thumb{transition:none}}

/* ---------- route ---------- */
.plb-route{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:16px;
}
.plb-route-row{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  column-gap:12px;
  min-height:64px;
  padding:8px 10px 8px 16px;
  cursor:text;
  transition:background .18s ease;
}
.plb-route-row + .plb-route-row::before{
  content:'';
  position:absolute;
  left:50px;right:0;top:0;
  height:1px;
  background:var(--seg-bg);
}
.plb-route-ico{justify-self:center;display:flex;align-items:center;justify-content:center}
.plb-route-ico svg{display:block}
.plb-route-ico--pickup,.plb-route-ico--dropoff{width:20px;height:20px;color:var(--violet)}
.plb-route-ico--pickup svg,.plb-route-ico--dropoff svg{width:20px;height:20px}
.plb-route-ico--stop{width:18px;height:18px;color:#A78BFA}
.plb-route-ico--stop svg{width:18px;height:18px}
.plb-route-ico--hours{display:flex;color:var(--violet-text)}
.plb-route-ico--hours svg{width:19px;height:19px}
.plb-route-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.plb-route-cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--label)}
.plb-route-cap em{font-family:var(--font-sans);font-style:normal;font-size:11px;letter-spacing:0;opacity:.8}
.plb-route-txt input{
  width:100%;min-width:0;
  border:0;outline:0;background:transparent;padding:0;
  font-size:16px;color:var(--ink);
  text-overflow:ellipsis;
}
.plb-route-txt input::placeholder,
.plb-pill input::placeholder,
.plb-f input::placeholder,
.plb-notes textarea::placeholder{color:var(--placeholder)}
.plb-route-row:focus-within{background:var(--focus-row)}
.plb-route-row.is-bad{background:var(--bad-bg)}
.plb-route-row.is-bad .plb-route-cap{color:var(--bad)}

/* trip types are CSS on data-trip, never a re-mount, so nothing typed is lost */
.plb-book [data-plb-row="hours"],
.plb-book [data-plb-row="flight"]{display:none}
.plb-book[data-trip="hourly"] [data-plb-row="hours"]{display:grid}
.plb-book[data-trip="hourly"] [data-plb-row="dropoff"]{display:none}
.plb-book[data-trip="airport"] [data-plb-row="flight"]{display:flex}

/* ---------- locate / swap / remove, at a row's right edge ---------- */
.plb-field-act{
  width:38px;height:38px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:transparent;
  color:var(--violet-text);
  cursor:pointer;
}
.plb-field-act:hover{background:var(--tint)}
.plb-field-act svg{width:18px;height:18px}
.plb-field-act--ring{background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
.plb-field-act--ring:hover{background:var(--card);box-shadow:inset 0 0 0 1px var(--violet)}
.plb-field-act.is-busy{opacity:.5;pointer-events:none}
.plb-field-act--remove{color:var(--muted)}
.plb-field-act--remove:hover{color:var(--bad);background:var(--bad-bg)}

/* ---------- add a stop: on the line between pickup and drop-off ----------
   (client's doodle, 2026-10-10; build-home.mjs ADD_STOP). The strip is the
   divider itself: the link, then the hairline running on to the card's edge.
   Its "+" stands in the marker column and its label starts where the
   addresses do. It leans 7px into the row above and below, so the route
   grows by 14px rather than a whole row. */
.plb-route-add{
  position:relative;z-index:1;
  display:flex;align-items:center;
  height:28px;
  margin:-7px 0;
  padding-left:8px;
}
.plb-route-add::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  background:var(--seg-bg);
}
.plb-addstop{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:12px;
  height:28px;
  padding:0 12px 0 8px;
  border:0;border-radius:999px;
  background:transparent;
  color:var(--violet-text);
  font-size:13px;font-weight:600;
  cursor:pointer;
}
.plb-addstop:hover{background:var(--tint)}
.plb-addstop-ico{width:22px;height:18px;display:flex;align-items:center;justify-content:center}
.plb-addstop-ico svg{
  width:18px;height:18px;
  padding:4px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--ride-hover);
  stroke-width:2.6;
  transition:box-shadow .18s ease;
}
.plb-addstop:hover .plb-addstop-ico svg{box-shadow:inset 0 0 0 1.5px var(--violet-text)}
/* past the last stop the link goes, and the drop-off gets its hairline back */
.plb-route-add[hidden] + .plb-route-row::before{
  content:'';
  position:absolute;
  left:50px;right:0;top:0;
  height:1px;
  background:var(--seg-bg);
}
/* by the hour the drop-off is hidden and the duration follows the link: one
   line there, not two */
.plb-book[data-trip="hourly"] .plb-route-add:not([hidden]) ~ [data-plb-row="hours"]::before{content:none}
/* a stop opens as a row above the link, and folds away when it is removed */
.plb-route-row.is-opening{overflow:hidden;animation:plbStopIn .32s cubic-bezier(.2,.8,.2,1) both}
.plb-route-row.is-closing{overflow:hidden;pointer-events:none;animation:plbStopOut .24s cubic-bezier(.4,0,.6,1) both}
@keyframes plbStopIn{
  from{min-height:0;max-height:0;padding-top:0;padding-bottom:0;opacity:0}
  to{min-height:64px;max-height:64px;padding-top:8px;padding-bottom:8px;opacity:1}
}
@keyframes plbStopOut{
  from{min-height:64px;max-height:64px;padding-top:8px;padding-bottom:8px;opacity:1}
  to{min-height:0;max-height:0;padding-top:0;padding-bottom:0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .plb-route-row.is-opening,.plb-route-row.is-closing{animation:none}
}

/* ---------- view fleet: the link under the route card ----------
   (client's doodle, 2026-10-10; build-home.mjs FLEET_ROW). Its car stands
   under the route's markers and its label under the addresses. The sheet it
   opens is at the end of this file (VIEW FLEET). */
.plb-fleetrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;margin:-2px 0}
.plb-viewfleet{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  height:30px;
  margin-left:10px;
  padding:0 8px 0 9px;
  border:0;border-radius:999px;
  background:transparent;
  color:var(--violet-text);
  font-size:13px;font-weight:600;
  cursor:pointer;
}
.plb-viewfleet:hover{background:var(--tint)}
.plb-viewfleet svg{width:18px;height:18px;margin-right:14px}
.plb-viewfleet svg.plb-viewfleet-go{width:13px;height:13px;margin:0 0 0 4px;stroke-width:2.2;transition:transform .2s ease}
.plb-viewfleet:hover .plb-viewfleet-go{transform:translateX(2px)}
/* the vehicle chosen in the sheet */
.plb-fleetpick{
  min-width:0;
  display:inline-flex;align-items:center;gap:6px;
  height:26px;
  padding:0 11px 0 8px;
  border-radius:999px;
  background:var(--tint);
  color:var(--ink-2);
  font-size:12.5px;font-weight:500;
  animation:plbHeroStep .34s cubic-bezier(.2,.8,.2,1) both;
}
.plb-fleetpick svg{flex:0 0 auto;width:13px;height:13px;color:var(--green);stroke-width:2.4}
.plb-fleetpick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.plb-fleetpick{animation:none}}

/* ---------- date, time, guests, flight ---------- */
.plb-when{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.plb-when .plb-row--guests{grid-column:1 / -1}
.plb-pill{
  display:flex;align-items:center;gap:10px;
  min-width:0;height:52px;
  padding:0 16px;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:999px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.plb-pill svg{width:18px;height:18px;flex:0 0 auto;color:var(--violet-text)}
.plb-pill input{
  flex:1 1 auto;min-width:0;
  border:0;outline:0;background:transparent;padding:0;
  font-size:16px;color:var(--ink);
  text-overflow:ellipsis;
  cursor:pointer;
}
.plb-pill:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.plb-pill.is-bad{border-color:#C2443B;background:var(--bad-bg)}

.plb-row{
  display:flex;align-items:center;gap:12px;
  min-height:56px;
  padding:6px 8px 6px 16px;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:16px;
}
.plb-row > svg{width:18px;height:18px;flex:0 0 auto;color:var(--violet-text)}
.plb-row .plb-route-txt{flex:1 1 auto;padding:4px 0}
.plb-row:focus-within{border-color:var(--violet)}
.plb-stepper-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.plb-stepper-val{font-size:16px;color:var(--ink)}
.plb-stepper-val b{font-weight:600}
.plb-stepper-val em{font-style:normal;font-size:12.5px;color:var(--muted);margin-left:4px}
.plb-stepper-ctl{display:flex;gap:8px;flex:0 0 auto}
.plb-stepper-ctl button{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-line);
  color:var(--ink);
  font-size:19px;line-height:1;
  cursor:pointer;
}
.plb-stepper-ctl button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--violet);color:var(--violet-text)}
.plb-stepper-ctl button:disabled{opacity:.35;cursor:default}

/* ---------- the rack: every car one swipe away ---------- */
.plb-rack{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  margin:2px -16px 0;
  padding:2px 16px 4px;
  scroll-padding-inline:16px;
  scrollbar-width:none;
}
.plb-rack::-webkit-scrollbar{display:none}
.plb-ride{
  flex:0 0 auto;
  width:150px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:3px;
  padding:7px 7px 10px;
  border:0;border-radius:15px;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-line);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:box-shadow .18s ease, background .18s ease;
}
.plb-ride:hover{box-shadow:inset 0 0 0 1px var(--ride-hover)}
.plb-ride[aria-checked="true"]{
  background:var(--ride-on);
  box-shadow:inset 0 0 0 1.5px var(--violet), 0 10px 24px -16px rgba(124,58,237,.75);
}
.plb-ride-shot{
  position:relative;
  display:block;
  height:62px;
  margin-bottom:5px;
  border-radius:10px;
  background:var(--field-bg) center / cover no-repeat;
}
.plb-ride-cap{
  position:absolute;
  top:5px;right:5px;
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px 2px 6px;
  border-radius:999px;
  /* Chip and figures flip together. The chip used to stay white while its
     text took the page's ink, which turns pale in the dark theme: pale grey
     on white (client, 2026-10-10). */
  background:var(--cap-bg);
  box-shadow:0 0 0 1px rgba(124,58,237,.14);
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  color:var(--cap-ink);
}
.plb-ride-cap svg{width:11px;height:11px;stroke-width:2}
.plb-ride-cap svg + svg,
.plb-ride-cap svg:nth-of-type(2){margin-left:4px}
.plb-ride-name{padding:0 3px;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-ride-sub{padding:0 3px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-ride-price{padding:4px 3px 0;font-size:12.5px;font-weight:600;color:var(--violet-text)}
.plb-ride-price[data-call="true"]{color:var(--violet-text-deep);font-weight:500}

/* ---------- the button, and what it promises ---------- */
.plb-cta{display:flex;flex-direction:column;gap:8px;margin-top:4px}
/* The primary button carries the whole page, so it is given material:
   a vertical gradient, a lit top edge, a shadow it sits in rather than
   floats on, and one pass of light across it on hover. */
.plb-cta-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:56px;
  border:0;border-radius:16px;
  background:linear-gradient(180deg,var(--violet-btn-top),var(--violet-btn-bot));
  color:#FFFFFF;
  font-size:16.5px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(0,0,0,.2),
             0 10px 24px -12px rgba(109,40,217,.95),
             0 2px 6px -3px rgba(76,29,149,.55);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,filter .2s ease;
}
.plb-cta-btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:42%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.plb-cta-btn:hover{
  filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -1px 0 rgba(0,0,0,.2),
             0 16px 32px -14px rgba(109,40,217,1),
             0 3px 8px -3px rgba(76,29,149,.6);
}
.plb-cta-btn:hover::after{animation:plbCtaShine .85s ease-out}
@keyframes plbCtaShine{from{left:-60%;opacity:.9}to{left:118%;opacity:0}}
.plb-cta-btn:active{transform:translateY(0) scale(.995);filter:brightness(.97)}
.plb-cta-btn:focus-visible{outline:2px solid var(--violet-btn-top);outline-offset:3px}
.plb-cta-btn:disabled{opacity:.72;cursor:progress;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .plb-cta-btn{transition:none}
  .plb-cta-btn:hover{transform:none}
  .plb-cta-btn:hover::after{animation:none}
}

/* ---------- the four trust facts, as cards ---------- */
.plb-trust{margin:0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plb-trust-cell{
  display:flex;align-items:flex-start;gap:10px;padding:14px 11px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);
}
.plb-trust-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:11px;
  display:grid;place-items:center;background:var(--tint);color:var(--violet-text);
}
.plb-trust-ico svg{width:16px;height:16px}
.plb-trust-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.plb-trust-txt b{font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
/* the longest caption is BACKGROUND-CHECKED; at 9px/.05em it holds one line
   in the 112px a card leaves beside the icon on a 390px screen */
.plb-trust-txt em{font-family:var(--font-mono);font-style:normal;font-size:9px;
  letter-spacing:.05em;line-height:1.35;color:var(--muted)}
/* Under 390px there is no room beside the icon for BACKGROUND-CHECKED, so the
   icon moves above the text and the caption gets the full width of the card. */
@media (max-width:389.98px){
  .plb-trust{gap:8px}
  .plb-trust-cell{flex-direction:column;align-items:flex-start;gap:9px;padding:13px 12px}
  .plb-trust-ico{width:30px;height:30px;border-radius:10px}
  .plb-trust-ico svg{width:16px;height:16px}
  .plb-trust-txt em{font-size:8.5px}
}
.plb-cta-note{margin:0;text-align:center;font-size:12.5px;color:var(--muted)}
/* phone: the bar stays under the thumb while the sheet scrolls, the way a
   ride app keeps its button on screen */
.plb-book--m .plb-cta{
  position:sticky;
  bottom:0;
  z-index:5;
  margin:6px -16px 0;
  padding:12px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--sheet);
  border-top:1px solid var(--line-soft);
}

.plb-book--d .plb-cta{
  position:sticky;
  bottom:0;
  z-index:5;
  margin:6px -20px -20px;
  padding:14px 20px 16px;
  background:var(--sheet);
  border-top:1px solid var(--line-soft);
  border-radius:0 0 28px 28px;
}

/* ---------- details: the last step ---------- */
.plb-details-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plb-back{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;
  margin-left:-8px;
  padding:0 12px 0 8px;
  border:0;border-radius:999px;
  background:transparent;
  color:var(--violet-text);
  font-size:14px;font-weight:600;
  cursor:pointer;
}
.plb-back:hover{background:var(--tint)}
.plb-back svg{width:16px;height:16px}
.plb-details-step{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.plb-summary{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 16px;
  border-radius:16px;
  background:var(--track);
  font-size:14px;line-height:1.45;
  color:var(--ink-2);
}
.plb-summary span{display:block;overflow-wrap:anywhere}
.plb-summary b{font-weight:600;color:var(--ink)}
/* step 2: a small label over the rack, and the Next arrow */
.plb-rack-label{margin:6px 0 -2px;padding:0 2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--label)}
[data-plb-next] span{margin-left:8px;font-size:18px;line-height:1;transition:transform .2s ease}
[data-plb-next]:hover span{transform:translateX(3px)}
.plb-book-trip:not([hidden]){animation:plbHeroStep .34s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.plb-book-trip:not([hidden]){animation:none}}

.plb-details-title{
  margin:8px 0 0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink);
}

.plb-f{
  display:flex;flex-direction:column;gap:2px;
  height:60px;
  padding:10px 16px;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.plb-f > span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--label)}
.plb-f input{border:0;outline:0;background:transparent;padding:0;width:100%;font-size:16px;color:var(--ink)}
.plb-f:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.plb-f.is-bad{border-color:#C2443B;background:var(--bad-bg)}
.plb-f.is-bad > span{color:var(--bad)}
.plb-f-err{margin:0;padding:0 4px;font-size:13.5px;color:var(--bad)}
.plb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- done ---------- */
.plb-done{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:6px 2px 4px}
.plb-done-ico{
  width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(18,163,107,.12);
  color:var(--green);
}
.plb-done-ico svg{width:24px;height:24px}
.plb-done-title{margin:6px 0 0;font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.02;color:var(--ink)}
.plb-done-ref{margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--label)}
.plb-done-copy{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.plb-done-rows{align-self:stretch;margin:4px 0 0;background:var(--card);border:1px solid var(--card-line);border-radius:16px}
.plb-done-rows div{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;font-size:14px}
.plb-done-rows div + div{border-top:1px solid var(--seg-bg)}
.plb-done-rows dt{color:var(--muted)}
.plb-done-rows dd{margin:0;font-weight:500;text-align:right}
.plb-done-acts{align-self:stretch;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.plb-done-call{
  display:flex;align-items:center;justify-content:center;
  height:48px;
  border-radius:16px;
  color:var(--violet-text);
  font-size:15px;font-weight:600;
  text-decoration:none;
}
.plb-done-call:hover{background:var(--tint)}

/* ---------- desktop card adjustments ----------
   With a pointer, a sideways-scrolling rack hides cars behind a gesture a
   mouse does not have, so the desktop card shows all six in a grid. */
.plb-book--d .plb-rack{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  overflow:visible;
  margin:2px 0 0;
  padding:0;
}
.plb-book--d .plb-ride{width:auto;padding:6px 6px 9px}
.plb-book--d .plb-ride-shot{height:50px}
.plb-book--d .plb-ride-name{font-size:13px}
.plb-book--d .plb-ride-sub{font-size:11px}

/* ---------- the load sequence ---------- */
@keyframes plbHeroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes plbHeroSheet{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes plbHeroFade{from{opacity:0}to{opacity:1}}
@keyframes plbHeroStep{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-plb-lit] .plb-h-plate{animation:plbHeroFade .9s ease both}
[data-plb-lit] .plb-h-copy > *{animation:plbHeroUp .7s cubic-bezier(.2,.8,.2,1) both}
[data-plb-lit] .plb-h-copy > :nth-child(2){animation-delay:.07s}
[data-plb-lit] .plb-h-copy > :nth-child(3){animation-delay:.14s}
[data-plb-lit] .plb-h-copy > :nth-child(4){animation-delay:.21s}
[data-plb-lit] .plb-h-sheet,
[data-plb-lit] .plb-h-card{animation:plbHeroSheet .8s cubic-bezier(.2,.8,.2,1) .16s both}
[data-plb-lit] .plb-h-pin{animation:plbHeroFade .6s ease .7s both}
.plb-details:not([hidden]),
.plb-done{animation:plbHeroStep .34s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion:reduce){
  [data-plb-lit] .plb-h-plate,
  [data-plb-lit] .plb-h-copy > *,
  [data-plb-lit] .plb-h-sheet,
  [data-plb-lit] .plb-h-card,
  [data-plb-lit] .plb-h-pin,
  .plb-details:not([hidden]),
  .plb-done,
  .plb-live::after{animation:none}
  .plb-map{transition:none}
}

/* ==========================================================================
   NAVIGATION — every page on the site, reachable from 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{color:var(--pearl);background:rgba(255,255,255,.08)}
.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:#22113F;
  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-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)}

/* ---------- the phone panel: the same tree, disclosed ---------- */
.plb-panel{position:relative;z-index:40;margin-top:10px}
.plb-panel[hidden]{display:none}
.plb-panel-inner{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:10px;
  border-radius:22px;
  background:#22113F;
  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 (prefers-reduced-motion:reduce){
  .plb-nav-item.is-open > .plb-nav-menu,
  .plb-panel-inner{animation:none}
  .plb-chev{transition:none}
}

/* ---------- scroll reveals ----------
   Sections below the hero rise into place as they come into view. The hidden
   state is only applied by JS, so with scripting off nothing is ever hidden. */
.plb-r{opacity:0}
.plb-r.plb-in{animation:plbReveal .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes plbReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .plb-r{opacity:1}
  .plb-r.plb-in{animation:none}
}

/* ---------- special requests + terms ---------- */
.plb-notes{display:flex;flex-direction:column;gap:4px;padding:10px 16px;
  background:var(--card);border:1px solid var(--card-line);border-radius:16px}
.plb-notes > span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--label)}
.plb-notes em{font-style:normal;opacity:.65}
.plb-notes textarea{border:0;outline:0;background:transparent;padding:0;resize:vertical;
  font-family:inherit;font-size:15px;line-height:1.45;color:var(--ink);width:100%}
.plb-notes:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.plb-terms{display:flex;align-items:flex-start;gap:10px;padding:2px 4px;
  font-size:13px;line-height:1.5;color:var(--muted);cursor:pointer}
.plb-terms input{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:var(--violet);cursor:pointer}
.plb-terms a{color:var(--violet-text);text-decoration:underline;text-underline-offset:2px}
.plb-terms.is-bad{color:var(--bad)}

/* ---------- keyframes (verbatim from animations.css) ---------- */
@keyframes plbDriveIn{0%{transform:translateX(-80%);opacity:0;filter:blur(10px)}55%{filter:blur(0)}100%{transform:translateX(0);opacity:1;filter:blur(0)}}
@keyframes plbSpinOnce{0%{transform:rotate(-1080deg)}100%{transform:rotate(0)}}
@keyframes plbFlash{0%,45%{opacity:0}58%{opacity:1}70%{opacity:.25}82%,100%{opacity:.9}}
@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}}
@keyframes plbRing{to{stroke-dashoffset:-240}}
@keyframes plbProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes plbFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes plbRingPhone{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(-14deg)}65%{transform:rotate(12deg)}70%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}80%{transform:rotate(0)}}
@keyframes plbWave{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
@keyframes plbBorder{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes plbShine{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes plbPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@keyframes plbMarquee{to{transform:translateX(-50%)}}
@keyframes plbSpin{to{transform:rotate(360deg)}}
@keyframes plbComet{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}
@keyframes plbPulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes plbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes plbSwoosh{0%{stroke-dashoffset:240}30%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
@keyframes plbCheck{0%{stroke-dashoffset:12}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}
@keyframes plbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes plbTwinkle{0%,100%{opacity:0.15;transform:scale(0.6)}50%{opacity:0.9;transform:scale(1)}}
@keyframes plbDrive{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes plbDash{to{stroke-dashoffset:-18}}

.plb-lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.plb-lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(76,29,149,.14)!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-play-state:paused !important}
}

/* the eyebrow's keyword links to its page without looking like a link */
.plb-h-eyebrow a{color:inherit;text-decoration:none}
.plb-h-eyebrow a:hover{color:var(--band-text)}

/* ==========================================================================
   ABOUT US - between the trust tiles and the fleet (build-home.mjs 4f2)
   ========================================================================== */
/* On the phone the About block is centred - the client asked for the copy to
   sit on the column's axis rather than ragging left under the headline. */
.plb-about{padding:56px 16px 8px;text-align:left}   /* client: left, not centred */
.plb-about-facts li{text-align:left}
.plb-about-in{display:flex;flex-direction:column;gap:18px}
.plb-about-eyebrow{margin:0 0 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-text)}
.plb-about-title{margin:0;font-size:clamp(32px,8.6vw,40px);line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.plb-about-title em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet-text)}
.plb-about-body > p{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.plb-about-facts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.plb-about-facts li{display:flex;align-items:center;gap:14px;padding:14px 16px}
.plb-about-facts li + li{border-top:1px solid var(--line-soft)}
.plb-about-facts svg{width:22px;height:22px;flex:0 0 auto;color:var(--violet-text)}
.plb-about-facts span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.plb-about-facts b{font-size:15px;font-weight:600;color:var(--ink)}
.plb-about-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 20px;margin-top:20px}
.plb-about-more{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:var(--violet);color:#FFFFFF;font-size:15px;font-weight:600;text-decoration:none}
.plb-about-more:hover{background:var(--violet-btn-bot);color:#FFFFFF}
.plb-about-more span{transition:transform .2s ease}
.plb-about-more:hover span{transform:translateX(3px)}
.plb-about-call{font-size:15px;font-weight:600;color:var(--violet-text);text-decoration:none}
.plb-about-call:hover{text-decoration:underline;text-underline-offset:3px}

/* desktop: heading on the left, the story and the facts on the right */
.plb-about--d{padding:112px 80px 0;text-align:left}
.plb-about--d .plb-about-acts{justify-content:flex-start}
.plb-about--d .plb-about-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.plb-about--d .plb-about-eyebrow{font-size:12px}
.plb-about--d .plb-about-title{font-size:64px;line-height:.98}
.plb-about--d .plb-about-body > p{font-size:17px}
.plb-about--d .plb-about-facts{flex-direction:row}
.plb-about--d .plb-about-facts li{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:10px;padding:20px}
.plb-about--d .plb-about-facts li + li{border-top:0;border-left:1px solid var(--line-soft)}
/* the About block on a phone: it was 748px, the tallest thing below the
   hero, because every size in it was drawn for the desktop column */
@media (max-width:1023.98px){
  .plb-about{padding:36px 16px 8px}
  .plb-about-in{gap:14px}
  .plb-about-eyebrow{margin:0 0 9px;font-size:10px}
  .plb-about-title{font-size:clamp(25px,6.8vw,30px);line-height:1.06}
  .plb-about-body > p{margin:0 0 10px;font-size:14.5px;line-height:1.55}
  .plb-about-facts{margin:14px 0 0;border-radius:16px}
  .plb-about-facts li{padding:11px 13px;gap:11px}
  .plb-about-facts svg{width:19px;height:19px}
  .plb-about-facts b{font-size:14px}
  .plb-about-facts span{font-size:12.5px}
  .plb-about-acts{gap:9px 16px;margin-top:15px}
  .plb-about-more{height:42px;padding:0 18px;font-size:14px}
  .plb-about-call{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.plb-about-more span{transition:none}}

/* ==========================================================================
   TRENDING NOW - ticker + carousel (build-home.mjs 4f3, home.js trendInit)
   A dark band between the trust tiles and About: the one dramatic moment
   below the hero. Neighbouring slides peek in, dimmed, at both edges.
   ========================================================================== */
.plb-trend{position:relative;margin-top:56px;padding:18px 0 22px;background:#120A24;color:#FFFFFF;overflow:hidden}
#app > div > section.plb-trend{padding-left:0 !important;padding-right:0 !important}

.plb-trend-ticker{display:flex;align-items:center;gap:14px;padding:0 16px}
.plb-trend-label{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF}
.plb-trend-label svg{width:14px;height:14px;color:#5EE6A8}
.plb-trend-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#5EE6A8;box-shadow:0 0 0 4px rgba(94,230,168,.18)}
.plb-trend-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:plbPing 1.8s ease-out infinite}
.plb-trend-marquee{flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.plb-trend-run{display:inline-flex;gap:24px;white-space:nowrap;animation:plbTrendRun 46s linear infinite}
.plb-trend-item{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#CFC3EA;text-decoration:none}
.plb-trend-item::before{content:'';width:5px;height:5px;border-radius:50%;background:#5EE6A8}
.plb-trend-item b{color:#FFFFFF;font-weight:600}
.plb-trend-item:hover{color:#FFFFFF}
@keyframes plbTrendRun{to{transform:translateX(-50%)}}

/* phone first: a short card (client: "reduce height of the carousels on
   mobile") with small Sora type sitting low (client: "bring the text down"),
   so the clip has most of the frame to itself */
.plb-trend-stage{position:relative;height:clamp(164px,45vw,196px);margin-top:14px;touch-action:pan-y}
.plb-trend-track{display:flex;gap:8px;height:100%;will-change:transform;
  transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.plb-trend-card{position:relative;flex:0 0 auto;width:min(80vw,620px);height:100%;margin:0;border-radius:22px;overflow:hidden;
  background:#1B0D35;transform:scale(.9);opacity:.42;filter:brightness(.6) saturate(.8);
  transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .85s ease,filter .85s ease}
.plb-trend-card.is-on{transform:none;opacity:1;filter:none;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.plb-trend-card img,.plb-trend-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 7s linear,opacity .5s ease}
.plb-trend-card video{opacity:0;pointer-events:none}
.plb-trend-card video.is-live{opacity:1}
.plb-trend-card.is-on img,.plb-trend-card.is-on video{transform:scale(1.06)}
.plb-trend-card.no-t,.plb-trend-card.no-t img,.plb-trend-card.no-t video{transition:none}
/* a shade at the foot keeps the words legible on any frame */
.plb-trend-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,6,17,0) 45%,rgba(10,6,17,.85) 100%)}
.plb-trend-card{cursor:pointer}
.plb-trend-hit{position:absolute;inset:0;z-index:1}
/* clicks on the words fall through to the cover link, except the title's own */
.plb-trend-copy{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;pointer-events:none;
  font-family:'Sora',var(--font-sans)}
.plb-trend-copy a{pointer-events:auto;color:inherit;text-decoration:none}
.plb-trend-copy a:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px;border-radius:4px}
.plb-trend-tag{display:flex;align-items:center;gap:6px;margin:0;font-size:8.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#E9DDFF}
.plb-trend-tag span{width:5px;height:5px;border-radius:50%;background:#5EE6A8}
.plb-trend-copy h3{margin:4px 0 2px;font-size:14px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:#FFFFFF;text-wrap:balance}
.plb-trend-copy p:last-child{margin:0;font-size:11px;line-height:1.4;color:#D4C8F5;text-wrap:pretty}

.plb-trend-nav{display:none}
.plb-trend-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.plb-trend-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(233,221,255,.3);cursor:pointer;
  transition:width .3s ease,background .3s ease}
.plb-trend-dots button[aria-current="true"]{width:24px;background:#C4B5FD}

@media (min-width:1024px){
  .plb-trend{margin-top:96px;padding:24px 0 30px}
  .plb-trend-ticker{padding:0 80px}
  .plb-trend-label{font-size:11px}
  .plb-trend-item{font-size:13px}
  .plb-trend-stage{height:340px;margin-top:20px}
  .plb-trend-track{gap:18px}
  .plb-trend-card{width:760px;border-radius:26px}
  .plb-trend-card::after{background:linear-gradient(180deg,rgba(10,6,17,0) 45%,rgba(10,6,17,.86) 100%)}
  .plb-trend-copy{left:30px;right:30px;bottom:28px}
  .plb-trend-tag{gap:8px;font-size:10px;letter-spacing:.2em}
  .plb-trend-tag span{width:6px;height:6px}
  .plb-trend-copy h3{margin:6px 0 3px;font-size:22px;letter-spacing:-.02em}
  .plb-trend-copy p:last-child{font-size:13.5px}
  .plb-trend-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;
    border:0;border-radius:50%;background:rgba(18,10,36,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(233,221,255,.2);color:#FFFFFF;cursor:pointer}
  .plb-trend-nav svg{width:22px;height:22px}
  .plb-trend-nav:hover{background:var(--violet)}
  .plb-trend-nav--prev{left:calc(50% - 380px - 26px)}
  .plb-trend-nav--next{right:calc(50% - 380px - 26px)}
}
@media (prefers-reduced-motion:reduce){
  .plb-trend-run{animation:none}
  .plb-trend-marquee{overflow-x:auto;scrollbar-width:none}
  .plb-trend-dot::after{animation:none}
  .plb-trend-track,.plb-trend-card,.plb-trend-card img,.plb-trend-card video{transition:none}
  .plb-trend-card.is-on img,.plb-trend-card.is-on video{transform:none}
}

/* ==========================================================================
   HERO: rotating headline + proof row (client request)
   ========================================================================== */
.plb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.plb-rot{perspective:600px}
.plb-rot-face{display:block}
.plb-rot-line{display:block;white-space:nowrap}
.plb-h--d .plb-rot-line{white-space:normal}
.plb-w{display:inline-block;transform-origin:50% 100%;will-change:transform,opacity,filter}
.plb-rot.is-out .plb-w{animation:plbRotOut .46s cubic-bezier(.55,0,.8,.35) both;animation-delay:calc(var(--i) * 30ms)}
.plb-rot.is-in .plb-w{animation:plbRotIn .78s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes plbRotOut{to{opacity:0;transform:translateY(-.42em) rotateX(55deg);filter:blur(8px)}}
@keyframes plbRotIn{from{opacity:0;transform:translateY(.5em) rotateX(-55deg);filter:blur(10px)}}

.plb-proof{list-style:none;margin:2px 0 0;padding:0;display:flex;align-items:center;flex-wrap:nowrap;row-gap:8px;
  font-size:12.5px;color:var(--band-soft)}
.plb-proof li{display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-left:1px solid rgba(233,221,255,.2);white-space:nowrap}
.plb-proof li:first-child{padding-left:0;border-left:0}
.plb-proof a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none}
.plb-proof a:hover .plb-proof-n{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.plb-proof-g{width:15px;height:15px;margin-right:1px}
.plb-proof b{font-size:14px;font-weight:600;color:#FFFFFF}
.plb-proof-star{color:#F2B01E;font-size:13px;line-height:1}
.plb-proof-ico{width:15px;height:15px;color:#5EE6A8}
/* the guest cluster: four discs overlapping, ringed so they read apart */
.plb-faces-li{padding-right:10px}
.plb-faces{display:inline-flex;align-items:center}
.plb-face{width:28px;height:28px;flex:0 0 auto;margin-left:-9px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;color:#C4B5FD;
  background:linear-gradient(155deg,#4C2A8A,#13072A);
  box-shadow:0 0 0 1.5px rgba(248,245,253,.22),0 3px 8px rgba(0,0,0,.5)}
.plb-face:first-child{margin-left:0}
.plb-face svg{width:17px;height:17px}
.plb-face img{width:100%;height:100%;object-fit:cover;display:block}
.plb-face--2{background:linear-gradient(155deg,#7C3AED,#3B1580);color:#E9DDFF}
.plb-face--3{background:linear-gradient(155deg,#3B1580,#0E0620)}
.plb-face--4{background:linear-gradient(155deg,#5B21B6,#13072A);color:#E9DDFF}
.plb-h--d .plb-face{width:32px;height:32px;margin-left:-10px}
.plb-h--d .plb-face svg{width:19px;height:19px}
/* The phone keeps the whole proof row on one line, so everything in it is
   a size down: the discs, the Google mark, the shield and the type. */
.plb-h--m .plb-proof{font-size:11px;gap:0}
.plb-h--m .plb-proof li{padding:0 7px}
.plb-h--m .plb-proof li:first-child{padding-left:0}
.plb-h--m .plb-proof li:last-child{padding-right:0}
.plb-h--m .plb-faces-li{padding-right:7px}
.plb-h--m .plb-face{width:20px;height:20px;margin-left:-7px;box-shadow:0 0 0 1.25px rgba(248,245,253,.22),0 2px 5px rgba(0,0,0,.5)}
.plb-h--m .plb-face svg{width:12px;height:12px}
.plb-h--m .plb-proof-g{width:13px;height:13px}
.plb-h--m .plb-proof b{font-size:12.5px}
.plb-h--m .plb-proof-star{font-size:11px}
.plb-h--m .plb-proof-ico{width:13px;height:13px}
.plb-h--d .plb-proof{font-size:14px}
.plb-h--d .plb-proof li{padding:0 14px}
.plb-h--d .plb-proof li:first-child{padding-left:0}
.plb-h--d .plb-proof b{font-size:15.5px}
.plb-h--d .plb-proof-g,.plb-h--d .plb-proof-ico{width:17px;height:17px}
@media (max-width:359.98px){.plb-h--m .plb-proof{font-size:10px}.plb-h--m .plb-proof li{padding:0 5px}
  .plb-h--m .plb-face{width:18px;height:18px;margin-left:-6px}.plb-h--m .plb-face svg{width:11px;height:11px}}
@media (prefers-reduced-motion:reduce){.plb-rot .plb-w{animation:none !important}}

/* ==========================================================================
   DARK THEME - follows the visitor's device setting (client request)
   Light stays the default. Every light surface reads a token (home.css and
   build-home.mjs step 4h); this block flips them to near-black. The studio
   panels, the hero band, the trending band and the footer were dark already
   and are untouched. Brand violet stays for filled buttons; violet used as
   text or an icon colour lightens so it keeps its contrast on black.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --page-bg:#0A090D; --hero-top:#120F18;
    --ink:#F2EFF7; --ink-2:#CBC4D6; --muted:#A39BB2; --label:#958DA6;
    --line:#2A2633; --line-soft:#211E29; --field-bg:#1A1721; --tint:#1D1828;
    --surface:#131118; --seg-bg:#1A1721; --grab:#3A3445; --off:#4A4458;
    --focus-row:#16131D; --bad-bg:#2A1517; --ride-hover:#5B4A8A; --ride-on:#17131F;
    --cut-bg:#1C1824; --glass-bar:rgba(19,17,24,0.82);
    --cap-bg:rgba(8,5,14,0.82); --cap-ink:#F1ECF9;
    --violet-text:#A78BFA; --violet-text-hover:#C4B5FD; --violet-text-deep:#C4B5FD;
    --track:#1A1721; --placeholder:#857D96; --bad:#F2867E;
  }
  input,select{color-scheme:dark}
}

/* ==========================================================================
   BOOKING ROAD - a car idles at the start of the booking, exhaust puffing,
   and drives to the next marker as each step is done (client request).
   Step from data-plb-at (home-booking.js) and data-done (home.js state).
   ========================================================================== */
.plb-book{--p:0}
.plb-book[data-plb-at="trip"]{--p:.5}
.plb-book[data-plb-at="lead"],.plb-book[data-done="true"]{--p:1}
.plb-road{position:relative;height:20px;margin:0 2px 10px;--car:22px}   /* car at half size (client) */
.plb-road-track{position:absolute;left:calc(var(--car) / 2);right:calc(var(--car) / 2);bottom:5px;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 12px)}
/* the stretch already driven */
.plb-road-track::after{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);border-radius:2px;
  background:var(--violet);transition:width .95s cubic-bezier(.5,0,.2,1)}
.plb-road-pin{position:absolute;bottom:3px;left:calc(var(--car) / 2 + var(--p) * (100% - var(--car)));width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .4s ease .5s,background .4s ease .5s}
.plb-road-pin:nth-of-type(2),
.plb-book[data-plb-at="trip"] .plb-road-pin:nth-of-type(3),
.plb-book[data-plb-at="lead"] .plb-road-pin,
.plb-book[data-done="true"] .plb-road-pin{box-shadow:inset 0 0 0 2px var(--violet)}
.plb-book[data-done="true"] .plb-road-pin--end{background:var(--green);box-shadow:0 0 0 4px rgba(18,163,107,.22)}
.plb-road-car{position:absolute;bottom:4px;left:calc(var(--p) * (100% - var(--car)));z-index:1;width:var(--car);
  transition:left .95s cubic-bezier(.5,0,.2,1)}
.plb-road-svg{position:relative;display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;
  animation:plbIdle .42s ease-in-out infinite alternate}
.plb-car-body{fill:var(--violet)}
.plb-car-glass{fill:#E9DDFF}
.plb-car-head{fill:#FFD66B}
.plb-car-tail{fill:#FF5A6E}
.plb-car-wheel circle{fill:var(--ink)}
.plb-car-wheel .plb-car-hub{fill:var(--surface)}
/* the engine is running: a shiver and exhaust puffs from the tailpipe */
@keyframes plbIdle{to{transform:translateY(-.7px)}}
.plb-road-puff{position:absolute;left:-1px;bottom:1px;width:3px;height:3px;border-radius:50%;background:var(--label);opacity:0;
  animation:plbPuff 1.5s ease-out infinite}
.plb-road-puff:nth-child(2){animation-delay:.5s}
.plb-road-puff:nth-child(3){animation-delay:1s}
@keyframes plbPuff{0%{opacity:.6;transform:translate(0,0) scale(.35)}100%{opacity:0;transform:translate(-8px,-4px) scale(1.8)}}
/* driving: puffs stop, the car leans into it */
.plb-book.is-driving .plb-road-puff{animation:none;opacity:0}
.plb-book.is-driving .plb-road-svg{animation:plbDriving .2s ease-in-out infinite alternate}
@keyframes plbDriving{from{transform:rotate(-1.6deg) translateY(-.6px)}to{transform:rotate(-.4deg) translateY(0)}}
/* booked: parked at the flag, engine off */
.plb-book[data-done="true"] .plb-road-puff{animation:none;opacity:0}
.plb-book[data-done="true"] .plb-road-svg{animation:none}
/* sent here by a "book" link: the car gives a hop and the address box glows */
.plb-book.is-called .plb-road-svg{animation:plbHonk .5s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes plbHonk{40%{transform:translateY(-3px) rotate(-3deg)}}
.plb-book.is-called .plb-route{animation:plbCalled 1.5s ease-out .2s 1}
@keyframes plbCalled{from{box-shadow:0 0 0 0 rgba(124,58,237,.5)}to{box-shadow:0 0 0 14px rgba(124,58,237,0)}}
.plb-h--m .plb-h-grab{margin-bottom:6px}
@media (prefers-reduced-motion:reduce){
  .plb-road-svg,.plb-road-puff{animation:none !important}
  .plb-road-car,.plb-road-track::after{transition:none}
}

/* ==========================================================================
   HERO TRAFFIC (desktop) - the fleet drives along the foot of the band
   (client's doodle). Markup: build-home.mjs TRAFFIC.
   ========================================================================== */
.plb-lane{position:absolute;left:0;right:0;bottom:0;height:58px;z-index:1;overflow:hidden;pointer-events:none}
.plb-lane::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(233,221,255,.3) 0 14px,transparent 14px 30px)}
.plb-lane-run{position:absolute;inset:0;animation:plbLaneR var(--dur) linear var(--delay) infinite}
.plb-lane-car{position:absolute;right:100%;bottom:7px;display:block}
.plb-lane-run--far{animation-name:plbLaneL;opacity:.45}
.plb-lane-run--far .plb-lane-car{right:auto;left:100%;bottom:19px;transform:scaleX(-1) scale(.66);transform-origin:50% 100%}
@keyframes plbLaneR{from{transform:translateX(0)}to{transform:translateX(calc(100% + 150px))}}
@keyframes plbLaneL{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 150px))}}
.plb-lane-svg{display:block;max-width:none;overflow:visible;animation:plbIdle .38s ease-in-out infinite alternate}
.plb-lane-body{fill:#0B0518;stroke:rgba(233,221,255,.38);stroke-width:.5}
.plb-lane-glass{fill:#C4B5FD;opacity:.42}
.plb-lane-head{fill:#FFE7A3}
.plb-lane-tail{fill:#FF4D6A}
.plb-lane-wheel{fill:#05020C;stroke:rgba(233,221,255,.28);stroke-width:.6}
.plb-lane-beam{fill:rgba(255,231,163,.16)}
@media (prefers-reduced-motion:reduce){
  .plb-lane-run{animation:none;transform:translateX(var(--rest))}
  .plb-lane-run--far{transform:translateX(calc(var(--rest) - 100%))}
  .plb-lane-svg{animation:none}
}

/* ==========================================================================
   FLEET SHOWCASE - every vehicle links to its own page; tighter on phones
   (build-home.mjs 4d3)
   ========================================================================== */
.plb-veh-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plb-veh-more{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 12px;border-radius:999px;flex:0 0 auto;
  font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0;color:#FFFFFF;text-decoration:none;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.plb-veh-more:hover{background:rgba(255,255,255,.2);color:#FFFFFF}
.plb-veh-name{color:inherit;text-decoration:none}
.plb-veh-name:hover{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ==========================================================================
   HERO NIGHT STAGE - glow, one spotlight, rising dust and the Phoenix
   horizon (Camelback, saguaros, downtown lights). build-home.mjs plate().
   ========================================================================== */
/* ---------- the spotlight ----------
   Real light has a bright centre, a soft edge, a source you can see and dust
   it catches on the way down. One clipped wedge has none of that, so this is
   built in five: penumbra (the span), core (::before), lamp (::after),
   striations (the <i>) and the pool it throws (the <i>'s ::after). */
.plb-sky-beam{
  position:absolute;top:-40px;left:78%;width:min(640px,90vw);height:118%;
  transform:translate3d(calc(-50% + var(--plb-px,0) * 1.4px),0,0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  /* the soft outer cone - wider than the core and spilling past the frame */
  clip-path:polygon(41% 0,59% 0,109% 100%,-9% 100%);
  background:linear-gradient(180deg,
    rgba(214,198,255,.22),
    rgba(168,139,250,.085) 46%,
    rgba(124,58,237,.03) 74%,
    transparent 92%);
  filter:blur(26px);
  animation:plbBeamBreathe 9s ease-in-out infinite;
}
/* the hot core: narrow, barely blurred, and swaying from the lamp */
.plb-sky-beam::before{
  content:'';position:absolute;left:0;top:0;right:0;bottom:0;
  clip-path:polygon(47.4% 0,52.6% 0,73% 100%,27% 100%);
  background:linear-gradient(180deg,
    rgba(255,248,232,.5),
    rgba(233,221,255,.17) 38%,
    rgba(196,181,253,.055) 70%,
    transparent 90%);
  filter:blur(7px);
  transform-origin:50% 0;
  animation:plbBeamSway 11s ease-in-out infinite;
}
/* the lamp itself, blooming at the apex */
.plb-sky-beam::after{
  content:'';position:absolute;left:50%;top:-18px;width:240px;height:160px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 48% 46% at 50% 32%,
    rgba(255,246,228,.6), rgba(233,221,255,.2) 36%, rgba(167,139,250,.07) 58%, transparent 74%);
  filter:blur(13px);
  animation:plbBeamBreathe 9s ease-in-out infinite reverse;
}
/* what the light catches on the way down */
.plb-sky-ray{
  position:absolute;left:0;top:0;right:0;bottom:0;
  clip-path:polygon(44% 0,56% 0,97% 100%,3% 100%);
  background:repeating-linear-gradient(96deg,
    transparent 0 15px, rgba(243,236,255,.1) 15px 18px, transparent 18px 36px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.4) 52%,transparent 86%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.4) 52%,transparent 86%);
  filter:blur(2px);
  animation:plbRayDrift 17s linear infinite;
}
/* the pool it throws where it lands */
.plb-sky-ray::after{
  content:'';position:absolute;left:50%;bottom:13%;width:78%;height:140px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 100%,
    rgba(255,231,163,.2), rgba(196,181,253,.08) 44%, transparent 72%);
  filter:blur(16px);
}
@keyframes plbBeamBreathe{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes plbBeamSway{0%,100%{transform:rotate(-.75deg)}50%{transform:rotate(.75deg)}}
@keyframes plbRayDrift{from{background-position:0 0}to{background-position:72px 0}}

.plb-h--m .plb-sky-beam{left:82%;width:300px;opacity:.78;filter:blur(18px)}
.plb-h--m .plb-sky-beam::after{width:150px;height:110px;top:-12px}
.plb-h--m .plb-sky-ray::after{height:90px;bottom:16%}
.plb-sky-dust{position:absolute;border-radius:50%;background:#E9DDFF;box-shadow:0 0 8px #C4B5FD;opacity:0;
  animation:plbRise 8s ease-in infinite}
.plb-sky-land{position:absolute;left:0;bottom:0;width:100%;height:220px;max-width:none;
  transform:translate3d(calc(var(--plb-px,0) * .5px),0,0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.plb-h--m .plb-sky-land{height:96px;bottom:0}
.plb-sky-far{fill:#2A1259;opacity:.85}
.plb-sky-camel{fill:#1D0B42}
.plb-sky-towers{fill:#170936}
.plb-sky-lights{fill:#FFE7A3;opacity:.85}
.plb-sky-blink{animation:plbTwinkle 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.plb-sky-ground{fill:#0E0620}
.plb-sky-cactus{fill:none;stroke:#0E0620;stroke-linecap:round;stroke-linejoin:round}
/* the desktop traffic drives on the ground strip */
.plb-h--d .plb-lane{z-index:2}
@media (prefers-reduced-motion:reduce){
  .plb-sky-beam,.plb-sky-beam::before,.plb-sky-beam::after,.plb-sky-ray,.plb-sky-blink{animation:none}
  .plb-sky-dust{display:none}
}

/* ==========================================================================
   BOOKING LOCK (phone, steps 2 and 3) - client: "only the part being
   scrolled should scroll; the car and the Next / Back buttons stay; the user
   cannot go past the end of the form". The card fills the screen under the
   sheet's grab handle: road + step bar pinned on top, the button pinned at
   the foot, the fields scroll between them, and the page itself is held
   still until the booking goes back to step 1 or is sent.
   ========================================================================== */
.plb-step-body{display:contents}
@media (max-width:1023.98px){
  html:has(.plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]):not([data-done="true"])){overflow:hidden}
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]):not([data-done="true"]){
    display:flex;flex-direction:column;height:calc(100dvh - 20px);
  }
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) .plb-road{flex:0 0 auto}
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) :is(.plb-book-trip,.plb-details):not([hidden]){
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;
  }
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) .plb-details-top{flex:0 0 auto}
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) .plb-step-body{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:2px 16px 14px;
    /* a soft edge where the fields pass under the bars */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent);
            mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent);
  }
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) .plb-cta{flex:0 0 auto;position:relative;margin-top:0}
  /* the fields keep their size and the body scrolls, rather than the rack
     and the estimate being squeezed to fit */
  .plb-book--m:is([data-plb-at="trip"],[data-plb-at="lead"]) .plb-step-body > *{flex:0 0 auto}
}

/* ---------- the footer's brand block ---------- */
.plb-foot-mark{flex:0 0 auto;width:40px;height:40px;object-fit:contain;display:block}
.plb-soc{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border-radius:999px;border:1px solid rgba(255,255,255,.18);
  color:#E9DDFF;text-decoration:none;font-size:13px;line-height:1;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.plb-soc:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.36);color:#FFFFFF}
.plb-soc svg{width:16px;height:16px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.plb-soc{transition:none}}

/* phone fleet showcase, compact (client: "the fleet block is too big") -
   the spec tiles carry what the description said, and the scroller tiles are
   name-only chips */
.plb-fleet-desc{display:none}
.plb-fleet-tiles .plb-tile-photo{display:none}
.plb-fleet-stage .plb-veh-photo{width:212px}
.plb-fleet-stage button[aria-label$="vehicle"]{width:34px !important;height:34px !important}

/* Cloudflare Turnstile slot (step 3): takes no room until Cloudflare asks
   for a click (assets/turnstile.js, "interaction-only") */
.plb-ts:empty{display:none}

/* the booking lists and panels still scroll, without a visible bar
   (client: the drop-off list's scroll bar should not show) */
.plb-ac,.plb-clock-list,.plb-cal,.plb-step-body,.plb-h .plb-panel{scrollbar-width:none;-ms-overflow-style:none}
.plb-ac::-webkit-scrollbar,.plb-clock-list::-webkit-scrollbar,.plb-cal::-webkit-scrollbar,
.plb-step-body::-webkit-scrollbar,.plb-h .plb-panel::-webkit-scrollbar{display:none}

/* ==========================================================================
   WEBSITE OFFER - "$50 off when you book online" on the Book Now button
   (client). A gold sticker on the button's top edge that breathes and
   catches the light, and a slow pass of light across the button. A standing
   offer, no countdown (build-home.mjs DEAL_TAG).
   ========================================================================== */
.plb-cta-btnwrap{position:relative}
.plb-deal{
  position:absolute;top:-13px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 11px 0 4px;
  border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#FFE29A,#F5B83D);color:#2B1700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px -6px rgba(245,184,61,.9),0 0 0 1px rgba(180,110,0,.25);
  font-size:12px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;pointer-events:none;
  transform-origin:80% 100%;animation:plbDealBreathe 1.8s ease-in-out infinite;
}
.plb-deal[hidden]{display:none}
.plb-deal-amt{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:999px;
  background:#2B1700;color:#FFE29A;font-weight:700;letter-spacing:.01em}
/* the glint that runs across the sticker */
.plb-deal::after{content:'';position:absolute;top:-4px;bottom:-4px;left:-40%;width:34%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-20deg);
  animation:plbDealGlint 2.4s ease-in-out infinite}
@keyframes plbDealBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -4px rgba(245,184,61,1),0 0 0 1px rgba(180,110,0,.25)}}
@keyframes plbDealGlint{0%,55%{left:-40%;opacity:0}60%{opacity:1}85%,100%{left:120%;opacity:0}}
/* By the hour: the estimated total (home.js estimateLine / mapV) */
.plb-ride-est{padding:0 3px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plb-ride-est:empty{display:none}
/* the estimate panel reads as a price: label, the big number, why it is lower, small print */
.plb-est{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:2px 0 0;padding:13px 15px 12px;
  border-radius:16px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink-2)}
.plb-est-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.plb-est-total{font-size:32px;line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:2px 0 4px}
.plb-est-math{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:12.5px;color:var(--muted)}
.plb-est-math s{opacity:.7;text-decoration-thickness:1.5px}
.plb-est-off{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:linear-gradient(180deg,#FFE29A,#F5B83D);color:#2B1700;font-size:11.5px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(180,110,0,.25)}
.plb-est-fine{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);align-self:stretch;
  font-size:11px;line-height:1.45;color:var(--muted)}
.plb-est--ask{display:block;font-size:12.5px;line-height:1.5}
/* a slow pass of light keeps crossing the button */
.plb-cta-btnwrap.has-deal .plb-cta-btn::after{animation:plbCtaShine 1.1s ease-out 0s infinite;animation-duration:3.2s}
.plb-deal-locked{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:600;color:#B7892E}
.plb-deal-locked[hidden]{display:none}
@media (prefers-color-scheme:dark){.plb-deal-locked{color:#F5C76B}}
@media (prefers-reduced-motion:reduce){
  .plb-deal,.plb-deal::after,.plb-cta-btnwrap.has-deal .plb-cta-btn::after{animation:none}
  .plb-deal::after{display:none}
}

/* ---------- the Arizona tourism bureaus, in the footer ---------- */
.plb-foot-local{padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.plb-foot-local h4{margin:0 0 13px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  font-weight:500;color:var(--studio-eyebrow)}
.plb-foot-local ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plb-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}
.plb-foot-local a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.36);color:#FFFFFF}
.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;color:#FFFFFF}
.gl-mark img{width:100%;height:100%;object-fit:contain;display:block;background:#FFFFFF}
@media (max-width:560px){
  .plb-foot-local{padding-top:20px}
  .plb-foot-local a{height:32px;font-size:11.5px;padding:0 10px 0 5px;gap:6px}
  .gl-mark{width:20px;height:20px;font-size:8.5px}
}

/* ---------- the footer wordmark ----------
   Filled from the top where the light reaches it and fading to its own
   outline at the base, with a sheen that crosses it every nine seconds. */
.plb-foot-word{
  position:relative;
  margin-top:6px;
  font-size:clamp(34px,8.6vw,132px);
  line-height:.78;
  font-weight:700;
  letter-spacing:-.06em;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(180deg,
    rgba(248,245,253,.52) 0%,
    rgba(196,181,253,.34) 34%,
    rgba(124,58,237,.14) 66%,
    rgba(124,58,237,0) 92%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-stroke:1px rgba(233,221,255,.2);
  filter:drop-shadow(0 0 24px rgba(124,58,237,.3));
  user-select:none;
}
.plb-foot-word::after{
  content:attr(data-word);
  position:absolute;left:0;top:0;
  color:transparent;
  -webkit-text-stroke:0;
  background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.55) 50%,transparent 56%);
  background-size:280% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  animation:plbWordSheen 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes plbWordSheen{0%{background-position:170% 0}60%,100%{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){ .plb-foot-word::after{animation:none;opacity:0} }

/* ---------- the trust ribbon (desktop) ----------
   A lit band rather than a row of boxes: the dividers are small diamonds, the
   icon wells are gradient-filled with an inset hairline, and a thread of the
   hero's sodium runs along the top edge. It halts under the pointer, because
   a strip that will not stop moving while you read it is not premium. */
.plb-tm{
  position:relative;
  padding:24px 0;
  overflow:hidden;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(124,58,237,.055),rgba(124,58,237,0) 62%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.plb-tm::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.55) 26%,#FFD79A 50%,rgba(124,58,237,.55) 74%,transparent);
  opacity:.55;
}
.plb-tm-track{display:flex;width:max-content;animation:plbMarquee 46s linear infinite}
.plb-tm:hover .plb-tm-track,
.plb-tm:focus-within .plb-tm-track{animation-play-state:paused}

.plb-tm-item{
  position:relative;
  display:flex;align-items:center;gap:13px;
  padding:0 38px;white-space:nowrap;
}
.plb-tm-item::after{
  content:'';position:absolute;right:-3px;top:50%;
  width:5px;height:5px;border-radius:1px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--violet);opacity:.22;
}
.plb-tm-ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:15px;
  color:var(--violet-text);
  background:linear-gradient(158deg,rgba(124,58,237,.17),rgba(124,58,237,.045));
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.2),0 7px 16px -10px rgba(124,58,237,.65);
}
.plb-tm-ico svg{width:22px;height:22px}
.plb-tm-t{display:flex;flex-direction:column;gap:3px}
.plb-tm-t b{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.plb-tm-t span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .plb-tm-track{animation:none;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 0}
  .plb-tm{-webkit-mask-image:none;mask-image:none}
}

/* ---------- reviewer portraits (homepage review cards) ---------- */
.plb-rv-face{
  display:block;flex:0 0 auto;
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.plb-rv-face img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   Experience Arizona reel (homepage, 2026-10-08)
   Dark section with a sideways-scrolling photo carousel — resort and golf
   guide cards. Same animation pattern as the footer guide-reel.
   ========================================================================== */
.plb-exp{
  background:#0A0611;
  border-top:1px solid rgba(255,255,255,.07);
  padding:60px 0 0;
  overflow:hidden;
}
.plb-exp-in{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.plb-exp-hd{
  margin-bottom:32px;
}
.plb-exp-eye{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:#C4B5FD;
  margin-bottom:10px;
}
.plb-exp-eye::before{
  content:'';display:block;width:20px;height:1px;background:#7C3AED;
}
.plb-exp-title{
  font-family:'Instrument Serif','Georgia',serif;
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:400;line-height:1.06;letter-spacing:-.025em;
  color:#F8F5FD;margin:0 0 10px;
}
/* The state in its flag, beside the heading (client's doodle, 2026-10-10;
   build-home.mjs EXP_HTML). It rides with the last word so it never wraps to
   a line of its own, and its margins take back what it adds to the line, so
   the heading keeps its height. */
.plb-exp-nw{white-space:nowrap}
.plb-exp-az{
  position:relative;top:-.09em;        /* centred on the capitals, not the x-height */
  display:inline-block;
  width:auto;height:1.6em;
  margin:-.4em 0 -.4em .32em;
  vertical-align:middle;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.plb-exp-sub{
  font-size:15px;color:#B9A8E6;margin:0;line-height:1.5;
}

/* scrolling track */
.plb-exp-view{
  overflow:hidden;
  margin:0 -24px;
  padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.plb-exp-track{
  display:flex;width:max-content;
  list-style:none;margin:0;padding:16px 40px;
  gap:16px;
  animation:expRun 40s linear infinite;
}
.plb-exp-view:hover .plb-exp-track,
.plb-exp-view:focus-within .plb-exp-track{ animation-play-state:paused }
@keyframes expRun{ to{ transform:translateX(-50%) } }

/* cards */
.plb-exp-item{ flex:0 0 auto }
.plb-exp-card{
  display:flex;flex-direction:column;
  width:280px;
  color:#fff;text-decoration:none;
  border-radius:18px;overflow:hidden;
  background:#130826;
  border:1px solid rgba(255,255,255,.09);
  transition:border-color .3s ease, transform .3s ease;
}
.plb-exp-card:hover{ border-color:#7C3AED; transform:translateY(-4px) }
.plb-exp-card:focus-visible{ outline:2px solid #C4B5FD; outline-offset:3px }

/* image portion */
.plb-exp-shot{
  position:relative;display:block;
  aspect-ratio:16/10;overflow:hidden;
}
.plb-exp-shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.plb-exp-card:hover .plb-exp-shot img{ transform:scale(1.07) }
.plb-exp-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,6,17,.85));
  pointer-events:none;
}

/* text portion */
.plb-exp-body{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px 16px;
}
.plb-exp-label{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#C4B5FD;
}
.plb-exp-name{
  font-size:15px;font-weight:600;letter-spacing:-.015em;color:#F8F5FD;
  line-height:1.2;
}
.plb-exp-name span{ color:#C4B5FD;font-weight:400 }
.plb-exp-blurb{
  font-size:12.5px;line-height:1.45;color:#B9A8E6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* CTA row */
.plb-exp-cta-row{
  display:flex;flex-wrap:nowrap;gap:12px;
  padding:28px 0 48px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.plb-exp-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:#C4B5FD;text-decoration:none;
  border:1px solid rgba(196,181,253,.25);
  border-radius:999px;padding:8px 18px;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.plb-exp-cta:hover{
  border-color:#7C3AED;color:#fff;
  background:rgba(124,58,237,.15);
}

@media (max-width: 400px) {
  .plb-exp-cta-row {
    gap: 8px;
  }
  .plb-exp-cta {
    font-size: 11.5px;
    padding: 6px 12px;
    gap: 4px;
  }
}

/* reduced motion / mobile */
@media (max-width:640px){
  .plb-exp-card{ width:220px }
  .plb-exp-title{ font-size:1.9rem }
}
@media (prefers-reduced-motion:reduce){
  .plb-exp-track{ animation:none }
  .plb-exp-view{ overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:none;mask-image:none }
  .plb-exp-view::-webkit-scrollbar{ display:none }
  .plb-exp-item[aria-hidden="true"]{ display:none }
}

/* Experience sub-section headers */
.plb-exp-sub-hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;
  padding:40px 0 20px;
  border-top:1px solid rgba(255,255,255,.07);
}
@media (max-width: 600px) {
  .plb-exp-sub-hd {
    flex-direction: column;
  }
}
.plb-exp-sub-hd--golf{ margin-top:12px }
.plb-exp-sub-left{ flex:1;min-width:0 }
.plb-exp-sub-title{
  font-family:'Instrument Serif','Georgia',serif;
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:400;line-height:1.08;letter-spacing:-.02em;
  color:#F8F5FD;margin:0 0 10px;
}
.plb-exp-sub-desc{
  font-size:14.5px;line-height:1.65;color:#B9A8E6;
  max-width:600px;margin:0;
}
.plb-exp-see-all{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:500;color:#C4B5FD;
  text-decoration:none;
  border:1px solid rgba(196,181,253,.22);
  border-radius:999px;padding:7px 16px;
  transition:border-color .2s,color .2s,background .2s;
  flex-shrink:0;margin-top:4px;
}
.plb-exp-see-all:hover{
  border-color:#7C3AED;color:#fff;
  background:rgba(124,58,237,.14);
}

/* Events Section */
.plb-events {
  margin-top: 40px;
}
.plb-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.plb-evt-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}
.plb-evt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 181, 253, 0.3);
}
.plb-evt-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
}
.plb-evt-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.plb-evt-card:hover .plb-evt-shot img {
  transform: scale(1.05);
}
.plb-evt-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plb-evt-title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plb-evt-title span {
  font-size: 14px;
  opacity: 0;
  transform: translateX(-4px) translateY(4px);
  transition: all 0.3s;
}
.plb-evt-card:hover .plb-evt-title span {
  opacity: 1;
  transform: none;
}
.plb-evt-date {
  margin: 0;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  color: #C4B5FD;
  letter-spacing: 0.05em;
}
.plb-evt-desc {
  margin: 6px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #A78BFA;
}


/* Floating Book Button */
.plb-floating-book {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #7C3AED;
  color: white;
  padding: 14px 24px;
  border-radius: 50px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, opacity 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.plb-floating-book.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.plb-floating-book:hover {
  transform: translateY(-4px) scale(1.02);
  background-color: #8B5CF6;
  color: white;
}
/* For mobile screens */
@media (max-width: 768px) {
  .plb-floating-book {
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    font-size: 14px;
  }
}


/* Trust card 3D background icons */
.plb-trust-cell {
  position: relative;
  overflow: hidden;
}
.plb-trust-bg-icon {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.18;
  pointer-events: none;
  transform: rotate(-8deg) scale(1.1);
  filter: blur(0.5px);
  transition: opacity 0.3s, transform 0.3s;
}
.plb-trust-cell:hover .plb-trust-bg-icon {
  opacity: 0.28;
  transform: rotate(-4deg) scale(1.15);
}

/* About section - locally.png visual (desktop only) */
.plb-about-visual {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
  max-width: 100%;
}
.plb-about-visual img {
  width: 100%;
  max-width: 220px;
  height: auto;
  max-height: 220px;
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   VIEW FLEET (client, 2026-10-10) - the "View fleet" link under the route
   card opens the fleet in a sheet: tap a vehicle to take it into the
   booking, or "View details" for its own page. One compact row a vehicle, so
   all seven are on show at once - as taller cards the last vehicle was a
   scroll away and the client could not find it. Built by fleetBuild() in
   home.js as a <dialog> on <body>; the dialog fills the screen and the panel
   is the sheet, so a click on the dialog itself is a click outside. A bottom
   sheet on a phone, a centred panel from 720px, two columns from 960px.
   ========================================================================== */
.plb-fs{
  position:fixed;inset:0;z-index:10000;
  width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-sans);
  overflow:hidden;
}
.plb-fs:not([open]){display:none}
.plb-fs[open]{display:flex;align-items:flex-end;justify-content:center}
.plb-fs::backdrop{
  background:rgba(12,5,28,.58);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  animation:plbFsFade .3s ease backwards;
}
.plb-fs-panel{
  position:relative;
  display:flex;flex-direction:column;
  width:100%;max-width:560px;
  /* nearly the whole screen if it needs it: the fleet should not be cut short */
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--sheet);
  border-radius:28px 28px 0 0;
  box-shadow:0 0 0 1px var(--line-soft), 0 -30px 70px -24px rgba(12,5,28,.6);
  overflow:hidden;
  /* backwards only: once it has risen the panel must be free to follow a drag */
  animation:plbFsUp .44s cubic-bezier(.2,.9,.25,1) backwards;
}
@keyframes plbFsUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes plbFsFade{from{opacity:0}to{opacity:1}}
.plb-fs.is-closing .plb-fs-panel{
  animation:none;
  transform:translateY(100%);
  transition:transform .24s cubic-bezier(.4,0,1,1);
}
.plb-fs.is-closing::backdrop{opacity:0;transition:opacity .24s ease}

/* ---------- handle and heading (the part that drags) ---------- */
.plb-fs-top{flex:0 0 auto;padding:10px 20px 10px;touch-action:none;-webkit-user-select:none;user-select:none}
.plb-fs-grab{display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--grab)}
.plb-fs-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.plb-fs-eyebrow{margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.plb-fs-title{
  margin:5px 0 0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--ink);
}
.plb-fs-title em{font-style:italic;color:var(--violet-text)}
.plb-fs-x{
  flex:0 0 auto;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:var(--field-bg);
  color:var(--ink-2);
  cursor:pointer;
}
.plb-fs-x:hover{background:var(--seg-bg);color:var(--ink)}
.plb-fs-x svg{width:17px;height:17px}

/* ---------- the vehicles: one row each ---------- */
.plb-fs-list{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--grab) transparent;
  padding:6px 12px 14px;
}
.plb-fs-card{
  position:relative;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  column-gap:12px;
  align-items:center;
  padding:7px 12px 7px 7px;
  border-radius:18px;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-line);
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease, background .2s ease;
  animation:plbFsCard .46s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--i,0) * 40ms + 120ms);
}
@keyframes plbFsCard{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.plb-fs-card.is-on{
  background:var(--ride-on);
  box-shadow:inset 0 0 0 1.5px var(--violet), 0 14px 28px -22px rgba(124,58,237,.8);
}
@media (hover:hover){
  .plb-fs-card:not(.is-on):hover{box-shadow:inset 0 0 0 1px var(--ride-hover), 0 12px 26px -22px rgba(76,29,149,.5)}
  .plb-fs-card:hover .plb-fs-shot img{transform:scale(1.07)}
  .plb-fs-card:hover .plb-fs-shot img.is-loose{transform:scale(1.46)}
}
/* the cutout stands on a lit floor rather than in a box */
.plb-fs-shot{
  position:relative;
  height:62px;
  padding:6px 6px 5px;
  border-radius:12px;
  background:
    radial-gradient(ellipse 64% 48% at 50% 100%,rgba(124,58,237,.24),rgba(124,58,237,0) 72%),
    linear-gradient(180deg,var(--cut-bg),var(--tint));
  overflow:hidden;
}
.plb-fs-shot img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(19,7,42,.32));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.plb-fs-vip{
  position:absolute;top:4px;left:4px;
  padding:1px 6px 0;
  border-radius:999px;
  background:rgba(19,7,42,.88);
  color:var(--gold-glow);
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:14px;
  letter-spacing:.14em;
}
/* the Sprinter's picture is drawn with a wide margin; bring it up to the rest */
.plb-fs-shot img.is-loose{transform:scale(1.38)}
/* a vehicle with no cutout (one the admin added, or whose photo it changed):
   its photograph fills the stage like a frame */
.plb-fs-shot img.is-photo{position:absolute;inset:0;object-fit:cover;filter:none}
/* the vehicle in the booking: a tick at the end of its name */
.plb-fs-card.is-on .plb-fs-name{padding-right:28px}
.plb-fs-tick{
  position:absolute;top:8px;right:11px;
  width:20px;height:20px;
  display:none;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--violet);
  color:#FFFFFF;
}
.plb-fs-tick svg{width:12px;height:12px;stroke-width:2.8}
.plb-fs-card.is-on .plb-fs-tick{display:flex;animation:plbFsTick .3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes plbFsTick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

.plb-fs-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.plb-fs-info > *{margin:0}
.plb-fs-name{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
/* the name is the button; its hit area is the whole row */
.plb-fs-pick{
  display:block;max-width:100%;
  margin:0;padding:0;border:0;
  background:none;
  font:inherit;letter-spacing:inherit;color:inherit;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
}
.plb-fs-pick::after{content:'';position:absolute;inset:0;border-radius:inherit}
.plb-fs-pick:active{transform:none}
.plb-fs-pick:focus-visible{outline:none}
.plb-fs-pick:focus-visible::after{border-radius:18px;outline:2px solid var(--violet);outline-offset:2px}
.plb-fs-meta{display:flex;align-items:center;gap:4px;min-width:0;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap}
.plb-fs-meta svg{flex:0 0 auto;width:12px;height:12px}
.plb-fs-meta span + svg{margin-left:5px}
.plb-fs-klass{min-width:0;overflow:hidden;text-overflow:ellipsis}
.plb-fs-klass::before{content:'\00B7';margin:0 6px 0 3px}
/* under every vehicle: its rate, and its own page */
.plb-fs-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;font-size:12.5px;color:var(--muted)}
.plb-fs-price{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plb-fs-price b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--violet-text)}
.plb-fs-more{
  position:relative;z-index:1;          /* above the row's stretched button */
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  margin:-9px -8px -9px 0;
  padding:9px 8px;
  border-radius:999px;
  color:var(--violet-text);
  font-size:12.5px;font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.plb-fs-more:hover{color:var(--violet-text-hover)}
.plb-fs-more span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .18s ease}
.plb-fs-more:hover span{text-decoration-color:currentColor}
.plb-fs-more svg{width:13px;height:13px;transition:transform .2s ease}
.plb-fs-more:hover svg{transform:translateX(3px)}

/* ---------- from 720px: a centred panel ---------- */
@media (min-width:720px){
  .plb-fs[open]{align-items:center;padding:24px}
  .plb-fs-panel{
    max-height:calc(100vh - 48px);
    max-height:calc(100dvh - 48px);
    padding-bottom:0;
    border-radius:28px;
    box-shadow:0 0 0 1px var(--line-soft), 0 50px 110px -40px rgba(12,5,28,.8);
    animation-name:plbFsRise;
    animation-duration:.34s;
  }
  @keyframes plbFsRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  .plb-fs.is-closing .plb-fs-panel{
    opacity:0;
    transform:translateY(12px);
    transition:transform .22s ease, opacity .22s ease;
  }
  .plb-fs-top{padding:22px 24px 10px;touch-action:auto}
  .plb-fs-grab{display:none}
  .plb-fs-title{font-size:34px}
  .plb-fs-list{padding:8px 20px 22px}
}
/* ---------- from 960px: two vehicles to a row, with room to breathe ---------- */
@media (min-width:960px){
  .plb-fs-panel{max-width:900px}
  .plb-fs-top{padding:26px 28px 12px}
  .plb-fs-title{font-size:38px}
  .plb-fs-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 28px 28px}
  .plb-fs-card{grid-template-columns:136px minmax(0,1fr);column-gap:16px;padding:9px 16px 9px 9px;border-radius:20px}
  .plb-fs-pick:focus-visible::after{border-radius:20px}
  .plb-fs-shot{height:82px;padding:8px 8px 6px;border-radius:13px}
  .plb-fs-info{gap:5px}
  .plb-fs-name{font-size:16.5px}
  .plb-fs-meta{font-size:12.5px}
  .plb-fs-foot,.plb-fs-more{font-size:13px}
  .plb-fs-price b{font-size:14.5px}
}

/* black vehicles on a near-black sheet: the floor light does the work */
@media (prefers-color-scheme:dark){
  .plb-fs-panel{box-shadow:0 0 0 1px var(--line), 0 0 90px -20px rgba(0,0,0,.9)}
  .plb-fs-shot{
    background:
      radial-gradient(ellipse 80% 74% at 50% 100%,rgba(167,139,250,.46),rgba(124,58,237,.13) 52%,rgba(124,58,237,0) 78%),
      #17131F;
  }
  .plb-fs-shot img{filter:drop-shadow(0 5px 6px rgba(0,0,0,.55))}
}
@media (prefers-reduced-motion:reduce){
  .plb-fs-panel,.plb-fs-card,.plb-fs::backdrop,.plb-fs-card.is-on .plb-fs-tick{animation:none}
  .plb-fs.is-closing .plb-fs-panel,
  .plb-fs.is-closing::backdrop,
  .plb-fs-shot img{transition:none}
}