.header {
	position: relative;
	background-color: var(--color-white);
	z-index: 100;
}

@media (min-width: 481px) {
	.header {
		position: sticky;
		top: 0;
		transition: transform 0.3s ease;
		will-change: transform;
	}

	.header--hidden {
		transform: translateY(-100%);
	}
}

@media (min-width: 481px) and (prefers-reduced-motion: reduce) {
	.header {
		transition: none;
	}
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 6.4rem;
}

@media (max-width: 1360px) {
	.header__inner {
		height: 7.9rem;
	}
}

.header__brand {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 38rem; /* 380px на 1920 (референс) — .header__nav скрыт ниже 1361px (бургер), там значение не влияет */
}

.header__logo {
	display: block;
	flex-shrink: 0;
}

.header__logo-icon {
	display: block;
	width: 5rem;
	height: 3rem;
	object-fit: contain;
}

.header__nav {
	display: block;
	height: 100%;
}

.header__menu {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 4rem;
}

.header__menu > li {
	display: flex;
	align-items: center;
	height: 100%;
}

.header__menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--color-black);
}

.header__chevron {
	width: 1rem;
	height: 0.6rem;
}

/* Выпадающее меню пункта навигации («Услуги», «Каталог»). Открывается
   наведением/фокусом, чистым CSS, без JS — тот же принцип, что и у
   card-dark__info-wrap/models__info-wrap: hover/focus-within для десктопа/
   таблета, где наведение — обычное дело для указателя мыши. */
.header__menu-item {
	position: relative;
}

.header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 37.3rem;
	padding: 1rem 1.5rem;
	background-color: var(--color-bg-light);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.header__menu-item:hover .header__dropdown,
.header__menu-item:focus-within .header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header__dropdown-link {
	display: block;
	padding-block: 0.4rem;
	color: var(--color-black);
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.header__dropdown-link:hover {
	color: var(--color-accent);
}

.header__actions {
	display: flex;
	align-items: center;
	gap: 3rem;
}

.header__contact-cta {
	min-width: 18rem;
	height: 4.2rem;
	padding: 1.5rem 2.5rem;
}

.header__contact-cta-mobile {
	display: none;
}

.header__lang {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
}

.header__lang-btn {
	color: var(--color-black);
	opacity: 0.3;
}

.header__lang-btn--active {
	opacity: 1;
}

.header__burger {
	display: none;
	position: relative;
	flex-shrink: 0;
	/* px, а не rem: иконка — маленький элемент фиксированного размера (как и остальные
	   иконки в проекте, задаваемые в px через width/height у <img>), а не масштабируемый
	   контент. rem здесь плывёт (font-size на html завязан на vw), и три линии толщиной
	   в доли пикселя на большинстве ширин экрана округляются каждая по-своему —
	   визуально то одна, то другая кажется толще/тоньше. В px все значения — целые
	   пиксели на любой ширине экрана, округление одинаковое у всех трёх линий. */
	width: 24px;
	height: 16px;
}

.header__burger-line,
.header__burger-line::before,
.header__burger-line::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-black);
	transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.header__burger-line {
	/* (16px высоты контейнера − 2px толщины) / 2 = 7px */
	top: 7px;
}

.header__burger-line::before {
	top: -7px;
}

.header__burger-line::after {
	top: 7px;
}

.header__burger--active .header__burger-line {
	background-color: transparent;
}

.header__burger--active .header__burger-line::before {
	top: 0;
	transform: rotate(45deg);
}

.header__burger--active .header__burger-line::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 480px) {
	.header__inner {
		height: 7.065rem;
	}

	.header__nav,
	.header__lang {
		display: none;
	}

	.header__actions {
		gap: 3rem;
	}

	.header__contact-cta {
		width: clamp(15rem, 57.222vw, 20.6rem);
		min-width: 0;
		height: 4rem;
		padding-inline: 2rem;
	}

	.header__contact-cta-desktop {
		display: none;
	}

	.header__contact-cta-mobile {
		display: inline;
	}

	.header__burger {
		display: block;
	}
}

