/* vehicle-hub.css
   Shared styles for /vehicles/european/, /vehicles/domestic/,
   /vehicles/asian-imports/, /vehicles/tesla-ev/
   Clean, light typography: Poppins 400/500/600, weight 600 max

   FONTS: Load Poppins 400/500/600 in the HTML head
*/

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

:root{
  --primary:#222;
  --accent:#e63027;
  --accent-hover:#c41f17;
  --accent-light:#fef2f2;
  --accent-tint:rgba(230,48,39,0.08);
  --coral-tint:#FDF2F1;
  --white:#fff;
  --light:#fafafa;
  --gray:#6b7280;
  --gray-light:#9ca3af;
  --text:#374151;
  --text-muted:#6b7280;
  --text-light:#9ca3af;
  --border:#e5e7eb;
  --border-light:#f3f4f6;
  --shadow:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --radius:12px;
  --radius-lg:16px;
  --transition:0.2s ease;
  --section-gap:56px;
  --content-max:1100px
}

html{scroll-behavior:smooth}

/* Body uses Poppins for page content only (nav/footer untouched) */
.vh-page{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.65;
  color:var(--text-muted);
  background:var(--white);
  -webkit-font-smoothing:antialiased
}

.vh-page img{max-width:100%;height:auto;display:block}
.vh-page a{color:inherit;text-decoration:none}

/* Typography - light weights only (600 max) */
.vh-page h1{
  font-family:'Poppins',sans-serif;
  font-size:30px;
  font-weight:600;
  line-height:1.2;
  color:var(--primary);
  letter-spacing:-0.3px
}
.vh-page h2{
  font-family:'Poppins',sans-serif;
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  color:var(--primary)
}
.vh-page h3{
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--primary)
}
.vh-page p{
  max-width:60ch
}
.vh-small{
  font-size:13px;
  color:var(--text-light)
}

.container{max-width:var(--content-max);margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 32px}}

/* =====================
   IMAGE FRAME - Coral tint offset
   ===================== */
.vh-img-frame{
  position:relative;
  display:inline-block
}
.vh-img-frame::before{
  content:'';
  position:absolute;
  top:12px;
  left:12px;
  right:-12px;
  bottom:-12px;
  background:var(--coral-tint);
  border-radius:var(--radius-lg);
  z-index:0
}
.vh-img-frame img{
  position:relative;
  z-index:1;
  border-radius:var(--radius-lg);
  width:100%;
  height:auto;
  object-fit:cover
}

/* =====================
   TRUST ROW - Four items
   ===================== */
.vh-trust{
  padding:16px 20px;
  background:var(--white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.vh-trust-inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 24px
}
.vh-trust-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:400;
  color:var(--text-muted)
}
.vh-trust-item i{
  font-size:16px;
  color:var(--accent)
}
@media(min-width:768px){
  .vh-trust{padding:18px 32px}
  .vh-trust-inner{gap:12px 40px}
  .vh-trust-item{font-size:14px}
}

/* =====================
   HOW IT WORKS - Three columns
   ===================== */
.vh-how{padding:var(--section-gap) 20px;background:var(--white)}
.vh-how-inner{max-width:var(--content-max);margin:0 auto}
.vh-how-inner>h2{text-align:center;margin-bottom:32px}
.vh-how-grid{display:grid;gap:28px}
.vh-step{text-align:center}
.vh-step-num{
  width:44px;
  height:44px;
  margin:0 auto 14px;
  background:var(--accent-tint);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--accent)
}
.vh-step h3{
  font-size:15px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--primary)
}
.vh-step p{
  font-size:14px;
  color:var(--text-muted);
  line-height:1.6;
  max-width:260px;
  margin:0 auto
}

