/* ==========================================================
   CRESTBRIDGE SERVICES
   Navigation.css v4.0
   ----------------------------------------------------------
   PART 1
   Foundation
   Header
   Desktop Navigation
   CTA
   Hamburger
========================================================== */

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

:root{

    --nav-height:90px;
    --nav-height-scrolled:72px;

    --drawer-width:390px;

    --nav-transition:.35s cubic-bezier(.22,.61,.36,1);

    --nav-blur:18px;

    --nav-border:rgba(255,255,255,.08);

    --nav-shadow:
        0 14px 42px rgba(8,15,28,.10);

    --drawer-shadow:
        -18px 0 50px rgba(8,15,28,.16);

}

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

.cb-header *,
.cb-nav *,
.cb-nav-drawer *{

    box-sizing:border-box;

}

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

.cb-header{

    position:fixed;

    inset:0 0 auto;

    width:100%;

    z-index:1000;

    padding:18px 0;

    background:

        linear-gradient(

            180deg,

            rgba(8,15,28,.18),

            rgba(8,15,28,.08)

        );

    border-bottom:1px solid var(--nav-border);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:

        background var(--nav-transition),

        padding var(--nav-transition),

        border-color var(--nav-transition),

        box-shadow var(--nav-transition),

        backdrop-filter var(--nav-transition);

}

.cb-header::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            rgba(255,255,255,0)

        );

    opacity:.70;

    transition:opacity var(--nav-transition);

}

.cb-header.scrolled{

    padding:10px 0;

    background:rgba(255,255,255,.94);

    border-bottom:1px solid rgba(8,15,28,.06);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:var(--nav-shadow);

}

.cb-header.scrolled::before{

    opacity:.35;

}

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

.cb-header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    min-height:70px;

}

/* ==========================================================
   BRAND
========================================================== */

.cb-brand{

    position:relative;

    display:flex;

    align-items:center;

    flex-shrink:0;

    text-decoration:none;

    isolation:isolate;

}

.cb-logo{

    display:block;

    width:auto;

    height:clamp(54px,6vw,70px);

    transition:

        transform var(--nav-transition),

        opacity var(--nav-transition);

}

.cb-logo-light{

    opacity:1;

}

.cb-logo-dark{

    position:absolute;

    inset:0;

    opacity:0;

}

.cb-header.scrolled .cb-logo{

    transform:scale(.92);

}

.cb-header.scrolled .cb-logo-light{

    opacity:0;

}

.cb-header.scrolled .cb-logo-dark{

    opacity:1;

}

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

.cb-nav{

    margin-left:auto;

}

.cb-nav-menu{

    display:flex;

    align-items:center;

    gap:clamp(1.8rem,2.8vw,3rem);

    margin:0;

    padding:0;

    list-style:none;

}

.cb-nav-item{

    position:relative;

}

.cb-nav-link{

    position:relative;

    display:block;

    text-decoration:none;

    color:#ffffff;

    font-family:var(--font-heading);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    line-height:1;

    text-transform:uppercase;

    transition:

        color .30s ease,

        transform .30s ease;

}

.cb-header.scrolled .cb-nav-link{

    color:var(--navy);

}

.cb-nav-link span{

    position:relative;

    display:inline-block;

    padding-bottom:10px;

}

/* ==========================================================
   LINK UNDERLINE
========================================================== */

.cb-nav-link span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    height:3px;

    border-radius:999px;

    background:var(--gold);

    opacity:0;

    transform:scaleX(0);

    transform-origin:center;

    transition:

        opacity .30s ease,

        transform .30s ease;

}

.cb-nav-link:hover{

    color:var(--gold);

    transform:translateY(-1px);

}

.cb-nav-link:hover span::after,

.cb-nav-link.active span::after,

.cb-nav-link[aria-current="page"] span::after{

    opacity:1;

    transform:scaleX(1);

}

.cb-nav-link.active,

.cb-nav-link[aria-current="page"]{

    color:var(--gold);

}

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

.cb-nav-actions{

    display:flex;

    align-items:center;

    margin-left:24px;

    margin-right:16px;

}

.cb-nav-btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    text-decoration:none;

    border-radius:14px;

    background:

        linear-gradient(

            180deg,

            #D8B45C 0%,

            #C69D3A 100%

        );

    color:#ffffff;

    box-shadow:

        0 10px 24px rgba(8,15,28,.12);

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        color .30s ease;

}

.cb-header.scrolled .cb-nav-btn{

    color:var(--navy);

}

.cb-nav-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.15);

    opacity:0;

    transform:scale(.95);

    transition:

        opacity .30s ease,

        transform .30s ease;

}

.cb-nav-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 42px rgba(8,15,28,.20);

}

.cb-nav-btn:hover::before{

    opacity:1;

    transform:scale(1);

}

