.site-header {
	padding: max(12px, 0.78125vw) 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
}

.site-header .custom-logo-link {
	grid-area: 1/2/span 1/span 2;
	display: flex;
	width: fit-content;
	height: fit-content;
	z-index: 1;
}

.site-header .custom-logo-link img {
	width: auto;
	height: max(40px, 3.125vw);
}

.site-header .main-nav {
	grid-area: 1/4/span 1/span 9;
}

.site-header .main-nav ul.menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--m-sm);
	font-family: "NewBlack";
	font-size: var(--fs-25);
	font-weight: 600;
	line-height: 1.2;
}

.site-header .main-nav ul.menu li {
	display: flex;
	align-items: center;
	gap: 0.56em;
}

.site-header .main-nav ul.menu li::before {
	content: "";
	display: block;
	height: .44em;
	width: .44em;
	background: currentColor;
	border-radius: 100%;
	transform: scale(0);
	transition: var(--def-trans);
}

.site-header .main-nav ul.menu li:has(a:hover)::before,
.site-header .main-nav ul.menu li.current_page_item::before {
	transform: scale(1);
}

.site-header .header-contact {
	grid-area: 1/13/span 1/span 1;
}

@media (min-width: 992px) {
	.site-header .menu-toggle {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.site-header {
		display: flex;
		justify-content: space-between;
		padding: max(12px, 0.78125vw) var(--grid-gap);
	}

	.site-header::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: var(--white);
		z-index: 1;
	}


	.site-header .custom-logo-link {
		z-index: 2;
	}

	.site-header .header-contact {
		z-index: 2;
	}


	.site-header .main-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: var(--header-height);
		left: 0;
		width: 100%;
		height: calc(100% - var(--header-height));
		background: var(--mint);
		padding: var(--header-height) var(--grid-gap) var(--m-sm);
		transform: translateY(-100%);
		transition: var(--def-trans);
	}

	.site-header .main-nav ul.menu {
		flex-direction: column;
		gap: var(--m-sm);
	}

	.site-header .main-nav ul.menu li {
		margin-right: 1em;
	}

	.site-header.toggled .main-nav {
		transform: translateY(0%);
	}
}