@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);
--green:#16834b;
--red:#b4232f;
--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{
min-height:100vh;
overflow-x:hidden;
font-family:"Inter",sans-serif;
background:var(--paper);
color:var(--ink);
font-size:14px;
line-height:1.5;
}

body.locked{
overflow:hidden;
}

body:has(.modal.active){
overflow:hidden;
}

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

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

button{
border:0;
cursor:pointer;
}

img{
display:block;
max-width:100%;
}

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

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

/* PAGE */

.details-page{
width:min(1200px,calc(100% - 40px));
margin:0 auto;
padding:34px 0 70px;
}

.loading,
.error{
min-height:240px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:10px;
color:var(--muted);
text-align:center;
}

.loading i{
color:var(--gold);
font-size:24px;
}

.error{
display:none;
padding:30px;
border:1px solid rgba(180,35,47,.14);
border-radius:20px;
background:#fff6f6;
color:var(--red);
}

.error.active{
display:flex;
}

/* NAVBAR */

.navbar{
position:sticky;
top:0;
z-index:900;
max-height:78px;
display:flex;
align-items:center;
gap:18px;
padding:9px max(20px,calc((100vw - 1200px)/2));
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--line);
backdrop-filter:blur(20px);
box-shadow:0 5px 25px rgba(7,21,47,.05);
}

.navbar .brand{
display:flex;
align-items:center;
gap:9px;
color:var(--ink);
font-weight:800;
line-height:.95;
transition:.22s var(--ease);
}

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

.navbar .brand img{
width:88px;
height:88px;
object-fit:contain;
}

.back{
height:42px;
margin-left:auto;
padding:0 15px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
color:var(--ink2);
font-size:10px;
font-weight:800;
box-shadow:var(--shadow-xs);
transition:.22s var(--ease);
}

.back i{
color:var(--gold);
}

.back:hover{
transform:translateY(-2px);
border-color:rgba(242,179,0,.35);
box-shadow:var(--shadow-sm);
background:#fafbfd;
}

/* DETAILS TOP */

.details-top{
display:flex;
justify-content:flex-end;
min-height:28px;
margin-bottom:10px;
}

.status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:30px;
padding:0 11px;
border-radius:999px;
background:#fff;
border:1px solid var(--line);
color:var(--ink2);
box-shadow:var(--shadow-xs);
font-size:8px;
font-weight:800;
letter-spacing:.08em;
}

/* MAIN VEHICLE */

.vehicle-main{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
gap:28px;
align-items:start;
}

/* GALLERY */

.gallery-area{
position:relative;
min-width:0;
}

.main-image{
position:relative;
height:360px;
overflow:hidden;
border:1px solid var(--line);
border-radius:24px;
background:#e8f1f5;
box-shadow:var(--shadow);
cursor:zoom-in;
}

.main-image img,
.gallery-main-img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
background:#e8f1f5;
}

.image-fallback{
width:100%;
height:100%;
min-height:200px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#e8edf3,#c2ccd8);
color:var(--gold);
font-size:44px;
}

.thumbs{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
margin-top:10px;
}

.thumb{
position:relative;
width:100%;
height:72px;
overflow:hidden;
padding:0;
border:2px solid transparent;
border-radius:12px;
background:#dde5ef;
transition:.2s var(--ease);
}

.thumb img{
width:100%;
height:100%;
object-fit:contain;
background:#e8f1f5;
}

.thumb:hover{
transform:translateY(-2px);
}

.thumb.active{
border-color:var(--gold);
box-shadow:0 0 0 2px rgba(242,179,0,.16);
}

/* SUMMARY */

.summary{
position:sticky;
top:98px;
padding:25px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:var(--shadow-sm);
}

.featured{
display:none;
width:max-content;
align-items:center;
gap:6px;
padding:6px 9px;
margin-bottom:12px;
border-radius:999px;
background:var(--gold);
color:var(--ink);
font-size:7px;
font-weight:800;
}

.summary>small{
display:block;
color:var(--muted);
font-size:8px;
font-weight:800;
letter-spacing:.12em;
}

.summary>small span{
color:var(--ink2);
}

.summary h1{
margin-top:7px;
font-size:clamp(28px,3vw,43px);
line-height:1;
letter-spacing:-.055em;
}

.location{
display:flex;
align-items:center;
gap:6px;
margin:12px 0 14px;
color:var(--muted);
font-size:10px;
}

