/* Tablet and below */
@media (max-width: 991px) {
  .hero-copy h1 { font-size: 2.2rem; }
  .navbar-nav { text-align: center; padding-top: .5rem; }
  .call-btn { justify-content: center; margin-top: .5rem; }
  .hero { min-height: 500px; background-position: 72% 35%; }
  .hero-scrim:not(.hero-scrim-dark) {
    background: linear-gradient(180deg, rgba(245,247,250,.95) 0%, rgba(245,247,250,.9) 45%, rgba(245,247,250,.75) 100%);
  }
  /* Dark variant (e.g. Services page hero): on narrower viewports the copy
     spans nearly the full width, so the desktop left-to-right fade would
     leave wrapped text sitting over a barely-tinted, low-contrast photo.
     A near-uniform dark overlay keeps the white text readable everywhere. */
  .hero-scrim-dark {
    background: linear-gradient(180deg, rgba(11,45,92,.92) 0%, rgba(11,45,92,.88) 100%);
  }
  .breakdown-banner .container { text-align: center; justify-content: center !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .hero-copy h1 { font-size: 1.9rem; }
  .hero { min-height: 440px; background-position: 78% 35%; }
  .hero-feature .ft-sub { display: none; } /* keep the three feature badges compact on small screens */
  .section-title { font-size: 1.4rem; }
  .service-body { padding: 1.75rem 1.1rem 1.25rem; }
  .testimonial-strip, .breakdown-banner { text-align: center; }
  footer .row > div { text-align: center; }
  footer .social-ico { margin: 0 4px; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* Small phones */
@media (max-width: 400px) {
  .hero-copy h1 { font-size: 1.6rem; }
  .hero { min-height: 400px; background-position: 82% 35%; }
  .call-btn small { display: none; }
}

@media (max-width: 576px) {
  .core-service-card { flex-direction: column; }
  .core-service-photo { width: 100%; height: 160px; }
}