.cb-nav-btn-text{

    position:relative;

    z-index:2;

    font-family:var(--font-heading);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

}

/* ==========================================================
   HAMBURGER
========================================================== */

.cb-nav-toggle{

    display:none;

    position:relative;

    width:52px;

    height:52px;

    padding:0;

    border:0;

    background:none;

    cursor:pointer;

    z-index:1002;

}

.cb-nav-toggle span{

    position:absolute;

    left:50%;

    width:28px;

    height:2px;

    margin-left:-14px;

    border-radius:999px;

    background:#ffffff;

    transition:

        transform .30s ease,

        opacity .30s ease,

        background .30s ease;

}

.cb-nav-toggle span:nth-child(1){

    top:18px;

}

.cb-nav-toggle span:nth-child(2){

    top:25px;

}

.cb-nav-toggle span:nth-child(3){

    top:32px;

}

.cb-header.scrolled .cb-nav-toggle span{

    background:var(--navy);

}

/* ==========================================================
   END OF PART 1
========================================================== */

/* ==========================================================
   PART 2
   Mobile Navigation
   Overlay
   Drawer
   Mobile Content
========================================================== */

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

.cb-nav-overlay{

    position:fixed;

    inset:0;

    z-index:1990;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:rgba(8,15,28,.45);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:

        opacity var(--nav-transition),
        visibility var(--nav-transition);

}

.cb-nav-overlay.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

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

.cb-nav-drawer{

    position:fixed;

    top:0;
    right:0;

    width:min(var(--drawer-width),100vw);

    height:100dvh;

    display:flex;

    flex-direction:column;

    background:#FAFBFC;

    box-shadow:var(--drawer-shadow);

    transform:translateX(100%);

    transition:

        transform .42s cubic-bezier(.22,.61,.36,1);

    overflow:hidden;

    z-index:2000;

}

.cb-nav-drawer.active{

    transform:translateX(0);

}

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

.cb-mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    flex-shrink:0;

    padding:

        calc(env(safe-area-inset-top) + 18px)
        28px
        20px;

    border-bottom:1px solid rgba(8,15,28,.08);

    background:#FAFBFC;

}

.cb-mobile-brand{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.cb-mobile-logo{

    display:block;

    width:auto;

    height:48px;

}

/* ==========================================================
   CLOSE BUTTON
========================================================== */

.cb-nav-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:#F2F4F7;

    cursor:pointer;

    transition:

        transform .25s ease,

        background .25s ease,

        box-shadow .25s ease;

}

.cb-nav-close:hover{

    background:#E8ECF0;

    transform:rotate(90deg);

    box-shadow:

        0 8px 20px rgba(8,15,28,.08);

}

.cb-nav-close svg{

    color:var(--navy);

}

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

.cb-nav-mobile{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    display:flex;

    flex-direction:column;

    padding:18px 28px 0;

    scrollbar-width:thin;

}

.cb-nav-mobile::-webkit-scrollbar{

    width:6px;

}

.cb-nav-mobile::-webkit-scrollbar-thumb{

    background:rgba(8,15,28,.15);

    border-radius:999px;

}

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

.cb-mobile-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    padding:18px 0;

    text-decoration:none;

    color:var(--navy);

    border-bottom:1px solid rgba(8,15,28,.08);

    opacity:0;

    transform:translateX(24px);

    animation:

        cbMobileFade .45s forwards;

}

.cb-mobile-link:nth-child(1){

    animation-delay:.05s;

}

.cb-mobile-link:nth-child(2){

    animation-delay:.10s;

}

.cb-mobile-link:nth-child(3){

    animation-delay:.15s;

}

.cb-mobile-link:nth-child(4){

    animation-delay:.20s;

}

.cb-mobile-link:nth-child(5){

    animation-delay:.25s;

}

.cb-mobile-link:nth-child(6){

    animation-delay:.30s;

}

.cb-mobile-link span{

    font-family:var(--font-heading);

    font-size:1.08rem;

    font-weight:600;

    color:inherit;

    transition:

        color .25s ease,

        transform .25s ease;

}

.cb-mobile-link svg{

    color:inherit;

    transition:

        transform .25s ease,

        color .25s ease;

}

.cb-mobile-link:hover,

.cb-mobile-link.active{

    color:var(--gold);

}

.cb-mobile-link:hover span{

    transform:translateX(6px);

}

.cb-mobile-link:hover svg{

    transform:translateX(6px);

}

.cb-mobile-link.active span{

    color:var(--gold);

}

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

.cb-mobile-cta{

    padding:24px 28px 18px;

}

.cb-mobile-cta .cb-nav-btn{

    width:100%;

    min-height:50px;

    justify-content:center;

}

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

.cb-mobile-footer{

    padding:0 28px 30px;

}