.location i{
color:var(--gold);
}

/* CURRENCY */

.currency-switch{
display:flex;
width:max-content;
gap:3px;
padding:4px;
margin-bottom:12px;
border:1px solid var(--line);
border-radius:14px;
background:#f8fafc;
}

.currency-choice{
min-width:55px;
height:34px;
padding:0 12px;
border-radius:10px;
background:transparent;
color:var(--muted);
font-size:9px;
font-weight:800;
transition:.2s var(--ease);
}

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

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

.price{
margin:3px 0 17px;
color:var(--ink2);
font-size:29px;
font-weight:900;
letter-spacing:-.04em;
}

/* SPECS */

.quick-specs{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}

.info-item{
min-width:0;
padding:11px;
border:1px solid var(--line);
border-radius:12px;
background:#f8fafc;
}

.info-item span{
display:block;
margin-bottom:3px;
color:var(--muted);
font-size:7px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
}

.info-item strong{
display:block;
overflow:hidden;
color:var(--ink);
font-size:10px;
font-weight:800;
white-space:nowrap;
text-overflow:ellipsis;
}

/* ACTIONS */

.actions{
display:grid;
grid-template-columns:1fr 1.15fr 1fr;
gap:7px;
margin-top:15px;
}

.action-btn{
min-height:45px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:0 10px;
border-radius:12px;
font-size:9px;
font-weight:800;
transition:.22s var(--ease);
}

.action-btn i{
font-size:12px;
}

.enquire-btn{
background:#f3f6fa;
color:var(--ink2);
border:1px solid var(--line);
}

.enquire-btn:hover{
background:#e9eef4;
transform:translateY(-2px);
}

.reserve-btn{
background:var(--gold);
color:var(--ink);
border:1px solid var(--gold);
box-shadow:0 9px 20px rgba(242,179,0,.2);
}

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

.whatsapp-btn{
background:#eaf8f0;
color:#16864f;
border:1px solid rgba(22,134,79,.08);
}

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

.extra-actions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
margin-top:8px;
}

.extra-btn{
min-height:40px;
padding:0 10px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
border:1px solid var(--line);
border-radius:11px;
background:#fff;
color:var(--ink2);
font-size:8px;
font-weight:800;
transition:.2s var(--ease);
}

.extra-btn i{
color:var(--gold);
font-size:11px;
}

.extra-btn:hover{
transform:translateY(-2px);
border-color:rgba(242,179,0,.35);
box-shadow:var(--shadow-xs);
}

/* INFORMATION SECTIONS */

.info-section,
.description-section,
.finance-section,
.related-section{
margin-top:28px;
padding:28px;
border:1px solid var(--line);
border-radius:24px;
background:#fff;
box-shadow:var(--shadow-xs);
}

.info-section h2,
.description-section h2,
.finance-section h2,
.related-section h2{
margin-bottom:18px;
font-size:clamp(24px,3vw,35px);
line-height:1;
letter-spacing:-.05em;
}

.info-section h2 strong,
.description-section h2 strong,
.finance-section h2 strong,
.related-section h2 strong{
color:var(--gold);
}

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

.description-section p{
max-width:950px;
color:#596779;
font-size:12px;
line-height:1.8;
white-space:pre-line;
}

/* FINANCE */

.finance-section{
background:linear-gradient(180deg,#f7f9fc,#edf2f7);
}

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

.finance-field{
display:grid;
gap:6px;
}

.finance-field label{
color:var(--muted);
font-size:7px;
font-weight:800;
letter-spacing:.12em;
}

.finance-field input{
width:100%;
height:45px;
padding:0 11px;
border:1px solid var(--line);
border-radius:12px;
outline:0;
background:#fff;
color:var(--ink);
font-size:12px;
font-weight:700;
}

.finance-field input:focus{
border-color:rgba(242,179,0,.7);
box-shadow:0 0 0 4px rgba(242,179,0,.1);
}

.emi-result{
margin-top:14px;
padding:18px;
display:flex;
align-items:baseline;
gap:9px;
flex-wrap:wrap;
border:1px solid rgba(242,179,0,.25);
border-radius:16px;
background:#fff;
}

.emi-result span{
color:var(--muted);
font-size:8px;
font-weight:800;
letter-spacing:.1em;
}

.emi-result strong{
color:var(--ink2);
font-size:25px;
font-weight:900;
}

.emi-result small{
color:var(--muted);
font-size:9px;
}

/* RELATED */

.section-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:18px;
}

