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

/* ============================================================
   THREE DIRECTIONS — Magnetic North UI layer (self-sufficient)
   Global base + cinematic re-skin for every classic/inner page.
   This file no longer depends on the legacy style.css: the base
   tokens, resets and typography that inner pages actually use
   were folded in here, retuned to the Magnetic North palette.
   Load order (header.php): bootstrap.rtl → aos → mn-ui.css.
   ============================================================ */


/* ============================================================
   0 · TYPE SYSTEM
   ------------------------------------------------------------
   Three roles, and nothing shipped that no rule asks for.

     display  Alexandria 400-800  — the house heading face. Arabic and
              Latin cuts, five real weights, self-hosted WOFF2.
              A Nefel Adeti Qelew and Cairo stay loaded as the two
              alternates the dashboard can promote to first position
              (Settings → الخطوط). Whichever is chosen, the other two
              remain in the stack as metric fallbacks.
     body     Tajawal 400/500/700 — unchanged.
     mono     IBM Plex Mono 400/500 — HUD readouts, coordinates,
              waypoint numbers, every latin micro-label. Unchanged.

   Removed in this pass: Space Grotesk (only the admin shell asked for
   it, and it now uses the site faces), the retired Cairo/Grotesk cuts,
   and the dead references to Reem Kufi, IBM Plex Sans Arabic and
   Cormorant Garamond that never had an @font-face at all.

   All WOFF2, all self-hosted, all font-display:swap. Latin and Arabic
   are separate files with unicode-range so a Latin-only label never
   downloads the Arabic set and vice versa.
   ============================================================ */

/* ---- Display 1/3: Alexandria (default) ----
   Geometric, even-colour Arabic with a matching Latin. Five weights so
   headings get real bolds instead of a synthesised one. */
@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-arabic-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-arabic-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-arabic-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-arabic-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-arabic-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Alexandria";
    src: url("../fonts/alexandria/alexandria-v6-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Display 2/3: A Nefel Adeti Qelew (alternate) ----
   Shipped as WOFF2 (49KB) rather than the original 185KB TrueType. It is a
   single-weight design, so headings that ask for 700/800 get a synthesised
   bold — which is the look the site was originally built on. */
@font-face {
    font-family: "A Nefel Adeti Qelew";
    src: url("../fonts/A_Nefel_Adeti_Qelew.woff2") format("woff2"),
         url("../fonts/A_Nefel_Adeti_Qelew.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Display 3/3: Cairo (alternate) ---- */
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo/cairo-v31-arabic-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+8A0-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo/cairo-v31-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo/cairo-v31-arabic_latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo/cairo-v31-arabic_latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---- Body: Tajawal ---- */
@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/tajawal-v12-arabic_latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/tajawal-v12-arabic-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+600-6FF, U+750-77F, U+870-88E, U+890-891, U+8A0-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/tajawal-v12-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Tajawal";
    src: url("../fonts/tajawal/tajawal-v12-arabic_latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Mono: IBM Plex Mono (latin only — it never sets Arabic) ----
   NOTE: the family name here is a literal. It used to be written as
   `font-family: var(--font-en)`, which is invalid inside @font-face: the
   descriptor does not accept custom properties, so both faces were dropped
   by every parser and the mono readouts fell back to a system monospace. */
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   1 · DESIGN TOKENS  (plain :root so they apply with no data-theme)
   Retuned to the Magnetic North palette — navy #0A0E18 / gold #C77E3A.
   ============================================================ */
:root {
    /* fluid type scale (ported) */
    --font-size-hero: clamp(2rem, 5vw + 1rem, 4.5rem);
    --font-size-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
    --font-size-h2: clamp(1.75rem, 3vw + 1rem, 2.75rem);
    --font-size-h3: clamp(1.25rem, 2vw + 1rem, 1.75rem);
    --font-size-body: clamp(1rem, 1vw + 0.8rem, 1.125rem);

    /* gold */
    --gold-light: #E0954B;
    --gold: #C77E3A;
    --gold-deep: #A9853F;
    --gold-glow: rgba(203, 162, 99, .42);
    --grad-gold: linear-gradient(135deg, #C77E3A 0%, #E0954B 46%, #C77E3A 100%);

    /* ink + surfaces (Magnetic North, corrected) */
    --mn-ink: #E9E7DF;
    --mn-navy: #0A0E18;
    --bg: #0A0E18;
    --scroll-bg: #0A0E18;
    --bg-alt: #0C1220;
    --bg-card: rgba(18, 24, 38, .55);
    --bg-card-deep: #0B111C;
    --navy: #07101E;
    --navy-deep: #030811;
    --royal: #0C1220;
    --royal-light: #16213A;
    --text: #E9E7DF;
    --text-dim: #98A2B3;
    --text-link: #E9E7DF;
    --border: rgba(233, 231, 223, .12);
    --accent: #C77E3A;
    --header-bg: rgba(10, 14, 24, .72);

    /* ---- type families ----
       Three roles only. Every family here is shipped in §0 above.

       The heading face is assembled from three slots instead of being
       hard-coded, so the dashboard can reorder them without touching CSS:
       header.php prints a `:root` override for --font-display-1/2/3 when
       the admin picks an alternate. Defaults = Alexandria first, with the
       other two houses behind it as fallbacks. */
    --font-display-1: "Alexandria";
    --font-display-2: "A Nefel Adeti Qelew";
    --font-display-3: "Cairo";
    --font-ar-display: var(--font-display-1), var(--font-display-2), var(--font-display-3), "Tajawal", system-ui, sans-serif;
    --font-ar-body: "Tajawal", system-ui, sans-serif;
    /* --font-en is the instrument voice: coordinates, degrees, act
       labels, waypoint numbers. Monospaced and tabular on purpose. */
    --font-en: "IBM Plex Mono", ui-monospace, monospace;

    /* ---- surface & light system (v4) ----
       One ladder of ink values and one of golds, so a section can be
       composed from tokens instead of one-off rgba() literals. */
    --ink-900: #05070C;
    --ink-800: #070A12;
    --ink-700: #0A0E18;
    --ink-600: #0E1422;
    --ink-500: #141C2E;

    --gold-100: #F3E2C0;
    --gold-200: #E7C88F;
    --gold-300: #E0954B;
    --gold-400: #CBA263;
    --gold-500: #C77E3A;
    --gold-rgb: 224, 149, 75;

    --bone: #E9E7DF;
    --bone-70: rgba(233, 231, 223, .70);
    --bone-50: rgba(233, 231, 223, .50);
    --bone-30: rgba(233, 231, 223, .30);
    --bone-12: rgba(233, 231, 223, .12);
    --bone-06: rgba(233, 231, 223, .06);

    /* Hairline used for every instrument rule, so they all match. */
    --rule: 1px solid var(--bone-12);
    --rule-gold: 1px solid rgba(224, 149, 75, .34);

    /* Section rhythm — one vertical scale shared by every chapter. */
    --pad-x: clamp(20px, 6vw, 96px);
    --pad-y: clamp(64px, 9vw, 132px);
    --stack-xs: clamp(8px, 1vw, 12px);
    --stack-sm: clamp(14px, 1.6vw, 20px);
    --stack-md: clamp(22px, 2.6vw, 34px);
    --stack-lg: clamp(34px, 4.2vw, 58px);

    /* misc */
    --ease: cubic-bezier(.65, 0, .35, 1);
    --radius: 3px;
    --header-height: 80px;
}

@media (max-width: 991.98px) {
    :root {
        --header-height: 60px;
    }
}

/* ============================================================
   2 · BASE  (ported from style.css, retuned)
   ============================================================ */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
    overflow-x: clip;
}

body {
    background: var(--scroll-bg, var(--bg));
    color: var(--text);
    font-family: var(--font-ar-body);
    font-size: var(--font-size-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .6s var(--ease), color .5s var(--ease);
    overflow-x: clip;
    max-width: 100%;
}

body.has-custom-cursor {
    cursor: none;
}

h1,
h2,
h3,
h4,
.td-display,
.td-cta-title {
    font-family: var(--font-ar-display);
    font-weight: 500;
    letter-spacing: -.01em;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.en,
.td-en {
    font-family: var(--font-en);
}

::selection {
    background: var(--gold);
    color: var(--mn-navy);
}

.section-pad {
    padding: 110px 0;
}

@media (max-width: 768px) {
    .section-pad {
        padding: 70px 0;
    }
}

/* legacy gold-text helper (kept for any inner-page use) */
.td-text-gold {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* legacy eyebrow (kept; inner pages mostly use .mn-eyebrow now) */
.td-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-en);
    font-size: .78rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 14px;
}

.td-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--grad-gold);
    display: inline-block;
    animation: tdGoldPulse 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* ============================================================
   3 · BUTTONS — sharp cinematic edges
   ============================================================ */
.td-btn-gold,
.btn.td-btn-gold,
.td-btn-outline,
.td-btn-gold-shape {
    border-radius: 2px !important;
    font-family: var(--font-ar-body);
    font-weight: 600;
    letter-spacing: .01em;
}

.td-btn-gold {
    box-shadow: 0 10px 34px -12px var(--gold-glow);
}

.td-btn-gold:hover {
    box-shadow: 0 16px 44px -12px var(--gold-glow);
    transform: translateY(-1px);
}

.td-btn-outline {
    border: 1px solid rgba(203, 162, 99, .5);
    color: var(--gold-light);
}

/* ============================================================
   4 · FORM FIELDS — instrument focus ring
   ============================================================ */
input,
textarea,
select {
    background: rgba(233, 231, 223, .03);
    border: 1px solid rgba(233, 231, 223, .14);
    border-radius: 3px;
    color: var(--mn-ink);
    transition: border-color .3s ease, box-shadow .3s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(203, 162, 99, .16);
}

/* ============================================================
   5 · LOADERS — compass-instrument language
   ============================================================ */
body.preloading {
    overflow: hidden;
}

.td-simple-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.td-simple-loader {
    background: radial-gradient(circle at 50% 46%, #0C1220 0%, #070A12 74%);
}

.td-simple-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.td-simple-loader-inner {
    text-align: center;
}

.td-loader-spinner {
    position: relative;
    border: 1px solid rgba(233, 231, 223, .14) !important;
    border-top-color: #E0954B !important;
    border-right-color: rgba(231, 200, 143, .5) !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 50%;

    animation: tdSpinSlow 1.1s cubic-bezier(.7, 0, .3, 1) infinite !important;
}

.td-loader-spinner::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid rgba(233, 231, 223, .06);
    border-bottom-color: rgba(203, 162, 99, .4);
    animation: tdSpinSlow 2.6s linear infinite reverse;
}

.td-loader-counter {
    font-family: var(--font-en) !important;
    color: var(--gold-light) !important;
    letter-spacing: .1em;
    margin-top: -20px;
}

/* ============================================================
   6 · INNER-PAGE HERO — instrument backdrop (about / services)
   Add class `mn-hero--fx` to the hero <header> and drop in a
   `.mn-hero-fx` layer as its first child. Reusable, RTL-aware.
   ============================================================ */
.mn-ab-hero.mn-hero--fx {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(300px, 44vh, 480px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mn-hero--fx> :not(.mn-hero-fx) {
    position: relative;
    z-index: 1;
}

.mn-hero-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* faint grid, faded toward the heading corner */
.mn-hero-fx .grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(233, 231, 223, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 231, 223, .05) 1px, transparent 1px);
    background-size: 70px 70px;
    -webkit-mask-image: radial-gradient(130% 110% at 100% 0%, #000 4%, transparent 62%);
    mask-image: radial-gradient(130% 110% at 100% 0%, #000 4%, transparent 62%);
    opacity: .7;
}

/* ambient gold glow */
.mn-hero-fx .glow {
    position: absolute;
    top: -24%;
    inset-inline-start: -8%;
    width: 62%;
    height: 130%;
    background: radial-gradient(circle at 70% 32%, rgba(203, 162, 99, .18), transparent 62%);
    filter: blur(6px);
}

/* concentric bearing rings peeking behind the title */
.mn-hero-fx .ring {
    position: absolute;
    border: 1px solid rgba(233, 231, 223, .07);
    border-radius: 50%;
}

.mn-hero-fx .ring--1 {
    width: min(58vw, 520px);
    aspect-ratio: 1;
    top: -40%;
    inset-inline-end: -10%;
}

.mn-hero-fx .ring--2 {
    width: min(34vw, 320px);
    aspect-ratio: 1;
    top: -14%;
    inset-inline-end: 3%;
    border-color: rgba(203, 162, 99, .12);
}

/* slow-rotating compass dial with a sweeping bearing tick */
.mn-hero-fx .dial {
    position: absolute;
    top: clamp(20px, 5vh, 54px);
    inset-inline-end: clamp(20px, 5vw, 64px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(233, 231, 223, .14);
    animation: mnDialSpin 26s linear infinite;
}

.mn-hero-fx .dial::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -8deg, rgba(231, 200, 143, .5), transparent 42deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
    mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.mn-hero-fx .dial i {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 1px;
    height: 8px;
    background: var(--gold-light);
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--gold-light);
}

@media (max-width: 640px) {
    .mn-hero-fx .dial {
        display: none;
    }

    .mn-ab-hero.mn-hero--fx {
        min-height: clamp(240px, 40vh, 360px);
    }
}

/* ============================================================
   7 · KEYFRAMES  (ported — loaders + eyebrow pulse depend on these)
   ============================================================ */
@keyframes tdSpinSlow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tdGoldPulse {

    0%,
    100% {
        color: var(--gold);
        opacity: .75;
        transform: scale(1);
        text-shadow: 0 0 0 rgba(201, 162, 75, 0);
    }

    50% {
        color: var(--gold-light);
        opacity: 1;
        transform: scale(1.12);
        text-shadow: 0 0 6px rgba(201, 162, 75, .7), 0 0 16px rgba(201, 162, 75, .55);
    }
}

@keyframes mnDialSpin {
    to {
        transform: rotate(360deg);
    }
}
/* ============================================================
   MAGNETIC NORTH — INSTRUMENT & COMPASS SYSTEM (Extracted UI)
   ============================================================ */

/* 1. Global & Typography Overrides */
body.mn-experience {
    background: #0A0E18;
    color: #E9E7DF;
    font-family: var(--font-ar-body);
    -webkit-font-smoothing: antialiased;
    /* Keep the viewport as the one and only vertical scroll container.
       `overflow-x:hidden` makes the other axis compute to `auto`, which can
       turn BODY into a nested scroller in Chromium/Edge. The motion engine
       follows the viewport scroll position, so that split scroll root leaves
       the pinned experience stuck at its first frame. `clip` prevents the
       decorative layers from widening the page without creating a scroller. */
    overflow-x: clip;
    overflow-y: visible;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: auto;
}

body.mn-experience .mn-hd {
    background: linear-gradient(180deg, rgba(10, 14, 24, .72) 0%, rgba(10, 14, 24, 0) 100%);
}

body.mn-experience .mn-hd.is-scrolled {
    background: rgba(9, 12, 20, .82);
}

#mn-root ::selection {
    background: #C77E3A;
    color: #0A0E18;
}

#mn-root p {
    text-wrap: pretty;
}

#mn-root h1,
#mn-root h2,
#mn-root h3 {
    text-wrap: balance;
}

#mn-root a {
    color: inherit;
    text-decoration: none;
}

#mn-root a:hover {
    color: #E0954B;
}

@keyframes mnPulse {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

/* PHP mn_words Output */
.mn-w {
    display: inline-block;
    will-change: transform;
}

/* 2. Layout & Stage Container */
/* Pinned timeline length.
   1150vh − 100vh of sticky stage = 1050vh of actual travel, split across the
   eight chapters by the windows in magnetic-north.js (§2 · TIMELINE). This
   is not a "make it slower" number: it is the smallest height at which every
   chapter still gets a readable hold — Selected Work ~48vh per project,
   Arrival ~84vh. The previous 1600vh bought nothing but a longer scroll,
   because the extra length was spent almost entirely on BEARINGS.
   Touch devices never see this rule at all: .mn-native sets height:auto. */
.mn-pin {
    position: relative;
    height: 1150vh;
}

.mn-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.mn-plate {
    position: absolute;
    inset: 0;
    z-index: 8;
    will-change: transform, opacity;
}

/* 3. Field & Atmosphere */
.mn-field {
    position: absolute;
    inset: -40%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.mn-field__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(233, 231, 223, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 231, 223, .035) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 70%);
}

.mn-field__ring-1 {
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(233, 231, 223, .05);
    border-radius: 50%;
}

.mn-field__ring-2 {
    position: absolute;
    inset: 30%;
    border: 1px solid rgba(233, 231, 223, .04);
    border-radius: 50%;
}

.mn-glowbg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(70% 60% at 50% 46%, rgba(203, 162, 99, .16), transparent 62%);
}

.mn-atmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 4. Core Instrument */
.mn-core {
    position: absolute;
    top: calc(50% + 37px);
    left: 50%;
    width: min(84vh, 84vw);
    height: min(84vh, 84vw);
    margin: calc(min(84vh, 84vw) / -2) 0 0 calc(min(84vh, 84vw) / -2);
    z-index: 2;
    will-change: transform, opacity;
}

.mn-coreglow {
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    filter: blur(8px);
    transition: background .5s ease;
    background: radial-gradient(circle, rgba(203, 162, 99, .32), transparent 66%);
}

.mn-core__ring-outer {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(233, 231, 223, .14);
    border-radius: 50%;
}

.mn-core__ring-mid {
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(233, 231, 223, .07);
    border-radius: 50%;
}

.mn-core__ring-inner {
    position: absolute;
    inset: 26%;
    border: 1px solid rgba(233, 231, 223, .05);
    border-radius: 50%;
}

.mn-rotor {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.mn-rotor__svg {
    position: absolute;
    inset: 4%;
    width: 92%;
    height: 92%;
    overflow: visible;
}

.mn-rotor__text {
    font-family: var(--font-en);
    font-size: 6.4px;
    letter-spacing: 2.1px;
    fill: rgba(233, 231, 223, .34);
}

.mn-node {
    position: absolute;
    top: 50%;
    left: 50%;
}

.mn-node__label {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 600;
}

.mn-core__needle-line {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 2px;
    height: 36%;
    background: linear-gradient(#E0954B, rgba(231, 200, 143, .08));
    transform: translateX(-50%);
    transform-origin: bottom center;
    z-index: 5;
}

.mn-hubmark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11%;
    height: 11%;
    transform: translate(-50%, -50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mn-hubmark__glow {
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 200, 143, .55), transparent 68%);
    filter: blur(5px);
}

.mn-hubmark__svg {
    position: relative;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(231, 200, 143, .55));
}

.mn-iris {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0A0E18;
    transform: translate(-50%, -50%) scale(0);
    z-index: 7;
    box-shadow: 0 0 0 2px rgba(231, 200, 143, .5);
}

/* 6. Section: Bearings */
.mn-p-bearings {
    opacity: 0;
}

.mn-bp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    filter: grayscale(.4) contrast(1.1) brightness(.55);
    will-change: opacity, transform;
}

.mn-bignum {
    position: absolute;
    top: 50%;
    left: 6vw;
    transform: translateY(-50%);
    z-index: 1;
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: 44vh;
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 231, 223, .10);
    pointer-events: none;
}

.mn-bearings__inner {
    position: relative;
    width: 100%;
    height: 44vh;
}

.mn-bp {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform, opacity;
}

.mn-bp__meta {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .2em;
    margin-bottom: 14px;
    text-align: right;
}

.mn-bp__h2 {
    margin: 0 0 18px;
    font-family: var(--font-ar-display);
    font-weight: 500;
    font-size: clamp(1.86rem, 5.08vw, 3.72rem);
    line-height: 1.02;
}

.mn-bp__p {
    margin: 0;
    font-size: 16px;
    line-height: 1.95;
    color: rgba(233, 231, 223, .72);
}

