/* Keep light text paired with a dark surface on every screen size. */
.hero-panel,
.hero-panel h2,
.hero-panel dd,
.contact,
.contact h2,
.contact a,
.cards .consult,
.cards .consult h3,
.cards .consult a,
.media .section-heading h2,
.pathways > a strong,
.video-card strong,
.press-grid strong,
.press-grid b,
.campus-banner-copy,
.campus-banner-copy h2 {
  color: #fff;
}

.headline-line {
  display: block;
}

.hero h1 em {
  display: block;
}

.experience-highlight {
  width: max-content;
  max-width: 100%;
  padding: 18px 22px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(4, 31, 52, 0.18);
}

.experience-highlight strong {
  color: var(--navy);
}

.experience-highlight span {
  color: var(--teal);
}

@media (min-width: 851px) {
  .hero h1 {
    font-size: clamp(3.25rem, 5vw, 5.35rem);
  }

  .headline-line {
    white-space: nowrap;
  }
}

@media (max-width: 850px) {
  .menu,
  .site-header nav {
    color: var(--ink);
  }

  .hero {
    background: #eef6f8;
  }

  .hero-panel {
    background: var(--navy);
    margin: 30px calc(-1 * clamp(24px, 7vw, 110px)) -90px;
    padding: 70px clamp(24px, 7vw, 110px);
  }
}

@media (max-width: 560px) {
  .hero-panel {
    margin-bottom: -70px;
  }
}