/* =========================================================
   Responsive adjustments — mobile first overrides
   ========================================================= */

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-image { order: -1; aspect-ratio: 4/5; }
  /* Top hero banner photo specifically: show it at its natural proportions
     instead of forcing a crop shape, since the source photo doesn't match
     any fixed ratio well and was getting cropped too tight either way. */
  .hero .hero-image { aspect-ratio: auto; background: none; }
  .hero .hero-image img { width: 100%; height: auto; object-fit: contain; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed; inset: 0; background: var(--color-warm-white);
    padding: 6.5rem var(--gutter) 2.5rem; transform: translateY(-100%);
    transition: transform 0.25s ease; z-index: 40; overflow-y: auto;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .main-nav a { display: block; padding: 1rem 0.2rem; width: 100%; font-size: 1.1rem; border-bottom: 1px solid var(--color-line); }
  .main-nav .nav-cta { text-align: center; margin-top: 1rem; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; padding: 0.5rem; z-index: 41; position: relative;
    width: 44px; height: 44px;
  }
  .nav-toggle span {
    width: 24px; height: 2.5px; background: var(--color-charcoal); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}