/*
 * Silkways Group — premium navigation
 * Transparent header on desktop in every state; no full-width navbar color.
 * Desktop: logo left, primary links truly centered, Contact Us right.
 * Mobile/tablet: compact header with a solid, readable menu panel.
 */

:root{
    --nav-height:88px;
    --nav-bg:transparent;
    --nav-bg-strong:rgba(4,27,42,.96);
    --nav-line:rgba(255,255,255,.10);
    --nav-text:#244557;
    --nav-white:#fff;
    --nav-blue:#1596d2;
    --nav-blue-light:#72d4f4;
    --nav-red:#e52c35;
    --nav-pill-bg:rgba(255,255,255,.80);
    --nav-pill-bg-strong:rgba(255,255,255,.90);
    --nav-pill-border:rgba(255,255,255,.72);
    --nav-pill-shadow:0 14px 36px rgba(4,31,48,.14),inset 0 1px 0 rgba(255,255,255,.72);
    --nav-pill-hover:rgba(9,109,172,.085);
    --nav-pill-active:linear-gradient(135deg,rgba(9,109,172,.13),rgba(114,212,244,.12));
}

/* Header shell. Fixed means it never reserves a separate strip above the hero. */
.site-header,
.home-page .site-header.site-header--overlay,
.inner-page .site-header{
    position:fixed !important;
    inset:0 0 auto 0 !important;
    z-index:120 !important;
    width:100% !important;
    height:var(--nav-height) !important;
    min-height:var(--nav-height) !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    transition:height .32s cubic-bezier(.2,.7,.2,1),transform .32s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease !important;
}

/* Keep the full header completely transparent on inner pages and after scroll. */
.inner-page .site-header,
.home-page .site-header.site-header--overlay.is-scrolled,
.site-header.is-scrolled{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border-bottom-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.site-header .nav,
.home-page .site-header.site-header--overlay .nav,
.inner-page .site-header .nav{
    position:relative !important;
    width:min(1440px,calc(100% - 48px)) !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

/* Brand */
.site-header .brand{
    position:relative !important;
    z-index:3 !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    translate:none !important;
    transition:opacity .22s ease,filter .22s ease !important;
}
.site-header .nav > .brand,
.home-page .site-header.site-header--overlay .nav > .brand,
.inner-page .site-header .nav > .brand,
.site-header .brand:hover,
.site-header .brand:focus-visible{
    transform:none !important;
    translate:none !important;
}
.site-header .brand img{
    display:block !important;
    width:var(--header-logo-width,120px) !important;
    height:auto !important;
    max-height:68px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.20)) !important;
    transform:none !important;
    transition:filter .22s ease,opacity .22s ease !important;
}
.site-header .brand:hover img,
.site-header .brand:focus-visible img{
    transform:none !important;
}

