.elementor-465 .elementor-element.elementor-element-ecdd6fd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-ed991dd */<style>

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&display=swap");


/* =========================================================
   MAISON MASHILE — GLOBAL NAVIGATION
   ========================================================= */

.mm-header,
.mm-menu,
.mm-header *,
.mm-menu * {
    box-sizing: border-box;
}

.mm-header,
.mm-menu {
    --mm-white: #ffffff;
    --mm-navy: #0D1838;
    --mm-gold: #C5A55D;
    --mm-muted: rgba(13, 24, 56, 0.42);
    --mm-line: rgba(13, 24, 56, 0.09);
}


/* =========================================================
   HEADER
   ========================================================= */

.mm-header {
    position: fixed !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;
    height: 74px;

    padding:
        0
        clamp(30px, 4.7vw, 76px);

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    background: #ffffff !important;

    border-bottom:
        1px solid var(--mm-line);

    box-shadow: none !important;

    z-index: 999999;
}


/* =========================================================
   LOGO
   ========================================================= */

.mm-header__logo {
    display: inline-block;

    margin: 0;

    color: var(--mm-navy) !important;

    text-decoration: none !important;

    font-family:
        "Instrument Serif",
        Georgia,
        serif !important;

    font-size:
        clamp(25px, 1.65vw, 29px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.035em;

    white-space: nowrap;

    transition:
        opacity 0.3s ease;
}

.mm-header__logo:hover {
    color: var(--mm-navy) !important;

    opacity: 0.72;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.mm-header__actions {
    display: flex;

    align-items: center;

    gap:
        clamp(30px, 2.8vw, 44px);
}


/* =========================================================
   RESERVE
   No permanent underline.
   Gold line appears on hover only.
   ========================================================= */

.mm-header__reserve {
    position: relative;

    display: inline-flex;

    align-items: center;

    margin: 0;

    padding: 4px 0;

    color: var(--mm-navy) !important;

    text-decoration: none !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}


.mm-header__reserve::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background: var(--mm-gold);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform 0.45s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.mm-header__reserve:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

.mm-header__toggle {
    display: inline-flex !important;

    align-items: center;

    gap: 9px;

    margin: 0;

    padding: 4px 0;

    border: 0 !important;

    outline: 0;

    background: transparent !important;

    box-shadow: none !important;

    color: var(--mm-navy) !important;

    cursor: pointer;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}


.mm-header__toggle-text {
    display: inline-block;

    min-width: 0;

    color: var(--mm-navy);

    text-align: right;
}


/* =========================================================
   GOLD = MENU MARK
   ========================================================= */

.mm-header__menu-mark {
    display: flex !important;

    width: 17px;
    height: 7px;

    flex-direction: column;

    justify-content: space-between;

    flex-shrink: 0;
}


.mm-header__menu-mark span {
    display: block !important;

    width: 17px !important;

    height: 1px;

    margin: 0;

    background: var(--mm-gold) !important;

    transform-origin: center;

    transition:
        transform 0.45s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   FULLSCREEN MENU
   ========================================================= */

.mm-menu {
    position: fixed !important;

    inset: 0;

    width: 100vw !important;
    height: 100svh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    opacity: 0;

    pointer-events: none !important;

    background: transparent;

    color: var(--mm-navy);

    z-index: 999990;
}


/* Hide everything completely while menu is closed */

.mm-menu:not(.is-open) .mm-menu__backdrop,
.mm-menu:not(.is-open) .mm-menu__top,
.mm-menu:not(.is-open) .mm-menu__nav,
.mm-menu:not(.is-open) .mm-menu__footer {
    visibility: hidden !important;

    pointer-events: none !important;
}


/* Menu open */

.mm-menu.is-open {
    visibility: visible !important;

    opacity: 1;

    pointer-events: auto !important;
}


/* =========================================================
   WHITE BACKDROP
   ========================================================= */

.mm-menu__backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #ffffff;

    opacity: 0;

    transform: scaleY(0.98);

    transform-origin: top center;

    will-change:
        opacity,
        transform;
}


/* =========================================================
   PRIVATE HOSPITALITY
   ========================================================= */

.mm-menu__top {
    position: absolute;

    top: 102px;

    left:
        clamp(30px, 5vw, 82px);

    right:
        clamp(30px, 5vw, 82px);

    display: flex;

    align-items: center;

    justify-content: flex-end;

    z-index: 2;

    opacity: 0;

    transform: translateY(10px);
}


.mm-menu__top-label {
    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.19em;

    text-transform: uppercase;

    color: var(--mm-gold);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.mm-menu__nav {
    position: absolute;

    top: 50%;

    left:
        clamp(30px, 7vw, 118px);

    width:
        calc(
            100% -
            clamp(60px, 14vw, 236px)
        );

    transform:
        translateY(-48%);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap:
        clamp(2px, 0.25vw, 6px);

    z-index: 2;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.mm-menu__item {
    position: relative;

    display: inline-flex;

    align-items: center;

    width: max-content;

    max-width: 100%;

    color: var(--mm-navy) !important;

    text-decoration: none !important;

    white-space: nowrap;

    overflow: visible;
}


/* =========================================================
   INDEX NUMBER
   ========================================================= */

.mm-menu__index {
    width: 28px;

    align-self: flex-start;

    margin-top: 0.72em;

    margin-right:
        clamp(10px, 1.1vw, 18px);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.10em;

    color: var(--mm-muted);

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        color 0.35s ease;
}


/* =========================================================
   LARGE MENU TYPOGRAPHY
   ========================================================= */

.mm-menu__word {
    display: inline-flex;

    align-items: center;

    font-family:
        "Instrument Serif",
        Georgia,
        serif;

    font-size:
        clamp(44px, 4.5vw, 72px);

    font-weight: 400;

    line-height: 0.91;

    letter-spacing: -0.045em;

    color: var(--mm-navy);

    transition:
        transform 0.5s
        cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   FIRST LETTER
   ========================================================= */

.mm-menu__first {
    display: inline-block;

    flex: 0 0 auto;

    opacity: 0;

    transform:
        translateY(18px);
}


/* =========================================================
   GOLD DIAGONAL DIVIDER
   ========================================================= */

.mm-menu__divider {
    display: inline-block;

    flex: 0 0 auto;

    width: 1px;

    height: 0.82em;

    margin:
        0
        clamp(13px, 1.3vw, 21px);

    background:
        var(--mm-gold);

    transform:
        rotate(18deg)
        scaleY(0);

    transform-origin:
        center center;
}


/* =========================================================
   REST OF WORD
   ========================================================= */

.mm-menu__tail {
    display: inline-block;

    width: 0;

    overflow: hidden;

    white-space: nowrap;
}


/* =========================================================
   ITALIC EMPHASIS
   ========================================================= */

.mm-menu__tail em {
    font-family:
        "Instrument Serif",
        Georgia,
        serif;

    font-style: italic;

    font-weight: 400;

    color: inherit;

    transition:
        color 0.35s ease;
}


/* =========================================================
   MENU HOVER
   ========================================================= */

@media (hover: hover) {

    .mm-menu__item:hover
    .mm-menu__word {
        transform:
            translateX(8px);
    }


    .mm-menu__item:hover
    .mm-menu__tail em {
        color:
            var(--mm-gold);
    }


    .mm-menu__item:hover
    .mm-menu__index {
        color:
            var(--mm-gold);
    }

}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.mm-menu__footer {
    position: absolute;

    left:
        clamp(30px, 5vw, 82px);

    right:
        clamp(30px, 5vw, 82px);

    bottom:
        clamp(28px, 4vh, 46px);

    padding-top: 16px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    border-top:
        1px solid var(--mm-line);

    z-index: 2;

    opacity: 0;

    transform:
        translateY(10px);
}


.mm-menu__footer-right {
    display: flex;

    justify-content: flex-end;
}


.mm-menu__footer-right a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color:
        var(--mm-navy) !important;

    text-decoration:
        none !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.mm-menu__footer-right a::after {
    content: "↗";

    color:
        var(--mm-gold);

    font-size: 13px;

    line-height: 1;

    transition:
        transform 0.4s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.mm-menu__footer-right a:hover::after {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   MENU OPEN
   ========================================================= */

body.mm-menu-open {
    overflow: hidden !important;
}


body.mm-menu-open .mm-header {
    background:
        #ffffff !important;

    border-bottom-color:
        rgba(13, 24, 56, 0.06);
}


/* =========================================================
   GOLD = BECOMES X
   ========================================================= */

body.mm-menu-open
.mm-header__menu-mark
span:first-child {

    transform:
        translateY(3px)
        rotate(45deg);
}


body.mm-menu-open
.mm-header__menu-mark
span:last-child {

    transform:
        translateY(-3px)
        rotate(-45deg);
}


/* =========================================================
   SCROLLED HEADER
   ========================================================= */

.mm-header.is-scrolled {
    background:
        #ffffff !important;

    border-bottom-color:
        rgba(13, 24, 56, 0.11);

    box-shadow:
        0 8px 30px
        rgba(13, 24, 56, 0.025) !important;
}


/* =========================================================
   FOCUS
   ========================================================= */

.mm-header__logo:focus-visible,
.mm-header__reserve:focus-visible,
.mm-header__toggle:focus-visible,
.mm-menu a:focus-visible {
    outline:
        1px solid var(--mm-gold);

    outline-offset: 6px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .mm-header {
        height: 70px;

        padding-left: 30px;
        padding-right: 30px;
    }


    .mm-menu__top {
        top: 92px;

        left: 30px;
        right: 30px;
    }


    .mm-menu__nav {
        left: 40px;

        width:
            calc(100% - 80px);
    }


    .mm-menu__word {
        font-size:
            clamp(42px, 6vw, 60px);
    }


    .mm-menu__footer {
        left: 30px;
        right: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .mm-header {
        height: 64px;

        padding-left: 20px;
        padding-right: 20px;
    }


    .mm-header__logo {
        font-size: 21px;
    }


    .mm-header__actions {
        gap: 20px;
    }


    .mm-header__reserve,
    .mm-header__toggle {
        font-size: 8px;

        letter-spacing: 0.17em;
    }


    .mm-header__menu-mark {
        width: 16px;

        height: 7px;
    }


    .mm-header__menu-mark span {
        width: 16px !important;
    }


    /* TOP */

    .mm-menu__top {
        top: 84px;

        left: 20px;
        right: 20px;
    }


    .mm-menu__top-label {
        font-size: 8px;
    }


    /* NAV */

    .mm-menu__nav {
        top: 48%;

        left: 20px;

        width:
            calc(100% - 40px);

        transform:
            translateY(-50%);

        gap: 7px;
    }


    .mm-menu__index {
        width: 22px;

        margin-right: 7px;

        font-size: 7px;
    }


    .mm-menu__word {
        font-size:
            clamp(34px, 9.5vw, 47px);

        line-height: 0.94;
    }


    .mm-menu__divider {
        margin-left: 9px;

        margin-right: 9px;
    }


    /* FOOTER */

    .mm-menu__footer {
        left: 20px;
        right: 20px;

        bottom: 22px;

        padding-top: 14px;
    }


    .mm-menu__footer-right {
        width: 100%;
    }


    .mm-menu__footer-right a {
        font-size: 8px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .mm-header__reserve {
        display: none;
    }


    .mm-menu__word {
        font-size:
            clamp(30px, 8.8vw, 41px);
    }


    .mm-menu__divider {
        margin-left: 7px;

        margin-right: 7px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mm-header__reserve::after,
    .mm-header__menu-mark span,
    .mm-menu__word,
    .mm-menu__tail em,
    .mm-menu__footer-right a::after {
        transition: none;
    }

}

</style>/* End custom CSS */