@font-face{font-family:'Noto Kufi Arabic';src:url('assets/fonts/noto-kufi-arabic.woff2') format('woff2');font-style:normal;font-weight:700 800;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('assets/fonts/ibm-plex-arabic-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('assets/fonts/ibm-plex-arabic-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('assets/fonts/ibm-plex-arabic-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--brand:#1746E0;--ink:color-mix(in srgb,var(--brand) 26%,#04060C);--paper:#FFFFFF;--mist:color-mix(in srgb,var(--brand) 5%,#FFFFFF);--line:color-mix(in srgb,var(--brand) 13%,#FFFFFF);--muted:color-mix(in srgb,var(--brand) 22%,#5A6068);--s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s96:96px;--r-input:12px;--r-card:20px;--r-pill:999px;--shadow:0 12px 32px rgba(16,20,24,.10);--t-hero:38px;--t-section:26px;--t-card:17px;--t-body:16px;--t-small:13px;--t-number:34px}
*{box-sizing:border-box}
body{margin:initial;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Arabic',sans-serif;font-size:var(--t-body);font-weight:400;line-height:1.75}
h1,h2,h3,p{margin:initial}
h1,h2,h3,.footer-name,.wordmark,.stat-number,.brand-latin{font-family:'Noto Kufi Arabic',sans-serif}
h1{font-size:var(--t-hero);font-weight:800;line-height:1.25}
h2{font-size:var(--t-section);font-weight:800;line-height:1.3}
h3{font-size:var(--t-card);font-weight:700;line-height:1.6}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.hero-copy :focus-visible,.quote :focus-visible,.footer :focus-visible{outline-color:var(--paper)}
img{display:block;max-width:100%;object-fit:contain}
.frame{display:grid;grid-template-columns:minmax(20px,1fr) minmax(0,1200px) minmax(20px,1fr)}
.container{grid-column:2;min-width:0}
.small{font-size:var(--t-small);font-weight:500;line-height:1.75}
.demo-bar{background:var(--ink);color:var(--paper);font-size:var(--t-small);font-weight:500;text-align:center;padding-block:var(--s4)}
.header{background:var(--paper);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s12);min-height:76px;padding-block:var(--s12)}
.wordmark{display:flex;align-items:center;gap:var(--s8);font-size:var(--t-card);font-weight:800;min-height:44px;line-height:1.5}
.brand-mark{display:block;width:12px;height:12px;background:var(--brand);flex-shrink:0}
.header nav{display:none}
.button{display:flex;align-items:center;justify-content:center;gap:var(--s8);border:1px solid transparent;border-radius:var(--r-pill);height:52px;padding-inline:var(--s24);background:var(--brand);color:var(--paper);font-size:var(--t-card);font-weight:700;line-height:1.25;text-align:center;cursor:pointer}
.header-wa{padding-inline:var(--s16);height:44px;flex-shrink:0}
.wa-icon{display:inline-block;width:22px;height:22px;flex-shrink:0;background:currentColor;mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjAuNSAzLjVBMTEuOCAxMS44IDAgMCAwIDEyIDBDNS40IDAgMCA1LjQgMCAxMmMwIDIuMS42IDQuMiAxLjYgNkwwIDI0bDYuMi0xLjZBMTIgMTIgMCAwIDAgMTIgMjRjNi42IDAgMTItNS40IDEyLTEyIDAtMy4yLTEuMi02LjItMy41LTguNVpNMTIgMjJhMTAgMTAgMCAwIDEtNS4xLTEuNGwtLjQtLjItMy43IDEgMS0zLjYtLjItLjRBMTAgMTAgMCAxIDEgMTIgMjJabTUuNS03LjVjLS4zLS4yLTEuOC0uOS0yLjEtMXMtLjUtLjItLjcuMmwtMSAxLjFjLS4yLjItLjQuMi0uNy4xLS4zLS4yLTEuMy0uNS0yLjUtMS42LTEtLjktMS42LTEuOS0xLjgtMi4yLS4yLS4zIDAtLjUuMS0uNmwuNS0uNi4zLS41Yy4xLS4yIDAtLjQgMC0uNkw4LjcgNi41Yy0uMy0uNi0uNS0uNS0uNy0uNWgtLjZjLS4yIDAtLjYuMS0uOS40cy0xLjEgMS4xLTEuMSAyLjYgMS4xIDMgMS4zIDMuMmMuMS4yIDIuMyAzLjUgNS42IDQuOS44LjMgMS40LjUgMS45LjYuOC4zIDEuNS4yIDIuMS4xLjYtLjEgMS44LS43IDItMS40LjMtLjcuMy0xLjMuMi0xLjQtLjEtLjItLjMtLjMtLjYtLjVaIi8+PC9zdmc+Cg==') center/contain no-repeat;-webkit-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjAuNSAzLjVBMTEuOCAxMS44IDAgMCAwIDEyIDBDNS40IDAgMCA1LjQgMCAxMmMwIDIuMS42IDQuMiAxLjYgNkwwIDI0bDYuMi0xLjZBMTIgMTIgMCAwIDAgMTIgMjRjNi42IDAgMTItNS40IDEyLTEyIDAtMy4yLTEuMi02LjItMy41LTguNVpNMTIgMjJhMTAgMTAgMCAwIDEtNS4xLTEuNGwtLjQtLjItMy43IDEgMS0zLjYtLjItLjRBMTAgMTAgMCAxIDEgMTIgMjJabTUuNS03LjVjLS4zLS4yLTEuOC0uOS0yLjEtMXMtLjUtLjItLjcuMmwtMSAxLjFjLS4yLjItLjQuMi0uNy4xLS4zLS4yLTEuMy0uNS0yLjUtMS42LTEtLjktMS42LTEuOS0xLjgtMi4yLS4yLS4zIDAtLjUuMS0uNmwuNS0uNi4zLS41Yy4xLS4yIDAtLjQgMC0uNkw4LjcgNi41Yy0uMy0uNi0uNS0uNS0uNy0uNWgtLjZjLS4yIDAtLjYuMS0uOS40cy0xLjEgMS4xLTEuMSAyLjYgMS4xIDMgMS4zIDMuMmMuMS4yIDIuMyAzLjUgNS42IDQuOS44LjMgMS40LjUgMS45LjYuOC4zIDEuNS4yIDIuMS4xLjYtLjEgMS44LS43IDItMS40LjMtLjcuMy0xLjMuMi0xLjQtLjEtLjItLjMtLjMtLjYtLjVaIi8+PC9zdmc+Cg==') center/contain no-repeat}




.hero-tag{justify-self:start;padding:var(--s4) var(--s12);border-radius:var(--r-pill);font-size:var(--t-small);font-weight:500;background:var(--brand);border:1px solid transparent}
.hero-copy p{opacity:.85;max-width:35ch;line-height:1.5}




.card{background:var(--paper);border-radius:var(--r-card);padding:var(--s24);border:1px solid var(--line)}
.picker{display:grid;gap:var(--s16);box-shadow:var(--shadow)}
.picker-group{display:grid;gap:var(--s8)}
.picker h2{font-size:var(--t-card);font-weight:700;line-height:1.6;display:flex;align-items:center;gap:var(--s8)}
.picker h2 bdi{font-size:var(--t-small);color:var(--muted);font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:var(--s8)}
.chip{min-height:44px;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:var(--s4) var(--s12);font-size:var(--t-card);font-weight:700;line-height:1.5}
.chip[aria-pressed='true']{background:color-mix(in srgb,var(--brand) 10%,var(--paper));border-color:var(--brand);color:color-mix(in srgb,var(--brand) 85%,var(--ink))}
.chip:disabled{cursor:default;color:var(--muted);background:var(--mist)}
.send-note{color:var(--muted);text-align:center}
.stats{padding-block:var(--s24);background:var(--brand);color:var(--paper)}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{display:grid;gap:var(--s4);text-align:center;padding:var(--s16);border-inline-end:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
.stat:nth-child(2n){border-inline-end:none}
.stat:nth-child(-n+2){border-bottom:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
.stat-number{color:var(--paper);font-size:var(--t-number);font-weight:800;line-height:1.3}
.stat-label{font-size:var(--t-small);font-weight:500;color:color-mix(in srgb,var(--paper) 85%,transparent)}
.stats-note{text-align:center;padding-block-start:var(--s12);color:color-mix(in srgb,var(--paper) 85%,transparent)}
.section{padding-block:var(--s48)}
.vehicles{background:var(--mist)}
.section-heading{display:flex;flex-direction:column;gap:var(--s12);padding-block-end:var(--s24)}
.section-heading>div{display:grid;gap:var(--s8)}
.section-heading>p,.eyebrow{color:var(--muted)}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}
.vehicle-card{display:grid;gap:var(--s8);padding:var(--s16);align-content:start}
.brand-latin{font-size:var(--t-card);font-weight:800;line-height:1.6;overflow-wrap:anywhere}
.brand-ar{color:var(--muted)}
.model-tags{display:flex;flex-wrap:wrap;gap:var(--s8);padding-block-start:var(--s8)}
.model-tag{border:1px solid var(--line);border-radius:var(--r-input);background:color-mix(in srgb,var(--brand) 8%,var(--paper));min-height:44px;padding:var(--s4) var(--s8);font-size:var(--t-card);font-weight:700;line-height:1.4;max-width:100%;overflow-wrap:anywhere}
.category-card{padding:initial;display:grid;overflow:hidden;text-align:start;border:1px solid var(--line);border-radius:var(--r-card);background:var(--mist);min-width:0}
.category-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--paper)}
.category-caption{font-family:'Noto Kufi Arabic',sans-serif;display:flex;align-items:center;justify-content:space-between;gap:var(--s8);padding:var(--s16);min-height:84px;font-size:var(--t-card);font-weight:700;line-height:1.5}
.category-arrow{flex-shrink:0}
.category-card[aria-pressed='true']{border-color:var(--brand)}
.section-footnote{color:var(--muted);padding-block-start:var(--s24)}
.visit{position:relative;isolation:isolate;height:320px;background:var(--ink);color:var(--paper)}
.visit picture,.visit-shade{position:absolute;inset:0;z-index:-1}
.visit picture img{height:100%;width:100%;object-fit:cover}
.visit-shade{background:linear-gradient(0deg,var(--ink),transparent)}
.visit-content{display:flex;flex-direction:column;justify-content:space-between;padding-block:var(--s32)}
.visit-tag{align-self:end;border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);border-radius:var(--r-input);padding:var(--s4) var(--s8);background:color-mix(in srgb,var(--ink) 60%,transparent)}
.visit-content>div{display:grid;gap:var(--s8)}
.quote{background:var(--brand);color:var(--paper)}
.quote .eyebrow,.quote .section-heading>p{color:var(--paper);opacity:.85}
.quote-grid{display:grid;gap:var(--s24)}
.quote .card{color:var(--ink)}
.quote-form{display:grid;gap:var(--s16)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s16)}
label{display:flex;flex-direction:column;gap:var(--s8);font-size:var(--t-small);font-weight:500;min-width:0}
input,select,textarea{width:100%;min-width:0;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-input);padding:var(--s8) var(--s12);font-size:var(--t-body);font-weight:400;min-height:48px;line-height:1.75}
select{padding-inline-end:var(--s24)}
textarea{resize:vertical;min-height:112px}
.full-field{grid-column:1/-1}
.quote-form>.small,.message-card>.small{color:var(--muted)}
.form-error{border:1px solid var(--ink);border-radius:var(--r-input);padding:var(--s8);color:var(--ink)!important}
.message-card{display:flex;flex-direction:column;gap:var(--s16);box-shadow:var(--shadow);align-self:start}
.preview-heading{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8);justify-content:space-between}
.preview-tag{background:color-mix(in srgb,var(--brand) 10%,var(--paper));color:color-mix(in srgb,var(--brand) 85%,var(--ink));border-radius:var(--r-input);padding:var(--s4) var(--s8)}
.message-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-input);padding:var(--s16);font-size:var(--t-body);line-height:1.75;min-height:280px}
.button-ink{background:var(--ink);color:var(--paper)}
.quote :is(input,select,textarea,.button-ink):focus-visible{outline-color:var(--ink)}
.footer{background:var(--ink);color:var(--paper);padding-block:var(--s48)}
.footer-grid{display:grid;gap:var(--s24)}
.footer-name{font-size:var(--t-card);font-weight:800}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s8);border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);padding-block-start:var(--s24)}
.contact-widget{position:fixed;left:16px;bottom:16px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s12)}
.widget-toggle{width:56px;height:56px;border:1px solid var(--paper);border-radius:var(--r-pill);background:var(--brand);color:var(--paper);box-shadow:var(--shadow);display:grid;place-items:center;padding:var(--s12)}
.widget-toggle .wa-icon{width:28px;height:28px}
.contact-bubble{width:min(300px,calc(100vw - 32px));box-shadow:var(--shadow);display:grid;gap:var(--s8);position:relative;padding:var(--s24);padding-block-start:var(--s48)}
.close-button{position:absolute;top:4px;left:4px;width:44px;height:44px;border:none;background:transparent;border-radius:var(--r-pill);font-size:var(--t-card);padding:var(--s4)}
.contact-bubble p{color:var(--muted)}
.noscript-note{background:var(--mist);padding-block:var(--s24)}
.reveal-pending{opacity:0;transform:translateY(16px)}
.reveal-show{opacity:1;transform:translateY(0);transition:opacity 400ms ease,transform 400ms ease}
section{scroll-margin-top:96px}
@media(min-width:768px){
 :root{--t-hero:64px;--t-section:40px;--t-card:18px;--t-body:17px;--t-small:14px;--t-number:52px}
 .frame{grid-template-columns:minmax(32px,1fr) minmax(0,1200px) minmax(32px,1fr)}
 
 
 
 
 .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s24)}
 .vehicle-card{padding:var(--s24)}
 .brand-latin{font-size:var(--t-section);line-height:1.3}
 .section{padding-block:var(--s64)}
 .section-heading{flex-direction:row;align-items:end;justify-content:space-between;gap:var(--s24);padding-block-end:var(--s32)}
 .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .stat{padding:var(--s24)}
 .stat:nth-child(2n){border-inline-end:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
 .stat:last-child{border-inline-end:none}
 .stat:nth-child(-n+2){border-bottom:none}
 .visit{height:440px}
 .visit-content{padding-block:var(--s48)}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-bottom{grid-column:1/-1}
}
@media(min-width:1100px){
 .header nav{display:flex;gap:var(--s24);font-weight:500}
 .header nav a{display:flex;align-items:center;min-height:44px;min-width:44px}
 
 
 
 .hero-copy p{max-width:none}
 
 
 
 .picker{grid-column:1/7;grid-row:2}
 .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s24)}
 .message-card{position:sticky;top:108px}
}
@media(max-width:359px){.wordmark{gap:var(--s4)}.header-wa{padding-inline:var(--s12)}.picker{padding:var(--s16)}.card.vehicle-card{padding:var(--s16)}.form-grid{grid-template-columns:minmax(0,1fr)}.category-caption{padding:var(--s16)}.brand-latin{font-size:var(--t-card)}}
@media(prefers-reduced-motion:reduce){.reveal-pending,.reveal-show{opacity:1;transform:none;transition:none}}

