/* Mobile overflow fixes for imported site (<= 640px). */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  /* Grid / flex children need this to shrink below intrinsic size. */
  .container,
  .contact-grid,
  .layout,
  .info-card,
  .form-card,
  .prose {
    min-width: 0;
  }

  /* Prose blocks were forced to max-width:none via inline style; clamp them. */
  .prose[style*="max-width"] {
    max-width: 100% !important;
  }

  /* Wide two-column keytables: allow horizontal scroll instead of pushing page wide. */
  .keytable {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .keytable td:first-child {
    white-space: normal;
  }

  /* Long inline links / phone numbers must wrap. */
  .emerg a,
  .info-card a,
  .prose a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* CTAs should not exceed container width. */
  .btn {
    max-width: 100%;
  }

  /* Media that ignores box constraints. */
  img, video, iframe { max-width: 100%; height: auto; }

  /* --- Header fixes: brand + phone were overflowing the 76px row into the hero. --- */
  .site-header { overflow: hidden; }
  .site-header__inner {
    height: auto;
    min-height: 64px;
    padding: 10px 0;
    gap: var(--s-3);
    flex-wrap: nowrap;
    align-items: center;
  }
  .brand { min-width: 0; flex: 1 1 auto; gap: 10px; }
  .brand__mark { height: 40px; flex: 0 0 auto; }
  .brand__name { font-size: 15px; }
  .brand__tag { display: none; } /* tagline was wrapping to 3 lines on 390px */
  .header__phone {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
  }
  .site-header .btn,
  .site-header a.btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .site-header.is-scrolled .site-header__inner { height: auto; min-height: 56px; }
}