/* стили главной, шапки и футера */

/* ===== шрифт Roboto: свои файлы вместо Google Fonts =====
   вариативный woff2 (одна начертательная ось 100–900) — по файлу на подмножество,
   поэтому все веса берутся из трёх файлов. Критичные (cyrillic, latin) — в preload. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/source/fonts/roboto-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/source/fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* латиница-расширенная нужна ради знака рубля (U+20BD) */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/source/fonts/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== дизайн-система (палитра/шрифты взяты с safelychange.ru) ===== */
:root {
	--color-bg: #ffffff;               /* карточки/поверхности */
	--color-bg-page: #f5f8fa;          /* фон страницы (как у референса) */
	--color-bg-alt: #eaf1f6;           /* чередующиеся секции — чуть глубже фона */
	--color-bg-dark: #102037;          /* тёмный navy (как у референса) */
	--color-text: #102037;
	--color-text-muted: #5c6b7a;
	--color-text-on-dark: #e7edf3;
	--color-primary: #2f9e44;
	--color-primary-dark: #237a35;
	--color-accent: #81b76a;           /* яркий зелёный референса */
	--color-accent-dark: #5b918b;      /* тил — переход к синему (фон/градиенты) */
	--color-accent-text: #46756f;      /* тот же тил, затемнён до контраста 4.5:1 */
	--color-blue: #4880b0;             /* стальной синий референса */
	--color-blue-dark: #36699a;        /* он же затемнён: текст на светлом и плашки со светлым текстом */
	--color-link: #2c62c4;             /* ссылочный синий (затемнён до 4.5:1 на светлом) */
	--color-brand: #124b37;            /* зелёный логотипа — для пунктов меню */
	--color-border: #e1e8ef;
	--color-danger: #eb4d4d;

	/* фирменный зелёно-синий градиент — для героя и акцентных блоков */
	--gradient-brand: linear-gradient(135deg, #81b76a 0%, #5b918b 55%, #4880b0 100%);
	--gradient-accent: linear-gradient(135deg, #81b76a 0%, #5b918b 100%);
	--gradient-primary: linear-gradient(135deg, #5aa85f 0%, #4880b0 100%);

	--font-family: "Roboto", Arial, Helvetica, sans-serif;

	--container-width: 1200px;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 8px 24px rgba(11, 32, 57, 0.08);
	--shadow-hover: 0 12px 32px rgba(11, 32, 57, 0.14);
}

/* ===== сброс ===== */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* отступ якорей под липкую шапку (шапка 84px + воздух); точную доводку
	   делает js в main.js — это запас на случай отключённого js */
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	font-family: var(--font-family);
	color: var(--color-text);
	background: var(--color-bg-page);
	line-height: 1.5;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, p {
	margin: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.section {
	padding: 64px 0;
}

.section--alt {
	background: var(--color-bg-alt);
}

/* Нижние секции без слайдеров и анимаций: браузер верстает их только когда
   они подходят к экрану. Запасная высота — чтобы полоса прокрутки не прыгала.
   На секции с каруселями не вешать: скрипты меряют ширину и получат нули.
   На список городов тоже: пока секция свёрнута, её ссылки по координатам
   налезают на подвал, и проверка размера тач-целей падает на ровном месте */
.section--cv {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.section__title {
	font-size: 34px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 40px;
	letter-spacing: 0.3px;
}

/* ===== кнопки ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	border: none;
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.btn--primary {
	background: var(--gradient-primary);
	color: #fff;
}

.btn--primary:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
}

.btn--accent {
	background: var(--gradient-accent);
	color: #fff;
}

.btn--accent:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
}

.btn--outline {
	background: transparent;
	color: var(--color-primary-dark);
	border: 1px solid var(--color-primary-dark);
}

.btn--outline:hover {
	background: var(--color-primary-dark);
	color: #fff;
}

.btn--sm {
	padding: 10px 18px;
	font-size: 13px;
}

.btn--block {
	width: 100%;
}

/* ===== шапка ===== */
.header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.header__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	height: 84px;
}

/* лого: слева знак, справа колонка «название + город» */
.header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	/* усы жука торчат выше кольца, поэтому оптический центр знака ниже
	   геометрического — на столько же опускаем правую колонку */
	--logo-nudge: 5px;
}

/* знак крупнее надписи — он и держит высоту блока */
.header__logo-mark {
	display: block;
	height: 56px;
	width: auto;
}

.header__logo-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	transform: translateY(var(--logo-nudge));
}

.header__logo-name {
	display: block;
	height: 22px;
	width: auto;
}

/* городская подпись под названием: меняется вместе с поддоменом */
.header__logo-city {
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--color-brand);
	white-space: nowrap;
}

/* меню занимает центр, ссылки по центру строки */
.nav {
	flex: 1;
}

.nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

/* пункты меню: зелёные, жирные, капсом (как у донора) */
.nav__link,
.nav__toggle {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--color-brand);
	white-space: nowrap;
	padding: 8px 0;
}

.nav__link:hover,
.nav__toggle:hover {
	color: var(--color-primary-dark);
}

/* якорь подменю — вся шапка (см. .header__row), чтобы широкая панель не выезжала за край */
.nav__item--dropdown {
	position: static;
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	font-family: inherit;
}

.nav__toggle-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.nav__item--dropdown.is-open .nav__toggle-arrow {
	transform: rotate(-135deg);
}

.nav__submenu {
	display: none;
	position: absolute;
	top: 84px;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 100%;
	background: var(--color-bg-dark);
	border-radius: var(--radius-sm);
	padding: 20px;
	box-shadow: var(--shadow-hover);
	grid-template-columns: repeat(4, minmax(180px, 1fr));
	gap: 8px 20px;
	text-align: left;
}

.nav__item--dropdown.is-open .nav__submenu {
	display: grid;
}

/* заголовок колонки — подпись, не ссылка: страниц категорий нет */
.nav__group-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--color-primary-dark);
	padding: 4px 10px 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 6px;
}

.nav__submenu-link {
	display: block;
	padding: 8px 10px;
	font-size: 14px;
	color: var(--color-text-on-dark);
	border-radius: 6px;
}

.nav__submenu-link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.header__phones {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	flex-shrink: 0;
}

/* два номера подряд — цели для пальца, разводим их по высоте */
.header__phones a {
	display: block;
	padding: 3px 0;
	min-height: 24px;
}

.header__phones a:hover {
	color: var(--color-primary-dark);
}

/* WhatsApp — зелёный кружок с белой иконкой */
.header__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-primary);
}

.header__wa-icon {
	width: 24px;
	height: 24px;
	fill: #fff;
}

.header__burger {
	display: none;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	background: var(--color-blue);          /* круглая синяя кнопка */
	border-radius: 50%;
	position: relative;
	cursor: pointer;
}

.header__burger span,
.header__burger::before,
.header__burger::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: #fff;                        /* белые палочки */
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.header__burger::before {
	top: 15px;
}

.header__burger span {
	top: 21px;
}

.header__burger::after {
	top: 27px;
}

.header.is-nav-open .header__burger::before {
	transform: translateY(6px) rotate(45deg);
}

.header.is-nav-open .header__burger span {
	opacity: 0;
}

.header.is-nav-open .header__burger::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ===== герой ===== */
.hero {
	padding: 40px 0 44px;
	background: var(--color-bg);
}

/* заголовок на всю ширину */
.hero__title {
	font-size: 40px;
	line-height: 1.12;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 16px;
}

/* акцент-заливка на части заголовка */
.hero__title-mark {
	background: var(--gradient-brand);
	color: #fff;
	padding: 0 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* лид-абзац */
.hero__lead {
	max-width: 1100px;
	font-size: 17px;
	line-height: 1.5;
	margin-bottom: 24px;
}

/* ключевые слова в абзаце — фирменный акцент */
.hero__hl {
	color: var(--color-accent-text);
	font-weight: 600;
}

/* ключевые слова-ссылки в лиде: подчёркивание при наведении */
.hero__hl:hover {
	text-decoration: underline;
}

/* две колонки: контент+форма · рабочий (правая шире под крупную картинку) */
.hero__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 32px;
	align-items: start;      /* картинка тянется от верха, а не по центру */
}

.hero__left {
	max-width: 540px;
}

/* --- чек-лист преимуществ --- */
.hero__checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.hero__check {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* SVG-галочка (квадрат-чекбокс) */
.hero__check-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--color-text);
}

.hero__check-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.hero__check-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

