@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
--ink:#07152f;
--ink2:#102a5b;
--ink3:#183b76;
--muted:#718096;
--gold:#f2b300;
--gold2:#ffc928;
--paper:#f4f7fb;
--paper2:#edf2f7;
--white:#fff;
--line:rgba(7,21,47,.1);
--line2:rgba(7,21,47,.16);
--shadow-xs:0 4px 14px rgba(7,21,47,.06);
--shadow-sm:0 10px 30px rgba(7,21,47,.08);
--shadow:0 18px 55px rgba(7,21,47,.13);
--shadow-lg:0 28px 80px rgba(7,21,47,.2);
--radius-sm:10px;
--radius:16px;
--radius-lg:24px;
--ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
scroll-behavior:smooth;
scroll-padding-top:90px;
}

body{
font-family:"Inter",sans-serif;
background:var(--paper);
color:var(--ink);
line-height:1.5;
font-size:14px;
overflow-x:hidden;
padding-top:78px;
}

body.locked{overflow:hidden}

a{
color:inherit;
text-decoration:none;
}

button,input,select,textarea{font:inherit}

button{
cursor:pointer;
border:0;
}

input,select,textarea{
font-size:16px!important;
}

img{max-width:100%}

.wrap{
width:min(1200px,calc(100% - 40px));
margin:auto;
}

button,a,input,select{
-webkit-tap-highlight-color:transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
outline:3px solid rgba(242,179,0,.35);
outline-offset:3px;
}

/* HEADER */

.header{height:78px;position:fixed;top:0;left:0;right:0;width:100%;z-index:900;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);box-shadow:0 5px 25px rgba(7,21,47,.07)}

.nav{
height:78px;
display:flex;
align-items:center;
gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  margin-right:auto;
}

.brand img{
  width:108px;
  height:58px;
  object-fit:contain;
  display:block;
  mix-blend-mode:multiply;
  transition:transform .25s var(--ease);
}

.brand:hover img{transform:translateY(-1px)}

.brand span{
font-size:12px;
font-weight:800;
line-height:1;
}

.brand small{
display:block;
margin-top:4px;
font-size:7px;
letter-spacing:.16em;
color:var(--muted);
}

.desktop-nav{
height:100%;
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
flex:0 0 auto;
}

.desktop-nav a{
position:relative;
height:42px;
padding:0 10px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
color:#536174;
font-size:10px;
font-weight:700;
white-space:nowrap;
border-radius:10px;
transition:.22s var(--ease);
}

.desktop-nav a i{
color:var(--gold);
font-size:12px;
}

.desktop-nav a:hover,.desktop-nav a.active{color:var(--ink);background:#f5f7fa}

.desktop-nav a::after{
content:"";
position:absolute;
left:10px;
right:10px;
bottom:0;
height:2px;
border-radius:999px;
background:var(--gold);
transform:scaleX(0);
transform-origin:center;
transition:transform .22s var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after{
transform:scaleX(1);
}

.desktop-nav a.active{
color:var(--ink);
font-weight:800;
}

.nav-actions{
display:flex;
align-items:center;
gap:12px;
flex:0 0 auto;
}

.whatsapp,
.nav-order,
.mpesa-nav{
height:42px;
padding:0 13px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
border-radius:12px;
font-size:10px;
font-weight:800;
white-space:nowrap;
transition:.22s var(--ease);
}

.whatsapp{
background:#fff;
border:1px solid var(--line);
box-shadow:var(--shadow-xs);
}

.whatsapp:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-sm);
border-color:rgba(31,164,99,.25);
}

.whatsapp i{
color:#1fa463;
font-size:14px;
}

.nav-order,
.mpesa-nav{
background:var(--gold);
color:var(--ink);
border:1px solid var(--gold);
box-shadow:0 8px 20px rgba(242,179,0,.2);
}

.nav-order:hover,
.mpesa-nav:hover{
background:var(--gold2);
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(242,179,0,.28);
}

.nav-order i,
.mpesa-nav i{font-size:14px}

.menu{
display:none;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
color:var(--ink);
box-shadow:var(--shadow-xs);
}

/* MOBILE MENU */

.mobile-menu{display:none}

.mobile-menu.open{
display:grid;
}

.mobile-menu a,
.mobile-menu button{
min-height:40px;
padding:9px 10px;
border-radius:10px;
background:#f4f7fb;
color:var(--ink);
font-size:10px;
font-weight:800;
text-align:left;
}

.mobile-menu a i,
.mobile-menu button i{
width:17px;
color:var(--gold);
}

.mobile-menu a.active{
background:#fffbeb;
color:#8a5c00;
}

/* HERO */

.hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#07152f;
  isolation:isolate;
}

.hero-cinema-slides{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-cinema-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s ease,transform 6s ease;
}

.hero-cinema-slide.active{
  opacity:1;
  transform:scale(1);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(7,21,47,.84) 0%,
    rgba(7,21,47,.62) 48%,
    rgba(7,21,47,.26) 100%
  );
  pointer-events:none;
}

.hero-pattern{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:55px 55px;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  align-items:center;
  padding:44px 0;
}

.vehicle-search{
  width:520px;
  max-width:100%;
  justify-self:start;
  margin:0;
  padding:13px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:18px;
  background:rgba(255,255,255,.97);
  box-shadow:0 22px 68px rgba(0,0,0,.3);
}

.hero-copy{
  color:#fff;
}

.hero h1{
font-size:clamp(32px,4.6vw,54px);
line-height:.98;
letter-spacing:-.05em;
margin:12px 0;
}

.hero h1 strong,
.section-heading h2 strong,
.category-heading h2 strong{
color:var(--gold);
}

.hero-intro{
font-size:14px;
color:#e1e8f1;
max-width:620px;
}

.promise{
font-size:13px;
font-weight:800;
color:var(--gold);
margin:8px 0 16px;
}

.hero-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:18px;
}

.btn{
min-height:48px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:14px;
font-size:11px;
font-weight:800;
transition:.25s var(--ease);
}

.btn.primary{
background:var(--gold);
color:var(--ink);
box-shadow:0 12px 30px rgba(242,179,0,.22);
}

.btn.primary:hover{
background:var(--gold2);
transform:translateY(-3px);
}

.btn.glass{
color:#fff;
border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.1);
backdrop-filter:blur(10px);
}

.btn.glass:hover{
background:rgba(255,255,255,.17);
transform:translateY(-3px);
}

.trust{
display:flex;
gap:7px;
flex-wrap:wrap;
}

.trust div{
min-width:100px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.13);
border-radius:14px;
background:rgba(255,255,255,.07);
backdrop-filter:blur(8px);
}

.trust strong{
display:block;
color:var(--gold);
font-size:18px;
line-height:1;
}

.trust span{
font-size:8px;
color:#d2d9e3;
}

/* HERO SEARCH */

.search-label{
font-size:7px;
letter-spacing:.16em;
font-weight:800;
color:var(--ink2);
}

.search-top h3{
font-size:15px;
margin:2px 0 8px;
}

.search-input{
height:38px;
display:flex;
align-items:center;
gap:8px;
padding:0 11px;
border:1px solid var(--line);
border-radius:11px;
background:#fff;
transition:.2s;
}

.search-input:focus-within{
border-color:rgba(242,179,0,.7);
box-shadow:0 0 0 4px rgba(242,179,0,.12);
}

.search-input i{color:var(--gold)}

.search-input input{
width:100%;
height:100%;
border:0;
outline:0;
background:transparent;
}

.popular{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap;
margin:6px 0 8px;
}

.popular span{
font-size:7px;
color:var(--muted);
font-weight:700;
}

.popular a{
padding:5px 7px;
border-radius:999px;
background:#eef2f6;
font-size:7px;
font-weight:600;
transition:.2s;
}

.filter-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:6px;
}

.filter-grid label{
display:grid;
gap:4px;
font-size:7px;
font-weight:800;
color:#64748b;
}

.filter-grid select{
height:32px;
padding:0 8px;
border:1px solid var(--line);
border-radius:9px;
background:#fff;
color:var(--ink);
outline:0;
}

.search-btn{
width:100%;
height:33px;
margin-top:6px;
border-radius:11px;
background:var(--ink2);
color:#fff;
font-size:8px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
transition:.25s var(--ease);
}

.search-btn:hover{
background:var(--ink3);
transform:translateY(-2px);
}

/* SECTIONS */

.section{padding:15px 0}

.featured{
background:linear-gradient(180deg,#f6f8fb,#e9eff6);
}

.section-heading{text-align:center}

.section-heading h2{
font-size:clamp(31px,4vw,50px);
line-height:1;
letter-spacing:-.055em;
margin:10px 0;
}

.section-heading p{
color:var(--muted);
font-size:12px;
}

/* CATEGORIES */

.category-section{
padding:22px 0;
background:#fff;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.category-heading{
position:relative;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
}

.category-heading h2{
font-size:clamp(28px,4vw,42px);
line-height:1;
letter-spacing:-.05em;
}

.category-more-wrap{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
z-index:20;
}

.category-plus{
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:50%;
background:#fff;
color:var(--ink);
box-shadow:var(--shadow-xs);
transition:.2s;
}

.category-plus:hover{
background:var(--gold);
border-color:var(--gold);
}

.category-dropdown{
position:absolute;
top:46px;
right:0;
width:220px;
padding:7px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
box-shadow:var(--shadow);
z-index:100;
}

.category-dropdown[hidden]{display:none}

.category-dropdown button{
width:100%;
padding:10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border-radius:9px;
background:#fff;
color:var(--ink);
text-align:left;
font-size:10px;
font-weight:700;
}

.category-dropdown button:hover{
background:#f5f7fa;
}

.category-dropdown button small{
color:var(--muted);
}

.category-dropdown>span{
display:block;
padding:10px;
color:var(--muted);
font-size:9px;
}

.body-categories{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:12px;
}

.body-category{
position:relative;
isolation:isolate;
width:100%;
height:165px;
min-width:0;
overflow:hidden;
padding:0;
border:1px solid var(--line);
border-radius:20px;
background:#dde5ef;
color:#fff;
display:block;
cursor:pointer;
box-shadow:var(--shadow-xs);
transition:.3s var(--ease);
pointer-events:auto;
}

.body-category.available:hover{
transform:translateY(-5px);
border-color:var(--gold);
box-shadow:0 20px 45px rgba(7,21,47,.2);
}

.body-category-image{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
pointer-events:none;
}

.body-category-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .45s var(--ease);
pointer-events:none;
}

.body-category.available:hover .body-category-image img{
transform:scale(1.08);
}

.body-category::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg,rgba(7,21,47,.03),rgba(7,21,47,.25) 45%,rgba(7,21,47,.94));
}

.body-category span,
.body-category small{
position:absolute;
left:14px;
right:14px;
z-index:2;
pointer-events:none;
text-align:left;
color:#fff;
}

.body-category span{
bottom:32px;
font-size:13px;
font-weight:800;
line-height:1.1;
text-shadow:0 2px 8px rgba(0,0,0,.4);
}

.body-category small{
bottom:14px;
font-size:8px;
color:#e8edf4;
}

.body-category.active{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(242,179,0,.2),0 20px 45px rgba(7,21,47,.18);
}

/* COLLECTION */

.collection-section{
padding-top:18px;
}

.collection-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}

.collection-filter-btn{
display:none;
height:42px;
padding:0 15px;
align-items:center;
justify-content:center;
gap:7px;
border:1px solid var(--line);
background:#fff;
border-radius:13px;
font-size:10px;
font-weight:800;
box-shadow:var(--shadow-xs);
}

.currency-toggle{
display:flex;
align-items:center;
gap:2px;
padding:4px;
border:1px solid var(--line);
border-radius:15px;
background:#fff;
box-shadow:var(--shadow-xs);
}

.currency-btn{
min-width:54px;
height:34px;
border-radius:11px;
background:transparent;
color:var(--muted);
font-size:10px;
font-weight:800;
}

.currency-btn:hover:not(.active){
background:#f1f4f8;
color:var(--ink);
}

.currency-btn.active{
background:var(--ink2);
color:#fff;
box-shadow:0 6px 16px rgba(16,42,91,.22);
}

#usdRateText{
padding:0 8px;
color:var(--muted);
font-size:8px;
font-weight:800;
white-space:nowrap;
}

.collection-layout{
display:grid;
grid-template-columns:275px minmax(0,1fr);
gap:20px;
align-items:start;
}

.collection-filter{
position:sticky;
top:152px;
max-height:calc(100vh - 172px);
overflow:auto;
padding:19px;
border:1px solid var(--line);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow-sm);
z-index:30;
}

.collection-filter::-webkit-scrollbar{width:6px}
.collection-filter::-webkit-scrollbar-thumb{
background:#b6c1cf;
border-radius:999px;
}

/* IMPORTANT: no fixed overlay pseudo-element */

.filter-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}

.filter-head span{
font-size:8px;
letter-spacing:.16em;
color:var(--ink2);
font-weight:800;
}

.filter-head h3{
font-size:18px;
margin-top:3px;
}

.filter-head-actions{
display:flex;
align-items:center;
gap:12px;
}

.filter-clear-link{
padding:0;
height:auto;
border:0;
background:transparent;
color:var(--ink2);
font-size:8px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
transition:.2s;
}

.filter-clear-link:hover{
color:var(--gold);
}

#closeFilter{
display:none;
width:36px;
height:36px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
}

.clear-filter{
position:relative;
z-index:5;
width:100%;
height:38px;
margin:15px 0;
border:1px solid #dc354533;
border-radius:12px;
background:#fff6f6;
color:#b4232f;
font-size:9px;
font-weight:800;
transition:.2s;
pointer-events:auto;
}

.clear-filter:hover{
background:#ffe9e9;
transform:translateY(-1px);
}

.filter-side-actions{
display:flex;
flex-direction:column;
gap:8px;
margin-top:14px;
}

.filter-side-actions .currency-toggle{
width:100%;
justify-content:center;
flex-wrap:wrap;
}

.filter-side-actions #usdRateText{
width:100%;
text-align:center;
padding:4px 0 0;
}

.filter-group{
position:relative;
z-index:2;
padding:16px 0;
border-top:1px solid var(--line);
}

.filter-group h4{
margin-bottom:11px;
display:flex;
align-items:center;
justify-content:space-between;
font-size:10px;
}

.condition-filter{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:8px;
padding:12px 0;
border-bottom:1px solid var(--line);
}

