/* Kaizen — vehicle search. Self-contained; nothing here touches WordPress. */

:root{
  --blue:#0B62F5; --blue-dark:#0847B8; --blue-soft:#E4EDFF;
  --ink:#0C1826; --soft:#44566B; --muted:#7C8DA3;
  --ground:#F4F7FB; --surface:#fff; --line:#DCE5F0;
  --good:#0E7A54; --shadow:0 20px 50px -22px rgba(12,24,38,.30);
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--ground); color:var(--soft);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",sans-serif;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:var(--blue)}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* header */
header.bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.bar .wrap{display:flex;align-items:center;gap:20px;height:72px;position:relative}
header.bar img{width:175px;height:auto;display:block}
.brand{display:flex;align-items:center;flex:none}

/* hamburger — hidden until the nav collapses */
.navtoggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;flex:none;
  width:44px;height:44px;padding:0 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
}
.navtoggle span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .18s,opacity .18s}
.navtoggle:hover{border-color:var(--muted)}
.navtoggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.on span:nth-child(2){opacity:0}
.navtoggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header.bar .ph{margin-left:auto;font-weight:600;color:var(--ink);text-decoration:none;font-family:Archivo}
header.bar .ph span{color:var(--muted);font-weight:400;font-size:.85rem;display:block;text-align:right}

/* search panel */
.search{background:var(--ink);padding:26px 0 30px}
.search h1{color:#fff;font-size:clamp(1.35rem,3vw,1.9rem);margin-bottom:4px}
.search .sub{color:#93A9C2;font-size:.95rem;margin-bottom:18px}
.panel{
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr .9fr auto;gap:11px;align-items:end;
}
.f label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f input,.f select{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:11px 12px;height:44px;appearance:none;
}
.f select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%237C8DA3'><path d='M6 8 0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.f input:hover,.f select:hover{border-color:var(--muted)}
.f input:focus,.f select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,98,245,.15);outline:none}
.go{
  height:44px;padding:0 24px;border:0;border-radius:9px;background:var(--blue);color:#fff;
  font-family:Archivo;font-weight:700;font-size:.95rem;cursor:pointer;white-space:nowrap;
}
.go:hover{background:var(--blue-dark)}
.go[disabled]{opacity:.6;cursor:default}

/* results */
main{padding:28px 0 60px}
.summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.summary .count{font-family:Archivo;font-weight:700;color:var(--ink);font-size:1.05rem}
.summary .meta{color:var(--muted);font-size:.92rem}
.summary .sp{margin-left:auto}
.summary select{font-family:inherit;font-size:.9rem;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}

.rows{display:grid;gap:14px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:grid;grid-template-columns:210px 1fr 210px;gap:22px;align-items:center;transition:border-color .15s;
}
.card:hover{border-color:var(--blue)}
.card .pic{
  height:130px;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* contain, never cover: these are studio photos and cropping into them is
   what produced the dark band around the car */
.card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  padding:6px;opacity:0;transition:opacity .18s}
.card .pic img.on{opacity:1}
.card .pic .nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;
  border-radius:50%;background:rgba(12,24,38,.55);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.card:hover .pic .nav,.card .pic:focus-within .nav{opacity:1}
.card .pic .nav:hover{background:rgba(12,24,38,.85)}
.card .pic .prev{left:6px}.card .pic .next{right:6px}
.card .pic .none{color:var(--muted);font-size:.78rem}
.card h3{color:var(--ink);font-size:1.28rem;font-weight:700;margin-bottom:5px}
.card .mileage{font-size:.9rem;color:var(--soft);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--ground);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;font-size:.82rem;color:var(--soft);
}
.chip svg{flex:none;color:var(--muted)}
.card .models{font-size:.87rem;color:var(--muted)}
.buy{text-align:right;display:grid;gap:9px;justify-items:stretch}
.buy .amt{font-family:Archivo;font-size:1.85rem;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.buy .per{font-size:.8rem;color:var(--muted);margin-top:4px}
.buy .tot{font-size:.84rem;color:var(--good);font-weight:600;margin-top:2px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:Archivo;font-weight:600;font-size:.92rem;padding:12px 18px;border-radius:9px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;
}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}

