/* ==========================================================================
   Page hero — static banner for inner pages.
   Same frame as one slide of the home slider (.home-hero in index.html):
   width, 1024:318 desktop proportion, 16px radius, shadow, flush under the
   84px fixed header. Text sits on the left over a light fade, like the
   home banners; photo fills the box and is anchored right.
   Load after common.css / variables.css / typography.css.

   Markup (copy for new pages; place directly after </header>):

   <section class="page-hero" aria-labelledby="page-hero-title">
       <img class="page-hero__img" src="IMAGE" alt="ALT" loading="eager" />
       <div class="page-hero__content">
           <p class="page-hero__eyebrow">EYEBROW</p>
           <h1 class="page-hero__title" id="page-hero-title">PLAIN <strong>HIGHLIGHT</strong></h1>
           <p class="page-hero__subtitle">SUBTITLE</p>
           <a class="page-hero__cta" href="LINK">CTA TEXT <span aria-hidden="true">&#8594;</span></a>
       </div>
   </section>
   ========================================================================== */

.page-hero {
  --page-hero-header: 84px;
  --page-hero-ink: #0b1f4d;
  --page-hero-accent: #0a6cf0;
  --page-hero-fade: 248, 251, 255;

  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 2 * var(--space-margin-desktop));
  max-width: calc(var(--space-container-max) - 2 * var(--space-margin-desktop));
  margin: var(--page-hero-header) auto 0;
  /* No overflow:hidden, so the aspect ratio stays a minimum and the box grows if the copy needs room */
  aspect-ratio: 1024 / 318;
  /* Square corners, crisp edges */
  isolation: isolate;
}

.page-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Light wash behind the copy, fading out toward the photo */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
      rgba(var(--page-hero-fade), 0.97) 0%,
      rgba(var(--page-hero-fade), 0.92) 36%,
      rgba(var(--page-hero-fade), 0.45) 60%,
      rgba(var(--page-hero-fade), 0) 78%);
}

.page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 50%;
  padding: 28px 0 28px 6%;
  color: var(--page-hero-ink);
  font-family: 'Inter', sans-serif;
}

.page-hero__eyebrow {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

body .page-hero h1.page-hero__title {
  margin: 0;
  color: var(--page-hero-ink);
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.page-hero__title strong {
  display: block;
  font-weight: 800;
  color: var(--page-hero-accent);
  background: linear-gradient(180deg, #1f8bff 0%, #0757d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero__subtitle {
  max-width: 40ch;
  margin: 0;
  color: #34445f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.page-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d8cff 0%, #0a5fe0 100%);
  box-shadow: 0 8px 18px -6px rgba(10, 95, 224, 0.55);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -6px rgba(10, 95, 224, 0.6);
}

.page-hero__cta:focus-visible {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 5px #0f4c81;
}

/* Lead form that used to live inside a page's old hero, shown right below the banner */
.page-hero-form {
  width: calc(100% - 2 * var(--space-margin-desktop));
  max-width: 760px;
  margin: 32px auto 0;
  scroll-margin-top: calc(var(--page-hero-header, 84px) + 16px);
}

/* Tablet: same proportion as the home slider's tablet crop */
@media (max-width: 1023px) {
  .page-hero {
    aspect-ratio: 763 / 318;
  }

  .page-hero__content {
    max-width: 62%;
  }

  .page-hero::before {
    background: linear-gradient(90deg,
        rgba(var(--page-hero-fade), 0.97) 0%,
        rgba(var(--page-hero-fade), 0.9) 50%,
        rgba(var(--page-hero-fade), 0.3) 80%,
        rgba(var(--page-hero-fade), 0) 100%);
  }
}

/* Phone: grows with its copy; text runs full width over a stronger wash */
@media (max-width: 639px) {
  .page-hero {
    width: calc(100% - 2 * var(--space-margin-mobile));
    aspect-ratio: 477 / 318;
  }

  .page-hero::before {
    background: linear-gradient(90deg,
        rgba(var(--page-hero-fade), 0.96) 0%,
        rgba(var(--page-hero-fade), 0.88) 65%,
        rgba(var(--page-hero-fade), 0.55) 100%);
  }

  .page-hero__content {
    max-width: 100%;
    gap: 8px;
    padding: 24px 20px;
  }

  .page-hero__eyebrow {
    font-size: 15px;
  }

  .page-hero__subtitle {
    font-size: 14px;
  }

  .page-hero__cta {
    padding: 11px 22px;
    font-size: 15px;
  }

  .page-hero-form {
    width: calc(100% - 2 * var(--space-margin-mobile));
  }
}