@media (max-width: 992px) {
  h1 { font-size: 60px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  nav { gap: 18px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 32px, 1408px); }
  .topbar { height: auto; padding: 8px 0; }
  .topbar .right, nav { display: none; }
  .topbar span { margin-right: 12px; font-size: 11px; }
  
  header { height: 66px; }
  .logo { font-size: 16px; }
  .square { width: 36px; height: 36px; }
  .cta { padding: 9px 12px; font-size: 11px; }
  
  .hero { padding: 80px 0 60px; }
  h1 { font-size: 42px; letter-spacing: 0; }
  .hero p { font-size: 15px; }
  .eyebrow { font-size: 11px; }
  .hero-buttons { flex-wrap: wrap; }
  .button { min-height: 48px; padding: 0 22px; font-size: 13px; width: 100%; }
  
  .features { flex-direction: column; gap: 15px; margin-top: 35px; }
  .service-grid, .process-grid, .about, .contact, .footer, .form .two { grid-template-columns: 1fr; }
  
  .section-heading { padding-bottom: 35px; }
  .section-heading h2, #contact h2, .about h2 { font-size: 30px; }
  
  .about { gap: 34px; }
  .about-image { min-height: 250px; }
  .experience-badge { bottom: 10px; right: 10px; padding: 12px; }
  
  .footer { gap: 30px; }
  #services, #contact, #process, #faq { padding: 60px 0; }
}