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

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    /* Bar surface lives on a pseudo element so the panel below can blur independently */
    .site-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid transparent;
        transition: background-color 300ms ease, border-color 300ms ease;
    }

    .site-header.is-scrolled::before,
    .site-header.is-menu-open::before,
    .site-header.is-mobile-open::before {
        background: rgba(255, 255, 255, 0.88);
        border-bottom-color: var(--hairline-color);
    }

    .site-header-bar {
        position: relative;
        height: var(--header-height);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }


    /*=== Brand ===*/

    .site-brand {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xsmall);
        font-size: 21px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--dark-dark-color);
    }

    .site-brand img {
        display: block;
        width: 30px;
        height: 30px;
    }


    /*=== Links ===*/

    .site-nav {
        display: flex;
        align-items: center;
        gap: var(--gap-xxsmall);
    }

    .site-nav-link {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xsmall);
        padding: var(--padding-xsmall) var(--padding-small);
        border: 0;
        border-radius: 999px;
        background: transparent;
        font: 500 14.5px/1 var(--body-font), var(--font-fallback);
        letter-spacing: -0.005em;
        color: var(--ink-color);
        opacity: 0.78;
        cursor: pointer;
        transition: opacity 200ms ease, background-color 200ms ease;
    }

    .site-nav-link .fa {
        font-size: 9px;
        opacity: 0.6;
        transition: transform 400ms var(--ease-out);
    }

    .site-nav-link:hover,
    .site-nav-trigger[aria-expanded="true"] {
        opacity: 1;
        background: rgba(0, 13, 35, 0.04);
    }

    .site-nav-trigger[aria-expanded="true"] .fa {
        transform: rotate(180deg);
    }


    /*=== Actions ===*/

    .site-header-actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: var(--gap-xxsmall);
    }

    .site-header-cta {
        padding: var(--padding-xsmall) var(--padding-small);
        font-size: 14px;
        background: var(--dark-dark-color);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px -8px rgba(0, 13, 35, 0.5);
    }

    .site-header-cta:hover {
        background: var(--dark-color);
    }


    /*===================================================
    // PRODUCT SUBMENU
    /==================================================*/

    .product-menu {
        position: absolute;
        top: calc(var(--header-height) - 6px);
        left: 50%;
        width: min(780px, calc(100vw - 48px));
        padding-top: var(--padding-xsmall);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -8px) scale(0.985);
        transform-origin: 50% 0;
        transition:
            opacity 220ms ease,
            transform 360ms var(--ease-out),
            visibility 0s linear 360ms;
    }

    .product-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0) scale(1);
        transition-delay: 0s;
    }

    .product-menu-panel {
        padding: var(--padding-xsmall);
        border-radius: var(--radius);
        border: 1px solid var(--hairline-color);
        background: rgba(255, 255, 255, 1);
        backdrop-filter: saturate(180%) blur(28px);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        box-shadow:
            0 1px 1px rgba(0, 13, 35, 0.02),
            0 12px 24px -10px rgba(0, 13, 35, 0.08),
            0 44px 90px -24px rgba(0, 13, 35, 0.22);
    }

    /* Column flow keeps the sketch order: left column first, then right */
    .product-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: var(--gap-xxsmall);
    }


    /*=== Menu Item ===*/

    .product-menu-item {
        display: flex;
        align-items: flex-start;
        gap: var(--gap-small);
        padding: var(--padding-small);
        border-radius: calc(var(--radius) - 4px);
        transition: background-color 200ms ease, opacity 400ms ease, transform 500ms var(--ease-out);
    }

    .product-menu .product-menu-item {
        opacity: 0;
        transform: translateY(4px);
    }

    .product-menu.is-open .product-menu-item {
        opacity: 1;
        transform: none;
        transition-delay: 0s, calc(var(--i) * 22ms), calc(var(--i) * 22ms);
    }

    .product-menu-item:hover,
    .product-menu-item:focus-visible,
    .product-menu-item.is-active {
        background: var(--surface-color);
    }

    .product-menu-icon {
        flex: 0 0 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: var(--radius);
        border: 1px solid var(--hairline-color);
        color: var(--primary-color);
        transition: transform 400ms var(--ease-out);
    }

    .product-menu-icon .fa {
        font-size: 16px;
    }

    .product-menu-item:hover .product-menu-icon {
        transform: scale(1.05);
    }

    .product-menu-item.is-featured .product-menu-icon {
        border-color: transparent;
        background: var(--primary-color);
        color: #fff;
    }

    .product-menu-copy {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xxsmall);
        padding-top: 1px;
    }

    .product-menu-title {
        display: flex;
        align-items: center;
        gap: var(--gap-xsmall);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--dark-dark-color);
    }

    .product-menu-text {
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--ink-muted-color);
    }

    .product-menu-badge {
        padding: var(--padding-xxsmall) var(--padding-xsmall);
        border-radius: 999px;
        background: var(--primary-color-8);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--primary-dark-color);
    }


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

    .site-menu-toggle {
        display: none;
        position: relative;
        width: 40px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        color: var(--primary-color);
        border-radius: 4px;
        background: rgba(27, 156, 252, 0.184);
    }

    .site-menu-toggle span {
        position: absolute;
        left: 11px;
        width: 18px;
        height: 1.5px;
        border-radius: 2px;
        background: var(--primary-color);
        transition: top 300ms var(--ease-out), transform 400ms var(--ease-out);
    }

    .site-menu-toggle span:nth-child(1) { top: 13px; }
    .site-menu-toggle span:nth-child(2) { top: 20px; }

    .is-mobile-open .site-menu-toggle span:nth-child(1) { top: 16.5px; transform: rotate(45deg); }
    .is-mobile-open .site-menu-toggle span:nth-child(2) { top: 16.5px; transform: rotate(-45deg); }

    .site-mobile-menu {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
            opacity 260ms ease,
            transform 400ms var(--ease-out),
            visibility 0s linear 400ms;
    }

    .is-mobile-open .site-mobile-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .site-mobile-inner {
        display: flex;
        flex-direction: column;
        gap: var(--gap-medium);
        padding-top: var(--padding-small);
        padding-bottom: var(--padding-large);
    }

    .site-mobile-title {
        font-size: 11px;
        color: var(--ink-soft-color);
    }

    .site-mobile-products {
        display: grid;
        gap: var(--gap-xxsmall);
        margin: calc(var(--margin-xsmall) * -1) calc(var(--margin-small) * -1) 0;
    }

    .site-mobile-links a {
        display: block;
        padding: var(--padding-small) 0;
        border-bottom: 1px solid var(--hairline-color);
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--dark-dark-color);
    }

    .site-mobile-cta {
        width: 100%;
        padding: var(--padding-small);
        background: var(--dark-dark-color);
    }

    @media screen and (max-width: 960px) {

        .site-header-bar {
            grid-template-columns: 1fr auto;
        }

        .site-nav,
        .product-menu {
            display: none;
        }

        .site-menu-toggle,
        .site-mobile-menu {
            display: block;
        }

    }

    @media screen and (max-width: 560px) {

        .site-header-cta {
            display: none;
        }

    }