/* ============================================================
   THREE DIRECTIONS — Magnetic North CHROME
   Bespoke shared shell: instrument header, bearing-selector
   overlay, and the Arrival footer. Purpose-built for the
   Magnetic North experience — not a re-skin of the old theme.
   Loaded on every page (after mn-ui.css). Uses .mn- classes
   only, so it never collides with legacy .td- markup that the
   inner pages still rely on.
   ============================================================ */
:root {
    --mn-navy: #0A0E18;
    --mn-navy-2: #070A12;
    --mn-ink: #E9E7DF;
    --mn-gold: #CBA263;
    --mn-gold-2: #E7C88F;
    --mn-hd-h: 74px;
    /* The type families are owned by mn-ui.css §0/§1, which loads first.
       This file used to redeclare them here with a heavier specificity
       accident — three families that were never shipped — which silently
       overrode the real stack on every page. */
}

/* inner (non-experience) pages clear the fixed header */
body:not(.mn-experience) {
    padding-top: var(--mn-hd-h);
}

/* ============================================================
   1 · INSTRUMENT HEADER
   ============================================================ */
.mn-hd {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--mn-hd-h);
    display: flex;
    align-items: center;
    padding: 0 clamp(18px, 5vw, 54px);
    background: linear-gradient(180deg, rgba(10, 14, 24, .86) 0%, rgba(10, 14, 24, 0) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-bottom: 1px solid transparent;
    transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease, height .4s ease;
    gap: clamp(14px, 4vw, 40px);
}

.mn-hd.is-scrolled {
    background: rgba(9, 12, 20, .92);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    border-bottom-color: rgba(203, 162, 99, .22);
    height: 64px;
}

.mn-hd__inner {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* --- brand / compass mark --- */
.mn-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.mn-brand__mark {
    position: relative;
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.mn-brand__mark .ring::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 1px;
    height: 6px;
    background: var(--mn-gold-2);
    transform: translateX(-50%);
    box-shadow: 0 0 6px var(--mn-gold-2);
}

.mn-brand__mark .tick {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(233, 231, 223, .10);
    transition: transform .1s linear;
}

.mn-brand__mark .needle {
    position: absolute;
    top: 9px;
    bottom: 50%;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
    transform-origin: bottom center;
    background: linear-gradient(var(--mn-gold-2), rgba(231, 200, 143, .1));
}

.mn-brand__mark .hub {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mn-gold-2);
    box-shadow: 0 0 8px var(--mn-gold-2);
}

/* The logo sits dead centre of the compass ring.
   It used to be `position:relative` and left to the flex centring, but when a
   logo is uploaded td_logo_tag() emits a <picture>, and it is the <picture> —
   an inline box with a baseline and a line-box below it — that becomes the
   flex item. That baseline gap pushed the mark a couple of pixels low, and the
   img's 60% then resolved against .mn-brand__mark rather than the picture, so
   nothing lined up. Both the wrapper and the image are now absolutely centred
   on the ring, which is geometry rather than flow, so neither the element type
   nor the aspect ratio of the uploaded file can shift it. */
.mn-brand__mark picture,
.mn-brand__mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 58%;
    height: 58%;
    object-fit: contain;
    object-position: center;
}

/* Inside a <picture>, the img fills its already-centred wrapper. */
.mn-brand__mark picture img {
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
}

.mn-brand__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.04;
    font-family:var(--font-en);
}

.mn-brand__txt b {
    font-family: var(--font-ar-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--mn-ink);
}

.mn-brand__txt span {
    font-family: var(--font-en);
    font-size: 8px;
    letter-spacing: .28em;
    color: rgba(233, 231, 223, .46);
}

/* --- desktop nav --- */
.mn-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
}

.mn-nav a {
    position: relative;
    font-family: var(--font-ar-display);
    font-weight: 500;
    font-size: 15px;
    color: rgba(233, 231, 223, .74);
    padding: 6px 0;
    transition: color .32s ease;
        text-decoration: none;
}

.mn-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--mn-gold), var(--mn-gold-2));
    transition: width .4s cubic-bezier(.16, 1, .3, 1);
}

.mn-nav a:hover,
.mn-nav a[aria-current="page"] {
    color: var(--mn-gold-2);
}

.mn-nav a:hover::after,
.mn-nav a[aria-current="page"]::after {
    width: 100%;
}

