/*
 * Shared section heading specification
 * Use on every page; deliberately excludes the locked navigation and hero.
 */
.eyebrow {
  color: #EAB800;
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 16px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.section-subtitle {
  font-weight: var(--font-weight-light) !important;
}

.section-title,
.section:not(.hero) h2 {
  color: var(--text-primary);
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: 0;
}

.section-title em,
.section:not(.hero) h2 em {
  color: #EAB800;
  font-style: normal;
}

/* Responsive line breaks. The heading text exists once; only the break point
   moves between desktop and mobile. Duplicating the whole heading instead made
   crawlers see two h2 elements with identical content. */
.br-mobile {
  display: none;
}

@media (max-width: 760px) {
  .section-title,
  .section:not(.hero) h2 {
    font-size: clamp(36px, 10vw, 48px);
  }
  .br-desktop {
    display: none;
  }
  .br-mobile {
    display: inline;
  }
}