/* ==========================================================================
   СТО «Germany & British Service» — основные стили
   Система адаптива: clamp + брейкпоинты (desktop-first, медиа в em)
   Именование: БЭМ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
* {
	padding: 0;
	margin: 0;
	border: 0;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
*::before,
*::after {
	display: inline-block;
}
* {
	word-wrap: break-word;
}
/* height: 100% на html/body сознательно НЕ ставим: вместе с overflow: hidden
   (лайтбокс, попап, мобильное меню) он схлопывает высоту документа и сбрасывает
   прокрутку в начало страницы. Прижатый футер держится на min-height у .wrapper */
body {
	line-height: 1;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background-color: transparent;
}
input,
textarea {
	width: 100%;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
textarea {
	resize: none;
}
label {
	display: inline-block;
}
button,
select,
option {
	cursor: pointer;
}
a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
ul li,
ol li {
	list-style: none;
}
img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: inherit;
	font-size: inherit;
}
address {
	font-style: normal;
}

/* --------------------------------------------------------------------------
   2. ПЕРЕМЕННЫЕ
   -------------------------------------------------------------------------- */
:root {
	/* фон */
	--c-bg: #0c100e;
	--c-bg-2: #121815;
	--c-surface: #18201c;
	--c-surface-2: #1f2a24;
	--c-line: #2a362f;
	--c-line-strong: #3a4a41;

	/* текст */
	--c-text: #eef2ef;
	--c-text-2: #9aa8a0;
	--c-text-3: #6b7a72;

	/* бренд */
	--c-brand: #2fbf6a;
	--c-brand-2: #56e08c;
	--c-brand-ink: #06180e;
	--c-brand-dim: rgba(47, 191, 106, 0.12);

	/* акценты */
	--c-amber: #e9a83c;
	--c-danger: #e5484d;

	/* шрифты */
	--ff-head: "Oswald", "Arial Narrow", sans-serif;
	--ff-body: "Manrope", "Segoe UI", sans-serif;

	/* типографическая шкала: 1920 → 375 */
	--fs-h1: clamp(34px, 25.262px + 2.3301vw, 70px);
	--fs-h2: clamp(26px, 20.66px + 1.4239vw, 48px);
	--fs-h3: clamp(20px, 17.087px + 0.7767vw, 32px);
	--fs-h4: clamp(17px, 15.787px + 0.3236vw, 22px);
	--fs-lead: clamp(16px, 15.029px + 0.2589vw, 20px);
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-label: 12px;

	/* сетка */
	--container-width: 1240px;
	--container-padding: clamp(16px, 12.117px + 1.0356vw, 32px);
	--section-space: clamp(56px, 38.524px + 4.6602vw, 128px);
	--grid-gap: clamp(16px, 12.117px + 1.0356vw, 32px);

	/* отступы */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* скругления */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-pill: 999px;

	/* слои */
	--z-below: -1;
	--z-base: 1;
	--z-above: 2;
	--z-dropdown: 50;
	--z-header: 100;
	--z-popup: 150;
	/* подложка попапа — на слой ниже самого попапа */
	--z-popup-overlay: calc(var(--z-popup) - 1);
	--z-intro: 200;
	/* слои внутри шапки: панель меню и кнопка-бургер поверх неё */
	--z-menu: 3;
	--z-menu-icon: 5;
	/* интерфейс лайтбокса рисуется поверх его собственной разметки */
	--z-lightbox-ui: 99999;

	/* формы */
	--input-height: 52px;

	/* Высоты шапки, все три пишет JS (initHeader):
	   --head-h — развёрнутая, от неё отступ контента и высота первого экрана;
	     на прокрутке НЕ пересчитывается, иначе layout прыгает вслед за шапкой
	   --head-now — текущая, как есть; от неё считается панель бургер-меню
	   --head-compact — сжатая; под неё приземляются якоря */
	--head-h: 0px;
	--head-now: 0px;
	--head-compact: 0px;
	/* высота мобильной панели действий — реальное значение пишет JS (initMobileBar) */
	--bar-h: 0px;
	/* отступ для sticky-элементов под шапкой */
	--sticky-top: calc(var(--head-h) + var(--s-5));
}

/* --------------------------------------------------------------------------
   3. БАЗА И КАРКАС
   -------------------------------------------------------------------------- */
/* Переходы по якорям: шапка фиксированная, поэтому цель нужно остановить
   не у нуля, а под шапкой — иначе заголовок секции уезжает ей за спину.
   Работает и для перехода по хешу с другой страницы, и для нативного скролла */
html {
	scroll-padding-top: calc(var(--head-compact) + var(--s-4));
}

body {
	min-width: 320px;
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--c-text);
	background-color: var(--c-bg);
}
html[data-scroll-lock] body {
	overflow: hidden;
	touch-action: none;
	overscroll-behavior: none;
}

.wrapper {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: clip;
}
.wrapper > main {
	flex: 1 1 auto;
}
.wrapper > * {
	min-width: 0;
}

[class*="__container"] {
	max-width: calc(var(--container-width) + var(--container-padding) * 2);
	margin: 0 auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
}

.section {
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}
.section--tint {
	background-color: var(--c-bg-2);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--c-brand-2);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. ТИПОГРАФИКА И ОБЩИЕ ЭЛЕМЕНТЫ
   -------------------------------------------------------------------------- */
.title {
	font-family: var(--ff-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.1;
}
.title--h1 {
	font-size: var(--fs-h1);
	line-height: 1.03;
	letter-spacing: 0.005em;
}
/* заголовки не переносим по слогам и не рвём слова посередине */
.title,
.service-card__title,
.step__title,
.benefit__title,
.number__value {
	overflow-wrap: normal;
	word-wrap: normal;
	hyphens: none;
}
.title--h2 {
	font-size: var(--fs-h2);
}
.title--h3 {
	font-size: var(--fs-h3);
}
.title--h4 {
	font-size: var(--fs-h4);
	line-height: 1.2;
}
.title__accent {
	color: var(--c-brand-2);
}

.label {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: var(--fs-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-brand-2);
	line-height: 1;
}
.label::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: var(--c-brand);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-text-2);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-5);
	margin-bottom: clamp(28px, 21.2px + 1.81vw, 56px);
}
.section-head__main {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.section-head__aside {
	max-width: 380px;
	font-size: var(--fs-small);
	color: var(--c-text-2);
}

.icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.icon--sm {
	width: 18px;
	height: 18px;
}
.icon--lg {
	width: 32px;
	height: 32px;
}

/* Кнопки */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 52px;
	padding: 14px 28px;
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.1;
	text-align: center;
	border-radius: var(--r-sm);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}
.button--primary {
	background-color: var(--c-brand);
	color: var(--c-brand-ink);
}
.button--ghost {
	border: 1px solid var(--c-line-strong);
	color: var(--c-text);
}
.button--block {
	width: 100%;
}
.button--sm {
	min-height: 44px;
	padding: 11px 20px;
	font-size: 13px;
}
@media (any-hover: hover) {
	.button--primary:hover {
		background-color: var(--c-brand-2);
	}
	.button--ghost:hover {
		border-color: var(--c-brand);
		color: var(--c-brand-2);
	}
}

