:root{
  /* Dark charcoal / near-black base + gold accent + white identity.
     Variable names kept as --theme-* so every existing rule re-skins automatically;
     --gold-* added as the accent scale for buttons, ribbons, dividers, and highlights. */
  --theme-50: #f4f4f5;
  --theme-100: #e4e4e7;
  --theme-200: #c7c7cc;
  --theme-300: #8f8f97;
  --theme-400: #5c5c64;
  --theme-500: #38383f;
  --theme-600: #1c1c20;
  --theme-700: #101012;
  --theme-800: #0a0a0b;
  --theme-900: #000000;

  --gold-300: #e8d18a;
  --gold-400: #d9b45c;
  --gold-500: #c8992f;
  --gold-600: #b3841f;
  --gold-700: #8f6a18;

  --brand-green: #38383f;

  --footer-bg: #0e0e10;
  --ink: #0a0a0b;
  --ink-soft: #3a3a3e;
  --muted: #6b6b70;
  --border: #d4d4d8;
  --surface: #ffffff;
  --surface-alt: #f7f7f8;

  --radius-sm: 4px;
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-card: 0px;

  --shadow-card: 0 10px 20px -5px rgba(0,0,0,.22), 0 4px 8px -4px rgba(0,0,0,.14);
  --shadow-header: 0 1px 2px 0 rgba(0,0,0,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.16), 0 4px 6px -4px rgba(0,0,0,.12);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .3s;

  --font-body: 'Tajawal', 'Montserrat', sans-serif;
  --font-heading: 'Tajawal', 'Montserrat', sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

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

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

.main-nav ul, .main-nav li{
    list-style: none;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--font-heading);
}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 1.5rem;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

}

/* Top Announcement Bar */

.top-bar{
  background:var(--surface-alt);
  color:var(--ink-soft);
  font-size:.8125rem;
  text-align:center;
  padding:.6rem 1rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.top-bar em{ font-style:italic; }

.top-bar .dot{
  margin:0 .5rem;
  color:var(--muted);
}

@media (max-width:480px){
  .top-bar{
    font-size:.6875rem;
    padding:.5rem .6rem;
  }

  .top-bar .dot{ margin:0 .3rem; }

}

/* Header / Nav */

.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-header);
  position:sticky;
  top:0;
  z-index:1000;
  transition:transform .35s var(--ease), box-shadow var(--dur) var(--ease);
}

.site-header.header-hidden{ transform:translateY(-100%); }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.6rem 1.5rem;
  max-width:1280px;
  margin:0 auto;
  min-height:68px;
}

.site-logo{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

.site-logo img{
  width:130px;
  height:auto;
  max-height:44px;
  object-fit:contain;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:2rem;
  flex:1;
  justify-content:center;
}

.main-nav a{
  font-size:.9375rem;
  font-weight:500;
  color:var(--ink);
  position:relative;
  padding:.3rem 0;
  transition:color var(--dur) var(--ease);
}

.main-nav a::after{
  content:"";
  position:absolute;
  right:0;
  left:0;
  bottom:0;
  height:2px;
  background:var(--gold-500);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur) var(--ease);
}

.main-nav a:hover{ color:var(--gold-600); }

.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{
  display:flex;
  align-items:center;
  gap:1rem;
}

.social-icons{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding-inline-start:1rem;
  border-inline-start:1px solid var(--border);
}

.social-icons a{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social-icons a:hover{
  color:var(--theme-600);
  transform:translateY(-2px);
}

.social-icons svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

.hamburger{
  display:none;
  width:28px;
  height:22px;
  position:relative;
  flex-direction:column;
  justify-content:space-between;
}

.hamburger span{
  display:block;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:all var(--dur) var(--ease);
}

.hamburger.active span:nth-child(1){ transform:translateY(10px) rotate(45deg); }

.hamburger.active span:nth-child(2){ opacity:0; }

.hamburger.active span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* Mobile off-canvas menu */

.mobile-menu{
  position:fixed;
  inset:0 0 0 auto;
  right:0;
  width:min(85vw,360px);
  height:100%;
  background:var(--surface);
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  z-index:1200;
  padding:1.5rem;
  overflow-y:auto;
}

.mobile-menu.open{ transform:translateX(0); }

.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
  z-index:1100;
}

.mobile-menu-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
}

.mobile-menu-close{
  font-size:1.5rem;
  line-height:1;
  color:var(--ink);
}

.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.mobile-nav-links a{
  display:block;
  padding:.9rem .5rem;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--ink);
  border-bottom:1px solid var(--border);
  transition:color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.mobile-nav-links a:hover{
  color:var(--theme-600);
  padding-inline-start:.9rem;
}

.mobile-menu .social-icons{
  margin-top:1.5rem;
  border:none;
  padding:0;
}

/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
  padding:1rem 1.5rem;
  border-radius:var(--radius-sm);
  background:var(--gold-500);
  color:#0a0a0b;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap;
}

.btn:hover{
  background:var(--gold-600);
  transform:translateY(-1px);
  box-shadow:var(--shadow-lg);
}

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

.btn-outline{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.7);
}

.btn-outline:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

.btn-icon{
  transition:transform var(--dur) var(--ease);
  display:inline-flex;
}

.btn:hover .btn-icon{ transform:translateX(-4px); }

.btn-block{ width:100%; }

/* Hero */

.hero{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url('images/hero-home.jpg');
  background-size:cover;
  background-position:center 40%;
  overflow:hidden;
  padding:6rem 1.5rem 7rem;
}

.hero.hero--brand{ background-image:url('images/hero-brand.jpg'); }

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.4) 55%, rgba(10,10,11,.68) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  max-width:760px;
  margin:0 auto;
}

.hero-eyebrow{
  font-size:1.125rem;
  font-weight:400;
  margin-bottom:.25rem;
  opacity:.95;
  animation:fadeUp .7s var(--ease) both;
}

.hero-title{
  font-size:clamp(2.75rem, 6vw, 80px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:1.25rem;
  animation:fadeUp .7s .1s var(--ease) both;
}

.hero-rule{
  width:64px;
  height:2px;
  background:var(--gold-500);
  margin:0 auto 1.25rem;
  animation:growLine .7s .3s var(--ease) both;
}

.hero-tagline{
  font-size:18px;
  font-weight:400;
  margin-bottom:2rem;
  animation:fadeUp .7s .2s var(--ease) both;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@keyframes growLine{
  from{
    width:0;
    opacity:0;
  }

  to{
    width:64px;
    opacity:1;
  }

}

/* Search widget — each field is its OWN white box (not one shared panel) */

.search-widget{
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:.5rem;
  max-width:715px;
  margin:0 auto;
  animation:fadeUp .7s .3s var(--ease) both;
}

.search-widget select{
  appearance:none;
  padding: 12px;
  border:none;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:14px;
  color:var(--ink-soft);
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat left .75rem center;transition:box-shadow var(--dur) var(--ease);
  height:56px;
}

.search-widget select:hover, .search-widget select:focus{
  box-shadow:0 0 0 2px var(--gold-500);
  outline:none;
}

.search-widget .btn{
  padding:0 1.75rem;
  height:56px;
  border-radius:var(--radius-sm);
}

.hero-cta-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-top:1.5rem;
  flex-wrap:wrap;
  animation:fadeUp .7s .4s var(--ease) both;
}

/* Quick action band + cards (pulled up -80px over hero) */

.quick-actions-band{
  background:var(--theme-600);
  padding-bottom:3rem;
  position:relative;
}

.quick-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:-80px;
  position:relative;
  z-index:5;
  max-width:1280px;
  margin-inline:auto;
  padding:0 1.5rem;
}