/* маркер-подсветка внутри пункта */
.hero__mark {
	background: var(--color-primary-dark);
	color: #fff;
	padding: 0 6px;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.hero__check-sub {
	margin-top: 4px;
	font-size: 16px;
	color: var(--color-text-muted);
}

/* --- выноска-призыв над формой --- */
.hero__bubble {
	position: relative;
	background: var(--gradient-brand);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	padding: 14px 20px;
	border-radius: var(--radius);
	margin-bottom: 18px;
}

/* хвостик выноски вниз */
.hero__bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 42px;
	border: 12px solid transparent;
	border-top-color: var(--color-accent-dark);
	border-bottom: 0;
}

/* --- форма: поле-телефон (в модалке — те же стили для всех полей) --- */
.hero__form input {
	width: 100%;
	padding: 16px 18px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--color-border);
	margin-bottom: 12px;
	font-size: 16px;
	background: var(--color-bg);
}

.hero__form input:focus {
	outline: none;
	border-color: var(--color-blue);
}

.hero__form-note {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 10px;
}

.hero__form-note a {
	text-decoration: underline;
}

/* --- онлайн-чат: контурные иконки мессенджеров --- */
.hero__chat {
	margin-top: 18px;
}

.hero__chat-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 14px;
}

.hero__messengers {
	display: flex;
	gap: 14px;
}

/* монохромный контурный кружок (как на скрине) */
.msg-line {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid var(--color-text);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.msg-line:hover {
	color: var(--color-blue);
	border-color: var(--color-blue);
	transform: translateY(-2px);
}

.msg-line svg {
	width: 24px;
	height: 24px;
}

/* --- правая колонка: рабочий + плашка цены --- */
/* квадрат: все геро-картинки нормализованы под холст 800×800 с кругом по центру,
   поэтому плашка цены всегда встаёт в одну точку относительно круга */
.hero__figure {
	position: relative;
	width: 100%;
	max-width: 700px;         /* крупнее — закрывает воздух справа */
	margin-left: auto;        /* прижимаем к правому краю */
	margin-top: -24px;        /* чуть поднимаем, чтобы верх шёл вровень с текстом */
	aspect-ratio: 1;
}

.hero__worker {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* плашка цены поверх нижней части рабочего.
   позиция и размер — в долях квадрата, поэтому на любой ширине лежит
   на круге одинаково; 96px — нижний предел, чтобы текст не мельчал */
.hero__price {
	position: absolute;
	right: 1.4%;
	bottom: 14%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: max(96px, 18.5%);
	height: max(96px, 18.5%);
	background: var(--gradient-brand);
	color: #fff;
	border-radius: 18px;
	box-shadow: var(--shadow);
	line-height: 1;
}

.hero__price-top {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

.hero__price-num {
	font-size: 34px;
	font-weight: 800;
}

.hero__price-cur {
	font-size: 18px;
	font-weight: 700;
	vertical-align: super;
}

.hero__price-bottom {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ===== бегущая строка ===== */
.marquee {
	background: var(--color-bg-dark);
	color: var(--color-text-on-dark);
	overflow: hidden;
	padding: 13px 0;
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: 22px;
	white-space: nowrap;
	width: max-content;
	animation: marquee 45s linear infinite;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.marquee__sep {
	color: var(--color-accent);
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ===== порядок обработки ===== */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* карточек нет — выкладка как у донора: кружок-обводка · линия · заголовок · текст */
.step {
	position: relative;
}

/* кружок-обводка: зелёное кольцо, синяя цифра (акцент вместо оранжевого донора) */
.step__num {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--color-primary);
	background: var(--color-bg-page);
	color: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 22px;
}

/* горизонтальная линия-«полоска» до следующего этапа (у последнего нет) */
.step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 21px;          /* центр кружка (44/2) */
	left: 52px;         /* сразу за кружком */
	right: -16px;       /* дотянуть через gap до следующего кружка */
	height: 2px;
	background: var(--color-primary);
}

.step__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--color-primary-dark);
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}

.step__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* ===== объекты обслуживания ===== */
.objects {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.objects__item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 18px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

/* ===== методы обработки ===== */
.methods {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.method-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 24px;
}

.method-card__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--color-primary-dark);
}

.method-card__text {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* ===== сертификаты: карусель сканов ===== */
.certs__carousel {
	position: relative;
}

.certs__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.certs__track::-webkit-scrollbar {
	display: none;
}

/* карточка — портретный скан, 4 в ряд на десктопе (см. адаптив на 2 и 1) */
.cert-card {
	position: relative;
	flex: 0 0 calc((100% - 60px) / 4);
	scroll-snap-align: start;
	aspect-ratio: 7 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	padding: 0;
	display: block;
	cursor: pointer;
}

.cert-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* лупа поверх карточки — подсказка «кликни, увеличится» */
.cert-card__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 32, 55, 0);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.cert-card__zoom svg {
	width: 32px;
	height: 32px;
}

.js-cert-open:hover .cert-card__zoom {
	opacity: 1;
	background: rgba(16, 32, 55, 0.35);
}

/* ===== страница контактов ===== */
/* компоновка донора: форма слева, тёмная карточка с контактами справа.
   У донора карточка чёрная с жёлтыми уголками — у нас фирменный navy с градиентной подложкой */
.contacts__title {
	text-transform: uppercase;
}

.contacts-cta__form input,
.contacts-cta__form textarea {
	width: 100%;
	margin-bottom: 12px;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--color-text);
}

.contacts-cta__form textarea {
	resize: vertical;
	min-height: 96px;
}

/* карточка контактов */
.contacts__card {
	position: relative;
	background: var(--color-bg-dark);
	border-radius: 20px;
	padding: 36px 40px;
	color: var(--color-text-on-dark);
}

/* уголок-акцент вместо жёлтой штриховки донора */
.contacts__card::before {
	content: "";
	position: absolute;
	right: -12px;
	bottom: -12px;
	width: 92px;
	height: 92px;
	border-radius: 16px;
	background: var(--gradient-brand);
	z-index: -1;
}

.contacts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contacts__item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
}

.contacts__item + .contacts__item {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contacts__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contacts__icon svg {
	width: 22px;
	height: 22px;
	color: #fff;
}

.contacts__value {
	align-self: center;
	font-size: 17px;
	line-height: 1.45;
	min-width: 0;
	word-break: break-word;
}

.contacts__value a {
	color: #fff;
	text-decoration: none;
}

.contacts__value a:hover {
	text-decoration: underline;
}

/* мелкая подпись над адресом — как у донора */
.contacts__label {
	display: block;
	font-size: 13px;
	color: rgba(231, 237, 243, 0.65);
}

/* надзаголовок над картой */
.contacts__eyebrow {
	margin-bottom: 8px;
	text-align: center;
	font-size: 14px;
	font-style: italic;
	color: var(--color-text-muted);
}

.contacts__map {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--color-bg);
	/* карта тянется по ширине, высота — пропорцией, чтобы не резать точку на телефоне */
	aspect-ratio: 21 / 9;
}

.contacts__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/* повторный призыв внизу страницы */
.contacts-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 48px;
	align-items: center;
	background: var(--gradient-brand);
	border-radius: 20px;
	padding: 44px 48px;
	color: #fff;
}

.contacts-cta__title {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
}

.contacts-cta__checks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contacts-cta__checks li {
	position: relative;
	padding-left: 38px;
	margin-bottom: 16px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.contacts-cta__checks li:last-child {
	margin-bottom: 0;
}

/* галочка в квадрате — тот же приём, что в чек-листе героя */
.contacts-cta__checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 5px;
}

.contacts-cta__checks li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.contacts-cta__form {
	background: var(--color-bg);
	border-radius: var(--radius);
	padding: 26px;
	color: var(--color-text);
}

.contacts-cta__form-title {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 800;
}

.contacts-cta__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.contacts-cta__chat {
	margin: 18px 0 12px;
	font-weight: 700;
}

/* ===== лицензия и аттестация сотрудников ===== */
/* компоновка как у донора (номер → заголовок → документ → список гарантий),
   но в наших цветах: жёлтый фон и чёрные плашки заменены фирменным градиентом */
.license__eyebrow {
	margin-bottom: 10px;
	text-align: center;
	font-size: 14px;
	font-style: italic;
	color: var(--color-text-muted);
}

.license__title {
	text-transform: uppercase;
	margin-bottom: 32px;
}

