/* responsive.css — loaded last; refines the mobile-first base for
   larger breakpoints and fixes a few small-screen edge cases. */

@media (max-width:1199px){
  .hero-container{gap:44px;}
}

@media (max-width:991px){
  #hero{padding-top:120px;}
  .about-top, .contact .row{row-gap:24px;}
  .mv-grid, .about-boxes .row, .services .row, .team .row{row-gap:20px;}
  .gallery-grid{columns:2 220px;}
}

@media (max-width:767px){
  .container{padding:0 18px;}
  .section-title{margin-bottom:40px;}
  .readout-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{padding:56px 0 30px;}
  #footer > .container{flex-direction:column;text-align:center;}
  .contact iframe{min-height:280px;}
}

@media (max-width:575px){
  #hero h1{font-size:32px;}
  .btn-get-started, .btn-watch-video{font-size:12px;}
  .count-box span{font-size:24px;}
  .gallery-grid{columns:1;}
}