@media (max-width: 1180px){
  .header-main__inner{grid-template-columns:minmax(200px,240px) 1fr auto}
  .hero__content h1{font-size:48px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 991px){
  .topbar__inner{flex-direction:column;align-items:flex-start}
  .header-main__inner{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "branding toggle"
      "actions actions"
      "nav nav";
    align-items:center;
  }
  .site-branding{grid-area:branding}
  .menu-toggle{display:inline-flex;grid-area:toggle}
  .header-actions{grid-area:actions}
  .main-navigation{
    grid-area:nav;
    display:none;
    width:100%;
    padding-top:8px;
  }
  .main-navigation.is-open{display:block}
  .main-navigation ul{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
  }
  .hero__grid,
  .about-split,
  .content-layout,
  .contact-layout,
  .cta-banner,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .hero__content h1{font-size:42px}
  .hero__stats,
  .service-grid,
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .container{width:min(94%,1200px)}
  .hero{padding:56px 0}
  .hero__content h1{font-size:34px}
  .hero__content p{font-size:17px}
  .page-hero__content h1,
  .section-heading h2,
  .about-split__content h2,
  .cta-banner h2{font-size:30px}
  .service-grid,
  .feature-grid,
  .area-grid,
  .faq-grid,
  .post-grid,
  .hero__stats{grid-template-columns:1fr}
  .header-actions{flex-direction:column;align-items:flex-start}
  .cta-banner{padding:28px}
}