.hes-hero {
  background: var(--hes-color-background);
  padding-block: var(--hes-section-padding-loose);
}

.hes-hero__eyebrow {
  font-size: var(--hes-text-caption-size);
  font-weight: var(--hes-text-caption-weight);
  letter-spacing: var(--hes-text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--hes-color-text-secondary);
  margin: 0 0 var(--hes-space-3);
}

/* Headline/body sizing comes from typography.css's bare h1/p element
   styles - only color and spacing are set here, so this component
   never introduces a competing raw font-size. */
.hes-hero__headline {
  color: var(--hes-color-text-primary);
  margin: 0 0 var(--hes-space-4);
  max-width: 22ch;
}

.hes-hero__subheadline {
  color: var(--hes-color-text-secondary);
  margin: 0 0 var(--hes-space-6);
  max-width: 60ch;
}