/* ==========================================================================
   EGL ExpatAuto Connect — stylesheet
   Nairobi, Kenya

   HOW TO EDIT COLOURS
   Everything on the site is built from the variables in the :root block
   directly below. Change a hex value there and it updates the whole site.
   You do not need to touch anything else.
   ========================================================================== */

:root{
  /* ---- brand colours (change these) ---- */
  --navy-deep : #061426;   /* darkest — footer, mission panel          */
  --navy      : #0B2545;   /* main dark blue — dark sections           */
  --navy-soft : #14385F;   /* lighter navy — cards on dark             */
  --blue      : #1C6DD0;   /* primary blue — buttons, links            */
  --blue-bright:#3E9BFF;   /* bright blue — numbers, highlights        */
  --red       : #D81E2C;   /* brand red — nav links, headings accent   */
  --red-dark  : #A8151F;   /* red hover                                */
  --teal      : #14A5A0;   /* secondary accent                         */
  --amber     : #F2A93B;   /* third accent — badges                    */

  /* ---- neutrals ---- */
  --ice       : #F3F7FC;   /* page background                          */
  --ice-2     : #E6EEF8;   /* alternate band background                */
  --ice-3     : #CFDDEE;   /* borders                                  */
  --white     : #FFFFFF;
  --ink       : #0D2137;   /* body text on light                       */
  --ink-soft  : #4B6280;   /* muted text on light                      */
  --on-dark   : #E8F1FB;   /* text on dark                             */
  --on-dark-soft:#A8C2DE;  /* muted text on dark                       */

  /* ---- type ---- */
  --sans : 'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif: 'Newsreader',Georgia,'Times New Roman',serif;

  /* ---- layout ---- */
  --pad : clamp(20px,5vw,64px);
  --max : 1180px;
  --r   : 8px;              /* standard corner radius                  */
  --shadow: 0 10px 30px rgba(6,20,38,.10);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ice);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3,h4,.sans{font-family:var(--sans);font-weight:600;letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(28px,4vw,44px);margin:0 0 .5em}
h3{font-size:clamp(19px,2vw,22px);letter-spacing:-.01em;margin:0 0 .35em}
p{margin:0 0 1em;max-width:68ch}

