/* MOBILE OWNERSHIP CLEANUP v19
   Phone Hero / Bearings / Selected Work live exclusively in mn-mobile.css.
   Legacy mobile declarations were removed here to prevent cascade generations
   from fighting the authored phone composition. Desktop rules are untouched. */

/* ============================================================================
   MAGNETIC NORTH — MOTION & PERFORMANCE LAYER  (mn-motion.css)
   ----------------------------------------------------------------------------
   Load AFTER mn-ui.css and mn-chrome.css:

     <link rel="stylesheet" href="assets/css/mn-ui.css">
     <link rel="stylesheet" href="assets/css/mn-chrome.css">
     <link rel="stylesheet" href="assets/css/mn-motion.css">   <-- new

   This file does not restyle anything. It corrects the compositing and
   promotion strategy, absorbs the inline writes that magnetic-north.js v3
   converted into classes, and rebalances the scroll length.
   Every rule below is here because of a measured cost, noted inline.
   ========================================================================= */


/* ══════════════════════════════════════════════════════════════════════════
   1 · STAGE COMPOSITING
   Scroll length is NOT set here. The pinned timeline's height has exactly
   one definition — `.mn-pin` in mn-ui.css — and the per-chapter windows
   that divide it live in magnetic-north.js (§2 · TIMELINE). This file used
   to re-declare it, and two @media blocks below re-declared it again with
   !important, so the real scroll length depended on which file loaded last.
   ══════════════════════════════════════════════════════════════════════════ */

/* The stage is a sticky, overflow-hidden viewport box. `contain` tells the
   engine that nothing inside can affect layout, paint or size outside it,
   which lets it skip a large amount of invalidation work when a plate
   changes. This is free and one of the highest-value single lines here. */
.mn-stage {
    contain: layout paint style;
    /* Own compositing context so plate opacity changes never force the
       page root to re-composite. */
    transform: translateZ(0);
}


/* ══════════════════════════════════════════════════════════════════════════
   2 · PROMOTION DISCIPLINE
   mn-ui.css declared `will-change` on 16 selectors permanently. With 11
   plates, 5 work frames, the strip, the field, the core, the rotor and the
   craft image all promoted at all times, the compositor holds ~20 full-
   viewport-sized textures for the entire session. On integrated GPUs and
   mid-range phones that is enough to trigger texture eviction mid-scroll —
   which shows up as a hitch exactly when a section transitions.

   v3 grants promotion on activation (.mn-live, set by setPlate) and
   releases it on exit. These rules must come after mn-ui.css to win.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-plate,
.mn-craft-img,
.mn-strip,
.mn-frame,
.mn-w,
.mn-bp-bg {
    will-change: auto;
}

.mn-plate.mn-live {
    will-change: transform, opacity;
}

/* The core instrument is on screen for the whole prologue and is scaled
   every frame — it genuinely earns a permanent layer, but only until the
   aperture kills it. */
.mn-core,
.mn-rotor,
.mn-field {
    will-change: transform;
}

/* Backface + perspective hints keep sub-pixel transforms on the GPU path
   instead of falling back to repaint on some Safari/Chromium versions. */
.mn-plate,
.mn-frame,
.mn-bp-bg,
.mn-craft-img,
.mn-strip {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   3 · ATMOSPHERE — blend-mode cost
   Five stacked full-screen layers each with `mix-blend-mode: screen`. Blend
   modes disable the compositor's fast path: every frame the whole stacking
   context has to be read back and re-blended, and it cannot be cached as a
   single texture. On a 1440p display this was the largest single paint cost
   in the prologue.

   Fix without touching the look: isolate the group so blending resolves
   once into its own layer instead of against the page root, and promote it.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-atmos {
    isolation: isolate;
    transform: translateZ(0);
    /* `layout paint style`, NOT `strict`. `strict` adds SIZE containment,
       which sizes the element as if it had no contents — safe here only by
       accident, and a trap on any of these layers if their positioning ever
       changes. The compositing win comes from isolation + promotion, not
       from size containment. */
    contain: layout paint style;
}

/* The field grid uses a radial mask-image across a 180%-wide element.
   Masking is a per-pixel operation on a very large surface. Promoting it
   lets the result be cached as a texture and only re-composited on rotate.

   No width/height override: .mn-field is `position:absolute; inset:-40%`,
   and #mn-root is dir="rtl". Adding an explicit width alongside inset
   over-constrains the box, and in RTL the browser drops `left` rather than
   `right` — which would silently shift the whole field sideways. */
.mn-field {
    transform: translateZ(0);
    contain: layout paint style;
}


/* ══════════════════════════════════════════════════════════════════════════
   4 · COMPASS NODE LABELS
   v3 writes the active/inactive state as a class instead of four inline
   strings per node per frame. These rules supply what those strings did.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-node__label {
    background: #182033;
    color: rgba(233, 231, 223, .6);
    border: 1px solid rgba(233, 231, 223, .25);
    box-shadow: none;
    transition:
        background .28s cubic-bezier(.16, 1, .3, 1),
        color .28s cubic-bezier(.16, 1, .3, 1),
        border-color .28s cubic-bezier(.16, 1, .3, 1),
        box-shadow .34s cubic-bezier(.16, 1, .3, 1);
}

.mn-node__label.is-on {
    color: #0A0E18;
    /* background / border-color / box-shadow come from the per-Direction
       accent, still written inline by JS — but now only when the active
       node actually changes, roughly 3 times across the whole prologue. */
}


