@media (max-width: 860px) {
  .site-header .container { flex-wrap: wrap; gap: 0.8rem; }
  .site-nav { order: 3; width: 100%; justify-content: center; }
  .hero h1 { font-size: 48px; }
  .hero .hero-copy { font-size: 18px; }
}
@media (max-width: 600px) {
  main { padding-inline: 1rem; }
  .hero { padding-top: 110px; }
  .hero h1 { font-size: 36px; }
  .heroLogo { width: 180px; }
  .hero-card, .card, .info-panel { padding: 1rem; }
  .button-row { flex-direction: column; }
  .button { width: 100%; }
}