/*
Дополнительные блоки лендинга: калькулятор сметы, лента доверия, витрина услуг,
прайс-таблица, чек-лист приёмки, шторка «до/после», онлайн-запись, акции,
блок для юрлиц, хлебные крошки и перелинковка.

Продолжение style.css: файл подключается после него и использует те же токены
(цвета, радиусы, шрифты, тени) из :root. Своих переменных не вводит.
*/

/* ------------------------------------------------------------ калькулятор */
.smeta {
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.smeta__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 26px;
	background: var(--blue-050);
}

.smeta__head b {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
}

.smeta__head span {
	color: var(--muted);
	font-size: 15px;
}

.smeta__body { padding: 22px 26px 6px; }

.smeta__field { margin-bottom: 16px; }

.smeta__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	color: var(--muted);
	font-size: 15px;
}

/* Пояснение про студию и метры: кнопкой, а не третьей сноской в теле формы. */
.smeta__i {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	background: var(--blue-050);
	border: 0;
	border-radius: 50%;
	color: var(--blue);
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	cursor: help;
}

.smeta__i:hover,
.smeta__i[aria-expanded='true'] { background: var(--blue-300); }

.seg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	padding: 5px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.seg button {
	min-height: 44px;
	padding: 0 5px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	transition: background-color 0.2s ease;
}

