/* ============================================================================
   MN · PHONE COMPOSITIONS  (assets/css/mn-mobile.css)
   ----------------------------------------------------------------------------
   الطبقة المرجعية لتصميم الجوال في الصفحة الرئيسية.

   هذا الملف يُحمَّل بعد mn-ui.css / mn-chrome.css / mn-motion.css، فهو صاحب
   الكلمة الأخيرة في كل ما يخص العرض على الهاتف. المرجع البصري هو اللقطات في
   assets/mobile/*.png — قسم لكل صورة:

     1.png → ORIENT (الهيرو)        2.png → BEARINGS (الاتجاهات)
     3.png → WORK (الأعمال)         4.png → ABOUT (من نحن)
     5     → CAPABILITIES (القدرات) 6.png → CRAFT (الحرفة)
     7.png → PATH (رحلة العمل)      8.png → ARRIVAL (الدعوة الأخيرة)

   قواعد المحرر:
   · الاتجاه RTL هو الأصل — تُستخدم الخصائص المنطقية (inline-start/end) دائماً
     بدل left/right، فلا ينكسر شيء إن قُلب الاتجاه.
   · لا فواصل صلبة بين الأقسام: كل صورة خلفية تذوب في أعلى وأسفلها بقناع
     تدرّجي. أزيل خيط المنتصف في v18 لأنه كان ينافس المحتوى بصرياً.
   · كل حركة تنطلق تلقائياً عند دخول العنصر إطار الرؤية — لا اعتماد على
     مؤشر أو تحويم، فلا وجود لهما على الهاتف.
   ========================================================================== */

@media (max-width: 820px) {

    /* ====================================================================
       §0 · TOKENS
       ==================================================================== */
    .mn-home #mn-root.mn-native {
        --mp-pad: clamp(18px, 5.4vw, 26px);
        /* الإيقاع الرأسي الموحّد لكل الأقسام — مصدر واحد للحقيقة. */
        --mp-rhythm: clamp(64px, 15vw, 92px);
        --mp-gap-sm: clamp(10px, 3vw, 14px);
        --mp-gap-md: clamp(16px, 4.4vw, 22px);
        --mp-gap-lg: clamp(26px, 7vw, 38px);

        --mp-card: rgba(14, 20, 34, .62);
        --mp-card-hi: rgba(20, 28, 46, .74);
        --mp-edge: rgba(224, 149, 75, .22);
        --mp-edge-soft: rgba(233, 231, 223, .10);

        --mp-r-sm: 12px;
        --mp-r-md: 18px;
        --mp-r-lg: 26px;

        --mp-title: clamp(30px, 8.6vw, 40px);
        --mp-h2: clamp(25px, 7vw, 33px);
        --mp-h3: clamp(17px, 4.6vw, 20px);
        --mp-body: clamp(14px, 3.9vw, 15.5px);
        --mp-micro: clamp(10px, 2.9vw, 11.5px);

        --mp-ease: cubic-bezier(.22, .61, .36, 1);
        --mp-ease-out: cubic-bezier(.16, 1, .3, 1);
    }

    /* ====================================================================
       §1 · SHELL & SECTION RHYTHM
       الأقسام تتشارك خلفية الصفحة نفسها ولا تحمل أي حدّ يفصلها.
       ==================================================================== */
    .mn-home {
        overflow-x: hidden;
        background: var(--ink-700);
    }

    .mn-home #mn-root.mn-native .mn-stage,
    .mn-home #mn-root.mn-native .mn-pin {
        background: transparent;
    }

    .mn-home #mn-root.mn-native .mn-plate {
        position: relative;
        display: block;
        width: 100%;
        min-height: 0;
        padding: var(--mp-rhythm) var(--mp-pad);
        overflow: visible;
        background: transparent;
        border: 0;
        isolation: isolate;
    }

    /* الهيرو وحده يملأ الشاشة. */
    .mn-home #mn-root.mn-native .mn-p-orient {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100svh;
        padding-block: calc(var(--header-height) + 24px) clamp(96px, 24vw, 132px);
    }

    /* ---- الذوبان: لا حافة صلبة لأي صورة قسم -------------------------------
       الصورة تتلاشى في أعلاها وأسفلها، فينتهي القسم في الذي يليه بدل أن
       يصطدم به. هذا هو "الفاصل الذي لا يُحسّ" المطلوب. */
    .mn-home #mn-root.mn-native .mn-plate>.mn-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg,
                transparent 0%,
                rgba(0, 0, 0, .55) 9%,
                #000 26%,
                #000 74%,
                rgba(0, 0, 0, .55) 91%,
                transparent 100%);
        mask-image: linear-gradient(180deg,
                transparent 0%,
                rgba(0, 0, 0, .55) 9%,
                #000 26%,
                #000 74%,
                rgba(0, 0, 0, .55) 91%,
                transparent 100%);
    }

    /* الهيرو يبدأ من الحافة العليا مباشرة — لا تلاشي من فوق. */
    .mn-home #mn-root.mn-native .mn-p-orient>.mn-bg {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .5) 88%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0, 0, 0, .5) 88%, transparent 100%);
    }

    .mn-home #mn-root.mn-native .mn-plate>.mn-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--bg-pos-mob, var(--bg-pos, 50% 50%));
    }

    .mn-home #mn-root.mn-native .mn-plate>.mn-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--scrim, linear-gradient(180deg,
                    rgba(5, 7, 12, .88) 0%,
                    rgba(5, 7, 12, .62) 38%,
                    rgba(5, 7, 12, .78) 100%));
    }

    /* كل ما هو فوق الخلفية. */
    .mn-home #mn-root.mn-native .mn-plate>*:not(.mn-bg) {
        position: relative;
        z-index: 1;
    }

    /* ---- ما لا مكان له على الهاتف ---------------------------------------- */
    .mn-home #mn-root.mn-native .mn-field,
    .mn-home #mn-root.mn-native .mn-core,
    .mn-home #mn-root.mn-native .mn-glowbg,
    .mn-home #mn-root.mn-native .mn-atmos,
    .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,
    .mn-home #mn-root.mn-native .mn-scroll-ind,
    .mn-home #mn-root.mn-native .mn-orient__ticks,
    .mn-home #mn-root.mn-native .mn-bearings-v2__hud,
    .mn-home #mn-root.mn-native .mn-bearings-v2__ghost,
    .mn-home #mn-root.mn-native .mn-bearings-v2__rail,
    .mn-home #mn-root.mn-native .mn-bearings-v2__handoff,
    .mn-home #mn-root.mn-native .mn-bearings-v2__bg,
    .mn-home #mn-root.mn-native .mn-bearings-v2__veil,
    .mn-home #mn-root.mn-native .mn-aboutv3__field,
    .mn-home #mn-root.mn-native .mn-craftv4__foot,
    .mn-home #mn-root.mn-native .mn-pathv4__field,
    .mn-home #mn-root.mn-native .mn-arrivalv4__field,
    .mn-home #mn-root.mn-native .mn-arrivalv4__instrument {
        display: none !important;
    }

    /* §2 removed in v18: the full-page centre thread and seam nodes added visual
       noise on phone and competed with each chapter's own composition. */

    /* ====================================================================
       §3 · TYPOGRAPHY PRIMITIVES — مشتركة بين الأقسام
       ==================================================================== */

    /* ---- الكحلة العلوية (eyebrow) ---- */
    .mn-home #mn-root.mn-native .mn-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 var(--mp-gap-sm);
        font-family: var(--font-ar-body);
        font-size: var(--mp-micro);
        font-weight: 600;
        letter-spacing: .18em;
        color: var(--gold-200);
        text-transform: uppercase;
    }

    .mn-home #mn-root.mn-native .mn-eyebrow--en,
    .mn-home #mn-root.mn-native .mn-eyebrow[dir="ltr"] {
        font-family: var(--font-en);
    }

    .mn-home #mn-root.mn-native .mn-eyebrow__text {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* The gold pip that opens every kicker. Same mark as the divider's
       centre, so the two ornaments in a chapter head rhyme. */
    .mn-home #mn-root.mn-native .mn-eyebrow__pip {
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        background: var(--gold-200);
        transform: rotate(45deg);
        box-shadow: 0 0 9px rgba(224, 149, 75, .8);
    }

    /* ---- الشريط العلوي للقسم (.mn-slab) — رقم القسم واسمه ----
       These rails used to be display:none on phone, which meant the act
       number — the through-line of the whole instrument concept — did not
       exist on the device most visitors arrive on. They are back, in a
       compact form: plate + name + hairline, with the trailing readout
       dropped (the desktop component already hides it under 720px). */
    .mn-home #mn-root.mn-native .mn-slab {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: min(100%, 470px);
        margin: 0 auto var(--mp-gap-sm);
        padding: 0 clamp(20px, 5.6vw, 28px) 12px;
        border-bottom: 1px solid rgba(233, 231, 223, .08);
    }

    .mn-home #mn-root.mn-native .mn-slab__id {
        min-width: 30px;
        height: 30px;
        font-size: 10.5px;
    }

    .mn-home #mn-root.mn-native .mn-slab__name {
        font-size: 9px;
        letter-spacing: .22em;
    }

    .mn-home #mn-root.mn-native .mn-eyebrow__rule {
        flex: 1 1 auto;
        height: 1px;
        max-width: 62px;
        background: linear-gradient(to left, var(--gold-300), transparent);
        transform-origin: right center;
        transform: scaleX(0);
        transition: transform .8s var(--mp-ease-out) .12s;
    }

    .mn-home #mn-root.mn-native .is-in .mn-eyebrow__rule,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-eyebrow__rule {
        transform: scaleX(1);
    }

    /* الكحلة الوسطية — تحمل زخرفة على الجانبين، كما في 6.png */
    .mn-home #mn-root.mn-native .mn-eyebrow--mid {
        justify-content: center;
    }

    .mn-home #mn-root.mn-native .mn-eyebrow--mid::before,
    .mn-home #mn-root.mn-native .mn-eyebrow--mid::after {
        content: '';
        width: 34px;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--gold-300));
    }

    .mn-home #mn-root.mn-native .mn-eyebrow--mid::after {
        background: linear-gradient(to left, transparent, var(--gold-300));
    }

    /* ---- الفاصل المزخرف: خط + معيّن ---- */
    .mn-home #mn-root.mn-native .mn-divider {
        position: relative;
        display: block;
        width: min(220px, 62%);
        height: 1px;
        margin: var(--mp-gap-md) 0;
        background: linear-gradient(to left,
                var(--gold-300) 0%,
                rgba(224, 149, 75, .35) 45%,
                transparent 100%);
        transform-origin: right center;
        transform: scaleX(0);
        transition: transform .9s var(--mp-ease-out) .18s;
    }

    .mn-home #mn-root.mn-native .is-in .mn-divider,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-divider {
        transform: scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-divider::after {
        content: '';
        position: absolute;
        inset-inline-start: 34%;
        top: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        background: var(--gold-200);
        transform: rotate(45deg);
    }

    .mn-home #mn-root.mn-native .mn-divider--center {
        margin-inline: auto;
        background: linear-gradient(to left,
                transparent 0%,
                var(--gold-300) 50%,
                transparent 100%);
        transform-origin: center;
    }

    .mn-home #mn-root.mn-native .mn-divider--center::after {
        inset-inline-start: 50%;
        margin-inline-start: -2.5px;
    }

    /* ---- الأزرار ---- */
    .mn-home #mn-root.mn-native .mn-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 54px;
        padding: 0 26px;
        border-radius: var(--mp-r-sm);
        font-family: var(--font-ar-body);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .01em;
        text-decoration: none;
        transition: transform .3s var(--mp-ease), box-shadow .3s var(--mp-ease);
    }

    .mn-home #mn-root.mn-native .mn-btn--gold {
        color: #14100A;
        background: linear-gradient(160deg, #F3E2C0 0%, #E7C88F 42%, #D8B46F 100%);
        border: 0;
        box-shadow: 0 12px 30px -12px rgba(224, 149, 75, .6),
            inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    .mn-home #mn-root.mn-native .mn-btn--quiet {
        color: var(--gold-200);
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(224, 149, 75, .45);
        border-radius: 0;
        min-height: 42px;
        padding: 0 2px;
    }

    .mn-home #mn-root.mn-native .mn-btn:active {
        transform: scale(.975);
    }

    /* الشيفرون يشير لليسار في RTL (اتجاه التقدّم). */
    .mn-home #mn-root.mn-native .mn-btn__chev {
        width: 8px;
        height: 8px;
        border-inline-start: 1.6px solid currentColor;
        border-block-end: 1.6px solid currentColor;
        transform: rotate(45deg);
        transition: transform .3s var(--mp-ease);
    }

    .mn-home #mn-root.mn-native .mn-btn:active .mn-btn__chev {
        transform: rotate(45deg) translate(2px, 2px);
    }
}