/* --- header coordinate readout (center, instrument flavour) --- */
.mn-hd__coord {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: .2em;
    color: rgba(233, 231, 223, .5);
    white-space: nowrap;
}

.mn-hd__coord .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mn-gold);
    box-shadow: 0 0 8px var(--mn-gold);
    animation: mnHdPulse 2.6s ease-in-out infinite;
}

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

@keyframes mnHdPulse {

    0%,
    100% {
        opacity: .4
    }

    50% {
        opacity: 1
    }
}

/* --- right cluster --- */
.mn-hd__end {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.mn-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--mn-gold);
    color: var(--mn-navy);
    font-family: var(--font-ar-body);
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: 2px;
    box-shadow: 0 10px 30px -14px rgba(203, 162, 99, .6);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, background .3s ease;
}

.mn-cta:hover {
    color: var(--mn-navy);
    background: var(--mn-gold-2);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px -14px rgba(203, 162, 99, .7);
}

.mn-cta span {
    font-family: var(--font-en);
}

.mn-burger {
    position: relative;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid rgba(233, 231, 223, .16);
    background: rgba(233, 231, 223, .02);
    border-radius: 4px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
    transition: border-color .35s ease, background .35s ease;
}

.mn-burger:hover {
    border-color: rgba(203, 162, 99, .5);
    background: rgba(203, 162, 99, .08);
}

.mn-burger i {
    display: block;
    width: 17px;
    height: 1.5px;
    background: var(--mn-gold);
    transition: transform .35s ease, opacity .3s ease;
}

/* ============================================================
   2 · BEARING-SELECTOR OVERLAY (mobile / full nav)
   ============================================================ */
.mn-ov {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(8, 11, 19, .97);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 6vw, 64px);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s .5s;
}

.mn-ov.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.mn-ov__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background:
        radial-gradient(60% 60% at 78% 22%, rgba(203, 162, 99, .12), transparent 62%),
        linear-gradient(rgba(233, 231, 223, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 231, 223, .03) 1px, transparent 1px);
    background-size: auto, 74px 74px, 74px 74px;
    -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 25%, transparent 80%);
    mask-image: radial-gradient(circle at 70% 40%, #000 25%, transparent 80%);
}

.mn-ov__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mn-ov__eyebrow {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--mn-gold);
}

.mn-ov__close {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(233, 231, 223, .18);
    background: transparent;
    border-radius: 50%;
    color: var(--mn-ink);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}

.mn-ov__close:hover {
    border-color: var(--mn-gold);
    background: rgba(203, 162, 99, .1);
    transform: rotate(90deg);
}

.mn-ov__nav {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 1.4vh, 16px);
}

.mn-ov__nav a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-family: var(--font-ar-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 8vw, 4.4rem);
    line-height: 1.06;
    color: var(--mn-ink);
    transition: color .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.mn-ov__nav a .num {
    font-family: var(--font-en);
    font-size: clamp(.7rem, 1.6vw, .9rem);
    letter-spacing: .1em;
    color: var(--mn-gold);
    opacity: .7;
    font-weight: 400;
}

.mn-ov__nav a:hover {
    color: var(--mn-gold-2);
    transform: translateX(-16px);
}

.mn-ov__nav a[aria-current="page"] {
    color: var(--mn-gold-2);
}

.mn-ov__foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: clamp(18px, 3vh, 30px);
    border-top: 1px solid rgba(233, 231, 223, .1);
}

.mn-ov__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.mn-ov__contacts a {
    font-family: var(--font-en);
    font-size: 13px;
    color: rgba(233, 231, 223, .7);
}

.mn-ov__contacts a:hover {
    color: var(--mn-gold-2);
}

.mn-ov__social {
    display: flex;
    gap: 8px;
}

.mn-ov__social a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(233, 231, 223, .14);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(233, 231, 223, .7);
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.mn-ov__social a:hover {
    border-color: var(--mn-gold);
    color: var(--mn-gold-2);
    background: rgba(203, 162, 99, .08);
}

/* ============================================================
   3 · ARRIVAL FOOTER
   ============================================================ */
.mn-ft {
    position: relative;
    background: var(--mn-navy-2);
    color: var(--mn-ink);
    overflow: hidden;
}

