/* =====================================
   Navbar Tokens (Majestic Glassmorphism)
   ===================================== */
:root {
    --msb-nav-height: 70px;
    --msb-nav-bg-transparent: transparent;
    --msb-nav-bg-glass: rgba(255, 255, 255, 0.72);
    --msb-nav-bg-glass-fallback: rgba(255, 255, 255, 0.92);
    --msb-nav-bg-solid: #ffffff;
    --msb-nav-blur: 16px;
    --msb-nav-hairline: 1px solid rgba(0, 0, 0, 0.06);
    --msb-nav-link-color-dark: #ffffff;
    --msb-nav-link-color-light: #1c2330;
    --msb-nav-link-color-muted: #6f7c8a;
    --msb-nav-link-active: #ab842a;
    --msb-nav-drawer-bg: #ffffff;
    --msb-nav-drawer-width-mobile: 320px;
    --msb-nav-drawer-width-tablet: 360px;
    --msb-nav-backdrop: rgba(15, 19, 25, 0.5);
    --msb-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --msb-nav-duration: 250ms;
    --msb-nav-pill-radius: 999px;
    --msb-nav-z-base: 999;
    --msb-nav-z-drawer: 1001;
    --msb-nav-z-backdrop: 998;
    --msb-nav-mobile-height: 70px;
}

/* =====================================
   Navbar Area (Majestic Glassmorphism)
   ===================================== */
.msb-nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: var(--msb-nav-height);
    z-index: var(--msb-nav-z-base);
    /* Dark navy surface (matches site footer) */
    background-color: #192028;
    /* Outer space on all four sides — navbar floats inset from viewport edges */
    margin: 24px;
    /* No internal padding — content sits flush inside the bar */
    padding: 0;
    /* Rounded corners on all four sides */
    border-radius: 24px;
    /* Soft drop shadow to lift the navbar above the page */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: padding 240ms ease, box-shadow 240ms ease,
                border-radius 240ms ease, margin 240ms ease;
}
.msb-nav > .msb-nav-inner {
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
}
.msb-nav.is-scrolled {
    /* Sticky on scroll: pin to viewport top, fade in. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0 0 24px 24px;
    background-color: #1a2128;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    animation: msb-nav-fade-in 320ms var(--msb-nav-ease);
}
/* Note: the previous @supports backdrop-filter override is intentionally
   omitted — the cream surface is solid, not glass, so blur would defeat
   the design intent. */
@keyframes msb-nav-fade-in {
    /* Animate `top`/`opacity` only — transform is owned by the centered
       default-position rule, so it cannot be co-opted here. */
    from { top: -80px; opacity: 0; }
    to   { top: 0;    opacity: 1; }
}

.msb-nav-mobile { display: none; }
.msb-nav-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.msb-nav-brand img {
    display: block;
    height: 64px;
    width: auto;
}

.msb-nav-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--msb-nav-link-color-dark);
}
.msb-nav-toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--msb-nav-duration) var(--msb-nav-ease),
                opacity var(--msb-nav-duration) var(--msb-nav-ease);
}
body.nav-open .msb-nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .msb-nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .msb-nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.msb-nav-surface {
    position: relative;
    height: var(--msb-nav-height);
    display: flex;
    align-items: center;
    z-index: var(--msb-nav-z-base);
}
.msb-nav-inner > .container-max {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.msb-nav-brand--desktop { flex-shrink: 0; margin-right: auto; }

.msb-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.msb-nav-item { padding: 0; }
.msb-nav-link {
    position: relative;
    display: inline-block;
    padding: 10px 14px 12px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    transition: color var(--msb-nav-duration) var(--msb-nav-ease);
}
.msb-nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    background: var(--msb-nav-link-active);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--msb-nav-duration) var(--msb-nav-ease);
}
.msb-nav-link:hover { color: var(--msb-nav-link-active); }
.msb-nav-link:hover::after { transform: scaleX(0.7); }
.msb-nav-link.is-active { color: var(--msb-nav-link-active); }
.msb-nav-link.is-active::after { transform: scaleX(1); }