@media (min-width: 481px) and (max-width: 1360px) {
	.header__nav,
	.header__lang {
		display: none;
	}

	.header__burger {
		display: block;
	}

	.header .header__mobile-menu {
		position: absolute;
		top: 100%;
		bottom: auto;
		height: calc(100vh - 7.9rem);
		height: calc(100dvh - 7.9rem);
	}
}

/* Полноэкранное мобильное меню — открывается под шапкой, бургер остаётся видимым поверх и служит единственным переключателем */

.header__mobile-menu {
	display: none; /* по умолчанию полностью исключено из layout — visibility:hidden
	                   и overflow-x:hidden на html ненадёжны в реальных мобильных
	                   браузерах (особенно iOS Safari) для fixed-элемента за экраном,
	                   только настоящий display:none гарантированно не расширяет
	                   ширину документа. Переключается в display:block синхронно с
	                   translate-анимацией через header-menu.js, не через CSS. */
	position: fixed;
	top: 7.065rem;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-white);
	overflow: hidden;
	translate: 100% 0;
	transition: translate 0.3s ease;
	z-index: 50;
}

.header__mobile-menu--open {
	translate: 0 0;
}

.header__mobile-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding-block: 4rem 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.header__mobile-list {
	display: flex;
	flex-direction: column;
	margin-bottom: auto;
}

.header__mobile-list > li {
	border-bottom: 1px solid var(--color-divider);
}

.header__mobile-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-block: 1.6rem;
	color: var(--color-black);
}

.header__mobile-chevron {
	width: 1rem;
	height: 1.7rem;
	flex-shrink: 0;
	transition: rotate 0.2s ease;
}

/* Мобильный аккордеон пункта меню с подпунктами («Услуги», «Каталог»):
   тап по самому пункту раскрывает список ссылок под ним, тот же переключатель
   класса из JS, что и у .header__mobile-menu целиком (header-menu.js). */
.header__mobile-link[aria-expanded="true"] .header__mobile-chevron {
	rotate: 90deg;
	filter: brightness(0) saturate(100%) invert(21%) sepia(96%) saturate(2312%) hue-rotate(352deg) brightness(94%) contrast(91%);
}

.header__mobile-link[aria-expanded="true"] {
	color: var(--color-accent);
}

.header__mobile-submenu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.2s ease;
}

.header__mobile-submenu > * {
	overflow: hidden; /* строка-контейнер списка — 0fr/1fr со сжатием без display:none,
	                      сама <ul> внутри как раз и обрезается по высоте */
}

.header__mobile-item--open .header__mobile-submenu {
	grid-template-rows: 1fr;
}

.header__mobile-submenu-link {
	display: block;
	padding-block: 0.35rem;
	color: var(--color-black);
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: 400;
}

.header__mobile-item--open .header__mobile-submenu ul {
	padding-bottom: 1.2rem;
}

.header__mobile-contacts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 4rem;
}

.header__mobile-phone,
.header__mobile-email {
	color: var(--color-black);
}

.header__mobile-messengers {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2rem;
}

.header__mobile-search {
	display: flex;
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 0;
	flex-direction: column;
	width: min(var(--content-width-tablet), calc(100% - (var(--side-padding-tablet) * 2)));
	gap: 1rem;
	margin-top: 0;
	padding: 1rem;
	padding-bottom: max(1rem, env(safe-area-inset-bottom));
	background-color: var(--color-white);
	box-shadow: 0 -1rem 2rem rgba(10, 10, 10, 0.06);
	pointer-events: none;
	z-index: 2;
}

.header__mobile-search > * {
	pointer-events: auto;
}

@media (max-width: 480px) {
	.header__mobile-search {
		width: calc(100% - (var(--side-padding-mobile) * 2));
	}
}