.mobile-representative {
  display: none;
}

@media (max-width: 900px) {
  .mobile-representative {
    display: inline-flex;
    margin-left: auto;
    margin-right: 14px;
    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 {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mobile-representative {
    margin-right: 10px;
    font-size: 13px;
  }
}