.msb-nav.is-scrolled .msb-nav-link { color: #ffffff; }
.msb-nav.is-scrolled .msb-nav-link.is-active { color: var(--msb-nav-link-active); }

.msb-nav-cta { flex-shrink: 0; margin-left: auto; }
.msb-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--msb-nav-pill-radius);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize;
    text-decoration: none;
    text-align: center;
    transition: background-color var(--msb-nav-duration) var(--msb-nav-ease),
                color var(--msb-nav-duration) var(--msb-nav-ease),
                border-color var(--msb-nav-duration) var(--msb-nav-ease);
}
.msb-btn-pill--outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid var(--msb-nav-link-active);
}
.msb-btn-pill--outline:hover { background: var(--msb-nav-link-active); color: #ffffff; }
.msb-nav.is-scrolled .msb-btn-pill--outline { color: #ffffff; }

.msb-nav-backdrop {
    position: fixed;
    inset: 0;
    background: var(--msb-nav-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--msb-nav-duration) var(--msb-nav-ease),
                visibility 0s linear var(--msb-nav-duration);
    z-index: var(--msb-nav-z-backdrop);
}
body.nav-open .msb-nav-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--msb-nav-duration) var(--msb-nav-ease),
                visibility 0s linear 0s;
}

.msb-nav-close {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--msb-nav-link-color-light);
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    padding: 8px;
}

/* Drawer-only brand mark (mobile drawer header).
   Hidden by default — only revealed inside the drawer at ≤767px. */
.msb-nav-brand--drawer {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.msb-nav-toggle:focus-visible,
.msb-nav-close:focus-visible,
.msb-nav-link:focus-visible,
.msb-btn-pill:focus-visible {
    outline: 2px solid var(--msb-nav-link-active);
    outline-offset: 3px;
    border-radius: 4px;
}

body.has-top-strip .msb-nav { top: 40px; }

body.no-hero .msb-nav {
    /* No-hero pages inherit the global dark-navy navbar look. */
    position: relative;
    top: auto;
    background-color: #192028;
}
.msb-nav.is-scrolled,
body.no-hero .msb-nav.is-scrolled {
    position: fixed;
    top: 0;
}

/* Home page — video hero starts flush at top:0, navbar overlays it.
   Fixed + transparent at the top (so the video shows behind the links),
   turns solid on scroll. Scoped to the video-hero page only so the
   inner pages keep their in-flow solid bar. */
body.has-video-hero .msb-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    box-shadow: none;
}
body.has-video-hero .video-banner-area {
    margin-top: 0;
}
body.has-video-hero .msb-nav.is-scrolled {
    background-color: #192028;
}