.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--ink-soft)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  display:inline-block;
  padding:13px 28px;
  border-radius:var(--r);
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.btn-solid{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-solid:hover{background:#1558AC;border-color:#1558AC}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
/* TEAL BUTTON — third path in the hero. Ink is navy-deep, not white, because
   white on teal does not carry enough contrast to stay readable. */
.btn-teal{background:var(--teal);color:var(--navy-deep);border-color:var(--teal)}
.btn-teal:hover{background:#0F8781;border-color:#0F8781;color:#fff}
.on-dark .btn-teal{color:var(--navy-deep)}
.on-dark .btn-teal:hover{color:#fff}
.btn-line{border-color:var(--ice-3);color:var(--navy);background:transparent}
.btn-line:hover{border-color:var(--blue);background:rgba(28,109,208,.06)}
.on-dark .btn-line{border-color:rgba(232,241,251,.4);color:var(--on-dark)}
.on-dark .btn-line:hover{border-color:#fff;background:rgba(232,241,251,.1)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;
}

/* ---------- header / nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ice-3);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:96px}
.mark{font-family:var(--sans);font-weight:700;font-size:19px;letter-spacing:-.02em;
      text-decoration:none;display:flex;align-items:baseline;gap:6px;color:var(--navy)}
.mark .m2{font-weight:400;color:var(--red)}
.header-brand{display:flex;align-items:center;flex:0 0 auto}
/* LOGO SIZE: the height below is the only number to change.
   Sizing by height (not width) keeps the artwork at one clean scale instead of
   being squeezed by a width and then clipped again by a max-height. */
.header-brand img{
  display:block;
  height:clamp(58px,7vw,82px);
  width:auto;
  max-width:min(72vw,380px);
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}
@media(max-width:520px){.header-brand img{height:56px}}

.nav-links{display:flex;gap:24px;align-items:center;font-family:var(--sans);font-size:14.5px;font-weight:600}
/* NAV LINKS ARE RED — change var(--red) above to restyle them */
.nav-links a{
  text-decoration:none;color:var(--red);padding:6px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--red-dark);border-bottom-color:var(--red)}

.nav-cta{display:inline-block}
/* the CTA inside the menu is only for the mobile layout */
.nav-links .btn{display:none}

/* mobile menu button */
.nav-toggle{
  display:none;background:none;border:1px solid var(--ice-3);border-radius:var(--r);
  padding:9px 11px;cursor:pointer;line-height:0;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}

@media(max-width:960px){
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .nav-links{
    position:absolute;top:96px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--ice-3);
    padding:8px var(--pad) 18px;box-shadow:var(--shadow);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--ice-2)}
  .nav-links .btn{display:block;margin-top:12px;text-align:center;color:#fff;border-bottom:0}
}

/* ---------- hero ---------- */
/* BACKGROUND PHOTO:
   Save a wide photo of a Mercedes-Benz and a V8 Prado as
   images/hero-cars.jpg  — it drops straight in behind the blue wash.
   Until that file exists the blue gradient below shows on its own. */
.hero{
  position:relative;
  color:var(--on-dark);
  background:
    linear-gradient(105deg, rgba(6,20,38,.94) 0%, rgba(11,37,69,.86) 45%, rgba(20,56,95,.62) 100%),
    url('../images/hero-cars.jpg') center right / cover no-repeat,
    linear-gradient(135deg,#0B2545 0%,#14385F 60%,#1C6DD0 130%);
  padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px);
  overflow:hidden;
}
.hero::after{ /* thin red rule along the bottom edge */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 32%,var(--blue) 32%,var(--blue) 66%,var(--teal) 66%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative;z-index:2}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:700;margin:0 0 20px;max-width:17ch;color:#fff}
.hero p{font-size:clamp(17px,1.9vw,20px);color:var(--on-dark-soft);max-width:48ch}
.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top:26px;
}
.hero-note{font-family:var(--sans);font-size:13.5px;color:var(--on-dark-soft);margin-top:20px}
.hero-badge{
  display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:#fff;background:var(--red);
  padding:6px 12px;border-radius:100px;margin-bottom:18px;
}

/* hero illustration */
.plot{width:100%;height:auto;display:block}
/* HERO PHOTO STRIP
   The strip scrolls sideways: drag with a mouse, swipe on a phone, or press
   NEXT. It also advances on its own every 5 seconds until you touch it.
   To add a photo, copy one <img class="hero-slide"> line in index.html. */
.hero-carousel-frame{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  border-radius:18px;background:#081c33;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 55px rgba(0,0,0,.3);isolation:isolate;
}
.hero-carousel-frame::after{ /* dark wash along the bottom edge */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,20,38,.04) 45%,rgba(6,20,38,.5) 100%);
}
.hero-carousel{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  cursor:grab;scrollbar-width:none;
}
.hero-carousel::-webkit-scrollbar{display:none}
.hero-carousel.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.hero-carousel:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.hero-slide{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;
  scroll-snap-align:center;scroll-snap-stop:always;
  user-select:none;-webkit-user-drag:none;
}
.hero-carousel-dots{
  position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(6,20,38,.45);
  backdrop-filter:blur(6px);
}
.hero-carousel-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.45);cursor:pointer;
  transition:width .25s ease,background .25s ease;
}
.hero-carousel-dot.is-active{width:22px;border-radius:999px;background:#fff}
.hero-carousel-next{
  position:absolute;z-index:4;right:0;top:50%;transform:translateY(-50%);
  min-width:88px;height:48px;padding:0 13px;border:1px solid rgba(255,255,255,.72);
  border-right:0;border-radius:12px 0 0 12px;
  display:grid;place-items:center;background:var(--red);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.24);backdrop-filter:blur(7px);
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.hero-carousel-next:hover,.hero-carousel-next:focus-visible{
  background:#f02a38;border-color:#fff;transform:translateY(-50%) translateX(-4px);outline:none;
}
.hero-carousel-next:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 8px 24px rgba(0,0,0,.24)}
.hero-swipe-note{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;
  color:var(--on-dark-soft);text-align:center;margin:12px 0 0;
}
@media(max-width:900px){.hero-carousel-frame{max-width:720px;margin:10px auto 0}}
@media(max-width:520px){.hero-carousel-next{min-width:76px;height:44px;padding:0 10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){
  .hero-carousel{scroll-behavior:auto}
}
}
.car-body{fill:var(--carA,#2E4A6E)}
.car-shade{fill:rgba(0,0,0,.28)}
.car-glass{fill:#BBD3EA}
.car-glass-2{fill:#A6C3DE}
.tyre{fill:#10161C}
.rim{fill:#DCE6F2}
.hub{fill:#8FA3B8}
.grnd{stroke:rgba(168,194,222,.45);stroke-width:1.5}
.anno-line{stroke:var(--amber);stroke-width:1.6;fill:none}
.anno-dot{fill:var(--amber)}
.anno-t{font-family:var(--sans);font-size:20px;font-weight:700;fill:#fff}
.anno-s{font-family:var(--sans);font-size:16px;font-weight:400;fill:var(--on-dark-soft)}

@media(prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:240;stroke-dashoffset:240;animation:draw .7s ease forwards}
  .fadein{opacity:0;animation:fade .5s ease forwards}
  .d1{animation-delay:.25s}.d2{animation-delay:.45s}.d3{animation-delay:.65s}.d4{animation-delay:.85s}
  .d1f{animation-delay:.75s}.d2f{animation-delay:.95s}.d3f{animation-delay:1.15s}.d4f{animation-delay:1.35s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- stats strip ---------- */
.stats{background:var(--navy-soft);color:#fff}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.stat{background:var(--navy-soft);padding:30px clamp(14px,2vw,26px);text-align:center}
.stat b{display:block;font-family:var(--sans);font-size:clamp(30px,4.2vw,46px);font-weight:700;
        color:var(--blue-bright);line-height:1;margin-bottom:8px}
.stat span{font-family:var(--sans);font-size:14.5px;color:var(--on-dark);display:block}
@media(max-width:760px){.stats-in{grid-template-columns:repeat(2,1fr)}}
.stats-note{background:var(--navy-soft);padding:0 0 30px}
.stats-note p{margin:0 auto;text-align:center;font-style:italic;color:var(--on-dark-soft);font-size:15.5px;max-width:80ch}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,96px) 0}
/* the header is sticky, so anchored links need clearance or the heading
   they jump to lands underneath it */
section[id],.paper-item[id]{scroll-margin-top:clamp(104px,13vw,120px)}
/* a block arrived at from another page announces itself briefly */
.paper-item:target{border-top-color:var(--teal)}
.paper-item:target h3{color:var(--teal)}
.sec-head{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.sec-head p{color:var(--ink-soft);font-size:18px;margin-bottom:0}
.sec-head.center{margin-left:auto;margin-right:auto}

.band-alt{background:var(--ice-2);border-top:1px solid var(--ice-3);border-bottom:1px solid var(--ice-3)}

.dark{background:var(--navy);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.dark p{color:var(--on-dark-soft)}
.dark .sec-head p{color:var(--on-dark-soft)}

/* red section heading treatment used on About + Mission */
.h-red{color:var(--red)}
.dark .h-red{color:#FF6B73}

/* ---------- two paths ---------- */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
@media(max-width:820px){.paths{grid-template-columns:1fr}}
.path{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(26px,3.2vw,38px);
      display:flex;flex-direction:column;box-shadow:var(--shadow)}
.path h3{font-size:clamp(22px,2.6vw,27px);margin-bottom:10px;color:var(--navy)}
.path .who{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--red);margin-bottom:14px}
.path p{color:var(--ink-soft)}
.path ul{list-style:none;margin:6px 0 26px;padding:0}
.path li{padding:11px 0 11px 26px;border-top:1px solid var(--ice-2);position:relative;font-size:16.5px;line-height:1.5}
.path li:first-child{border-top:0}
.path li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:2px;background:var(--blue);border-radius:2px}
.path .btn{align-self:flex-start;margin-top:auto}
/* the cards sit on a dark section but are white, so keep light-card buttons */
.on-dark .path .btn-line{border-color:var(--ice-3);color:var(--navy);background:transparent}
.on-dark .path .btn-line:hover{border-color:var(--blue);background:rgba(28,109,208,.06)}

/* ---------- guarantee cards ---------- */
.guarantee{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:900px){.guarantee{grid-template-columns:1fr}}
.gcard{background:var(--navy-soft);border-radius:var(--r);padding:clamp(24px,3vw,34px);border:1px solid rgba(255,255,255,.09)}
.gcard svg{width:100%;max-width:230px;height:auto;margin-bottom:20px}
.gcard h3{font-size:clamp(20px,2.3vw,25px);margin-bottom:12px}
.gcard:nth-child(1) h3{color:var(--blue-bright)}
.gcard:nth-child(2) h3{color:#FF6B73}
.gcard:nth-child(3) h3{color:#4FD6C6}
.gcard p{font-size:16px;margin:0}

/* ---------- listings ---------- */
.vehicle-feature{
  border:1px solid var(--ice-3);border-radius:var(--r);background:#fff;
  overflow:hidden;box-shadow:var(--shadow);max-width:560px;margin:0 auto
}
.vehicle-feature-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:clamp(20px,3vw,30px);border-bottom:1px solid var(--ice-3)
}
.vehicle-feature-head h3{font-size:clamp(24px,3vw,34px);color:var(--navy);margin:8px 0 6px}
.vehicle-feature-head p{margin:0;color:var(--ink-soft);font-size:15px;max-width:68ch}
.vehicle-feature-head .stamp{position:static;transform:rotate(-4deg);flex:0 0 auto}
.vehicle-status{
  display:inline-block;padding:5px 9px;border-radius:4px;background:var(--teal);
  color:var(--navy-deep);font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.08em
}
.vehicle-gallery{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;cursor:grab;user-select:none;touch-action:pan-y;
  background:var(--ice-2);scrollbar-color:var(--red) var(--ice-2);
  scrollbar-width:thin
}
.vehicle-gallery.is-dragging{cursor:grabbing;scroll-snap-type:none}
.vehicle-gallery::-webkit-scrollbar{height:9px}
.vehicle-gallery::-webkit-scrollbar-track{background:var(--ice-2)}
.vehicle-gallery::-webkit-scrollbar-thumb{background:var(--red);border-radius:999px}
.vehicle-slide{
  /* PHOTO SHAPE: 3/2 matches a normal phone photo, so nothing is letterboxed.
     Overall photo size is set by max-width on .vehicle-feature above. */
  position:relative;flex:0 0 100%;aspect-ratio:3/2;
  margin:0;scroll-snap-align:start;scroll-snap-stop:always;background:var(--ice-2)
}
.vehicle-slide img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vehicle-slide figcaption{
  position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:3px;
  background:rgba(6,20,38,.78);color:#fff;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.01em
}
.vehicle-gallery-controls{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 12px;border-top:1px solid var(--ice-3);border-bottom:1px solid var(--ice-3);
  background:var(--ice)
}
.vehicle-gallery-controls span{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft)}
.vehicle-next{padding:7px 12px;font-size:12px;white-space:nowrap}
.vehicle-details{padding:clamp(14px,2vw,20px)}
.vehicle-details h3{font-size:16px;color:var(--navy);margin-bottom:10px}
/* one detail per row: label on the left, value on the right */
.vehicle-details dl{display:block;margin:0;border-top:1px solid var(--ice-3)}
.vehicle-details dl div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--ice-3)
}
.vehicle-details dt{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.vehicle-details dd{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--navy);text-align:right}
@media(max-width:680px){.vehicle-feature-head{align-items:center}}
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:980px){.cars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cars{grid-template-columns:1fr}}
.car{border:1px solid var(--ice-3);border-radius:var(--r);background:#fff;overflow:hidden;
     display:flex;flex-direction:column;box-shadow:0 4px 14px rgba(6,20,38,.06)}
.car-fig{position:relative;background:var(--ice-2);border-bottom:1px solid var(--ice-3);padding:14px 10px 8px}
.car-fig svg{width:100%;height:auto}
.stamp{
  position:absolute;top:12px;right:12px;transform:rotate(-7deg);
  border:2px solid var(--red);color:var(--red);border-radius:4px;background:rgba(255,255,255,.85);
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  padding:5px 8px;text-align:center;line-height:1.25;
}
.car-body-txt{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.car-body-txt h3{font-size:19px;margin-bottom:2px;color:var(--navy)}
.yr{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.specs{list-style:none;margin:0 0 18px;padding:0;font-size:15px}
.specs li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px dotted var(--ice-3)}
.specs li span:first-child{color:var(--ink-soft)}
.specs li span:last-child{font-family:var(--sans);font-size:14px;font-weight:600;text-align:right}
.price{font-family:var(--sans);font-size:21px;font-weight:700;color:var(--navy);
       margin-top:auto;padding-top:14px;border-top:1px solid var(--ice-3)}
.price small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-top:3px}

.car-fig.has-photo{padding:0}
.car-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pick{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  background:rgba(11,37,69,.85);color:#fff;
  padding:6px 10px;border-radius:4px;cursor:pointer;
  opacity:0;transition:opacity .15s;
}
.car-fig:hover .pick,.pick:focus-within,.car-fig:focus-within .pick{opacity:1}
.pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(hover:none){.pick{opacity:.9}}

.cars-foot{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cars-foot p{margin:0;font-size:15px;color:var(--ink-soft)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);
       border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--navy);padding:26px clamp(18px,2vw,26px) 30px}
.step .n{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--amber);margin-bottom:16px;display:block}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:15.5px;margin:0;line-height:1.55}

/* ---------- inspection ---------- */
.insp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.insp{grid-template-columns:1fr}}
.check-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ice-3)}
.check-list li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
               padding:15px 0;border-bottom:1px solid var(--ice-3)}