/* ============================================================
   6 · SECTION — ABOUT US ("Triangulation")
   Cinematic identity panel. Left column: eyebrow + title + lead.
   Right column: Mission/Vision as two "coordinate" cards on an
   instrument panel with a shared vertical connector — the same
   compass tick + monospace vocabulary already used elsewhere.
   Full-width HUD stats ribbon spans the bottom. Ambient field
   layers rings + glow + guides + an outlined section-numeral
   watermark for depth. Mobile styles further below reflow to a
   compact vertical rhythm.
   ============================================================*/
.mn-p-about {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vh, 80px) clamp(24px, 6vw, 96px);
    overflow: hidden;
}

.mn-section-hdr {
    position: absolute;
    top: calc(8vh + 74px);
    /* أضفنا 74px (ارتفاع الهيدر) لضمان مساحة تنفس دائمًا */
    right: 8vw;
    z-index: 2;
}

.mn-section-hdr__meta {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .2em;
    color: #C77E3A;
}

.mn-section-hdr__title {
    font-family: var(--font-ar-display);
    font-size: clamp(1.18rem, 2.54vw, 1.86rem);
    margin-top: 6px;
}

.mn-svc {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0 16px 4px;
    border-top: 1px solid rgba(233, 231, 223, .1);
    transition: border-top-color .5s cubic-bezier(.16, 1, .3, 1);
}

.mn-svc:last-child {
    border-bottom: 1px solid rgba(233, 231, 223, .1);
}

/* Inset-inline accent bar reveals as the service becomes .is-active */
.mn-svc::before {
    content: "";
    position: absolute;
    inset-inline-start: -4px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--dir-accent, #C77E3A);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

.mn-svc.is-active::before {
    transform: scaleY(1);
}

.mn-svc.is-active {
    border-top-color: color-mix(in srgb, var(--dir-accent, #C77E3A) 45%, rgba(233, 231, 223, .1));
}

.mn-svc.is-active .mn-svc__item-deg {
    color: var(--dir-accent, #C77E3A);
}

.mn-svc.is-active .mn-svc__item-title {
    color: #F2EDDE;
}

.mn-svc.is-active .mn-svc__item-desc {
    display: none;
    opacity: 1;

}

.mn-svc.is-active .mn-svc__item-icon {
    color: var(--dir-accent, #E0954B);
    transform: translateX(-4px);
}

/* 8. Section: Work */
.mn-p-work {
    opacity: 0;
    display: flex;
    align-items: center;
}

.mn-p-work .mn-section-hdr {
    right: 6vw;
}

.mn-strip {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    gap: 3vw;
    padding-inline: 8vw;
    will-change: transform;
}

.mn-frame {
    position: relative;
    flex: none;
    width: 44vw;
    height: 56vh;
    border: 1px solid rgba(233, 231, 223, .12);
    overflow: hidden;
    transform: translateY(-50%);
    will-change: filter, transform;
}

.mn-frame__index {
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: var(--font-en);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 600;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 231, 223, .22);
}

.mn-frame__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 14, 24, .92) 5%, transparent 52%);
}

.mn-frame__details {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
}

.mn-frame__meta {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .16em;
    color: #C77E3A;
}

.mn-frame__h3 {
    margin: 8px 0 0;
    font-family: var(--font-ar-display);
    font-weight: 500;
    font-size: clamp(1.1rem, 2.2vw, 1.69rem);
}

/* Click affordance — the frames are links, but nothing said so before.
   Hidden until hover on pointer devices; always visible on touch, where
   there is no hover to discover it with. */
.mn-frame__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: #E0954B;
    opacity: 0;
    transform: translateY(6px);
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

@media (hover: hover) {

    .mn-frame:hover .mn-frame__cta,
    .mn-frame:focus-visible .mn-frame__cta {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none) {
    .mn-frame__cta {
        opacity: 1;
        transform: none;
    }
}

/* Work footer — position readout + scrub progress + archive escape hatch */
.mn-work__footer {
    position: absolute;
    right: 8vw;
    bottom: 5vh;
    left: 8vw;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 20px;
}

.mn-work__count {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .1em;
    color: rgba(233, 231, 223, .4);
    flex: none;
}

.mn-work__count-cur {
    color: #E0954B;
}

.mn-work__count-sep {
    margin: 0 3px;
    opacity: .5;
}

.mn-work__track {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(233, 231, 223, .14);
    overflow: hidden;
}

/* The engine writes transform:scaleX(); the element must therefore be full
   width and scale from the right — this is an RTL page, so progress runs
   right → left. (It previously declared width:0 with a width transition,
   which meant the bar was permanently invisible.) */
.mn-work__bar {
    height: 100%;
    width: 100%;
    background: #E0954B;
    transform: scaleX(0);
    transform-origin: right center;
}

/* ---- Swipe dots -------------------------------------------------------
   The control surface for the touch route's horizontal rail. On the pinned
   desktop timeline the rail is driven by page scroll, so the dots would be
   a control that does nothing — the track/bar readout is shown there
   instead (see the .mn-native / :not(.mn-native) split below). */
.mn-work__dots {
    display: none;
    flex: none;
    align-items: center;
    gap: 9px;
}

.mn-work__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid rgba(233, 231, 223, .34);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
    /* The visual dot is 7px; this pseudo-element gives it a 44px hit area
       without changing the layout. */
    position: relative;
}

.mn-work__dot::after {
    content: "";
    position: absolute;
    inset: -18px -9px;
}

.mn-work__dot.is-current {
    background: #E0954B;
    border-color: #E0954B;
    transform: scale(1.25);
}

#mn-root.mn-native .mn-work__dots {
    display: flex;
}

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

.mn-work__all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(233, 231, 223, .7);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s, border-color .3s;
}

.mn-work__all:hover,
.mn-work__all:focus-visible {
    color: #E0954B;
    border-bottom-color: #E0954B;
}

/* 9. Section: Craft */
.mn-p-craft {
    opacity: 0;
    overflow: hidden;
}

.mn-craft-img {
    position: absolute;
    inset: 0;
    transform: scale(1.08);
    will-change: transform;
    filter: brightness(.86) contrast(1.05) saturate(1.02);
}

.mn-p-craft .mn-section-hdr {
    top: 9vh;
    right: 6vw;
    text-align: right;
}

.mn-p-craft .mn-section-hdr__title {
    color: rgba(233, 231, 223, .9);
}

/* ============================================================
   10 · SECTION — PATH ("Journey Map")
   Horizontal timeline where each step is a waypoint on a route.
   A dashed route line runs behind the waypoints, hairline
   champagne-gold, with tick decorations at each stop. The whole
   row (#mn-path-row) is horizontally translated by JS during
   scroll (-22vw → 22vw) — CSS keeps `will-change: transform` and
   sets NO competing transform. Mobile block below reflows to a
   vertical trail with an improved accordion (see mobile section).
   ============================================================ */
.mn-p-path {
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(24px, 6vw, 96px);
    overflow: hidden;
}
/* 12. Section: Arrival */
.mn-p-arrival {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 6vw;
    z-index: 9;
}

.mn-arr-btn {
    cursor: pointer;
    margin-top: 4vh;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 42px;
    background: #C77E3A;
    color: #0A0E18;
    border: none;
    border-radius: 2px;
    font-family: var(--font-ar-body);
    font-weight: 600;
    font-size: 16px;
}

.mn-arr-needle {
    display: inline-flex;
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.mn-arr-lock {
    margin-top: 2.4vh;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(233, 231, 223, .4);
}

/* 13. HUD (Desktop) */
.mn-hud__wrapper {
    position: absolute;
    left: 5vw;
    bottom: max(3.5vh, 32px);
    z-index: 20;
    pointer-events: none;
    font-family: var(--font-en);
}

/* mn-ui.css — add near the existing .mn-hud__wrapper rules (~line 2315) */

.mn-act-nav {
    position: absolute;
    left: 5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-family: var(--font-en);
}

.mn-act-nav__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(233, 231, 223, .28);
    border: 1px solid rgba(233, 231, 223, .12);
    padding: 0;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease,
        box-shadow .3s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.mn-act-nav__dot:hover {
    background: rgba(233, 231, 223, .55);
    transform: scale(1.3);
}

.mn-act-nav__dot:focus-visible {
    outline: 2px solid #E0954B;
    outline-offset: 3px;
}

/* Active state reuses the exact HUD gold + glow already used for
   active service rows / bearing nodes, so it reads as the same
   instrument language rather than a new accent. */
.mn-act-nav__dot.is-current {
    background: linear-gradient(90deg, #C77E3A, #E0954B);
    border-color: #E0954B;
    box-shadow: 0 0 10px rgba(224, 149, 75, .55);
    transform: scale(1.6);
}

/* Optional label-on-hover, matching .mn-hud-act's type treatment
   (10px, wide letter-spacing, dimmed ink) rather than inventing a new one. */
.mn-act-nav__dot::after {
    content: attr(aria-label);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(233, 231, 223, .55);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.mn-act-nav__dot:hover::after,
.mn-act-nav__dot:focus-visible::after {
    opacity: 1;
}

/* The act rail belongs to the pinned timeline. Touch devices scroll a normal
   document, so it is hidden there by the .mn-native rules in mn-motion.css —
   this breakpoint covers small desktop windows that still run the engine. */
@media (max-width: 820px) {
    .mn-act-nav {
        display: none;
    }
}

.mn-hud__text {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mn-hud-deg {
    font-size: 26px;
    font-weight: 500;
    color: #E0954B;
}

.mn-hud-act {
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(233, 231, 223, .55);
}

.mn-hud__track {
    width: 170px;
    height: 2px;
    background: rgba(233, 231, 223, .12);
    margin-top: 8px;
}

.mn-hud-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #C77E3A, #E0954B);
}

.mn-stage__vignette {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
    background: radial-gradient(135% 108% at 50% 40%, transparent 43%, rgba(5, 8, 15, .5) 100%);
}

/* ============================================================
   15. Mobile & Responsive Layout Resizing
   ============================================================ */


/* ============================================================================
   HOME COMPOSITION SYSTEM — v5
   ----------------------------------------------------------------------------
   One vocabulary for all eight chapters, so they read as one world instead of
   eight passes stacked on each other. Everything below is a *component*, not a
   patch: the eyebrow, the divider, the buttons and the background layer are
   defined once here and reused by every section further down.

   Composition rules this block encodes:
     · The photograph is the ground. Type never sits on unmanaged pixels —
       every .mn-bg carries a scrim tuned to where its section puts text.
     · Gold is light, not paint. It appears as a hairline, a glow, or a single
       word — never as a large fill except on the one primary CTA per screen.
     · One measure. Body copy stays at 52–62ch so Arabic stays readable.
     · Motion is transform + opacity. No animated blur, no animated filter,
       no permanent will-change.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. GROUND */
/* The section artwork layer written by mn_bg() in index.php. */
.mn-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--ink-700);
}

.mn-bg picture,
.mn-bg img {
    display: block;
    width: 100%;
    height: 100%;
}

.mn-bg img {
    object-fit: cover;
    object-position: var(--bg-pos, 50% 50%);
    /* The artwork is already graded dark; this only deepens the shadows so
       the gold hairlines have somewhere to sit. One static filter, never
       animated — an animated filter on a full-screen image is the most
       expensive thing a compositor can be asked to do. */
    filter: saturate(.92) contrast(1.04) brightness(.86);
}

/* Scrim: the readability contract. Each section overrides --scrim to move the
   dark mass to wherever its type lands. Default = bottom-weighted. */
.mn-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim,
            linear-gradient(0deg, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .55) 42%, rgba(5, 7, 12, .18) 74%, rgba(5, 7, 12, .42) 100%));
}

/* A second, very quiet warm bloom so the black never goes flat grey. */
.mn-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(72% 58% at var(--bloom, 70% 42%), rgba(224, 149, 75, .13), transparent 64%);
    mix-blend-mode: screen;
}

@media (max-width: 820px) {
    .mn-bg img {
        object-position: var(--bg-pos-mob, var(--bg-pos, 50% 50%));
    }
}

/* --------------------------------------------------------- 2. EYEBROW LABEL */
/* "— وكالة إبداعية متكاملة". The rule sits after the text in the RTL flow,
   so it trails to the left exactly like the reference composition. */
.mn-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--font-ar-body);
    font-size: clamp(11px, .82vw, 13px);
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--gold-200);
    text-transform: none;
}

.mn-eyebrow__rule {
    flex: 0 0 auto;
    width: clamp(34px, 4vw, 58px);
    height: 1px;
    background: linear-gradient(90deg, var(--gold-300), transparent);
}

.mn-eyebrow--en {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--bone-50);
}

/* ------------------------------------------------------------- 3. DIVIDER */
/* line — diamond — line. The recurring ornament across every chapter. */
.mn-divider {
    display: block;
    position: relative;
    width: min(280px, 62%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224, 149, 75, .5) 22%, rgba(224, 149, 75, .5) 78%, transparent);
}

.mn-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: var(--gold-200);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px rgba(224, 149, 75, .8);
}

.mn-divider--center {
    margin-inline: auto;
}

/* -------------------------------------------------------------- 4. BUTTONS */
.mn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 clamp(20px, 2vw, 30px);
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--font-ar-body);
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform .38s cubic-bezier(.16, 1, .3, 1),
        box-shadow .38s ease,
        border-color .3s ease,
        color .3s ease,
        background-color .3s ease;
}

/* The chevron points left — this is an RTL page, so "forward" is leftward. */
.mn-btn__chev {
    flex: none;
    width: 7px;
    height: 7px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.mn-btn:hover .mn-btn__chev,
.mn-btn:focus-visible .mn-btn__chev {
    transform: rotate(45deg) translate(2px, -2px);
}

/* Primary — the one gold fill allowed per screen. */
.mn-btn--gold {
    color: var(--ink-900) !important;
    background: linear-gradient(135deg, #CBA263 0%, #F3E2C0 48%, #D3A85F 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 20px 44px -22px rgba(203, 162, 99, .8);
}

.mn-btn--gold:hover,
.mn-btn--gold:focus-visible {
    color: var(--ink-900) !important;
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .5) inset,
        0 26px 56px -22px rgba(203, 162, 99, .95);
}

/* Tertiary — a text link with a gold underline. No box at all. */
.mn-btn--quiet {
    min-height: 44px;
    padding: 0 2px;
    border-radius: 0;
    color: var(--gold-200) !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(224, 149, 75, .42);
}

.mn-btn--quiet:hover,
.mn-btn--quiet:focus-visible {
    color: var(--gold-100) !important;
    border-bottom-color: var(--gold-100);
}

/* --------------------------------------------------------- 5. SURFACE CARD */
/* The one card treatment. Used by every chapter that needs a panel, so the
   site never grows a second, slightly-different card style. */
.mn-surface {
    position: relative;
    border: var(--rule);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(224, 149, 75, .05), transparent 46%),
        rgba(10, 14, 24, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ============================================================================
   CHAPTER 01 — ORIENT / HERO
   The strongest point on the page. Everything is anchored to the right edge
   (RTL reading start) so the compass in the artwork stays uncovered on the
   left, exactly as the photograph is composed.
   ============================================================================ */

.mn-home .mn-p-orient {
    --scrim: linear-gradient(270deg, rgba(5, 7, 12, .30) 0%, rgba(5, 7, 12, .72) 46%, rgba(5, 7, 12, .95) 100%);
    --bloom: 76% 46%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-inline: var(--pad-x);
    isolation: isolate;
    overflow: hidden;
}

.mn-home .mn-orient__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-sm);
    width: min(640px, 100%);
    text-align: right;
}

.mn-home .mn-orient__h1 {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 700;
    font-size: clamp(2.06rem, 4.43vw, 4.43rem);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--bone);
    text-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.mn-home .mn-orient__h1-line {
    display: block;
}

/* Only the second line carries the gold, and only as light. */
.mn-home .mn-orient__h1-line--gold {
    background: linear-gradient(180deg, #F3E2C0 0%, #D8A45C 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Safari drops the shadow behind clipped text; the glow below replaces it. */
    filter: drop-shadow(0 0 32px rgba(224, 149, 75, .28));
}

.mn-home .mn-orient__p {
    max-width: 46ch;
    margin: 0;
    font-family: var(--font-ar-body);
    font-size: clamp(14.5px, 1.05vw, 17px);
    line-height: 2;
    color: var(--bone-70);
}

.mn-home .mn-orient__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(12px, 1.4vw, 20px);
    margin-top: var(--stack-xs);
}

/* Chapter ticks — a quiet vertical index down the leading edge. */
.mn-home .mn-orient__ticks {
    position: absolute;
    inset-inline-start: clamp(16px, 2.6vw, 44px);
    bottom: clamp(40px, 9vh, 96px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.mn-home .mn-orient__ticks i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bone-30);
}

.mn-home .mn-orient__ticks-star {
    width: 9px;
    height: 9px;
    margin-bottom: 4px;
    background: var(--gold-200);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    box-shadow: 0 0 12px rgba(231, 200, 143, .7);
}

.mn-home .mn-scroll-ind {
    position: absolute;
    inset-inline-end: var(--pad-x);
    bottom: clamp(26px, 5vh, 48px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-ar-body);
    font-size: 11.5px;
    letter-spacing: .06em;
    color: var(--bone-50);
}

.mn-home .mn-scroll-ind__pulse {
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-300), transparent);
    animation: mnScrollHint 2.4s var(--ease) infinite;
}