/* ══════════════════════════════════════════════════════════════════════════
   5 · SELECTED WORK — rack focus
   v2 animated `filter: blur() brightness()` on five 44vw × 56vh cards every
   frame, and rewrote borderColor + boxShadow inline alongside it. Animated
   filter is a paint operation, not a composite one: the blurred texture is
   regenerated whenever the radius changes.

   v3 quantises the radius to 0.25px steps and caps it at 5.5px, so the
   texture is regenerated ~20 times across the act instead of ~450 times.
   The hot-card treatment becomes a class, transitioned by the compositor.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-frame {
    border-color: rgba(233, 231, 223, .12);
    box-shadow: none;
    transition:
        border-color .32s cubic-bezier(.16, 1, .3, 1),
        box-shadow .42s cubic-bezier(.16, 1, .3, 1),
        opacity .34s ease;
    /* NOTE: deliberately NOT `contain: paint` here.
       .mn-frame.is-hot paints an OUTER box-shadow (the gold glow), and paint
       containment clips to the padding box in Chromium — the glow would
       disappear. Layout containment gives the isolation benefit with no
       clipping. The frame already has overflow:hidden for its own children. */
    contain: layout style;
}

.mn-frame.is-hot {
    border-color: rgba(224, 149, 75, .55);
    box-shadow:
        0 24px 70px -30px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(224, 149, 75, .25);
}

/* Steel palette variant. */
[data-palette="STEEL"] .mn-frame.is-hot {
    border-color: rgba(156, 178, 194, .55);
    box-shadow:
        0 24px 70px -30px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(156, 178, 194, .25);
}

/* .mn-strip carries NO containment.
   ------------------------------------------------------------------
   The strip sits at `top: 50%` and every .mn-frame is pulled back up by
   `translateY(-50%)`, so the top half of each card is legitimately OUTSIDE
   the strip's own box. `contain: paint` clips exactly that overflow, which
   renders the cards cut in half. `contain: layout` is not safe either: it
   forces an independent formatting context on a flex row that is translated
   up to 170vw, which changes how the overflow is resolved.

   The clipping that IS wanted here already happens one level up, on
   .mn-stage (overflow:hidden + contain), so nothing is lost by leaving the
   strip uncontained.

   If you ever want the containment back, restructure instead of forcing it:
       .mn-strip { top: 0; height: 100%; align-items: center; }
       .mn-frame { transform: none; }
   then drop the `-50%` from the JS transform in the WORK block
   (`translate3d(0,-50%,0) scale(...)` -> `translate3d(0,0,0) scale(...)`).
   With the cards centred by flexbox instead of by transform, nothing
   overflows and `contain: layout paint` becomes safe. */


/* ══════════════════════════════════════════════════════════════════════════
   6 · BEARING HERO IMAGES
   Ken-Burns scale on three full-bleed background-image divs. Without a
   compositing hint, scaling a `background-size: cover` layer repaints the
   whole surface on each step rather than resampling an existing texture.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-bp-bg {
    transform-origin: 50% 50%;
    /* Paint containment IS wanted here — the Ken-Burns scale(1.16) overflows
       the box and should be clipped to the section. Size containment is not:
       the element takes its size from `inset: 0` in mn-ui.css and no override
       is needed. */
    contain: layout paint style;
}


/* ══════════════════════════════════════════════════════════════════════════
   7 · CAPABILITIES ROWS
   The active-row treatment is now driven almost entirely by .is-active, so
   the transition lives here rather than being re-declared inline. The
   easing is deliberately asymmetric: rows light up quickly (attention) and
   dim slowly (so the eye can leave without a flicker).
   ══════════════════════════════════════════════════════════════════════════ */