.section-title h2{
margin:0;
}

.section-title>a{
display:inline-flex;
align-items:center;
gap:7px;
color:var(--ink2);
font-size:9px;
font-weight:800;
}

.section-title>a i{
color:var(--gold);
}

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

.related-card{
overflow:hidden;
border:1px solid var(--line);
border-radius:18px;
background:#fff;
box-shadow:var(--shadow-xs);
cursor:pointer;
transition:.28s var(--ease);
}

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

.related-card>img,
.related-card>.image-fallback{
width:100%;
height:145px;
object-fit:contain;
background:#e8f1f5;
}

.related-card>div:last-child{
padding:12px;
}

.related-card h3{
margin-bottom:4px;
font-size:13px;
line-height:1.25;
}

.related-card p{
margin-bottom:8px;
color:var(--muted);
font-size:8px;
}

.related-price{
color:var(--ink2);
font-size:13px;
font-weight:900;
}

/* MODALS */

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

.modal.active{
display:flex;
}

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

.modal-box{
position:relative;
z-index:2;
width:min(560px,100%);
max-height:94vh;
overflow-y:auto;
overflow-x:hidden;
padding:28px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
box-shadow:0 35px 100px rgba(0,0,0,.4);
animation:modalIn .3s var(--ease);
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}

.small-modal{
width:min(500px,100%);
}

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

.modal-close{
position:absolute;
top:14px;
right:14px;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:11px;
background:var(--ink);
color:#fff;
transition:.2s;
z-index:5;
}

.modal-close:hover{
background:var(--ink2);
transform:rotate(90deg);
}

.modal-head{
padding-right:48px;
padding-bottom:17px;
border-bottom:1px solid var(--line);
}

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

.modal-head h2{
margin-top:7px;
font-size:24px;
line-height:1.1;
letter-spacing:-.04em;
}

.modal-head h2 i{
color:var(--gold);
margin-right:5px;
}

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

.modal-head p{
margin-top:8px;
color:var(--muted);
font-size:10px;
}

/* MODAL FORMS */

form{
margin-top:18px;
}

.form-step{
display:none;
}

.form-step.active{
display:block;
}

.form-step h3{
margin-bottom:6px;
font-size:15px;
}

.form-step>p{
margin-bottom:15px;
color:var(--muted);
font-size:10px;
}

.field{
display:grid;
gap:6px;
margin-bottom:12px;
}

.field label,
form>label{
color:var(--ink);
font-size:9px;
font-weight:800;
}

.field input,
.field select,
.field textarea,
form>label>input{
width:100%;
min-height:44px;
padding:10px 11px;
border:1px solid var(--line);
border-radius:12px;
outline:0;
background:#fff;
color:var(--ink);
font-size:12px;
}

.field textarea{
resize:vertical;
min-height:90px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
form>label>input:focus{
border-color:rgba(242,179,0,.7);
box-shadow:0 0 0 4px rgba(242,179,0,.1);
}

.vehicle-summary{
display:grid;
gap:4px;
margin:14px 0;
padding:14px;
border:1px solid var(--line);
border-radius:12px;
background:#f4f7fb;
}

.vehicle-summary strong{
font-size:11px;
}

.vehicle-summary span{
color:var(--muted);
font-size:9px;
}

.notice,
.important,
.enquiry-notice,
.payment-intro,
.test-terms,
.terms{
padding:12px;
border-radius:12px;
font-size:9px;
line-height:1.6;
}

.notice{
margin-bottom:13px;
background:#fffbeb;
border:1px solid rgba(242,179,0,.2);
color:#815b00;
}

.important{
margin:12px 0;
background:#fff7e0;
border:1px solid rgba(242,179,0,.22);
color:#765600;
}

.important i{
color:var(--gold);
}

.enquiry-notice{
margin-bottom:13px;
background:#f4f7fb;
border:1px solid var(--line);
color:#596779;
}

.enquiry-notice strong{
display:block;
margin-bottom:3px;
color:var(--ink);
}

.payment-intro{
margin-bottom:14px;
background:#f4f7fb;
border:1px solid var(--line);
color:#596779;
}

.payment-intro strong{
display:block;
margin-bottom:5px;
color:var(--ink);
}

.test-terms{
margin-top:13px;
background:#f8fafc;
border:1px solid var(--line);
color:#617083;
}

.test-terms strong{
color:var(--ink);
}

.terms{
display:block;
margin-top:12px;
color:var(--muted);
}

/* STEPS */

.steps{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin:18px 0;
}

.steps b{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:50%;
background:#e8edf3;
color:#7b8797;
font-size:9px;
}

.steps b.active{
background:var(--ink);
color:var(--gold);
}

.steps i{
width:45px;
height:2px;
background:#d9e0e8;
}

/* AMOUNT */

.amount-box{
height:48px;
display:flex;
align-items:center;
overflow:hidden;
margin-top:5px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
}

.amount-box span{
height:100%;
display:flex;
align-items:center;
padding:0 11px;
border-right:1px solid var(--line);
color:var(--muted);
font-size:9px;
font-weight:800;
}

.amount-box input{
width:100%;
height:100%;
padding:0 11px;
border:0;
outline:0;
font-size:12px;
font-weight:800;
}

.presets{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:6px;
margin:8px 0 17px;
}

.presets button{
height:38px;
border:1px solid var(--line);
border-radius:10px;
background:#f5f7fa;
color:var(--ink);
font-size:8px;
font-weight:800;
transition:.2s;
}

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

/* PAYMENT BOX */
.payment-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:13px 0;
padding:15px;
border:1px solid rgba(242,179,0,.25);
border-radius:12px;
background:#fffbeb;
}