.filter-check{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid var(--line);
border-radius:10px;
background:#fff;
cursor:pointer;
color:#334155;
font-size:10px;
}

.filter-check:hover{
border-color:rgba(242,179,0,.45);
background:#fffbeb;
}

.filter-check input{
width:16px;
height:16px;
margin:0;
accent-color:#eab308;
}

.filter-check span{flex:1}

.filter-check:has(input:checked){
background:#fffbeb;
border-color:#eab308;
color:#92400e;
}

.range-values{
display:flex;
justify-content:space-between;
gap:8px;
margin-bottom:9px;
color:var(--muted);
font-size:8px;
}

.dual-range{
position:relative;
height:22px;
}

.dual-range input{
position:absolute;
left:0;
top:0;
width:100%;
height:22px;
pointer-events:none;
appearance:none;
background:transparent;
}

.dual-range input::-webkit-slider-runnable-track{
height:5px;
background:#dbe2eb;
border-radius:999px;
}

.dual-range input::-webkit-slider-thumb{
appearance:none;
pointer-events:auto;
width:17px;
height:17px;
margin-top:-6px;
border:3px solid #fff;
border-radius:50%;
background:var(--gold);
box-shadow:0 2px 8px rgba(7,21,47,.25);
cursor:pointer;
}

.dual-range input::-moz-range-track{
height:5px;
background:#dbe2eb;
border-radius:999px;
}

.dual-range input::-moz-range-thumb{
pointer-events:auto;
width:14px;
height:14px;
border:3px solid #fff;
border-radius:50%;
background:var(--gold);
box-shadow:0 2px 8px rgba(7,21,47,.25);
cursor:pointer;
}

.range-labels{
display:flex;
justify-content:space-between;
color:#929dae;
font-size:7px;
}

.check-list{
display:grid;
gap:4px;
}

.check-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px;
border-radius:10px;
color:var(--muted);
font-size:10px;
cursor:pointer;
transition:.18s;
}

.check-row:hover{
background:#f1f5f9;
color:var(--ink);
}

.check-row small{
color:#9aa6b6;
font-size:8px;
}

.check-row input{
width:16px;
height:16px;
margin-right:5px;
accent-color:var(--ink2);
vertical-align:middle;
}

.filter-none{
display:block;
padding:10px 8px;
color:#9aa6b6;
font-size:9px;
font-style:italic;
}

.collection-filter select{
width:100%;
height:42px;
padding:0 10px;
border:1px solid var(--line);
border-radius:12px;
background:#f8fafc;
color:var(--ink);
outline:0;
}

.collection-filter select:hover,
.collection-filter select:focus{
border-color:rgba(242,179,0,.6);
background:#fff;
}

/* COLOUR SWATCHES */

.swatch-group{
padding:2px 0 0;
}

.swatch-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.swatch-btn{
position:relative;
width:28px;
height:28px;
flex:0 0 28px;
border-radius:50%;
border:2px solid #fff;
background:var(--swatch,#c7ccd1);
box-shadow:0 0 0 1px var(--line),0 3px 8px rgba(7,21,47,.15);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:10px;
transition:.2s var(--ease);
}

.swatch-btn:hover{
transform:translateY(-2px);
box-shadow:0 0 0 1px rgba(242,179,0,.6),0 6px 14px rgba(7,21,47,.2);
}

.swatch-btn.active{
box-shadow:0 0 0 2px var(--gold),0 6px 14px rgba(7,21,47,.25);
}

.swatch-btn.active i{
filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9));
}

.swatch-caption{
margin-top:9px;
color:var(--muted);
font-size:9px;
font-weight:700;
}

.swatch-caption span:not(.muted){
color:var(--ink);
font-weight:800;
}

/* STATUS ROW (availability dot + count) */

.status-row{
justify-content:space-between;
}

.status-row span{
display:inline-flex;
align-items:center;
gap:7px;
}

.status-dot{
width:8px;
height:8px;
border-radius:50%;
flex:0 0 8px;
}

