/* ============================================================================
   Avante Travels - the mobile system, shared by every page and loaded last.
   Pages keep their own desktop rules; this file sets what every page shares
   (eyebrows, floating contact, header, menu, spacing, type, tables) and then
   the per-section mobile layouts, page by page.
   ============================================================================ */

/* ---- editorial eyebrow: number, label, a short rule. Replaces the pill labels -------- */
.ed-eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 clamp(14px,1.6vw,22px);
  font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.2em;line-height:1.2;text-transform:uppercase;color:var(--grey)}
.ed-eyebrow i{font-style:normal;color:var(--orange);letter-spacing:.1em}
.ed-eyebrow .ed-aside{order:2;margin-left:10px;color:var(--navy)}

/* ---- floating contact: WhatsApp and Call, bottom right on every screen ---------------- */
.vrail{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));gap:10px;
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1)}
@media(max-width:900px){ .vrail{display:flex} }
@media(max-height:560px){ .vrail{display:flex;flex-direction:row} }
.vrail-a{width:52px;height:52px}
.vrail-a svg{width:23px;height:23px}
/* out of the way while someone types in a form, or while the menu is open */
body.is-typing .vrail,body.menu-open .vrail{opacity:0;transform:translateY(12px);pointer-events:none}
body.is-typing .vrail-a,body.menu-open .vrail-a{pointer-events:none}
/* the last thing on the page never sits under the buttons */
@media(max-width:900px){ footer{padding-bottom:max(84px,calc(68px + env(safe-area-inset-bottom)))} }

/* ---- header: slimmer everywhere; on phones logo, quote and menu only -------------------- */
html body header,html body header.stuck{padding-top:clamp(8px,.8vw,12px);padding-bottom:clamp(8px,.8vw,12px)}
html body header .wrap.nav{height:58px}
html body header.stuck .wrap.nav{height:54px}
html body header .logo img.logo-mark{height:42px}
html body header.stuck .logo img.logo-mark{height:38px}
@media(max-width:1120px){
  html body header,html body header.stuck{padding:8px 12px}
  html body header .wrap.nav{height:52px;padding:0 6px 0 12px;gap:10px;max-width:none}
  html body header.stuck .wrap.nav{height:50px}
  html body header .logo img.logo-mark{height:34px}
  html body header.stuck .logo img.logo-mark{height:32px}
  html body header .nav-r{gap:4px}
  html body header .nav-r .btn-sm{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 4px 4px 14px;font-size:13px;white-space:nowrap}
  html body header .nav-r .btn-sm i{width:32px;height:32px}
  html body header .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center;border-radius:12px}
}
@media(max-width:340px){ html body header .nav-r .btn-sm i{display:none} html body header .nav-r .btn-sm{padding:4px 14px} }

/* ---- the menu on phones and tablets: the desktop menu, as groups that open in place ---- */
.mdraw-in{top:72px;left:12px;right:12px;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);padding:6px 6px 0;
  display:flex;flex-direction:column;overflow:hidden}
.md-scroll{overflow-y:auto;overscroll-behavior:contain;padding:4px 0 10px;flex:1 1 auto}
.md-group{border-bottom:1px solid rgba(255,255,255,.08)}
.md-sum,.md-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 14px;
  background:none;border:0;border-radius:10px;font-family:var(--disp);font-size:16px;font-weight:500;letter-spacing:-.01em;
  color:#fff;text-align:left;cursor:pointer;text-decoration:none}
.mdraw a.md-link{padding:0 14px;font-size:16px;font-weight:500;color:#fff}
.md-sum i{flex:none;width:9px;height:9px;margin-right:4px;border-right:1.6px solid rgba(255,255,255,.6);border-bottom:1.6px solid rgba(255,255,255,.6);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.md-group.is-open .md-sum i{transform:rotate(-135deg) translateY(-2px)}
.md-group.is-open .md-sum{color:var(--orange)}
.md-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1)}
.md-group.is-open .md-list{grid-template-rows:1fr}
.md-list > div{overflow:hidden}
.md-list .md-head{display:block;padding:12px 14px 4px 26px;font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.mdraw .md-list a{display:flex;align-items:center;min-height:44px;padding:0 14px 0 26px;border-radius:8px;font-size:15px;font-weight:300;
  color:rgba(255,255,255,.84)}
.md-list > div > :last-child{margin-bottom:10px}
.md-minor{display:flex;flex-wrap:wrap;gap:0 4px;padding:8px 0 0}
.mdraw .md-minor a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px;font-weight:400;color:rgba(255,255,255,.7)}
.md-cta{flex:none;display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:10px 6px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.1);background:var(--navy)}
.mdraw .md-cta .btn{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;min-height:48px;padding:5px 5px 5px 20px;border-radius:999px;font-size:14px;color:#fff}
.mdraw .md-cta .btn i{flex:none;width:38px;height:38px}
.mdraw .md-cta .md-ic{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;color:#fff}
.md-cta .md-ic svg{width:21px;height:21px}
.md-cta .md-wa{background:var(--wa)}
.md-cta .md-call{background:rgba(255,255,255,.1)}

/* ---- tables that scroll sideways on phones keep their labels in view ------------------- */
.t-hint{display:none}
@media(max-width:760px){
  .t-hint{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--grey)}
  .t-hint i{font-style:normal;color:var(--orange);animation:t-nudge 1.6s ease-in-out 3}
  .t-dark .t-hint,.t-hint.is-dark{color:rgba(255,255,255,.62)}
  .t-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}
@keyframes t-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}

/* ============================================================================
   PHONES: one system for spacing and type
   ============================================================================ */