/* Ссылка со стрелкой */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-brand-2);
}
.arrow-link .icon {
	transition: transform 0.2s ease;
}
@media (any-hover: hover) {
	.arrow-link:hover .icon {
		transform: translateX(4px);
	}
}

/* --------------------------------------------------------------------------
   5. АНИМАЦИЯ ПОЯВЛЕНИЯ (стартовые состояния — только в CSS)
   -------------------------------------------------------------------------- */
.js-anim .anim {
	opacity: 0;
	transform: translateY(18px);
}
.anim {
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim.--watcher-view {
	opacity: 1;
	transform: none;
}
.anim--d1 {
	transition-delay: 0.07s;
}
.anim--d2 {
	transition-delay: 0.14s;
}
.anim--d3 {
	transition-delay: 0.21s;
}
/* При reduced-motion класс js-anim не ставится вовсе (скрипт в <head>),
   поэтому стартовых состояний не возникает даже на кадр. Дополнительно
   глушим переходы появления. */
@media (prefers-reduced-motion: reduce) {
	.anim {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   6. ШАПКА
   -------------------------------------------------------------------------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	background-color: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow 0.28s ease;
}
/* шапка вне потока — контент отступает на её реальную высоту (--head-h меряет JS) */
.wrapper > main {
	padding-top: var(--head-h);
}
/* Состояние после начала прокрутки: верхняя строка сворачивается,
   логотип и высота шапки плавно уменьшаются */
.header.--header-scroll {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.header__topline {
	border-bottom: 1px solid var(--c-line);
	font-size: 13px;
	color: var(--c-text-2);
}
.header__topline-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	min-height: 40px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.header__topline-item {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	white-space: nowrap;
}
.header__topline-item .icon {
	color: var(--c-brand-2);
}
.header__status {
	color: var(--c-brand-2);
	font-weight: 500;
}
.header__body {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: 76px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.header__logo {
	flex: 0 0 auto;
	margin-right: auto;
}
.header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	flex: 0 0 auto;
}
.header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.header__phone .icon {
	color: var(--c-brand-2);
}
@media (any-hover: hover) {
	.header__phone:hover {
		color: var(--c-brand-2);
	}
}

/* Логотип — оригинальный PNG с прозрачным фоном, без подложек и перекраски */
.logo {
	display: inline-flex;
	align-items: center;
	transition: opacity 0.2s ease;
}
.logo__img {
	display: block;
	width: clamp(138px, 118.129px + 5.2977vw, 220px);
	height: auto;
	transition: width 0.28s ease, opacity 0.25s ease;
}
/* Пока летит логотип заставки, настоящий в шапке ждёт: иначе он виден всё
   время полёта и эффект «логотип приземляется на своё место» пропадает.
   Атрибут снимает JS в момент, когда летящий логотип начинает растворяться */
[data-intro-hold] .header__logo .logo__img {
	opacity: 0;
}
.--header-scroll .logo__img {
	width: clamp(104px, 92.835px + 2.9773vw, 150px);
}
@media (any-hover: hover) {
	.logo:hover {
		opacity: 0.85;
	}
}
.footer__logo {
	align-self: flex-start;
}

/* Меню */
.menu__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 6.7px + 0.97vw, 29px);
}
.menu__link {
	position: relative;
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	/* пункты не рвём по словам: «Як працюємо» в две строки распирает шапку */
	white-space: nowrap;
	color: var(--c-text-2);
	padding: 6px 0;
	transition: color 0.2s ease;
}
.menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--c-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.menu__link.--navigator-active,
.menu__link--active {
	color: var(--c-text);
}
.menu__link.--navigator-active::after,
.menu__link--active::after {
	transform: scaleX(1);
}
@media (any-hover: hover) {
	.menu__link:hover {
		color: var(--c-text);
	}
}

/* Мега-меню услуг.
   Пункт с панелью — position: static, чтобы панель тянулась на всю ширину
   окна, а не по ширине пункта. Открытие ставит data-mega-open на сам <li> */
.menu__item--mega {
	position: static;
}
.menu__link--mega {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	background-color: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-text-2);
}
.menu__chevron {
	color: var(--c-brand-2);
	transition: transform 0.25s ease;
}
/* На тач-устройстве наведения нет, и пункт ничем не выдаёт, что он
   раскрывается. Поэтому там он выглядит кнопкой и получает нормальный
   размер под палец */
[data-touch] .menu__link--mega {
	min-height: 44px;
	padding-left: var(--s-3);
	padding-right: var(--s-2);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
}
[data-touch] [data-mega-open] .menu__link--mega {
	border-color: var(--c-brand);
	background-color: var(--c-brand-dim);
}
[data-mega-open] .menu__link--mega {
	color: var(--c-text);
}
[data-mega-open] .menu__chevron {
	transform: rotate(180deg);
}

.mega {
	position: fixed;
	left: 0;
	right: 0;
	/* от текущей высоты шапки: на прокрутке она сжата, и панель должна ехать за ней */
	top: var(--head-now);
	z-index: var(--z-dropdown);
	background-color: var(--c-bg-2);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -10px, 0);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
[data-mega-open] .mega {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

.mega__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-2) var(--s-4);
	padding-top: var(--s-5);
	padding-bottom: var(--s-5);
}
.mega__link {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	height: 100%;
	padding: var(--s-3);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mega__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	background-color: var(--c-surface-2);
	color: var(--c-brand-2);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mega__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mega__title {
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--c-text);
}
.mega__note {
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-text-3);
}
@media (any-hover: hover) {
	.mega__link:hover {
		background-color: var(--c-surface);
		border-color: var(--c-line);
	}
	.mega__link:hover .mega__icon {
		background-color: var(--c-brand);
		color: var(--c-brand-ink);
	}
}

.mega__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	padding-top: var(--s-4);
	padding-bottom: var(--s-5);
	border-top: 1px solid var(--c-line);
}
.mega__all {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--c-brand-2);
	transition: gap 0.2s ease;
}
@media (any-hover: hover) {
	.mega__all:hover {
		gap: var(--s-3);
	}
}
.mega__hint {
	margin-right: auto;
	font-size: 13px;
	color: var(--c-text-3);
}