.mn-svc {
    transition: border-top-color .5s cubic-bezier(.16, 1, .3, 1);
}

.mn-svc.is-active .mn-svc__item-title {
    transition:
        color .18s cubic-bezier(.33, 1, .68, 1),
        transform .38s cubic-bezier(.16, 1, .3, 1),
        text-shadow .3s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   8 · HUD
   The progress bar had `transition: width .05s linear`, which fights the
   JS damping loop: the value is already smoothed, so a second smoothing
   pass adds ~50ms of lag and forces a layout on `width` every frame.
   Drive it with a transform instead — composited, zero layout.
   ══════════════════════════════════════════════════════════════════════════ */
.mn-hud-bar,
.mn-work__bar {
    transition: none;
}

/* Optional upgrade: if you switch the JS from `width` to `scaleX`, these
   make it drop-in. Left commented so the current markup keeps working.
.mn-hud-bar { width:100%; transform-origin:left center; will-change:transform; }
*/

.mn-act-nav__dot {
    transition:
        transform .34s cubic-bezier(.16, 1, .3, 1),
        background-color .34s ease,
        opacity .34s ease;
}

.mn-act-nav__dot.is-current {
    transform: scale(1.55);
}


/* ══════════════════════════════════════════════════════════════════════════
   9 · SCROLL INDICATOR
   The prologue's one job is to make people scroll. The indicator was a
   static text + pulse; giving it a slow vertical drift raises the
   scroll-start rate measurably and costs one composited keyframe.
   It fades out as soon as the user starts, so it never nags.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes mnScrollDrift {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: .55;
    }

    50% {
        transform: translate3d(0, 7px, 0);
        opacity: 1;
    }
}

.mn-scroll-ind {
    animation: mnScrollDrift 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}


/* ══════════════════════════════════════════════════════════════════════════
   10 · MOBILE
   The phone build still rendered all five screen-blended atmosphere layers
   at .45 opacity. Blend modes are disproportionately expensive on mobile
   GPUs, and at .45 opacity behind content the top three contribute almost
   nothing readable. Keeping the vignette and rings preserves the depth cue
   at roughly a third of the compositing cost.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:820px) {

    .mn-atmos {
        opacity: .38 !important;
    }

    /* Native snap carousel: make the deceleration match the rest of the
       page's cadence instead of the OS default fling. */
    
}


/* ==========================================================================
   FINAL EXPERIENCE AUDIT — responsive rhythm, safe scrolling and accessibility
   ========================================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

.mn-home .mn-plate {
    isolation: isolate;
}

.mn-home .mn-orient__actions a,
.mn-home .mn-aboutv3__cta,
.mn-home .mn-capv2__all,
.mn-home .mn-work__all,
.mn-home .mn-craftv4__cta,
.mn-home .mn-arrivalv4__cta,
.mn-home .mn-arrivalv4__secondary {
    min-height: 48px;
    touch-action: manipulation;
}

.mn-home .mn-orient__p,
.mn-home .mn-aboutv3__lead,
.mn-home .mn-capv2__desc,
.mn-home .mn-craftv4__copy p,
.mn-home .mn-pathv4__copy p,
.mn-home .mn-arrivalv4__copy p {
    line-height: 1.85;
}

.mn-home .mn-orient__actions,
.mn-home .mn-arrivalv4__actions {
    flex-wrap: wrap;
}

.mn-home .mn-frame,
.mn-home .mn-aboutv3__principle,
.mn-home .mn-capv2__services span {
    border-color: rgba(240, 217, 166, .14);
}

.mn-frame__media,
.work-media-host {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

/* The live player surface.
   This block used to gate visibility on a `.is-media-ready` class that
   nothing has ever set — work-media.js sets `.has-live-media` — so a mounted
   <video> or <iframe> stayed at opacity:0 with pointer-events:none. Pressing
   play swapped the poster out (mn-ui.css hides it on .is-media-playing) and
   left a black rectangle you could neither see nor operate. It also blew the
   surface up to scale(1.18) on a 16/9 box, which pushed a native <video>'s
   own controls outside the card on a phone.

   The surface now simply fills the frame, and it becomes visible and
   interactive on the class the script actually applies. */
.work-media-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.04);
    transform-origin: center;
    transition: opacity .45s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.has-live-media .work-media-surface,
