/* Avante Travels - shared styles loaded after each page's own stylesheet:
   motion states, navigation, contact rail, quote form and review states. */
:root{
  --av-quick:.28s;
  --av-mid:.55s;
  --av-slow:.9s;
  --av-ease:cubic-bezier(.22,1,.36,1);
}

/* above-the-fold items stay hidden until GSAP poses them (class set inline, removed on boot) */
.gs-pre .hero h1,
.gs-pre .hero .sub,
.gs-pre .hero-cta,
.gs-pre .hero-meta,
.gs-pre .hero-vid{opacity:0}

/* SplitText line masks: a little headroom for descenders on tight line-heights */
.av-li-mask{padding-bottom:.05em;margin-bottom:-.05em}

header .wrap.nav{max-width:1460px}

.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding-left:20px;padding-right:20px}
.nav > .logo{justify-self:start;min-width:0}
.nav > .menu{justify-self:center}
.nav > .nav-r{justify-self:end;min-width:0}

.menu > li > a{white-space:nowrap;
  font-size:16px;font-weight:500;letter-spacing:-.005em;
  color:rgba(255,255,255,.80);
  padding:10px 4px;gap:6px;
  background:none;border-color:transparent;border-radius:0}
.menu > li > a:hover,
.menu > li > a:focus-visible,
.menu .has-menu:hover > a,
.menu .has-menu:focus-within > a{color:#fff;background:none;border-color:transparent}
.menu > li > a.on{color:#fff;background:none;border-color:transparent}

.menu > li > a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}

.menu{gap:clamp(10px,1.5vw,26px)}

@media(max-width:1400px){ .menu > li > a{font-size:15.5px} .menu{gap:clamp(9px,1.3vw,20px)} }
@media(max-width:1320px){ .menu > li > a{font-size:15px}   .menu{gap:clamp(8px,1.1vw,16px)} }
@media(max-width:1220px){ .menu > li > a{font-size:14.5px} .menu{gap:9px} }
@media(max-width:1120px){
  .menu{display:none}
  .burger{display:flex}
  .nav-r .tel{display:none}
}

.menu .chev{width:7px;height:7px;margin-left:2px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.55;
  transition:transform var(--av-quick) ease,opacity var(--av-quick) ease}
.menu .has-menu:hover > a .chev,
.menu .has-menu:focus-within > a .chev{opacity:1;transform:rotate(-135deg) translate(-2px,-2px)}

.menu{align-items:stretch}
.menu > li{position:relative;display:flex;align-items:center}
.drop{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  margin-top:6px;min-width:242px;padding:8px;
  background:#0A2634;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85),0 2px 8px -2px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--av-quick) ease,transform var(--av-quick) var(--av-ease),
             visibility 0s linear var(--av-quick)}

.menu .has-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.menu .has-menu:hover > .drop,
.menu .has-menu:focus-within > .drop{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);transition-delay:0s}

.drop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.drop a{display:block;padding:9px 14px;border-radius:9px;
  font-family:var(--body);font-size:13.5px;font-weight:300;line-height:1.35;
  color:rgba(255,255,255,.82);
  transition:background var(--av-quick) ease,color var(--av-quick) ease}
.drop a:hover,.drop a:focus-visible{background:rgba(255,255,255,.10);color:#fff}

.drop-wide{display:grid;grid-template-columns:repeat(2,minmax(190px,1fr));gap:4px 10px;min-width:430px}
.drop-head{display:block;padding:8px 14px 6px;
  font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange)}

header{z-index:60}

/* set by /assets/js/avante-site.js when a sticky column is taller than the window */
.sticky-off{position:relative !important;top:auto !important}

@media(prefers-reduced-motion:reduce){
  .drop{transition:none}
  .menu .chev{transition:none}
}

@media(max-width:900px){
  .drop,.menu .chev{display:none}
}

.vrail{position:fixed;right:20px;bottom:24px;
  z-index:58;display:flex;flex-direction:column;gap:10px;
  pointer-events:none}
