/* Self-hosted latin subsets. Nothing renders through a third party and nothing
   shifts on first paint. Archivo sets the headings and Inter the text. Jost and
   Tenor Sans stay for the hero film and the services heading over it.
   Archivo's file is fixed at weight 800 but keeps its width axis, which is why
   the headings ask for font-stretch:78%. Jost is one variable file for all four
   weights it is used at. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-stretch:62% 125%;font-display:swap;
  src:url('../fonts/archivo-800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:200 500;font-display:swap;
  src:url('../fonts/jost-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tenor Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tenor-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* Pacific North Coast. Tokens lifted from the approved prototype
   (handoff/prototype/Pacific North Coast v4.dc.html). */

:root{
  --bg:#0A0B0C; --panel:#0E1012; --raised:#15161A;
  --line:rgba(237,235,231,.10); --line-2:rgba(237,235,231,.20);
  --text:#EDEBE7; --text-hi:#FFFFFF; --dim:#B4B1AB; --dim-2:#8C8A85; --dim-3:#5F5D59;

  --wrap:1400px;
  --gut:clamp(22px,4.4vw,44px);

  --display:'Archivo','Arial Narrow',Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* the original pair, kept for the hero film and the services heading */
  --film-display:'Tenor Sans',Didot,'Times New Roman',serif;
  --film-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;font-stretch:78%;font-family:var(--display);letter-spacing:-.01em;text-transform:uppercase;line-height:1.04}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:2px}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--text);color:var(--bg)}
.skip:focus{left:12px;top:12px}

/* grain keeps the flat black from reading as empty */
.grain{
  position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2);margin-bottom:14px}
.measure{max-width:60ch}
.h2{font-size:clamp(16px,1.6vw,21px);margin-bottom:20px}

/* header ---------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(10,11,12,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);height:82px;display:flex;align-items:center;gap:30px}
.logo{line-height:0;flex:none}
.logo img{height:clamp(26px,2.4vw,34px);width:auto}
.logo__a{display:block;font-family:var(--display);font-size:20px;letter-spacing:.3em}
.logo__b{display:block;font-size:9.5px;letter-spacing:.42em;color:var(--dim-2);margin-top:3px}
.hdr.is-stuck{background:rgba(10,11,12,.94)}
.nav{display:flex;gap:20px;white-space:nowrap;margin-inline:auto;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#C7C4BE}
.nav a:hover,.nav a[aria-current]{color:var(--text-hi)}
.hdr__end{display:flex;align-items:center;gap:20px;flex:none}
.hdr__tel{font-size:11.5px;letter-spacing:.18em;color:#C7C4BE}
.btn{display:inline-block;padding:13px 26px;border:1px solid var(--line-2);font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--text);color:var(--bg)}
.btn--solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--solid:hover{background:var(--text-hi);border-color:var(--text-hi)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:1px;background:var(--text)}
.menu{display:none;flex-direction:column;gap:2px;padding:10px var(--gut) 26px;border-top:1px solid var(--line)}
.menu a{padding:13px 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--line)}

/* hero ------------------------------------------------------------------ */
.hero{position:relative;min-height:clamp(520px,72vh,760px);display:flex;align-items:center;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:36% 60%;animation:drift 26s ease-in-out infinite alternate}
.hero--film .hero__img{animation:none}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.82) 100%)}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero__in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,8vw,90px) var(--gut);text-align:center}
.hero__k{margin:0 0 20px;font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.hero h1{font-size:clamp(28px,5vw,58px);letter-spacing:.14em;line-height:1.18}
.hero__lede{margin:26px auto 0;max-width:56ch;font-size:clamp(15px,1.5vw,17px);color:var(--dim)}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;justify-content:center}
.page-head .hero__acts{justify-content:flex-start}
.hero__areas{margin:30px 0 0;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#D6D4CF}

/* page heads ------------------------------------------------------------ */
.page-head--img{position:relative;overflow:hidden;background:#000;padding-block:clamp(52px,6.5vw,88px)}
.page-head--img .wrap{position:relative;z-index:1}
.page-head--img .prose p{color:#C9C7C1}
.page-head__bg{position:absolute;inset:0}
.page-head__bg img{width:100%;height:100%;object-fit:cover;opacity:.46}
.page-head__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,12,.74) 0%,rgba(10,11,12,.56) 45%,rgba(10,11,12,.94) 100%)}
.foot__credit{margin:14px 0 0;font-size:11.5px;color:var(--dim-2)}
.foot__credit a{border-bottom:1px solid var(--line-2)}
.foot__credit a:hover{color:var(--text-hi)}
.page-head{padding:clamp(34px,4vw,56px) 0 clamp(24px,2.8vw,36px);border-bottom:1px solid var(--line)}
.page-head h1{max-width:22ch;font-size:clamp(30px,3.8vw,56px);line-height:.98}
.page-head .prose{margin-top:24px}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-3)}
.crumbs a:hover{color:var(--text)}

/* confirmation page ------------------------------------------------------ */
.thanks{position:relative;overflow:hidden;background:#000;text-align:center;
  padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,104px)}
.thanks__media{position:absolute;inset:0}
.thanks__media img{width:100%;height:100%;object-fit:cover;opacity:.3}
.thanks__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 38%,rgba(10,11,12,.55) 0%,rgba(10,11,12,.9) 62%,#0A0B0C 100%)}
.thanks__in{position:relative;z-index:1}
.thanks h1{margin-top:28px;font-size:clamp(26px,4vw,52px)}
.thanks__lede{margin:22px auto 0;max-width:46ch;font-size:clamp(15px,1.5vw,17px);color:var(--dim)}
.thanks__note{margin:16px auto 0;max-width:46ch;font-size:13.5px;color:var(--dim-2)}
.thanks__note a{border-bottom:1px solid var(--line-2)}
.thanks .hero__acts{justify-content:center;margin-top:34px}