.quick-card{
  background-size:cover;
  background-position:center;
  border-radius:var(--radius-lg);
  padding:2.5rem;
  color:#fff;
  min-height:252px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position:relative;
  overflow:hidden;
}

.quick-card-a{
  background-image:url('images/quick-card-a.jpg');
  background-position:center 40%;
}

.quick-card-a.quick-card-a--brand{ background-image:url('images/quick-card-a-alt.jpg'); }

.quick-card-b{
  background-image:url('images/quick-card-b.jpg');
  background-position:center 55%;
}

.quick-card-b.quick-card-b--brand{ background-image:url('images/quick-card-b-alt.jpg'); }

.quick-card-c{
  background-image:url('images/quick-card-c.jpg');
  background-position:center 65%;
}

.quick-card-c.quick-card-c--brand{ background-image:url('images/quick-card-c-alt.jpg'); }

.quick-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.35) 55%, rgba(4,4,5,.78) 100%);
}

.quick-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 60%);
}

.quick-card-icon, .quick-card h3, .quick-card p{
  position:relative;
  z-index:1;
}

.quick-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 35px -8px rgba(0,0,0,.3);
}

.quick-card-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  color:var(--gold-600);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.25rem;
  transition:transform var(--dur) var(--ease);
}

.quick-card-icon .svg-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.quick-card:hover .quick-card-icon{ transform:scale(1.1) rotate(-8deg); }

.quick-card h3{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.4rem;
}

.quick-card p{
  font-size:.9375rem;
  opacity:.9;
  margin:0;
  line-height:1.5;
}

/* Section headers */

.section{
  padding:5rem 0;
  position:relative;
}

.section-alt{ background:var(--surface-alt); }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:2.5rem;
  flex-wrap:wrap;
}

.section-head h2{
  font-size:1.875rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:.35rem;
}

.section-head p{
  color:var(--muted);
  font-size:1rem;
  margin:0;
}

.section-actions{
  display:flex;
  gap:.75rem;
  align-items:center;
}

.section-nav-btn{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--theme-600);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur) var(--ease);
  flex-shrink:0;
}

.section-nav-btn:hover{ background:var(--theme-700); }

.section-watermark{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.section-watermark img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.vehicle-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  position:relative;
  z-index:1;
}

.vehicle-card{
  background:#fff;
  border-radius:var(--radius-card);
  overflow:visible;
  border:2px solid transparent;
  box-shadow:0 18px 20px -12px rgba(20,30,45,.18);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display:flex;
  flex-direction:column;
}

.vehicle-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-500);
  box-shadow:0 22px 32px -10px rgba(10,10,11,.32), 0 4px 10px rgba(10,10,11,.16);
}

.vehicle-media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--surface-alt);
}

.vehicle-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:9%;
  box-sizing:border-box;
  transition:transform .5s var(--ease);
}

.vehicle-card:hover .vehicle-media img{ transform:scale(1.08); }

.vehicle-media-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .5s var(--ease);
}

.vm-fallback-1{ background:linear-gradient(135deg,#2b2f36,#15171b); }

.vm-fallback-2{ background:linear-gradient(135deg,#1f2937,#0f1520); }

.vm-fallback-3{ background:linear-gradient(135deg,#374151,#1a1f29); }

.vm-fallback-4{ background:linear-gradient(135deg,#31363f,#16191f); }

.vehicle-card:hover .vehicle-media-fallback{ transform:scale(1.08); }

.placeholder-car-icon{
  width:65%;
  height:auto;
}

.about-image-fallback{
  width:100%;
  height:100%;
  min-height:380px;
  background:linear-gradient(135deg, var(--theme-600), var(--theme-800));
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-image-fallback .placeholder-car-icon{ width:45%; }

.vehicle-badge-wrap{
  position:relative;
  margin-top:-32px;
  z-index:2;
  padding:8px 0;
}

.vehicle-badge{
  position:relative;
  min-height:64px;
}

.vehicle-badge-fill{
  position:absolute;
  inset:0;
  background:var(--gold-500);
  /* gold accent edge at the diagonal cut */
  clip-path:polygon(25% 0, 100% 0, 100% 100%, 37% 100%);
}

.vehicle-badge-fill::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--theme-700);
  clip-path:polygon(calc(25% + 16px) 0, 100% 0, 100% 100%, calc(37% + 16px) 100%);
}

.vehicle-badge-text{
  position:relative;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:64px;
  margin-left:37%;
  /* never render past the fill's narrowest (bottom) edge — physical side, independent of text direction */
  width:calc(63% - 24px);
  padding:10px 24px 10px 0;
  text-align:right;
  unicode-bidi:embed;
  box-sizing:border-box;
}

.vehicle-badge-text h3{
  font-size:.8125rem;
  font-weight:700;
  margin-bottom:.1rem;
  line-height:1.3;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  text-align:right;
}

.vehicle-badge-text span{
  font-size:.6875rem;
  opacity:.9;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vehicle-info{
  padding:16px 24px 24px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.vehicle-specs{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding-bottom:.65rem;
  margin-bottom:.15rem;
  border-bottom:1px solid var(--border);
}

.vehicle-spec{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  flex:1;
  min-width:0;
  color:var(--ink-soft);
}

.vehicle-spec svg{
  color:var(--gold-600);
  flex-shrink:0;
}

.vehicle-spec span{
  font-size:.6875rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.vehicle-price-label{
  font-size:.9375rem;
  font-weight:500;
  color:var(--ink);
  margin-top:.5rem;
}

.vehicle-price{
  font-size:1.375rem;
  font-weight:800;
  color:var(--gold-600);
  display:flex;
  align-items:baseline;
  gap:.35rem;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.riyal-symbol{
  display:inline-block;
  line-height:0;
}

.riyal-symbol svg{
  height:.72em;
  width:auto;
  fill:currentColor;
  display:inline-block;
  transform:translateY(0.08em);
}

.vehicle-price small{
  font-size:.6875rem;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}

.vehicle-installment{
  font-size:.8125rem;
  font-weight:600;
  color:var(--gold-700);
  margin-top:.15rem;
  display:flex;
  align-items:baseline;
  gap:.25rem;
}

.vehicle-installment .riyal-symbol{ font-size:.75rem; }

/* Financing banner — diagonal skew-cut split overlay */

.financing-banner{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  background-image:url('images/financing-banner.jpg');
  background-size:cover;
  background-position:center 55%;
  overflow:hidden;
}

.financing-banner.financing-banner--brand{ background-image:url('images/financing-banner-alt.jpg'); }

.financing-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(4,10,18,.6) 0%, rgba(4,10,18,.65) 55%, rgba(4,10,18,.92) 100%);
}

.financing-content h2, .financing-eyebrow{ text-shadow:0 2px 16px rgba(0,0,0,.5); }

.financing-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:0 1.5rem;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}

.financing-eyebrow{
  font-size:1rem;
  font-weight:400;
  margin-bottom:.5rem;
  opacity:.9;
}

.financing-content h2{
  font-size:clamp(2.25rem,5vw,3.5rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.75rem;
  max-width:520px;
}

/* Testimonials */

.testimonials-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2.5rem;
  flex-wrap:wrap;
  gap:1rem;
}

.testimonials-head h2{
  font-size:1.875rem;
  font-weight:700;
}

.testimonials-actions{
  display:flex;
  align-items:center;
  gap:1rem;
}

.link-underline{
  color:var(--gold-600);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color var(--dur) var(--ease);
}

.link-underline:hover{ color:var(--gold-700); }

.testimonial-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.testimonial-card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

.testimonial-top{
  background:var(--theme-600);
  color:#fff;
  padding:1.25rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  background:var(--brand-green);
  flex-shrink:0;
  border:2px solid rgba(255,255,255,.4);
}

.testimonial-top h4{
  font-size:1.0625rem;
  font-weight:700;
}

.testimonial-body{ padding:1.25rem; }

.stars{
  color:#f5a623;
  letter-spacing:2px;
  margin-bottom:.75rem;
  font-size:.9rem;
}

.testimonial-body p{
  font-size:.9375rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin-bottom:.75rem;
}

.testimonial-body .read-more{
  font-size:.875rem;
  font-weight:700;
  color:var(--gold-600);
}

/* Full-bleed CTA banner (View All Inventory) — dark diagonal split */

.cta-banner{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  background-image:url('images/cta-banner-brand.jpg');
  background-size:cover;
  background-position:center 40%;
  overflow:hidden;
}

.cta-banner.cta-banner--brand{ background-image:url('images/cta-banner-brand.jpg'); }

.cta-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(4,8,12,.55) 0%, rgba(4,8,12,.6) 55%, rgba(4,8,12,.9) 100%);
}

.cta-content h2, .cta-content .financing-eyebrow{ text-shadow:0 2px 16px rgba(0,0,0,.5); }

.cta-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:0 1.5rem;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}

/* About / What we do */

.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:center;
}

.about-text h2{
  font-size:2.25rem;
  font-weight:800;
  color:var(--ink);
  margin-bottom:1.25rem;
}

.about-text p{
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:1.1rem;
}

.about-image{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  align-self:stretch;
}

.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  min-height:380px;
  display:block;
}

.about-links{
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
  margin-top:1.75rem;
}

.about-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-align:center;
}

.about-link-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--theme-600);
  color:var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.about-link:hover .about-link-icon{
  background:var(--gold-500);
  color:#0a0a0b;
  transform:translateY(-3px);
}

.about-link span{
  font-size:.875rem;
  font-weight:700;
  color:var(--ink);
}

/* Map + Footer */

.map-embed{
  width:100%;
  height:420px;
  border:0;
  filter:grayscale(15%);
  display:block;
}

.site-footer{
  background:var(--footer-bg);
  color:#fff;
}

.footer-top{ padding:3.5rem 0; }

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2.5rem;
}