.mn-ft__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .6;
    background:
        radial-gradient(46% 60% at 50% 0%, rgba(203, 162, 99, .12), transparent 60%),
        linear-gradient(rgba(233, 231, 223, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 231, 223, .025) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
    -webkit-mask-image: radial-gradient(circle at 50% 12%, #000 18%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 12%, #000 18%, transparent 74%);
}

/* --- arrival CTA band --- */
.mn-ft__arrival {
    position: relative;
    text-align: center;
    padding: clamp(64px, 12vh, 130px) 24px clamp(40px, 7vh, 80px);
    border-bottom: 1px solid rgba(233, 231, 223, .08);
}

.mn-ft__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--mn-gold);
}

.mn-ft__eyebrow::before,
.mn-ft__eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: rgba(203, 162, 99, .5);
}

.mn-ft__title {
    margin: 0;
    font-family: var(--font-ar-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 7vw, 5.4rem);
    line-height: 1.03;
}

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

.mn-ft__cta {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--mn-gold);
    color: var(--mn-navy);
    font-family: var(--font-ar-body);
    font-weight: 600;
    font-size: 16px;
    padding: 17px 40px;
    border-radius: 2px;
    box-shadow: 0 14px 40px -16px rgba(203, 162, 99, .65);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, background .3s ease;
}

.mn-ft__cta:hover {
    color: var(--mn-navy);
    background: var(--mn-gold-2);
    transform: translateY(-2px);
    box-shadow: 0 22px 54px -16px rgba(203, 162, 99, .75);
}

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

.mn-ft__cta:hover .needle {
    transform: rotate(360deg);
}

.mn-ft__cta .needle::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--mn-navy);
    border-radius: 50%;
    opacity: .45;
}

.mn-ft__cta .needle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    width: 1.5px;
    height: 7px;
    background: var(--mn-navy);
    transform: translateX(-50%);
}

.mn-ft__lock {
    margin-top: 22px;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(233, 231, 223, .42);
}

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

/* --- footer body grid --- */
.mn-ft__grid {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: clamp(48px, 8vh, 84px) clamp(24px, 5vw, 54px) clamp(30px, 5vh, 50px);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(28px, 4vw, 60px);
}

.mn-ft__col h6 {
    margin: 0 0 20px;
    font-family: var(--font-en);
    font-size: 10.5px;
    letter-spacing: .24em;
    color: rgba(233, 231, 223, .45);
    font-weight: 500;
}

.mn-ft__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.mn-ft__brand .mn-brand__txt b {
    font-size: 17px;
}

.mn-ft__desc {
    margin: 0 0 22px;
    max-width: 300px;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(233, 231, 223, .6);
}

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

.mn-ft__links a,
.mn-ft__contact a,
.mn-ft__contact span {
    font-family: var(--font-ar-body);
    font-size: 14px;
    color: rgba(233, 231, 223, .68);
    transition: color .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration:none;
}

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

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

.mn-ft__contact .mono {
    font-family: var(--font-en);
    letter-spacing: .02em;
    font-size: 13px;
}

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

.mn-ft__social {
    display: flex;
    gap: 8px;
}

.mn-ft__social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(233, 231, 223, .14);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(233, 231, 223, .65);
    transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.mn-ft__social a:hover {
    border-color: var(--mn-gold);
    color: var(--mn-gold-2);
    background: rgba(203, 162, 99, .08);
}

