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

:root{
    --header-height:12rem;
}

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid #e8e8e8;
}

.header-grid{
    display:grid;
    grid-template-columns:
        35%
        25%
        25%
        15%;
    column-gap:0rem;
    height:var(--header-height);
}

/* ---------- LOGO ---------- */

.header-brand{

    display:flex;

    align-items:center;

}

.brand-link{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.brand-small{

    font-size:.75rem;

    letter-spacing:.35em;

    text-transform:uppercase;

}

.brand-big{

    margin-top:.4rem;

    font-size:2rem;

    line-height:1.05;

    font-weight:700;

}

/* ---------- COMMON ---------- */

.header-menu{

    margin:0;

    padding:0;

    list-style:none;

}

.header-menu li{

    margin:0;

}

.header-menu a,

.header-about a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    transition:.25s;

    font-size:1.05rem;

    font-weight:500;

}

.header-menu a:hover,

.header-about a:hover{

    background:#f2f2f2;

}

/* ---------- COLUMN 2 ---------- */

.header-menu-main{

    height:100%;

}

.header-menu-main .header-menu{

    display:grid;

    grid-template-rows:1fr 1fr;

    height:100%;

}

.header-menu-main li:first-child{

    border-bottom:1px solid #111;

}

/* ---------- COLUMN 3 ---------- */

.header-menu-sections{

    display:grid;

    grid-template-rows:1fr 1fr;

    height:100%;

    border-left:1px solid #111;

}

.header-commercial,

.header-creative{

    height:100%;

}

.header-commercial{

    border-bottom:1px solid #111;

}

.header-commercial .header-menu,

.header-creative .header-menu{

    display:grid;

    grid-template-rows:1fr 1fr;

    height:100%;

}

.header-commercial a,

.header-creative a{

    justify-content:flex-start;

    padding-left:2rem;

}

/* ---------- COLUMN 4 ---------- */

.header-about{

    display:flex;

    align-items:center;

    justify-content:center;

}


@media (max-width:1100px){

:root{
    --header-height:10rem;
}

.header-grid{

    grid-template-columns:
        35%

        25%

        25%

        15%;

}

.brand-big{

    font-size:1.55rem;

}

.header-menu a,
.header-about a{

    font-size:.95rem;

}

}

/* Выкл. значок меню в версии для ПК */
.menu-toggle,
.menu-toggle-wrap{
    display:none;
}