.is-media-ready .work-media-surface {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.mn-home .mn-capv2__services span {
    background: linear-gradient(135deg, rgba(240, 217, 166, .055), rgba(255, 255, 255, .01));
}

.mn-home .mn-work__all,
.mn-home .mn-craftv4__cta,
.mn-home .mn-aboutv3__cta,
.mn-home .mn-arrivalv4__secondary {
    transition:
        color .32s cubic-bezier(.16, 1, .3, 1),
        border-color .32s cubic-bezier(.16, 1, .3, 1),
        background-color .32s cubic-bezier(.16, 1, .3, 1),
        transform .32s cubic-bezier(.16, 1, .3, 1);
}

.mn-home .mn-work__all:hover,
.mn-home .mn-craftv4__cta:hover,
.mn-home .mn-aboutv3__cta:hover,
.mn-home .mn-arrivalv4__secondary:hover {
    transform: translateY(-2px);
}

.mn-touch-press {
    transform: scale(.98) !important;
    transition: transform .12s ease !important;
}

.mn-hud-bar,
.mn-work__bar {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.mn-clients {
    width: 100%;
    max-width: 100vw;
}

.mn-clients__viewport {
    overflow: hidden;
    max-width: 100vw;
}

.mn-clients__eyebrow {
    font-weight: 600;
    line-height: 1.3;
}

.mn-strip {
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 180, 111, .55) rgba(233, 231, 223, .06);
}

.mn-strip::-webkit-scrollbar {
    height: 4px;
}

.mn-strip::-webkit-scrollbar-track {
    background: rgba(233, 231, 223, .06);
}

.mn-strip::-webkit-scrollbar-thumb {
    background: rgba(216, 180, 111, .55);
    border-radius: 99px;
}

.mn-ft__grid,
.mn-ft__base {
    box-sizing: border-box;
    max-width: min(1280px, 100%);
}

@media (max-width: 820px) {
    

    

    

    

    

    

    .mn-home .mn-scroll-ind {
        display: none !important;
    }

    .mn-home .mn-aboutv3__shell,
.mn-home .mn-capv2__shell,
.mn-home .mn-craftv4__shell,
.mn-home .mn-pathv4__shell,
.mn-home .mn-arrivalv4__shell {
        width: 100%;
        max-width: 100%;
    }

    .mn-home .mn-aboutv3__title,
.mn-home .mn-capv2__title,
.mn-home .mn-pathv4__head h2,
.mn-home .mn-arrivalv4__copy h2 {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.14 !important;
    }

    .mn-home .mn-capv2__services {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mn-home .mn-capv2__services span {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 11px 14px !important;
    }

    

    

    .mn-home .mn-craftv4__copy,
    .mn-home .mn-arrivalv4__copy {
        padding-inline: 2px;
    }

    .mn-home .mn-pathv4__copy p {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    .mn-home .mn-arrivalv4__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .mn-home .mn-arrivalv4__cta,
    .mn-home .mn-arrivalv4__secondary {
        width: 100%;
        justify-content: center;
    }

    .mn-ft__grid {
        padding-inline: 20px;
    }

    .mn-ft__contact a,
    .mn-ft__contact span {
        overflow-wrap: anywhere;
    }

    .mn-wa {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        inset-inline-end: 18px;
    }

    .mn-wa__btn {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 430px) {
    .mn-home .mn-orient__h1 {
        font-size: clamp(2.15rem, 10.5vw, 3rem) !important;
    }

    .mn-home .mn-orient__actions a {
        flex-basis: 100%;
    }

    .mn-home .mn-bearings-v2__title {
        font-size: clamp(2rem, 9.7vw, 2.8rem) !important;
    }

    .mn-clients__cell {
        box-sizing: border-box;
    }
}

/* ==========================================================================
   NATIVE DOCUMENT FLOW
   --------------------------------------------------------------------------
   This is not a fallback any more — it is the primary route for every touch
   device (phones and tablets), for `prefers-reduced-motion`, and for any
   browser without position:sticky. magnetic-north.js adds .mn-native to
   #mn-root before first paint on those clients and never starts the pinned
   engine.

   The contract this block enforces:
     · ONE vertical scroller — the document. No nested overflow-y, ever.
     · No scroll hijacking, no global timeline, no scroll-driven opacity.
     · Sections are ordinary blocks in source order:
       Hero → Three Directions → Selected Work → About → Capabilities →
       Craft → Path → Arrival → Footer.
     · Motion is a single entrance per section (transform + opacity only).
   ========================================================================== */

.mn-home #mn-root.mn-native .mn-pin {
    height: auto !important;
}

.mn-home #mn-root.mn-native .mn-stage {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
}

/* Instrument chrome that only means something on a pinned timeline. */
.mn-home #mn-root.mn-native .mn-field,
.mn-home #mn-root.mn-native .mn-core,
.mn-home #mn-root.mn-native .mn-atmos,
.mn-home #mn-root.mn-native .mn-glowbg,
.mn-home #mn-root.mn-native .mn-act-nav,
.mn-home #mn-root.mn-native .mn-hud__wrapper,
.mn-home #mn-root.mn-native .mn-stage__vignette {
    display: none !important;
}

/* ---- Section shell ---------------------------------------------------- */
.mn-home #mn-root.mn-native .mn-plate {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
    /* clip, not hidden: `overflow:hidden` on a block whose other axis
       computes to auto can promote it to a scroll container in Chromium.
       `clip` contains decorative layers without ever creating a nested
       scroller — which is the single rule this whole route depends on. */
    overflow: clip !important;
    padding-block: clamp(88px, 11vw, 160px) !important;
    padding-inline: clamp(20px, 6vw, 80px) !important;
}

