/* Wave hero banner (About page) - from WaveHero.tsx */
#banner.wave-hero-banner {
  margin-bottom: 40px;
}
.wave-hero-banner .wave-hero {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: linear-gradient(to bottom right, #1e3a8a, #581c87, #312e81);
}
.wave-hero-banner .wave-hero svg.wave-svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}
.wave-hero-banner .wave-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 1.5rem;
}
.wave-hero-banner .wave-hero-content .inner {
  text-align: center;
  max-width: 56rem;
}
.wave-hero-banner .wave-hero-content h1 {
  font-size: 3.75rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-shadow: 0 10px 15px rgba(0,0,0,0.2);
}
.wave-hero-banner .wave-hero-content .subheadline {
  font-size: 1.25rem;
  color: #c7d2fe;
  text-shadow: 0 4px 6px rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
  .wave-hero-banner .wave-hero-content h1 { font-size: 4.5rem; }
  .wave-hero-banner .wave-hero-content .subheadline { font-size: 1.5rem; }
}
@keyframes wave-hero-wave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-100px); }
}
.wave-hero-banner .wave-1 { animation: wave-hero-wave 8s ease-in-out infinite; }
.wave-hero-banner .wave-2 { animation: wave-hero-wave 12s ease-in-out infinite reverse; }
.wave-hero-banner .wave-3 { animation: wave-hero-wave 10s ease-in-out infinite; }