.vrail-a{pointer-events:auto;margin-left:auto;
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border-radius:999px;color:#fff;text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(6,24,34,.55);
  transition:box-shadow var(--av-quick) ease,filter var(--av-quick) ease}
.vrail-a svg{width:21px;height:21px;flex:none}
/* the label stays for screen readers only; the button keeps its round shape on hover */
.vrail-a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vrail-a:hover,.vrail-a:focus-visible{box-shadow:0 14px 32px -10px rgba(6,24,34,.6);filter:brightness(1.05)}
.vrail-a:focus-visible{outline:2px solid #fff;outline-offset:2px}

.vrail-wa,.vrail-call{background:var(--wa)}

@media(max-width:900px){ .vrail{display:none} }

@media(max-height:560px){ .vrail{display:none} }

@media(prefers-reduced-motion:reduce){
  .vrail-a{transition:none}
}

.area-r{position:relative;min-height:340px}
.area-map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.9) contrast(1.02)}
.area-dir{position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--navy);border-radius:999px;
  padding:9px 16px;font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.03em;box-shadow:0 10px 26px -10px rgba(6,24,34,.5);
  transition:background var(--av-quick) ease,color var(--av-quick) ease}
.area-dir i{font-style:normal;font-size:11px}
.area-dir:hover{background:var(--navy);color:#fff}
.ai-link{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color var(--av-quick) ease}
.ai-link:hover{border-bottom-color:var(--orange)}

.av-js .post-ph{background-size:cover;background-position:center;background-color:var(--pale)}
.av-js .post-ph::before,.av-js .post-ph::after{content:none}

.av-js .gz-h2,
.av-js .fl-hl{font-weight:500}

.av-js .eyebrow,
.av-js .ruled span,
.av-js .gz-eyebrow,
.av-js .hw-pill,
.av-js .fq-pill,
.av-js .oc-chip,
.av-js .we-logolab,
.av-js .sub-h{font-size:16px;letter-spacing:.1em}

.av-js .ruled span i,
.av-js .gz-eyebrow i{margin-right:9px}

.av-js .hw-pill{padding:10px 22px}
.av-js .fq-pill{padding:10px 20px}
.av-js .oc-chip{padding:8px 16px 8px 8px}
.av-js .ruled span{padding:0 20px}

.vtrack{display:contents}

.av-js .vgrid{grid-auto-rows:1fr}
.av-js .vcell{display:grid;grid-template-areas:"stack";overflow:hidden}
.av-js .vface{position:relative;inset:auto;grid-area:stack;min-width:0}

.av-js .vface-dark{
  background:var(--navy);
  clip-path:none;
  opacity:0;
  transition:opacity .42s ease 0s;
  will-change:opacity}
.av-js .vcell:hover .vface-dark{transition-delay:.16s}

.av-js .vcell:hover .vface-dark,
.av-js .vcell:has(.vcell-link:focus-visible) .vface-dark{opacity:1}

.av-js .vcell{position:relative}
.av-js .vcell-link{grid-area:stack;z-index:2;align-self:stretch;justify-self:stretch;
  border-radius:inherit;font-size:0}
.av-js .vcell-link:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}

.av-js .vstage{flex:0 0 auto}

.av-js .vmore{height:var(--av-more);gap:7px;flex:0 0 auto;min-height:0;overflow:hidden}

.av-js .vimg{transition:none;transform:none}

.av-js .oc-cap{display:none}

