.site-header { 
    --header-safe-height: 76px; 
 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
 
    width: 100%; 
    padding-top: var(--header-top-offset); 
 
    background: var(--color-page); 
 
    transition: 
        padding-top 320ms var(--ease-standard), 
        background-color 320ms var(--ease-standard),
        box-shadow 320ms var(--ease-standard),
        backdrop-filter 320ms var(--ease-standard); 
} 
 
.site-header__inner { 
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max)); 
    height: var(--header-height); 
    margin-inline: auto; 
 
    display: grid; 
    grid-template-columns: auto 1fr auto; 
    align-items: center; 
 
    column-gap: var(--space-7);

    position: relative;

    transition: 
        width 360ms var(--ease-standard), 
        height 360ms var(--ease-standard), 
        padding 360ms var(--ease-standard); 
} 
 
/* =========================================================
   LOGO
   ========================================================= */
.site-logo { 
    display: inline-flex; 
    align-items: center; 
    text-decoration: none; 
} 
 
.site-logo img { 
    width: var(--logo-width); 
    height: var(--logo-height); 
    object-fit: contain;

    transition: transform 320ms var(--ease-standard); 
} 
 
/* =========================================================
   NAVIGATION
   ========================================================= */
.primary-nav { 
    justify-self: center; 
} 
 
.primary-nav__list { 
    display: flex; 
    align-items: center; 
    gap: var(--nav-gap); 
 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
 
.primary-nav__link { 
    display: inline-flex; 
    align-items: center; 
 
    min-height: 44px; 
 
    color: var(--color-text); 
 
    font-family: var(--font-ui); 
    font-size: var(--nav-font-size); 
    font-weight: var(--nav-font-weight); 
    line-height: 1.2; 
    letter-spacing: 0; 
 
    text-decoration: none; 
 
    transition: 
        opacity var(--duration-fast) var(--ease-standard); 
} 
 
.primary-nav__link:hover, 
.primary-nav__link:focus-visible { 
    opacity: .62; 
} 
 
.primary-nav__link:focus-visible, 
.nav-toggle:focus-visible { 
    outline: 2px solid currentColor; 
    outline-offset: 4px; 
} 
 
/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */
.nav-toggle { 
    display: none; 
 
    border: 0; 
    background: transparent; 
 
    padding: var(--space-2); 
 
    cursor: pointer; 
} 
 
.nav-toggle__line { 
    display: block; 
 
    width: 24px; 
    height: 1.5px; 
 
    margin: 5px 0; 
 
    background: var(--color-text); 
} 
 
/* =========================================================
   SCROLLED — FULL WIDTH GLASS NAVBAR

   IMPORTANT:
   Glass .site-header par hai, isliye poori screen width
   cover hogi. Inner content ki original alignment same hai.
   ========================================================= */
.site-header.is-scrolled { 
    padding-top: 0;

    background: rgba(255, 255, 255, 0.58);

    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow:
        0 8px 30px rgba(20, 20, 20, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
} 
 
.site-header.is-scrolled .site-header__inner { 
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--content-max)
    );

    height: 68px;
    margin-inline: auto;

    padding-inline: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
} 
 
.site-header.is-scrolled .site-logo img { 
    transform: scale(.92); 
    transform-origin: left center; 
} 
 
/* =========================================================
   TABLET / MOBILE
   ========================================================= */
@media (max-width: 1100px) { 

    .site-header { 
        --header-safe-height: 68px; 
    }

    /*
       Full-width glass mobile/tablet par bhi rahega.
       Rounded floating container nahi banega.
    */
    .site-header.is-scrolled { 
        padding-top: 0;

        background: rgba(255, 255, 255, 0.68);

        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);

        border-bottom: 1px solid rgba(255, 255, 255, 0.55);

        box-shadow:
            0 8px 26px rgba(20, 20, 20, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.70);
    } 
 
    .site-header.is-scrolled .site-header__inner { 
        width: min(
            calc(100% - (var(--page-gutter) * 2)),
            var(--content-max)
        );

        height: 60px;
        padding-inline: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    } 

    .site-header__inner { 
        grid-template-columns: auto 1fr auto; 
    } 
 
    .nav-toggle { 
        display: block; 
 
        grid-column: 3; 
        justify-self: end; 
    } 
 
    .header-cta { 
        display: none; 
    } 
 
    .primary-nav { 
        position: absolute; 
 
        top: calc(100% + 12px); 
        left: var(--page-gutter); 
        right: var(--page-gutter); 
 
        display: none; 
 
        padding: var(--space-5); 
 
        background: var(--color-surface); 
        border: 1px solid var(--color-border); 
    } 
 
    .primary-nav.is-open { 
        display: block; 
    } 
 
    .primary-nav__list { 
        flex-direction: column; 
        align-items: stretch; 
 
        gap: var(--space-2); 
    } 
 
    .primary-nav__link { 
        width: 100%; 
        padding-block: var(--space-2); 
    }

    /*
       Menu open hone ke baad readable glass panel.
       Ye sirf dropdown menu hai, main navbar nahi.
    */
    .site-header.is-scrolled .primary-nav { 
        top: calc(100% + 8px); 
 
        border-radius: 18px; 

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

        backdrop-filter: blur(22px) saturate(150%); 
        -webkit-backdrop-filter: blur(22px) saturate(150%); 

        box-shadow: 0 14px 34px rgba(0, 0, 0, .10); 
    } 
} 
 
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) { 
    .site-header, 
    .site-header__inner, 
    .site-logo img { 
        transition: none !important; 
    } 
}