/* VIA Meat — shared hero typography
   One class system for all primary page heroes.
   Page-specific CSS remains responsible only for layout, imagery and backgrounds. */

:root {
  --page-hero-title-size: clamp(46px, 4.2vw, 62px);
  --page-hero-subtitle-size: clamp(28px, 2.1vw, 34px);
  --page-hero-text-size: 16px;
  --page-hero-kicker-size: 12px;
}

.page-hero-copy {
  position: relative;
  z-index: 2;
}

.page-hero-kicker {
  font-family: 'HS Museo Bg', Arial, sans-serif;
  font-size: var(--page-hero-kicker-size) !important;
  line-height: 1.35 !important;
  letter-spacing: .08em;
}
.page-hero-title {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-size: var(--page-hero-title-size) !important;
    font-weight: 700;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
}

.page-hero-subtitle {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-size: var(--page-hero-subtitle-size) !important;
    font-weight: 700;
    line-height: 1.10 !important;
    letter-spacing: -.018em !important;
}

.page-hero-text {
    font-family: 'HS Museo Bg', Arial, sans-serif;
    font-size: var(--page-hero-text-size) !important;
    font-weight: 400;
    line-height: 1.62 !important;
    max-width: 700px !important;
}

@media (max-width: 900px) {
  :root {
    --page-hero-title-size: 52px;
    --page-hero-subtitle-size: 30px;
  }
}

@media (max-width: 600px) {
  :root {
    --page-hero-title-size: 42px;
    --page-hero-subtitle-size: 27px;
    --page-hero-text-size: 14px;
  }
}