/* ==========================================================================
   Car Collection — Islamabad showroom
   Palette : showroom floor (cool off-white) + Pakistani number-plate green
   Type    : Archivo (display) / Inter (body) / JetBrains Mono (data + plates)
   Signature: the registration-plate tag that rides on every car card
   ========================================================================== */

:root{
  --paper:#F2F4F0;
  --surface:#FFFFFF;
  --surface-2:#E9ECE6;
  --ink:#101614;
  --ink-2:#1C2622;
  --line:#D9DED5;
  --line-2:#C6CDC1;
  --muted:#65726B;
  --green:#0E7A46;
  --green-dark:#0A5C34;
  --green-soft:#E4F1E9;
  --amber:#C98A00;
  --red:#B02B20;

  --r-sm:4px; --r:8px; --r-lg:14px;
  --shadow:0 1px 2px rgba(16,22,20,.05), 0 8px 24px -12px rgba(16,22,20,.18);
  --shadow-lg:0 2px 4px rgba(16,22,20,.06), 0 24px 48px -20px rgba(16,22,20,.28);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:Archivo,Inter,sans-serif; font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--green); color:#fff; padding:10px 16px; border-radius:var(--r)}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}

.eyebrow{
  font:700 .72rem/1 Archivo,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); display:block; margin-bottom:.9rem;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- Signature: registration plate tag ---------- */
