/* ==========================================================================
   WeDeliverCars — cross-border vehicle sales & delivery
   Design system. No build step. Signature motif: THE CORRIDOR.
   Palette: graphite ground, bone paper, one signal-orange accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root{
  --bone:#F1F3F5;            /* cool light neutral — never cream */
  --bone-2:#E4E8EC;
  --paper:#FFFFFF;
  --graphite:#0C0F13;        /* cool near-black */
  --graphite-2:#151A20;
  --graphite-3:#212932;
  --ink:#0C0F13;
  --body:#454F5B;
  --muted:#737373;
  --line:#DFE3E8;
  --line-dark:#B9C1CA;

  /* The LOGO's orange (sampled from logo-lockup-3x.png, 2026-09-27). The old
     amber #E1772E / brick #AB432F did not match the logo beside them. */
  --signal:#FC6824;          /* the ONE accent — exactly the logo */
  --signal-warm:#FD8048;     /* hover: the logo orange, a step lighter */
  --signal-deep:#CC4203;     /* small orange text: logo hue, darkened to 4.7:1 */
  --dust:#8892A0;            /* steel — structural, never a second accent */

  --ok:#2F7D4F; --warn:#B07A16; --crit:#B4341F;

  --step--2: clamp(.72rem,.7rem + .1vw,.78rem);
  --step--1: clamp(.84rem,.81rem + .14vw,.93rem);
  --step-0:  clamp(1rem,.97rem + .2vw,1.09rem);
  --step-1:  clamp(1.2rem,1.1rem + .45vw,1.5rem);
  --step-2:  clamp(1.55rem,1.35rem + .95vw,2.3rem);
  --step-3:  clamp(2.1rem,1.7rem + 1.9vw,3.3rem);
  --step-4:  clamp(2.7rem,2rem + 3.6vw,5.2rem);
  --step-5:  clamp(3.4rem,2.3rem + 5.6vw,7rem);

  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(1.1rem,.6rem + 2.2vw,2.4rem);
  --maxw:1240px;
  --radius:4px; --radius-lg:10px;

  --shadow-sm:0 1px 2px rgba(12,15,19,.06),0 2px 8px rgba(12,15,19,.05);
  --shadow:0 14px 34px rgba(12,15,19,.11),0 3px 8px rgba(12,15,19,.06);
  --shadow-lg:0 40px 90px rgba(12,15,19,.20);

  --dur-1:.18s; --dur-2:.42s; --dur-3:.8s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(0,.75,.2,1);

  --corridor-w:1px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  line-height:1.04; letter-spacing:-.028em; margin:0;
}
h1{font-size:var(--step-4);} h2{font-size:var(--step-3);}
h3{font-size:var(--step-1);} h4{font-size:var(--step-0);}
p{margin:0 0 1em;}
a{color:inherit;}
img{max-width:100%; display:block;}

.mono{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
      font-size:var(--step--2); font-weight:500;}
.serif-em{font-style:normal; color:var(--signal);}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto;}
.wrap-narrow{width:min(100% - var(--gutter)*2, 780px); margin-inline:auto;}
section{padding-block:clamp(3.4rem,2rem + 6vw,7rem);}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* ==========================================================================
   THE CORRIDOR — the signature motif.
   A route line running the page's spine with border-post nodes. Sections
   attach to it, alternating side. Remove it and the composition collapses.
   ========================================================================== */
/* The corridor runs as a rail down the LEFT margin, outside the content
   column — never through the middle of the page. */
.corridor{position:fixed; left:max(0.9rem, calc((100vw - var(--maxw)) / 2 - 2rem));
  top:0; bottom:0; width:var(--corridor-w);
  background:linear-gradient(to bottom,transparent,var(--line) 8%,var(--line) 92%,transparent);
  pointer-events:none; z-index:0;}
.corridor::after{content:""; position:absolute; left:0; top:0; width:var(--corridor-w);
  height:var(--corridor-progress,0%);
  background:linear-gradient(to bottom,var(--signal),var(--signal-warm));
  box-shadow:0 0 14px rgba(252,104,36,.5);}
@media (max-width:900px){ .corridor{left:.7rem;} }

.post{position:relative;}

/* sections that hang off the corridor, alternating */
.hang{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,5vw,5.5rem); align-items:start;}
.hang > .side{grid-column:1; text-align:right;}
.hang > .main{grid-column:2;}
.hang.flip > .side{grid-column:2; text-align:left; order:2;}
.hang.flip > .main{grid-column:1; order:1; text-align:right;}
@media (max-width:900px){
  .hang, .hang.flip{grid-template-columns:1fr;}
  .hang > .side, .hang.flip > .side{grid-column:1; text-align:left; order:0; margin-bottom:.6rem;}
  .hang > .main, .hang.flip > .main{grid-column:1; order:1; text-align:left;}
}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.site-head .bar{display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem);
  padding-block:.85rem;}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none;}
.brand .glyph{width:30px; height:30px; flex:none;}
.brand .name{font-family:var(--font-display); font-size:1.22rem; letter-spacing:-.02em;
  color:var(--ink); line-height:1;}
.brand .name b{font-weight:400; color:var(--signal);}
.nav{display:flex; gap:clamp(.7rem,1.8vw,1.7rem); margin-left:auto; align-items:center;}
.nav a{text-decoration:none; font-size:var(--step--1); font-weight:600; color:var(--ink);
  padding:.4rem 0; position:relative; white-space:nowrap;}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:.15rem; height:1.5px;
  background:var(--signal); transition:right var(--dur-2) var(--ease);}
.nav a:hover::after, .nav a[aria-current="page"]::after{right:0;}
.head-cta{display:flex; align-items:center; gap:.9rem; flex:none;}
.head-tel{font-family:var(--font-mono); font-size:var(--step--1); text-decoration:none;
  color:var(--ink); font-weight:600; white-space:nowrap;}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:.5rem .6rem; cursor:pointer;}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); margin:3.5px 0;}




@media (max-width:1040px){
  .nav{position:fixed; inset:64px 0 auto; background:var(--paper); flex-direction:column;
    align-items:flex-start; padding:1.2rem var(--gutter) 1.8rem; border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform var(--dur-2) var(--ease); gap:.2rem;}
  .nav.open{transform:translateY(0);}
  .nav a{font-size:1.05rem; padding:.6rem 0; width:100%;}
  .burger{display:block; margin-left:auto;}
  .head-tel{display:none;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body);
  font-weight:700; font-size:var(--step--1); text-decoration:none; cursor:pointer;
  padding:.82rem 1.35rem; border-radius:var(--radius); border:1.5px solid transparent;
  transition:transform var(--dur-1) var(--ease), background var(--dur-1), color var(--dur-1);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--signal); color:#fff;}
.btn-primary:hover{background:var(--signal-deep);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal);}
.btn-light{border-color:var(--line-dark); color:var(--ink); background:rgba(255,255,255,.72);}
.btn-light:hover{border-color:var(--ink);}
/* WhatsApp CTA. Outlined in WhatsApp green rather than filled: sat next to the
   filled orange primary, two solid buttons compete and neither reads as the
   main action. The brand green stays recognisable in the border and mark. */