@keyframes mnScrollHint {

    0%,
    100% {
        opacity: .3;
        transform: scaleX(.5);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ---- Hero · phone ---- */
@media (max-width: 820px) {
    

    

    

    

    

    

    

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

/* ============================================================================
   HOME LUXURY PASS — Magnetic North v4
   Purpose: richer hierarchy with fewer expensive effects. This block is
   intentionally scoped to .mn-home so inner pages keep their current system.
   ============================================================================ */
body.mn-home {
    --mn-luxe-gold: #D8B46F;
    --mn-luxe-gold-hi: #F0D9A6;
    --mn-luxe-ink: #F2EFE7;
}

/* Selected work — crisp photography, gallery-grade frames */
.mn-home .mn-p-work {
    background: radial-gradient(55% 70% at 50% 52%, rgba(203, 162, 99, .055), transparent 70%);
}

.mn-home .mn-frame {
    border-color: rgba(240, 217, 166, .16);
    background-color: #080B12 !important;
}

.mn-home .mn-frame::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, .055);
    z-index: 3;
    pointer-events: none;
}

.mn-home .mn-frame.is-hot {
    border-color: rgba(240, 217, 166, .72);
    box-shadow: 0 36px 110px -42px rgba(0, 0, 0, .95), 0 0 0 1px rgba(240, 217, 166, .14), 0 0 46px rgba(203, 162, 99, .09);
}

.mn-home .mn-frame__scrim {
    background: linear-gradient(0deg, rgba(6, 9, 15, .96) 0%, rgba(6, 9, 15, .40) 38%, rgba(6, 9, 15, .05) 68%, rgba(6, 9, 15, .14) 100%);
}

.mn-home .mn-frame__index {
    color: rgba(240, 217, 166, .78);
    -webkit-text-stroke: 0;
}

.mn-home .mn-frame__h3 {
    color: #F4F0E7;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .46);
}

.mn-home .mn-frame__cta {
    color: var(--mn-luxe-gold-hi);
}

.mn-home .mn-svc {
    border-top-color: rgba(242, 239, 231, .075);
}

.mn-home .mn-svc.is-active {
    background: linear-gradient(90deg, rgba(216, 180, 111, .045), transparent 60%);
}

/* Craft — one cinematic image, no decorative overload */
.mn-home .mn-p-craft {
    isolation: isolate;
}

/* Arrival — premium lock-on finale */
.mn-home .mn-p-arrival::before {
    content: "";
    position: absolute;
    width: min(62vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(240, 217, 166, .11);
    box-shadow: 0 0 0 70px rgba(216, 180, 111, .018), 0 0 0 140px rgba(216, 180, 111, .010);
    pointer-events: none;
}

.mn-home .mn-arr-btn {
    background: linear-gradient(135deg, #CBA263, #F0D9A6 55%, #CBA263);
    box-shadow: 0 24px 70px -28px rgba(216, 180, 111, .75);
}

/* MOBILE MAGNETIC NORTH — keep the experience, simplify the rendering */
@media (max-width:820px) {
    

    

    

    

    

    /* Larger, tactile work cards while preserving native snap. */
    

    

    

    

    .mn-home .mn-p-arrival::before {
        width: 90vw;
        box-shadow: 0 0 0 34px rgba(216, 180, 111, .014);
    }
}

/* ======================================================================
   HOME / ABOUT V3 — THE STUDIO
   Quiet luxury, instrument-grade geometry, no card-grid language.
   ====================================================================== */
.mn-home .mn-aboutv3 {
    --ab-gold: #D8B46F;
    --ab-gold-hi: #F0D9A6;
    --ab-bone: #ECE6DA;
    --ab-ink: #0A0E18;
    --ab-navy: #141A24;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(38px, 5.5vh, 74px) clamp(24px, 5.4vw, 84px);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #0A0E18 0%, #10141C 52%, #0A0E18 100%);
}

.mn-home .mn-aboutv3__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.mn-home .mn-aboutv3__field::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(236, 230, 218, .027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 230, 218, .027) 1px, transparent 1px);
    background-size: 86px 86px;
    -webkit-mask-image: radial-gradient(circle at 68% 48%, #000 5%, transparent 68%);
    mask-image: radial-gradient(circle at 68% 48%, #000 5%, transparent 68%);
    opacity: .72;
}

.mn-home .mn-aboutv3__halo {
    position: absolute;
    width: min(70vw, 980px);
    aspect-ratio: 1;
    border-radius: 50%;
    inset-inline-end: -18vw;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(216, 180, 111, .12) 0%, rgba(216, 180, 111, .035) 32%, transparent 68%);
    filter: blur(5px);
}

.mn-home .mn-aboutv3__arc {
    position: absolute;
    border: 1px solid rgba(240, 217, 166, .075);
    border-radius: 50%;
}

.mn-home .mn-aboutv3__arc--1 {
    width: min(52vw, 720px);
    aspect-ratio: 1;
    inset-inline-end: -7vw;
    top: 50%;
    transform: translateY(-50%);
}

.mn-home .mn-aboutv3__arc--2 {
    width: min(35vw, 480px);
    aspect-ratio: 1;
    inset-inline-end: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
    border-color: rgba(240, 217, 166, .045);
}

.mn-home .mn-aboutv3__axis {
    position: absolute;
    opacity: .23;
}

.mn-home .mn-aboutv3__axis--x {
    height: 1px;
    width: 54vw;
    inset-inline-end: -4vw;
    top: 50%;
    background: linear-gradient(90deg, transparent, rgba(236, 230, 218, .3), transparent);
}

.mn-home .mn-aboutv3__axis--y {
    width: 1px;
    height: 76vh;
    inset-inline-end: 19vw;
    top: 12vh;
    background: linear-gradient(transparent, rgba(236, 230, 218, .25), transparent);
}

.mn-home .mn-aboutv3__ghost {
    position: absolute;
    inset-inline-start: -.025em;
    bottom: -.14em;
    font-family: var(--font-en);
    font-weight: 300;
    font-size: clamp(15rem, 31vw, 34rem);
    line-height: .8;
    letter-spacing: -.09em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(216, 180, 111, .055);
    user-select: none;
}

.mn-home .mn-aboutv3__shell {
    position: relative;
    z-index: 2;
    width: min(100%, 1460px);
    margin: auto;
}

.mn-home .mn-aboutv3__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    margin-bottom: clamp(28px, 4vh, 48px);
    border-bottom: 1px solid rgba(236, 230, 218, .105);
    font-family: var(--font-en);
    font-size: 9.5px;
    letter-spacing: .24em;
    color: rgba(236, 230, 218, .43);
}

.mn-home .mn-aboutv3__topline>span:first-child {
    color: var(--ab-gold-hi);
}

.mn-home .mn-aboutv3__topline-coord {
    white-space: nowrap;
}

.mn-home .mn-aboutv3__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
    gap: clamp(48px, 7vw, 118px);
    align-items: center;
}

.mn-home .mn-aboutv3__manifesto {
    position: relative;
    max-width: 760px;
}

.mn-home .mn-aboutv3__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(18px, 2.5vh, 28px);
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(236, 230, 218, .48);
    direction: ltr;
}

.mn-home .mn-aboutv3__kicker::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--ab-gold);
    box-shadow: 10px 0 0 -1px rgba(240, 217, 166, .45);
}

.mn-home .mn-aboutv3__title {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 400;
    font-size: clamp(2.79rem, 5.92vw, 6.34rem);
    line-height: .89;
    letter-spacing: -.035em;
    color: var(--ab-bone);
    text-wrap: balance;
}

.mn-home .mn-aboutv3__title span,
.mn-home .mn-aboutv3__title strong {
    display: block;
}

.mn-home .mn-aboutv3__title strong {
    color: var(--ab-gold-hi);
    font-weight: 400;
    text-shadow: 0 18px 60px rgba(216, 180, 111, .12);
}

.mn-home .mn-aboutv3__lead {
    margin: clamp(24px, 3.6vh, 38px) 0 0;
    max-width: 58ch;
    font-family: var(--font-ar-body);
    font-weight: 400;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 2;
    color: rgba(236, 230, 218, .66);
}

.mn-home .mn-aboutv3__cta {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(26px, 4vh, 42px);
    padding: 13px 0 12px;
    border-bottom: 1px solid rgba(240, 217, 166, .52);
    font-family: var(--font-ar-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ab-gold-hi);
    transition: gap .45s cubic-bezier(.16, 1, .3, 1), color .3s ease, border-color .3s ease;
}

.mn-home .mn-aboutv3__cta i {
    font-family: var(--font-en);
    font-style: normal;
    font-size: 16px;
    transform: translateY(-1px);
}

.mn-home .mn-aboutv3__cta:hover {
    gap: 26px;
    color: #fff2d2;
    border-color: #fff2d2;
}

.mn-home .mn-aboutv3__principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: clamp(26px, 4vh, 44px);
    border-top: 1px solid rgba(236, 230, 218, .105);
}

.mn-home .mn-aboutv3__principle {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 26px;
    padding: clamp(18px, 2.5vh, 28px) clamp(0px, 2vw, 28px);
}

.mn-home .mn-aboutv3__principle+.mn-aboutv3__principle {
    border-inline-start: 1px solid rgba(236, 230, 218, .09);
}

.mn-home .mn-aboutv3__principle p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: rgba(236, 230, 218, .58);
}

@media (max-width: 1000px) {
    .mn-home .mn-aboutv3__grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr);
        gap: 42px;
    }

    .mn-home .mn-aboutv3__title {
        font-size: clamp(2.54rem, 6.43vw, 4.65rem);
    }

    .mn-home .mn-aboutv3__principle {
        grid-template-columns: 90px 1fr;
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .mn-home .mn-aboutv3 {
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: calc(var(--mn-hd-h) - 4px) 18px 26px !important;
        background: linear-gradient(180deg, #0A0E18, #111620 58%, #0A0E18) !important;
    }

    .mn-home .mn-aboutv3__shell {
        width: 100%;
        padding-bottom: 24px;
    }

    .mn-home .mn-aboutv3__topline {
        margin-bottom: 26px;
        padding-bottom: 12px;
        font-size: 8px;
        letter-spacing: .15em;
    }

    .mn-home .mn-aboutv3__topline-coord {
        display: none;
    }

    .mn-home .mn-aboutv3__grid {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .mn-home .mn-aboutv3__manifesto {
        max-width: none;
    }

    .mn-home .mn-aboutv3__kicker {
        font-size: 8.5px;
        margin-bottom: 15px;
        letter-spacing: .16em;
    }

    .mn-home .mn-aboutv3__title {
        font-size: clamp(2.37rem, 11.42vw, 3.98rem) !important;
        line-height: .92;
        letter-spacing: -.03em;
    }

    /* Phone: drop the intro paragraph — the title + MISSION/VISION already
       carry the message and this keeps the About act to one clean viewport. */
    .mn-home .mn-aboutv3__lead {
        display: none;
    }

    .mn-home .mn-aboutv3__cta {
        margin-top: 16px;
        font-size: 13px;
    }

    .mn-home .mn-aboutv3__principles {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }

    .mn-home .mn-aboutv3__principle {
        grid-template-columns: 64px 1fr;
        gap: 12px;
        padding: 13px 0;
    }

    .mn-home .mn-aboutv3__principle+.mn-aboutv3__principle {
        border-inline-start: 0;
        border-top: 1px solid rgba(236, 230, 218, .08);
    }

    .mn-home .mn-aboutv3__principle p {
        font-size: 12.5px;
        line-height: 1.65;
    }

    .mn-home .mn-aboutv3__ghost {
        font-size: 18rem;
        bottom: 12%;
        opacity: .5;
    }

    .mn-home .mn-aboutv3__axis--y {
        display: none;
    }

    .mn-home .mn-aboutv3__halo {
        width: 120vw;
        inset-inline-end: -60vw;
        opacity: .7;
    }
}


/* ======================================================================
   HOME V4 — BEARINGS / UNIFIED CAPABILITIES / PROOF SIGNAL
   ====================================================================== */

/* --- BEARINGS V2 ------------------------------------------------------ */
.mn-home .mn-bearings-v2 {
    isolation: isolate;
    background: #0A0E18;
    /* clip, not hidden — see the .mn-plate note in mn-motion.css. The native
       route overrides this to `clip` at the plate level anyway; what matters
       is that it never becomes a nested scroll container. */
    overflow: clip;
}

.mn-home .mn-bearings-v2__bg {
    transition: opacity .55s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
    filter: grayscale(.34) contrast(1.08) brightness(.52)
}

.mn-home .mn-bearings-v2__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 14, 24, .18) 0%, rgba(10, 14, 24, .48) 42%, rgba(10, 14, 24, .92) 72%, #0A0E18 100%)
}

@keyframes mnBcompSpin {
    to { transform: rotate(360deg) }
}

@keyframes mnBcompNeedle {
    0%, 100% { transform: translateX(-50%) rotate(-18deg) }
    50%      { transform: translateX(-50%) rotate(14deg) }
}

.mn-home .mn-bearings-v2__hud {
    position: absolute;
    top: calc(var(--mn-hd-h) + 24px);
    left: 5vw;
    right: 5vw;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(236, 230, 218, .1);
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .2em;
    color: rgba(236, 230, 218, .42)
}

.mn-home .mn-bearings-v2__hud span:first-child {
    color: #e7c88f
}

.mn-home .mn-bearings-v2__content {
    width: min(48vw, 650px);
    /* RTL: pad the START (right) edge so the text never touches the viewport
       edge on desktop. */
    padding-inline-start: clamp(28px, 5vw, 74px);
    padding-inline-end: 0;
    z-index: 3
}

.mn-home .mn-bearings-v2__kicker {
    margin: 0 0 14px;
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .22em;
    color: rgba(236, 230, 218, .58)
}

.mn-home .mn-bearings-v2__title {
    margin: 0 0 5vh;
    font-family: var(--font-ar-display);
    font-weight: 400;
    font-size: clamp(2.37rem, 5.08vw, 5.25rem);
    line-height: .9;
    color: #ece6da
}

.mn-home .mn-bearings-v2__title span {
    color: #e7c88f
}

.mn-home .mn-bearings-v2__panels {
    position: relative;
    height: 31vh;
    min-height: 240px
}

.mn-home .mn-bearings-v2__panel {
    justify-content: flex-start
}

.mn-home .mn-bearings-v2__panel .mn-bp__meta {
    color: var(--bearing-accent);
    font-size: 10px
}

.mn-home .mn-bearings-v2__panel .mn-bp__h2 {
    font-size: clamp(1.69rem, 3.38vw, 3.38rem)
}

.mn-home .mn-bearings-v2__rail {
    position: absolute;
    left: 5vw;
    right: 5vw;
    bottom: 5.5vh;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(236, 230, 218, .1);
    border-bottom: 1px solid rgba(236, 230, 218, .08)
}

.mn-home .mn-bearings-v2__rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 14px;
    opacity: .38;
    transition: opacity .35s ease, background .35s ease
}

.mn-home .mn-bearings-v2__rail-item+.mn-bearings-v2__rail-item {
    border-inline-start: 1px solid rgba(236, 230, 218, .07)
}

.mn-home .mn-bearings-v2__rail-item::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--bearing-accent);
    transform: scaleX(0);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1)
}

.mn-home .mn-bearings-v2__rail-item.is-active {
    opacity: 1;
    background: rgba(236, 230, 218, .025)
}

.mn-home .mn-bearings-v2__rail-item.is-active::after {
    transform: scaleX(1)
}

.mn-home .mn-bearings-v2__rail-item b {
    font-family: var(--font-en);
    color: var(--bearing-accent);
    font-size: 12px;
    letter-spacing: .14em
}

.mn-home .mn-bearings-v2__rail-item small {
    font-family: var(--font-ar-display);
    font-size: 14px;
    color: #ece6da
}

.mn-home .mn-bearings-v2__handoff {
    position: absolute;
    left: 5vw;
    bottom: 1.8vh;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-en);
    font-size: 8px;
    letter-spacing: .16em;
    color: rgba(236, 230, 218, .34)
}

.mn-home .mn-bearings-v2__handoff i {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 180, 111, .25), #d8b46f)
}

.mn-home .mn-bearings-v2__handoff strong {
    font-weight: 500;
    color: #d8b46f
}

/* --- UNIFIED CAPABILITIES -------------------------------------------- */
.mn-home .mn-capabilities-v2 {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0A0E18;
    isolation: isolate;
    padding: 0 clamp(22px, 5vw, 78px)
}

.mn-home .mn-capv2__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(10, 14, 24, .18), rgba(10, 14, 24, .72) 52%, #0A0E18 82%)
}

.mn-home .mn-capv2__shell {
    --cap-accent: #d8b46f;
    position: relative;
    z-index: 3;
    width: min(100%, 1460px);
    margin: auto
}

.mn-home .mn-capv2__top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    margin-bottom: 4vh;
    border-bottom: 1px solid rgba(236, 230, 218, .1);
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .2em;
    color: rgba(236, 230, 218, .4)
}

.mn-home .mn-capv2__top span:first-child {
    color: #e7c88f
}

.mn-home .mn-capv2__eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .24em;
    color: rgba(236, 230, 218, .4)
}

.mn-home .mn-capv2__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(231, 200, 143, .45);
    font-size: 13px;
    color: #e7c88f
}

@media (max-width:820px) {
    

    

    

    

    

    

    

    

    

    .mn-home .mn-capabilities-v2 {
        padding: 18px;
        align-items: flex-start;
        overflow-y: auto
    }

    .mn-home .mn-capv2__shell {
        padding-top: calc(var(--mn-hd-h) + 10px);
        padding-bottom: 28px
    }

    .mn-home .mn-capv2__top span:last-child {
        display: none
    }
}

/* ========================================================================== 
   HOME FINAL PASS — CRAFT / PATH / ARRIVAL V4
   Applied on top of the user's latest home build. Scoped classes only.
   ========================================================================== */

/* ------------------------------ CRAFT ----------------------------------- */
.mn-home .mn-craftv4 {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(34px, 5vh, 64px) clamp(22px, 5vw, 72px);
    background: #0A0E18;
    isolation: isolate
}

.mn-home .mn-craftv4__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 70% at 50% 48%, rgba(199, 126, 58, .09), transparent 62%),
        linear-gradient(180deg, rgba(10, 14, 24, .12), rgba(10, 14, 24, .72));
    z-index: 0
}

.mn-home .mn-craftv4__shell {
    position: relative;
    z-index: 2;
    width: min(100%, 1460px);
    margin: auto
}

.mn-home .mn-craftv4__top,
.mn-home .mn-craftv4__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(236, 230, 218, .42)
}

.mn-home .mn-craftv4__top {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(236, 230, 218, .1);
    margin-bottom: 18px
}

.mn-home .mn-craftv4__top span:first-child {
    color: #E7C88F
}

.mn-home .mn-craftv4__frame {
    position: relative;
    height: min(68vh, 720px);
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(236, 230, 218, .14);
    background: #0A0E18;
    box-shadow: 0 40px 100px -58px rgba(0, 0, 0, .95)
}

.mn-home .mn-craftv4__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.065);
    filter: brightness(.56) saturate(.82) contrast(1.08)
}

.mn-home .mn-craftv4__grade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 14, 24, .83) 0%, rgba(10, 14, 24, .44) 44%, rgba(10, 14, 24, .1) 72%),
        linear-gradient(0deg, rgba(10, 14, 24, .62), transparent 42%);
    pointer-events: none
}

.mn-home .mn-craftv4__corners {
    position: absolute;
    inset: 14px;
    pointer-events: none
}

.mn-home .mn-craftv4__corners i {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(231, 200, 143, .58);
    border-style: solid
}

.mn-home .mn-craftv4__corners i:nth-child(1) {
    top: 0;
    left: 0;
    border-width: 1px 0 0 1px
}

.mn-home .mn-craftv4__corners i:nth-child(2) {
    top: 0;
    right: 0;
    border-width: 1px 1px 0 0
}

.mn-home .mn-craftv4__corners i:nth-child(3) {
    bottom: 0;
    left: 0;
    border-width: 0 0 1px 1px
}

.mn-home .mn-craftv4__corners i:nth-child(4) {
    bottom: 0;
    right: 0;
    border-width: 0 1px 1px 0
}

.mn-home .mn-craftv4__timecode {
    position: absolute;
    top: 28px;
    left: 30px;
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .2em;
    color: rgba(236, 230, 218, .46)
}

.mn-home .mn-craftv4__copy {
    position: absolute;
    z-index: 2;
    right: clamp(26px, 5vw, 78px);
    bottom: clamp(30px, 7vh, 84px);
    max-width: min(690px, 56%)
}

.mn-home .mn-craftv4__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .22em;
    color: #E7C88F
}

.mn-home .mn-craftv4__kicker:before {
    content: "";
    width: 34px;
    height: 1px;
    background: #C77E3A
}

.mn-home .mn-craftv4__copy h2 {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 400;
    font-size: clamp(2.45rem, 5.08vw, 5.5rem);
    line-height: .95;
    color: #ECE6DA;
    letter-spacing: -.03em
}

.mn-home .mn-craftv4__copy h2 em {
    display: block;
    font-style: normal;
    color: #E7C88F
}

.mn-home .mn-craftv4__copy p {
    max-width: 54ch;
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: rgba(236, 230, 218, .66)
}

.mn-home .mn-craftv4__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(231, 200, 143, .55);
    font-size: 13px;
    color: #E7C88F
}

.mn-home .mn-craftv4__foot {
    padding-top: 14px;
    border-top: 1px solid rgba(236, 230, 218, .07);
    margin-top: 18px;
    justify-content: center
}

.mn-home .mn-craftv4__foot i {
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C77E3A, transparent)
}

/* ------------------------------- PATH ----------------------------------- */
.mn-home .mn-pathv4 {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(34px, 5vh, 66px) clamp(22px, 5vw, 72px);
    overflow: hidden;
    background: #0A0E18;
    isolation: isolate
}

.mn-home .mn-pathv4__field {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(55% 70% at 65% 50%, rgba(199, 126, 58, .08), transparent 68%),
        repeating-radial-gradient(ellipse at 50% 55%, rgba(236, 230, 218, .035) 0 1px, transparent 1px 34px);
    opacity: .7;
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent)
}

.mn-home .mn-pathv4__shell {
    position: relative;
    z-index: 2;
    width: min(100%, 1460px);
    margin: auto
}