/* документ по центру, на белой карточке — скан обычно светлый, так он не сливается с фоном */
.license__doc {
	max-width: 900px;
	margin: 0 auto;
	padding: 14px;
	background: var(--color-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.license__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

/* заглушка на месте скана: держит пропорции разворота удостоверения */
.license__stub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 5 / 2;
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-page);
	color: var(--color-text-muted);
	text-align: center;
	padding: 20px;
}

.license__stub-icon {
	width: 56px;
	height: 56px;
	color: var(--color-accent-text);
}

.license__stub-text {
	font-size: 15px;
	font-weight: 700;
}

.license__trust {
	max-width: 820px;
	margin: 36px auto 0;
}

/* подзаголовок плашкой — у донора чёрная, у нас фирменный градиент.
   По центру, а не по левому краю как у донора: у нас вся секция центрованная */
.license__subtitle {
	margin: 0 0 22px;
	text-align: center;
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
}

.license__subtitle span {
	background: var(--gradient-brand);
	color: #fff;
	padding: 4px 12px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.license__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.license__item {
	position: relative;
	padding-left: 34px;
	margin-bottom: 16px;
	font-size: 16px;
	line-height: 1.5;
}

.license__item:last-child {
	margin-bottom: 0;
}

/* «плюс» вместо маркера — как у донора, но в фирменном зелёном */
.license__item::before {
	content: "+";
	position: absolute;
	left: 0;
	top: -1px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gradient-accent);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

/* ===== команда: круглые фото внахлёст ===== */
/* каркас как у донора: кружки заходят друг на друга. Вместо ч/б → цвет при наведении
   у нас фото цветные всегда, а при наведении кружок выходит вперёд, чуть увеличивается
   и поворачивается — соседи по очереди в разные стороны. */
.team {
	--team-size: 208px;
	--team-lap: calc(var(--team-size) / 10);   /* насколько кружки заходят друг на друга */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 0 auto;
	/* отрицательный отступ висит на всех элементах, включая первый в строке, — иначе
	   после переноса строка съезжала бы. Padding возвращает ряд на место. */
	padding-left: var(--team-lap);
}

.team__item {
	position: relative;
	flex: 0 0 auto;
	width: var(--team-size);
	margin-left: calc(var(--team-lap) * -1);
	text-align: center;
}

.team__photo {
	width: var(--team-size);
	height: var(--team-size);
	border-radius: 50%;
	overflow: hidden;
	/* кольцо цветом секции — им кружки отделяются друг от друга на нахлёсте */
	box-shadow: 0 0 0 5px var(--color-bg-alt);
	background: var(--color-bg-alt);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	will-change: transform;
}

.team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* наведение: вперёд + увеличение + небольшой поворот. Чётные крутим в другую сторону */
.team__item:hover {
	z-index: 3;
}

.team__item:hover .team__photo,
.team__item:focus-within .team__photo {
	transform: scale(1.08) rotate(3deg);
	box-shadow: 0 0 0 5px var(--color-bg-alt), 0 14px 30px rgba(16, 32, 55, 0.22);
}

.team__item:nth-child(even):hover .team__photo,
.team__item:nth-child(even):focus-within .team__photo {
	transform: scale(1.08) rotate(-3deg);
}

/* поля по бокам — чтобы подписи соседних мастеров не сходились на нахлёсте */
.team__caption {
	margin-top: 14px;
	padding: 0 14px;
	line-height: 1.35;
}

.team__name {
	font-weight: 800;
	font-size: 16px;
}

.team__role {
	font-weight: 700;
	font-size: 14px;
}

.team__exp {
	margin-top: 2px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.team__note {
	max-width: 760px;
	margin: 36px auto 0;
	text-align: center;
	font-size: 16px;
	color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.team__photo {
		transition: none;
	}

	.team__item:hover .team__photo,
	.team__item:focus-within .team__photo,
	.team__item:nth-child(even):hover .team__photo,
	.team__item:nth-child(even):focus-within .team__photo {
		transform: none;
	}
}

/* ===== назначить специалиста / скидка ветеранам ===== */
/* фон с персонажем во всю ширину (жмётся в 15 КБ webp); кроп к верху — воздух над головой, ноги режутся */
.section--specialist {
	background: #d5d8e1 url(/source/img/veterans/bg.webp) center top / cover no-repeat;
}

/* три зоны: текст слева · персонаж по центру (из фона) · форма справа */
.veterans {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 440px;
}

/* --- левая зона --- */
.veterans__text {
	max-width: 290px;
}

.veterans__lead {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-primary-dark);
}

/* крупная «15%» в фирменном градиенте */
.veterans__discount {
	display: block;
	width: 240px;
	max-width: 100%;
	height: auto;
	margin-top: 20px;
}

/* --- правая зона: форма-карточка --- */
.veterans__form {
	flex: none;
	width: 400px;
	max-width: 100%;
	background: #fff;
	border-radius: var(--radius);
	padding: 28px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}

.veterans__form-title {
	text-align: center;
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	margin-bottom: 4px;
}

.veterans__form-sub {
	text-align: center;
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.veterans__form input {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	margin-bottom: 12px;
	font-size: 15px;
}

.veterans__form input:focus {
	outline: none;
	border-color: var(--color-blue);
}

/* мессенджеры цветными кружками над полями */
.veterans__messengers {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 18px;
}

.msg-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msg-circle:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.msg-circle svg {
	width: 26px;
	height: 26px;
}

/* бренд-цвета мессенджеров */
.msg-circle--tg  { background: #29a9eb; }
.msg-circle--max { background: #7c5cff; }
.msg-circle--wa  { background: #25d366; }
.msg-circle--mail { background: var(--color-blue); }
/* ===== отзывы ===== */
.reviews__ratings {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.reviews__rating {
	text-align: center;
	font-size: 13px;
	color: var(--color-text-muted);
}

.reviews__rating strong {
	display: block;
	font-size: 22px;
	color: var(--color-text);
}

/* ===== FAQ ===== */
.faq__list {
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	text-align: left;
	padding: 20px 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}

.faq-item__plus {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	position: relative;
}

.faq-item__plus::before,
.faq-item__plus::after {
	content: "";
	position: absolute;
	background: var(--color-primary);
	transition: transform 0.15s ease;
}

.faq-item__plus::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	transform: translateY(-1px);
}

.faq-item__plus::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-1px);
}

.faq-item.is-open .faq-item__plus::after {
	transform: translateX(-1px) rotate(90deg);
	opacity: 0;
}

/* плавное раскрытие через грид-строку 0fr -> 1fr */
.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	font-size: 14px;
	color: var(--color-text-muted);
}

.faq-item__answer-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 4px;
}

.faq-item__answer-inner::after {
	content: "";
	display: block;
	height: 20px;
}

.faq-item.is-open .faq-item__answer {
	grid-template-rows: 1fr;
}
/* ===== футер (по образцу topol-eco.ru) ===== */
.footer {
	background: var(--color-bg-alt);
	padding: 56px 0 24px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.footer__columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	margin-bottom: 40px;
}

.footer__col-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text);
	margin-bottom: 14px;
}

.footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ссылки подвала — сами по себе цели для пальца: высота с отступами
   доводится до 24px, иначе соседние пункты списка слипаются на телефоне */
.footer__col a {
	color: var(--color-link);
	display: inline-block;
	padding: 2px 0;
	min-height: 24px;
}

.footer__col a:hover {
	color: var(--color-blue);
}

.footer__brand {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	margin-bottom: 24px;
}

.footer__brand-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 4px;
}

.footer__brand-legal {
	font-size: 12px;
	max-width: 420px;
}

.footer__social {
	display: flex;
	gap: 12px;
}

.footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

.footer__social a:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
	font-size: 12px;
}

.footer__bottom a {
	text-decoration: underline;
}

/* ===== SVG-спрайт, кнопка на цветном фоне, статусы форм ===== */
.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* honeypot против спама */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.form-status {
	font-size: 13px;
	margin-top: 8px;
	min-height: 18px;
}

.form-status.is-error {
	color: var(--color-danger);
}

.form-status.is-success {
	color: var(--color-primary-dark);
	font-weight: 600;
}

/* ===== цены: карточки прайса (сетка, данные донора, наш визуал) ===== */
/* ===== слайдер услуг на главной (механика та же, что у сертификатов) ===== */
.srv__carousel {
	position: relative;
}

.srv__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: stretch;
}

.srv__track::-webkit-scrollbar {
	display: none;
}