.check-list .cnt{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--blue);min-width:30px}
.check-list .ttl{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--navy)}
.check-list .dsc{font-size:15px;color:var(--ink-soft);grid-column:2/4;margin-top:-8px;line-height:1.5}
.insp-aside{background:#fff;border:1px solid var(--ice-3);border-left:5px solid var(--red);
            border-radius:var(--r);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
.insp-aside h3{margin-bottom:12px;color:var(--navy)}
.insp-aside p{font-size:16px;color:var(--ink-soft)}
.insp-aside p:last-child{margin-bottom:0}

/* ---------- paperwork ---------- */
.papers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:860px){.papers{grid-template-columns:1fr}}
.paper-item{border-top:3px solid var(--blue);padding-top:18px}
.paper-item:nth-child(2){border-top-color:var(--red)}
.paper-item:nth-child(3){border-top-color:var(--teal)}
.paper-item h3{font-size:18px;margin-bottom:8px;color:var(--navy)}
.paper-item p{font-size:16px;margin:0;color:var(--ink-soft)}

/* ---------- gallery ---------- */
.gallery-alert{
  width:100%;overflow:hidden;margin:0 0 clamp(22px,3vw,34px);
  /* the smoke clears once, on load, while the text is already travelling */
  animation:gallery-alert-smoke 2.6s ease-out both;
}
.gallery-alert span{
  display:inline-block;white-space:nowrap;color:var(--red);
  /* CAUTION TEXT SIZE: change the middle value to resize */
  font-family:var(--sans);font-size:clamp(16px,1.85vw,19px);font-weight:700;
  /* SPEED: lower the seconds to travel faster, raise them to travel slower */
  animation:gallery-alert-move 16s linear infinite;
  will-change:transform;
}
/* travels left to right: enters hidden off the left edge, exits past the right */
@keyframes gallery-alert-move{
  from{transform:translateX(-100%)}
  to{transform:translateX(100vw)}
}
@keyframes gallery-alert-smoke{
  0%  {opacity:0;filter:blur(18px) saturate(.35)}
  40% {opacity:.5;filter:blur(8px) saturate(.6)}
  75% {opacity:.9;filter:blur(2.5px) saturate(.9)}
  100%{opacity:1;filter:blur(0) saturate(1)}
}