.payment-box span{
color:var(--muted);
font-size:9px;
font-weight:800;
}

.payment-box strong{
color:var(--ink2);
font-size:17px;
}

/* MODAL BUTTONS */

.modal-next,
.modal-back,
.final-submit,
.mpesa-submit{
width:100%;
min-height:45px;
border-radius:12px;
font-size:9px;
font-weight:800;
transition:.22s var(--ease);
}

.modal-next{
margin-top:4px;
background:var(--ink2);
color:#fff;
}

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

.modal-back{
margin-top:8px;
background:#f1f4f8;
color:var(--ink2);
border:1px solid var(--line);
}

.modal-back:hover{
background:#e8edf3;
transform:translateY(-1px);
}

.final-submit{
margin-top:9px;
background:var(--gold);
color:var(--ink);
box-shadow:0 10px 24px rgba(242,179,0,.2);
}

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

.mpesa-submit{
background:var(--gold);
color:var(--ink);
box-shadow:0 10px 24px rgba(242,179,0,.2);
}

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

.mpesa-submit:disabled,
.final-submit:disabled{
opacity:.55;
cursor:not-allowed;
transform:none;
}

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

.contact-consent{
display:flex!important;
flex-direction:row!important;
align-items:flex-start;
gap:8px;
margin:12px 0!important;
color:var(--muted)!important;
font-size:9px!important;
font-weight:600!important;
line-height:1.5;
}

.contact-consent input{
width:16px!important;
min-height:16px!important;
margin-top:1px;
flex:0 0 16px;
accent-color:var(--ink2);
}

/* M-PESA */

#mpesaModal .modal-head h2{
color:var(--ink);
}

#mpesaModal .modal-head h2 strong{
color:var(--gold);
}

.mpesa-phone{
height:48px;
display:flex;
align-items:center;
overflow:hidden;
margin-top:5px;
border:1px solid var(--line);
border-radius:0;
background:#fff;
}

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

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

/* LIGHTBOX */

.lightbox{
padding:20px;
}

.lightbox .modal-bg{
background:rgba(3,10,25,.94);
}

#lightboxImage{
position:relative;
z-index:3;
max-width:min(1100px,88vw);
max-height:86vh;
width:auto;
height:auto;
border-radius:18px;
object-fit:contain;
box-shadow:0 30px 100px rgba(0,0,0,.45);
}

.lightbox-close,
.lightbox-nav{
position:absolute;
z-index:4;
display:grid;
place-items:center;
border-radius:50%;
}

.lightbox-close{
top:22px;
right:22px;
width:44px;
height:44px;
background:#fff;
color:var(--ink);
}

.lightbox-nav{
top:50%;
width:46px;
height:46px;
transform:translateY(-50%);
background:rgba(255,255,255,.94);
color:var(--ink);
}

.lightbox-prev{
left:22px;
}

.lightbox-next{
right:22px;
}