/* 4 целых карточки в ряд; в адаптиве — 3 / 2 / 1, полукарточек по краям не показываем */
.srv-card {
	flex: 0 0 calc((100% - 60px) / 4);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.srv-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

/* фото-шапка карточки */
.srv-card__img {
	aspect-ratio: 4 / 3;
	background-color: #dbe6ee;
	background-size: cover;
	background-position: center;
}

.srv-card__body {
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* заголовок: категория + подкатегория, зелёный капс (как у донора) */
.srv-card__title {
	text-align: center;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-primary-dark);
	margin-bottom: 16px;
}

.srv-card__title span {
	display: block;
}

/* список цен — тянется, чтобы «от» и кнопки прижались вниз и выровнялись по ряду */
.srv-card__list {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
}

/* строки цен разделяем тонкой линией во всю ширину карточки (минус небольшие поля),
   поэтому отступы даём паддингами, а не gap — иначе линия окажется не по центру */
.srv-card__list li {
	padding: 7px 0;
	margin-inline: -10px;
}

.srv-card__list li:first-child {
	padding-top: 0;
}

.srv-card__list li:last-child {
	padding-bottom: 0;
}

.srv-card__list li + li {
	border-top: 1px solid rgba(72, 128, 176, 0.22);
}

/* итоговое «от N ₽» — нашим синим вместо оранжевого донора */
.srv-card__from {
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	color: var(--color-blue);
	margin-bottom: 16px;
}

/* кнопки в ряд, прижаты к низу; если у карточки нет ссылки — «Заказать» на всю ширину */
.srv-card__actions {
	display: flex;
	gap: 10px;
}

.srv-card__actions .btn {
	flex: 1;
	padding-left: 12px;
	padding-right: 12px;
}

.srv__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* ===== примеры работ: слайдер «до/после» (механика та же, что у услуг) ===== */

/* Секция идёт следом за такой же светлой (отзывы на главной, прайс на странице
   услуги): фон общий, границы не видно, и два отступа подряд читаются как
   пустая полоса над заголовком. Свой верхний ужимаем */
.section--alt + #works {
	padding-top: 12px;
}

.works__carousel {
	position: relative;
}

.works__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: stretch;
}

.works__track::-webkit-scrollbar {
	display: none;
}

/* 2 целые карточки в ряд; на планшете и мобиле — по одной, полукарточек по краям не показываем */
.work-card {
	flex: 0 0 calc((100% - 20px) / 2);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.work-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

/* до | стрелка | после: два квадрата встык, стрелка сидит на стыке */
.work-card__media {
	display: flex;
	align-items: center;
	padding: 16px 16px 0;
}

.work-card__photo {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #dbe6ee;
	margin: 0;
}

/* пример без пары: один кадр во всю ширину. 2:1 — ровно высота квадрата из пары,
   поэтому такие карточки стоят в ряду вровень с обычными */
.work-card__photo--single {
	aspect-ratio: 2 / 1;
}

.work-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* подпись «До»/«После» уголком поверх фото */
.work-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	margin: 0;
	padding: 3px 11px;
	border-radius: 100px;
	background: rgba(16, 32, 55, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* «После» — фирменным зелёным: маркер результата */
.work-card__badge--after {
	left: auto;
	right: 8px;
	background: rgba(47, 158, 68, 0.9);
}

/* стрелка-переход: кружок фирменного градиента с белым шевроном, поверх стыка фото */
.work-card__arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0 -20px;
	z-index: 2;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(11, 32, 57, 0.18);
}

.work-card__arrow svg {
	width: 20px;
	height: 20px;
}

.work-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* описание работы */
.work-card__text {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
	margin-bottom: 16px;
}

/* низ карточки: кнопка слева, год/локация прижаты в правый угол */
.work-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
}

.work-card__meta {
	margin-left: auto;
	font-size: 13px;
	color: var(--color-text-muted);
	text-align: right;
}

.works__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* ===== прайс: подразделы в двух колонках (левая шире) ===== */
.price-table-wrap {
	margin-top: 48px;
}

.price-table__title {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 20px;
}

.price-table {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items: stretch;
}

/* колонка тянется на всю высоту ряда, карточки внутри делят её между собой */
.price-table__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.price-table__card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 4px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
}

.price-table__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}

.price-table__row:last-child {
	border-bottom: none;
}

.price-table__name {
	font-size: 15px;
}

.price-table__value {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* шапка подраздела — только название, цены справа нет */
.price-table__row--head .price-table__name {
	font-weight: 800;
}

/* ===== типы объектов: иконка + подпись ===== */
.objects__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 16px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.objects__item:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.objects__icon {
	width: 46px;
	height: 46px;
	color: var(--color-primary);
}

/* ===== отзывы: карусель ===== */
.reviews__carousel {
	position: relative;
}

.reviews__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.reviews__track::-webkit-scrollbar {
	display: none;
}

.review-card {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	color: var(--color-text);
}

.review-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.review-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0;
}

.review-card__name {
	font-weight: 700;
	font-size: 15px;
}

.review-card__date {
	font-size: 12px;
	color: var(--color-text-muted);
}

.review-card__stars {
	color: #f5a623;
	font-size: 15px;
	letter-spacing: 2px;
}

.review-card__text {
	font-size: 14px;
	color: var(--color-text-muted);
	line-height: 1.55;
}

/* скрин отзыва вместо текста: показываем верх скриншота во всю ширину карточки,
   низ уводим в градиент. Полный размер открывается по клику в лайтбоксе. */
.review-card__shots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	align-items: flex-start;
}

.review-card__shot {
	position: relative;
	/* небольшая вертикальная плитка: во всю ширину карточки скрин слишком растягивал блок,
	   а соседние текстовые карточки тянулись за ним и пустовали */
	flex: 0 0 auto;
	width: 200px;
	height: 240px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-page);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* какую часть скрина показывать в превью: у части из них сверху переписка,
	   а сам отзыв ниже. В лайтбокс при этом уходит картинка целиком */
	object-position: center var(--shot-pos, top);
}

/* растворяем нижний край, чтобы обрезка не выглядела случайной */
.review-card__shot--img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 88px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

/* подсказка «увеличить» — тот же приём, что на карточках сертификатов */
.review-card__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(16, 32, 55, 0.82);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.review-card__zoom svg {
	width: 14px;
	height: 14px;
}

/* увеличение при наведении — только там, где есть настоящий курсор */
@media (hover: hover) {
	button.review-card__shot {
		cursor: pointer;
	}

	button.review-card__shot:hover,
	button.review-card__shot:focus-visible {
		transform: scale(1.03);
		box-shadow: var(--shadow-hover);
	}
}

/* заглушка до получения скринов */
.review-card__shot--stub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-style: dashed;
	color: var(--color-text-muted);
	opacity: 0.7;
	text-align: center;
	padding: 16px;
	font-size: 13px;
}

.review-card__shot--stub svg {
	width: 30px;
	height: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.review-card__shot {
		transition: none;
	}

	button.review-card__shot:hover,
	button.review-card__shot:focus-visible {
		transform: none;
	}
}

.reviews__nav,
.certs__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.reviews__btn,
.certs__btn,
.works__btn,
.srv__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.reviews__btn:hover,
.certs__btn:hover,
.works__btn:hover,
.srv__btn:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ===== футер: соцсети и оплата раздельно ===== */
.footer__order {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.footer__pay {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.pay-icon {
	width: 52px;
	height: 26px;
}

.pay-icon--mc {
	width: 40px;
}

.footer__socials {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 0;
	border-top: 1px solid var(--color-border);
	margin-bottom: 4px;
}

.footer__socials .footer__col-title {
	margin: 0;
}

.footer__social svg {
	width: 18px;
	height: 18px;
}

/* ===== зона обслуживания: карта + текст с CTA ===== */
/* белый фон секции, чтобы белый фон карты не давал видимой рамки */
#coverage {
	background: var(--color-bg);
}

.coverage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

/* карта — во всю ширину своей колонки */
.coverage__map {
	width: 100%;
	height: auto;
}

.coverage__body {
	max-width: 520px;
}

/* жирная шапка блока */
.coverage__lead {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 12px;
}

/* строки услуг — обычный вес */
.coverage__note {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}

/* ===== поп-ап заявки (вместо секции #order) ===== */
.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.modal.is-open {
	display: flex;
}

/* затемнение фона */
.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 32, 55, 0.6);
}

