/* ==========================================================================
   Mindspace - Home page vertical rhythm
   Single source of truth for the space BETWEEN sections.

   Loaded last so it settles the conflicting margins that had accumulated
   across mindspace-hero.css, mindspace-cta.css and mindspace-services-v2.css.

   Rule: a full-bleed section (its own background runs edge to edge) owns the
   gap with its padding; a card-style section owns it with its margin. The two
   are never stacked, so no gap is ever paid for twice.
   ========================================================================== */

:root {
    /* Standard beat between two major sections. */
    --ms-rhythm: clamp(52px, 4.4vw, 74px);
    /* Tight beat for a pair that reads as one block (work + its metrics). */
    --ms-rhythm-tight: clamp(24px, 2.4vw, 36px);
}

/* ---------- hero -> featured work -------------------------------------- */

.ms-work {
    margin-top: var(--ms-rhythm);
    margin-bottom: 0;
}

/* ---------- featured work -> metrics (deliberately tight) --------------- */

.ms-stats {
    margin-top: var(--ms-rhythm-tight);
    margin-bottom: 0;
}

/* ---------- metrics -> services ----------------------------------------
   Full-bleed: no margin, the padding is the gap on both sides.            */

.mindspace-services-v2 {
    margin-block: 0;
    padding-block: var(--ms-rhythm);
}

/* ---------- services -> CTA -> footer -----------------------------------
   The services padding-bottom already supplies the gap above the CTA card,
   so the card only pays for the gap below itself.                         */

section.mindspace-cta,
.mindspace-cta {
    margin-top: 0;
    margin-bottom: var(--ms-rhythm);
}

/* The footer's own padding sits inside its border, so its top border needs
   no extra margin above it. */
.mindspace-footer {
    margin-top: 0;
}

/* ---------- trailing space INSIDE sections ------------------------------
   The gaps between sections were correct, but each section also ended with a
   large run of near-empty space of its own, which read as one huge void once
   stacked against the next section's opening space. These trim that tail. */

/* The services section signs off with a thin ticker rule; it does not need a
   65px run-up to it on top of the section's own bottom padding. */
.msv2-bottom {
    margin-top: clamp(28px, 2.6vw, 40px);
}

/* The footer's opening padding sits directly under the gap above it, so the
   two were being read as a single oversized void. */
.mindspace-footer {
    padding-top: clamp(42px, 3.8vw, 58px);
}

/* The CTA card was floored at 720px with a 680px centred inner block, so on a
   wide screen it padded itself out with empty space above and below its own
   content. Let the content set the height; the floor only stops it collapsing.
   The bottom padding stays clear of .mindspace-cta__bottom, which is pinned
   24px from the card edge. */
section.mindspace-cta,
.mindspace-cta {
    min-height: auto;
}

.mindspace-cta__inner {
    min-height: 0;
    padding-block: clamp(56px, 4.6vw, 72px);
}

/* ---------- anchor offsets --------------------------------------------- */

.ms-work,
.ms-stats,
.mindspace-services-v2,
section.mindspace-cta,
.mindspace-cta {
    scroll-margin-top: 104px;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1180px) {
    /* Must stay BELOW the desktop value - a narrower screen should never end
       up with a bigger gap than a wide one. */
    :root {
        --ms-rhythm: clamp(44px, 4.4vw, 58px);
        --ms-rhythm-tight: clamp(20px, 2.4vw, 30px);
    }
}

@media (max-width: 720px) {
    :root {
        --ms-rhythm: 44px;
        --ms-rhythm-tight: 18px;
    }

    .ms-work,
    .ms-stats,
    .mindspace-services-v2,
    section.mindspace-cta,
    .mindspace-cta {
        scroll-margin-top: 86px;
    }

    /* The CTA card is inset from the viewport edge at this width, so it keeps
       a slightly smaller bottom beat than the full-bleed sections above it. */
    section.mindspace-cta,
    .mindspace-cta {
        margin-bottom: 40px;
    }
}