.icon-menu {
	display: none;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* Первый экран занимает ровно то, что осталось от высоты окна под шапкой:
   шапка фиксированная, её высоту main компенсирует отступом, а hero добирает
   остаток. --head-h на прокрутке не пересчитывается, поэтому не скачет.
   Отступы завязаны на высоту окна — на низких экранах они ужимаются, и
   контент не выталкивает следующую секцию в кадр. */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--head-h));
	padding-top: clamp(28px, 4vh, 72px);
	padding-bottom: clamp(28px, 4vh, 72px);
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12, 16, 14, 0.97) 0%, rgba(12, 16, 14, 0.93) 42%, rgba(12, 16, 14, 0.72) 100%);
}
.hero__container {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: clamp(32px, 15.5px + 4.4vw, 100px);
	align-items: start;
}
.hero__main {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	padding-top: var(--s-4);
}
.hero__title {
	max-width: 20ch;
}
.hero__lead {
	max-width: 52ch;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-2);
}
.hero__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3) var(--s-5);
	margin-top: var(--s-4);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
}
.hero__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.4;
}
.hero__fact .icon {
	color: var(--c-brand-2);
	margin-top: 1px;
}
.hero__fact b {
	color: var(--c-text);
	font-weight: 600;
}

/* Карточка формы в hero */
.lead-form {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: clamp(20px, 16.1px + 1.04vw, 36px);
}
.lead-form__head {
	margin-bottom: var(--s-5);
}
.lead-form__title {
	margin-bottom: var(--s-2);
}
.lead-form__note {
	font-size: var(--fs-small);
	color: var(--c-text-2);
}

/* --------------------------------------------------------------------------
   8. ФОРМЫ
   -------------------------------------------------------------------------- */
.form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.form__line {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.form__label {
	font-size: 13px;
	color: var(--c-text-2);
}
.form__label span {
	color: var(--c-brand-2);
}
.input {
	min-height: var(--input-height);
	padding: 0 16px;
	background-color: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	color: var(--c-text);
	font-size: 16px;
	transition: border-color 0.2s ease;
}
textarea.input {
	padding: 14px 16px;
	min-height: 96px;
	line-height: 1.5;
}
.input::placeholder {
	color: var(--c-text-3);
}
.input.--form-focus {
	border-color: var(--c-line-strong);
}
.input.--form-error {
	border-color: var(--c-danger);
}
.input.--form-success {
	border-color: rgba(47, 191, 106, 0.5);
}
[data-form-error] {
	font-size: 12px;
	color: var(--c-danger);
}
[data-form-senderror] {
	font-size: 13px;
	color: var(--c-danger);
}
.form.--sending {
	opacity: 0.6;
	pointer-events: none;
}
.form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
}
.form__policy {
	font-size: 12px;
	line-height: 1.45;
	color: var(--c-text-3);
}
.form__policy a {
	color: var(--c-text-2);
	text-decoration: underline;
}

.checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-2);
	cursor: pointer;
}
/* текст ошибки под чекбоксом, а не сбоку */
.checkbox [data-form-error] {
	flex: 1 0 100%;
	padding-left: 26px;
}
.checkbox__input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 1px solid var(--c-line-strong);
	border-radius: 3px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.checkbox__input:checked {
	background-color: var(--c-brand);
	border-color: var(--c-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306180e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}
.checkbox__input.--form-error {
	border-color: var(--c-danger);
}
.checkbox__text {
	flex: 1 1 0;
	min-width: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--c-text-2);
}
.checkbox__text a {
	color: var(--c-text-2);
	text-decoration: underline;
}

/* Нативный select под общий вид */
.select-native {
	min-height: var(--input-height);
	padding: 0 40px 0 16px;
	background-color: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	color: var(--c-text);
	font-size: 16px;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	transition: border-color 0.2s ease;
}
.select-native option {
	background-color: var(--c-surface);
	color: var(--c-text);
}

/* --------------------------------------------------------------------------
   9. НАПРАВЛЕНИЯ
   -------------------------------------------------------------------------- */
.directions {
	position: relative;
}
/* мягкое зелёное свечение сверху — секция «выходит» из тёмного фона */
.directions::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(1100px, 100%);
	height: 420px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(47, 191, 106, 0.14), rgba(47, 191, 106, 0) 65%);
	pointer-events: none;
}
.directions__container {
	position: relative;
	z-index: var(--z-base);
}
.directions__list {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 14.2px + 1.55vw, 44px);
}

.dir {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color 0.25s ease;
}
/* в перевёрнутой карточке фото уходит вправо — колонки меняются местами,
   чтобы текстовая часть всегда оставалась широкой */
.dir--rev {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.dir--rev .dir__media {
	order: 2;
}

.dir__media {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	background-color: var(--c-bg);
}
.dir__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* зелёный тон поверх фото — фирменный цвет, а не просто затемнение */
.dir__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgba(47, 191, 106, 0.28) 0%, rgba(47, 191, 106, 0) 55%),
		linear-gradient(180deg, rgba(12, 16, 14, 0.15) 0%, rgba(12, 16, 14, 0.55) 100%);
}
.dir__num {
	position: absolute;
	left: clamp(16px, 12.1px + 1.04vw, 32px);
	bottom: clamp(8px, 3.1px + 1.3vw, 28px);
	z-index: var(--z-above);
	font-family: var(--ff-head);
	font-weight: 700;
	font-size: clamp(72px, 52.1px + 5.31vw, 154px);
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 2px rgba(238, 242, 239, 0.5);
	letter-spacing: -0.02em;
	pointer-events: none;
}
.dir__badge {
	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	z-index: var(--z-above);
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background-color: var(--c-brand);
	color: var(--c-brand-ink);
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

.dir__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: clamp(24px, 17.2px + 1.81vw, 52px);
}
.dir__title {
	font-size: clamp(24px, 19.4px + 1.23vw, 43px);
}
.dir__lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-text-2);
	max-width: 62ch;
}
.dir__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--s-5);
	font-size: var(--fs-small);
	color: var(--c-text);
}
.dir__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	line-height: 1.4;
}
.dir__list .icon {
	color: var(--c-brand-2);
	margin-top: 3px;
}
.dir__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: auto;
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-line);
}
.dir__price {
	display: flex;
	flex-direction: column;
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--c-amber);
}
.dir__price small {
	font-family: var(--ff-body);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-3);
	margin-top: 6px;
}
.dir__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}
@media (any-hover: hover) {
	.dir:hover {
		border-color: var(--c-brand);
	}
	.dir:hover .dir__media img {
		transform: scale(1.05);
	}
}

/* --------------------------------------------------------------------------
   10. УСЛУГИ И ЦЕНЫ
   -------------------------------------------------------------------------- */
