.hero {
  position: relative;
  background: var(--brand-color);
  background-color: var(--brand-color);
  color: white;
  margin-bottom: -2px;
  overflow-x: hidden;
}
.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 .hero-inner > * {
  max-width: 100%;
}
.hero .display,
.hero .lead {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.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;
  }
}

@media (max-width: 768px) {
  .hero-inner {
    padding: 72px 0 64px;
  }
  .hero .display {
    font-size: 36px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .hero-inner {
    padding: 64px 0 56px;
  }
  .hero .display {
    font-size: 32px;
    line-height: 1.2;
  }
  .hero .lead {
    font-size: 16px;
    line-height: 1.65;
  }
}