/* A318: retain the small company heading after removing the name and role. */
.contact-page .contact-card > h1.section-kicker {
  margin: 0 0 28px;
  font-size: 0.74rem;
  line-height: 1.4;
}
/* Contact topics retain the same order and component styles at every width. */
.contact-page .contact-topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
.contact-page .contact-section {
  min-width: 0;
  scroll-margin-top: 24px;
}
.contact-page .contact-section h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: var(--phd-subheading-size);
  font-weight: 600;
  line-height: 1.25;
}
.contact-page .contact-section > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--phd-body-font);
  line-height: 1.6;
}
.contact-page .contact-section .contact-email {
  font-size: var(--phd-body-font);
  overflow-wrap: anywhere;
}
.contact-page .contact-section .contact-note {
  font-size: var(--phd-small-font);
}
.contact-page .contact-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.contact-page .contact-section-actions .button {
  max-width: 100%;
}
/* A358: mailing address shares the sibling section heading and grid gap. */
.contact-page .contact-mailing address {
  color: var(--muted);
  font-size: var(--phd-body-font);
  font-style: normal;
  line-height: 1.6;
}
.contact-page .contact-navigation { margin-top: 36px; }
@media (max-width: 600px) {
  .contact-page .contact-topics { gap: 32px; }
  .contact-page .contact-section-actions .button { width: 100%; }
}