.av-js .logos{background:#fff}
.av-js .logos::before{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.av-js .logos::after{background:linear-gradient(to left,#fff,rgba(255,255,255,0))}
.av-js .logo-ph{background:#fff}

@media (hover:hover) and (pointer:fine){
  .av-js .fq-item:hover .fq-a,
  .av-js .fq-item:focus-within .fq-a{grid-template-rows:0fr}
  .av-js .fq-item.is-open .fq-a{grid-template-rows:1fr}
  .av-js .fq-list:hover .fq-item:not(:hover) .fq-a{grid-template-rows:0fr}
  .av-js .fq-list:hover .fq-item.is-open .fq-a{grid-template-rows:1fr}

  .av-js .fq-item:hover .fq-q svg,
  .av-js .fq-item:focus-within .fq-q svg,
  .av-js .fq-list:hover .fq-item:not(:hover) .fq-q svg{transform:none;color:var(--grey)}
  .av-js .fq-item.is-open .fq-q svg,
  .av-js .fq-list:hover .fq-item.is-open .fq-q svg{transform:rotate(180deg);color:var(--orange)}

  .av-js .fq-q{cursor:pointer}

  .av-js .fq-item:hover,
  .av-js .fq-list:hover .fq-item:not(:hover){box-shadow:none}
  .av-js .fq-item:hover{border-color:var(--dim)}
  .av-js .fq-item.is-open,
  .av-js .fq-list:hover .fq-item.is-open{border-color:var(--dim);
    box-shadow:0 8px 24px -14px rgba(10,38,52,.24)}
}

.hero-trust{display:inline-flex;align-items:center;gap:10px;color:inherit;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;
  transition:border-color var(--av-quick) ease}
.hero-trust:hover{border-bottom-color:rgba(255,255,255,.7)}
.hero-trust[hidden]{display:none}

.av-js .fq-h2 em{color:inherit}

@media(min-width:901px){
  .av-js .hw{grid-template-columns:1fr 1fr;align-items:stretch}
  .av-js .hw > div:first-child{display:flex;flex-direction:column}

  .av-js .hw-shot{flex:1 1 0;aspect-ratio:auto;min-height:190px}
}
.av-js .hw-h2{font-size:clamp(26px,2.8vw,36px)}
.av-js .hw-title{font-size:clamp(15px,1.15vw,16.5px)}
.av-js .hw-sub{font-size:14.5px;max-width:42ch}
.av-js .hw-desc{font-size:14px;max-width:46ch}

.av-js .fl-step{transition:none}
.av-js .fl-step span,
.av-js .fl-step b{transition:color var(--av-quick) ease}
.av-js .chip{transition:background var(--av-quick) ease,
                        color var(--av-quick) ease,
                        box-shadow var(--av-quick) ease}

.av-js .oc-tile{transition:transform var(--av-mid) var(--av-ease),
                           box-shadow var(--av-mid) var(--av-ease)}
.av-js .oc-tile .oc-ph{transition:transform var(--av-slow) var(--av-ease)}

.av-js .post{transition:border-color var(--av-quick) ease}
.av-js .post:hover{transform:none;box-shadow:none;border-color:var(--dim)}

.av-js .oc-tile .oc-ph,
.av-js .oc-port .oc-ph{transform-origin:center}

.av-js .sy-shot{background-size:cover;background-position:center}
.av-js .hw-shot{margin-top:clamp(26px,3.2vw,44px);background-size:cover;background-position:center}


@media(prefers-reduced-motion:reduce){
  .gs-pre .hero h1,.gs-pre .hero .sub,.gs-pre .hero-cta,.gs-pre .hero-meta,
  .gs-pre .hero-vid{opacity:1}
}

header .logo{display:flex;align-items:center;gap:clamp(8px,.8vw,12px)}

header .logo img.logo-mark{width:auto;flex:none;
  mix-blend-mode:screen;
  transition:height .35s cubic-bezier(.22,1,.36,1)}

.av-js .vprice{font-size:19px;font-weight:500;color:var(--navy)}
.av-js .vprice i{font-style:normal;font-size:14px;font-weight:400;
  color:var(--grey);letter-spacing:.01em;margin-right:2px}
.av-js .vface-dark .vprice{color:#fff;font-weight:500}
.av-js .vface-dark .vprice i{color:rgba(255,255,255,.58)}

header .wrap.nav{height:74px}
header.stuck .wrap.nav{height:66px;transition:height .35s cubic-bezier(.22,1,.36,1)}
header .wrap.nav{transition:background .35s ease, box-shadow .35s ease,
  height .35s cubic-bezier(.22,1,.36,1)}

header .logo img.logo-mark{height:clamp(44px,4.6vw,58px)}
header.stuck .logo img.logo-mark{height:clamp(38px,4vw,50px)}

@media(max-width:520px){
  header .wrap.nav{height:66px}
  header.stuck .wrap.nav{height:60px}
  header .logo img.logo-mark{height:42px}
  header.stuck .logo img.logo-mark{height:38px}
}

.av-js .fq-status{min-height:0}

@media(max-width:520px){

  .av-js .fq-card{padding:20px 17px;}
}

.av-js .vcell{--av-more:104px;--av-strip:48px}
@media(max-width:1040px){ .av-js .vcell{--av-more:112px} }
@media(max-width:640px){  .av-js .vcell{--av-more:118px} }

.av-js .vface{padding-bottom:calc(var(--av-strip) + clamp(13px,1.3vw,19px))}

.av-js .vface-dark .vmore{
  position:static;left:auto;right:auto;bottom:auto;
  height:auto;min-height:var(--av-more);overflow:visible;
  display:flex;flex-direction:column;gap:8px;
  margin-top:12px;padding:0;background:none;
  opacity:0;transform:none;
  transition:opacity .26s ease}
.av-js .vcell:hover .vface-dark .vmore,
.av-js .vcell:has(.vcell-link:focus-visible) .vface-dark .vmore{opacity:1;transform:none;transition-delay:.22s}

/* the hover layer shows models, features and the button, so its photograph is a little shorter (contained, never cropped)
   and the card keeps the height of its resting face */
.av-js .vface-dark .vstage{aspect-ratio:760 / 320}
.av-js .vface-dark .vstage .vimg{object-fit:contain}

.av-js .vface:not(.vface-dark)::after{
  content:"";display:block;flex:0 0 auto;
  height:var(--av-more);margin-top:12px}

@media(max-width:420px){
  .av-js .vcell{--av-strip:52px}

}

.av-js .final{
  padding-left:32px;padding-right:32px;
  padding-top:clamp(40px,4.4vw,60px);padding-bottom:clamp(40px,4.4vw,60px);
  text-align:left}

.av-js .final > .fq-card{max-width:none;margin-left:0;margin-right:0;width:auto}

.av-js .fq-wa{flex:none;margin:0}

.av-js .fq-line + .fq-line{margin-top:clamp(10px,1vw,14px)}

.av-js .fq-line-2{grid-template-columns:1fr minmax(170px,.34fr)}

.av-js .fq-submit{margin:0;}

@media(max-width:1040px){

  .av-js .fq-line-2{grid-template-columns:1fr}
  .av-js .fq-submit{min-width:200px}
}

.av-js .we-empty{display:none}
.av-js .we.is-empty .we-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(16px,1.8vw,22px);
  padding:clamp(22px,2.6vw,34px) 0 0;
  max-width:56ch;margin:0 auto}
.av-js .we-empty-lead{margin:0;font-size:15.5px;line-height:1.6;color:var(--grey)}
.av-js .we-empty-cta{flex:none}

.av-js .hero-trust .gt-fallback{display:inline-flex;align-items:center;gap:6px}
.av-js .hero-trust.is-live .gt-fallback{display:none}
.av-js .hero-trust .gt-fallback i{font-style:normal;font-size:.9em}

.av-js .fq-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,72px);align-items:center}

.av-js .fq-lead{min-width:0}
.av-js .fq-lead h2{margin:0;max-width:19ch;font-size:clamp(26px,3.1vw,40px)}
.av-js .fq-lead p{margin:14px 0 0;max-width:40ch;font-size:15px;line-height:1.6}

.av-js .fq-assure{list-style:none;margin:clamp(20px,2.2vw,28px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;max-width:44ch}
.av-js .fq-assure li{position:relative;padding-left:24px;
  font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.94)}
.av-js .fq-assure li::before{content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.av-js .fq-wa{margin-top:clamp(22px,2.4vw,30px)}

.av-js .fq-card{
  background:#fff;border-radius:16px;
  padding:clamp(20px,2vw,30px);
  box-shadow:0 30px 70px -34px rgba(6,24,34,.55)}
.av-js .fq-title{font-family:var(--disp);font-size:clamp(18px,1.8vw,22px);
  font-weight:500;letter-spacing:-.02em;color:var(--navy);margin:0 0 16px}

.av-js .fq-line{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(11px,1.1vw,15px);align-items:start}
.av-js .fq-line + .fq-line,
.av-js .fq-line + .fq-field,
.av-js .fq-field + .fq-field{margin-top:clamp(11px,1.1vw,15px)}

.av-js .fq-field{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.av-js .fq-field label{
  display:flex;align-items:baseline;gap:7px;
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.av-js .fq-field label span{color:var(--orange)}

.av-js .fq-field label em{font-style:normal;font-size:10.5px;font-weight:400;
  letter-spacing:.02em;text-transform:none;color:#A9B7BF}

.av-js .fq-field input{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:9px;
  height:46px;padding:0 13px;
  transition:border-color .2s ease, box-shadow .2s ease}
.av-js .fq-field input::placeholder{color:#A9B7BF}
.av-js .fq-field input:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,38,52,.12)}
.av-js .fq-field.is-bad input{border-color:#C8422B;box-shadow:0 0 0 3px rgba(200,66,43,.12)}
.av-js .fq-err{font-size:12.5px;color:#C8422B;line-height:1.35}

.av-js .fq-submit{
  width:100%;height:50px;margin-top:clamp(16px,1.7vw,22px);
  justify-content:center}

.av-js .fq-status{margin:12px 0 0;font-size:13.5px;line-height:1.5}
.av-js .fq-status:empty{display:none}
.av-js .fq-status.is-ok{color:#1B7F4B}
.av-js .fq-status.is-bad{color:#C8422B}
.av-js .fq-note{margin:clamp(20px,2.2vw,32px) 0 0;font-size:17px;color:var(--grey);line-height:1.55}
.av-js .fq-form.is-sending .fq-submit{opacity:.6;pointer-events:none}
.av-js .fq-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:960px){
  .av-js .fq-split{grid-template-columns:1fr;gap:28px}
  .av-js .fq-lead h2{max-width:24ch}
}
@media(max-width:560px){
  .av-js .final{padding-left:20px;padding-right:20px}
  .av-js .fq-line{grid-template-columns:1fr}
  .av-js .fq-line .fq-field + .fq-field{margin-top:clamp(11px,1.1vw,15px)}
  .av-js .fq-wa{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .av-js .fq-field input{transition:none}
}

/* == SHARED HEADER ==
   One header for every page: the floating navy pill with the logo, the menu and Get Quote.
   Pages keep their own base header rules; these win because this file loads after them. */
header .nav,header.stuck .nav{background:rgba(10,38,52,.9)}
html body header,html body header.stuck{padding-top:clamp(10px,1vw,16px);padding-bottom:clamp(10px,1vw,16px)}
html body header .wrap.nav{display:flex;justify-content:space-between;max-width:1240px;height:64px;padding:0 10px 0 16px;gap:24px}
html body header.stuck .wrap.nav{height:60px}
html body header .logo img.logo-mark{height:48px}
html body header.stuck .logo img.logo-mark{height:44px}
html body header .menu{gap:clamp(18px,2.1vw,40px)}
html body header .menu > li > a{font-size:15.5px;padding:8px 2px}
html body header .nav-r .btn-sm{padding:5px 5px 5px 18px;font-size:13px}
@media(min-width:1121px){
  html body header .wrap.nav{width:fit-content;max-width:calc(100% - 24px);justify-content:flex-start;gap:clamp(36px,3.6vw,68px);
    padding-left:clamp(16px,1.4vw,26px);padding-right:clamp(12px,1vw,18px)}
}
@media(max-width:1400px){ html body header .menu > li > a{font-size:15px} html body header .menu{gap:clamp(14px,1.6vw,24px)} }
@media(max-width:1220px){ html body header .menu > li > a{font-size:14.5px} html body header .menu{gap:12px} html body header .wrap.nav{gap:24px} }
@media(max-width:520px){ html body header .wrap.nav{height:56px} html body header .logo img.logo-mark{height:34px} }

/* the mobile menu, identical to the rules the inner pages carry inline, for pages that do not */
.mdraw{position:fixed;inset:0;z-index:59;background:rgba(6,24,34,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mdraw.open{opacity:1;visibility:visible;transition-delay:0s}
.mdraw-in{position:absolute;top:84px;left:12px;right:12px;max-height:calc(100vh - 156px);max-height:calc(100dvh - 156px);overflow-y:auto;
  background:var(--navy);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:10px;
  transform:translateY(-10px);transition:transform .34s cubic-bezier(.22,1,.36,1);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9)}
.mdraw.open .mdraw-in{transform:none}
.mdraw .md-h{font-family:var(--disp);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);padding:14px 14px 6px}
.mdraw a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;font-weight:300;
  color:rgba(255,255,255,.84);transition:background .2s ease,color .2s ease}
.mdraw a:hover{background:rgba(255,255,255,.10);color:#fff}
.mdraw a[aria-current="page"]{color:var(--orange);background:rgba(255,110,66,.10)}
.mdraw-foot{display:flex;gap:9px;padding:16px 8px 6px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.10);margin-top:10px}
@media(min-width:1121px){ .mdraw{display:none} }

/* ===== drive band, compact: the vehicle drives along the top edge of the closing section. When the band
   comes into view it glides in from the far right of the screen to the left end; it parks again when the
   band leaves the screen, so it drives in every time the section is visited.
   Overrides the inline band styles on each page. Nothing is pinned or tied to scrolling. */
html body .dr-hold{height:auto;padding:clamp(24px,3.5vw,48px) 0 0;position:relative;z-index:2;overflow-x:clip}
/* the section above gives up most of its bottom padding so the vehicle sits close under it; the band
   takes that section's background (avante-motion.js) so no strip of a different colour shows */
html body .dr-hold{--dr-gap:clamp(36px,4.5vw,64px)}
html body .dr{position:relative;top:0;height:clamp(130px,14vw,190px);
  width:calc(100% - 48px);margin:0 auto;overflow:visible}
html body .dr-streak{display:none}
/* its wheels rest on the orange section's edge; --from (set by avante-motion.js) parks it off screen right */
html body .dr-veh{bottom:-4px;height:100%;left:0;right:auto;background-position:0 100%;will-change:transform;
  transform:translate3d(var(--from,0px),0,0)}
html body .dr.is-in .dr-veh{transform:translate3d(0,0,0);transition:transform 3.8s cubic-bezier(.3,.6,.3,1)}
html body .dr-veh::before{bottom:2px;height:10px}
@media(max-width:700px){
  html body .dr{width:calc(100% - 32px);height:clamp(100px,28vw,140px)}
  html body .dr.is-in .dr-veh{transition-duration:3s}
}
@media(prefers-reduced-motion:reduce){
  html body .dr-veh,html body .dr.is-in .dr-veh{transform:none;transition:none}
}

/* ===== homepage statement: the words rise into place in reading order, once (avante-motion.js) ===== */
html body .stmt.is-reveal .w{opacity:0;transform:translateY(.45em);filter:blur(6px)}
html body .stmt.is-in .w{opacity:1;transform:none;filter:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .55s ease}

/* ===== route pages: the service line under the destination in the H1 ===== */
html body .dp-claim h1 .dp-rent{display:block;margin-top:.75em;font-family:var(--disp);font-size:clamp(17px,1.5vw,24px);
  font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--orange)}

/* ===== vehicle cards: price line, "From ₹17 /km": a quiet lead-in, the figure a step up in size and weight, a quiet unit ===== */
html body.av-js .vprice{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
html body.av-js .vprice i{font-style:normal;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey);margin:0}
html body.av-js .vprice b{font-family:var(--disp);font-size:clamp(18px,1.4vw,21px);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:#1F4254}
html body.av-js .vprice small{margin-left:-2px;font-size:14px;font-weight:400;color:var(--grey)}
html body.av-js .vface-dark .vprice b{color:#fff}
html body.av-js .vface-dark .vprice i,html body.av-js .vface-dark .vprice small{color:rgba(255,255,255,.62)}

/* ===== vehicle cards: trimmed cut-outs are fitted whole on the dark (hover) face as well,
   so the nose and tail are never cropped ===== */
html body.av-js .vcell .vface-dark .vstage .vimg[src*="-cut.webp"]{object-fit:contain;object-position:50% 100%}


/* ===== client logo strip: "Companies, PSUs and institutions that travel with us" (homepage, About, service pages) =====
   Thirteen logos in full colour, in equal white tiles. With scripting and motion allowed the row is an endless
   carousel (avante-motion.js repeats the set and slides it by exactly one set's width, so the loop has no seam);
   it pauses under the pointer and while off screen. Without scripting, or under reduced motion, the same tiles
   sit in a centred, wrapped grid. Each logo is capped by height (--mh) as well as by the tile's width, so tall
   emblems and wide wordmarks carry about the same visual weight. */
.cl-sec{background:#fff;padding:clamp(6px,1vw,16px) 32px clamp(64px,7.4vw,120px)}
.cl-full{padding:0 32px}
.cl-wrap{margin-top:clamp(40px,4.6vw,72px)}
.cl-lab{margin:0 0 clamp(20px,2.4vw,30px);text-align:center;font-family:var(--disp);font-size:clamp(12px,1.05vw,13.5px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6B7B85}
.cl-row{--n:7;--g:clamp(8px,1vw,14px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.cl-row li{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));min-width:0;display:grid;place-items:center;
  height:clamp(84px,7.2vw,112px);padding:14px clamp(12px,1.4vw,22px);background:#fff;border:1px solid rgba(10,38,52,.10);border-radius:14px;
  transition:border-color .3s ease}
.cl-row img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--mh,44px);object-fit:contain}
.cl-row li[data-k="indianoil"],.cl-row li[data-k="hpcl"]{--mh:62px}
.cl-row li[data-k="reliance"]{--mh:60px}
.cl-row li[data-k="honda"]{--mh:56px}
.cl-row li[data-k="tata-power"],.cl-row li[data-k="ey"]{--mh:54px}
.cl-row li[data-k="pwc"]{--mh:46px}
.cl-row li[data-k="cipla-health"]{--mh:40px}
.cl-row li[data-k="raymond"]{--mh:38px}
.cl-row li[data-k="aiesec"]{--mh:34px}
@media(hover:hover){ .cl-row li:hover{border-color:rgba(10,38,52,.24)} }

/* the endless carousel */
.cl-view.is-marquee{overflow:hidden;padding:2px 0}
.cl-view.is-marquee .cl-row{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;
  animation:clSlide var(--dur,48s) linear infinite;animation-play-state:paused;will-change:transform}
.cl-view.is-marquee.is-run .cl-row{animation-play-state:running}
.cl-view.is-marquee .cl-row li{flex:0 0 clamp(150px,13.2vw,214px);margin-right:var(--g)}
@media(hover:hover){ .cl-view.is-marquee:hover .cl-row{animation-play-state:paused} }
@keyframes clSlide{ from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-1 * var(--shift,50%)),0,0)} }

@media(max-width:1100px){ .cl-row{--n:5} .cl-sec{padding-left:24px;padding-right:24px} .cl-full{padding:0 24px} }
@media(max-width:700px){ .cl-row{--n:3} .cl-row li{height:76px;padding:10px} .cl-sec{padding-left:16px;padding-right:16px} .cl-full{padding:0 16px}
  .cl-view.is-marquee .cl-row li{flex-basis:132px;padding:10px 14px} }
@media(prefers-reduced-motion:reduce){ .cl-row li{transition:none} }
/* on phones the site gives every section 56px above and below; the logo strip follows the reviews directly,
   so it keeps a small gap above and a comfortable one below */
@media(max-width:760px){ html body section.cl-sec.sec:not(.hero):not(.final){padding-top:8px;padding-bottom:56px} }