.cb-mobile-divider{

    height:1px;

    margin-bottom:22px;

    background:rgba(8,15,28,.08);

}

.cb-mobile-email{

    display:inline-block;

    text-decoration:none;

    color:var(--navy);

    font-size:.92rem;

    transition:color .25s ease;

}

.cb-mobile-email:hover{

    color:var(--gold);

}

.cb-mobile-copy{

    margin-top:10px;

    font-size:.82rem;

    color:#7A7F87;

}

/* ==========================================================
   HAMBURGER ACTIVE
========================================================== */

.cb-nav-toggle.active span:nth-child(1){

    transform:

        translateY(7px)

        rotate(45deg);

}

.cb-nav-toggle.active span:nth-child(2){

    opacity:0;

}

.cb-nav-toggle.active span:nth-child(3){

    transform:

        translateY(-7px)

        rotate(-45deg);

}

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

@keyframes cbMobileFade{

    from{

        opacity:0;

        transform:translateX(24px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ==========================================================
   END OF PART 2
========================================================== */

/* ==========================================================
   CRESTBRIDGE SERVICES
   Navigation.css v4.0
   ----------------------------------------------------------
   PART 3
   Responsive
   Accessibility
   Motion
   Utilities
========================================================== */


/* ==========================================================
   BODY LOCK
========================================================== */

html.cb-nav-open,
body.cb-nav-open{

    overflow:hidden;

    touch-action:none;

    overscroll-behavior:none;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.cb-nav-link:focus-visible,
.cb-mobile-link:focus-visible,
.cb-nav-btn:focus-visible,
.cb-nav-toggle:focus-visible,
.cb-nav-close:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:5px;

    border-radius:6px;

}

.cb-nav-toggle{

    -webkit-tap-highlight-color:transparent;

}

.cb-nav-close{

    -webkit-tap-highlight-color:transparent;

}


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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1400px){

    .cb-nav-menu{

        gap:2rem;

    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .cb-nav-menu{

        gap:1.6rem;

    }

    .cb-nav-link{

        font-size:.88rem;

    }

}


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

@media (max-width:992px){

    .cb-header{

        padding:9px 0;

    }

    .cb-header.scrolled{

        padding:7px 0;

    }

    .cb-logo{

        height:56px;

    }

    .cb-nav{

        display:none;

    }

    .cb-nav-actions{

        display:none;

    }

    .cb-nav-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}


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

@media (max-width:768px){

    .cb-header{

        padding:9px 0;

    }

    .cb-header.scrolled{

        padding:7px 0;

    }

    .cb-header-inner{

        min-height:50px;

    }

    .cb-logo{

        height:44px;

    }

    .cb-nav-drawer{

        width:100%;

    }

    .cb-mobile-header{

        padding:

            calc(env(safe-area-inset-top) + 16px)

            18px

            18px;

    }

    .cb-nav-mobile{

        padding:

            18px

            24px

            0;

    }

    .cb-mobile-footer{

        padding:

            0

            24px

            24px;

    }

}


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

@media (max-width:576px){

    .cb-logo{

        height:50px;

    }

    .cb-mobile-logo{

        height:44px;

    }

    .cb-mobile-link{

        padding:16px 0;

    }

    .cb-mobile-link span{

        font-size:1rem;

    }

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media (max-width:480px){

    .cb-nav-drawer{

        width:100%;

    }

    .cb-mobile-header{

        padding:

            calc(env(safe-area-inset-top) + 16px)

            20px

            16px;

    }

    .cb-nav-mobile{

        padding:

            16px

            20px

            0;

    }

    .cb-mobile-cta{

        padding:

            20px;

    }

    .cb-mobile-footer{

        padding:

            0

            20px

            24px;

    }

}


/* ==========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width:360px){

    .cb-logo{

        height:46px;

    }

    .cb-mobile-logo{

        height:40px;

    }

    .cb-mobile-link span{

        font-size:.95rem;

    }

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

    .cb-header,
    .cb-nav-overlay,
    .cb-nav-drawer{

        display:none !important;

    }

}


/* ==========================================================
   IMAGE RENDERING
========================================================== */

.cb-logo,
.cb-mobile-logo{

    image-rendering:auto;

}


/* ==========================================================
   PERFORMANCE
========================================================== */

.cb-header,
.cb-nav-drawer,
.cb-nav-overlay{

    will-change:

        transform,

        opacity;

}


/* ==========================================================
   SAFE AREA SUPPORT
========================================================== */

.cb-nav-drawer{

    padding-bottom:env(safe-area-inset-bottom);

}


/* ==========================================================
   SELECTION
========================================================== */

.cb-nav-link::selection,
.cb-mobile-link::selection{

    background:transparent;

}


/* ==========================================================
   END OF FILE
========================================================== */