/* ============================================================================
   §5 · BEARINGS — MOBILE DIRECTION DECK (v19)
   One clean composition: editorial heading → instrument hub → three readable
   direction panels. No constellation grid, no overlapping medallions and no
   inherited connector geometry from previous phone generations.
   ========================================================================== */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native .mn-p-bearings {
        --scrim: linear-gradient(180deg,
            rgba(5, 7, 12, .92) 0%,
            rgba(5, 7, 12, .68) 24%,
            rgba(5, 7, 12, .76) 62%,
            rgba(5, 7, 12, .97) 100%);
        padding-block: clamp(74px, 18vw, 98px) clamp(88px, 21vw, 116px) !important;
        padding-inline: clamp(18px, 5.4vw, 26px) !important;
        overflow: clip !important;
    }

    .mn-home #mn-root.mn-native .mn-p-bearings > .mn-bg::after {
        background:
            radial-gradient(82% 28% at 50% 34%, rgba(224, 149, 75, .12), transparent 72%),
            var(--scrim) !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__content,
    .mn-home #mn-root.mn-native .mn-bearings__inner {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: min(100%, 470px) !important;
        max-width: 470px !important;
        height: auto !important;
        min-height: 0 !important;
        margin-inline: auto !important;
        padding: 0 !important;
        transform: none !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 0 clamp(30px, 8vw, 42px) !important;
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__kicker {
        display: inline-flex !important;
        justify-content: center;
        width: auto !important;
        margin: 0 0 14px !important;
        padding: 8px 13px;
        border: 1px solid rgba(231, 200, 143, .17);
        border-radius: 99px;
        background: rgba(7, 10, 17, .52);
        font-size: 8.5px !important;
        letter-spacing: .19em !important;
        color: rgba(243, 226, 192, .72) !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__title {
        width: 100%;
        margin: 0 !important;
        font-family: var(--font-ar-display);
        font-size: clamp(1.93rem, 9.14vw, 2.75rem) !important;
        font-weight: 600;
        line-height: 1.08 !important;
        letter-spacing: -.015em;
        color: var(--bone);
        text-align: center;
        text-shadow: 0 16px 44px rgba(0, 0, 0, .46);
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__title span {
        display: inline-block;
        margin-top: .13em;
        color: var(--gold-200);
        text-shadow: 0 0 28px rgba(224, 149, 75, .2);
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__head .mn-divider {
        width: min(172px, 46%);
        margin: 20px auto 0 !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 13px;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--gold-200);
        opacity: .32;
        animation: mp-bear-dot 2.8s ease-in-out infinite;
    }
    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i:nth-child(2) { animation-delay: .22s; }
    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i:nth-child(3) { animation-delay: .44s; }

    @keyframes mp-bear-dot {
        0%,100% { opacity: .24; transform: scale(.82); }
        50% { opacity: 1; transform: scale(1.35); }
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__constellation {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        transform: none !important;
        isolation: isolate;
    }

    /* Central instrument: compact and deliberately separated from the cards. */
    .mn-home #mn-root.mn-native .mn-bearings-v2__hub {
        position: relative !important;
        order: 1;
        display: grid !important;
        place-items: center;
        width: clamp(118px, 32vw, 142px) !important;
        aspect-ratio: 1;
        margin: 0 auto clamp(34px, 8.5vw, 44px) !important;
        opacity: 1;
        transform: none;
        z-index: 3;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__hub::before {
        content: '';
        position: absolute;
        inset: -35%;
        border-radius: 50%;
        background: radial-gradient(circle,
            rgba(224, 149, 75, .16) 0%,
            rgba(224, 149, 75, .05) 42%,
            transparent 70%);
        animation: mp-bear-hub-breathe 5.4s ease-in-out infinite;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__hub::after {
        content: '';
        position: absolute;
        inset: -18%;
        border-radius: 50%;
        border: 1px solid rgba(231, 200, 143, .17);
        box-shadow: 0 0 0 12px rgba(224, 149, 75, .02), 0 0 34px rgba(224, 149, 75, .08);
    }

    @keyframes mp-bear-hub-breathe {
        0%,100% { opacity: .5; transform: scale(.96); }
        50% { opacity: .95; transform: scale(1.06); }
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__hub-img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .48)) drop-shadow(0 0 14px rgba(224, 149, 75, .23));
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__orbit {
        display: block !important;
        position: absolute;
        z-index: 0;
        top: clamp(-24px, -5vw, -12px);
        inset-inline-start: 50%;
        width: clamp(184px, 50vw, 220px);
        aspect-ratio: 1;
        transform: translateX(50%);
        opacity: .56;
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__orbit i {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px dashed rgba(231, 200, 143, .11);
        animation: mp-bear-orbit 38s linear infinite;
    }
    .mn-home #mn-root.mn-native .mn-bearings-v2__orbit i:nth-child(2) {
        inset: 15%;
        border-style: solid;
        border-color: rgba(233, 231, 223, .055);
        animation-duration: 52s;
        animation-direction: reverse;
    }
    .mn-home #mn-root.mn-native .mn-bearings-v2__orbit i:nth-child(3) {
        inset: 30%;
        border-color: rgba(224, 149, 75, .13);
        animation-duration: 68s;
    }
    @keyframes mp-bear-orbit { to { transform: rotate(360deg); } }

    .mn-home #mn-root.mn-native .mn-bearings-v2__cardinals {
        display: none !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panels {
        order: 2;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panel,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="0"],
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"],
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 70px !important;
        grid-template-rows: auto auto auto !important;
        align-items: center !important;
        column-gap: 15px !important;
        row-gap: 3px !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 18px 18px 16px !important;
        overflow: hidden !important;
        border: 1px solid rgba(233, 231, 223, .105) !important;
        border-radius: 18px !important;
        background:
            radial-gradient(105% 125% at 100% 0%, rgba(224, 149, 75, .075), transparent 52%),
            linear-gradient(145deg, rgba(18, 25, 39, .91), rgba(7, 10, 17, .96)) !important;
        box-shadow: 0 20px 50px -32px rgba(0, 0, 0, .96), inset 0 1px 0 rgba(255,255,255,.025) !important;
        text-align: right !important;
        opacity: 1;
        transform: none;
        isolation: isolate;
    }

    /* A vertical bearing mark is clearer than the old full-card gold bar. */
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel::before {
        content: '';
        position: absolute;
        z-index: 2;
        inset-block: 17px;
        inset-inline-start: 0;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, transparent, var(--bearing-accent, var(--gold-300)) 28%, var(--bearing-accent, var(--gold-300)) 72%, transparent);
        opacity: .72;
        transform: scaleY(.2);
        transform-origin: center;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panel::after {
        content: '';
        position: absolute;
        z-index: 0;
        top: -55%;
        left: -45%;
        width: 42%;
        height: 210%;
        background: linear-gradient(90deg, transparent, rgba(255,243,214,.10), transparent);
        transform: rotate(18deg) translateX(-240%);
        opacity: 0;
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-bp__badge {
        position: relative !important;
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;
        top: auto !important;
        inset: auto !important;
        width: 64px !important;
        aspect-ratio: 1;
        display: grid !important;
        place-items: center;
        border-radius: 50%;
        background: radial-gradient(circle at 48% 34%, rgba(28, 36, 54, .98), rgba(6, 9, 15, .99));
        border: 1px solid rgba(231, 200, 143, .22);
        box-shadow: 0 0 0 5px rgba(7,10,17,.7), 0 12px 28px -16px rgba(0,0,0,.96);
        transform: none !important;
    }

    .mn-home #mn-root.mn-native .mn-bp__badge::before {
        content: '';
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px dashed rgba(231, 200, 143, .13);
        animation: mp-bear-badge 22s linear infinite;
    }
    @keyframes mp-bear-badge { to { transform: rotate(360deg); } }

    .mn-home #mn-root.mn-native .mn-bp__badge-img {
        width: 64% !important;
        height: 64% !important;
        object-fit: contain;
        filter: drop-shadow(0 0 9px rgba(224, 149, 75, .34));
    }

    .mn-home #mn-root.mn-native .mn-bp__badge-num,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"] .mn-bp__badge-num,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] .mn-bp__badge-num {
        position: absolute !important;
        z-index: 4;
        top: auto !important;
        bottom: -9px !important;
        inset-inline-start: 50% !important;
        padding: 3px 7px !important;
        transform: translateX(50%) !important;
        border: 1px solid rgba(231, 200, 143, .16);
        border-radius: 99px;
        background: #080C14;
        font-family: var(--font-en);
        font-size: 9px !important;
        line-height: 1.2;
        letter-spacing: .08em;
        color: var(--gold-100);
        white-space: nowrap;
    }

    .mn-home #mn-root.mn-native .mn-bp__meta {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin: 0 0 2px !important;
        font-family: var(--font-en);
        font-size: 8.3px !important;
        letter-spacing: .12em;
        color: rgba(231, 200, 143, .7) !important;
        opacity: 1 !important;
        text-align: right !important;
    }

    .mn-home #mn-root.mn-native .mn-bp__h2,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="0"] .mn-bp__h2,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"] .mn-bp__h2,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] .mn-bp__h2 {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        font-family: var(--font-ar-display);
        font-size: clamp(1.05rem, 4.65vw, 1.27rem) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: #F1EEE6 !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        text-align: right !important;
    }

    .mn-home #mn-root.mn-native .mn-bp__p,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="0"] .mn-bp__p,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"] .mn-bp__p,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] .mn-bp__p {
        display: block !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding-top: 12px;
        border-top: 1px solid rgba(233, 231, 223, .07);
        font-family: var(--font-ar-body);
        font-size: clamp(12.4px, 3.35vw, 13.5px) !important;
        line-height: 1.78 !important;
        color: rgba(233, 231, 223, .65) !important;
        text-align: right !important;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panel:active {
        transform: scale(.988) !important;
        border-color: rgba(231, 200, 143, .24) !important;
    }

    /* Entrance uses the existing guaranteed .is-in state. */
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings-v2__head > * {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
        transition: none !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__head > * {
        opacity: 1;
        transform: none;
        transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .78s cubic-bezier(.22,1,.36,1) !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__head > *:nth-child(2) { transition-delay: .08s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__head > *:nth-child(3) { transition-delay: .16s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__head > *:nth-child(4) { transition-delay: .22s !important; }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings-v2__hub {
        opacity: 0 !important;
        transform: scale(.8) rotate(-18deg) !important;
        transition: none !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__hub {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity .78s cubic-bezier(.22,1,.36,1) .18s, transform .95s cubic-bezier(.16,1,.3,1) .18s !important;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings-v2__panel {
        opacity: 0 !important;
        transform: translate3d(0, 24px, 0) scale(.985) !important;
        transition: none !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel {
        opacity: 1 !important;
        transform: none !important;
        transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .82s cubic-bezier(.22,1,.36,1), border-color .3s ease !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel[data-i="0"] { transition-delay: .30s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel[data-i="1"] { transition-delay: .42s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel[data-i="2"] { transition-delay: .54s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel::before {
        transform: scaleY(1);
        transition: transform .72s cubic-bezier(.22,1,.36,1) .54s;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel::after {
        animation: mp-bear-card-scan 1.15s cubic-bezier(.22,1,.36,1) .65s 1;
    }

    @keyframes mp-bear-card-scan {
        0% { opacity: 0; transform: rotate(18deg) translateX(-240%); }
        18% { opacity: .72; }
        82% { opacity: .38; }
        100% { opacity: 0; transform: rotate(18deg) translateX(520%); }
    }
}

@media (max-width: 380px) {
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel,
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="0"],
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"],
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] {
        grid-template-columns: minmax(0, 1fr) 60px !important;
        column-gap: 12px !important;
        padding-inline: 15px !important;
    }
    .mn-home #mn-root.mn-native .mn-bp__badge { width: 56px !important; }
    .mn-home #mn-root.mn-native .mn-bp__h2 { font-size: 0.98rem !important; }
}

/* ============================================================================
   §6 · WORK — MOBILE CINEMATIC GALLERY (v19)
   Full-bleed project cards, readable glass captions and an actual active-card
   state driven by magnetic-north.js. Horizontal swipe remains native.
   ========================================================================== */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native .mn-p-work {
        --scrim: linear-gradient(180deg,
            rgba(5, 7, 12, .95) 0%,
            rgba(5, 7, 12, .68) 30%,
            rgba(5, 7, 12, .74) 66%,
            rgba(5, 7, 12, .97) 100%);
        display: block !important;
        padding-block: clamp(76px, 18vw, 100px) clamp(90px, 22vw, 120px) !important;
        padding-inline: 0 !important;
        overflow: clip !important;
    }

    .mn-home #mn-root.mn-native .mn-p-work > .mn-bg::after {
        background:
            radial-gradient(76% 28% at 20% 24%, rgba(224,149,75,.075), transparent 68%),
            var(--scrim) !important;
    }

    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        width: min(100%, 470px);
        max-width: 470px;
        margin: 0 auto clamp(28px, 7.5vw, 40px) !important;
        padding-inline: clamp(20px, 5.6vw, 28px) !important;
        text-align: right !important;
    }

    /* The work chapter's bespoke pill (.mn-section-hdr__meta) is gone: it is
       a .mn-slab now, like every other chapter. It only needs its padding
       zeroed here because the header block already supplies it. */
    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr .mn-slab {
        width: 100%;
        margin: 0 0 14px;
        padding-inline: 0;
    }

    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr__title {
        position: relative;
        width: 100%;
        margin: 0 !important;
        padding: 0 0 18px !important;
        font-family: var(--font-ar-display);
        font-size: clamp(1.9rem, 8.88vw, 2.71rem) !important;
        font-weight: 600;
        line-height: 1.12 !important;
        color: var(--bone);
        text-align: right;
        text-shadow: 0 16px 44px rgba(0,0,0,.42);
    }

    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr__title::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        bottom: 0;
        width: min(150px, 42%);
        height: 1px;
        background: linear-gradient(90deg, var(--gold-300), transparent);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .8s cubic-bezier(.22,1,.36,1) .16s;
    }
    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr__title::after {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        bottom: -2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold-200);
        box-shadow: 0 0 10px rgba(224,149,75,.48);
    }
    .mn-home #mn-root.mn-native .mn-p-work .mn-section-hdr.is-in .mn-section-hdr__title::before,
    .mn-home #mn-root.mn-native .mn-p-work.mn-section-visible .mn-section-hdr__title::before {
        transform: scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-strip {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        gap: 16px !important;
        padding: 6px clamp(20px, 5.6vw, 28px) 22px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: clamp(20px, 5.6vw, 28px) !important;
        overscroll-behavior-x: contain !important;
        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 !important; }

    .mn-home #mn-root.mn-native .mn-frame {
        position: relative !important;
        flex: 0 0 min(84vw, 372px) !important;
        width: min(84vw, 372px) !important;
        height: clamp(430px, 112vw, 520px) !important;
        min-height: 430px !important;
        max-height: 520px !important;
        display: block !important;
        margin: 0 !important;
        overflow: hidden !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always;
        border: 1px solid rgba(233,231,223,.11) !important;
        border-radius: 24px !important;
        background: #090D16 !important;
        box-shadow: 0 24px 60px -34px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.025) !important;
        opacity: .72 !important;
        transform: scale(.965) !important;
        filter: none !important;
        transition: opacity .48s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), border-color .42s ease, box-shadow .42s ease !important;
        isolation: isolate;
    }

    .mn-home #mn-root.mn-native .mn-frame.is-hot {
        opacity: 1 !important;
        transform: scale(1) !important;
        border-color: rgba(231,200,143,.28) !important;
        box-shadow: 0 30px 72px -34px rgba(0,0,0,.98), 0 0 0 1px rgba(224,149,75,.08), inset 0 1px 0 rgba(255,255,255,.035) !important;
    }

    .mn-home #mn-root.mn-native .mn-frame::before {
        content: '';
        position: absolute;
        z-index: 4;
        inset: 10px;
        pointer-events: none;
        border: 1px solid rgba(243,226,192,.055);
        border-radius: 17px;
    }

    .mn-home #mn-root.mn-native .mn-frame::after {
        content: '';
        position: absolute;
        z-index: 3;
        inset-inline: 20px;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(231,200,143,.62), transparent);
        opacity: .38;
        transform: scaleX(.35);
        transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
    }
    .mn-home #mn-root.mn-native .mn-frame.is-hot::after {
        opacity: .86;
        transform: scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-frame__media,
    .mn-home #mn-root.mn-native .work-media-host {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .mn-home #mn-root.mn-native .mn-frame__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: scale(1.075) !important;
        filter: saturate(.88) contrast(1.04) brightness(.82);
        transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .7s ease !important;
    }
    .mn-home #mn-root.mn-native .mn-frame.is-hot .mn-frame__img {
        transform: scale(1.025) !important;
        filter: saturate(.98) contrast(1.05) brightness(.9);
    }

    .mn-home #mn-root.mn-native .mn-frame__scrim {
        position: absolute !important;
        display: block !important;
        inset: 0 !important;
        z-index: 1;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(5,7,12,.18) 0%, transparent 24%, rgba(5,7,12,.12) 45%, rgba(5,7,12,.86) 76%, rgba(5,7,12,.98) 100%),
            linear-gradient(90deg, rgba(5,7,12,.12), transparent 48%, rgba(5,7,12,.18));
    }

    .mn-home #mn-root.mn-native .mn-frame__index {
        position: absolute !important;
        z-index: 2;
        top: 18px !important;
        inset-inline-end: 18px !important;
        inset-inline-start: auto !important;
        right: auto !important;
        font-family: var(--font-en);
        font-size: clamp(3.2rem, 15vw, 4.6rem) !important;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.08em !important;
        color: transparent !important;
        -webkit-text-stroke: 1px rgba(243,226,192,.20);
        opacity: .86 !important;
        text-shadow: none;
    }

    .mn-home #mn-root.mn-native .mn-frame__details {
        position: absolute !important;
        z-index: 5;
        inset: auto 16px 16px !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px !important;
        min-height: 150px;
        padding: 18px 18px 17px !important;
        border: 1px solid rgba(233,231,223,.10);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(8,12,20,.84), rgba(10,14,24,.68));
        -webkit-backdrop-filter: blur(14px) saturate(1.08);
        backdrop-filter: blur(14px) saturate(1.08);
        box-shadow: 0 18px 46px -30px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.025);
        text-align: right;
        transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease;
    }
    .mn-home #mn-root.mn-native .mn-frame.is-hot .mn-frame__details {
        transform: translateY(-2px);
        border-color: rgba(231,200,143,.16);
    }

    .mn-home #mn-root.mn-native .mn-frame__details::before {
        content: '';
        display: block;
        width: 54px;
        height: 1px;
        margin-bottom: 2px;
        background: linear-gradient(90deg, var(--gold-300), transparent);
    }

    .mn-home #mn-root.mn-native .mn-frame__meta {
        order: -1;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0 !important;
        color: rgba(231,200,143,.82) !important;
        opacity: 1 !important;
    }

    /* Arabic gets the size it needs; the Latin year keeps the instrument
       voice. See the note in mn-ui.css. */
    .mn-home #mn-root.mn-native .mn-frame__cat {
        font-family: var(--font-ar-body) !important;
        font-size: 11.5px !important;
        font-weight: 500;
        letter-spacing: .02em !important;
    }

    .mn-home #mn-root.mn-native .mn-frame__year {
        font-family: var(--font-en) !important;
        font-size: 9px !important;
        letter-spacing: .14em !important;
    }

    .mn-home #mn-root.mn-native .mn-frame__h3 {
        margin: 0 !important;
        font-family: var(--font-ar-display);
        font-size: clamp(1.25rem, 5.67vw, 1.61rem) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: #F3F0E8 !important;
        text-shadow: 0 8px 26px rgba(0,0,0,.42);
    }

    .mn-home #mn-root.mn-native .mn-frame__link {
        color: inherit !important;
        text-decoration: none;
    }

    .mn-home #mn-root.mn-native .mn-frame__cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 122px;
        height: 40px !important;
        margin-top: 6px !important;
        padding: 0 14px !important;
        border: 1px solid rgba(231,200,143,.24) !important;
        border-radius: 99px !important;
        background: rgba(224,149,75,.075) !important;
        font-family: var(--font-ar-body);
        font-size: 12px !important;
        font-weight: 600;
        color: var(--gold-100) !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mn-home #mn-root.mn-native .mn-frame__cta span {
        display: inline !important;
        margin-inline-start: 7px;
        font-family: var(--font-en);
        font-size: 12px;
    }
    .mn-home #mn-root.mn-native .mn-frame__cta::after { display: none !important; }

    .mn-home #mn-root.mn-native .work-media-play {
        width: 54px !important;
        height: 54px !important;
        left: 50% !important;
        top: 40% !important;
        inset-inline-start: auto !important;
        border-color: rgba(231,200,143,.45);
        background: rgba(7,10,17,.58);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-p-work:not(.mn-section-visible) .mn-frame {
        opacity: 0 !important;
        transform: translate3d(0, 22px, 0) scale(.96) !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-p-work.mn-section-visible .mn-frame {
        transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .82s cubic-bezier(.22,1,.36,1), border-color .42s ease, box-shadow .42s ease !important;
    }

    .mn-home #mn-root.mn-native .mn-work__footer {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 14px !important;
        width: min(calc(100% - 40px), 430px);
        margin: clamp(20px, 5.5vw, 28px) auto 0 !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(233,231,223,.08);
        border-radius: 99px;
        background: rgba(7,10,17,.42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .mn-home #mn-root.mn-native .mn-work__track { display: none !important; }

    .mn-home #mn-root.mn-native .mn-work__count {
        display: inline-flex !important;
        align-items: center;
        font-family: var(--font-en);
        font-size: 9.5px !important;
        letter-spacing: .08em;
        color: rgba(233,231,223,.38);
        white-space: nowrap;
    }
    .mn-home #mn-root.mn-native .mn-work__count-cur { color: var(--gold-200); }

    .mn-home #mn-root.mn-native .mn-work__dots {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px !important;
        min-width: 0;
    }
    .mn-home #mn-root.mn-native .mn-work__dot {
        position: relative;
        width: 6px !important;
        height: 6px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 99px !important;
        background: rgba(233,231,223,.22) !important;
        transform: none !important;
        transition: width .42s cubic-bezier(.16,1,.3,1), background .36s ease !important;
    }
    /* The painted dot stays 6px; the hit area is what has to reach 44.
       -19px vertically takes 6px to 44; -12px horizontally takes it to 30
       and, with the 7px gap, gives each dot a 37px-wide lane that does not
       overlap its neighbour's. */
    .mn-home #mn-root.mn-native .mn-work__dot::after { inset: -19px -12px; }
    .mn-home #mn-root.mn-native .mn-work__dot.is-current {
        width: 24px !important;
        background: linear-gradient(90deg, var(--gold-200), var(--gold-300)) !important;
    }

    .mn-home #mn-root.mn-native .mn-work__all {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        border: 0 !important;
        font-family: var(--font-ar-body);
        font-size: 11.5px !important;
        font-weight: 600;
        color: rgba(243,226,192,.76) !important;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .mn-home #mn-root.mn-native .mn-frame {
        flex-basis: 86vw !important;
        width: 86vw !important;
        height: 430px !important;
    }
    .mn-home #mn-root.mn-native .mn-work__footer {
        grid-template-columns: auto 1fr;
        border-radius: 18px;
    }
    .mn-home #mn-root.mn-native .mn-work__all {
        grid-column: 1 / -1;
        justify-self: center;
        padding-top: 4px;
    }
}

