@media (max-width: 980px) {
  .site-header { flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .nav { display: flex !important; width: 100%; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; border: 1px solid rgba(220, 228, 239, 0.9); border-radius: 999px; padding: 9px 12px; background: rgba(255, 255, 255, 0.82); font-size: 14px; }
  .hero { padding-top: 34px; }
  .page-wrap { padding-top: 42px; }
  .search-card, .results-card, .content-section, .feature-card, .route-card { box-shadow: 0 12px 34px rgba(16, 32, 51, 0.08); }
}

@media (max-width: 560px) {
  .brand-mark { width: 40px; height: 40px; border-radius: 14px; }
  .brand { font-size: 16px; }
  .hero h1, .page-hero h1 { font-size: 42px; letter-spacing: -0.055em; }
  .hero-lead, .hero p, .page-hero p, .content-section p, .feature-card p, .cta-section p { font-size: 16px !important; }
  .mode-tabs { border-radius: 22px; }
  .primary-link, .secondary-link, .primary-button, .light-link { width: 100%; }
  .hero-actions { width: 100%; }
  .trip-line strong { font-size: 32px; }
}