/* Desktop */
@media(min-width:1101px){
    .site-header .menu-button{display:none !important}

    /* Smooth centered light white-glass desktop nav box. */
    .site-header #primary-navigation{
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        right:auto !important;
        transform:translate(-50%,-50%) !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:4px !important;
        width:max-content !important;
        max-width:calc(100% - 440px) !important;
        margin:0 !important;
        padding:6px 8px !important;
        background:var(--nav-pill-bg) !important;
        border:1px solid var(--nav-pill-border) !important;
        border-radius:999px !important;
        box-shadow:var(--nav-pill-shadow) !important;
        backdrop-filter:blur(18px) saturate(125%) !important;
        -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    }

    .site-header #primary-navigation a:not(.nav-cta){
        position:relative !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:38px !important;
        padding:0 15px !important;
        border:0 !important;
        border-radius:999px !important;
        background:transparent !important;
        color:var(--nav-text) !important;
        font-family:var(--display,'Manrope',sans-serif) !important;
        font-size:13.5px !important;
        font-weight:750 !important;
        line-height:1 !important;
        letter-spacing:.014em !important;
        text-shadow:none !important;
        box-shadow:none !important;
        transition:color .24s ease,background .24s ease,transform .24s ease,box-shadow .24s ease !important;
    }

    .site-header #primary-navigation a:not(.nav-cta)::after{display:none !important;content:none !important}

    .site-header #primary-navigation a:not(.nav-cta):hover,
    .site-header #primary-navigation a:not(.nav-cta):focus-visible{
        color:#0b5277 !important;
        background:var(--nav-pill-hover) !important;
        transform:translateY(-1px) !important;
    }
    .site-header #primary-navigation a.is-active:not(.nav-cta){
        color:#084d70 !important;
        background:var(--nav-pill-active) !important;
        box-shadow:inset 0 0 0 1px rgba(9,109,172,.10),0 5px 14px rgba(9,55,79,.08) !important;
    }

    .site-header #primary-navigation .nav-cta--mobile{display:none !important}

    .site-header .nav-cta--desktop{
        position:relative !important;
        z-index:3 !important;
        flex:0 0 auto !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:42px !important;
        margin-left:auto !important;
        padding:0 20px !important;
        border:1px solid rgba(122,215,246,.42) !important;
        border-radius:999px !important;
        background:linear-gradient(135deg,#0f88c2,#0c6ea8) !important;
        color:#fff !important;
        font-family:var(--display,'Manrope',sans-serif) !important;
        font-size:13.5px !important;
        font-weight:800 !important;
        letter-spacing:.02em !important;
        text-shadow:none !important;
        box-shadow:0 12px 30px rgba(4,59,89,.22) !important;
        transition:transform .24s ease,filter .24s ease,box-shadow .24s ease !important;
    }
    .site-header .nav-cta--desktop:hover,
    .site-header .nav-cta--desktop:focus-visible,
    .site-header .nav-cta--desktop.is-active{
        transform:translateY(-2px) !important;
        filter:brightness(1.04) !important;
        box-shadow:0 16px 34px rgba(4,59,89,.28) !important;
    }

    .site-header a:focus-visible{
        outline:2px solid rgba(114,212,244,.95) !important;
        outline-offset:4px !important;
    }
}

/* Desktop scroll refinement: keep the same white-glass nav box, just slightly tighter. */
@media(min-width:1101px){
    .site-header.is-scrolled,
    .home-page .site-header.site-header--overlay.is-scrolled,
    .inner-page .site-header.is-scrolled{
        height:80px !important;
        min-height:80px !important;
        background:rgba(247,251,253,.92) !important;
        background-color:rgba(247,251,253,.92) !important;
        border-bottom-color:rgba(16,67,91,.10) !important;
        box-shadow:0 12px 34px rgba(5,35,52,.10) !important;
        backdrop-filter:blur(18px) saturate(135%) !important;
        -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
    }
    .site-header.is-scrolled .brand img,
    .home-page .site-header.site-header--overlay.is-scrolled .brand img{
        width:var(--header-logo-width,120px) !important;
        max-height:62px !important;
        transform:none !important;
    }
    .site-header.is-scrolled #primary-navigation,
    .home-page .site-header.site-header--overlay.is-scrolled #primary-navigation{
        padding:5px 7px !important;
        background:var(--nav-pill-bg-strong) !important;
        box-shadow:0 12px 32px rgba(4,31,48,.13),inset 0 1px 0 rgba(255,255,255,.78) !important;
    }
}

