.hero-road-trip {
  min-height: 100vh;
  background:
    url("hero-real-photo-v3.webp") center 48% / cover no-repeat,
    var(--forest-deep);
}
.hero-road-trip .hero-shade {
  background:
    linear-gradient(90deg, rgba(7, 9, 9, 0.95) 0%, rgba(7, 9, 9, 0.72) 43%, rgba(7, 9, 9, 0.22) 76%, rgba(7, 9, 9, 0.36) 100%),
    linear-gradient(0deg, rgba(7, 9, 9, 0.62), transparent 52%);
}
.route-stories,
.road-contrast,
.faq { padding: 116px 0; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--vv-line);
}
.story-card {
  position: relative;
  min-height: 390px;
  padding: 44px 36px;
  border: 1px solid var(--vv-line);
  background: rgba(26, 29, 38, 0.82);
}
.story-card-accent {
  background:
    radial-gradient(circle at top right, rgba(201, 168, 76, 0.16), transparent 40%),
    var(--vv-mist);
}
.story-card .card-number {
  display: block;
  color: rgba(201, 168, 76, 0.28);
  font-size: 4.6rem;
  line-height: 1;
}
.story-card h3 {
  margin: 58px 0 22px;
  font-size: clamp(2.2rem, 3vw, 3.25rem);
}
.story-card p { margin: 0; color: var(--vv-silver); }
.road-contrast {
  background:
    radial-gradient(circle at 12% 80%, rgba(201, 168, 76, 0.1), transparent 32%),
    var(--vv-black) !important;
}
.road-contrast h2 { margin: 18px 0 0; font-size: clamp(2.8rem, 5vw, 5rem); }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 76px;
  align-items: start;
}
.faq h2 { margin: 18px 0 0; font-size: clamp(2.8rem, 5vw, 5rem); }
.faq-list { display: grid; gap: 12px; }
.faq details {
  padding: 26px 30px;
  border: 1px solid var(--vv-line);
  background: rgba(26, 29, 38, 0.8);
}
.faq summary {
  color: var(--vv-white);
  font-size: 1.55rem;
  line-height: 1.25;
  cursor: pointer;
}
.faq details p { margin: 18px 0 0; color: var(--vv-silver); }
.conversion-road {
  background:
    url("hero-real-photo-v3.webp") center 58% / cover no-repeat,
    var(--forest-deep);
}
.footer-contact a { font-size: 0.9rem; }
@media (max-width: 920px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-card { min-height: auto; }
  .story-card h3 { margin-top: 34px; }
  .faq-grid { grid-template-columns: 1fr; gap: 42px; }
}
@media (max-width: 560px) {
  .route-stories, .road-contrast, .faq { padding: 78px 0; }
  .story-card { padding: 30px 24px; }
  .faq details { padding: 22px 20px; }
  .faq summary { font-size: 1.35rem; }
  .hero-road-trip { background-position: 58% center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}