.footer-col h4{
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:1.25rem;
}

.footer-col ul li{ margin-bottom:.65rem; }

.footer-col a{
  color:rgba(255,255,255,.85);
  font-size:.9375rem;
  transition:color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.footer-col a:hover{
  color:#fff;
  padding-inline-start:.3rem;
}

.hours-row{
  display:flex;
  justify-content:space-between;
  font-size:.9375rem;
  padding:.35rem 0;
  color:rgba(255,255,255,.85);
}

.hours-row.today{
  color:#fff;
  font-weight:700;
}

.hours-row span:first-child{ min-width:90px; }

.footer-address p{
  color:rgba(255,255,255,.85);
  line-height:1.7;
  margin-bottom:1rem;
}

.footer-address strong{ color:#fff; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.1rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8125rem;
  color:rgba(255,255,255,.6);
  flex-wrap:wrap;
  gap:.5rem;
}

.footer-bottom a{
  color:rgba(255,255,255,.75);
  transition:color var(--dur) var(--ease);
}

.footer-bottom a:hover{ color:#fff; }

/* Reveal-on-scroll */

[data-reveal]{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

.js-reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(24px);
}

.js-reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

[data-reveal="stagger"] > *{ transition-delay:calc(var(--i,0) * 80ms); }

/* Slider track */

.slider-track{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:.25rem;
}

.slider-track::-webkit-scrollbar{ display:none; }

.slider-track > *{
  scroll-snap-align:start;
  flex:0 0 auto;
}

/* Responsive */

@media (max-width: 1024px){
  .quick-actions{
    grid-template-columns:1fr;
    margin-top:-3rem;
  }

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

  .testimonial-track{ grid-template-columns:1fr 1fr; }

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

  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .header-inner{
    min-height:auto;
    padding:1rem 1.5rem;
  }

  .site-logo img{
    width:120px;
    height:auto;
  }

  .site-logo img{
    width:140px;
    height:auto;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:2rem 1.5rem;
  }

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

}

/* Mobile-only phone/pin quick actions (hidden on desktop) */

.mobile-quick-actions{ display:none; }

/* Language switcher */

.lang-switch-desktop{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--ink);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.35rem .7rem;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lang-switch-desktop:hover{
  border-color:var(--gold-500);
  color:var(--gold-600);
}

.mobile-lang-btn{
  font-size:.8125rem;
  font-weight:800;
  letter-spacing:.02em;
}

.mobile-lang-link{ color:var(--gold-600) !important; }

/* Sticky call/WhatsApp CTA — floating round buttons on desktop/tablet,
   full-width bottom bar on mobile. Starts hidden and appears once the
   user scrolls down a bit (JS toggles .is-visible on #stickyCta). */

.sticky-cta{
  position:fixed;
  z-index:1300;
  display:flex;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

.sticky-cta.is-visible{
  opacity:1;
  pointer-events:auto;
}

.sticky-cta{
  left:1.5rem;
  bottom:1.5rem;
  flex-direction:column-reverse;
  gap:.85rem;
  background:none;
  box-shadow:none;
  transform:translateY(12px);
}

.sticky-cta.is-visible{ transform:translateY(0); }

.sticky-cta-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sticky-cta-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

.sticky-cta-btn span{
  /* label text hidden on the round desktop buttons;
  icon communicates the action */
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.sticky-cta-call{ background:var(--theme-600); }

.sticky-cta-whatsapp{ background:#25D366; }

@media (max-width: 768px){
  /* Mobile: iOS-style frosted glass bottom bar that respects the iPhone home-indicator safe area */

  .sticky-cta{
    left:0;
    right:0;
    bottom:0;
    flex-direction:row;
    gap:0;
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 -1px 0 rgba(0,0,0,.04), 0 -8px 24px rgba(0,0,0,.08);
    border-radius:20px 20px 0 0;
    overflow:hidden;
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }

  .sticky-cta.is-visible{ transform:translateY(0); }

  .sticky-cta-btn{
    flex:1;
    width:auto;
    height:auto;
    border-radius:14px;
    gap:.4rem;
    padding:.75rem .5rem;
    margin:0 .25rem;
    font-weight:600;
    font-size:.8125rem;
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
  }

  .sticky-cta-btn:hover{
    transform:none;
    box-shadow:none;
  }

  .sticky-cta-btn:active{
    transform:scale(.96);
    opacity:.85;
  }

  .sticky-cta-btn span{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    white-space:nowrap;
  }

  .main-nav, .header-actions .social-icons, .lang-switch-desktop{ display:none; }

  .hamburger{ display:flex; }

  .mobile-quick-actions{
    display:flex;
    align-items:center;
    gap:.5rem;
  }

  .mobile-quick-btn{
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    background:var(--theme-600);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
    flex-shrink:0;
  }

  .mobile-quick-btn:hover, .mobile-quick-btn:active{
    background:var(--theme-700);
    transform:translateY(-1px);
  }

  .search-widget{
    grid-template-columns:1fr;
    max-width:100%;
    gap:.75rem;
  }

  .search-widget select{ height:52px; }

  .search-widget .btn{ height:52px; }

  .hero{
    min-height:600px;
    padding-top:5rem;
    padding-bottom:5rem;
  }

  .hero-title{
    font-size:clamp(2.5rem,12vw,3.5rem);
    line-height:1.05;
  }

  .hero-cta-row{ flex-direction:column; }

  .hero-cta-row .btn{ width:100%; }

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

  .testimonial-track{ grid-template-columns:1fr; }

  .section{ padding:3.5rem 0; }

  .financing-content h2, .cta-content h2{ font-size:2rem; }

  .financing-banner::before, .cta-banner::before{
    width:100%;
    right:0;
    clip-path:none;
    background:rgba(0,0,0,.55);
  }

  /* Quick-action cards: fuller-bleed, less darkening, icon+text row like the reference */

  .quick-actions{
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .quick-card{
    min-height:220px;
    padding:1.75rem;
  }

  .quick-card::before{ background:linear-gradient(180deg, rgba(6,40,71,.35) 0%, rgba(6,40,71,.5) 100%); }

  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .section-actions{
    flex-wrap:wrap;
    width:100%;
  }

  .section-actions .btn{
    width:100%;
    order:3;
  }

  .similar-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .similar-nav{
    flex-wrap:wrap;
    width:100%;
  }

  .similar-nav .btn{
    width:100%;
    order:3;
  }

  .top-bar{
    font-size:.6875rem;
    padding:.5rem .75rem;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .top-bar::-webkit-scrollbar{ display:none; }

  .top-bar .dot{ margin:0 .35rem; }

  .type-filter{
    margin:1.25rem 0 1rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--border);
  }

  .price-filter{ margin:0 0 2rem; }

  .about-links{
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:.5rem;
  }

  .about-link{
    flex:1;
    min-width:0;
  }

  .about-link-icon{
    width:48px;
    height:48px;
  }

  .about-link-icon svg{
    width:18px;
    height:18px;
  }

  .about-link span{
    font-size:.75rem;
    white-space:nowrap;
  }

  .page-hero{ min-height:260px; }

  .stats-strip{ padding:2.25rem 0; }

  .stat-item h3{ font-size:2rem; }

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

  .timeline{ padding-inline-start:1.5rem; }

  .timeline-item::before{ right:calc(-1.5rem - 6px); }

  .page-header{ padding:2.5rem 0 2rem; }

  .brand-toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .brand-search{ max-width:100%; }

}

@media (max-width: 480px){
  .vehicle-grid{ grid-template-columns:1fr; }

  .header-inner{ padding:.7rem 1rem; }

  .site-logo img{
    width:125px;
    height:auto;
  }

  .site-logo img{
    width:135px;
    height:auto;
  }

}

/* Focus visibility (accessibility floor) */

a:focus-visible, button:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}

/* =========================================================
   صفحة تفاصيل السيارة — Vehicle Detail Page
   Reuses :root tokens from style.css (black/gold/white, Tajawal)
   ========================================================= */

.vehicle-page{ padding:1rem 0 4rem; }

.vehicle-crumbs{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.5rem;
}

.vehicle-crumbs a{
  color:var(--muted);
  transition:color var(--dur) var(--ease);
}

.vehicle-crumbs a:hover{ color:var(--gold-600); }

.vehicle-vin{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.4rem;
}

.vehicle-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:2rem;
  align-items:start;
}

.vehicle-layout > *{ min-width:0; }

/* prevent grid items from refusing to shrink below content size */

@media (max-width:900px){
  .vehicle-layout{ grid-template-columns:1fr; }

  .vehicle-gallery{ position:static; }

  /* no sticky gallery on mobile - scrolls normally with the page */

  .gallery-main{
    width:100%;
    height:auto;
    aspect-ratio:685/457;
  }

  .brand-grid{ grid-template-columns:repeat(4, 1fr); }

}

/* ---------- Gallery ---------- */

.vehicle-gallery{
  position:sticky;
  top:14px;
  align-self:start;
  min-width:0;
}

.gallery-main{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface-alt);
  width:100%;
  max-width:685px;
  aspect-ratio:685/457;
}

.gallery-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.gallery-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--theme-700);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  opacity:.9;
  transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.gallery-nav-btn:hover{
  opacity:1;
  background:var(--gold-600);
}

.gallery-nav-btn.prev{ right:12px; }

.gallery-nav-btn.next{ left:12px; }

.gallery-expand-btn{
  position:absolute;
  bottom:12px;
  left:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(10,10,11,.75);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  transition:background var(--dur) var(--ease);
}

.gallery-expand-btn:hover{ background:var(--gold-600); }

/* ---------- Lightbox (vanilla, no dependency) ---------- */

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(6,6,8,.94);
  align-items:center;
  justify-content:center;
}

.lightbox.open{ display:flex; }

.lightbox img{
  max-width:90vw;
  max-height:88vh;
  object-fit:contain;
  border-radius:var(--radius-sm);
}

.lightbox-close{
  position:absolute;
  top:18px;
  left:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur) var(--ease);
}

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

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur) var(--ease);
}

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