@media(min-width:640px){
  .vh-how-grid{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media(min-width:768px){
  .vh-how{padding:64px 32px}
}

/* =====================
   CONTENT SPLIT - Image + Text
   ===================== */
.vh-split{padding:var(--section-gap) 20px;background:var(--white)}
.vh-split-inner{max-width:var(--content-max);margin:0 auto;display:grid;gap:28px;align-items:center}
.vh-split-text h2{margin-bottom:16px}
.vh-split-text p{
  color:var(--text-muted);
  margin-bottom:14px;
  line-height:1.65;
  font-size:15px
}
.vh-split-text p:last-child{margin-bottom:0}
.vh-split-img{
  position:relative
}
.vh-split-img .vh-img-frame{
  width:100%
}

@media(min-width:768px){
  .vh-split{padding:64px 32px}
  .vh-split-inner{grid-template-columns:1fr 1fr;gap:48px}
  .vh-split.reverse .vh-split-img{order:-1}
}

/* =====================
   SERVICES GRID - 2x3
   ===================== */
.vh-services{padding:var(--section-gap) 20px;background:var(--white)}
.vh-services-inner{max-width:var(--content-max);margin:0 auto}
.vh-services h2{text-align:center;margin-bottom:28px}
.vh-services-grid{display:grid;grid-template-columns:1fr;gap:16px}
.vh-service{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all var(--transition)
}
.vh-service:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.vh-service-icon{
  width:36px;
  height:36px;
  flex-shrink:0;
  background:var(--accent-tint);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center
}
.vh-service-icon i{font-size:18px;color:var(--accent)}
.vh-service h3{
  font-size:15px;
  font-weight:500;
  margin-bottom:4px;
  color:var(--primary)
}
.vh-service p{font-size:14px;color:var(--text-muted);line-height:1.55;margin:0}

@media(min-width:640px){
  .vh-services-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(min-width:768px){
  .vh-services{padding:64px 32px}
}
@media(min-width:1024px){
  .vh-services-grid{grid-template-columns:repeat(3,1fr)}
}

/* =====================
   REVIEWS - Three cards
   ===================== */
.vh-reviews{padding:var(--section-gap) 20px;background:var(--white)}
.vh-reviews-inner{max-width:var(--content-max);margin:0 auto}
.vh-reviews h2{text-align:center;margin-bottom:28px}
.vh-reviews-grid{display:grid;gap:20px}
.vh-review-card{
  padding:24px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--transition)
}
.vh-review-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.vh-review-stars{
  display:flex;
  gap:2px;
  margin-bottom:12px
}
.vh-review-stars svg{
  width:16px;
  height:16px;
  fill:#fbbf24
}
.vh-review-quote{
  font-size:15px;
  font-weight:400;
  color:var(--text-muted);
  line-height:1.65;
  margin-bottom:16px;
  font-style:normal
}
.vh-review-author{
  font-size:13px;
  font-weight:500;
  color:var(--primary)
}
.vh-review-meta{
  font-size:13px;
  color:var(--text-light)
}

@media(min-width:640px){
  .vh-reviews-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px){
  .vh-reviews{padding:64px 32px}
}

/* =====================
   MAKES AND AREAS
   ===================== */
.vh-makes{padding:var(--section-gap) 20px;background:var(--white)}
.vh-makes-inner{max-width:var(--content-max);margin:0 auto;text-align:center}
.vh-makes h2{margin-bottom:28px}
.vh-makes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.vh-make-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 14px;
  text-align:center;
  background:var(--white);
  transition:all var(--transition)
}
.vh-make-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.vh-make-card span{
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--primary)
}
.vh-makes-more{font-size:13px;color:var(--text-light);margin-bottom:8px}
.vh-makes-areas{font-size:14px;color:var(--text-muted);margin-top:16px}
.vh-makes-areas strong{color:var(--primary);font-weight:500}

@media(min-width:640px){
  .vh-makes-grid{grid-template-columns:repeat(5,1fr);gap:16px}
}
@media(min-width:768px){
  .vh-makes{padding:64px 32px}
}

/* =====================
   FAQ - Native details/summary
   ===================== */
.vh-faq{padding:var(--section-gap) 20px;background:var(--white)}
.vh-faq-inner{max-width:680px;margin:0 auto}
.vh-faq h2{text-align:center;margin-bottom:28px}
.vh-faq-item{border-top:1px solid var(--border)}
.vh-faq-item:last-child{border-bottom:1px solid var(--border)}
.vh-faq-item summary{
  padding:18px 0;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--primary);
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.vh-faq-item summary::-webkit-details-marker{display:none}
.vh-faq-item summary::after{content:'+';font-size:18px;color:var(--gray-light);transition:transform var(--transition)}
.vh-faq-item[open] summary::after{content:'−'}
.vh-faq-item summary:hover{color:var(--accent)}
.vh-faq-answer{
  padding:0 0 18px;
  color:var(--text-muted);
  line-height:1.65;
  font-size:14px;
  max-width:60ch
}

@media(min-width:768px){
  .vh-faq{padding:64px 32px}
}

/* =====================
   CLOSING CTA - White, centered
   ===================== */
.vh-cta{padding:var(--section-gap) 20px;background:var(--white);border-top:1px solid var(--border);text-align:center}
.vh-cta-inner{max-width:520px;margin:0 auto}
.vh-cta h2{margin-bottom:10px}
.vh-cta p{color:var(--text-muted);margin-bottom:20px;font-size:15px;margin-left:auto;margin-right:auto}
.vh-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  color:var(--white);
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:500;
  padding:12px 24px;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  transition:all var(--transition)
}
.vh-cta-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.vh-cta-btn i{font-size:16px}

@media(min-width:768px){
  .vh-cta{padding:64px 32px}
}

/* =====================
   UTILITIES
   ===================== */
.vh-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}