.hero {
  position: relative;
  background: var(--brand-color);
  color: white;
  margin-bottom: -2px;
}
.hero {
  min-height: calc(100dvh - var(--header-height, 80px));
}
.hero--solid {
  background: var(--brand-color);
  margin-bottom: -2px;
}
.hero-inner {
  padding: 96px 0 88px;
  max-width: 840px;
}
.hero .btn.btn-primary {
  color: white;
}


.hero-title-fade {
  opacity: 0;
  animation: heroTitleFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

@keyframes heroTitleFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Ensure animation respects user preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-title-fade {
    animation: none;
    opacity: 1;
  }
}