/* ==========================================================================
       §7 · ABOUT — من نحن (المرجع 4.png)
       ========================================================================== */
@media (max-width: 820px) {

    .mn-home #mn-root.mn-native .mn-aboutv3__shell {
        display: block;
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__grid {
        display: flex;
        flex-direction: column;
        gap: var(--mp-gap-lg);
        width: 100%;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__manifesto {
        text-align: start;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title {
        margin: 0;
        font-family: var(--font-ar-display);
        font-size: var(--mp-title);
        font-weight: 600;
        line-height: 1.32;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title-gold {
        display: block;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title strong {
        display: block;
        font-weight: 600;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__lead {
        margin: 0;
        font-size: var(--mp-body);
        line-height: 2.1;
        color: var(--bone-70);
    }

    /* ---- المبادئ الثلاثة: صف واحد بفواصل رأسية، كما في المرجع ------------- */
    .mn-home #mn-root.mn-native .mn-aboutv3__principles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 4px clamp(6px, 2.4vw, 10px);
        text-align: center;
    }

    /* الفاصل الرأسي بين الأعمدة — لا يظهر بعد آخر عمود. */
    .mn-home #mn-root.mn-native .mn-aboutv3__principle+.mn-aboutv3__principle::before {
        content: '';
        position: absolute;
        inset-inline-end: 0;
        top: 6%;
        bottom: 6%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(224, 149, 75, .34), transparent);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-icon {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        font-size: 17px;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-title {
        margin: 0;
        font-family: var(--font-ar-display);
        font-size: clamp(13px, 3.6vw, 15px);
        font-weight: 600;
        line-height: 1.3;
        color: var(--gold-100);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-desc {
        margin: 0;
        font-size: clamp(11px, 3vw, 12px);
        line-height: 1.78;
        color: var(--bone-50);
    }

    /* ---- الاقتباس -------------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-aboutv3__quote {
        position: relative;
        display: block;
        margin: 0;
        padding: clamp(26px, 7vw, 34px) clamp(20px, 5.4vw, 26px) clamp(20px, 5.4vw, 26px);
        background: linear-gradient(150deg, rgba(20, 28, 46, .8), rgba(9, 13, 22, .88));
        border: 1px solid var(--mp-edge-soft);
        border-radius: var(--mp-r-lg);
        overflow: hidden;
    }

    /* وميض ذهبي يعبر البطاقة عند ظهورها. */
    .mn-home #mn-root.mn-native .mn-aboutv3__quote::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 32%, rgba(255, 243, 214, .12) 48%, transparent 62%);
        transform: translateX(-120%);
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .is-in .mn-aboutv3__quote::after,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-aboutv3__quote::after {
        animation: mp-sheen 1.6s var(--mp-ease-out) .45s 1;
    }

    @keyframes mp-sheen {
        0% { transform: translateX(-120%); }
        100% { transform: translateX(120%); }
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote-mark {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-ar-display);
        font-size: 46px;
        line-height: .6;
        color: var(--gold-300);
        opacity: .8;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote blockquote {
        margin: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote p {
        margin: 0;
        font-family: var(--font-ar-display);
        font-size: clamp(16px, 4.4vw, 18px);
        font-weight: 400;
        line-height: 1.94;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote-by {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: var(--mp-gap-md);
        font-size: 12px;
        letter-spacing: .1em;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote-rule {
        width: 32px;
        height: 1px;
        background: var(--gold-300);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__foot {
        display: flex;
        justify-content: flex-start;
    }

    /* ==========================================================================
       §8 · CAPABILITIES — القدرات المتكاملة
       ثلاثة أعمدة تتكدّس بطاقاتٍ متطابقة الإيقاع.
       ========================================================================== */

    .mn-home #mn-root.mn-native .mn-capabilities-v2 {
        display: block;
    }

    .mn-home #mn-root.mn-native .mn-capv2__scrim {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(180deg, rgba(5, 7, 12, .5), rgba(5, 7, 12, .82));
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-capv2__shell {
        display: block;
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-capv2__head {
        margin-bottom: clamp(28px, 7vw, 38px);
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-capv2__eyebrow {
        justify-content: center;
    }

    .mn-home #mn-root.mn-native .mn-capv2__eyebrow::before {
        content: '';
        flex: 1 1 auto;
        max-width: 40px;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--gold-300));
    }

    .mn-home #mn-root.mn-native .mn-capv2__eyebrow .mn-eyebrow__rule {
        max-width: 40px;
        transform-origin: center;
    }

    .mn-home #mn-root.mn-native .mn-capv2__heading {
        margin: 0;
        font-family: var(--font-ar-display);
        font-size: var(--mp-title);
        font-weight: 600;
        line-height: 1.3;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-capv2__heading strong {
        color: var(--gold-200);
        font-weight: 600;
    }

    .mn-home #mn-root.mn-native .mn-capv2__lead {
        max-width: 34ch;
        margin: 0 auto;
        font-size: var(--mp-body);
        line-height: 2;
        color: var(--bone-70);
    }

    .mn-home #mn-root.mn-native .mn-capv2__columns {
        display: flex;
        flex-direction: column;
        gap: var(--mp-gap-md);
        width: 100%;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col {
        position: relative;
        display: block;
        width: 100%;
        padding: clamp(22px, 6vw, 28px) clamp(18px, 5vw, 24px);
        background: linear-gradient(160deg, rgba(20, 28, 46, .74), rgba(9, 13, 22, .86));
        border: 1px solid var(--mp-edge-soft);
        border-radius: var(--mp-r-lg);
        overflow: hidden;
    }

    /* خيط بلون الاتجاه على الحافة الأمامية. */
    .mn-home #mn-root.mn-native .mn-capv2__col::before {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 2px;
        background: linear-gradient(180deg, transparent, var(--cap-accent, var(--gold-300)), transparent);
        opacity: .8;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-head {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: var(--mp-gap-md);
        padding-bottom: var(--mp-gap-md);
        margin-bottom: var(--mp-gap-md);
        border-bottom: 1px solid var(--mp-edge-soft);
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-medal {
        grid-row: 1 / 3;
        display: grid;
        place-items: center;
        width: clamp(52px, 15vw, 62px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 32%, rgba(26, 36, 56, .9), rgba(8, 12, 20, .95));
        border: 1px solid rgba(224, 149, 75, .28);
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-medal-img {
        width: 64%;
        height: 64%;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(224, 149, 75, .4));
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-id {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-en);
        font-size: 10.5px;
        letter-spacing: .18em;
        color: var(--cap-accent, var(--gold-300));
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-id b {
        font-weight: 500;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-title {
        grid-column: 2;
        margin: 2px 0 0;
        font-family: var(--font-ar-display);
        font-size: clamp(19px, 5.2vw, 22px);
        font-weight: 600;
        line-height: 1.28;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-en {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-capv2__list {
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 46px;
        padding: 6px 10px;
        border-radius: var(--mp-r-sm);
        font-size: 14px;
        line-height: 1.5;
        color: var(--bone-70);
        background: transparent;
        transition: background .3s var(--mp-ease);
    }

    .mn-home #mn-root.mn-native .mn-capv2__item:nth-child(odd) {
        background: rgba(233, 231, 223, .035);
    }

    .mn-home #mn-root.mn-native .mn-capv2__item i {
        flex: 0 0 auto;
        font-size: 15px;
        color: var(--cap-accent, var(--gold-300));
    }

    /* شيفرون خلفي يجعل كل سطر يقرأ كعنصر قابل للنقر. */
    .mn-home #mn-root.mn-native .mn-capv2__item::after {
        content: '';
        margin-inline-start: auto;
        width: 6px;
        height: 6px;
        border-inline-start: 1.4px solid rgba(224, 149, 75, .55);
        border-block-end: 1.4px solid rgba(224, 149, 75, .55);
        transform: rotate(45deg);
    }

    .mn-home #mn-root.mn-native .mn-capv2__foot {
        display: flex;
        justify-content: center;
        margin-top: var(--mp-gap-lg);
    }

    .mn-home #mn-root.mn-native .mn-capv2__cta {
        width: min(320px, 100%);
    }
}

/* ============================================================================
   §9 · CRAFT — الحرفة (المرجع 6.png)
   النص أولاً، ثم الإطار السينمائي، ثم زر المشاهدة.
   ========================================================================== */
@media (max-width: 820px) {

    .mn-home #mn-root.mn-native .mn-craftv4__wash {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(120% 70% at 50% 30%, rgba(224, 149, 75, .08), transparent 70%);
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__shell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--mp-gap-md);
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
        padding: 0;
        text-align: center;
    }

    /* أبناء كتلة النص يصيرون عناصر مباشرة في العمود، فيمكن ترتيبهم
       حول الإطار: العنوان فوقه والزر تحته. */
    .mn-home #mn-root.mn-native .mn-craftv4__copy {
        display: contents;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__kicker {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: var(--font-en);
        font-size: var(--mp-micro);
        font-weight: 500;
        letter-spacing: .2em;
        color: var(--gold-200);
    }

    /* The flanking hairlines are gone: the kicker is a .mn-eyebrow now, and
       its pip + trailing rule are real elements shared with every other
       chapter. Two ornament systems on one label was the inconsistency. */
    .mn-home #mn-root.mn-native .mn-craftv4__kicker::before,
    .mn-home #mn-root.mn-native .mn-craftv4__kicker::after {
        content: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy h2 {
        order: 2;
        position: relative;
        margin: 0;
        padding-bottom: 22px;
        font-family: var(--font-ar-display);
        font-size: var(--mp-h2);
        font-weight: 600;
        line-height: 1.34;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy h2 em {
        font-style: normal;
        color: var(--gold-200);
    }

    /* معيّن صغير أسفل العنوان بدل الخط الكامل، كما في المرجع. */
    .mn-home #mn-root.mn-native .mn-craftv4__copy h2::after {
        content: '';
        position: absolute;
        inset-inline-start: 50%;
        bottom: 6px;
        width: 6px;
        height: 6px;
        margin-inline-start: -3px;
        background: var(--gold-200);
        transform: rotate(45deg);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy p {
        order: 3;
        max-width: 36ch;
        margin: 0;
        font-size: var(--mp-body);
        line-height: 2.05;
        color: var(--bone-70);
    }

    /* ---- الإطار السينمائي ------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-craftv4__frame {
        order: 4;
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin-top: var(--mp-gap-sm);
        overflow: hidden;
        border: 1px solid var(--mp-edge);
        border-radius: var(--mp-r-lg);
        background: var(--ink-800);
        box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .95);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__media {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__grade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(5, 7, 12, .28), rgba(5, 7, 12, .5));
        pointer-events: none;
    }

    /* أركان الكادر الأربعة. */
    .mn-home #mn-root.mn-native .mn-craftv4__corners {
        position: absolute;
        inset: 12px;
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__corners i {
        position: absolute;
        width: 18px;
        height: 18px;
        border: 0 solid rgba(224, 149, 75, .65);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__corners i:nth-child(1) { top: 0; left: 0; border-top-width: 1.4px; border-left-width: 1.4px; }
    .mn-home #mn-root.mn-native .mn-craftv4__corners i:nth-child(2) { top: 0; right: 0; border-top-width: 1.4px; border-right-width: 1.4px; }
    .mn-home #mn-root.mn-native .mn-craftv4__corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.4px; border-left-width: 1.4px; }
    .mn-home #mn-root.mn-native .mn-craftv4__corners i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.4px; border-right-width: 1.4px; }

    /* شريط التوقيت أسفل الإطار. */
    .mn-home #mn-root.mn-native .mn-craftv4__timecode {
        display: flex;
        position: absolute;
        inset-inline: 20px;
        bottom: 14px;
        justify-content: space-between;
        font-family: var(--font-en);
        font-size: 10px;
        letter-spacing: .14em;
        color: rgba(233, 231, 223, .55);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__play {
        position: absolute;
        inset-inline-start: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        display: grid;
        place-items: center;
        width: 66px;
        height: 66px;
        padding: 0;
        border-radius: 50%;
        border: 1.5px solid var(--gold-200);
        background: rgba(224, 149, 75, .92);
        box-shadow: 0 0 0 10px rgba(224, 149, 75, .12), 0 10px 30px -8px rgba(0, 0, 0, .8);
        animation: mp-play-pulse 2.8s var(--mp-ease) infinite;
    }

    @keyframes mp-play-pulse {
        0%, 100% { box-shadow: 0 0 0 10px rgba(224, 149, 75, .12), 0 10px 30px -8px rgba(0, 0, 0, .8); }
        50% { box-shadow: 0 0 0 18px rgba(224, 149, 75, .04), 0 10px 30px -8px rgba(0, 0, 0, .8); }
    }

    .mn-home #mn-root.mn-native .mn-craftv4__play b {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__play-icon {
        width: 0;
        height: 0;
        margin-inline-end: 3px;
        /* المثلث يشير لليمين دائماً — رمز تشغيل، لا اتجاه قراءة. */
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 15px solid #14100A;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__frame.is-playing .mn-craftv4__play {
        opacity: 0;
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__cta {
        order: 5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: min(320px, 100%);
        min-height: 54px;
        margin-top: var(--mp-gap-sm);
        border-radius: var(--mp-r-sm);
        font-family: var(--font-ar-body);
        font-size: 16px;
        font-weight: 700;
        color: #14100A;
        text-decoration: none;
        background: linear-gradient(160deg, #F3E2C0 0%, #E7C88F 42%, #D8B46F 100%);
        box-shadow: 0 12px 30px -12px rgba(224, 149, 75, .6),
            inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    /* ==========================================================================
       §10 · PATH — رحلة العمل (المرجع 7.png)
       خط متعرّج رأسي يُرسم مع النزول ويمر بكل محطة.
       بنية الشبكة: [نص | العمود المركزي للخط | نص] بالتناوب.
       ========================================================================== */

    .mn-home #mn-root.mn-native .mn-pathv4__shell {
        display: block;
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head {
        margin-bottom: clamp(28px, 7vw, 40px);
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__eyebrow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: var(--mp-gap-sm);
        font-family: var(--font-en);
        font-size: var(--mp-micro);
        letter-spacing: .2em;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__eyebrow::before,
    .mn-home #mn-root.mn-native .mn-pathv4__eyebrow::after {
        content: none;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head h2 {
        position: relative;
        margin: 0;
        padding-bottom: 24px;
        font-family: var(--font-ar-display);
        font-size: var(--mp-title);
        font-weight: 600;
        line-height: 1.3;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head h2 strong {
        display: block;
        font-weight: 600;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head h2::before {
        content: '';
        position: absolute;
        inset-inline-start: 50%;
        bottom: 10px;
        width: min(200px, 62%);
        height: 1px;
        transform: translateX(50%) scaleX(0);
        background: linear-gradient(to left, transparent, var(--gold-300) 50%, transparent);
        transition: transform .9s var(--mp-ease-out) .2s;
    }

    .mn-home #mn-root.mn-native .is-in .mn-pathv4__head h2::before,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-pathv4__head h2::before {
        transform: translateX(50%) scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head h2::after {
        content: '';
        position: absolute;
        inset-inline-start: 50%;
        bottom: 7.5px;
        width: 6px;
        height: 6px;
        margin-inline-start: -3px;
        background: var(--gold-200);
        transform: rotate(45deg);
    }

    /* ---- المسار ---------------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-pathv4__route {
        position: relative;
        display: grid;
        /* العمود الأوسط يحتضن الخط المتعرّج والعُقد. */
        grid-template-columns: 1fr var(--mp-route-w, 78px) 1fr;
        row-gap: clamp(26px, 7vw, 38px);
        width: 100%;
        height: auto;
        padding: 8px 0 4px;
        transform: none;
    }

    /* الخط المتعرّج: SVG يُبنى بمقاسات حقيقية في mn-mobile.js فيمر
       بمركز كل عقدة تماماً بلا تشويه. */
    .mn-home #mn-root.mn-native .mn-pathv4__svg,
    .mn-home #mn-root.mn-native .mn-pathv4__needle {
        display: none;
    }

    .mn-home #mn-root.mn-native .mp-route-svg {
        position: absolute;
        inset-inline-start: 50%;
        top: 0;
        transform: translateX(50%);
        width: var(--mp-route-w, 78px);
        height: 100%;
        overflow: visible;
        pointer-events: none;
        z-index: 0;
    }

    .mn-home #mn-root.mn-native .mp-route-base {
        fill: none;
        stroke: rgba(224, 149, 75, .18);
        stroke-width: 1.4;
        stroke-linecap: round;
    }

    .mn-home #mn-root.mn-native .mp-route-trace {
        fill: none;
        stroke: url(#mp-route-grad);
        stroke-width: 1.8;
        stroke-linecap: round;
        filter: drop-shadow(0 0 5px rgba(224, 149, 75, .55));
        /* يُحرَّك عبر stroke-dashoffset من الجافاسكربت مع التمرير. */
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point {
        position: relative;
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        /* المواضع المطلقة الخاصة بسطح المكتب لا معنى لها هنا. */
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        width: auto;
        transform: none;
        opacity: 0;
        transition: opacity .6s var(--mp-ease-out), transform .6s var(--mp-ease-out);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached {
        opacity: 1;
    }

    /* المتصفحات بلا subgrid: شبكة صريحة بالقيم نفسها. */
    @supports not (grid-template-columns: subgrid) {
        .mn-home #mn-root.mn-native .mn-pathv4__point {
            grid-template-columns: 1fr var(--mp-route-w, 78px) 1fr;
        }
    }

    /* العقدة المرقّمة تجلس على الخط في العمود الأوسط. */
    .mn-home #mn-root.mn-native .mn-pathv4__marker {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        width: clamp(44px, 12.5vw, 52px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 34%, rgba(22, 30, 48, .98), rgba(7, 10, 18, 1));
        border: 1px solid rgba(224, 149, 75, .38);
        box-shadow: 0 0 0 5px var(--ink-700);
        transform: scale(.7);
        transition: transform .5s var(--mp-ease-out), border-color .5s var(--mp-ease),
            box-shadow .5s var(--mp-ease);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached .mn-pathv4__marker {
        transform: scale(1);
        border-color: var(--gold-200);
        box-shadow: 0 0 0 5px var(--ink-700), 0 0 20px rgba(224, 149, 75, .5);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__marker b {
        font-family: var(--font-en);
        font-size: 15px;
        font-weight: 500;
        color: var(--gold-200);
    }

    /* النص يتناوب: الفردي في العمود الأول (يمين RTL)، الزوجي في الثالث. */
    .mn-home #mn-root.mn-native .mn-pathv4__copy {
        grid-row: 1;
        position: static;
        width: auto;
        max-width: none;
        transform: none;
        text-align: start;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-of-type(odd) .mn-pathv4__copy {
        grid-column: 1;
        padding-inline-end: 6px;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-of-type(even) .mn-pathv4__copy {
        grid-column: 3;
        text-align: end;
        padding-inline-start: 6px;
    }

    /* تنزلق نحو الخط عند الوصول إليها. */
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-of-type(odd) .mn-pathv4__copy {
        transform: translateX(-14px);
        opacity: 0;
        transition: transform .6s var(--mp-ease-out) .1s, opacity .6s var(--mp-ease-out) .1s;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-of-type(even) .mn-pathv4__copy {
        transform: translateX(14px);
        opacity: 0;
        transition: transform .6s var(--mp-ease-out) .1s, opacity .6s var(--mp-ease-out) .1s;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached .mn-pathv4__copy {
        transform: translateX(0);
        opacity: 1;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy span {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy h3 {
        margin: 0 0 6px;
        font-family: var(--font-ar-display);
        font-size: clamp(17px, 4.6vw, 19px);
        font-weight: 600;
        line-height: 1.3;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy p {
        margin: 0;
        font-size: clamp(12px, 3.3vw, 13px);
        line-height: 1.82;
        color: var(--bone-50);
    }

    /* ==========================================================================
       §11 · ARRIVAL — الدعوة الأخيرة (المرجع 8.png)
       ========================================================================== */

    .mn-home #mn-root.mn-native .mn-arrivalv4__shell {
        display: block;
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__grid {
        display: block;
        width: 100%;
        padding: 0;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--mp-gap-md);
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy>* {
        width: 100%;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__eyebrow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: var(--font-en);
        font-size: var(--mp-micro);
        letter-spacing: .2em;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__eyebrow::before,
    .mn-home #mn-root.mn-native .mn-arrivalv4__eyebrow::after {
        content: none;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2 {
        position: relative;
        margin: 0;
        padding-bottom: 26px;
        font-family: var(--font-ar-display);
        font-size: var(--mp-title);
        font-weight: 600;
        line-height: 1.3;
        color: var(--bone);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2 strong {
        font-weight: 600;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2::before {
        content: '';
        position: absolute;
        inset-inline-start: 50%;
        bottom: 11px;
        width: min(230px, 68%);
        height: 1px;
        transform: translateX(50%) scaleX(0);
        background: linear-gradient(to left, transparent, var(--gold-300) 50%, transparent);
        transition: transform .9s var(--mp-ease-out) .2s;
    }

    .mn-home #mn-root.mn-native .is-in .mn-arrivalv4 h2::before,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-arrivalv4 h2::before {
        transform: translateX(50%) scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2::after {
        content: '';
        position: absolute;
        inset-inline-start: 50%;
        bottom: 8.5px;
        width: 6px;
        height: 6px;
        margin-inline-start: -3px;
        background: var(--gold-200);
        transform: rotate(45deg);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy p {
        max-width: 32ch;
        margin-inline: auto;
        font-size: var(--mp-body);
        line-height: 2.05;
        color: var(--bone-70);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--mp-gap-md);
        margin-top: var(--mp-gap-sm);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        min-height: 58px;
        padding: 0 24px;
        border-radius: var(--mp-r-sm);
        font-family: var(--font-ar-body);
        font-size: 17px;
        font-weight: 700;
        color: #14100A;
        text-decoration: none;
        background: linear-gradient(160deg, #F3E2C0 0%, #E7C88F 42%, #D8B46F 100%);
        box-shadow: 0 14px 34px -14px rgba(224, 149, 75, .65),
            inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    /* v24: this used to be display:none, which is why the dial never
       appeared on a phone no matter what the later rules said about its
       animation — they were styling a box that was not being generated.
       The live version is in §17. */

    .mn-home #mn-root.mn-native .mn-arrivalv4__cta-arrow {
        font-size: 15px;
        line-height: 1;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 0 24px;
        border: 1px solid var(--mp-edge);
        border-radius: var(--mp-r-sm);
        background: rgba(14, 20, 34, .6);
        font-family: var(--font-ar-body);
        font-size: 15.5px;
        font-weight: 600;
        color: var(--gold-100);
        text-decoration: none;
    }

    /* شريط الثقة الختامي. */
    .mn-home #mn-root.mn-native .mn-arrivalv4__lock {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: var(--mp-gap-lg);
        padding: 16px 18px;
        border: 1px solid var(--mp-edge-soft);
        border-radius: var(--mp-r-md);
        background: rgba(10, 14, 24, .5);
        font-family: var(--font-en);
        font-size: 10.5px;
        letter-spacing: .16em;
        color: var(--bone-50);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__lock b {
        color: var(--gold-200);
        font-weight: 500;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__lock i {
        width: 22px;
        height: 1px;
        background: rgba(224, 149, 75, .4);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__lock em {
        font-style: normal;
        color: var(--gold-200);
    }
}

/* ============================================================================
   §12 · MOTION UTILITIES
   حركات مشتركة يشغّلها mn-mobile.js عند دخول العنصر إطار الرؤية.
   لا شيء منها يعتمد على تحويم أو مؤشر.
   ========================================================================== */
@media (max-width: 820px) {

    /* ---- الظهور العام: يُعلَّم أي عنصر بـ data-mp-reveal ------------------- */
    .mn-home #mn-root.mn-native [data-mp-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .75s var(--mp-ease-out), transform .75s var(--mp-ease-out);
    }

    .mn-home #mn-root.mn-native [data-mp-reveal].mp-in {
        opacity: 1;
        transform: none;
    }

    .mn-home #mn-root.mn-native [data-mp-reveal="right"] { transform: translateX(26px); }
    .mn-home #mn-root.mn-native [data-mp-reveal="left"]  { transform: translateX(-26px); }
    .mn-home #mn-root.mn-native [data-mp-reveal="scale"] { transform: scale(.94); }

    /* التتابع داخل مجموعة. */
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d1 { transition-delay: .08s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d2 { transition-delay: .16s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d3 { transition-delay: .24s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d4 { transition-delay: .32s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d5 { transition-delay: .40s; }

    /* ---- لمعان الصور -----------------------------------------------------
       شعاع ضوئي يعبر الصورة مرة واحدة عند ظهورها، فتقرأ الصورة كسطح
       معدني لا كمستطيل ثابت. يُركَّب على غلاف الصورة من الجافاسكربت. */
    .mn-home #mn-root.mn-native .mp-shine {
        position: relative;
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mp-shine::after {
        content: '';
        position: absolute;
        inset: -20%;
        z-index: 3;
        background: linear-gradient(112deg,
                transparent 38%,
                rgba(255, 243, 214, .06) 45%,
                rgba(255, 243, 214, .26) 50%,
                rgba(255, 243, 214, .06) 55%,
                transparent 62%);
        transform: translateX(-130%);
        pointer-events: none;
        opacity: 0;
    }

    .mn-home #mn-root.mn-native .mp-shine.mp-shine-run::after {
        animation: mp-shine-sweep 1.5s var(--mp-ease-out) 1;
    }

    @keyframes mp-shine-sweep {
        0% { transform: translateX(-130%); opacity: 0; }
        12% { opacity: 1; }
        88% { opacity: 1; }
        100% { transform: translateX(130%); opacity: 0; }
    }

    /* ---- طبقة اختلاف بسيطة لصور الأقسام (parallax خفيف) ------------------ */
    .mn-home #mn-root.mn-native .mn-plate>.mn-bg img {
        will-change: transform;
        transform: translate3d(0, var(--mp-par, 0px), 0) scale(1.06);
    }

    /* ============================================================================
       §13 · FOOTER — تذييل أهدأ وأكثر أناقة على الهاتف
       ========================================================================== */

    .mn-ft {
        position: relative;
        padding-inline: var(--mp-pad, 20px);
        background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 55%, var(--ink-900) 100%);
    }

    /* الحد العلوي خيط ذهبي يتلاشى في الطرفين — امتداد لخيط الأقسام. */
    .mn-ft::before {
        content: '';
        position: absolute;
        inset-inline: 12%;
        top: 0;
        height: 1px;
        background: linear-gradient(to left, transparent, rgba(224, 149, 75, .45), transparent);
    }

    .mn-ft__field {
        opacity: .35;
    }

    /* ---- كتلة الدعوة العلوية ---- */
    .mn-ft__arrival {
        padding-block: clamp(48px, 12vw, 68px) clamp(34px, 9vw, 46px);
        text-align: center;
    }

    .mn-ft__eyebrow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 14px;
        font-family: var(--font-en);
        font-size: 10.5px;
        letter-spacing: .2em;
        color: var(--gold-200);
    }

    .mn-ft__eyebrow::before,
    .mn-ft__eyebrow::after {
        content: '';
        width: 26px;
        height: 1px;
        background: rgba(224, 149, 75, .5);
    }

    .mn-ft__title {
        margin: 0 0 22px;
        font-family: var(--font-ar-display);
        font-size: clamp(24px, 6.6vw, 30px);
        font-weight: 600;
        line-height: 1.38;
        color: var(--bone);
    }

    .mn-ft__title .gold {
        color: var(--gold-200);
    }

    .mn-ft__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: min(300px, 100%);
        min-height: 54px;
        border-radius: 12px;
        font-family: var(--font-ar-body);
        font-size: 16px;
        font-weight: 700;
        color: #14100A;
        text-decoration: none;
        background: linear-gradient(160deg, #F3E2C0 0%, #E7C88F 42%, #D8B46F 100%);
        box-shadow: 0 12px 30px -12px rgba(224, 149, 75, .6),
            inset 0 1px 0 rgba(255, 255, 255, .45);
    }

    .mn-ft__lock {
        margin-top: 20px;
        font-family: var(--font-en);
        font-size: 10px;
        letter-spacing: .16em;
        color: var(--bone-30);
    }

    .mn-ft__lock b {
        color: var(--gold-200);
        font-weight: 500;
    }

    /* ---- الدليل: عمود واحد بفواصل رفيعة ---- */
    .mn-ft__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-block: clamp(28px, 7vw, 38px);
        border-top: 1px solid rgba(233, 231, 223, .08);
    }

    .mn-ft__col {
        padding-block: clamp(20px, 5.4vw, 26px);
    }

    .mn-ft__col+.mn-ft__col {
        border-top: 1px solid rgba(233, 231, 223, .07);
    }

    .mn-ft__col--brand {
        padding-top: 0;
        text-align: center;
    }

    .mn-ft__brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
    }

    .mn-ft__desc {
        margin: 14px auto 0;
        max-width: 30ch;
        font-size: 13.5px;
        line-height: 1.9;
        color: var(--bone-50);
    }

    .mn-ft__social {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .mn-ft__social a {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(233, 231, 223, .12);
        border-radius: 50%;
        font-size: 16px;
        color: var(--gold-200);
        text-decoration: none;
        background: rgba(233, 231, 223, .03);
        transition: border-color .3s var(--mp-ease, ease), background .3s var(--mp-ease, ease);
    }

    .mn-ft__social a:active {
        border-color: rgba(224, 149, 75, .5);
        background: rgba(224, 149, 75, .1);
    }

    .mn-ft__col h6 {
        margin: 0 0 14px;
        font-family: var(--font-en);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .22em;
        color: var(--gold-200);
    }

    .mn-ft__links,
    .mn-ft__contact {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mn-ft__links a,
    .mn-ft__contact a,
    .mn-ft__contact span {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        font-size: 14.5px;
        color: var(--bone-70);
        text-decoration: none;
    }

    .mn-ft__contact i {
        font-size: 14px;
        color: var(--gold-300);
    }

    .mn-ft__links a:active,
    .mn-ft__contact a:active {
        color: var(--gold-100);
    }

    /* ---- السطر الختامي ---- */
    .mn-ft__base {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-block: clamp(20px, 5.4vw, 26px) clamp(26px, 7vw, 34px);
        border-top: 1px solid rgba(233, 231, 223, .08);
        text-align: center;
    }

    .mn-ft__base p {
        margin: 0;
    }

    .mn-ft__copy,
    .mn-ft__credit {
        font-size: 12px;
        color: var(--bone-30);
    }

    .mn-ft__copy a,
    .mn-ft__credit a {
        color: var(--gold-200);
        text-decoration: none;
    }

    .mn-ft__coordtag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        border: 1px solid rgba(233, 231, 223, .1);
        border-radius: 99px;
        font-family: var(--font-en);
        font-size: 10px;
        letter-spacing: .14em;
        color: var(--bone-50);
    }

    .mn-ft__coordtag .mk {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold-300);
        box-shadow: 0 0 8px rgba(224, 149, 75, .8);
        animation: mp-dot-pulse 2.6s var(--mp-ease, ease) infinite;
    }

    /* ============================================================================
       §14 · REDUCED MOTION
       من يطلب تقليل الحركة يحصل على التصميم كاملاً بلا حركة — لا على صفحة ناقصة.
       ========================================================================== */
}

/* ============================================================================
   V17 · ABOUT + CAPABILITIES — MOBILE FINISH
   Keeps the heavy desktop instrument field disabled, but makes the two
   chapters feel alive through local, compositor-friendly feedback.
   ========================================================================== */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native .mn-aboutv3__principle-icon {
        transition:
            transform .42s cubic-bezier(.16, 1, .3, 1),
            border-color .32s ease,
            box-shadow .32s ease,
            color .32s ease;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle:active .mn-aboutv3__principle-icon {
        transform: scale(.93) rotate(6deg);
        border-color: rgba(231, 200, 143, .62);
        color: var(--gold-100);
        box-shadow: 0 0 20px -8px rgba(224, 149, 75, .62);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote {
        box-shadow: 0 18px 46px -34px rgba(0, 0, 0, .92);
    }

    /* Draw the direction accent only when the stagger group enters. */
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__col::before {
        transform: scaleY(0);
        transform-origin: top center;
        opacity: 0;
        transition:
            transform .72s cubic-bezier(.22, 1, .36, 1),
            opacity .42s ease;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col::before {
        transform: scaleY(1);
        opacity: .8;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col:nth-child(2)::before {
        transition-delay: .10s;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__columns.is-in .mn-capv2__col:nth-child(3)::before {
        transition-delay: .20s;
    }

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

    .mn-home #mn-root.mn-native .mn-capv2__item:active i {
        transform: scale(.9) rotate(-7deg);
        filter: drop-shadow(0 0 8px rgba(224, 149, 75, .5));
    }

    .mn-home #mn-root.mn-native .mn-capv2__item:active::after {
        transform: rotate(45deg) translate(-2px, 2px);
    }

    .mn-home #mn-root.mn-native .mn-capv2__cta:active {
        transform: scale(.985);
    }
}

/* ============================================================================
   V19 · MOBILE CONTINUITY + HERO FINAL AUTHORITY
   The phone route now has one visual ground. Every chapter photography fades
   through the same ink bridge, so background changes read as a dissolve rather
   than eight separate rectangular canvases.
   ========================================================================== */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native {
        --mp-ground: #05070C;
    }

    .mn-home #mn-root.mn-native .mn-plate {
        background: var(--mp-ground) !important;
    }

    /* Override the old pseudo generations completely. In particular this
       makes width:auto, removing the 78vw black rectangle formerly created
       at the foot of ORIENT. */
    .mn-home #mn-root.mn-native .mn-plate::before,
    .mn-home #mn-root.mn-native .mn-plate::after {
        content: '' !important;
        position: absolute !important;
        inset-inline: 0 !important;
        width: auto !important;
        height: clamp(78px, 19vw, 112px) !important;
        pointer-events: none !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 2 !important;
    }

    .mn-home #mn-root.mn-native .mn-plate::before {
        display: block !important;
        top: -1px !important;
        bottom: auto !important;
        background:
            radial-gradient(60% 16px at 50% 0%, rgba(224,149,75,.075), transparent 72%),
            linear-gradient(180deg, var(--mp-ground) 0%, rgba(5,7,12,.88) 28%, rgba(5,7,12,.34) 68%, transparent 100%) !important;
    }

    .mn-home #mn-root.mn-native .mn-p-orient::before {
        display: none !important;
    }

    .mn-home #mn-root.mn-native .mn-plate::after {
        top: auto !important;
        bottom: -1px !important;
        background:
            radial-gradient(60% 16px at 50% 100%, rgba(224,149,75,.065), transparent 72%),
            linear-gradient(0deg, var(--mp-ground) 0%, rgba(5,7,12,.90) 30%, rgba(5,7,12,.36) 68%, transparent 100%) !important;
        animation: mp-section-bridge 5.8s ease-in-out infinite;
    }

    @keyframes mp-section-bridge {
        0%,100% { opacity: .88; }
        50% { opacity: 1; }
    }

    /* Background artwork itself feathers into the common ground; the pseudo
       bridge above then provides a small shared glow so the handoff feels
       intentional rather than simply dark. */
    .mn-home #mn-root.mn-native .mn-plate > .mn-bg {
        -webkit-mask-image: linear-gradient(180deg,
            transparent 0%, rgba(0,0,0,.55) 8%, #000 20%, #000 80%, rgba(0,0,0,.55) 92%, transparent 100%) !important;
        mask-image: linear-gradient(180deg,
            transparent 0%, rgba(0,0,0,.55) 8%, #000 20%, #000 80%, rgba(0,0,0,.55) 92%, transparent 100%) !important;
    }

    .mn-home #mn-root.mn-native .mn-p-orient > .mn-bg {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,.78) 82%, rgba(0,0,0,.28) 94%, transparent 100%) !important;
        mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,.78) 82%, rgba(0,0,0,.28) 94%, transparent 100%) !important;
    }

    /* HERO — keep the improved hierarchy but seat the copy lower and remove
       every legacy decorative pseudo from the composition. */
    .mn-home #mn-root.mn-native .mn-p-orient {
        --scrim: linear-gradient(180deg,
            rgba(5,7,12,.48) 0%, rgba(5,7,12,.16) 28%, rgba(5,7,12,.44) 56%, rgba(5,7,12,.88) 82%, rgba(5,7,12,.98) 100%);
        min-height: 100svh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding-block-start: calc(72px + env(safe-area-inset-top, 0px)) !important;
        padding-block-end: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
        padding-inline: clamp(18px,5.4vw,26px) !important;
    }

    .mn-home #mn-root.mn-native .mn-p-orient > .mn-bg::after {
        background: var(--scrim) !important;
    }

    .mn-home #mn-root.mn-native .mn-orient__inner {
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        width: min(100%, 430px) !important;
        max-width: 430px !important;
        margin-inline: auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .mn-home #mn-root.mn-native .mn-orient__inner::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -14% -8% -8%;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 68%, rgba(224,149,75,.09), rgba(10,14,24,.26) 42%, transparent 72%);
    }

    .mn-home #mn-root.mn-native .mn-orient__eyebrow {
        display: inline-flex !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 0 14px !important;
        padding: 8px 12px !important;
        border: 1px solid rgba(231,200,143,.17);
        border-radius: 99px;
        background: rgba(8,12,20,.36);
        font-size: 9.3px !important;
        letter-spacing: .14em !important;
        color: rgba(243,226,192,.8) !important;
    }
    .mn-home #mn-root.mn-native .mn-orient__eyebrow::before { display: none !important; }
    .mn-home #mn-root.mn-native .mn-orient__eyebrow .mn-eyebrow__rule { max-width: 22px !important; }

    .mn-home #mn-root.mn-native .mn-orient__h1 {
        width: 100%;
        max-width: 100% !important;
        margin: 0 !important;
        font-family: var(--font-ar-display);
        font-size: clamp(1.98rem, 9.49vw, 2.93rem) !important;
        font-weight: 600;
        line-height: 1.03 !important;
        letter-spacing: -.018em;
        text-align: center !important;
        text-shadow: 0 18px 46px rgba(0,0,0,.54);
    }
    .mn-home #mn-root.mn-native .mn-orient__h1-line + .mn-orient__h1-line { margin-top: .1em; }

    .mn-home #mn-root.mn-native .mn-orient__h1-line--gold {
        background: linear-gradient(102deg,#C77E3A 0%,#E7C88F 22%,#FFF3D6 43%,#E7C88F 62%,#C77E3A 100%) !important;
        background-size: 220% 100% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        filter: drop-shadow(0 0 18px rgba(224,149,75,.19)) !important;
        animation: mp-hero-scan 6.8s cubic-bezier(.45,0,.55,1) infinite !important;
    }
    @keyframes mp-hero-scan {
        0%,100% { background-position: 100% 50%; }
        50% { background-position: 0% 50%; }
    }

    .mn-home #mn-root.mn-native .mn-orient__inner > .mn-divider {
        width: min(184px,50%) !important;
        margin: 18px auto !important;
    }

    .mn-home #mn-root.mn-native .mn-orient__p {
        max-width: 34ch !important;
        margin: 0 auto !important;
        font-size: clamp(14px,3.8vw,15.5px) !important;
        line-height: 1.95 !important;
        color: rgba(233,231,223,.72) !important;
        text-align: center !important;
    }

    .mn-home #mn-root.mn-native .mn-orient__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
        width: min(100%, 330px) !important;
        margin: 22px auto 0 !important;
        gap: 8px !important;
    }
    .mn-home #mn-root.mn-native .mn-orient__actions .mn-btn--gold {
        width: 100% !important;
        min-height: 56px !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 38px -18px rgba(224,149,75,.68), inset 0 1px 0 rgba(255,255,255,.4) !important;
    }
    .mn-home #mn-root.mn-native .mn-orient__actions .mn-btn--quiet {
        min-height: 42px !important;
        border-bottom-color: transparent !important;
    }

    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner > * {
        opacity: 0;
        transform: translate3d(0,22px,0) scale(.987);
        transition: none !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner.is-in > * {
        opacity: 1;
        transform: none;
        transition: opacity .84s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1) !important;
    }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner.is-in > *:nth-child(2) { transition-delay: .08s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner.is-in > *:nth-child(3) { transition-delay: .16s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner.is-in > *:nth-child(4) { transition-delay: .22s !important; }
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-orient__inner.is-in > *:nth-child(5) { transition-delay: .30s !important; }
}

/* ============================================================================
   V20 · ABOUT / CAPABILITIES / PATH — PHONE FINAL AUTHORITY
   ----------------------------------------------------------------------------
   These rules deliberately sit at the very end of the phone stylesheet.
   They neutralise older mobile generations still present in mn-ui.css and
   make mn-mobile.css the visual owner of these three chapters.
   ========================================================================== */
@media (max-width: 820px) {

    /* ---------------------------------------------------------------------
       04 · ABOUT — lift the composition and make every layer earn its space.
       --------------------------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-aboutv3 {
        --scrim: linear-gradient(180deg,
            rgba(5,7,12,.62) 0%,
            rgba(5,7,12,.46) 22%,
            rgba(5,7,12,.76) 58%,
            rgba(5,7,12,.96) 100%);
        padding-block-start: clamp(40px, 10vw, 56px) !important;
        padding-block-end: clamp(70px, 17vw, 94px) !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3 > .mn-bg::after {
        background:
            radial-gradient(72% 48% at 78% 22%, rgba(224,149,75,.10), transparent 70%),
            var(--scrim) !important;
    }

    /* Old mn-ui mobile generations reserved 120–200px above the manifesto.
       That is what made ABOUT sit visibly too low after the recent rebuild. */
    .mn-home #mn-root.mn-native .mn-aboutv3__manifesto {
        position: relative;
        padding-top: 0 !important;
        padding-inline: clamp(2px, 1vw, 6px);
        text-align: start !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__manifesto::before {
        content: '';
        position: absolute;
        inset-inline-start: -12px;
        top: -14px;
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(224,149,75,.12), transparent 68%);
        filter: blur(2px);
        pointer-events: none;
        z-index: -1;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__kicker {
        margin-bottom: 11px !important;
        color: rgba(243,226,192,.82) !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title {
        position: relative;
        margin: 0 !important;
        font-size: clamp(1.82rem, 8.29vw, 2.54rem) !important;
        line-height: 1.18 !important;
        letter-spacing: -.015em;
        text-shadow: 0 16px 42px rgba(0,0,0,.44);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title-gold {
        display: block;
        background: linear-gradient(100deg, #C77E3A 0%, #E7C88F 42%, #FFF0CF 54%, #D39A52 100%);
        background-size: 210% 100%;
        background-position: 100% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title.mp-in .mn-aboutv3__title-gold {
        animation: mp-about-title-glint 1.8s cubic-bezier(.22,1,.36,1) .16s 1 both;
    }

    @keyframes mp-about-title-glint {
        from { background-position: 100% 50%; filter: drop-shadow(0 0 0 rgba(224,149,75,0)); }
        52%  { filter: drop-shadow(0 0 14px rgba(224,149,75,.18)); }
        to   { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(224,149,75,0)); }
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__lead {
        max-width: 37ch;
        margin-top: 0 !important;
        font-size: clamp(14px, 3.8vw, 15.5px) !important;
        line-height: 2 !important;
        color: rgba(233,231,223,.72) !important;
    }

    /* Replace the cramped 3-column principle row with readable instrument
       cards. The CMS copy can now breathe instead of wrapping every 2 words. */
    .mn-home #mn-root.mn-native .mn-aboutv3__principles {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle {
        position: relative;
        display: grid !important;
        grid-template-columns: 46px minmax(0,1fr) !important;
        grid-template-areas: "icon title" "icon desc" !important;
        align-items: center !important;
        gap: 3px 14px !important;
        min-height: 86px;
        padding: 15px 16px !important;
        border: 1px solid rgba(233,231,223,.09) !important;
        border-radius: 16px;
        background:
            radial-gradient(110px 80px at 100% 0%, rgba(224,149,75,.07), transparent 72%),
            linear-gradient(145deg, rgba(18,25,41,.70), rgba(7,11,19,.77));
        box-shadow: 0 20px 44px -36px rgba(0,0,0,.96);
        overflow: hidden;
        text-align: start !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle::before {
        content: '' !important;
        position: absolute !important;
        inset-block: 18% !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 2px !important;
        height: auto !important;
        background: linear-gradient(180deg, transparent, var(--gold-300), transparent) !important;
        opacity: .62;
        transform: scaleY(.2);
        transform-origin: center;
        transition: transform .7s cubic-bezier(.16,1,.3,1) .1s, opacity .5s ease;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle.mp-in::before {
        transform: scaleY(1);
        opacity: .9;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-icon {
        grid-area: icon !important;
        display: grid !important;
        place-items: center;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        border: 1px solid rgba(231,200,143,.22);
        border-radius: 50%;
        background: radial-gradient(circle at 48% 36%, rgba(231,200,143,.12), rgba(8,12,20,.44));
        color: var(--gold-200) !important;
        box-shadow: inset 0 0 0 5px rgba(224,149,75,.025);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle.mp-in .mn-aboutv3__principle-icon {
        animation: mp-about-icon-settle .7s cubic-bezier(.2,.95,.28,1.2) .12s both;
    }

    @keyframes mp-about-icon-settle {
        0% { transform: scale(.62) rotate(-18deg); opacity: 0; }
        70% { transform: scale(1.05) rotate(2deg); opacity: 1; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-title {
        grid-area: title !important;
        margin: 0 !important;
        font-size: clamp(15px,4vw,17px) !important;
        color: var(--gold-100) !important;
        text-align: start !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-desc {
        grid-area: desc !important;
        margin: 0 !important;
        max-width: none !important;
        font-size: clamp(11.5px,3.15vw,12.8px) !important;
        line-height: 1.75 !important;
        color: rgba(233,231,223,.54) !important;
        text-align: start !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote {
        position: relative;
        padding: 30px 22px 23px !important;
        border: 1px solid rgba(231,200,143,.13) !important;
        border-radius: 20px !important;
        background:
            radial-gradient(140px 100px at 94% 8%, rgba(224,149,75,.10), transparent 72%),
            linear-gradient(150deg, rgba(19,27,44,.78), rgba(7,11,19,.91)) !important;
        box-shadow: 0 24px 60px -42px rgba(0,0,0,.98) !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote-mark {
        position: absolute;
        top: 17px;
        inset-inline-end: 18px;
        margin: 0 !important;
        font-size: 58px !important;
        opacity: .20 !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote.mp-in::after {
        animation: mp-sheen 1.45s cubic-bezier(.16,1,.3,1) .28s 1 !important;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__foot {
        margin-top: -4px;
    }

    /* ---------------------------------------------------------------------
       05 · CAPABILITIES — denser, more premium, with local choreography.
       --------------------------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-capabilities-v2 {
        padding-block-start: clamp(56px, 13vw, 76px) !important;
        padding-block-end: clamp(72px, 18vw, 100px) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__scrim {
        background:
            radial-gradient(68% 34% at 50% 4%, rgba(224,149,75,.075), transparent 75%),
            linear-gradient(180deg, rgba(5,7,12,.44), rgba(5,7,12,.88)) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__head {
        position: relative;
        margin-bottom: clamp(24px,6vw,32px) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__heading {
        font-size: clamp(1.86rem,8.46vw,2.58rem) !important;
        line-height: 1.17 !important;
        letter-spacing: -.014em;
        text-shadow: 0 16px 42px rgba(0,0,0,.42);
    }

    .mn-home #mn-root.mn-native .mn-capv2__lead {
        max-width: 35ch !important;
        font-size: clamp(13.8px,3.7vw,15px) !important;
        line-height: 1.92 !important;
        color: rgba(233,231,223,.68) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__columns {
        gap: 13px !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col {
        position: relative;
        padding: 18px 16px 16px !important;
        border: 1px solid rgba(233,231,223,.095) !important;
        border-radius: 19px !important;
        background:
            radial-gradient(150px 110px at 100% 0%, color-mix(in srgb, var(--cap-accent, #C77E3A) 10%, transparent), transparent 74%),
            linear-gradient(148deg, rgba(19,27,44,.78), rgba(7,11,19,.90)) !important;
        box-shadow: 0 22px 52px -42px rgba(0,0,0,.96);
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col::before {
        inset-block: 13% !important;
        width: 2px !important;
        opacity: .86;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col::after {
        content: '';
        position: absolute;
        inset: -30%;
        pointer-events: none;
        background: linear-gradient(112deg, transparent 42%, rgba(255,243,214,.08) 49%, transparent 56%);
        transform: translateX(-120%);
        opacity: 0;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in::after {
        animation: mp-cap-card-scan 1.25s cubic-bezier(.16,1,.3,1) .34s 1 both;
    }

    @keyframes mp-cap-card-scan {
        0% { transform: translateX(-120%); opacity: 0; }
        18%,76% { opacity: 1; }
        100% { transform: translateX(120%); opacity: 0; }
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-head {
        grid-template-columns: 62px minmax(0,1fr) !important;
        column-gap: 14px !important;
        padding-bottom: 14px !important;
        margin-bottom: 8px !important;
        border-bottom-color: rgba(233,231,223,.075) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-medal {
        width: 62px !important;
        height: 62px !important;
        border-color: color-mix(in srgb, var(--cap-accent, #C77E3A) 40%, transparent) !important;
        background:
            radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--cap-accent, #C77E3A) 15%, rgba(20,28,46,.92)), rgba(7,11,19,.96)) !important;
        box-shadow: inset 0 0 0 5px rgba(233,231,223,.018), 0 0 24px -14px var(--cap-accent, #C77E3A);
    }

    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__col-medal {
        animation: mp-cap-medal-settle .72s cubic-bezier(.2,.95,.28,1.18) .14s both;
    }

    @keyframes mp-cap-medal-settle {
        0% { transform: scale(.68) rotate(-15deg); opacity: 0; }
        72% { transform: scale(1.04) rotate(2deg); opacity: 1; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-medal-img {
        width: 72% !important;
        height: 72% !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-id {
        font-size: 9.8px !important;
        letter-spacing: .16em !important;
        opacity: .86;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-title {
        margin-top: 3px !important;
        font-size: clamp(19px,5.1vw,22px) !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__list {
        gap: 0 !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item {
        position: relative;
        min-height: 43px !important;
        padding: 8px 8px !important;
        border-radius: 9px !important;
        border-bottom: 1px solid rgba(233,231,223,.055);
        background: transparent !important;
        color: rgba(233,231,223,.68) !important;
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item:last-child {
        border-bottom: 0;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item i {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: color-mix(in srgb, var(--cap-accent, #C77E3A) 9%, transparent);
        font-size: 13px !important;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item::after {
        opacity: .55;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item {
        animation: mp-cap-row-in .5s cubic-bezier(.16,1,.3,1) both;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(1) { animation-delay: .20s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(2) { animation-delay: .25s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(3) { animation-delay: .30s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(4) { animation-delay: .35s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(5) { animation-delay: .40s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(6) { animation-delay: .45s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(n+7) { animation-delay: .50s; }

    @keyframes mp-cap-row-in {
        from { opacity: 0; transform: translate3d(12px,0,0); }
        to { opacity: 1; transform: none; }
    }

    .mn-home #mn-root.mn-native .mn-capv2__foot {
        margin-top: 24px !important;
    }

    /* ---------------------------------------------------------------------
       07 · PATH — real zig-zag geometry, measured from the actual markers.
       --------------------------------------------------------------------- */
    .mn-home #mn-root.mn-native .mn-pathv4 {
        padding-block-start: clamp(58px, 14vw, 78px) !important;
        padding-block-end: clamp(74px, 18vw, 100px) !important;
        overflow: clip !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head {
        position: relative;
        margin: 0 auto clamp(30px, 8vw, 42px) !important;
        max-width: 430px;
        text-align: center !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__head h2 {
        padding-bottom: 23px !important;
        font-size: clamp(1.82rem,8.21vw,2.5rem) !important;
        line-height: 1.18 !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__route {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 500px;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 8px 0 12px !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Kill every older straight-spine generation. The only route on phone is
       the measured SVG injected by mn-mobile.js v20. */
    .mn-home #mn-root.mn-native .mn-pathv4__route::before {
        content: none !important;
        display: none !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__svg,
    .mn-home #mn-root.mn-native .mn-pathv4__needle {
        display: none !important;
    }

    .mn-home #mn-root.mn-native .mp-route-svg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: none;
        z-index: 0;
    }

    .mn-home #mn-root.mn-native .mp-route-base {
        fill: none;
        stroke: rgba(231,200,143,.13);
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .mn-home #mn-root.mn-native .mp-route-trace {
        fill: none;
        stroke: url(#mp-route-grad);
        stroke-width: 2.15;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 0 5px rgba(224,149,75,.48));
    }

    .mn-home #mn-root.mn-native .mp-route-head {
        fill: #F3E2C0;
        stroke: rgba(224,149,75,.82);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 0 7px rgba(224,149,75,.96));
        opacity: 0;
        transition: opacity .22s ease;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        display: block !important;
        width: 100% !important;
        min-height: clamp(150px, 39vw, 178px);
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        z-index: 1;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__marker {
        position: absolute !important;
        top: 22px !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 4;
        display: grid !important;
        place-items: center;
        width: clamp(46px,12vw,52px) !important;
        height: clamp(46px,12vw,52px) !important;
        margin: 0 !important;
        border: 1px solid rgba(231,200,143,.32) !important;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 34%, rgba(29,38,58,.98), rgba(6,9,16,1) 72%) !important;
        box-shadow: 0 0 0 6px rgba(5,7,12,.92), 0 10px 26px -18px rgba(0,0,0,.96) !important;
        opacity: .62;
        transform: translateX(-50%) scale(.82) !important;
        transition:
            opacity .45s ease,
            transform .58s cubic-bezier(.2,.95,.28,1.15),
            border-color .45s ease,
            box-shadow .45s ease !important;
    }

    /* Physical placement is intentional: the route is a visual plot, not a
       reading-direction control. First waypoint starts toward the RTL/right. */
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd) .mn-pathv4__marker {
        left: 74% !important;
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even) .mn-pathv4__marker {
        left: 26% !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached .mn-pathv4__marker {
        opacity: 1;
        transform: translateX(-50%) scale(1) !important;
        border-color: var(--gold-200) !important;
        box-shadow:
            0 0 0 6px rgba(5,7,12,.92),
            0 0 0 7px rgba(224,149,75,.09),
            0 0 24px rgba(224,149,75,.30) !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__marker b {
        font-size: 13px !important;
        letter-spacing: .06em;
        color: var(--gold-100) !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: min(58%, 245px) !important;
        max-width: none !important;
        min-height: 112px;
        margin: 0 !important;
        padding: 15px 15px 14px !important;
        border: 1px solid rgba(233,231,223,.075);
        border-radius: 15px;
        background:
            radial-gradient(110px 80px at 100% 0%, rgba(224,149,75,.055), transparent 72%),
            linear-gradient(145deg, rgba(17,24,39,.72), rgba(7,11,18,.79));
        box-shadow: 0 18px 40px -34px rgba(0,0,0,.96);
        text-align: start !important;
        opacity: .34 !important;
        transform: translateY(10px) scale(.985) !important;
        transition:
            opacity .52s cubic-bezier(.16,1,.3,1),
            transform .58s cubic-bezier(.16,1,.3,1),
            border-color .45s ease,
            background .45s ease !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd) .mn-pathv4__copy {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even) .mn-pathv4__copy {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Connector from the card edge to its plotted marker. */
    .mn-home #mn-root.mn-native .mn-pathv4__point::after {
        content: '' !important;
        position: absolute;
        top: 47px;
        height: 1px;
        border: 0 !important;
        background: linear-gradient(90deg, rgba(224,149,75,.06), rgba(224,149,75,.34));
        opacity: .28;
        transform: scaleX(.55);
        transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
        z-index: 2;
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd)::after {
        left: 58%;
        width: 16%;
        transform-origin: left center;
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even)::after {
        left: 26%;
        width: 16%;
        transform-origin: right center;
        background: linear-gradient(90deg, rgba(224,149,75,.34), rgba(224,149,75,.06));
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached::after {
        opacity: .9;
        transform: scaleX(1);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point.is-reached .mn-pathv4__copy {
        opacity: 1 !important;
        transform: none !important;
        border-color: rgba(231,200,143,.13);
        background:
            radial-gradient(120px 84px at 100% 0%, rgba(224,149,75,.08), transparent 72%),
            linear-gradient(145deg, rgba(19,27,44,.80), rgba(7,11,18,.88));
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy span {
        display: block !important;
        margin-bottom: 5px !important;
        font-family: var(--font-en);
        font-size: 8px !important;
        letter-spacing: .16em !important;
        color: rgba(231,200,143,.46) !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy h3 {
        margin: 0 0 5px !important;
        font-size: clamp(15px,4.1vw,17px) !important;
        line-height: 1.3 !important;
        color: var(--gold-200) !important;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy p {
        display: block !important;
        margin: 0 !important;
        font-size: clamp(10.8px,2.85vw,12px) !important;
        line-height: 1.68 !important;
        color: rgba(233,231,223,.50) !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }
}

@media (max-width: 390px) {
    .mn-home #mn-root.mn-native .mn-pathv4__copy {
        width: 60% !important;
        padding: 13px 12px !important;
    }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd) .mn-pathv4__marker { left: 76% !important; }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even) .mn-pathv4__marker { left: 24% !important; }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd)::after { left: 60%; width: 16%; }
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even)::after { left: 24%; width: 16%; }
}



/* ============================================================================
   §15 · PHONE MOTION — AMPLIFIED  (v21)
   ----------------------------------------------------------------------------
   The phone route used to carry a thinner version of the desktop motion: one
   22px slide for every block, and that was it. The homepage is the piece most
   visitors meet on a phone first, so the motion is now the richer of the two,
   not the reduced one.

   What this layer adds, all of it composited (opacity / transform / filter,
   nothing that triggers layout):

     · a deeper reveal — lift, settle, and a blur that resolves
     · masked variants: a wipe that uncovers the element rather than fading it
     · word-by-word entry for the hero headline
     · a full entrance choreography for the chapter rail (.mn-slab)
     · standing motion that never stops: the pip breathes, the plate glints,
       the section stills drift
     · scroll-linked depth via --mp-p, published per plate by mn-mobile.js

   No prefers-reduced-motion escape hatch anywhere in here: on this site the
   motion IS the composition, and it runs on every device.
   ========================================================================== */
@media (max-width: 820px) {

    /* ---------------------------------------------------------------- reveal */
    /* Deeper than the old 22px nudge, and it resolves out of a blur so the
       element reads as coming into focus rather than sliding into place. */
    .mn-home #mn-root.mn-native [data-mp-reveal] {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(.975);
        filter: blur(7px);
        transition:
            opacity .95s var(--mp-ease-out),
            transform 1.05s var(--mp-ease-out),
            filter .8s var(--mp-ease-out);
        will-change: transform, opacity, filter;
    }

    .mn-home #mn-root.mn-native [data-mp-reveal].mp-in {
        opacity: 1;
        transform: none;
        filter: blur(0);
        will-change: auto;
    }

    .mn-home #mn-root.mn-native [data-mp-reveal="right"] {
        transform: translate3d(38px, 14px, 0) scale(.975) rotate(.6deg);
    }

    .mn-home #mn-root.mn-native [data-mp-reveal="left"] {
        transform: translate3d(-38px, 14px, 0) scale(.975) rotate(-.6deg);
    }

    .mn-home #mn-root.mn-native [data-mp-reveal="scale"] {
        transform: scale(.9);
        filter: blur(10px);
    }

    /* A wipe rather than a fade: the element is fully painted the whole time
       and a clip edge travels across it, which is the more expensive-looking
       of the two and costs exactly the same. */
    .mn-home #mn-root.mn-native [data-mp-reveal="mask"] {
        opacity: 1;
        filter: none;
        transform: translate3d(0, 20px, 0);
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path 1.15s var(--mp-ease-out),
            transform 1.15s var(--mp-ease-out);
    }

    .mn-home #mn-root.mn-native [data-mp-reveal="mask"].mp-in {
        clip-path: inset(0 0 0 0);
        transform: none;
    }

    /* A card that arrives on a slight tilt and levels out. */
    .mn-home #mn-root.mn-native [data-mp-reveal="tilt"] {
        transform: perspective(900px) rotateX(9deg) translate3d(0, 40px, 0) scale(.96);
        transform-origin: 50% 100%;
        filter: blur(8px);
    }

    /* Nine stagger steps instead of five — the rails and the card rows both
       need more than the old ladder could give them. */
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d6 { transition-delay: .48s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d7 { transition-delay: .56s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d8 { transition-delay: .64s; }
    .mn-home #mn-root.mn-native [data-mp-reveal].mp-d9 { transition-delay: .72s; }

    /* ------------------------------------------------- hero, word by word */
    /* mn_words() already wraps every headline word in .mn-w; on phone that
       wrapping was decorative only. Each word now rises out of its own mask,
       one after the next, and the gold line's words carry a brief flare as
       they land. --mp-wi is the word index, set by mn-mobile.js. */
    .mn-home #mn-root.mn-native .mn-orient__h1 .mn-w {
        display: inline-block;
        opacity: 0;
        transform: translate3d(0, .5em, 0) rotate(1.4deg);
        transition:
            opacity .72s var(--mp-ease-out),
            transform .9s var(--mp-ease-out);
        transition-delay: calc(var(--mp-wi, 0) * 65ms + 120ms);
    }

    .mn-home #mn-root.mn-native .mn-orient__inner.is-in .mn-orient__h1 .mn-w,
    .mn-home #mn-root.mn-native .mn-p-orient.mn-section-visible .mn-orient__h1 .mn-w,
    .mn-home #mn-root.mn-native .mn-words-in .mn-orient__h1 .mn-w {
        opacity: 1;
        transform: none;
    }

    /* The gold line keeps its scan, and picks up a slow float so the hero is
       never completely still. */
    .mn-home #mn-root.mn-native .mn-orient__h1-line--gold {
        animation:
            mp-hero-scan 6.8s cubic-bezier(.45, 0, .55, 1) infinite,
            mp-hero-float 9s ease-in-out infinite !important;
    }

    @keyframes mp-hero-float {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50%      { transform: translate3d(0, -4px, 0); }
    }

    /* The hero's own light source breathes. */
    .mn-home #mn-root.mn-native .mn-orient__inner::before {
        animation: mp-hero-breathe 7.5s ease-in-out infinite;
    }

    @keyframes mp-hero-breathe {
        0%, 100% { opacity: .72; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.07); }
    }

    /* The eyebrow capsule catches a slow gold sweep. */
    .mn-home #mn-root.mn-native .mn-orient__eyebrow {
        position: relative;
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mn-orient__eyebrow::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg,
                transparent 40%,
                rgba(255, 243, 214, .22) 50%,
                transparent 60%);
        transform: translateX(-120%);
        animation: mp-capsule-sweep 5.4s var(--mp-ease-out) infinite;
    }

    @keyframes mp-capsule-sweep {
        0%, 62% { transform: translateX(-120%); }
        100%    { transform: translateX(120%); }
    }

    /* --------------------------------------------- the chapter rail enters */
    /* The number plate is the chapter's signature, so it gets a real
       entrance: it drops in on its edge, levels out, and flashes its gold
       once as it settles. */
    .mn-home #mn-root.mn-native .mn-slab__id {
        opacity: 0;
        transform: perspective(500px) rotateX(-72deg) translateY(-6px);
        transform-origin: 50% 0;
        transition:
            opacity .5s var(--mp-ease-out),
            transform .85s var(--mp-ease-out);
    }

    .mn-home #mn-root.mn-native .mn-slab.mp-in .mn-slab__id,
    .mn-home #mn-root.mn-native .is-in .mn-slab__id,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-slab__id {
        opacity: 1;
        transform: none;
        animation: mp-plate-flash 1.6s var(--mp-ease-out) .45s 1;
    }

    @keyframes mp-plate-flash {
        0%   { box-shadow: inset 0 1px 0 rgba(243, 226, 192, .18), 0 0 0 0 rgba(224, 149, 75, .55); }
        45%  { box-shadow: inset 0 1px 0 rgba(243, 226, 192, .55), 0 0 26px 3px rgba(224, 149, 75, .38); }
        100% { box-shadow: inset 0 1px 0 rgba(243, 226, 192, .18), 0 8px 22px -16px rgba(224, 149, 75, .9); }
    }

    /* The chapter name settles out of a wide tracking. */
    .mn-home #mn-root.mn-native .mn-slab__name {
        opacity: 0;
        letter-spacing: .52em;
        transition:
            opacity .7s var(--mp-ease-out) .16s,
            letter-spacing .95s var(--mp-ease-out) .16s;
    }

    .mn-home #mn-root.mn-native .mn-slab.mp-in .mn-slab__name,
    .mn-home #mn-root.mn-native .is-in .mn-slab__name,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-slab__name {
        opacity: 1;
        letter-spacing: .22em;
    }

    /* --------------------------------------------------- the pip breathes */
    .mn-home #mn-root.mn-native .mn-eyebrow__pip {
        position: relative;
        animation: mp-pip-beat 4.6s ease-in-out infinite;
    }

    /* The expanding ring is gone: it ran on all seven kickers at once, and
       at 5px across it read as flicker rather than as a signal. The pip
       keeps a slow beat, which is enough to say the label is live. */
    @keyframes mp-pip-beat {
        0%, 100% { transform: rotate(45deg) scale(1); opacity: .8; }
        50%      { transform: rotate(45deg) scale(1.12); opacity: 1; }
    }

    /* ------------------------------------------- the section stills drift */
    /* A very slow ken-burns under every chapter, on top of the existing
       scroll parallax (--mp-par). Two transforms on one element would fight,
       so the drift is an animation on the image and the parallax stays a
       custom property the animation reads. */
    /* The standing ken-burns was removed: a 26s scale on a viewport-sized
       bitmap repaints the biggest layer on the page continuously, and it sits
       behind a scrim and the copy, so the 9% size change never actually
       reads. The scroll parallax (--mp-par) already gives these stills their
       depth, and it only costs a transform while the finger is moving. */
    .mn-home #mn-root.mn-native .mn-plate > .mn-bg img {
        transform: translate3d(0, var(--mp-par, 0px), 0) scale(1.06);
    }

    /* ------------------------------------------------------- work strip */
    /* The card itself is off limits: .mn-frame's transform is the rail's
       own "hot card" emphasis (scale .965 → 1), so an idle float here would
       overwrite it. The ghost numeral carries the motion instead — it is
       purely decorative and nothing else animates it. */
    /* The ghost numeral's drift was dropped: it is a hairline-stroked
       outline at 20% opacity behind the poster, so a 9px rise on a card the
       visitor is swiping past was never going to register. */

    /* --------------------------------------------------------- the dividers */
    .mn-home #mn-root.mn-native .mn-divider {
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 1.05s var(--mp-ease-out) .2s;
    }

    .mn-home #mn-root.mn-native .is-in .mn-divider,
    .mn-home #mn-root.mn-native .mp-in .mn-divider,
    .mn-home #mn-root.mn-native .mn-section-visible .mn-divider,
    .mn-home #mn-root.mn-native .mn-divider.mp-in {
        transform: scaleX(1);
    }

    /* The divider diamond no longer spins — at 5px a full rotation is
       indistinguishable from a static square, so it was pure cost. */

    /* --------------------------------------------------------------- CTAs */
    /* The primary buttons carry a standing gold sweep, so the call to action
       is the brightest moving thing on the screen. */
    .mn-home #mn-root.mn-native .mn-btn--gold,
    .mn-home #mn-root.mn-native .mn-arrivalv4__cta {
        position: relative;
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mn-btn--gold::after,
    .mn-home #mn-root.mn-native .mn-arrivalv4__cta::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(100deg,
                transparent 38%,
                rgba(255, 255, 255, .34) 50%,
                transparent 62%);
        transform: translateX(-130%);
        animation: mp-cta-sweep 4.2s var(--mp-ease-out) infinite;
    }

    @keyframes mp-cta-sweep {
        0%, 55% { transform: translateX(-130%); }
        100%    { transform: translateX(130%); }
    }

    /* ------------------------------------------------ scroll-linked depth */
    /* --mp-p runs 0 → 1 across a chapter's pass through the viewport
       (published by mn-mobile.js). The copy column rides it very slightly,
       which reads as depth against the drifting still behind it. */
    .mn-home #mn-root.mn-native .mn-aboutv3__manifesto,
    .mn-home #mn-root.mn-native .mn-craftv4__copy,
    .mn-home #mn-root.mn-native .mn-arrivalv4__copy,
    .mn-home #mn-root.mn-native .mn-capv2__head {
        transform: translate3d(0, calc((var(--mp-p, .5) - .5) * -22px), 0);
    }
}


