/*
 * Internal Page Hero — image bg with left-anchored gradient,
 * curved transition to content section below.
 */

.hero-internal {
  background: var(--color-primary);
  padding: var(--space-xl) 0 360px;
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Background image fills the section */
.hero-internal--has-image .hero-internal__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Asymmetric gradient overlay — dense on the left where text sits,
   fading on the right so the image breathes. Plus a subtle bottom
   fade to soften the transition into the curved content section. */
.hero-internal--has-image .hero-internal__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      105deg,
      rgba(38, 38, 95, 0.92) 0%,
      rgba(38, 38, 95, 0.78) 38%,
      rgba(38, 38, 95, 0.45) 72%,
      rgba(38, 38, 95, 0.30) 100%
    ),
    linear-gradient(
      to bottom,
      transparent 60%,
      rgba(38, 38, 95, 0.55) 100%
    );
}

/* Content section — curve overlapping the hero.
   width: 100vw matches the hero, which also spans the full viewport
   (including under the scrollbar). Without this, the 100%-wide main
   stops at the scrollbar edge and a thin blue sliver shows through
   the curve on the right. */
.page-content--internal {
  background: var(--color-white);
  border-radius: 0 250px 0 0;
  position: relative;
  z-index: 3;
  margin-top: -250px;
  padding-top: var(--space-100);
  width: 100vw;
  max-width: none !important;
  overflow: clip;
}

.hero-internal__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

/* Eyebrow — quote-style with vertical accent rule on the left */
.hero-internal__eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--font-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 var(--space-md);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-success);
  display: block;
}

.hero-internal__h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: clamp(40px, 5.2vw, 64px);
  color: var(--color-navy);
  max-width: 18ch;
  margin: 0 0 var(--space-md);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hero-internal--has-image .hero-internal__h1 {
  color: var(--color-white);
}

.hero-internal__dot {
  color: var(--color-success);
}

.hero-internal__intro {
  font-family: var(--font-body);
  font-size: var(--font-lg);
  color: var(--color-white);
  max-width: 56ch;
  margin: 0;
  line-height: 1.6;
  opacity: 0.95;
}

.hero-internal__ctas {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.hero-internal__ctas .btn {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hero-internal__ctas .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* ── Front page override ──
   The homepage doesn't wrap content in .page-content--internal, so the
   default 360px bottom padding (designed to be covered by the curved
   overlap) becomes pure empty space. Tighten it here. Also bring the H1
   down from its clamped 64px ceiling since the longer copy needs more
   horizontal room, not more height. */
.home .hero-internal {
  padding-bottom: var(--space-xl);
}
.home .hero-internal__h1 {
  font-size: 40px;
  line-height: 1.25;
  max-width: none;
}
.home .hero-internal__eyebrow {
  font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-internal {
    padding: 96px 0 220px;
  }
  .hero-internal--has-image .hero-internal__overlay {
    /* Stronger top-to-bottom dim on mobile since text stacks full-width */
    background:
      linear-gradient(
        180deg,
        rgba(38, 38, 95, 0.88) 0%,
        rgba(38, 38, 95, 0.75) 60%,
        rgba(38, 38, 95, 0.55) 100%
      );
  }
  .page-content--internal {
    margin-top: -150px;
    border-radius: 0 120px 0 0;
  }
  .hero-internal__inner {
    max-width: 100%;
  }
  .hero-internal__h1 {
    font-size: clamp(32px, 8vw, 44px);
    max-width: 100%;
  }
  .hero-internal__intro {
    font-size: var(--font-md);
  }
  .hero-internal__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-internal__ctas .btn {
    width: 100%;
    text-align: center;
  }
}