/* карточка диалога */
.modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--radius);
	padding: 32px 28px;
	box-shadow: var(--shadow-hover);
}

.modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: var(--color-text-muted);
}

.modal__close:hover {
	color: var(--color-text);
}

.modal__title {
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 20px;
	padding: 0 24px;
}

/* форма внутри модалки — карточку рисует сам диалог, гасим чрому hero__form */
.modal .hero__form {
	border: none;
	box-shadow: none;
	padding: 0;
	background: transparent;
}

/* блокировка прокрутки фона при открытой модалке */
body.modal-open {
	overflow: hidden;
}

/* ===== лайтбокс сертификатов: увеличенный просмотр по клику ===== */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lightbox.is-open {
	display: flex;
}

.lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 32, 55, 0.8);
}

.lightbox__dialog {
	position: relative;
	z-index: 1;
	max-width: 640px;
	max-height: calc(100vh - 40px);
}

.lightbox__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: calc(100vh - 40px);
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: none;
	background: none;
	font-size: 32px;
	line-height: 1;
	color: #fff;
}

.lightbox__close:hover {
	opacity: 0.8;
}

/* ===== плавающие кнопки: заказать звонок (справа) + наверх (слева) ===== */
.fab {
	position: fixed;
	bottom: 24px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-hover);
	cursor: pointer;
	z-index: 90;              /* ниже шапки (100) и модалки (200) */
}

/* звонок — зелёный кружок справа, лёгкий пульс для внимания */
.fab--call {
	right: 24px;
	background: var(--color-primary);
}

.fab--call svg {
	width: 26px;
	height: 26px;
	fill: #fff;
}

.fab--call::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--color-primary);
	z-index: -1;
	animation: fab-pulse 2s ease-out infinite;
}

@keyframes fab-pulse {
	0%   { transform: scale(1);   opacity: 0.5; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* наверх — тёмный кружок слева, появляется после первого экрана (класс из main.js) */
.fab--top {
	left: 24px;
	background: var(--color-bg-dark);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fab--top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.fab--top svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===== поп-ап «ваш город»: подтверждение определённого города =====
   На ПК висит в правом верхнем углу под шапкой, на мобиле — над кнопкой звонка.
   Показывается из main.js после определения города. */
.geo-ask {
	position: fixed;
	right: 24px;
	top: 100px;               /* sticky-шапка 84 + зазор 16 */
	z-index: 95;              /* выше плавающих кнопок (90), ниже шапки (100) */
	width: 300px;
	max-width: calc(100vw - 32px);
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-hover);
	opacity: 0;
	transform: translateY(-10px);   /* выезжает сверху вниз */
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.geo-ask.is-open {
	opacity: 1;
	transform: none;
}

.geo-ask__text {
	font-size: 16px;
	font-weight: 700;
	padding-right: 20px;      /* место под крестик */
	margin-bottom: 14px;
}

.geo-ask__actions {
	display: flex;
	gap: 10px;
}

.geo-ask__actions .btn {
	flex: 1;
}

.geo-ask__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}

.geo-ask__close:hover {
	color: var(--color-text);
}

/* ===== выбор города: список на весь экран с поиском ===== */
.city-picker {
	position: fixed;
	inset: 0;
	z-index: 210;             /* выше модалки заявки и лайтбокса */
	display: none;
}

.city-picker.is-open {
	display: block;
}

.city-picker__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 32, 55, 0.75);
}

.city-picker__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: calc(100% - 40px);
	max-width: 900px;
	max-height: calc(100vh - 80px);
	margin: 40px auto;
	padding: 28px 32px 24px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-hover);
}

.city-picker__title {
	font-size: 24px;
	font-weight: 800;
	margin: 0 30px 4px 0;
}

.city-picker__note {
	color: var(--color-text-muted);
	font-size: 14px;
	margin-bottom: 16px;
}

.city-picker__search {
	width: 100%;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
}

.city-picker__search:focus {
	outline: none;
	border-color: var(--color-primary);
}

/* список прокручивается внутри окна; колонки — сеткой, чтобы фильтр не ломал раскладку */
.city-picker__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px 20px;
	align-content: start;
}

.city-picker__link {
	display: block;
	padding: 8px 4px;
	font-size: 15px;
	color: var(--color-link);
	border-radius: 6px;
}

.city-picker__link:hover {
	background: var(--color-bg-alt);
}

/* текущий город — не ссылка, а отметка */
.city-picker__current {
	display: block;
	padding: 8px 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.city-picker__empty {
	padding: 12px 4px;
	color: var(--color-text-muted);
}

.city-picker__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}

.city-picker__close:hover {
	color: var(--color-text);
}

/* ===== населённые пункты выезда (список городов) ===== */
.cities__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* раскладка колонками — сами разложатся */
	column-count: 5;
	column-gap: 40px;
}

.cities__city {
	break-inside: avoid;
	padding: 7px 0;
	font-size: 16px;
	color: var(--color-text);
}

/* ссылка на городскую версию сайта — выглядит как обычный пункт списка.
   inline-block с отступами: 80 ссылок подряд должны быть цели не меньше 24px */
.cities__link {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
	display: inline-block;
	padding: 2px 0;
	min-height: 24px;
}

.cities__link:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* акцент на текущем городе (вместо жёлтого донора — фирменный зелёный) */
.cities__city--home {
	font-weight: 700;
	color: var(--color-primary-dark);
}

/* «показать все» — только для свёрнутого списка на узких экранах */
.cities__toggle {
	display: none;
}

/* ===== цифры о компании (счётчики) ===== */
.stats__lead {
	max-width: 1000px;
	margin: -16px auto 44px;
	text-align: center;
	font-size: 17px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.stats__item {
	text-align: center;
}

.stats__num {
	display: block;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--color-text);
	/* цифры не «прыгают» по ширине во время анимации */
	font-variant-numeric: tabular-nums;
}