/* ============================================================================
   §16 · PHONE — SCROLL-PAINTED HEADINGS & CHAPTER CHOREOGRAPHY  (v22)
   ----------------------------------------------------------------------------
   Two things this layer adds on top of §15.

   1. Headings take their colour from the scroll.
      --mp-h is a 0-100 number written per heading by mn-mobile.js: 0 while the
      heading is still low on the screen, 100 once it has climbed into the
      reading band. It positions a gold-to-bone gradient clipped to the glyphs,
      so the heading dresses itself in gold on the way down and gives it back
      on the way up. A position, not a played-once animation — which is what
      makes it reversible.

   2. The three chapters that were the flattest on a phone (BEARINGS, ABOUT,
      CAPABILITIES) get standing motion on top of the entrances they already
      had: instruments that keep turning, marks that keep breathing, badges
      that hold a live ring.
   ========================================================================== */
@media (max-width: 820px) {

    /* ------------------------------------------------------ 1 · the paint */
    .mn-home #mn-root.mn-native .mp-paint {
        /* Two thirds bone, one third gold, on a track 2.6x the text width.
           At --mp-h:0 the gold sits off the leading edge; at 100 it has swept
           the whole line. */
        background-image: linear-gradient(to left,
                var(--gold-100) 0%,
                var(--gold-300) 14%,
                var(--gold-200) 26%,
                var(--bone) 42%,
                var(--bone) 100%);
        background-size: 260% 100%;
        /* The gradient is `to left`, so its gold end sits on the RIGHT of the
           image — which is where an Arabic line starts. --mp-h therefore runs
           the window from 0% (all bone) to 100% (all gold) and the colour
           sweeps in from the right, following the reading direction. */
        background-position: calc(var(--mp-h, 0) * 1%) 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        /* A short transition on top of the per-frame writes smooths the
           scroll jitter without lagging behind the finger. */
        transition: background-position .18s linear;
        /* text-shadow paints behind glyphs that are now transparent, so it
           would show through as a blur. The lift comes from a drop-shadow,
           which follows the painted alpha instead. */
        text-shadow: none;
        filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .5));
    }

    /* The gold-line hero heading paints itself with its own scan animation
       and must not be double-clipped. */
    .mn-home #mn-root.mn-native .mn-orient__h1-line--gold {
        background-position: initial;
    }

    /* Any <strong>/<em> inside a painted heading is already the accent word;
       clipping it twice would flatten it back to the gradient, so it opts
       out and keeps its own colour. */
    .mn-home #mn-root.mn-native .mp-paint strong,
    .mn-home #mn-root.mn-native .mp-paint em,
    .mn-home #mn-root.mn-native .mp-paint .mn-aboutv3__title-gold {
        -webkit-text-fill-color: currentColor;
        color: var(--gold-200);
    }

    /* ------------------------------------------------- 2a · BEARINGS ---- */
    /* The hub keeps its instrument alive: the dial breathes and the halo
       turns, so the constellation is never a static diagram. */
    .mn-home #mn-root.mn-native .mn-bearings-v2__hub::before {
        animation: mp-hub-breathe 5.6s ease-in-out infinite;
    }

    @keyframes mp-hub-breathe {
        0%, 100% { opacity: .55; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.08); }
    }

    /* Each bearing card holds a live badge — a gold arc tracking its rim,
       one card after another, so the eye is walked down the three. */
    .mn-home #mn-root.mn-native .mn-bp__badge {
        overflow: visible;
    }

    .mn-home #mn-root.mn-native .mn-bp__badge::after {
        content: '';
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-top-color: var(--bearing-accent, var(--gold-300));
        border-right-color: rgba(224, 149, 75, .28);
        animation: mp-badge-track 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
        pointer-events: none;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"] .mn-bp__badge::after { animation-delay: -1.2s; }
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] .mn-bp__badge::after { animation-delay: -2.4s; }

    @keyframes mp-badge-track {
        0%   { transform: rotate(0deg);   opacity: .35; }
        50%  { transform: rotate(180deg); opacity: 1; }
        100% { transform: rotate(360deg); opacity: .35; }
    }

    /* The badge artwork lifts and settles rather than sitting flat. */
    .mn-home #mn-root.mn-native .mn-bp__badge-img {
        animation: mp-badge-lift 6.4s ease-in-out infinite;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"] .mn-bp__badge-img { animation-delay: -2.1s; }
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] .mn-bp__badge-img { animation-delay: -4.2s; }

    @keyframes mp-badge-lift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50%      { transform: translate3d(0, -4px, 0) scale(1.045); }
    }

    /* The bearing mark on the leading edge pulses once the card has landed,
       so the accent colour keeps declaring which direction this is. */
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-bearings__inner.is-in .mn-bearings-v2__panel::before {
        animation: mp-bearing-mark 4.8s ease-in-out 1.3s infinite;
    }

    /* Opacity only — the drop-shadow this used to pulse was another
       per-frame blur, on a 2px bar. */
    @keyframes mp-bearing-mark {
        0%, 100% { opacity: .55; }
        50%      { opacity: 1; }
    }

    /* A slow gold wash crossing each card, staggered down the stack. */
    .mn-home #mn-root.mn-native .mn-bearings-v2__panel {
        transition: border-color .5s ease, box-shadow .5s ease !important;
    }

    /* The standing card glow is gone. Animating box-shadow and border-colour
       forces a paint of the whole card on every frame, and six of them were
       running at once for a rim brightening most people never catch. The
       cards keep their entrance, their bearing mark and their live badge. */

    /* The three dots under the chapter title walk, left to right. */
    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i {
        animation: mp-dots-walk 2.4s ease-in-out infinite;
    }

    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i:nth-child(2) { animation-delay: .2s; }
    .mn-home #mn-root.mn-native .mn-bearings-v2__dots i:nth-child(3) { animation-delay: .4s; }

    @keyframes mp-dots-walk {
        0%, 100% { transform: scale(1);    opacity: .4; }
        45%      { transform: scale(1.55); opacity: 1; }
    }

    /* ---------------------------------------------------- 2b · ABOUT ---- */
    /* The instrument field behind the chapter: arcs turning at different
       rates, the halo breathing, the ghost numeral drifting. */
    .mn-home #mn-root.mn-native .mn-aboutv3__field {
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: .5;
        pointer-events: none;
        overflow: hidden;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__halo {
        animation: mp-hub-breathe 8s ease-in-out infinite;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__arc--1 { animation: mp-arc-turn 34s linear infinite; }
    .mn-home #mn-root.mn-native .mn-aboutv3__arc--2 { animation: mp-arc-turn 52s linear reverse infinite; }

    @keyframes mp-arc-turn {
        to { transform: rotate(360deg); }
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__ghost {
        animation: mp-ghost-drift 14s ease-in-out infinite;
    }

    @keyframes mp-ghost-drift {
        0%, 100% { transform: translate3d(0, 0, 0);    opacity: .55; }
        50%      { transform: translate3d(0, -8px, 0); opacity: .8; }
    }

    /* The principle icons: they already pop on entry. Now they keep a slow
       tilt-and-glow so the row reads as three live instruments, each on its
       own phase. */
    .mn-home #mn-root.mn-native .mn-aboutv3__principle.mp-in .mn-aboutv3__principle-icon {
        animation: mp-principle-idle 6.2s ease-in-out 1s infinite;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle:nth-child(2).mp-in .mn-aboutv3__principle-icon { animation-delay: 2.1s; }
    .mn-home #mn-root.mn-native .mn-aboutv3__principle:nth-child(3).mp-in .mn-aboutv3__principle-icon { animation-delay: 3.2s; }

    /* Transform only: the previous version animated a drop-shadow, i.e. a
       blur recomputed every frame on three elements at once. */
    @keyframes mp-principle-idle {
        0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
        50%      { transform: translate3d(0, -3px, 0) rotate(-2.5deg); }
    }

    /* The quote rule draws itself in, then keeps a travelling highlight. */
    .mn-home #mn-root.mn-native .mn-aboutv3__quote.mp-in .mn-aboutv3__quote-rule {
        animation: mp-quote-rule 5.4s cubic-bezier(.45, 0, .55, 1) 1.1s infinite;
    }

    @keyframes mp-quote-rule {
        0%, 100% { opacity: .5; }
        50%      { opacity: 1; }
    }

    /* --------------------------------------------- 2c · CAPABILITIES ---- */
    /* The medal keeps turning on its axis after the column lands — a slow
       3D roll rather than a spin, so the artwork stays readable. */
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__col-medal-img {
        animation: mp-medal-roll 13s cubic-bezier(.45, 0, .55, 1) 1.2s infinite;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col:nth-child(2).mp-in .mn-capv2__col-medal-img { animation-delay: 2.4s; }
    .mn-home #mn-root.mn-native .mn-capv2__col:nth-child(3).mp-in .mn-capv2__col-medal-img { animation-delay: 3.9s; }

    @keyframes mp-medal-roll {
        0%, 100% { transform: perspective(700px) rotateY(0deg) scale(1); }
        50%      { transform: perspective(700px) rotateY(12deg) scale(1.03); }
    }

    /* Each service row keeps a gold pip that brightens in sequence, which
       gives the list a heartbeat instead of a static bullet column. */
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item i {
        animation: mp-item-pip 3.8s ease-in-out infinite;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(2) i { animation-delay: .18s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(3) i { animation-delay: .36s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(4) i { animation-delay: .54s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(5) i { animation-delay: .72s; }
    .mn-home #mn-root.mn-native .mn-capv2__col.mp-in .mn-capv2__item:nth-child(n+6) i { animation-delay: .9s; }

    @keyframes mp-item-pip {
        0%, 100% { opacity: .55; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.18); }
    }

}


/* ============================================================================
   §17 · THE MERGE  (v23)
   ----------------------------------------------------------------------------
   The parts of the «الحقل» concept that earned their place, brought into the
   live phone composition. Nothing here needs a new field in site_data.json —
   the medallion key it reads was already there, it just had no control in the
   dashboard and was being dropped on every save.

   1  the bezel rail          — live bearing, one tick per chapter
   2  the travelling light    — one pool of light that moves as you read
   3  bearings                — new-mid hub, flatter cards, real disc badges
   4  work cards              — the concept's frame, minus nothing
   6  capabilities            — one direction open at a time
   8  the trust band          — edge to edge
   ========================================================================== */

/* ─────────────────────────────────────────── 1 · THE BEZEL RAIL ── */
/* Built by mn-mobile.js so it never ships to desktop. It reads as a compass
   bezel rather than a progress bar: a full read of the page turns it once. */
@media (max-width: 820px) {

  .mn-home .mp-bezel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 900;
    width: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block:
      calc(var(--mn-hd-h, 64px) + 10px + env(safe-area-inset-top, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px));
    border-inline-start: 1px solid rgba(233, 231, 223, .06);
    background: linear-gradient(180deg,
        rgba(7, 10, 18, .82),
        rgba(7, 10, 18, .38) 30%,
        rgba(7, 10, 18, .38) 70%,
        rgba(7, 10, 18, .82));
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    pointer-events: none;
  }

  /* The whole page shifts off the rail so nothing is ever printed under it. */
  .mn-home #mn-root.mn-native { padding-inline-end: 26px; }

  .mn-home .mp-bezel__deg {
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--gold-200);
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .mn-home .mp-bezel__track {
    position: relative;
    flex: 1;
    width: 1px;
    margin-block: 12px;
    background: rgba(233, 231, 223, .07);
  }

  .mn-home .mp-bezel__fill {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0%;
    background: linear-gradient(180deg, transparent, var(--gold-300));
  }

  .mn-home .mp-bezel__tick {
    position: absolute;
    inset-inline-start: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #0C111C;
    box-shadow: 0 0 0 1px rgba(233, 231, 223, .16);
    transition: background .45s var(--mp-ease-out), box-shadow .45s var(--mp-ease-out), transform .45s var(--mp-ease-out);
  }

  .mn-home .mp-bezel__tick.is-on {
    background: var(--gold-200);
    box-shadow: 0 0 0 1px rgba(224, 149, 75, .5), 0 0 10px rgba(224, 149, 75, .85);
    transform: scale(1.55);
  }

  .mn-home .mp-bezel__n {
    font-family: var(--font-en);
    font-size: 8px;
    letter-spacing: .18em;
    color: rgba(233, 231, 223, .4);
    writing-mode: vertical-rl;
  }

  /* The floating dock has to clear the rail. */
  .mn-home .mn-wa,
  .mn-home .mn-ig { inset-inline-end: calc(var(--beacon-edge) + 26px); }

  /* ───────────────────────────────────── 2 · THE TRAVELLING LIGHT ── */
  /* A single pool of light behind the document, parked somewhere different
     by every chapter. Nothing re-renders when it moves — only the centre of
     one gradient changes, which the compositor handles on its own layer. */
  /* The light is a fixed-size blob that is MOVED, not a full-screen gradient
     whose centre is re-authored. Animating the `at` position inside a
     radial-gradient repaints the entire layer every frame; a transform is
     handed to the compositor and costs nothing. It also means the travel
     transitions on its own — unregistered custom properties have no type, so
     a percentage inside a gradient would have jumped between chapters
     instead of gliding. */
  .mn-home .mp-light {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 92vw;
    height: 92vw;
    margin: -46vw 0 0 -46vw;
    pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(circle,
          rgba(224, 149, 75, .17) 0%,
          rgba(243, 226, 192, .09) 34%,
          rgba(224, 149, 75, .03) 58%,
          transparent 72%);
    transform: translate3d(var(--mp-lx, 50vw), var(--mp-ly, 42vh), 0);
    transition: transform 1.9s var(--mp-ease-out);
    animation: mp-light-breathe 9s ease-in-out infinite;
    will-change: transform;
  }

  @keyframes mp-light-breathe {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
  }

  /* The chapters sit above it; the section stills stay above that. */
  .mn-home #mn-root.mn-native { position: relative; z-index: 1; }

  /* ─────────────────────────────────────────────── 3 · BEARINGS ── */
  /* The hub is the new three-armed rose, which carries its own bezel and
     its own labels — so the CSS ring that used to sit around the old disc
     is gone rather than drawn on top of the artwork's own. */
  .mn-home #mn-root.mn-native .mn-bearings-v2__hub {
    width: clamp(158px, 44vw, 196px) !important;
  }

  .mn-home #mn-root.mn-native .mn-bearings-v2__hub::after { content: none; }

  .mn-home #mn-root.mn-native .mn-bearings-v2__hub::before {
    inset: -28%;
    background: radial-gradient(circle,
        rgba(224, 149, 75, .2) 0%,
        rgba(224, 149, 75, .06) 44%,
        transparent 72%);
  }

  /* The replacement artwork is a real RGBA cut-out, so `screen` is wrong
     for it now — screen would wash out the dark detail inside the disc that
     the alpha channel is already handling correctly. Normal compositing.

     --mp-spin is written by mn-mobile.js: the disc turns with the scroll,
     so the compass reads as being steered by the reader rather than
     spinning on a timer. Transform only, on its own layer. */
  .mn-home #mn-root.mn-native .mn-bearings-v2__hub-img {
    mix-blend-mode: normal;
    transform: rotate(var(--mp-spin, 0deg));
    transition: transform .18s linear;
    will-change: transform;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
  }

  /* The orbit ring would cut across the rose's own arms. */
  .mn-home #mn-root.mn-native .mn-bearings-v2__orbit { opacity: .35; }

  /* Flatter cards. 18px on a 3-inch-wide card reads soft, and this brand is
     an instrument brand — its corners should be cut, not rolled. */
  .mn-home #mn-root.mn-native .mn-bearings-v2__panel,
  .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="0"],
  .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="1"],
  .mn-home #mn-root.mn-native .mn-bearings-v2__panel[data-i="2"] {
    border-radius: 8px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  /* ── the direction badge ──
     It was a disc floating in a plain dark circle. It is an instrument now:
     a machined bezel, a dashed ring that tracks, and the artwork
     screen-blended so its gold sits in the housing rather than on it. */
  .mn-home #mn-root.mn-native .mn-bp__badge {
    width: 72px !important;
    background:
      radial-gradient(circle at 46% 32%, rgba(32, 41, 60, .96), rgba(6, 9, 15, .99)) !important;
    border: 1px solid color-mix(in srgb, var(--bearing-accent, var(--gold-300)) 34%, transparent) !important;
    box-shadow:
      0 0 0 4px rgba(7, 10, 17, .8),
      0 12px 26px -14px rgba(0, 0, 0, .96),
      inset 0 1px 0 rgba(243, 226, 192, .14) !important;
  }

  .mn-home #mn-root.mn-native .mn-bp__badge::before {
    inset: -6px;
    border: 1px dashed color-mix(in srgb, var(--bearing-accent, var(--gold-300)) 22%, transparent);
    animation-duration: 26s;
  }

  .mn-home #mn-root.mn-native .mn-bp__badge-img {
    width: 78% !important;
    height: 78% !important;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bearing-accent, var(--gold-300)) 55%, transparent));
  }

  /* The card's own accent edge picks up the direction colour properly. */
  .mn-home #mn-root.mn-native .mn-bearings-v2__panel::before {
    inset-block: 14px;
    width: 2px;
  }

  /* ───────────────────────────────────────────── 4 · WORK CARDS ── */
  /* The concept's frame: the outline numeral top-trailing, the play control
     centred, and the label block sitting on a scrim at the foot. The
     «عرض المشروع» link stays exactly where it was — it is the only thing on
     the card that goes anywhere. */
  /* The earlier phone rules for these two are written with !important, so
     these have to be as well — specificity and source order cannot outrank
     an important declaration. */
  .mn-home #mn-root.mn-native .mn-frame {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(233, 231, 223, .09) !important;
    background: #0B111C !important;
  }

  /* A hairline outline numeral, not a 56px ghost: at that size it competed
     with the project title for the same corner of the card. */
  .mn-home #mn-root.mn-native .mn-frame__index {
    position: absolute !important;
    top: 11px !important;
    inset-inline-end: 14px !important;
    inset-inline-start: auto !important;
    z-index: 3;
    font-family: var(--font-en);
    font-size: 34px !important;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0 !important;
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(233, 231, 223, .28);
    opacity: 1 !important;
  }

  .mn-home #mn-root.mn-native .mn-frame__scrim {
    background: linear-gradient(0deg,
        rgba(7, 10, 18, .95) 6%,
        rgba(7, 10, 18, .28) 48%,
        transparent 74%) !important;
  }

  /* The play control is the concept's — a glass disc with a champagne
     glyph, sitting above the poster rather than tucked in a corner. */
  .mn-home #mn-root.mn-native .work-media-play {
    top: 42% !important;
    inset-inline-start: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(231, 200, 143, .55) !important;
    background: rgba(7, 10, 18, .48) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .mn-home #mn-root.mn-native .mn-frame__details {
    inset-inline: 15px !important;
    bottom: 14px !important;
  }

  /* «عرض المشروع» — kept, and given the rule treatment the other quiet
     controls on the page use. */
  .mn-home #mn-root.mn-native .mn-frame__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(224, 149, 75, .4);
    font-family: var(--font-ar-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--gold-100) !important;
    opacity: 1 !important;
  }

  /* ── the swipe readout ──
     `01 / 05 ————— SWIPE`. One line, mono, with the bar carrying the
     position instead of a second row of dots. */
  .mn-home #mn-root.mn-native .mn-work__footer {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: min(100%, 470px);
    margin-inline: auto;
    padding-inline: clamp(20px, 5.6vw, 28px);
  }

  .mn-home #mn-root.mn-native .mn-work__count {
    display: inline-flex !important;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
    color: rgba(233, 231, 223, .45);
  }

  .mn-home #mn-root.mn-native .mn-work__count-cur { color: var(--gold-100); }

  .mn-home #mn-root.mn-native .mn-work__track {
    display: block !important;
    position: relative;
    flex: 1;
    height: 1px;
    background: rgba(233, 231, 223, .09);
  }

  .mn-home #mn-root.mn-native .mn-work__bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: linear-gradient(to left, var(--gold-200), var(--gold-300));
    transition: width .45s var(--mp-ease-out);
  }

  .mn-home #mn-root.mn-native .mn-work__all::after {
    content: none;
  }

  /* The dots said the same thing as the bar and the counter, three feet
     apart, and each one was a 44px hit target competing with the swipe. */
  .mn-home #mn-root.mn-native .mn-work__dots {
    display: none !important;
  }

  /* ────────────────────────────────────── 6 · CAPABILITIES ── */
  /* Three columns become three rows, one open at a time. The header is the
     control (mn-mobile.js gives it the role and the state); the list is the
     panel. Nothing in the markup moved. */
  .mn-home #mn-root.mn-native .mn-capv2__col.mp-acc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(233, 231, 223, .08) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .mn-home #mn-root.mn-native .mn-capv2__col.mp-acc:first-child {
    border-top: 1px solid rgba(233, 231, 223, .08) !important;
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-head {
    position: relative;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    margin: 0 !important;
    padding: 12px 0 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-medal {
    grid-row: 1;
    grid-column: 1;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-medal-img {
    width: 100% !important;
    height: 100% !important;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cap-accent, var(--gold-300)) 55%, transparent));
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-title {
    grid-row: 1;
    grid-column: 2;
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.3 !important;
    text-align: start !important;
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-id,
  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-en {
    display: none !important;
  }

  /* The open/closed sign, drawn on the header rather than added to markup. */
  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-head::before,
  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-head::after {
    content: '';
    grid-row: 1;
    grid-column: 3;
    width: 11px;
    height: 1px;
    justify-self: end;
    background: var(--cap-accent, var(--gold-300));
    transition: transform .45s var(--mp-ease-out), opacity .45s var(--mp-ease-out);
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__col-head::after {
    transform: rotate(90deg);
  }

  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__col-head::after {
    transform: rotate(0deg);
    opacity: .35;
  }

  /* The panel. max-height is the only thing that can transition here — the
     lists are authored, not measured, and 3–8 rows never approach 460px. */
  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__list {
    display: block !important;
    max-height: 0;
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    overflow: hidden;
    transition: max-height .55s var(--mp-ease-out);
  }

  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__list {
    max-height: 460px;
    padding-bottom: 18px !important;
  }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 56px 8px 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 13.5px !important;
    color: var(--bone-70) !important;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity .45s var(--mp-ease-out), transform .45s var(--mp-ease-out);
    animation: none !important;
  }

  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item {
    opacity: 1;
    transform: none;
  }

  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(1) { transition-delay: .06s }
  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(2) { transition-delay: .11s }
  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(3) { transition-delay: .16s }
  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(4) { transition-delay: .21s }
  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(5) { transition-delay: .26s }
  .mn-home #mn-root.mn-native .mp-acc.is-open .mn-capv2__item:nth-child(n+6) { transition-delay: .31s }

  .mn-home #mn-root.mn-native .mp-acc .mn-capv2__item i {
    flex: none;
    font-size: 14px;
    color: var(--cap-accent, var(--gold-300));
    animation: none !important;
  }

  .mn-home #mn-root.mn-native .mn-capv2__columns {
    display: block !important;
    margin-top: 6px;
  }
}