.btn-wa{border-color:#25D366; color:#128C4A; background:rgba(37,211,102,.06);}
.btn-wa:hover{background:#25D366; color:#fff; border-color:#25D366;}
.btn-wa svg{flex:none;}

.btn .arrow{transition:transform var(--dur-1) var(--ease);}
.btn:hover .arrow{transform:translateX(3px);}
.link-rule{display:inline-block; text-decoration:none; font-weight:700;
  font-size:var(--step--1); border-bottom:1.5px solid var(--signal); padding-bottom:2px;
  color:var(--ink);}
.link-rule:hover{color:var(--signal);}

/* ---------- eyebrow ---------- */
.eyebrow{color:var(--signal-deep); display:block; margin-bottom:.9rem;}
.eyebrow.on-dark{color:var(--signal-deep);}

/* ==========================================================================
   HERO — full-viewport photographic stage
   ========================================================================== */
/* The block is CENTRED, not bottom-anchored: the search card is the first
   thing a buyer is asked to do, so it has to land at eye level on a laptop
   rather than in the bottom corner. overflow is visible-by-growth here — the
   section has a min-height, not a height, so a tall stack pushes the fold
   down instead of being clipped. */
.hero{position:relative; min-height:calc(100svh - 68px); display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; color:var(--body); isolation:isolate;
  padding-block:clamp(3rem,6vh,5rem) clamp(1.6rem,4vh,3rem);}
.hero-bg{position:absolute; inset:0; z-index:-2;}
.hero-bg figure{position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1.4s var(--ease); will-change:opacity;}
.hero-bg figure.on{opacity:1;}
.hero-bg img{width:100%; height:100%; object-fit:cover;}
/* scrim: white light — the page stays white even over photography */
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 34%,
    rgba(255,255,255,.42) 62%, rgba(255,255,255,.06) 88%),
    linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 14%, transparent 34%);}
@media (prefers-reduced-motion:reduce){ .hero-bg figure{transition:none;} }

.hero-inner{width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto;}
.hero h1{color:var(--ink); font-size:var(--step-4); max-width:22ch; margin-bottom:1.1rem;
  text-wrap:balance;}
.hero h1 em{font-style:normal; color:var(--signal);}
.hero .lede{color:var(--body); font-size:var(--step-1); line-height:1.5;
  max-width:44ch; font-weight:400;}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem;}
.hero .lede strong{color:var(--ink); font-weight:600;}
/* Where we deliver. Real flag images, not emoji: Windows has no flag emoji and
   draws "BW", "ZW"... as letters, which is what the client would have seen. */
.hero-countries{list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.45rem .5rem; max-width:62ch;}
.hero-countries li{display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.78);
  font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);}
.hero-countries img{width:20px; height:15px; border-radius:2px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);}

.hero-foot{margin-top:clamp(1.8rem,4vh,3.2rem); padding-top:1.3rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.6rem 2.6rem;}
.hero-trust{display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem;}
.hero-trust .n{font-family:var(--font-mono); font-size:1.5rem; color:var(--ink); line-height:1;
  font-weight:500;}
.hero-trust .l{font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.13em; color:var(--muted); margin-top:.4rem;}

.hero-nav{margin-left:auto; display:flex; align-items:center; gap:.55rem;}
.dot{width:30px; height:2px; background:var(--line-dark); border:0; padding:0;
  cursor:pointer; transition:background var(--dur-1);}
.dot[aria-selected="true"]{background:var(--signal);}
.showroom-arrows{display:flex; gap:.4rem; margin-left:.6rem;}
.showroom-arrows button{width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line-dark); color:var(--ink);
  display:grid; place-items:center; transition:all var(--dur-1);}
.showroom-arrows button:hover{border-color:var(--ink);}
.hero-cap{font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);}

/* Solid, legible header above the hero. The hero fills the rest of the
   viewport so header + hero together read as one full screen. */
.site-head{transition:box-shadow var(--dur-2);}
body:not(.at-top) .site-head{box-shadow:0 1px 12px rgba(12,15,19,.07);}

/* ---------- quick search bar ---------- */
.quicksearch{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.quicksearch form{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:.7rem;
  padding-block:1.15rem;}
@media (max-width:900px){ .quicksearch form{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .quicksearch form{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.3rem; min-width:0;}
.field label{font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted);}
.field select,.field input,.field textarea{
  font-family:var(--font-body); font-size:var(--step--1); color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--line-dark);
  padding:.45rem 0; width:100%; border-radius:0;}
.field select:focus,.field input:focus,.field textarea:focus{outline:0; border-bottom-color:var(--signal);}
.field textarea{resize:vertical; min-height:80px;}

/* ==========================================================================
   VEHICLE CARDS + INVENTORY
   ========================================================================== */
.veh-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(1.1rem,2.4vw,2rem);}
.veh{position:relative; text-decoration:none; display:flex; flex-direction:column;
  background:var(--paper); border-bottom:1px solid var(--line); padding-bottom:1.1rem;
  transition:transform var(--dur-2) var(--ease);}
.veh:hover{transform:translateY(-4px);}
.veh:hover .veh-media img{transform:scale(1.045);}
.veh-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bone-2);
  border-radius:var(--radius);}
.veh-media img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-3) var(--ease);}
.veh-flag{position:absolute; top:.6rem; left:.6rem; z-index:2; background:var(--signal);
  color:#fff; font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.1em; padding:.24rem .5rem; border-radius:2px; font-weight:600;}
.veh-flag.sold{background:var(--graphite);}
.veh-flag.new{background:var(--ok);}
.veh-body{padding-top:.85rem; display:flex; flex-direction:column; flex:1;}
.veh-make{font-family:var(--font-mono); font-size:var(--step--2); color:var(--muted);
  text-transform:uppercase; letter-spacing:.13em;}
.veh-name{font-family:var(--font-display); font-size:var(--step-0); font-weight:700;
  color:var(--ink); line-height:1.2; letter-spacing:-.02em; margin:.3rem 0 .55rem;}
.veh-specs{min-height:2.6em; align-content:flex-start; margin-bottom:.9rem;
  display:flex; flex-wrap:wrap; gap:.35rem .85rem; font-family:var(--font-mono);
  font-size:var(--step--2); color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.veh-foot{display:flex; align-items:baseline; justify-content:space-between; gap:.8rem;
  margin-top:auto; padding-top:.75rem; border-top:1px solid var(--line);}
.veh-price{font-family:var(--font-mono); font-size:1.12rem; font-weight:600; color:var(--ink);}
.veh-price small{display:block; font-size:var(--step--2); font-weight:400; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; margin-top:.15rem;}
.veh-go{font-family:var(--font-mono); font-size:var(--step--2); color:var(--signal);
  text-transform:uppercase; letter-spacing:.12em; font-weight:600; white-space:nowrap;}

/* inventory layout */
.inv{display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(1.4rem,3vw,3rem);
  align-items:start;}
@media (max-width:940px){ .inv{grid-template-columns:1fr;} }
.filters{position:sticky; top:84px; border-top:1.5px solid var(--ink); padding-top:1rem;}
@media (max-width:940px){ .filters{position:static;} }
.filter-group{padding:.85rem 0; border-bottom:1px solid var(--line);}
.filter-group > .mono{color:var(--muted); display:block; margin-bottom:.5rem;}
.chiprow{display:flex; flex-wrap:wrap; gap:.35rem;}
.chip{font-family:var(--font-body); font-size:var(--step--1); font-weight:600;
  border:1px solid var(--line-dark); background:transparent; color:var(--ink);
  padding:.3rem .65rem; border-radius:99px; cursor:pointer; transition:all var(--dur-1);}
.chip:hover{border-color:var(--signal); color:var(--signal);}
.chip[aria-pressed="true"]{background:#fff; color:var(--signal); border-color:var(--signal);}
.inv-bar{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.4rem;
  padding-bottom:.9rem; border-bottom:1.5px solid var(--ink);}
.inv-count{font-family:var(--font-mono); font-size:var(--step--1); color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em;}
.inv-count b{color:var(--ink); font-weight:600;}
.inv-sort{margin-left:auto; display:flex; align-items:center; gap:.5rem;}
.inv-sort select{border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:.4rem .6rem; font-family:var(--font-body); font-size:var(--step--1); background:transparent;}
.empty{padding:3rem 0; text-align:center; color:var(--muted);}

/* ---------- vehicle detail ---------- */
.vd{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;}
@media (max-width:940px){ .vd{grid-template-columns:1fr;} }
.vd-gallery img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-lg);
  background:var(--bone-2);}
.vd-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.6rem;}
.vd-thumbs button{padding:0; border:1.5px solid transparent; background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;}
.vd-thumbs button[aria-selected="true"]{border-color:var(--signal);}
.vd-thumbs img{aspect-ratio:4/3; object-fit:cover;}
.vd-panel{border-top:1.5px solid var(--ink); padding-top:1.1rem;}
.vd-price{font-family:var(--font-mono); font-size:2rem; font-weight:600; color:var(--ink);
  line-height:1;}