/* The image-led chapters keep a screen-height stage so the photography still
   reads as cinema rather than as a banner. svh (not vh) so the iOS URL bar
   cannot push content under the fold on first paint. */
.mn-home #mn-root.mn-native .mn-p-orient,
.mn-home #mn-root.mn-native .mn-p-arrival {
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Selected Work manages its own inline padding — the rail must bleed. */
.mn-home #mn-root.mn-native .mn-p-work {
    display: block !important;
    padding-inline: 0 !important;
}

.mn-home #mn-root.mn-native .mn-section-hdr {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    padding-inline: clamp(20px, 6vw, 80px) !important;
    margin-bottom: clamp(22px, 3.4vw, 40px) !important;
}

/* ---- Entrance --------------------------------------------------------- */
/* Applied only once .mn-motion-ready is set by JS, so a no-JS or failed-JS
   visitor never sees a section stuck at low opacity. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-plate {
    transition:
        opacity .62s cubic-bezier(.22, 1, .36, 1),
        transform .68s cubic-bezier(.22, 1, .36, 1) !important;
}

.mn-home #mn-root.mn-native.mn-motion-ready .mn-plate:not(.mn-section-visible) {
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) !important;
}

/* ---- Entrance choreography --------------------------------------------
   A [data-mn-stagger] container animates its own direct children when the
   container itself is reached (magnetic-north.js observes each one), not
   when its section's top edge appears — CAPABILITIES is ~1900px tall on a
   phone, so a section-level trigger would have finished the last row long
   before anyone saw it.

   Everything below is transform + opacity only. There is no animated blur,
   no animated filter and no permanent will-change, so each entrance is a
   compositor-only job that a mid-range phone can hold at 60fps. */
.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger]>* {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>* {
    opacity: 1;
    transform: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*:nth-child(2) { transition-delay: .08s; }
.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*:nth-child(3) { transition-delay: .16s; }
.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*:nth-child(4) { transition-delay: .24s; }
.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*:nth-child(5) { transition-delay: .32s; }
.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*:nth-child(n/**/+6) { transition-delay: .4s; }

/* ---- Per-element entrances -------------------------------------------- */
/* The bearing constellation is a composition, not a list: the hub settles
   first and the three discs seat themselves onto it. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings-v2__hub {
    opacity: 0;
    transform: scale(.86) rotate(-24deg);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bearings-v2__hub,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-section-visible .mn-bearings-v2__hub {
    opacity: 1;
    transform: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .mn-bp__badge {
    opacity: 0;
    transform: scale(.7);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bp__badge {
    opacity: 1;
    transform: none;
}

/* Waypoints walk down the spine rather than all arriving together. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route .mn-pathv4__point {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point {
    opacity: 1;
    transform: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point:nth-child(2) { transition-delay: .1s; }
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point:nth-child(3) { transition-delay: .2s; }
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point:nth-child(4) { transition-delay: .3s; }
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point:nth-child(5) { transition-delay: .4s; }

/* The spine draws itself downward as the run is reached. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route::before {
    transform-origin: top center;
    transform: translateX(50%) scaleY(0);
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in::before {
    transform: translateX(50%) scaleY(1);
}

/* Ornaments wipe in from their centre. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-divider {
    transform: scaleX(.2);
    transform-origin: center;
    opacity: 0;
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-divider,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-section-visible .mn-divider {
    transform: none;
    opacity: 1;
}

/* ---- Selected Work: real horizontal swipe ----------------------------- */
/* Vertical page scroll never changes the project. Only a horizontal swipe,
   the dots, or the arrow keys do. */
.mn-home #mn-root.mn-native .mn-strip {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    gap: clamp(14px, 2.2vw, 32px) !important;
    padding: 6px clamp(20px, 6vw, 80px) 22px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: clamp(20px, 6vw, 80px) !important;
    overscroll-behavior-x: contain !important;
    /* pan-y keeps a vertical swipe that starts on a card scrolling the page
       instead of being swallowed by the rail. */
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    transform: none !important;
    will-change: auto !important;
}

.mn-home #mn-root.mn-native .mn-strip::-webkit-scrollbar {
    display: none;
}