/* ───────────────────────────────── 5 · ABOUT — one after another ── */
/* The three principle cards used to arrive together from alternating sides.
   They now come in sequence, each settling before the next starts, which is
   what makes a row of cards read as considered rather than as a batch. */
@media (max-width: 820px) {

  .mn-home #mn-root.mn-native .mn-aboutv3__principle {
    transition-duration: .9s, 1s, .7s !important;
  }

  .mn-home #mn-root.mn-native .mn-aboutv3__principle:nth-child(1) { transition-delay: .05s !important; }
  .mn-home #mn-root.mn-native .mn-aboutv3__principle:nth-child(2) { transition-delay: .26s !important; }
  .mn-home #mn-root.mn-native .mn-aboutv3__principle:nth-child(3) { transition-delay: .47s !important; }

  /* A gentler arrival than the ±38px swing the shared variant uses: these
     are text cards, and a card that slides that far reads as a slide. */
  .mn-home #mn-root.mn-native .mn-aboutv3__principle[data-mp-reveal="left"] {
    transform: translate3d(-20px, 18px, 0) scale(.985) rotate(-.35deg);
  }

  .mn-home #mn-root.mn-native .mn-aboutv3__principle[data-mp-reveal="right"] {
    transform: translate3d(20px, 18px, 0) scale(.985) rotate(.35deg);
  }

  /* Each card's leading rule draws itself as the card lands. */
  .mn-home #mn-root.mn-native .mn-aboutv3__principle::before {
    transform-origin: top center;
    transition: transform .8s var(--mp-ease-out) .18s;
  }
}