.stats__cap {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/* уважаем настройку «меньше движения» — гасим пульс */
@media (prefers-reduced-motion: reduce) {
	.fab--call::before {
		animation: none;
	}
}

/* ===== страница услуги: герой (каркас как на главной) ===== */
.hero-srv {
	padding: 40px 0 44px;
	background: var(--color-bg);
}

/* заголовок на всю ширину */
.hero-srv__title {
	font-size: 40px;
	line-height: 1.12;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* две колонки: контент+форма слева · картинка справа (правая шире под крупную картинку) */
.hero-srv__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 32px;
	align-items: start;
}

.hero-srv__left {
	max-width: 540px;
}

/* правая колонка: картинка услуги + плашка цены в углу.
   квадрат и вписывание — как на главной, картинки нормализованы одинаково */
.hero-srv__figure {
	position: relative;
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	aspect-ratio: 1;
}

.hero-srv__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hero-srv__note {
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
	max-width: 520px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.hero-srv__note-star {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--color-text);
}

/* форма-консультация справа */
/* ===== объекты санобработки: слайдер ===== */
/* правила те же, что у слайдера услуг: только целые карточки, без подглядывания */
.gal__carousel {
	position: relative;
}

.gal__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gal__track::-webkit-scrollbar {
	display: none;
}

.gal__item {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
}

.gal__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.gal__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.gal__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	font-size: 22px;
	line-height: 1;
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.gal__btn:hover {
	background: var(--color-blue);
	color: #fff;
	border-color: var(--color-blue);
}

/* ===== страница услуги: основной текст ===== */
/* вводный абзац виден всегда, SEO-текст под кнопкой */
.srv-text {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.65;
}

.srv-text__intro p:first-child {
	margin-top: 0;
}

.srv-text__more {
	position: relative;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}

/* затухание у нижней кромки — подсказка, что текст продолжается */
.srv-text__more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.srv-text__more.is-open::after {
	opacity: 0;
}

.srv-text__toggle {
	display: block;
	margin: 20px auto 0;
	padding: 12px 30px;
	border: 1px solid var(--color-blue-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--color-blue-dark);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	transition: background 0.15s ease, color 0.15s ease;
}

.srv-text__toggle:hover {
	background: var(--color-blue-dark);
	color: #fff;
}

/* картинка слева от текста услуги (если задана); без картинки — текст на всю ширину как раньше */
.srv-about--media {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.srv-about--media .srv-text {
	max-width: none;
	margin: 0;
}

.srv-about__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== страница услуги: цены ===== */
/* одна колонка на всю ширину — подразделов может быть сколько угодно */
.price-table--full {
	grid-template-columns: 1fr;
}

.price-form {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.price-form input[type="tel"] {
	flex: 0 1 340px;
	padding: 15px 18px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.price-form .btn {
	border-radius: 999px;
	padding-left: 34px;
	padding-right: 34px;
}

.price-form .form-status {
	flex: 1 0 100%;
	text-align: center;
}

/* ===== страница услуги: квиз-заявка ===== */
/* все экраны лежат в разметке сразу, показывает по одному JS (.is-active).
   кнопка донора тёмно-зелёная — у нас фирменный градиент через .btn--primary */
.quiz {
	max-width: 1000px;
	margin: 0 auto;
	background: var(--color-bg-alt);
	border-radius: 20px;
	padding: 32px;
}

/* в потоке только активный экран — высота блока идёт по его контенту,
   иначе короткий первый шаг тянется под самый длинный */
.quiz__step {
	display: none;
}

.quiz__step.is-active {
	display: block;
}

.quiz__question {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 20px;
}

.quiz__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* вариант — белая плашка на всю ширину, кликается целиком */
.quiz__option {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quiz__option:hover {
	border-color: var(--color-primary);
}

/* нативный кружок/квадрат прячем, рисуем свой в .quiz__mark */
.quiz__option input,
.quiz__consent input,
.quiz__contact input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.quiz__mark {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	transition: background 0.15s ease;
}

/* множественный выбор — квадрат со скруглением */
.quiz__mark--box {
	border-radius: 6px;
}

/* точка внутри кружка / галочка внутри квадрата */
.quiz__mark::after {
	content: "";
	position: absolute;
	opacity: 0;
	transition: opacity 0.15s ease;
	inset: 3px;
	border-radius: 50%;
	background: var(--color-primary);
}

.quiz__mark--box::after {
	inset: 0;
	border-radius: 0;
	background: none;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	width: 6px;
	height: 11px;
	margin: 3px auto 0;
	transform: rotate(45deg);
}

.quiz__option input:checked ~ .quiz__mark::after,
.quiz__consent input:checked ~ .quiz__mark::after {
	opacity: 1;
}

.quiz__mark--box {
	overflow: hidden;
}

.quiz__option input:checked ~ .quiz__mark--box,
.quiz__consent input:checked ~ .quiz__mark--box {
	background: var(--color-primary);
}

/* выбранный вариант подсвечиваем рамкой — видно без взгляда на кружок */
.quiz__option:has(input:checked) {
	border-color: var(--color-primary);
	box-shadow: var(--shadow);
}

.quiz__option-text {
	font-size: 16px;
}

/* --- финальный экран: слева заголовок, справа форма --- */
.quiz__final {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.quiz__final-title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.25;
}

.quiz__field-label {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}

.quiz__final-form input[type="tel"] {
	width: 100%;
	padding: 15px 18px;
	margin-bottom: 20px;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.quiz__final-form input[type="tel"]:focus {
	outline: none;
	border-color: var(--color-blue);
}

/* способ связи: кружки-иконки, невыбранные приглушены */
.quiz__contacts {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.quiz__contact {
	cursor: pointer;
}

.quiz__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-text-muted);
	color: #fff;
	transition: background 0.15s ease, transform 0.15s ease;
}

.quiz__contact-icon svg {
	width: 22px;
	height: 22px;
}

.quiz__contact input:checked ~ .quiz__contact-icon {
	background: var(--color-primary);
	transform: scale(1.06);
}

.quiz__submit {
	width: 100%;
	border-radius: 999px;
	margin-bottom: 16px;
}

.quiz__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text-muted);
}

.quiz__consent .quiz__mark {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.quiz__consent-text a {
	text-decoration: underline;
}

/* --- футер: прогресс + навигация --- */
.quiz__footer {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
}

.quiz__progress {
	flex: 1;
	min-width: 0;
}

.quiz__progress-text {
	font-size: 15px;
	margin-bottom: 8px;
}

.quiz__progress-text strong {
	color: var(--color-primary-dark);
}

.quiz__bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #d9dfe4;
	overflow: hidden;
}

.quiz__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--gradient-accent);
	transition: width 0.3s ease;
}

.quiz__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

/* «Назад» на первом экране скрыта, место под неё не держим */
.quiz__back {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	transition: background 0.15s ease, color 0.15s ease;
}

.quiz__back.is-visible {
	display: flex;
}

.quiz__back:hover {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.quiz__back svg {
	width: 20px;
	height: 20px;
}

.quiz__next {
	border-radius: 999px;
	text-transform: uppercase;
}

.quiz__next svg {
	width: 18px;
	height: 18px;
}

/* пока ничего не выбрано — дальше не пускаем */
.quiz__next:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* на финале «Далее» не нужна — отправляет кнопка внутри формы */
.quiz__next.is-hidden {
	display: none;
}

/* ===== страница 404 ===== */
.e404 {
	min-height: 100vh;
	display: flex;
	align-items: center;
	text-align: center;
	background: var(--gradient-brand);
	color: #fff;
}

.e404__code {
	font-size: clamp(80px, 18vw, 180px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.e404__title {
	margin: 16px 0 8px;
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 700;
}

.e404__text {
	margin: 0 0 28px;
	opacity: 0.9;
}

/* на градиенте акцентная кнопка сливается — делаем её белой */
.e404 .btn--accent {
	background: #fff;
	color: var(--color-text);
}

.e404 .btn--accent:hover {
	background: var(--color-bg-alt);
	color: var(--color-text);
}

/* ===== правовые страницы (политика конфиденциальности) ===== */
.legal {
	max-width: 900px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.7;
}

.legal__date {
	margin-bottom: 28px;
	color: var(--color-text-muted);
	font-size: 14px;
}

.legal h2 {
	margin: 32px 0 12px;
	font-size: 20px;
	font-weight: 800;
	color: var(--color-primary-dark);
}

.legal p {
	margin-bottom: 12px;
}

/* маркеры возвращаем: глобальный сброс списков их снимает */
.legal ul {
	margin-bottom: 12px;
	padding-left: 22px;
	list-style: disc;
}

.legal li {
	margin-bottom: 8px;
}

/* реквизиты оператора — выделенной карточкой */
.legal__meta {
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
}

.legal__meta p:last-child {
	margin-bottom: 0;
}

.legal a {
	color: var(--color-link);
	text-decoration: underline;
}

/* ===== адаптив ===== */

/* --- шапка: 6 пунктов меню, полное меню только когда есть место; ниже — бургер (≤1200) --- */
@media (max-width: 1200px) {
	/* всё те же 6 в ряд, просто кружки меньше */
	.team {
		--team-size: 176px;
	}

	.header__burger {
		display: block;
	}

	.nav {
		display: none;
		position: fixed;
		inset: 84px 0 0 0;
		background: var(--color-bg-dark);
		padding: 20px;
		overflow-y: auto;
	}

	.header.is-nav-open .nav {
		display: block;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.nav__link,
	.nav__toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 14px 4px;
		color: var(--color-text-on-dark);
	}

	/* подменю в потоке, плавно раскрывается по max-height; группы друг под другом */
	.nav__submenu,
	.nav__item--dropdown.is-open .nav__submenu {
		display: block;
		position: static;
		transform: none;
		box-shadow: none;
		width: auto;
		max-width: none;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 6px;
		padding: 0 12px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease, padding 0.4s ease;
	}

	.nav__item--dropdown.is-open .nav__submenu {
		max-height: 2000px;
		padding: 8px 12px;
	}

	.nav__group + .nav__group {
		margin-top: 12px;
	}

	/* слайдер услуг: 3 целые карточки */
	.srv-card {
		flex-basis: calc((100% - 40px) / 3);
	}

	/* телефоны по центру между лого и бургером */
	.header__phones {
		flex: 1;
		align-items: center;
	}

	/* whatsapp-кружок прячем — вход через бургер */
	.header__wa {
		display: none;
	}
}

/* --- планшет: раскладка контента в один-два столбца --- */
@media (max-width: 1024px) {
	.contacts__card {
		padding: 28px 24px;
	}

	.contacts-cta__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 32px 28px;
	}

	.contacts-cta__title {
		font-size: 26px;
	}

	.contacts__map {
		aspect-ratio: 16 / 10;
	}

	/* команда: 3 в ряд. Ширину задаём точно под три кружка, иначе на промежуточных
	   размерах экрана в ряд вставало бы то 3, то 4. */
	.team {
		--team-size: 250px;
		max-width: calc(var(--team-size) * 2.8);
	}

	/* города: 5 → 3 колонки */
	.cities__list {
		column-count: 3;
	}

	/* выбор города: 4 → 3 колонки */
	.city-picker__list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* герой в одну колонку: рабочий сверху, контент+форма ниже */
	.hero__cols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* левую колонку центрируем и ограничиваем по ширине */
	.hero__left {
		order: 2;
		max-width: 540px;
		margin: 0 auto;
		width: 100%;
	}

	.hero__right {
		order: 1;
	}

	/* рабочий по центру */
	.hero__figure {
		margin: 0 auto;
		max-width: 460px;
	}

	/* число в плашке мельче: сама плашка на планшете уже минимальные 96px */
	.hero__price-num {
		font-size: 30px;
	}

	/* блок специалиста: сквозной фон не работает в столбик, поэтому персонажа
	   вырезаем из того же файла и ставим рядом со скидкой — палец смотрит на «15%».
	   Цвет секции = подложка фотостудии, поэтому границы кадра не видно. */
	.section--specialist {
		background: #d7dae3;
	}

	/* блок скидки: колонка по центру экрана */
	.veterans {
		flex-direction: column;
		align-items: center;
		min-height: 0;
	}

	/* текст скидки — по центру, с комфортной шириной */
	.veterans__text {
		max-width: 640px;
		text-align: center;
	}

	/* строка «цифры + персонаж» */
	.veterans__figure {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		max-width: 440px;
		margin: 0 auto;
	}

	.veterans__discount {
		flex: none;
		width: 56%;
		margin: 0;
	}

	/* кадр из фонового фото: человек от головы до колен, низ растворяется в фоне.
	   Проценты подобраны под область 640..1165 × 60..740 исходника 1834×858. */
	.veterans__figure::after {
		content: "";
		flex: none;
		width: 44%;
		margin-top: 3%;
		aspect-ratio: 525 / 680;
		background: url(/source/img/veterans/bg.webp) no-repeat 48.9% 33.7% / 349.3% auto;
		-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 98%);
		mask-image: linear-gradient(to bottom, #000 60%, transparent 98%);
	}

	/* слайдер услуг: 2 целые карточки */
	.srv-card {
		flex-basis: calc((100% - 20px) / 2);
	}

	/* прайс: колонки друг под другом, высоты больше не выравниваем */
	.price-table {
		grid-template-columns: 1fr;
	}

	.price-table__card {
		flex: none;
	}

	.objects {
		grid-template-columns: repeat(3, 1fr);
	}

	.certs__track .cert-card {
		flex-basis: calc((100% - 20px) / 2);
	}

	.review-card {
		flex-basis: calc((100% - 20px) / 2);
	}

	.review-card__shot {
		width: 220px;
		height: 264px;
	}

	.footer__columns {
		grid-template-columns: repeat(3, 1fr);
	}

	/* герой услуги: одна колонка — картинка сверху, контент+форма ниже */
	.hero-srv__cols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.hero-srv__left {
		order: 2;
		margin: 0 auto;
		width: 100%;
	}

	.hero-srv__right {
		order: 1;
	}

	.hero-srv__figure {
		margin: 0 auto;
		max-width: 460px;
	}

	.hero-srv__title {
		font-size: 28px;
	}

	/* объекты: две карточки в ряд */
	.gal__item {
		flex-basis: calc((100% - 20px) / 2);
	}

	/* примеры работ: по одной карточке на планшете и мобиле */
	.work-card {
		flex-basis: 100%;
	}
}

/* --- крупный телефон / малый планшет --- */
@media (max-width: 768px) {
	.contacts__map {
		aspect-ratio: 4 / 5;
	}

	.contacts-cta__inner {
		padding: 24px 18px;
	}

	.contacts-cta__title {
		font-size: 22px;
	}

	.contacts__item {
		gap: 14px;
	}

	.contacts__value {
		font-size: 16px;
	}

	.license__subtitle {
		font-size: 21px;
	}

	.license__doc {
		padding: 10px;
	}

	/* заглушка вытягивается: на узком экране разворот 5:2 превращается в полоску */
	.license__stub {
		aspect-ratio: 3 / 2;
	}

	/* команда: 2 в ряд */
	.team {
		--team-size: 220px;
		max-width: calc(var(--team-size) * 1.9);
	}

	/* квадратная картинка геро съедает высоту — ужимаем, чтобы форма была ближе */
	.hero__figure,
	.hero-srv__figure {
		max-width: 380px;
	}

	/* города: 3 → 2 колонки, мельче и плотнее — 80 пунктов иначе тянутся на экран.
	   Список обрезан по высоте, column-fill: auto заполняет колонки по порядку. */
	.cities__list {
		position: relative;
		column-count: 2;
		column-gap: 20px;
		column-fill: auto;
		height: 300px;
		overflow: hidden;
	}

	.cities.is-open .cities__list {
		height: auto;
		column-fill: balance;
	}

	.cities__city {
		padding: 3px 0;
		font-size: 14px;
		line-height: 1.35;
	}

	.cities__link {
		padding: 3px 0;
		min-height: 0;
	}

	/* подсказка, что список продолжается: нижняя кромка растворяется */
	.cities__list::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 56px;
		background: linear-gradient(to bottom, rgba(245, 248, 250, 0), var(--color-bg-page));
		pointer-events: none;
	}

	.cities.is-open .cities__list::after {
		display: none;
	}

	.cities__toggle {
		display: block;
		position: relative;
		margin: 16px auto 0;
		padding: 10px 24px;
		border: 1px solid var(--color-blue-dark);
		border-radius: 999px;
		background: transparent;
		color: var(--color-blue-dark);
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
	}

	/* цифры: 4 → 2 в ряд, числа мельче */
	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
	}

	.stats__num {
		font-size: 52px;
	}

	/* лого чуть меньше, телефоны компактнее */
	.header__logo {
		gap: 8px;
		--logo-nudge: 4px;
	}

	.header__logo-mark {
		height: 46px;
	}

	.header__logo-name {
		height: 18px;
	}

	.header__logo-city {
		font-size: 10px;
		letter-spacing: 0.3px;
	}

	/* наверх поп-ап города поднимаем только на ПК — тут он остаётся над кнопкой звонка */
	.geo-ask {
		top: auto;
		bottom: 96px;
		transform: translateY(10px);
	}

	/* выбор города: 3 → 2 колонки, окно ближе к краям */
	.city-picker__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.city-picker__dialog {
		width: calc(100% - 24px);
		max-height: calc(100vh - 40px);
		margin: 20px auto;
		padding: 24px 20px 20px;
	}

	.city-picker__title {
		font-size: 20px;
	}

	.header__phones {
		font-size: 13px;
		line-height: 1.35;
	}

	/* заголовок героя мельче — на планшетах 40px тяжеловат */
	.hero__title {
		font-size: 32px;
	}

	/* слайдер услуг: одна карточка на экран — по две тесно на узких планшетах */
	.srv-card {
		flex-basis: 100%;
	}

	/* шаги и методы в столбик */
	.steps,
	.methods {
		grid-template-columns: 1fr;
	}

	/* этапы в столбик — горизонтальные линии-связки убираем */
	.step:not(:last-child)::after {
		display: none;
	}

	.objects {
		grid-template-columns: repeat(2, 1fr);
	}

	.certs__track .cert-card {
		flex-basis: 100%;
	}

	.review-card {
		flex-basis: 100%;
	}

	/* на телефоне карточка одна в ряду: высоты соседей друг с другом не сравниваются,
	   поэтому не тянем их до самой высокой — пустоты под коротким текстом не будет */
	.reviews__track {
		align-items: flex-start;
	}

	.review-card__shot {
		width: 240px;
		height: 288px;
	}

	.footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer__brand {
		flex-direction: column;
	}

	.footer__order {
		align-items: flex-start;
	}

	/* зона обслуживания: карта сверху, текст с кнопкой ниже */
	.coverage {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* герой услуги: заголовок мельче (колонки уже в одну с 1024) */
	.hero-srv__title {
		font-size: 24px;
	}

	/* текстовый блок услуги: картинка сверху, текст под ней */
	.srv-about--media {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.srv-about__media {
		max-width: 320px;
		margin: 0 auto;
	}

	/* объекты: по одной карточке */
	.gal__item {
		flex-basis: 100%;
	}

	/* цены: поле и кнопка на всю ширину */
	.price-form input[type="tel"],
	.price-form .btn {
		flex: 1 0 100%;
	}

	/* квиз: карточка уже, финал в столбик */
	.quiz {
		padding: 24px 18px;
	}

	.quiz__final {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.quiz__final-title {
		font-size: 21px;
	}

	/* футер: прогресс сверху, кнопки под ним */
	.quiz__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.quiz__nav {
		justify-content: flex-end;
	}
}

/* --- малый телефон --- */
@media (max-width: 480px) {
	.contacts__card {
		padding: 22px 16px;
	}

	.contacts__icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
	}

	.contacts__icon svg {
		width: 19px;
		height: 19px;
	}

	.contacts__value {
		font-size: 15px;
	}

	.license__eyebrow {
		font-size: 13px;
	}

	.license__subtitle {
		font-size: 18px;
	}

	.license__item {
		font-size: 15px;
		padding-left: 30px;
	}

	.team {
		--team-size: 160px;
		max-width: calc(var(--team-size) * 1.9);
	}

	.team__note {
		font-size: 15px;
	}

	/* города: две колонки остаются и на телефоне — иначе список бесконечный.
	   Держим их за счёт шрифта и узкого промежутка. */
	.cities__list {
		column-count: 2;
		column-gap: 14px;
		height: 288px;
	}

	.cities__city {
		padding: 2px 0;
		font-size: 13px;
	}

	.cities__link {
		padding: 2px 0;
	}

	/* длинная цена (с ценой за сотку в скобках) не влезает рядом с названием —
	   уходит на свою строку целиком, короткие остаются в одну строку с названием */
	.price-table__row {
		flex-wrap: wrap;
		gap: 2px 16px;
	}

	.price-table__value {
		margin-left: auto;
	}

	/* цифры: 2 → 1 в ряд */
	.stats__grid {
		grid-template-columns: 1fr;
	}

	.hero__title {
		font-size: 28px;
	}

	.hero__lead {
		font-size: 15px;
	}

	.hero__check-title {
		font-size: 19px;
	}

	/* лого ещё компактнее — рядом с ним стоят телефоны и бургер, на 360px счёт на пиксели */
	.header__row {
		gap: 12px;
	}

	.header__logo {
		gap: 6px;
		--logo-nudge: 3px;
	}

	.header__logo-mark {
		height: 42px;
	}

	.header__logo-name {
		height: 16px;
	}

	.hero__figure,
	.hero-srv__figure {
		max-width: 320px;
	}

	.hero__price-num {
		font-size: 28px;
	}

	.objects {
		grid-template-columns: 1fr;
	}

	.footer__columns {
		grid-template-columns: 1fr;
	}

	.section__title {
		font-size: 26px;
	}

	/* плавающие кнопки компактнее и ближе к краям */
	.fab {
		width: 50px;
		height: 50px;
		bottom: 16px;
	}

	.fab--call {
		right: 16px;
	}

	.fab--top {
		left: 16px;
	}

	/* поп-ап города — во всю ширину над плавающими кнопками (50 + 16 + 12), как было */
	.geo-ask {
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 78px;
		width: auto;
		max-width: none;
		transform: translateY(10px);   /* снизу вверх */
	}

	/* выбор города — во весь экран, окно без полей */
	.city-picker__dialog {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: 100%;
		margin: 0;
		border-radius: 0;
		padding: 20px 16px 16px;
	}

	.hero-srv__title {
		font-size: 21px;
	}

	.quiz__question {
		font-size: 17px;
	}

	.quiz__option {
		padding: 14px 16px;
		gap: 12px;
	}

	.quiz__option-text {
		font-size: 14px;
	}
}

/* ===== медиа: закрываем простое сохранение =====
   Просьба заказчика: не давать утащить картинки правым кликом, перетаскиванием
   на рабочий стол и долгим нажатием на телефоне. От выгрузки через код страницы
   и от скриншота это не спасает — файл всё равно попадает в кэш браузера. */
img,
picture,
video {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Правовые страницы используют общую шапку и подвал сайта. */
.legal-page{background:var(--color-bg-page)}
.legal-page__hero{padding:56px 0 60px;background:linear-gradient(135deg,#e9f4e9 0%,#edf4f7 62%,#f5f8fa 100%);border-bottom:1px solid var(--color-border)}
.legal-page__back{display:inline-block;margin-bottom:28px;color:var(--color-link);font-weight:700}
.legal-page__eyebrow{color:var(--color-brand);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.legal-page__hero .section__title{margin:0 0 16px;max-width:900px}
.legal-page__hero p{margin:0;color:var(--color-text-muted);font-size:17px}
.legal-page__section{padding-top:42px;padding-bottom:74px}
.legal-page__grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:start}
.legal-page__card{max-width:none;margin:0;padding:34px 42px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow)}
.legal-page__card h2:first-child{margin-top:0}
.legal-page__aside{position:sticky;top:104px;padding:24px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow)}
.legal-page__aside-title{font-weight:800;color:var(--color-brand);margin-bottom:13px}
.legal-page__aside nav{display:grid;gap:5px}
.legal-page__aside a{display:block;padding:10px 12px;border-radius:8px;color:var(--color-text-muted);font-size:14px;line-height:1.35}
.legal-page__aside a:hover,.legal-page__aside a[aria-current=page]{color:var(--color-brand);background:#edf6ee}
@media(max-width:900px){.legal-page__grid{grid-template-columns:1fr}.legal-page__aside{position:static;order:-1}.legal-page__aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.legal-page__hero{padding:34px 0 42px}.legal-page__card{padding:24px 20px}.legal-page__aside nav{grid-template-columns:1fr}.legal-page__section{padding-top:24px}}

.geo-city-tip{position:fixed;z-index:1200;top:16px;left:50%;width:min(430px,calc(100% - 20px));display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #cce6d2;border-radius:18px;background:linear-gradient(135deg,#f3fbf4,#fff);box-shadow:0 14px 36px rgba(24,73,40,.18);opacity:0;visibility:hidden;transform:translate(-50%,-12px);transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s}
.geo-city-tip.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .32s ease,transform .32s ease,visibility 0s}
.geo-city-tip__icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:var(--color-primary);color:#fff;box-shadow:0 5px 13px rgba(20,105,40,.25)}
.geo-city-tip__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.geo-city-tip__copy{display:grid;flex:1;gap:1px;min-width:0;line-height:1.25}.geo-city-tip__copy strong{font-size:14px;color:var(--color-text)}.geo-city-tip__copy small{font-size:11px;color:var(--color-text-muted)}
.geo-city-tip__link{color:var(--color-link);font-size:13px;font-weight:800;white-space:nowrap}.geo-city-tip button{border:0;background:none;color:var(--color-text-muted);font-size:22px;line-height:1;cursor:pointer}
@media(max-width:380px){.geo-city-tip{gap:7px;padding:9px}.geo-city-tip__icon{flex-basis:38px;width:38px;height:38px}.geo-city-tip__copy small{display:none}.geo-city-tip__link{font-size:12px}}
@media(prefers-reduced-motion:reduce){.geo-city-tip,.geo-city-tip.is-visible{transition:none}}

/* Keep both city prompts directly below the sticky 84px header. */
.geo-ask{top:94px;right:16px;left:auto;bottom:auto;width:min(320px,calc(100% - 32px));max-width:none;padding:18px;border-radius:16px;transform:translateY(-10px)}
.geo-ask__text{padding-right:24px;margin-bottom:14px;line-height:1.35}
.geo-ask__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.geo-ask__actions .btn{width:100%;min-width:0}
.geo-ask__close{top:12px;right:12px}
.geo-city-tip{top:94px;right:16px;left:auto;width:min(320px,calc(100% - 32px));transform:translateY(-12px)}
.geo-city-tip.is-visible{transform:translateY(0)}
@media(max-width:480px){.geo-ask,.geo-city-tip{right:12px;width:min(320px,calc(100% - 24px))}}
@media(max-width:380px){
  .geo-city-tip{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px 9px;align-items:center;padding:10px 12px}
  .geo-city-tip__icon{grid-column:1;grid-row:1/3}
  .geo-city-tip__copy{grid-column:2;grid-row:1;padding-right:20px}
  .geo-city-tip__copy small{display:block;margin-top:3px;line-height:1.3}
  .geo-city-tip__link{grid-column:2;grid-row:2;justify-self:start}
  .geo-city-tip>button{position:absolute;top:9px;right:9px}
}