/* ==========================================================================
   AM Installaties – Responsive
   Breakpoints: 1100px (tablet landscape), 900px (tablet), 640px (mobiel)
   ========================================================================== */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px }
  .grid-4, .steps, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .usps .grid-4 { gap: 0 }
  .usp:nth-child(2) { border-right: 0 }
  .usp:nth-child(1), .usp:nth-child(2) { border-bottom: 1px solid var(--color-border) }
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .why, .intro-2col { grid-template-columns: 1fr; gap: 40px }
  .why-visual, .intro-visual { aspect-ratio: 16/10 }
  .cta-banner { grid-template-columns: 1fr }
}

@media (max-width: 980px) {
  .topbar-info span:nth-child(2) { display: none }
  .nav-menu {
    position: fixed; inset: 0 0 auto; top: 0; height: 100dvh; width: min(84vw, 340px); left: auto; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; background: #fff; padding: 96px 22px 32px;
    box-shadow: -20px 0 60px -30px rgba(10, 15, 20, .5); transform: translateX(105%);
    transition: transform var(--transition); z-index: 70; overflow-y: auto;
  }
  .nav-open .nav-menu { transform: translateX(0) }
  .nav-menu a { padding: 14px 12px; border-bottom: 1px solid var(--color-border) }
  .nav-menu a::after { display: none }
  .nav-menu .nav-call { display: inline-flex; justify-content: center; margin-top: 18px; border-bottom: 0 }
  .nav-actions .nav-call { display: none }
  .nav-toggle { display: inline-flex; position: relative; z-index: 80 }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .contact-grid { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px }
}

@media (max-width: 640px) {
  :root { --gutter: 18px }
  .grid-2, .grid-3, .grid-4, .steps, .stats, .form-row, .area-grid { grid-template-columns: 1fr }
  .usps .container { transform: translateY(-30px) }
  .usp { border-right: 0; border-bottom: 1px solid var(--color-border) }
  .usp:last-child { border-bottom: 0 }
  .footer-grid { grid-template-columns: 1fr }
  .btn, .btn-lg { width: 100%; justify-content: center }
  .hero-cta { flex-direction: column; align-items: stretch }
  .emergency { flex-direction: column; align-items: flex-start }
  .topbar .container { justify-content: center; text-align: center }
  .topbar-social .lbl { display: none }
  .to-top { bottom: 16px; right: 16px }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto }
  .reveal { opacity: 1; transform: none }
}