* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background: #0b0b0b;
    color: white;
    font-family: Helvetica, Arial, sans-serif;
}

/* -----------------------------------
HEADER
----------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    padding: clamp(20px, 3vw, 40px);

    z-index: 10000;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: white;
    text-decoration: none;
    font-size: clamp(16px, 1.2vw, 22px);
    position: relative;
    z-index: 10001;
}

/* -----------------------------------
MENU BUTTON
----------------------------------- */

.menu-toggle {

    width: 60px;
    height: 60px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,0.18);

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    position: relative;

    cursor: pointer;

    z-index: 10001;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.menu-toggle:hover {

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

    border-color: rgba(255,255,255,0.4);
}

.menu-toggle span {

    position: absolute;

    left: 50%;

    width: 24px;
    height: 2px;

    background: white;

    transform: translateX(-50%);

    transform-origin: center;
}

.menu-toggle span:first-child {
    top: 24px;
}

.menu-toggle span:last-child {
    top: 34px;
}

/* -----------------------------------
FULLSCREEN MENU
----------------------------------- */

.fullscreen-menu {

    position: fixed;

    inset: 0;

    display: flex;

    visibility: hidden;
    pointer-events: none;

    z-index: 9999;
}

/* -----------------------------------
LEFT SIDE
----------------------------------- */

.menu-left {

    width: 40%;
    height: 100%;
}

.menu-left {

    position: relative;

    overflow: hidden;

    opacity: 0;
}

.menu-left-blur {

    position: absolute;

    inset: 0;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    background: #1a191780;
}

.menu-left-copy {

    position: absolute;

    left: clamp(24px, 4vw, 70px);
    bottom: clamp(24px, 5vh, 60px);

    display: flex;
    gap: 2rem;

    font-size: clamp(0.75rem, 1vw, 0.95rem);

    opacity: 0;

    z-index: 3;
}

/* -----------------------------------
RIGHT SIDE
----------------------------------- */

.menu-right {

    width: 60%;
    height: 100%;
}

.menu-right {

    position: relative;

    overflow: hidden;
}

.menu-bg {

    position: absolute;

    inset: 0;

    background: #111;

    transform: scaleY(0);

    transform-origin: top;

    z-index: 1;
}

.menu-inner {

    position: relative;

    z-index: 2;

    height: 100%;

    padding:
        clamp(90px, 10vh, 130px)
        clamp(24px, 6vw, 90px)
        clamp(24px, 5vh, 60px);

    display: flex;
    flex-direction: column;
}

/* -----------------------------------
MENU LINKS
----------------------------------- */

.menu-links {

    list-style: none;

    margin: 0;
    padding: 0;
}

.menu-links li {
    overflow: hidden;
}

.menu-links a {

    display: inline-block;

    color: white;

    text-decoration: none;

    font-size: clamp(3rem, 8vw, 8rem);

    line-height: 0.92;

    font-weight: 500;

    will-change: transform, opacity;

    transition: opacity 0.3s ease;
	visibility: hidden;
}

.char {

    display: inline-block;

    transform: translateY(120%);
}

/* -----------------------------------
ACCORDION
----------------------------------- */

.menu-item-has-children > a::after {

    content: '+';

    margin-left: 20px;

    font-size: 0.45em;

    opacity: 0.5;

    vertical-align: middle;

    transition: opacity 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    content: '−';
}

.sub-menu {

    height: 0;

    opacity: 0;

    overflow: hidden;

    list-style: none;

    margin: 0;

    padding-left: clamp(1rem, 3vw, 3rem);

    will-change: height, opacity;
}

.sub-menu li {

    margin-top: clamp(0.6rem, 1vw, 1rem);
}

.sub-menu a {

    font-size: clamp(1rem, 2vw, 2rem);

    line-height: 1.1;

    opacity: 0.7;
}

/* -----------------------------------
SOCIAL ICONS
----------------------------------- */

.menu-socials {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: clamp(1rem, 1.5vw, 1.5rem);

    margin-top: auto;

    margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

.menu-socials a {

    width: 44px;
    height: 44px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,0.15);

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    text-decoration: none;

    font-size: 0.95rem;

    opacity: 0;

    transform: translateY(20px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        opacity 0.3s ease;
}

.menu-socials a:hover {

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

    border-color: rgba(255,255,255,0.45);
}

/* -----------------------------------
FOOTER
----------------------------------- */

.menu-footer {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(1rem, 3vw, 2rem);

    font-size: clamp(0.75rem, 1vw, 0.95rem);

    opacity: 0;
}

.menu-footer p {
    margin: 0.25rem 0;
}

.menu-footer a {

    color: white;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.menu-footer a:hover {
    opacity: 0.6;
}

/* -----------------------------------
TABLET
----------------------------------- */

@media (max-width: 1100px) {

    .menu-links a {
        font-size: clamp(3rem, 9vw, 7rem);
    }

    .menu-left {
        width: 42%;
    }

    .menu-right {
        width: 58%;
    }
}

/* -----------------------------------
MOBILE
----------------------------------- */

@media (max-width: 900px) {

    .fullscreen-menu {
        display: block;
    }

    .menu-left {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
    }

    .menu-right {

        width: 100%;
        height: 100%;
		padding-top: 8rem;
    }

    .menu-left-copy {
        display: none;
    }

   /* .menu-inner {

        padding:
            90px
            24px
            30px;
    }*/

    .menu-links a {

        font-size: clamp(2.6rem, 14vw, 6rem);
    }

    .sub-menu a {

        font-size: clamp(1rem, 5vw, 1.6rem);
    }

    .menu-footer {

        grid-template-columns: 1fr;
    }
}

/* -----------------------------------
SMALL MOBILE
----------------------------------- */

@media (max-width: 520px) {

    .site-header {
        padding: 20px;
    }

    .menu-toggle {

        width: 52px;
        height: 52px;
    }

    .menu-toggle span:first-child {
        top: 21px;
    }

    .menu-toggle span:last-child {
        top: 31px;
    }

    .menu-inner {

        padding:
            90px
            20px
            24px;
    }

    .menu-links a {

        font-size: clamp(2.4rem, 15vw, 4.5rem);
    }

    .menu-socials {

        gap: 1rem;
    }

    .menu-footer {

        font-size: 0.75rem;
    }
}