/* smoky entrance for the gallery tiles, staggered so they clear one by one */
@media(prefers-reduced-motion:no-preference){
  .gal-grid .gal-item{opacity:0;animation:gal-smoke-in 1s ease-out forwards}
  .gal-grid .gal-item:nth-child(1){animation-delay:.45s}
  .gal-grid .gal-item:nth-child(2){animation-delay:.6s}
  .gal-grid .gal-item:nth-child(3){animation-delay:.75s}
  .gal-grid .gal-item:nth-child(4){animation-delay:.9s}
  .gal-grid .gal-item:nth-child(5){animation-delay:1.05s}
  .gal-grid .gal-item:nth-child(6){animation-delay:1.2s}
  .gal-grid .gal-item:nth-child(7){animation-delay:1.35s}
  .gal-grid .gal-item:nth-child(8){animation-delay:1.5s}
  .gal-grid .gal-item:nth-child(n+9){animation-delay:1.65s}
}
@keyframes gal-smoke-in{
  from{opacity:0;filter:blur(20px) saturate(.4);transform:scale(1.035)}
  to  {opacity:1;filter:blur(0) saturate(1);transform:scale(1)}
}

.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
@media(max-width:860px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gal-grid{grid-template-columns:1fr}}
.gal-item{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy-soft);
  aspect-ratio:4/3;display:flex;align-items:flex-end;border:1px solid var(--ice-3);
}
.gal-item img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.gal-item--collage img{object-fit:contain;background:#fff}
.sold-badge{
  position:absolute;top:12px;right:12px;z-index:3;
  padding:5px 10px;border-radius:4px;background:var(--red);color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  box-shadow:0 3px 10px rgba(6,20,38,.22);
}
.gal-item figcaption{
  position:relative;z-index:2;width:100%;padding:14px 16px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(6,20,38,.88),rgba(6,20,38,0));
}
.gal-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--sans);font-size:13px;color:var(--on-dark-soft);padding:20px;
}