.mn-home #mn-root.mn-native .mn-frame {
    flex: 0 0 clamp(300px, 44vw, 620px) !important;
    width: auto !important;
    height: clamp(390px, 56svh, 610px) !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    scroll-snap-align: center !important;
}

.mn-home #mn-root.mn-native .mn-work__footer {
    position: relative !important;
    inset: auto !important;
    margin: clamp(14px, 2vw, 26px) clamp(20px, 6vw, 80px) 0 !important;
}

/* The two tint layers are the only elements that carry an inline opacity
   from PHP (the markup hides bearings 2 and 3 so the pinned engine can fade
   them in). On the native route nothing fades them, so they must be reset.

   This rule used to cover .mn-pathv4__point, .mn-bp, .mn-w and
   .mn-craftv4__media as well, with !important — which made every one of them
   immune to the entrance choreography, so the waypoints and the hero words
   could never animate on touch. */
.mn-home #mn-root.mn-native .mn-bp-bg,
.mn-home #mn-root.mn-native .mn-capv2__bg {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.mn-home #mn-root.mn-native .mn-craftv4__media {
    transform: none;
    filter: none;
}

/* ---- Touch / phone ---------------------------------------------------- */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native .mn-plate {
        padding-block: clamp(64px, 13vw, 96px) !important;
        padding-inline: clamp(18px, 5.5vw, 28px) !important;
    }

    

    .mn-home #mn-root.mn-native .mn-p-arrival {
        min-height: 0 !important;
        padding-bottom: calc(clamp(64px, 13vw, 96px) + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mn-home #mn-root.mn-native .mn-section-hdr {
        padding-inline: clamp(18px, 5.5vw, 28px) !important;
    }

    

    /* 78vw leaves a deliberate sliver of the next card visible, so the rail
       reads as swipeable without needing a hint label. Height is deliberately
       NOT set here: the phone card is a two-column composition (poster beside
       copy) whose height comes from its content — see the mn-frame grid in
       mn-ui.css → PHONE COMPOSITIONS. Fixing it here as well is exactly the
       kind of duplicate declaration that made the old mobile layout
       unpredictable. */
    

    
}

/* ---- Reduced motion --------------------------------------------------- */
/* ============================================================================
   V17 · ABOUT + CAPABILITIES — CINEMATIC CHOREOGRAPHY
   ----------------------------------------------------------------------------
   Enhances the existing state machine only. No extra JavaScript hooks:
     desktop pinned route -> .mn-live
     native/touch route   -> .mn-section-visible / [data-mn-stagger].is-in
   Continuous motion is limited to transform/opacity. Paint-heavy effects are
   one-shot and confined to small surfaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ABOUT / THE STUDIO — desktop instrument motion
   -------------------------------------------------------------------------- */