/* states */
.state{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:44px 26px;text-align:center;color:var(--soft);
}
.state h2{color:var(--ink);font-size:1.2rem;margin-bottom:8px}
.state.err{border-color:#F0C2C2;background:#FEF6F6}
.state.err h2{color:#9B2222}
.state code{display:block;margin-top:12px;font-size:.8rem;color:var(--muted);word-break:break-all}
.skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:grid;grid-template-columns:210px 1fr 210px;gap:22px;align-items:center}
.skel div{background:linear-gradient(90deg,var(--ground),#E6EDF6,var(--ground));background-size:200% 100%;
  border-radius:8px;animation:sh 1.2s linear infinite}
.skel .a{height:130px}.skel .b{height:74px}.skel .c{height:92px}
@keyframes sh{to{background-position:-200% 0}}


@media (max-width:1080px){
  .panel{grid-template-columns:1fr 1fr 1fr;}
  .panel .go{grid-column:1/-1;width:100%}
  .card{grid-template-columns:170px 1fr;}
  .buy{grid-column:1/-1;text-align:left;grid-template-columns:1fr 1fr;align-items:center}
  .buy .price-wrap{grid-column:1/-1}
}
@media (max-width:640px){
  header.bar .wrap{height:62px}
  header.bar img{width:140px}
  .panel{grid-template-columns:1fr;padding:14px}
  .card{grid-template-columns:1fr;gap:14px}
  .buy{grid-template-columns:1fr}
  .card .pic{height:150px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* message shown when a booking button is pressed on the read-only page */
.offmsg{font-size:.8rem;color:var(--muted);text-align:center;margin-top:2px}

/* photo-count badge */
.card .pic{position:relative}
.picn{position:absolute;left:8px;top:8px;background:rgba(12,24,38,.72);color:#fff;
  font-size:.7rem;padding:3px 8px;border-radius:6px}

/* ===== vehicle detail page ===== */
.crumb{background:var(--surface);border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;align-items:center;gap:16px;height:52px;flex-wrap:wrap}
.crumb a{text-decoration:none;font-weight:600;font-family:Archivo;font-size:.92rem}
.crumb .trip{color:var(--muted);font-size:.9rem;margin-left:auto}

.detail{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start;padding:26px 0 60px}
.detail h1{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);margin-bottom:16px}
.gal{position:relative;height:380px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  padding:14px;opacity:0;transition:opacity .18s}
.gal img.on{opacity:1}
.gal .none{color:var(--muted);font-size:.85rem}
.gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(12,24,38,.6);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.gal .nav:hover{background:rgba(12,24,38,.85)}
.gal .prev{left:12px}.gal .next{right:12px}
/* left/top must be reset: the generic .picn rule above sets them, and an
   absolutely positioned box with all four offsets stretches edge to edge —
   which is what put a dark sheet over every vehicle photo on this page */
.gal .picn{position:absolute;left:auto;top:auto;right:12px;bottom:12px;background:rgba(12,24,38,.7);color:#fff;
  font-size:.75rem;padding:4px 9px;border-radius:6px}

.block{margin-top:26px}
.block h2{font-size:1.1rem;color:var(--ink);margin-bottom:6px}
.block .hint{color:var(--muted);font-size:.87rem;margin-bottom:12px}
.ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:24px;color:var(--soft);font-size:.95rem}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}

.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:13px 15px;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--muted)}
.opt input{width:18px;height:18px;accent-color:var(--blue);flex:none}
.opt .nm{flex:1;color:var(--ink);font-size:.95rem}
.opt .nm em{font-style:normal;color:var(--muted);font-size:.82rem}
.opt .pr{font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums}
.opt.locked{background:var(--ground);cursor:default}