.services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}
.service-card {
	display: flex;
	flex-direction: column;
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-5);
	gap: var(--s-3);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.service-card__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	background-color: var(--c-brand-dim);
	color: var(--c-brand-2);
	margin-bottom: var(--s-1);
}
.service-card__title {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.service-card__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.5;
	flex: 1 1 auto;
}
.service-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-3);
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
}
.service-card__button {
	width: 100%;
	margin-top: var(--s-4);
}
.service-card__price {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--c-amber);
	white-space: nowrap;
}
.service-card__price span {
	font-family: var(--ff-body);
	font-weight: 400;
	font-size: 12px;
	color: var(--c-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: block;
	line-height: 1.2;
}
@media (any-hover: hover) {
	.service-card:hover {
		border-color: var(--c-brand);
		background-color: var(--c-surface-2);
	}
	/* одно состояние: наведение в любом месте карточки заливает кнопку зелёным */
	.service-card:hover .service-card__button,
	.service-card__button:hover {
		background-color: var(--c-brand);
		border-color: var(--c-brand);
		color: var(--c-brand-ink);
	}
}

.services__note {
	margin-top: var(--s-6);
	padding: var(--s-5);
	border: 1px dashed var(--c-line-strong);
	border-radius: var(--r-md);
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.5;
}
.services__note .icon {
	color: var(--c-amber);
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   11. КАК МЫ РАБОТАЕМ
   -------------------------------------------------------------------------- */
.process__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
	counter-reset: step;
}
.step {
	position: relative;
	padding-top: var(--s-6);
	border-top: 2px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.step::before {
	counter-increment: step;
	content: "0" counter(step);
	position: absolute;
	top: -1px;
	left: 0;
	transform: translateY(-50%);
	font-family: var(--ff-head);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--c-brand-ink);
	background-color: var(--c-brand);
	padding: 3px 10px;
	border-radius: var(--r-pill);
}
.step__title {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	line-height: 1.2;
}
.step__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   12. ПРЕИМУЩЕСТВА
   -------------------------------------------------------------------------- */
.benefits__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: clamp(28px, 15.9px + 3.23vw, 72px);
	align-items: start;
}
.benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
}
.benefit {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
.benefit__icon {
	color: var(--c-brand-2);
}
.benefit__title {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 17px;
	text-transform: uppercase;
	line-height: 1.25;
}
.benefit__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.55;
}
.benefits__media {
	position: sticky;
	top: var(--sticky-top);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--c-line);
}
.benefits__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.benefits__caption {
	padding: var(--s-4) var(--s-5);
	font-size: 13px;
	color: var(--c-text-2);
	background-color: var(--c-surface);
	border-top: 1px solid var(--c-line);
}

/* --------------------------------------------------------------------------
   13. ЦИФРЫ
   -------------------------------------------------------------------------- */
.numbers {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	background-color: var(--c-bg-2);
	padding-top: clamp(40px, 27.9px + 3.23vw, 90px);
	padding-bottom: clamp(40px, 27.9px + 3.23vw, 90px);
}
.numbers__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
}
.numbers__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	filter: grayscale(0.5) brightness(0.6);
}
.numbers__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12, 16, 14, 0.97) 20%, rgba(12, 16, 14, 0.86) 70%, rgba(12, 16, 14, 0.94) 100%);
}
.numbers__container {
	position: relative;
	z-index: var(--z-base);
}
.numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.number {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: 0 clamp(16px, 12.117px + 1.0356vw, 32px);
	border-left: 1px solid var(--c-line);
}
.number:first-child {
	padding-left: 0;
	border-left: 0;
}
.number__value {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	font-family: var(--ff-head);
	font-weight: 700;
	font-size: clamp(46px, 37.2px + 2.33vw, 82px);
	line-height: 0.92;
	letter-spacing: -0.01em;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}
.number__suffix {
	font-style: normal;
	font-size: 0.42em;
	line-height: 1.1;
	color: var(--c-brand-2);
}
.number__label {
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--c-brand-2);
	margin-top: var(--s-2);
}
.number__label::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background-color: var(--c-brand);
	margin-bottom: var(--s-3);
}
.number__note {
	font-size: 13px;
	color: var(--c-text-2);
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   14. ГАЛЕРЕЯ
   -------------------------------------------------------------------------- */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-3);
}
.gallery__item {
	position: relative;
	display: block;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--c-line);
	background-color: var(--c-surface);
}
.gallery__item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.3s ease;
}
.gallery__item--tall {
	grid-row: span 2;
}
.gallery__item--tall img {
	aspect-ratio: 4 / 6.15;
}
.gallery__item--wide {
	grid-column: span 2;
}
.gallery__item--wide img {
	aspect-ratio: 8 / 3;
}
.gallery__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	background-color: rgba(12, 16, 14, 0.7);
	color: var(--c-text);
	opacity: 0;
	transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
	.gallery__item:hover img {
		transform: scale(1.05);
	}
	.gallery__item:hover .gallery__zoom {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   15. ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.reviews__layout {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(28px, 15.9px + 3.23vw, 72px);
	align-items: start;
}
.rating-card {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.rating-card__value {
	font-family: var(--ff-head);
	font-weight: 700;
	font-size: 64px;
	line-height: 1;
	color: var(--c-text);
}
.rating-card__stars {
	display: flex;
	gap: 3px;
	color: var(--c-amber);
}
.rating-card__stars .icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: none;
}
.rating-card__stars .icon--half {
	opacity: 0.45;
}
.rating-card__meta {
	font-size: var(--fs-small);
	color: var(--c-text-2);
}
.rating-card__note {
	font-size: 13px;
	color: var(--c-text-3);
	line-height: 1.5;
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-line);
}

.reviews__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
}
.review {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-5);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
.review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}
.review__author {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.review__date {
	font-size: 12px;
	color: var(--c-text-3);
	white-space: nowrap;
}
.review__stars {
	display: flex;
	gap: 2px;
	color: var(--c-amber);
}
.review__stars .icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}
.review__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   16. МАРКИ
   -------------------------------------------------------------------------- */
.brands__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.brands__item {
	padding: 10px 18px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-text-2);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.brands__item--accent {
	border-color: var(--c-brand);
	color: var(--c-brand-2);
}
@media (any-hover: hover) {
	.brands__item:hover {
		border-color: var(--c-line-strong);
		color: var(--c-text);
	}
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.spollers {
	display: grid;
	gap: var(--s-3);
}
.spollers__item {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.spollers__title {
	position: relative;
	display: block;
	width: 100%;
	padding: var(--s-4) 56px var(--s-4) var(--s-5);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: var(--fs-h4);
	line-height: 1.3;
	cursor: default;
	list-style: none;
	transition: color 0.2s ease;
}
.spollers__title::marker,
.spollers__title::-webkit-details-marker {
	display: none;
}
.--spoller-init .spollers__title {
	cursor: pointer;
}
.--spoller-init .spollers__title::before,
.--spoller-init .spollers__title::after {
	content: "";
	position: absolute;
	right: var(--s-5);
	top: 50%;
	width: 14px;
	height: 2px;
	background-color: var(--c-brand-2);
	transition: transform 0.35s ease;
}
.--spoller-init .spollers__title::before {
	transform: translateY(-50%);
}
.--spoller-init .spollers__title::after {
	transform: translateY(-50%) rotate(90deg);
}
.--spoller-init .spollers__title.--spoller-active::after {
	transform: translateY(-50%) rotate(0deg);
}
.spollers__body {
	padding: 0 var(--s-5) var(--s-5);
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.65;
}
@media (any-hover: hover) {
	.--spoller-init .spollers__title:hover {
		color: var(--c-brand-2);
	}
}

/* --------------------------------------------------------------------------
   18. КОНТАКТЫ
   -------------------------------------------------------------------------- */
.contacts__layout {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: clamp(24px, 14.3px + 2.59vw, 64px);
	align-items: start;
}
.contacts__info {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.contacts__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}
.contact-item__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	background-color: var(--c-brand-dim);
	color: var(--c-brand-2);
}
.contact-item__label {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-3);
	margin-bottom: 2px;
}
.contact-item__value {
	display: block;
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	transition: color 0.2s ease;
}
.contact-item__value small {
	display: block;
	font-family: var(--ff-body);
	font-size: 13px;
	color: var(--c-text-2);
	margin-top: 2px;
}
/* телефоны — каждый на своей строке, иначе сливаются в одну */
/* сетка из двух колонок: номера и кнопки мессенджеров выстраиваются
   ровно друг под другом независимо от ширины отрисованных цифр */
