/* ==========================================================================
   Responsive rules — mobile-first overrides
   ========================================================================== */

/* Laptop / small desktop */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .highlight-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-media { order: -1; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --header-height: 72px; }
  .container { padding-inline: 18px; }

  .topbar-left { gap: 14px; }
  .topbar-item span.long-label { display: none; }

  .brand-text .brand-line1 { font-size: 1.1rem; }
  .brand-mark { width: 40px; height: 40px; font-size: 1.05rem; }
  .header-cta .btn { display: none; }

  .hero-inner { padding-top: 56px; padding-bottom: 44px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .highlight-item { padding: 16px 12px; }
  .highlight-item span { font-size: 0.82rem; }

  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-close { top: 4px; right: 4px; }
  .lightbox-content img { max-height: 60vh; }

  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  .section { padding: 40px 0; }
}

/* Extra small (320px) */
@media (max-width: 360px) {
  .container { padding-inline: 14px; }
  h1 { font-size: 2rem; }
  .brand-text .brand-line2 { font-size: 0.62rem; }
}