.mobile-quick-links {
  display: none;
}

@media (max-width: 900px) {
  .mobile-quick-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    margin-right: 14px;
  }

  .mobile-quick-links a {
    color: var(--navy);
    border-bottom: 1px solid var(--gold);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
  }

  .header-contact {
    margin-left: 0;
  }
}

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

  .hero-copy,
  .section-pad,
  .sub-hero,
  .representative-close {
    padding-left: clamp(22px, 6.4vw, 28px);
    padding-right: clamp(22px, 6.4vw, 28px);
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero-lead {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.95;
  }

  .hero-lead,
  .intro-copy,
  .section-heading > p,
  .service-card > p,
  .strength-title > p,
  .strength-list p,
  .office dd,
  .contact-side > p,
  .message-copy p,
  .career-heading > p,
  .timeline p {
    overflow-wrap: anywhere;
  }

  .site-header {
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    padding-left: 18px;
    padding-right: 18px;
  }

  .site-header .brand {
    order: 1;
    margin-right: auto;
  }

  .header-contact {
    order: 2;
  }

  .mobile-quick-links {
    order: 3;
    flex-basis: calc(100% + 36px);
    justify-content: center;
    gap: 38px;
    margin: 0 -18px;
    padding: 8px 18px 10px;
    border-top: 1px solid rgba(24, 58, 90, 0.12);
  }

  .mobile-quick-links a {
    font-size: 13px;
  }

}

@media (max-width: 380px) {
  .site-header {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand strong {
    font-size: 13px;
  }

  .mobile-quick-links {
    flex-basis: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
    gap: 32px;
  }

  .mobile-quick-links a {
    font-size: 12px;
  }
}