.contact-item__phones {
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	gap: 10px var(--s-3);
}
.phone-row {
	display: contents;
}
.phone-row__links {
	display: flex;
	gap: 6px;
}
.phone-row__link {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	color: var(--c-text-3);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.phone-row__link .icon {
	width: 17px;
	height: 17px;
}
@media (any-hover: hover) {
	/* фирменные цвета мессенджеров — только в ховере, чтобы не спорить с зелёным акцентом */
	.phone-row__link--tg:hover {
		background-color: #229ed9;
		border-color: #229ed9;
		color: #fff;
	}
	.phone-row__link--viber:hover {
		background-color: #7360f2;
		border-color: #7360f2;
		color: #fff;
	}
}
.contact-item__note {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--c-text-2);
	line-height: 1.4;
}
@media (any-hover: hover) {
	a.contact-item__value:hover {
		color: var(--c-brand-2);
	}
}
.contacts__map {
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	background-color: var(--c-surface);
}
.contacts__map iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 271.4px + 12.95vw, 520px);
	border: 0;
	/* Google-карта светлая — инвертируем её в тёмную под тему сайта */
	filter: invert(0.92) hue-rotate(180deg) saturate(0.6) contrast(0.92);
}
.contacts__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border-top: 1px solid var(--c-line);
	font-size: 13px;
	color: var(--c-text-2);
	line-height: 1.5;
}
.contacts__hint .icon {
	color: var(--c-brand-2);
	margin-top: 2px;
}

.hours {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--s-5);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
}
.hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	font-size: var(--fs-small);
	color: var(--c-text-2);
}
.hours__row--off {
	color: var(--c-text-3);
}
.hours__row b {
	color: var(--c-text);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   19. CTA-ПОЛОСА
   -------------------------------------------------------------------------- */
.cta {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.cta__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
}
.cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(12, 16, 14, 0.96) 20%, rgba(12, 16, 14, 0.75) 100%);
}
.cta__container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	padding-top: clamp(40px, 30.3px + 2.59vw, 80px);
	padding-bottom: clamp(40px, 30.3px + 2.59vw, 80px);
}
.cta__text {
	max-width: 620px;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* --------------------------------------------------------------------------
   20. ПОДВАЛ
   -------------------------------------------------------------------------- */
.footer {
	background-color: var(--c-bg-2);
	border-top: 1px solid var(--c-line);
}

/* Бренд-строка. Логотип, описание и мессенджеры выстроены в ряд и разделены
   линией от списков: это даёт подвалу горизонтальный ритм. Когда те же три
   элемента стояли колонкой, справа от них оставалось пустое поле в пол-экрана */
.footer__brand {
	display: flex;
	align-items: center;
	gap: var(--s-5) clamp(24px, 3vw, 48px);
	padding: var(--s-7) 0;
	border-bottom: 1px solid var(--c-line);
}
.footer__logo {
	flex: 0 0 auto;
}
.footer__logo .logo__img {
	width: clamp(132px, 13vw, 168px);
}
.footer__about {
	flex: 1 1 320px;
	max-width: 72ch;
	font-size: 13px;
	color: var(--c-text-2);
	line-height: 1.6;
}

/* Списки. Три колонки вместо четырёх: услуги идут в две подколонки, и все
   три блока получаются примерно одной высоты — подвал не разъезжается */
.footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--s-6) var(--grid-gap);
	padding: var(--s-7) 0;
}
.footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
/* длинный список услуг — в две колонки, иначе подвал вытягивается.
   Селектор из двух классов, чтобы перебить display: flex базового .footer__list */
.footer__list.footer__list--2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2) var(--s-4);
}
.footer__phones {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.footer__phones a {
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}
@media (any-hover: hover) {
	.footer__phones a:hover {
		color: var(--c-brand-2);
	}
}
.footer__note {
	font-size: 13px;
	color: var(--c-text-2);
	line-height: 1.5;
}
.footer__day-off {
	color: var(--c-brand-2);
}
/* прижимаем кнопку к низу колонки — низ контактов выравнивается со списками */
.footer__cta {
	align-self: flex-start;
	margin-top: auto;
	padding-top: var(--s-1);
}
/* подчёркивание задаёт колонкам общую верхнюю линию */
.footer__heading {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-line);
}
.footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-size: var(--fs-small);
	color: var(--c-text-2);
}
.footer__list a {
	transition: color 0.2s ease;
}
@media (any-hover: hover) {
	.footer__list a:hover {
		color: var(--c-brand-2);
	}
}
.footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.footer__social {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	color: var(--c-text-2);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
@media (any-hover: hover) {
	.footer__social:hover {
		border-color: var(--c-brand);
		color: var(--c-brand-2);
	}
	/* фирменные цвета сервисов — как у кнопок мессенджеров возле телефонов */
	.footer__social--maps:hover {
		background-color: #ea4335;
		border-color: #ea4335;
		color: #fff;
	}
	.footer__social--tg:hover {
		background-color: #229ed9;
		border-color: #229ed9;
		color: #fff;
	}
	.footer__social--viber:hover {
		background-color: #7360f2;
		border-color: #7360f2;
		color: #fff;
	}
	.footer__social--phone:hover {
		background-color: var(--c-brand);
		border-color: var(--c-brand);
		color: var(--c-brand-ink);
	}
}
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-line);
	font-size: 12px;
	color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   20.1. МОБИЛЬНАЯ ПАНЕЛЬ ДЕЙСТВИЙ
   -------------------------------------------------------------------------- */
.mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-header);
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
	background-color: var(--c-bg-2);
	border-top: 1px solid var(--c-line);
}
.mobile-bar .button {
	flex: 1 1 50%;
	min-height: 48px;
	padding: 12px 10px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   21. ПОПАП
   -------------------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-color: rgba(6, 10, 8, 0.72);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: var(--z-popup-overlay);
}
[data-popup-open] body::after {
	opacity: 1;
}
[data-popup] {
	position: fixed;
	inset: 0;
	padding: 30px 16px;
	transition: visibility 0.4s ease;
	visibility: hidden;
	pointer-events: none;
}
[data-popup][data-popup-active] {
	z-index: var(--z-popup);
	visibility: visible;
	overflow: auto;
	pointer-events: auto;
}
.popup__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	width: 100%;
}
.popup__body {
	position: relative;
	visibility: hidden;
	transform: scale(0.94);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: clamp(24px, 19.2px + 1.29vw, 44px);
	width: 100%;
	max-width: 480px;
	text-align: center;
}
[data-popup-active] .popup__body {
	visibility: visible;
	transform: scale(1);
	opacity: 1;
}
.popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	color: var(--c-text-2);
	border-radius: var(--r-sm);
	transition: color 0.2s ease, background-color 0.2s ease;
}
@media (any-hover: hover) {
	.popup__close:hover {
		color: var(--c-text);
		background-color: var(--c-surface-2);
	}
}
.popup__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--s-4);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--c-brand-dim);
	color: var(--c-brand-2);
}
.popup__title {
	margin-bottom: var(--s-3);
}
.popup__text {
	font-size: var(--fs-small);
	color: var(--c-text-2);
	line-height: 1.6;
}

/* Тёмная тема для лайтбокса GLightbox */
.goverlay {
	background: rgba(6, 10, 8, 0.95);
}
/* Штатно стрелки уводятся за экран (top: -100%) и возвращаются только на десктопе —
   возвращаем их на всех ширинах и делаем крупнее под палец */
.glightbox-container .gprev,
.glightbox-container .gnext {
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	background-color: rgba(12, 16, 14, 0.72);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.glightbox-container .gprev {
	left: 12px;
}
.glightbox-container .gnext {
	right: 12px;
}
.glightbox-container .gclose {
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	background-color: rgba(12, 16, 14, 0.72);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	opacity: 1;
}
.glightbox-container .gprev svg,
.glightbox-container .gnext svg,
.glightbox-container .gclose svg {
	width: 18px;
}
.gcounter {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: var(--z-lightbox-ui);
	padding: 7px 14px;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	background-color: rgba(12, 16, 14, 0.72);
	font-family: var(--ff-head);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}
@media (any-hover: hover) {
	.glightbox-container .gprev:hover,
	.glightbox-container .gnext:hover,
	.glightbox-container .gclose:hover {
		background-color: var(--c-brand);
		border-color: var(--c-brand);
	}
}
.glightbox-container .gslide-description {
	background-color: var(--c-surface);
}
.glightbox-container .gslide-title {
	font-family: var(--ff-head);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-text);
	margin: 0;
}
.glightbox-container .gdesc-inner {
	padding: 14px 18px;
}
.glightbox-clean .gslide-media {
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   22. СТРАНИЦА УСЛУГИ
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(40px, 30.3px + 2.59vw, 80px);
	padding-bottom: clamp(40px, 30.3px + 2.59vw, 80px);
	border-bottom: 1px solid var(--c-line);
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
}
.page-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(12, 16, 14, 0.97) 30%, rgba(12, 16, 14, 0.7) 100%);
}
.page-hero__container {
	position: relative;
}
.page-hero__body {
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	font-size: 13px;
	color: var(--c-text-3);
	margin-bottom: var(--s-5);
}
.breadcrumbs__sep {
	color: var(--c-line-strong);
}
.breadcrumbs a {
	color: var(--c-text-2);
	transition: color 0.2s ease;
}
@media (any-hover: hover) {
	.breadcrumbs a:hover {
		color: var(--c-brand-2);
	}
}

.article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: clamp(28px, 15.9px + 3.23vw, 72px);
	align-items: start;
}
.article__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.prose {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	font-size: var(--fs-body);
	color: var(--c-text-2);
	line-height: 1.7;
}
.prose h2 {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	color: var(--c-text);
	line-height: 1.15;
	margin-top: var(--s-3);
}
.prose h3 {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	color: var(--c-text);
	line-height: 1.2;
}
.prose strong {
	color: var(--c-text);
	font-weight: 600;
}
.prose ul {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.prose ul li {
	position: relative;
	padding-left: 24px;
}
.prose ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--c-brand);
}
.prose img {
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
	width: 100%;
}

.price-table {
	width: 100%;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
	background-color: var(--c-surface);
}
.price-table__row {
	display: flex;
	/* цена не переносится (nowrap), поэтому на узком экране в паре с длинным
	   названием работы она вылезала из таблицы — разрешаем ей уйти на строку ниже */
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-small);
	color: var(--c-text-2);
}
.price-table__row:last-child {
	border-bottom: 0;
}
.price-table__row--head {
	background-color: var(--c-surface-2);
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-text-3);
}
.price-table__price {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: 17px;
	color: var(--c-amber);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.aside {
	position: sticky;
	top: var(--sticky-top);
	display: flex;
	flex-direction: column;
	gap: var(--grid-gap);
}
.aside__card {
	background-color: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.aside__title {
	font-family: var(--ff-head);
	font-weight: 600;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	line-height: 1.2;
}
.aside__messengers {
	display: flex;
	gap: var(--s-2);
}
.aside__messengers .button {
	flex: 1 1 50%;
	min-width: 0;
}
.aside__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-size: var(--fs-small);
}
.aside__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: 10px 0;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-text-2);
	transition: color 0.2s ease;
}
.aside__list a .icon {
	color: var(--c-line-strong);
	transition: color 0.2s ease, transform 0.2s ease;
}
.aside__list li:last-child a {
	border-bottom: 0;
}
@media (any-hover: hover) {
	.aside__list a:hover {
		color: var(--c-text);
	}
	.aside__list a:hover .icon {
		color: var(--c-brand-2);
		transform: translateX(3px);
	}
}

/* --------------------------------------------------------------------------
   23. ЗАСТАВКА (машина під'їжджає до логотипа)

   Показывается один раз за сессию и только при разрешённом движении: решение
   принимает синхронный скрипт в <head> и ставит на <html> атрибут data-intro.
   Без этого атрибута разметка заставки полностью выключена (display: none),
   так что повторные заходы и prefers-reduced-motion её не видят вовсе.
   -------------------------------------------------------------------------- */
.intro {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-intro);
	place-items: center;
	overflow: hidden;
	padding: var(--container-padding);
}
/* Фон вынесен в отдельный слой: на выходе он гаснет, а логотип в это время
   летит в шапку сайта — их нельзя гасить вместе */
.intro::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--c-bg);
	background-image: radial-gradient(60% 55% at 50% 48%, rgba(47, 191, 106, 0.1), transparent 70%);
	transition: opacity 0.5s ease;
}
[data-intro] .intro {
	display: grid;
}
/* уход: фон гаснет, подпись убирается, страница проступает под ними.
   Клики отдаём странице сразу, не дожидаясь конца перелёта логотипа */