/* the seal draws itself once, then holds */
.seal{width:clamp(76px,9vw,104px);height:auto;margin:0 auto;display:block;overflow:visible}
.seal__ring,.seal__tick{fill:none;stroke:var(--text);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.seal__ring{stroke:var(--line-2);stroke-width:1;stroke-dasharray:327;stroke-dashoffset:327;
  animation:sealRing 1.1s var(--ease) .1s forwards}
.seal__tick{stroke-dasharray:70;stroke-dashoffset:70;animation:sealTick .6s var(--ease) .75s forwards}
@keyframes sealRing{to{stroke-dashoffset:0}}
@keyframes sealTick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .seal__ring,.seal__tick{animation:none;stroke-dashoffset:0}
}

/* bands ----------------------------------------------------------------- */
.band{padding:clamp(38px,4.2vw,62px) 0}
.band--tight{padding:clamp(26px,3vw,40px) 0}
.band--panel{background:var(--panel);border-block:1px solid var(--line)}

/* services --------------------------------------------------------------- */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.2vw,36px)}
.svcs--five{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.svc h3{font-size:clamp(14px,1.15vw,16.5px);margin-bottom:9px}
.svc p{margin:0 0 10px;color:var(--dim);font-size:13.5px}
.micro{display:inline-block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line-2);padding-bottom:4px}
.micro:hover{color:var(--text-hi);border-color:var(--line-2)}
/* a small link, a full-size target: the hit area reaches past the text */
.micro{position:relative}
.micro::after{content:"";position:absolute;inset:-10px -4px}

/* vehicle cards ----------------------------------------------------------
   A picture, the specification as four short facts, and one button that puts
   the car into the reservation request. */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,28px)}
@media (max-width:940px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:#1B1C21;border-radius:18px;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.55)}
.card__img{display:block;overflow:hidden}
.card__img img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#111;
  transition:transform .8s var(--ease)}
.card:hover .card__img img{transform:scale(1.035)}
/* the car on its own ground: cut out of the photograph and stood on a dark
   grey, with the mark faint behind it. A black car reads by its chrome, its
   wheels and its highlights. */