/* ─────────────────────────────── 7 · ARRIVAL — the compass ── */
/* The animated dial from the desktop rules, restated for the phone layer so
   mn-mobile.css's later source order cannot flatten it back to a static mark. */
@media (max-width: 820px) {

  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass {
    display: inline-block;
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(10, 14, 24, .55);
    background:
      radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .5), transparent 62%),
      rgba(10, 14, 24, .07);
    overflow: hidden;
  }

  /* The bezel ticks and the hub, restated here for the same reason: the
     phone layer loads last, so anything it does not repeat is only as
     strong as whatever mn-ui.css happened to say first. */
  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass b {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 0;
    background:
      linear-gradient(to bottom, rgba(10, 14, 24, .75) 0 3px, transparent 3px) center top / 1.5px 100% no-repeat,
      linear-gradient(to top, rgba(10, 14, 24, .45) 0 3px, transparent 3px) center bottom / 1.5px 100% no-repeat,
      linear-gradient(to right, rgba(10, 14, 24, .45) 0 3px, transparent 3px) left center / 100% 1.5px no-repeat,
      linear-gradient(to left, rgba(10, 14, 24, .45) 0 3px, transparent 3px) right center / 100% 1.5px no-repeat;
  }

  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 15px;
    border-radius: 1px;
    background: linear-gradient(to bottom,
        #0A0E18 0%, #0A0E18 46%,
        rgba(10, 14, 24, .22) 54%, rgba(10, 14, 24, .22) 100%);
    transform-origin: 50% 50%;
  }

  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0A0E18;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
    transform: translate(-50%, -50%);
  }

  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass b {
    animation: mnCompassBezel 12s linear infinite;
  }

  .mn-home #mn-root.mn-native .mn-arrivalv4__cta-compass i {
    animation: mnCompassNeedle 5.2s cubic-bezier(.5, 0, .2, 1) infinite;
  }
}