/* ============================================================
   RESPONSIVE.CSS — Global breakpoint safety net
   Page-specific grids are handled in each page's own <style>
   block; this file covers shared chrome (nav/footer/hero/section
   spacing) plus small-screen typography so nothing overflows.
   ============================================================ */

@media (max-width:1100px){
  .section{ padding:5rem 2rem; }
  .page-hero{ padding:8.5rem 2rem 3rem; }
}

@media (max-width:900px){
  .stats-bar{ margin-top:-2.5rem; padding:0 1.4rem; }
  .stats-grid{ padding:1.6rem 1.2rem; }
  .footer-main{ padding:3.2rem 1.6rem 2rem; }
  .footer-divider, .footer-bottom{ padding-left:1.6rem; padding-right:1.6rem; }
}

@media (max-width:768px){
  body{ font-size:15px; }
  .section{ padding:4rem 1.4rem; }
  .page-hero{ padding:7.5rem 1.4rem 2.6rem; }
  .page-hero h1{ font-size:clamp(1.7rem,7vw,2.4rem); }
  .section-title{ font-size:clamp(1.5rem,6vw,2rem); }
  .gcard{ border-radius:14px; }
  .btn-primary, .btn-outline{ width:100%; justify-content:center; padding:.95rem 1.4rem; }
  .hero-actions .btn-primary, .hero-actions .btn-outline{ width:auto; }
  .cta-banner{ margin:0 1rem !important; padding:2.6rem 1.4rem !important; }
}

@media (max-width:560px){
  .nav-brand-tagline{ display:none; }
  .footer-contact-info{ flex-direction:column; gap:.6rem; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}

@media (max-width:420px){
  #navbar{ padding:.9rem 1rem; }
  .nav-brand img{ width:34px; height:34px; }
  .section{ padding:3.2rem 1.1rem; }
}

/* Prevent horizontal scroll caused by any oversized decorative element */
html, body{ max-width:100%; }
.section, .page-hero, .footer-main, .footer-bottom, .footer-divider{
  max-width:1200px; width:100%;
}