.card__img--cut{background:radial-gradient(120% 90% at 50% 34%,#404246 0%,#2E3034 55%,#1D1E21 100%)}
.card__img .card__cut{position:relative;z-index:1;object-fit:contain;background:none}
/* the mark behind the car, faint, so the ground is not a plain field */
.card__img--cut{position:relative}
.card__img--cut::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/logo.png") center 26% / 90% auto no-repeat;opacity:.14}
.card__in{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;background:#1B1C21}
.card__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.card h3{font-size:19px;letter-spacing:0}
.card h3 a:hover{color:var(--text-hi)}
.card__rate{flex:0 0 auto;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
/* a starting price reads like a price, not a label: "from $59 /day" */
.card__rate--price,.vehicle__facts .price{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--dim);white-space:nowrap}
.card__rate--price b,.vehicle__facts .price b{margin:0 2px;font-weight:700;font-size:17px;line-height:1;
  letter-spacing:-.01em;color:#7CCB9C}
.card__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;
  margin:18px 0 22px;padding:18px 0 0;border-top:1px solid rgba(237,235,231,.12);list-style:none}
.card__specs li{display:flex;align-items:center;gap:10px;min-width:0;
  font-size:13.5px;letter-spacing:normal;text-transform:none;color:var(--text)}
.card__specs svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;color:var(--dim-2)}
/* an outline, not a fill: fifteen bright pills down a dark page was too much
   glare. It fills in on hover, so the action is still unmistakable. */
.card__go{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:12px 18px;border-radius:999px;background:transparent;
  border:1px solid rgba(237,235,231,.34);color:var(--text-hi);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.card__go:hover,.card:hover .card__go{background:var(--text);border-color:var(--text);color:#101114}
/* no photograph yet: a marked slot, never another car's picture */
.plate--todo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#0f0f12 0 12px,#121216 12px 24px);
  text-align:center;padding:16px}
.plate--todo span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.plate--todo em{font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim-3)}

/* browsing the fleet: dates, then filters, then the count ------------------ */
/* the booking bar: the hero's glass pill, carried down to the fleet ------- */
.dates{display:flex;align-items:center;margin:0 0 clamp(16px,1.8vw,22px);
  padding:10px 10px 10px clamp(22px,2.6vw,34px);border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.dates__field{flex:1 1 0;min-width:0;padding:8px clamp(16px,2vw,26px);border-left:1px solid rgba(255,255,255,.14)}
.dates__field--where{flex-grow:1.4;padding-left:0;border-left:0}
.dates__field label{display:block;font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#C9C7C1}
.dates__field input{display:block;width:100%;margin-top:7px;padding:0;border:0;background:none;outline:none;
  font-family:var(--sans);font-size:16px;color:#FFF;color-scheme:dark}
.dates__field input::placeholder{color:rgba(255,255,255,.5)}
.dates__field input::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
.dates__go{flex:0 0 auto;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#EDEBE7;color:#0A0B0C;transition:background .4s var(--ease),transform .4s var(--ease)}
.dates__go:hover{background:#FFF;transform:translateX(2px)}
.dates__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.dates__go-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dates__short{display:none}
.chips--filter{gap:9px;margin:0 0 clamp(16px,1.8vw,24px)}
.chip{display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip.is-active{background:var(--text);border-color:var(--text);color:var(--bg)}
.browse__count{margin:0;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-3)}
.browse__none{margin:0;font-size:14px;color:var(--dim)}
.browse{padding-top:clamp(10px,1.4vw,20px)}
.browse__none .micro{margin-left:10px}
@media (max-width:640px){
  /* phones: the same pill on one line, with short labels and a small arrow */
  .dates{flex-wrap:nowrap;padding:6px 6px 6px 16px}
  .dates__field{padding:3px 9px}
  .dates__field--where{flex-grow:1.3;padding-left:0}
  .dates__field label{font-size:8px;letter-spacing:.18em}
  .dates__field input{margin-top:3px;font-size:12.5px}
  .dates__go{width:40px;height:40px}
  .dates__long{display:none}
  .dates__short{display:inline}
  /* the filters a size down, so the seven take two rows rather than three.
     The pill is 32px tall; its hit area stays at 40. */
  .chips.chips--filter{gap:8px 6px}
  .chip{position:relative;min-height:32px;padding:6px 12px;font-size:9.5px;letter-spacing:.14em}
  .chip::after{content:"";position:absolute;inset:-4px 0}
}

/* reviews ----------------------------------------------------------------
   One at a time, set in the display face, cross-fading on the same rhythm as
   the assurances. Quoted from Google and shown as text: no boxes, no stars. */
/* the quotes share one grid cell, so the box is always as tall as the longest
   and nothing below it is ever overlapped */
.testimony{position:relative;display:grid;margin-top:clamp(14px,1.6vw,20px);
  padding:0 clamp(0px,4vw,60px) 28px;text-align:center}
.testimony::before{content:"\201C";position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  font-family:var(--display);font-size:clamp(34px,3.6vw,54px);line-height:1;color:rgba(237,235,231,.1);
  pointer-events:none}
.testimony figure{grid-area:1/1;margin:0;opacity:0;
  animation:testimonyCycle 32s infinite}
.testimony figure:nth-of-type(2){animation-delay:8s}
.testimony figure:nth-of-type(3){animation-delay:16s}
.testimony figure:nth-of-type(4){animation-delay:24s}
.testimony blockquote{margin:0 auto;max-width:48ch;font-weight:500;
  font-size:clamp(13.5px,1.35vw,18px);line-height:1.65;letter-spacing:-.005em;
  color:var(--text-hi);text-wrap:balance}
.testimony figcaption{margin-top:clamp(14px,1.5vw,20px);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim-2)}
.testimony figcaption span{color:var(--dim-3);margin-left:10px}
@keyframes testimonyCycle{
  0%{opacity:0;transform:translateY(10px)}
  2%,22%{opacity:1;transform:none}
  25%,100%{opacity:0;transform:translateY(-10px)}
}
.testimony__dots{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:9px}
.testimony__dots span{width:26px;height:1px;background:rgba(237,235,231,.18);animation:assureTick 32s infinite}
.testimony__dots span:nth-child(2){animation-delay:8s}
.testimony__dots span:nth-child(3){animation-delay:16s}
.testimony__dots span:nth-child(4){animation-delay:24s}
.testimony:hover figure,.testimony:hover .testimony__dots span{animation-play-state:paused}
.testimony__more{margin:clamp(22px,2.4vw,32px) 0 0;text-align:center}
.testimony__more a{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line-2);padding-bottom:5px}
.testimony__more a:hover{color:var(--text-hi)}
@media (prefers-reduced-motion:reduce){
  .testimony{gap:34px}
  .testimony figure{grid-area:auto;opacity:1;transform:none;animation:none}
  .testimony blockquote{font-size:15px}
  .testimony__dots{display:none}
}

/* five stars: every review on file is five */
.stars{display:inline-flex;gap:3px;color:#E3AE45;vertical-align:middle}
.stars svg{width:15px;height:15px;fill:currentColor}
.review .stars{display:flex;margin-bottom:14px}
.voice .stars{display:flex;justify-content:center;margin:0 0 18px}
.voice .stars svg{width:17px;height:17px}

/* the reviews page: every quote on its own card, the first two set large */
.leads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.quotes--all{columns:3;column-gap:clamp(16px,2vw,28px)}
.review{position:relative;break-inside:avoid;margin:0 0 clamp(16px,2vw,28px);padding:26px 26px 22px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.065) 0%,rgba(255,255,255,.015) 100%);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.leads .review{margin:0}
.review:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.review::before{content:"\201C";position:absolute;right:22px;top:4px;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:88px;line-height:1;color:var(--text-hi);opacity:.08}
.review blockquote{margin:0;padding-right:34px;font-size:14.5px;line-height:1.7;color:var(--text)}
.review--lead{padding:clamp(28px,3vw,40px) clamp(26px,3vw,40px) clamp(22px,2.4vw,30px)}
.review--lead blockquote{font-weight:500;font-size:clamp(16px,1.5vw,19px);line-height:1.6;
  letter-spacing:-.005em;color:var(--text-hi)}
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.review__avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#EDEBE7 0%,#9A9892 100%);color:#0A0B0C;
  font-family:var(--display);font-weight:800;font-stretch:78%;font-size:18px;line-height:1}
.review__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.review__who b{font-weight:600;font-size:14px;color:var(--text-hi)}
.review__who span{font-size:11.5px;color:var(--dim-2)}
.band--light .review{background:var(--panel);box-shadow:0 10px 30px rgba(10,11,12,.06)}
.band--light .review:hover{box-shadow:0 22px 50px rgba(10,11,12,.14)}
.band--light .review__avatar{background:linear-gradient(135deg,#2A2B30 0%,#0A0B0C 100%);color:#FFF}
@media (max-width:1080px){.quotes--all{columns:2}}
@media (max-width:700px){.quotes--all{columns:1}.leads{grid-template-columns:1fr}}

/* light bands ---------------------------------------------------------------
   The page alternates, so it never becomes a wall of black. A light band
   re-scopes the tokens and everything inside it adapts. Every dim value is
   checked against the light ground: the faintest, --dim-3, is 4.9:1. */
.band--light{
  --bg:#F4F2EE; --panel:#FFFFFF;
  --line:rgba(10,11,12,.10); --line-2:rgba(10,11,12,.22);
  --text:#16171A; --text-hi:#0A0B0C; --dim:#4A4843; --dim-2:#5E5B55; --dim-3:#6B6862;
  background:var(--bg);color:var(--text)}
.band--light + .band--light{border-top:1px solid var(--line)}
/* dark objects on a light band carry the dark palette with them */
.band--light .card,.band--light .dates{
  --bg:#0A0B0C; --panel:#0E1012;
  --line:rgba(237,235,231,.10); --line-2:rgba(237,235,231,.20);
  --text:#EDEBE7; --text-hi:#FFFFFF; --dim:#B4B1AB; --dim-2:#8C8A85; --dim-3:#5F5D59;
  color:var(--text)}
.band--light .card{box-shadow:0 10px 30px rgba(10,11,12,.12)}
.band--light .card:hover{box-shadow:0 22px 50px rgba(10,11,12,.22)}
.band--light .dates{box-shadow:0 10px 30px rgba(10,11,12,.14)}
.band--light .btn{border-color:var(--line-2);color:var(--text)}
.band--light .btn--solid{background:var(--text);border-color:var(--text);color:#F4F2EE}

/* the home page after the fleet ---------------------------------------------
   Three short facts, two image panels, a quote over a photograph, and the areas.
   Built after the structure of the big rental sites, in this site's palette. */
.props{border-top:1px solid var(--line)}
.props + .promos{border-top:0;padding-top:0}
.props__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px)}
.props__grid > div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.props__ic{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--text)}
.props__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.props__grid b{display:block;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:17px;
  line-height:1.04;letter-spacing:0;text-transform:uppercase;color:var(--text-hi);padding-top:2px}
.props__grid p{margin:6px 0 0;font-size:13px;line-height:1.65;color:var(--dim)}

.promos{padding-bottom:clamp(20px,2.4vw,34px)}
.promos__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
.promo{position:relative;overflow:hidden;border-radius:18px;min-height:clamp(300px,30vw,420px);
  display:flex;align-items:flex-end;background:#000}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.promo:hover img{transform:scale(1.04)}
.promo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,12,.05) 0%,rgba(10,11,12,.35) 45%,rgba(10,11,12,.9) 100%)}
.promo__in{position:relative;z-index:1;padding:clamp(22px,2.6vw,34px);max-width:40ch}
.promo h2{font-size:clamp(24px,3vw,44px);color:#FFF}
.promo .btn--solid{background:#EDEBE7;border-color:#EDEBE7;color:#0A0B0C}
.promo .btn--solid:hover{background:#FFF}
.promo p{margin:10px 0 18px;font-size:13.5px;line-height:1.65;color:#D2D0CA}

.voice{position:relative;overflow:hidden;padding:clamp(70px,9vw,130px) 0;background:#000;text-align:center}
.voice__media{position:absolute;inset:0}
.voice__media img{width:100%;height:100%;object-fit:cover;opacity:.32}
.voice__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 80% at 50% 50%,rgba(10,11,12,.35) 0%,rgba(10,11,12,.85) 100%)}
.voice__in{position:relative;z-index:1}
.voice .testimony blockquote{font-size:clamp(16px,2vw,26px);max-width:40ch}

.areas-block__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.areas-block h2{font-size:clamp(24px,3vw,44px)}
.areas-block p{margin:16px 0 0;max-width:48ch;font-size:13.5px;line-height:1.75;color:var(--dim)}
/* areas by region: pill tabs, then the places as a quiet grid. Without script
   every panel shows, so no link is ever hidden from a reader or a crawler. */
.regions__tabs{display:flex;flex-wrap:wrap;gap:10px}
.regions__tab{min-height:44px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:13px;color:var(--dim);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.regions__tab:hover{color:var(--text-hi);border-color:var(--line-2)}
.regions__tab[aria-selected="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.regions__panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;
  margin-top:clamp(22px,2.4vw,30px)}
.js .regions__panel[data-idle]{display:none}
.regions__panel a{font-size:14px;font-weight:400;line-height:1.4;color:var(--text-hi);
  text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .35s var(--ease),text-decoration-color .35s var(--ease)}
.regions__panel a:hover{color:var(--dim);text-decoration-color:currentColor}
.regions__all{display:inline-block;margin-top:clamp(24px,2.8vw,36px);font-size:13px;color:var(--text);
  border-bottom:1px solid var(--line-2);padding-bottom:3px}
.regions__all:hover{color:var(--text-hi);border-color:var(--text)}
@media (max-width:880px){
  .props__grid,.promos__grid,.areas-block__grid{grid-template-columns:1fr}
  /* the facts, compact */
  .props__grid{gap:14px}
  .props__grid > div{column-gap:12px}
  .props__ic{width:32px;height:32px}
  .props__ic svg{width:15px;height:15px}
  .props__grid b{font-size:15px}
  .props__grid p{margin-top:3px;font-size:12px;line-height:1.55}
  /* the two panels stay side by side on a phone, scaled down to fit */
  .promos__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .promo{min-height:clamp(250px,72vw,330px);border-radius:14px}
  .promo .btn::after{content:"";position:absolute;inset:-3px 0}
  .promo__in{padding:14px 12px}
  .promo h2{font-size:clamp(17px,5vw,22px)}
  .promo p{margin:7px 0 12px;font-size:11px;line-height:1.5}
  .promo .btn{position:relative;display:flex;justify-content:center;width:100%;min-height:36px;padding:8px 6px;
    font-size:8px;letter-spacing:.1em;text-align:center;white-space:normal;line-height:1.35}
}
@media (max-width:1080px){.regions__panel{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* small print on city and service pages ----------------------------------- */
.also{margin:22px 0 0;font-size:13px;color:var(--dim-2)}
.also a{border-bottom:1px solid var(--line);margin-left:10px}
.also a:hover{color:var(--text-hi)}
.note{margin:18px 0 0;padding-left:16px;border-left:1px solid var(--line-2);font-size:13.5px;color:var(--dim)}
.covers{margin:26px 0 0;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-3)}

/* "or similar": the photograph is of a car of that model in the fleet, not
   necessarily the one that turns up, which is how every rental company says it. */
.sim{font-family:var(--sans);font-size:11px;font-weight:400;font-stretch:100%;letter-spacing:.02em;
  text-transform:none;color:var(--dim-2);white-space:nowrap}
.card__top h3 .sim{display:block;margin-top:3px}
label > .sim{display:block;margin-top:6px;white-space:normal}
.sim--line{max-width:52ch;margin:10px 0 0;font-size:12px;line-height:1.6;white-space:normal}

/* the privacy page: one column of plain prose, measured so it reads */
.legal{max-width:70ch;padding-block:clamp(10px,2vw,26px)}
.legal h1{margin-bottom:clamp(20px,2.4vw,30px)}
.legal__intro p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--text)}
.legal__part{margin-top:clamp(30px,3.4vw,46px)}
.legal__part h2{font-size:clamp(15px,1.4vw,18px);margin-bottom:12px}
.legal__part p{margin:0 0 12px;font-size:13.5px;line-height:1.8;color:var(--dim)}
.legal__part a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;text-underline-offset:4px}
.legal__part a:hover{text-decoration-color:currentColor}
.legal__date{margin-top:20px;font-size:11.5px;color:var(--dim-2)}

/* the places we deliver to, as a sentence. A pill for every city read as a
   wall; a line of links says the same thing and keeps every link. */
.area-line{margin:20px 0 0;max-width:68ch;font-size:14px;line-height:1.75;color:var(--dim)}
.area-line a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color .35s var(--ease),text-decoration-color .35s var(--ease)}
.area-line a:hover{color:var(--text-hi);text-decoration-color:currentColor}

/* chip rows: areas, services, anywhere a set of links sits together --------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips a{display:inline-flex;align-items:center;min-height:42px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--line-2);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);transition:border-color .45s var(--ease),color .45s var(--ease),background .45s var(--ease)}
.chips a:hover{border-color:var(--line-2);color:var(--text-hi);background:rgba(255,255,255,.03)}

/* service areas: an index, one line per area, rather than a grid of boxes.
   A list has no ragged last row, and it reads as a directory. */
.areas{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.area{border-bottom:1px solid var(--line)}
.area > a{display:grid;grid-template-columns:58px minmax(0,1fr) auto 26px;align-items:center;
  gap:clamp(14px,2.2vw,32px);padding:clamp(20px,2.4vw,30px) clamp(4px,1.2vw,16px);
  transition:background .55s var(--ease)}
.area > a:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)}
.band--light .area > a:hover{background:linear-gradient(90deg,rgba(10,11,12,.045),rgba(10,11,12,0) 70%)}
.area__n{font-size:10px;letter-spacing:.24em;color:var(--dim-3)}
.area__name{margin:0;font-size:clamp(19px,2vw,28px);line-height:1.08;
  transition:transform .55s var(--ease)}
.area > a:hover .area__name{transform:translateX(6px)}
.area__hoods{display:block;margin-top:10px;max-width:64ch;font-size:13px;line-height:1.7;color:var(--dim-2)}
.area__tag{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-3)}
.area__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.area__tag--in{color:var(--text)}
.area__tag--in::before{box-shadow:0 0 0 3px rgba(237,235,231,.12)}
.area__go{justify-self:end;color:var(--dim-3);font-size:14px;
  transition:transform .55s var(--ease),color .55s var(--ease)}
.area > a:hover .area__go{transform:translateX(5px);color:var(--text-hi)}


/* a car's page ------------------------------------------------------------
   After the product pages of the big rental sites: the photographs on the
   left; the name, the facts, what every rental includes and the two ways to
   book on the right; similar cars underneath. */
.vehicle{padding:clamp(22px,2.6vw,34px) 0 clamp(48px,5.5vw,80px)}
.vehicle .crumbs{margin-bottom:clamp(18px,2vw,26px)}
.vehicle__grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.vehicle__grid--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.vehicle__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.vehicle__tags > *{display:inline-flex;align-items:center;min-height:30px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--line-2);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.vehicle__tags a{transition:color .35s var(--ease),border-color .35s var(--ease)}
.vehicle__tags a:hover{color:var(--text-hi);border-color:var(--text)}
.vehicle h1{font-size:clamp(32px,3.6vw,54px);line-height:.98}
.vehicle h1 span{display:block;margin-top:12px;font-family:var(--sans);font-weight:500;font-stretch:normal;
  font-size:clamp(12px,1vw,14px);line-height:1.3;letter-spacing:.2em;color:var(--dim)}
.vehicle__lede{margin:18px 0 0;max-width:44ch;font-size:16.5px;line-height:1.6;color:var(--dim)}
.vehicle__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:26px 0 0;
  padding:24px 0 0;border-top:1px solid var(--line);list-style:none}