.mn-home .mn-pathv4__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(236, 230, 218, .1);
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(236, 230, 218, .4)
}

.mn-home .mn-pathv4__top span:first-child {
    color: #E7C88F
}

.mn-home .mn-pathv4__head {
    margin-top: clamp(26px, 4vh, 46px);
    max-width: 780px
}

.mn-home .mn-pathv4__eyebrow {
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(236, 230, 218, .44)
}

.mn-home .mn-pathv4__head h2 {
    margin: 10px 0 0;
    font-family: var(--font-ar-display);
    font-weight: 400;
    font-size: clamp(2.11rem, 4.57vw, 4.57rem);
    line-height: .96;
    color: #ECE6DA
}

.mn-home .mn-pathv4__head h2 strong {
    color: #E7C88F;
    font-weight: 400
}

.mn-home .mn-pathv4__route {
    position: relative;
    height: min(48vh, 440px);
    min-height: 340px;
    margin-top: clamp(24px, 4vh, 44px)
}

.mn-home .mn-pathv4__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.mn-home .mn-pathv4__base,
.mn-home .mn-pathv4__trace {
    fill: none;
    vector-effect: non-scaling-stroke
}

.mn-home .mn-pathv4__base {
    stroke: rgba(236, 230, 218, .12);
    stroke-width: 1.2;
    stroke-dasharray: 5 9
}

.mn-home .mn-pathv4__trace {
    stroke: #C77E3A;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 5px rgba(199, 126, 58, .4))
}

.mn-home .mn-pathv4__needle {
    position: absolute;
    left: 95.5%;
    top: 73%;
    width: 18px;
    height: 34px;
    margin: -17px 0 0 -9px;
    z-index: 5;
    transition: left .06s linear, top .06s linear;
    pointer-events: none
}

.mn-home .mn-pathv4__needle:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    width: 2px;
    height: 25px;
    background: linear-gradient(#E7C88F, rgba(231, 200, 143, .15));
    box-shadow: 0 0 10px rgba(231, 200, 143, .7);
    transform-origin: 50% 100%;
    transform: rotate(18deg)
}

.mn-home .mn-pathv4__needle i {
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0A0E18;
    border: 1px solid #E7C88F;
    box-shadow: 0 0 10px rgba(231, 200, 143, .5)
}

.mn-home .mn-pathv4__point {
    position: absolute;
    left: var(--px);
    top: var(--py);
    z-index: 4;
    transform: translate(-50%, -50%);
    width: min(250px, 21vw)
}

.mn-home .mn-pathv4__marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(236, 230, 218, .22);
    border-radius: 50%;
    background: #0A0E18;
    display: grid;
    place-items: center;
    transition: border-color .35s, box-shadow .35s, background .35s
}

.mn-home .mn-pathv4__marker b {
    font-family: var(--font-en);
    font-size: 7px;
    color: rgba(236, 230, 218, .45);
    font-weight: 500
}

.mn-home .mn-pathv4__copy {
    margin-top: 22px;
    padding-top: 11px;
    border-top: 1px solid rgba(236, 230, 218, .1);
    opacity: .48;
    transition: opacity .4s, border-color .4s, transform .5s cubic-bezier(.16, 1, .3, 1)
}

.mn-home .mn-pathv4__copy>span {
    font-family: var(--font-en);
    font-size: 8px;
    letter-spacing: .16em;
    color: rgba(236, 230, 218, .6)
}

.mn-home .mn-pathv4__copy h3 {
    margin: 6px 0 7px;
    font-family: var(--font-ar-display);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 400;
    color: #ECE6DA
}

.mn-home .mn-pathv4__copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(236, 230, 218, .52)
}

.mn-home .mn-pathv4__point.is-reached .mn-pathv4__marker {
    border-color: #E7C88F;
    background: #C77E3A;
    box-shadow: 0 0 22px rgba(199, 126, 58, .28)
}

.mn-home .mn-pathv4__point.is-reached .mn-pathv4__marker b {
    color: #0A0E18
}

.mn-home .mn-pathv4__point.is-reached .mn-pathv4__copy {
    opacity: 1;
    border-color: rgba(199, 126, 58, .42);
    transform: translateY(-3px)
}

/* ----------------------------- ARRIVAL ---------------------------------- */
.mn-home .mn-arrivalv4 {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(36px, 6vh, 76px) clamp(22px, 6vw, 88px);
    overflow: hidden;
    background: #0A0E18;
    isolation: isolate
}

.mn-home .mn-arrivalv4__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 70% 50%, rgba(199, 126, 58, .11), transparent 42%)
}

.mn-home .mn-arrivalv4__field:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(236, 230, 218, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 230, 218, .025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(circle at 70% 50%, #000, transparent 67%)
}

.mn-home .mn-arrivalv4__field i {
    position: absolute;
    border: 1px solid rgba(231, 200, 143, .07);
    border-radius: 50%;
    right: clamp(-110px, -5vw, -30px);
    top: 50%;
    transform: translateY(-50%)
}

.mn-home .mn-arrivalv4__field i:nth-child(1) {
    width: min(56vw, 760px);
    aspect-ratio: 1
}

.mn-home .mn-arrivalv4__field i:nth-child(2) {
    width: min(40vw, 540px);
    aspect-ratio: 1
}

.mn-home .mn-arrivalv4__field i:nth-child(3) {
    width: min(24vw, 320px);
    aspect-ratio: 1;
    border-color: rgba(231, 200, 143, .13)
}

.mn-home .mn-arrivalv4__shell {
    position: relative;
    z-index: 2;
    width: min(100%, 1460px)
}

.mn-home .mn-arrivalv4__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(236, 230, 218, .1);
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(236, 230, 218, .4)
}

.mn-home .mn-arrivalv4__top span:first-child {
    color: #E7C88F
}

.mn-home .mn-arrivalv4__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    gap: clamp(48px, 8vw, 130px);
    align-items: center;
    min-height: 62vh
}

.mn-home .mn-arrivalv4__copy {
    max-width: 760px
}

.mn-home .mn-arrivalv4__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .22em;
    color: #E7C88F
}

.mn-home .mn-arrivalv4__eyebrow:before {
    content: "";
    width: 34px;
    height: 1px;
    background: #C77E3A
}

.mn-home .mn-arrivalv4__copy h2 {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 400;
    font-size: clamp(2.71rem, 5.92vw, 6.43rem);
    line-height: .9;
    color: #ECE6DA;
    letter-spacing: -.04em
}

.mn-home .mn-arrivalv4__copy h2 strong {
    display: block;
    color: #E7C88F;
    font-weight: 400
}

.mn-home .mn-arrivalv4__copy p {
    max-width: 52ch;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.9;
    color: rgba(236, 230, 218, .62)
}

.mn-home .mn-arrivalv4__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px
}

.mn-home .mn-arrivalv4__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border: 1px solid #C77E3A;
    background: #C77E3A;
    color: #0A0E18 !important;
    font-weight: 600;
    font-size: 13px;
    transition: background .3s, border-color .3s, transform .3s
}

.mn-home .mn-arrivalv4__cta:hover {
    background: #E7C88F;
    border-color: #E7C88F;
    transform: translateY(-1px)
}

.mn-home .mn-arrivalv4__cta-arrow {
    font-family: var(--font-en)
}

/* Live compass mark inside the CTA — the needle keeps hunting for north. */
.mn-home .mn-arrivalv4__cta-compass {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(10, 14, 24, .45)
}

.mn-home .mn-arrivalv4__cta-compass b {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(10, 14, 24, .22)
}

.mn-home .mn-arrivalv4__cta-compass i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 8px;
    border-radius: 1px;
    background: linear-gradient(#0A0E18, rgba(10, 14, 24, .3));
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%);
    animation: mnArrCompass 4.2s cubic-bezier(.65, 0, .35, 1) infinite
}

.mn-home .mn-arrivalv4__cta-compass::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0A0E18;
    transform: translate(-50%, -50%)
}

@keyframes mnArrCompass {
    0%   { transform: translate(-50%, -100%) rotate(0deg) }
    28%  { transform: translate(-50%, -100%) rotate(155deg) }
    46%  { transform: translate(-50%, -100%) rotate(95deg) }
    70%  { transform: translate(-50%, -100%) rotate(210deg) }
    100% { transform: translate(-50%, -100%) rotate(360deg) }
}

/* Slow continuous life in the big instrument. */
.mn-home .mn-arrivalv4__dial {
    animation: mnArrDialSpin 44s linear infinite
}

.mn-home .mn-arrivalv4__field i {
    animation: mnArrRingPulse 6s ease-in-out infinite
}

.mn-home .mn-arrivalv4__field i:nth-child(2) { animation-delay: .7s }
.mn-home .mn-arrivalv4__field i:nth-child(3) { animation-delay: 1.4s }

@keyframes mnArrDialSpin {
    to { transform: rotate(360deg) }
}

@keyframes mnArrRingPulse {
    0%, 100% { opacity: .5; transform: translateY(-50%) scale(1) }
    50%      { opacity: 1;  transform: translateY(-50%) scale(1.02) }
}

.mn-home .mn-arrivalv4__secondary {
    font-size: 13px;
    color: rgba(236, 230, 218, .62);
    border-bottom: 1px solid rgba(236, 230, 218, .2);
    padding-bottom: 5px
}

.mn-home .mn-arrivalv4__instrument {
    position: relative;
    width: min(38vw, 440px);
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center
}

.mn-home .mn-arrivalv4__dial,
.mn-home .mn-arrivalv4__dial:before,
.mn-home .mn-arrivalv4__dial:after {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(236, 230, 218, .13)
}

.mn-home .mn-arrivalv4__dial {
    inset: 0;
    background: repeating-conic-gradient(from 0deg, rgba(231, 200, 143, .28) 0 .4deg, transparent .4deg 5deg);
    mask-image: radial-gradient(circle, transparent 70%, #000 70.5% 72%, transparent 72.5%)
}

.mn-home .mn-arrivalv4__dial:before {
    content: "";
    inset: 17%
}

.mn-home .mn-arrivalv4__dial:after {
    content: "";
    inset: 34%;
    border-color: rgba(231, 200, 143, .18)
}

.mn-home .mn-arrivalv4__needle {
    position: absolute;
    inset: 0;
    transform: rotate(-32deg);
    transition: none
}

.mn-home .mn-arrivalv4__needle span {
    position: absolute;
    left: 50%;
    top: 8%;
    width: 2px;
    height: 42%;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    background: linear-gradient(#E7C88F, rgba(231, 200, 143, .08));
    box-shadow: 0 0 14px rgba(231, 200, 143, .55)
}

.mn-home .mn-arrivalv4__instrument>b {
    position: relative;
    z-index: 2;
    font-family: var(--font-en);
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    font-weight: 400;
    letter-spacing: .02em;
    color: #E7C88F;
    text-shadow: 0 0 34px rgba(231, 200, 143, .18)
}

.mn-home .mn-arrivalv4__instrument>small {
    position: absolute;
    bottom: 30%;
    font-family: var(--font-en);
    font-size: 8px;
    letter-spacing: .28em;
    color: rgba(236, 230, 218, .36)
}

.mn-home .mn-arrivalv4__lock {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(236, 230, 218, .1);
    font-family: var(--font-en);
    font-size: 9px;
    letter-spacing: .17em;
    color: rgba(236, 230, 218, .42)
}

.mn-home .mn-arrivalv4__lock i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(199, 126, 58, .5), transparent)
}

.mn-home .mn-arrivalv4__lock b {
    color: #E7C88F;
    font-weight: 500
}

.mn-home .mn-arrivalv4__lock em {
    font-style: normal;
    color: #E7C88F
}

.mn-home .mn-arrivalv4__lock.is-locked {
    color: #E7C88F
}

@media (max-width:820px) {

    .mn-home .mn-craftv4,
    .mn-home .mn-pathv4,
    .mn-home .mn-arrivalv4 {
        padding: 18px 16px 28px !important;
        align-items: flex-start !important;
        overflow-y: auto !important
    }

    .mn-home .mn-craftv4__top span:last-child,
    .mn-home .mn-pathv4__top span:last-child,
    .mn-home .mn-arrivalv4__top span:last-child {
        display: none
    }

    /* The phone craft still is a 16:10 block sized by aspect-ratio in the
       native composition below. This rule used to force a 430px floor,
       which won and stretched the still to a 4:5 box. */
    .mn-home .mn-craftv4__frame {
        margin-top: 14px;
    }

    .mn-home .mn-craftv4__media {
        filter: brightness(.5) saturate(.82) contrast(1.06)
    }

    .mn-home .mn-craftv4__grade {
        background: linear-gradient(0deg, rgba(10, 14, 24, .9), rgba(10, 14, 24, .18) 72%)
    }

    .mn-home .mn-craftv4__copy {
        right: 22px;
        left: 22px;
        bottom: 28px;
        max-width: none
    }

    .mn-home .mn-craftv4__copy h2 {
        font-size: clamp(2.03rem, 10.15vw, 3.72rem)
    }

    .mn-home .mn-craftv4__copy p {
        font-size: 13px;
        line-height: 1.75
    }

    .mn-home .mn-craftv4__timecode {
        top: 24px;
        left: 22px
    }

    .mn-home .mn-craftv4__foot {
        font-size: 7px;
        letter-spacing: .12em
    }

    .mn-home .mn-craftv4__foot span:last-child {
        display: none
    }

    /* Phone PATH: compact the whole act so the title + all four waypoints
       fit one viewport without inner scrolling (the title was being pushed
       off before). */
    .mn-home .mn-pathv4 {
        padding: 14px 16px 18px !important;
        overflow-y: hidden !important
    }

    .mn-home .mn-pathv4__head {
        margin-top: 10px
    }

    .mn-home .mn-pathv4__head h2 {
        font-size: clamp(1.57rem, 7.11vw, 2.54rem)
    }

    .mn-home .mn-pathv4__route {
        height: auto;
        min-height: 0;
        margin-top: 12px;
        padding: 4px 0
    }

    .mn-home .mn-pathv4__svg,
    .mn-home .mn-pathv4__needle {
        display: none
    }

    .mn-home .mn-pathv4__route:before {
        content: "";
        position: absolute;
        top: 18px;
        bottom: 18px;
        right: 15px;
        width: 1px;
        background: linear-gradient(#C77E3A, rgba(199, 126, 58, .12))
    }

    .mn-home .mn-pathv4__point {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto;
        margin: 0 0 11px;
        padding-right: 44px;
        min-height: 0
    }

    .mn-home .mn-pathv4__marker {
        left: auto;
        right: 3px;
        top: 6px;
        transform: none
    }

    .mn-home .mn-pathv4__copy {
        margin-top: 0;
        padding: 0 0 10px;
        border-top: 0;
        border-bottom: 1px solid rgba(236, 230, 218, .1);
        opacity: 1
    }

    .mn-home .mn-pathv4__copy>span {
        font-size: 7.5px
    }

    .mn-home .mn-pathv4__copy h3 {
        font-size: .98rem;
        margin: 2px 0 4px
    }

    .mn-home .mn-pathv4__copy p {
        font-size: 11.5px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .mn-home .mn-pathv4__point:last-child .mn-pathv4__copy {
        border-bottom: 0
    }

    .mn-home .mn-arrivalv4__grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        padding: 34px 0 24px
    }

    .mn-home .mn-arrivalv4__copy h2 {
        font-size: clamp(2.54rem, 12.69vw, 4.23rem)
    }

    .mn-home .mn-arrivalv4__copy p {
        font-size: 13.5px
    }

    .mn-home .mn-arrivalv4__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 24px
    }

    .mn-home .mn-arrivalv4__instrument {
        width: min(78vw, 330px);
        order: -1
    }

    .mn-home .mn-arrivalv4__lock {
        font-size: 7.5px;
        letter-spacing: .1em;
        gap: 8px;
        flex-wrap: wrap
    }

    .mn-home .mn-arrivalv4__lock i {
        display: none
    }

    .mn-home .mn-arrivalv4__field i:nth-child(1) {
        width: 120vw
    }

    .mn-home .mn-arrivalv4__field i:nth-child(2) {
        width: 86vw
    }

    .mn-home .mn-arrivalv4__field i:nth-child(3) {
        width: 50vw
    }
}

/* CRAFT V5 — real showreel controls */
.mn-home .mn-craftv4__frame>video.mn-craftv4__media {
    display: block;
    border: 0;
    background: #0A0E18
}

.mn-home .mn-craftv4__play {
    opacity: 0;
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(231, 200, 143, .58);
    border-radius: 50%;
    background: rgba(9, 9, 8, .28);
    color: #F0D9A6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s, border-color .3s
}

.mn-home .mn-craftv4__play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(9, 9, 8, .55);
    border-color: #E7C88F
}

.mn-home .mn-craftv4__play b {
    font-family: var(--font-en);
    font-size: 7px;
    font-weight: 500;
    letter-spacing: .2em
}

.mn-home .mn-craftv4__play-icon {
    position: relative;
    width: 18px;
    height: 20px
}

.mn-home .mn-craftv4__play:not(.is-playing) .mn-craftv4__play-icon:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #E7C88F
}

.mn-home .mn-craftv4__play.is-playing .mn-craftv4__play-icon:before,
.mn-home .mn-craftv4__play.is-playing .mn-craftv4__play-icon:after {
    content: "";
    position: absolute;
    top: 1px;
    width: 4px;
    height: 18px;
    background: #E7C88F
}

.mn-home .mn-craftv4__play.is-playing .mn-craftv4__play-icon:before {
    left: 3px
}

.mn-home .mn-craftv4__play.is-playing .mn-craftv4__play-icon:after {
    right: 3px
}

@media(max-width:820px) {
    .mn-home .mn-craftv4__play {
        width: 72px;
        height: 72px
    }

    .mn-home .mn-craftv4__play b {
        font-size: 6px
    }
}

/* ============================================================================
   CHAPTERS 02–08 — v5 composition
   ----------------------------------------------------------------------------
   Each chapter below declares two things and inherits everything else from the
   v5 component system above:

     --scrim   where the dark mass sits, so type never lands on busy pixels
     --bloom   where the single warm highlight sits

   Desktop keeps the pinned, scroll-driven staging. The `@media (max-width:820px)`
   groups at the end of each chapter are the phone layouts — they are authored
   compositions in their own right, not squeezed desktop grids.
   ============================================================================ */

/* ============================================================ 02 · BEARINGS */
.mn-home .mn-bearings-v2 {
    --scrim: linear-gradient(270deg, rgba(5, 7, 12, .92) 0%, rgba(5, 7, 12, .70) 38%, rgba(5, 7, 12, .30) 72%, rgba(5, 7, 12, .60) 100%);
    --bloom: 30% 50%;
}

/* The per-direction photograph is now a tint, not a background. It sits above
   the section artwork at low opacity and blends, so the two never fight. */
.mn-home .mn-bearings-v2__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    mix-blend-mode: soft-light;
    filter: grayscale(.4) contrast(1.06);
    transition: opacity .6s var(--ease);
}

.mn-home .mn-bearings-v2__title {
    font-family: var(--font-ar-display);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.12;
}