.lightbox-close:hover,
.lightbox-nav:hover{
background:var(--gold);
}

/* FOOTER */

footer{
position:relative;
z-index:5;
margin-top:10px;
padding:22px 20px;
background:var(--ink);
color:#cbd5e1;
}

.footer-bottom{
width:min(1200px,100%);
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-top:5px;
font-size:10px;
}

.footer-bottom a{
color:var(--gold);
font-weight:200;
}

/* RESPONSIVE */

@media(max-width:1100px){

.details-page{
width:min(100% - 28px,1120px);
}

.vehicle-main{
grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
gap:18px;
}

.main-image{
height:320px;
}

.summary{
padding:20px;
}

.info-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.related-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}

}

@media(max-width:850px){

.navbar{
max-height:68px;
padding:7px 14px;
}

.navbar .brand img{
width:74px;
height:74px;
}

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

.navbar .brand small{
font-size:6px;
}

.vehicle-main{
grid-template-columns:1fr;
}

.summary{
position:relative;
top:auto;
}

.main-image{
height:min(62vw,360px);
}

.info-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.finance-box{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.related-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

}

@media(max-width:600px){

.details-page{
width:calc(100% - 20px);
padding:20px 0 40px;
}

.navbar{
gap:8px;
}

.navbar .brand span{
font-size:9px;
}

.back{
height:42px;
padding:0 14px;
font-size:11px;
font-weight:800;
border-radius:12px;
}

.back i{
font-size:13px;
}

.details-top{
min-height:24px;
margin-bottom:7px;
}

.status{
min-height:27px;
padding:0 9px;
font-size:7px;
}

.main-image{
height:250px;
border-radius:18px;
}

.thumbs{
grid-template-columns:repeat(5,minmax(0,1fr));
gap:5px;
}

.thumb{
height:55px;
border-radius:8px;
}

.summary{
padding:15px;
border-radius:18px;
}

.summary h1{
font-size:27px;
}

.location{
font-size:9px;
}

.currency-choice{
min-width:48px;
height:31px;
}

.price{
font-size:24px;
}

.quick-specs{
gap:5px;
}

.info-item{
padding:8px;
}

.info-item span{
font-size:6.5px;
}

.info-item strong{
font-size:8px;
}

.actions{
grid-template-columns:1fr 1fr;
}

.whatsapp-btn{
grid-column:1/-1;
}

.extra-actions{
grid-template-columns:1fr 1fr;
}

.action-btn{
min-height:42px;
font-size:8px;
}

.extra-btn{
min-height:39px;
font-size:7.5px;
}

.info-section,
.description-section,
.finance-section,
.related-section{
margin-top:15px;
padding:17px;
border-radius:18px;
}

.info-section h2,
.description-section h2,
.finance-section h2,
.related-section h2{
font-size:25px;
margin-bottom:14px;
}

.info-grid{
gap:5px;
}

.description-section p{
font-size:10px;
line-height:1.7;
}

.finance-box{
gap:6px;
}

.finance-field input{
height:42px;
}

.emi-result{
padding:14px;
}

.emi-result strong{
font-size:21px;
}

.related-grid{
gap:7px;
}

.related-card{
border-radius:13px;
}

.related-card>img,
.related-card>.image-fallback{
height:125px!important;
}

.related-card>div:last-child{
padding:9px;
}

.related-card h3{
font-size:10px;
}

.related-price{
font-size:11px;
}

/* MOBILE FULL-SCREEN MODALS */

.modal{
padding:0;
align-items:stretch;
justify-content:stretch;
overflow:hidden;
}

.modal-bg{
backdrop-filter:blur(5px);
}

.modal-box,
.small-modal{
width:100%;
max-width:none;
height:100dvh;
max-height:100dvh;
min-height:100dvh;
margin:0;
padding:19px;
border:0;
border-radius:0;
box-shadow:none;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
animation:modalMobileIn .25s var(--ease);
}

@keyframes modalMobileIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:none;
}
}

.modal-close{
top:12px;
right:12px;
width:40px;
height:40px;
border-radius:11px;
}

.modal-head{
padding-right:48px;
}

.modal-head h2{
font-size:21px;
}

.modal-head p{
font-size:10px;
}

form{
margin-top:16px;
padding-bottom:10px;
}

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

.steps{
gap:5px;
}

.steps i{
width:30px;
}

.steps b{
width:27px;
height:27px;
}

