html.oh-nolock {
        overflow: hidden
    }

    header {
        --navy: #1c2a44;
        --amber: #e9a23b;
        --cream: #f1e9de;
        --mut: #5a6577;
        --ln: #e3ddd3;
        --g: #1a7a3c;
        position: sticky;
        top: 0;
        z-index: 70;
        background: #fff;
        border-bottom: 1px solid var(--ln);
        font-family: 'Nunito Sans', system-ui, sans-serif;
        font-size: 16px;
        line-height: 1.4;
        color: var(--navy)
    }

    header *,
    header *:before,
    header *:after {
        box-sizing: border-box
    }

    header a {
        color: inherit;
        text-decoration: none
    }

    header .oh-w {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        height: 64px;
        display: flex;
        align-items: center;
        gap: 20px
    }

    /* logo */
    header .oh-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        white-space: nowrap
    }

    header .oh-logo i {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        flex: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect width='26' height='26' rx='6' fill='%231c2a44'/%3E%3Cpath d='M4 19l5-8 3 4 4-7 6 11z' fill='%23e9a23b'/%3E%3Cpath d='M4 22c3-2 5-2 8 0s6 2 10 0' stroke='%23e9a23b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center/cover
    }

    header .oh-logo b {
        color: var(--amber)
    }

    /* nav (desktop) */
    header nav {
        display: flex;
        align-items: center;
        gap: 28px;
        margin: 0 auto;
        font-size: 14px;
        font-weight: 600
    }

    header nav>a:hover,
    header .oh-dd>a:hover {
        color: var(--amber)
    }

    header .oh-mhead,
    header nav>.oh-m-only {
        display: none
    }

    /* dropdown (desktop) */
    header .oh-dd {
        position: static;
        align-self: stretch;
        display: flex;
        align-items: center
    }

    header .oh-dd>a:after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: -3px 0 0 8px;
        border: solid currentColor;
        border-width: 0 1.6px 1.6px 0;
        transform: rotate(45deg);
        vertical-align: middle;
        transition: transform .18s
    }

    header .oh-dd>div {
        position: absolute;
        top: 100%;
        left: auto;
        margin-left: -16px;
        width: 330px;
        padding: 10px;
        background: #fff;
        border: 1px solid var(--ln);
        border-radius: 12px;
        box-shadow: 0 14px 34px rgba(28, 42, 68, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: .18s
    }

    header .oh-dd>div:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px
    }

    header .oh-dd:hover>div,
    header .oh-dd:focus-within>div {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    header .oh-dd>div a {
        display: block;
        padding: 9px 12px;
        border-radius: 8px
    }

    header .oh-dd>div a:hover,
    header .oh-dd>div a:active {
        background: var(--cream)
    }

    header .oh-dd>div b {
        display: block;
        font-size: 14px;
        font-weight: 700
    }

    header .oh-dd>div small {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: var(--mut)
    }

    header .oh-dd>div a.oh-all {
        margin-top: 4px;
        font-size: 12.5px;
        font-weight: 600
    }

    header .oh-dd>div a.oh-all:hover {
        color: var(--amber)
    }

    /* right side */
    header .oh-hr {
        display: flex;
        align-items: center;
        gap: 10px
    }

    header .oh-lang {
        border: 1px solid var(--ln);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer
    }

    header .oh-btn {
        display: inline-block;
        border-radius: 8px;
        padding: 9px 16px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        border: 2px solid var(--navy);
        transition: .15s
    }

    header .oh-btn.oh-out {
        background: #fff;
        color: var(--navy)
    }

    header .oh-btn.oh-out:hover {
        background: var(--navy);
        color: #fff
    }

    header .oh-burger {
        display: none;
        width: 40px;
        height: 40px;
        border: 1px solid var(--ln);
        border-radius: 8px;
        background: #fff;
        font-size: 20px;
        line-height: 1;
        color: var(--navy);
        cursor: pointer;
        place-items: center
    }

    /* ===== tablet + mobile: full-screen menu with accordion ===== */
    @media(max-width:900px) {
        header .oh-burger {
            display: grid
        }

        header .oh-hr {
            margin-left: auto
        }

        header nav {
            display: none;
            position: fixed;
            inset: 0;
            height: 100vh;
            height: 100dvh;
            z-index: 100;
            margin: 0;
            padding: 0 0 28px;
            background: #fff;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            overflow-y: auto;
            font-size: 15px;
            font-weight: 600
        }

        header.oh-open nav {
            display: flex
        }

        header .oh-mhead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: none;
            height: 64px;
            padding: 0 20px;
            margin-bottom: 6px;
            background: #fff;
            border-bottom: 1px solid var(--ln);
            position: sticky;
            top: 0;
            z-index: 2
        }

        header .oh-mclose {
            width: 40px;
            height: 40px;
            border: 0;
            background: none;
            display: grid;
            place-items: center;
            color: var(--navy);
            cursor: pointer
        }

        header nav>a,
        header .oh-dd {
            margin: 0 16px;
            border-bottom: 1px solid var(--ln)
        }

        header nav>a {
            display: block;
            padding: 14px 8px;
            border-radius: 8px 8px 0 0
        }

        header nav>a:hover,
        header nav>a:active,
        header .oh-dd>a:active {
            background: var(--cream);
            color: var(--navy)
        }

        header nav>a.oh-m-only {
            display: block
        }

        header .oh-dd {
            height: auto;
            display: block
        }

        header .oh-dd>a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 8px;
            border-radius: 8px
        }

        header .oh-dd>a:after {
            margin: -3px 4px 0 0;
            transition: transform .2s
        }

        header .oh-dd.oh-open>a:after {
            transform: rotate(-135deg);
            margin-top: 3px
        }

        header .oh-dd>div:before {
            display: none
        }

        header .oh-dd>div {
            display: none;
            position: static;
            margin: 0;
            width: auto;
            opacity: 1;
            visibility: visible;
            transform: none;
            border: 0;
            box-shadow: none;
            border-radius: 0;
            padding: 0 0 12px 16px;
            transition: none
        }

        header .oh-dd.oh-open>div {
            display: block
        }

        header .oh-dd>div a {
            padding: 8px 10px
        }

        header .oh-dd>div small {
            font-size: 12px
        }

        header .oh-dd>div a.oh-all {
            margin-top: 6px;
            padding-top: 12px
        }

        header nav>a.oh-mcta {
            margin: 22px 16px 0;
            padding: 14px;
            border: 0;
            border-radius: 8px;
            background: var(--amber);
            color: var(--navy);
            text-align: center;
            font-weight: 700;
            font-size: 15px
        }

        header nav>a.oh-mcta:hover {
            background: var(--amber);
            filter: brightness(1.05)
        }
    }

    @media(max-width:640px) {

        header .oh-btn.oh-out,
        header .oh-lang {
            display: none
        }

        header .oh-w {
            gap: 12px
        }

        header .oh-logo {
            font-size: 19px
        }

        header .oh-btn {
            padding: 8px 12px;
            font-size: 13px
        }
    }