/* ==========================================================================
   Mindspace - Home page mobile corrections

   Loaded last on the home page. EVERY rule in this file lives inside a
   max-width query at 900px or below, so no viewport above 900px - the whole
   desktop layout - resolves a single declaration from here. It only repairs
   what breaks once the screen gets narrow.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. HERO - restore a real scroll runway for the slide deck

   mindspace-hero.js drives the headline deck from how far the hero has
   scrolled:

       progress = -hero.top / (hero.offsetHeight - innerHeight)

   The 640px block in mindspace-hero.css floors the hero at one screen, which
   left roughly the hero's own padding - about 120px - as the entire travel for
   six slides. A single thumb-flick ran the whole deck, so the headline
   flickered instead of reading. Give the phone its own runway: far shorter
   than the 520vh a desktop scrolls, but long enough that each slide holds.
--------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .mindspace-hero {
        min-height: 260svh;
    }

    /* 100vh on a phone is measured against the chrome-less viewport, so the
       ticker pinned to the bottom of the sticky panel sat behind the browser
       bar. svh is the height actually on screen. */
    .mindspace-hero__sticky {
        min-height: 100svh;
    }
}


/* ---------------------------------------------------------------------------
   2. HERO - stop the copy column blowing out past the screen

   The single longest word in the deck is "DISTINCTION." Once the hero folds to
   one column, that column is `1fr`, which is `minmax(auto, 1fr)` - and a grid
   track's `auto` minimum is its min-content width, i.e. that whole unbreakable
   word. So the track grew to the word's width and dragged the subtitle, the
   buttons and the video stage out past the right edge with it; body's
   overflow-x:hidden then simply sliced them off.

   Three things together fix it, and all three are needed:
     - the track and every box on the way down may shrink below min-content,
     - the headline is sized so the longest word actually fits the screen,
     - break-word is the backstop, so a longer word typed into Hero Slides
       later wraps instead of bringing the overflow back.
--------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .mindspace-hero__content {
        grid-template-columns: minmax(0, 1fr);
        /* Measured at 700px, 820px and 899px: the hero copy began 2px ABOVE
           the bottom of the fixed header, so the eyebrow sat behind the bar at
           every tablet width. The stacked layout pads the top by 72px while
           the header stands 74px tall. */
        padding-top: calc(var(--mind-nav-h, 74px) + 26px);
    }

    .mindspace-hero__copy,
    .mindspace-hero__title,
    .mindspace-hero__stage-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .mindspace-hero__title span {
        overflow-wrap: break-word;
    }

    .mindspace-hero__subtitle {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   2b. HERO - the mobile composition

   The desktop hero is a two-up: copy on the left, a video panel inset on the
   right. Stacking those two into one narrow column is what looked wrong - the
   copy was squeezed at the top and the video ended up as a cropped strip
   underneath it, with neither reading as the main event.

   On a phone the video becomes the hero itself: it fills the whole sticky
   panel edge to edge, a scrim carries it down into black, and the headline
   sits over the bottom of the frame like a film poster. The top of the frame
   stays clear so the shot is actually visible, and the gold ticker closes the
   screen off along the bottom.
--------------------------------------------------------------------------- */

@media (max-width: 640px) {
    /* 12 uppercase characters at Satoshi Black run about 0.66em each, so the
       headline can be no wider than (screen - padding) / 8. 10.4vw holds that
       from 320px up, where the old 15vw overflowed every phone. */
    .mindspace-hero__title {
        font-size: clamp(1.7rem, 10.4vw, 3.9rem);
    }

    /* Copy drops to the foot of the frame. The top padding that clears the
       fixed header is set in the 900px block above and still applies here;
       this bottom padding clears the ticker. */
    .mindspace-hero__content {
        align-content: end;
        padding-bottom: 96px;
    }

    /* ---- the video, promoted to full-bleed backdrop ---- */

    .mindspace-hero__stage-wrap {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: auto;
        margin: 0;
        justify-self: stretch;
        opacity: 1;
    }

    .mindspace-hero__stage {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 0;
        /* The desktop mask feathers the left and right edges, which is right
           for an inset panel and wrong for a full-bleed one: here the frame
           should dissolve into the black under the header instead. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%);
    }

    /* The desktop crop is offset to sit behind the copy column on the right.
       Centred, and dimmed, so the headline stays readable over it. */
    .mindspace-hero__video {
        inset: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 38%;
        filter: contrast(1.05) saturate(1.02) brightness(0.66);
    }

    /* Legibility scrim: near-clear across the top third so the shot reads,
       then deepening to almost solid black behind the headline and buttons. */
    .mindspace-hero__stage-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(10, 10, 10, 0.76) 0%,
                rgba(10, 10, 10, 0.24) 24%,
                rgba(10, 10, 10, 0.58) 56%,
                rgba(8, 8, 8, 0.93) 86%,
                rgba(8, 8, 8, 0.97) 100%
            ),
            radial-gradient(ellipse at 50% 32%, rgba(166, 124, 82, 0.16), transparent 62%);
    }

    /* This floor-glow is placed 26% up from the bottom of the panel. On an
       inset panel that is the pedestal under the shot; full bleed, it lands as
       a bright band directly behind the headline. */
    .mindspace-hero__stage::after {
        opacity: 0.3;
    }

    /* ---- copy over the frame ---- */

    .mindspace-hero__copy {
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.5),
            0 2px 30px rgba(0, 0, 0, 0.85);
    }

    .mindspace-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* A short gold rule in front of the eyebrow, echoing the section kickers
       further down the page. */
    .mindspace-hero__eyebrow::before {
        content: "";
        width: 26px;
        height: 1px;
        flex: none;
        background: linear-gradient(90deg, transparent, var(--mind-gold));
    }

    .mindspace-hero__subtitle {
        color: rgba(245, 242, 234, 0.82);
    }

    /* Primary action takes the full width; the showreel link wraps beneath it
       and is centred under the button rather than hanging off the left. */
    .mindspace-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mindspace-hero__button {
        justify-content: center;
        gap: 14px;
        background: rgba(15, 15, 15, 0.56);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .mindspace-hero__button::after {
        margin-left: 0;
    }

    .mindspace-hero__showreel {
        align-self: center;
    }
}