/* brand grid */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media(max-width:760px){.brands{grid-template-columns:repeat(2,1fr)}}
.brand{
  background:#fff;border:1px solid var(--ice-3);border-radius:var(--r);
  padding:20px 14px;text-align:center;text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.brand:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.brand b{display:block;font-family:var(--sans);font-size:17px;font-weight:700;color:var(--navy)}
.brand span{display:block;font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);margin-top:4px}

/* popular used-car links */
.pop-links{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 26px;margin-top:8px}
@media(max-width:900px){.pop-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pop-links{grid-template-columns:1fr}}
.pop-links a{
  font-family:var(--sans);font-size:14.5px;color:var(--on-dark-soft);text-decoration:none;
  padding:7px 0;display:block;border-bottom:1px solid rgba(255,255,255,.07);
}
.pop-links a:hover{color:#fff}

/* ---------- about ---------- */
.about-copy{max-width:76ch;margin:0 auto;text-align:center}
.about-copy p{font-size:17.5px;color:var(--ink-soft)}
.about-copy strong{color:var(--navy)}
.hl-red{color:var(--red);font-weight:600}
.hl-teal{color:var(--teal);font-weight:600}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(34px,5vw,56px)}
@media(max-width:900px){.services{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--ice-3);border-radius:var(--r);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow)}
.svc .tag{font-size:26px;line-height:1;display:block;margin-bottom:14px}
.svc h3{color:var(--navy);font-size:20px;margin-bottom:14px}
.svc dl{margin:0}
.svc dt{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--blue);margin-top:14px}
.svc dt:first-child{margin-top:0}
.svc dd{margin:3px 0 0;font-size:15.5px;color:var(--ink-soft);line-height:1.55}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);margin-top:clamp(34px,5vw,56px)}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.market{background:#fff;border:1px solid var(--ice-3);border-top:4px solid var(--red);
        border-radius:var(--r);padding:clamp(22px,3vw,30px)}