.mn-home .mn-bearings-v2__title span {
    background: linear-gradient(180deg, #F3E2C0, #D8A45C 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================ 03 · THE WORK */
.mn-home .mn-p-work {
    --scrim: linear-gradient(180deg, rgba(5, 7, 12, .90) 0%, rgba(5, 7, 12, .74) 26%, rgba(5, 7, 12, .80) 62%, rgba(5, 7, 12, .96) 100%);
    --bloom: 62% 18%;
    isolation: isolate;
}

.mn-home .mn-section-hdr__title {
    font-family: var(--font-ar-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* The poster card. Desktop: a tall gallery frame under rack focus.
   Phone: re-composed below into the reference card. */
.mn-home .mn-frame {
    border-radius: 14px;
    overflow: hidden;
    background-color: #080B12;
    border: 1px solid rgba(231, 200, 143, .14);
    transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.mn-home .mn-frame.is-hot {
    border-color: rgba(231, 200, 143, .5);
    box-shadow:
        0 40px 110px -46px rgba(0, 0, 0, .95),
        0 0 44px -10px rgba(203, 162, 99, .22);
}

/* ================================================================ 04 · ABOUT */
.mn-home .mn-aboutv3 {
    --scrim: linear-gradient(270deg, rgba(5, 7, 12, .34) 0%, rgba(5, 7, 12, .78) 44%, rgba(5, 7, 12, .96) 100%);
    --bloom: 26% 44%;
}

.mn-home .mn-aboutv3__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas:
        "manifesto quote"
        "principles principles"
        "foot foot";
    align-items: start;
    gap: var(--stack-md) clamp(28px, 4vw, 72px);
    width: min(1240px, 100%);
    margin-inline: auto;
}

.mn-home .mn-aboutv3__manifesto {
    grid-area: manifesto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-sm);
}

.mn-home .mn-aboutv3__title {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 700;
    font-size: clamp(1.69rem, 2.79vw, 2.88rem);
    line-height: 1.16;
    letter-spacing: -.015em;
    color: var(--bone);
}

.mn-home .mn-aboutv3__title-gold {
    display: block;
    background: linear-gradient(180deg, #F3E2C0, #D8A45C 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mn-home .mn-aboutv3__title strong {
    display: block;
    font-weight: 700;
}

.mn-home .mn-aboutv3__lead {
    max-width: 52ch;
    margin: 0;
    font-family: var(--font-ar-body);
    font-size: clamp(14.5px, 1.02vw, 16.5px);
    line-height: 2.05;
    color: var(--bone-70);
}

/* Three principles — a hairline-separated row, not three cards. */
.mn-home .mn-aboutv3__principles {
    grid-area: principles;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

.mn-home .mn-aboutv3__principle {
    padding: clamp(18px, 2vw, 28px) clamp(14px, 1.8vw, 26px);
    border-inline-start: var(--rule);
}

.mn-home .mn-aboutv3__principle:first-child {
    border-inline-start: 0;
}

.mn-home .mn-aboutv3__principle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border: var(--rule-gold);
    border-radius: 50%;
    font-size: 15px;
    color: var(--gold-200);
}

.mn-home .mn-aboutv3__principle-title {
    margin: 0 0 8px;
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: clamp(15px, 1.15vw, 18px);
    color: var(--bone);
}

.mn-home .mn-aboutv3__principle-desc {
    margin: 0;
    max-width: 34ch;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--bone-50);
}

/* The quote is the emotional beat — it gets the one glass surface. */
.mn-home .mn-aboutv3__quote {
    grid-area: quote;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: clamp(24px, 2.6vw, 40px);
}

.mn-home .mn-aboutv3__quote-mark {
    font-family: var(--font-ar-display);
    font-size: 3.4rem;
    line-height: .6;
    color: var(--gold-300);
    opacity: .55;
}

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

.mn-home .mn-aboutv3__quote p {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 24px);
    line-height: 1.75;
    color: var(--bone);
}

.mn-home .mn-aboutv3__quote-by {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-ar-body);
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--gold-200);
}

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

.mn-home .mn-aboutv3__foot {
    grid-area: foot;
    display: flex;
    justify-content: flex-start;
}

/* ========================================================= 05 · CAPABILITIES */
.mn-home .mn-capabilities-v2 {
    --scrim: linear-gradient(180deg, rgba(5, 7, 12, .90) 0%, rgba(5, 7, 12, .78) 34%, rgba(5, 7, 12, .84) 70%, rgba(5, 7, 12, .96) 100%);
    --bloom: 50% 22%;
}

/* ================================================================ 06 · CRAFT */
.mn-home .mn-craftv4 {
    --scrim: linear-gradient(180deg, rgba(5, 7, 12, .92) 0%, rgba(5, 7, 12, .62) 30%, rgba(5, 7, 12, .70) 66%, rgba(5, 7, 12, .96) 100%);
    --bloom: 50% 30%;
}

.mn-home .mn-craftv4__frame {
    border-radius: 16px;
    overflow: hidden;
}

.mn-home .mn-craftv4 h2 {
    font-family: var(--font-ar-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

.mn-home .mn-craftv4 h2 em {
    font-style: normal;
    background: linear-gradient(180deg, #F3E2C0, #D8A45C 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ================================================================= 07 · PATH */
.mn-home .mn-pathv4 {
    --scrim: linear-gradient(180deg, rgba(5, 7, 12, .93) 0%, rgba(5, 7, 12, .80) 32%, rgba(5, 7, 12, .84) 68%, rgba(5, 7, 12, .96) 100%);
    --bloom: 50% 26%;
}

.mn-home .mn-pathv4 h2 {
    font-family: var(--font-ar-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

.mn-home .mn-pathv4 h2 strong {
    font-weight: 700;
    background: linear-gradient(180deg, #F3E2C0, #D8A45C 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Five waypoints instead of four: tighten the copy block so two neighbouring
   points cannot collide at laptop width. */
.mn-home .mn-pathv4__copy {
    max-width: 20ch;
}

.mn-home .mn-pathv4__point.is-reached .mn-pathv4__marker {
    border-color: var(--gold-200);
    box-shadow: 0 0 18px rgba(231, 200, 143, .45);
}

/* ============================================================== 08 · ARRIVAL */
/* The conversion moment. It gets the most scroll time of any chapter after
   Selected Work, the largest type, and the only other gold fill on the page. */
.mn-home .mn-arrivalv4 {
    --scrim: linear-gradient(180deg, rgba(5, 7, 12, .95) 0%, rgba(5, 7, 12, .72) 26%, rgba(5, 7, 12, .40) 56%, rgba(5, 7, 12, .30) 100%);
    --bloom: 50% 74%;
}

.mn-home .mn-arrivalv4 h2 {
    font-family: var(--font-ar-display);
    font-weight: 700;
    font-size: clamp(1.78rem, 3.38vw, 3.55rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--bone);
}

.mn-home .mn-arrivalv4 h2 strong {
    font-weight: 700;
    background: linear-gradient(180deg, #F3E2C0, #D8A45C 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mn-home .mn-arrivalv4__cta {
    min-height: 58px;
}


/* ============================================================================
   SELECTED WORK — card internals
   The card is an <article> holding two actions: an overlay link that opens the
   project, and (when there is video) a play control above it. Both are real,
   focusable elements — the old markup nested a button inside an anchor.
   ============================================================================ */

.mn-frame__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #080B12;
}

.mn-frame__img,
.work-media-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}

.mn-frame__img {
    transition: transform 1.1s var(--ease);
}

.mn-frame.is-hot .mn-frame__img {
    transform: scale(1.04);
}

/* The overlay link: the whole card is the hit area, but only the title is in
   the accessibility tree as the link name. */
.mn-frame__link {
    color: inherit;
    text-decoration: none;
}

.mn-frame__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.mn-frame__link:focus-visible::after {
    outline: 2px solid var(--gold-200);
    outline-offset: -6px;
}

/* Play control — sits above the overlay link so a tap on it plays rather
   than navigates. */
.work-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 1px solid rgba(231, 200, 143, .6);
    border-radius: 50%;
    background: rgba(10, 14, 24, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, border-color .3s ease, transform .3s var(--ease);
}

.work-media-play:hover,
.work-media-play:focus-visible {
    background: rgba(224, 149, 75, .9);
    border-color: var(--gold-100);
    transform: translate(-50%, -50%) scale(1.06);
}

.work-media-play__icon {
    width: 0;
    height: 0;
    margin-inline-start: 3px;
    /* RTL page, but a play glyph always points along the media timeline —
       which is left-to-right. Keep it pointing right. */
    border-block: 8px solid transparent;
    border-inline-start: 13px solid var(--gold-100);
    border-inline-end: 0;
}

.work-media-play:hover .work-media-play__icon,
.work-media-play:focus-visible .work-media-play__icon {
    border-inline-start-color: var(--ink-900);
}

/* Once a preview is running the poster and the control step aside. */
.mn-frame.is-media-playing .work-media-play {
    opacity: 0;
    pointer-events: none;
}

.mn-frame.is-media-playing .mn-frame__img {
    opacity: 0;
}

.work-media-surface {
    z-index: 2;
}

/* While a preview is running the player owns the media area. The card's
   overlay link (z-index 4) sat on top of it, so every click meant to hit the
   scrubber or the mute button navigated to the project page instead. The
   surface is lifted above the overlay and the overlay stops taking clicks —
   the title anchor itself is still a real, focusable link. */
.mn-frame.is-media-playing .work-media-surface {
    z-index: 5;
}

.mn-frame.is-media-playing .mn-frame__link::after {
    pointer-events: none;
}

/* Stop control: returns the card to its poster. Without it a preview that
   has started can only be escaped by leaving the page. */
.work-media-stop {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 7;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(231, 200, 143, .45);
    border-radius: 50%;
    background: rgba(10, 14, 24, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--gold-100);
    font-family: var(--font-en);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, transform .3s var(--ease);
}

.mn-frame.is-media-playing .work-media-stop {
    display: inline-flex;
}

.work-media-stop:hover,
.work-media-stop:focus-visible {
    background: rgba(224, 149, 75, .92);
    border-color: var(--gold-100);
    color: var(--ink-900);
    transform: scale(1.08);
}

/* On the phone card the poster is a panel on the leading side, not a
   full-bleed background, so the control centres over that panel. */
@media (max-width: 820px) {
    
}

/* ============================================================================
   PHONE COMPOSITIONS
   ----------------------------------------------------------------------------
   These are the authored mobile layouts. They run on the native document route
   (see mn-motion.css → NATIVE DOCUMENT FLOW), so every rule here can assume:
   normal block flow, one vertical scroller, no timeline, no pinned stage.
   ============================================================================ */
@media (max-width: 820px) {

    /* Shared: the section header block used by Work / Capabilities / Path. */
    .mn-home #mn-root.mn-native .mn-section-hdr__meta {
        font-size: 10px;
        letter-spacing: .26em;
    }

    .mn-home #mn-root.mn-native .mn-section-hdr__title {
        font-size: clamp(1.61rem, 7.61vw, 2.2rem);
        line-height: 1.2;
    }

    /* ---------------------------------------------------- 02 · BEARINGS ----
       The phone composition for this chapter is the constellation in the v6
       block further down (hub disc + three badge cards). It used to be a
       plain vertical stack here; keeping both meant two sets of rules
       fighting over the same elements, with the winner decided by source
       order rather than intent. Only the parts that are not layout live
       here now. */
    

    

    /* The desktop chapter is a fixed-height stage (44vh inner, 31vh panel
       well) because the pinned engine cross-fades three panels in the same
       box. In document flow those heights truncate the constellation — the
       cards overflowed into SELECTED WORK and were clipped. */
    

    /* ------------------------------------------------ 03 · SELECTED WORK ---- */
    /* The reference card: image on the leading side, copy beside it, index
       numeral and a chevron affordance. Lives inside the horizontal rail. */
    

    

    

    

    

    

    

    /* The CTA becomes a circular chevron button, as in the reference. */
    

    

    

    /* A thin divider above the copy, matching the reference card. */
    

    

    /* Swipe hint — appears once, and only while the rail is at the start. */
    

    /* ------------------------------------------------------- 04 · ABOUT ---- */
    .mn-home #mn-root.mn-native .mn-aboutv3 {
        --scrim: linear-gradient(180deg, rgba(5, 7, 12, .72) 0%, rgba(5, 7, 12, .52) 22%, rgba(5, 7, 12, .88) 58%, rgba(5, 7, 12, .97) 100%);
        --bloom: 68% 22%;
        display: block;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__field,
    .mn-home #mn-root.mn-native .mn-aboutv3__topline {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__grid {
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

    /* The portrait in the artwork occupies the upper right; push the type
       below it so the face is never covered. */
    .mn-home #mn-root.mn-native .mn-aboutv3__manifesto {
        padding-top: clamp(120px, 34vw, 200px);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__title {
        font-size: clamp(1.61rem, 7.61vw, 2.2rem);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principles {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle {
        display: grid;
        grid-template-columns: 34px 1fr;
        grid-template-areas: "icon title" ". desc";
        align-items: center;
        gap: 4px 14px;
        padding: 16px 0;
        border-inline-start: 0;
        border-top: var(--rule);
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-icon {
        grid-area: icon;
        margin: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-title {
        grid-area: title;
        margin: 0;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__principle-desc {
        grid-area: desc;
        max-width: none;
        margin-top: 4px;
    }

    .mn-home #mn-root.mn-native .mn-aboutv3__quote p {
        font-size: 16.5px;
    }


    /* ------------------------------------------------------- 06 · CRAFT ---- */
    .mn-home #mn-root.mn-native .mn-craftv4__top,
    .mn-home #mn-root.mn-native .mn-craftv4__foot,
    .mn-home #mn-root.mn-native .mn-craftv4__timecode {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__shell {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__frame {
        position: relative;
        aspect-ratio: 16 / 10;
        height: auto;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy {
        position: static;
        padding: 0;
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy h2 {
        font-size: clamp(1.44rem, 6.77vw, 1.95rem);
    }

    /* -------------------------------------------------------- 07 · PATH ---- */
    /* The desktop SVG route is a horizontal course; a phone gets a vertical
       trail instead — same idea, legible at 390px. */
    .mn-home #mn-root.mn-native .mn-pathv4__svg,
    .mn-home #mn-root.mn-native .mn-pathv4__needle,
    .mn-home #mn-root.mn-native .mn-pathv4__top {
        display: none;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__route {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: auto !important;
        padding-top: 8px;
    }

    /* The trail itself. */
    .mn-home #mn-root.mn-native .mn-pathv4__route::before {
        content: "";
        position: absolute;
        top: 26px;
        bottom: 26px;
        inset-inline-start: 21px;
        width: 1px;
        background: linear-gradient(180deg,
                transparent,
                rgba(224, 149, 75, .55) 8%,
                rgba(224, 149, 75, .55) 92%,
                transparent);
    }

    /* The desktop waypoints are absolutely placed on the SVG course; in
       document flow they become rows on a vertical spine. Only the
       positioning needs forcing — opacity and transform are owned by the
       entrance choreography, and pinning them here with !important made the
       waypoints immune to it. */
    .mn-home #mn-root.mn-native .mn-pathv4__point {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: start;
        gap: 0 16px;
        padding: 0 0 30px;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:last-child {
        padding-bottom: 0;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__marker {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(224, 149, 75, .45);
        border-radius: 50%;
        background: var(--ink-800);
        font-family: var(--font-en);
        font-size: 15px;
        color: var(--gold-200);
    }

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

    .mn-home #mn-root.mn-native .mn-pathv4__copy {
        max-width: none;
        padding-top: 4px;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy span {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-en);
        font-size: 9.5px;
        letter-spacing: .22em;
        color: var(--bone-30);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy h3 {
        margin: 0 0 6px;
        font-family: var(--font-ar-display);
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--gold-200);
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.9;
        color: var(--bone-50);
    }

    /* ----------------------------------------------------- 08 · ARRIVAL ---- */
    .mn-home #mn-root.mn-native .mn-arrivalv4 {
        --scrim: linear-gradient(180deg, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .80) 22%, rgba(5, 7, 12, .34) 54%, rgba(5, 7, 12, .28) 100%);
        --bloom: 50% 78%;
        display: block;
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__instrument,
    .mn-home #mn-root.mn-native .mn-arrivalv4__top,
    .mn-home #mn-root.mn-native .mn-arrivalv4__field {
        display: none;
    }

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

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2 {
        font-size: clamp(1.78rem, 8.46vw, 2.54rem);
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 14px;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__cta {
        width: 100%;
    }

    /* The coordinate lock becomes the trust footer from the reference. */
    .mn-home #mn-root.mn-native .mn-arrivalv4__lock {
        margin-top: 30px;
        padding: 14px 16px;
        border: var(--rule);
        border-radius: 14px;
        background: rgba(10, 14, 24, .6);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        font-size: 10.5px;
    }
}

/* ============================================================================
   v5 · composition corrections found in layout testing
   ============================================================================ */

/* Hero: the inner column is flex-start aligned so the ornament and buttons
   hug the reading edge, but the headline and lead must span the full column
   or they shrink-wrap and the right margin drifts line by line. */
.mn-home .mn-orient__h1,
.mn-home .mn-orient__p,
.mn-home .mn-orient__eyebrow {
    align-self: stretch;
}

/* The ticks belong on the trailing edge (visually left in RTL), opposite the
   type block — they were landing under the headline's own margin. */
.mn-home .mn-orient__ticks {
    inset-inline-start: auto;
    inset-inline-end: clamp(16px, 2.6vw, 44px);
}

/* CRAFT — the copy block is now a sibling of the frame (see index.php).
   On the pinned desktop route it goes back over the still; the phone
   composition below leaves it in flow. */
.mn-home .mn-craftv4__shell {
    position: relative;
}

.mn-home #mn-root:not(.mn-native) .mn-craftv4__copy {
    position: absolute;
    inset-inline-end: clamp(24px, 4vw, 64px);
    bottom: clamp(24px, 4vw, 56px);
    z-index: 3;
    max-width: min(46ch, 44%);
}

@media (max-width: 820px) {

    /* ARRIVAL — the copy column centres its children, which made the
       headline shrink-wrap to a 116px ribbon. Stretch the text blocks and
       let text-align do the centring instead. */
    .mn-home #mn-root.mn-native .mn-arrivalv4__copy>* {
        width: 100%;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy .mn-divider {
        width: min(240px, 60%);
        margin-inline: auto;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__copy p {
        max-width: 34ch;
        margin-inline: auto;
        font-size: 15px;
        line-height: 1.95;
        color: var(--bone-70);
    }

    /* CRAFT — title above the still, features and CTA below it, as authored. */
    .mn-home #mn-root.mn-native .mn-craftv4__copy {
        position: static;
        order: -1;
        max-width: none;
        padding: 0;
        text-align: center;
    }

    .mn-home #mn-root.mn-native .mn-craftv4__copy p {
        max-width: 40ch;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.95;
        color: var(--bone-50);
    }

    .mn-home #mn-root.mn-native .mn-craftv4__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        margin-top: 6px;
        padding: 0 26px;
        border-radius: 6px;
        background: linear-gradient(135deg, #CBA263 0%, #F3E2C0 48%, #D3A85F 100%);
        color: var(--ink-900) !important;
        font-weight: 700;
    }

    /* The still keeps its own block; nothing is layered on it any more. */
    .mn-home #mn-root.mn-native .mn-craftv4__frame {
        order: 0;
    }
}

/* ============================================================================
   v6 — HERO CENTRED · BEARINGS CONSTELLATION · PATH SPINE · TOUCH MOTION
   ============================================================================ */

/* ---------------------------------------------------------------------------
   01 · HERO — centred composition
   The artwork's compass sits off-centre, so the type column used to hug the
   right edge to avoid it. Centring reads as the stronger opening: the eyebrow,
   headline, ornament, lead and buttons share one axis, and the scrim is
   re-weighted from the sides inward so the middle stays the darkest part of
   the frame.
   --------------------------------------------------------------------------- */
.mn-home .mn-p-orient {
    --scrim: radial-gradient(120% 92% at 50% 52%, rgba(5, 7, 12, .58) 0%, rgba(5, 7, 12, .80) 46%, rgba(5, 7, 12, .95) 100%);
    --bloom: 50% 40%;
    align-items: center;
    text-align: center;
}

.mn-home .mn-orient__inner {
    align-items: center;
    width: min(880px, 100%);
    gap: var(--stack-md);
    text-align: center;
}

.mn-home .mn-orient__eyebrow {
    justify-content: center;
}

/* Mirrored rule on the other side so the eyebrow reads as centred rather
   than as a left-aligned label that happens to sit in the middle. */
.mn-home .mn-orient__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: clamp(34px, 4vw, 58px);
    height: 1px;
    background: linear-gradient(270deg, var(--gold-300), transparent);
}

.mn-home .mn-orient__h1 {
    max-width: 16ch;
    margin-inline: auto;
    font-size: clamp(2.06rem, 4.9vw, 4.9rem);
    line-height: 1.04;
}

.mn-home .mn-orient__p {
    max-width: 54ch;
    margin-inline: auto;
}

.mn-home .mn-orient__actions {
    justify-content: center;
}

.mn-home .mn-divider {
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   02 · BEARINGS — the constellation
   One hub disc with three bearing discs around it. On the pinned desktop
   route the rotating compass core is still the instrument, so the hub disc
   stands down and only the badges ride their panels; on touch this markup is
   the whole composition.
   --------------------------------------------------------------------------- */
.mn-medallion {
    display: block;
    width: 100%;
    height: auto;
    /* The discs are rendered on white; a soft drop-shadow seats them on the
       dark ground without a plate or a ring around them. */
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .7));
}

.mn-home .mn-bearings-v2__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-sm);
    text-align: center;
}

