.fy-hero {
  background: var(--fy-charcoal);
  height: 70svh;
  min-height: 31.25rem;
}
.fy-hero--tall {
  height: 88svh;
}
.fy-hero__title {
  font-size: clamp(3rem, 1.2rem + 6.4cqi, 6rem);
  line-height: 1.12;
  font-weight: 300;
}
.fy-hero__word {
  display: inline-block;
  margin-inline-end: 0.25em;
}
.fy-hero__scrim {
  background:
    linear-gradient(
      to top,
      color-mix(in oklch, var(--fy-charcoal) 80%, transparent),
      color-mix(in oklch, var(--fy-charcoal) 30%, transparent) 50%,
      color-mix(in oklch, var(--fy-charcoal) 20%, transparent)
    ),
    linear-gradient(
      to right,
      color-mix(in oklch, var(--fy-charcoal) 50%, transparent),
      transparent 60%
    );
}
@keyframes fy-hero-word {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fy-hero-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fy-hero-drift {
  to {
    transform: translateY(20%) scale(1.08);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fy-hero__word {
    animation: fy-hero-word 0.8s var(--fy-ease) both;
    animation-delay: var(--fy-delay, 0s);
  }
  .fy-hero__eyebrow {
    animation: fy-hero-in 0.6s var(--fy-ease) 0.15s both;
  }
  .fy-hero__lead {
    animation: fy-hero-in 0.6s var(--fy-ease) 0.7s both;
  }
  .fy-hero__action {
    animation: fy-hero-in 0.6s var(--fy-ease) 0.9s both;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .fy-hero__media {
      animation: fy-hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80svh;
    }
  }
}