/* Mobile + tablet */
@media(max-width:1100px){
    :root{--nav-height:82px}

    /* Mobile/tablet header: fixed at the top, then smoothly hides while scrolling down. */
    .site-header,
    .home-page .site-header.site-header--overlay,
    .inner-page .site-header,
    .site-header.is-scrolled,
    .home-page .site-header.site-header--overlay.is-scrolled{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        transform:translateY(0) !important;
        opacity:1 !important;
        transition:transform .30s cubic-bezier(.22,.7,.25,1),opacity .24s ease !important;
        will-change:transform,opacity;
    }

    .site-header.is-mobile-hidden,
    .home-page .site-header.site-header--overlay.is-mobile-hidden,
    .inner-page .site-header.is-mobile-hidden{
        transform:translateY(calc(-100% - 12px)) !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    .site-header .nav,
    .home-page .site-header.site-header--overlay .nav,
    .inner-page .site-header .nav{
        width:min(100% - 28px,1180px) !important;
        padding:0 !important;
        gap:16px !important;
    }

    .site-header .brand img{
        width:min(var(--header-logo-width,120px),45vw) !important;
        max-height:64px !important;
    }

    .site-header .nav-cta--desktop{display:none !important}

    .site-header .menu-button{
        position:relative !important;
        z-index:5 !important;
        flex:0 0 46px !important;
        width:46px !important;
        height:46px !important;
        display:grid !important;
        place-items:center !important;
        padding:0 !important;
        margin-left:auto !important;
        border:1px solid rgba(255,255,255,.22) !important;
        border-radius:14px !important;
        background:rgba(4,31,47,.78) !important;
        color:#fff !important;
        font-size:24px !important;
        line-height:1 !important;
        cursor:pointer !important;
        box-shadow:0 10px 28px rgba(0,18,30,.20) !important;
        backdrop-filter:blur(10px) !important;
        -webkit-backdrop-filter:blur(10px) !important;
        transition:background .2s ease,transform .2s ease,border-color .2s ease !important;
    }
    .site-header .menu-button:hover,
    .site-header .menu-button:focus-visible{
        background:rgba(6,55,80,.94) !important;
        border-color:rgba(114,212,244,.52) !important;
    }

    .site-header #primary-navigation{
        position:absolute !important;
        top:calc(100% + 8px) !important;
        left:0 !important;
        right:0 !important;
        z-index:4 !important;
        display:none !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;
        width:auto !important;
        max-width:none !important;
        max-height:calc(100vh - 104px) !important;
        margin:0 !important;
        padding:10px !important;
        overflow-y:auto !important;
        transform:none !important;
        background:var(--nav-bg-strong) !important;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:20px !important;
        box-shadow:0 24px 60px rgba(0,14,24,.44) !important;
        backdrop-filter:blur(18px) saturate(125%) !important;
        -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    }
    .site-header .nav.open #primary-navigation{display:flex !important}

    .site-header #primary-navigation a{
        width:100% !important;
        min-height:48px !important;
        display:flex !important;
        align-items:center !important;
        padding:0 15px !important;
        margin:0 !important;
        border:0 !important;
        border-radius:12px !important;
        background:transparent !important;
        color:rgba(255,255,255,.90) !important;
        font-family:var(--display,'Manrope',sans-serif) !important;
        font-size:15px !important;
        font-weight:750 !important;
        line-height:1.2 !important;
        text-shadow:none !important;
        box-shadow:none !important;
    }
    .site-header #primary-navigation a:not(.nav-cta):hover,
    .site-header #primary-navigation a.is-active:not(.nav-cta){
        background:rgba(255,255,255,.075) !important;
        color:#fff !important;
    }
    .site-header #primary-navigation .nav-cta--mobile{
        margin-top:5px !important;
        justify-content:center !important;
        background:linear-gradient(135deg,#0b79b8,#119bd4) !important;
        border:1px solid rgba(126,219,250,.46) !important;
        color:#fff !important;
        font-weight:800 !important;
    }
}

@media(max-width:600px){
    :root{--nav-height:76px}
    .site-header .nav,
    .home-page .site-header.site-header--overlay .nav,
    .inner-page .site-header .nav{width:min(100% - 24px,1180px) !important}
    .site-header .brand img{width:min(var(--header-logo-width,120px),45vw) !important;max-height:none !important}
    .site-header .menu-button{width:44px !important;height:44px !important;border-radius:13px !important}
    .site-header #primary-navigation{top:calc(100% + 6px) !important;border-radius:18px !important}
}

/* Homepage banner must begin at viewport top under the transparent header. */
.home-page main,
.home-page main>.home-hero-modern:first-child,
.home-page .home-hero-modern{
    margin-top:0 !important;
    padding-top:0 !important;
}

@media(prefers-reduced-motion:reduce){
    .site-header,
    .site-header .brand,
    .site-header a,
    .site-header a::after,
    .site-header .menu-button{transition:none !important}
}