.mn-home .mn-bearings-v2__kicker {
    justify-content: center;
}

.mn-home .mn-bearings-v2__constellation {
    position: relative;
}

/* The hub: hidden while the pinned compass core is on stage. */
.mn-home .mn-bearings-v2__hub {
    display: none;
}

.mn-home .mn-bp__badge {
    position: relative;
    display: block;
    flex: none;
}

.mn-home .mn-bp__badge-num {
    position: absolute;
    top: -6px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--gold-200);
}

/* Desktop: the badge is a small mark beside the panel's meta line. */
.mn-home #mn-root:not(.mn-native) .mn-bp__badge {
    width: 54px;
    margin-bottom: 14px;
}

.mn-home #mn-root:not(.mn-native) .mn-bp__badge-num {
    display: none;
}

/* ---------------------------------------------------------------------------
   07 · PATH — desktop spine
   Five waypoints on the plotted SVG course. With a fifth point added the
   copy blocks sit closer together, so they alternate above/below the line.
   --------------------------------------------------------------------------- */
.mn-home .mn-pathv4__marker {
    transition: border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
}

/* The decorative field is absolutely positioned and was running ~90px past
   the section's own box. Harmless (the plate clips) but it made the section
   report the wrong height to any layout check. */
.mn-home .mn-pathv4__field {
    inset: 0;
    height: 100%;
}


/* ============================================================================
   TOUCH — v6 compositions
   ============================================================================ */
@media (max-width: 820px) {

    /* ---------------------------------------------------------- 01 · HERO */
    

    

    

    

    

    

    

    .mn-home #mn-root.mn-native .mn-divider {
        margin-inline: 0;
    }

    /* ------------------------------------------------------ 02 · BEARINGS */
    /* The reference composition: 01 centred at the top, the hub disc beneath
       it, then 02 and 03 side by side — with hairlines running from the hub
       to each card. */
    

    

    

    

    

    

    

    /* The badge overlaps the card's top edge, exactly like the reference. */
    

    

    /* Hairlines from the hub out to each card, with a node dot at the end. */
    

    

    

    

    

    

    /* The full desc is long; on a two-up card it becomes a wall. Clamp it. */
    

    /* ---------------------------------------------------------- 07 · PATH */
    /* The reference draws a centred spine with numbered nodes, the copy on
       one side and an icon on the other, alternating down the run. */
    .mn-home #mn-root.mn-native .mn-pathv4__route::before {
        inset-inline-start: 50%;
        transform: translateX(50%);
        top: 22px;
        bottom: 22px;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point {
        grid-template-columns: 1fr 52px 1fr;
        grid-template-areas: "a marker b";
        align-items: center;
        gap: 0 12px;
        padding-bottom: 22px;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__marker {
        grid-area: marker;
        justify-self: center;
        width: 48px;
        height: 48px;
        font-size: 16px;
    }

    /* Odd waypoints put their copy on the leading side, even on the other —
       the zigzag that makes a five-step run readable in one column. */
    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(odd) .mn-pathv4__copy {
        grid-area: a;
        text-align: left;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__point:nth-child(even) .mn-pathv4__copy {
        grid-area: b;
        text-align: right;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy {
        padding-top: 0;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy h3 {
        font-size: 1.02rem;
    }

    .mn-home #mn-root.mn-native .mn-pathv4__copy p {
        font-size: 12.5px;
        line-height: 1.8;
    }

    /* A short connector from the spine to the copy, so the pairing is
       unambiguous when the eye jumps sides. */
    .mn-home #mn-root.mn-native .mn-pathv4__point::after {
        content: "";
        grid-area: marker;
        justify-self: center;
        width: 100%;
        height: 1px;
        background: rgba(224, 149, 75, .35);
        z-index: -1;
    }
}

/* ============================================================================
   v7 — SCALE, RHYTHM & POLISH
   Sizes, spacing and type scale reconciled across both routes so the eight
   chapters read as one system. Nothing here is a new layer over an old one:
   each rule replaces a value that measurement showed was wrong.
   ============================================================================ */

/* ---------------------------------------------------------- section header */
/* WORK / CAPABILITIES / PATH share one header block. It used to be absolutely
   positioned at a hard 8vh/8vw, which put it over the content on short
   laptops and off the grid on wide ones. */
.mn-home .mn-section-hdr {
    position: absolute;
    top: clamp(88px, 13vh, 150px);
    inset-inline: var(--pad-x);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    pointer-events: none;
}

.mn-home .mn-section-hdr__meta {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .3em;
    color: var(--bone-30);
}

.mn-home .mn-section-hdr__title {
    font-size: clamp(1.61rem, 2.88vw, 2.71rem);
    line-height: 1.14;
    color: var(--bone);
}

/* ------------------------------------------------------------------- work */
/* The rail sits in the lower two thirds so the header has clear air. */
.mn-home #mn-root:not(.mn-native) .mn-strip {
    top: 56%;
}

.mn-home .mn-frame__details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mn-home .mn-frame__meta {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--gold-200);
}

.mn-home .mn-frame__h3 {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 700;
    font-size: clamp(0.93rem, 1.27vw, 1.32rem);
    line-height: 1.3;
    color: var(--bone);
}

.mn-home .mn-frame__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--gold-200);
}

.mn-home .mn-frame__index {
    font-family: var(--font-en);
    font-weight: 500;
    color: rgba(231, 200, 143, .55);
}

/* ------------------------------------------------------------------ craft */
.mn-home .mn-craftv4__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mn-home .mn-craftv4__kicker {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .3em;
    color: var(--gold-200);
}

.mn-home .mn-craftv4__copy h2 {
    margin: 0;
    font-size: clamp(1.44rem, 2.37vw, 2.45rem);
    line-height: 1.16;
    color: var(--bone);
}

.mn-home .mn-craftv4__copy p {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 2;
    color: var(--bone-70);
}

/* ------------------------------------------------------------------- path */
.mn-home .mn-pathv4__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.mn-home .mn-pathv4__head h2 {
    margin: 0;
    font-size: clamp(1.61rem, 2.88vw, 2.71rem);
    line-height: 1.14;
    color: var(--bone);
}

.mn-home .mn-pathv4__eyebrow {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .3em;
    color: var(--bone-30);
}

/* ---------------------------------------------------------------- arrival */
.mn-home .mn-arrivalv4__copy {
    display: flex;
    flex-direction: column;
    gap: var(--stack-sm);
}

.mn-home .mn-arrivalv4__eyebrow {
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .3em;
    color: var(--gold-200);
}

.mn-home .mn-arrivalv4__copy p {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(14.5px, 1.05vw, 17px);
    line-height: 2;
    color: var(--bone-70);
}

.mn-home .mn-arrivalv4__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}

.mn-home .mn-arrivalv4__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, #CBA263 0%, #F3E2C0 48%, #D3A85F 100%);
    color: var(--ink-900) !important;
    font-family: var(--font-ar-body);
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 22px 48px -22px rgba(203, 162, 99, .85);
    transition: transform .38s var(--ease), box-shadow .38s ease;
}

.mn-home .mn-arrivalv4__cta:hover,
.mn-home .mn-arrivalv4__cta:focus-visible {
    color: var(--ink-900) !important;
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 28px 60px -22px rgba(203, 162, 99, 1);
}

.mn-home .mn-arrivalv4__secondary {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(224, 149, 75, .42);
    color: var(--gold-200) !important;
    font-size: 15px;
}

/* ============================================================================
   TOUCH — scale & rhythm
   ============================================================================ */
@media (max-width: 820px) {

    /* The header block is in flow on the native route; the absolute
       positioning above is a pinned-stage concern only. */
    .mn-home #mn-root.mn-native .mn-section-hdr {
        position: relative;
        top: auto;
        inset-inline: auto;
        text-align: center;
        pointer-events: auto;
    }

    /* One type scale for every chapter heading, so no section shouts louder
       than another by accident. */
    .mn-home #mn-root.mn-native .mn-section-hdr__title,
.mn-home #mn-root.mn-native .mn-aboutv3__title,
.mn-home #mn-root.mn-native .mn-pathv4__head h2,
.mn-home #mn-root.mn-native .mn-craftv4__copy h2{
        font-size: clamp(1.57rem, 7.28vw, 2.08rem);
        line-height: 1.22;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4 h2 {
        font-size: clamp(1.73rem, 8.12vw, 2.37rem);
        line-height: 1.18;
    }

    /* Section eyebrows / meta lines. */
    .mn-home #mn-root.mn-native .mn-section-hdr__meta,
    .mn-home #mn-root.mn-native .mn-pathv4__eyebrow,
    .mn-home #mn-root.mn-native .mn-arrivalv4__eyebrow,
    .mn-home #mn-root.mn-native .mn-craftv4__kicker {
        font-size: 9.5px;
        letter-spacing: .26em;
    }

    /* Body copy: one size, one leading. */
    .mn-home #mn-root.mn-native .mn-aboutv3__lead,
    .mn-home #mn-root.mn-native .mn-craftv4__copy p,
    .mn-home #mn-root.mn-native .mn-arrivalv4__copy p{
        font-size: 14px;
        line-height: 1.95;
        color: var(--bone-70);
    }

    /* Every tap target clears 44px. */
    .mn-home #mn-root.mn-native .mn-btn,
.mn-home #mn-root.mn-native .mn-arrivalv4__cta,
.mn-home #mn-root.mn-native .mn-arrivalv4__secondary{
        min-height: 52px;
    }

    .mn-home #mn-root.mn-native .mn-arrivalv4__secondary {
        justify-content: center;
        border: var(--rule);
        border-radius: 6px;
        background: rgba(10, 14, 24, .6);
    }

    /* The chapter meta rows are desktop instrument dressing; on a phone they
       are noise between two headings. */
    .mn-home #mn-root.mn-native .mn-craftv4__foot{
        display: none !important;
    }
}

/* ============================================================================
   v8 — remaining size corrections
   ============================================================================ */

/* The desktop craft still is a 68vh stage with a 500px floor. In document
   flow that floor overrides the 16:10 block the phone composition asks for,
   so the aspect ratio has to be stated with its own floor cleared. */
@media (max-width: 820px) {
    .mn-home #mn-root.mn-native .mn-craftv4__frame {
        aspect-ratio: 16 / 10;
        height: auto !important;
        min-height: 0 !important;
    }

    /* "استكشف جميع الخدمات" was a 28px-tall text link inside a section made
       entirely of 56px rows — too small to hit reliably and visually adrift
       from the list above it. */
    .mn-home #mn-root.mn-native .mn-capv2__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 54px;
        margin-top: 18px;
        border: var(--rule-gold);
        border-radius: 14px;
        background: rgba(224, 149, 75, .07);
        font-size: 14.5px;
        font-weight: 700;
        color: var(--gold-100) !important;
    }
}

/* The swipe dots carry a 44px hit area via ::after; make that explicit to
   anything auditing the rendered box, and keep the visual dot small. */
.mn-work__dot {
    position: relative;
    flex: none;
}

/* ---------------------------------------------------------------------------
   DESKTOP — the pinned stage still owes the same rhythm as the phone.
   --------------------------------------------------------------------------- */
@media (min-width: 821px) {

    /* Chapter shells share one measure and one inset so nothing drifts. */
    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__shell,
    .mn-home #mn-root:not(.mn-native) .mn-capv2__shell,
    .mn-home #mn-root:not(.mn-native) .mn-craftv4__shell,
    .mn-home #mn-root:not(.mn-native) .mn-pathv4__shell,
    .mn-home #mn-root:not(.mn-native) .mn-arrivalv4__shell {
        width: min(1320px, 100%);
        margin-inline: auto;
    }

    /* The chapter meta rows (01 · THE STUDIO … 24.71°N) are the instrument's
       voice. One position, one size, everywhere. */
    .mn-home .mn-aboutv3__topline,
    .mn-home .mn-capv2__top,
    .mn-home .mn-craftv4__top,
    .mn-home .mn-pathv4__top,
    .mn-home .mn-arrivalv4__top,
    .mn-home .mn-bearings-v2__hud {
        font-family: var(--font-en);
        font-size: 10px;
        letter-spacing: .28em;
        color: var(--bone-30);
    }
}

/* ============================================================================
   v9 — GOLD TEXT · CAPABILITIES COLUMNS · CHAPTER SEAMS · PATH WAVE
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1 · GOLD TEXT — solid, not clipped
   Every gold heading was `background-clip:text` + `color:transparent`. That
   only paints if no descendant creates its own compositing layer — and the
   hero's words each carry a transform for the entrance animation, so the
   second line of the H1 rendered as fully transparent text on every load.
   Safari drops the same paint for other reasons.

   Solid gold with a warm glow is the look the reference boards show anyway,
   and it cannot fail. One rule, one appearance, everywhere.
   --------------------------------------------------------------------------- */
.mn-home .mn-orient__h1-line--gold,
.mn-home .mn-bearings-v2__title span,
.mn-home .mn-aboutv3__title-gold,
.mn-home .mn-craftv4__copy h2 em,
.mn-home .mn-pathv4__head h2 strong,
.mn-home .mn-capv2__heading strong,
.mn-home .mn-arrivalv4 h2 strong {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--gold-100);
    text-shadow: 0 0 42px rgba(224, 149, 75, .35);
    filter: none;
}

/* ---------------------------------------------------------------------------
   2 · CHAPTER SEAMS
   Eight chapters, eight different photographs. Where two met, the artwork
   changed in a hard horizontal line. Each plate now feathers its own top and
   bottom edge into the page ground, so consecutive chapters dissolve into
   one another instead of butting up.
   --------------------------------------------------------------------------- */
.mn-home .mn-plate::before,
.mn-home .mn-plate::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: clamp(70px, 9vw, 150px);
    z-index: 1;
    pointer-events: none;
}

.mn-home .mn-plate::before {
    top: 0;
    background: linear-gradient(180deg, var(--ink-900) 0%, rgba(5, 7, 12, .72) 34%, transparent 100%);
}

.mn-home .mn-plate::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--ink-900) 0%, rgba(5, 7, 12, .72) 34%, transparent 100%);
}

/* The hero opens the page — it has nothing above it to blend into. */
.mn-home .mn-p-orient::before {
    display: none;
}

/* A hairline seam, so the join reads as deliberate rather than as a gap. */
.mn-home #mn-root.mn-native .mn-plate+.mn-plate::before {
    box-shadow: inset 0 1px 0 rgba(224, 149, 75, .16);
}

/* ---------------------------------------------------------------------------
   3 · BEARINGS — desktop
   The three panels crossfade in the same box as the compass turns. They were
   sharing a 396px shell with the title, so the copy overlapped the heading
   and each other mid-transition. The shell is now tall enough for the
   tallest panel and the panels are anchored to its bottom, so a crossfade
   swaps text in place instead of sliding it through the title.
   --------------------------------------------------------------------------- */