/* Scene height is independent from the overlapping picker. */
.hero{position:relative;isolation:isolate;padding-block-end:var(--s48);--scene-height:620px}
.hero-scene{position:absolute;inset-inline:0;top:0;height:var(--scene-height);z-index:-1;overflow:hidden}
.hero-scene picture,.hero-shade{position:absolute;inset:0}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:42% center}
.hero-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 38%,transparent),color-mix(in srgb,var(--ink) 20%,transparent) 40%,transparent 70%)}
.hero-grid{display:grid;gap:var(--s24);grid-template-columns:minmax(0,1fr);grid-template-rows:500px auto;padding-block-start:var(--s48)}
.hero-copy{display:grid;gap:var(--s16);color:var(--paper);align-self:start}
.image-note{position:absolute;bottom:64px;left:20px;z-index:2;color:var(--paper);border-radius:var(--r-input);padding:var(--s4) var(--s8);background:color-mix(in srgb,var(--ink) 60%,transparent)}
@media(min-width:768px){
 .hero{--scene-height:700px}
 .hero-grid{grid-template-rows:564px auto;padding-block-start:var(--s64)}
 .hero-copy{justify-self:start;width:calc((100% + 24px)*2/3 - 24px)}
 .hero-scene img{object-position:left center}
 .hero-shade{background:linear-gradient(270deg,color-mix(in srgb,var(--ink) 38%,transparent),color-mix(in srgb,var(--ink) 20%,transparent) 40%,transparent 70%)}
 .image-note{left:32px}
}
@media(min-width:1100px){
 .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:364px auto}
 .hero-copy{grid-column:1/7;grid-row:1;width:100%}
 .picker{grid-column:1/7;grid-row:2}
 .hero-scene img{object-position:center}
 .image-note{bottom:24px;left:max(32px,calc((100% - 1200px)/2))}
}