/* ===============================================================
   HCBI homepage styles. Loaded only on the homepage.
   =============================================================== */

/* HERO */
.hero {
  position: relative;
  /* No min-height here. Below 1024px the hero is content-driven like
     every other hero on the site; at and above it, --hero-height in
     tokens.css sets the height and this flex centring composes the
     block inside it. 70vh here used to bind at tablet portrait, which
     is exactly where a forced viewport height is least wanted. */
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 69, 0.90) 0%, rgba(11, 11, 69, 0.78) 55%, rgba(11, 11, 69, 0.66) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: var(--space-2xl) var(--container-pad);
}

.hero__title {
  color: var(--white);
  /* The one headline cap kept on the site. Uncapped, this headline
     paints 96.6% of the container but breaks as 25 / 26 / 2 characters:
     the last line is the word "Do" on its own. 18ch breaks it 16 / 24 /
     13 and still paints 86.3%, which is most of the container. There is
     no cap between the two, the wrap flips straight from one to the
     other, and text-wrap: balance costs more width again (68%). Every
     other hero headline is uncapped, where removing the cap widened it
     without an orphan. Re-measure this if the copy changes. */
  max-width: 18ch;
  margin-bottom: var(--space-md);
}

.hero__lead {
  font-size: 1.2rem;
  max-width: var(--hero-measure);
  margin-bottom: var(--space-lg);
  /* Solid, not rgba(255,255,255,.94): a translucent glyph blends with the
     photo behind it and lost 4.5:1 at the light end of the scrim. */
  color: var(--white);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.hero .btn--secondary {
  color: var(--white);
  border-color: var(--white);
}

.hero .btn--secondary:hover {
  background: var(--white);
  color: var(--navy);
}

.hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.hero__signals li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
}

.hero__signals li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

/* INTRO + DEPTH */
.intro__inner,
.depth__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.intro__inner h2,
.depth__inner h2 {
  margin-bottom: var(--space-md);
}

.intro__inner p,
.depth__inner p {
  margin-bottom: var(--space-md);
  font-size: 1.08rem;
  color: var(--text-muted);
}

/* WHY HCBI FEATURE CARDS */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

.feature {
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.feature:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.feature h3 {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-h4);
}

.feature p {
  color: var(--text-muted);
}

/* STATES SPLIT */
.home-states__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.home-states__text h2 {
  margin-bottom: var(--space-md);
}

.home-states__text p {
  margin-bottom: var(--space-md);
  color: var(--text-muted);
}

.home-states__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

.home-states__list a {
  display: block;
  padding: var(--space-sm);
  background: var(--white);
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  transition: border-color var(--transition), color var(--transition);
}

.home-states__list a:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

/* PROCESS CARDS */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.process-steps li {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.process-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-md);
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius-badge);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
}

.process-steps h3 {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h4);
  color: var(--white);
}

.process-steps p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
}

/* FINAL CTA */
.home-final-cta {
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.home-final-cta__inner {
  max-width: 640px;
}

.home-final-cta h2 {
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.home-final-cta p {
  margin-bottom: var(--space-lg);
  color: rgba(255, 255, 255, 0.9);
}

.home-final-cta .hero__actions {
  justify-content: center;
  margin-bottom: 0;
}

.home-final-cta .btn--secondary {
  color: var(--white);
  border-color: var(--white);
}

.home-final-cta .btn--secondary:hover {
  background: var(--white);
  color: var(--navy);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero__inner {
    padding: var(--space-xl) var(--container-pad);
  }
  .hero__lead {
    font-size: 1.05rem;
  }
  .home-states__inner {
    grid-template-columns: 1fr;
  }
}