@media (max-width: 400px) {
    .mindspace-hero__content {
        padding-right: 18px;
        padding-bottom: 88px;
        padding-left: 18px;
    }

    .mindspace-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 0.68rem;
    }

    .mindspace-hero__subtitle {
        margin-top: 18px;
        font-size: 0.94rem;
    }

    .mindspace-hero__actions {
        gap: 16px;
        margin-top: 24px;
    }

    /* The 230px floor is wider than the padding box on a 320px screen. */
    .mindspace-hero__button {
        min-width: 0;
    }

    .mindspace-hero__showreel {
        font-size: 0.82rem;
    }

    .mindspace-hero__play-icon {
        width: 38px;
        height: 38px;
    }
}


/* ---------------------------------------------------------------------------
   3. HEADER - the wordmark is nowrap, so it has to be sized to fit

   Brand + monogram + menu button overran the bar below about 350px.
--------------------------------------------------------------------------- */

@media (max-width: 400px) {
    .mindspace-nav {
        gap: 12px;
        padding-inline: 14px;
    }

    .mindspace-nav__brand strong {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
    }

    .mindspace-nav__brand small {
        margin-top: 4px;
        font-size: 0.5rem;
        letter-spacing: 0.16em;
    }

    /* Held at the 44px minimum touch target even as the bar tightens. */
    .mindspace-nav__menu {
        width: 44px;
        height: 44px;
    }
}


/* ---------------------------------------------------------------------------
   4. FEATURED WORK
--------------------------------------------------------------------------- */

