/* Responsive breakpoints: 320 / 375 / 430 / 768 / 920 / 1024 / 1440 */
/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-in { grid-template-columns: 1fr; text-align: left; }
  .portrait-card { justify-self: start; margin-top: 0.5rem; }
  .split { grid-template-columns: 1fr; }
}
/* Phase 3 delta: burger threshold raised 1024 → 1119 (main nav gained the
   "Academy" item; the desktop row needs ≥1120px to fit without wrapping).
   Grid/cta/badge collapses intentionally stay at 1024. */
@media (max-width: 1119px) {
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: 0.8rem 1.25rem 1.2rem; gap: 0.2rem;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 0.7rem; text-align: center; border-bottom: 2px solid var(--marigold); }
  .nav-toggle { display: block; }
}
@media (max-width: 1024px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .badge-a { left: -2%; } .badge-b { right: -2%; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .media-split { grid-template-columns: 1fr; }
  .media-split .illus { max-width: 420px; }
  .local-facts { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero::before { width: 220px; height: 220px; right: -90px; top: -90px; }
  .hero::after { display: none; }
  .tutor-profile-band { grid-template-columns: 1fr; text-align: left; }
  .btn-phone .phone-label { display: none; }
}
@media (max-width: 430px) {
  .btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
  .portrait-badge { font-size: 0.76rem; padding: 0.45rem 0.7rem; }
  .step { padding-left: 3.9rem; }
}
@media (max-width: 340px) {
  .brand-name { font-size: 0.95rem; }
  h1 { font-size: 1.9rem; }
}