.presets{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.vehicle-summary{
border-radius:12px;
}

.notice,
.important,
.enquiry-notice,
.payment-intro,
.test-terms,
.terms{
border-radius:12px;
}

.payment-box{
border-radius:12px;
}

.amount-box{
border-radius:12px;
}

.amount-box input{
font-size:16px;
}

.modal-next,
.modal-back,
.final-submit,
.mpesa-submit{
min-height:48px;
border-radius:12px;
font-size:10px;
}

.mpesa-phone{
border-radius:12px;
}

.mpesa-phone input{
font-size:16px;
}

#lightboxImage{
max-width:94vw;
max-height:80vh;
border-radius:12px;
}

.lightbox{
padding:0;
}

.lightbox-close{
top:12px;
right:12px;
width:40px;
height:40px;
}

.lightbox-nav{
width:40px;
height:40px;
}

.lightbox-prev{
left:10px;
}

.lightbox-next{
right:10px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
gap:7px;
font-size:8px;
}

}

@media(max-width:400px){

.navbar .brand span{
font-size:8px;
}

.back{
padding:0 9px;
}

.main-image{
height:220px;
}

.thumb{
height:48px;
}

.summary{
padding:12px;
}

.summary h1{
font-size:24px;
}

.price{
font-size:21px;
}

.quick-specs{
grid-template-columns:1fr 1fr;
}

.actions{
grid-template-columns:1fr;
}

.whatsapp-btn{
grid-column:auto;
}

.extra-actions{
grid-template-columns:1fr;
}

.info-grid{
grid-template-columns:1fr 1fr;
}

.finance-box{
grid-template-columns:1fr 1fr;
}

.related-grid{
grid-template-columns:1fr 1fr;
}

.section-title{
align-items:flex-end;
}

.section-title>a{
font-size:8px;
}

.modal-box{
padding:16px;
}

.modal-close{
top:10px;
right:10px;
}

}

@media(max-width:600px) and (orientation:landscape){

.modal-box{
height:100dvh;
max-height:100dvh;
min-height:100dvh;
}

}

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
scroll-behavior:auto!important;
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
}

}

/* CARIMAGES API — MEDIA TABS, STUDIO ANGLES, 3D VIEW */

[hidden]{
display:none!important;
}

.media-tabs{
display:flex;
gap:6px;
margin-bottom:10px;
padding:5px;
border:1px solid var(--line);
border-radius:14px;
background:#fff;
box-shadow:var(--shadow-xs);
overflow-x:auto;
scrollbar-width:none;
}

.media-tabs::-webkit-scrollbar{
display:none;
}

.media-tab{
flex:1 0 auto;
height:36px;
padding:0 14px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
border-radius:10px;
background:transparent;
color:var(--ink2);
font-size:11px;
font-weight:800;
white-space:nowrap;
transition:.2s var(--ease);
}

.media-tab i{
color:var(--gold);
}

.media-tab:hover{
background:var(--paper);
}

.media-tab.active{
background:var(--ink);
color:#fff;
box-shadow:var(--shadow-xs);
}

.main-image .stage{
position:absolute;
inset:0;
}

.main-image.is-3d{
cursor:grab;
}

.main-image.is-3d:active{
cursor:grabbing;
}

.main-image model-viewer{
display:block;
width:100%;
height:100%;
--poster-color:transparent;
}

.stage-loading{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
color:var(--muted);
font-size:11px;
font-weight:600;
pointer-events:none;
}

.stage-loading i{
color:var(--gold);
font-size:24px;
}

.image-fallback{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
text-align:center;
padding:16px;
}

.image-fallback span{
max-width:280px;
color:var(--ink2);
font-size:11px;
font-weight:600;
line-height:1.4;
}

.studio-thumbs{
grid-template-columns:repeat(8,minmax(0,1fr));
}

.studio-thumb img{
background:#fff;
opacity:0;
transition:opacity .3s var(--ease);
}

.studio-thumb.loaded img{
opacity:1;
}

.studio-thumb:not(.loaded)::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,#e8edf3 0%,#f6f8fb 50%,#e8edf3 100%);
background-size:200% 100%;
animation:ciShimmer 1.2s linear infinite;
}

.studio-thumb.failed::before{
animation:none;
}