@media(max-width:760px){
  :root{--pad:16px}
  html{-webkit-text-size-adjust:100%}

  /* headings: two lines where possible, three at most, never shrunk to nothing */
  html body h1{text-wrap:balance}
  html body .hero h1{font-size:clamp(29px,8.4vw,33px);line-height:1.06;letter-spacing:-.035em}
  html body .hero-copy h1,html body .ct-h1{font-size:clamp(30px,8.6vw,34px);line-height:1.06}
  html body .uv-h1{font-size:clamp(34px,9.6vw,38px)}
  html body .h2,html body .fl-hl,html body .sy-hl,html body .gz-h2,html body .hw-h2,html body .we-h2,html body .fq-h2,html body .vhead .h2{
    font-size:clamp(25px,7vw,28px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
  html body .final h2,html body .fq-lead h2{font-size:clamp(22px,6.2vw,24px);line-height:1.15;text-wrap:balance}
  html body section h3{text-wrap:balance}

  /* running text around 15px, with room to breathe */
  html body .lede,html body .hero .sub,html body .ct-lede,html body .uv-lede,html body .dp-lede,html body .hero-copy p,
  html body .ct-how-intro p,html body .sv-note,html body .uv-hero-note,html body .uv-v-copy p,html body .uv-lug-copy p,
  html body .uv-vs-sub,html body .uv-rev-q,html body .fq-lead p,html body .hw-sub,html body .hw-desc,html body .gz-sub,
  html body .sy-q p,html body .fl-intro,html body .fq-inner p,html body .uv-own-l p,html body .os-t{
    font-size:15px;line-height:1.62}
  html body .stmt,html body .oc-head,html body .uv-lug-rule,html body .uv-vs-answer{font-size:19px;line-height:1.35}
  html body .uv-own-big{font-size:17px}
  html body .ct-how-intro .ct-how-say{font-size:16px}
  html body .fl-step em,html body .fl-cap-s{font-size:13.5px;line-height:1.55}
  html body .fl-step b{font-size:15px}

  /* sections breathe evenly */
  html body section.sec:not(.hero):not(.final),html body .sblock,html body .sy-sec,html body .fl-proc{padding-top:56px;padding-bottom:56px}

  /* list items take the running size unless their own class says otherwise */
  html body section li{font-size:15px}
  html body .uv-lug-copy p,html body .sv-pk-why,html body.av-js .sv-final .fq-lead p,html body.av-js .final .fq-lead p{font-size:15px}
  html body.av-js .dp-final .fq-lead h2,html body.av-js .final .fq-lead h2,html body.av-js .sv-final .fq-lead h2{font-size:clamp(22px,6.2vw,24px);max-width:none}
  html body .dp-final .fq-l,html body .final .fq-l{white-space:normal;display:inline}

  /* the floating buttons wait until the first screen, with its own buttons, has scrolled past */
  body.at-top .vrail{opacity:0;transform:translateY(12px);pointer-events:none}
  body.at-top .vrail-a{pointer-events:none}
}

/* ============================================================================
   HOMEPAGE
   ============================================================================ */

/* ---- key figures: one row on phones ---------------------------------------------------- */
@media(max-width:760px){
  .sblock{padding-left:0;padding-right:0}
  .sgrid{padding-left:16px;padding-right:16px;row-gap:24px}
  .srow{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .srow .st{padding:0 10px}
  .srow .st:first-child{padding-left:0}
  .srow .st:last-child{padding-right:0}
  .srow .st + .st{border-left:1px solid var(--line)}
  .st b{font-size:26px}
  .st u{margin-top:8px;font-size:9.5px;letter-spacing:.14em;line-height:1.35}
  .st > span{margin-top:6px;font-size:12.5px;line-height:1.45}
}

/* ---- vehicles: the resting card carries models and a clear action; hover adds the rest -- */
.vrest{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.vrest .vmodels{font-size:13.5px;font-weight:300;line-height:1.5;color:var(--grey)}
.vrest .vfeat{display:none}
.vhint{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--navy)}
.vhint i{font-style:normal;color:var(--orange);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.av-js .vface:not(.vface-dark)::after{display:none}
.av-js .vface:not(.vface-dark) .vrest{min-height:var(--av-more)}
/* a trimmed cut out has no margin of its own, so filling the stage would clip its nose and tail:
   those are fitted whole instead */
html body .vstage .vimg[src*="-cut.webp"]{object-fit:contain;object-position:50% 100%}
.vstage .vimg.is-photo{object-fit:cover;border-radius:4px}
.av-js .vface-dark .vstage .vimg.is-photo{object-fit:cover}
.vpager{display:none}
/* name above price, so every card in a row starts its text at the same height */
.av-js .vface .vfoot{flex-direction:column;align-items:flex-start;gap:4px;margin-top:clamp(14px,1.4vw,20px)}
.av-js .vface:not(.vface-dark) .vrest{flex:1 1 auto}
.vstage .vimg.is-photo{object-position:center 60%}
@media(min-width:1181px){
  .vgrid{grid-template-columns:repeat(4,1fr)}
  .av-js .vcell{--av-more:120px}
}
@media(min-width:761px) and (max-width:1180px){
  .vgrid{grid-template-columns:repeat(2,1fr)}
}
/* touch screens have no hover: the card simply links, with everything already on it */
@media(hover:none){
  .av-js .vface-dark{display:none}
  .av-js .vface:not(.vface-dark) .vrest .vfeat{display:flex}
}

/* phones: a swipeable row, one card in focus at a time, with its place counted */
@media(max-width:760px){
  .veh-sec{padding-bottom:40px}
  .vtrack{margin-top:24px}
  .vgrid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;
    padding:4px 16px 8px;margin-top:0;background:none;border:0;scrollbar-width:none}
  .vgrid::-webkit-scrollbar{display:none}
  .vcell,.av-js .vcell{flex:0 0 82%;min-height:0;scroll-snap-align:start;border:1px solid var(--line);border-radius:6px;
    transition:border-color .3s ease,box-shadow .3s ease}
  .vcell.is-current{border-color:rgba(10,38,52,.28);box-shadow:0 18px 36px -24px rgba(10,38,52,.35)}
  .av-js .vface-dark{display:none}
  .av-js .vface{padding:18px 18px 18px}
  .av-js .vface:not(.vface-dark) .vrest{min-height:0}
  .vrest .vfeat{display:flex;gap:5px;margin:2px 0 0}
  .vrest .vfeat li{font-size:13.5px;color:var(--ink);line-height:1.45}
  .vrest .vfeat li::before{margin-top:7px}
  .vhint{margin-top:6px}
  .vnum{top:18px;right:18px}
  .av-js .vface .vfoot{margin-top:14px}
  .vpager{display:flex;align-items:center;gap:14px;margin-top:14px}
  .vcount{flex:none;font-family:var(--disp);font-size:13px;font-weight:500;color:var(--grey);font-variant-numeric:tabular-nums}
  .vcount b{font-weight:600;color:var(--navy)}
  .vbar{position:relative;flex:1 1 auto;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
  .vbar i{position:absolute;left:0;top:0;bottom:0;width:calc(100% / 8);background:var(--orange);border-radius:2px;
    transform:translateX(calc(var(--vi,0) * 100%));transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .vall{margin-top:22px}
}

/* ---- services: the original scattered layout, a little more considered ----------------- */
.oc-eb{grid-column:1 / span 3;grid-row:1;align-self:start;margin:0;padding-top:clamp(10px,1.2vw,20px)}
/* six services in one grid: a header row, then two rows of tiles that each fill the twelve columns.
   Row one leads with weddings, row two ends on the wide corporate tile. */
.oc-og{row-gap:clamp(14px,1.4vw,20px)}
.oc-eb{grid-column:1 / span 3;grid-row:1}
.oc-head{grid-column:4 / span 6;grid-row:1;padding-top:clamp(4px,.6vw,10px);padding-bottom:clamp(22px,2.6vw,44px)}
.oc-side{grid-column:10 / span 3;grid-row:1;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding-bottom:clamp(22px,2.6vw,44px)}
.oc-side .oc-mid{padding:0}
.oc-side .oc-cta{align-self:flex-start;justify-self:auto;margin:0}
@media(max-width:1040px) and (min-width:621px){ .oc-side .oc-cta{align-self:center} }
.oc-side .oc-mid p{max-width:24ch}
.oc-t-wed{grid-column:1 / span 6;grid-row:2;aspect-ratio:6 / 3.7}
.oc-t-fam{grid-column:7 / span 3;grid-row:2;align-self:stretch;aspect-ratio:auto}
.oc-t-pil{grid-column:10 / span 3;grid-row:2;align-self:stretch;aspect-ratio:auto}
.oc-t-air{grid-column:1 / span 3;grid-row:3;aspect-ratio:3 / 2.6}
.oc-t-sch{grid-column:4 / span 3;grid-row:3;aspect-ratio:3 / 2.6}
.oc-t-cor{grid-column:7 / span 6;grid-row:3;align-self:stretch;aspect-ratio:auto}
.oc-t-wed .oc-tt{font-size:clamp(20px,1.9vw,28px)}
@media(max-width:1040px){
  .oc-eb{grid-column:1 / span 12;grid-row:1}
  .oc-head{grid-column:1 / span 12;grid-row:2;padding:0}
  .oc-side{grid-column:1 / span 12;grid-row:3;justify-self:stretch;flex-direction:row;align-items:center;justify-content:space-between;padding:4px 0 18px}
  .oc-t-wed{grid-column:1 / span 12;grid-row:4;aspect-ratio:12 / 5.4}
  .oc-t-fam{grid-column:1 / span 6;grid-row:5;align-self:start;aspect-ratio:6 / 4.4}
  .oc-t-pil{grid-column:7 / span 6;grid-row:5;align-self:start;aspect-ratio:6 / 4.4}
  .oc-t-air{grid-column:1 / span 6;grid-row:6;aspect-ratio:6 / 4.4}
  .oc-t-sch{grid-column:7 / span 6;grid-row:6;aspect-ratio:6 / 4.4}
  .oc-t-cor{grid-column:1 / span 12;grid-row:7;align-self:start;aspect-ratio:12 / 4}
}
@media(max-width:620px){
  .oc-eb,.oc-head{grid-column:1 / span 6}
  .oc-side{grid-column:1 / span 6;flex-direction:column;align-items:flex-start;gap:14px;padding:0 0 12px}
  .oc-t-wed{grid-column:1 / span 6;aspect-ratio:6 / 4.4}
  .oc-t-fam{grid-column:1 / span 3;aspect-ratio:3 / 3.5}
  .oc-t-pil{grid-column:4 / span 3;aspect-ratio:3 / 3.5}
  .oc-t-air{grid-column:1 / span 3;aspect-ratio:3 / 3.5}
  .oc-t-sch{grid-column:4 / span 3;aspect-ratio:3 / 3.5}
  .oc-t-cor{grid-column:1 / span 6;aspect-ratio:6 / 3.6}
}
.oc-tile{border-radius:8px}
.oc-body{left:clamp(16px,1.6vw,24px);right:clamp(16px,1.6vw,24px);bottom:clamp(16px,1.5vw,22px)}
.oc-tt{font-size:clamp(16px,1.45vw,21px);line-height:1.22;text-wrap:balance}
.oc-go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--orange)}
.oc-go i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.oc-tile:hover .oc-go{color:#fff}
.oc-tile:hover .oc-go i{transform:translateX(4px)}
.oc-tile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.oc-mid p{font-size:15px}
@media(max-width:620px){
  .oc-occ{padding-left:16px;padding-right:16px}
  .oc-eb{grid-column:1 / span 3;padding-top:4px}
  .oc-head{font-size:20px;line-height:1.35;text-wrap:balance}
  .oc-body{left:14px;right:14px;bottom:14px}
  .oc-tt{font-size:15px}
  .oc-t-wed .oc-tt,.oc-t-cor .oc-tt{font-size:19px}
  .oc-go{font-size:12.5px;margin-top:8px}
}

/* ---- routes table: full on phones, swiped sideways with the route name held in place ---- */
@media(max-width:760px){
  .rt-split{padding:0}
  .routes .sub-h{padding-left:16px;padding-right:16px}
  .routes .t-hint{padding:0 16px}
  .rt{min-width:700px}
  .rt td,.rt th{white-space:nowrap}
  .rt tbody td:first-child,.rt thead th:first-child{width:170px;white-space:normal}
  .rt thead th:first-child,.rt tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--navy)}
  .rt thead th:first-child{background:#123342}
  .rt tbody td:first-child{padding-left:16px;box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
  .rt thead th:first-child{padding-left:16px}
  .rt tbody td:last-child,.rt thead th:last-child{padding-right:16px}
}

/* ---- why Avante: fewer, stronger pictures on phones ------------------------------------ */
.fl-regs{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0}
.fl-regs li{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy)}
.fl-regs li::before{content:"";width:12px;height:7px;margin-top:-3px;border-left:1.6px solid var(--orange);border-bottom:1.6px solid var(--orange);transform:rotate(-45deg)}
.fl-acts{justify-content:flex-start;gap:18px}
@media(max-width:760px){
  .fl-proc{padding-left:16px;padding-right:16px}
  .fl-col-m{display:none}
  .fl-h-l{margin-top:4px}
  .fl-proc figure img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px}
  .fl-h-r{margin-top:48px}
  .fl-steps{margin-top:24px;gap:18px}
  .fl-acts{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ---- our story: the words lead, the photograph follows ---------------------------------- */
.sy-sec .ed-eyebrow{color:var(--mid)}
.sy-sec .sy-eyebrow{margin-top:14px}
@media(max-width:760px){
  .sy-sec{padding-left:16px;padding-right:16px}
  .sy-grid{display:flex;flex-direction:column;gap:28px}
  .sy-copy{order:1}
  .sy-shot{order:2;aspect-ratio:4 / 3.2;border-radius:6px}
  .sy-sec .btn{margin-top:22px}
  .sy-quotes{grid-template-columns:minmax(0,1fr);gap:22px}
  .sy-revhead{margin-top:30px}
}

/* ---- gallery: a single swipeable row of the six real photographs on phones ------------- */
@media(max-width:760px){
  .gz-head{padding:56px 16px 24px}
  .gz-band{height:auto;overflow:visible}
  .gz-track{width:auto;animation:none;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
    padding:0 16px;scrollbar-width:none;transform:none}
  .gz-track::-webkit-scrollbar{display:none}
  .gz-t,.gz-t:nth-child(n){flex:0 0 72%;aspect-ratio:4 / 5;transform:none;scroll-snap-align:start;border-radius:6px;overflow:hidden}
  .gz-t[aria-hidden="true"]{display:none}
  .gz-t::after{opacity:1;background:linear-gradient(to top,rgba(10,38,52,.75),transparent 45%)}
  .gz-t figcaption{opacity:1;transform:none;font-size:13px}
  .gz-foot{padding:24px 16px 56px}
}

/* ---- how it works: one picture per step on phones -------------------------------------- */
@media(max-width:760px){
  .hw{padding-left:16px;padding-right:16px}
  .hw .hw-shot{display:none}
  .hw-thumb{aspect-ratio:16 / 9;border-radius:6px}
  .hw-title{font-size:15px}
  .hw-head{min-height:56px}
}

/* ---- remaining homepage sections: 16px sides ------------------------------------------ */
@media(max-width:760px){
  .we{padding-left:16px;padding-right:16px}
  .we-head{padding:0}
  .area-l{padding:48px 16px}
  .av-js .final.sec{padding-left:16px;padding-right:16px}
  .bill .vhead,.blog .vhead{padding-left:16px;padding-right:16px}
  .bcol{padding:32px 16px}
  .posts{padding:0 16px}
  .fq{padding-left:16px;padding-right:16px}
  .hw-h2{max-width:none}
}

/* ============================================================================
   INNER PAGES: one line of key facts, tables that scroll, 16px sides
   ============================================================================ */
@media(max-width:760px){
  /* Urbania hero: the four features in one row beneath the vehicle */
  .uv-plate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;row-gap:18px;align-items:start}
  .uv-plate > figure,.uv-plate > .uv-van,.uv-plate > :not(ol){grid-column:1 / -1;grid-row:1}
  .uv-plate .uv-notes{display:contents}
  .uv-plate .uv-notes li{grid-row:2;text-align:center;min-width:0}
  .uv-plate .uv-note-n{width:40px;height:40px;margin:0 auto 8px}
  .uv-plate .uv-note-n svg{width:19px;height:19px}
  .uv-plate .uv-note-k{font-size:12.5px;line-height:1.3;letter-spacing:0}

  /* Shirdi hero: distance, drive time, days and vehicle on one line */
  .dp-figs{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #DDD5CD}
  .dp-fig,.dp-fig:nth-child(even){display:block;padding:12px 6px 12px 8px;border-bottom:0}
  .dp-fig:first-child{padding-left:0}
  .dp-fig + .dp-fig,.dp-fig:nth-child(even){border-left:1px solid #DDD5CD;padding-left:8px}
  .dp-fig svg{width:17px;height:17px;margin:0 0 6px}
  .dp-fig b{font-size:14.5px;line-height:1.2}
  .dp-fig span{font-size:8.5px;letter-spacing:.1em;line-height:1.35;margin-top:3px}

  /* Udaipur hero: the four promises on one line */
  .ct-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:0;align-items:start}
  .ct-proof li{display:block;padding:0 6px;text-align:center}
  .ct-proof li + li{border-left:1px solid #D5DEE3}
  .ct-proof a,.ct-proof li > span{flex-direction:column;gap:6px;font-size:12px;line-height:1.3;white-space:normal;text-align:center}
  .ct-proof svg{width:20px;height:20px}

  /* inclusions: two answer columns only, so the whole table stays on screen and the charge names get the room */
  .qc-t col:not(.qc-c1){width:66px}
  .qc-t thead th{padding:12px 4px 10px}
  .qc-t .qc-col{font-size:11.5px;line-height:1.25}

  /* Udaipur routes: a real table again, swiped sideways */
  .ct-rt-wrap{margin-right:-16px}
  .ct-rt-t,.ct-rt-t tbody{display:table}
  .ct-rt-t{width:auto;min-width:640px}
  .ct-rt-t thead{display:table-header-group}
  .ct-rt-t tbody{display:table-row-group}
  .ct-rt-t colgroup{display:table-column-group}
  .ct-rt-t tbody tr{display:table-row;padding:0;border:0}
  .ct-rt-t tbody tr:first-child{border-top:0}
  .ct-rt-t tbody th,.ct-rt-t tbody td{display:table-cell;padding:18px 14px 18px 0;border-bottom:1px solid #D3DCE1;font-size:14.5px}
  .ct-rt-t tbody th{position:sticky;left:0;z-index:2;background:#fff;padding-right:14px}
  .ct-rt-t thead th:first-child{position:sticky;left:0;z-index:2;background:#fff}
  .ct-rt-t tbody td:nth-child(3){text-align:left;color:var(--ink)}
  .ct-rt-t .rt-dist::before,.ct-rt-t .rt-dist::after{display:block}
  .ct-rt-t .ct-rt-go{width:44px;padding:0;justify-content:center}
  .ct-rt-t .ct-rt-go span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

@media(max-width:760px){
  .uv-rev-btn.is-prev{left:0}
  .uv-rev-btn.is-next{right:0}
  html body.ct-page header .wrap.nav,html body.uv-page header .wrap.nav{padding:0 6px 0 12px;height:52px}
  html body.uv-page header.stuck .wrap.nav,html body.ct-page header.stuck .wrap.nav{height:50px}
  /* Shirdi route: the stage markers sit inside the 16px margin */
  .dp-rt{padding-left:18px}
}

/* ---- phones: last edge fixes found by checking every page at 360, 375 and 414 ---------- */
@media(max-width:760px){
  /* wedding coverage: the column may not grow past the screen for a long button label */
  .sv-covergrid{grid-template-columns:minmax(0,1fr)}
  .sv-covergrid .btn{max-width:100%;white-space:normal;text-align:left}
  /* Shirdi hero: caption and outlined title inside the 16px margin */
  .dp-scene figcaption{right:16px;bottom:16px}
  .dp-to{margin-left:0;padding-left:1px}

  /* closing band on inner pages: the three promises as one row, icon over label, hairlines between */
  .av-js .sv-final .fq-assure,.av-js .dp-final .fq-assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    margin-left:0;clip-path:none;max-width:none}
  .av-js .sv-final .fq-assure li,.av-js .dp-final .fq-assure li{display:flex;flex-direction:column;align-items:center;gap:7px;margin:0;
    padding:0 6px;border-left:1px solid rgba(255,255,255,.35);white-space:normal;text-align:center;font-size:12.5px;line-height:1.3}
  .av-js .sv-final .fq-assure li:first-child,.av-js .dp-final .fq-assure li:first-child{border-left:0;padding-left:0}
  .av-js .sv-final .fq-assure li:last-child,.av-js .dp-final .fq-assure li:last-child{padding-right:0}
  .av-js .sv-final .fq-assure svg,.av-js .dp-final .fq-assure svg{width:20px;height:20px}
}

/* ---- touch: no state that only a mouse can change ------------------------------------ */
/* the Urbania use list marks one row "on" to drive a photo swap; without the photo every row is equal */
@media(max-width:1180px){
  .uv-use-list a.is-on .uv-use-n{color:#AEBAC2}
  .uv-use-list a.is-on .uv-use-go{background:transparent;border-color:#D3DCE1;color:var(--navy);transform:none}
}
/* touch screens answer a tap immediately instead of leaving a hover look stuck on */
@media(hover:none){
  .uv-use-list a:active .uv-use-go,.ct-fg-row:active .ct-fg-go,.ct-cv a:active .ct-cv-go,.oc-tile:active .oc-go i{transform:translateX(4px)}
  .vcell:active{border-color:var(--navy)}
  .oc-tile:hover{transform:none;box-shadow:none}
  .oc-tile:hover .oc-ph,.gz-t:hover img{transform:none}
  .fl-step:hover span,.fl-step:hover b{color:inherit}
}
@media(max-width:760px){
  html body .uv-lug .uv-lug-copy p:not(.uv-lug-rule),html body .uv-own-tbl td{font-size:15px}
}
@media(max-width:760px){
  /* inclusions: the night-hours note wraps inside its column */
  .qc-t td em{white-space:normal;font-size:10px;line-height:1.3;flex-wrap:wrap;text-align:center}
  /* Udaipur routes: fixed columns so the distance bar keeps its room while the table swipes */
  .ct-rt-t{min-width:760px;table-layout:fixed}
  .ct-rt-t .c-route{width:150px}
  .ct-rt-t .c-time{width:112px}
  .ct-rt-t .c-sug{width:150px}
  .ct-rt-t .c-go{width:60px}
}
@media(max-width:760px){ .ct-rt-t .rt-axis .rt-o{visibility:hidden} }
@media(min-width:621px) and (max-width:1040px){ .oc-head{font-size:clamp(24px,3.2vw,30px);line-height:1.3} }

/* ============================================================================
   WhatsApp trip planner: a bottom sheet on phones, a centred dialog on larger screens
   ============================================================================ */
body.wa-open .vrail{opacity:0;transform:translateY(12px);pointer-events:none}
.wa-sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(6,24,34,0);transition:background-color .3s ease}
.wa-sheet[hidden]{display:none}
.wa-sheet.open{background:rgba(6,24,34,.55)}
.wa-panel{position:relative;display:flex;flex-direction:column;width:100%;max-height:92vh;max-height:92dvh;background:#fff;
  border-radius:16px 16px 0 0;box-shadow:0 -20px 60px -20px rgba(6,24,34,.5);transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,1,.36,1);outline:none;font-family:var(--body);color:var(--ink)}
.wa-sheet.open .wa-panel{transform:none}
.wa-panel::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#D5DEE3}
.wa-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:start;padding:24px 16px 14px;border-bottom:1px solid var(--line)}
.wa-badge{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--wa);color:#fff}
.wa-badge svg{width:23px;height:23px}
.wa-title{margin:2px 0 0;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.018em;line-height:1.2;color:var(--navy)}
.wa-sub{margin:4px 0 0;font-size:13.5px;font-weight:300;line-height:1.45;color:var(--grey)}
.wa-x{width:44px;height:44px;margin:-6px -6px 0 0;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;color:var(--grey);cursor:pointer}
.wa-x:hover{background:var(--pale);color:var(--navy)}
.wa-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 18px}
/* each section reads as a step: a numbered disc and a plain title, separated by space alone */
.wa-k{display:flex;align-items:center;gap:12px;margin:30px 0 14px;
  font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.2;color:var(--navy)}
.wa-body > .wa-k:first-child{margin-top:20px}
.wa-k i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,110,66,.12);
  font-style:normal;font-size:13px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
.wa-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.wa-f{display:block;min-width:0;margin:0 0 12px;padding:0;border:0}
.wa-f > span,.wa-f > legend{display:block;margin:0 0 6px;padding:0;font-family:var(--disp);font-size:13px;font-weight:600;color:var(--navy)}
.wa-f em{font-style:normal;font-weight:400;color:var(--grey);margin-left:4px}
.wa-f input[type="text"],.wa-f input[type="date"],.wa-f input[type="time"]{
  display:block;width:100%;min-width:0;height:48px;padding:0 12px;border:1px solid #D5DEE3;border-radius:8px;background:#fff;
  font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease}
.wa-f input::placeholder{color:#9AA7AE}
.wa-f input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(255,110,66,.25)}
.wa-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid #D5DEE3;border-radius:8px;overflow:hidden}
.wa-seg label{position:relative;cursor:pointer}
.wa-seg label + label{border-left:1px solid #D5DEE3}
.wa-seg input{position:absolute;opacity:0;pointer-events:none}
.wa-seg span{display:grid;place-items:center;height:46px;font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--grey);transition:background-color .2s ease,color .2s ease}
.wa-seg input:checked + span{background:var(--navy);color:#fff}
.wa-seg input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--orange)}
.wa-foot{flex:none;display:grid;gap:4px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.wa-send{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border:0;border-radius:999px;background:var(--wa);
  font-family:var(--disp);font-size:15.5px;font-weight:600;color:#fff;cursor:pointer;transition:filter .2s ease}
.wa-send svg{width:20px;height:20px}
.wa-send i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wa-send:hover{filter:brightness(.95)}
.wa-send:hover i{transform:translateX(3px)}
.wa-send:focus-visible,.wa-skip:focus-visible,.wa-x:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.wa-skip{height:44px;border:0;background:none;font-family:var(--disp);font-size:14px;font-weight:500;color:var(--grey);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(107,123,133,.4)}
.wa-skip:hover{color:var(--navy)}
@media(min-width:761px){
  .wa-sheet{align-items:center;padding:24px}
  .wa-panel{width:min(560px,100%);max-height:calc(100vh - 48px);border-radius:12px;transform:translateY(16px) scale(.98);opacity:0;
    transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease}
  .wa-sheet.open .wa-panel{transform:none;opacity:1}
  .wa-panel::before{display:none}
  .wa-head{padding:24px 24px 16px}
  .wa-body{padding:4px 24px 20px}
  .wa-foot{grid-template-columns:auto 1fr;align-items:center;padding:14px 24px 18px}
  .wa-send{padding:0 26px}
  .wa-skip{justify-self:end}
}
@media(prefers-reduced-motion:reduce){ .wa-panel,.wa-sheet{transition:none} }

/* ---- planner: date and time pickers in the site's own style ------------------------------ */
.wa-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;padding:0 12px 0 14px;
  border:1px solid #D5DEE3;border-radius:8px;background:#fff;font:inherit;font-size:15.5px;color:#9AA7AE;text-align:left;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease}
.wa-pick.has-v{color:var(--ink);font-weight:500}
.wa-pick:hover{border-color:#AEBAC2}
.wa-pick.is-open,.wa-pick:focus-visible{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(255,110,66,.25)}
.wa-pv{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-pi{flex:none;width:19px;height:19px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.wa-pop{margin:-2px 0 14px;padding:14px;border:1px solid #E1E8EC;border-radius:12px;background:#fff;
  box-shadow:0 18px 40px -22px rgba(10,38,52,.35);animation:wa-pop-in .22s cubic-bezier(.22,1,.36,1)}
.wa-pop[hidden]{display:none}
@keyframes wa-pop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wa-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.wa-cal-h b{font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.wa-nav{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;
  color:var(--navy);cursor:pointer}
.wa-nav:hover:not(:disabled){background:var(--pale)}
.wa-nav:disabled{opacity:.25;cursor:default}
.wa-cal-w,.wa-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.wa-cal-w span{padding:4px 0 6px;text-align:center;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--grey)}
.wa-day{position:relative;height:40px;border:0;border-radius:8px;background:none;font-family:var(--disp);font-size:14.5px;font-weight:500;
  color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:background-color .15s ease,color .15s ease}
.wa-day:hover:not(:disabled){background:var(--pale)}
.wa-day:disabled{color:#C4CDD3;cursor:default}
.wa-day.is-today{color:var(--orange);font-weight:700}
.wa-day.is-today::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--orange)}
.wa-day.is-in{background:rgba(255,110,66,.10);border-radius:0}
.wa-day.is-from{box-shadow:inset 0 0 0 1.5px var(--navy)}
.wa-day.is-sel,.wa-day.is-sel:hover{background:var(--navy);color:#fff}
.wa-day.is-sel::after{background:#fff}
.wa-day:focus-visible,.wa-nav:focus-visible,.wa-lnk:focus-visible{
  outline:2px solid var(--orange);outline-offset:1px}
.wa-cal-f{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #EEF2F4}
.wa-lnk{min-height:36px;padding:0 6px;border:0;background:none;font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--orange);cursor:pointer}
.wa-lnk[data-clear]{color:var(--grey)}
@media(prefers-reduced-motion:reduce){ .wa-pop{animation:none} }

/* ---- planner: the clock -------------------------------------------------------------------------- */
.wa-clk-top{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 14px}
.wa-clk-read{display:flex;align-items:center;gap:2px;font-family:var(--disp);font-weight:600}
.wa-clk-read span{padding:0 2px;font-size:22px;line-height:1;color:#AEBAC2}
.wa-clk-seg{min-width:50px;height:44px;padding:0 6px;border:0;border-radius:8px;background:#F1F5F7;font-family:var(--disp);font-size:24px;font-weight:600;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.wa-clk-seg.is-on{background:rgba(255,110,66,.12);color:var(--orange)}
.wa-ap{display:flex;flex-direction:column;border:1px solid #D5DEE3;border-radius:8px;overflow:hidden}
.wa-ap button{width:44px;height:22px;border:0;background:#fff;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--grey);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.wa-ap button + button{border-top:1px solid #D5DEE3}
.wa-ap button.is-on{background:var(--navy);color:#fff}
.wa-dial{position:relative;width:min(252px,100%);aspect-ratio:1;margin:0 auto 4px;border-radius:50%;background:#F1F5F7;
  touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.wa-hand{position:absolute;left:50%;bottom:50%;width:2px;height:38%;margin-left:-1px;background:var(--navy);transform-origin:50% 100%;pointer-events:none}
.wa-hand::after{content:"";position:absolute;left:50%;top:0;width:38px;height:38px;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%)}
.wa-dial.is-anim .wa-hand{transition:transform .32s cubic-bezier(.22,1,.36,1)}
.wa-hub{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--navy);pointer-events:none}
.wa-num{position:absolute;z-index:1;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;
  font-family:var(--disp);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--navy);pointer-events:none;transition:color .2s ease}
.wa-num.is-on{color:#fff}
.wa-dial:focus-visible,.wa-clk-seg:focus-visible,.wa-ap button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.wa-lnk[data-done]{padding:0 14px}
@media(max-width:760px){ .wa-ap button{width:46px;height:25px} }
@media(prefers-reduced-motion:reduce){ .wa-dial.is-anim .wa-hand{transition:none} }

/* ---- planner: month and year view in the calendar ----------------------------------------------- */
.wa-mt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:none;
  font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--navy);cursor:pointer}
.wa-mt:hover{background:var(--pale)}
.wa-mt i{width:7px;height:7px;margin-top:-3px;border-right:1.6px solid var(--orange);border-bottom:1.6px solid var(--orange);transform:rotate(45deg)}
.wa-mt:focus-visible,.wa-yr:focus-visible,.wa-mo:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.wa-yrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #E1E8EC;border-radius:8px;overflow:hidden}
.wa-yr{height:44px;border:0;background:#fff;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums}
.wa-yr + .wa-yr{border-left:1px solid #E1E8EC}
.wa-yr.is-on{background:var(--navy);color:#fff}
.wa-mos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
.wa-mo{height:46px;border:1px solid #E1E8EC;border-radius:8px;background:#fff;font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer}
.wa-mo:hover:not(:disabled){border-color:#AEBAC2}
.wa-mo:disabled{color:#C4CDD3;border-color:#F0F3F5;cursor:default}
.wa-mo.is-sel{background:rgba(255,110,66,.10);border-color:var(--orange)}

/* ============================================================================
   Section labels: every numbered label (02 Services, 04 Why Avante, 05 Our story, 09, 12 FAQ) at the
   size the centred ones already use (01 Our vehicles, 03, 06, 07, 10, 11: 16px, .1em)
   ============================================================================ */
html body .ed-eyebrow{font-size:16px;letter-spacing:.1em;gap:14px}
@media(max-width:760px){
  html body .ed-eyebrow,body.av-js .ruled span,body.av-js .gz-eyebrow{font-size:14.5px;letter-spacing:.1em}
}

/* ============================================================================
   Vehicle cards: the hover
   A navy sheet comes down from the top edge. The dark face is laid out exactly like the resting card,
   so the vehicle, name and price hold their place and are simply repainted in navy while the sheet
   passes over them; then the features rise in one after another, "View details" is already the orange
   button, and a fine orange line draws across the top. Keyboard focus gets the same.
   ============================================================================ */
.vhint{height:44px}
/* one fine orange line along the top edge, fading with the face rather than drawing itself */
.vcell::before{content:"";position:absolute;left:0;right:0;top:0;z-index:3;height:2px;background:var(--orange);
  opacity:0;transition:opacity .4s ease;pointer-events:none}

@media(hover:hover) and (min-width:761px){
  /* the navy sheet comes down from the top edge, on one easing curve in both directions so it
     feels like the same movement running forwards and back */
  html body.av-js .vface-dark{display:flex;opacity:1;will-change:clip-path;
    clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.4,0,.2,1)}
  html body.av-js .vcell:hover .vface-dark,
  html body.av-js .vcell:has(.vcell-link:focus-visible) .vface-dark{
    clip-path:inset(0 0 0 0);transition:clip-path .62s cubic-bezier(.4,0,.2,1)}
  html body.av-js .vcell:hover::before,
  html body.av-js .vcell:has(.vcell-link:focus-visible)::before{opacity:1}

  /* the dark face is laid out exactly like the resting card, so the vehicle, name and price
     hold their place and are simply repainted as the sheet passes over them */
  html body.av-js .vface-dark .vstage{aspect-ratio:760 / 490}
  html body.av-js .vface-dark .vstage .vimg{object-fit:cover}
  html body.av-js .vface-dark .vmore{flex:1 1 auto;min-height:var(--av-more);gap:16px;margin-top:12px;opacity:1}
  html body.av-js .vface-dark .vmodels{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}
  html body.av-js .vface-dark .vfeat{gap:12px}
  html body.av-js .vface-dark .vfeat li{font-size:13.5px;font-weight:400;line-height:1.4;color:rgba(255,255,255,.92)}
  html body.av-js .vface-dark .vfeat li::before{margin-top:6px}
  html body.av-js .vface-dark .vlink{height:44px;margin-top:auto;padding:0 6px 0 18px;gap:10px;font-size:13.5px}
  html body.av-js .vface-dark .vlink i{width:32px;height:32px}
  html body.av-js .vface-dark .vprice{color:#fff}
  html body.av-js .vface-dark .vnum{color:var(--orange)}

  /* the only movement: the vehicle eases up by two per cent */
  html body.av-js .vface-dark .vimg{transform:none;transition:transform .55s cubic-bezier(.22,1,.36,1)}
  html body.av-js .vcell:hover .vface-dark .vimg,
  html body.av-js .vcell:has(.vcell-link:focus-visible) .vface-dark .vimg{transform:scale(1.02)}
}
@media(prefers-reduced-motion:reduce){
  html body.av-js .vface-dark,html body.av-js .vcell:hover .vface-dark{transition:none}
  html body.av-js .vface-dark .vimg,html body.av-js .vcell:hover .vface-dark .vimg{transform:none;transition:none}
  .vcell::before{transition:none}
}

/* ============================================================================
   Vehicle pages: the luggage tool
   The versions sit on one row whatever their number, the reading beside the van gets room to
   breathe, and the copy runs wider so the opening does not fall down the page in short lines.
   ============================================================================ */
html body .lug-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
html body .lug-ver{padding:9px 10px;font-size:clamp(12px,.9vw,13.5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .lug-read{gap:clamp(20px,2.2vw,34px);padding:10px 0 20px 26px}
html body .lug-stat dd{margin-top:8px}
html body .lug-where{margin-top:clamp(22px,2.2vw,30px);padding-top:clamp(16px,1.6vw,22px)}
@media(min-width:1341px){
  html body .uv-lug-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(36px,4vw,72px)}
  html body .uv-lug-rule{max-width:42ch}
  html body .uv-lug-copy p{max-width:48ch}
}
@media(max-width:760px){
  html body .lug-tabs{grid-auto-columns:minmax(108px,1fr);overflow-x:auto;scrollbar-width:none}
  html body .lug-tabs::-webkit-scrollbar{display:none}
  html body .lug-read{padding:10px 0 16px 18px;gap:18px}
}

/* ============================================================================
   Vehicle pages: the specification table
   Each version is drawn as a seat plan above its column, or beside its row; each row of facts
   takes the line icon for its kind. Nothing here moves on hover: the table is read, not operated.
   ============================================================================ */
html body .uv-tbl{max-width:none;width:100%}
/* the plan is a drawing and keeps its size; only the fact icons are small */
html body .uv-tbl thead .uv-plan{display:block;width:100%;max-width:240px;height:auto;margin:0 0 18px;color:var(--navy)}
html body .uv-tbl thead th svg:not(.uv-plan){display:inline-block;width:22px;height:22px;margin:0 11px -5px 0;fill:none;
  stroke:#9AA7AF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body .uv-tbl thead tr > *{border-bottom:1px solid rgba(10,38,52,.22);padding-bottom:20px;vertical-align:bottom}
html body .uv-tbl thead th{font-size:clamp(19px,1.7vw,25px)}
html body .uv-tbl-corner span{font-size:13.5px;letter-spacing:.14em}

/* the fact this row carries, set larger so the specification reads first */
html body .uv-tbl tbody th{display:flex;align-items:center;gap:16px;font-family:var(--disp);font-size:17.5px;
  font-weight:600;color:var(--navy);white-space:normal;padding-left:0;box-shadow:none;
  padding-right:clamp(16px,1.8vw,28px)}
html body .uv-tbl tbody th svg:not(.uv-plan){flex:none;width:42px;height:42px;margin:0;padding:9px;border-radius:50%;
  background:rgba(255,110,66,.10);stroke:var(--orange);stroke-width:1.5;vertical-align:baseline}
/* a seat plan beside a row is a drawing, not an icon */
html body .uv-tbl tbody th svg.uv-plan{width:92px;height:auto;flex:none;padding:0;border-radius:0;
  background:none;stroke:none;color:var(--navy)}
html body .uv-tbl tbody td{font-size:16.5px;color:var(--grey)}
html body .uv-tbl .tb-n{font-family:var(--disp);font-size:19.5px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
html body .uv-tbl tbody th,html body .uv-tbl tbody td{padding-top:clamp(18px,1.9vw,26px);padding-bottom:clamp(18px,1.9vw,26px)}
/* the seats row carries the plan for each version, so it is given room */
html body .uv-tbl tbody tr.is-seats td{font-size:18px;color:var(--ink)}
html body .uv-tbl tbody tr.is-seats .uv-plan{display:block;width:100%;max-width:190px;margin:0 0 10px;color:var(--navy)}
@media(max-width:760px){
  html body .uv-tbl tbody th{font-size:14.5px;gap:10px}
  html body .uv-tbl tbody th svg:not(.uv-plan){width:30px;height:30px;padding:6px}
  html body .uv-tbl tbody th svg.uv-plan{width:62px}
  html body .uv-tbl thead .uv-plan{max-width:150px;margin-bottom:12px}
  html body .uv-tbl tbody tr.is-seats .uv-plan{max-width:140px}
}

/* ============================================================================
   Vehicle pages: every version we run
   The photograph stands on the page with nothing behind it: no panel, no frame, no tint. The seat
   count, the picture and the words share one baseline grid, so a row reads as one composition.
   ============================================================================ */
html body .uv-v{grid-template-columns:minmax(78px,108px) minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,2.8vw,52px);align-items:center;padding:clamp(28px,3.2vw,48px) 0}
html body .uv-v-shot{margin:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
html body .uv-v-shot img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;border-radius:6px}
html body .uv-v-shot img.is-cut{object-fit:contain;padding:0;border-radius:0}
html body .uv-v-n b{font-size:clamp(32px,3vw,48px);line-height:.95}
html body .uv-v-copy h3{font-size:clamp(21px,1.9vw,28px);letter-spacing:-.022em;margin-bottom:14px}
html body .uv-v-copy p{font-size:clamp(14px,1.05vw,15.5px);line-height:1.62;color:var(--grey);max-width:52ch}
@media(max-width:900px){
  html body .uv-v{grid-template-columns:minmax(58px,84px) minmax(0,1fr);row-gap:18px}
  html body .uv-v-shot{grid-column:2}
  html body .uv-v-copy{grid-column:1 / -1}
}

/* ---- the luggage tool reads as one panel: drawing and reading on the same centre line ---- */
html body .uv-lug-tool{max-width:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,2vw,30px)}
html body .uv-lug-tool .lug-tabs{background:#F1F4F6}
html body .lug-stage{align-items:center;column-gap:clamp(22px,2.6vw,44px)}
html body .lug-van{display:block;align-self:center}
html body .lug-van svg{width:100%;max-width:520px;margin:0 auto}
html body .lug-reads{align-content:center}
html body .lug-read{justify-content:center}

/* ---- "ours, not sourced": an even weight, so the opening leads and the rest reads quietly ---- */
html body .uv-own-l .uv-own-big{font-family:var(--disp);font-size:clamp(17px,1.35vw,20px);font-weight:500;
  line-height:1.5;letter-spacing:-.012em;color:var(--navy);max-width:46ch}
html body .uv-own-l .uv-own-big ~ .uv-own-big{font-family:var(--body);font-size:15.5px;font-weight:300;
  line-height:1.66;color:var(--grey);letter-spacing:0}
/* the drawing keeps half the panel; the reading wraps rather than pushing it out */
html body .lug-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
html body .lug-reads{min-width:0}
html body .lug-stat dd{white-space:normal}
/* the first column needs no rule of its own: the row hairlines carry the table */
html body .uv-tbl tbody th{box-shadow:none;padding-right:clamp(16px,1.8vw,28px)}
/* where the document lists no owned vehicles, the photograph takes the whole card */
html body .uv-own-card-solo{grid-template-columns:minmax(0,1fr)}
html body .uv-own-card-solo .uv-own-van img{max-width:520px;margin:0 auto}
/* the luggage copy on the same even scale as the rest of the page: a lead, then a quiet note */
html body .uv-lug-copy .uv-lug-rule{font-family:var(--disp);font-size:clamp(17px,1.35vw,20px);font-weight:500;
  line-height:1.5;letter-spacing:-.012em;color:var(--navy);max-width:44ch}
html body .uv-lug-copy p{font-size:15.5px;font-weight:300;line-height:1.66;color:var(--grey);max-width:48ch;margin-top:14px}
html body .uv-lug-copy .uv-lug-close{margin-top:14px}
html body .uv-lug-cta{margin-top:clamp(20px,2vw,28px)}
/* the "where they go" line wraps inside the panel instead of running past its edge */
html body .lug-where{flex-wrap:wrap;white-space:normal;row-gap:10px;column-gap:clamp(14px,1.6vw,26px)}
html body .lug-where .lug-w{white-space:normal;flex:0 1 auto;align-items:flex-start}
html body .lug-where .lug-k{flex:0 0 auto}
/* the seat plan drawn for a version: above the column it heads, or small beside its row */
/* a seat plan in a row header is a drawing, not an icon: no disc, no tint, its own width */

/* the footer carries the real mark, blended on the dark panel exactly as the header does */
html body footer .flogo{display:inline-flex;align-items:center}
html body footer .flogo img.logo-mark{width:auto;height:52px}
@media(max-width:760px){ html body footer .flogo img.logo-mark{height:46px} }

/* ============================================================================
   Vehicle pages: the published rate card
   Its own section: the prices on the left, and beside them what can be added and what the price
   depends on. Rules and type carry it; the two side blocks sit on the faintest tint so the
   numbers stay the loudest thing in the section.
   ============================================================================ */
html body .rate-sec{background:var(--white);padding:clamp(48px,5.6vw,88px) 0 clamp(54px,6.2vw,96px)}
html body .rc{max-width:none;margin:0;padding:0 clamp(18px,3.4vw,52px)}
html body .rc-head{margin-bottom:clamp(34px,3.6vw,56px)}
html body .rc-h{margin:8px 0 0;color:var(--navy)}
html body .rc-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:start}

html body .rc-hint{display:none}
html body .rc-scroll{overflow-x:auto;scrollbar-width:none}
html body .rc-scroll::-webkit-scrollbar{display:none}
html body .rc-tbl{width:100%;border-collapse:collapse;min-width:600px;table-layout:auto}
html body .rc-tbl thead th{text-align:left;padding:0 20px 16px 0;font-family:var(--disp);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey);white-space:nowrap;vertical-align:bottom}
html body .rc-tbl thead tr > *{border-bottom:1px solid rgba(10,38,52,.22)}
html body .rc-tbl tbody th{text-align:left;padding:clamp(16px,1.7vw,22px) 18px clamp(16px,1.7vw,22px) 0;
  font-family:var(--disp);font-size:17px;font-weight:600;color:var(--navy);white-space:nowrap}
html body .rc-tbl tbody td{padding:clamp(15px,1.6vw,20px) 14px clamp(15px,1.6vw,20px) 0;vertical-align:baseline;white-space:nowrap}
html body .rc-tbl tbody tr > *{border-bottom:1px solid var(--line)}
html body .rc-tbl tbody tr:last-child > *{border-bottom:0}
html body .rc-lbl{display:none}
html body .rc-fig{font-family:var(--disp);font-size:18px;font-weight:500;color:#41535E;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* the entry price is the one people compare on */
html body .rc-tbl tbody td:first-of-type .rc-fig{color:var(--orange)}
html body .rc-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,36px)}

html body .rc-side{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
html body .rc-card{padding:clamp(20px,2vw,28px);border-radius:14px;background:#FAF7F4}
html body .rc-card .rc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff}
html body .rc-card .rc-ic svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .rc-card h4,html body .rc-card .rc-h{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0}
html body .rc-add{background:#fff;box-shadow:inset 0 0 0 1px rgba(10,38,52,.10)}
html body .rc-add h4,html body .rc-add .rc-h{display:flex;align-items:center;gap:10px}
html body .rc-add ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(10,38,52,.10)}
html body .rc-add li{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:96px;padding:16px 18px;border-radius:10px;background:#FAF7F4;box-shadow:inset 0 0 0 1px rgba(10,38,52,.07);font-size:14px;line-height:1.4;color:var(--grey)}
html body .rc-add li + li{border-left:0}
html body .rc-add li b{font-family:var(--disp);font-size:21px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;align-self:end}
html body .rc-notes{background:#F6F8F9}
html body .rc-notes ol{list-style:none;counter-reset:rcn;margin:14px 0 0;padding:0}
html body .rc-notes li{counter-increment:rcn;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;
  padding:14px 0;border-bottom:1px solid rgba(10,38,52,.09);font-size:15px;font-weight:300;line-height:1.6;color:var(--ink)}
html body .rc-notes li:last-child{border-bottom:0}
html body .rc-notes li::before{content:counter(rcn,decimal-leading-zero);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,110,66,.12);font-family:var(--disp);font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--orange)}

@media(max-width:1040px){
  html body .rc-grid{grid-template-columns:minmax(0,1fr)}
  html body .rc-hint{display:block;margin:0 0 10px;font-family:var(--disp);font-size:12px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
  html body .rc-hint span{color:var(--orange)}
}
@media(max-width:520px){
  html body .rc-add ul{grid-template-columns:1fr}
  html body .rc-add li + li{border-left:0;padding-left:16px}
}

/* ---- the choice panel, where the comparison is not about headcount ---- */
html body .uv-say{background:var(--navy);border-radius:14px;padding:clamp(22px,2.4vw,34px);align-self:start}
html body .uv-say .pk-k{font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);font-weight:600;color:#fff;margin:0}
html body .uv-say .pk-sides{list-style:none;display:flex;flex-direction:column;gap:18px;margin:20px 0 0}
html body .uv-say .pk-sides li{display:flex;flex-direction:column;gap:5px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.16)}
html body .uv-say .pk-sides li:last-child{border-bottom:0;padding-bottom:0}
html body .uv-say .pk-sides b{font-family:var(--disp);font-size:17px;font-weight:600;color:#fff}
html body .uv-say .pk-sides span{font-size:14.5px;font-weight:300;line-height:1.55;color:rgba(255,255,255,.72)}
html body .uv-say .pk-cta{margin-top:24px}

/* ---- practical notes: the vehicle drawn once, with each detail marked on it in order ---- */
html body .pn-tool .pn-k{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin:0 0 6px}
html body .pn-draw{position:relative;padding:4px 0 8px}
html body .pn-van{display:block;width:100%;height:auto;overflow:visible}
html body .pn-list{list-style:none;display:grid;gap:0;margin:clamp(16px,1.8vw,24px) 0 0;padding:0}
html body .pn-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(14px,1.5vw,18px) 0;border-top:1px solid var(--line)}
html body .pn-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,110,66,.12);color:var(--orange);font-family:var(--disp);font-size:12px;font-weight:600}
html body .pn-t{display:flex;flex-direction:column;gap:3px}
html body .pn-t b{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--navy)}
html body .pn-say{font-size:15px;color:var(--ink)}
html body .pn-why{font-size:14px;font-weight:300;color:var(--grey)}
/* practical notes: the words and the panel start on the same line, rather than one floating */
html body .pn-sec .uv-lug-grid{align-items:start}
html body .pn-sec .uv-lug-copy{padding-top:clamp(2px,.4vw,8px)}
html body .pn-sec .uv-lug-head{margin-bottom:clamp(14px,1.6vw,22px)}
html body .pn-tool{display:flex;flex-direction:column}
/* the owned vehicles read as a list of vehicles, not as one long sentence each */
html body .uv-own-tbl{width:100%}
html body .uv-own-tbl td{padding:12px 0;border-top:1px solid var(--line);vertical-align:top}
html body .uv-own-card{grid-template-columns:minmax(0,1fr)}
html body .uv-own-van img{max-width:560px;margin:0 auto}
html body .uv-own-rec{margin-top:clamp(16px,1.8vw,24px)}
html body .uv-own-tbl,html body .uv-own-tbl tbody,html body .uv-own-tbl tr,html body .uv-own-tbl td{display:block}
html body .uv-own-tbl tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));
  gap:0 clamp(18px,2.2vw,36px)}
html body .uv-own-tbl td{border-top:1px solid var(--line);padding:14px 0}
/* the row carries a small picture of the vehicle beside the words */
/* the owned list is words only; the vehicle picture sits above it already */
html body .uv-own-tbl td{display:block}
html body .own-pic{display:none}
html body .own-txt{min-width:0}
html body .own-k{display:block;font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
html body .own-d{display:block;margin-top:3px;font-size:14px;font-weight:300;line-height:1.5;color:var(--grey)}
/* with a version per column the table needs room: it scrolls rather than squeezing a column */
html body .uv-tbl{min-width:960px}
html body .uv-tbl thead th{vertical-align:bottom}
/* a column heading stays on one line; the table scrolls if the sum of them is wider than the page */
html body .uv-tbl thead th{white-space:nowrap;font-size:clamp(17px,1.45vw,22px)}
html body .uv-tbl thead th svg:not(.uv-plan){width:20px;height:20px;margin-right:9px}

/* ---- how many bags fit, where the answer is people and bags rather than a bag count ---- */
html body .fit-reads{display:grid}
html body .fit-read{grid-area:1 / 1;display:block;margin:0;padding:clamp(18px,2vw,26px) 0 0;border:0}
html body .fit-read:not(.is-on){visibility:hidden}
html body .fit-main dt,html body .fit-note dt{font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
html body .fit-main dd{margin:12px 0 0}
html body .fit-main dd b{display:block;margin-top:14px;font-family:var(--disp);font-size:clamp(19px,1.7vw,24px);
  font-weight:600;letter-spacing:-.022em;color:var(--navy)}
html body .fit-g{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
html body .fit-g + .fit-g{margin-left:18px;padding-left:18px;border-left:1px solid var(--line)}
html body .fit-g svg{width:26px;height:26px;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .fit-g.is-people svg{stroke:var(--navy)}
html body .fit-g.is-bags svg{stroke:var(--orange)}
html body .fit-note{margin-top:clamp(20px,2.2vw,30px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line)}
html body .fit-note dd{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font-size:15px;
  font-weight:300;line-height:1.55;color:var(--grey)}
html body .fit-note dd svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--orange);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  html body .fit-g svg{width:22px;height:22px}
  html body .fit-g + .fit-g{margin-left:12px;padding-left:12px}
}
/* the words stay beside the notes as they pass, so the two columns read as one composition */
@media(min-width:1101px){
  html body .pn-sec{overflow:clip}
  html body .pn-sec .uv-lug-grid{align-items:start}
  html body .pn-sec .uv-lug-copy{position:sticky;top:clamp(96px,9vw,132px)}
}
/* the row label is a table cell like the rest, so every rule runs the full width of the table */
html body .uv-tbl tbody th{display:table-cell;vertical-align:middle}
html body .uv-tbl tbody th svg{vertical-align:middle;margin-right:14px}
html body .uv-tbl tbody th svg.uv-plan{display:inline-block;vertical-align:middle}
html body .uv-tbl tbody td{vertical-align:middle}
/* the row label: icon and words on one line, and rows that are not taller than they need to be */
html body .uv-tbl tbody .tb-k{display:flex;align-items:center;gap:13px;line-height:1.35}
html body .uv-tbl tbody th svg{margin-right:0}
html body .uv-tbl tbody th svg:not(.uv-plan){width:36px;height:36px;padding:8px}
html body .uv-tbl tbody th,html body .uv-tbl tbody td{padding-top:clamp(12px,1.2vw,16px);padding-bottom:clamp(12px,1.2vw,16px)}

/* ---- homepage: the key figures carry the icon for what each one counts ---- */
/* icon and heading sit on one line; the description runs underneath */
html body .st-ic{display:inline-flex;vertical-align:middle;margin:14px 10px 0 0}
html body .st-ic svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body .st u{display:inline-block;vertical-align:middle;margin-top:14px}

/* ---- homepage: the routes table and the billing lists are read, not operated ---- */
html body .rt tbody tr:hover{background:none}
html body .rt tbody tr:hover td:first-child{transform:none}
html body .rt tbody tr:hover td:first-child::before{transform:scaleY(0)}
html body .rt tbody tr:hover td{color:inherit}
html body .rt tbody td{font-size:15.5px}
html body .rt tbody td:first-child,html body .rt tbody th{font-size:16px}
html body .bcol li:hover{color:rgba(255,255,255,.74);padding-left:0}
html body .bcol li:hover b{color:#fff}
html body .bcol li:hover .tick{background:rgba(255,110,66,.22);box-shadow:none}
html body .bcol li:hover .dot{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
html body .bcol li:hover .tick::before,html body .bcol li:hover .tick::after{background:var(--orange)}
html body .bcol li:hover .dot::before,html body .bcol li:hover .dot::after{background:#fff}
/* a row label stays on one line; the table scrolls if the columns together need more room */
html body .uv-tbl tbody .tb-k{white-space:nowrap;font-size:16px}

/* ---- homepage, how it works: the heading holds two lines and the photograph
        keeps to the width of the words above it ---- */
html body .hw-h2{max-width:27ch;font-size:clamp(25px,2.9vw,36px)}
html body .hw-shot{max-width:46ch}
/* the cut-out is now the vehicle alone, so the row needs less room around it */
html body .uv-v{padding:clamp(18px,2vw,30px) 0}
html body .uv-v-shot img.is-cut{aspect-ratio:auto;max-height:230px;margin:0 auto}

/* ---- homepage services: shorter tiles, and a link you can actually read ---- */
html body .oc-t-air,html body .oc-t-sch{aspect-ratio:3 / 2.25}
html body .oc-t-wed{aspect-ratio:6 / 3.4}
html body .oc-go{font-size:13.5px;margin-top:5px;line-height:1.25;letter-spacing:.01em}
html body .oc-go i{font-style:normal;margin-left:6px}
@media(max-width:760px){
  html body .oc-go{font-size:13px}
}

/* ---- homepage: the small labels read a size up ---- */
html body .rt thead th{font-size:12.5px;letter-spacing:.11em}
html body .blog .date,html body .post-b .date{font-size:12.5px;letter-spacing:.13em}
/* the versions list shows the seat count as a plan as well as a figure */

/* ---- vehicle pages: each version drawn in elevation, a window for roughly every three seats ---- */
html body .uv-v-draw{min-width:0}
html body .ev{display:block;width:100%;height:auto;max-width:520px;overflow:visible}
html body .ev-body{fill:#fff;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
html body .ev-glass,html body .ev-glass-front{fill:#EAF0F3;stroke:var(--navy);stroke-width:1.2;stroke-linejoin:round}
html body .ev-line{fill:none;stroke:var(--navy);stroke-opacity:.26;stroke-width:1}
html body .ev-light{stroke:var(--orange);stroke-width:4;stroke-linecap:round}
html body .ev-wheel{fill:#fff;stroke:var(--navy);stroke-width:1.6}
html body .ev-hub{fill:var(--navy)}
html body .ev-ground{stroke:var(--navy);stroke-opacity:.2;stroke-dasharray:2 5}
html body .ev-dim{fill:none;stroke:var(--navy);stroke-opacity:.28;stroke-width:1}
/* an owned vehicle named by its seat count carries the seat mark */
html body .own-k{display:flex;align-items:flex-start;gap:10px}
html body .own-ic{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the gallery counter: the total reads alongside the current frame, not beneath it */
html body .uv-cap-n span{font-size:16px;letter-spacing:.06em}

/* ---- the comparison lead: more air beside the heading, and a quieter paragraph ---- */
html body .uv-vs-head .uv-head-split{column-gap:clamp(40px,5.5vw,104px)}
html body .uv-vs-answer{font-family:var(--body);font-size:16.5px;font-weight:300;line-height:1.72;
  letter-spacing:0;color:var(--grey);max-width:62ch}
html body .uv-vs-answer b{font-weight:500;color:var(--navy)}
/* the FAQ heading holds two lines on the longer vehicle names */
html body .uv-faq .fq-h2{max-width:22ch;font-size:clamp(26px,3.2vw,42px)}

/* vehicle pages, "Ours, not sourced": both columns start at the top; on desktop the left column holds
   while a longer right column scrolls past (sticky needs the section to clip, not hide) */
@media(min-width:1001px){
  html body .uv-own-grid{align-items:start}
  html body section.uv-own-sec{overflow:clip}
  html body .uv-own-l{position:sticky;top:120px}
  html body .uv-own-l.sticky-off{position:static}
}

/* menu headings with no page of their own only open their dropdown */
html body .menu a:not([href]){cursor:default}

/* footer bar: everything on the left, so the floating WhatsApp and Call buttons never cover the policy links */
html body .fbar{justify-content:flex-start;gap:8px 32px}
html body .fbar a:hover{color:var(--orange)}

/* a column that would stay in place but is taller than the window (125% / 150% display scaling,
   short laptop screens) scrolls with the page instead, so nothing is ever cut off */
html body .sticky-off{position:static !important}
/* seat ranges on the city fleet rows may wrap on narrow windows rather than spill */
html body .ct-fg-seat{white-space:normal}
/* phones: Get Quote lives in the menu, not the header */
@media(max-width:760px){ html body header .nav-r .btn-sm{display:none !important} }

/* ---- display scaling (125% / 150% on Windows): keep the desktop layout down to 1101px ----
   The seating and luggage panel stacked below 1340px, which a 1920 screen at 150% (about 1263px)
   falls under; it now keeps its two columns until the tablet layout takes over at 1100px. */
@media(min-width:1101px) and (max-width:1340px){
  html body .uv-lug-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(36px,3.6vw,56px);row-gap:0}
  html body .uv-lug-tool{max-width:none}
}
/* the floating WhatsApp and Call buttons stay stacked on short windows, just a little smaller */
@media(max-height:560px){
  html body .vrail{display:flex !important;flex-direction:column !important;gap:8px}
  html body .vrail-a{width:44px;height:44px}
  html body .vrail-a svg{width:20px;height:20px}
}

/* ---- vehicle cards: a smoother hover ----
   The navy sheet eases in and out on a gentle S-curve, a touch slower. A short pause before it
   starts means a cursor sweeping across the row does not flash every card, and the features
   settle in just after the sheet rather than arriving with it. */
@media(hover:hover) and (min-width:761px){
  html body.av-js .vgrid .vface-dark{transition:clip-path .6s cubic-bezier(.65,0,.35,1)}
  html body.av-js .vgrid .vcell:hover .vface-dark,
  html body.av-js .vgrid .vcell:has(.vcell-link:focus-visible) .vface-dark{
    transition:clip-path .85s cubic-bezier(.65,0,.35,1) 60ms}
  html body.av-js .vgrid .vface-dark .vmore{opacity:0;transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease}
  html body.av-js .vgrid .vcell:hover .vface-dark .vmore,
  html body.av-js .vgrid .vcell:has(.vcell-link:focus-visible) .vface-dark .vmore{opacity:1;transform:none;
    transition:opacity .5s ease .38s,transform .6s cubic-bezier(.22,1,.36,1) .38s}
  html body.av-js .vgrid .vface-dark .vimg{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
  html body.av-js .vgrid .vcell::before{transition:opacity .6s ease}
}
@media(prefers-reduced-motion:reduce){
  html body.av-js .vgrid .vface-dark,html body.av-js .vgrid .vcell:hover .vface-dark,
  html body.av-js .vgrid .vface-dark .vmore,html body.av-js .vgrid .vcell:hover .vface-dark .vmore{transition:none}
}

/* ---- header logo: the transparent star, no box behind it ----
   logo.webp is the star on a solid black square; the header now uses the transparent
   logo-mark.webp, which is trimmed tight, so it is drawn at the star's own size */
html body header .nav .logo img.logo-mark{mix-blend-mode:normal;background:none;height:34px}
html body header.stuck .nav .logo img.logo-mark{height:30px}
@media(max-width:760px){
  html body header .nav .logo img.logo-mark{height:28px}
  html body header.stuck .nav .logo img.logo-mark{height:26px}
}


/* ---- review carousel arrows (homepage and Reviews page) ----
   Desktop: one arrow in the margin either side of the cards, level with their middle; the row of cards gives
   up 66px a side so the arrows always have room. Tablet and phone, where there is no side margin: the arrows
   sit at the two ends of the dots row under the cards. With one page of reviews (the dots row is hidden) the
   arrows are hidden as well. */
html body .rv-wrap{position:relative;--rvm:clamp(24px,2.6vw,36px)}
html body .rv-wrap > .rv-btn{position:absolute;z-index:2}
html body .rv-wrap:has(+ .rv-nav[hidden]) > .rv-btn{display:none}
html body .rv-nav{justify-content:center;min-height:46px}
@media(min-width:1041px){
  html body .rv-wrap{width:calc(100% - 132px)}
  html body .rv-wrap > .rv-btn{top:50%;transform:translateY(-50%)}
  html body .rv-wrap > #rvPrev{left:-66px}
  html body .rv-wrap > #rvNext{right:-66px}
}
@media(max-width:1040px){
  html body .rv-wrap > .rv-btn{top:calc(100% + var(--rvm))}
  html body .rv-wrap > #rvPrev{left:0}
  html body .rv-wrap > #rvNext{right:0}
}
@media(max-width:640px){
  html body .rv-wrap > #rvPrev{left:clamp(20px,4vw,56px)}
  html body .rv-wrap > #rvNext{right:clamp(20px,4vw,56px)}
}


/* ============================================================================
   Quote popup (avante-site.js): opened by "Get Quote" in the header and the mobile menu.
   Desktop: a centred card, navy reassurance panel on the left, the trip form on the right.
   Phone: a bottom sheet with a short navy heading and the form scrolling under it.
   The fields match the Contact page form.
   ============================================================================ */
.qm{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,24,34,0);transition:background-color .3s ease}
.qm[hidden]{display:none}
.qm.open{background:rgba(6,24,34,.62)}
.qm-panel{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);width:min(1000px,100%);
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:#fff;border-radius:20px;overflow:hidden;outline:none;
  box-shadow:0 40px 90px -30px rgba(6,24,34,.7);font-family:var(--body);color:var(--ink);
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.qm.open .qm-panel{transform:none;opacity:1}
.qm-x{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#F1F4F6;
  font-size:24px;line-height:1;color:#4E606B;cursor:pointer;transition:background .2s ease,color .2s ease}
.qm-x:hover,.qm-x:focus-visible{background:var(--navy);color:#fff}

/* the navy panel */
.qm-side{position:relative;display:flex;flex-direction:column;padding:clamp(28px,3vw,44px);color:#fff;overflow:hidden;
  background:radial-gradient(120% 70% at 0% 100%,rgba(255,110,66,.34),transparent 62%),var(--navy)}
.qm-eyebrow{margin:0;font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.qm-title{margin:14px 0 0;font-family:var(--disp);font-weight:500;font-size:clamp(23px,2.1vw,30px);line-height:1.16;letter-spacing:-.025em;color:#fff}
.qm-points{list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:0;display:grid;gap:14px}
.qm-points li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.86)}
.qm-points i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12)}
.qm-points svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qm-call{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:clamp(22px,2.4vw,30px);border-top:1px solid rgba(255,255,255,.16);color:#fff}
.qm-points{margin-bottom:clamp(26px,3vw,40px)}
.qm-call i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--orange)}
.qm-call svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qm-call span{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.72)}
.qm-call b{display:block;margin-top:2px;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff;transition:color .2s ease}
.qm-call:hover b,.qm-call:focus-visible b{color:var(--orange)}

/* the form */
.qm-main{padding:clamp(26px,2.8vw,40px);padding-top:clamp(30px,3vw,44px);overflow-y:auto;overscroll-behavior:contain}
.qm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.qm-f{min-width:0}
.qm-lab{display:block;margin-bottom:8px;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.qm-lab em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:#93A2AB;margin-left:6px;font-size:12px}
.qm-lab .req{color:var(--orange);margin-left:3px}
.qm-form input[type=text],.qm-form input[type=tel],.qm-form input[type=date],.qm-form input[type=time],.qm-form input[type=number],.qm-form select{
  width:100%;height:48px;padding:0 14px;border:1px solid #CBD5DB;border-radius:10px;background:#fff;
  font-family:var(--body);font-size:15px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.qm-form select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236B7B85%27 stroke-width=%271.8%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.qm-form input::placeholder{color:#9AA8B0;font-weight:300}
.qm-form input:focus,.qm-form select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,78,114,.12)}
.qm-f.is-bad input,.qm-f.is-bad .qm-step{border-color:#C0392B}
.qm-err{display:block;margin-top:5px;font-size:12.5px;color:#C0392B}
.qm-err:empty{display:none}
.qm-ico{position:relative}
.qm-ico .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--grey);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.qm-form .qm-ico input{padding-left:40px}
.qm-step{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;height:48px;border:1px solid #CBD5DB;border-radius:10px;overflow:hidden;background:#fff}
.qm-step button{border:0;background:none;cursor:pointer;color:var(--navy);font-size:20px;line-height:1;transition:background .2s ease}
.qm-step button:hover{background:#F1F4F6}
.qm-step button:first-child{border-right:1px solid #E0E6EA}
.qm-step button:last-child{border-left:1px solid #E0E6EA}
.qm-form .qm-step input[type=number]{border:0;border-radius:0;height:46px;text-align:center;padding:0 4px;-moz-appearance:textfield;box-shadow:none}
.qm-step input::-webkit-outer-spin-button,.qm-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qm-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.qm-status{margin:0;font-size:14px;color:#4E606B}
.qm-status:empty{display:none}
.qm-status.is-bad{color:#C0392B}

/* sent */
.qm-done{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:100%;padding:clamp(10px,2vw,30px) 0}
.qm-done[hidden],.qm-form[hidden]{display:none}
.qm-done-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(46,160,90,.14)}
.qm-done-ic svg{width:26px;height:26px;fill:none;stroke:#2E9A5A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qm-done h3{margin:20px 0 0;font-family:var(--disp);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.qm-done p{margin:10px 0 0;max-width:44ch;font-size:15.5px;font-weight:300;line-height:1.6;color:#4E606B}
.qm-done .btn{margin-top:24px}

@media(max-width:860px){
  .qm{align-items:flex-end;padding:0}
  .qm-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;max-height:94vh;max-height:94dvh;
    border-radius:18px 18px 0 0;transform:translateY(100%);opacity:1}
  .qm-side{padding:22px 64px 20px 20px}
  .qm-title{margin-top:8px;font-size:21px}
  .qm-points,.qm-call{display:none}
  .qm-x{background:rgba(255,255,255,.14);color:#fff}
  .qm-main{padding:20px 20px max(22px,env(safe-area-inset-bottom))}
  .qm-foot .btn{width:100%;justify-content:center}
}
@media(max-width:430px){
  .qm-grid{gap:14px 12px}
  .qm-form input[type=text],.qm-form input[type=tel],.qm-form input[type=date],.qm-form input[type=time],.qm-form select{padding-left:12px;padding-right:10px;font-size:14.5px}
  .qm-form .qm-ico input{padding-left:36px}
}
@media(prefers-reduced-motion:reduce){ .qm,.qm-panel{transition:none} }


/* ---- quote popup, polish: a vehicle and the brand star on the navy panel, a short heading over the form,
   softer fields, and a full-width send button with a line of reassurance under it ---- */
.qm-side{background:
  radial-gradient(90% 55% at 100% 0%,rgba(0,78,114,.55),transparent 70%),
  radial-gradient(120% 70% at 0% 100%,rgba(255,110,66,.36),transparent 62%),var(--navy)}
/* the star, large and faint, behind the heading */
.qm-side::before{content:"";position:absolute;top:-34px;right:-46px;width:210px;height:204px;opacity:.07;pointer-events:none;
  background:url(/assets/images/logo-mark.webp) center/contain no-repeat}
.qm-side > *{position:relative}
.qm-eyebrow{display:inline-flex;align-items:center;gap:10px}
.qm-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--orange)}
.qm-points{margin-bottom:0}
.qm-points i{background:var(--orange)}
/* the vehicle fills the space between the points and the phone line, and never crowds either */
.qm-van{display:block;flex:1 1 0;min-height:0;width:100%;max-height:150px;margin:clamp(14px,1.6vw,22px) 0 clamp(10px,1.2vw,16px);
  object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
.qm-call{margin-top:0}

.qm-head{margin:0 44px clamp(16px,1.7vw,22px) 0;padding-bottom:clamp(14px,1.5vw,18px);border-bottom:1px solid #E6ECEF}
.qm-head h3{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em;line-height:1.2;color:var(--navy)}
.qm-head p{margin:6px 0 0;font-size:14px;font-weight:300;color:#6B7B85}
.qm-head .req{color:var(--orange);font-weight:600}
.qm-main{padding-top:clamp(24px,2.4vw,34px)}
.qm-form input[type=text],.qm-form input[type=tel],.qm-form input[type=date],.qm-form input[type=time],.qm-form select,.qm-step{
  border-color:#DCE3E8;border-radius:12px;background-color:#F8FAFB}
.qm-form input[type=text]:hover,.qm-form input[type=tel]:hover,.qm-form input[type=date]:hover,.qm-form input[type=time]:hover,.qm-form select:hover{border-color:#B9C6CE}
.qm-form input:focus,.qm-form select:focus{background-color:#fff;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,110,66,.16)}
.qm-form .qm-step input[type=number]{background:transparent;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--navy)}
.qm-step:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,110,66,.16);background-color:#fff}
.qm-form .qm-step input[type=number]:focus{box-shadow:none}
.qm-step button{font-size:19px}
.qm-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:clamp(18px,1.9vw,24px)}
.qm-foot .btn{width:100%;justify-content:center;min-height:54px;font-size:15.5px;box-shadow:0 14px 26px -14px rgba(255,110,66,.75);transition:transform .25s ease,box-shadow .25s ease}
.qm-foot .btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 30px -14px rgba(255,110,66,.85)}
.qm-foot .btn:disabled{opacity:.6;cursor:default}
.qm-note{margin:0;text-align:center;font-size:13px;font-weight:300;color:#6B7B85}
.qm-status{text-align:center}
@media(max-width:860px){
  .qm-van,.qm-side::before{display:none}
  .qm-head{margin-right:0}
  .qm-head h3{font-size:18px}
}
@media(max-height:640px) and (min-width:861px){ .qm-van{display:none} .qm-points{margin-bottom:clamp(20px,2.4vw,30px)} }
@media(prefers-reduced-motion:reduce){ .qm-foot .btn{transition:none} .qm-foot .btn:hover:not(:disabled){transform:none} }
/* the card never grows past the screen: on a short window the form scrolls inside it and the send button stays reachable */
@media(min-width:861px){ .qm-panel{grid-template-rows:minmax(0,1fr)} .qm-main,.qm-side{min-height:0} }


/* ---- quote popup, revision (client, 2026-10-06): a light side panel instead of the navy one, a shorter
   card, no dash before the eyebrow, and buttons that do not change colour on hover ---- */
.qm-side{color:var(--navy);padding:clamp(22px,2.4vw,32px);
  background:radial-gradient(110% 60% at 0% 100%,rgba(255,110,66,.16),transparent 64%),linear-gradient(180deg,#F5F8FA,#EAF0F3)}
.qm-side::before{filter:brightness(0);opacity:.045}
.qm-eyebrow{display:block}
.qm-eyebrow::before{content:none}
.qm-title{margin-top:10px;font-size:clamp(21px,1.8vw,26px);color:var(--navy)}
.qm-points{margin-top:clamp(14px,1.6vw,20px);gap:10px}
.qm-points li{grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14px;font-weight:400;line-height:1.45;color:#3E4F5A}
.qm-points i{width:22px;height:22px}
.qm-points svg{width:12px;height:12px}
.qm-van{max-height:104px;margin:clamp(8px,1vw,14px) 0 clamp(6px,.8vw,10px);filter:drop-shadow(0 12px 12px rgba(10,38,52,.22))}
.qm-call{padding-top:clamp(14px,1.5vw,18px);border-top-color:rgba(10,38,52,.12);color:var(--navy)}
.qm-call i{width:40px;height:40px}
.qm-call span{color:#6B7B85}
.qm-call b{font-size:18px;color:var(--navy)}
.qm-call:hover b,.qm-call:focus-visible b{color:var(--navy)}

/* a shorter form: tighter rows and 44px fields */
.qm-main{padding:clamp(20px,2.2vw,28px);padding-top:clamp(20px,2.2vw,28px)}
.qm-head{margin-bottom:clamp(12px,1.3vw,16px);padding-bottom:clamp(10px,1.1vw,14px)}
.qm-head h3{font-size:clamp(18px,1.5vw,21px)}
.qm-head p{margin-top:4px;font-size:13.5px}
.qm-grid{gap:12px 16px}
.qm-lab{margin-bottom:6px;font-size:11px}
.qm-form input[type=text],.qm-form input[type=tel],.qm-form input[type=date],.qm-form input[type=time],.qm-form select{height:44px;font-size:14.5px}
.qm-step{height:44px;grid-template-columns:44px minmax(0,1fr) 44px}
.qm-form .qm-step input[type=number]{height:42px}
.qm-err{margin-top:3px;font-size:12px}
.qm-foot{margin-top:clamp(14px,1.5vw,18px);gap:8px}
.qm-foot .btn{min-height:48px}

/* no colour change on hover: the send button stays orange, the close button stays as it is */
.qm .qm-send,.qm .qm-send:hover,.qm .qm-send:focus{background:var(--orange);color:#fff}
.qm .qm-send i,.qm .qm-send:hover i{background:#fff;color:var(--orange);transform:none}
.qm-foot .btn,.qm-foot .btn:hover:not(:disabled){transform:none;box-shadow:0 12px 22px -14px rgba(255,110,66,.7);transition:none}
.qm-x,.qm-x:hover{background:#EEF2F4;color:#4E606B}
.qm-x:focus-visible{outline:2px solid var(--orange);outline-offset:2px;background:#EEF2F4;color:#4E606B}
.qm .qm-send:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.qm-done .btn,.qm-done .btn:hover{background:var(--navy);color:#fff}
.qm-done .btn:hover i{color:var(--navy);transform:none}

@media(max-width:860px){
  .qm-side{padding:18px 60px 16px 20px}
  .qm-title{margin-top:6px;font-size:20px}
  .qm-x,.qm-x:hover{background:rgba(10,38,52,.08);color:var(--navy)}
  .qm-main{padding:16px 20px max(20px,env(safe-area-inset-bottom))}
}
@media(max-height:600px) and (min-width:861px){ .qm-van{display:none} }

/* the popup vehicle: its own cut-out with no ground under it, and no added shadow */
.qm-van{filter:none}
/* a little tighter still, so the card fits a 650px-tall laptop window without scrolling */
@media(min-width:861px){ .qm-main{padding:clamp(18px,1.9vw,24px)} .qm-grid{gap:10px 16px} .qm-head{margin-bottom:12px;padding-bottom:10px} .qm-foot{margin-top:14px;gap:7px} .qm-note{font-size:12.5px} }

/* quote popup side panel (client, 2026-10-06): a fuller blue-grey tint, no star watermark, and the phone line
   pinned to the bottom with the vehicle centred in the space above it, so no empty band is left below */
.qm-side{background:radial-gradient(120% 62% at 0% 100%,rgba(255,110,66,.20),transparent 62%),linear-gradient(180deg,#E3EBF1,#D3E0E8)}
.qm-side::before{content:none}
.qm-points li{color:#2F424D}
.qm-van{flex:0 0 auto;height:clamp(84px,8vw,112px);max-height:none;margin:auto 0}
.qm-call{margin-top:0;border-top-color:rgba(10,38,52,.16)}
.qm-call span{color:#4E606B}
@media(max-height:600px) and (min-width:861px){ .qm-call{margin-top:auto} }
.qm .qm-van{height:auto;max-height:clamp(84px,8vw,112px)}

/* quote popup on small and scaled screens
   - phones: 16px field text, because iPhones zoom the page in when a field with smaller text is tapped
   - very narrow phones: one field per row, so a date never has to squeeze into half the width
   - short desktop windows (a laptop at 150 percent scaling is about 430px tall): the side panel keeps only
     its heading and the phone line, so nothing in it is cut off */
@media(max-width:860px){ .qm .qm-form input[type=text],.qm .qm-form input[type=tel],.qm .qm-form input[type=date],.qm .qm-form input[type=time],.qm .qm-form input[type=number],.qm .qm-form select{font-size:16px} }
@media(max-width:380px){ .qm .qm-grid{grid-template-columns:minmax(0,1fr)} }
@media(max-height:520px) and (min-width:861px){ .qm .qm-points,.qm .qm-van{display:none} .qm .qm-side{padding:20px 24px} .qm .qm-call{margin-top:auto} .qm .qm-title{font-size:21px} }

/* ---- footer credit: "Developed by Scale Delight" (include/footer.php) ----
   It sits in the bottom bar after the policy links, in the same size, bright enough to read, and the bar
   keeps clear of the floating WhatsApp and Call buttons on small screens so no line is hidden under them. */
html body .fbar .fcredit{color:rgba(255,255,255,.74);white-space:nowrap}
html body .fbar .fcredit a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;transition:color .2s ease}
html body .fbar .fcredit a:hover,html body .fbar .fcredit a:focus-visible{color:var(--orange)}
@media(max-width:900px){ html body .fbar{padding-right:76px} }

/* ---- phones: a specification table of four columns or fewer fits the screen ------------
   No sideways scroll and no pinned first column; a wider table (five columns or more) still scrolls. */
@media(max-width:760px){
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))){min-width:0;width:100%;table-layout:fixed}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tr > *{width:auto;min-width:0;overflow-wrap:anywhere}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) thead tr > :first-child{width:29%}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) thead tr > *{white-space:normal;padding:0 8px 12px 0;font-size:13.5px;line-height:1.3}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) thead th svg:not(.uv-plan){display:none}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody th,
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) .uv-tbl-corner{position:static;width:auto;min-width:0;box-shadow:none}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody th,
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody td{padding:12px 8px 12px 0;font-size:13px;line-height:1.4;white-space:normal;vertical-align:top}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody th{font-size:13px;font-weight:600}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody tr > :last-child{padding-right:0}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) .tb-k{gap:0}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody th svg:not(.uv-plan){display:none}
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) .tb-n{font-size:14px}
  html body .uv-tbl-wrap:not(:has(thead tr > :nth-child(5))){overflow-x:visible}
  html body .uv-tbl-hint:not(:has(+ .uv-tbl-wrap thead tr > :nth-child(5))){display:none}
}
/* the photo walk already names the photo beside its arrows, so the second list of names is not repeated */
@media(max-width:1100px){ html body .uv-walk .uv-wmap{display:none} }
/* phones: in the inclusions table each column stays one unbroken panel, and the group label keeps to its own cell */
@media(max-width:760px){
  html body .qc-t .qc-grp td{background:rgba(255,255,255,.045)}
  html body .qc-t .qc-grp th{white-space:normal;overflow:hidden;font-size:11px;letter-spacing:.1em;line-height:1.35;padding-right:8px}
  html body .qc-t .qc-grp th::before{margin-right:7px}
}
/* the row of other vehicles swipes sideways without showing a scrollbar */
html body .uv-line{scrollbar-width:none;-ms-overflow-style:none}
html body .uv-line::-webkit-scrollbar{display:none}

/* phones: the city routes table is a plain table that fits the screen: no sideways scroll, no pinned column.
   The distance bar needs width it does not have here, so the distance is shown as a figure. */
@media(max-width:760px){
  html body .t-hint:has(+ .ct-rt-wrap){display:none}
  html body .ct-rt-wrap{margin-right:0;overflow:visible}
  html body .ct-rt-t{width:100%;min-width:0;table-layout:fixed}
  html body .ct-rt-t .c-route{width:31%}
  html body .ct-rt-t .c-time{width:19%}
  html body .ct-rt-t .c-sug{width:21%}
  html body .ct-rt-t .c-go{width:38px}
  html body .ct-rt-t thead th,html body .ct-rt-t tbody th,html body .ct-rt-t tbody td{position:static;padding:13px 8px 13px 0;font-size:12.5px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;vertical-align:middle}
  html body .ct-rt-t thead th{padding-top:0;padding-bottom:10px;font-size:10.5px;letter-spacing:.08em}
  html body .ct-rt-t tr > :last-child{padding-right:0}
  html body .ct-rt-t .rt-axis,html body .ct-rt-t .rt-bar{display:none}
  html body .ct-rt-t thead th:nth-child(2)::after{content:"Km"}
  html body .ct-rt-t .rt-dist::before,html body .ct-rt-t .rt-dist::after{display:none}
  html body .ct-rt-t .rt-km{margin:0;padding:0;white-space:nowrap}
  html body .ct-rt-t .rt-from{font-size:11px}
  html body .ct-rt-t .rt-to{font-size:13.5px}
  html body .ct-rt-t .rt-time span{white-space:nowrap}
  html body .ct-rt-t .ct-rt-go{width:34px;height:34px}
}
/* phones: the quote popup is a centred card with a margin all round, not an edge-to-edge sheet */
@media(max-width:860px){
  html body .qm{align-items:center;padding:14px}
  html body .qm-panel{width:100%;max-width:520px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);border-radius:20px}
}
@media(max-width:760px){
  /* fitted tables: every label and figure wraps inside its own column */
  html body .uv-tbl:not(:has(thead tr > :nth-child(5))) tbody .tb-k{display:block;white-space:normal;font-size:13px;line-height:1.35}
  html body .ct-rt-t .rt-time span{display:inline;white-space:normal}
  html body .ct-rt-t .rt-time svg{display:none}
  html body .ct-rt-t .rt-km{white-space:normal;font-size:12.5px}
  html body .ct-rt-t .ct-rt-sug a,html body .ct-rt-t .ct-rt-sug .ct-sg{display:inline;font-size:12.5px}
}