/* ==========================================================================
   Hero spacing - one consistent, compact top gap on every page.
   Heroes used min-height:900px with vertically centred content plus 80-150px of
   stacked top padding, leaving a large empty band above the breadcrumb/eyebrow.
   Now the content is anchored to the top, a fixed distance below the header.
   Loaded last on every page (after the page-specific stylesheets).
   ========================================================================== */
:root {
  --hero-header-h: 72px;
  --hero-top-gap: 56px;      /* breadcrumb sits this far below the header line (desktop) */
}

/* Sections: no centring, no min-height, no padding of their own */
.strategic-hero,
.technology-hero,
.about-hero,
.thinking-hero-section,
.lesprit-hero-section,
.contact-hero-section,
.legal-hero {
  min-height: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
}

/* Wraps: header clearance + the shared gap */
body .strategic-hero-wrap,
body .technology-hero-wrap,
body .about-hero > .wrap,
body .thinking-hero-wrap,
body .lesprit-hero-wrap,
body .contact-hero-wrap,
body .legal-hero > .wrap,
body #hero > .wrap {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding-top: calc(var(--hero-header-h) + var(--hero-top-gap)) !important;
}

.strategic-hero-content,
.strategic-hero-layout,
.technology-hero-layout,
.technology-hero-top {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 1024px) {
  :root {
    --hero-top-gap: 32px;
  }
}

/* Sectors only: the hero fills exactly one viewport (the illustration sits at its bottom-right). */
body.healthcare-page .strategic-hero,
body.healthcare-page .strategic-hero > .wrap {
  min-height: 100vh !important;
  min-height: 100svh !important;
  box-sizing: border-box !important;
}

/* Sectors only: centre the hero content vertically within that one viewport
   (equal top/bottom space, the top one clearing the fixed header). */
body.healthcare-page #hero > .wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: var(--hero-header-h) !important;
  padding-bottom: var(--hero-header-h) !important;
}