.lightbox-nav.prev{ right:18px; }

.lightbox-nav.next{ left:18px; }

.lightbox-counter{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:.85rem;
  background:rgba(255,255,255,.12);
  padding:.3rem .9rem;
  border-radius:999px;
  direction:ltr;
}

@media (max-width:600px){
  .lightbox-nav{
    width:40px;
    height:40px;
  }

  .lightbox-close{
    width:38px;
    height:38px;
  }

  .lead-form .field-row{
    flex-direction:column;
    gap:.9rem;
  }

  .filter-select{ max-width:100%; }

}

.gallery-thumbs{
  display:flex;
  gap:.5rem;
  margin-top:.5rem;
  overflow-x:auto;
  padding-bottom:.15rem;
}

.gallery-thumbs img{
  width:117px;
  height:119px;
  object-fit:contain;
  border-radius:var(--radius-sm);
  cursor:pointer;
  opacity:.65;
  flex-shrink:0;
  border:2px solid transparent;
  transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.gallery-thumbs img:hover{ opacity:.9; }

.gallery-thumbs img.active{
  opacity:1;
  border-color:var(--gold-500);
}

/* ---------- Sidebar: one continuous card, matches carmix.ca reference ---------- */

.vehicle-sidebar{
  align-self:start;
  min-width:0;
}

.vehicle-card-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* Share row lives at the top of the sidebar card */

.share-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
}

.share-row .share-label{
  font-size:.9rem;
  color:var(--ink-soft);
}

.share-icons{
  display:flex;
  gap:.5rem;
}

.share-icons button{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--surface-alt);
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  transition:all var(--dur) var(--ease);
}

.share-icons button:hover{
  background:var(--gold-500);
  color:#fff;
  border-color:var(--gold-500);
}

.share-icons svg{
  width:14px;
  height:14px;
}

/* Blue title + price + action-button band */

.price-band{
  background:var(--theme-700);
  color:#fff;
  padding:1.5rem;
}

.price-band h1{
  font-size:1.4rem;
  margin-bottom:.15rem;
}

.price-band .trim{
  color:var(--gold-400);
  font-size:.9rem;
}

.price-divider{
  height:1px;
  background:rgba(255,255,255,.15);
  margin:1rem 0;
}

.price-label{
  font-size:.8rem;
  color:rgba(255,255,255,.65);
}

.price-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.price-value{
  font-size:1.8rem;
  font-weight:800;
  display:flex;
  align-items:baseline;
  gap:.4rem;
}