.side{position:sticky;top:20px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow)}
.quote h2{font-size:1.1rem;color:var(--ink);margin-bottom:14px}
.lines{display:grid;gap:9px;transition:opacity .15s}
.lines.busy{opacity:.45}
.ln{display:flex;align-items:baseline;gap:12px;font-size:.93rem}
.ln span{flex:1;color:var(--soft)}
.ln b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.ln.muted span{color:var(--muted)}
.ln.err span{color:#9B2222}
.ln.save b{color:var(--good)}
.ln.sub{border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.ln.sub span,.ln.sub b{font-weight:600;color:var(--ink)}
.grand{display:flex;align-items:baseline;gap:12px;border-top:2px solid var(--line);
  margin-top:14px;padding-top:14px}
.grand span{flex:1;font-family:Archivo;font-weight:700;color:var(--ink)}
.grand b{font-family:Archivo;font-size:1.6rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dep{font-size:.83rem;color:var(--muted);margin-top:10px}
.btn.wide{width:100%;margin-top:14px;padding:14px}
.quote .fine{font-size:.83rem;color:var(--muted);margin-top:10px;line-height:1.5}

@media (max-width:980px){
  .detail{grid-template-columns:1fr}
  .side{position:static}
  .gal{height:260px}
}

/* ===== site chrome shared by the marketing pages ===== */
.mainnav{display:flex;gap:2px;margin-left:28px}
.mainnav a{font-family:Archivo;font-weight:500;font-size:.93rem;color:var(--soft);text-decoration:none;
  padding:9px 12px;border-radius:8px;white-space:nowrap}
.mainnav a:hover{background:var(--ground);color:var(--ink)}
.mainnav a[aria-current]{color:var(--blue);font-weight:600}

/* ===== homepage hero =====
   Daylight, not the old navy block. The skyline behind it is an inline SVG
   drawn here rather than a photograph: it is a few hundred bytes, it is sharp
   on every screen, and there is no licence attached to it.

   TO USE YOUR OWN PHOTO: drop a wide image at ../images/hero.jpg (about 2400x900) and
   the rule below picks it up. Nothing else needs changing. Until that file
   exists the browser ignores the line and the gradient shows through. */
.hero{
  position:relative;
  min-height:clamp(480px,37vw,720px);
  padding:34px 0 56px;
  background:
    linear-gradient(180deg,#F7FAFF 0%,#EFF5FD 55%,#FFFFFF 100%);
  overflow:hidden;
}
.hero::after{                                  /* the road strip along the bottom */
  content:"";position:absolute;left:0;right:0;bottom:0;height:78px;
  background:linear-gradient(180deg,#C9D6E6 0%,#B6C6D9 100%);
  border-top:2px solid #A9BACE;
}
.hero-photo{                                   /* only visible once ../images/hero.jpg exists */
  position:absolute;inset:0;
  background:url("../images/hero.jpg") center center/cover no-repeat;
  opacity:0;transition:opacity .4s;

  /* THE FADE.
     The photograph is masked away at its edges rather than covered with a
     white film. Where the mask goes transparent the hero's own pale background
     shows through, so the picture dissolves into the page instead of sitting
     on it as a rectangle — and the copy on the left ends up over near-white
     rather than over a bleached photo. Two masks are intersected: one fading
     left and right, one fading the bottom into the section below. */
  --edge:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 7%, #000 20%,
      #000 90%, rgba(0,0,0,.5) 97%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.55) 0%, #000 9%, #000 84%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--edge);
  mask-image:var(--edge);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-photo.on{opacity:1}
/* the photograph brings its own road and sky — the drawn ones underneath it
   would only show through as a seam at the bottom */
.hero:has(.hero-photo.on)::after{display:none}
.hero:has(.hero-photo.on){background:#fff}
/* A white scrim from the left so the dark headline stays readable over the
   photograph — the same trick the reference design uses. Without it the copy
   fights the skyline behind it. */
/* No white film over the picture any more. The masked edges give the copy a
   pale place to sit, and the middle of the photograph keeps every bit of its
   colour. A whisper of haze behind the headline only. */
.hero-photo.on::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,0) 44%);
}
/* a touch more bite in the photograph itself, so it does not read as flat */
.hero-photo.on{filter:saturate(1.12) contrast(1.06)}
.hero .wrap{position:relative;z-index:2;width:100%}

.hero-sky{                                     /* the skyline silhouette */
  position:absolute;left:0;right:0;bottom:70px;width:100%;height:auto;
  z-index:0;opacity:.22;pointer-events:none;
}
.hero-photo.on ~ .hero-sky{display:none}
.hero-car{
  /* A real car out of the live fleet. RentCentric's photos are studio shots on
     a WHITE background, not cut-out PNGs, so dropping one straight onto the
     gradient puts a white rectangle over the page. multiply blend makes the
     white disappear into the background and leaves only the car — which is why
     the hero has to stay light for this to work. */
  position:absolute;z-index:1;left:1%;bottom:4px;width:min(34%,400px);
  mix-blend-mode:multiply;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;
}
.hero-car.on{opacity:1;transform:none}
/* a photo background is not white, so the blend would muddy the car — hide it */
.hero-photo.on ~ .hero-car{display:none}

/* room under the copy for the car to sit in, rather than across the text */
.hero-copy{padding-bottom:0}
@media (max-width:1080px){ .hero-copy{padding-bottom:0} .hero-car{display:none} }

/* Top-aligned, not centred. The car sits in the lower half of the photograph,
   so the copy has to start high or the headline lands on the windscreen. */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.hero h1{color:var(--ink);font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lede{color:var(--ink);font-size:1.08rem;max-width:34em;margin-bottom:22px;font-weight:500}

.tagpill{display:inline-block;background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;border-radius:100px;padding:6px 14px;margin-bottom:16px}

.feats{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:26px}
.feats li{display:flex;align-items:flex-start;gap:10px;max-width:190px}
.feats svg{flex:none;color:var(--blue);margin-top:1px}
.feats b{display:block;font-family:Archivo;font-size:.92rem;color:var(--ink);line-height:1.25}
.feats span{display:block;font-size:.8rem;color:var(--soft);line-height:1.3;font-weight:500}
@media (max-width:520px){ .feats{gap:16px} .feats li{max-width:none;width:100%} }

/* the hero copy needs a lift off the sky on small screens, where the car and
   the skyline crowd it */
@media (max-width:860px){
  .hero-car,.hero-sky{display:none}
  .hero{padding-bottom:34px}
  .hero::after{display:none}
}

/* ===== Google reviews strip =====
   Real figures, kept in the page and updated by hand. Nothing here is
   generated: the rating, the count and the link all come from the business's
   own Google profile. */
.whyrow{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.why h2{font-size:clamp(1.4rem,2.6vw,1.85rem);color:var(--ink);margin-bottom:16px}
.why .ticks{margin:0}

.revcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;text-align:center;box-shadow:0 10px 30px -22px rgba(12,24,38,.35)}
.revcard .gbrand{display:block;margin-bottom:14px}
.revcard .gnum{display:block;font-family:Archivo;font-size:3rem;color:var(--ink);line-height:1}
.revcard .gstars{display:block;margin:6px 0 4px;font-size:1.35rem}
.revcard .gcount{display:block;font-size:.9rem;color:var(--muted)}
.revbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (max-width:860px){ .whyrow{grid-template-columns:1fr} }
.gbrand{font-family:Archivo;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.gbrand .b{color:#4285F4}.gbrand .r{color:#EA4335}.gbrand .y{color:#FBBC05}.gbrand .g{color:#34A853}
.gnum{font-family:Archivo;font-size:1.6rem;color:var(--ink);line-height:1}
.gstars{display:inline-flex;gap:2px;color:#F5A623;font-size:1.05rem;letter-spacing:1px}
.gcount{font-size:.9rem;color:var(--muted)}
.grev .btn{padding:9px 18px;font-size:.9rem}
@media (max-width:640px){
  .grev .wrap{gap:12px}
  .gnum{font-size:1.35rem}
}

/* ===== fleet filter chips ===== */
.chips-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.chip-btn{background:var(--surface);border:1px solid var(--line);color:var(--soft);
  border-radius:100px;padding:8px 18px;font-size:.9rem;font-weight:500;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.chip-btn:hover{border-color:var(--blue);color:var(--ink)}
.chip-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}

.bookcard{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.bookcard h2{font-size:1.2rem;color:var(--ink);margin-bottom:4px}
.bookcard .sub{font-size:.88rem;color:var(--muted);margin-bottom:18px}
.bookcard .fields{display:grid;gap:9px}
.bookcard .pair{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
.bookcard .fine{font-size:.82rem;color:var(--muted);text-align:center;margin-top:12px}
.opt-lbl{text-transform:none;letter-spacing:0;font-weight:400}

/* ===== trust rail ===== */
.rail{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rail .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:24px 22px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:Archivo;font-size:1.7rem;color:var(--ink);line-height:1;margin-bottom:5px}
.stat span{font-size:.87rem;color:var(--soft)}

/* ===== generic sections ===== */
.sec{padding:64px 0}
.sec.pt0{padding-top:0}
.sec-head{max-width:46em;margin-bottom:28px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.05rem);color:var(--ink);margin-bottom:10px}
.sec-head p{color:var(--soft)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  text-decoration:none;transition:border-color .15s,transform .15s;display:block}
.tile:hover{border-color:var(--blue);transform:translateY(-2px)}
.tile h3{font-size:1.05rem;color:var(--ink);margin-bottom:5px}
.tile p{font-size:.87rem;color:var(--muted)}

.lanes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
  display:flex;flex-direction:column;gap:12px}
.lane.feature{background:var(--ink);border-color:var(--ink)}
.lane.feature h3{color:#fff}
.lane.feature .eyebrow{color:#8FB6F2}
.lane.feature li{color:#C2D3E6}
.lane h3{font-size:1.3rem;color:var(--ink)}
.lane ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.lane li{position:relative;padding-left:24px;color:var(--soft);font-size:.95rem}
.lane li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.lane.feature li::before{color:#6BA8FF}
.lane .btn{align-self:flex-start;margin-top:6px}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:#E3EDFF;border-color:#E3EDFF}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.12)}

.band{background:var(--blue);border-radius:var(--r);padding:38px 34px;display:flex;align-items:center;
  gap:26px;flex-wrap:wrap}
.band h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.85rem);flex:1;min-width:260px}

/* ===== footer ===== */
.foot{background:var(--ink);color:#9DB2CA;padding:46px 0 26px;margin-top:0}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.flogo{width:170px;margin-bottom:14px;display:block}
.foot p{color:#C6D6E8;font-size:.92rem;max-width:30em}
.foot p b{color:#DCA94F}
.foot h4{font-family:Archivo;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;
  margin:0 0 12px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.91rem}
.foot a{color:#C6D6E8;text-decoration:none}
.foot a:hover{color:#fff}
.foot .base{padding-top:20px;font-size:.85rem;display:flex;gap:16px;flex-wrap:wrap}
.foot .base .sp{margin-left:auto}

@media (max-width:1080px){
  /* the nav becomes a panel under the bar, opened by the hamburger */
  .navtoggle{display:flex}
  .mainnav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:30;
    flex-direction:column;gap:0;margin:0;padding:6px 10px 12px;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(12,24,38,.6);
  }
  .mainnav.open{display:flex}
  .mainnav a{padding:14px 10px;font-size:1rem;border-radius:0}
  .mainnav a + a{border-top:1px solid var(--line)}

  /* On a phone the booking form comes before the sales copy — most people
     arriving here want dates and a price, not the pitch.
     Every child needs an explicit order: .hero-copy is display:contents, so
     anything left unnumbered defaults to 0 and jumps ahead of the headline.
     That is exactly what happened when .points became .feats. */
  .hero-grid{display:flex;flex-direction:column;gap:18px}
  .hero-copy{display:contents}
  .tagpill{order:1;margin-bottom:0;align-self:flex-start}
  .hero h1{order:2;margin-bottom:0}
  .bookcard{order:3}
  .hero .lede{order:4;margin-bottom:0}
  .feats{order:5;margin-top:0}
  /* On a narrow screen the copy sits over the middle of the photograph, so the
     diagonal wash does not help. A flat one does — but light enough that the
     sky and the car still read as a photograph rather than a grey panel. */
  .hero-photo.on::after{background:linear-gradient(180deg,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.40) 100%)}
  .hero-photo.on{background-position:center bottom}

  .rail .wrap{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .tiles{grid-template-columns:1fr 1fr}
  .lanes{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hero{padding:20px 0 30px}
  .hero h1{font-size:clamp(1.45rem,6vw,1.9rem);line-height:1.15}
  .hero .lede{font-size:1rem}
  .sec{padding:40px 0}
  .tiles{grid-template-columns:1fr}
  .bookcard .pair{grid-template-columns:1fr}
  .rail .wrap{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr}
  /* make room for the hamburger */
  header.bar .wrap{gap:12px}
  header.bar img{width:126px}
  header.bar .ph{font-size:.95rem}
  header.bar .ph span{display:none}
}

/* ===== checkout ===== */
.sub-lede{color:var(--muted);margin:-6px 0 20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .wide2{grid-column:1/-1}
.f textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:11px 12px;resize:vertical}
.f input.bad,.f textarea.bad{border-color:#C24A4A;box-shadow:0 0 0 3px rgba(194,74,74,.14)}
.terms{font-size:.85rem;color:var(--muted);margin-top:22px;line-height:1.6}
.quote .when{font-size:.87rem;color:var(--muted);margin:-8px 0 14px}
.warn{color:#9B2222;font-weight:600}

.done{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:44px 34px;margin:26px 0 60px;text-align:center}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--good);color:#fff;
  font-size:1.9rem;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done .tick.warnmark{background:#C98A1E}
.done h1{color:var(--ink);margin-bottom:10px}
.done p{color:var(--soft);margin-bottom:8px}
.done .ref{font-size:1.05rem}
.done .ref b{color:var(--ink);font-family:Archivo}
.done .tot{font-family:Archivo;font-size:1.3rem;color:var(--ink);font-weight:700}
.done .muted{color:var(--muted);font-size:.92rem;max-width:44em;margin:14px auto 20px}
.done code{background:var(--ground);padding:2px 6px;border-radius:5px;font-size:.9em}
.payload{text-align:left;background:var(--ink);color:#C6D6E8;border-radius:10px;padding:18px;
  font-size:.78rem;line-height:1.5;overflow-x:auto;max-height:420px;margin:18px 0}
@media (max-width:640px){ .grid2{grid-template-columns:1fr} }

/* ===== mandatory insurance / selected options ===== */
.opt input[type="radio"]{width:18px;height:18px;accent-color:var(--blue);flex:none}
.opt.on{border-color:var(--blue);background:var(--blue-soft)}
.opt.bad{border-color:#C24A4A;background:#FEF6F6}
.req{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#B3261E;
  background:#FDECEA;border-radius:6px;padding:3px 8px;margin-left:8px;vertical-align:2px}
.block h2 .opt-lbl{font-size:.8rem;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}

/* Vans and pickup trucks: we sell no insurance on them, so the customer has to
   read this before they get to the one remaining option. Amber, not red — it is
   a condition of renting, not an error they have made. */
.notice{background:#FFF8E6;border:1px solid #F0D48A;border-left:4px solid #C98A00;
  border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:.9rem;line-height:1.5;
  color:#4A3B12}
.notice b{color:#3A2E0B}
.block.ownonly .req{color:#8A5A00;background:#FFF1CC}
.accept{margin-bottom:14px}
.captcha{margin:6px 0 12px}
.capnote{font-size:.83rem;color:var(--muted)}
.okmsg{color:var(--good);font-weight:600}

/* ===== request-a-quote modal ===== */
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,16,28,.6);
  display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto}
.modal[hidden]{display:none}
.sheet{position:relative;background:var(--surface);border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  padding:28px;width:100%;max-width:540px}
.sheet h2{color:var(--ink);font-size:1.3rem;margin-bottom:4px}
.sheet .qsub{color:var(--muted);font-size:.88rem;margin-bottom:18px}
.sheet .x{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:1.6rem;
  line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.sheet .x:hover{background:var(--ground);color:var(--ink)}
.sheet .btn{margin-top:6px}

/* ===== homepage fleet grid ===== */
.fleet{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.vcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.vcard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.vcard .pic{
  position:relative;height:196px;background:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
}
.vcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:center;padding:10px;opacity:0;transition:opacity .18s}
.vcard .pic img.on{opacity:1}
.vcard .pic .none{color:var(--muted);font-size:.8rem}
.vcard .pic .nav{
  position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(12,24,38,.55);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;
}
.vcard:hover .pic .nav,.vcard .pic:focus-within .nav{opacity:1}
.vcard .pic .nav:hover{background:rgba(12,24,38,.85)}
.vcard .pic .prev{left:8px}.vcard .pic .next{right:8px}

.vbody{padding:16px 18px 2px;flex:1}
.vcard h3{font-size:1.15rem;color:var(--ink);margin-bottom:10px}
.vcard .chips{margin-bottom:9px}
.vcard .models{font-size:.87rem;color:var(--muted);line-height:1.5}

.vfoot{padding:14px 18px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vfoot .from{flex:1;min-width:96px;font-size:.8rem;color:var(--muted);white-space:nowrap}
.vfoot .from b{font-family:Archivo;font-size:1.32rem;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums}
.vfoot .btn{flex:none}

@media (max-width:1080px){ .fleet{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .fleet{grid-template-columns:1fr}
  .vcard .pic{height:210px}
  .vfoot .btn{flex:1}
}

/* the "that vehicle isn't free, here's what is" line above the results */
.topnote{background:#FFF7E8;border:1px solid #EFDCB2;color:#7A5A18;border-radius:10px;
  padding:12px 16px;font-size:.9rem;margin-bottom:14px}

/* ===== cookie notice ===== */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -20px 44px -28px rgba(12,24,38,.6);padding:16px 0;
}
.cookiebar-in{max-width:1180px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookiebar p{flex:1;min-width:250px;font-size:.88rem;color:var(--soft);line-height:1.55}
.cookiebar-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookiebar .btn{padding:11px 20px;font-size:.88rem}
@media (max-width:640px){
  .cookiebar{padding:14px 0}
  .cookiebar p{font-size:.84rem}
  .cookiebar-btns{width:100%}
  .cookiebar-btns .btn{flex:1}
}
.foot .base a{color:#9DB2CA;text-decoration:underline}
.foot .base a:hover{color:#fff}

/* On a touchscreen there is no hover, so the photo arrows must always show. */
@media (hover:none),(pointer:coarse),(max-width:640px){
  .vcard .pic .nav,.card .pic .nav{opacity:1}
}

/* the breadcrumb bar has to grow when the dates wrap onto a second line */
.crumb .wrap{height:auto;min-height:52px;padding-top:10px;padding-bottom:10px}
@media (max-width:640px){
  .crumb .trip{margin-left:0;width:100%;font-size:.85rem}
}

/* ===== change dates / change vehicle bar ===== */
.crumb .wrap{gap:12px}
.linkbtn{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:Archivo;font-weight:600;font-size:.88rem;padding:8px 14px;
  border-radius:9px;cursor:pointer;white-space:nowrap;
}
.linkbtn:hover{border-color:var(--blue);color:var(--blue)}
.changebox{background:var(--surface);border-top:1px solid var(--line);padding:16px 0 18px}
.changegrid{display:grid;grid-template-columns:1.4fr 1fr .9fr 1fr .9fr auto;gap:11px;align-items:end}
.changegrid .cfine{grid-column:1/-1;font-size:.85rem;color:var(--muted);margin-top:2px}
@media (max-width:900px){
  .changegrid{grid-template-columns:1fr 1fr}
  .changegrid .go{grid-column:1/-1;width:100%}
}
@media (max-width:640px){
  .crumb .wrap{align-items:flex-start}
  .linkbtn{width:100%}
  .changegrid{grid-template-columns:1fr}
}

/* ===== optional extra details on checkout ===== */
.moreblock summary{
  list-style:none;cursor:pointer;font-family:Archivo;font-weight:600;color:var(--ink);
  font-size:.95rem;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);display:flex;align-items:center;gap:9px;
}
.moreblock summary::-webkit-details-marker{display:none}
.moreblock summary::before{content:"+";color:var(--blue);font-size:1.15rem;line-height:1}
.moreblock[open] summary::before{content:"–"}
.moreblock summary:hover{border-color:var(--muted)}
.moreblock summary em{font-style:normal;font-weight:400;color:var(--muted);font-size:.87rem}
.moreblock .inner{padding:14px 2px 0}

/* the confirmation notice under the quote — one sentence per line */
.dep span{display:block}
.dep span + span{margin-top:8px}

/* mileage allowance under the vehicle rate — information, not a charge.
   Deliberately NOT called .note: a bare .note rule used to centre this. */
.ln.kmnote{margin-top:-4px}
.ln.kmnote span{color:var(--muted);font-size:.84rem;line-height:1.45;text-align:left}

/* ===== (i) explainer on the insurance options ===== */
.opt{position:relative}
.infobtn{
  flex:none;width:20px;height:20px;margin-left:-4px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--muted);font-family:Archivo;font-weight:700;font-size:.72rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.infobtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}

.opt{flex-wrap:wrap}
.tip{
  display:none;z-index:6;
  background:var(--ink);color:#E6EEF9;border-radius:10px;padding:12px 14px;
  font-size:.85rem;line-height:1.55;font-weight:400;cursor:default;
  box-shadow:0 18px 40px -18px rgba(12,24,38,.7);
}
.tip::before{
  content:"";position:absolute;bottom:100%;left:16px;border:7px solid transparent;
  border-bottom-color:var(--ink);
}

/* Hovering the (i): a floating bubble. pointer-events:none so it can never
   swallow a click meant for the option underneath it. */
.infobtn:hover ~ .tip,
.infobtn:focus-visible ~ .tip{
  display:block;position:absolute;top:100%;left:0;right:0;margin-top:8px;pointer-events:none;
}

/* Tapped or clicked open: sits in the flow and pushes the next option down,
   so it never covers anything. This is the path phones take. Must come after
   the hover rule to win when both apply. */
/* NOTE the extra .opt: `.infobtn:focus-visible ~ .tip` above scores higher
   than a bare `.tip.open`, so after a click the focus rule was winning and
   the bubble was still being positioned as a floating overlay. */
.opt .tip.open{
  display:block;position:static;flex-basis:100%;margin-top:10px;pointer-events:auto;
}
.opt .tip.open::before{display:none}
@media (max-width:640px){ .tip{font-size:.83rem;padding:11px 13px} }

/* ===================================================================
   MARKETING PAGES — everything below is used by the generated pages
   =================================================================== */

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* breadcrumbs */
.crumbs{background:var(--surface);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs .sep{color:var(--muted);margin:0 4px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* page hero — the dark band at the top of every marketing page */
.phero{background:var(--ink);color:#B9CBE0;padding:52px 0 56px}
.phero .eyebrow{color:#8FB6F2;margin-bottom:10px}
.phero h1{color:#fff;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;margin-bottom:16px;max-width:19ch}
.phero .lede{font-size:1.12rem;max-width:56ch;line-height:1.6}
.phero .btn{margin-top:22px}
.phero .afterbtn{display:inline-block;margin-left:14px;font-size:.9rem;color:#8FB6F2}
@media (max-width:640px){
  .phero{padding:32px 0 36px}
  .phero h1{font-size:clamp(1.55rem,7vw,2rem)}
  .phero .lede{font-size:1rem}
  .phero .afterbtn{display:block;margin:10px 0 0}
}

/* body copy */
.prose{max-width:68ch;margin-inline:auto}
.prose h2{font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--ink);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;color:var(--ink);margin:26px 0 8px}
.prose p{margin-bottom:14px;color:var(--soft);line-height:1.68}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-dark)}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--soft);line-height:1.68}
.prose li{margin-bottom:7px}
.prose ul.ticks{list-style:none;padding-left:0}
.prose ul.ticks li{position:relative;padding-left:26px}
.prose ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
.prose ol.steps{list-style:none;padding-left:0;counter-reset:s}
.prose ol.steps li{position:relative;padding-left:40px;margin-bottom:14px;counter-increment:s}
.prose ol.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);font-family:Archivo;
  font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.prose .updated{font-size:.85rem;color:var(--muted);margin-bottom:24px}
.prose .disclaimer{font-size:.85rem;color:var(--muted);border-left:3px solid var(--line);
  padding-left:14px;margin-top:30px;line-height:1.6}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.93rem}
.cmp th,.cmp td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:Archivo;color:var(--ink);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:2px solid var(--line)}
.cmp tbody th{color:var(--ink);font-weight:600;width:26%}
.cmp td{color:var(--soft)}
@media (max-width:640px){
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;
    background:var(--surface)}
  .cmp th,.cmp td{border:0;padding:4px 0}
  .cmp tbody th{width:auto;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
}

/* FAQ accordion */
.faqlist{display:grid;gap:10px;max-width:68ch}
.faqitem{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faqitem summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:flex-start;
  gap:12px;font-family:Archivo;font-weight:600;color:var(--ink);font-size:1rem;line-height:1.45}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:"+";margin-left:auto;color:var(--blue);font-size:1.35rem;line-height:1;flex:none}
.faqitem[open] summary::after{content:"–"}
.faqitem summary:hover{background:var(--ground)}
.faqitem .ans{padding:0 18px 18px}
.faqitem .ans p{color:var(--soft);line-height:1.65;margin:0}

/* card grids used by /gta/ and /blog/ */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  text-decoration:none;display:block;transition:border-color .15s,transform .15s,box-shadow .15s}
.gcard:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.gcard h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.gcard p{font-size:.89rem;color:var(--muted);line-height:1.55}
@media (max-width:980px){.cardgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cardgrid{grid-template-columns:1fr}}

/* contact page */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.ccard h2{font-size:1.05rem;color:var(--ink);margin-bottom:10px}
.ccard p{color:var(--soft);margin-bottom:8px;line-height:1.6}
.ccard .big{font-family:Archivo;font-size:1.45rem;font-weight:700}
.ccard .big a{color:var(--ink);text-decoration:none}
.ccard .big a:hover{color:var(--blue)}
.ccard .muted{color:var(--muted);font-size:.89rem}
.hours{width:100%;border-collapse:collapse;margin-bottom:10px}
.hours th{text-align:left;font-weight:600;color:var(--ink);padding:5px 0;font-size:.93rem}
.hours td{text-align:right;color:var(--soft);padding:5px 0;font-size:.93rem}
@media (max-width:640px){.contactgrid{grid-template-columns:1fr}}

/* footer address block */
.foot .fadr{font-size:.88rem;color:#9DB2CA;margin-top:14px;line-height:1.65}
.foot .fadr a{color:#C6D6E8}

/* the fleet page's loading line */
.fleet .loading{color:var(--muted);grid-column:1/-1;padding:30px 0}

/* main has 28px of top padding for the booking pages; the dark page hero
   must sit flush against the header or breadcrumb bar instead */
main > .phero:first-child,
main > .hero:first-child{margin-top:-28px}


/* ===== help band ===== */
.helpband{background:var(--blue);border-radius:var(--r);padding:26px 30px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:#fff}
.helpband .hb-ico{flex:none;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.helpband h3{color:#fff;font-size:1.18rem;margin-bottom:3px}
.helpband p{color:#D6E4FF;font-size:.92rem}
.helpband .btn{margin-left:auto}
@media (max-width:640px){ .helpband .btn{margin-left:0;width:100%} }

/* the monthly starting price, on the homepage lane that ranks for
   "monthly car rental toronto" — the searchers arriving there are
   price-shopping, so give them the number rather than "call us" */
.fromline{font-size:1.02rem;color:var(--soft)}
.fromline b{font-family:Archivo;font-size:1.5rem;color:var(--ink)}


/* Static clean build overrides */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,.btn,.mainnav a,header.bar .ph,.stat b,.prose ol.steps li::before,.cmp thead th,.faqitem summary,.ccard .big,.grand span,.grand b{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.simpleform{display:grid;gap:12px;max-width:720px}.simpleform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.simpleform input,.simpleform select,.simpleform textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}.simpleform textarea{min-height:120px;resize:vertical}.simpleform label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:5px}.notice{background:var(--blue-soft);border:1px solid #c9d8fb;border-radius:12px;padding:14px 16px;color:var(--ink)}@media(max-width:640px){.simpleform .row2{grid-template-columns:1fr}}