:root{
  --space:18px;
}

@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero-media img{height:460px}
  .cta-inner{grid-template-columns:1fr; gap:16px}
  .cta-media img{height:260px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:18px}
  .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .grid-3{grid-template-columns:repeat(1, minmax(0, 1fr))}
}

@media (max-width: 820px){
  .nav-burger{display:flex}
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:auto;
    background:rgba(255, 255, 255, .96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(15, 23, 42, .10);
    box-shadow:0 18px 50px rgba(15, 23, 42, .12);
    border-radius:0 0 22px 22px;
    padding:10px;
    gap:6px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
    z-index:90;
  }
  .nav a{padding:12px 12px}
  .nav .nav-cta{margin-left:0;color:#fff}
  .nav-toggle:checked ~ .nav{
    opacity:1;
    transform:translateY(0);
    max-height:560px;
  }
  .nav-burger{position:relative; z-index:95}
  .nav-toggle:checked + .nav-burger span{background:transparent}
  .nav-toggle:checked + .nav-burger span::before{top:0; transform:rotate(45deg)}
  .nav-toggle:checked + .nav-burger span::after{top:0; transform:rotate(-45deg)}
  .top-strip .strip-inner{flex-direction:column; align-items:flex-start}
  .hero h1{font-size:44px}
  .section{padding:54px 0}
  .page-hero{padding:54px 0 28px}
  .page-hero h1{font-size:30px}
  .filter-bar{grid-template-columns:1fr; padding:16px}
  .form-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .modal{overflow:auto; align-items:flex-start}
  .modal .dialog{margin:22px 0}
}

@media (max-width: 520px){
  .container{width:calc(100% - 28px)}
  .hero{padding:26px 0 10px}
  .hero h1{font-size:36px}
  .hero p{font-size:16px}
  .hero-media img{height:420px}
  .hero-floating{left:10px; right:10px; width:auto}
  .section-title{font-size:28px}
  .page-hero{padding:46px 0 24px}
  .page-hero h1{font-size:26px}
  .emergency-inner{padding:20px}
  .cta-inner{padding:20px}
  .footer-grid{grid-template-columns:1fr}
  th, td{padding:12px}
  .modal{padding:14px}
  .modal .dialog-body{padding:14px}
}