.price-value .riyal-symbol{ font-size:1rem; }

.price-value .tax-note{
  font-size:.8rem;
  font-weight:400;
  color:rgba(255,255,255,.6);
}

.installment-block{ text-align:left; }

.installment-block .price-label{ margin-bottom:.2rem; }

.installment-value{
  font-size:1.8rem;
  font-weight:800;
  color:var(--gold-400);
  display:flex;
  align-items:baseline;
  gap:.4rem;
}

.installment-value .riyal-symbol{ font-size:1rem; }

.installment-value .per-month{
  font-size:.8rem;
  font-weight:400;
  color:rgba(255,255,255,.6);
}

.price-card-actions{
  display:flex;
  flex-direction:column;
}

.price-card-actions .btn{
  border-radius:var(--radius-sm);
  justify-content:center;
  padding:.85rem 1.25rem;
  margin-top:.85rem;
  width:100%;
}

.price-card-actions .btn-white{
  background:#fff;
  color:var(--theme-700);
}

.price-card-actions .btn-white:hover{ background:var(--surface-alt); }

.price-card-actions .btn-gold{
  background:var(--gold-500);
  color:#fff;
}

.price-card-actions .btn-gold:hover{ background:var(--gold-600); }

.price-card-actions .btn-outline-white{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.6);
}

.price-card-actions .btn-outline-white:hover{ background:rgba(255,255,255,.1); }

.price-card-actions .btn-row{
  display:flex;
  gap:.75rem;
  margin-top:.85rem;
}

.price-card-actions .btn-row .btn{
  margin-top:0;
  flex:1;
}

/* Brand / sub-brand block — main make + model badges, same card system */

.brand-block{
  padding:1.5rem;
  border-bottom:1px solid var(--border);
}

.brand-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.brand-pair-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1.25rem 1rem;
  background:var(--surface, #fff);
}

.brand-pair-item + .brand-pair-item{ border-right:1px solid var(--border); }

.brand-pair-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#f4f4f5;
  border:1px solid var(--border);
  color:var(--muted);
  flex-shrink:0;
  overflow:hidden;
}

.brand-pair-logo svg{
  width:32px;
  height:32px;
}

.brand-pair-logo img{
  width:70%;
  height:70%;
  object-fit:contain;
}

.brand-pair-name{
  font-size:.85rem;
  font-weight:700;
  color:var(--ink);
  text-align:center;
}

/* White spec grid directly under the blue band, same card */

.spec-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.25rem 1rem;
  padding:1.5rem;
  border-bottom:1px solid var(--border);
}

.spec-item .spec-label{
  font-size:.7rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.spec-item .spec-value{
  font-weight:700;
  color:var(--ink);
  margin-top:.2rem;
  font-size:.95rem;
}

/* Vehicle description inside the same card */

.card-section{
  padding:1.5rem;
  border-bottom:1px solid var(--border);
}

.card-section:last-child{ border-bottom:none; }

.card-section h4{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1rem;
  margin-bottom:.75rem;
  color:var(--ink);
}

.card-section h4 svg{
  width:18px;
  height:18px;
  color:var(--gold-500);
  flex-shrink:0;
}

.card-section p{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:.75rem;
}

.card-section p:last-child{ margin-bottom:0; }

.card-section p strong{ color:var(--ink); }

.card-section a{
  color:var(--gold-600);
  text-decoration:underline;
  font-weight:600;
}

/* Vehicle Features accordion — same card system as description */

.features-block{
  padding:1.5rem;
  border-bottom:1px solid var(--border);
}

.features-block h4{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1rem;
  margin-bottom:.75rem;
  color:var(--ink);
}

.features-block h4 svg{
  width:18px;
  height:18px;
  color:var(--gold-500);
  flex-shrink:0;
}

.features-block > p{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.75;
  margin-bottom:1rem;
}

.features-accordion{ border-top:1px solid var(--border); }

.feature-cat{ border-bottom:1px solid var(--border); }

.feature-cat-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1rem 0;
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  text-align:right;
}

.feature-cat-toggle:hover{ color:var(--gold-600); }

.feature-cat-toggle svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--ink);
  transition:transform .2s ease;
}

.feature-cat.open .feature-cat-toggle{ color:var(--gold-600); }

.feature-cat.open .feature-cat-toggle svg{
  transform:rotate(180deg);
  color:var(--gold-600);
}

.feature-cat-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.feature-cat.open .feature-cat-panel{ max-height:1000px; }

.feature-cat-list{
  list-style:none;
  padding:0 0 1.1rem;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.feature-cat-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  font-size:.85rem;
  color:var(--ink-soft);
}

.feature-cat-list svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:.15rem;
  color:var(--gold-500);
}

/* Second blue band: "Make It Yours" + built-in lead form */

.make-yours-band{
  background:var(--theme-700);
  color:#fff;
  padding:1.1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.make-yours-band h4{ font-size:1.15rem; }

.make-yours-band svg{
  width:20px;
  height:20px;
  opacity:.85;
}

.lead-form{ padding:1.5rem; }

.lead-form .our-price-label{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.15rem;
}

.lead-form .our-price-value{
  font-size:1.5rem;
  font-weight:800;
  color:var(--ink);
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}

.lead-form .field-row{
  display:flex;
  gap:.75rem;
  margin-bottom:.9rem;
}

.lead-form label{
  display:block;
  font-size:.8rem;
  color:var(--ink-soft);
  margin-bottom:.3rem;
}

.lead-form label .req{ color:var(--gold-600); }

.lead-form input, .lead-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.6rem .75rem;
  font-family:inherit;
  font-size:.9rem;
  transition:border-color var(--dur) var(--ease);
}

.lead-form input:focus, .lead-form textarea:focus{
  outline:none;
  border-color:var(--gold-500);
}

.lead-form textarea{
  min-height:90px;
  resize:vertical;
  margin-bottom:1rem;
}

.lead-form button[type="submit"]{
  width:100%;
  justify-content:center;
  background:var(--theme-700);
  color:#fff;
  border-radius:var(--radius-sm);
}

.lead-form button[type="submit"]:hover{ background:var(--theme-800); }

/* ---------- Similar Vehicles ---------- */

.similar-section{ margin-top:3rem; }

.similar-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}

.similar-head h2{ font-size:1.4rem; }

.similar-head p{
  color:var(--muted);
  font-size:.9rem;
  margin-top:.2rem;
}

.similar-nav{
  display:flex;
  gap:.5rem;
  align-items:center;
}

.similar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.5rem;
}

/* ---------- Map + Footer-adjacent block ---------- */

.map-section{ margin-top:3rem; }

.map-embed{
  width:100%;
  height:340px;
  border:0;
  border-radius:var(--radius-lg);
  filter:grayscale(15%);
}

.vehicle-badge-fill{
  position:absolute;
  inset:0;
  background:var(--gold-500);
  clip-path:polygon(25% 0, 100% 0, 100% 100%, 37% 100%);
}

.vehicle-badge-text{
  position:relative;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:64px;
  margin-left:37%;
  width:calc(63% - 24px);
  padding:10px 24px 10px 0;
  text-align:right;
  unicode-bidi:embed;
  box-sizing:border-box;
}

.sticky-cta-btn span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.top-bar{
  background:var(--surface-alt);
  color:var(--ink-soft);
  font-size:.8125rem;
  text-align:center;
  padding:.6rem 1rem;
  border-bottom:1px solid var(--border);
}

.price-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.25rem 0 2rem;
  position:relative;
  z-index:1;
}