.seg button:hover { background: #e7f3ff; }

.seg button[aria-pressed='true'] {
	background: var(--blue-300);
	font-weight: 500;
}

/*
 * Комнаты и площадь стоят в одной плашке: раньше поле «Площадь» занимало
 * отдельные 110 px ради случая, который нужен от 100 м².
 */
.rowline {
	display: flex;
	gap: 6px;
	padding: 5px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.rowline .rooms {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 5px;
	min-width: 0;
}

.rowline .rooms button {
	min-height: 44px;
	padding: 0 4px;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 16px;
	transition: background-color 0.2s ease;
}

.rowline .rooms button:hover { background: #e7f3ff; }

.rowline .rooms button[aria-pressed='true'] {
	background: var(--blue-300);
	font-weight: 500;
}

.rowline__m2 {
	flex: 0 0 90px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	background: var(--white);
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	text-align: center;
	-moz-appearance: textfield;
}

.rowline__m2::placeholder { color: var(--muted); }
.rowline__m2:focus { outline: 2px solid var(--blue); outline-offset: -2px; }

.rowline__m2::-webkit-outer-spin-button,
.rowline__m2::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.smeta__hint {
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.35;
}

/* Допуслуги свёрнуты: их выбирает меньшинство, а высоту платили все. */
.extras-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	background: var(--blue-050);
	border: 0;
	border-radius: var(--radius-row);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.extras-toggle:hover { background: #e7f3ff; }

.extras-toggle__cnt {
	margin-left: auto;
	color: var(--muted);
	font-size: 14px;
}

.extras-toggle__sum {
	color: var(--blue);
	font-weight: 500;
	white-space: nowrap;
}

.extras-toggle__chev {
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.extras-toggle[aria-expanded='true'] .extras-toggle__chev {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.extras {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 9px;
}

/* Один способ выбора вместо четырёх: всё, что добавляется, — чип. */
.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	background: var(--white);
	border: 1px solid var(--blue-line);
	border-radius: var(--radius-pill);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chip:hover { border-color: var(--blue); }

.chip input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.chip i {
	color: var(--muted);
	font-style: normal;
	font-size: 13px;
	white-space: nowrap;
}

.chip:has(input:checked) {
	background: var(--blue-300);
	border-color: var(--blue-300);
	font-weight: 500;
}

.chip:has(input:checked) i { color: var(--ink); }

.chip:has(input:focus-visible) {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Окна считаются по створкам, поэтому у них счётчик, а не переключатель. */
.chip--step {
	gap: 10px;
	padding: 4px 5px 4px 14px;
	cursor: default;
}

.chip--step:hover { border-color: var(--blue-line); }

.chip__name {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}

.stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
}

.stepper button {
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--blue);
	font-family: var(--font-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.stepper button:hover { background: var(--blue-300); }

.stepper input {
	width: 30px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	-moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* Дом и коммерция: вместо комнат — условие замера. */
.smeta__big {
	padding: 14px 16px;
	background: var(--blue-050);
	border-radius: var(--radius-row);
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Построчная смета осталась: это и есть обещание «цена из прайса». */
.sheet { margin-top: 4px; }

.sheet__line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	font-size: 15px;
}

.sheet__line dt {
	flex: none;
	max-width: 64%;
	color: var(--ink);
}

.sheet__dots {
	flex: 1;
	border-bottom: 1px dotted var(--blue-line);
	transform: translateY(-4px);
}

.sheet__line dd {
	flex: none;
	margin: 0;
	font-weight: 500;
	white-space: nowrap;
}

.sheet__line--min dd { color: var(--blue); }

/* Итог и кнопки — единый подвал, чтобы цена и действие стояли рядом. */
.smeta__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 26px 18px;
	border-top: 1px solid var(--blue-300);
}

.smeta__sumrow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.smeta__sumlbl b {
	display: block;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.smeta__sumlbl span {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.35;
}

.smeta__sum {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* «от» перед суммой: приставка мельче цифр, иначе строка не влезает на телефоне. */
.smeta__from {
	font-size: 22px;
	font-weight: 600;
}

.smeta__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.smeta__cta .btn {
	flex: 1 1 180px;
	padding: 0 18px;
	font-size: 16px;
}

.smeta__note {
	padding: 12px 26px 20px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

/*
 * Телефон. Сегменты — три кнопки в ряд с переносом подписи, а не три строки:
 * два переключателя из трёх слов занимали 296 px.
 */
@media (max-width: 640px) {
	.seg {
		gap: 5px;
		padding: 4px;
		border-radius: var(--radius-row);
	}

	.seg button {
		min-height: 44px;
		padding: 5px 2px;
		border-radius: var(--radius-row);
		font-size: 13px;
		line-height: 1.15;
		white-space: normal;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.rowline {
		gap: 5px;
		padding: 4px;
		border-radius: var(--radius-row);
	}

	.rowline .rooms { gap: 4px; }

	.rowline .rooms button {
		min-height: 44px;
		border-radius: 12px;
		font-size: 15px;
	}

	.rowline__m2 {
		flex: 0 0 74px;
		min-height: 44px;
		padding: 0 6px;
		border-radius: 12px;
		font-size: 14px;
	}

	.smeta__head { padding: 14px 20px; }
	.smeta__head b { font-size: 18px; }
	.smeta__head span { display: none; }

	.smeta__body { padding: 16px 20px 4px; }
	.smeta__field { margin-bottom: 14px; }
	.smeta__label { margin-bottom: 7px; font-size: 14px; }

	.extras-toggle { min-height: 48px; padding: 0 13px; font-size: 14px; }
	.extras-toggle__cnt { display: none; }

	.extras { gap: 6px; }
	.chip { padding: 8px 12px; font-size: 13px; }

	.sheet__line { font-size: 14px; }

	.smeta__sumlbl b { font-size: 17px; }
	.smeta__sum { font-size: 32px; }

	.smeta__note { padding: 10px 20px 18px; }
}

/* ------------------------------------------------------------ первый экран A */
.hero--calc .hero__inner {
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 60px;
	padding-top: 158px;
}

.hero--calc .hero__visual { width: auto; height: auto; margin: 0; }
.hero--calc .hero__visual::before { display: none; }

.hero--calc .hero__star {
	left: auto;
	right: -54px;
	top: -46px;
	width: 108px;
	height: 108px;
	z-index: 2;
}

.hero--calc .hero__sparkle { left: -34px; top: 250px; }

/* лента доверия под первым экраном */
.trustbar { background: var(--white); padding: 34px 0; }

.trustbar__inner {
	display: grid;
	grid-template-columns: 232px repeat(3, 1fr);
	gap: 34px;
	align-items: center;
	padding: 22px 34px;
	background: var(--blue-050);
	border-radius: var(--radius-card);
}

.trustbar__photo {
	width: 198px;
	height: 132px;
	object-fit: cover;
	border-radius: 8px 40px 40px 40px;
}

.trustbar__item b {
	display: block;
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.trustbar__item span {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.35;
}

@media (max-width: 1080px) {
	.hero--calc .hero__inner { grid-template-columns: 1fr; gap: 34px; padding-top: 150px; }

	/*
	 * На телефоне смета идёт сразу под H1, лид и буллеты после неё:
	 * блок текста «растворяется» в сетке, порядок задают order.
	 */
	.hero--calc .hero__text { display: contents; }
	.hero--calc .hero__title { order: 1; }
	.hero--calc .hero__visual { order: 2; }
	.hero--calc .pricelead,
	.hero--calc .hero__lead,
	.hero--calc .hero__features,
	.hero--calc .hero__text > .btn { order: 3; }
	.hero--calc .hero__lead { margin-top: 0; }
	.hero--calc .hero__star { display: none; }
	.trustbar__inner { grid-template-columns: 1fr 1fr; }
	.trustbar__photo { display: none; }
}

/* ------------------------------------------------------------ витрина услуг */
.showcase {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.showcase .service-card__image { height: 226px; }

.showcase .service-card__body { padding: 22px 26px 24px; }

.showcase .service-card__title { font-size: 21px; }

.showcase .service-card__lead {
	margin-top: 10px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.4;
}

@media (max-width: 980px) { .showcase { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .showcase { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ прайс-таблица */
.ptable-hint { display: none; }

.ptable-wrap {
	/*
	 * position: relative обязателен: без него залипающие ячейки первой колонки
	 * (position: sticky ниже) мобильный Chrome учитывает относительно окна,
	 * страница считается шириной 430 px и уменьшается целиком (04.09.2026).
	 */
	position: relative;
	overflow-x: auto;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

table.ptable {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
	font-size: 17px;
}

.ptable-caption {
	margin: 34px 0 16px;
	font-size: 21px;
}

.ptable-caption--first { margin-top: 28px; }

.ptable-title { margin-top: 48px; }

/* Прайс читается парами «работа — цена», поэтому таблице нужна не вся ширина. */
.ptable-wrap--price { max-width: 980px; }

table.ptable th.num { text-align: right; }

/* Сдвоенный прайс: два списка рядом, между ними — разделитель. */
.ptable--pairs { table-layout: fixed; }

.ptable--pairs th:nth-child(2n),
.ptable--pairs td:nth-child(2n) { width: 136px; }

.ptable--pairs th:nth-child(3),
.ptable--pairs td:nth-child(3) {
	padding-left: 34px;
	border-left: 1px solid var(--blue-050);
}

table.ptable th,
table.ptable td {
	padding: 17px 24px;
	text-align: left;
	border-bottom: 1px solid var(--blue-050);
}

table.ptable thead th {
	background: var(--blue-050);
	color: var(--muted);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 400;
}

table.ptable tbody tr:last-child td { border-bottom: 0; }

table.ptable tbody tr:hover { background: #fafcff; }

table.ptable td.num {
	color: var(--blue);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

table.ptable td.note {
	color: var(--muted);
	font-weight: 400;
	text-align: right;
}

.pnote {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 20px 26px;
	background: var(--blue-050);
	border-radius: var(--radius-soft);
	font-size: 16px;
	line-height: 1.45;
}

.pnote b { white-space: nowrap; }

/* На телефоне жирная фраза примечания длиннее экрана: даём ей переноситься. */
@media (max-width: 720px) {
	.pnote b { white-space: normal; }
}

/* Подсказка про площадь под кнопками комнат и приглушение комнат при расчёте по метрам. */
.smeta__area {
	margin: 9px 4px 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--muted);
}

.smeta__area b {
	color: var(--ink);
	font-weight: 500;
}

.rooms.is-off button:not([aria-pressed='true']),
.rooms.is-off button[aria-pressed='true'] {
	color: #a9b3bf;
	background: transparent;
}

/* ------------------------------------------------------------- чек-лист */
.zones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.zone {
	padding: 26px 28px;
	background: var(--card);
	border-radius: var(--radius-card);
}

.zone h3 { font-size: 21px; }

.zone ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.zone li {
	position: relative;
	padding: 0 0 9px 26px;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.35;
}

.zone li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(-45deg);
}

@media (max-width: 980px) { .zones { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zones { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- шторка до/после */
.balist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px;
}

.bacard {
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.ba {
	position: relative;
	height: 260px;
	background: var(--card);
	user-select: none;
	touch-action: pan-y;
}

.ba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Кадр «до» больше не подделываем фильтром — это настоящий снимок до уборки. */

.ba .ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 3px;
	background: var(--white);
	pointer-events: none;
}

.ba__handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	background: var(--blue);
	border: 3px solid var(--white);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: var(--shadow-card);
}

.ba input[type='range'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.ba__tag {
	position: absolute;
	bottom: 14px;
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--radius-pill);
	font-size: 14px;
	pointer-events: none;
}

.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }

.bacard__body { padding: 20px 24px 24px; }

.bacard__body h3 { font-size: 19px; }

.bacard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.bacard__meta span {
	padding: 6px 14px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
	font-size: 14px;
}

.bacard__price {
	margin-top: 16px;
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: 700;
}

@media (max-width: 980px) { .balist { grid-template-columns: 1fr; } }

/* заглушка для мест, где нужны настоящие снимки */
.needshot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 24px;
	background: #fffbe6;
	border: 1px dashed var(--yellow);
	border-radius: var(--radius-soft);
	color: #6b5a12;
	font-size: 15px;
	line-height: 1.4;
}

/* ==========================================================================
   Блоки финальной сборки
   ========================================================================== */

/* ------------------------------------------- двойная цена в первом экране */
.pricelead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 18px;
	padding: 14px 22px;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
}

.pricelead b {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 27px;
	font-weight: 700;
	line-height: 1;
}

.pricelead span { font-size: 16px; }
.pricelead .sep { color: var(--blue-400); }
/* цена одной строкой; длинный хвост стоит рядом и переносится внутри себя,
   а не уезжает целиком на новую строку, оставляя точку висеть */
.pricelead b { white-space: nowrap; }
.pricelead > span:last-child { flex: 1 1 200px; min-width: 0; }

@media (max-width: 560px) {
	.pricelead { border-radius: var(--radius-soft); padding: 14px 18px; }
}

/* --------------------------------------------------- онлайн-запись, слоты */
.booking {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	margin-top: 30px;
}

.booking__panel {
	padding: 32px 34px 34px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.booking__label {
	display: block;
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 15px;
}

.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
}

.day {
	padding: 12px 4px;
	background: var(--blue-050);
	border: 1px solid transparent;
	border-radius: var(--radius-row);
	color: var(--ink);
	font-family: var(--font-text);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.day span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	text-transform: lowercase;
}

.day b {
	display: block;
	margin-top: 4px;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.day:hover { background: #e7f3ff; }

.day[aria-pressed='true'] {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.day[aria-pressed='true'] span { color: var(--blue-300); }

.day[disabled] { opacity: 0.4; cursor: not-allowed; }

.slots {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 12px;
}

.slot {
	min-height: 44px;
	padding: 0 20px;
	background: var(--white);
	border: 1px solid var(--blue-line);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.slot:hover { border-color: var(--blue); }

.slot[aria-pressed='true'] {
	background: var(--blue-300);
	border-color: var(--blue-300);
	font-weight: 500;
}

.slot[disabled] {
	background: var(--card);
	border-color: transparent;
	color: var(--gray);
	text-decoration: line-through;
	cursor: not-allowed;
}

.booking__side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 34px;
	background: var(--grad-blue);
	border-radius: var(--radius-card);
	color: var(--white);
}

.booking__side h3 { color: var(--white); font-size: 24px; }

.booking__side p {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.45;
	opacity: 0.95;
}

.booking__pick {
	margin: 20px 0;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-soft);
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.booking__side .btn--white {
	background: var(--white);
	color: var(--blue);
}

.booking__side .btn--white:hover { background: var(--blue-050); color: var(--blue); }

.booking__note {
	margin-top: 14px;
	font-size: 13px;
	opacity: 0.9;
}

@media (max-width: 1080px) {
	.booking { grid-template-columns: 1fr; }
	.days { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
	.booking__panel, .booking__side { padding: 24px 20px; }
	.days { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------- чек-лист приёмки: прогресс */
.checkbar {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 22px 28px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.checkbar__progress {
	flex: 1;
	min-width: 220px;
	height: 10px;
	background: var(--blue-050);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.checkbar__progress i {
	display: block;
	width: 0;
	height: 100%;
	background: var(--blue);
	border-radius: var(--radius-pill);
	transition: width 0.3s ease;
}

.checkbar__counter { color: var(--muted); font-size: 16px; }
.checkbar__counter b { color: var(--ink); font-family: var(--font-head); }

.zone label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.35;
	cursor: pointer;
}

.zone label:has(input:checked) { color: var(--ink); }

.zone label input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--blue);
}

/* «что не входит» */
.notin {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 18px;
	padding: 30px 34px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.notin__head { grid-column: 1 / -1; }
.notin__head h3 { font-size: 24px; }
.notin__head p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.45; }

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

.notin li {
	position: relative;
	padding: 0 0 10px 26px;
	font-size: 16px;
	line-height: 1.35;
}

.notin li::before,
.notin li::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 10px;
	width: 13px;
	height: 2px;
	background: var(--gray);
}

.notin li::before { transform: rotate(45deg); }
.notin li::after { transform: rotate(-45deg); }

@media (max-width: 900px) { .notin { grid-template-columns: 1fr; } }

/* --------------------------------------------------- гарантия и документы */
.guar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-top: 32px;
}

.guar__card {
	display: flex;
	flex-direction: column;
	padding: 30px 30px 32px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.guar__num {
	color: var(--blue);
	font-family: var(--font-head);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.guar__card h3 { margin-top: 12px; font-size: 21px; }

.guar__card p {
	flex: 1;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.45;
}

.guar__card a { margin-top: auto; padding-top: 16px; font-size: 16px; }

.guar__card--accent { background: var(--grad-blue); color: var(--white); }
.guar__card--accent h3,
.guar__card--accent .guar__num { color: var(--white); }
.guar__card--accent p { color: rgba(255, 255, 255, 0.94); }

@media (max-width: 1080px) { .guar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .guar { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- акции, подписка */
.promos {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 18px;
	margin-top: 30px;
}

.promo {
	position: relative;
	padding: 34px 38px 36px;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.promo--main { background: var(--grad-hero); }

.promo__badge {
	display: inline-block;
	padding: 7px 18px;
	background: var(--yellow);
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 500;
}

.promo h3 { margin-top: 16px; font-size: 27px; line-height: 1.2; }
.promo h3 span { color: var(--blue); }

.promo p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.45; }

.promo ul { margin: 16px 0 0; padding: 0; list-style: none; }

.promo li {
	position: relative;
	padding: 0 0 9px 26px;
	font-size: 16px;
	line-height: 1.35;
}

.promo li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(-45deg);
}

.promo .btn { margin-top: 22px; }

.promo__star {
	position: absolute;
	right: -30px;
	top: -34px;
	width: 104px;
	height: 104px;
	pointer-events: none;
}

@media (max-width: 900px) { .promos { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- юрлицам */
.b2b {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	align-items: center;
	margin-top: 30px;
	padding: 44px 48px;
	background: var(--grad-footer);
	border-radius: var(--radius-card);
	color: var(--white);
}

.b2b h2,
.b2b > div:not(.b2b__card) > h3 { color: var(--white); font-size: 34px; line-height: 42px; }
.b2b > div:not(.b2b__card) > p { margin-top: 14px; font-size: 17px; line-height: 1.45; opacity: 0.94; }

.b2b__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.b2b__list li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.35;
}

.b2b__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--yellow);
	border-bottom: 2px solid var(--yellow);
	transform: rotate(-45deg);
}

.b2b__card {
	padding: 30px 32px;
	background: var(--white);
	border-radius: var(--radius-soft);
	color: var(--ink);
}

.b2b__card h3 { font-size: 21px; }
.b2b__card p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.b2b__card .btn { margin-top: 18px; width: 100%; }

@media (max-width: 980px) {
	.b2b { grid-template-columns: 1fr; padding: 34px 24px; }
	.b2b__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- реквизиты */
.requisites {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 14px;
	opacity: 0.9;
}

/* --------------------------------------------------------- мобильная плашка */
.mobbar { display: none; }

@media (max-width: 960px) {
	.mobbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: var(--white);
		box-shadow: 0 -6px 18px rgba(49, 58, 69, 0.12);
	}

	.mobbar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 7px 0;
		border-radius: var(--radius-row);
		color: var(--ink);
		font-size: 11px;
		text-align: center;
	}

	.mobbar a b { font-size: 17px; line-height: 1; }
	.mobbar a.is-accent { background: var(--blue); color: var(--white); }

	body { padding-bottom: 74px; }
}

/* --------------------------------------------------- мелочи финальной сборки */
.svc-perm {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 400;
}

.sechead-lead {
	max-width: 720px;
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 19px;
	line-height: 25px;
}

.opengap { margin-top: 32px; }

/* ------------------------------------------------------------ хлебные крошки */
.crumbs {
	padding: calc(var(--header-total) + 14px) 0 0;
	background: var(--grad-hero);
	font-size: 14px;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
}

.crumbs li + li::before {
	content: '/';
	margin-right: 8px;
	color: var(--blue-400);
}

.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--ink); }

.crumbs + .hero .hero__inner { padding-top: 18px; }

.b2b__mail {
	margin-top: 16px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.45;
}

.b2b__mail a {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------------------------------------------------------- перелинковка */
.linkgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 20px;
}

.linkcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 116px;
	padding: 22px 24px;
	background: var(--blue-050);
	border-radius: var(--radius-soft);
	transition: background-color 0.2s ease;
}

.linkcard:hover { background: var(--blue-300); }

.linkcard b {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

.linkcard span { color: var(--blue); font-size: 15px; }

/* Цена услуги в карточке перелинковки: между названием и «Перейти». */
.linkcard__price {
	margin-top: -6px;
	color: var(--muted);
	font-size: 15px;
	font-style: normal;
}

@media (max-width: 980px) { .linkgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .linkgrid { grid-template-columns: 1fr; } }

/* SEO-текст двумя колонками */
.seotext { columns: 2; column-gap: 44px; font-size: 17px; line-height: 25px; color: var(--ink); }
.seotext p { margin: 0 0 16px; }
@media (max-width: 760px) { .seotext { columns: 1; } }

/* ------------------------------------------------ матрица тарифов */
/* Свёрнутое состояние: до клика видны первые 8 работ. */
.matrix__toggle:not(:checked) ~ .ptable-wrap .matrix__row--more { display: none; }
.matrix__toggle:checked ~ .matrix__action { display: none; }
.matrix__action { margin-top: 20px; text-align: center; }
.matrix__more { cursor: pointer; }
.matrix__toggle:focus-visible ~ .matrix__action .matrix__more {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* Шапка параметров: цена и ставка крупнее работ. */
.matrix__meta th { color: var(--muted); font-weight: 400; }
.matrix__meta td { font-size: 20px; }
.matrix__meta tr:nth-child(-n + 2) td { font-size: 24px; }
.matrix__meta tr:last-child td,
.matrix__meta tr:last-child th { border-bottom: 2px solid var(--blue-050); }

/* Строка-разделитель группы. */
.ptable--matrix .matrix__group th {
	background: var(--blue-050);
	color: var(--muted);
	font-size: 15px;
	font-weight: 400;
}

/*
 * Матрица — это сравнение тарифов, а не прайс: значения выравниваем по центру
 * колонки. Галочка — блочный svg, её text-align не двигает, поэтому центруем
 * её отдельно полями; из-за этого галочки стояли слева, а цены справа.
 */
table.ptable--matrix { table-layout: fixed; }

.ptable--matrix thead th:first-child { width: 40%; }

table.ptable--matrix thead th:not(:first-child),
table.ptable--matrix td,
table.ptable--matrix td.num,
table.ptable--matrix td.note { text-align: center; }

.ptable--matrix td svg { margin: 0 auto; }

/*
 * Значения в матрице длиннее цены («назовём после осмотра», «550 ₽ / створка»),
 * а колонка тарифа узкая уже на планшете — переносим и в ячейках, и в шапке.
 */
table.ptable--matrix td.num { white-space: normal; }

.ptable--matrix thead th {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Первая колонка не уезжает при горизонтальном скролле. */
.ptable--matrix th[scope='row'] {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--white);
	font-weight: 400;
}
.ptable--matrix thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--blue-050);
}


/* ------------------------------------------------ таблицы на телефоне */
/*
 * Матрица из четырёх колонок в контейнере 335 px: залипающая первая колонка
 * занимала 171 px, и на данные оставалось 164 — рядом не помещалась даже одна
 * колонка тарифа, то есть сравнить было нечего. Сжимаем ячейки и первую
 * колонку так, чтобы в поле зрения попадали минимум две колонки тарифа.
 */
@media (max-width: 640px) {
	table.ptable {
		min-width: 560px;
		font-size: 15px;
	}

	table.ptable th,
	table.ptable td {
		padding: 11px 12px;
	}

	table.ptable thead th {
		font-size: 13px;
	}

	table.ptable--matrix {
		min-width: 430px;
		table-layout: fixed;
	}

	.ptable--matrix thead th:not(:first-child) {
		width: 98px;
	}

	.ptable--matrix th[scope='row'],
	.ptable--matrix thead th:first-child {
		width: 136px;
		min-width: 136px;
		font-size: 14px;
		line-height: 1.25;
	}

	table.ptable--matrix td,
	table.ptable--matrix td.num {
		min-width: 88px;
		padding: 10px 8px;
		font-size: 14px;
		line-height: 1.25;
		white-space: normal;
		text-align: center;
	}

	/*
	 * Сдвоенный прайс на телефоне уезжает вбок, поэтому фиксированные колонки
	 * ему только мешают: «Матрас полутороспальный» не влезал в 144 px.
	 */
	table.ptable--pairs { table-layout: auto; }

	.ptable--pairs th:nth-child(2n),
	.ptable--pairs td:nth-child(2n) { width: auto; }

	.ptable--pairs th:nth-child(3),
	.ptable--pairs td:nth-child(3) { padding-left: 16px; }

	.matrix__meta td { font-size: 15px; }
	.matrix__meta tr:nth-child(-n + 2) td { font-size: 16px; }

	/* «Поддерживающая» — одно слово в 98 px: без переносов оно вылезает из ячейки. */
	.ptable--matrix thead th {
		padding: 10px 6px;
		font-size: 13px;
		line-height: 1.2;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.ptable-hint {
		display: block;
		margin: 0 0 10px;
		color: var(--muted);
		font-size: 14px;
	}

	/* Ссылки в ячейках прайса — до нормы тач-таргета. */
	table.ptable td.num a,
	table.ptable td a {
		display: inline-block;
		padding: 11px 0;
	}
}


/* ---------------------------------------- липкий итог сметы (телефон и планшет) */
/*
 * Порог 960 совпадает с порогом мобильной плашки: на её высоту (74 px) опирается
 * смещение bottom. Пока калькулятор в поле зрения, сумма и кнопка не уезжают
 * вниз, сколько бы допуслуг ни отметили.
 */
/*
 * До 960 px подвал со сметой липнет к низу экрана: сумма и кнопка остаются
 * на виду, пока человек крутит параметры. Отступ снизу — под мобильную плашку.
 */
@media (max-width: 960px) {
	.smeta {
		overflow: visible;
		border-radius: var(--radius-card);
	}

	.smeta__head {
		border-radius: var(--radius-card) var(--radius-card) 0 0;
	}

	.smeta__foot {
		gap: 10px;
		padding: 12px 22px 14px;
	}

	.smeta:has(.extras:not([hidden])) .smeta__foot {
		position: sticky;
		bottom: 74px;
		z-index: 3;
		background: var(--white);
		box-shadow: 0 -8px 20px rgba(4, 67, 185, 0.1);
	}

	.smeta__sumrow { align-items: center; }
	.smeta__sumlbl span { display: none; }
	.smeta__sum { font-size: 30px; }
}

@media (max-width: 640px) {
	.smeta__foot { padding: 10px 20px 12px; }
	.smeta__cta .btn--primary { flex: 1 1 100%; }

	/* Второй кнопке хватает вида ссылки — она забирала целую строку. */
	.smeta__cta .btn--outline {
		flex: 1 1 100%;
		min-height: 34px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		font-size: 15px;
	}
}

/* ==========================================================================
   Страница «Спасибо за заявку» (template-thanks.php)
   ========================================================================== */

.thx-ok {
	background: var(--blue-050);
	border-bottom: 1px solid #e2ecf7;
}

.thx-ok__in {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 18px;
	padding-bottom: 18px;
}

.thx-ok__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #0b7a3b;
	color: var(--white);
	font-size: 16px;
}

.thx-ok__txt {
	flex: 1 1 300px;
	margin: 0;
	font-size: 15.5px;
}

.thx-ok__txt b {
	display: block;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
}

.thx-ok__txt span {
	color: #4a5058;
}

.thx-ok__meta {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	flex-wrap: wrap;
}

.thx-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-card);
	font-size: 14px;
	white-space: nowrap;
}

.thx-chip b {
	font-family: var(--font-head);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Прямой заход без заявки: тот же макет полосы, но без зелёной галочки и обещаний. */
.thx-none {
	background: var(--card);
	border-bottom: 1px solid #e6e6e6;
}

.thx-none__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--white);
	box-shadow: var(--shadow-card);
	color: var(--blue);
	font-size: 16px;
}

.thx-none .btn {
	flex: 0 0 auto;
}

.thx {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 352px);
	gap: 48px;
	align-items: start;
	padding-top: 44px;
	padding-bottom: 30px;
}

.thx__eyebrow {
	margin: 0 0 12px;
	color: var(--blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.thx__h1 {
	max-width: 19ch;
	margin: 0;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.thx__lead {
	max-width: 56ch;
	margin: 14px 0 0;
	color: #4a5058;
	font-size: 17px;
}

.thx-prep {
	margin-top: 30px;
}

.thx-prep__bar {
	position: relative;
	height: 8px;
	border-radius: var(--radius-pill);
	background: #e9eff6;
	overflow: hidden;
}

.thx-prep__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: var(--radius-pill);
	background: var(--blue);
	transition: width .3s ease;
}

.thx-prep__cnt {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.thx-prep__cnt b {
	color: var(--ink);
	font-family: var(--font-head);
	font-variant-numeric: tabular-nums;
}

.thx-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.thx-list li + li {
	margin-top: 10px;
}

.thx-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 17px 20px;
	border: 2px solid #e6eef8;
	border-radius: var(--radius-soft);
	cursor: pointer;
	transition: border-color .18s, background .18s;
}

.thx-item:hover {
	border-color: var(--blue-line);
	background: #fbfdff;
}

.thx-item input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.thx-item__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border: 2px solid var(--blue-line);
	border-radius: 9px;
	background: var(--white);
	color: transparent;
	font-size: 14px;
	font-weight: 700;
	transition: background .18s, border-color .18s, color .18s;
}

.thx-item input:checked ~ .thx-item__box {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--white);
}

.thx-item input:focus-visible ~ .thx-item__box {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

.thx-item__txt b {
	display: block;
	font-family: var(--font-head);
	font-size: 16.5px;
	font-weight: 600;
}

.thx-item__txt span {
	display: block;
	margin-top: 3px;
	color: #5b626b;
	font-size: 14.5px;
}

.thx-item input:checked ~ .thx-item__txt b {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-color: var(--blue-line);
}

.thx-side {
	position: sticky;
	top: 24px;
	padding: 26px 26px 24px;
	border: 2px solid #e6eef8;
	border-radius: var(--radius-card);
}

.thx-side__ttl {
	margin: 0 0 4px;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.thx-side__hint {
	margin: 0 0 18px;
	color: var(--muted);
	font-size: 14px;
}

.thx-acts {
	display: grid;
	gap: 10px;
}

.thx-side__note {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #eef2f6;
	color: var(--muted);
	font-size: 13.5px;
}

.thx-back {
	display: inline-block;
	color: var(--muted);
	font-size: 15px;
}

.thx-back:hover {
	color: var(--blue);
}

.thx-note {
	max-width: 760px;
	margin: 22px 0 0;
	padding-bottom: 44px;
	color: var(--muted);
	font-size: 13.5px;
}

@media (max-width: 940px) {
	.thx {
		grid-template-columns: 1fr;
		gap: 26px;
		padding-top: 30px;
	}

	.thx-side {
		position: static;
	}

	/* Плашки со сметой и временем не помещались в строку и давали боковую прокрутку. */
	.thx-ok__meta {
		width: 100%;
	}
}

/* Кнопка «Показать ещё» под списком работ. */
.works__more {
	display: block;
	margin: 24px auto 0;
}

/* ==========================================================================
   Контакты и «О компании» (template-contacts.php, template-about.php)
   ========================================================================== */

.kont__sub {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-family: var(--font-text);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0;
}

.kont-grid,
.about-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 28px;
	padding: 0;
	list-style: none;
}

.kont-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 26px 28px;
	border: 2px solid #e6eef8;
	border-radius: var(--radius-card);
}

.kont-card--common {
	background: var(--blue-050);
	border-color: transparent;
}

.kont-card__city {
	margin: 0;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 700;
}

.kont-card__list {
	margin: 0;
	flex: 1 1 auto;
}

.kont-card__list dt {
	margin-top: 12px;
	color: var(--muted);
	font-size: 13.5px;
}

.kont-card__list dt:first-child {
	margin-top: 0;
}

.kont-card__list dd {
	margin: 3px 0 0;
	font-size: 16px;
}

.kont-card__map {
	color: var(--blue);
	font-size: 15px;
}

.kont-table__note {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-size: 13.5px;
}

.kont-legal {
	max-width: 760px;
}

.kont-legal__title {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 700;
}

.kont-legal p {
	margin: 0 0 26px;
	color: #4a5058;
}

/* --- О компании --- */

.about-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 40px;
	align-items: center;
	padding-bottom: 10px;
}

.about-hero__photo {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.about-hero__acts {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.about-card {
	padding: 26px 28px;
	border: 2px solid #e6eef8;
	border-radius: var(--radius-card);
}

.about-card h3 {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.about-card p {
	margin: 0;
	color: #4a5058;
	font-size: 15.5px;
}

.promise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 28px;
}

.promise__list {
	margin: 0;
	padding: 24px 26px;
	border-radius: var(--radius-card);
	list-style: none;
}

.promise__list li {
	position: relative;
	padding: 0 0 0 30px;
	font-size: 15.5px;
}

.promise__list li + li {
	margin-top: 14px;
}

.promise__list li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.promise__list--yes {
	background: var(--blue-050);
}

.promise__list--yes li::before {
	content: "✓";
	color: #0b7a3b;
}

.promise__list--no {
	background: var(--card);
}

.promise__list--no li::before {
	content: "—";
	color: var(--muted);
}

@media (max-width: 900px) {
	.about-hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* На посадочных крошки лежат внутри первого экрана и подхватывают его градиент.
   На контактах и «О компании» первого экрана нет — фон убираем, иначе над
   заголовком висит пустая голубая плашка. */
.kont-page .crumbs,
.about-page .crumbs {
	background: none;
	padding: 14px 0 0;
}

/* Крошки здесь лежат внутри контейнера страницы: вложенный контейнер без своих полей, иначе текст уезжает на 20 px правее H1. */
.kont-page .crumbs > .container,
.about-page .crumbs > .container {
	padding-left: 0;
	padding-right: 0;
}

.kont-page > .container:first-of-type,
.about-page > .container:first-of-type {
	padding-bottom: 30px;
}

/* ==========================================================================
   HTML-карта сайта (template-karta-sajta.php)
   ========================================================================== */

.smap-page .thx__lead {
	max-width: 62ch;
}

.smap {
	padding-top: 10px;
}

.smap__h2 {
	margin: 34px 0 14px;
	padding-top: 22px;
	border-top: 1px solid #e3edf8;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
}

.smap__h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.smap__row,
.smap__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.smap__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.smap__row a,
.smap__group a {
	color: var(--ink);
	font-size: 15px;
	line-height: 1.5;
	text-decoration: none;
}

.smap__row a:hover,
.smap__group a:hover {
	color: var(--blue);
}

.smap__groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px 32px;
}

.smap__group h3 {
	margin: 0 0 10px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
}

.smap__group h3 a {
	font-size: 16px;
	font-weight: 600;
}

.smap__group ul {
	display: grid;
	gap: 7px;
}

@media (max-width: 720px) {
	.smap__h2 {
		font-size: 21px;
		margin-top: 26px;
		padding-top: 18px;
	}

	.smap__row {
		gap: 8px 18px;
	}

	.site-footer__links {
		align-self: auto;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   Реальные фото с уборок: пары «до и после» (section-objects.php)
   ========================================================================== */

.objs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.obj {
	overflow: hidden;
	background: var(--white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.obj__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--white);
}

.obj__shot {
	position: relative;
	margin: 0;
}

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

.obj__shot figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

/* Селектор с классом элемента: .obj__shot figcaption весит больше и перебивал фон. */
.obj__shot figcaption.obj__shot--after {
	background: var(--blue);
	color: var(--white);
}

.obj__body {
	padding: 18px 22px 22px;
}

.obj__body h3 {
	margin: 0 0 6px;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
}

.obj__body p {
	margin: 0;
	color: #5b626b;
	font-size: 14.5px;
	line-height: 1.45;
}

@media (max-width: 600px) {
	.obj__shot img { height: 170px; }
}

/* ==========================================================================
   Галерея объектов и просмотрщик (section-gallery.php)
   ========================================================================== */

.gal-object + .gal-object {
	margin-top: 34px;
}

.gal-object__title {
	margin: 0 0 14px;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
}

.gal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gal-shot {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius-row);
	background: var(--card);
	cursor: zoom-in;
	overflow: hidden;
}

.gal-shot img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform .25s ease;
}

.gal-shot:hover img {
	transform: scale(1.03);
}

.gal-shot:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

.gal-note {
	max-width: 760px;
	margin: 28px 0 0;
	color: var(--muted);
	font-size: 13.5px;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(10, 18, 38, .88);
}

.lightbox[hidden] {
	display: none;
}

.lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-soft);
}

.lightbox__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	cursor: pointer;
}

.lightbox__close::before,
.lightbox__close::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 21px;
	width: 18px;
	height: 2px;
	background: var(--white);
}

.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }

.lightbox__close:hover {
	background: rgba(255, 255, 255, .28);
}

@media (prefers-reduced-motion: reduce) {
	.gal-shot img { transition: none; }
	.gal-shot:hover img { transform: none; }
}

/* «Кто приедет» на хабе города: плитка портретов вместо карточек с именами. */
.crew {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.crew__item {
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--card);
	aspect-ratio: 1 / 1;
}

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

.crew__note {
	max-width: 720px;
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 17px;
	line-height: 24px;
}

@media (max-width: 900px) {
	.crew { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* Пометка к адресу: «приём по предварительной записи» у московского офиса. */
.contacts__note {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 15px;
	line-height: 20px;
}

/* В подвале фон синий — серый текст на нём не читается. */
.site-footer .contacts__note {
	color: rgba(255, 255, 255, .75);
}

/*
 * Кнопка чата amoCRM.
 *
 * Виджет ставит себе position: absolute инлайновым стилем — кнопка привязана
 * к документу и после первого экрана уезжает вверх вместе со страницей.
 * Так настроен чат в кабинете amoCRM (режим встроенного чата), параметром
 * inline в коде вставки это не переключается. Поэтому фиксируем к экрану сами.
 *
 * z-index ниже модального окна заявки (200) и выше шапки (100): чат не должен
 * висеть поверх формы, но должен быть доступен на любом экране.
 * Селекторы чужие, отсюда !important — свои стили виджет пишет инлайном.
 */
.amo-button-holder,
#amo-livechat {
	position: fixed !important;
	z-index: 150 !important;
}

/*
 * Окно чата виджет кладёт на 900px выше кнопки, считая от низа документа.
 * После перевода в fixed эти координаты означали бы «выше экрана», поэтому
 * задаём свои: окно стоит над кнопкой и не вылезает за высоту экрана.
 */
#amo-livechat {
	top: auto !important;
	left: auto !important;
	right: 24px !important;
	bottom: 176px !important;
	height: min(704px, calc(100vh - 260px)) !important;
}

/* На телефоне кнопка попадает поверх калькулятора: поднимаем над панелью (65px). */
@media (max-width: 900px) {
	.amo-button-holder {
		right: 14px !important;
		bottom: 80px !important;
	}

	#amo-livechat {
		right: 14px !important;
		bottom: 170px !important;
		width: min(360px, calc(100vw - 28px)) !important;
		height: min(704px, calc(100vh - 250px)) !important;
	}
}


/*
 * Кликабельная карточка услуги: фото и название ведут на посадочную.
 * Ссылку на фото прячем от скринридеров (aria-hidden в разметке) — иначе
 * один и тот же адрес читается дважды подряд.
 */
.service-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.service-card__media img {
	transition: transform 0.3s ease;
}

.service-card__media:hover img {
	transform: scale(1.03);
}

.service-card__title a {
	color: inherit;
	text-decoration: none;
}

.service-card__title a:hover,
.service-card__title a:focus-visible {
	color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
	.service-card__media img,
	.service-card__media:hover img { transition: none; transform: none; }
}


/* ==========================================================================
   Мобильные правки 11.09.2026 (по осмотру на 390x844 и 360x640)
   ========================================================================== */

/*
 * Лента доверия: колонка 1fr не сжимается ниже min-content своего текста,
 * и на экране 360 px блок вылезал на 7 px — страница ехала вбок целиком.
 * minmax(0, 1fr) снимает этот пол, длинные слова переносим по буквам.
 */
@media (max-width: 700px) {
	.trustbar__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		padding: 16px 18px;
	}

	.trustbar__item {
		min-width: 0;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.trustbar__item b { font-size: 28px; }
}

@media (max-width: 640px) {
	/*
	 * Прайс на телефоне: без липкой первой колонки видно либо названия работ,
	 * либо цены, но не то и другое сразу. Повторяем приём матрицы «что входит».
	 */
	.ptable-wrap--price .ptable thead th:first-child,
	.ptable-wrap--price .ptable tbody td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		max-width: 168px;
		background: var(--white);
		box-shadow: 1px 0 0 var(--blue-050);
	}

	.ptable-wrap--price .ptable thead th:first-child {
		z-index: 2;
		background: var(--blue-050);
	}

	/* Строка-примечание идёт во всю ширину: липнуть ей нечем и незачем. */
	.ptable-wrap--price .ptable td.note {
		position: static;
		max-width: none;
		box-shadow: none;
	}

	/* Поле меньше 16 px — и iOS зумит страницу при тапе, обратно не отматывая. */
	.smeta input[type='number'] { font-size: 16px; }
}

/* Кружок «i» у «Комнат или площадь»: на вид 20 px, для пальца — 44. */
.smeta__i { position: relative; }

.smeta__i::after {
	content: '';
	position: absolute;
	inset: -12px;
}

@media (max-width: 900px) {
	/* Ссылки подвала были 19 px в высоту — ниже нормы тач-таргета. */
	.site-footer__nav ul { gap: 2px; }
	.site-footer__nav a { padding: 7px 0; }

	.site-footer__cities a {
		display: inline-block;
		padding: 6px 0;
	}

	/* Крестик модалки — тоже до 44 px, рисунок прежний. */
	.modal__close {
		right: 16px;
		top: 16px;
		width: 44px;
		height: 44px;
	}

	.modal__close::before,
	.modal__close::after {
		left: 15px;
		top: 21px;
	}

	/*
	 * Кнопка чата amoCRM перекрывала правый край кнопок «Закрепить эту цену»
	 * и телефона в меню. Пока липкий подвал сметы на экране — поднимаем её над
	 * ним; при открытом меню или модалке (body.is-locked) убираем совсем.
	 */
	/*
	 * Пока калькулятор в работе, кнопку чата убираем совсем. Поднимать её
	 * бесполезно: на 196 px она садилась на строку «Итого», на высоте подвала —
	 * на чипы допуслуг и на «+» у мытья окон. Любое место над карточкой сметы
	 * что-нибудь да перекрывает, а связаться всё равно есть чем — в нижней
	 * плашке телефон и Telegram. Ушёл калькулятор с экрана — чат вернулся.
	 */
	body.ec-cta-stuck .amo-button-holder,
	body.ec-cta-stuck #amo-livechat { display: none !important; }

	body.is-locked .amo-button-holder,
	body.is-locked #amo-livechat { display: none !important; }
}

/* Ссылка вида yandex.ru/support/metrica/... не переносится и тянет страницу вбок. */
.text-page__content a,
.text-page__content p { overflow-wrap: anywhere; }