.vehicle__facts li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center}
.vehicle__facts svg{grid-row:span 2;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;color:var(--dim-2)}
.vehicle__facts span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim-2)}
.vehicle__facts b{font-weight:600;font-size:15px;line-height:1.3;color:var(--text-hi)}
.vehicle__box{margin-top:26px;padding:20px 22px 22px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(255,255,255,.03)}
.vehicle__box h2{margin:0 0 14px;font-family:var(--sans);font-weight:600;font-stretch:normal;font-size:10.5px;
  line-height:1.3;letter-spacing:.22em;color:var(--dim)}
.vehicle__box ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:0;padding:0;list-style:none}
.vehicle__box li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--text)}
.vehicle__box svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--text-hi)}
.vehicle__acts{display:grid;gap:10px;margin-top:22px}
.vehicle__acts .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:999px}
.vehicle__acts svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pdp--single .pdp__stage img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pdp--single .plate--todo{aspect-ratio:3/2}
.vehicle-about__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,4vw,72px);align-items:start}
.vehicle-about h2{font-size:clamp(24px,3vw,40px)}
.vehicle-about .prose p{margin:0 0 14px;max-width:62ch;font-size:15px;line-height:1.75;color:var(--dim)}
.vehicle-about .prose strong{font-weight:600;color:var(--text-hi)}
.vehicle-about .prose a{border-bottom:1px solid var(--line-2)}
.vehicle-about .chips{margin-top:18px}
.similar__all{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,2.6vw,34px);padding-bottom:5px;
  border-bottom:1px solid var(--line-2);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.similar__all:hover{color:var(--text-hi);border-color:var(--text)}