.vd-price small{font-size:var(--step--1); color:var(--muted); font-weight:400; letter-spacing:.08em;}
.spec-table{width:100%; border-collapse:collapse; margin:1.2rem 0;}
.spec-table th,.spec-table td{text-align:left; padding:.55rem 0; border-bottom:1px solid var(--line);
  font-size:var(--step--1);}
.spec-table th{font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); font-weight:500; width:46%;}
.spec-table td{font-weight:600; color:var(--ink); font-family:var(--font-mono);}
.landed{background:#FAFBFC; border-left:3px solid var(--signal); padding:1rem 1.1rem;
  margin:1.2rem 0;}
.landed .mono{color:var(--signal-deep); display:block; margin-bottom:.5rem;}
.landed ul{margin:0; padding-left:1.1rem; font-size:var(--step--1);}

/* ==========================================================================
   PANELS / SERVICES / STEPS
   ========================================================================== */
.dark-block{background:#FAFBFC; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--body);}
.dark-block h2,.dark-block h3{color:var(--ink);}
.dark-block p{color:var(--body);}

.index-list{border-top:1.5px solid var(--ink);}
.dark-block .index-list{border-top-color:var(--ink);}
.index-item{display:grid; grid-template-columns:auto 1fr auto; gap:0 clamp(1rem,3vw,2.6rem);
  align-items:start; padding:clamp(1.1rem,2.2vw,1.9rem) 0; border-bottom:1px solid var(--line);
  text-decoration:none; transition:background var(--dur-1);}
.dark-block .index-item{border-bottom-color:var(--line);}
.index-item:hover{background:rgba(252,104,36,.05);}
.index-num{font-family:var(--font-mono); font-size:var(--step--2); color:var(--signal);
  padding-top:.45rem; letter-spacing:.1em;}
.index-title{font-family:var(--font-display); font-size:var(--step-2); color:var(--ink);
  line-height:1.05; margin-bottom:.4rem;}
.dark-block .index-title{color:var(--ink);}
.index-desc{font-size:var(--step--1); max-width:62ch; margin:0;}
.index-go{font-family:var(--font-mono); font-size:var(--step--2); color:var(--muted);
  letter-spacing:.1em; padding-top:.5rem; white-space:nowrap;}
.index-item:hover .index-go{color:var(--signal);}

/* pull quote */
.pull{font-family:var(--font-display); font-size:var(--step-2); line-height:1.16;
  color:var(--ink); max-width:22ch;}
.dark-block .pull{color:var(--ink);}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line);}
.dark-block .stats{border-top-color:var(--ink);}
.stat{padding:1.2rem 1.2rem 1.2rem 0; border-bottom:1px solid var(--line);}
.dark-block .stat{border-bottom-color:var(--line);}
.stat .n{font-family:var(--font-mono); font-size:var(--step-2); color:var(--ink); line-height:1;}
.dark-block .stat .n{color:var(--ink);}
.stat .l{font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.11em; color:var(--muted); margin-top:.4rem;}

/* ---------- country cards ---------- */
.country-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line);}
.country{background:var(--paper); padding:1.5rem 1.4rem; text-decoration:none; display:block;
  transition:background var(--dur-1);}
.country:hover{background:var(--bone);}
.country .flagline{width:34px; height:3px; background:var(--signal); margin-bottom:1rem;}
.country h3{font-size:var(--step-1); margin-bottom:.45rem;}
.country p{font-size:var(--step--1); color:var(--muted); margin:0 0 .8rem;}
.country .meta{font-family:var(--font-mono); font-size:var(--step--2); color:var(--signal-deep);
  text-transform:uppercase; letter-spacing:.1em;}

/* ---------- FAQ ---------- */
.faq{border-top:1.5px solid var(--ink);}
.faq details{border-bottom:1px solid var(--line); padding:1rem 0;}
.faq summary{cursor:pointer; list-style:none; display:flex; gap:1rem; align-items:flex-start;
  font-family:var(--font-display); font-size:var(--step-1); color:var(--ink); line-height:1.2;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; margin-left:auto; font-family:var(--font-mono);
  color:var(--signal); font-size:1.2rem; line-height:1; flex:none;}
.faq details[open] summary::after{content:"–";}
.faq .a{padding:.8rem 0 .2rem; max-width:70ch;}
.faq .a p:last-child{margin-bottom:0;}

/* ---------- article / guides ---------- */
.article{max-width:72ch;}
.article h2{font-size:var(--step-2); margin:2.2rem 0 .8rem;}
.article h3{font-size:var(--step-1); margin:1.7rem 0 .6rem;}
.article ul,.article ol{padding-left:1.2rem; margin:0 0 1.2rem;}
.article li{margin-bottom:.45rem;}
.article table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:var(--step--1);}
.article th{text-align:left; font-family:var(--font-mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:500;
  border-bottom:1.5px solid var(--ink); padding:.5rem .8rem .5rem 0;}
.article td{padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--line); vertical-align:top;}
.note{background:#FAFBFC; border-left:3px solid var(--dust); padding:1rem 1.15rem; margin:1.4rem 0;}
.note p:last-child{margin-bottom:0;}
.note .mono{color:var(--muted); display:block; margin-bottom:.4rem;}

/* ---------- page header ---------- */
.page-head{background:#FAFBFC; color:var(--body); border-bottom:1px solid var(--line);
  padding-block:clamp(3.4rem,2.6rem + 4vw,6rem) clamp(2.4rem,2rem + 3vw,4rem); position:relative;}
.page-head .wrap{position:relative; z-index:2;}
.page-head h1{color:var(--ink); max-width:20ch;}
.page-head h1 em{font-style:normal; color:var(--signal);}
.page-head .lede{color:var(--body); max-width:62ch; font-size:var(--step-1); margin-top:1rem;}
.crumbs{font-family:var(--font-mono); font-size:var(--step--2); text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted); margin-bottom:1.2rem;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--signal);}

