/* About and course heroes share the service pages' navy and warm gold palette. */
.about-hero, .course-hero {
  --hero-gold: #edc48e;
  color: #f5f8fc;
  background-color: #071c2e;
}
.about-hero__grid { grid-template-columns: 1fr 1fr; }
.about-hero__copy { max-width: 650px; padding-right: 36px; }
:is(.about-hero, .course-hero) .eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px; color: var(--hero-gold);
  font-size: 12px; letter-spacing: .075em;
}
:is(.about-hero, .course-hero) .eyebrow > span {
  flex-shrink: 0; width: 30px; height: 1px; margin: 0;
  background: var(--hero-gold);
}
:is(.about-hero, .course-hero) h1 {
  margin-bottom: 28px; color: #f5f8fc;
  font-size: clamp(38px, 3.65vw, 60px);
  line-height: 1.34; letter-spacing: -.045em; text-wrap: balance;
}
:is(.about-hero, .course-hero) h1 > span {
  display: inline-block; color: var(--hero-gold);
}
.about-hero__copy > p:not(.eyebrow):not(.about-hero__year),
.course-hero__copy > p:not(.eyebrow) {
  color: #c6d4df; font-size: 16px; line-height: 1.95;
}
:is(.about-hero, .course-hero) .button-row { gap: 12px; }
:is(.about-hero, .course-hero) .button-row .btn {
  min-height: 54px; padding-inline: 26px; border-radius: 5px; font-size: 14px;
}
:is(.about-hero, .course-hero) .btn--blue {
  color: #122b3c; border-color: var(--hero-gold); background: var(--hero-gold);
  box-shadow: 0 5px 24px #edc48e14;
}
:is(.about-hero, .course-hero) .btn--blue:hover {
  border-color: #f6d4a7; background: #f6d4a7;
}
:is(.about-hero, .course-hero) .btn--white {
  color: #dfebf3; border-color: #accbe443; background: #09213980;
}
:is(.about-hero, .course-hero) .btn--white:hover {
  border-color: #accbe47a; background: #15364b;
}
.course-hero .course-facts span {
  color: #dfc49f; border-color: #edc48e40; border-radius: 5px; background: #09213980;
}
.course-hero .course-hero__badge, .about-hero .about-hero__media figcaption { color: #c6d4df; }
@media (max-width: 820px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .about-hero__copy { max-width: none; padding-right: 0; }
  :is(.about-hero, .course-hero) h1 { font-size: clamp(34px, 5.5vw, 46px); }
}
@media (max-width: 520px) {
  :is(.about-hero, .course-hero) .eyebrow {
    gap: 9px; margin-bottom: 24px; font-size: 10px; letter-spacing: .025em;
  }
  :is(.about-hero, .course-hero) .eyebrow > span { width: 18px; }
  :is(.about-hero, .course-hero) h1 {
    margin-bottom: 24px; font-size: clamp(27px, 7.4vw, 38px); line-height: 1.4;
  }
  .about-hero__copy > p:not(.eyebrow):not(.about-hero__year),
  .course-hero__copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; }
  :is(.about-hero, .course-hero) .button-row {
    display: grid; grid-template-columns: 1fr; gap: 10px;
  }
  :is(.about-hero, .course-hero) .button-row .btn { width: 100%; min-height: 50px; }
  .course-hero .course-facts { gap: 8px; margin-block: 24px; }
}