@media (min-width: 821px) {
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-block: clamp(90px, 13vh, 150px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__head {
        align-items: flex-start;
        text-align: right;
        margin-bottom: clamp(20px, 3vh, 38px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__title {
        margin: 0;
        font-size: clamp(1.86rem, 3.05vw, 3.05rem);
        line-height: 1.14;
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings__inner {
        height: auto;
        min-height: 0;
    }

    /* One well, sized to the tallest panel, so nothing jumps between
       bearings and nothing collides with the heading above. */
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__constellation {
        position: relative;
        min-height: clamp(280px, 34vh, 360px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__panels {
        position: absolute;
        inset: 0;
        height: auto;
        min-height: 0;
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__panel {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 0;
    }

    .mn-home #mn-root:not(.mn-native) .mn-bp__h2 {
        margin: 0;
        font-family: var(--font-ar-display);
        font-weight: 600;
        font-size: clamp(1.27rem, 1.95vw, 1.86rem);
        line-height: 1.25;
        color: var(--bone);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bp__p {
        margin: 0;
        max-width: 46ch;
        font-size: clamp(14px, 1vw, 16px);
        line-height: 2;
        color: var(--bone-70);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bp__meta {
        font-family: var(--font-en);
        font-size: 10px;
        letter-spacing: .26em;
        color: var(--bearing-accent, var(--gold-300));
    }
}

/* The per-direction photograph. The engine crossfades these as the compass
   turns; all three are wanted, one at a time. */
.mn-home .mn-bearings-v2__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    filter: grayscale(.28) contrast(1.06) brightness(.62);
    transition: opacity .6s var(--ease);
}

/* Sit them under a scrim of their own so the copy stays readable over any
   of the three. */
.mn-home .mn-bearings-v2__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(270deg,
            rgba(5, 7, 12, .95) 0%,
            rgba(5, 7, 12, .74) 42%,
            rgba(5, 7, 12, .28) 76%,
            rgba(5, 7, 12, .55) 100%);
}

/* Layer only — never position. Each of these elements owns its own
   placement (HUD under the header, rail and hand-off on the bottom edge,
   ghost numeral centred); declaring `position: relative` here dropped all
   four back into normal flow and collapsed the chapter. */
.mn-home .mn-bearings-v2__rail,
.mn-home .mn-bearings-v2__hud,
.mn-home .mn-bearings-v2__handoff,
.mn-home .mn-bearings-v2__ghost,
.mn-home #mn-bignum {
    z-index: 4;
}

/* ---------------------------------------------------------------------------
   4 · CAPABILITIES — three columns
   --------------------------------------------------------------------------- */
.mn-home .mn-capabilities-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mn-home .mn-capv2__shell {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 40px);
    width: min(1320px, 100%);
    margin-inline: auto;
}

.mn-home .mn-capv2__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

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

.mn-home .mn-capv2__heading {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: clamp(1.61rem, 2.88vw, 2.71rem);
    line-height: 1.14;
    color: var(--bone);
}

.mn-home .mn-capv2__lead {
    max-width: 52ch;
    margin: 0;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.95;
    color: var(--bone-50);
}

.mn-home .mn-capv2__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 26px);
}

.mn-home .mn-capv2__col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 2vw, 30px);
    border: var(--rule);
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cap-accent, #C77E3A) 9%, transparent), transparent 40%),
        rgba(10, 14, 24, .58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color .45s var(--ease), transform .45s var(--ease);
}

@media (hover: hover) {
    .mn-home .mn-capv2__col:hover {
        border-color: color-mix(in srgb, var(--cap-accent, #C77E3A) 55%, transparent);
        transform: translateY(-4px);
    }
}

.mn-home .mn-capv2__col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.mn-home .mn-capv2__col-medal {
    display: block;
    width: clamp(60px, 5vw, 84px);
    margin-bottom: 4px;
}

.mn-home .mn-capv2__col-id {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .22em;
    color: var(--gold-200);
}

.mn-home .mn-capv2__col-id b {
    font-weight: 500;
    color: var(--bone-30);
}

.mn-home .mn-capv2__col-title {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    line-height: 1.3;
    color: var(--bone);
}

.mn-home .mn-capv2__col-en {
    margin: 0;
    font-family: var(--font-en);
    font-size: 9.5px;
    letter-spacing: .2em;
    color: var(--bone-30);
}

.mn-home .mn-capv2__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

.mn-home .mn-capv2__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(233, 231, 223, .07);
    font-family: var(--font-ar-body);
    font-size: clamp(13.5px, .95vw, 15px);
    color: var(--bone-70);
    transition: color .3s ease, padding-inline-start .3s var(--ease);
}

.mn-home .mn-capv2__item i {
    flex: none;
    font-size: 15px;
    color: color-mix(in srgb, var(--cap-accent, #C77E3A) 78%, #E7C88F);
}

@media (hover: hover) {
    .mn-home .mn-capv2__item:hover {
        color: var(--bone);
        padding-inline-start: 8px;
    }
}

.mn-home .mn-capv2__foot {
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   5 · PATH — a wave that draws itself, and headings that light up
   --------------------------------------------------------------------------- */
.mn-home .mn-pathv4__base {
    fill: none;
    stroke: rgba(233, 231, 223, .13);
    stroke-width: 1.4;
    stroke-dasharray: 5 7;
}

.mn-home .mn-pathv4__trace {
    fill: none;
    stroke: url(#mn-path-grad);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 8px rgba(224, 149, 75, .55));
}

/* Waypoint headings respond to the pointer — the section is a list of five
   named steps, and naming them is the whole point. */
.mn-home .mn-pathv4__copy h3 {
    transition: color .35s ease, text-shadow .35s ease;
}

@media (hover: hover) {

    .mn-home .mn-pathv4__point:hover .mn-pathv4__copy h3,
    .mn-home .mn-pathv4__point:focus-within .mn-pathv4__copy h3 {
        color: var(--gold-100);
        text-shadow: 0 0 22px rgba(231, 200, 143, .6);
    }

    .mn-home .mn-pathv4__point:hover .mn-pathv4__marker {
        border-color: var(--gold-100);
        box-shadow: 0 0 22px rgba(231, 200, 143, .5);
    }
}

.mn-home .mn-pathv4__point.is-reached .mn-pathv4__copy h3 {
    color: var(--gold-100);
    text-shadow: 0 0 20px rgba(231, 200, 143, .45);
}

/* ---------------------------------------------------------------------------
   6 · DESKTOP ENTRANCE
   The pinned route now marks a chapter's stagger groups .is-in the first
   time the chapter opens (see enterChapter in magnetic-north.js). Same
   vocabulary as the touch route, so the two feel like one site.
   --------------------------------------------------------------------------- */
.mn-home #mn-root:not(.mn-native) [data-mn-stagger]>* {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

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

.mn-home #mn-root:not(.mn-native) [data-mn-stagger].is-in>*:nth-child(2) { transition-delay: .09s; }
.mn-home #mn-root:not(.mn-native) [data-mn-stagger].is-in>*:nth-child(3) { transition-delay: .18s; }
.mn-home #mn-root:not(.mn-native) [data-mn-stagger].is-in>*:nth-child(4) { transition-delay: .27s; }
.mn-home #mn-root:not(.mn-native) [data-mn-stagger].is-in>*:nth-child(n/**/+5) { transition-delay: .36s; }

/* The hero words run their own cascade from JS; don't double-animate them. */
.mn-home #mn-root:not(.mn-native) .mn-orient__inner>* {
    transition-delay: 0s;
}

/* ============================================================================
   TOUCH — v9
   ============================================================================ */
@media (max-width: 820px) {

    /* Capabilities: the three columns stack, each keeping its medallion and
       its own service list. */
    .mn-home #mn-root.mn-native .mn-capv2__columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col {
        padding: 22px 18px;
    }

    .mn-home #mn-root.mn-native .mn-capv2__col-medal {
        width: 66px;
    }

    .mn-home #mn-root.mn-native .mn-capv2__item {
        min-height: 48px;
        font-size: 14.5px;
    }

    .mn-home #mn-root.mn-native .mn-capv2__cta {
        width: 100%;
    }

    /* Seams are shorter on a phone so they don't eat a third of a section. */
    .mn-home #mn-root.mn-native .mn-plate::before,
    .mn-home #mn-root.mn-native .mn-plate::after {
        height: clamp(48px, 12vw, 84px);
    }
}

/* ============================================================================
   v10 — BEARINGS STACKING FIX · ROBUST HERO CASCADE
   ============================================================================ */

@media (min-width: 821px) {

    /* The copy column occupies the reading half of the frame and is centred
       in it. The other half is left to the photograph. */
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__content {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 4;
        width: min(50vw, 660px);
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: clamp(96px, 14vh, 160px) clamp(120px, 18vh, 200px);
        padding-inline-start: var(--pad-x);
        padding-inline-end: clamp(20px, 3vw, 48px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings__inner {
        display: flex;
        flex-direction: column;
        gap: clamp(18px, 2.6vh, 34px);
        width: 100%;
        height: auto;
    }

    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__head {
        margin-bottom: 0;
    }

    /* Sized to the tallest bearing so a crossfade never changes the layout
       under the reader. */
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__constellation {
        min-height: clamp(240px, 30vh, 320px);
    }
}

/* ---------------------------------------------------------------------------
   2 · HERO word cascade — CSS-owned
   The cascade used to be inline styles written by JS: opacity 0 first, then
   a transition to 1 inside a double requestAnimationFrame. If rAF was
   throttled — background tab, a slow first paint, a device under load — the
   words stayed at opacity 0 and the headline never appeared. That is exactly
   the failure that left the second line of the H1 blank.

   Now the hidden state only exists while #mn-root carries .mn-words-ready,
   which the engine sets synchronously as soon as it starts. If the script
   never runs, or stops before that line, the headline renders normally.
   --------------------------------------------------------------------------- */
.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
    /* no transition on the hidden state: this class is applied
       after first paint, so a transition here animates the element
       OUT before it can animate in. */
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

.mn-home #mn-root.mn-words-ready .mn-orient__inner.is-in .mn-orient__h1 .mn-w,
.mn-home #mn-root.mn-words-in .mn-orient__h1 .mn-w {
    opacity: 1;
    transform: none;
}

.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w:nth-child(1) { transition-delay: .10s; }
.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w:nth-child(2) { transition-delay: .16s; }
.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w:nth-child(3) { transition-delay: .22s; }
.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w:nth-child(4) { transition-delay: .28s; }
.mn-home #mn-root.mn-words-ready .mn-orient__h1 .mn-w:nth-child(n/**/+5) { transition-delay: .34s; }

/* ============================================================================
   v11 — TOUCH REFINEMENT: BEARINGS CONSTELLATION · WORK · MOTION
   ============================================================================ */
@media (max-width: 820px) {

    /* -----------------------------------------------------------------------
       BEARINGS — the constellation, tuned
       The three cards were 160px wide and 278px tall: a column of Arabic
       text four words per line. The grid now gives the pair more width by
       tightening the gutter, the copy is clamped to a readable summary, and
       the whole figure is centred on the hub rather than on the section box.
       ----------------------------------------------------------------------- */
    

    

    

    

    

    

    

    

    

    

    /* All three summaries clamp, so the pair below the hub stay the same
       height and the figure reads as symmetrical. */
    

    

    /* A node dot where each hairline meets the hub. */
    

    

    

    /* ---- motion: the figure assembles itself ---- */
    

    

    /* The hub settles first, then the three bearings seat onto it. */
    
    
    

    

    

    /* -----------------------------------------------------------------------
       SELECTED WORK — card proportions
       The poster panel was 38% of a 315px card: a 119px column that cropped
       every project image to a sliver. 44% with a taller card gives the
       photograph room to actually read as the project.
       ----------------------------------------------------------------------- */
    

    

    

    

    

    

    

    /* The active card lifts out of the rail. */
    

    

    /* Swipe affordance under the rail, matching the reference board. */
    

    

    

    

    /* -----------------------------------------------------------------------
       ABOUT — the quote and the principles arrive with the section
       ----------------------------------------------------------------------- */
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-aboutv3__principle {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

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

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

    /* -----------------------------------------------------------------------
       CAPABILITIES — the columns arrive one by one
       ----------------------------------------------------------------------- */
    .mn-home #mn-root.mn-native.mn-motion-ready .mn-capv2__col {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

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

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

/* ---------------------------------------------------------------------------
   ABOUT / CAPABILITIES — desktop entrance for the same elements
   --------------------------------------------------------------------------- */
@media (min-width: 821px) {

    .mn-home #mn-root:not(.mn-native) .mn-aboutv3__principle,
    .mn-home #mn-root:not(.mn-native) .mn-capv2__col {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    /* no transition on the hidden state: the class that applies it lands
       after first paint, so a transition here animates the element OUT
       before it can animate in. The motion lives on the revealed
       state — see v12. */
    transition: none;
}

    .mn-home #mn-root:not(.mn-native) .is-in .mn-aboutv3__principle,
    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-aboutv3__principle,
    .mn-home #mn-root:not(.mn-native) .is-in .mn-capv2__col,
    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-capv2__col {
        opacity: 1;
        transform: none;
    }

    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-aboutv3__principle:nth-child(2),
    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-capv2__col:nth-child(2) { transition-delay: .12s; }

    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-aboutv3__principle:nth-child(3),
    .mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-capv2__col:nth-child(3) { transition-delay: .24s; }
}

/* ============================================================================
   v12 — REVEAL TRANSITIONS LIVE ON THE REVEALED STATE
   ----------------------------------------------------------------------------
   The hidden states above now declare `transition: none`, because the class
   that applies them (.mn-motion-ready) lands after first paint and a
   transition there animates the element out before it can animate in.

   The motion therefore has to be declared on the *target* state — the
   transition is read when the change happens, so an entrance still plays.
   Everything is transform + opacity, so it stays on the compositor.
   ============================================================================ */

.mn-home #mn-root.mn-native.mn-motion-ready [data-mn-stagger].is-in>*,
.mn-home #mn-root:not(.mn-native) [data-mn-stagger].is-in>*,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-capv2__col,
.mn-home #mn-root:not(.mn-native) .is-in .mn-capv2__col,
.mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-capv2__col,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-aboutv3__principle,
.mn-home #mn-root:not(.mn-native) .is-in .mn-aboutv3__principle,
.mn-home #mn-root:not(.mn-native) .mn-section-visible .mn-aboutv3__principle,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bearings-v2__panel,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in .mn-pathv4__point,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bearings-v2__hub,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-section-visible .mn-bearings-v2__hub,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bp__badge,
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-divider,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-section-visible .mn-divider,
.mn-home #mn-root.mn-words-ready .mn-orient__inner.is-in .mn-orient__h1 .mn-w,
.mn-home #mn-root.mn-words-in .mn-orient__h1 .mn-w,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-plate.mn-section-visible {
    transition:
        opacity .62s cubic-bezier(.22, 1, .36, 1),
        transform .74s cubic-bezier(.22, 1, .36, 1) !important;
}

/* The medallions get a little more weight in the settle. */
.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bearings-v2__hub,
.mn-home #mn-root.mn-native.mn-motion-ready .mn-section-visible .mn-bearings-v2__hub {
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .95s cubic-bezier(.22, 1, .36, 1) !important;
}

.mn-home #mn-root.mn-native.mn-motion-ready .is-in .mn-bp__badge {
    transition:
        opacity .5s cubic-bezier(.22, 1, .36, 1) .2s,
        transform .7s cubic-bezier(.34, 1.4, .5, 1) .2s !important;
}

/* The path spine draws rather than fades. */
.mn-home #mn-root.mn-native.mn-motion-ready .mn-pathv4__route.is-in::before {
    transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) !important;
}

/* ============================================================================
   v13 — FIT THE PINNED STAGE
   Two chapters were taller/wider than the viewport they are pinned inside, so
   the bottom of one and the right edge of the other were being clipped away.
   Both are measured fixes, not guesses.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   CAPABILITIES — 921px of content in a 900px stage
   Measured at 1425x900: top 26 + head 153 + columns 514 + foot 72 + three
   40px gaps = 921. The primary CTA sat 21px below the fold.

   The chapter now scales its own rhythm to the stage height rather than to
   the page's global scale, so it fits a 13" laptop and still breathes on a
   27" display.
   --------------------------------------------------------------------------- */
@media (min-width: 821px) {

    .mn-home #mn-root:not(.mn-native) .mn-capv2__shell {
        gap: clamp(16px, 2.4vh, 34px);
        max-height: 100%;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__head {
        gap: clamp(8px, 1.2vh, 14px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__heading {
        font-size: clamp(1.44rem, 2.45vw, 2.37rem);
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__col {
        padding: clamp(14px, 1.9vh, 28px) clamp(16px, 1.4vw, 28px);
        gap: clamp(10px, 1.4vh, 16px);
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__col-medal {
        width: clamp(44px, 5.2vh, 76px);
        margin-bottom: 0;
    }

    .mn-home #mn-root:not(.mn-native) .mn-capv2__item {
        min-height: clamp(34px, 4.4vh, 46px);
        padding-block: clamp(2px, .5vh, 6px);
    }

    /* On a short stage the lead sentence is the first thing that can go —
       the three column headings already say what the section is. */
    @media (max-height: 860px) {
        .mn-home #mn-root:not(.mn-native) .mn-capv2__lead {
            display: none;
        }
    }

    @media (max-height: 760px) {

        .mn-home #mn-root:not(.mn-native) .mn-capv2__col-en,
        .mn-home #mn-root:not(.mn-native) .mn-capv2__top {
            display: none;
        }

        .mn-home #mn-root:not(.mn-native) .mn-capv2__col-medal {
            width: 44px;
        }
    }
}

/* ---------------------------------------------------------------------------
   PATH — the first waypoint ran off the right edge
   Waypoints are placed by percentage along the SVG course. Waypoint 01 sits
   at 94%, and its 199px copy block was laid out from that point outwards, so
   it ended 101px past the plate. Waypoints near either edge now lay their
   copy back towards the centre.
   --------------------------------------------------------------------------- */
@media (min-width: 821px) {

    .mn-home #mn-root:not(.mn-native) .mn-pathv4__point {
        /* The marker stays on the course; the copy is what gets re-anchored. */
        max-width: min(250px, 22vw);
    }

    /* Waypoints 01 and 02 are on the right half — pull their copy left. */
    .mn-home #mn-root:not(.mn-native) .mn-pathv4__point[data-path-point="0"] {
        transform: translate(-100%, 24px) !important;
    }

    .mn-home #mn-root:not(.mn-native) .mn-pathv4__point[data-path-point="0"] .mn-pathv4__copy {
        text-align: right;
        padding-inline-end: 46px;
    }

    .mn-home #mn-root:not(.mn-native) .mn-pathv4__point[data-path-point="0"] .mn-pathv4__marker {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    /* Waypoint 05 is hard against the left edge — mirror the same treatment. */
    .mn-home #mn-root:not(.mn-native) .mn-pathv4__point[data-path-point="4"] .mn-pathv4__copy {
        padding-inline-start: 46px;
    }
}

/* ============================================================================
   v14 — BEARINGS: the constellation, matched to the reference board
   ----------------------------------------------------------------------------
   The touch composition is: title, ornament, then a figure — 01 centred above
   a gold compass hub, 02 and 03 seated below it, each card wearing its
   medallion over its top edge, all three tied to the hub by a hairline with a
   node dot. A faint orbit field and four cardinal marks sit behind it.
   ============================================================================ */

/* Dot ornament under the heading — three diamonds, the middle one brighter. */
.mn-bearings-v2__dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mn-bearings-v2__dots i {
    width: 4px;
    height: 4px;
    background: rgba(224, 149, 75, .45);
    transform: rotate(45deg);
}

.mn-bearings-v2__dots i:nth-child(2) {
    width: 5px;
    height: 5px;
    background: var(--gold-200);
    box-shadow: 0 0 8px rgba(231, 200, 143, .8);
}

/* Orbit field + cardinals are part of the phone figure only; on the pinned
   desktop route the rotating compass core already plays that role. */
.mn-bearings-v2__orbit,
.mn-bearings-v2__cardinals {
    display: none;
}

@media (max-width: 820px) {

    

    /* ---- the figure ---------------------------------------------------- */
    

    

    /* Concentric rings, centred on the hub. */
    

    

    

    

    /* Cardinal marks, on the outer ring. */
    

    

    
    
    
    

    /* ---- hub ----------------------------------------------------------- */
    

    /* ---- cards --------------------------------------------------------- */
    

    

    /* ---- medallion badge, straddling the card's top edge ---------------- */
    

    

    /* 02 and 03 carry their number beside the disc, as on the board. */
    

    

    /* ---- connector hairlines + node dots -------------------------------- */
    

    

    

    

    

    

    /* ---- card type ------------------------------------------------------ */
    /* The board leads with the Arabic name; the latin code is a whisper. */
    

    

    

    

    /* ---- title block ---------------------------------------------------- */
    

    

    
}

/* ============================================================================
   v15 — measure corrections in the bearings figure
   Centred flex children shrink-wrap: the heading measured 147px inside a
   334px column and each card title 71px inside a 250px card, so long names
   would break at the wrong point. Give the text blocks the full column.
   ============================================================================ */
@media (max-width: 820px) {

    

    

    /* Balance the two lower cards: the Arabic names are different lengths,
       and a two-up figure only reads as symmetrical if both sides match. */
    

    
}

/* ============================================================================
   v16 — BEARINGS: don't nest two opacity systems on desktop
   ----------------------------------------------------------------------------
   On the pinned route the engine crossfades the three bearing panels itself,
   writing opacity on each .mn-bp as the compass turns. The generic entrance
   rule also held their container (.mn-bearings-v2__constellation, a direct
   child of the stagger group) at opacity 0 until the chapter opened.

   Two opacity systems on nested elements multiply: if the container's
   entrance stalled for any reason, the panels underneath were invisible no
   matter what the engine wrote to them — which is precisely how this chapter
   ended up as furniture around an empty middle.

   The heading still animates in. The constellation is left entirely to the
   engine, which is the only thing that knows which bearing is current.
   ============================================================================ */
@media (min-width: 821px) {

    .mn-home #mn-root:not(.mn-native) .mn-bearings__inner>.mn-bearings-v2__constellation {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================================
   v16 — BEARINGS FIGURE: entrance + safe defaults
   ----------------------------------------------------------------------------
   Two things went wrong in this chapter's motion:

   1. `.mn-bearings-v2__panels` is `display: contents`, so the three cards are
      grid items of the constellation but are NOT DOM children of the stagger
      container. `[data-mn-stagger] > *` therefore never matched them: the
      cards rendered immediately while the heading beside them waited on a
      reveal that never came, which is exactly what the chapter looked like.

   2. Nothing that carries copy should depend on an animation to become
      visible. Every hidden state below is paired with a reveal that the
      engine now guarantees geometrically (see wireNativeFlow), and each one
      is scoped so a rule that fails to match leaves the content visible
      rather than blank.
   ============================================================================ */
@media (max-width: 820px) {

    /* The three cards animate as part of the figure, keyed off the
       constellation — not off a parent they are not children of. */
    

    

    /* 01 lands first, then the pair below it — the order the eye reads the
       figure in. */
    

    

    /* The connector hairlines draw outward from the hub after the cards
       have settled. */
    

    

    

    

    

    

    /* The orbit rings breathe open behind everything. */
    

    

    /* ---- number placement -----------------------------------------------
       Centred over the disc for all three. The reference offsets 02 and 03
       slightly outward, but that offset is measured from a card width the
       layout does not guarantee at every screen size — at 516px it threw
       both numerals out to the section's edges. Centred is the reading the
       composition actually supports. */
    
}

/* ============================================================================
   BEARINGS · DESKTOP PHOTO WELL FIX
   --------------------------------------------------------------------------
   Keep the existing scroll-driven crossfade/opacity from magnetic-north.js,
   but render each direction photograph as a deliberate image field on the
   physical LEFT side of the RTL composition instead of a full-screen tint.
   ========================================================================== */
@media (min-width: 821px) {
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__bg {
        /* RTL: inline-end is the physical left edge. */
        inset-block: 0;
        inset-inline-start: auto;
        inset-inline-end: 0;
        width: min(54vw, 900px);
        height: 100%;

        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;

        /* JS still owns opacity + Ken-Burns transform. */
        mix-blend-mode: normal;
        filter: grayscale(.12) contrast(1.05) brightness(.78) saturate(.88);

        /* Fade the photograph into the copy side instead of drawing a hard
           vertical edge through the section. */
        -webkit-mask-image: linear-gradient(90deg,
            #000 0%,
            #000 64%,
            rgba(0, 0, 0, .92) 74%,
            rgba(0, 0, 0, .38) 88%,
            transparent 100%);
        mask-image: linear-gradient(90deg,
            #000 0%,
            #000 64%,
            rgba(0, 0, 0, .92) 74%,
            rgba(0, 0, 0, .38) 88%,
            transparent 100%);
    }

    /* Protect the RTL copy on the right while leaving the left photograph
       substantially more open than the old full-screen tint treatment. */
    .mn-home #mn-root:not(.mn-native) .mn-bearings-v2__veil {
        background: linear-gradient(270deg,
            rgba(5, 7, 12, .98) 0%,
            rgba(5, 7, 12, .90) 34%,
            rgba(5, 7, 12, .58) 51%,
            rgba(5, 7, 12, .14) 72%,
            rgba(5, 7, 12, .05) 100%);
    }
}


