.legal-page .legal-hero {
  min-height: clamp(620px, 78svh, 780px);
}

.legal-page .legal-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(150px, 18vh, 230px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 30, 61, 0) 0%, rgba(0, 30, 61, 0.44) 54%, var(--blue) 100%);
}

.legal-page .legal-hero::after {
  background:
    linear-gradient(90deg, rgba(0, 30, 61, 0.98) 0%, rgba(0, 30, 61, 0.87) 34%, rgba(0, 30, 61, 0.34) 72%, rgba(0, 30, 61, 0.14) 100%),
    linear-gradient(180deg, rgba(0, 30, 61, 0.04) 42%, rgba(0, 30, 61, 0.38) 70%, var(--blue) 100%);
}

.legal-page .legal-hero .hero-inner {
  width: min(1320px, calc(100% - clamp(48px, 7vw, 112px)));
  min-height: calc(clamp(620px, 78svh, 780px) - var(--header-h));
  grid-template-columns: minmax(350px, 0.76fr) minmax(540px, 1.24fr);
  gap: clamp(70px, 8vw, 138px);
  padding: clamp(70px, 7vw, 108px) 0 clamp(76px, 8vw, 116px);
}

.legal-page .legal-hero .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 620px;
  transform: translateY(clamp(-34px, -4svh, -18px));
}

.legal-page .legal-hero-title {
  margin: 0;
  color: var(--green);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  animation: legalHeroTitleIn 2.2s linear 0.22s both;
}

.legal-page .legal-hero .hero-copy::after {
  content: "";
  display: block;
  width: clamp(178px, 16vw, 246px);
  height: 1px;
  margin-top: clamp(16px, 2vw, 22px);
  opacity: 0.9;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(139, 172, 71, 0.95) 0%,
    rgba(139, 172, 71, 0.5) 76%,
    rgba(139, 172, 71, 0) 100%
  );
  transform-origin: left center;
  animation: legalHeroLineIn 0.72s cubic-bezier(0.22, 0.72, 0.22, 1) 0.48s both;
}

@keyframes legalHeroTitleIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes legalHeroLineIn {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

html.legal-effects-seen .legal-page .legal-hero-title,
html.legal-effects-seen .legal-page .legal-hero .hero-copy::after {
  animation: none;
}

html.legal-effects-seen .legal-page .legal-hero-title {
  opacity: 1;
}

html.legal-effects-seen .legal-page .legal-hero .hero-copy::after {
  opacity: 0.9;
  transform: scaleX(1);
}

@media (max-width: 960px) {
  .legal-page .legal-hero .hero-inner {
    width: min(760px, calc(100% - clamp(40px, 8vw, 72px)));
    grid-template-columns: 1fr;
  }

  .legal-page .legal-hero .hero-copy {
    transform: none;
  }
}

@media (max-width: 620px) {
  .legal-page .legal-hero {
    min-height: auto;
  }

  .legal-page .legal-hero .hero-inner {
    width: calc(100% - 40px);
    min-height: auto;
    padding: 92px 0 86px;
  }

  .legal-page .legal-hero-title {
    font-size: clamp(2.8rem, 14vw, 4.6rem);
  }

  .legal-page .legal-hero .hero-copy::after {
    width: 154px;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-page .legal-hero-title,
  .legal-page .legal-hero .hero-copy::after {
    opacity: 1;
    animation: none;
  }

  .legal-page .legal-hero .hero-copy::after {
    transform: scaleX(1);
  }
}

/* Legal headings use the full hero width on desktop; mobile layout stays unchanged. */
@media (min-width: 961px) {
  .legal-page .legal-hero .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-page .legal-hero .hero-copy {
    max-width: 100%;
  }

  .legal-page .legal-hero-title {
    hyphens: none;
    overflow-wrap: normal;
  }
}