/* Home hero — a clean static rebuild of the site's welcome carousel first slide.
   The original is a client-rendered react-multi-carousel whose styled-components
   rules are injected at runtime and cannot be captured statically, so the hero
   is rebuilt here as plain markup with its own styling. Visual match to the
   live slide: full-bleed image, translucent panel on the left, white copy. */

.home-hero {
  position: relative;
  min-height: 30rem;
  display: flex;
  align-items: stretch;
  background: linear-gradient(76deg, #672d89, #9c2463 100%);
  overflow: hidden;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.home-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(60, 22, 90, 0.92) 0%,
    rgba(60, 22, 90, 0.72) 34%,
    rgba(60, 22, 90, 0.15) 60%,
    rgba(60, 22, 90, 0) 78%
  );
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1127px;
  margin: 0 auto;
  padding: 3.75rem 1.5rem 4.5rem;
  display: flex;
  align-items: center;
}

.home-hero__panel {
  max-width: 34rem;
  color: #ffffff;
}

.home-hero__eyebrow {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  margin: 0 0 0.75rem;
  color: #ffffff;
}

.home-hero__title {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  color: #ffffff;
}

.home-hero__text {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  margin: 0 0 1.75rem;
  color: #ffffff;
}

.home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background: #ffffff;
  color: #72246c;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.home-hero__cta:hover,
.home-hero__cta:focus {
  background: transparent;
  color: #ffffff;
  text-decoration: none;
}

.home-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.75rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-hero__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: transparent;
}

.home-hero__dot.is-active {
  background: #ffffff;
}

@media only screen and (max-width: 767px) {
  .home-hero__scrim {
    background: rgba(60, 22, 90, 0.78);
  }

  .home-hero__title {
    font-size: 1.75rem;
  }
}

/* Topic-tile descriptions — content the client renders from preloaded state,
   restored here beneath each tile heading. */
.tile-desc {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  color: #282937;
  margin: 0.375rem 0 0;
}