/* ============================================================
   responsive.css — global media queries. MUST LOAD LAST.
   These rules sit at the same specificity as the ones they
   override, so source order is the only thing making them win.
   ============================================================ */

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cap-layout { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .card-grid { grid-template-columns: 1fr; }
  .about-grid, .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .about-photo img { height: 280px; }
  .about-photo::before, .about-photo::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 24px 32px; }
  .cap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { padding: 16px 20px; flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }
}