.price-chip{
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--ink-soft);
  font-size:.875rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.price-chip:hover{
  border-color:var(--gold-500);
  color:var(--ink);
}

.price-chip.is-active{
  background:var(--theme-600);
  border-color:var(--theme-600);
  color:#fff;
}

.vehicle-card.is-price-hidden{ display:none; }

.type-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1.25rem 0 0;
  position:relative;
  z-index:1;
}

.type-chip{
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--ink-soft);
  font-size:.875rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.type-chip:hover{
  border-color:var(--gold-500);
  color:var(--ink);
}

.type-chip.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.vehicle-card.is-type-hidden{ display:none; }

.vehicle-grid .vehicle-card:nth-child(-n+4) .vehicle-media img{ padding:3%; }

.riyal-symbol{
  font-family:'SaudiRiyal', sans-serif;
  font-weight:700;
}

@media (max-width: 380px){
  .top-bar{ font-size:.625rem; }

  .about-link-icon{
    width:42px;
    height:42px;
  }

  .about-link-icon svg{
    width:16px;
    height:16px;
  }

  .about-link span{ font-size:.6875rem; }

}

.brand-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:.75rem;
}

.brand-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.1rem .75rem;
  text-decoration:none;
  color:var(--ink);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.brand-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
  border-color:var(--gold-500);
}

.brand-logo{
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  object-fit:contain;
  padding:9px;
}

@media (max-width:520px){
  .brand-logo{
    width:56px;
    height:56px;
    padding:7px;
  }

  .brand-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:.5rem;
  }

}

.brand-card h3{
  margin:0;
  font-size:.875rem;
  font-weight:700;
  color:var(--ink);
}

.page-banner.inventory{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background-image: url(images/hero-brand.jpg);
    background-size: cover;
    background-position: center 40%;
    overflow: hidden;
    padding: 3rem 1.5rem;
}
.page-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.55) 60%, rgba(10,10,11,.78) 100%);
}

.page-banner-content{
  position:relative;
  z-index:2;
  text-align:center;
  color:#fff;
  max-width:640px;
  margin:0 auto;
}

.page-banner-eyebrow{
  font-size:.9rem;
  color:var(--gold-400);
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:.5rem;
}

.page-banner h1{
  font-size:clamp(1.9rem, 4vw, 2.75rem);
  font-weight:700;
  margin-bottom:.5rem;
}

.page-banner-rule{
  width:56px;
  height:2px;
  background:var(--gold-500);
  margin:0 auto .9rem;
}

.page-banner p{
  font-size:.95rem;
  color:rgba(255,255,255,.85);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:var(--muted);
  padding:1rem 1.5rem 0;
  max-width:1280px;
  margin:0 auto;
}

.breadcrumb a{
  color:var(--muted);
  transition:color var(--dur) var(--ease);
}

.breadcrumb a:hover{ color:var(--gold-600); }

.breadcrumb .sep{ opacity:.5; }

.breadcrumb .current{
  color:var(--ink);
  font-weight:600;
}

.inventory-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.5rem 0 1rem;
  border-bottom:1px solid var(--border);
  margin-bottom:1.5rem;
}

.inventory-count{
  font-size:.9rem;
  color:var(--ink-soft);
}

.inventory-count strong{
  color:var(--ink);
  font-weight:700;
}

.sort-field{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.sort-field label{
  font-size:.85rem;
  color:var(--muted);
  white-space:nowrap;
}

.sort-field select{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.55rem 2rem .55rem .75rem;
  font-family:inherit;
  font-size:.85rem;
  color:var(--ink);
  background:var(--surface-alt);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233a3a3e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left .6rem center;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}

.sort-field select:hover, .sort-field select:focus{
  border-color:var(--gold-500);
  outline:none;
}

.filters-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1rem;
}

.filters-toggle{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.7rem 1.1rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink);
  font-size:.9rem;
  font-weight:700;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.filters-toggle:hover{ border-color:var(--gold-500); }

.filters-toggle svg{
  flex-shrink:0;
  color:var(--gold-500);
}

.filters-toggle-caret{
  transition:transform .25s var(--ease);
  margin-inline-start:.15rem;
  color:var(--ink-soft) !important;
}

.filters-toggle[aria-expanded="true"] .filters-toggle-caret{ transform:rotate(180deg); }

.filters-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 .35rem;
  border-radius:999px;
  background:var(--gold-500);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
}

.filters-clear{
  font-size:.85rem;
  font-weight:600;
  color:var(--gold-600);
  text-decoration:underline;
  padding:.5rem .25rem;
}

.filters-clear:hover{ color:var(--gold-700); }

.filters-panel{
  overflow:hidden;
  max-height:2000px;
  transition:max-height .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease);
  opacity:1;
}

.filters-panel.is-collapsed{
  max-height:0;
  opacity:0;
  pointer-events:none;
}

.filters-panel-inner{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface-alt);
  padding:1.25rem 1.25rem .5rem;
  margin-bottom:1.5rem;
}

.filter-group-label{
  font-size:.75rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:.6rem;
}

.filter-group-label:not(:first-child){ margin-top:1.1rem; }

.filters-panel-inner .type-filter,
.filters-panel-inner .price-filter,
.filters-panel-inner .make-filter{ margin:0 0 .75rem; }

.filters-apply-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--theme-700);
  color:#fff;
  border-radius:var(--radius-sm);
  padding:.75rem 1.5rem;
  font-weight:700;
  font-size:.85rem;
  margin-top:.75rem;
}

.filters-apply-btn:hover{ background:var(--theme-800); }

@media (max-width:768px){
  .filters-panel-inner{ padding:1.1rem 1rem .9rem; }

  .filters-apply-btn{
    display:flex;
    width:100%;
    padding:.85rem 1rem;
    font-size:.9rem;
  }

  .inventory-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .sort-field{ width:100%; }

  .sort-field select{ flex:1; }

  .page-banner{
    min-height:200px;
    padding:2.5rem 1.25rem;
  }

  .brand-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .brand-header-title{
    text-align:right;
    width:100%;
  }

  .brand-header-left{
    width:100%;
    justify-content:space-between;
  }

  .model-filter-row{ justify-content:flex-start; }

  .model-filter-label{
    margin-inline-end:0;
    width:100%;
  }

}

.filter-search{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.6rem .85rem;
  margin-bottom:1.1rem;
  transition:border-color var(--dur) var(--ease);
}

.filter-search:focus-within{ border-color:var(--gold-500); }

.filter-search svg{
  color:var(--muted);
  flex-shrink:0;
}

.filter-search input{
  flex:1;
  border:0;
  background:none;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
  min-width:0;
}

.filter-search input:focus{ outline:none; }

.filter-search input::placeholder{ color:var(--muted); }

.filter-search-clear{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--surface-alt);
  color:var(--ink-soft);
  font-size:.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.filter-search-clear:hover{
  background:var(--gold-500);
  color:#fff;
}

.filter-select{
  width:100%;
  max-width:260px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.6rem 2.2rem .6rem .75rem;
  font-family:inherit;
  font-size:.85rem;
  color:var(--ink);
  background:var(--surface);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233a3a3e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left .7rem center;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease);
  margin-bottom:.25rem;
}

.filter-select:hover, .filter-select:focus{
  border-color:var(--gold-500);
  outline:none;
}

.fuel-filter, .drivetrain-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0 0 .75rem;
}