/* --- footer baseline --- */
.mn-ft__base {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 22px clamp(24px, 5vw, 54px) 30px;
    border-top: 1px solid rgba(233, 231, 223, .08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mn-ft__copy {
    margin: 0;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(233, 231, 223, .42);
}

.mn-ft__credit {
    flex: 0 0 100%;
    margin: 4px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(233, 231, 223, .62);
}

.mn-ft__credit a {
    margin-inline-start: 4px;
    color: var(--mn-gold-2);
    text-decoration: none;
    transition: color .3s ease, opacity .3s ease;
}

.mn-ft__credit a:hover,
.mn-ft__credit a:focus-visible {
    color: var(--mn-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mn-ft__coordtag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(233, 231, 223, .42);
}

.mn-ft__coordtag .mk {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(233, 231, 223, .3);
    border-radius: 50%;
}

.mn-ft__coordtag .mk::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    width: 1px;
    height: 5px;
    background: var(--mn-gold-2);
    transform: translateX(-50%);
}

/* ============================================================
   4 · FLOATING BEACON DOCK
   ------------------------------------------------------------
   Three controls used to live at three unrelated sizes, in three
   shapes, with three different idle animations: a 44px gold square
   for to-top, a 48px glass circle for Instagram, a 54px solid gold
   circle for WhatsApp — stacked so close that the Instagram ring
   pulsed straight through the WhatsApp button.

   They are one instrument dock now. A shared shell (--beacon-*)
   gives all three the same glass body, the same rotating rim, the
   same idle levitation and the same entrance; the accent colour
   and the icon are all that differ. Nothing here waits for a
   hover: the rim turns and the dock breathes on its own.
   ============================================================ */
:root {
    --beacon-size: 52px;
    --beacon-gap: 14px;
    --beacon-edge: 22px;
}

/* The shared shell. Applied to all three by selector rather than by a
   class, because the markup for to-top and WhatsApp predates the dock
   and neither can gain a wrapper without touching every page. */
.mn-totop,
.mn-ig,
.mn-wa__btn {
    position: fixed;
    z-index: 949;
    width: var(--beacon-size);
    height: var(--beacon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(203, 162, 99, .34);
    background:
        radial-gradient(120% 120% at 32% 22%, rgba(231, 200, 143, .18), transparent 58%),
        rgba(9, 12, 20, .82);
    color: var(--mn-gold-2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 18px 40px -20px rgba(0, 0, 0, .95),
        0 0 28px -10px rgba(203, 162, 99, .3),
        inset 0 1px 0 rgba(243, 226, 192, .16);
    transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        color .3s ease,
        box-shadow .4s ease;
}

/* --- the rotating rim ---------------------------------------------------
   A conic gradient clipped to a 1px ring. It is a pseudo-element on its own
   layer, so the turn is a single composited rotation and never touches the
   button's own transform (which carries the levitation and the hover lift). */
.mn-totop::before,
.mn-ig::before,
.mn-wa__btn::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(231, 200, 143, .05) 90deg,
            var(--mn-gold-2) 168deg,
            rgba(255, 243, 214, .95) 182deg,
            rgba(231, 200, 143, .05) 260deg,
            transparent 360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    /* Slow: a masked conic gradient is the most expensive layer in the dock,
       and at this size a leisurely turn reads better than a fast one anyway. */
    animation: mnBeaconRim 11s linear infinite;
    pointer-events: none;
}

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

/* --- the idle levitation ------------------------------------------------
   Each beacon floats on its own phase, so the dock reads as three separate
   objects held in place rather than one block sliding up and down. */
.mn-ig,
.mn-wa__btn {
    animation: mnBeaconFloat 6s ease-in-out infinite;
}

.mn-ig {
    animation-delay: -3s;
}

@keyframes mnBeaconFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -5px, 0); }
}

/* --- icons -------------------------------------------------------------- */
.mn-totop i,
.mn-ig i,
.mn-wa__btn i {
    position: relative;
    z-index: 2;
    font-size: 21px;
    line-height: 1;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}

/* --- hover -------------------------------------------------------------- */
/* The rim brightens, the glass fills with gold, and the whole thing rises.
   The lift is written on the icon and a scale on the shell so it does not
   fight the levitation keyframes above. */
.mn-totop:hover,
.mn-ig:hover,
.mn-wa__btn:hover,
.mn-totop:focus-visible,
.mn-ig:focus-visible,
.mn-wa__btn:focus-visible {
    color: var(--mn-navy);
    border-color: var(--mn-gold-2);
    box-shadow:
        0 24px 52px -18px rgba(0, 0, 0, .95),
        0 0 42px -8px rgba(224, 149, 75, .65),
        inset 0 1px 0 rgba(255, 255, 255, .4);
}

.mn-totop:hover i,
.mn-ig:hover i,
.mn-wa__btn:hover i {
    transform: scale(1.14);
}

/* The gold flood is a pseudo-element that irises open from the centre, so
   the fill has a direction instead of cross-fading. */
.mn-totop::after,
.mn-ig::after,
.mn-wa__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--mn-gold-2), var(--mn-gold) 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
    pointer-events: none;
}

.mn-totop:hover::after,
.mn-ig:hover::after,
.mn-wa__btn:hover::after,
.mn-totop:focus-visible::after,
.mn-ig:focus-visible::after,
.mn-wa__btn:focus-visible::after {
    transform: scale(1);
    opacity: 1;
}

/* --- placement ---------------------------------------------------------- */
/* One column on the trailing edge, bottom-up: WhatsApp, Instagram, to-top.
   Positions are derived from --beacon-size/--beacon-gap so the stack never
   overlaps again when a size changes. */