/* ---------- form panel ---------- */
.form-panel{background:#FAFBFC; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.4rem);}
.dark-block .form-panel{background:var(--paper);}
.dark-block .form-panel .field label{color:var(--muted);}
.dark-block .form-panel .field select,
.dark-block .form-panel .field input,
.dark-block .form-panel .field textarea{color:var(--ink); border-bottom-color:var(--line-dark);}
.dark-block .form-panel .field select option{color:var(--ink);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.form-note{font-size:var(--step--2); color:var(--muted); margin-top:.9rem;}
.dark-block .form-note{color:var(--muted);}
.form-status{margin-top:1rem; font-size:var(--step--1); font-weight:600;}
.form-status.ok{color:var(--ok);} .form-status.err{color:var(--crit);}

/* ---------- footer ---------- */
.site-foot{background:#FAFBFC; color:var(--body); border-top:1px solid var(--line);
  padding-block:clamp(2.6rem,2rem + 3vw,4.4rem) 2rem;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem;}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
.site-foot h4{color:var(--ink); font-family:var(--font-mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.13em; font-weight:600; margin-bottom:.9rem;}
.site-foot a{color:var(--body); text-decoration:none; display:block; padding:.24rem 0;
  font-size:var(--step--1);}
.site-foot a:hover{color:var(--signal);}
.foot-brand p{font-size:var(--step--1); max-width:34ch; margin-top:1rem;}
.foot-bottom{margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);}

/* ---------- reveal ---------- */
/* Hidden state is applied ONLY when JS is confirmed running (html.js), so a
   script failure can never leave the page permanently blank. */
.js [data-reveal]{opacity:0; transform:translateY(18px);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);}
.js [data-reveal].in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important; transform:none !important; transition:none;}
  .showroom-track{transition:none;}
  .corridor::after{display:none;}
}

/* ---------- grain ---------- */
.grain{display:none; position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.4;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");}

.skip{position:absolute; left:-9999px; top:0; background:var(--signal); color:#fff;
  padding:.6rem 1rem; z-index:200;}
.skip:focus{left:.5rem; top:.5rem;}

/* ==========================================================================
   ADDITIONS — reviews, blog, fleet, image treatment
   ========================================================================== */

/* representative-image marker (placeholder photography in the demo build) */
.repmark{position:absolute; right:.5rem; bottom:.5rem; z-index:2;
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.86); background:rgba(12,15,19,.55); backdrop-filter:blur(3px);
  padding:.2rem .42rem; border-radius:2px;}

/* ---------- reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(1rem,2.4vw,2rem);}
.review{border-top:1.5px solid var(--ink); padding-top:1.1rem;}
.dark-block .review{border-top-color:var(--ink);}
.stars{display:flex; gap:.12rem; margin-bottom:.7rem;}
.stars svg{width:14px; height:14px; fill:#F2A93B;}
.review blockquote{margin:0 0 1rem; font-family:var(--font-body); font-size:var(--step-0);
  font-weight:500; line-height:1.5; color:var(--ink);}
.dark-block .review blockquote{color:var(--ink);}
.review .who{display:flex; align-items:center; gap:.7rem;}
.review .av{width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--bone-2); color:var(--ink); font-family:var(--font-mono); font-size:.72rem;
  font-weight:600;}
.dark-block .review .av{background:var(--bone-2); color:var(--ink);}
.review .who .n{font-size:var(--step--1); font-weight:700; color:var(--ink); line-height:1.2;}
.dark-block .review .who .n{color:var(--ink);}
.review .who .m{font-family:var(--font-mono); font-size:var(--step--2); color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; margin-top:.15rem;}
.gsummary{display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; padding:1.1rem 0;
  border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:2rem;}
.dark-block .gsummary{border-top-color:var(--ink); border-bottom-color:var(--line);}
.gsummary .score{font-family:var(--font-mono); font-size:var(--step-3); line-height:1; color:var(--ink);}
.dark-block .gsummary .score{color:var(--ink);}
.gsummary .gmeta{font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);}

/* ---------- blog ---------- */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(1.2rem,2.6vw,2.2rem);}
.post-card{text-decoration:none; display:flex; flex-direction:column;
  border-bottom:1px solid var(--line); padding-bottom:1.2rem;
  transition:transform var(--dur-2) var(--ease);}
.post-card:hover{transform:translateY(-4px);}
.post-card .pc-media{aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius);
  background:var(--bone-2); position:relative;}
.post-card .pc-media img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-3) var(--ease);}
.post-card:hover .pc-media img{transform:scale(1.04);}
.post-card .pc-kicker{font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.13em;
  text-transform:uppercase; color:var(--signal-deep); margin:.9rem 0 .45rem;}
.post-card h3{font-size:var(--step-1); line-height:1.12; margin-bottom:.5rem;}
.post-card p{font-size:var(--step--1); color:var(--body); margin:0;}
.post-card .pc-meta{font-family:var(--font-mono); font-size:var(--step--2); color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase; margin-top:.8rem;}
.post-lead{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.4rem,4vw,3rem);
  align-items:center; border-top:1.5px solid var(--ink); padding-top:1.6rem; margin-bottom:3rem;}
@media (max-width:860px){ .post-lead{grid-template-columns:1fr;} }
.post-lead .pl-media{aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--bone-2);}
.post-lead .pl-media img{width:100%; height:100%; object-fit:cover;}
.post-lead h2{font-size:var(--step-3); margin:.6rem 0 .8rem;}

/* ---------- fleet / enterprise strip ---------- */
.fleet{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);}
.fleet .f{background:var(--paper); padding:1.4rem 1.3rem;}
.fleet .f .fn{font-family:var(--font-display); font-size:var(--step-0); font-weight:700;
  color:var(--ink); line-height:1.2; margin-bottom:.5rem;}
.fleet .f p{font-size:var(--step--1); margin:0; color:var(--body);}
.b2b-h{font-size:var(--step-1); margin:0 0 .7rem; scroll-margin-top:110px;}

/* ==========================================================================
   CHOOSE YOUR VEHICLE — segment chooser
   ========================================================================== */
.chooser{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(.8rem,1.6vw,1.3rem);}
.seg{position:relative; display:block; text-align:left; padding:0; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color var(--dur-1), transform var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease);}
.seg:hover{border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.seg[aria-pressed="true"]{border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal);}
.seg-media{aspect-ratio:16/10; overflow:hidden; background:var(--bone-2);}
.seg-media img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-3) var(--ease);}
.seg:hover .seg-media img{transform:scale(1.05);}
.seg-body{padding:.85rem .95rem 1rem; display:flex; align-items:baseline; gap:.6rem;}
.seg-name{font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  color:var(--ink); letter-spacing:-.02em; line-height:1.2;}
.seg-count{margin-left:auto; font-family:var(--font-mono); font-size:var(--step--2);
  color:var(--muted); letter-spacing:.1em; white-space:nowrap;}
.seg[aria-pressed="true"] .seg-count{color:var(--signal);}

/* ==========================================================================
   CONCIERGE — on-site sales agent
   ========================================================================== */
/* The launcher rides ABOVE the corner — level with the hero search card, so it
   is in the eye line rather than tucked away. --cx-bottom is shared with the
   prompt bubble so the two can never drift apart. The open PANEL keeps its own
   bottom anchor: it is 640px tall and would run off the top of the screen. */
:root{ --cx-bottom:clamp(1.2rem,22vh,12rem); }
@media (max-width:700px){ :root{ --cx-bottom:clamp(.9rem,2vw,1.6rem); } }

.cx-launch{position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:var(--cx-bottom);
  z-index:110; display:flex; align-items:center; gap:.6rem; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid var(--line-dark); border-radius:99px;
  padding:.72rem 1.1rem .72rem .8rem; box-shadow:0 10px 30px rgba(12,15,19,.14);
  font-family:var(--font-body); font-weight:700; font-size:var(--step--1);
  transition:transform var(--dur-1) var(--ease), background var(--dur-1);}
.cx-launch:hover{transform:translateY(-2px); border-color:var(--ink);}
.cx-launch .pip{width:26px; height:26px; border-radius:50%; background:var(--signal);
  display:grid; place-items:center; flex:none;}