@media (prefers-reduced-motion: reduce) {
    .msb-nav,
    .msb-nav.is-scrolled,
    .msb-nav-link,
    .msb-nav-link::after,
    .msb-nav-toggle-bar,
    .msb-nav-backdrop,
    .msb-btn-pill {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* =====================================
   Mobile (≤767px) — Majestic Glassmorphism
   ===================================== */
@media only screen and (max-width: 767px) {
    .msb-nav {
        position: fixed;
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom: 0;
        padding: 0;
        border-radius: 0;
    }
    .msb-nav.is-scrolled {
        background-color: var(--msb-nav-bg-glass-fallback);
        backdrop-filter: blur(var(--msb-nav-blur));
        -webkit-backdrop-filter: blur(var(--msb-nav-blur));
        border: var(--msb-nav-hairline);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }
    .msb-nav-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--msb-nav-mobile-height);
        padding: 0 16px;
        position: relative;
        z-index: 1000;
    }
    .msb-nav-brand img { height: 40px; }
    .msb-nav-brand--desktop { display: none; }
    .msb-nav-toggle {
        width: 48px;
        height: 48px;
        color: #ffffff;
    }
    .msb-nav-toggle-bar {
        width: 28px;
        height: 2.5px;
    }
    .msb-nav-surface {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--msb-nav-drawer-width-mobile);
        max-width: 88vw;
        background-color: #192028;
        transform: translateX(100%);
        transition: transform var(--msb-nav-duration) var(--msb-nav-ease);
        flex-direction: column;
        align-items: stretch;
        padding: 88px 24px 32px;
        overflow-y: auto;
        visibility: hidden;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        z-index: var(--msb-nav-z-drawer);
    }
    body.nav-open .msb-nav-surface {
        transform: translateX(0);
        visibility: visible;
    }
    body.nav-open { overflow: hidden; }
    .msb-nav-surface .msb-nav-link { color: #ffffff; }
    .msb-nav-inner > .container-max {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .msb-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        width: 100%;
    }
    .msb-nav-item { width: 100%; }
    .msb-nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        width: 100%;
        padding: 12px 16px 12px 20px;
        color: #ffffff;
        border-left: 3px solid transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: border-color var(--msb-nav-duration) var(--msb-nav-ease),
                    color var(--msb-nav-duration) var(--msb-nav-ease),
                    background-color var(--msb-nav-duration) var(--msb-nav-ease);
    }
    .msb-nav-link::after { display: none; }
    .msb-nav-link:hover {
        color: var(--msb-nav-link-active);
        border-left-color: var(--msb-nav-link-active);
        background-color: rgba(171, 132, 42, 0.08);
    }
    .msb-nav-link.is-active {
        color: var(--msb-nav-link-active);
        border-left-color: var(--msb-nav-link-active);
    }
    .msb-nav-cta {
        margin: 24px 0 0;
        width: 100%;
    }
    .msb-btn-pill {
        width: 100%;
        justify-content: center;
        padding: 14px 22px;
        font-size: 15px;
    }
    .msb-btn-pill--outline { color: #ffffff; }
    .msb-nav-close {
        display: inline-flex;
        color: #ffffff;
    }

    /* Drawer header logo — sits top-left, mirroring the close button on the right.
       Uses the same logo image as the mobile top-bar but smaller (40px) so the
       close button at top-right stays the dominant visual anchor. */
    .msb-nav-surface > .msb-nav-brand--drawer {
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 16px;
        left: 20px;
        z-index: 2;
    }
    .msb-nav-surface > .msb-nav-brand--drawer img {
        height: 40px;
        width: auto;
    }
}

/* =====================================
   Tablet (768–991px) — Majestic Glassmorphism
   Full inline bar (no drawer) on tablet
   ===================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Hide mobile-only row + close button */
    .msb-nav-mobile { display: none; }
    .msb-nav-close { display: none; }

    /* Show the inline surface as a normal in-flow bar */
    .msb-nav-surface {
        position: relative;
        transform: none !important;
        visibility: visible !important;
        background: transparent;
        box-shadow: none;
        width: 100% !important;
        height: var(--msb-nav-height);
        max-width: 100% !important;
        padding: 0 32px;
        flex-direction: row;
        align-items: center;
        overflow: visible;
        border-radius: 0;
    }
    .msb-nav-inner > .container-max {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .msb-nav-list {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        margin: 0 auto 0 24px;
    }
    .msb-nav-item { width: auto; }
    .msb-nav-link {
        padding: 8px 10px 10px;
        font-size: 13px;
    }
    .msb-nav-cta {
        margin: 0 0 0 auto;
        width: auto;
    }
    .msb-btn-pill {
        width: auto;
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* =====================================
   Global responsive navbar outer-spacing
   ===================================== */
@media (max-width: 767px) {
    .msb-nav {
        margin: 12px;
        border-radius: 16px;
    }
    .msb-nav > .msb-nav-inner { border-radius: 16px; }
    .msb-nav.is-scrolled {
        margin: 0;
        border-radius: 0 0 16px 16px;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .msb-nav {
        margin: 16px;
        border-radius: 20px;
    }
    .msb-nav > .msb-nav-inner { border-radius: 20px; }
    .msb-nav.is-scrolled {
        margin: 0;
        border-radius: 0 0 20px 20px;
    }
}
@media (min-width: 1200px) {
    .msb-nav {
        margin: 24px;
        border-radius: 24px;
    }
    .msb-nav > .msb-nav-inner { border-radius: 24px; }
    .msb-nav.is-scrolled {
        margin: 0;
        border-radius: 0 0 24px 24px;
    }
}