.market h3{color:var(--navy);margin-bottom:10px}
.market p{margin:0;font-size:16px;color:var(--ink-soft)}

.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,48px)}
@media(max-width:860px){.diffs{grid-template-columns:1fr}}
.diff h3{font-size:19px;color:var(--navy)}
.diff p{font-size:16px;margin:0;color:var(--ink-soft)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:860px){.why{grid-template-columns:1fr}}
.why h3{font-size:19px}
.why p{font-size:16px;margin:0}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:860px){.contact{grid-template-columns:1fr}}
.form-card{background:#fff;border:1px solid var(--ice-3);border-radius:var(--r);
           padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
.field{margin-bottom:16px}
label{display:block;font-family:var(--sans);font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--navy)}
input,select,textarea{
  width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--ice);border:1px solid var(--ice-3);border-radius:var(--r);padding:12px 14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:#fff}
textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.send-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-note{font-size:14.5px;color:var(--ink-soft);margin:14px 0 0}
.route-note{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  background:var(--ice-2);border-radius:var(--r);padding:12px 14px;margin:0 0 18px;
  border-left:4px solid var(--teal);
}
.contact-aside dl{margin:0;border-top:1px solid var(--ice-3)}
.contact-aside dt{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--red);padding-top:16px}
.contact-aside dd{margin:2px 0 16px;font-size:17px;border-bottom:1px solid var(--ice-3);padding-bottom:16px;color:var(--ink-soft)}
.contact-aside dd a{text-decoration:none;color:var(--blue);border-bottom:1px solid var(--blue)}
.contact-aside dd a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ---------- mission & vision (last section) ---------- */
.mv{background:var(--navy-deep);color:var(--on-dark)}
.mv h2{color:#fff}
.mv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:clamp(28px,4vw,44px);align-items:stretch}
/* below 1040px the third card drops under the first two and runs full width */
@media(max-width:1040px){
  .mv-grid{grid-template-columns:1fr 1fr}
  .mv-grid>.mv-card:last-child{grid-column:1/-1}
}
@media(max-width:820px){
  .mv-grid{grid-template-columns:1fr}
  .mv-grid>.mv-card:last-child{grid-column:auto}
}
.mv-card{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 100%);
  border-radius:var(--r);padding:clamp(28px,3.6vw,42px);
  border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;
}
/* ACCENT BARS: one colour per card, in order — vision, mission, values */
.mv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.mv-card:nth-child(2)::before{background:var(--teal)}
.mv-card:nth-child(3)::before{background:var(--amber)}
.mv-card h3{font-size:clamp(21px,2.4vw,26px);margin-bottom:14px;color:#fff}
.mv-card p{font-size:17px;color:var(--on-dark-soft);margin:0;max-width:52ch}

/* ---------- core values list (third mission/vision card) ---------- */
.mv-values{list-style:none;margin:0;padding:0}
.mv-values li{
  position:relative;padding:13px 0 13px 22px;
  border-top:1px solid rgba(255,255,255,.1);
}
.mv-values li:first-child{border-top:0;padding-top:0}
.mv-values li:last-child{padding-bottom:0}
.mv-values li::before{
  content:"";position:absolute;left:0;top:20px;
  width:9px;height:2px;border-radius:2px;background:var(--amber);
}
.mv-values li:first-child::before{top:7px}
.mv-values b{
  display:block;font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.01em;color:#fff;
}
.mv-values span{
  display:block;font-size:15.5px;line-height:1.5;color:var(--on-dark-soft);margin-top:3px;
}

/* ---------- whatsapp float ---------- */
.wa{
  position:fixed;left:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  background:#128C4A;color:#fff;
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  text-decoration:none;padding:12px 18px 12px 14px;border-radius:40px;
  box-shadow:0 8px 24px rgba(6,20,38,.35);
  transition:background .18s,transform .18s;
}
.wa:hover{background:#0E7A3F;transform:translateY(-2px)}
.wa svg{width:22px;height:22px;flex:none;color:#fff}
.wa-label{white-space:nowrap}
@media(max-width:520px){.wa{left:14px;bottom:14px;padding:12px}.wa-label{display:none}}
@media(prefers-reduced-motion:reduce){.wa:hover{transform:none}}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:var(--on-dark-soft);padding:46px 0 40px;font-size:15px;
       border-top:1px solid rgba(255,255,255,.09)}
.foot-in{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
footer .mark{color:#fff}
footer .mark .m2{color:#FF6B73}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;font-family:var(--sans);font-size:14px}
.foot-links a{text-decoration:none;color:var(--on-dark-soft)}
.foot-links a:hover{color:#fff}
.foot-legal{width:100%;border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:20px;font-size:13.5px}

/* ---------- customer reviews (about page) ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);
         margin-top:clamp(28px,4vw,44px)}
@media(max-width:900px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.reviews{grid-template-columns:1fr}}
.review{
  margin:0;background:#fff;border:1px solid var(--ice-3);border-top:3px solid var(--blue);
  border-radius:var(--r);padding:clamp(22px,2.8vw,30px);
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.review:nth-child(3n+2){border-top-color:var(--red)}
.review:nth-child(3n+3){border-top-color:var(--teal)}
.review blockquote{margin:0 0 18px;flex:1}
.review blockquote p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);max-width:none}
.review figcaption{border-top:1px dotted var(--ice-3);padding-top:14px}
.review b{display:block;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--navy)}
.review figcaption span{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin-top:2px}
.review .bought{font-size:12.5px;font-weight:600;color:var(--blue);margin-top:9px}

/* star rating inside a review — compact "4.0 ★" badge format */
.review figcaption .stars{
  display:inline-flex;align-items:center;gap:4px;margin-top:11px;line-height:1;
  font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);
}
.review .stars i{
  font-style:normal;font-size:16px;color:var(--amber);
}