.cx-launch:hover .pip{background:var(--signal);}
.cx-launch .pip svg{width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2.2;}

.cx-launch[hidden]{display:none;}

/* Three pulses on the dot, then it stops. A button that flashes forever trains
   people to ignore it and makes the page read like a pop-up ad. */
@keyframes cx-pulse{
  0%  {box-shadow:0 0 0 0 rgba(252,104,36,.55);}
  70% {box-shadow:0 0 0 13px rgba(252,104,36,0);}
  100%{box-shadow:0 0 0 0 rgba(252,104,36,0);}
}
.cx-launch .pip{animation:cx-pulse 2.4s var(--ease) 1.4s 3;}

/* The invitation. This, not the flash, is what makes someone click — so it
   carries the sentence and the pill stays short. */
.cx-bubble{position:fixed; right:clamp(.9rem,2vw,1.6rem);
  bottom:calc(var(--cx-bottom) + 3.7rem); z-index:110;
  width:min(calc(100vw - 2.4rem), 268px);
  background:#fff; color:var(--ink); border:1px solid var(--line-dark);
  border-radius:14px 14px 4px 14px; padding:.85rem 2rem .9rem .95rem;
  box-shadow:0 14px 38px rgba(12,15,19,.18);
  font-size:var(--step--1); line-height:1.45;
  animation:cx-bubble-in .5s var(--ease) both;}
.cx-bubble[hidden]{display:none;}
.cx-bubble p{margin:0; cursor:pointer;}
.cx-bubble b{color:var(--ink);}
.cx-bubble-x{position:absolute; top:.35rem; right:.4rem; width:22px; height:22px;
  border:0; background:none; cursor:pointer; color:var(--muted); font-size:.78rem;
  line-height:1; border-radius:50%;}
.cx-bubble-x:hover{color:var(--ink); background:var(--line);}
@keyframes cx-bubble-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

@media (prefers-reduced-motion:reduce){
  .cx-launch .pip{animation:none;}
  .cx-bubble{animation:none;}
}

.cx{position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem);
  z-index:111; width:min(calc(100vw - 1.8rem), 384px); max-height:min(78vh, 640px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 26px 70px rgba(12,15,19,.30); display:none; flex-direction:column; overflow:hidden;}
.cx[open]{display:flex;}
.cx-head{background:#fff; color:var(--ink); border-bottom:1px solid var(--line);
  padding:.9rem 1rem; display:flex; align-items:center; gap:.7rem; flex:none;}
.cx-head .av{width:30px; height:30px; border-radius:50%; background:var(--signal); flex:none;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.68rem; color:#fff;}
.cx-head .t{font-weight:700; font-size:var(--step--1); line-height:1.2;}
.cx-head .s{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:.15rem;}
.cx-close{margin-left:auto; background:none; border:0; color:var(--muted);
  cursor:pointer; font-size:1rem; padding:.2rem .3rem;}
.cx-close:hover{color:var(--ink);}
.cx-log{flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem;}
.cx-msg{max-width:88%; font-size:var(--step--1); line-height:1.5;}
.cx-msg.bot{align-self:flex-start; background:#FAFBFC; border:1px solid var(--line);
  border-radius:2px 12px 12px 12px; padding:.65rem .8rem; color:var(--ink);}
.cx-msg.me{align-self:flex-end; background:#fff; color:var(--ink); border:1px solid var(--line-dark);
  border-radius:12px 2px 12px 12px; padding:.65rem .8rem;}
.cx-msg b{font-weight:700;}
.cx-msg .lead-line{display:block; margin-top:.4rem; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-deep);}
.cx-cars{display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem;}
.cx-car{display:flex; gap:.6rem; align-items:center; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:.45rem; cursor:pointer;
  text-align:left; width:100%; transition:border-color var(--dur-1);}
.cx-car:hover{border-color:var(--signal);}
.cx-car img{width:56px; height:42px; object-fit:cover; border-radius:2px; flex:none;}
.cx-car .cn{font-weight:700; font-size:.78rem; color:var(--ink); line-height:1.2;}
.cx-car .cp{font-family:var(--font-mono); font-size:.7rem; color:var(--signal-deep); margin-top:.2rem;}
.cx-chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem 1rem;}
.cx-chip{background:transparent; border:1px solid var(--line-dark); color:var(--ink);
  border-radius:99px; padding:.42rem .8rem; font-family:var(--font-body); font-weight:600;
  font-size:.78rem; cursor:pointer; transition:all var(--dur-1);}
.cx-chip:hover{border-color:var(--signal); color:var(--signal);}
/* The composer appears only once the live assistant has actually answered.
   A text box that cannot answer is worse than no text box. */
/* The booking CTA. Deliberately the same dark pill the booking EMAIL uses
   (#111827, 8px radius) so a customer who sees both recognises the same
   action, rather than the page's orange which reads as another site button. */
.cx-book{ padding:.2rem 0 .35rem; }
.cx-book a{
  display:inline-block; background:#111827; color:#fff; text-decoration:none;
  padding:.72rem 1.15rem; border-radius:8px; font-weight:700;
  font-size:var(--step--1); line-height:1;
}
.cx-book a:hover{ background:#000; }

.cx-ask{display:none; gap:.5rem; padding:.7rem .8rem; border-top:1px solid var(--line);
  background:#fff; flex:none;}
.cx-ask[open]{display:flex;}
.cx-ask input{flex:1 1 auto; min-width:0; padding:.6rem .75rem; font:inherit; font-size:.92rem;
  border:1px solid #c9ccd4; border-radius:8px; background:#fff; color:var(--ink);}
.cx-ask input:focus{outline:2px solid var(--signal-deep); outline-offset:1px;}
.cx-ask input:disabled{opacity:.6;}
.cx-ask button{flex:0 0 auto; width:38px; border:0; border-radius:8px; cursor:pointer;
  background:var(--signal); color:#fff; font-size:1.05rem; line-height:1;}
.cx-ask button:hover{background:var(--signal-deep);}
.cx-ask input:disabled + button{opacity:.5; cursor:default;}

.cx-form{padding:0 1rem 1rem; display:none; flex-direction:column; gap:.6rem;}
.cx-form[open]{display:flex;}
.cx-form input{font-family:var(--font-body); font-size:.82rem; padding:.5rem .6rem;
  border:1px solid var(--line-dark); border-radius:var(--radius); background:var(--paper);
  color:var(--ink); width:100%;}
.cx-form input:focus{outline:0; border-color:var(--signal);}
.cx-form .cx-send{background:var(--signal); color:#fff; border:0; border-radius:var(--radius);
  padding:.6rem 1rem; font-weight:700; font-size:.82rem; cursor:pointer;}
.cx-form .cx-send:hover{background:var(--signal-deep);}
.cx-note{font-size:.66rem; color:var(--muted); line-height:1.45;}
.cx-typing{display:flex; gap:3px; padding:.5rem 0 .1rem;}
.cx-typing span{width:5px; height:5px; border-radius:50%; background:var(--muted);
  animation:cxb 1s infinite;}
.cx-typing span:nth-child(2){animation-delay:.15s;}
.cx-typing span:nth-child(3){animation-delay:.3s;}
@keyframes cxb{0%,60%,100%{opacity:.25; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){ .cx-typing span{animation:none;} }


/* ==========================================================================
   EXPENSIVE PASS — restraint, harmony, geometry, air
   ========================================================================== */

/* 1. Accent restraint: in the grid, the CTA is a quiet ruled link. Solid
   orange appears once per screen — hero, header, and the modal submit. */
.veh .btn.btn-primary{
  background:transparent; color:var(--ink); border:0; border-radius:0;
  padding:.2rem 0; font-family:var(--font-mono); font-size:var(--step--2);
  text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  border-bottom:1.5px solid var(--signal);
}
.veh .btn.btn-primary:hover{background:transparent; color:var(--signal);}

/* 2. One photographic tone across mixed-source imagery */
.veh-media img, .seg-media img, .pc-media img, .pl-media img{
  filter:saturate(.82) contrast(1.04) brightness(1.01);
}
.veh-media::after, .seg-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,15,19,.05), rgba(12,15,19,0) 40%);
}
.veh-media, .seg-media{position:relative;}

/* 3. Institutional geometry: hairlines, near-square corners, no soft shadows */
:root{--radius:3px; --radius-lg:6px;}
.veh-media{border:1px solid var(--line); border-radius:var(--radius);}
.veh:hover{transform:none;}
.veh:hover .veh-media{border-color:var(--ink);}
.veh:hover .veh-media img{transform:scale(1.02);}
.btn{border-radius:var(--radius);}

/* 4. Quiet data typography */
.veh-price{font-size:1.02rem; letter-spacing:-.01em;}
.veh-price small{letter-spacing:.1em;}
.veh-make{font-size:.62rem;}
.nav a{font-size:.8rem; letter-spacing:.02em;}

/* 5. Air */
section{padding-block:clamp(4rem,2.6rem + 6.5vw,8rem);}
.veh-grid{gap:clamp(1.4rem,2.8vw,2.6rem) clamp(1.1rem,2.2vw,2rem);}
.sec-gap{margin-bottom:2.6rem;}

/* narrow viewports: text spans most of the width, so the scrim goes near-solid */
@media (max-width:900px){
  .hero::before{background:linear-gradient(180deg, rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.88) 55%, rgba(255,255,255,.65) 78%, rgba(255,255,255,.3) 100%);}
}

/* ==========================================================================
   QUOTE MODAL — injected on every page by site.js.
   display:none here is load-bearing: without it the dialog renders as raw
   text below the footer on every page.
   ========================================================================== */
.modal{position:fixed; inset:0; z-index:120; display:none;}
.modal[open]{display:block;}
.modal-scrim{position:absolute; inset:0; background:rgba(8,10,13,.55); backdrop-filter:blur(4px);}
.modal-panel{position:relative; z-index:2; width:min(100% - 1.6rem, 720px); margin:3vh auto;
  max-height:94vh; overflow-y:auto; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);}
