/* ==========================================================================
   RESPONSIVE.CSS — Tablet & mobile breakpoints
   Desktop-first overrides. Loaded after style.css.
   ========================================================================== */

/* ---------- Large tablet / small desktop (<=1180px) ---------- */
@media (max-width: 1180px) {
  .service-row { grid-template-columns: repeat(2, 1fr); }
  .highlights { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ---------- Tablet (<=980px) ---------- */
@media (max-width: 980px) {
  .nav-menu, .header-cta { display: none; }
  .hamburger { display: flex; }

  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin-inline: auto; }
  .hero-copy { text-align: left; }
  .hero-copy p.lead { max-width: 100%; }

  .grid-3, .mv-grid, .infra-grid { grid-template-columns: 1fr 1fr; }
  .about-preview, .story-grid, .contact-grid { grid-template-columns: 1fr; }
  .story-grid .visual { order: -1; }
  .about-preview .visual { max-width: 460px; margin-inline: auto; }

  .cta-band { padding: 40px; flex-direction: column; text-align: center; }
  .cta-band .actions { justify-content: center; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }

  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Mobile large (<=760px) ---------- */
@media (max-width: 760px) {
  .section { padding: 68px 0; }
  .section--tight { padding: 48px 0; }

  .grid-3, .grid-4, .grid-2, .mv-grid, .values-grid, .infra-grid, .service-row { grid-template-columns: 1fr; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; aspect-ratio: 1/1; }

  .hero { padding: 44px 0 72px; }
  .hero-stats { gap: 22px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  .lightbox-prev, .lightbox-next { display: none; }

  .contact-form-card { padding: 26px; }
  .contact-info-card { padding: 30px 26px; }
}

/* ---------- Mobile small (<=520px) ---------- */
@media (max-width: 520px) {
  .container { padding-inline: 18px; }
  .brand-text span { display: none; }
  .highlights { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .hero-visual .readout-card { left: 8px; bottom: -16px; min-width: 150px; padding: 12px 16px; }
  .hero-visual .readout-card .value { font-size: 1.3rem; }
  .cta-band h2 { font-size: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .policy-toc { padding: 20px; }
  #back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .gallery-filters { gap: 8px; }
  .filter-btn { padding: 8px 14px; font-size: 0.8rem; }
}