/* =========================================================
   GLOBAL CAR BROKER - MAIN STYLES (CLEANED & ORDERED)
   ========================================================= */

/* ===============================================================
   1) RESET & ROOT VARIABLES
   =============================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Palette */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0;
  --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b;
  --white:#ffffff;

  /* Accents / helpers */
  --accent:#f59e0b; --text-dark:#111827; --border-light:#e5e7eb;

  /* Radius & shadows */
  --radius-lg:20px; --radius-md:14px;
  --shadow-1:0 10px 20px -12px rgba(15,23,42,.22);
  --shadow-2:0 12px 22px -12px rgba(15,23,42,.16);

  /* Price sizes */
  --price-size-card:clamp(1.1rem,1vw + .9rem,1.5rem);
  --price-size-featured:clamp(1.25rem,1vw + 1rem,1.75rem);
  --price-size-detail:clamp(1.5rem,1.2vw + 1rem,2rem);

  /* Detail page knobs */
  --hero-h: clamp(560px, 56vh, 740px);
  --spec-col-w: 430px;
  --spec-col-w-lg: 450px;
  --label-col: 170px;
  --spec-title-fs: 23px;
  --spec-term-fs: 12.5px;
  --spec-val-fs: 14px;
  --cta-gap: 16px; --cta-h: 44px; --cta-fs: .82rem;

  /* Features band knobs */
  --features-sticky-top:72px;
  --panel-nudge-top:-6px; --panel-nudge-mid:-8.5px; --panel-nudge-bottom:-6px; --panel-nudge:0px;
  --pill-h:44px; --pill-gap:10px; --pill-count:5; --desc-extra:32px; --desc-width:975px;

  /* Luxe */
  --luxe-ink:#0c1220; --luxe-ink-2:#182031; --luxe-edge:#e7ebf2;
  --luxe-gold:#f4c76b; --luxe-gold-2:#eaa83a; --luxe-soft:0 10px 26px -12px rgba(12,18,32,.22);

  /* Titles alignment */
  --feature-title-h:56px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===============================================================
   2) BASE TYPOGRAPHY & UTILITIES
   =============================================================== */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  background:var(--slate-50); color:var(--slate-900); line-height:1.6; overflow-x:hidden;
}
h1,h2,h3,h4{ font-weight:900; letter-spacing:-.025em; }
.text-amber{ color:var(--amber-400); }
.text-center{ text-align:center; }

/* ===============================================================
   3) LAYOUT CONTAINERS
   =============================================================== */
.container{ max-width:1280px; margin:0 auto; padding:0 1rem; }
.container-small{ max-width:896px; margin:0 auto; padding:0 1rem; }

/* ===============================================================
   4) NAVIGATION
   =============================================================== */