.modal-head{position:sticky; top:0; z-index:3; background:#fff; color:var(--ink);
  border-bottom:1px solid var(--line);
  padding:1.1rem clamp(1.1rem,3vw,1.8rem); display:flex; gap:1rem; align-items:flex-start;}
.modal-head h3{color:var(--ink); font-size:var(--step-1); line-height:1.1;}
.modal-head .sub{font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:.35rem;}
.modal-close{margin-left:auto; background:none; border:1px solid var(--line-dark);
  color:var(--ink); width:32px; height:32px; border-radius:50%; cursor:pointer; flex:none;
  font-size:1rem; line-height:1;}
.modal-close:hover{border-color:var(--ink);}
.modal-body{padding:clamp(1.1rem,3vw,1.8rem);}

.steps{display:flex; gap:.4rem; margin-bottom:1.4rem;}
.steps div{flex:1; height:2.5px; background:var(--line);}
.steps div.on{background:var(--signal);}

.dest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}
@media (max-width:560px){ .dest-grid{grid-template-columns:1fr;} }
.dest{border:1.5px solid var(--line-dark); background:transparent; border-radius:var(--radius);
  padding:.9rem .85rem; cursor:pointer; text-align:left; transition:all var(--dur-1);}
.dest:hover{border-color:var(--signal);}
.dest[aria-pressed="true"]{border-color:var(--signal); background:rgba(252,104,36,.06);}
.dest .d-name{font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  color:var(--ink); line-height:1.1;}
.dest .d-meta{font-family:var(--font-mono); font-size:var(--step--2); color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; margin-top:.4rem;}

.bd{width:100%; border-collapse:collapse; margin:.4rem 0 0;}
.bd th{text-align:left; font-family:var(--font-mono); font-size:var(--step--2); font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; color:var(--muted);
  border-bottom:1.5px solid var(--ink); padding:0 0 .5rem;}
.bd th:last-child{text-align:right;}
.bd td{padding:.6rem 0; border-bottom:1px solid var(--line); font-size:var(--step--1); vertical-align:top;}
.bd td:last-child{text-align:right; font-family:var(--font-mono); font-weight:600; color:var(--ink); white-space:nowrap;}
.bd td .sub{display:block; font-size:var(--step--2); color:var(--muted); font-weight:400; margin-top:.15rem; max-width:44ch;}
.bd tr.free td:last-child{color:var(--ok);}
.bd tr.total td{border-bottom:0; border-top:2px solid var(--ink); padding-top:.9rem;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-1); color:var(--ink);}
.bd tr.total td:last-child{font-family:var(--font-mono); font-size:var(--step-1); font-weight:600;}
.bd tr.sect td{border-bottom:0; padding:.9rem 0 .2rem; font-family:var(--font-mono);
  font-size:var(--step--2); text-transform:uppercase; letter-spacing:.12em; color:var(--signal-deep);}

.quote-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem;}
.disclaim{font-size:var(--step--2); color:var(--muted); margin-top:1rem; line-height:1.55;}

/* real brand lockup */
/* 72px, not 54px. The wordmark carries ".co.za", so the lockup is very wide and
   the letters end up tiny: at 54px the 'w' has a 12px x-height and its left V
   fuses into a solid blob — it reads as a broken glyph. 72px puts the x-height
   at 16px and both vertices separate. Measured, not guessed. */
.brand .lockup-img{height:72px; width:auto; display:block;}
.site-foot .brand .lockup-img{height:60px;}

/* Windows laptops run at 125% or 150% display scaling out of the box, so a
   1920x1080 Lenovo reports a 1536px viewport and a 1366x768 one reports 1093.
   The desktop header carries a lot — lockup, six nav links, phone, and two
   CTAs — and at 1536 it overflowed by 218px, pushing the WhatsApp button off
   the right edge entirely. Clients were zooming to 75% to reach it. Macs, which
   default to 100%, showed nothing wrong.

   Between the mobile breakpoint and 1600px the bar therefore sheds what it can
   spare: the phone number (already hidden on mobile, and repeated in the footer,
   on the contact page and behind the WhatsApp button) and a little gap, and the
   lockup steps down to 60px. Measured at 1536: 1280px of content into 1240px of
   bar becomes 1180 into 1240. */
@media (max-width:1600px){
  .site-head .bar{gap:1.5rem;}
  .brand .lockup-img{height:60px;}
  .head-tel{display:none;}
}

/* The header CTA block was flex:none, so it could not shrink, and the WhatsApp
   button carried its full "Get a quote on WhatsApp" label at every width. On a
   375px phone that forced the document to 772px — more than twice the screen.
   The symptom people reported was the page sitting to one side with half the
   screen blank, which is what horizontal overflow looks like once you zoom out
   far enough to find the button.

   Note the .wa-long rule below already existed and did nothing: it targets a
   span that was never in the markup. The span is there now. */
@media (max-width:1040px){
  .head-cta{gap:.6rem; flex:0 1 auto; min-width:0; margin-left:auto;}  /* the nav leaves the flow here, so nothing else pushes the buttons right */
  .head-cta .btn-primary{display:none;}   /* WhatsApp carries it here; the page repeats the quote CTA throughout */
  .btn-wa{padding:.62rem .85rem;}
}

