/* ==========================================================================
   RESPONSIVE.CSS — Mobile-first refinements
   ========================================================================== */

/* Base (mobile) spacing already handled via clamp() in base.css.
   This file layers structural changes at breakpoints. */

@media (max-width: 991px) {
  body { padding-bottom: 76px; } /* room for mobile CTA bar */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + var(--space-4)); }
  .hero__grid { grid-template-columns: 1fr !important; }
  .hero__badges { flex-wrap: wrap; }
  .footer-grid { text-align: left; }
}

@media (max-width: 767px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .section { padding-block: var(--space-6); }
  .container { padding-inline: var(--space-2); }
  .service-detail__grid { grid-template-columns: 1fr !important; }
  .about-split { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 992px) {
  .hero { min-height: 90vh; display: flex; align-items: center; }
}

/* Touch target comfort on small screens */
@media (max-width: 480px) {
  .btn { padding: 14px 20px; }
  .mobile-cta-bar .btn { flex: 1; }
}