.nav{
  background:var(--slate-900); color:#fff; position:sticky; top:0; z-index:1000;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
}
.nav-container{
  max-width:1280px; margin:0 auto; padding:0 1rem; height:5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{ display:flex; align-items:center; gap:.75rem; }
.nav-icon{ color:var(--amber-400); }
.nav-title{ font-size:1.5rem; font-weight:900; }
.nav-menu{ display:none; align-items:center; gap:2rem; }
.nav-link{ color:#fff; text-decoration:none; font-weight:700; cursor:pointer; }
.nav-link:hover,.nav-link.active{ color:var(--amber-400); }
.nav-toggle{ display:flex; background:none; border:0; color:#fff; cursor:pointer; padding:.5rem; }
.hamburger{ width:28px; height:2px; background:#fff; position:relative; display:block; }
.hamburger::before,.hamburger::after{ content:""; position:absolute; width:28px; height:2px; background:#fff; }
.hamburger::before{ top:-8px; } .hamburger::after{ bottom:-8px; }
.nav-mobile{ display:none; padding:0 1rem 1.25rem; }
.nav-mobile.active{ display:block; }
.nav-link-mobile{ display:block; color:#fff; text-decoration:none; font-weight:700; padding:.5rem 0; }
.nav-link-mobile:hover{ color:var(--amber-400); }
@media (min-width:768px){ .nav-menu{ display:flex; } .nav-toggle{ display:none; } }

/* ===============================================================
   5) BUTTONS
   =============================================================== */
.btn{
  padding:.7rem 1.5rem; border-radius:var(--radius-md); font-weight:800; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, background .15s ease;
}
.btn-primary{ background:var(--amber-400); color:var(--slate-900); }
.btn-primary:hover{ background:var(--amber-300); transform:translateY(-1px); }
.btn-dark{ background:var(--slate-900); color:#fff; }
.btn-dark:hover{ background:var(--amber-500); }
.btn-large{ padding:1rem 2.25rem; font-size:1.075rem; }
.btn-full{ width:100%; justify-content:center; }

/* ===============================================================
   6) HERO SECTION
   =============================================================== */
.hero{
  background:linear-gradient(135deg,var(--slate-900) 0%,var(--slate-800) 50%,var(--slate-900) 100%);
  color:#fff; padding:5rem 1rem;
}
.hero-title{ font-size:3rem; line-height:1.1; margin-bottom:1.5rem; }
.hero-subtitle{ font-size:1.125rem; color:var(--slate-100); margin:0 auto 2.25rem; max-width:768px; }
@media (min-width:768px){ .hero-title{ font-size:4.25rem; } .hero-subtitle{ font-size:1.25rem; } }

/* ===============================================================
   7) FEATURED VEHICLES
   =============================================================== */
.featured-section{ padding:80px 20px; background:#f8f9fa; position:relative; }
.featured-section::before{
  content:""; position:absolute; left:0; right:0; top:-60px; height:220px;
  background:radial-gradient(1200px 220px at 50% 100%, rgba(15,23,42,.06), transparent 60%);
  pointer-events:none;
}
.section-header{ text-align:center; margin-bottom:50px; }
.section-title{ font-size:60px; font-weight:700; margin-bottom:10px; color:#1a1a1a; }
.section-subtitle{ font-size:18px; color:#6b7280; font-weight:400; }

.car-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr));
  gap:30px; max-width:1400px; margin:0 auto; justify-items:center;
}
.car-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .3s ease;
  transform-style:preserve-3d; will-change:transform;
  width:100%; max-width:380px; min-width:360px; display:flex; flex-direction:column;
}
.car-card:hover{ box-shadow:0 12px 32px rgba(0,0,0,.16); }
.car-card img.hero, .car-card > img.hero, #featuredCars .car-card img.hero{
  width:100%!important; height:240px!important; object-fit:cover!important; object-position:center!important;
  display:block!important; background:#1f2937!important; flex-shrink:0; margin:0!important; padding:0!important;
}
.thumb{
  min-width:80px; width:80px; height:60px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; transition:all .2s ease; flex-shrink:0;
}
.thumb:hover{ border-color:var(--amber-500); transform:translateY(-2px); }
.thumb.active{ border-color:var(--amber-500); box-shadow:0 2px 8px rgba(245,158,11,.4); }
.car-body{ padding:20px 24px 24px; flex:1; display:flex; flex-direction:column; }
.car-title{ font-size:24px; font-weight:700; color:#1a1a1a; margin-bottom:4px; line-height:1.2; min-height:29px; }
.car-year{ font-size:16px; color:#6b7280; margin-bottom:16px; min-height:22px; }
.car-meta{ display:flex; align-items:center; gap:6px; color:#6b7280; font-size:14px; margin-bottom:12px; min-height:20px; }
.car-specs{ font-size:14px; color:#4b5563; margin-bottom:16px; line-height:1.5; min-height:21px; }
.badges{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.badge{ background:#f3f4f6; color:#4b5563; padding:6px 12px; border-radius:6px; font-size:13px; font-weight:500; }
.view-btn{
  width:100%; padding:14px 20px; background:#1e293b; color:#fff; border:none; border-radius:10px;
  font-size:15px; font-weight:600; cursor:pointer; transition:all .3s ease; text-align:center; display:block; text-decoration:none;
}
.view-btn:hover{ background:#0f172a; transform:translateY(-1px); }

/* ===============================================================
   8) INLINE FILTER BAR
   =============================================================== */
.filter-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border-radius:14px; padding:14px 20px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  position:sticky; top:80px; z-index:20;
}
.filter-group{ display:flex; flex-direction:column; gap:4px; min-width:160px; }
.filter-label{ font-size:.85rem; font-weight:500; color:#6b7280; }
.filter-select{
  appearance:none; width:100%; padding:10px 38px 10px 12px; font-size:1rem; font-weight:500; color:var(--text-dark);
  border:1px solid var(--border-light); border-radius:10px; background:#fff;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; transition:all .15s ease;
}
.filter-select:hover{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.filter-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,158,11,.25); }
.filter-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.btn-reset{
  background:var(--accent); color:#fff; font-weight:700; border:none; border-radius:10px; padding:10px 18px; cursor:pointer;
  transition:all .2s ease; box-shadow:0 4px 10px rgba(245,158,11,.25);
}
.btn-reset:hover{ background:#d97706; box-shadow:0 6px 14px rgba(245,158,11,.3); }
.btn-reset:active{ transform:translateY(1px); }
.count-chip{
  padding:10px 18px; border-radius:10px; background:#f9fafb; color:#374151; font-weight:700; font-size:.95rem;
  border:1px solid #e5e7eb; box-shadow:inset 0 0 0 1px #f3f4f6;
}
@media (max-width:768px){
  .filter-bar{ flex-wrap:wrap; justify-content:flex-start; gap:12px; }
  .filter-group{ flex:1 1 45%; }
  .filter-actions{ width:100%; justify-content:flex-end; }
}

/* ===============================================================
   9) HOME FEATURES STRIP
   =============================================================== */
.features-section{ padding:80px 20px; background:#fff; }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:32px; max-width:1200px; margin:0 auto; }
.feature-card{ text-align:center; padding:32px 24px; background:#f9fafb; border-radius:16px; transition:transform .2s ease; }
.feature-card:hover{ transform:translateY(-4px); }
.feature-icon{ width:56px; height:56px; margin:0 auto 20px; background:#f59e0b; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
.feature-title{ font-size:20px; font-weight:700; color:#1a1a1a; margin-bottom:12px; }
.feature-text{ font-size:15px; color:#6b7280; line-height:1.6; }

/* ===============================================================
   10) SUBSCRIBE SECTION
   =============================================================== */
.subscribe-section{ background:var(--slate-50); color:var(--slate-900); padding:4rem 1rem; text-align:center; }
.subscribe-wrap{
  max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--slate-200);
  border-radius:20px; padding:2.5rem 2rem; box-shadow:0 10px 25px rgba(15,23,42,.06);
}
.subscribe-title{ font-size:2rem; font-weight:900; margin-bottom:.75rem; color:var(--slate-900); }
.subscribe-subtitle{ color:var(--slate-600); margin-bottom:1.5rem; }
.subscribe-form{ display:flex; flex-direction:column; gap:.75rem; align-items:center; }
.subscribe-form input{
  width:100%; max-width:400px; padding:1rem 1.25rem; border-radius:14px; border:1px solid var(--slate-200);
  background:var(--slate-50); color:var(--slate-900); outline:none; font-size:1rem;
}
.subscribe-form input::placeholder{ color:var(--slate-400); }
.subscribe-form button{
  padding:1rem 2rem; border-radius:14px; font-weight:800; background:var(--amber-400); color:var(--slate-900);
  cursor:pointer; border:none; transition:all .2s ease;
}
.subscribe-form button:hover{ background:var(--amber-300); transform:translateY(-2px); }
@media (min-width:768px){
  .subscribe-form{ flex-direction:row; justify-content:center; gap:.75rem; }
  .subscribe-form input{ text-align:left; max-width:540px; border-radius:9999px 0 0 9999px; border-right:0; background:#fff; }
  .subscribe-form button{ border-radius:0 9999px 9999px 0; padding:1rem 1.4rem; }
}

/* ===============================================================
   11) ALL CARS PAGE (CARDS)
   =============================================================== */
#advertsPage .car-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:30px; max-width:1400px; margin:0 auto; }
#advertsPage .car-card{
  background:#fff; border-radius:16px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .3s ease;
}
#advertsPage .car-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
#advertsPage .car-card h3{ font-size:20px; font-weight:700; color:#1a1a1a; margin:16px 0 8px; }
#advertsPage .car-card .price{ font-size:24px; font-weight:700; color:#f59e0b; margin-bottom:12px; }
#advertsPage .car-card .car-meta{ font-size:14px; color:#6b7280; margin-bottom:8px; line-height:1.6; }
#advertsPage .car-card .btn{ margin-top:16px; width:100%; justify-content:center; }
.muted{ color:#6b7280; font-size:16px; text-align:center; padding:40px 20px; }

/* ===============================================================
   12) ABOUT US PAGE
   =============================================================== */
.about-card,.mission-card{
  background:#fff; padding:32px; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin-bottom:32px;
}
.about-subtitle,.mission-title{ font-size:24px; font-weight:700; color:#1a1a1a; margin-bottom:16px; }
.about-text,.mission-text{ font-size:16px; color:#4b5563; line-height:1.7; margin-bottom:16px; }
.about-text:last-child,.mission-text:last-child{ margin-bottom:0; }
.mission-quote{ margin-top:24px; padding:20px; background:#f9fafb; border-left:4px solid #f59e0b; border-radius:8px; }
.quote-text{ font-size:18px; font-style:italic; color:#1a1a1a; margin:0; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:24px; margin-top:32px; }
.stat-card{ background:#fff; padding:32px 24px; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.08); text-align:center; transition:transform .2s ease; }
.stat-card:hover{ transform:translateY(-4px); }
.stat-number{ font-size:48px; font-weight:900; color:#f59e0b; line-height:1; margin-bottom:8px; }
.stat-label{ font-size:16px; color:#6b7280; font-weight:600; }

/* ===============================================================
   13) PAGE SYSTEM
   =============================================================== */
.page{ display:none; min-height:60vh; }
.page.active{ display:block; }
.page-content{ padding:3.5rem 1rem; min-height:60vh; background:var(--slate-50); }
.page-header{ margin-bottom:2rem; }
.page-title{ font-size:2.25rem; margin-bottom:.5rem; }
.page-subtitle{ font-size:1.05rem; color:var(--slate-600); }

/* ===============================================================
   14) FOOTER
   =============================================================== */
.footer{ background:var(--slate-900); color:#fff; padding:4rem 1rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2.25rem; }
.footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
.footer-icon{ color:var(--amber-400); }
.footer-title{ font-size:1.1rem; font-weight:900; margin:0; color:#fff; }
.footer-text{ color:var(--slate-100); }
.footer-heading{ font-size:1.05rem; font-weight:900; margin-bottom:.75rem; color:#fff; }
.footer-links,.footer-contact{ list-style:none; padding-left:0; margin:0; }
.footer-links a{ color:var(--slate-100); text-decoration:none; display:inline-block; padding:.25rem 0; }
.footer-links a:hover{ color:var(--amber-400); }
.footer-contact li{ color:var(--slate-100); padding:.15rem 0; }
.footer-hours{ color:var(--slate-100); margin:4px 0; }
.footer-bottom{ border-top:1px solid rgba(2,6,23,.35); padding-top:1.25rem; text-align:center; color:#fff; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .footer-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ===============================================================
   15) RESPONSIVE (GLOBAL)
   =============================================================== */
@media (max-width:768px){
  .car-grid{ grid-template-columns:1fr; gap:24px; }
  .section-title{ font-size:32px; }
  .featured-section{ padding:50px 16px; }
  .about-card,.mission-card,.car-detail{ padding:24px; }
  .stat-number{ font-size:36px; }
  .features-grid{ grid-template-columns:1fr; }
}
@media (min-width:769px) and (max-width:1100px){ .car-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1101px){ .car-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ #featuredCars.car-grid{ gap:36px; } }
@media (hover:hover) and (pointer:fine){ .car-card{ position:relative; will-change:transform; } }

/* ===============================================================
   16) PRICES (GLOBAL)
   =============================================================== */
.car-price{ color:#f59e0b!important; font-size:1.4rem; line-height:1.2; font-weight:800; }
.price{ color:#000!important; font-weight:800; font-size:var(--price-size-card); line-height:1.4; }
.featured-section .car-card .car-price{ font-size:var(--price-size-featured); }
#allCars .car-card .price, #allCars .car-card .car-price{ font-size:var(--price-size-card); }
#carDetail .price{ font-size:var(--price-size-detail); }
.cur-sym{ color:#000!important; display:inline-block; transform:translateY(-1px); margin-right:4px; font-weight:700; }
.page .filters .label, #advertsPage .filters .label{ color:#0b1220; }
#allCars.car-grid{ gap:18px; }

/* ===============================================================
   17) VEHICLE DETAIL — ROMANS-STYLE
   =============================================================== */
/* 17.1) WIDE CONTAINER */
#carPage .container-small.detail-wide{ max-width:min(1440px,94vw); padding:12px 2rem; margin:0 auto; }
@media (min-width:1280px){ #carPage .container-small.detail-wide{ max-width:min(1560px,94vw); } }
@media (min-width:1680px){ #carPage .container-small.detail-wide{ max-width:min(1680px,94vw); } }
#carPage .page-content{ padding-top:1.5rem; }

/* 17.2) ELITE SPLIT */
#carPage .elite-split{ display:grid; gap:18px; align-items:stretch; grid-template-columns:minmax(0,1fr) var(--spec-col-w); }
@media (min-width:1440px){ #carPage .elite-split{ grid-template-columns:minmax(0,1fr) var(--spec-col-w-lg); } }
@media (max-width:1024px){ #carPage .elite-split{ grid-template-columns:1fr; } }

/* 17.3) MEDIA (Hero + Thumbs) */
#carPage .elite-media{ display:flex; flex-direction:column; }
#carPage .detail-hero{ margin:0; border-radius:14px; overflow:hidden; background:#e5e7eb; box-shadow:0 10px 24px rgba(15,23,42,.08); }
#carPage .detail-hero img{ width:100%; height:var(--hero-h); object-fit:cover; object-position:center; display:block; }
#carPage .detail-thumbs{ width:100%; margin-top:10px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:10px; }
#carPage .detail-thumbs img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#eef2f7; box-shadow:inset 0 0 0 1px rgba(17,24,39,.06); transition:transform .15s ease, box-shadow .15s ease; }
#carPage .detail-thumbs img:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.12); }

/* 17.4) SPEC STACK */
#carPage .elite-specs{
  height:var(--hero-h); background:#fff; border:1px solid #eef2f7; border-radius:16px; box-shadow:0 12px 28px rgba(15,23,42,.1);
  padding:18px 16px var(--cta-gap); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
}
#carPage .elite-specs .spec-title{
  font-weight:900; letter-spacing:.02em; color:#0b1220; font-size:clamp(1.1rem,0.9vw + 0.9rem,1.3rem);
  text-transform:uppercase; text-align:left; padding-bottom:10px; border-bottom:1px solid #edf2f7;
}
#carPage .elite-specs .info-list{ min-height:0; overflow:hidden; margin-bottom:0; }
#carPage .elite-specs .info-row{ display:grid; grid-template-columns:var(--label-col) 1fr; align-items:center; padding:6px 0; border-bottom:1px solid #f1f5f9; }
#carPage .elite-specs .info-row:last-child{ border-bottom:0; }
#carPage .elite-specs .info-term{ grid-column:1; text-align:left; font-size:var(--spec-term-fs); font-weight:700; letter-spacing:.05em; color:#94a3b8; text-transform:uppercase; }
#carPage .elite-specs .info-val{ grid-column:2; text-align:center; width:100%; font-size:clamp(.92rem,.7vw + .84rem,var(--spec-val-fs)); font-weight:800; color:#0b1220; transform:translateX(-25px); }

/* 17.5) CTAS */
#carPage .elite-ctas { display:flex; flex-direction:column; gap:8px; margin-top: calc(var(--cta-gap) - 5px); padding:0 8px 20px; }
#carPage .elite-ctas .btn-block{
  display:flex; align-items:center; justify-content:center; height:var(--cta-h); width:100%; padding:0 12px; border-radius:0;
  border:1px solid #111; background:#111; color:#fff; font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:var(--cta-fs);
  text-decoration:none; transition:opacity .15s ease, transform .15s ease;
}
#carPage .elite-ctas .btn-block:hover{ opacity:.9; transform:translateY(-1px); }
#carPage .elite-ctas .btn-block.primary{ background:#111; color:#fff; }
#carPage .elite-ctas .btn-block.ghost{ background:#fff; color:#111; border-color:#111; }
#carPage .elite-ctas .btn-block:last-child{ height:36px; font-size:.78rem; }

/* ===============================================================
   18) VEHICLE DETAIL — FEATURES BAND (CLEAN)
   =============================================================== */
#carPage .readable-band{ background:#f6f7f9; border:1px solid #e9eef5; border-radius:14px; padding:16px 20px; margin-top:25px; overflow:visible; }
#carPage .readable-band .summary-two{ display:grid; grid-template-columns:150px 360px 1fr; gap:0; align-items:start; overflow:visible; }
#carPage .readable-band .section-title{ display:inline-flex; align-items:center; gap:10px; min-height:var(--feature-title-h); margin:0; font-weight:900; letter-spacing:-.01em; line-height:1.1; font-size:clamp(1.25rem, 0.9vw + 1rem, 1.6rem); }

/* Pills (left) */
#carPage .col-features{ margin-top:0; padding-right:0; }
#carPage .col-features .features-grid{ display:flex; flex-direction:column; gap:10px; margin:10px 0 0; padding:0; }
#carPage .features-grid .acc{ display:flex; align-items:center; }
#carPage .features-grid .acc-hd{
  width:150px; min-height:var(--pill-h); padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(#fffdf8,#fffaf0); color:var(--luxe-ink); font-weight:900; font-size:.9rem; letter-spacing:.01em;
  border:1px solid var(--luxe-edge); border-right:0; border-radius:12px 0 0 12px;
  box-shadow:inset 0 1px 0 #fff, 0 6px 18px rgba(12,18,32,.06), 0 0 0 1px rgba(244,199,107,.10);
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#carPage .features-grid .acc:hover .acc-hd{ background:linear-gradient(#fffef4,#fff8e8); box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(12,18,32,.09), 0 0 0 1px rgba(244,199,107,.16); }
#carPage .features-grid .acc.active .acc-hd{ border-right:0 !important; margin-right:-1px; z-index:2; background:linear-gradient(#fffdf5,#fff4da); box-shadow:0 0 0 2px rgba(244,199,107,.22), 0 10px 22px rgba(12,18,32,.12); border-color:transparent; }
#carPage .features-grid .acc-hd .tag{ margin-left:8px; width:22px; height:22px; min-width:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:#fff; border:1px solid rgba(231,235,242,.9); color:var(--luxe-ink); font-size:.68rem; font-weight:800; box-shadow:0 2px 6px rgba(12,18,32,.08); }

/* Sticky panel (middle) */
#featuresPanel.sticky-features{ position:sticky; top:var(--features-sticky-top); z-index:30; will-change:transform; }
#carPage #featuresPanel{ transform:translateX(0) translateY(calc(var(--panel-y,0px) + var(--panel-nudge,0px))) !important; transition:transform 120ms ease-out; }
#featuresPanel.pos-top{ --panel-nudge:var(--panel-nudge-top); }
#featuresPanel.pos-mid{ --panel-nudge:var(--panel-nudge-mid); }
#featuresPanel.pos-bottom{ --panel-nudge:var(--panel-nudge-bottom); }

#carPage .features-panel{ grid-column:2; max-width:360px; align-self:start; min-height:120px; background:linear-gradient(#fffdf8,#fffaf0); color:var(--luxe-ink); border:1px solid var(--luxe-edge); border-left:0; border-radius:0 14px 14px 0; box-shadow:var(--luxe-soft); position:relative; margin-left:-1px; }
#carPage .features-panel.active{ border-image:none; border:1px solid rgba(244,199,107,.28); box-shadow:0 12px 28px rgba(12,18,32,.10), 0 0 0 2px rgba(244,199,107,.18); }
#carPage .features-panel::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:#ffffffF2; pointer-events:none; }

/* Description column (right) */
#carPage .col-desc{ grid-column:3; align-self:start; display:flex; flex-direction:column; gap:0; margin:0 24px; }
#carPage .col-desc .desc-title{ margin:0; font-size:1rem; font-weight:900; letter-spacing:-.01em; line-height:1.2; color:var(--luxe-ink); }
#carPage .col-desc .desc-box{ width:var(--desc-width); max-width:100%; background:#fffffffa; border:1px solid #e9eef5; border-radius:14px; padding:24px 28px; box-shadow:0 8px 24px -12px rgba(15,23,42,.08); min-height:calc(var(--pill-h)*var(--pill-count) + var(--pill-gap)*(var(--pill-count) - 1) + var(--desc-extra)); word-wrap:break-word; overflow-wrap:break-word; white-space:normal; }
#carPage .col-desc .desc-box .detail-text, #carPage .col-desc .desc-box p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--luxe-ink-2); }

/* Mobile adjustments */
@media (max-width:768px){
  #carPage .readable-band .summary-two{ grid-template-columns:1fr; gap:14px; }
  #carPage .features-panel{ display:none; }
  #carPage .col-features .features-grid .acc-bd{ display:block; margin-top:10px; padding:10px 12px; background:#fff; border:1px solid var(--luxe-edge); border-radius:10px; box-shadow:0 8px 18px rgba(12,18,32,.06); }
  #carPage .col-features .features-grid .acc-bd ul{ margin:0; padding-left:18px; list-style:disc; line-height:1.55; }
  #carPage .col-desc{ margin-left:0; margin-right:0; }
  #carPage .col-desc .desc-box{ width:100%; min-height:auto; }
}

/* ===============================================================
   19) VIDEO BLOCKS
   =============================================================== */
/* Detail page video */
#carPage .video-block{ grid-column:1 / -1; display:flex; justify-content:center; align-items:center; margin-top:28px; }
#carPage .video-block .video-frame{ width:100%; max-width:var(--desc-width); aspect-ratio:16/9; background:#0b1220; border:1px solid rgba(231,235,242,.9); border-radius:14px; box-shadow:0 18px 40px -18px rgba(12,18,32,.35), 0 0 0 2px rgba(244,199,107,.12); overflow:hidden; }
#carPage .video-block iframe{ width:100%; height:100%; display:block; border:0; border-radius:14px; }

/* Global premium video card */
.video-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin:60px 0; }
.video-block .section-title{ font-size:1.75rem; font-weight:800; line-height:1.2; text-align:center; width:min(100%, var(--desc-width)); margin:0 auto 20px; border-top:1px solid rgba(255,255,255,.08); padding-top:40px; }
.video-card{ --rad:18px; width:min(100%, var(--desc-width)); position:relative; border-radius:var(--rad); overflow:hidden; background:radial-gradient(1200px 600px at 100% 0%, rgba(255,255,255,.06), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.video-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; }
.video-skel{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.05) 40%) #0f172a; background-size:300% 100%; animation:skelShimmer 1.1s linear infinite; border-radius:calc(var(--rad) - 2px); }
@keyframes skelShimmer { to { background-position:-200% 0; } }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; opacity:0; transition:opacity .45s ease; border-radius:calc(var(--rad) - 2px); }
.video-card.is-ready .video-frame iframe{ opacity:1; }
.video-card.is-ready .video-skel{ opacity:0; transition:opacity .25s ease; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .video-card, .video-frame iframe{ transition:none; } .video-skel{ animation:none; } }

/* ===============================================================
   20) BACK LINKS (UNIFIED)
   =============================================================== */
.back-links { flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 24px; display: inline-flex; font-weight: 600; font-size: 0.95rem; color: #111; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; color: #111; text-decoration: none; transition: color 0.25s ease, transform 0.25s ease; }
.back-link svg { stroke: currentColor; width: 18px; height: 18px; transition: transform 0.25s ease; }
.back-link:hover { color: #f59e0b; }
.back-link:hover svg { transform: translateX(-2px); }
.back-links.vertical { flex-direction: column; align-items: flex-start; gap: 6px; }

/* ===============================================================
   21) FEATURE PILLS — MOBILE FALLBACKS
   =============================================================== */
/* Hide mobile fallback lists on desktop */
#carPage .col-features .features-grid .acc-bd { display: none; }
/* Keep them visible only on mobile */
@media (max-width: 768px) { #carPage .col-features .features-grid .acc-bd { display: block; } }
/* Prevent bullets next to the pills themselves */
#carPage .features-grid, #carPage .features-grid .acc { list-style: none; }

/* ===============================================================
   22) ENQUIRE / INSPECTION / SHIPPING — LAYOUT & CONTACTS
   =============================================================== */
/* Wider container for these pages */
#enquirePage .container-small, #inspectionPage .container-small, #shippingPage .container-small{ max-width:1140px; }

/* Desktop two-column layout (centered) */
@media (min-width:1100px){
  .enquire-layout{ display:flex; align-items:center; justify-content:center; gap:36px; }
  .enquire-main{ flex:1 1 0; display:flex; }
  .enquire-main .about-card{ width:100%; }
  .enquire-contacts{ flex:0 0 380px; display:flex; flex-direction:column; gap:16px; padding-left:44px; position:relative; align-self:center; justify-content:center; }
  .enquire-contacts::before{ content:""; position:absolute; left:16px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,transparent,rgba(12,18,32,.08) 14%,rgba(12,18,32,.14) 50%,rgba(12,18,32,.08) 86%,transparent); border-radius:2px; }
  .enquire-contacts::after{ content:"OR"; position:absolute; left:16px; top:50%; transform:translate(-50%,-50%); padding:.55rem .8rem; font-weight:900; letter-spacing:.08em; font-size:.95rem; color:#111; background:linear-gradient(#fffef6,#fff9e7); border:1px solid rgba(244,199,107,.55); box-shadow:0 8px 22px rgba(12,18,32,.10), inset 0 1px 0 #fff, 0 0 0 2px rgba(244,199,107,.22); border-radius:999px; }
}

/* Mobile stacks naturally */
@media (max-width:1099px){ .enquire-layout{ display:block; } .enquire-contacts{ padding-left:0; } .enquire-contacts::before, .enquire-contacts::after{ display:none; } }

/* Contact tiles + premium buttons */
.contact-card{ --rad:16px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:16px 16px 16px 18px; background:radial-gradient(1200px 300px at 100% 0%, rgba(15,23,42,.04), transparent 40%), linear-gradient(180deg,#fff,#fbfbfd); border:1px solid #e9eef5; border-radius:var(--rad); box-shadow:0 12px 26px -12px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.contact-card:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(15,23,42,.18); border-color:#e3e8f2; }
.contact-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-title{ font-weight:900; color:#0c1220; }
.contact-sub{ font-size:.9rem; color:#5b6475; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.contact-btn{ --h:44px; --pad:14px; --ring:rgba(244,199,107,.28); display:inline-flex; align-items:center; gap:10px; justify-content:center; height:var(--h); padding:0 var(--pad); min-width:190px; border-radius:12px; font-weight:900; letter-spacing:.02em; text-decoration:none; border:1px solid transparent; box-shadow:0 10px 22px -10px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease; }
.contact-btn svg{ width:18px; height:18px; flex:0 0 18px; }
.contact-btn[data-contact="phone"]{    background:#0c1220; color:#fff; border-color:#0c1220; }
.contact-btn[data-contact="email"]{    background:linear-gradient(#ffd976,#f4c76b); color:#0c1220; border-color:#e8b750; }
.contact-btn[data-contact="whatsapp"]{ background:linear-gradient(#63ec8d,#25d366); color:#093a1a; border-color:#1ec65c; }
.contact-btn[data-contact="line"]{     background:linear-gradient(#5fe784,#06c755); color:#0b3a1c; border-color:#0bbb50; }
.contact-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -12px rgba(15,23,42,.22), 0 0 0 2px var(--ring); filter:saturate(1.05); }
.contact-btn:active{ transform:translateY(0); opacity:.92; }
.contact-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring), 0 12px 24px -12px rgba(15,23,42,.22); }

/* Form spacing + inputs */
#enquireForm.about-card{ padding:22px 22px 20px; }
#enquireForm .subscribe-form{ display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:14px; }
#enquireForm textarea{ min-height:200px; }
@media (max-width:1099px){ #enquireForm .subscribe-form{ grid-template-columns:1fr; } }

/* ===============================================================
   23) HOW WE OPERATE — STEPS & ASIDE
   =============================================================== */
#processPage .container-small { max-width: 980px; }

/* Two-column layout on desktop */
@media (min-width:1100px){
  .process-layout{ display:flex; align-items:flex-start; justify-content:center; gap:36px; }
  .process-main{ flex:1 1 0; }
  .process-aside{ flex:0 0 380px; }
  .process-aside .info-card{ position:sticky; top:90px; }
  .process-aside .info-card + .info-card{ margin-top:16px; }
}
@media (max-width:1099px){ .process-layout{ display:block; } }

/* Step cards */
.process-steps{ display:flex; flex-direction:column; gap:16px; margin-top:36px; }
.process-step{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 18px; border-radius:16px; background:linear-gradient(180deg,#fff,#fbfbfd); border:1px solid #e9eef5; box-shadow:0 12px 26px -12px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.step-num{ width:36px; height:36px; border-radius:999px; display:grid; place-items:center; font-weight:900; color:#111; background:linear-gradient(#fffef6,#fff9e7); border:1px solid rgba(244,199,107,.55); box-shadow:inset 0 1px 0 #fff, 0 0 0 2px rgba(244,199,107,.22); }
.step-content h3{ margin:.25rem 0 .25rem; font-weight:900; color:#0c1220; }
.step-content p{ margin:0; color:#5b6475; line-height:1.6; }
.step-content ul{ margin:.5rem 0 0 1.2rem; padding-left:18px; color:#5b6475; font-size:.95rem; list-style:disc; }

/* Right-side info cards (shared) */
.info-card{ padding:18px 18px 16px; background:linear-gradient(180deg,#fff,#fbfbfd); border:1px solid #e9eef5; border-radius:16px; box-shadow:0 12px 26px -12px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.info-card.subtle{ background:linear-gradient(180deg,#fff,#f9fafc); }
.info-title{ margin:0 0 6px; font-size:1.15rem; font-weight:900; color:#0c1220; }
.info-sub{ margin:0 0 12px; color:#5b6475; }
.info-divider{ height:1px; background:rgba(12,18,32,.06); border-radius:2px; margin:12px 0; }
.info-mini{ margin:6px 0 6px; font-weight:800; color:#111827; }
.info-list{ margin:.25rem 0 .5rem 1.15rem; }
.info-list li{ margin:6px 0; }
.info-steps{ margin:.25rem 0 .75rem 1.25rem; }
.info-steps li{ margin:6px 0; }
.info-cta .btn-full{ width:100%; }

/* ===============================================================
   24) TRANSPARENCY / PRICING BAND
   =============================================================== */
.transparency-band{ padding: 2.5rem 1rem 2rem; margin-top: 8px; background: radial-gradient(1000px 180px at 50% -60px, rgba(15,23,42,.06), transparent 60%) var(--slate-50); }
.fee-grid{ display:grid; gap:16px; margin-top:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .fee-grid{ grid-template-columns:repeat(3, 1fr); } }
.fee-card{ padding:18px 18px 16px; background: linear-gradient(180deg,#fff,#fbfbfd); border:1px solid #e9eef5; border-radius:16px; box-shadow:0 12px 26px -12px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.9); }
.fee-title{ margin:0 0 6px; font-size:1.05rem; font-weight:900; color:#0c1220; }
.fee-sub{ margin:0 0 10px; color:#5b6475; }
.fee-list, .fee-tiers{ margin:.25rem 0 0 1.1rem; color:#374151; }
.fee-list li, .fee-tiers li{ margin:.4rem 0; }
.fee-tiers .tier-cap{ display:inline-block; min-width:175px; color:#5b6475; }
.fee-note{ margin:.65rem 0 0; font-size:.92rem; color:#6b7280; }

.calc-box{ margin-top:18px; padding:16px 18px; background:linear-gradient(180deg,#fffef6,#fffaf0); border:1px solid rgba(244,199,107,.35); border-radius:16px; box-shadow:0 10px 24px -14px rgba(245,158,11,.25), inset 0 1px 0 #fff; }
.calc-title{ font-weight:900; margin:0 0 6px; color:#0c1220; }
.calc-line{ margin:0 0 8px; color:#111827; }
.calc-notes{ margin:.25rem 0 0 1.1rem; color:#5b6475; }
.calc-notes li{ margin:.25rem 0; }