/* Phones. The lockup is a wide horizontal mark — at 60px tall it is ~330px
   across, which alone is most of a 390px screen — so it steps down, and the
   WhatsApp button sheds its words in two stages: the phrase first, then the
   word, leaving the icon. The aria-label carries the full meaning throughout,
   so nothing is lost to a screen reader. */
/* 1366x768 at 125% reports 1093 CSS px, and the desktop nav does not collapse
   until 1040 — so 1041-1200 has to carry the full nav AND the CTAs. The phrase
   goes first there; the button still reads "WhatsApp". */
@media (max-width:1200px){
  .btn-wa span.wa-long{display:none;}
  /* Two CTAs will not fit beside a six-item nav here, and a burger on a laptop
     is worse than one less button. The orange quote CTA goes; WhatsApp carries
     it, and the quote CTA repeats throughout the page anyway. */
  .head-cta .btn-primary{display:none;}
  .site-head .bar{gap:1.2rem;}
}
@media (max-width:640px){
  .brand .lockup-img{height:46px;}
}

/* Measured stages, set by fitHeader() in site.js only when the bar actually
   overflows. Each is what the breakpoints above do, triggered by the real
   width instead of a guessed one. shed-3 is the ≤1040 burger layout. */
.site-head.shed-tel .head-tel{display:none;}
.site-head.shed-tight .bar{gap:1rem;}
.site-head.shed-tight .nav{gap:.85rem;}
.site-head.shed-tight .head-cta{gap:.55rem;}
.site-head.shed-tight .btn-wa, .site-head.shed-tight .head-cta .btn-primary{padding-inline:.95rem;}
.site-head.shed-1 .btn-wa span.wa-long{display:none;}
.site-head.shed-2 .head-cta .btn-primary{display:none;}
.site-head.shed-3 .nav{position:absolute; top:100%; left:0; right:0; background:var(--paper);
  flex-direction:column; align-items:flex-start; padding:1.2rem var(--gutter) 1.8rem;
  border-bottom:1px solid var(--line); transform:translateY(-120%); visibility:hidden;
  transition:transform var(--dur-2) var(--ease); gap:.2rem; margin-left:0; z-index:-1;}
.site-head.shed-3 .nav.open{transform:translateY(0); visibility:visible;}
.site-head.shed-3 .nav a{font-size:1.05rem; padding:.6rem 0; width:100%;}
.site-head.shed-3 .burger{display:block; margin-left:auto;}
.site-head.shed-3 .head-cta{margin-left:auto;}
@media (max-width:520px){
  .brand .lockup-img{height:40px;}
  .btn-wa .wa-text{display:none;}
  .btn-wa{padding:.6rem .72rem;}
  .btn-wa svg{margin-right:0 !important;}
}


/* ---- quote modal gallery ---- */
.mg-main{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block;}
.mg-thumbs{display:flex; gap:.5rem; margin:.55rem 0 1rem; overflow-x:auto;}
.mg-th{width:76px; height:57px; object-fit:cover; border-radius:5px; border:1px solid var(--line); cursor:pointer; flex:0 0 auto; opacity:.75; transition:opacity .15s, border-color .15s;}
.mg-th:hover{opacity:1;}
.mg-th.active{border-color:var(--ink); opacity:1;}

/* Owner login — discreet footer affordance, injected by site.js */
.foot-bottom .owner-login{color:var(--muted); text-decoration:none; opacity:.6;
  border-bottom:1px solid transparent; transition:opacity .2s, border-color .2s, color .2s;}
.foot-bottom .owner-login:hover,
.foot-bottom .owner-login:focus-visible{opacity:1; color:var(--ink);
  border-bottom-color:currentColor;}

/* ── Hero search ───────────────────────────────────────────────────────────
   A card in the hero that narrows the SAME list the vehicles page shows, then
   carries the choice across as query parameters. The count on the button is
   live, so nobody searches their way into an empty page. */
.herosearch{
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:14px; padding:1.5rem 1.5rem 1.35rem; max-width:520px;
  margin:1.6rem 0 1.5rem; box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.herosearch-title{ font-size:1.32rem; margin:0 0 1.05rem; color:var(--ink); }
.herosearch-sub{ font-size:.88rem; line-height:1.45; color:var(--body); margin:-.55rem 0 1rem; }
.herosearch-label{
  display:block; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink); margin-bottom:.4rem;
}
.herosearch-row{ display:flex; gap:.7rem; align-items:center; }
.herosearch-row input[type=search]{
  flex:1 1 auto; min-width:0; padding:.7rem .85rem; font-size:.95rem;
  border:1px solid #c9ccd4; border-radius:8px; background:#fff; color:var(--ink);
}
.herosearch-row input[type=search]:focus{ outline:2px solid var(--signal-deep); outline-offset:1px; }
.herosearch-more{
  flex:0 0 auto; background:none; border:0; cursor:pointer; font:inherit;
  font-size:.86rem; font-weight:600; color:var(--ink); padding:.5rem .2rem;
}
.herosearch-more span{ color:var(--signal-deep); margin-right:.15rem; }
/* display:grid beats the user-agent [hidden]{display:none}, so the panel must
   opt out explicitly or it is open on every first paint. */
.herosearch-filters[hidden]{ display:none; }
.herosearch-filters{
  display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem;
  margin:1.1rem 0 .3rem; padding-top:1.05rem; border-top:1px solid #dfe2e8;
}
.hsf-wide{ grid-column:1 / -1; }
.hsf label{
  display:block; font-size:.72rem; font-weight:600; color:#5a616e;
  margin-bottom:.28rem; letter-spacing:.02em;
}
.hsf select{
  width:100%; padding:.55rem .6rem; font-size:.88rem; border:1px solid #c9ccd4;
  border-radius:7px; background:#fff; color:var(--ink);
}
.herosearch-go{ width:100%; justify-content:center; margin-top:1.15rem; }
.herosearch-alt{
  display:block; text-align:center; margin-top:.7rem; font-size:.82rem; color:#5a616e;
}
@media (max-width:560px){
  .herosearch{ padding:1.2rem 1.1rem; margin:1.4rem 0 1.1rem; }
  .herosearch-filters{ grid-template-columns:1fr; }
}

/* Criteria arriving from the hero search: shown beside the count so a narrow
   result never looks like an empty catalogue, and each one removable. */