/* ============================================================
   ∞ · SECTION LABEL SYSTEM  (one rail, one kicker, every chapter)
   ------------------------------------------------------------
   Before this pass every chapter drew its own top rail and its own
   kicker: five near-identical `__top` / `__topline` blocks at 9px vs
   9.5px, .2em vs .22em vs .24em, three different greys, two different
   gold hexes — and the work chapter used a completely separate
   `.mn-section-hdr__meta` string instead of a rail at all. The kickers
   were split three ways too: `.mn-eyebrow`, `.mn-craftv4__kicker` and
   `.mn-pathv4__eyebrow`, each with its own rule ornament or none.
   Worse, mn-mobile.css hid all five rails outright, so on a phone the
   act number — the through-line of the whole instrument concept —
   simply did not exist.

   Two components now carry it everywhere:

     .mn-slab     the chapter rail — a milled number plate, the chapter
                  name, a hairline that draws itself in on reveal, and
                  the instrument readout trailing at the far end.
     .mn-eyebrow  the kicker above a heading — gold pip, text, hairline.

   Both are declared last on purpose: the per-chapter rules that survive
   (margins, grid placement) are (0,2,0), so these match that weight and
   win the tie on source order without a single !important.
   ============================================================ */

.mn-home .mn-slab,
.mn-slab {
    --slab-gold: var(--gold-200);
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.1vw, 16px);
    width: 100%;
    padding: 0 0 clamp(12px, 1.4vh, 18px);
    border-bottom: 1px solid rgba(233, 231, 223, .09);
    font-family: var(--font-en);
    font-size: 0;
    /* children set their own size; this kills the inline-gap */
    line-height: 1;
    color: var(--bone-50);
}

/* --- the number plate --------------------------------------------------
   The act number is the one element that repeats in all nine chapters, so
   it gets the only piece of real ornament in the rail: a milled square
   with a gold hairline, a bevel of light down its face, and two corner
   ticks. Tabular figures so 01 and 09 occupy exactly the same box. */
.mn-home .mn-slab__id,
.mn-slab__id {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(30px, 3vw, 38px);
    height: clamp(30px, 3vw, 38px);
    padding: 0 6px;
    font-family: var(--font-en);
    font-size: clamp(10.5px, .82vw, 12.5px);
    font-weight: 500;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--slab-gold);
    background:
        linear-gradient(160deg, rgba(224, 149, 75, .16), rgba(224, 149, 75, .02) 58%),
        rgba(10, 14, 24, .55);
    border: 1px solid rgba(224, 149, 75, .34);
    box-shadow:
        inset 0 1px 0 rgba(243, 226, 192, .18),
        0 8px 22px -16px rgba(224, 149, 75, .9);
}

/* corner ticks — top-start and bottom-end, so the plate reads as milled
   rather than as a plain bordered box. */
.mn-home .mn-slab__id::before,
.mn-home .mn-slab__id::after,
.mn-slab__id::before,
.mn-slab__id::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border: 0 solid var(--slab-gold);
    opacity: .85;
}

.mn-home .mn-slab__id::before,
.mn-slab__id::before {
    top: -1px;
    inset-inline-start: -1px;
    border-top-width: 1px;
    border-inline-start-width: 1px;
}

.mn-home .mn-slab__id::after,
.mn-slab__id::after {
    bottom: -1px;
    inset-inline-end: -1px;
    border-bottom-width: 1px;
    border-inline-end-width: 1px;
}

/* --- chapter name ------------------------------------------------------ */
.mn-home .mn-slab__name,
.mn-slab__name {
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-size: clamp(9.5px, .74vw, 11px);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bone-70);
}

/* --- the hairline ------------------------------------------------------
   Draws itself from the plate outward the first time the chapter is on
   screen. `.is-in` / `.mn-section-visible` are set by the scroll engine;
   before that it rests at scaleX(0) but the rail still occupies its full
   height, so nothing reflows when it fires. */
.mn-home .mn-slab__rule,
.mn-slab__rule {
    flex: 1 1 auto;
    min-width: 18px;
    height: 1px;
    background: linear-gradient(to left,
            rgba(224, 149, 75, .55),
            rgba(224, 149, 75, .16) 46%,
            transparent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .1s;
}

[dir="ltr"].mn-slab .mn-slab__rule,
.mn-slab[dir="ltr"] .mn-slab__rule {
    background: linear-gradient(to right,
            rgba(224, 149, 75, .55),
            rgba(224, 149, 75, .16) 46%,
            transparent);
    transform-origin: left center;
}

.mn-slab.is-in .mn-slab__rule,
.is-in .mn-slab__rule,
.mn-section-visible .mn-slab__rule,
.mn-plate.is-in .mn-slab__rule {
    transform: scaleX(1);
}

/* --- trailing readout -------------------------------------------------- */
.mn-home .mn-slab__meta,
.mn-slab__meta {
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-size: clamp(8.5px, .66vw, 10px);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(233, 231, 223, .38);
}

/* The readout is the first thing to go when the rail runs out of room —
   the number and the chapter name are the part that has to survive. */
@media (max-width: 720px) {

    .mn-home .mn-slab__meta,
    .mn-slab__meta {
        display: none;
    }
}

/* ------------------------------------------------------------------------
   EYEBROW — the kicker that sits above a chapter heading.
   Same voice as the rail: gold pip, text, hairline that draws in.
   ------------------------------------------------------------------------ */
.mn-home .mn-eyebrow,
.mn-eyebrow {
    display: flex;
    align-items: center;
    gap: clamp(9px, .9vw, 13px);
    margin: 0 0 var(--stack-sm);
    font-family: var(--font-ar-body);
    font-size: clamp(11px, .82vw, 13px);
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.25;
    color: var(--gold-200);
    text-transform: none;
}

.mn-home .mn-eyebrow--en,
.mn-eyebrow--en,
.mn-eyebrow[dir="ltr"] {
    font-family: var(--font-en);
    font-size: clamp(9.5px, .74vw, 11px);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-200);
}

/* The pip: a 5px gold lozenge on its point, ringed in its own glow. It is
   the same mark the divider uses at its centre, so the two ornaments in a
   chapter head rhyme instead of competing. */
.mn-home .mn-eyebrow__pip,
.mn-eyebrow__pip {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    background: var(--gold-200);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(224, 149, 75, .85);
}

.mn-home .mn-eyebrow__text,
.mn-eyebrow__text {
    flex: 0 1 auto;
    white-space: nowrap;
}

.mn-home .mn-eyebrow__rule,
.mn-eyebrow__rule {
    flex: 1 1 auto;
    width: auto;
    min-width: 22px;
    max-width: clamp(40px, 6vw, 84px);
    height: 1px;
    background: linear-gradient(to left, var(--gold-300), transparent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .95s cubic-bezier(.16, 1, .3, 1) .16s;
}

.mn-eyebrow[dir="ltr"] .mn-eyebrow__rule,
.mn-eyebrow--en .mn-eyebrow__rule {
    background: linear-gradient(to right, var(--gold-300), transparent);
    transform-origin: left center;
}

.mn-eyebrow.is-in .mn-eyebrow__rule,
.is-in .mn-eyebrow__rule,
.mn-section-visible .mn-eyebrow__rule,
.mn-plate.is-in .mn-eyebrow__rule {
    transform: scaleX(1);
}

/* Centred variant (bearings, capabilities): the hairline mirrors on both
   sides instead of trailing off one end. */
.mn-home .mn-bearings-v2__kicker,
.mn-home .mn-capv2__eyebrow {
    justify-content: center;
}

/* The per-chapter classes now only carry position. Anything they used to
   say about type, colour or ornament is the component's job. */
.mn-home .mn-craftv4__kicker,
.mn-home .mn-arrivalv4__eyebrow,
.mn-home .mn-pathv4__eyebrow {
    display: flex;
    max-width: 380px;
    margin: 0 0 clamp(14px, 1.8vh, 20px);
    font-family: var(--font-en);
    font-size: clamp(9.5px, .74vw, 11px);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-200);
}

.mn-home .mn-craftv4__kicker::before,
.mn-home .mn-arrivalv4__eyebrow::before,
.mn-home .mn-pathv4__eyebrow::before {
    content: none;
}

/* Chapter rails inherit only their spacing from the chapter. */
.mn-home .mn-aboutv3__topline {
    margin-bottom: clamp(28px, 4vh, 48px);
}

.mn-home .mn-capv2__top {
    margin-bottom: 4vh;
}

/* The work chapter's header is a centred column; the rail is the one child
   that must span it edge to edge. */
.mn-home .mn-section-hdr {
    align-items: stretch;
}

.mn-home .mn-section-hdr .mn-slab {
    margin-bottom: clamp(6px, 1vh, 12px);
}

.mn-home .mn-section-hdr__title {
    text-align: center;
}

.mn-home .mn-pathv4__head {
    margin-top: clamp(26px, 4vh, 46px);
}


/* ============================================================
   ∞+1 · BUTTON SYSTEM — FINISH & STANDING MOTION
   ------------------------------------------------------------
   The buttons were flat fills that only did something on hover,
   which on a phone means they never do anything at all. Every
   primary control now carries three things it did not have:

     · a machined edge — a hairline of light along the top and a
       gold bloom under the body, so the button reads as a milled
       object sitting on the page rather than a coloured rectangle
     · a specular sweep that runs on its own, forever, with each
       button on its own phase so a row of them never flashes in
       unison
     · a press state that actually depresses

   Written against the shared classes, so a control picks all of
   this up by being .mn-btn / .mn-cta / a chapter CTA — there is
   no fourth button style to keep in sync.
   ============================================================ */

.mn-btn,
.mn-cta,
.mn-home .mn-arrivalv4__cta,
.mn-home .mn-capv2__cta,
.mn-home .mn-craftv4__cta,
.mn-spec__cta,
.mn-pf-fbtn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}

/* --- the specular sweep --------------------------------------------------
   A narrow band of light crossing the face. It is idle for most of the cycle
   and crosses quickly, which is what makes it read as a highlight catching
   an edge rather than as a loading shimmer. */
.mn-btn--gold::before,
.mn-cta::before,
.mn-home .mn-arrivalv4__cta::before,
.mn-home .mn-capv2__cta::before,
.mn-spec__cta::before {
    content: "";
    position: absolute;
    inset: -60% -20%;
    z-index: 1;
    background: linear-gradient(104deg,
            transparent 42%,
            rgba(255, 255, 255, .42) 50%,
            transparent 58%);
    transform: translateX(-130%) rotate(2deg);
    animation: mnBtnSweep 5.6s cubic-bezier(.16, 1, .3, 1) infinite;
    pointer-events: none;
}

/* Phase offsets so two buttons in one view never sweep together. */
.mn-cta::before { animation-delay: -1.4s; }
.mn-home .mn-capv2__cta::before { animation-delay: -2.6s; }
.mn-home .mn-arrivalv4__cta::before { animation-delay: -3.8s; }
.mn-spec__cta::before { animation-delay: -0.7s; }

@keyframes mnBtnSweep {
    0%, 68% { transform: translateX(-130%) rotate(2deg); }
    100%    { transform: translateX(130%) rotate(2deg); }
}

/* --- the machined edge --------------------------------------------------- */
.mn-btn--gold,
.mn-home .mn-arrivalv4__cta,
.mn-home .mn-capv2__cta,
.mn-spec__cta {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(120, 74, 20, .35),
        0 20px 44px -22px rgba(203, 162, 99, .8),
        0 0 0 1px rgba(243, 226, 192, .18);
}

.mn-btn--gold:hover,
.mn-btn--gold:focus-visible,
.mn-home .mn-arrivalv4__cta:hover,
.mn-home .mn-arrivalv4__cta:focus-visible,
.mn-home .mn-capv2__cta:hover,
.mn-home .mn-capv2__cta:focus-visible,
.mn-spec__cta:hover,
.mn-spec__cta:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -1px 0 rgba(120, 74, 20, .4),
        0 28px 62px -22px rgba(203, 162, 99, 1),
        0 0 0 1px rgba(243, 226, 192, .4),
        0 0 40px -6px rgba(224, 149, 75, .5);
}

/* Label and chevron ride above the sweep. */
.mn-btn > *,
.mn-cta > *,
.mn-home .mn-arrivalv4__cta > *,
.mn-home .mn-capv2__cta > *,
.mn-spec__cta > * {
    position: relative;
    z-index: 2;
}

/* --- press --------------------------------------------------------------- */
.mn-btn:active,
.mn-cta:active,
.mn-home .mn-arrivalv4__cta:active,
.mn-home .mn-capv2__cta:active,
.mn-spec__cta:active {
    transform: translateY(1px) scale(.985);
    transition-duration: .08s;
}

/* --- quiet / outline controls -------------------------------------------
   No fill to sweep, so the motion goes into the rule beneath them: it lights
   from the leading edge and stays lit while the control is engaged. */
.mn-btn--quiet,
.mn-home .mn-arrivalv4__secondary,
.mn-home .mn-work__all {
    position: relative;
    border-bottom-color: transparent !important;
}

.mn-btn--quiet::after,
.mn-home .mn-arrivalv4__secondary::after,
.mn-home .mn-work__all::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to left, var(--gold-100), rgba(224, 149, 75, .25));
    transform: scaleX(.34);
    transform-origin: right center;
    animation: mnRuleBreathe 4.4s cubic-bezier(.45, 0, .55, 1) infinite;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

@keyframes mnRuleBreathe {
    0%, 100% { transform: scaleX(.34); opacity: .7; }
    50%      { transform: scaleX(.62); opacity: 1; }
}

.mn-btn--quiet:hover::after,
.mn-btn--quiet:focus-visible::after,
.mn-home .mn-arrivalv4__secondary:hover::after,
.mn-home .mn-work__all:hover::after {
    transform: scaleX(1);
    animation: none;
    opacity: 1;
}

/* ------------------------------------------------------------------------
   "استكشف جميع الخدمات" — one button, one treatment.
   It carried .mn-btn--gold in the markup but two later rules overrode it
   into a bordered gold-on-transparent text link (and a translucent pill on
   phone), so the single most important CTA in the chapter was the only one
   on the site whose label was not dark ink on gold. Those overrides are
   neutralised here; it is a primary button like every other primary button.
   ------------------------------------------------------------------------ */
.mn-home .mn-capv2__cta,
.mn-home #mn-root.mn-native .mn-capv2__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    margin-top: 20px;
    padding: 0 clamp(22px, 2.2vw, 34px);
    border: 1px solid transparent;
    border-radius: 6px;
    background: linear-gradient(135deg, #CBA263 0%, #F3E2C0 48%, #D3A85F 100%);
    font-family: var(--font-ar-body);
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 600;
    color: var(--ink-900) !important;
}

/* ------------------------------------------------------------------------
   ARRIVAL CTA — a compass that actually behaves like one.
   The old mark was a static dial with a needle swinging between two fixed
   angles. This is an instrument: the bezel turns against the housing, the
   needle hunts, overshoots, and settles on north, and the whole face gets a
   cardinal tick so it reads as a compass at 22px rather than as a circle
   with a line in it.
   ------------------------------------------------------------------------ */
.mn-home .mn-arrivalv4__cta-compass {
    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, .55), transparent 62%),
        rgba(10, 14, 24, .07);
    overflow: hidden;
}

/* The bezel: cardinal ticks that rotate slowly and continuously, the way a
   floating card does inside a real housing. */
.mn-home .mn-arrivalv4__cta-compass b {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 0;
    background:
        /* N/S/E/W ticks drawn as four short bars around the rim */
        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;
    animation: mnCompassBezel 12s linear infinite;
}

@keyframes mnCompassBezel {
    to { transform: rotate(-360deg); }
}

/* The needle: a two-tone bar pinned at its centre, so the red-north /
   pale-south reading of a real needle survives at this size. */
.mn-home .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%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: mnCompassNeedle 5.2s cubic-bezier(.5, 0, .2, 1) infinite;
}

/* Hunt, overshoot, settle — then hold north long enough to be read. */
@keyframes mnCompassNeedle {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    16%  { transform: translate(-50%, -50%) rotate(128deg); }
    30%  { transform: translate(-50%, -50%) rotate(-46deg); }
    42%  { transform: translate(-50%, -50%) rotate(22deg); }
    52%  { transform: translate(-50%, -50%) rotate(-9deg); }
    60%  { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* The hub pin. */
.mn-home .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%);
}

/* A faint sweep of the housing light, so the glass on top of the dial
   catches the room. */
.mn-home .mn-arrivalv4__cta-compass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 50%;
    background: linear-gradient(118deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
    transform: translateX(-120%);
    animation: mnCompassGlass 5.2s cubic-bezier(.16, 1, .3, 1) infinite;
    pointer-events: none;
}

@keyframes mnCompassGlass {
    0%, 58% { transform: translateX(-120%); }
    76%     { transform: translateX(120%); }
    100%    { transform: translateX(120%); }
}

/* The arrow at the tail keeps nudging outward. */
.mn-home .mn-arrivalv4__cta-arrow {
    font-family: var(--font-en);
    animation: mnArrowNudge 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes mnArrowNudge {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(2px, -2px, 0); }
}


/* ------------------------------------------------------------------------
   CARD META — one label, two scripts, two sizes.
   9px is a legitimate size for spaced Latin caps: they are separate, upright
   and geometric. Arabic is connected, and its letters change shape by
   position, so the same 9px costs real legibility. The category and the year
   are therefore sized independently rather than sharing the slot's size.
   ------------------------------------------------------------------------ */
.mn-frame__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mn-frame__cat {
    font-family: var(--font-ar-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.mn-frame__year {
    font-family: var(--font-en);
    font-size: 9.5px;
    letter-spacing: .16em;
    opacity: .8;
}

/* The separator lives in CSS now, so it never lands on the wrong side of a
   bidi run the way a literal "·" between the two strings did. */
.mn-frame__year::before {
    content: "·";
    margin-inline-end: 8px;
    opacity: .6;
}

/* ------------------------------------------------------------------------
   RAIL META — was rgba(...,.38) on the navy, i.e. 3.07:1 against a 9px
   string. Raised to clear 4.5:1 while staying clearly secondary to the
   chapter name beside it.
   ------------------------------------------------------------------------ */
.mn-home .mn-slab__meta,
.mn-slab__meta {
    color: rgba(233, 231, 223, .58);
}