.status-dot.available{background:#22c55e}
.status-dot.reserved{background:#f59e0b}
.status-dot.sold{background:#dc2626}
.status-dot.on-ship{background:#2563eb}

.status-row small{
color:#9aa6b6;
font-size:8px;
font-weight:700;
}

/* RESULTS */

.collection-results{
min-width:0;
}

.collection-results-head{
min-height:40px;
display:flex;
align-items:center;
margin-bottom:9px;
padding:0 2px;
}

.collection-results-head span{
color:var(--muted);
font-size:10px;
font-weight:700;
}

.collection-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}

.collection-card{
position:relative;
min-width:0;
overflow:hidden;
border:1px solid var(--line);
border-radius:15px;
background:#fff;
box-shadow:var(--shadow-xs);
cursor:pointer;
transition:.3s var(--ease);
}

.collection-card:hover{
transform:translateY(-6px);
border-color:rgba(242,179,0,.3);
box-shadow:var(--shadow);
}

.collection-image{
position:relative;
height:145px;
overflow:hidden;
background:#e8f1f5;
}

.collection-image img{
width:100%;
height:100%;
display:block;
object-fit:contain;
object-position:center;
background:#e8f1f5;
}

.collection-card:hover .collection-image img{
transform:none;
}

.collection-image .featured-badge,
.collection-image .status-badge{
position:absolute;
z-index:3;
padding:5px 7px;
border-radius:999px;
font-size:7px;
font-weight:800;
backdrop-filter:blur(8px);
}

.collection-image .featured-badge{
top:9px;
right:9px;
background:var(--gold);
color:var(--ink);
}

.collection-image .status-badge{
left:9px;
top:9px;
background:rgba(255,255,255,.92);
color:var(--ink2);
text-transform:uppercase;
}

.collection-image .status-badge.reserved{
color:#b77900;
background:#fff7dc;
}

.collection-image .status-badge.on-ship{
color:#1d4ed8;
background:#e3edff;
}

.collection-image .sold-overlay{
position:absolute;
inset:0;
z-index:3;
display:flex;
align-items:center;
justify-content:center;
background:rgba(220,38,38,.42);
}

.collection-image .sold-overlay span{
padding:6px 22px;
border:1.5px solid rgba(255,255,255,.85);
border-radius:6px;
color:#fff;
font-size:15px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.collection-card.is-sold .collection-image img{
filter:grayscale(.35) brightness(.85);
}

.collection-info{
padding:10px 11px 11px;
}

.collection-make{
margin-bottom:3px;
color:var(--gold);
font-size:8px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}

.collection-info h3{
min-width:0;
margin:3px 0 7px;
overflow:hidden;
color:var(--ink);
font-size:13px;
font-weight:800;
line-height:1.2;
white-space:nowrap;
text-overflow:ellipsis;
}

.collection-meta{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:4px;
margin-bottom:8px;
}

.collection-meta span{
min-width:0;
overflow:hidden;
padding:4px 5px;
border-radius:7px;
background:#f2f5f8;
color:#5f6d80;
font-size:8px;
line-height:1.25;
white-space:nowrap;
text-overflow:ellipsis;
}

.collection-price{
display:flex;
align-items:baseline;
gap:5px;
color:var(--ink2);
font-size:14px;
font-weight:900;
line-height:1.15;
word-break:break-word;
}

.collection-price small{
color:var(--muted);
font-size:8px;
font-weight:800;
}

.collection-actions{
display:grid;
grid-template-columns:38px 1fr;
gap:6px;
margin-top:9px;
padding-top:9px;
border-top:1px solid var(--line);
}

.collection-actions a{
height:33px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
font-size:9px;
font-weight:800;
}

.collection-card a{
position:relative;
z-index:4;
}

.card-whatsapp{
background:#eaf8f0;
color:#16864f;
}

.card-reserve{
background:var(--ink2);
color:#fff;
}

.card-whatsapp:hover{
background:#d8f2e4;
transform:translateY(-2px);
}

.card-reserve:hover{
background:var(--gold);
color:var(--ink);
}

.card-reserve.is-sold-label{
height:33px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
font-size:9px;
font-weight:800;
text-transform:uppercase;
background:#f1f1f3;
color:var(--muted);
cursor:default;
}

.no-image{
width:100%;
height:100%;
display:grid;
place-items:center;
background:#e8edf3;
color:var(--gold);
font-size:25px;
}

.collection-loading,
.collection-empty{
padding:55px 15px;
text-align:center;
color:var(--muted);
font-size:11px;
}

.collection-loading i{
margin-right:6px;
color:var(--gold);
}

.collection-empty{display:none}

.collection-empty>i{
width:52px;
height:52px;
margin:0 auto 13px;
display:grid;
place-items:center;
border-radius:18px;
background:#eef2f6;
color:var(--gold);
font-size:20px;
}

.collection-empty h3{
margin-bottom:5px;
color:var(--ink);
font-size:16px;
}

.collection-empty p{
margin-bottom:15px;
font-size:10px;
}

.collection-pagination{
display:flex;
justify-content:center;
padding:28px 0 10px;
}

.pagination{
display:flex;
align-items:center;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}

.page-btn{
min-width:40px;
height:40px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
color:var(--ink);
font-size:11px;
font-weight:800;
box-shadow:var(--shadow-xs);
transition:.2s var(--ease);
}

.page-btn:hover{
border-color:rgba(242,179,0,.6);
background:#fffbeb;
transform:translateY(-1px);
}

.page-btn.active{
background:var(--ink2);
border-color:var(--ink2);
color:#fff;
box-shadow:0 8px 20px rgba(16,42,91,.25);
}

.page-btn.active:hover{
transform:none;
background:var(--ink2);
}

.page-btn.page-prev,
.page-btn.page-next{
padding:0 18px;
}

.page-ellipsis{
min-width:24px;
text-align:center;
color:var(--muted);
font-size:12px;
font-weight:800;
}

@media(max-width:600px){
  .collection-pagination{padding:22px 0 8px}
  .page-btn{min-width:36px;height:36px;padding:0 10px;font-size:10px}
  .page-btn.page-prev,.page-btn.page-next{padding:0 14px}
}

/* FOOTER */

footer{position:relative;z-index:5;padding:34px 30px 18px;background:#07152f;color:#dce5f0;border-top:2px solid var(--gold)}
.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.1fr;gap:24px;align-items:start}
.footer-brand{max-width:330px}
.footer-logo{display:flex;align-items:center;gap:10px;height:42px;margin:0 0 8px;font-weight:800}
.footer-logo img{width:100px;height:42px;object-fit:contain;object-position:left center;display:block}
.footer-brand p{margin:0 0 6px;color:#a4adba;font-size:9px;line-height:1.7}
.footer-tagline{color:var(--gold)!important;font-weight:800;margin:0 0 5px!important}
.footer-grid h4{margin:0 0 12px;color:var(--gold);font-size:10px;letter-spacing:.14em}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;align-items:flex-start}
.footer-grid>div>a,.footer-grid>div>span{display:flex;align-items:center;gap:9px;margin-bottom:11px;color:#b8c1ce;font-size:9px;line-height:1.55;transition:.2s}
.footer-grid>div>a:hover{color:#fff;transform:translateX(3px)}
.footer-ntsa{cursor:default}
.footer-grid i{width:16px;color:var(--gold);text-align:center;font-size:13px}
.socials{display:flex;gap:5px;margin-top:7px}
.socials a{width:37.5px;height:37.5px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;font-size:10px;transition:.25s}
.socials a img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.socials a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:13px;border-top:1px solid rgba(242,179,0,.38);color:#9ca7b7;font-size:8px}
.footer-bottom a{color:var(--gold)}
/* QUICK-LINK PAGES (About, FAQs, Privacy) — type scale and spacing follow the home page sections */
.legal-page{padding:22px 0 44px;background:var(--paper);min-height:65vh}
.page-exit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.page-exit{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line2);color:var(--ink);font-size:12px;font-weight:800;box-shadow:var(--shadow-xs);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.page-exit i{color:var(--gold);font-size:12px;transition:transform .2s var(--ease)}
.page-exit:hover{background:var(--ink);color:#fff}
.page-exit:hover i{transform:translateX(-3px)}
.page-crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.page-crumbs a{font-weight:700;color:var(--ink2)}
.page-crumbs a:hover{color:var(--gold)}
.page-crumbs i{font-size:9px;opacity:.6}
.legal-head{max-width:800px;margin:0 auto 22px;text-align:center}
.legal-head>span{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.16em}
.legal-head h1{font-size:clamp(31px,4vw,50px);line-height:1;letter-spacing:-.055em;margin:10px 0}
.legal-head h1 strong{color:var(--gold)}
.legal-head p{color:var(--muted);font-size:12px}
.legal-content{max-width:850px;margin:auto;padding:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.legal-content h2{font-size:14px;font-weight:800;margin:24px 0 8px}
.legal-content h2:first-of-type{margin-top:0}
.legal-content p{color:#59677a;font-size:14px;line-height:1.75;margin-bottom:13px}
.legal-date{margin-top:28px!important;color:var(--muted)!important;font-size:12px!important}
.faq-list{max-width:850px;margin:auto;display:grid;gap:10px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0 20px;box-shadow:var(--shadow-xs)}
.faq-list summary{padding:18px 4px;font-size:14px;font-weight:800;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";float:right;color:var(--gold);font-size:18px;line-height:1}
.faq-list details[open] summary:after{content:"\2212"}
.faq-list details p{padding:0 4px 18px;color:#59677a;font-size:14px;line-height:1.7}
/* About / Our Story */
.story-lead{font-size:16px!important;color:var(--ink)!important;font-weight:600;line-height:1.65!important}
.story-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 26px}
.story-facts div{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.story-facts b{display:block;font-size:26px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.story-facts span{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.story-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.story-actions a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:800}
.story-actions .go-primary{background:var(--gold);color:var(--ink)}
.story-actions .go-primary:hover{background:var(--gold2)}
.story-actions .go-ghost{border:1px solid var(--line2);color:var(--ink)}
.story-actions .go-ghost:hover{background:var(--ink);color:#fff}
@media(max-width:600px){.legal-page{padding:16px 0 40px}.page-exit-bar{margin-bottom:14px}.page-crumbs{display:none}.legal-content{padding:24px 18px;border-radius:var(--radius)}.legal-content p,.faq-list details p{font-size:15px}.story-facts{grid-template-columns:1fr}.story-facts div{display:flex;align-items:center;gap:14px;padding:14px 16px}.story-facts b{flex:0 0 118px;font-size:22px;white-space:nowrap}.story-facts span{margin:0}.footer-legal{gap:10px;flex-wrap:wrap}.footer-bottom{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.page-exit,.page-exit i{transition:none}}


/* LOADER */

#loader{
position:fixed;
inset:0;
z-index:1500;
display:grid;
place-content:center;
text-align:center;
background:#07152f;
transition:.45s;
}

#loader.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loader-mark{
display:flex;
justify-content:center;
gap:6px;
}

.loader-mark span{
width:8px;
height:8px;
border-radius:50%;
background:var(--gold);
animation:load .7s infinite alternate;
}

.loader-mark span:nth-child(2){animation-delay:.15s}
.loader-mark span:nth-child(3){animation-delay:.3s}

.loader-mark+p{
margin-top:16px;
color:#cbd4e0;
font-size:9px;
letter-spacing:.2em;
font-weight:800;
}

@keyframes load{
to{
transform:translateY(-9px);
opacity:.4;
}
}

/* COOKIE */

















/* MPESA */

.mobile-mpesa{
height:44px;
margin:5px 0;
padding:0 12px;
border-radius:13px;
background:var(--gold);
color:var(--ink);
font-size:13px;
font-weight:800;
text-align:left;
}

.mobile-mpesa i{
width:19px;
color:var(--ink);
font-size:14px;
}

.mpesa-modal{
position:fixed;
inset:0;
z-index:1300;
display:none;
align-items:center;
justify-content:center;
padding:16px;
}

.mpesa-modal.open{display:flex}

.mpesa-modal-bg{
position:absolute;
inset:0;
background:rgba(7,21,47,.82);
backdrop-filter:blur(9px);
}

.mpesa-box{
position:relative;
z-index:2;
width:min(500px,100%);
max-height:94vh;
overflow:auto;
padding:30px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:0 35px 100px rgba(0,0,0,.4);
animation:modalIn .3s var(--ease);
}

@keyframes modalIn{
from{opacity:0;transform:translateY(18px) scale(.98)}
to{opacity:1;transform:none}
}

.mpesa-close{
position:absolute;
right:15px;
top:15px;
width:38px;
height:38px;
border-radius:13px;
background:var(--ink);
color:#fff;
}

.mpesa-head{
padding:0 48px 21px 0;
border-bottom:1px solid var(--line);
}

.mpesa-head>span{
color:var(--muted);
font-size:9px;
font-weight:800;
letter-spacing:.16em;
}

.mpesa-head h2{
margin-top:8px;
font-size:26px;
line-height:1.1;
}

.mpesa-head h2 strong{color:var(--gold)}

.mpesa-vehicle{
margin:20px 0;
padding:17px;
border:1px solid var(--line);
border-radius:16px;
background:#f3f6f9;
}

.mpesa-vehicle small{
display:block;
color:var(--muted);
font-size:8px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em;
}

.mpesa-vehicle strong{
display:block;
margin-top:6px;
font-size:14px;
}

.mpesa-box label{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:13px;
color:var(--ink);
font-size:9px;
font-weight:800;
}

.mpesa-box label small{
color:var(--muted);
font-size:8px;
font-weight:500;
}

.mpesa-amount,
.mpesa-phone{
height:50px;
display:flex;
align-items:center;
overflow:hidden;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
}

.mpesa-amount span,
.mpesa-phone span{
height:100%;
display:flex;
align-items:center;
padding:0 12px;
border-right:1px solid var(--line);
white-space:nowrap;
font-size:10px;
font-weight:800;
}

.mpesa-amount input,
.mpesa-phone input{
width:100%;
height:100%;
padding:0 12px;
border:0;
outline:0;
}

.mpesa-presets{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:5px 0 21px;
}

.mpesa-presets button{
height:40px;
border:1px solid var(--line);
border-radius:12px;
background:#f5f7fa;
color:var(--ink);
font-size:9px;
font-weight:800;
}

.mpesa-presets button:hover,
.mpesa-presets button.active{
background:var(--gold);
border-color:var(--gold);
}

.mpesa-steps{
display:grid;
gap:9px;
margin-bottom:21px;
}

.mpesa-steps div{
display:flex;
align-items:center;
gap:10px;
color:var(--muted);
font-size:9px;
}

.mpesa-steps b{
width:27px;
height:27px;
flex:0 0 27px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--ink);
color:var(--gold);
font-size:10px;
}

.mpesa-submit{
width:100%;
height:50px;
border-radius:14px;
background:var(--gold);
color:var(--ink);
font-size:11px;
font-weight:800;
box-shadow:0 10px 24px rgba(242,179,0,.22);
}

.mpesa-submit:hover:not(:disabled){
background:var(--gold2);
transform:translateY(-2px);
}

.mpesa-submit:disabled{
opacity:.55;
cursor:not-allowed;
}

.mpesa-status{
min-height:18px;
margin-top:11px;
text-align:center;
color:var(--ink2);
font-size:9px;
font-weight:700;
}

.mpesa-status.error{color:#b4232f}
.mpesa-status.success{color:#16834b}

.desktop-nav a{font-size:12px}.nav-actions .whatsapp,.nav-actions .nav-order,.nav-actions .mpesa-nav{font-size:12px}.brand span{font-size:13px}.brand small{font-size:8px}.mobile-menu a,.mobile-menu button{font-size:12px}.footer-logo span{font-size:14px}.footer-logo small{font-size:8px}.footer-brand p{font-size:11px}.footer-grid h4{font-size:12px}.footer-grid>div>a,.footer-grid>div>span{font-size:11px}.footer-bottom{font-size:10px}

.collection-toolbar{position:sticky;top:78px;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:14px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.collection-summary{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;font-weight:600;color:var(--muted)}
.collection-summary strong{color:var(--ink);font-weight:800}
.live-badge{display:inline-flex;align-items:center;gap:6px;color:#16a34a;font-size:10px;font-weight:800;letter-spacing:.02em}
.live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);flex:0 0 6px}
.collection-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.toolbar-clear,.sort-control{height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.toolbar-clear{padding:0 14px;font-size:10px;font-weight:800;display:flex;align-items:center;gap:6px}
.toolbar-clear:hover{border-color:rgba(242,179,0,.6);background:#fffbeb}
.sort-control{display:flex;align-items:center;gap:7px;padding:0 9px 0 12px;font-size:10px;font-weight:700;color:var(--muted)}
.sort-control select{height:40px;border:0;outline:0;background:transparent;color:var(--ink);font-size:10px;font-weight:700}
.collection-results-head{display:none}
.collection-filter-btn{display:none}
.body-category small{display:none}

/* ===== MOBILE MASTER STYLESHEET ===== */
/* This CSS file contains all mobile-specific adjustments,
   ensuring a flawless, detailed responsive experience for
   Regional Autoselections Ltd. Optimized for portrait
   and landscape phones. */

/* =============================================
   1. GLOBAL MOBILE RESET & TOUCH TARGETS
   ============================================= */
@media (max-width: 600px) {
  :root {
    --radius-sm: 12px;
    --radius: 16px;
    --radius-lg: 20px;
    --shadow-sm: 0 8px 22px rgba(7,21,47,.1);
    --shadow: 0 15px 40px rgba(7,21,47,.15);
    --shadow-lg: 0 24px 60px rgba(7,21,47,.22);
  }

  html {
    scroll-padding-top: 75px; /* matches mobile header height */
  }

  body{font-size:15px;padding-top:68px}

  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  .wrap {
    width: calc(100% - 32px); /* tighter margin for phones */
  }

  a, button, input, select {
    -webkit-tap-highlight-color: rgba(242,179,0,.2);
  }

  /* =============================================
     2. MOBILE HEADER (STICKY, COMPACT)
     ============================================= */
  .header{height:68px;position:fixed;top:0;left:0;right:0;width:100%;z-index:900;background:rgba(255,255,255,.98);border-bottom:1px solid rgba(7,21,47,.06);box-shadow:0 3px 16px rgba(7,21,47,.04)}

  .nav {
    height: 68px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brand {
    margin-right: auto;
    gap: 6px;
  }

  .brand img {
    width: 74px; /* smaller logo for mobile */
    height: 74px;
  }

  .brand span {
    font-size: 10px;
  }

  .brand small {
    font-size: 6px;
    letter-spacing: .12em;
  }

  /* Hide desktop nav and all header actions except brand & menu */
  .desktop-nav,
  .nav-actions {
    display: none;
  }

  /* Refined hamburger button */
  .menu {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(7,21,47,.06);
    color: var(--ink);
    font-size: 18px;
    transition: .2s;
  }
  .menu:active {
    background: #f5f7fa;
    transform: scale(.96);
  }

  /* =============================================
     3. MOBILE MENU (SLIDE DOWN, FULL WIDTH)
     ============================================= */
  .mobile-menu {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 899;
    display: none;
    background: #fff;
    padding: 18px 20px 35px;
    overflow-y: auto;
    gap: 8px;
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    align-items: start;
    border-top: 1px solid var(--line);
    box-shadow: 0 20px 30px rgba(7,21,47,.1);
    animation: slideDown .25s ease-out;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .mobile-menu.open {
    display: grid;
  }

  .mobile-menu a,
  .mobile-menu button {
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5f7fa;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 1px solid transparent;
    transition: .2s;
  }
  .mobile-menu a:active,
  .mobile-menu button:active {
    background: #fffbeb;
    border-color: var(--gold);
    transform: scale(.98);
  }
  .mobile-menu a i,
  .mobile-menu button i {
    width: 20px;
    font-size: 16px;
  }
  .mobile-menu a.active{background:#f5f7fa;color:var(--ink);border-color:var(--gold);box-shadow:0 4px 12px rgba(7,21,47,.06)}

  /* =============================================
   4. MOBILE HERO SECTION
   ============================================= */

.hero{
  min-height:680px;
  padding:32px 0 44px;
  background:#07152f;
  width:100%;
  overflow:hidden;
  isolation:isolate;
}

.hero-cinema-slides{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-cinema-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s ease,transform 6s ease;
}

.hero-cinema-slide.active{
  opacity:1;
  transform:scale(1);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    180deg,
    rgba(7,21,47,.72) 0%,
    rgba(7,21,47,.50) 48%,
    rgba(7,21,47,.78) 100%
  );
  pointer-events:none;
}

.hero-pattern{
  position:absolute;
  inset:0;
  z-index:2;
  background-size:35px 35px;
  opacity:.08;
  pointer-events:none;
}

.hero-content{
  grid-template-columns:1fr;
  gap:28px;
  padding:0;
  width:min(100%,calc(100% - 32px));
  max-width:1200px;
  margin:0 auto;
  overflow:visible;
}

.hero-copy{
  text-align:left;
  color:#fff;
  width:100%;
  max-width:100%;
  padding:0;
  box-sizing:border-box;
}

.hero h1{
  font-size:clamp(36px,10vw,46px);
  line-height:1;
  letter-spacing:-.04em;
  margin:12px 0 14px;
}

.hero-intro{
  font-size:13px;
  max-width:100%;
  line-height:1.55;
}

.promise{
  font-size:13px;
  margin:8px 0 20px;
}

.hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:22px;
}

.hero-actions .btn{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:0 10px;
  border-radius:13px;
  font-size:10px;
  white-space:normal;
  text-align:center;
}

.hero-actions .btn.primary{
  grid-column:1/-1;
}

.trust{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.trust div{
  min-width:0;
  width:100%;
  padding:9px 10px;
  border-radius:12px;
}

.trust strong{
  font-size:16px;
}

.trust span{
  font-size:8px;
}

.vehicle-search{
  width:100%;
  min-width:0;
  padding:11px;
  border-radius:14px;
  background:rgba(255,255,255,.98);
  box-shadow:0 15px 38px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.2);
}

.search-label{
  font-size:6px;
}

.search-top h3{
  font-size:15px;
  margin:3px 0 11px;
}

.search-input{
  width:100%;
  height:36px;
  min-width:0;
  padding:0 10px;
  border-radius:10px;
}

.search-input input{
  min-width:0;
}

.popular{
  margin:9px 0 11px;
  gap:4px;
}

.popular a{
  padding:5px 7px;
  font-size:6px;
  max-width:100%;
}

.filter-grid{
  grid-template-columns:1fr 1fr;
  gap:6px;
  width:100%;
}

.filter-grid label{
  min-width:0;
  font-size:7px;
  gap:3px;
}

.filter-grid select{
  width:100%;
  min-width:0;
  height:32px;
  padding:0 5px;
  border-radius:9px;
  background:#f9fafc;
  font-size:11px!important;
  text-overflow:ellipsis;
}

.search-btn{
  width:100%;
  height:35px;
  margin-top:8px;
  border-radius:10px;
  font-size:8px;
}


  /* =============================================
     6. MOBILE CATEGORY SECTION
     ============================================= */
  .category-section {
    padding: 18px 0;
    background: #fff;
  }

  .category-heading {
    margin-bottom: 16px;
  }

  .category-heading h2 {
    font-size: 28px;
  }

  .category-more-wrap {
    right: -2px;
  }

  .category-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .category-dropdown {
    width: 190px;
    top: 42px;
    right: 0;
    padding: 6px;
    border-radius: 14px;
  }
  .category-dropdown button {
    padding: 10px 11px;
    font-size: 10px;
  }

/* Two categories per row on mobile — shrunk down */
.body-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.body-category {
  height: 110px;
  border-radius: 14px;
}

.body-category span {
  bottom: 12px;
  left: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 800;
}
.body-category small {
  display: block;
  bottom: 5px;
  left: 10px;
  font-size: 6.5px;
}
  .body-category::after {
    background: linear-gradient(180deg,
      rgba(7,21,47,.1) 0%,
      rgba(7,21,47,.4) 40%,
      rgba(7,21,47,.95) 100%);
  }

  /* =============================================
     7. MOBILE COLLECTION / FILTER LAYOUT
     ============================================= */
  .collection-section {
    padding-top: 14px;
  }

  .collection-toolbar {
    position: sticky;
    top: 68px;
    z-index: 80;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 0;
    background: var(--paper);
  }

  .collection-summary {
    flex: 1 0 100%;
    font-size: 12px;
    text-align: left;
    margin-bottom: 2px;
  }

  .collection-toolbar-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Show mobile filter button */
  .collection-filter-btn {
    display: inline-flex;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-xs);
    order: 1;
  }

  .toolbar-clear {
    height: 42px;
    padding: 0 12px;
    font-size: 10px;
    order: 2;
  }

  .currency-toggle {
    order: 3;
    padding: 3px;
    border-radius: 13px;
  }
  .currency-btn {
    min-width: 44px;
    height: 32px;
    font-size: 10px;
  }
  #usdRateText { font-size: 8px; padding: 0 3px; }

  .sort-control {
    order: 4;
    height: 42px;
    padding: 0 9px 0 10px;
    border-radius: 12px;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .sort-control select {
    height: 40px;
    font-size: 10px;
  }

  /* Mobile collection layout: one column, filter slides over */
  .collection-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .collection-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 83dvh;
    z-index: 1000;
    border-radius: 20px 20px 0 0;
    padding: 22px 18px 28px;
    box-shadow: 0 -12px 40px rgba(7,21,47,.2);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    background: #fff;
  }

  .collection-filter.open {
    transform: translateY(0);
  }

  /* Show close button inside mobile filter */
  .filter-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .1em;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
  }
  .filter-clear-link:active { background: #fffbeb; border-color: rgba(242,179,0,.6); }
  .filter-head-actions { gap: 8px; flex-shrink: 0; }

  #closeFilter {
    display: flex;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--ink);
    align-items: center;
    justify-content: center;
  }

  .filter-head span { font-size: 8px; }
  .filter-head h3 { font-size: 17px; }

  /* Two column filters inside drawer for better mobile density */
  .filter-group {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }

  .check-list {
    grid-template-columns: 1fr 1fr; /* two checkboxes side by side */
    gap: 5px;
  }

  .check-row {
    padding: 7px 6px;
    font-size: 10px;
    border-radius: 10px;
  }
  .check-row input {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  .condition-filter {
    flex-direction: row; /* horizontal chips */
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
  }
  .filter-check {
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 10px;
    gap: 6px;
  }

  /* =============================================
     8. MOBILE VEHICLE CARDS (2 PER ROW)
     ============================================= */
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .collection-card {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(7,21,47,.07);
  }

  .collection-image {
    height: 115px;
  }

  .collection-image .status-badge,
  .collection-image .featured-badge {
    font-size: 6.5px;
    padding: 4px 6px;
    top: 6px;
    left: 6px;
  }
  .collection-image .featured-badge { right: 6px; }

  .collection-info {
    padding: 8px 9px 9px;
  }

  .collection-make {
    font-size: 7px;
    letter-spacing: .05em;
  }

  .collection-info h3 {
    font-size: 12px;
    margin: 3px 0 6px;
    white-space: normal; /* allow 2 lines */
    line-height: 1.25;
  }

  .collection-meta {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-bottom: 6px;
  }
  .collection-meta span {
    font-size: 7px;
    padding: 3px 4px;
    border-radius: 6px;
  }

  .collection-price {
    font-size: 12px;
    word-break: break-word;
  }
  .collection-price small { font-size: 7px; }

  .collection-actions {
    grid-template-columns: 34px 1fr;
    gap: 5px;
    margin-top: 7px;
    padding-top: 7px;
  }
  .collection-actions a {
    height: 30px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 800;
  }

  .card-reserve.is-sold-label {
    height: 30px;
    border-radius: 8px;
    font-size: 8px;
  }

  .no-image { font-size: 20px; }

  /* =============================================
     9. MOBILE FOOTER
     ============================================= */
  footer {
    padding: 28px 16px 20px;
    border-top-width:2px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-brand {
    max-width: 100%;
  }
  .footer-logo img {
    width: 76px;
    height: 76px;
  }

  .footer-grid h4 { font-size: 11px; margin-bottom: 9px; }

  .footer-grid>div>a,
  .footer-grid>div>span {
    font-size: 10px;
    margin-bottom: 10px;
    gap: 7px;
  }
  .footer-grid i { width: 16px; }

  .socials {
    gap: 6px;
    margin-top: 8px;
  }
  .socials a {
    width: 42px;
    height: 42px;
    font-size: 13px;
    border-radius: 50%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: left;
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    font-size: 9px;
  }

  /* =============================================
     10. M-PESA MODAL (MOBILE FULL WIDTH)
     ============================================= */
  .mpesa-modal {
    padding: 10px;
    align-items: flex-end; /* bottom sheet style */
  }
  .mpesa-box {
    width: 100%;
    max-height: 92dvh;
    padding: 22px 16px 28px;
    border-radius: 22px 22px 16px 16px;
    animation: modalInMobile .25s ease-out;
  }
  @keyframes modalInMobile {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .mpesa-close {
    right: 12px;
    top: 12px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .mpesa-head h2 { font-size: 22px; }

  .mpesa-vehicle { margin: 16px 0; padding: 14px; }

  .mpesa-box label { font-size: 10px; }
  .mpesa-amount, .mpesa-phone { height: 48px; }
  .mpesa-amount span, .mpesa-phone span { padding: 0 10px; }

  .mpesa-presets {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .mpesa-presets button { height: 38px; font-size: 9px; }

  .mpesa-steps div { font-size: 9px; gap: 8px; }
  .mpesa-steps b { width: 24px; height: 24px; font-size: 9px; }

  .mpesa-submit { height: 48px; font-size: 12px; }

  /* =============================================
     11. AI CHAT (MOBILE)
     ============================================= */
  .ai-help-btn {
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold);
  }
  .ai-help-btn span { display: none; }
  .ai-help-btn i { font-size: 20px; }

  .ai-chat {
    right: 12px;
    bottom: 74px;
    width: calc(100vw - 24px);
    height: calc(100dvh - 95px);
    max-height: 620px;
    border-radius: 18px;
  }

  .ai-chat-head { padding: 15px 14px; }
  .ai-chat-head b { font-size: 12px; }
  .ai-chat-head small { font-size: 8px; }

  .ai-messages { padding: 12px; }

  .ai-msg {
    max-width: 92%;
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
  .ai-msg.bot { border-bottom-left-radius: 6px; }
  .ai-msg.user { border-bottom-right-radius: 6px; }

  .ai-suggestions button {
    padding: 7px 11px;
    font-size: 8px;
  }

  .ai-form {
    padding: 9px;
  }
  .ai-form textarea {
    padding: 9px;
    font-size: 15px !important;
  }
  .ai-form button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  /* =============================================
     12. COOKIE BANNER (MOBILE)
     ============================================= */
  
  
  
  

  /* =============================================
     13. LOADER (MOBILE)
     ============================================= */
  .loader-mark span { width: 7px; height: 7px; }
  .loader-mark+p { font-size: 8px; }
}

/* =============================================
   14. ADDITIONAL MOBILE TWEAKS (LANDSCAPE)
   ============================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .hero {
    min-height: 520px;
    padding: 30px 0;
  }
  .hero h1 {
    font-size: 40px;
  }
  .hero-content {
    gap: 20px;
  }
  .vehicle-search {
    padding: 11px;
  }
  .filter-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 in a row on landscape */
  }
  .collection-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 per row landscape */
  }
  .body-categories {
    grid-template-columns: repeat(4, 1fr); /* 4 categories on landscape */
  }
}

/* =============================================
   15. HIGH-RES PHONE (>=400px width)
   ============================================= */
@media (min-width: 400px) and (max-width: 600px) {
  .collection-image {
    height: 135px;
  }
  .collection-price {
    font-size: 13px;
  }
  .hero h1 {
    font-size: 46px;
  }
}

.footer-mpesa{display:flex;align-items:center;gap:9px;margin:0 0 11px;padding:0;background:transparent;color:#b8c1ce;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.2s}.footer-mpesa i{width:16px;color:var(--gold);text-align:center;font-size:13px}.footer-mpesa:hover{color:#fff;transform:translateX(3px)}
@media(max-width:600px){.footer-mpesa{display:none}}

.footer-subscribe{margin:8px 0 18px;padding:13px 0 2px;border-top:1px solid rgba(255,255,255,.1)}
.footer-subscribe h5{margin:0 0 5px;color:var(--gold);font-size:9px;letter-spacing:.12em}
.footer-subscribe p{margin:0 0 9px!important;color:#8995a7!important;font-size:8px!important;line-height:1.5!important}
.subscribe-input{display:flex;width:100%;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05)}
.subscribe-input input{min-width:0;flex:1;border:0;outline:0;padding:0 10px;background:transparent;color:#fff;font-size:16px!important}
.subscribe-input input::placeholder{color:#7f8a9a}
.subscribe-input button{width:40px;flex:0 0 40px;background:#000;color:#fff;display:grid;place-items:center}
.subscribe-input button:hover{background:#111}
#subscribeStatus{display:block;margin-top:6px;font-size:8px;color:#9ca7b7}
#subscribeStatus.success{color:#55d68b}
#subscribeStatus.error{color:#ff8585}

.ai-help-btn{
position:fixed;
right:22px;
bottom:72px;
z-index:2000;
height:50px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
border:1px solid rgba(242,179,0,.8);
border-radius:999px;
background:var(--gold);
color:var(--ink);
font-size:11px;
font-weight:800;
box-shadow:0 14px 35px rgba(7,21,47,.25);
transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
animation:aiPulse 3s infinite;
}

.ai-help-btn:hover{
transform:translateY(-3px);
background:var(--gold2);
box-shadow:0 18px 42px rgba(7,21,47,.3);
}

.ai-help-btn:active{
transform:translateY(0);
}

.ai-help-btn i{
font-size:17px;
}

.ai-chat{
position:fixed;
right:22px;
bottom:132px;
z-index:2001;
width:min(410px,calc(100vw - 28px));
height:min(650px,calc(100vh - 150px));
display:none;
grid-template-rows:auto minmax(0,1fr) auto auto;
overflow:hidden;
border:1px solid rgba(7,21,47,.12);
border-radius:22px;
background:#fff;
box-shadow:0 30px 90px rgba(7,21,47,.28);
}

.ai-chat.open{
display:grid;
animation:aiChatIn .22s var(--ease);
}

.ai-chat-head{
min-height:70px;
padding:13px 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:var(--ink);
color:#fff;
border-bottom:1px solid rgba(255,255,255,.08);
}

.ai-identity{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}

.ai-avatar{
width:40px;
height:40px;
flex:0 0 40px;
display:grid;
place-items:center;
border-radius:12px;
background:var(--gold);
color:var(--ink);
box-shadow:0 6px 18px rgba(242,179,0,.2);
}

.ai-avatar i{
font-size:17px;
}

.ai-identity b{
display:block;
font-size:12px;
font-weight:800;
line-height:1.2;
}

.ai-identity small{
display:flex;
align-items:center;
gap:5px;
margin-top:4px;
color:#cbd5e1;
font-size:8px;
line-height:1;
}

.ai-identity small i{
width:6px;
height:6px;
display:inline-block;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 3px rgba(34,197,94,.1);
}

.ai-chat-head>button{
width:34px;
height:34px;
flex:0 0 34px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.1);
border-radius:10px;
background:rgba(255,255,255,.08);
color:#fff;
transition:.2s;
}

.ai-chat-head>button:hover{
background:rgba(255,255,255,.16);
transform:rotate(4deg);
}

.ai-chat-head>button i{
font-size:14px;
}

.ai-messages{
min-height:0;
padding:17px;
display:flex;
flex-direction:column;
overflow-y:auto;
overscroll-behavior:contain;
background:#f5f7fb;
scrollbar-width:thin;
scroll-behavior:auto;
}

.ai-messages::-webkit-scrollbar{
width:6px;
}

.ai-messages::-webkit-scrollbar-track{
background:transparent;
}

.ai-messages::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:999px;
}

.ai-msg{
width:fit-content;
max-width:86%;
margin:0 0 10px;
padding:11px 13px;
border:1px solid transparent;
border-radius:16px;
font-size:11px;
line-height:1.62;
word-break:break-word;
overflow-wrap:anywhere;
animation:aiMessageIn .18s ease;
}

.ai-msg.bot{
align-self:flex-start;
background:#fff;
color:var(--ink);
border-color:#e5e9ef;
border-bottom-left-radius:5px;
box-shadow:0 4px 14px rgba(7,21,47,.055);
}

.ai-msg.user{
align-self:flex-end;
background:var(--ink2);
color:#fff;
border-bottom-right-radius:5px;
box-shadow:0 4px 12px rgba(16,42,91,.14);
}

.ai-msg p{
margin:0 0 8px;
}

.ai-msg p:last-child{
margin-bottom:0;
}

.ai-msg strong{
font-weight:800;
color:inherit;
}

.ai-msg h4{
margin:2px 0 8px;
font-size:12px;
line-height:1.4;
color:inherit;
}

.ai-msg ul,
.ai-msg ol{
margin:7px 0 9px;
padding-left:18px;
}

.ai-msg li{
margin:4px 0;
}

.ai-msg code{
padding:2px 5px;
border-radius:5px;
background:rgba(7,21,47,.07);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.9em;
}

.ai-msg.user code{
background:rgba(255,255,255,.13);
}

.ai-msg.thinking{
padding:10px 12px;
background:#fff;
border-color:#e5e9ef;
}

.ai-thinking{
display:flex;
align-items:center;
gap:8px;
color:#718096;
font-size:9px;
font-weight:600;
white-space:nowrap;
}

.ai-thinking span{
position:relative;
}

.ai-thinking i{
width:42px;
height:4px;
display:block;
overflow:hidden;
position:relative;
border-radius:999px;
background:#e9edf2;
}

.ai-thinking i::after{
content:"";
position:absolute;
top:0;
left:-35%;
width:35%;
height:100%;
border-radius:999px;
background:var(--gold);
animation:aiThinking 1.15s ease-in-out infinite;
}

.ai-suggestions{
min-height:51px;
display:flex;
align-items:center;
gap:7px;
padding:9px 12px;
overflow-x:auto;
overflow-y:hidden;
border-top:1px solid var(--line);
background:#fff;
scrollbar-width:none;
}

.ai-suggestions::-webkit-scrollbar{
display:none;
}

.ai-suggestions.hidden{
display:none;
}

.ai-suggestions button{
flex:0 0 auto;
height:30px;
padding:0 11px;
border:1px solid #dfe4ea;
border-radius:999px;
background:#fff;
color:var(--ink2);
font-size:8px;
font-weight:700;
white-space:nowrap;
transition:.18s;
}

.ai-suggestions button:hover:not(:disabled){
border-color:var(--gold);
background:#fffbeb;
transform:translateY(-1px);
}

.ai-suggestions button:disabled{
opacity:.5;
cursor:not-allowed;
}

.ai-form{
min-height:66px;
display:flex;
align-items:flex-end;
gap:8px;
padding:10px;
border-top:1px solid var(--line);
background:#fff;
}

.ai-form textarea{
width:100%;
min-width:0;
height:42px;
min-height:42px;
max-height:120px;
padding:11px 12px;
border:1px solid #dfe4ea;
border-radius:13px;
outline:0;
resize:none;
overflow-y:auto;
background:#fff;
color:var(--ink);
font-size:16px!important;
line-height:1.35;
transition:border-color .18s,box-shadow .18s;
}

.ai-form textarea::placeholder{
color:#9aa5b4;
}

.ai-form textarea:focus{
border-color:rgba(242,179,0,.75);
box-shadow:0 0 0 3px rgba(242,179,0,.1);
}

.ai-form textarea:disabled{
background:#f5f7fa;
cursor:not-allowed;
}

.ai-form>button{
width:42px;
height:42px;
flex:0 0 42px;
display:grid;
place-items:center;
border:1px solid var(--gold);
border-radius:13px;
background:var(--gold);
color:var(--ink);
transition:transform .18s,background .18s,opacity .18s;
}

.ai-form>button:hover:not(:disabled){
background:var(--gold2);
transform:translateY(-2px);
}

.ai-form>button:active:not(:disabled){
transform:translateY(0);
}

.ai-form>button:disabled{
opacity:.45;
cursor:not-allowed;
transform:none;
}

.ai-messages.user-scrolled{
scroll-behavior:auto;
}

@keyframes aiChatIn{
from{
opacity:0;
transform:translateY(12px) scale(.985);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes aiMessageIn{
from{
opacity:0;
transform:translateY(4px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes aiThinking{
0%{
left:-35%;
}
50%{
left:100%;
}
100%{
left:100%;
}
}

@keyframes aiPulse{
0%,100%{
box-shadow:0 14px 35px rgba(7,21,47,.25);
}
50%{
box-shadow:0 14px 40px rgba(242,179,0,.38);
}
}

@media(max-width:600px){

.ai-help-btn{
right:14px;
bottom:14px;
width:52px;
height:52px;
padding:0;
border-radius:50%;
}

.ai-help-btn span{
display:none;
}

.ai-help-btn i{
font-size:19px;
}

.ai-chat{
right:12px;
bottom:76px;
width:calc(100vw - 24px);
height:calc(100dvh - 88px);
max-height:none;
border-radius:19px;
}

.ai-chat-head{
min-height:64px;
padding:11px 12px;
}

.ai-avatar{
width:36px;
height:36px;
flex-basis:36px;
border-radius:10px;
}

.ai-avatar i{
font-size:15px;
}

.ai-identity b{
font-size:11px;
}

.ai-identity small{
font-size:7px;
}

.ai-chat-head>button{
width:32px;
height:32px;
flex-basis:32px;
}

.ai-messages{
padding:12px;
}

.ai-msg{
max-width:91%;
padding:10px 12px;
font-size:12px;
line-height:1.58;
}

.ai-msg h4{
font-size:12px;
}

.ai-suggestions{
padding:8px 10px;
}

.ai-suggestions button{
height:29px;
padding:0 10px;
font-size:8px;
}

.ai-form{
min-height:61px;
padding:8px;
}

.ai-form textarea{
height:42px;
min-height:42px;
font-size:16px!important;
}

.ai-form>button{
width:40px;
height:40px;
flex-basis:40px;
border-radius:12px;
}

}

.share-action{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:0 2px;background:none;color:#a4adba;font-size:10px;font-weight:800;letter-spacing:.03em;position:relative;transition:.25s}
.share-action i{color:var(--gold);font-size:13px}
.share-action span{position:relative}
.share-action span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.25s}
.share-action:hover{color:#fff;transform:translateY(-2px)}
.share-action:hover span::after{transform:scaleX(1)}

#footerShare{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  height:50px;
  padding:0 8px;
  margin:0;
  border:0;
  background:transparent;
  color:#a4adba;
  cursor:pointer;
  font:inherit;
  font-size:10px;
  font-weight:800;
  pointer-events:auto;
  position:relative;
  z-index:20;
}
#footerShare i{
  width:auto!important;
  color:var(--gold)!important;
  font-size:14px!important;
}
#footerShare:hover{color:#fff;transform:translateY(-2px)}

.collection-image .featured-badge{
  display:inline-flex!important;
  width:max-content!important;
  max-width:max-content!important;
  white-space:nowrap!important;
  flex:none!important;
}


/* On wider screens, lay the four fields out in a single
   compact row instead of a 2x2 block, so the whole search
   card stays short and fits without scrolling. */
@media(min-width:601px){
  .vehicle-search .filter-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Force both columns to actually respect the card width */
.filter-grid{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px;
}

.filter-grid label{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  min-width:0;
  max-width:100%;
}

.filter-grid select{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Search input must also stay inside the card */
.search-input{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.search-input input{
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Popular buttons cannot force the card wider */
.popular{
  width:100%;
  min-width:0;
  max-width:100%;
}

.popular a{
  max-width:100%;
  min-width:0;
}

/* ============================================================
   GENERAL ENQUIRY (F6) — PUBLIC SITE LAYER
   Append to the end of style.css (the public one).
   Uses the site's own tokens: --ink #07152f, --gold #f2b300,
   Inter, rounded radii.
   ============================================================ */

/* ---------- 1. TRIGGERS ---------- */

.enq-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
height:42px;
padding:0 14px;
border:1px solid var(--ink2);
border-radius:12px;
background:var(--ink2);
color:#fff;
font-size:12px;
font-weight:800;
white-space:nowrap;
transition:.22s var(--ease);
}

.enq-trigger i{color:var(--gold);font-size:14px;transition:.22s var(--ease)}

.enq-trigger:hover{
background:var(--gold);
border-color:var(--gold);
color:var(--ink);
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(242,179,0,.28);
}

.enq-trigger:hover i{color:var(--ink)}

/* nav row: sits between Contact and M-PESA without crowding */
@media(max-width:1150px) and (min-width:601px){
.nav-actions .enq-trigger span{display:none}
.nav-actions .enq-trigger{width:42px;padding:0}
}

/* mobile drawer row — the drawer is a 2-column grid, so span both */
.mobile-menu .enq-nav-link{
grid-column:1/-1;
display:flex;
align-items:center;
justify-content:flex-start;
gap:9px;
min-height:48px;
padding:12px 14px;
border:1px solid var(--gold);
border-radius:14px;
background:var(--gold);
color:var(--ink);
font-size:12px;
font-weight:800;
text-align:left;
}

.mobile-menu .enq-nav-link i{width:20px;color:var(--ink);font-size:16px}
.mobile-menu .enq-nav-link:active{transform:scale(.98)}

/* footer entry — .footer-mpesa is hidden on phones, this one is not */
@media(max-width:600px){
.footer-mpesa[data-enquiry]{display:flex}
}

/* ---------- 2. FLOATING BUTTON ---------- */
/* Stacks directly above #aiHelpBtn (right:22px, bottom:72px, 50px tall) */

.enq-fab{
position:fixed;
right:22px;
bottom:132px;
z-index:1999;
height:50px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
border:1px solid var(--ink2);
border-radius:999px;
background:var(--ink2);
color:#fff;
font-size:11px;
font-weight:800;
box-shadow:0 14px 35px rgba(7,21,47,.3);
transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),opacity .2s;
}

.enq-fab i{color:var(--gold);font-size:17px;transition:.2s var(--ease)}

.enq-fab:hover{
background:var(--gold);
border-color:var(--gold);
color:var(--ink);
transform:translateY(-3px);
box-shadow:0 18px 42px rgba(242,179,0,.34);
}

.enq-fab:hover i{color:var(--ink)}
.enq-fab:active{transform:translateY(0)}

/* the chat panel opens over this space — get out of its way */
body:has(.ai-chat.open) .enq-fab{
opacity:0;
visibility:hidden;
pointer-events:none;
}

/* ---------- 3. MODAL SHELL ---------- */

body:has(.enq-modal.open){overflow:hidden}

.enq-modal{
position:fixed;
inset:0;
z-index:2100;
display:none;
align-items:center;
justify-content:center;
padding:16px;
background:rgba(7,21,47,.82);
backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);
}

.enq-modal.open{display:flex;animation:enqFade .2s var(--ease)}

@keyframes enqFade{from{opacity:0}to{opacity:1}}

.enq-dialog{
position:relative;
width:min(560px,100%);
max-height:min(92dvh,780px);
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:0 35px 100px rgba(0,0,0,.4);
animation:enqRise .3s var(--ease);
}

@keyframes enqRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

.enq-head{
flex-shrink:0;
padding:26px 60px 20px 26px;
border-bottom:1px solid var(--line);
}

.enq-head .eyebrow{
display:flex;
align-items:center;
gap:8px;
color:var(--muted);
font-size:9px;
font-weight:800;
letter-spacing:.16em;
}

.enq-head .eyebrow b{width:22px;height:2px;background:var(--gold);flex:0 0 22px}

.enq-head h2{margin-top:9px;font-size:26px;line-height:1.1;letter-spacing:-.03em}
.enq-head p{margin-top:7px;color:var(--muted);font-size:11px;line-height:1.6;max-width:46ch}

.enq-close{
position:absolute;
right:15px;
top:15px;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:13px;
background:var(--ink);
color:#fff;
transition:.2s;
}

.enq-close:hover{background:#b4232f}

.enq-body{
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
padding:22px 26px;
}

/* ---------- 4. FIELDS ---------- */

.enq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.enq-field.wide,.enq-block{grid-column:1/-1}

.enq-field>label,
.enq-block>label{
display:block;
margin-bottom:8px;
color:var(--ink);
font-size:9px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}

.enq-field>label .req{color:var(--gold);margin-left:3px}
.enq-field>label .opt{
margin-left:6px;
color:var(--muted);
font-weight:500;
letter-spacing:0;
text-transform:none;
}

.enq-field input,
.enq-field textarea,
.enq-field select{
width:100%;
min-height:48px;
padding:13px 14px;
border:1px solid var(--line);
border-radius:14px;
background:#f8fafc;
color:var(--ink);
outline:0;
transition:.2s;
}

.enq-field textarea{min-height:108px;resize:vertical;line-height:1.6}
.enq-field input::placeholder,.enq-field textarea::placeholder{color:#9aa5b4}

.enq-field input:focus,
.enq-field textarea:focus,
.enq-field select:focus{
border-color:rgba(242,179,0,.7);
background:#fff;
box-shadow:0 0 0 4px rgba(242,179,0,.12);
}

.enq-field.invalid input,
.enq-field.invalid textarea{
border-color:#dc354566;
background:#fff6f6;
box-shadow:none;
}

.enq-err{display:none;margin-top:6px;color:#b4232f;font-size:9px;font-weight:800}
.enq-field.invalid .enq-err{display:block}
.enq-hint{margin-top:6px;color:var(--muted);font-size:9px}

.enq-alert{
display:none;
margin-bottom:16px;
padding:13px 14px;
border:1px solid #dc354533;
border-radius:14px;
background:#fff6f6;
color:#b4232f;
font-size:10px;
line-height:1.6;
}

.enq-alert.active{display:block}

/* ---------- 5. PREFERRED CONTACT ---------- */

.enq-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}

.enq-seg label{
position:relative;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
color:#536174;
font-size:10px;
font-weight:800;
cursor:pointer;
transition:.2s;
}

.enq-seg label i{font-size:13px;color:var(--gold)}
.enq-seg input{position:absolute;opacity:0;width:0;height:0}
.enq-seg label:hover{border-color:rgba(242,179,0,.45);background:#fffbeb}

.enq-seg label:has(input:checked){
border-color:#eab308;
background:#fffbeb;
color:#92400e;
}

.enq-seg label:has(input:focus-visible){outline:3px solid rgba(242,179,0,.35);outline-offset:3px}

/* ---------- 6. CATEGORIES ---------- */

.enq-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:7px}

.enq-chip{
position:relative;
min-height:44px;
display:flex;
align-items:center;
gap:9px;
padding:0 12px;
border:1px solid var(--line);
border-radius:11px;
background:#fff;
color:#536174;
font-size:10px;
font-weight:700;
cursor:pointer;
transition:.2s;
}

.enq-chip input{position:absolute;opacity:0;width:0;height:0}

.enq-chip::before{
content:"";
width:9px;
height:9px;
flex:0 0 9px;
border:1px solid #b6c1cf;
border-radius:50%;
transition:.2s;
}

.enq-chip:hover{border-color:rgba(242,179,0,.45);background:#fffbeb}

.enq-chip:has(input:checked){
border-color:#eab308;
background:#fffbeb;
color:#92400e;
font-weight:800;
}

.enq-chip:has(input:checked)::before{background:var(--gold);border-color:var(--gold)}
.enq-chip:has(input:focus-visible){outline:3px solid rgba(242,179,0,.35);outline-offset:3px}

/* ---------- 7. FOOTER & SUBMIT ---------- */

.enq-foot{
flex-shrink:0;
display:flex;
align-items:center;
gap:14px;
padding:16px 26px calc(16px + env(safe-area-inset-bottom));
border-top:1px solid var(--line);
background:#fff;
}

.enq-foot p{flex:1;color:var(--muted);font-size:9px;line-height:1.5}

.enq-submit{
flex-shrink:0;
height:50px;
padding:0 24px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid var(--gold);
border-radius:14px;
background:var(--gold);
color:var(--ink);
font-size:11px;
font-weight:800;
box-shadow:0 10px 24px rgba(242,179,0,.22);
transition:.25s var(--ease);
}

.enq-submit:hover:not([disabled]){background:var(--gold2);transform:translateY(-2px)}
.enq-submit[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.enq-submit .spin{display:none}
.enq-submit.busy .label,.enq-submit.busy .arrow{display:none}
.enq-submit.busy .spin{display:inline-block;animation:enqSpin .8s linear infinite}

@keyframes enqSpin{to{transform:rotate(360deg)}}

.enq-ghost{
height:46px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
color:var(--ink);
font-size:10px;
font-weight:800;
transition:.2s;
}

.enq-ghost:hover{border-color:rgba(242,179,0,.6);background:#fffbeb}

/* ---------- 8. SUCCESS ---------- */

.enq-done{display:none;padding:44px 28px 38px;text-align:center}
.enq-modal.done .enq-body,.enq-modal.done .enq-foot{display:none}
.enq-modal.done .enq-done{display:block}

.enq-done .tick{
width:62px;
height:62px;
margin:0 auto 16px;
display:grid;
place-items:center;
border-radius:50%;
background:#eaf8f0;
color:#16864f;
font-size:26px;
}

.enq-done h3{font-size:22px;letter-spacing:-.03em}
.enq-done p{margin:9px auto 0;max-width:38ch;color:var(--muted);font-size:11px;line-height:1.65}

.enq-ref{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:20px;
padding:11px 16px;
border:1px dashed var(--gold);
border-radius:14px;
background:#fffbeb;
}

.enq-ref small{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em}
.enq-ref strong{font-size:14px;letter-spacing:.02em}
.enq-done .enq-ghost{margin-top:22px}

/* ---------- 9. TOAST ---------- */

.enq-toast{
position:fixed;
left:50%;
bottom:28px;
transform:translate(-50%,16px);
z-index:2200;
display:flex;
align-items:center;
gap:10px;
max-width:min(420px,calc(100% - 32px));
padding:14px 18px;
border-radius:16px;
background:var(--ink);
color:#fff;
font-size:10px;
font-weight:700;
box-shadow:var(--shadow-lg);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.22s var(--ease);
}

.enq-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.enq-toast i{flex-shrink:0;color:var(--gold);font-size:14px}
.enq-toast.ok i{color:#55d68b}
.enq-toast.bad i{color:#ff8585}

/* ---------- 10. PHONES ---------- */

@media(max-width:600px){

/* icon-only circle, stacked above the 52px AI button at bottom:14px */
.enq-fab{
right:14px;
bottom:76px;
width:52px;
height:52px;
padding:0;
border-radius:50%;
}

.enq-fab .fab-label{display:none}
.enq-fab i{font-size:19px}

/* the cookie banner owns the bottom of the screen until dismissed */


.enq-modal{padding:10px;align-items:flex-end}

.enq-dialog{
width:100%;
max-height:94dvh;
border-radius:22px 22px 16px 16px;
animation:enqSheet .26s ease-out;
}

@keyframes enqSheet{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}

.enq-head{padding:22px 54px 16px 18px}
.enq-head h2{font-size:22px}
.enq-close{right:12px;top:12px;width:36px;height:36px;border-radius:12px}

.enq-body{padding:18px}
.enq-grid{grid-template-columns:1fr;gap:14px}
.enq-cats{grid-template-columns:repeat(2,minmax(0,1fr))}

.enq-foot{
flex-direction:column-reverse;
align-items:stretch;
gap:10px;
padding:14px 18px calc(14px + env(safe-area-inset-bottom));
}

.enq-foot p{text-align:center}
.enq-submit{width:100%;height:48px;font-size:12px}

.enq-toast{bottom:calc(14px + env(safe-area-inset-bottom));font-size:10px}

}

@media(max-width:400px){
.enq-cats{grid-template-columns:1fr}
.enq-seg{grid-template-columns:1fr;gap:6px}
.enq-seg label{justify-content:flex-start;padding:0 14px}
}

/* ---------- 11. MOTION / PRINT ---------- */

@media(prefers-reduced-motion:reduce){
.enq-modal,.enq-dialog,.enq-toast,.enq-fab{animation:none!important;transition:none!important}
}

@media print{
.enq-fab,.enq-modal,.enq-toast,.enq-trigger,.enq-nav-link{display:none!important}
}

@media(min-width:901px){

  .hero{
    align-items:flex-end;
  }

  .hero-content{
    padding-bottom:48px;
  }

  .vehicle-search{
    justify-self:center;
    width:min(920px,100%);
    margin:28px auto 0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 7px 7px 18px;
    border-radius:999px;
  }

  .search-top{
    flex:0 0 auto;
    padding-right:12px;
    border-right:1px solid var(--line);
  }

  .search-top .search-label{display:none}

  .search-top h3{
    margin:0;
    font-size:12px;
    white-space:nowrap;
  }

  .popular{display:none}

  .search-input{
    flex:1 1 150px;
    min-width:0;
    height:40px;
    border-radius:999px;
  }

  .filter-grid{
    display:flex;
    flex:2.6 1 460px;
    min-width:0;
    gap:6px;
  }

  .filter-grid label{
    flex:1 1 0;
    min-width:0;
    font-size:0;
    gap:0;
  }

  .filter-grid select{
    height:40px;
    padding:0 8px 0 12px;
    border-radius:999px;
    background:#f8fafc;
    color:var(--ink);
    font-size:12px!important;
    font-weight:600;
    text-overflow:ellipsis;
  }

  .filter-grid select option{
    font-size:13px;
    font-weight:500;
  }

  .search-btn{
    flex:0 0 auto;
    width:auto;
    min-width:130px;
    height:40px;
    margin-top:0;
    padding:0 20px;
    border-radius:999px;
    font-size:10px;
  }

}


.filter-side-actions .currency-toggle{
  width:100%;
  justify-content:flex-start;
  flex-wrap:nowrap;
}

.filter-side-actions #usdRateText{
  width:auto;
  flex:1 1 auto;
  text-align:left;
  padding:0 0 0 8px;
  white-space:nowrap;
}

.body-category .body-category-count{
  position:absolute;
  left:auto;
  right:12px;
  bottom:12px;
  z-index:3;
  padding:3px 9px;
  border-radius:999px;
  background:var(--gold);
  color:var(--ink);
  font-size:9px;
  font-weight:800;
  line-height:1.5;
  text-shadow:none;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(7,21,47,.25);
}

@media(max-width:600px){
  .body-category .body-category-count{
    right:8px;
    bottom:8px;
    padding:2px 7px;
    font-size:7px;
  }
}

.hero{
  background-color:#07152f;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.hero-cinema-slides{
  z-index:0;
}

/* Base state — hidden, slightly zoomed (invisible until active). */
.hero-cinema-slide{
  z-index:0;
  transition:opacity 1.4s ease,transform 6s ease;
  will-change:opacity,transform;
}

/* Incoming slide: fades in above the outgoing one. */
.hero-cinema-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:2;
  transition:opacity 1.4s ease,transform 6s ease;
}

.hero-cinema-slide.leaving{
  opacity:1;
  transform:scale(1);
  z-index:1;
  transition:none;
}

.footer-subscribe .subscribe-input{
  max-width:240px;   /* ← adjust to taste */
}

@media(max-width:600px){
  /* On phones the footer stacks, so let it use the full width. */
  .footer-subscribe .subscribe-input{
    max-width:100%;
  }
}

.body-category > span:not(.body-category-count){
  top:12px;
  bottom:auto;
  left:12px;
  right:12px;
  font-size:13px;
  line-height:1.15;
}

.body-category::after{
  background:linear-gradient(
    180deg,
    rgba(7,21,47,.82) 0%,
    rgba(7,21,47,.30) 38%,
    rgba(7,21,47,.08) 68%,
    rgba(7,21,47,.55) 100%
  );
}

@media(max-width:600px){
  .body-category > span:not(.body-category-count){
    top:9px;
    left:9px;
    right:9px;
    bottom:auto;
    font-size:11px;
  }
}

@media(min-width:1200px){
  .hero{
    min-height:calc(100vh - 78px);
    min-height:calc(100dvh - 78px);
  }

  .hero-content{
    align-self:stretch;
    margin-top:0;
    margin-bottom:0;
    grid-template-rows:1fr auto;
    padding-bottom:56px;
  }

  /* keeps the bar clear of the floating buttons on 1200–1360px screens */
  .vehicle-search{
    max-width:calc(100vw - 360px);
  }
}

@media(max-width:600px){
  .hero-overlay{transition:opacity 1.4s ease .25s}
  .hero.is-revealed .hero-overlay{opacity:.5}

  .hero-copy h1,
  .hero-copy p{text-shadow:0 2px 14px rgba(7,21,47,.55)}
}

@media(max-width:600px) and (prefers-reduced-motion:reduce){
  .hero-overlay{transition:none}
}

/* Empty categories: plain gold text instead of the pill */
.body-category .body-category-count.coming-soon{
  background:transparent;
  box-shadow:none;
  padding:0;
  color:var(--gold);
  font-size:10px;
  letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}

@media(max-width:600px){
  .body-category .body-category-count.coming-soon{
    right:9px;
    bottom:9px;
    padding:0;
    font-size:8px;
  }
}

.header{
  background:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ---------- MOBILE: ON SHIP BEATS FEATURED ----------
   Featured cars are always listed first (see getFeedCars in script.js).
   On phones, a featured car that is also On Ship shows only the On Ship
   badge instead of the FEATURED badge, but keeps its place at the top.
   Tablet and desktop are untouched and keep showing both badges. */
@media(max-width:600px){
  .collection-card.is-on-ship .collection-image .featured-badge{display:none!important}
}
/* INNER-PAGE HERO DRIFT
   Very slow, barely noticeable pan-and-zoom on the hero image of every
   page except home. Home keeps its own cinema slideshow untouched.
   Starts slightly scaled so the drift never exposes the image edge. */
@keyframes heroDrift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.08) translate3d(-1%,-.6%,0)}
}
.access-hero:before,
.diaspora-hero-bg,
.finance-hero-bg,
.import-hero-bg,
.insurance-hero-bg,
.sell-hero-bg,
.trade-hero-bg{
  transform-origin:50% 35%;
  animation:heroDrift 45s ease-in-out infinite alternate;
  will-change:transform;
  backface-visibility:hidden;
}
@media(prefers-reduced-motion:reduce){
  .access-hero:before,
  .diaspora-hero-bg,
  .finance-hero-bg,
  .import-hero-bg,
  .insurance-hero-bg,
  .sell-hero-bg,
  .trade-hero-bg{animation:none;transform:none}
}

/* =========================================================
   STACKING ORDER (FINAL — keep at the end of this file)
   header 900 · loader 1500 · floating chat/enquiry 1999–2001
   modals (M-Pesa, Banking) 3000 · cookie consent 4000
   ========================================================= */

.mpesa-modal{z-index:3000}

/* floating buttons step aside while a modal or the cookie panel is up */

body:has(.mpesa-modal.open) .ai-help-btn,body:has(.mpesa-modal.open) .enq-fab{
opacity:0;
visibility:hidden;
pointer-events:none;
}

/* ---------- BANKING MODAL: centred on every screen ---------- */

.banking-modal,
.banking-modal.open{align-items:center;justify-content:center}

.banking-box{
width:min(440px,100%);
margin:auto;
}

.banking-soon{
margin:22px 0 4px;
padding:34px 20px;
border:1px solid var(--line);
border-radius:18px;
background:#f3f6f9;
text-align:center;
}

.banking-soon i{
display:block;
margin-bottom:14px;
color:var(--gold);
font-size:34px;
}

.banking-soon strong{
display:block;
margin-bottom:8px;
color:var(--ink);
font-size:18px;
font-weight:800;
}

.banking-soon p{
max-width:30ch;
margin:0 auto;
color:var(--muted);
font-size:13px;
line-height:1.6;
}

@media(max-width:600px){
.banking-modal,.banking-modal.open{padding:16px;align-items:center}
.banking-box{
width:100%;
max-width:400px;
padding:24px 18px 22px;
border-radius:22px;
animation:bankingIn .22s ease-out;
}
.banking-soon{padding:28px 16px}
}

@keyframes bankingIn{
from{opacity:0;transform:scale(.96)}
to{opacity:1;transform:none}
}

/* ---------- COOKIE CONSENT (forced choice) ---------- */






















































/* =========================================================
   HERO VIDEO REEL  (js/hero-videos.js)
   Only styles elements the reel script injects, plus
   .hero-content.has-reel, which the script adds on desktop
   when there is at least one live video. Without videos the
   hero is untouched.
   ========================================================= */

.hero-reel{
  position:relative;
  z-index:3;
  min-width:0;
  color:#fff;
}

/* ---------- Stage: one frame that reshapes to each clip ---------- */
.hero-reel.is-stage{
  --bw:min(calc(100vw - 32px),520px);   /* widest frame (landscape) */
  --bh:300px;                           /* tallest frame (portrait) */
  width:100%;
}

.hero-reel .reel-box{
  width:var(--bw);
  height:var(--bh);
  max-width:100%;
  margin:0 auto;
  display:grid;
  place-items:center;
}

.hero-reel .reel-frame{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#0b1b33;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transition:width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1);
}

.hero-reel .reel-frame.is-landscape{width:var(--bw);height:calc(var(--bw) * 9 / 16)}
.hero-reel .reel-frame.is-portrait{height:var(--bh);width:calc(var(--bh) * 9 / 16)}
.hero-reel .reel-frame.is-square{
  width:min(var(--bw),calc(var(--bh) * .82));
  height:min(var(--bw),calc(var(--bh) * .82));
}

.hero-reel .reel-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#0b1b33;
  transition:opacity .28s ease;
}

.hero-reel .reel-frame.is-swapping .reel-video{opacity:0}

/* Bottom scrim so the caption reads on bright footage */
.hero-reel .reel-frame::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(7,21,47,.72));
  pointer-events:none;
}

/* Progress rail: one segment per clip, current one fills */
.hero-reel .reel-rail{
  position:absolute;
  top:8px;left:10px;right:10px;
  z-index:2;
  display:flex;
  gap:4px;
}

.hero-reel .reel-rail button{
  flex:1;
  min-width:0;
  height:14px;
  padding:0;
  display:flex;
  align-items:center;
  background:none;
  border:0;
  cursor:pointer;
}

.hero-reel .reel-rail span{
  display:block;
  width:100%;
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.3);
  overflow:hidden;
}

.hero-reel .reel-rail i{
  display:block;
  height:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
}

/* Controls sit top-right, clear of the floating Enquiry / AI buttons */
.hero-reel .reel-controls{
  position:absolute;
  top:28px;right:10px;
  z-index:2;
  display:flex;
  gap:6px;
}

.hero-reel .reel-controls button,
.hero-reel .reel-card-open{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(7,21,47,.45);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:13px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}

.hero-reel .reel-controls button:hover,
.hero-reel .reel-card-open:hover{
  background:rgba(7,21,47,.7);
  border-color:var(--gold);
}

.hero-reel button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.hero-reel .reel-start{
  position:absolute;
  inset:0;
  margin:auto;
  z-index:2;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-size:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  cursor:pointer;
}

.hero-reel .reel-start[hidden]{display:none}
.hero-reel .reel-start i{margin-left:3px}

.hero-reel .reel-caption{
  position:absolute;
  left:14px;right:14px;bottom:12px;
  z-index:2;
  margin:0;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}

.hero-reel .reel-caption[hidden]{display:none}

/* ---------- Desktop: reel takes the right column ---------- */
@media(min-width:1100px){
  .hero-content.has-reel{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(28px,3vw,56px);
  }

  .hero-content.has-reel > :not(.hero-reel):not(.vehicle-search){
    grid-column:1;
  }

  .hero-content.has-reel > .hero-reel{
    grid-column:2;
    grid-row:1;
    align-self:center;
    justify-self:end;
  }

  .hero-content.has-reel > .vehicle-search{
    grid-column:1 / -1;
  }

  .hero-reel.is-stage.is-desktop{
    --bw:clamp(400px,30vw,580px);
    --bh:clamp(330px,min(52vh,calc(100dvh - 320px)),520px);
    width:var(--bw);
  }
}

/* ---------- Phones / tablets: swipe row ---------- */
.hero-reel.is-strip{
  --ch:230px;                /* row height = portrait card height */
  margin:0 -16px;
}

.hero-reel .reel-track{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--ch);
  padding:0 16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding:0 16px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.hero-reel .reel-track::-webkit-scrollbar{display:none}

.hero-reel .reel-card{
  position:relative;
  flex:none;
  margin:0;
  overflow:hidden;
  border-radius:14px;
  background:#0b1b33;
  border:1px solid rgba(255,255,255,.16);
  scroll-snap-align:center;
  opacity:.7;
  transition:opacity .3s ease,border-color .3s ease;
}

.hero-reel .reel-card.is-current{
  opacity:1;
  border-color:rgba(242,179,0,.7);
}

.hero-reel .reel-card.is-portrait{height:var(--ch);width:calc(var(--ch) * 9 / 16)}
.hero-reel .reel-card.is-landscape{width:min(78vw,400px);height:calc(min(78vw,400px) * 9 / 16)}
.hero-reel .reel-card.is-square{width:calc(var(--ch) * .82);height:calc(var(--ch) * .82)}

.hero-reel .reel-card video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:pointer;
}

.hero-reel .reel-card figcaption{
  position:absolute;
  left:8px;right:44px;bottom:8px;
  font-size:10.5px;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
  pointer-events:none;
}

.hero-reel .reel-card-open{
  position:absolute;
  right:6px;bottom:6px;
  width:32px;
  height:32px;
  font-size:11px;
}

.hero-reel .reel-count{
  margin:8px 16px 0;
  font-size:11px;
  color:#d2d9e3;
}

.hero-reel .reel-count b{color:var(--gold)}

@media(min-width:601px) and (max-width:1099px){
  .hero-reel.is-strip{--ch:260px}
}

/* ---------- Full-screen viewer ---------- */
.reel-lightbox{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:max(56px,env(safe-area-inset-top,0px)) 16px max(24px,env(safe-area-inset-bottom,0px));
  background:rgba(4,11,24,.94);
  animation:reelFade .2s ease;
}

.reel-lightbox .lb-stage{
  margin:0;
  display:grid;
  gap:10px;
  justify-items:center;
  max-width:100%;
}

.reel-lightbox video{
  display:block;
  max-width:min(100%,1200px);
  max-height:calc(100dvh - 140px);
  border-radius:12px;
  background:#000;
}

.reel-lightbox[data-shape="portrait"] video{max-width:min(100%,480px)}

.reel-lightbox figcaption{
  font-size:13px;
  font-weight:700;
  color:#e1e8f1;
  text-align:center;
}

.reel-lightbox figcaption[hidden]{display:none}

.reel-lightbox .lb-close,
.reel-lightbox .lb-nav{
  position:absolute;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:17px;
  cursor:pointer;
}

.reel-lightbox .lb-close{top:max(12px,env(safe-area-inset-top,0px));right:12px}
.reel-lightbox .lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.reel-lightbox .lb-next{right:12px;top:50%;transform:translateY(-50%)}

.reel-lightbox button:hover{border-color:var(--gold)}
.reel-lightbox button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:600px){
  .reel-lightbox .lb-prev,
  .reel-lightbox .lb-next{top:auto;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:none}
  .reel-lightbox video{max-height:calc(100dvh - 180px)}
}

html.reel-lightbox-open,
html.reel-lightbox-open body{overflow:hidden}

@keyframes reelFade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .hero-reel .reel-frame,
  .hero-reel .reel-video,
  .hero-reel .reel-card,
  .reel-lightbox{transition:none;animation:none}
}

@media print{
  .hero-reel,.reel-lightbox{display:none!important}
}

/* FULL-VIEWPORT HEROES */
:root{--site-header-height:78px}
.hero,.access-hero,.sell-hero,.import-hero,.diaspora-hero,.finance-hero,.insurance-hero,.trade-hero{min-height:calc(100vh - var(--site-header-height));min-height:calc(100dvh - var(--site-header-height))}
@media(max-width:600px){:root{--site-header-height:68px}.hero,.access-hero,.sell-hero,.import-hero,.diaspora-hero,.finance-hero,.insurance-hero,.trade-hero{min-height:calc(100vh - var(--site-header-height));min-height:calc(100dvh - var(--site-header-height))}.access-hero-inner{min-height:0}}

/* =====================================================================
   NAVBAR FIX - tablets and small laptops (601px - 1240px)
   The full desktop bar (8 links + Contact / M-PESA / Inventory / Banking)
   needs about 1240px. Below that it ran off the right edge (clipped up to
   ~590px at 601px wide, and the page scrolled sideways under 700px) because
   the hamburger only started at 600px. Those widths now use the same
   hamburger + slide-down menu as phones, laid out in 3 columns.
   ===================================================================== */
@keyframes navSlideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

@media (min-width:601px) and (max-width:1240px){
  .desktop-nav,
  .nav-actions{display:none}

  .menu{
    display:flex;
    width:44px;height:44px;
    align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:99px;
    background:#fff;color:var(--ink);font-size:18px;
    box-shadow:0 4px 12px rgba(7,21,47,.06);
    cursor:pointer;
    transition:background .2s,transform .2s;
  }
  .menu:hover{background:#f5f7fa}
  .menu:active{background:#f5f7fa;transform:scale(.96)}

  .mobile-menu{
    position:fixed;
    top:78px;left:0;right:0;bottom:0;
    z-index:899;                       /* just under the header (900) */
    display:none;
    padding:22px max(28px,calc((100vw - 1100px)/2)) 40px;
    overflow-y:auto;
    gap:10px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 20px 30px rgba(7,21,47,.1);
    animation:navSlideDown .25s ease-out;
  }
  .mobile-menu.open{display:grid}

  .mobile-menu a,
  .mobile-menu button{
    min-height:48px;padding:12px 14px;
    display:flex;align-items:center;justify-content:flex-start;gap:9px;
    border:1px solid transparent;border-radius:14px;
    background:#f5f7fa;color:var(--ink);
    font-size:13px;font-weight:700;
    transition:.2s;
  }
  .mobile-menu a:hover,
  .mobile-menu button:hover{background:#fffbeb;border-color:var(--gold)}
  .mobile-menu a i,
  .mobile-menu button i{width:20px;font-size:16px}
  .mobile-menu a.active{background:#f5f7fa;color:var(--ink);border-color:var(--gold);box-shadow:0 4px 12px rgba(7,21,47,.06)}
}

/* =====================================================================
   STACKING FIXES (z-index)
   - The loading splash (1500) sat BELOW the floating Enquiry / AI buttons
     (1999 / 2000), so they showed on top of it while the page loaded.
     It now covers everything except the cookie notice.
   - With the full-screen mobile menu or the filter drawer open, those same
     floating buttons stayed on top and covered menu items; they hide while
     the page is scroll-locked.
   Scale used site-wide:
     header 900 > mobile menu 899 > filter drawer 1000 > floating buttons
     1999-2001 > modals 2100-3000 > cookie notice 4000 > loader 5000
   ===================================================================== */
#loader{z-index:5000}
body.locked .enq-fab,
body.locked .ai-help-btn{visibility:hidden;pointer-events:none}

/* =====================================================================
   FOOTER FIX - 601px to 1000px
   Four fixed-ratio columns were too narrow for the e-mail address and the
   240px subscribe field, so every public page scrolled sideways between
   601px and ~700px. Two columns in that range; columns can always shrink.
   (The 4-column rule is scoped to 1001px+ so it can never override the
   single-column phone layout defined earlier in this file.)
   ===================================================================== */
@media (min-width:1001px){
  .footer-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
}
/* applies at every width: columns may shrink, long e-mail addresses wrap instead of pushing the page wide */
.footer-grid>div>a,.footer-grid>div>span{min-width:0;max-width:100%}
.footer-grid>div>a span{min-width:0;overflow-wrap:anywhere}
.footer-subscribe{max-width:100%}
.footer-subscribe .subscribe-input{width:100%}

@media (min-width:601px) and (max-width:1000px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .footer-brand{max-width:none}
}

/* Menu rows: keep them packed at the top instead of stretching to fill the screen,
   and line the M-PESA button up with its neighbours (phones and tablets). */
.mobile-menu{align-content:start}
.mobile-menu .mobile-mpesa{margin:0;height:auto}

/* =====================================================================
   NAVBAR - NEVER WIDER THAN THE SCREEN
   The full bar (logo + 8 links + Contact / M-PESA / Inventory or Banking)
   needs ~1300px, but the row was capped at the 1200px content width and
   nothing could shrink, so on many laptops (1280-1440px, Windows display
   scaling, browser zoom) it ran off the right edge.
   - The header row may now use up to 1400px of a wide screen.
   - Tighter spacing between links.
   - script.js (fitNavbar) measures the bar and adds .nav-collapsed to
     #siteHeader whenever it does not fit, which switches to the menu
     button below, at any width.
   ===================================================================== */
.header .nav.wrap{width:min(1400px,calc(100% - 40px))}
.nav{min-width:0}
.desktop-nav{gap:2px}
.desktop-nav a{padding:0 9px}
.nav-actions{gap:8px}

@media (min-width:601px){
  #siteHeader.nav-collapsed .desktop-nav,
  #siteHeader.nav-collapsed .nav-actions{display:none}

  #siteHeader.nav-collapsed .menu{
    display:flex;
    width:44px;height:44px;
    align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:99px;
    background:#fff;color:var(--ink);font-size:18px;
    box-shadow:0 4px 12px rgba(7,21,47,.06);
    cursor:pointer;
    transition:background .2s,transform .2s;
  }
  #siteHeader.nav-collapsed .menu:hover{background:#f5f7fa}

  #siteHeader.nav-collapsed .mobile-menu{
    position:fixed;
    top:78px;left:0;right:0;bottom:0;
    z-index:899;
    display:none;
    padding:22px max(28px,calc((100vw - 1100px)/2)) 40px;
    overflow-y:auto;
    gap:10px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 20px 30px rgba(7,21,47,.1);
    animation:navSlideDown .25s ease-out;
  }
  #siteHeader.nav-collapsed .mobile-menu.open{display:grid}

  #siteHeader.nav-collapsed .mobile-menu a,
  #siteHeader.nav-collapsed .mobile-menu button{
    min-height:48px;padding:12px 14px;
    display:flex;align-items:center;justify-content:flex-start;gap:9px;
    border:1px solid transparent;border-radius:14px;
    background:#f5f7fa;color:var(--ink);
    font-size:13px;font-weight:700;
    transition:.2s;
  }
  #siteHeader.nav-collapsed .mobile-menu a:hover,
  #siteHeader.nav-collapsed .mobile-menu button:hover{background:#fffbeb;border-color:var(--gold)}
  #siteHeader.nav-collapsed .mobile-menu a i,
  #siteHeader.nav-collapsed .mobile-menu button i{width:20px;font-size:16px;color:var(--gold)}
  #siteHeader.nav-collapsed .mobile-menu a.active{border-color:var(--gold);box-shadow:0 4px 12px rgba(7,21,47,.06)}
}

/* Last line of defence: nothing on any page may scroll the window sideways.
   (clip, unlike hidden, does not break the sticky inventory toolbar) */
html,body{max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* =====================================================================
   BOOKING DEPOSIT (PAYSTACK) MODAL - built by script.js on every page.
   Readable sizes (the old modal used 8-9px text).
   ===================================================================== */
.pay-modal .mpesa-box{width:min(480px,100%);padding:28px}
.pay-modal .mpesa-head{margin-bottom:18px}
.pay-modal .mpesa-head>span{font-size:10px}
.pay-modal .mpesa-head p{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
.pay-modal .mpesa-box label{gap:6px;font-size:12px;font-weight:700}
.pay-modal .mpesa-box label em{color:var(--muted);font-style:normal;font-weight:500}
.pay-modal .mpesa-box label small{font-size:11px}
.pay-modal .mpesa-amount,.pay-modal .mpesa-phone{height:48px;transition:border-color .2s,box-shadow .2s}
.pay-modal .mpesa-amount:focus-within,.pay-modal .mpesa-phone:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,179,0,.18)}
.pay-modal .mpesa-amount span,.pay-modal .mpesa-phone span{min-width:46px;justify-content:center;font-size:12px;color:var(--ink2)}
.pay-modal .mpesa-phone span i{color:var(--gold)}
.pay-modal .mpesa-presets{margin:-4px 0 16px}
.pay-modal .mpesa-presets button{font-size:12px}
.pay-modal .mpesa-submit{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;font-size:14px}
.pay-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:600}
.pay-secure i{color:#16834b}
.pay-modal .mpesa-status{font-size:12px;line-height:1.45}
@media(max-width:600px){
  .pay-modal .mpesa-box{padding:22px 18px}
  .pay-modal .mpesa-head h2{font-size:22px}
}

/* =====================================================================
   FOOTER BOTTOM BAR: © left · legal links centred · Developer right.
   A 1fr / auto / 1fr grid keeps the links truly centred whatever the
   length of the text on either side. Phones: stacked and centred.
   ===================================================================== */
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 24px;font-size:11px}
.footer-bottom .footer-copy{justify-self:start}
.footer-bottom .footer-dev{justify-self:end}
.footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px}
.footer-legal-links a,.footer-legal-links .footer-ntsa{display:inline-flex;align-items:center;gap:6px;color:#cbd3de;font-size:11px;font-weight:600;white-space:nowrap;transition:color .2s}
.footer-legal-links a:hover{color:var(--gold)}
.footer-legal-links .footer-ntsa i{color:var(--gold)}
@media(max-width:900px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .footer-bottom .footer-copy,.footer-bottom .footer-dev{justify-self:center}
}

/* =====================================================================
   FORM TYPE SCALE
   Inputs were forced to 16px everywhere (needed only on touch phones, to
   stop iOS zooming in on focus) while labels were 9-10px, so placeholders
   looked oversized next to their labels. Desktop now uses 14px controls;
   touch devices keep 16px.
   ===================================================================== */
@media (hover:hover) and (pointer:fine){
  input,select,textarea{font-size:14px!important}
}

/* ENQUIRY: preferred-contact buttons size to their text, so "WhatsApp"
   is never squeezed into a third of a narrow column. */
.enq-seg{display:flex;flex-wrap:wrap;gap:7px}
.enq-seg label{flex:1 1 auto;min-width:0;padding:0 12px;font-size:12px;white-space:nowrap}
.enq-seg label i{font-size:14px}
.enq-field>label,.enq-block>label{font-size:11px}
.enq-err,.enq-hint{font-size:11px}
.enq-alert{font-size:12px}
.enq-chip{font-size:12px}
.enq-foot p{font-size:11px}
@media(min-width:601px){
  #enqModal #fEmail,#enqModal #fMethod{grid-column:1/-1}
  .enq-seg{flex-wrap:nowrap}
  .enq-cats{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
.enq-chip{white-space:nowrap}

/* =====================================================================
   SERVICE FORMS - one readable, aligned style for every form
   (Sell, Trade-In, Import, Financing, Diaspora, Accessible Cars, Insurance)
   - Labels were 7-9px; now 12px (11px on phones).
   - The required "*" (<b>) was its own flex row, pushing starred fields
     lower than unstarred ones. Labels are now a 2-column grid: text + "*"
     on one line, the control on the next, so every field lines up.
   - Typed text / placeholders no longer inherit the label's 800 weight.
   ===================================================================== */
html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields,.insurance-form-grid) label:not(:has(input[type=checkbox],input[type=radio],input[type=file])){
  display:grid;
  grid-template-columns:max-content 1fr;
  align-content:start;
  column-gap:4px;
  row-gap:7px;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
}
html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields,.insurance-form-grid) label:not(:has(input[type=checkbox],input[type=radio],input[type=file]))>:is(input,select,textarea,small,div,span:not(:empty)){
  grid-column:1/-1;
}
html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields) label>b{font-size:12px;line-height:1.3;color:#c58b00}
html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields,.insurance-form-grid,.insurance-textarea-label) :is(input,select,textarea){font-weight:500}
html body .insurance-textarea-label{font-size:12px;font-weight:700}
@media(max-width:600px){
  html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields,.insurance-form-grid) label:not(:has(input[type=checkbox],input[type=radio],input[type=file])),
  html body :is(.sell-fields,.trade-fields,.import-fields,.finance-fields,.diaspora-fields,.access-fields) label>b{font-size:11px}
}
html body .insurance-upload-grid label{font-size:12px}
html body .insurance-upload-grid label small,html body .insurance-upload-grid label p{font-size:11px}

/* Phone filter drawer: fully hidden while closed (it was parked just below
   the screen but still "visible", so it could peek up when the mobile
   address bar collapses, and screen readers could reach it). */
@media(max-width:600px){
  .collection-filter{visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
  .collection-filter.open{visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
}

/* Sort dropdown: same size as its "Sort:" label */
.sort-control{font-size:12px}
html body .sort-control select{font-size:12px!important}

/* =====================================================================
   CARD NUMBERS - clearly visible everywhere
   Step numbers ("01"-"04") on process cards were 9-10px in pale gold, and
   stat numbers were light; they are now large, heavy and high-contrast.
   ===================================================================== */
html body :is(.process-grid>div>b,.process-card>span,.trade-process-card>span,.diaspora-steps article>b){
  display:block;font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#c58b00;
}
html body :is(.trust strong,.sell-stats strong,.story-facts b){font-weight:800}
html body .trust strong{font-size:22px}
html body .trust span{font-size:11px}
html body .sell-stats span{font-size:12px}
html body .journey-grid article>b{font-size:16px;font-weight:800}
html body .access-strip span{font-size:12px}
@media(max-width:600px){
  html body :is(.process-grid>div>b,.process-card>span,.trade-process-card>span,.diaspora-steps article>b){font-size:22px}
  html body .trust strong{font-size:20px}
  html body .trust span{font-size:10px}
  html body .access-strip span{font-size:11px}
}

/* =====================================================================
   COMPANY PROFILE PAGE (/company-profile)
   ===================================================================== */
.profile-card{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.profile-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}
.profile-file{display:flex;align-items:center;gap:14px;min-width:0}
.profile-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#fff1f1;color:#c62828;font-size:22px}
.profile-file strong{display:block;font-size:15px;color:var(--ink)}
.profile-file small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap}
.profile-viewer{height:min(82vh,1100px);background:#eef2f6}
.profile-viewer iframe{display:block;width:100%;height:100%;border:0}
.profile-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;min-height:260px;padding:30px 20px;text-align:center;color:var(--muted);font-size:14px}
.profile-state>i{font-size:40px;color:var(--gold)}
@media(max-width:600px){
  .profile-bar{padding:16px}
  .profile-actions{width:100%}
  .profile-actions a{flex:1;justify-content:center}
  .profile-viewer{height:auto}
}
:is(.profile-actions,.profile-state) a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:800;transition:.2s}
:is(.profile-actions,.profile-state) .go-primary{background:var(--gold);color:var(--ink)}
:is(.profile-actions,.profile-state) .go-primary:hover{background:var(--gold2)}
:is(.profile-actions,.profile-state) .go-ghost{border:1px solid var(--line2);color:var(--ink);background:#fff}
:is(.profile-actions,.profile-state) .go-ghost:hover{background:var(--ink);color:#fff}
.profile-actions a[hidden]{display:none}
.profile-viewer:has(.profile-state){height:auto}

/* =====================================================================
   HERO TEXT - LETTER-SHAPED BACKING
   Hero text sits straight on the photo (no box, no full-width overlay).
   Readability comes from a dark backing shaped exactly like each letter:
   - headings: a dark outline painted UNDER the letters (paint-order), so
     every glyph carries its own outline-shaped background;
   - all other hero text, icons and glass buttons: a tight dark halo that
     follows the letter shapes.
   Solid (gold/white) buttons keep clean text - they already have a fill.
   ===================================================================== */
:root{--halo:rgba(4,12,28,.5);--halo-soft:rgba(4,12,28,.28)}

:is(.hero-copy,.sell-hero-copy,.trade-hero-copy,.import-hero-copy,.finance-hero-copy,.insurance-copy,.diaspora-hero-copy,.access-hero-copy,
    .trade-hero-panel,.import-hero-panel,.finance-hero-panel,.insurance-hero-card,.diaspora-hero-card,.sell-stats,.wellcabs-card),
:is(.hero-copy,.sell-hero-copy,.trade-hero-copy,.import-hero-copy,.finance-hero-copy,.insurance-copy,.diaspora-hero-copy,.access-hero-copy,
    .trade-hero-panel,.import-hero-panel,.finance-hero-panel,.insurance-hero-card,.diaspora-hero-card,.sell-stats,.wellcabs-card) *{
  text-shadow:
    0 0 1px var(--halo),
    0 1px 3px var(--halo),
    0 0 8px var(--halo-soft);
}

/* headings: outline-shaped backing painted under each letter */
:is(.hero-copy,.sell-hero-copy,.trade-hero-copy,.import-hero-copy,.finance-hero-copy,.insurance-copy,.diaspora-hero-copy,.access-hero-copy) h1,
:is(.trade-hero-panel,.import-hero-panel,.finance-hero-panel,.insurance-hero-card,.diaspora-hero-card,.wellcabs-card) :is(h2,h3,strong){
  -webkit-text-stroke:.045em rgba(4,12,28,.6);
  paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(4,12,28,.25);
}
:is(.hero-copy,.sell-hero-copy,.trade-hero-copy,.import-hero-copy,.finance-hero-copy,.insurance-copy,.diaspora-hero-copy,.access-hero-copy) h1 :is(strong,span,em){
  -webkit-text-stroke:inherit;paint-order:stroke fill;
}

/* solid buttons and white cards keep crisp text */
:is(.hero-copy,.sell-hero-copy,.trade-hero-copy,.import-hero-copy,.finance-hero-copy,.insurance-copy,.diaspora-hero-copy,.access-hero-copy)
  :is(.btn.primary,.btn.primary *,.reserve-resident-btn,.reserve-resident-btn *){
  text-shadow:none;-webkit-text-stroke:0;
}

/* right-hand hero cards: lighter glass so the photo shows through */
html body :is(.trade-hero-panel,.import-hero-panel,.finance-hero-panel,.insurance-hero-card,.diaspora-hero-card,.sell-stats){
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
@media(min-width:601px){
  html body .wellcabs-card{background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-color:rgba(255,255,255,.22)}
}

/* =====================================================================
   HERO STRIPS - Accessible Cars and Diaspora use one identical design:
   white bar, gold bottom rule, 44px gold icon tiles, 96px tall cells,
   bold ink headline text. (Diaspora adds a small grey caption.)
   ===================================================================== */
html body :is(.access-strip,.diaspora-strip){background:#fff;border-top:1px solid #d7dee8;border-bottom:2px solid #eabd0a;box-shadow:var(--shadow-xs)}
html body :is(.access-strip,.diaspora-strip) .wrap{display:grid}
html body .access-strip .wrap{grid-template-columns:repeat(5,1fr)}
html body .diaspora-strip .wrap{grid-template-columns:repeat(4,1fr)}
html body :is(.access-strip,.diaspora-strip) .wrap>div{display:flex;align-items:center;justify-content:center;gap:14px;min-height:96px;padding:14px;border-right:1px solid #d7dee8;border-bottom:0}
html body :is(.access-strip,.diaspora-strip) .wrap>div:last-child{border-right:0}
html body .access-strip strong,html body .diaspora-strip i{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#fff7d9;border:1px solid #ead9a0;color:var(--ink);font-size:17px}
html body .access-strip span{color:var(--ink);font-size:15px;font-weight:800;line-height:1.25;text-align:left}
html body .diaspora-strip strong{color:var(--ink);font-size:24px;font-weight:800;line-height:1}
html body .diaspora-strip span{color:var(--muted);font-size:12px;font-weight:700}
@media(max-width:900px){
  html body :is(.access-strip,.diaspora-strip) .wrap{grid-template-columns:1fr 1fr}
  html body :is(.access-strip,.diaspora-strip) .wrap>div{border-bottom:1px solid #d7dee8}
  html body :is(.access-strip,.diaspora-strip) .wrap>div:nth-child(2n){border-right:0}
  html body .access-strip .wrap>div:last-child{grid-column:1/-1;border-bottom:0}
  html body .diaspora-strip .wrap>div:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:600px){
  html body :is(.access-strip,.diaspora-strip) .wrap>div{justify-content:flex-start;min-height:76px;padding:12px 8px;gap:10px}
  html body .access-strip strong,html body .diaspora-strip i{flex-basis:36px;width:36px;height:36px;font-size:14px}
  html body .access-strip span{font-size:13px}
  html body .diaspora-strip strong{font-size:20px}
  html body .diaspora-strip span{font-size:11px}
}

/* =====================================================================
   INVENTORY CAR PICKER (js/car-picker.js) - Booking Deposit, Diaspora,
   General Enquiry, Trade-In upgrade
   ===================================================================== */
.car-picker{display:flex;flex-direction:column;gap:8px;min-width:0}
.cp-label{color:var(--ink);font-size:12px;font-weight:700}
.cp-label em{color:var(--muted);font-style:normal;font-weight:500}
.cp-browse{display:flex;flex-direction:column;gap:8px}
.cp-browse[hidden],.cp-selected[hidden]{display:none!important}
.cp-search{position:relative}
.cp-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.cp-search input{width:100%;height:46px;padding:0 14px 0 38px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);outline:0;font-weight:500}
.cp-search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,179,0,.18)}
.cp-list{max-height:250px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff}
.cp-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:8px;border-radius:10px;background:transparent;color:var(--ink);text-align:left;transition:background .15s}
.cp-item:hover,.cp-item.active{background:var(--paper)}
.cp-item:focus-visible{outline:2px solid rgba(242,179,0,.6);outline-offset:0}
.cp-thumb{display:grid;place-items:center;width:64px;height:46px;border-radius:8px;object-fit:cover;background:var(--paper2);color:var(--muted)}
.cp-text{min-width:0}
.cp-name{display:block;overflow:hidden;font-size:13px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.cp-meta{display:block;margin-top:2px;color:var(--muted);font-size:11.5px}
.cp-meta b{color:var(--ink2);font-weight:700}
.cp-price{color:var(--ink);font-size:12.5px;font-weight:800;text-align:right;white-space:nowrap}
.cp-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:#fff4d1;color:#8a6100;font-size:10px;font-weight:700;vertical-align:1px}
.cp-note{padding:18px 10px;color:var(--muted);font-size:13px;text-align:center}
.cp-count,.cp-hint{color:var(--muted);font-size:11px}
.cp-selected{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid rgba(242,179,0,.7);border-radius:12px;background:#fffbef}
.cp-change{padding:9px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:700}
.cp-change:hover{background:var(--ink2)}
@media(max-width:600px){
  .cp-item,.cp-selected{grid-template-columns:52px minmax(0,1fr)}
  .cp-thumb{width:52px;height:40px}
  .cp-item .cp-price{grid-column:2;margin-top:-6px;text-align:left}
  .cp-selected .cp-change{grid-column:1/-1}
}
.pay-notlisted{align-self:flex-start;margin:-2px 0 12px;padding:0;background:none;color:var(--ink2);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pay-notlisted[hidden],#mpesaVehicleWrap[hidden]{display:none}
.pay-modal #mpesaCarPicker{margin-bottom:12px}
#upgradeCarPicker[hidden]{display:none}

/* Living hero backgrounds (js/hero-sparkle.js): canvas between photo and text */
.hero-sparkle{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
:is(.sell-hero,.trade-hero,.import-hero,.finance-hero,.insurance-hero,.diaspora-hero) > :is(.wrap,[class$="-hero-inner"]),
.access-hero > .access-hero-inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.hero-sparkle{display:none}}

/* Booking popup: M-PESA / Card switch (same Paystack checkout, opened on that method) */
.pay-method{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#f5f7fa}
.pay-method button{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:10px;background:transparent;color:var(--muted);font-size:13px;font-weight:800;transition:.2s}
.pay-method button:hover{color:var(--ink)}
.pay-method button.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(7,21,47,.08)}
.pay-method button.active i{color:var(--gold)}