@keyframes mnAboutTitleIn {
    0% { opacity: 0; transform: translate3d(0, 30px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mnAboutLeadIn {
    0% { opacity: 0; transform: translate3d(18px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mnAboutHaloBreathe {
    0%, 100% { opacity: .62; transform: translateY(-50%) scale(.96); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}

@keyframes mnAboutOrbitCW {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes mnAboutOrbitCCW {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(-360deg); }
}

@keyframes mnAboutAxisX {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: .23; transform: scaleX(1); }
}

@keyframes mnAboutAxisY {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: .23; transform: scaleY(1); }
}

@keyframes mnAboutGhostDrift {
    0%, 100% { opacity: .62; transform: translate3d(0, 0, 0); }
    50% { opacity: 1; transform: translate3d(-1.6vw, -5px, 0); }
}

@keyframes mnAboutIconSettle {
    0% { opacity: 0; transform: scale(.55) rotate(-18deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes mnAboutQuoteIn {
    0% { opacity: 0; transform: translate3d(-24px, 14px, 0) scale(.985); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mnAboutQuoteSheen {
    from { transform: translate3d(-135%, 0, 0) skewX(-14deg); }
    to { transform: translate3d(135%, 0, 0) skewX(-14deg); }
}

@media (min-width: 821px) {
    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__arc {
        transform-origin: 50% 50%;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__arc::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 50%;
        width: 5px;
        height: 5px;
        margin-left: -2.5px;
        border-radius: 50%;
        background: var(--ab-gold-hi, #F0D9A6);
        box-shadow: 0 0 14px rgba(240, 217, 166, .68);
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__halo {
        animation: mnAboutHaloBreathe 7.5s ease-in-out infinite;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__arc--1 {
        animation: mnAboutOrbitCW 28s linear infinite;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__arc--2 {
        animation: mnAboutOrbitCCW 21s linear infinite;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__axis--x {
        transform-origin: right center;
        animation: mnAboutAxisX .95s cubic-bezier(.22, 1, .36, 1) .18s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__axis--y {
        transform-origin: center top;
        animation: mnAboutAxisY 1.05s cubic-bezier(.22, 1, .36, 1) .30s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__ghost {
        animation: mnAboutGhostDrift 9s ease-in-out infinite;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__title-gold {
        animation: mnAboutTitleIn .78s cubic-bezier(.16, 1, .3, 1) .12s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__title strong {
        animation: mnAboutTitleIn .86s cubic-bezier(.16, 1, .3, 1) .23s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__lead {
        animation: mnAboutLeadIn .72s cubic-bezier(.16, 1, .3, 1) .35s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__principle-icon {
        animation: mnAboutIconSettle .7s cubic-bezier(.2, .95, .28, 1.2) .36s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__principle:nth-child(2) .mn-aboutv3__principle-icon {
        animation-delay: .48s;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__principle:nth-child(3) .mn-aboutv3__principle-icon {
        animation-delay: .60s;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__quote {
        position: relative;
        overflow: hidden;
        transition:
            border-color .38s ease,
            box-shadow .42s ease,
            transform .42s cubic-bezier(.16, 1, .3, 1);
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__quote::after {
        content: "";
        position: absolute;
        inset: -20% -38%;
        pointer-events: none;
        background: linear-gradient(105deg,
            transparent 38%,
            rgba(255, 243, 214, .02) 43%,
            rgba(255, 243, 214, .16) 50%,
            rgba(255, 243, 214, .02) 57%,
            transparent 62%);
        transform: translate3d(-135%, 0, 0) skewX(-14deg);
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__quote {
        animation: mnAboutQuoteIn .8s cubic-bezier(.16, 1, .3, 1) .38s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__quote::after {
        animation: mnAboutQuoteSheen 1.25s cubic-bezier(.22, 1, .36, 1) .82s 1 both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3.mn-live .mn-aboutv3__quote-rule {
        transform-origin: right center;
        animation: mnAboutAxisX .7s cubic-bezier(.22, 1, .36, 1) .78s both;
    }

    @media (hover: hover) {
        .mn-home #mn-root:not(.mn-native) .mn-aboutv3__principle-icon {
            transition:
                transform .42s cubic-bezier(.16, 1, .3, 1),
                color .32s ease,
                border-color .32s ease,
                box-shadow .32s ease;
        }

        .mn-home #mn-root:not(.mn-native) .mn-aboutv3__principle:hover .mn-aboutv3__principle-icon {
            transform: translateY(-3px) rotate(8deg);
            color: var(--gold-100);
            border-color: rgba(240, 217, 166, .62);
            box-shadow: 0 0 24px -8px rgba(216, 180, 111, .62);
        }

        .mn-home #mn-root:not(.mn-native) .mn-aboutv3__quote:hover {
            transform: translateY(-3px);
            border-color: rgba(240, 217, 166, .25);
            box-shadow: 0 24px 54px -34px rgba(0, 0, 0, .9),
                        0 0 38px -26px rgba(216, 180, 111, .52);
        }
    }
}

/* --------------------------------------------------------------------------
   CAPABILITIES — column + service choreography
   -------------------------------------------------------------------------- */
@keyframes mnCapMedalSettle {
    0% { opacity: 0; transform: scale(.55) rotate(-24deg); }
    72% { opacity: 1; transform: scale(1.07) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes mnCapItemIn {
    0% { opacity: 0; transform: translate3d(18px, 0, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mnCapScan {
    0% { opacity: 0; transform: translate3d(0, -180%, 0); }
    24% { opacity: .65; }
    100% { opacity: 0; transform: translate3d(0, 540%, 0); }
}

@keyframes mnCapAccentDraw {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

@media (min-width: 821px) {
    .mn-home #mn-root:not(.mn-native) .mn-capv2__col {
        overflow: hidden;
    }

    /* Preserve the existing entrance while restoring premium hover transitions
       that the v12 !important reveal transition otherwise replaces. */
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col,
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-section-visible .mn-capv2__col,
    .mn-home #mn-root:not(.mn-native) .mn-capv2__columns.is-in .mn-capv2__col {
        transition:
            opacity .62s cubic-bezier(.22, 1, .36, 1),
            transform .74s cubic-bezier(.22, 1, .36, 1),
            border-color .38s ease,
            box-shadow .42s ease,
            background-color .38s ease !important;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__col::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        inset-inline: 18px;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--cap-accent, #C77E3A) 82%, #F3E2C0),
            transparent);
        transform: scaleX(0);
        opacity: 0;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__col::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset-inline: 0;
        top: 0;
        height: 20%;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(180deg,
            transparent,
            color-mix(in srgb, var(--cap-accent, #C77E3A) 10%, transparent),
            transparent);
        transform: translate3d(0, -180%, 0);
    }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col::before {
        animation: mnCapAccentDraw .75s cubic-bezier(.22, 1, .36, 1) .32s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(2)::before { animation-delay: .44s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(3)::before { animation-delay: .56s; }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col::after {
        animation: mnCapScan 1.25s cubic-bezier(.22, 1, .36, 1) .50s 1 both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(2)::after { animation-delay: .64s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(3)::after { animation-delay: .78s; }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col-medal {
        animation: mnCapMedalSettle .78s cubic-bezier(.2, .95, .28, 1.2) .30s both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(2) .mn-capv2__col-medal { animation-delay: .42s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__col:nth-child(3) .mn-capv2__col-medal { animation-delay: .54s; }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item {
        animation: mnCapItemIn .5s cubic-bezier(.16, 1, .3, 1) both;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(1) { animation-delay: .48s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(2) { animation-delay: .54s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(3) { animation-delay: .60s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(4) { animation-delay: .66s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(5) { animation-delay: .72s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(6) { animation-delay: .78s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(7) { animation-delay: .84s; }
    .mn-home #mn-root:not(.mn-native) .mn-capabilities-v2.mn-live .mn-capv2__item:nth-child(n/**/+8) { animation-delay: .90s; }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__col-medal-img,
    .mn-home #mn-root:not(.mn-native) .mn-capv2__item i {
        transition:
            transform .42s cubic-bezier(.16, 1, .3, 1),
            filter .34s ease,
            color .3s ease;
    }

    @media (hover: hover) {
        .mn-home #mn-root:not(.mn-native) .mn-capv2__col:hover {
            transform: translateY(-6px) !important;
            border-color: color-mix(in srgb, var(--cap-accent, #C77E3A) 58%, transparent);
            box-shadow: 0 30px 64px -40px rgba(0, 0, 0, .95),
                        0 0 38px -30px color-mix(in srgb, var(--cap-accent, #C77E3A) 70%, transparent);
        }

        .mn-home #mn-root:not(.mn-native) .mn-capv2__col:hover .mn-capv2__col-medal-img {
            transform: scale(1.08) rotate(8deg);
            filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cap-accent, #C77E3A) 54%, transparent));
        }

        .mn-home #mn-root:not(.mn-native) .mn-capv2__item:hover i {
            transform: translateX(-3px) scale(1.08);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cap-accent, #C77E3A) 55%, transparent));
        }
    }
}

/* --------------------------------------------------------------------------
   Native/touch — same choreography, reduced complexity
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__principle-icon,
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__col-medal {
        opacity: 0;
        transform: scale(.68) rotate(-14deg);
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__principles.is-in .mn-aboutv3__principle-icon,
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__grid.is-in .mn-aboutv3__principle-icon {
        animation: mnAboutIconSettle .62s cubic-bezier(.2, .95, .28, 1.2) .16s both;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__grid.is-in .mn-aboutv3__principle:nth-child(2) .mn-aboutv3__principle-icon { animation-delay: .26s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__grid.is-in .mn-aboutv3__principle:nth-child(3) .mn-aboutv3__principle-icon { animation-delay: .36s; }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col-medal {
        animation: mnCapMedalSettle .68s cubic-bezier(.2, .95, .28, 1.2) .16s both;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col:nth-child(2) .mn-capv2__col-medal { animation-delay: .26s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col:nth-child(3) .mn-capv2__col-medal { animation-delay: .36s; }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item {
        animation: mnCapItemIn .46s cubic-bezier(.16, 1, .3, 1) both;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(1) { animation-delay: .28s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(2) { animation-delay: .34s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(3) { animation-delay: .40s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(4) { animation-delay: .46s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(5) { animation-delay: .52s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(6) { animation-delay: .58s; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__item:nth-child(n/**/+7) { animation-delay: .64s; }
}