.fuel-chip, .drivetrain-chip{
  padding:.5rem 1rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#fff;
  color:var(--ink-soft);
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.fuel-chip:hover, .drivetrain-chip:hover{
  border-color:var(--gold-500);
  color:var(--ink);
}

.fuel-chip.is-active, .drivetrain-chip.is-active{
  background:var(--theme-600);
  border-color:var(--theme-600);
  color:#fff;
}

.vehicle-card.is-fuel-hidden, .vehicle-card.is-drivetrain-hidden,
.vehicle-card.is-year-hidden, .vehicle-card.is-search-hidden{ display:none; }

.make-filter{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.75rem;
}

.make-chip{
  padding:.5rem 1rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--surface);
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}

.make-chip:hover{
  border-color:var(--gold-500);
  color:var(--gold-600);
}

.make-chip.is-active{
  background:var(--theme-700);
  border-color:var(--theme-700);
  color:#fff;
}

.inventory-empty{
  display:none;
  text-align:center;
  padding:4rem 1.5rem;
  color:var(--muted);
}

.inventory-empty.is-visible{ display:block; }

.inventory-empty svg{
  color:var(--gold-500);
  margin-bottom:1rem;
}

.inventory-empty h3{
  color:var(--ink);
  font-size:1.1rem;
  margin-bottom:.4rem;
}

.inventory-empty p{
  font-size:.9rem;
  margin-bottom:1.25rem;
}

a.vehicle-card{
  display:block;
  color:inherit;
}

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin:3rem 0 1rem;
  flex-wrap:wrap;
}

.pagination a, .pagination span{
  min-width:40px;
  height:40px;
  padding:0 .5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  font-size:.85rem;
  font-weight:600;
  color:var(--ink-soft);
  transition:all var(--dur) var(--ease);
}

.pagination a:hover{
  border-color:var(--gold-500);
  color:var(--gold-600);
}

.pagination .is-current{
  background:var(--theme-700);
  border-color:var(--theme-700);
  color:#fff;
}

.pagination .dots{
  border:none;
  color:var(--muted);
}

.pagination .page-nav{
  gap:.4rem;
  font-weight:600;
}

.pagination .page-nav svg{
  width:16px;
  height:16px;
}

.main-nav a.is-current-nav{ color:var(--gold-600); }

.main-nav a.is-current-nav::after{ transform:scaleX(1); }

.page-hero{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  background-image:url('__ABOUT_IMG_URL__');
  background-size:cover;
  background-position:center 30%;
  overflow:hidden;
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(4,4,5,.72) 0%, rgba(4,4,5,.6) 55%, rgba(4,4,5,.4) 100%);
}

.page-hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  padding:0 1.5rem;
  max-width:1280px;
  margin:0 auto;
  width:100%;
}

.page-hero-content h1{
  font-size:clamp(2rem,4.5vw,3rem);
  font-weight:800;
  margin-bottom:.6rem;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}

.page-crumbs{
  font-size:.875rem;
  color:rgba(255,255,255,.85);
  margin-bottom:1rem;
}

.page-crumbs a{
  color:rgba(255,255,255,.85);
  transition:color var(--dur) var(--ease);
}

.page-crumbs a:hover{ color:var(--gold-400); }

.page-crumbs span{ color:var(--gold-400); }

.page-hero-tagline{
  font-size:1.0625rem;
  color:rgba(255,255,255,.9);
  max-width:560px;
  line-height:1.6;
}

.stats-strip{
  background:var(--theme-600);
  padding:3rem 0;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  text-align:center;
}

.stat-item h3{
  font-size:2.5rem;
  font-weight:800;
  color:var(--gold-500);
  margin-bottom:.35rem;
  font-family:var(--font-heading);
}

.stat-item p{
  color:rgba(255,255,255,.85);
  font-size:.9375rem;
  margin:0;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}

.value-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem 1.5rem;
  text-align:center;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.value-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card);
  border-color:var(--gold-500);
}

.value-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--theme-600);
  color:var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.25rem;
}

.value-card h3{
  font-size:1.125rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:.6rem;
}

.value-card p{
  font-size:.9125rem;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

.timeline{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding-inline-start:2rem;
  border-inline-start:2px solid var(--border);
}

.timeline-item{
  position:relative;
  padding-bottom:2.25rem;
}

.timeline-item:last-child{ padding-bottom:0; }

.timeline-item::before{
  content:"";
  position:absolute;
  right:calc(-2rem - 7px);
  top:.3rem;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold-500);
  border:3px solid var(--surface);
  box-shadow:0 0 0 2px var(--gold-500);
}

.timeline-year{
  font-size:.875rem;
  font-weight:800;
  color:var(--gold-600);
  margin-bottom:.35rem;
}

.timeline-item h4{
  font-size:1.125rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:.35rem;
}

.timeline-item p{
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

.page-header{
  position:relative;
  padding:3.5rem 0 2.5rem;
  background:var(--theme-600);
  color:#fff;
  overflow:hidden;
}

.page-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(200,153,47,.18), transparent 55%),
             radial-gradient(circle at 0% 100%, rgba(200,153,47,.12), transparent 50%);
}

.page-header .container{
  position:relative;
  z-index:1;
}

.page-crumbs{
  font-size:.85rem;
  color:rgba(255,255,255,.65);
  margin-bottom:.85rem;
}

.page-crumbs a{
  color:rgba(255,255,255,.65);
  transition:color var(--dur) var(--ease);
}

.page-header h1{
  font-size:clamp(2rem,4.5vw,2.75rem);
  font-weight:700;
  margin-bottom:.6rem;
}

.page-header p{
  color:rgba(255,255,255,.8);
  font-size:1rem;
  max-width:560px;
  margin:0;
}

.brand-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}

.brand-search{
  position:relative;
  flex:1;
  min-width:240px;
  max-width:380px;
}

.brand-search input{
  width:100%;
  height:48px;
  padding:0 2.75rem .1rem 1rem;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.9375rem;
  color:var(--ink);
  background:#fff;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.brand-search input::placeholder{ color:var(--muted); }

.brand-search input:focus{
  outline:none;
  border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(200,153,47,.15);
}

.brand-search svg{
  position:absolute;
  top:50%;
  right:.9rem;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}

.brand-count{
  font-size:.875rem;
  color:var(--muted);
  white-space:nowrap;
}

.brand-count strong{
  color:var(--ink);
  font-weight:700;
}

.brand-empty{
  display:none;
  text-align:center;
  padding:3.5rem 1rem;
  color:var(--muted);
}

.brand-empty.is-visible{ display:block; }

.brand-empty svg{
  margin-bottom:1rem;
  color:var(--border);
}

.brand-empty p{
  font-size:1rem;
  margin:0;
}

.brand-card.is-filtered-out{ display:none; }

.brand-count-badge{
  font-size:.75rem;
  font-weight:600;
  color:var(--muted);
  margin-top:-.35rem;
}

.brand-count-badge strong{
  color:var(--gold-600);
  font-weight:700;
}

.page-hero{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  background:linear-gradient(120deg, var(--theme-800) 0%, var(--theme-600) 100%);
  overflow:hidden;
}

.page-hero-content h1{
  font-size:clamp(2rem,4.5vw,3rem);
  font-weight:800;
  margin-bottom:.6rem;
}

.purchase-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2.5rem;
  align-items:start;
}

.purchase-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.type-tabs{
  display:flex;
  background:var(--surface-alt);
  border-bottom:1px solid var(--border);
}

.type-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:1.25rem .75rem;
  font-size:.9375rem;
  font-weight:700;
  color:var(--ink-soft);
  text-align:center;
  border-bottom:3px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.type-tab svg{
  width:22px;
  height:22px;
}

