.page__header {
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: opacity 0.4s var(--transition-handle);
}

.header__inner {
	display: flex;
	justify-content: space-between;
	padding: var(--grid-margin) 0;
	width: 100%;
}

.page__logo {
	fill: rgb(var(--color-white));
	pointer-events: all;
}

.logo__link {
	display: block;
	height: fit-content;
}

.main__logo {
	fill: inherit;
}

.header__nav {
	display: flex;
	gap: var(--s-10);
	height: fit-content;
	pointer-events: all;
    z-index: 51;
}

.header__navtrigger {
	background-color: rgb(var(--color-orange));
	color: rgb(var(--color-black));
	min-width: var(--s-120);
}

/* .body--black .header__navtrigger,
.over.body--mist .header__navtrigger,
.menu--open.body--mist .header__navtrigger {
	background: rgb(var(--color-mist-01));
	color: rgb(var(--color-black));
}

.body--mist .header__navtrigger,
.over.body--black .header__navtrigger {
	background: rgb(var(--color-black));
	color: rgb(var(--color-mist-01));
} */

.header__navtrigger__inner {
	height: clamp(calc(0.4375rem * 1.6), calc(var(--s-08) * 1.6), calc(0.75rem * 1.6));
	overflow: hidden;
	text-align: center;
}

.header__navtrigger__inner > span {
	display: block;
}

/**********MENU*******************/


.page__menu {
    width: 100%;
    height: 100dvh;
	pointer-events: none;
    position: fixed;
    top: 0;
    left: 0%;
    z-index: 50;
}

.menu--open .page__menu {
	pointer-events: auto; 
}

.backmenu {
   opacity: 0; 
   pointer-events:none;
   backdrop-filter: blur(2rem);
   z-index: 0;
   transition: opacity 0.4s var(--transition-handle);
}

.menu--open .backmenu {
   opacity: 1; 
   pointer-events: auto;
}

.page__main__nav {
	border-radius: var(--s-08);
	border: solid 1px rgba(var(--color-mist-01), 0.2);
    position: absolute;
    right: calc(var(--grid-gutter) / 2);
    background: rgba(var(--color-black), 0.8);
	opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s var(--transition-handle), transform 0.4s 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	top: calc(var(--grid-gutter) / 2);
	width: calc(50% - var(--grid-gutter) / 2);
	z-index: 1;
}

.menu--open .page__main__nav {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.4s var(--transition-handle), transform 0.4s var(--transition-handle);
}

 
.nav__main {
    padding: var(--grid-margin);
    color: rgb(var(--color-mist-01));
}

.menu__contact {
	box-sizing: border-box;
    width: 100%;
    padding-left: var(--grid-margin);
    color: rgb(var(--color-black));
}

.menu__logo {
    padding: calc(var(--grid-margin) / 1.5) var(--grid-margin);
}

.menu__contact__wrp{
    display:flex;
    justify-content: flex-start;
    width:100%; 
}

.menu__contact--text{
    min-width: 50%;
}

.nav__main .header__menu__item {
    color: rgb(var(--color-mist-01));
}

.menu__link span {
	transition: opacity 0.4s ease;
}

.menu__link.inactive span {
	opacity: 0.4;
}

.menu__link.current {
	pointer-events: none;
}

.menu__link.current span {
	opacity: 0.4;
}

.menu--closed, .menu--opened{
    transform: translate3d(0, 0, 0);
    transition: transform 0.4s var(--transition-handle);
}

.menu--open .menu--closed,
.menu--open .menu--opened{
    transform: translate3d(0, -100%, 0);
}

.header__menu__link sup {
    font-family: 'Martian Mono';
	font-size: var(--s-10);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.menu__contact__wrp {
    color: rgb(var(--color-mist-01));
}

.menu__contact--text{
     color: rgb(var(--color-mist-03));
}

    .link--anim {
      position: relative;
      display: inline-block;
      text-decoration: none;
    }

    .link--anim::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background: rgb(var(--color-mist-01));
      transition: width 0.3s var(--link-handle);
    }

    .link--anim:hover::after {
      width: 100%;
    }
	
.menu__contact--items {
	display: flex;
	flex-direction: column;
	gap: clamp(calc(0.75rem * 1.25), calc(var(--s-16) * 1.25), calc(1.25rem * 1.25));	
}
	
@media (min-width: 981px) {
	
	.page__main__nav {
		height: calc(100% - var(--grid-gutter));
		width: calc(50% - var(--grid-gutter) / 2);
	}
	
}
	
@media (max-width: 980px) {

	.page__main__nav {
		height: calc(100dvh - var(--grid-gutter));
		width: calc(100% - var(--grid-gutter));
	}
	
}

@media (min-width: 681px) {
	
	.page__logo {
		width: var(--s-80);
	}

	.header__logo {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s ease;
	}
	
	.logo--on .header__logo {
		opacity: 1;
		pointer-events: all;
	}
	
	.page__header--mobile {
		display: none;
	}

}

@media (max-width: 980px) and (orientation: portrait) {
	
	.nav__main {
		padding: var(--s-80) calc(var(--grid-margin) / 2);
	}
	
	.menu__contact {
		padding-bottom: var(--s-24);
		padding-left: calc(var(--grid-margin) / 2);
		padding-right: calc(var(--grid-margin) / 2);
	}
	
	.menu__logo {
		display: none;
	}

}

@media (max-width: 980px) and (min-width: 681px) {

	.menu--open .header__logo {
		opacity: 1;
		pointer-events: auto;
	}

}

@media (max-width: 680px) {
	
	.page__logo {
		width: var(--s-64);
	}
	
	.page__header:not(.page__header--mobile) .page__logo {
		display: none;
	}
	
	.page__header--mobile {
		mix-blend-mode: exclusion;
		z-index: 101;
	}
	
	.page__header:not(.page__header--mobile) .header__inner {
		justify-content: flex-end;
	}
	
	.menu__logo {
		display: none;
	}
	
	.nav__main .header__menu__item + .header__menu__item {
		margin-top: var(--s-02);
	}
	
}