/* ==========================================================================
   United Rent A Car — design system + components (single source of tokens)
   Linked by every page. Brand red + black are sampled from the client's own
   logo file (united-rent-a-car-sources/); nothing here is inherited from
   any other client project.
   ========================================================================== */

/* ---------- fonts: self-hosted, latin subsets, variable weight ---------- */
@font-face{
  font-family:'Roboto Condensed';
  src:url('../fonts/roboto-condensed-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Roboto';
  src:url('../fonts/roboto-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* metric-matched fallbacks so the swap doesn't reflow headlines */
@font-face{
  font-family:'RC Fallback';
  src:local('Arial Narrow'), local('ArialNarrow'), local('Arial'), local('Helvetica');
  size-adjust:88%; ascent-override:92.8%; descent-override:24.4%; line-gap-override:0%;
}
@font-face{
  font-family:'Roboto Fallback';
  src:local('Arial'), local('Helvetica');
  size-adjust:100%; ascent-override:92.8%; descent-override:24.4%; line-gap-override:0%;
}

/* ---------- tokens ---------- */
:root{
  --red:#C82820;        /* logo red · white on it 5.56:1 · on white 5.56:1 */
  --red-deep:#A8201A;   /* hover / pressed · 7.28:1 with white */
  --red-hi:#F0473C;     /* small red text on black · 5.35:1 */
  --ink:#0A0A0A;        /* logo black · text + dark bands */
  --ink-2:#161616;      /* raised dark surface */
  --ink-3:#232323;      /* dark card */
  --paper:#FFFFFF;
  --paper-2:#F3F3F1;    /* light panel */
  --paper-3:#E6E6E2;    /* borders on light */
  --mute:#5F5F5F;       /* secondary on light · 6.39:1 */
  --mute-d:#B5B5B5;     /* secondary on dark · 9.66:1 */
  --line:rgba(10,10,10,.12);
  --line-d:rgba(255,255,255,.16);

  --font-d:'Roboto Condensed','RC Fallback',Arial,sans-serif;
  --font-b:'Roboto','Roboto Fallback',Arial,sans-serif;

  --wrap:1280px;
  --gutter:clamp(20px,4vw,48px);
  --nav-h:76px;
  --radius:4px;

  /* motion tokens — one vocabulary for the whole site */
  --ease-brake:cubic-bezier(.12,.86,.24,1);   /* fast in, long decel — the drive-in */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --t-tap:.12s; --t-fast:.18s; --t-reveal:.7s;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.sect-dark :focus-visible,.hero :focus-visible,.footer :focus-visible{outline-color:#fff}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;font-weight:600;border-radius:var(--radius)}
.skip-link:focus{top:12px}
#main:focus,#reserve:focus{outline:none}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.display{
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  line-height:.92;letter-spacing:-.008em;
}
h1.display{font-size:clamp(3.2rem,8.4vw,8rem)}
h2.display{font-size:clamp(2.2rem,4.8vw,4.2rem)}
h3{font-family:var(--font-d);font-weight:700;font-size:1.45rem;line-height:1.1;letter-spacing:-.005em}
.eyebrow{
  font-family:var(--font-d);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin:0 0 14px;
}
.sect-dark .eyebrow,.hero .eyebrow,.footer .eyebrow,.page-hero .eyebrow{color:var(--red-hi)}
.hero .eyebrow{color:#fff}
.lead{font-size:clamp(1.1rem,1.4vw,1.3rem);color:var(--mute);max-width:56ch}
.sect-dark .lead{color:var(--mute-d)}
.mute{color:var(--mute)}
strong{font-weight:600}

/* a fact the client still has to confirm — visibly unfinished on purpose (2.5) */
.tbd{
  border-bottom:1.5px dashed currentColor;color:var(--mute);cursor:help;
  text-decoration:none;padding-bottom:1px;
}
.sect-dark .tbd,.footer .tbd{color:var(--mute-d)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:var(--radius);border:2px solid var(--red);
  background:var(--red);color:#fff;text-decoration:none;cursor:pointer;
  font-family:var(--font-d);font-weight:700;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-tap),color var(--t-fast);
}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-white{background:#fff;border-color:#fff;color:var(--ink)}
.btn-white:hover{background:var(--paper-2);border-color:var(--paper-2)}
.btn-outline-w{background:transparent;border-color:#fff;color:#fff}
.btn-outline-w:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-dark{background:var(--ink);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn-sm{min-height:44px;padding:0 20px;font-size:.92rem}
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;font-family:var(--font-d);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--red);
}
/* The arrow is an SVG mask, not the U+2192 character: neither self-hosted
   font (latin subset) has that glyph, so it rendered in whatever system font
   the visitor had. background:currentColor keeps it the link colour, hover
   included. .arrow is the same mark inline in running text (contact page). */
.arrow-link::after{content:"";transition:transform var(--t-fast)}
.arrow-link::after,.arrow{flex:none;display:inline-block;width:.95em;height:.95em}
.arrow{margin-left:.3em;vertical-align:-.12em}
/* painted only where masks work: without one, the fill would show as a solid
   square, so such a browser gets no arrow instead */
@supports (mask:none) or (-webkit-mask:none){
  .arrow-link::after,.arrow{
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* forced colours repaint backgrounds as Canvas, which would erase a masked
     shape; opt this one mark out and paint it in the link colour instead */
  @media (forced-colors:active){.arrow-link::after,.arrow{forced-color-adjust:none;background-color:LinkText}}
}
.arrow-link:hover::after{transform:translateX(4px)}
.sect-dark .arrow-link{color:#fff}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line);
  height:var(--nav-h);
}
.nav-inner{height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.nav-logo{display:inline-flex;align-items:center;margin-right:auto}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;gap:clamp(14px,2.2vw,32px)}
.nav-links a{
  text-decoration:none;font-family:var(--font-d);font-weight:600;font-size:1.02rem;
  letter-spacing:.05em;text-transform:uppercase;padding:12px 0;position:relative;display:inline-flex;align-items:center;min-height:44px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:12px}
.menu-btn{
  display:none;width:48px;height:48px;border:0;background:transparent;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.menu-btn span{display:block;width:26px;height:3px;background:var(--ink);transition:transform .25s,opacity .2s}
/* no-JS (or failed-boot) phone navigation: the hamburger needs site.js, so it
   is swapped for a plain link to the footer's page links */
.menu-link{display:none;align-items:center;min-height:44px;padding:0 4px;font-family:var(--font-d);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
body.menu-open{overflow:hidden}

/* ---------- nav overlaying the hero video (homepage only) ----------
   The video is the page, so the nav sits ON the video rather than in an
   opaque bar above it. Applied via .nav-over on the homepage <header>
   only; every inner page keeps the solid nav, because those pages have no
   video behind them.

   position stays sticky (inherited from .nav) -- deliberately NOT absolute.
   Absolute would let the nav scroll away with the hero, and would make the
   .nav-solid state below meaningless.

   Stacking: .nav already carries z-index:50 and is a sibling of
   .hero-sequence in the root stacking context, so it paints above
   .hero-shade (z-index:1) and .hero-grid/.hero-beats (z-index:2), which
   are nested inside the hero's own context.

   Doubled class (.nav.nav-over) so it outranks .nav regardless of source
   order. Contrast comes from the .hero-shade top scrim. */
.nav.nav-over{
  /* fixed, NOT sticky: a sticky nav still reserves its 76px in normal flow,
     which pushes the hero down and leaves a strip of page background above
     the video -- the "not flush" defect with a transparent hat on. fixed
     takes it out of flow so the video starts at y=0, while still staying
     pinned as you scroll (which is why absolute is wrong here). */
  position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out);
}
.nav.nav-over .nav-logo img{content:url('/assets/img/logo-nav-light.png')}
.nav.nav-over .nav-links a{color:#fff}
.nav.nav-over .menu-btn span{background:#fff}
.nav.nav-over .menu-link{color:#fff}

/* once the hero is behind you, restore the solid bar -- white-on-white is
   unreadable over the page content below. Toggled by site.js. */
.nav.nav-over.nav-solid{background:var(--paper);border-bottom-color:var(--line)}
.nav.nav-over.nav-solid .nav-logo img{content:url('/assets/img/logo-nav.png')}
.nav.nav-over.nav-solid .nav-links a{color:var(--ink)}
.nav.nav-over.nav-solid .menu-btn span{background:var(--ink)}

/* the mobile menu panel is its own dark full-screen surface, so the nav
   must be solid while it's open no matter where the page is scrolled */
body.menu-open .nav.nav-over{background:var(--paper);border-bottom-color:var(--line)}
body.menu-open .nav.nav-over .nav-logo img{content:url('/assets/img/logo-nav.png')}
body.menu-open .nav.nav-over .menu-btn span{background:var(--ink)}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:49;background:var(--ink);color:#fff;
  padding:32px var(--gutter);overflow:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .25s,transform .25s,visibility 0s .25s;
}
body.menu-open .mobile-menu{transform:none;opacity:1;visibility:visible;transition:opacity .25s,transform .25s}
.mobile-menu ul{display:grid;gap:6px}
.mobile-menu a{
  display:block;text-decoration:none;font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:2.4rem;line-height:1.1;padding:10px 0;border-bottom:1px solid var(--line-d);
}
.mobile-menu .mm-meta{margin-top:28px;display:grid;gap:10px;color:var(--mute-d)}
.mobile-menu .mm-meta a{font:inherit;text-transform:none;border:0;padding:0;font-size:1.05rem;color:#fff}
/* The six nav links need ~630px on one line in Roboto Condensed and ~730px in
   the Arial fallback shown while the webfont is slow or blocked (measured
   2026-10-02, after Policies & FAQs joined; the five before it already wrapped
   below 1024px). A tighter gap below 1440px lets both fit from 1280px; under
   that the links fold into the menu (site.js closes it at the same line) and
   the Reserve now button stays until the phone breakpoint. */
@media (max-width:1439px){.nav-links{gap:18px}}
@media (max-width:1279px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  html:not(.js) .menu-btn,html.boot-failed .menu-btn{display:none}
  html:not(.js) .menu-link,html.boot-failed .menu-link{display:inline-flex}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav-cta .btn{display:none}
  .nav-logo img{height:36px}
}

/* ---------- sections ---------- */
.sect{padding:clamp(64px,9vw,120px) 0}
.sect-dark{background:var(--ink);color:#fff}
.sect-panel{background:var(--paper-2)}
.sect-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.sect-head p:last-child{margin:18px 0 0;color:var(--mute);font-size:1.1rem}
.sect-dark .sect-head p:last-child{color:var(--mute-d)}
.sect-head.split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sect-head.split > div{max-width:760px}

/* ==========================================================================
   HERO — one scroll-driven sequence through the fleet. The Huracán drives in
   and stops on load; scrolling brings the camera round it and on through the
   fleet while four text beats come and go (site.js: GSAP ScrollTrigger on a
   canvas image sequence). Baseline -- no JS, or reduced motion -- is a plain
   full-bleed hero on the brand red, the car driving in along the logo's road.
   ========================================================================== */
/* Scroll room: the sticky hero plus three screens of travel. Reserved before
   first paint (env.js sets html.js pre-paint) so the page below never jumps
   when site.js starts the sequence. If site.js never finishes, env.js adds
   .boot-failed after 3s and the hero collapses to one screen; a late boot,
   Save-Data, a 2G connection or missing GSAP keep it collapsed (.hero-static). */
.hero-sequence{position:relative}
@media (prefers-reduced-motion:no-preference){
  html.js .hero-sequence{height:400vh;height:400svh}
}
html.boot-failed .hero-sequence,html .hero-sequence.hero-static{height:auto}
/* the hero IS the viewport -- no nav subtraction, no px cap. The nav
   overlays it (.nav-over) rather than sitting above it. dvh on the line
   after svh: browsers without dvh discard it and keep the svh value. */
.hero{
  position:sticky;top:0;
  background:var(--red);color:#fff;overflow:hidden;
  min-height:100svh;
  min-height:100dvh;
  display:flex;flex-direction:column;
}
/* while the sequence runs the hero is exactly one screen: the canvas, the
   beats and the pill bar are all laid out against it */
.hero-sequence.scroll-mode .hero{height:100svh;height:100dvh;min-height:0}

/* full-bleed visual layer: the fallback scene (cutout on red, or the
   sequence's first frame painted by CSS) and, above it, the canvas (Mode A)
   or scrubbed video (Mode B). Neither media element is visible until it
   has painted a frame (.canvas-live), so nothing blank ever covers the
   poster. Real nav/copy/CTAs sit above all of this via z-index. */
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-scene{position:absolute;inset:0}
.hero-canvas,.hero-scrub{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden;opacity:0;
  transition:opacity .45s var(--ease-out)}
.hero-scrub{object-fit:cover}
.hero-sequence.canvas-live .hero-canvas,.hero-sequence.canvas-live .hero-scrub{visibility:visible;opacity:1}
/* the poster stays underneath until the canvas has fully faded in (it only
   matters when the first drawn frame isn't the poster's own -- a skipped
   drive-in on a slow connection) */
.hero-sequence.canvas-live .hero-scene{visibility:hidden;transition:visibility 0s .5s}
/* A real element, not a pseudo-element: the canvas is its own compositor
   layer, and a ::before/::after over it can end up painting beneath it
   (engineering standard 3.4). The same goes for every text backing below. */
.hero-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.22) 46%,rgba(10,10,10,.06) 100%),
    linear-gradient(0deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 42%),
    /* top scrim: the overlaid nav sits on the imagery without it, so this is
       a contrast requirement, not decoration. Pure CSS, so it holds with
       JS off and under reduced motion. */
    linear-gradient(180deg,rgba(10,10,10,.64) 0,rgba(10,10,10,.64) var(--nav-h),rgba(10,10,10,0) calc(var(--nav-h) + 120px));
}
.hero-grid{
  position:relative;z-index:2;flex:1;display:flex;align-items:center;
  /* nav overlays the hero, so clear its height before the copy starts, and
     keep the whole block inside 100dvh on a 1440x900 laptop */
  padding:calc(var(--nav-h) + clamp(24px,3.4vw,52px)) 0 clamp(110px,13vw,186px);
}
/* short viewports: tighten the vertical padding too, so the hero's content
   keeps fitting inside 100dvh rather than overflowing it */
@media (max-height:860px){
  .hero-grid{padding:calc(var(--nav-h) + 18px) 0 clamp(88px,11vh,130px)}
  .hero-sub{margin-bottom:20px}
}
.hero-copy{max-width:600px}
.hero-text{position:relative;isolation:isolate}
/* Text over uncontrolled imagery: contrast is guaranteed by arithmetic, not
   by sampling frames. Worst case is a pure-white frame; #0A0A0A at alpha a
   over white must leave white text >= 4.5:1 (small text) -> a >= 0.56, and
   >= 3:1 (large) -> a >= 0.44. 0.64 is used behind every piece of hero text.
   Full strength over the text box, feathered only in a 32px margin outside
   it; without mask support it is a plain translucent panel (same guarantee,
   harder edge). Not drawn on the red ground (no-JS, reduced motion), which
   needs none. */
.hero-backing,.beat-backing,.hud-backing{display:none}
@media (prefers-reduced-motion:no-preference){
  html.js .hero-backing,html.js .beat-backing,html.js .hud-backing{display:block}
}
.hero-backing,.beat-backing,.hud-backing{
  position:absolute;inset:-32px;z-index:-1;pointer-events:none;background:rgba(10,10,10,.64);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(180deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(180deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
  mask-composite:intersect;
}
/* the hero headline scales with viewport HEIGHT as well as width, so a wide
   but short window can't push it out of the 100dvh hero */
.hero-copy h1{margin:0 0 22px;font-size:min(clamp(3.2rem,8.4vw,8rem),13vh)}
.hero-sub{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:44ch;margin:0 0 30px;color:rgba(255,255,255,.92)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* over imagery (JS on, motion allowed) the outline button can sit on a
   white frame, so it carries the same 0.64 backing as the text; on the red
   ground it stays transparent (white on red is 5.56:1) */
@media (prefers-reduced-motion:no-preference){
  html.js .hero .btn-outline-w:not(:hover){background:rgba(10,10,10,.64)}
}
/* Sequence layout is reserved from FIRST PAINT, not applied when site.js
   starts: switching it on later moved copy that had already painted (a
   measured layout shift). Same condition as the scroll room -- JS on,
   motion allowed, not collapsed ("SEQ" below):
     html.js:not(.boot-failed) .hero-sequence:not(.hero-static)
   The static and fallback heroes keep their exact layout. */
/* badge: sequence only -- on the static and fallback heroes it would add
   ~46px and push the booking bar down; its facts are repeated in the fleet
   heading below */
.hero-badge{display:none}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-badge{display:inline-flex}
}
.hero-badge{
  align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 12px;
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
}
.hb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}

/* ----- the booking form as a pill bar inside beat 1 (wide screens only;
   site.js moves the one real form here and back -- see .book below) ----- */
.hero-book-slot{position:absolute;left:0;right:0;bottom:clamp(20px,3.6vh,40px);z-index:3;display:none}
.hero-sequence.book-in-hero .hero-book-slot{display:block}
/* SEQ, pill width (site.js's pillQuery): the pill stands in for the CTAs */
@media (prefers-reduced-motion:no-preference) and (min-width:1100px) and (min-height:620px){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-grid .hero-ctas{display:none}
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-grid{padding-bottom:calc(clamp(20px,3.6vh,40px) + 100px)}
}
.hero-book-slot .book{
  width:min(100% - 2*var(--gutter),1180px);margin-inline:auto;
  grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1.1fr)) minmax(0,1fr) auto;gap:0;align-items:center;
  border-radius:999px;padding:8px 8px 8px 30px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(10,10,10,.06);
}
.hero-book-slot .book-title{display:none}
/* one row always: the booking bar's own <=1100px two-column layout (below)
   must not reach the pill */
.hero-book-slot .book .field-loc,.hero-book-slot .book .btn{grid-column:auto}
.hero-book-slot .book .field{position:relative;gap:2px;padding:4px 20px;border-left:1px solid var(--paper-3)}
.hero-book-slot .book .field-loc{padding-left:0;border-left:0}
.hero-book-slot .book label{font-size:.7rem}
.hero-book-slot .book input,.hero-book-slot .book select{min-height:32px;padding:2px 0;border:0;border-radius:0;background-color:transparent;font-size:.98rem}
.hero-book-slot .book select{padding-right:24px;background-position:right 0 center}
.hero-book-slot .book input:focus,.hero-book-slot .book select:focus{box-shadow:none}
/* the hero's white focus ring would vanish on the white pill */
.hero .hero-book-slot :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hero-book-slot .book input[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--red)}
.hero-book-slot .book .btn{min-height:58px;border-radius:999px;padding:0 34px;margin-left:8px}
/* no room inside a pill: errors float above their field */
.hero-book-slot .book .field-error{
  position:absolute;left:20px;bottom:calc(100% + 14px);z-index:1;background:#fff;color:var(--red-deep);
  padding:6px 10px;border-radius:6px;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);white-space:nowrap;font-size:.82rem;
}
.hero-book-slot .book .field-loc .field-error{left:0}

/* ----- beats 2-4: stacked full-screen layers, shown and hidden by site.js
   (GSAP autoAlpha); visibility:hidden keeps them out of the tab order and
   the accessibility tree while they're off ----- */
.hero-beats{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-beat{position:absolute;inset:0;visibility:hidden}
.hero-beat a,.hero-beat button{pointer-events:auto}
.hero-beat-copy .wrap{height:100%;display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:calc(var(--nav-h) + clamp(36px,7vh,88px))}
.beat-copy{position:relative;isolation:isolate;max-width:620px}
.beat-copy h2{font-size:min(clamp(2.4rem,5.4vw,5rem),11vh);margin:0 0 18px}
.beat-copy p:not(.eyebrow){font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:46ch;color:rgba(255,255,255,.92);margin:0 0 24px}

/* beat 2: a reticle locked onto the car (site.js maps the anchor through
   the same cover crop as the canvas and sets --rx/--ry), leader lines, and
   a readout panel */
.hud-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hud-lines path{fill:none;stroke:#fff;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0}
.hud-lines circle{fill:#fff}
.hud-reticle{position:absolute;left:0;top:0;width:clamp(88px,9vw,136px);height:clamp(88px,9vw,136px);
  transform:translate(calc(var(--rx,50vw) - 50%),calc(var(--ry,50vh) - 50%))}
.hud-spin{width:100%;height:100%}
.hud-reticle svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#fff;stroke-width:1.5;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.6))}
.hud-reticle .hud-dot{fill:var(--red-hi);stroke:none}
.hud-panel{position:absolute;left:max(var(--gutter),calc((100% - var(--wrap)) / 2));top:50%;transform:translateY(-50%);
  width:min(360px,34vw);isolation:isolate}
.hud-kicker{font-family:var(--font-d);font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
.hud-name{font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:.95;margin:0 0 18px}
.hud-specs{margin:0}
.hud-specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-top:1px solid rgba(255,255,255,.35)}
.hud-specs dt{font-family:var(--font-d);font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.hud-specs dd{margin:0;font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1;text-align:right}

/* preload progress: shown only if the opening frames take a moment, never
   in front of the copy or the form, and gone once the car can drive in */
.hero-loader{
  position:absolute;right:max(var(--gutter),calc((100% - var(--wrap)) / 2));bottom:clamp(20px,3.6vh,40px);z-index:3;
  display:grid;grid-template-columns:auto auto;gap:8px 16px;align-items:baseline;padding:10px 14px 12px;
  background:rgba(10,10,10,.64);border-radius:6px;color:#fff;
  font-family:var(--font-d);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .35s var(--ease-out);
}
.hero-loader.is-on{opacity:1}
.hl-pct{font-variant-numeric:tabular-nums;text-align:right}
.hl-bar{grid-column:1/-1;position:relative;width:176px;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 14px,transparent 14px 22px)}
.hl-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 22px)}
.hero-sequence.book-in-hero .hero-loader{bottom:calc(clamp(20px,3.6vh,40px) + 100px)}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .road{display:none}
}

/* pause controls (WCAG 2.2.2) -- the marquee's; the hero has no autoplaying
   motion to pause (its one timed move, the drive-in, is under 5s; the rest
   follows the visitor's own scrolling) */
.motion-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 16px;
  border:1.5px solid currentColor;border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--font-d);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.motion-btn[hidden]{display:none}

/* the road: a dashed lane line near the hero's bottom edge (fallback scene) */
.road{
  position:absolute;left:0;right:0;bottom:calc(clamp(82px,10vw,130px) + 2px);height:4px;z-index:2;pointer-events:none;
}
.road svg{width:100%;height:100%;overflow:visible}
.road line{stroke:#fff;stroke-width:4;stroke-dasharray:3.4 2;opacity:.55}
.road-solid{position:absolute;left:0;right:0;bottom:-16px;height:2px;background:rgba(0,0,0,.18)}

/* fallback state: the lead car's real cutout, centered on the brand-red
   field, drives in along the road and brakes to a stop */
.hero-car{position:absolute;inset:0;pointer-events:none}
.hero-car .car,.hero-car .ghost{
  position:absolute;left:50%;top:50%;z-index:2;
  width:min(56vw,820px);height:auto;transform:translate(-50%,-50%);
}
.hero-car .ghost{z-index:1;opacity:0;filter:blur(6px)}
.hero-car .shadow{
  position:absolute;left:50%;bottom:14%;width:min(46vw,660px);height:9%;z-index:0;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,0) 70%);
}

/* First paint, before site.js has even executed. env.js sets html.js as a
   render-blocking script in <head>, so a JS-capable visitor who allows
   motion gets the sequence's first frame painted by CSS alone -- the hero
   opens on the car itself instead of on red, with nothing waiting on the
   deferred scripts, and the canvas later takes over on that same frame.
   Same files, same media conditions as the <link rel=preload>s in <head>.

   Deliberately scoped to html.js AND no-preference: with JS off, or with
   reduced motion on, the red ground and the drive-in cutout remain exactly
   as they are -- the documented fallback and the client-locked "car drives
   in and stops" moment (DECISIONS.md, 2026-09-21). */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-sequence .hero{background:#0A0A0A}
  html.js .hero-sequence .hero-scene{
    background-image:url('/assets/img/hero-seq/landscape/frame_001.webp');
    background-size:cover;
    background-position:var(--focus-x,54%) var(--focus-y,38%);
    background-repeat:no-repeat;
  }
  html.js .hero-sequence .hero-car .car,
  html.js .hero-sequence .hero-car .ghost,
  html.js .hero-sequence .hero-car .shadow{opacity:0}
}
@media (prefers-reduced-motion: no-preference) and (orientation: landscape) and (max-width: 1100px) {
  html.js .hero-sequence .hero-scene{background-image:url('/assets/img/hero-seq/landscape-sm/frame_001.webp')}
}
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) {
  html.js .hero-sequence .hero-scene{background-image:url('/assets/img/hero-seq/portrait/frame_001.webp')}
}

/* animation — pure CSS so the fallback needs no library and no JS, and CSS
   keyframes keep running (or settle) in a backgrounded tab; final keyframe =
   resting state */
.hero-car.entrance{animation:drive-in 1.9s var(--ease-brake) .25s both}
.hero-car.entrance .car{animation:brake-dive 1.9s var(--ease-brake) .25s both}
.hero-car.entrance .ghost{animation:ghost 1.9s var(--ease-brake) .25s both}
.hero-car.entrance .shadow{animation:shadow-settle 1.9s var(--ease-brake) .25s both}
.road line{stroke-dashoffset:0;animation:road-draw 1.1s var(--ease-out) 0s both}
.hero-text > :not(.hero-backing),.hero-copy > .hero-ctas{animation:rise .8s var(--ease-out) both}
.hero-text > .hero-badge{animation-delay:.3s}
.hero-text > .eyebrow{animation-delay:.38s}
/* outranks the :not() rule above -- see @keyframes settle */
.hero-copy .hero-text > h1{animation:settle .9s var(--ease-out) both}
.hero-text > .hero-sub{animation-delay:.6s}
.hero-copy > .hero-ctas{animation-delay:.72s}
.book{animation:rise .8s var(--ease-out) 1s both}
.nav{animation:nav-in .6s var(--ease-out) both}

@keyframes drive-in{from{transform:translate3d(125%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes brake-dive{
  0%{transform:rotate(0) translateY(0)}
  72%{transform:rotate(0) translateY(0)}
  86%{transform:rotate(-1.1deg) translateY(.8%)}   /* nose dips as the brakes bite */
  94%{transform:rotate(.35deg) translateY(-.2%)}   /* suspension rebounds */
  100%{transform:rotate(0) translateY(0)}
}
@keyframes ghost{0%{opacity:.35;transform:translateX(9%)}60%{opacity:.22;transform:translateX(5%)}100%{opacity:0;transform:translateX(0)}}
@keyframes shadow-settle{0%{transform:scaleX(1.25);opacity:.4}100%{transform:scaleX(1);opacity:1}}
@keyframes road-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* the headline is the page's Largest Contentful Paint, so it is never
   faded: Chromium doesn't count text painted at opacity 0, and doesn't
   count a poster that exactly fills the viewport (measured: with every
   line fading in, the page recorded no LCP at all). It is fully visible
   from first paint and only settles into place. */
@keyframes settle{from{transform:translateY(14px)}to{transform:none}}
@keyframes nav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  /* full viewport on phones too */
  .hero-grid{padding:calc(var(--nav-h) + 24px) 0 0}
  .hero-copy{max-width:none}
  .hero-car .car,.hero-car .ghost{width:min(78vw,480px)}
  .road{bottom:36px}
  .hero-ctas .btn{flex:1 1 200px}
}
/* Phone fallback hero (JS off, or reduced motion): space is reserved below
   the CTAs and the car sits in it, centred, so no text can overlap it. */
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .hero-grid{padding-bottom:calc(min(78vw,480px) * .3607 + 84px)}
  .hero-car .car,.hero-car .ghost{top:auto;bottom:52px;left:calc(50% - min(78vw,480px) / 2)}
  .hero-car .shadow{bottom:40px}
}
@media (max-width:900px){
  html:not(.js) .hero-grid{padding-bottom:calc(min(78vw,480px) * .3607 + 84px)}
  html:not(.js) .hero-car .car,html:not(.js) .hero-car .ghost{top:auto;bottom:52px;left:calc(50% - min(78vw,480px) / 2)}
  html:not(.js) .hero-car .shadow{bottom:40px}
}

/* ----- SEQ below the pill-bar width: copy on top, the car in the clear
   middle, the CTAs (which stand in for the pill bar) at the bottom ----- */
@media (prefers-reduced-motion:no-preference) and (max-width:1099px),(prefers-reduced-motion:no-preference) and (max-height:619px){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-grid{align-items:stretch;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-copy{display:flex;flex-direction:column;justify-content:space-between}
}
@media (prefers-reduced-motion:no-preference) and (max-width:600px),(prefers-reduced-motion:no-preference) and (max-height:620px){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-sub{display:none}
}
@media (prefers-reduced-motion:no-preference) and (max-height:520px){
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-badge{display:none}
  /* a phone on its side: both buttons on one compact row, or they overflow
     the one-screen hero */
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-grid .hero-ctas{flex-wrap:nowrap}
  html.js:not(.boot-failed) .hero-sequence:not(.hero-static) .hero-grid .hero-ctas .btn{flex:0 1 auto;min-height:44px;padding:0 18px;font-size:.9rem}
}
@media (max-width:900px),(orientation:portrait){
  .hero-beat-copy .wrap{justify-content:flex-end;padding-top:0;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .hud-panel{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:none;width:auto}
  .hud-name{font-size:1.6rem;margin-bottom:12px}
  .hud-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .hud-specs > div{display:grid;gap:6px;justify-content:start;padding:10px 0 0}
  .hud-specs dd{font-size:1.15rem;text-align:left}
  .hero-loader{top:calc(var(--nav-h) + 12px);bottom:auto}
}

/* ==========================================================================
   BOOKING BAR — overlaps the hero's bottom edge (the "desk")
   ========================================================================== */
.book-wrap{position:relative;z-index:3;margin-top:calc(-1*clamp(80px,9vw,110px))}
/* the form is inside the hero as a pill bar (site.js, wide screens) */
.book-wrap.is-empty{display:none}
.book{
  background:#fff;color:var(--ink);border-radius:6px;padding:22px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.06);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) auto;gap:14px;align-items:end;
}
.book .btn{min-height:54px;white-space:nowrap}
.book-title{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:-2px 0 -4px}
.book-title p{margin:0;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.book-title small{color:var(--mute);font-size:.88rem}
@media (max-width:1100px){.book{grid-template-columns:repeat(2,minmax(0,1fr))}.book .field-loc{grid-column:1/-1}.book .btn{grid-column:1/-1}}
@media (max-width:900px){.book-wrap{margin-top:0;padding-top:0}.book{border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}}
@media (max-width:560px){.book{grid-template-columns:minmax(0,1fr)}}

/* ---------- fields ---------- */
.field{display:grid;gap:6px}
.field label{
  font-family:var(--font-d);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
}
.field input,.field select,.field textarea{
  width:100%;min-width:0;min-height:52px;padding:12px 14px;border:1.5px solid var(--paper-3);border-radius:var(--radius);
  background:#fff;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{min-height:140px;resize:vertical}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.12)}
.sect-dark .field label{color:var(--mute-d)}
.sect-dark .field input,.sect-dark .field select,.sect-dark .field textarea{background:var(--ink-2);border-color:var(--ink-3);color:#fff}
.sect-dark .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E")}
.sect-dark .field input:focus,.sect-dark .field select:focus,.sect-dark .field textarea:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.field-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.field-2{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.field-error{margin:0;color:var(--red);font-size:.88rem;font-weight:500;line-height:1.35}
.field-error:empty{display:none}
.field input[aria-invalid="true"]{border-color:var(--red)}
.form-status{margin:14px 0 0;font-weight:500;min-height:1.5em}
.form-status.ok{color:#1f6b3a}
.sect-dark .form-status.ok{color:#8fd6a5}
.form-status.err{color:var(--red)}
.sect-dark .form-status.err{color:var(--red-hi)}

/* ==========================================================================
   MARQUEE — the fleet passes by on a light ground (studio-shot cutouts)
   ========================================================================== */
.marquee{
  position:relative;background:var(--paper-2);padding:clamp(44px,6vw,72px) 0 clamp(28px,4vw,44px);
  overflow:hidden;
}
.marquee-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.marquee-head p{margin:0}
.marquee-lane{position:relative;padding:8px 0 30px}
.marquee-lane::after{
  /* the lane line under the wheels — same dashed road as the logo */
  content:"";position:absolute;left:0;right:0;bottom:22px;height:3px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 38px,transparent 38px 66px);opacity:.8;
}
.marquee-track{--marquee-gap:clamp(40px,5vw,80px);display:flex;width:max-content;gap:var(--marquee-gap);will-change:transform;animation:marquee 60s linear infinite}
.marquee-track ul{display:flex;gap:var(--marquee-gap);align-items:flex-end;flex:none}
/* The loop moves the track -50%, which is exactly one list plus its gap only if
   the two halves match, so the duplicate carries the gap after it too. Without
   this each restart landed half a gap short: a 20-40px hitch once a minute.
   The duplicate is hidden in every static state, so this never shows there. */
.marquee-track ul[aria-hidden]{padding-right:var(--marquee-gap)}
/* The static row is a keyboard stop (its tabindex) and spans the full width:
   draw its focus ring inside it, where the edges don't clip it and it
   doesn't land on the road. */
.marquee-track:focus-visible{outline-offset:-3px}
.marquee-track li{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.marquee-track img{height:clamp(96px,11vw,150px);width:auto}
.marquee-track figcaption,.marquee-track .cap{
  font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
}
.marquee:hover .marquee-track,.marquee.is-user-paused .marquee-track,.marquee.is-offscreen .marquee-track{animation-play-state:paused}
/* No site.js (JS off, or the env.js failsafe fired): only site.js reveals
   #marqueeBtn, so nothing could stop the motion (WCAG 2.2.2). Land in the
   same static, scrollable state the reduced-motion block below uses. The
   button goes too: if env.js alone failed, site.js still reveals it, with
   no motion left to pause. Only the track scrolls, so the heading stays put
   and the lane's road stays under whichever cars are in view. */
html:not(.js) .marquee-track,html.boot-failed .marquee-track{animation:none}
html:not(.js) .marquee-track,html.boot-failed .marquee-track{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
html:not(.js) .marquee-track ul[aria-hidden],html.boot-failed .marquee-track ul[aria-hidden]{display:none}
html:not(.js) .marquee .motion-btn,html.boot-failed .marquee .motion-btn{display:none}
.marquee-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ==========================================================================
   CATEGORY CARDS / FLEET CARDS
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--paper-3);border-radius:6px;
  padding:22px 22px 24px;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(0,0,0,.35);border-color:transparent}
.cat-card img{width:100%;height:auto;aspect-ratio:2.1/1;object-fit:contain;margin:6px 0 18px;transition:transform .35s var(--ease-out)}
.cat-card:hover img{transform:translateX(-6px)}
.cat-card h3{font-size:1.6rem;text-transform:uppercase}
.cat-card p{margin:8px 0 0;color:var(--mute);font-size:.98rem}
.cat-card .arrow-link{margin-top:auto;padding-top:18px}
@media (max-width:1000px){.cat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cat-grid{grid-template-columns:1fr}}

.fleet-note{
  display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--paper-3);border-left:4px solid var(--red);
  background:#fff;border-radius:var(--radius);color:var(--mute);font-size:.98rem;margin-bottom:32px;
}
.fleet-note p{margin:0}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 34px}
.filter a,.filter button{
  text-decoration:none;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.9rem;padding:11px 18px;border:1.5px solid var(--ink);border-radius:999px;min-height:44px;display:inline-flex;align-items:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.filter button{background:transparent;color:var(--ink);cursor:pointer}
.filter a:hover,.filter a[aria-current="true"],.filter button:hover,.filter button[aria-pressed="true"]{background:var(--ink);color:#fff}
html:not(.js) .filter,html.boot-failed .filter{display:none}
.fleet-group{margin-bottom:clamp(40px,6vw,64px);scroll-margin-top:calc(var(--nav-h) + 20px)}
.fleet-group h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:6px}
.fleet-group > p{color:var(--mute);margin-bottom:22px}
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.car-card{
  background:#fff;border:1px solid var(--paper-3);border-radius:6px;padding:20px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.car-card:hover{transform:translateY(-3px);box-shadow:0 20px 34px -22px rgba(0,0,0,.35)}
.car-card img{width:100%;height:auto;aspect-ratio:2.05/1;object-fit:contain;margin-bottom:14px}
.car-card .cc-class{font-family:var(--font-d);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.car-card h3{font-size:1.35rem;margin:4px 0 6px}
.car-card .cc-meta{color:var(--mute);font-size:.95rem;margin:0 0 16px}
/* daily rate (client-supplied, DECISIONS.md 2026-10-02): bottom-aligned with
   the button, so rates line up across a row whatever the meta line's length */
.car-card .cc-rate{
  margin:auto 0 14px;color:var(--mute);font-family:var(--font-d);font-weight:600;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
}
.car-card .cc-rate b{font-weight:800;font-size:1.75rem;letter-spacing:-.005em;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.car-card .btn{margin-top:auto;align-self:flex-start}
.car-card .cc-rate + .btn{margin-top:0}
html.js .fleet-group[hidden],html.js .car-card[hidden]{display:none}
@media (max-width:1000px){.fleet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fleet-grid{grid-template-columns:1fr}}

/* ==========================================================================
   WHY / PROCESS / LOCATIONS / CONTACT
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:6px;padding:28px 26px 30px}
.why-card .num{font-family:var(--font-d);font-weight:800;font-size:2.6rem;line-height:1;color:var(--red-hi);margin-bottom:18px}
.why-card h3{font-size:1.55rem;text-transform:uppercase;margin-bottom:10px}
.why-card p{color:var(--mute-d);margin:0}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}}

.steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:34px;height:3px;
  background:repeating-linear-gradient(90deg,var(--red) 0 26px,transparent 26px 44px);opacity:.7;
}
.step{position:relative;padding-top:88px}
.step::before{
  counter-increment:step;content:"0" counter(step);position:absolute;top:0;left:0;
  width:70px;height:70px;border-radius:50%;background:var(--paper);border:3px solid var(--red);
  display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:1.5rem;color:var(--red);
}
.step h3{font-size:1.6rem;text-transform:uppercase;margin-bottom:10px}
.step p{color:var(--mute);margin:0}
@media (max-width:800px){
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{left:34px;right:auto;top:0;bottom:0;width:3px;height:auto;background:repeating-linear-gradient(180deg,var(--red) 0 26px,transparent 26px 44px)}
  .step{padding:0 0 0 96px;min-height:70px}
}

.loc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.loc-card{background:#fff;border:1px solid var(--paper-3);border-radius:6px;padding:30px}
.loc-card h3{font-size:1.7rem;text-transform:uppercase;margin-bottom:8px}
.loc-card address{font-style:normal;color:var(--mute);line-height:1.6;margin-bottom:18px}
.hours{width:100%;border-collapse:collapse;margin:8px 0 0}
.hours caption{text-align:left;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;padding-bottom:10px;color:var(--mute)}
.hours td{padding:11px 0;border-top:1px solid var(--paper-3)}
.hours td:last-child{text-align:right;font-weight:500}
/* the real map on top, the address and the two actions in a black bar below.
   The bar is the whole fallback: if the embed is blocked, directions still work. */
.loc-map{
  height:100%;min-height:420px;border-radius:6px;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;overflow:hidden;
}
.loc-map-frame{display:block;width:100%;flex:1 1 auto;min-height:300px;border:0;background:var(--ink-2)}
.loc-map-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;padding:22px 24px;border-top:4px solid var(--red)}
.loc-map-bar p{color:var(--mute-d);margin:6px 0 0;max-width:32ch}
.loc-map-bar .eyebrow{margin:0;color:var(--red-hi)}
.loc-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.loc-map-bar .loc-actions{justify-content:flex-start}
@media (max-width:900px){.loc-grid{grid-template-columns:1fr}.loc-map{min-height:0}.loc-map-frame{min-height:280px}}
.loc-kicker{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--red);margin:0 0 6px}
.loc-note{margin:18px 0 0;color:var(--mute)}
.loc-note + .loc-note{margin-top:8px}
.loc-note a{color:var(--ink)}

/* new cities — a dashed outline: a place on the map, not open yet */
.loc-soon{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
@media (max-width:900px){.loc-soon{grid-template-columns:repeat(2,1fr)}}
.soon-card{border:2px dashed var(--paper-3);border-radius:6px;padding:26px 30px;background:transparent}
.soon-card h3{font-size:1.5rem;text-transform:uppercase;margin:0}
.soon-card .loc-kicker{color:var(--mute)}

/* reserve: estimated total (rate x days, never a quote) */
.estimate{border:2px solid var(--ink);border-left:6px solid var(--red);border-radius:6px;padding:16px 18px;margin:0 0 14px;display:grid;gap:2px}
.estimate[hidden]{display:none}
.estimate p{margin:0}
.estimate-label{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--mute)}
.estimate-amount{font-family:var(--font-d);font-weight:800;font-size:2.2rem;line-height:1.05}
.estimate-detail{font-weight:500}
.estimate-note{color:var(--mute);font-size:.9rem;margin-top:6px!important}

/* Google reviews — real numbers only; the stars fill to --rating (0–5) */
.reviews-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:center}
.reviews-grid .sect-head{margin-bottom:0}
.reviews-card{background:var(--ink-2);border:1px solid var(--ink-3);border-top:4px solid var(--red);border-radius:6px;padding:clamp(26px,4vw,40px);display:grid;justify-items:start;gap:10px}
.reviews-score{font-family:var(--font-d);font-weight:800;font-size:clamp(4rem,9vw,6.5rem);line-height:.9;margin:0;letter-spacing:-.01em}
.reviews-score .tbd{color:#fff}
.stars{position:relative;display:inline-block;margin:0;font-size:1.9rem;line-height:1;letter-spacing:.12em;color:var(--ink-3)}
.stars span{display:block}
.stars::after{
  content:"★★★★★";position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:var(--red-hi);
  width:calc(var(--rating,0) / 5 * 100%);
}
.reviews-count{color:var(--mute-d);margin:0 0 12px}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}

/* airport drop-off */
.airport-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:start}
.airport-copy p{color:var(--mute);font-size:1.08rem;max-width:62ch;margin:0 0 16px}
.airport-copy p:first-child{color:var(--ink);font-size:1.2rem}
.airport-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.airport-list li{border:2px solid var(--ink);border-radius:6px;padding:18px 20px;display:grid;gap:4px}
.airport-list strong{font-family:var(--font-d);font-weight:800;font-size:2rem;line-height:1;letter-spacing:.02em}
.airport-list span{color:var(--mute);font-size:.95rem;line-height:1.35}
.fee-band{background:var(--red);color:#fff;border-radius:6px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.fee-band p{margin:0;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem}
.fee-band p strong{font-size:2rem;font-weight:800;margin-right:6px}
.fee-band p span{display:block;font-family:var(--font-b);font-weight:400;text-transform:none;letter-spacing:0;font-size:.95rem}
.fee-band .fee-free{background:#fff;color:var(--ink);border-radius:4px;padding:10px 14px;font-size:.95rem;text-align:center}
.fee-band .fee-free strong{display:block;color:var(--red);font-size:1.5rem;margin:0}
.airport-side .loc-actions{justify-content:flex-start}
@media (max-width:900px){.airport-grid{grid-template-columns:1fr}}
@media (max-width:560px){.loc-soon,.airport-list{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
.contact-list{display:grid;gap:22px;margin-top:28px}
.contact-list dt{font-family:var(--font-d);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-d);margin-bottom:4px}
.contact-list dd{margin:0;font-size:1.25rem;font-weight:500}
.contact-list dd a{text-decoration:none}
.contact-list dd a:hover{text-decoration:underline}
.form-card{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:6px;padding:clamp(22px,3vw,34px)}
.form-card .form-title{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;margin:0 0 20px}
.form-card .field{margin-bottom:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* light-theme variant of the form card (reserve page) */
.form-card.light{background:#fff;border-color:var(--paper-3);color:var(--ink)}

/* ---------- page hero (subpages): black band, big condensed title ---------- */
.page-hero{background:var(--ink);color:#fff;padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.8rem,6.5vw,5.6rem);max-width:14ch}
.page-hero .lead{color:var(--mute-d);margin:18px 0 0}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:22px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 38px,transparent 38px 66px);
}
.page-hero .hero-copy > *{animation:rise .7s var(--ease-out) both}
.page-hero .hero-copy > :nth-child(2){animation-delay:.1s}
.page-hero .hero-copy > :nth-child(3){animation-delay:.2s}

/* ---------- requirements list (policies page, client-supplied 2026-10-02) ---------- */
.req{display:grid;gap:0;border:1px solid var(--paper-3);border-radius:6px;background:#fff;overflow:hidden}
.req > div{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:18px 22px;border-top:1px solid var(--paper-3)}
.req > div:first-child{border-top:0}
.req dt{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.req dd{margin:0;color:var(--mute)}
@media (max-width:640px){.req > div{grid-template-columns:1fr;gap:6px}}

/* ---------- FAQ accordion (policies page) ----------
   The HTML is each question as an <h3> with its answer below it: the page
   with no JS, or after the env.js failsafe. site.js puts a button inside
   each heading that shows and hides its answer (the W3C APG accordion), so
   the questions stay headings for every screen reader; a heading inside
   <summary> is not exposed consistently (Scott O'Hara, 2022). Closed answers
   are hidden="until-found" where supported, so find-in-page and links into
   an answer still reach it. */
.faq{border:1px solid var(--paper-3);border-radius:6px;background:#fff}
.faq-item + .faq-item{border-top:1px solid var(--paper-3)}
.faq-q{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.2;padding:22px 22px 10px}
.faq-a{padding:0 22px 24px;max-width:78ch}
.faq-a p{margin:0 0 14px}
.faq-a > :last-child{margin-bottom:0}
/* from first paint until site.js runs: answers start closed, and each
   question sits where its button will be (the right padding is the icon's
   room), so nothing jumps or re-wraps */
html.js:not(.boot-failed) .faq:not(.faq-on) .faq-q{display:flex;align-items:center;min-height:68px;padding:18px 62px 18px 22px}
html.js:not(.boot-failed) .faq:not(.faq-on) .faq-a{display:none}
.faq-on .faq-q{padding:0}
.faq-btn{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  min-height:68px;padding:18px 22px;border:0;border-radius:6px;background:none;
  text-align:left;cursor:pointer;transition:color var(--t-fast);
}
.faq-btn:hover{color:var(--red-deep)}
.faq-btn:focus-visible{outline-offset:-4px}
/* plus that becomes a minus; currentColor keeps it visible in forced colours */
.faq-ic{flex:none;width:20px;height:20px;color:var(--red);fill:none;stroke:currentColor;stroke-width:2.5}
.faq-ic-v{transform-box:fill-box;transform-origin:center;transition:transform var(--t-fast)}
.faq-btn[aria-expanded="true"] .faq-ic-v{transform:scaleY(0)}
/* hidden="until-found" keeps the answer's box (content-visibility, not
   display:none), so its padding goes while it's closed */
.faq-a[hidden]{padding:0}
@media (max-width:560px){
  .faq-q{padding:18px 16px 8px}
  html.js:not(.boot-failed) .faq:not(.faq-on) .faq-q{padding:16px 50px 16px 16px}
  .faq-btn{padding:16px;gap:14px}
  .faq-a{padding:0 16px 20px}
}

/* security deposit chart: a real table, three columns down to 320px wide */
.dep-table{width:100%;border-collapse:collapse;margin:4px 0 0;font-variant-numeric:tabular-nums}
.dep-table caption{
  caption-side:top;text-align:left;padding-bottom:10px;color:var(--mute);
  font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;
}
.dep-table th,.dep-table td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--paper-3)}
.dep-table thead th{
  border-top:0;background:var(--red);color:#fff;vertical-align:bottom;
  font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;
}
.dep-table tbody th{font-weight:500}
.dep-table td,.dep-table thead th + th{text-align:right}
.dep-table td{font-weight:600;white-space:nowrap}
.dep-table tbody tr:nth-child(even){background:var(--paper-2)}
@media (max-width:560px){
  .dep-table{font-size:.95rem}
  .dep-table th,.dep-table td{padding:10px 8px}
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--red);color:#fff;padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(2.2rem,5vw,4.4rem);max-width:12ch}
.cta-band p{margin:12px 0 0;color:rgba(255,255,255,.9);max-width:40ch}
.cta-band .btn-white{min-height:56px}

/* ---------- Lenis 1.3.26 (MIT) — its required stylesheet, inlined; only
   takes effect once the homepage hero starts Lenis (html.lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

/* ---------- reveal (JS adds .in via IntersectionObserver; no JS = visible) ---------- */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
html.js .reveal.in,html.js.settled .reveal,html.boot-failed .reveal{opacity:1;transform:none}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff;padding:clamp(56px,7vw,88px) 0 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line-d)}
.footer-brand img{width:150px;height:auto;margin-bottom:18px}
.footer-brand p{color:var(--mute-d);max-width:34ch;margin:0}
.footer h4,.footer .footer-h{font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;margin-bottom:16px;color:#fff}
.footer ul{display:grid;gap:10px}
.footer ul a{color:var(--mute-d);text-decoration:none;display:inline-block;padding:4px 0}
.footer ul a:hover{color:#fff;text-decoration:underline}
.footer-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;color:var(--mute-d);font-size:.9rem}
.footer-legal p{margin:0;max-width:80ch}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;text-align:center;padding:64px var(--gutter)}
.nf .display{font-size:clamp(3rem,10vw,8rem)}
.nf p{color:var(--mute);margin:18px auto 30px;max-width:38ch}

/* ==========================================================================
   REDUCED MOTION — every animated thing lands in its final state immediately
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .marquee-track{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .marquee-track ul[aria-hidden]{display:none}
  .hero-car .ghost{display:none}
  .motion-btn{display:none!important}
  html.js .reveal{opacity:1;transform:none;transition:none}
}