/* Block: cnm-hero
 * Extracted from theme CSS by wp-arch-agent.
 * Classes: cnm-hero, home-hero, page-title, page-title--lead
 */

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: 940px;
  display: flex;
  align-items: flex-start;
  color: var(--white, #fff);
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #376390;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 1399px) {
  .home-hero {
    min-height: 780px;
  }
}

@media (max-width: 991px) {
  .home-hero {
    min-height: 640px;
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 560px;
  }
}

.page-title {
  background: var(--white, #ffffff);
}

/* The band carries the blue for the WHOLE top area, not just its own strip.
   86ak1yth8: "the two blue background areas separate, so there's a white sliver
   between them", and the operator: "fill the whole top area with the blue
   colour, not just the nav bg". This finishes what 86ak0hpj8 started - that one
   painted the fixed header --sky-pale so the top would read as one field, but
   the two blues stayed two separate boxes with the body's header-height offset
   of plain white between them. Anything that moves the header off its resting
   place opens that seam: the header carries an entrance tween that starts at
   translateY(-28px)/opacity 0, and it reappears on scroll-up, so the white
   showed on load AND when scrolling back up - both of the client's reports.

   Pulling the band up by the exact offset the body gave the fixed header, then
   paying it straight back as padding, leaves every child where it was (measured:
   the pill does not move) while the band's own background now paints the full
   area behind the header. With the header shifted 85px up, that region hit-tests
   to .page-title, not to white.

   Both values come from the SAME variables as the body offset in header.css
   (--header-h, and --header-h-mobile at <=991 where the header is really 93px),
   so the pull cannot drift out of sync with the space being compensated. Scoped
   to --lead because only that variant is blue; the plain white band sits under a
   white header and has no seam to hide. */
.page-title--lead {
  background: var(--sky-pale, #E7F6FF);
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}

@media (max-width: 991px) {
  .page-title--lead {
    margin-top: calc(-1 * var(--header-h-mobile));
    padding-top: var(--header-h-mobile);
  }
}

/* padding-block 90 -> 56 ("Please reduce padding in the External Studies
   container", 86ak0hpj8). THIS is the copy that wins — it is enqueued as its
   own <link> after the inlined theme CSS, so the identical change made in
   assets/css/interior.css does nothing on its own. Keep the two in step.
   Note it now matches the ≤991px value below, which is deliberate: that
   breakpoint had already been given the tighter band and the desktop one was
   the outlier. */
.page-title--lead .page-title__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 56px;
}

.page-title--lead .page-title__pill {
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  .page-title--lead .page-title__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-block: 56px;
  }
}