.container-odak{
    width:min(calc(100% - 64px),1480px);
    margin-inline:auto;
}

@media(max-width:991.98px){
    .container-odak{width:min(calc(100% - 36px),1480px)}
}

@media(max-width:575.98px){
    .container-odak{width:calc(100% - 28px)}
}
.site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    color:var(--theme-light);
    border-bottom:1px solid rgba(255,255,255,.18);
    transition:.3s var(--ease);
}
.site-header.scrolled{
    background:rgba(242,240,233,.94);
    backdrop-filter:blur(14px);
    color:var(--theme-text);
    border-color:var(--theme-border);
}
.header-inner{
    height:88px;
    display:flex;
    align-items:center;
    gap:36px;
}
.logo{
    font-size:31px;
    font-weight:900;
    letter-spacing:-.075em;
    line-height:1;
}
.main-nav{
    display:flex;
    align-items:center;
    gap:28px;
    margin-left:auto;
}
.main-nav a{
    font-size:11px;
    letter-spacing:.13em;
    text-transform:uppercase;
    position:relative;
}
.main-nav a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:1px;
    background:currentColor;
    transition:.25s;
}
.main-nav a:hover:after{width:100%}
.year-select{
    background:transparent;
    color:inherit;
    border:1px solid currentColor;
    border-radius:999px;
    padding:10px 34px 10px 15px;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.site-header:not(.scrolled) .year-select option{color:#111}

/* ODAK ORIGINAL LOGO */
.logo{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
}
.logo img{
    display:block;
    width:116px;
    height:auto;
    transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.site-header.scrolled .logo img{
    filter:brightness(0);
}
.hero-brand-logo{
    display:block;
    width:min(100%,760px);
    height:auto;
    margin-top:24px;
    position:relative;
    z-index:4;
}
@media(max-width:991.98px){
    .logo img{width:104px}
    .hero-brand-logo{width:min(100%,680px);margin-top:18px}
}
@media(max-width:575.98px){
    .logo img{width:92px}
    .hero-brand-logo{width:100%;margin-top:14px}
}
.mobile-menu-btn{
    display:none;
    width:42px;
    height:42px;
    background:transparent;
    color:inherit;
    border:1px solid currentColor;
    align-items:center;
    justify-content:center;
}
.mobile-menu{
    display:none;
    position:fixed;
    top:72px;
    left:0;
    right:0;
    z-index:999;
    background:var(--theme-bg);
    color:var(--theme-text);
    border-bottom:1px solid var(--theme-border);
    padding:25px 32px;
}
.mobile-menu.open{display:block}
.mobile-menu a{
    display:block;
    font-size:26px;
    letter-spacing:-.04em;
    padding:8px 0;
}
.mobile-menu .mobile-home-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    width:auto;
    margin-bottom:14px;
    padding:0 16px;
    border:1px solid currentColor;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
}
/* =========================================================
   HEADER — CENTERED RESPONSIVE LOGO + MENUS
========================================================= */
.site-header{
    background:transparent;
    color:var(--theme-light);
    border-bottom:1px solid rgba(255,255,255,.14);
}

.site-header.scrolled{
    background:color-mix(in srgb, var(--theme-dark) 90%, transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:var(--theme-light);
    border-bottom-color:rgba(255,255,255,.10);
}

.header-layout-centered{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:28px;
    height:108px;
}

.header-nav{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}

.header-nav-left{
    justify-self:start;
}

.header-nav-right{
    justify-content:flex-end;
}

.header-nav a{
    position:relative;
    white-space:nowrap;
    font-size:10px;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:inherit;
}

.header-nav a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-7px;
    width:0;
    height:1px;
    background:currentColor;
    transition:width .25s var(--ease);
}

.header-nav a:hover:after{
    width:100%;
}

.header-home-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 17px;
    border:1px solid currentColor;
    font-size:10px;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.header-nav .header-home-link:after{
    display:none;
}

.header-home-link:hover{
    opacity:.72;
}

.header-centered-logo{
    justify-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:
        opacity .28s var(--ease),
        transform .28s var(--ease),
        visibility .28s var(--ease);
}

.header-centered-logo img{
    display:block;
    width:clamp(150px,12vw,220px);
    max-height:82px;
    height:auto;
    object-fit:contain;
    filter:none !important;
}

.header-right{
    justify-self:end;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
}

.year-select{
    flex:0 0 auto;
    min-width:74px;
    border:1px solid rgba(255,255,255,.35);
    color:var(--theme-light);
    background:rgba(0,0,0,.08);
    border-radius:999px;
    padding:9px 30px 9px 12px;
    font-size:10px;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.site-header .year-select option{
    color:#111;
}

.hero-logo-stage,
.hero-logo-live,
.hero-brand-logo{
    display:none !important;
}

@media(max-width:1399.98px){
    .header-layout-centered{
        gap:18px;
    }

    .header-nav{
        gap:13px;
    }

    .header-nav a{
        font-size:9px;
        letter-spacing:.095em;
    }

    .header-centered-logo img{
        width:clamp(140px,11vw,185px);
    }

    .header-right{
        gap:12px;
    }

    .year-select{
        min-width:66px;
        padding-left:10px;
    }
}

@media(max-width:1199.98px){
    .header-layout-centered{
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    }

    .header-nav{
        gap:10px;
    }

    .header-nav a{
        font-size:8px;
        letter-spacing:.075em;
    }

    .header-centered-logo img{
        width:145px;
    }

    .year-select{
        display:none;
    }
}

@media(max-width:991.98px){
    .site-header{
        border-bottom-color:rgba(255,255,255,.12);
    }

    .header-layout-centered{
        height:76px;
        display:grid;
        grid-template-columns:44px 1fr 44px;
        gap:10px;
    }

    .header-nav{
        display:none;
    }

    .header-centered-logo{
        grid-column:2;
        justify-self:center;
    }

    .header-centered-logo img{
        width:clamp(112px,31vw,150px);
        max-height:58px;
    }

    .header-right{
        grid-column:3;
        justify-self:end;
    }

    .mobile-menu-btn{
        display:flex;
        width:40px;
        height:40px;
    }
}

@media(min-width:992px){
    .mobile-menu-btn{
        display:none;
    }
}
/* Header */
.site-header{
    color:var(--theme-light);
    border-bottom-color:color-mix(in srgb, var(--theme-light) 15%, transparent);
}
.site-header.scrolled{
    background:color-mix(in srgb, var(--theme-dark) 94%, transparent);
    color:var(--theme-light);
    border-bottom-color:color-mix(in srgb, var(--theme-light) 10%, transparent);
}
.header-nav a,
.site-header .year-select{
    color:var(--theme-light);
}
.site-header .year-select{
    border-color:color-mix(in srgb, var(--theme-light) 34%, transparent);
}