/* Bundle: home-hero-refactor-v2 · 2026-07-27T11:20Z · Mega-hero = copy only; services moved to former Solutions slot */
/* --------------------------------------------------------------------------
   Mega-hero — full-viewport section holding hero copy + services grid,
   with an animated canvas layer painted behind. Replaces the previous
   split hero + services sections.

   Layout:
     .hero-mega          position:relative, min-height:100vh
     .hero-mega__canvas  absolute, inset:0, z-index:0 (behind everything)
     .hero-mega__inner   position:relative, z-index:1 (content stack)
     .hero-mega__copy    top block: H1 + lede + CTA
     .hero-mega__services bottom block: section heading + 6-card grid

   The sticky site nav (position:sticky, top:0) sits OVER the canvas per
   BH-005 posture; no viewport height is carved out for the nav.
-------------------------------------------------------------------------- */

.hero-mega {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    /* Pull the mega-hero up under the sticky nav so the canvas fills the
       viewport from the very top edge. The nav's blurred background sits
       above per BL-007. */
    margin-top: calc(-1 * var(--space-3xl));
    padding-top: var(--space-3xl);
    background: var(--bg);
}

.hero-mega__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;   /* input handled on the section */
    z-index: 0;
}

.hero-mega__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Single copy block — centre vertically in the viewport for the
       "traditional hero" feel now that the services grid has moved
       to its own section below. */
    justify-content: center;
    gap: var(--space-3xl);
    /* Reserve height under the sticky nav so hero copy doesn't sit under it. */
    padding-block: calc(56px + var(--space-2xl)) var(--space-3xl);
    min-height: 100vh;
}

/* ------ Top block: hero copy ---------------------------- */

.hero-mega__copy {
    max-width: 720px;
}
.hero-mega__copy h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw + 0.5rem, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 var(--space-lg);
    max-width: 22ch;
}
.hero-mega__copy h1 em {
    font-style: normal;
    color: var(--color-primary);
}
.hero-mega__copy p {
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 56ch;
    margin: 0 0 var(--space-xl);
}
.hero-mega__copy .buttons {
    display: inline-flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ------ #solutions anchor alias — invisible in-page anchor kept so the
   nav's "#solutions" link doesn't dead-anchor after the section was
   renamed to #services. Zero visual footprint. */
.anchor-alias {
    display: block;
    height: 0;
    scroll-margin-top: 56px;
}


/* ------ Legacy .hero styles — kept for the /about hero etc. */
.hero { padding: var(--space-4xl) 0; }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
    align-items: start;
}
@media (min-width: 900px) {
    .hero-grid { grid-template-columns: 1.1fr 1fr; }
}
.hero h1 {
    font-size: 44px;
    line-height: 1.05;
    margin-bottom: var(--space-lg);
    max-width: 20ch;
    color: var(--text);
}
.hero h1 em {
    font-style: normal;
    color: var(--color-primary);
}
.hero p {
    font-size: 17px;
    color: var(--text-muted);
    max-width: 52ch;
    margin-bottom: var(--space-xl);
}


/* Reduced motion — canvas already checks the pref itself. */