.mn-wa {
    position: fixed;
    z-index: 950;
    bottom: calc(var(--beacon-edge) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--beacon-edge);
    width: var(--beacon-size);
    height: var(--beacon-size);
}

.mn-wa__btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0;
    /* WhatsApp is the primary action, so it is the one solid gold body in
       the dock — the other two are glass until you reach for them. */
    background:
        radial-gradient(120% 120% at 32% 22%, rgba(255, 243, 214, .55), transparent 60%),
        linear-gradient(150deg, var(--mn-gold) 0%, var(--mn-gold-2) 100%);
    color: var(--mn-navy);
    border-color: rgba(243, 226, 192, .55);
}

.mn-wa__btn i {
    font-size: 24px;
}

.mn-ig {
    bottom: calc(var(--beacon-edge) + var(--beacon-size) + var(--beacon-gap) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--beacon-edge);
}

/* to-top keeps its own corner: it is navigation, not contact, and it only
   appears once the visitor is far enough down to want it. */
.mn-totop {
    bottom: calc(var(--beacon-edge) + env(safe-area-inset-bottom, 0px));
    inset-inline-start: var(--beacon-edge);
    inset-inline-end: auto;
    opacity: 0;
    transform: translateY(16px) scale(.86);
    pointer-events: none;
    transition:
        opacity .45s cubic-bezier(.16, 1, .3, 1),
        transform .55s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        color .3s ease,
        box-shadow .4s ease;
}

.mn-totop.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.mn-totop i {
    font-size: 17px;
}

/* --- the outward signal -------------------------------------------------
   One ping per beacon, on the WhatsApp button only. Two overlapping rings
   at this size read as noise, which is what the old .mn-ig__ring was doing
   underneath the WhatsApp button. */
.mn-wa__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--mn-gold);
    animation: mnWaPulse 3s cubic-bezier(.16, 1, .3, 1) infinite;
    pointer-events: none;
}

@keyframes mnWaPulse {
    0%       { transform: scale(1);   opacity: .75; }
    70%,100% { transform: scale(1.9); opacity: 0; }
}

/* Instagram keeps a much quieter mark: a single satellite tracing its rim,
   which reads as "live" without competing with the WhatsApp ping. */
.mn-ig__ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 0;
    animation: mnIgOrbit 7s linear infinite;
    pointer-events: none;
}

.mn-ig__ring::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--mn-gold-2);
    box-shadow: 0 0 10px 1px rgba(231, 200, 143, .9);
}

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

/* --- entrance ----------------------------------------------------------- */
/* The dock arrives after the page settles rather than being painted with it.
   fill-mode is `backwards`, not `both`: it holds the 0% frame through the
   delay and then hands control back to the element's own style. With `both`
   the final frame would keep owning opacity, so a browser that never ran the
   animation would leave the contact buttons permanently invisible. */
.mn-wa {
    animation: mnBeaconIn .8s cubic-bezier(.16, 1, .3, 1) .5s backwards;
}

.mn-ig {
    animation:
        mnBeaconIn .8s cubic-bezier(.16, 1, .3, 1) .68s backwards,
        mnBeaconFloat 6s ease-in-out 1.4s infinite;
}

@keyframes mnBeaconIn {
    0%   { opacity: 0; transform: translate3d(0, 26px, 0) scale(.7); }
    100% { opacity: 1; transform: none; }
}

/* ============================================================
   5 · MICRO-INTERACTION HOOKS
   ============================================================ */
[data-mn-press] {
    transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

[data-mn-press].mn-press-down {
    transform: scale(.96);
}

/* ============================================================
   6 · RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .mn-hd__coord {
        display: none;
    }
}

@media (max-width: 900px) {
    .mn-nav {
        display: none;
    }

    .mn-burger {
        display: inline-flex;
    }

    .mn-cta {
        display: none;
    }
}

@media (max-width: 860px) {
    .mn-ft__grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px 28px;
    }

    .mn-ft__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .mn-ft__grid {
        grid-template-columns: 1fr;
    }

    .mn-ft__base {
        justify-content: center;
        text-align: center;
    }
}
/*
*/



@media (max-width: 520px) {
    /* The dock scales as a unit — the stack offsets are derived from these
       two tokens, so nothing has to be repositioned by hand. */
    :root {
        --beacon-size: 48px;
        --beacon-gap: 12px;
        --beacon-edge: 18px;
    }
}