.studio-thumb span{
position:absolute;
left:0;
right:0;
bottom:0;
padding:3px 2px;
background:rgba(7,21,47,.72);
color:#fff;
font-size:8px;
font-weight:700;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

@keyframes ciShimmer{
from{background-position:200% 0}
to{background-position:-200% 0}
}

.media-note{
margin-top:10px;
padding:9px 12px;
border:1px solid rgba(242,179,0,.28);
border-radius:12px;
background:#fffaf0;
color:var(--ink2);
font-size:10px;
font-weight:600;
line-height:1.45;
}

.related-card>img.ci-related{
background:#fff;
}

@media(max-width:850px){

.studio-thumbs{
grid-template-columns:repeat(4,minmax(0,1fr));
}

}

@media(max-width:600px){

.media-tab{
height:34px;
padding:0 10px;
font-size:10px;
}

.studio-thumbs{
gap:5px;
}

}

/* COMING SOON — Studio Angles / 3D View (content still loads underneath) */

.soon-pill{
margin-left:2px;
padding:2px 6px;
border-radius:999px;
background:rgba(242,179,0,.16);
color:#8a6500;
font-size:8.5px;
font-weight:800;
letter-spacing:.02em;
}

.media-tab.active .soon-pill{
background:var(--gold);
color:var(--ink);
}

.main-image.is-soon{
cursor:default;
}

.main-image .soon-stage{
z-index:3;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:radial-gradient(circle at 50% 38%,#fff 0%,var(--paper) 62%,#e6edf5 100%);
}

.soon-card{
max-width:300px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
text-align:center;
}

.soon-icon{
width:56px;
height:56px;
margin-bottom:4px;
display:grid;
place-items:center;
border-radius:18px;
background:var(--ink);
color:var(--gold);
font-size:22px;
box-shadow:var(--shadow-sm);
}

.soon-card strong{
color:var(--ink);
font-size:16px;
font-weight:800;
line-height:1.25;
}

.soon-card>span:not(.soon-icon){
color:var(--muted);
font-size:12px;
font-weight:600;
line-height:1.45;
}

.soon-back{
margin-top:6px;
height:36px;
padding:0 16px;
display:inline-flex;
align-items:center;
gap:7px;
border-radius:10px;
background:var(--ink);
color:#fff;
font-size:11px;
font-weight:800;
transition:.2s var(--ease);
}

.soon-back i{
color:var(--gold);
}

.soon-back:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-xs);
}

.soon-back:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}

/* thumbnails keep loading but take no space and can't be seen or clicked */
.studio-thumbs.is-soon{
position:absolute;
width:100%;
opacity:0;
pointer-events:none;
z-index:-1;
}

@media(max-width:600px){

.soon-card strong{
font-size:14px;
}

.soon-icon{
width:48px;
height:48px;
font-size:19px;
}

}
/* ---------- Paystack payments ---------- */
.pay-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;color:var(--muted);font-size:11px;font-weight:600}
.pay-secure i{color:#16834b}
.mpesa-submit,.modal-next,.modal-back,.final-submit{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px}
.form-step .mpesa-submit+.modal-next{margin-top:8px}
.mpesa-submit.is-paid{background:#e9f7ef;color:#16834b;box-shadow:none;cursor:default}
.form-status{font-size:12px;line-height:1.45}

/* footer bottom bar: © left · legal links centred · Developer right (matches the main site) */
.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}
.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}
}

/* ---------- readable modal text (labels and notes were 8-9px) ---------- */
.field label,form>label{font-size:12px;font-weight:700}
.field input,.field select,.field textarea,form>label>input{font-size:14px}
.modal-head p,.form-step>p,.vehicle-summary span{font-size:12px}
.notice,.important,.payment-intro p,.test-terms,.terms{font-size:12px;line-height:1.6}
.payment-intro strong{font-size:13px}
@media(max-width:600px){
  .field label,form>label{font-size:11px}
  .field input,.field select,.field textarea,form>label>input{font-size:16px}
  .notice,.important,.payment-intro p,.test-terms,.terms{font-size:11px}
}

/* action buttons: an even 2 x 2 grid (Chat Directly used to sit alone on a
   row under three buttons); single column stays on phones */
@media(min-width:601px){.actions{grid-template-columns:1fr 1fr}}
.copy-stock{margin-left:6px}
/* phones: the four secondary buttons in a 2 x 2 grid instead of a long stack */
@media(max-width:600px){.extra-actions{grid-template-columns:1fr 1fr}}