@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero-copy,
  .inner-title-row,
  .service-card > div,
  .footer-links > div {
    min-width: 0;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(50px, 14.5vw, 68px);
    letter-spacing: -0.06em;
    line-height: 0.86;
  }

  .inner-title-row h1,
  .service-card h3,
  .location-link-grid strong,
  .footer-links a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(48px, 14.2vw, 57px);
  }

  .inner-title-row h1 {
    font-size: clamp(39px, 11.5vw, 48px);
    letter-spacing: -0.045em;
  }

  .planning-image::before {
    inset: -12px 12px 12px -12px;
  }

  .service-card h3 {
    font-size: 22px;
  }

  .hero-actions .button,
  .inner-actions .button,
  .cta-actions .button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}