.intro--out {
	pointer-events: none;
}
.intro--out::before {
	opacity: 0;
}
/* Подпись гасим своей анимацией, а не свойством opacity: анимация появления
   стоит с fill: forwards, а залитое анимацией значение бьёт обычное объявление
   в каскаде — подпись висела до самого удаления заставки, пока логотип летел
   в шапку. 0.25s против 0.5s у фона: текст уходит раньше, чем подложка */
.intro--out .intro__caption {
	animation: intro-caption-out 0.25s ease forwards;
}

.intro__stage {
	width: min(560px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

/* коробка логотипа: оба слоя лежат друг на друге и совпадают пиксель в пиксель */
.intro__logo {
	position: relative;
	width: 100%;
	aspect-ratio: 900 / 444;
}
.intro__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Стартовые состояния держим отдельно от анимаций: сцена запускается классом
   intro--ready, который JS ставит, когда оба слоя логотипа уже декодированы.
   Иначе на холодной загрузке машина «появлялась» уже в середине проезда —
   анимация шла, пока картинки ещё грузились, и подъезд каждый раз был разный. */
.intro__logo > .intro__layer {
	opacity: 0.12;
}
.intro--ready .intro__logo > .intro__layer {
	animation: intro-light 0.5s ease-out 1.05s forwards;
}

.intro__car {
	position: absolute;
	inset: 0;
	transform: translate3d(70vw, 0, 0);
}
.intro--ready .intro__car {
	animation: intro-dock 1s cubic-bezier(0.16, 0.84, 0.28, 1) 0.15s forwards;
}
/* смаз скорости: размытый двойник машины тянется следом и гаснет на финише.
   Рисуем фоном, а не картинкой — это тот же файл, второй загрузки не будет */
.intro__car::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url(../img/logo-car.webp);
	background-size: 100% 100%;
	filter: blur(7px);
	opacity: 0;
}
.intro--ready .intro__car::before {
	animation: intro-smear 1s cubic-bezier(0.16, 0.84, 0.28, 1) 0.15s forwards;
}

/* блик: полоса света проходит по силуэту логотипа в момент, когда он
   разгорается. Маска — сам логотип, поэтому свет идёт строго по фигуре */
.intro__shine {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		105deg,
		transparent 42%,
		rgba(255, 255, 255, 0.85) 50%,
		transparent 58%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;
	-webkit-mask-image: url(../img/logo-560.png);
	mask-image: url(../img/logo-560.png);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	opacity: 0;
}
.intro--ready .intro__shine {
	animation: intro-shine 0.7s ease-out 1.1s forwards;
}
/* свет фар: тёплое пятно у передних фонарей. Координаты в процентах от
   коробки логотипа, поэтому свечение держится за фарами на любом экране */
.intro__car::after {
	content: '';
	position: absolute;
	left: 27%;
	top: 15%;
	width: 26%;
	aspect-ratio: 1;
	background-image: radial-gradient(closest-side circle, rgba(255, 224, 168, 0.3), rgba(255, 224, 168, 0.1) 45%, rgba(255, 224, 168, 0) 75%);
	/* размытие гарантирует мягкий край: чистый градиент на тёмном фоне полосит */
	filter: blur(10px);
	opacity: 0;
}
.intro--ready .intro__car::after {
	animation: intro-beam 0.35s ease-out 1.1s forwards;
}

.intro__caption {
	text-align: center;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-3);
	opacity: 0;
}
/* :not(.intro--out) — чтобы появление и уход не спорили за одно и то же
   свойство animation: у заставки на выходе висят оба класса сразу */
.intro--ready:not(.intro--out) .intro__caption {
	animation: intro-caption 0.4s ease-out 1.25s forwards;
}

