/* Keep the caption in normal flow so larger text cannot overlap the CTA. */
.hero {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: max(690px, calc(100svh - 108px));
  max-height: none;
}
.hero-content {
  flex: 1 0 auto;
  min-width: 0;
  padding: clamp(42px, 7vh, 90px) 7% 48px;
}
.hero-bottom {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  padding: 0 4.5% 28px;
}
.hero h1 { overflow-wrap: break-word; }
.hero .story-hook { max-width: min(470px, 100%); }
.hero .button { max-width: 100%; box-sizing: border-box; }
@media (max-width: 850px) {
  .hero { min-height: max(640px, calc(100svh - 108px)); }
}
@media (max-width: 580px) {
  .hero { min-height: max(610px, calc(100svh - 94px)); }
  .hero-content { padding: 34px 6% 80px; }
  .hero .story-hook { max-width: min(270px, 100%); }
  .hero-bottom { flex-wrap: wrap; gap: 12px; }
}