.plate{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1.5px solid var(--ink); border-radius:5px; background:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.72rem;
  line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px #fff;
}
.plate b{background:var(--green); color:#fff; padding:6px 7px; font-weight:700}
.plate span{padding:6px 9px; color:var(--ink)}
.plate--lg{font-size:.86rem}
.plate--lg b,.plate--lg span{padding:9px 12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius:var(--r); border:1.5px solid transparent;
  font:600 .95rem/1 Inter,sans-serif; cursor:pointer; transition:.18s ease;
  text-align:center;
}
.btn-primary{background:var(--green); color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{border-color:var(--line-2); background:transparent; color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface)}
.btn-wa{background:#1FA855; color:#fff}
.btn-wa:hover{background:#188743}
.btn-call{background:var(--ink); color:#fff; padding:.65rem 1rem; font-size:.85rem}
.btn-call:hover{background:var(--green)}
.btn-block{width:100%}
.btn-sm{padding:.55rem 1rem; font-size:.85rem}

/* ---------- Top bar + header ---------- */
.topbar{background:var(--ink); color:#B9C4BD; font-size:.78rem}
.topbar-in{display:flex; justify-content:space-between; gap:1rem; padding:8px 20px; flex-wrap:wrap}
.topbar-loc::before{content:'◉ '; color:var(--green)}

.site-head{position:sticky; top:0; z-index:40; background:rgba(242,244,240,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:.65rem}
.brand-logo{max-height:46px; width:auto}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  background:var(--ink); color:#fff; border-radius:var(--r-sm);
  font:800 .95rem/1 Archivo,sans-serif; letter-spacing:.04em;
  border:2px solid var(--green);
}
.brand-text{display:flex; flex-direction:column; font:800 1.12rem/1.1 Archivo,sans-serif; letter-spacing:-.02em}
.brand-text small{font:500 .68rem/1.4 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

.nav{display:flex; align-items:center; gap:1.5rem}
.nav a{font-size:.93rem; font-weight:500; color:var(--ink-2); padding:4px 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--green)}
.nav a.is-active{border-bottom-color:var(--green); color:var(--green)}
.nav a.btn{border-bottom:none}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{width:24px; height:2px; background:var(--ink); transition:.2s}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--ink); color:#EEF3F0; overflow:hidden}
.hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:6px;
  background:repeating-linear-gradient(90deg,var(--green) 0 42px,#fff 42px 84px);
  opacity:.85;
}
.hero-in{display:grid; grid-template-columns:1.05fr 1fr; gap:3rem; align-items:center; padding:72px 20px 84px}
.hero h1{color:#fff; margin-bottom:1rem}
.hero h1 em{font-style:normal; color:#7FD3A4}
.hero-lead{color:#AFBDB5; font-size:1.06rem; max-width:46ch}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.8rem}
.hero-stats{display:flex; gap:2.4rem; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid #2A342F; flex-wrap:wrap}
.hero-stat b{display:block; font:700 1.7rem/1 Archivo,sans-serif; color:#fff}
.hero-stat span{font:500 .74rem/1.4 'JetBrains Mono',monospace; letter-spacing:.09em; text-transform:uppercase; color:#8B9A92}
.hero-figure{position:relative}
.hero-figure img{border-radius:var(--r-lg); aspect-ratio:4/3; object-fit:cover; width:100%}
.hero-figure .plate{position:absolute; left:-14px; bottom:18px; box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hero-badge{
  position:absolute; top:16px; right:16px; background:#fff; color:var(--ink);
  border-radius:var(--r); padding:.7rem .95rem; box-shadow:var(--shadow-lg);
}
.hero-badge b{display:block; font:800 1.15rem/1.1 Archivo,sans-serif}
.hero-badge span{font-size:.72rem; color:var(--muted)}

/* ---------- Search strip ---------- */
.searchbar{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px; margin-top:-38px; position:relative; z-index:5}
.searchbar form{display:grid; grid-template-columns:repeat(5,1fr) auto; gap:12px; align-items:end}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font:600 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%; padding:.72rem .8rem; border:1.5px solid var(--line-2); border-radius:var(--r);
  background:#fff; color:var(--ink); font:400 .93rem Inter,sans-serif;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green); outline:none}
.field textarea{min-height:120px; resize:vertical}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.section--tight{padding:52px 0}
.section--dark{background:var(--ink); color:#DDE5E0}
.section--dark h2{color:#fff}
.section--soft{background:var(--surface-2)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.2rem; flex-wrap:wrap}
.sec-head p{color:var(--muted); max-width:60ch; margin:0}
.section--dark .sec-head p{color:#93A29A}

/* ---------- Car grid + card ---------- */
.car-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px}
.car-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s ease;
}
.car-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2)}
.car-media{position:relative; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden}
.car-media img{width:100%; height:100%; object-fit:cover; transition:.4s ease}
.car-card:hover .car-media img{transform:scale(1.04)}
.car-media .plate{position:absolute; left:12px; bottom:12px}
.car-flag{
  position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:99px;
  font:700 .68rem/1 Archivo,sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.car-flag--featured{background:var(--amber); color:#fff}
.car-flag--sold{background:var(--red); color:#fff}
.car-flag--reserved{background:var(--ink); color:#fff}
.car-shots{position:absolute; top:12px; right:12px; background:rgba(16,22,20,.75); color:#fff; padding:4px 8px; border-radius:var(--r-sm); font:600 .7rem/1 'JetBrains Mono',monospace}
.car-body{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1}
.car-title{font:700 1.05rem/1.3 Archivo,sans-serif; margin:0 0 .35rem}
.car-title a:hover{color:var(--green)}
.car-price{font:800 1.28rem/1 Archivo,sans-serif; color:var(--green); margin:.15rem 0 .1rem}
.car-price small{display:block; font:500 .72rem/1.4 'JetBrains Mono',monospace; color:var(--muted); letter-spacing:.05em; text-transform:uppercase}
.car-specs{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px;
  margin:.9rem 0 1rem; padding-top:.9rem; border-top:1px dashed var(--line-2);
  font-size:.83rem; color:var(--muted);
}
.car-specs span::before{content:attr(data-i) ' '; opacity:.7}
.car-actions{display:flex; gap:8px; margin-top:auto}
.car-actions .btn{flex:1; padding:.62rem .8rem; font-size:.85rem}

/* ---------- Inventory layout ---------- */
.inv{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; padding:36px 0 72px}
.filters{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; position:sticky; top:96px}
.filters h3{font-size:.95rem; margin-bottom:1rem}
.filters .field{margin-bottom:14px}
.filters-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chk-list{display:flex; flex-direction:column; gap:8px; max-height:210px; overflow:auto; padding-right:4px}
.chk{display:flex; align-items:center; gap:8px; font-size:.88rem; cursor:pointer}
.inv-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:18px; flex-wrap:wrap}
.inv-count{font:500 .85rem/1 'JetBrains Mono',monospace; color:var(--muted); letter-spacing:.05em}
.inv-count b{color:var(--ink)}

.pagination{display:flex; gap:6px; justify-content:center; margin-top:36px; flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px; height:40px; display:grid; place-items:center; padding:0 12px;
  border:1.5px solid var(--line-2); border-radius:var(--r); font:600 .88rem 'JetBrains Mono',monospace; background:#fff;
}
.pagination a:hover{border-color:var(--ink)}
.pagination .is-current{background:var(--green); border-color:var(--green); color:#fff}

/* ---------- Car detail ---------- */
.crumbs{font-size:.82rem; color:var(--muted); padding:18px 0}
.crumbs a:hover{color:var(--green)}
.detail{display:grid; grid-template-columns:1.55fr 1fr; gap:32px; align-items:start; padding-bottom:64px}
.gallery-main{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); aspect-ratio:4/3}
.gallery-main img{width:100%; height:100%; object-fit:cover}
.gallery-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:10px}
.gallery-thumbs button{padding:0; border:2px solid transparent; border-radius:var(--r); overflow:hidden; background:none; cursor:pointer; aspect-ratio:4/3}
.gallery-thumbs button.is-active{border-color:var(--green)}
.gallery-thumbs img{width:100%; height:100%; object-fit:cover}

.detail-head{margin-bottom:1.2rem}
.detail-head h1{font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:.5rem}
.detail-meta{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; font-size:.85rem; color:var(--muted)}

.price-box{background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:22px; position:sticky; top:96px}
.price-box .amount{font:800 2rem/1 Archivo,sans-serif; color:#fff}
.price-box .amount-alt{font:500 .8rem/1.4 'JetBrains Mono',monospace; color:#8FD6AF; letter-spacing:.06em; text-transform:uppercase; margin-top:.35rem}
.price-box .note{font-size:.82rem; color:#96A49C; margin:.9rem 0 1.2rem}
.price-box .btn{width:100%; margin-bottom:8px}
.price-box hr{border:0; border-top:1px solid #2A342F; margin:18px 0}
.price-box h4{color:#fff; font-size:.9rem; margin-bottom:.7rem}

.spec-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:0}
.spec-table th,.spec-table td{padding:12px 16px; text-align:left; font-size:.9rem}
.spec-table th{width:42%; font:500 .78rem/1.4 'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.spec-table td{font-weight:500}

.feature-group{margin-bottom:1.6rem}
.feature-group h4{font-size:.8rem; font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem}
.feature-list{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.feature-list li{background:var(--green-soft); color:var(--green-dark); border-radius:99px; padding:6px 13px; font-size:.84rem; font-weight:500}

.block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin-bottom:24px}
.block h2,.block h3{margin-top:0}

/* ---------- Feature strip / steps ---------- */
.usp{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.usp-item{background:var(--surface); padding:26px 22px}
.usp-item h3{font-size:1rem; margin-bottom:.4rem}
.usp-item p{color:var(--muted); font-size:.9rem; margin:0}
.usp-item .num{font:700 .74rem/1 'JetBrains Mono',monospace; color:var(--green); letter-spacing:.1em; display:block; margin-bottom:.9rem}
.section--dark .usp{background:#2A342F; border-color:#2A342F}
.section--dark .usp-item{background:var(--ink-2)}
.section--dark .usp-item p{color:#93A29A}

/* ---------- Brand row ---------- */
.brand-row{display:flex; flex-wrap:wrap; gap:10px}
.brand-chip{
  background:var(--surface); border:1.5px solid var(--line); border-radius:99px;
  padding:.55rem 1.1rem; font-size:.88rem; font-weight:500; transition:.15s;
}
.brand-chip:hover{border-color:var(--green); color:var(--green)}
.brand-chip b{font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--muted); margin-left:.35rem}

/* ---------- Testimonials ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px}
.quote p{font-size:.95rem}
.quote .who{font:600 .85rem Inter,sans-serif}
.quote .who span{display:block; font:500 .74rem 'JetBrains Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.stars{color:var(--amber); letter-spacing:.15em; font-size:.9rem; margin-bottom:.6rem}

/* ---------- Forms / alerts ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-grid .full{grid-column:1/-1}
.alert{padding:12px 16px; border-radius:var(--r); margin:0 0 16px; font-size:.9rem; border:1px solid}
.alert-success{background:var(--green-soft); border-color:#A9D7BE; color:var(--green-dark)}
.alert-danger{background:#FBEAE8; border-color:#EFC3BE; color:var(--red)}
.alert-info{background:#EAF0F6; border-color:#C7D6E6; color:#254A70}
.page-alert{max-width:var(--wrap); margin:16px auto 0; padding:0 20px}

/* ---------- Page hero (inner) ---------- */
.page-hero{background:var(--ink); color:#fff; padding:56px 0 60px; position:relative}
.page-hero::after{content:''; position:absolute; inset:auto 0 0 0; height:5px; background:repeating-linear-gradient(90deg,var(--green) 0 36px,#fff 36px 72px)}
.page-hero h1{color:#fff; margin-bottom:.5rem}
.page-hero p{color:#A5B3AB; max-width:62ch; margin:0}

/* ---------- Map / contact ---------- */
.map-embed{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); line-height:0}
.map-embed iframe{width:100%; height:380px; border:0}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start}
.info-list{list-style:none; padding:0; margin:0}
.info-list li{padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.info-list li:last-child{border-bottom:0}
.info-list b{font:500 .74rem 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; padding:0}
.faq-item summary{padding:16px 18px; cursor:pointer; font-weight:600; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; color:var(--green); font-family:'JetBrains Mono',monospace; font-size:1.2rem; line-height:1}
.faq-item[open] summary::after{content:'−'}
.faq-item .faq-body{padding:0 18px 18px; color:var(--muted); font-size:.93rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:#98A69E; margin-top:0; padding:56px 0 0; font-size:.9rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px}
.foot-col h4{color:#fff; font-size:.8rem; font-family:'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem}
.foot-col a{display:block; padding:5px 0; color:#98A69E}
.foot-col a:hover{color:#7FD3A4}
.brand--foot{margin-bottom:1rem}
.brand--foot .brand-text{color:#fff}
.foot-about p{max-width:42ch}
.socials{display:flex; gap:14px; margin-top:.5rem}
.socials a{display:inline; font-size:.85rem; border-bottom:1px solid #2E3B35}
.foot-strong{color:#fff !important; font-weight:600}
.foot-addr,.foot-hours{margin:0 0 .6rem}
.foot-base{display:flex; justify-content:space-between; gap:1rem; padding-top:20px; padding-bottom:24px; border-top:1px solid #232D28; font-size:.8rem; flex-wrap:wrap}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60; width:54px; height:54px;
  display:grid; place-items:center; border-radius:50%; background:#1FA855; color:#fff;
  box-shadow:0 10px 26px rgba(31,168,85,.4); transition:.2s;
}
.wa-float:hover{transform:scale(1.06)}

/* ---------- Empty state ---------- */
.empty{text-align:center; padding:64px 20px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg)}
.empty h3{margin-bottom:.4rem}
.empty p{color:var(--muted)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .hero-in{grid-template-columns:1fr; gap:2rem; padding:56px 20px 68px}
  .detail{grid-template-columns:1fr}
  .price-box{position:static}
  .inv{grid-template-columns:1fr}
  .filters{position:static}
  .searchbar form{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:10px 20px 18px;
    display:none; box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .nav a.btn{margin-top:12px; border-bottom:none}
  .searchbar form{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:48px 0}
  .hero-stats{gap:1.6rem}
  .topbar-hrs{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
@media print{
  .site-head,.topbar,.site-foot,.wa-float,.price-box .btn{display:none}
}

/* ---------- Split utility (main + aside) ---------- */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:1.6rem;text-align:left}}