/* Shared left axis for the Home hero and every inner-page hero. */
:root {
  --hero-copy-axis-shift: clamp(-88px, calc((1200px - 100vw) / 3 - 12px), -8px);
}

.home-hero.hero-motion .hero-content,
.page-hero .page-hero-content {
  left: var(--hero-copy-axis-shift);
}

/* Keep About text on the shared axis while its halo breathes past that edge. */
.page-hero.about-hero-halo .page-hero-copy-halo {
  width: min(920px, 100%);
  margin-left: 0;
  padding: clamp(24px, 3vw, 38px) 0;
}

.page-hero.about-hero-halo .page-hero-copy-halo::before {
  left: clamp(-40px, -2.6vw, -22px);
  right: clamp(-44px, -3vw, -24px);
}

@media (max-width: 760px) {
  .page-hero.about-hero-halo .page-hero-copy-halo {
    width: 100%;
    margin-left: 0;
    padding: 24px 0;
  }

  .page-hero.about-hero-halo .page-hero-copy-halo::before {
    left: -18px;
    right: -18px;
  }
}