/* =========================================================
   RESPONSIVE
   (loaded last so these overrides win the cascade)
   ========================================================= */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 340px; margin: 0 auto; }
  .mv-grid { grid-template-columns: 1fr; }
  .founders-grid { grid-template-columns: 1fr; max-width: 360px; }
  .founders-quote { padding: 32px 26px; }
  .timetable-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .location-map { aspect-ratio: 16/9; }
  .enquire-grid { grid-template-columns: 1fr; padding: 36px 24px; border-radius: 24px; }
  .journey-track { grid-template-columns: 1fr; }
  .journey-line { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; text-align: left; }
}

@media (max-width: 720px) {
  .main-nav {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 24px 24px;
    gap: 4px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 12px 6px; border-bottom: 1px solid rgba(45,27,78,0.06); }
  .nav-cta { text-align: center; margin-top: 6px; }
  .nav-toggle { display: flex; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}