@media (max-width:1080px){.vehicle__grid,.vehicle__grid--wide,.vehicle-about__grid{grid-template-columns:1fr}}
@media (max-width:640px){.vehicle__box ul{grid-template-columns:1fr}.vehicle__facts{gap:14px 16px}}
/* On a phone the reservation is the point of the page, so it comes straight
   under the name instead of below the whole specification. */
@media (max-width:880px){
  .vehicle__info{display:flex;flex-direction:column}
  .vehicle__tags{order:1}
  .vehicle h1{order:2}
  .vehicle__info .sim--line{order:3}
  .vehicle__acts{order:4;margin-top:20px}
  .vehicle__lede{order:5}
  .vehicle__facts{order:6}
  .vehicle__box{order:7}
}

/* section headings, set large in the display face ----------------------- */
.section-title{margin-bottom:clamp(20px,2.2vw,30px);font-size:clamp(24px,3vw,40px)}
.section-title--center{text-align:center}
.section-lede{margin:-8px 0 clamp(22px,2.4vw,32px);max-width:62ch;font-size:15px;line-height:1.7;color:var(--dim)}

/* the chauffeur page ------------------------------------------------------
   After the big chauffeur companies' own pages: a request form over the
   photograph, the occasions as picture cards, the reasons in a dark band, the
   cars, and how a booking runs. */