.active-filters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip-active{
  font-size:.78rem; padding:.3rem .65rem; border-radius:999px;
  border:1px solid var(--signal-deep); background:#fff; color:var(--ink); cursor:pointer;
}
.chip-active span[aria-hidden]{ color:var(--signal-deep); margin-left:.25rem; font-weight:700; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Filters drawer ────────────────────────────────────────────────────────
   Slides in over the page rather than growing the hero card, so the Search
   button never drops below the fold and the card stays one glance. */
.hs-backdrop{ position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:120; }
.hs-backdrop[hidden]{ display:none; }
.hs-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(440px,100%);
  background:#fff; z-index:121; display:flex; flex-direction:column;
  box-shadow:-14px 0 44px rgba(0,0,0,.24);
}
.hs-drawer[hidden]{ display:none; }
.hs-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem 1.4rem; border-bottom:1px solid #e5e8ee;
}
.hs-drawer-head h2{ margin:0; font-size:1.15rem; color:var(--ink); }
.hs-close{
  background:none; border:0; font-size:1.7rem; line-height:1; cursor:pointer;
  color:#5a616e; padding:.1rem .35rem;
}
.hs-drawer-body{ flex:1 1 auto; overflow-y:auto; padding:1.25rem 1.4rem; }
.hs-drawer-body .herosearch-filters{ margin:0; padding-top:0; border-top:0; }
.hs-drawer-foot{ padding:1rem 1.4rem 1.25rem; border-top:1px solid #e5e8ee; }
.hs-drawer-foot .btn{ width:100%; justify-content:center; }

/* The concierge launcher floats at z-index 110 and covered the drawer's Search
   button. It steps aside while the drawer is open rather than fighting it. */
body.hs-open .cx-launch, body.hs-open .cx{ display:none !important; }

/* The derived figure, beneath the price.
   The rand is the source price and leads; the dollar is converted from it at
   the rate held for this period and sits underneath. Muted and smaller, never
   bold — two figures at equal weight invites an argument about which one is
   the real price. Class name kept as .zar so the markup did not have to churn
   when the order was reverted. */
.zar{ display:block; font-family:var(--font-mono); font-size:var(--step--2);
      font-weight:400; color:var(--muted); letter-spacing:-.01em; }
td .zar{ display:block; margin-top:.15rem; }
.total .zar{ display:block; margin-top:.15rem; color:inherit; opacity:.72; }

/* A figure shown for context, never charged — the duty BASIS. Muted and
   italic so it reads as a reference rather than a line the customer is
   paying, because it is already made up of two lines above it. */
.info{ font-style:italic; opacity:.7; }

/* "Check your email" — what replaced the two buttons under the estimate.
   Quiet panel, not another CTA: the action that matters is already in their
   inbox, and a competing button on screen splits the one thing we want them
   to do. */
.check-email{ margin-top:1.25rem; padding:1rem 1.1rem; border-radius:10px;
  background:var(--wash, #f6f8f7); border:1px solid var(--line, #e3e8e6); }
.check-email strong{ display:block; margin-bottom:.35rem; }
.check-email p{ margin:0; font-size:var(--step--1); color:var(--muted); line-height:1.5; }

/* Emphasis on the words that sell (client, 2026-09-27): the LOGO's orange,
   bold. Sampled from logo-lockup-3x.png: #FC6824. That exact colour is 2.9:1
   on white - right for a logo, too faint for small print - so body and footer
   text take the same hue darkened just enough to read (#CC4203, 4.7:1), and
   only large lead-ins carry the exact logo orange. NOT --signal/--signal-deep:
   those are a different amber and brick red, and read as off-brand beside the
   logo. */
:root{ --logo-orange:var(--signal); --logo-orange-text:var(--signal-deep); }
.hl{color:var(--logo-orange-text); font-weight:600;}
.hero .lede .hl, .page-head .lede .hl, .pull .hl{color:var(--logo-orange); font-weight:700;}
/* Hero trust captions (80-point inspection / working days / clearance) in the
   logo orange too — small mono text, so the readable text shade, not the raw hue. */
.hero-trust .l{color:var(--logo-orange-text); font-weight:600;}

/* ---- stock search (assets/stock-search.js) — CFAO-style make/model tree ---- */
.ss-combo{ position:relative; flex:1 1 auto; min-width:0; }
.ss-field{ position:relative; }
.ss-input{ width:100%; padding:.7rem 2.3rem .7rem .85rem; font-size:.95rem; border:1px solid var(--line-dark);
  border-radius:8px; background:#fff; color:var(--ink); font-family:inherit; }
.ss-input:focus{ outline:2px solid var(--signal-deep); outline-offset:1px; }
.ss-input.has-picks::placeholder{ color:var(--ink); font-weight:600; }
.ss-input::-webkit-search-cancel-button{ display:none; }
.ss-chev{ position:absolute; right:.4rem; top:50%; transform:translateY(-60%); background:none; border:0;
  font-size:1.1rem; color:var(--muted); cursor:pointer; padding:.2rem .4rem; line-height:1; }
.ss-combo.is-open .ss-chev{ transform:translateY(-35%) rotate(180deg); }
.ss-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 44px rgba(12,15,19,.18);
  max-height:min(60vh, 420px); overflow-y:auto; padding:.35rem 0; overscroll-behavior:contain; }
.ss-list[hidden]{ display:none; }
.ss-make{ display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:1px solid #f1f2f5; }
.ss-make:last-child{ border-bottom:0; }
.ss-row{ display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; cursor:pointer; min-width:0; }
.ss-row input{ width:16px; height:16px; accent-color:var(--signal); flex:none; margin:0; }
.ss-name{ flex:1 1 auto; font-size:.92rem; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-n{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink); font-weight:600; }
.ss-toggle{ background:none; border:0; font-size:.74rem; font-weight:700; color:var(--body); cursor:pointer;
  padding:.55rem .8rem .55rem .2rem; letter-spacing:.02em; }
.ss-toggle:hover{ color:var(--signal-deep); }
.ss-kids{ grid-column:1 / -1; background:#f7f8fa; padding:.2rem 0 .3rem 1.4rem; }
.ss-kid{ padding:.42rem .8rem; }
.ss-kid .ss-name{ font-size:.88rem; }
.is-empty > .ss-row .ss-name, .ss-kid.is-empty .ss-name, .is-empty > .ss-row .ss-n, .ss-kid.is-empty .ss-n,
.is-empty > .ss-toggle{ color:#b3b9c2; }
.ss-row:has(input:disabled){ cursor:default; }
.ss-none{ padding:.9rem 1rem; font-size:.9rem; color:var(--muted); }
.ss-more{ white-space:nowrap; }
.ss-nfilters{ font-weight:700; color:var(--signal-deep); }

/* Range sliders: one track, two handles, the chosen band filled. */
.ss-range .ss-rlabel{ display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.55rem; }
.ss-track{ position:relative; height:22px; }
.ss-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background:#dfe3e8; border-radius:3px; }
.ss-fill{ position:absolute; top:50%; height:3px; margin-top:-1.5px; background:var(--signal); border-radius:3px; }
.ss-track input[type=range]{ position:absolute; inset:0; width:100%; margin:0; background:none; pointer-events:none;
  -webkit-appearance:none; appearance:none; height:22px; }
.ss-track input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:18px; height:18px;
  border-radius:50%; background:#fff; border:2px solid var(--signal); cursor:grab; }
.ss-track input[type=range]::-moz-range-thumb{ pointer-events:auto; width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--signal); cursor:grab; }
.ss-track input[type=range]::-moz-range-track{ background:none; }
.ss-track input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--signal-deep); outline-offset:2px; }
.ss-rvals{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.ss-foot{ display:flex; gap:.8rem; align-items:center; }
.ss-foot .ss-go{ flex:1 1 auto; justify-content:center; }
.ss-clear{ white-space:nowrap; background:none; border:0; text-decoration:underline; color:var(--body); cursor:pointer; font-size:.88rem; padding:.4rem; }
.ss-bar{ display:flex; gap:.8rem; align-items:center; padding-block:1rem; }
.ss-bar .herosearch-row{ flex:1 1 auto; min-width:0; }
@media (max-width:640px){ .ss-bar{ flex-wrap:wrap; } .ss-bar #resetFilters{ margin-left:auto; } }
/* Phones: the input shares its row with "Filters", so a dropdown as wide as
   the input is ~220px. Anchor it to the whole row instead. */
@media (max-width:640px){
  .herosearch-row{ position:relative; }
  .herosearch-row .ss-combo{ position:static; }
  .herosearch-row .ss-list{ top:calc(100% + 4px); }
}