@keyframes intro-dock {
	0% {
		transform: translate3d(70vw, 0, 0);
	}
	84% {
		/* лёгкий перелёт: машина чуть проезжает своё место и откатывается */
		transform: translate3d(-1.5%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}
@keyframes intro-smear {
	0% {
		opacity: 0.55;
		transform: translate3d(9%, 0, 0);
	}
	65% {
		opacity: 0.4;
	}
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes intro-shine {
	0% {
		background-position: -70% 0;
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		background-position: 170% 0;
		opacity: 0;
	}
}
@keyframes intro-beam {
	to {
		opacity: 1;
	}
}
@keyframes intro-light {
	to {
		opacity: 1;
	}
}
@keyframes intro-caption {
	to {
		opacity: 1;
	}
}
/* from прописан явно: без него старт берётся из базового правила
   .intro__caption с opacity: 0, и подпись исчезала бы рывком, а не плавно */
@keyframes intro-caption-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   24. АДАПТИВ
   -------------------------------------------------------------------------- */
@media (max-width: 74.99875em) { /* < 1200px */
	/* Пункт «Послуги» подрос: стрелка, а на планшете ещё и рамка кнопки —
	   номер в шапке перестал помещаться в строку. Оставляем от него значок
	   с нормальной областью нажатия, сам номер есть в кнопке записи и в меню */
	.header__phone {
		justify-content: center;
		width: 44px;
		height: 44px;
	}
	.header__phone span {
		display: none;
	}

	.hero__container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	}
	.gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* три колонки сжимаются вместе с контейнером — ломать раскладку не нужно */
	.footer__cols {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

@media (max-width: 61.99875em) { /* < 992px */
	/* В бургере панель не висит под шапкой, а раскрывается прямо в списке:
	   фиксированное позиционирование и тень тут не нужны */
	.mega {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background-color: transparent;
		border: 0;
		box-shadow: none;
	}
	[data-mega-open] .mega {
		display: block;
	}
	.mega__container {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	.mega__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-1);
		padding-top: var(--s-3);
		padding-bottom: 0;
	}
	.mega__link {
		padding: var(--s-2);
	}
	.mega__icon {
		width: 34px;
		height: 34px;
	}
	/* в узкой колонке подписи только удлиняют список — оставляем названия */
	.mega__note,
	.mega__foot {
		display: none;
	}

	/* три колонки уже не читаются: услуги (они в две подколонки) занимают
	   верхнюю строку целиком, разделы и контакты становятся под ними */
	.footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer__col--services {
		grid-column: 1 / -1;
	}
	/* на всю строку две подколонки расползаются — ставим три */
	.footer__col--services .footer__list--2col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.header__body {
		min-height: 64px;
	}
	.header__topline-inner {
		justify-content: center;
	}
	.header__topline-item--address {
		display: none;
	}
	.hero__container {
		grid-template-columns: minmax(0, 1fr);
	}
	.dir {
		grid-template-columns: minmax(0, 1fr);
	}
	.dir--rev .dir__media {
		order: 0;
	}
	.dir__media {
		min-height: clamp(220px, 180px + 20vw, 320px);
	}
	.dir__num {
		font-size: 92px;
	}
	.services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-7);
	}
	.benefits__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.benefits__media {
		position: static;
	}
	.numbers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--s-7);
	}
	.number:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.reviews__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.contacts__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.article {
		grid-template-columns: minmax(0, 1fr);
	}
	.aside {
		position: static;
	}

	/* мобильное меню */
	/* Полоски бургера рисуем от центра, а не от краёв рамки: сама кнопка выше
	   рисунка — её высота задана под палец, а не под три линии */
	.icon-menu {
		display: block;
		position: relative;
		flex: 0 0 auto;
		width: 30px;
		height: 44px;
		z-index: var(--z-menu-icon);
		color: var(--c-text);
	}
	.icon-menu span,
	.icon-menu::before,
	.icon-menu::after {
		content: "";
		position: absolute;
		right: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
		transition: transform 0.3s ease 0s, top 0.3s ease 0s, width 0.3s ease 0s;
	}
	.icon-menu::before {
		top: calc(50% - 10px);
	}
	.icon-menu::after {
		top: calc(50% + 8px);
	}
	.icon-menu span {
		top: calc(50% - 1px);
	}
	[data-menu-open] .icon-menu span {
		width: 0;
	}
	[data-menu-open] .icon-menu::before {
		top: calc(50% - 1px);
		transform: rotate(-45deg);
	}
	[data-menu-open] .icon-menu::after {
		top: calc(50% - 1px);
		transform: rotate(45deg);
	}
	/* бургер — крайний справа, после телефона и кнопки записи */
	.header__logo {
		order: 1;
	}
	.header__actions {
		order: 2;
	}
	.header__menu {
		order: 3;
	}

	/* панель открывается ПОД шапкой: верхняя строка и логотип остаются видимыми.
	   Считаем от --head-now (текущая высота), а не от развёрнутой --head-h:
	   на прокрутке шапка сжата, и панель начиналась ниже её низа */
	.menu__body {
		position: fixed;
		left: -100%;
		top: var(--head-now);
		width: 100%;
		height: calc(100svh - var(--head-now));
		overflow: auto;
		display: flex;
		flex-direction: column;
		gap: var(--s-6);
		padding: var(--s-6) var(--container-padding) var(--s-8);
		background-color: var(--c-bg);
		transition: left 0.35s ease;
		z-index: var(--z-menu);
	}
	[data-menu-open] .menu__body {
		left: 0;
	}
	.menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.menu__item + .menu__item {
		border-top: 1px solid var(--c-line);
	}
	.menu__link {
		display: block;
		font-size: 20px;
		padding: 14px 0;
	}
	.menu__link::after {
		display: none;
	}
	/* В бургере «Послуги» — такая же строка списка, как остальные, только со
	   стрелкой у правого края. Кнопочный вид (рамка-пилюля) тут не нужен:
	   он рассчитан на горизонтальное меню планшета */
	.menu__link--mega,
	[data-touch] .menu__link--mega {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		min-height: 0;
		padding: 14px 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		font-size: 20px;
	}
	[data-touch] [data-mega-open] .menu__link--mega {
		background-color: transparent;
	}
	.menu__chevron {
		width: 22px;
		height: 22px;
	}
	.menu__foot {
		display: flex;
		flex-direction: column;
		gap: var(--s-3);
		margin-top: auto;
	}
	.menu__messengers {
		display: flex;
		gap: var(--s-2);
	}
	.menu__messengers .button {
		flex: 1 1 50%;
		min-width: 0;
	}
	.menu__info {
		display: flex;
		flex-direction: column;
		gap: var(--s-2);
		padding-top: var(--s-4);
		border-top: 1px solid var(--c-line);
		font-size: 13px;
		color: var(--c-text-2);
		line-height: 1.45;
	}
	.menu__info p {
		display: flex;
		align-items: flex-start;
		gap: var(--s-2);
	}
	.menu__info .icon {
		color: var(--c-brand-2);
		margin-top: 1px;
	}

}
/* блок под меню нужен только в мобильной панели */
@media (min-width: 62em) {
	.menu__foot {
		display: none;
	}
}

@media (max-width: 47.99875em) { /* < 768px */
	/* верхнюю строку не прячем: иначе шапка меняет высоту при открытии меню
	   и кнопка закрытия уезжает из-под пальца */
	.header__topline-inner {
		min-height: 34px;
	}
	/* нижняя панель действий дублировала бы кнопки открытого меню и перекрывала его */
	[data-menu-open] .mobile-bar {
		display: none;
	}
	.hero__facts {
		grid-template-columns: minmax(0, 1fr);
	}
	.services__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.benefits__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.reviews__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gallery__item--wide {
		grid-column: span 2;
	}
	.gallery__item--tall {
		grid-row: span 1;
	}
	.gallery__item--tall img {
		aspect-ratio: 4 / 3;
	}
	.dir__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.dir__foot {
		flex-direction: column;
		align-items: flex-start;
	}
	.dir__actions .button {
		flex: 1 1 auto;
	}
	.section-head {
		flex-direction: column;
		align-items: flex-start;
	}
	/* всё в одну колонку; логотип и мессенджеры — по краям одной строки */
	.footer__cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
		padding: var(--s-6) 0;
	}
	.footer__brand {
		flex-wrap: wrap;
		padding: var(--s-6) 0;
	}
	.footer__about {
		flex-basis: 100%;
	}
	.footer__col--services {
		grid-column: auto;
	}
	.footer__col--services .footer__list--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta__container {
		flex-direction: column;
		align-items: flex-start;
	}
	.button {
		min-height: 50px;
	}
	.mobile-bar {
		display: flex;
	}
	/* место под фиксированную панель, чтобы она не перекрывала низ страницы.
	   Высоту панели меряет JS: в неё входит env(safe-area-inset-bottom),
	   и на телефонах с вырезом подобранного на глаз числа не хватало */
	.footer__bottom {
		padding-bottom: calc(var(--s-5) + var(--bar-h));
	}
}

@media (max-width: 29.99875em) { /* < 480px */
	/* Заголовки не рвём посередине слова, а длинные украинские слова
	   («автокондиціонерів») в 34px не влезают в 320px и уходят за экран.
	   Ниже 480px сбавляем кегль h1; на самой границе размер совпадает
	   со значением --fs-h1, поэтому скачка на брейкпоинте нет */
	.title--h1 {
		font-size: clamp(30px, 17.2px + 4vw, 36.4px);
	}
	/* на узком экране названия услуг в две колонки переносятся по слогам */
	.footer__col--services .footer__list--2col {
		grid-template-columns: minmax(0, 1fr);
	}
	.process__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.numbers__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--s-6);
	}
	.number {
		padding-left: 0;
		border-left: 0;
	}
	.gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.gallery__item--wide {
		grid-column: span 1;
	}
	.hero__actions .button,
	.cta__actions .button,
	.page-hero__actions .button {
		width: 100%;
	}
	.rating-card__value {
		font-size: 52px;
	}
	/* на узких экранах в шапке остаётся телефон, CTA живёт в первом экране */
	.header__actions {
		gap: var(--s-3);
	}
	.header__actions .button {
		display: none;
	}
	.header__body {
		gap: var(--s-3);
	}
	.logo {
		padding: 6px 9px;
	}
}