.type-tab:hover{
  color:var(--ink);
  background:rgba(0,0,0,.02);
}

.type-tab.is-active{
  color:var(--gold-600);
  border-color:var(--gold-500);
  background:var(--surface);
}

.lead-form{ padding:2rem; }

.lead-form .form-intro{
  margin-bottom:1.5rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--border);
}

.lead-form .form-intro h3{
  font-size:1.15rem;
  font-weight:800;
  color:var(--ink);
  margin-bottom:.35rem;
}

.lead-form .form-intro p{
  font-size:.875rem;
  color:var(--muted);
  margin:0;
  line-height:1.6;
}

.lead-form label{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}

.lead-form input, .lead-form select, .lead-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.7rem .85rem;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease);
}

.lead-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left .85rem center;
  padding-left:2.25rem;
}

.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{
  outline:none;
  border-color:var(--gold-500);
}

.lead-form textarea{
  min-height:110px;
  resize:vertical;
}

.lead-form .field-group{ margin-bottom:.9rem; }

.lead-form .field-note{
  font-size:.75rem;
  color:var(--muted);
  margin-top:.3rem;
}

.lead-form fieldset{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.9rem 1rem;
  margin-bottom:.9rem;
}

.lead-form fieldset legend{
  font-size:.8125rem;
  font-weight:700;
  color:var(--ink);
  padding:0 .4rem;
}

.lead-form .radio-row{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
}

.lead-form .radio-option{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.875rem;
  color:var(--ink-soft);
}

.lead-form .radio-option input{
  width:auto;
  accent-color:var(--gold-500);
}

.lead-form button[type="submit"]{
  width:100%;
  justify-content:center;
  background:var(--theme-700);
  color:#fff;
  border-radius:var(--radius-sm);
  margin-top:.5rem;
}

.type-panel{ display:none; }

.type-panel.is-active{ display:block; }

.purchase-side{
  position:sticky;
  top:6.5rem;
}

.side-card{
  background:var(--theme-600);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:1.75rem;
  margin-bottom:1.25rem;
}

.side-card h3{
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:.75rem;
}

.side-card ul{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.side-card li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.875rem;
  color:rgba(255,255,255,.9);
  line-height:1.5;
}

.side-card li svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--gold-500);
  margin-top:.1rem;
}

.side-contact{
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  text-align:center;
}

.side-contact p{
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:1rem;
}

.side-contact .btn{ width:100%; }

@media (max-width: 900px){
  .purchase-layout{ grid-template-columns:1fr; }

  .purchase-side{ position:static; }

}

@media (max-width: 640px){
  .type-tab{
    font-size:.8125rem;
    padding:1rem .5rem;
  }

  .type-tab svg{
    width:19px;
    height:19px;
  }

  .lead-form{ padding:1.25rem; }

  .lead-form .field-row{
    flex-direction:column;
    gap:.9rem;
  }

  .page-hero{ min-height:220px; }

  .finance-form .finance-field{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
  }

  .finance-form .finance-field input,
  .finance-form .finance-field select{
    max-width:100%;
    width:100%;
  }

  .finance-form .finance-field-toggle{ align-items:flex-start; }

  .finance-submit{
    width:100%;
    margin-inline-start:0;
  }

  .finance-field-pair{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

}

.finance-form .form-intro{
  border-bottom:none;
  margin-bottom:1.75rem;
}

.finance-form .finance-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.5rem;
}

.finance-form .finance-field label{
  flex:0 0 auto;
  margin:0;
  font-size:.9375rem;
  font-weight:700;
  color:#0d3b66;
  white-space:nowrap;
}

.finance-form .finance-field label .req{ color:var(--gold-600); }

.finance-form .finance-field input,
.finance-form .finance-field select{
  flex:1;
  max-width:420px;
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.85rem 1.25rem;
  font-size:.9rem;
  color:var(--ink);
  text-align:right;
}

.finance-form .finance-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  padding-left:2.5rem;
}

.finance-form .finance-field input:focus,
.finance-form .finance-field select:focus{
  outline:none;
  border-color:var(--gold-500);
  background:var(--surface);
}

.finance-form .finance-field input::placeholder{
  color:var(--muted);
  text-align:right;
}

.finance-form .finance-field-toggle{ align-items:center; }

.finance-toggle{
  display:flex;
  align-items:center;
  gap:1.25rem;
}

.finance-checkbox{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}

.finance-checkbox input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--gold-600);
  margin:0;
}

.finance-divider{
  border:none;
  border-top:1px solid var(--border);
  margin:0 0 1.5rem;
}

.finance-form button.finance-submit[type="submit"]{
  display:block;
  margin-inline-start:auto;
  background:#f5941f;
  color:#fff;
  padding:.85rem 2.5rem;
  border-radius:var(--radius-sm);
}

.finance-form button.finance-submit[type="submit"]:hover{ background:#e08312; }

.finance-field-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem 1.5rem;
  margin-bottom:1.5rem;
}

.finance-field-pair .finance-field{
  margin-bottom:0;
  flex-direction:column;
  align-items:stretch;
  gap:.5rem;
}

.finance-field-pair .finance-field label{ white-space:normal; }

.finance-field-pair .finance-field input,
.finance-field-pair .finance-field select{
  max-width:none;
  width:100%;
}

.fleet-form .finance-field-stack{
  flex-direction:column;
  align-items:stretch;
  gap:.5rem;
  margin-bottom:1.5rem;
}

.fleet-form .finance-field-stack label{ white-space:normal; }

.fleet-form .finance-field-stack textarea{
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.85rem 1.25rem;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink);
  min-height:120px;
  resize:vertical;
  text-align:right;
}

.fleet-form .finance-field-stack textarea::placeholder{ color:var(--muted); }

.fleet-form .finance-field-stack textarea:focus{
  outline:none;
  border-color:var(--gold-500);
  background:var(--surface);
}

.fleet-form .finance-submit{
  width:100%;
  margin-inline-start:0;
  text-align:center;
}

.brand-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  padding:1.75rem 0;
  border-bottom:1px solid var(--border);
}

.brand-header-title{ text-align:right; }

.brand-header-title h1{
  font-size:1.6rem;
  font-weight:800;
  color:var(--ink);
}

.brand-header-bio{
  font-size:.88rem;
  color:var(--ink-soft);
  margin-top:.35rem;
  line-height:1.6;
}

.brand-header-left{
  display:flex;
  align-items:center;
  gap:1.75rem;
  flex-wrap:wrap;
}

.brand-header-stats{
  display:flex;
  align-items:center;
  gap:1.75rem;
}

.brand-header-stat{ text-align:center; }

.brand-header-stat strong{
  display:block;
  font-size:1.3rem;
  font-weight:800;
  color:var(--gold-600);
  line-height:1.2;
}

.brand-header-stat span{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  margin-top:.15rem;
  white-space:nowrap;
}

.brand-header-logo{
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:var(--radius);
  background:var(--theme-700);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.brand-header-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
}

.brand-header-logo-text{
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.03em;
  text-align:center;
  padding:0 4px;
  line-height:1.3;
}

.model-filter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:flex-end;
  padding:1.5rem 0;
}

.model-filter-label{
  font-size:.9rem;
  font-weight:700;
  color:var(--ink);
  margin-inline-end:auto;
}

.model-chip{
  padding:.55rem 1.15rem;
  border:1.5px solid var(--border);
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--surface);
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}

.model-chip:hover{
  border-color:var(--gold-500);
  color:var(--gold-600);
}

.model-chip.is-active{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:#fff;
}