.ride-hero{position:relative;overflow:hidden;background:#000;padding:clamp(22px,2.6vw,34px) 0 clamp(52px,6vw,92px)}
.ride-hero > .wrap{position:relative;z-index:1}
.ride-hero__grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(28px,5vw,88px);
  align-items:center;margin-top:clamp(18px,2.4vw,34px)}
.ride-hero h1{font-size:clamp(34px,4.4vw,64px);line-height:.98}
.ride-hero__lede{margin:18px 0 0;max-width:42ch;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:#D6D4CF}
.ride-hero .hero__acts{justify-content:flex-start}
.ride{order:-1;padding:clamp(20px,2vw,26px);border-radius:18px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);color:#FFF}
.ride__title{margin:0 0 16px;font-family:var(--sans);font-weight:600;font-stretch:normal;font-size:11px;
  line-height:1.3;letter-spacing:.2em;color:#FFF}
.ride__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.ride__field{display:block;min-width:0}
.ride__field--wide{grid-column:1/-1}
.ride__field span{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#E4E2DD}
.ride__field select,.ride__field input{display:block;width:100%;height:48px;padding:0 14px;
  border:1px solid rgba(255,255,255,.26);border-radius:10px;background-color:rgba(255,255,255,.05);
  font:inherit;font-size:16px;color:#FFF;color-scheme:dark;outline:none;appearance:none;
  transition:border-color .3s var(--ease)}
.ride__field select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.ride__field select:hover,.ride__field input:hover{border-color:rgba(255,255,255,.45)}
.ride__field select:focus,.ride__field input:focus{border-color:#FFF}
.ride__field input::placeholder{color:rgba(255,255,255,.55)}
.ride__field option{color:#111}
.ride button{width:100%;height:52px;margin-top:16px;border-radius:10px;background:#EDEBE7;color:#0A0B0C;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .3s var(--ease)}
.ride button:hover{background:#FFF}
.ride__note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#C9C7C1}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:center;
  margin-bottom:clamp(48px,5.4vw,80px)}
.split .prose p{margin:0 0 14px;max-width:58ch;font-size:15px;line-height:1.75;color:var(--dim)}
.split__img{margin:0}
.split__img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px}
.occasions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.occasion{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:var(--panel);
  box-shadow:0 10px 30px rgba(10,11,12,.08)}
.occasion img{width:100%;aspect-ratio:3/2;object-fit:cover}
.occasion__in{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.occasion h3{margin-bottom:10px;font-size:21px}
.occasion p{margin:0 0 18px;font-size:14px;line-height:1.65;color:var(--dim)}
.occasion .btn{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:auto;border-radius:999px}
.why{border-block:1px solid var(--line)}
.why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,40px)}
.why__item{text-align:center}
.why__ic{display:inline-grid;place-items:center;width:54px;height:54px;margin-bottom:16px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--text-hi)}
.why__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.why__item h3{margin-bottom:8px;font-size:19px}
.why__item p{margin:0 auto;max-width:30ch;font-size:13.5px;line-height:1.65;color:var(--dim)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.steps li{padding:22px 22px 24px;border-radius:16px;background:var(--panel);box-shadow:0 10px 30px rgba(10,11,12,.06)}
.steps__n{display:block;margin-bottom:14px;font-family:var(--display);font-weight:800;font-stretch:78%;
  font-size:32px;line-height:1;color:var(--dim-3)}
.steps h3{margin-bottom:8px;font-size:19px}
.steps p{margin:0;font-size:13.5px;line-height:1.65;color:var(--dim)}
@media (max-width:1080px){
  .ride-hero__grid,.split{grid-template-columns:1fr}
  .ride{order:0;max-width:560px}
  .occasions,.why__grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.occasions,.steps{grid-template-columns:1fr}}

/* the car's own photographs ------------------------------------------------
   A shop's product gallery: one main photograph that swipes, and a strip of
   thumbnails under it. The track is a native scroll-snap row, so it swipes on
   a phone and scrolls with no script at all; the script adds the thumbnails,
   the arrows and the count. Tall sets sit in a narrower column than wide ones
   so the photograph never runs far past the fold. */
.pdp{min-width:0}
.pdp__stage{position:relative;overflow:hidden;border-radius:14px;background:var(--panel)}
.pdp__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;outline-offset:-3px}
.js .pdp__track{scrollbar-width:none}
.js .pdp__track::-webkit-scrollbar{display:none}
.pdp__slide{flex:0 0 100%;margin:0;scroll-snap-align:start}
.pdp__slide img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp--wide .pdp__slide img{aspect-ratio:3/2}
.pdp__arrow,.pdp__count,.pdp__thumbs{display:none}
.js .pdp__arrow{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;
  border-radius:50%;background:rgba(10,11,12,.5);backdrop-filter:blur(8px);color:#FFF;
  transition:background .35s var(--ease),opacity .35s var(--ease)}
.pdp__arrow:hover{background:rgba(10,11,12,.8)}
.pdp__arrow:disabled{opacity:0;pointer-events:none}
.pdp__arrow--prev{left:14px}
.pdp__arrow--next{right:14px}
.pdp__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.js .pdp__count{position:absolute;right:14px;bottom:14px;display:block;margin:0;padding:5px 11px;
  border-radius:999px;background:rgba(10,11,12,.55);backdrop-filter:blur(8px);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#FFF}
.js .pdp__thumbs{position:relative;display:flex;gap:10px;margin-top:12px;padding-bottom:10px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.pdp__thumb{flex:0 0 auto;width:72px;border-radius:8px;overflow:hidden;scroll-snap-align:start;opacity:.5;
  transition:opacity .35s var(--ease),box-shadow .35s var(--ease)}
.pdp--wide .pdp__thumb{width:96px}
.pdp__thumb img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pdp--wide .pdp__thumb img{aspect-ratio:3/2}
.pdp__thumb:hover{opacity:.85}
.pdp__thumb:focus-visible{outline-offset:-2px}
.pdp__thumb[aria-current]{opacity:1;box-shadow:inset 0 0 0 2px var(--text)}
/* one column on a tablet: a tall set would fill the screen, so it is capped */
@media (max-width:1080px){.pdp:not(.pdp--wide){width:100%;max-width:560px;margin-inline:auto}}
@media (max-width:640px){.js .pdp__arrow{display:none}}

/* statement ------------------------------------------------------------- */
.statement{position:relative;text-align:center;padding:clamp(72px,8vw,112px) 0;background:#0D0E11;border-block:1px solid var(--line)}
.statement::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(115% 85% at 50% 38%,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 38%,rgba(255,255,255,0) 68%)}
.statement .wrap{position:relative}
/* the line on its own: the statement's surface, a third of its height */
.statement--slim{padding:clamp(22px,2.6vw,38px) 0;border-bottom:0}
.statement--slim h2{font-size:clamp(17px,2.2vw,34px);line-height:1.24;max-width:24ch;margin-inline:auto}
.statement h2{max-width:none;font-size:clamp(20px,3.1vw,62px);line-height:1.3;letter-spacing:.06em;text-wrap:balance}
.statement p{margin:clamp(24px,2.6vw,34px) auto 0;max-width:58ch;font-size:15.5px;color:var(--dim)}
.statement .chips{justify-content:center;margin-top:clamp(28px,3vw,40px)}

/* q&a -------------------------------------------------------------------- */
.qas{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{display:flex;align-items:baseline;gap:18px;padding:19px 0;cursor:pointer;font-weight:600;font-size:15px;letter-spacing:-.005em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";margin-left:auto;font-size:19px;color:var(--dim-2)}
.qa[open] summary::after{content:"\2013"}
.qa__n{font-family:var(--sans);font-size:11px;letter-spacing:.24em;color:var(--dim-2);width:28px;flex:none}
.qa p{margin:0;padding:0 46px 22px;max-width:78ch;font-size:14.5px;color:var(--dim)}

/* cta + contact ---------------------------------------------------------- */
.cta{background:var(--panel);border-top:1px solid var(--line);padding:clamp(38px,4.2vw,62px) 0}
.cta__in{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(16px,1.6vw,21px);margin-bottom:9px}
.cta p{margin:0;color:var(--dim);max-width:52ch}
.cta__acts{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta__tel{font-size:13px;letter-spacing:.14em}
.cta__tel span{color:var(--dim-3);margin-left:10px}

.contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.form label{display:block;background:var(--bg);padding:18px 20px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim-2)}
.form__wide,.form button,.form__note{grid-column:1/-1}
.form input,.form textarea{width:100%;margin-top:9px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--text);outline:none;letter-spacing:normal;text-transform:none}
.form textarea{resize:vertical}
.form button{margin:0;padding:18px;background:var(--text);color:var(--bg)}
.form__note{background:var(--bg);margin:0;padding:14px 20px;font-size:12.5px;color:var(--dim-3)}
.contact__side h2{font-size:13px;letter-spacing:.06em;color:var(--dim-2);margin:26px 0 8px}
.contact__side h2:first-child{margin-top:0}
.contact__side a{border-bottom:1px solid var(--line-2)}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:3px 0}

/* footer ----------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--bg)}
.foot__in{max-width:var(--wrap);margin-inline:auto;padding:clamp(48px,6vw,72px) var(--gut) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:40px}
.foot h2{font-size:12px;letter-spacing:.06em;color:var(--dim-2);margin-bottom:16px}
.foot__in a{display:block;padding:5px 0;font-size:14px;color:var(--dim)}
.foot__in a:hover{color:var(--text-hi)}
.foot__logo{height:30px;width:auto}
.foot__blurb{margin:20px 0 0;max-width:34ch;font-size:14px;color:var(--dim-2)}
.foot__hours{display:block;padding:5px 0;font-size:14px;color:var(--dim-2)}
.foot__base{max-width:var(--wrap);margin-inline:auto;padding:22px var(--gut) 44px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}

/* responsive -------------------------------------------------------------- */
@media (max-width:1080px){
  .svcs:not(.svcs--five){grid-template-columns:1fr;gap:30px}
  .svcs--five{gap:26px}
  .contact{grid-template-columns:1fr}
}
/* eight nav items need the room: below this the links go behind the burger,
   which is earlier than the rest of the layout changes */
@media (max-width:1100px){
  .nav,.hdr__tel{display:none}
  .hdr__in{gap:16px;justify-content:space-between}
  .hdr__end{margin-left:auto}
  .burger{display:flex}
  .js .menu[hidden]{display:none}
  .menu{display:flex}
}
@media (max-width:880px){
  .hero{min-height:clamp(460px,78vh,640px)}
  .cta__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  /* the statement carries the section on a phone: the line gets bigger, the
     supporting copy smaller, and the place names shrink to a dense block */
  .statement h2{font-size:31px;line-height:1.14;letter-spacing:.04em}
  .statement p{margin-top:20px;max-width:34ch;font-size:13px;line-height:1.65}
  .statement .chips{gap:6px;margin-top:26px}
  .statement .chips a{min-height:30px;padding:5px 9px;font-size:8.5px;letter-spacing:.14em}
  .promise{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .hdr__end .btn{padding:11px 18px}
  .qa summary{gap:14px;font-size:14px}
  .qa p{padding:0 0 24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .grain{display:none}
  .hero__img{animation:none}
}

/* ==========================================================================
   Home page, ported from the approved prototype: load-in, film hero with the
   booking bar and services panel, and the rotating assurances line.
   ========================================================================== */

/* load-in */
.intro{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:center;justify-content:center}
.intro__mark{text-align:center;will-change:transform,opacity}
.intro__mark img{width:clamp(220px,34vw,520px);height:auto;opacity:0;transform:translateY(18px) scale(1.02);animation:introIn 1.1s var(--ease) both}
@keyframes introIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.intro__mark img{animation:none;opacity:1;transform:none}}

/* film hero */
.hero--film{min-height:calc(100svh - 82px);align-items:stretch}
.hero--film .hero__in{display:flex;flex-direction:column;justify-content:flex-start;text-align:center;max-width:1164px;padding:clamp(52px,7vw,96px) 32px 0}
.hero--film::after{background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.4) 74%,rgba(0,0,0,.72) 100%)}
.hero--film h1{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,34px);font-family:var(--sans);font-weight:200;font-size:clamp(21px,3.4vw,44px);line-height:1.3;letter-spacing:.16em;color:var(--text-hi)}
.hero--film h1 i{flex:1;max-width:130px;height:1px;background:rgba(255,255,255,.32)}
/* The film keeps the original pair: the thin Jost title, the booking bar, and
   the Tenor Sans heading on the services panel. Everything else, the three
   services under that heading included, is set in Archivo and Inter. */
.hero__in{--sans:var(--film-sans);--display:var(--film-display);font-family:var(--sans);font-weight:300}
.hero__panel .eyebrow{font-family:var(--film-sans);font-weight:300}
.hero__panel .h2{font-family:var(--film-display);font-weight:400;font-stretch:normal;letter-spacing:.12em;line-height:1.46}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;margin-top:30px;width:100%}
.hero__foot > span{flex:1 1 0;min-width:0}
.hero__foot p{flex:0 1 auto;margin:0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#D6D4CF;text-align:center}
.hero__foot a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#DCDAD5;white-space:nowrap}
.hero__foot a:hover{color:var(--text-hi)}

/* booking bar */
.bookbar{display:flex;align-items:flex-end;gap:12px;width:100%;margin-top:40px;padding:22px 22px 24px;
  border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);color:#FFFFFF;text-align:left}
.bookbar__field{flex:1 1 0;min-width:0}
.bookbar__field label{display:block;margin:0 0 8px;font-size:12.5px;font-weight:500;letter-spacing:.01em;
  text-transform:none;color:#E4E2DD;white-space:nowrap}
.bookbar__box{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;
  border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(255,255,255,.04);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.bookbar__box:hover{border-color:rgba(255,255,255,.42)}
.bookbar__box:focus-within{border-color:#FFFFFF;background:rgba(255,255,255,.08)}
.bookbar__box svg{flex:0 0 auto;width:19px;height:19px;fill:none;stroke:#FFFFFF;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.bookbar__box select,.bookbar__box input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;
  font-family:var(--sans);font-size:15px;font-weight:400;color:#FFFFFF;outline:none;appearance:none;
  color-scheme:dark;text-align:left;letter-spacing:normal;text-transform:none;cursor:pointer;text-overflow:ellipsis}
.bookbar__box input::placeholder{color:rgba(255,255,255,.55)}
.bookbar option{color:#111}
.bookbar button{flex:0 0 auto;height:54px;padding:0 32px;border:0;border-radius:10px;background:#EDEBE7;
  color:#0A0B0C;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s var(--ease)}
.bookbar button:hover{background:#FFFFFF}

/* services panel over the film */
.hero__panel{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,12,.78) 0%,rgba(10,11,12,.6) 50%,rgba(10,11,12,.86) 100%)}
.hero__panel .svcs{padding-top:26px;border-top:1px solid rgba(237,235,231,.18)}

/* the review dots tick on the same rhythm the old assurance line used */
@keyframes assureTick{0%{background:rgba(237,235,231,.18)}3%,23%{background:rgba(237,235,231,.7)}27%,100%{background:rgba(237,235,231,.18)}}

/* the Vancouver band: heading left, the promise broken out as a numbered
   manifest on the right, so it reads as three facts rather than a paragraph */
.manifest{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,3.6vw,64px);align-items:start}
.statement--slim + .band{padding-top:clamp(22px,2.6vw,38px)}
.manifest h2{font-size:clamp(24px,3vw,40px)}
.manifest__lede{margin:20px 0 0;max-width:46ch;font-size:13.5px;line-height:1.75;color:var(--dim)}
.chips--areas{justify-content:flex-start;margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.manifest__links{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:20px}
.manifest__links a{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid rgba(237,235,231,.28);padding-bottom:5px}
.manifest__links a:hover{color:var(--text-hi);border-color:rgba(237,235,231,.6)}
.manifest__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.manifest__list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.manifest__n{font-size:10px;letter-spacing:.24em;color:var(--dim-3);padding-top:4px}
.manifest__list b{display:block;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:16px;line-height:1.1;letter-spacing:0;text-transform:uppercase;margin-bottom:5px}
.manifest__list p{margin:0;font-size:13px;line-height:1.65;color:var(--dim)}

@media (max-width:880px){
  /* the welcome line holds one line on a phone */
  .hero--film .hero__k{font-size:10px;letter-spacing:.2em;white-space:nowrap}
  /* phones: a compact bar, so the car still shows beneath it */
  .bookbar{flex-wrap:wrap;gap:9px 8px;margin-top:22px;padding:12px;border-radius:14px}
  .bookbar__field{flex:1 1 calc(50% - 4px)}
  .bookbar__field label{margin-bottom:4px;font-size:10.5px}
  .bookbar__box{height:38px;padding:0 10px;gap:0;border-radius:8px}
  .bookbar__box svg{display:none}
  .bookbar__box select,.bookbar__box input{font-size:13px}
  .bookbar button{flex:1 1 100%;height:40px;border-radius:8px;font-size:10.5px}
  .bookbar{background:rgba(255,255,255,.07);backdrop-filter:blur(7px)}
  /* Phones: the photograph carries the hero, so the scrim and the bar's blur
     both come back a stop. The type is white on a night shot and still reads. */
  .hero--film::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 24%,rgba(0,0,0,.26) 52%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.62) 100%)}
  .hero__panel .svcs{grid-template-columns:1fr;gap:20px}
  .manifest{grid-template-columns:1fr;gap:24px}
  .area > a{grid-template-columns:40px minmax(0,1fr);row-gap:12px;padding:22px 2px}
  .area__tag{grid-column:2}
  .area__go{display:none}
  .hero--film .hero__in{padding-bottom:26px}
  .hero__foot{flex-direction:column;gap:12px;margin-top:auto}
  .hero__foot span{display:none}
  .hero__foot a{justify-content:center}
}