@media (max-width: 640px) {
    /* The head stacks at 860px, so the button already sits on its own line; it
       reads as a real action full width rather than as a stub. */
    .ms-work__all {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .ms-work__grid {
        grid-auto-rows: 212px;
    }

    .ms-work__title {
        font-size: clamp(1.85rem, 9.6vw, 2.6rem);
    }
}


/* ---------------------------------------------------------------------------
   5. METRICS BAR - two cells per row have about 150px each on a 360px screen
--------------------------------------------------------------------------- */

@media (max-width: 400px) {
    .ms-stats__item {
        gap: 8px;
        min-height: 104px;
        padding: 18px 8px;
    }

    .ms-stats__value {
        font-size: 1.75rem;
    }

    .ms-stats__label {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .ms-stats__underline {
        bottom: 11px;
    }
}


/* ---------------------------------------------------------------------------
   6. SERVICES - carousel

   The ring cards keep a nowrap title sized for the 200px desktop card. Once
   the card shrinks to 162px the longer service names ran straight out through
   the card border.
--------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .msv2-card strong {
        white-space: normal;
        line-height: 1.22;
        text-wrap: balance;
    }

    /* 6px is below the legible floor; let the ticker wrap instead. */
    .msv2-bottom p {
        flex-wrap: wrap;
        justify-content: center;
        font-size: 8px;
        line-height: 1.6;
        letter-spacing: 0.14em;
        white-space: normal;
    }
}

@media (max-width: 460px) {
    .msv2-header h2 {
        font-size: clamp(30px, 10.5vw, 46px);
    }

    .msv2-header-right p {
        font-size: 13px;
    }

    /* Pull the ring in with the card, so the two neighbours still frame the
       front card instead of being pushed off the stage. */
    .msv2-stage {
        min-height: 452px;
        --ring-radius: 168px;
    }

    .msv2-stage-glow {
        width: 330px;
        height: 330px;
    }

    .msv2-carousel {
        height: 222px;
    }

    .msv2-card {
        width: 148px;
        height: 196px;
        margin: -98px 0 0 -74px;
        padding: 16px 14px;
    }

    .msv2-card-icon {
        width: 42px;
        height: 42px;
        margin-top: 12px;
    }

    .msv2-card strong {
        font-size: 13px;
    }

    .msv2-platform {
        width: 262px;
        height: 136px;
    }

    .msv2-platform-pool {
        width: 262px;
        height: 124px;
    }

    .msv2-platform-ring {
        width: 258px;
        height: 258px;
    }

    .msv2-platform-ring::before {
        width: 190px;
        height: 190px;
    }

    .msv2-platform-arc {
        width: 222px;
        height: 222px;
    }

    /* The panel is measured, not floored: a wrapped title made the fixed 430px
       floor leave a dead gap under the footer row. */
    .msv2-detail {
        min-height: 0;
        padding: 22px 18px;
    }

    .msv2-detail-number {
        margin-top: 26px;
        font-size: 54px;
    }

    .msv2-detail-icon {
        margin-top: 20px;
    }

    .msv2-detail h3 {
        min-height: 0;
        margin: 16px 0 11px;
        font-size: 23px;
    }
}


/* ---------------------------------------------------------------------------
   7. CTA
--------------------------------------------------------------------------- */

@media (max-width: 600px) {
    /* 7px is below what a phone renders as readable text. */
    section.mindspace-cta .mindspace-cta__bottom,
    .mindspace-cta__bottom {
        font-size: 9px;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 400px) {
    .mindspace-cta__inner {
        padding: 40px 18px 48px;
        gap: 42px;
    }

    .mindspace-cta__title {
        font-size: clamp(38px, 13vw, 52px);
    }

    /* The label is nowrap, so label + gap + the 40px arrow has to fit inside
       the card at its narrowest. */
    section.mindspace-cta .mindspace-cta__button {
        gap: 12px;
        padding: 0 8px 0 18px;
    }

    section.mindspace-cta .mindspace-cta__button span:first-child {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .mindspace-cta__bottom {
        margin: 0 18px 18px;
    }
}


/* The footer is shared by every page, so its mobile fixes live in
   mindspace-pages-mobile.css, which this page loads too. */