/* ============================================================
   Блоки доверия: витрина отзывов, рейтинг Яндекс.Карт,
   примеры смет. Добавлено 31.08.2026.
   Держим в отдельном файле, чтобы не трогать style.css на 3000 строк.
   ============================================================ */

.mp-reviews {
	padding: 40px 0 10px;
}

.mp-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 26px;
}

.mp-reviews__head h2 {
	margin: 0;
}

/* --- плашка рейтинга --- */
.mp-yarate {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px 10px 14px;
	border: 1px solid #e6e2de;
	border-radius: 12px;
	background: #fff;
	color: #333;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s;
}

.mp-yarate:hover,
.mp-yarate:focus {
	color: #333;
	text-decoration: none;
	border-color: #f26a2f;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}

.mp-yarate__val {
	font-family: "robotobold", arial, sans-serif;
	font-size: 32px;
	line-height: 1;
	color: #f26a2f;
}

.mp-yarate__body {
	display: block;
	line-height: 1.35;
}

.mp-yarate__body b {
	display: block;
	font-size: 14px;
	font-weight: normal;
}

.mp-yarate__body small {
	display: block;
	font-size: 12px;
	color: #888;
}

.mp-stars i {
	font-style: normal;
	color: #ffb020;
	letter-spacing: 1px;
}

.mp-stars i.is-off {
	color: #dcd8d4;
}

/* --- карточки --- */
.mp-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 18px;
}

.mp-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid #ece8e4;
	border-radius: 12px;
	background: #fff;
}

.mp-review__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.mp-review__who b {
	display: block;
	font-family: "robotobold", arial, sans-serif;
	font-size: 16px;
}

.mp-review__who span {
	font-size: 13px;
	color: #8a8a8a;
}

.mp-review__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #444;
}

.mp-review__photo img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.mp-review__src {
	margin-top: auto;
	font-size: 13px;
	color: #f26a2f;
}

.mp-review__src.is-plain {
	color: #9a9a9a;
}

/* --- виджет Яндекса по кнопке --- */
.mp-reviews__foot {
	margin: 26px 0 10px;
	text-align: center;
}

.mp-yawidget iframe {
	width: 100%;
	max-width: 100%;
	height: 620px;
	border: 1px solid #e6e2de;
	border-radius: 12px;
	background: #fff;
}

.mp-yawidget__btn {
	padding: 12px 26px;
	border: 1px solid #f26a2f;
	border-radius: 8px;
	background: #fff;
	color: #f26a2f;
	font-size: 15px;
	cursor: pointer;
}

.mp-yawidget__btn:hover {
	background: #f26a2f;
	color: #fff;
}

@media (max-width: 767px) {
	.mp-reviews__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.mp-reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* --- цены «от» --- */
.product-price__sub {
	margin: -6px 0 8px;
	font-size: 13px;
	color: #8a8a8a;
}

.product-price--calc a {
	color: #f26a2f;
	border-bottom: 1px dashed currentColor;
	text-decoration: none;
}

/* --- примеры готовых смет --- */
.mp-estimates {
	padding: 40px 0 20px;
}

.mp-estimates__lead {
	margin: -10px 0 24px;
	color: #777;
}

.mp-estimates__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	gap: 20px;
}

.mp-estimate {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid #ece8e4;
	border-radius: 12px;
	background: #fff;
}

.mp-estimate h3 {
	margin: 4px 0 0;
	font-size: 18px;
}

.mp-estimate__photo img,
.mp-estimate__ba img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.mp-estimate__spec {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.mp-estimate__spec li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px dashed #eee;
}

.mp-estimate__spec span {
	color: #8a8a8a;
}

.mp-estimate__price {
	font-family: "robotobold", arial, sans-serif;
	font-size: 24px;
	color: #333;
}

.mp-estimate__price small {
	font-family: "roboto", arial, sans-serif;
	font-size: 14px;
	color: #8a8a8a;
}

.mp-estimate__incl {
	margin: 0;
	font-size: 14px;
	color: #666;
}

.mp-estimate__cta {
	margin-top: auto;
	text-align: center;
}

@media (max-width: 767px) {
	.mp-estimates__grid {
		grid-template-columns: 1fr;
	}
}

/* --- согласие на обработку данных --- */
/* Кнопка ждёт галочки: согласие даётся действием, а не проставлено заранее. */
.is-locked,
button[disabled],
input[type="submit"][disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.checkboxs a,
.form-control_policy a {
	text-decoration: underline;
}

/* ============================================================
   Мобильная панель действий и кнопка чата
   ============================================================ */

/* Панель — только на телефоне: на десктопе те же действия есть в шапке. */
.mp-bar { display: none; }

.mp-chat-btn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 2000000004;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #f26a2f;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: transform .2s;
}

.mp-chat-btn:hover,
.mp-chat-btn:focus-visible {
	transform: scale(1.06);
}

.mp-chat-btn:focus-visible {
	outline: 3px solid #26211e;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.mp-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000000006;
		height: calc(56px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid #e6e2de;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
	}

	.mp-bar[hidden] { display: none; }

	.mp-bar__item {
		flex: 1 1 33.333%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		font-size: 12px;
		line-height: 1;
		text-decoration: none;
		color: #333;
	}

	.mp-bar__item + .mp-bar__item { border-left: 1px solid #efece8; }
	.mp-bar__item:hover, .mp-bar__item:focus { text-decoration: none; color: #333; }
	.mp-bar__ico { display: block; color: #f26a2f; }

	.mp-bar__item--calc {
		background: #f26a2f;
		color: #fff;
	}

	.mp-bar__item--calc:hover,
	.mp-bar__item--calc:focus { color: #fff; }
	.mp-bar__item--calc .mp-bar__ico { color: #fff; }

	/* Панель не должна закрывать конец страницы. */
	body.has-mp-bar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

	/* Иконка чата поднимается над панелью, а не ложится поверх кнопок. */
	body.has-mp-bar .mp-chat-btn { bottom: calc(70px + env(safe-area-inset-bottom)); }

	/* На первом экране чат не нужен: он вставал прямо на кнопку расчёта.
	   Иконка появляется вместе с нижней панелью, то есть после первого экрана. */
	.mp-chat-btn { display: none; width: 46px; height: 46px; right: 14px; }
	body.has-mp-bar .mp-chat-btn { display: flex; }

	/* Отдельная плавающая кнопка квиза больше не нужна: расчёт есть в панели. */
	.mpq-sticky { display: none !important; }
}

/* ============================================================
   Форма телефона на первом экране
   Подпись и примечание намеренно не <p>: у темы есть правило
   .production-text p:first-child с размером 24px и жирным начертанием,
   которое перебивает любые классовые стили.
   ============================================================ */
.production .hero-form {
	margin-top: 16px;
	max-width: 430px;
}

.production .hero-form__lead {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	opacity: .9;
	text-transform: none;
}

.production .hero-form__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}

.production .hero-form__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
	background: #fff;
	color: #26211e;
	font-size: 16px;
	line-height: 1.2;
}

.production .hero-form__input:focus {
	outline: 2px solid #f26a2f;
	outline-offset: 1px;
}

.production .hero-form__btn {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 0;
	border-radius: 6px;
	background: #f26a2f;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s;
}

.production .hero-form__btn:hover:not([disabled]) { background: #de4e0f; }

.production .hero-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 9px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	opacity: .85;
	text-transform: none;
}

.production .hero-form__consent input {
	margin: 2px 0 0;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.production .hero-form__consent span {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	text-transform: none;
}

.production .hero-form__consent a { color: #fff; text-decoration: underline; }

.production .hero-form__note {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	opacity: .75;
	text-transform: none;
}

@media (max-width: 575px) {
	.production .hero-form__row { flex-direction: column; }
	.production .hero-form__btn { width: 100%; }

	/* flex: 1 1 200px задаёт базу по главной оси. При смене направления
	   на вертикальное 200 px становились высотой поля — оно вырастало
	   до 200 px и вместе с кнопкой занимало 249 px вместо сорока с небольшим.
	   Заметно это не было только потому, что форма уходила под сгиб. */
	.production .hero-form__input,
	.production .hero-form__btn { flex: 0 0 auto; }
}

/* 01.09.2026: уплотнение первого экрана на телефоне откатано по решению
   заказчика — состав и отступы возвращены к состоянию 31 августа.
   Исправления дефектов (высота поля ввода, строка согласия) сохранены:
   это ошибки вёрстки, а не элементы композиции. */


/* ============================================================
   Форма вызова замерщика
   ============================================================ */
.mp-form {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.mp-form__title {
	margin: 0 0 8px;
}

.mp-form__lead {
	margin: 0 auto 18px;
	max-width: 58ch;
	color: #666;
	font-size: 15px;
	line-height: 1.5;
}

.mp-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.mp-form__input { flex: 1 1 210px; }
.mp-form__select { flex: 1 1 230px; }

.mp-form__input,
.mp-form__select {
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid #dcd5cc;
	border-radius: 6px;
	background: #fff;
	color: #26211e;
	font-size: 16px;
	line-height: 1.2;
}

.mp-form__input:focus,
.mp-form__select:focus {
	outline: 2px solid #f26a2f;
	outline-offset: 1px;
}

.mp-form__btn {
	flex: 0 0 auto;
	padding: 12px 26px;
	border: 0;
	border-radius: 6px;
	background: #f26a2f;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s;
}

.mp-form__btn:hover:not([disabled]) { background: #de4e0f; }

.mp-form__consent {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #777;
	text-align: left;
}

.mp-form__consent input { margin: 2px 0 0; flex: 0 0 auto; width: 14px; height: 14px; }
.mp-form__consent a { color: #f26a2f; text-decoration: underline; }

.mp-form__note {
	margin: 6px 0 0;
	font-size: 12px;
	color: #999;
}

@media (max-width: 575px) {
	.mp-form__row { flex-direction: column; }
	.mp-form__btn { width: 100%; }
}

/* ============================================================
   Рекламные посадочные
   ============================================================ */
.lp-hero {
	padding: 44px 0 36px;
	background: #f3f0ec;
	text-align: center;
}

.lp-hero h1 {
	margin: 0 0 12px;
}

.lp-hero__lead {
	margin: 0 auto 18px;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.5;
	color: #57504f;
}

.lp-hero__price {
	display: inline-block;
	margin: 0 0 18px;
	font-family: "robotobold", arial, sans-serif;
	font-size: 30px;
	line-height: 1.1;
	color: #f26a2f;
}

.lp-hero__price small {
	display: block;
	margin-top: 4px;
	font-family: "roboto", arial, sans-serif;
	font-size: 13px;
	color: #857c72;
}

.lp-hero__marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: #3d3733;
}

.lp-hero__marks li::before {
	content: "✓";
	margin-right: 7px;
	color: #4a7a5c;
	font-weight: 700;
}

.lp-form { max-width: 480px; margin: 0 auto; }
.lp-form__row { display: flex; gap: 8px; flex-wrap: wrap; }

.lp-form__input {
	flex: 1 1 210px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid #dcd5cc;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
}

.lp-form__input:focus { outline: 2px solid #f26a2f; outline-offset: 1px; }

.lp-form__btn {
	flex: 0 0 auto;
	padding: 12px 24px;
	border: 0;
	border-radius: 6px;
	background: #f26a2f;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.lp-form__btn:hover:not([disabled]) { background: #de4e0f; }

.lp-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #6f6862;
	text-align: left;
}

.lp-form__consent input { margin: 2px 0 0; width: 14px; height: 14px; }
.lp-form__consent a { color: #f26a2f; text-decoration: underline; }
.lp-form__note { margin: 6px 0 0; font-size: 12px; color: #948b83; }

.lp-quiz { margin: 34px auto; }

.lp-works { padding: 30px 0; }

.lp-works__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 18px;
}

.lp-work { margin: 0; }

.lp-work img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 10px;
}

.lp-work figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #6f6862;
}

.lp-faq { padding: 20px 0 46px; }
.lp-faq__list { max-width: 780px; margin: 0 auto; }

.lp-faq__item {
	border-bottom: 1px solid #e6e2de;
	padding: 14px 0;
}

.lp-faq__item summary {
	cursor: pointer;
	font-family: "robotobold", arial, sans-serif;
	font-size: 17px;
	list-style: none;
}

.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::before { content: "+ "; color: #f26a2f; }
.lp-faq__item[open] summary::before { content: "− "; }
.lp-faq__item div { padding-top: 10px; color: #57504f; line-height: 1.55; }

@media (max-width: 767px) {
	.lp-works__grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
	.lp-form__row { flex-direction: column; }
	.lp-form__btn { width: 100%; }
	.lp-work img { height: 180px; }
}

/* Единицы измерения, которые нельзя разрывать переносом: слэш в «₽/м²»
   браузер считает точкой переноса.

   Селектор с .production обязателен: у темы есть правило .production span
   с display:block, и оно ловит любой вложенный span — из-за этого «₽/м²»
   уходило на отдельную строку на любой ширине, даже на 2545 px. */
.mp-nowrap {
	white-space: nowrap;
}

.production span.mp-nowrap,
.lp-hero span.mp-nowrap {
	display: inline;
	margin: 0;
	font-size: inherit;
}

/* ============================================================
   Что прячем, пока человек работает с квизом или заполняет поле

   У плагина квиза уже есть такое правило для чужого чата и прежней панели
   мессенджеров — новые элементы в него просто не попали. Из-за этого круглая
   кнопка чата вставала прямо на поле ввода телефона, а нижняя панель
   закрывала кнопку отправки.
   ============================================================ */
body.mpq-focus .mp-chat-btn,
body.mpq-modal-open .mp-chat-btn,
body.mpq-focus .mp-bar,
body.mpq-modal-open .mp-bar {
	visibility: hidden !important;
}

/* Пока человек печатает в поле, кнопка чата не должна закрывать это поле. */
body.mp-typing .mp-chat-btn {
	visibility: hidden;
}

/* ============================================================
   Видео первого экрана

   Ролик горизонтальный, 640×360, а контейнер задавал ему фиксированную
   высоту 315 px. На планшете при ширине 245 px это давало вертикальную
   рамку, в которой больше половины площади занимали чёрные поля.
   Пропорции вместо фиксированной высоты убирают поля на любой ширине.

   Селектор с .production обязателен: базовое правило объявлено инлайном
   в шаблоне первого экрана и при равной силе перебивало бы это.
   ============================================================ */
.production .production-video video.js-video {
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #14110f;
}

.about-img .js-video-wrap video.js-video {
	height: auto;
	aspect-ratio: 16 / 9;
	background: #14110f;
}

@media (min-width: 768px) and (max-width: 991px) {
	.about-img .js-video-wrap video.js-video { height: auto; }
}

@media (max-width: 575px) {
	.production .production-video video.js-video { height: auto; }
}

/* Строка согласия занимала 81 px при содержимом в 16 px и оставляла провал
   между формой и примечанием.

   Причина — во flex-раскладке этого конкретного label: ни padding, ни border,
   ни min-height у него не заданы, а вычисленная высота всё равно 81 px.
   Разбираться в источнике дороже, чем уйти от flex: обычный поток с
   выключкой по базовой линии даёт предсказуемые 17 px. */
.production .hero-form__consent,
.lp-hero .lp-form__consent,
.mp-form .mp-form__consent {
	display: block;
	min-height: 0;
	line-height: 1.35;
}

.production .hero-form__consent input,
.lp-hero .lp-form__consent input,
.mp-form .mp-form__consent input {
	display: inline-block;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	min-height: 0;
	margin: -2px 6px 0 0;
}

.production .hero-form__consent span,
.lp-hero .lp-form__consent span,
.mp-form .mp-form__consent span {
	display: inline;
	line-height: 1.35;
}

/* ============================================================
   Поля форм при вертикальной раскладке

   flex: 1 1 210px задаёт базовый размер по ГЛАВНОЙ оси. Пока строка
   горизонтальная, это ширина. Как только на телефоне включается
   flex-direction: column, те же 210 px становятся высотой — поле телефона
   вырастало до 210 px, а выпадающий список до 230 px, и форма замера
   занимала 723 px вместо примерно двухсот пятидесяти.

   Правило собрано в одном месте: тот же дефект был во всех трёх формах.
   ============================================================ */
@media (max-width: 575px) {
	.hero-form__row > *,
	.mp-form__row > *,
	.lp-form__row > * {
		flex: 0 0 auto;
	}

	.hero-form__input,
	.mp-form__input,
	.mp-form__select,
	.lp-form__input {
		width: 100%;
	}
}

/* Подпись про время ответа теперь стоит и в форме обратного звонка,
   где раньше человек отправлял номер, не зная, когда ему перезвонят. */
.form-inline .mp-form__note,
.checkboxs + .mp-form__note {
	width: 100%;
	margin: 6px 0 0;
	font-size: 12px;
	color: #999;
	text-align: left;
}

/* ============================================================
   Контакты в подвале

   Раньше подвал состоял из логотипа, ссылки на ВК и двух колонок ссылок —
   ни телефона, ни адреса, ни мессенджеров. Человек, который ищет контакты
   внизу страницы (а это привычное место), не находил там ничего.
   ============================================================ */
.footer-contacts {
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.5;
}

.footer-contacts__tel {
	display: inline-block;
	font-family: "robotobold", arial, sans-serif;
	font-size: 20px;
	line-height: 1.2;
}

.footer-contacts__mail {
	display: block;
	margin-top: 4px;
}

.footer-contacts__msg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 8px;
}

.footer-contacts__adr {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #777;
}

.footer-contacts__adr span {
	display: block;
	color: #999;
}

/* График работы в шапке — на месте второго номера.
   Второй номер занимал целую строку и на 320 px подпирал иконки мессенджеров. */
.tel__hours {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	color: #777;
	font-weight: normal;
	white-space: nowrap;
}

.footer-contacts__tel2 {
	display: block;
	margin-top: 2px;
	font-size: 16px;
}

/* ============================================================
   Первый экран (02.09.2026, по макету заказчика)

   Фото — отдельным блоком сверху, а не фоном под текстом: на телефоне
   фон читался как тёмное пятно, и самой работы было не видно.
   На десктопе фото уходит в левую колонку.
   ============================================================ */
.hero {
	padding: 0 0 8px;
}

.hero__grid {
	background: #23231f;
	border-radius: 14px;
	overflow: hidden;
}

/* --- фото --- */
.hero__media {
	position: relative;
	line-height: 0;
	background: #efe9df;
}

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

.hero__badge {
	position: absolute;
	left: 12px;
	top: 10px;
	padding: 4px 9px;
	border-radius: 20px;
	background: rgba(35, 35, 31, .72);
	color: #f1efe8;
	font-size: 11px;
	line-height: 1.4;
}

/* --- текст --- */
.hero__body {
	padding: 16px;
	color: #e8e5de;
}

.hero .hero__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 500;
	color: #fff;
	text-align: left;
	text-transform: none;
}

.hero .hero__price {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #ef9f27;
	text-align: left;
	text-transform: none;
}

.hero .hero__lead {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: #c9c6be;
	text-align: left;
	text-transform: none;
}

.hero__list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.hero__list li {
	position: relative;
	padding-left: 24px;
	font-size: 13px;
	line-height: 1.45;
	color: #e8e5de;
}

.hero__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #97c459;
	font-size: 15px;
	line-height: 1.3;
}

/* --- строка доверия --- */
.hero__trust {
	display: block;
	margin-top: 14px;
	padding: 9px 11px 9px 32px;
	position: relative;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	font-size: 12px;
	line-height: 1.45;
	color: #c9c6be;
	text-decoration: none;
}

.hero__trust::before {
	content: "★";
	position: absolute;
	left: 11px;
	top: 8px;
	color: #ef9f27;
	font-size: 14px;
}

.hero__trust:hover,
.hero__trust:focus {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	text-decoration: none;
}

.hero .hero__example {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: #9e9b94;
	text-align: left;
	text-transform: none;
}

/* --- главное действие --- */
.hero .hero__cta {
	display: block;
	margin-top: 14px;
	padding: 15px 12px;
	border-radius: 8px;
	background: #e8551f;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background .2s;
}

.hero .hero__cta:hover,
.hero .hero__cta:focus {
	background: #cf4515;
	color: #fff;
	text-decoration: none;
}

.hero .hero__cta-note {
	margin: 7px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #b0ada6;
	text-align: center;
	text-transform: none;
}

/* --- запасной путь: телефон --- */
.hero__alt {
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	text-align: center;
}

.hero__alt-link {
	padding: 0;
	border: 0;
	background: none;
	color: #e8e5de;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hero__alt-link:hover { color: #fff; }
.hero__alt-link[hidden] { display: none; }

/* Контакты под кнопкой — только на странице регионов: оттуда чаще пишут
   в мессенджер, чем заполняют форму. */
.hero__contacts {
	margin: 0 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	justify-content: center;
	font-size: 14px;
}

.hero__contacts a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.hero__contacts a:hover,
.hero__contacts a:focus { color: #fff; border-bottom-color: #fff; }

@media (min-width: 768px) {
	.hero__contacts { justify-content: flex-start; }
}

.hero .hero__hours {
	margin: 9px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #c9c6be;
	text-align: center;
	text-transform: none;
}

/* --- форма телефона внутри первого экрана --- */
.hero .hero-form {
	margin: 12px 0 0;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.hero .hero-form[hidden] { display: none; }

.hero .hero-form__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hero .hero-form__input {
	flex: 1 1 190px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
	background: #fff;
	color: #26211e;
	font-size: 16px;
	line-height: 1.2;
}

.hero .hero-form__btn {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 0;
	border-radius: 6px;
	background: #e8551f;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}

.hero .hero-form__btn:hover:not([disabled]) { background: #cf4515; }

.hero .hero-form__consent {
	display: block;
	margin: 9px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #c9c6be;
	text-transform: none;
}

.hero .hero-form__consent input {
	display: inline-block;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	margin: -2px 6px 0 0;
}

.hero .hero-form__consent span {
	display: inline;
	font-size: 12px;
	color: #c9c6be;
	line-height: 1.35;
}

.hero .hero-form__consent a { color: #e8e5de; text-decoration: underline; }

@media (max-width: 575px) {
	.hero .hero-form__row { flex-direction: column; }
	.hero .hero-form__row > * { flex: 0 0 auto; }
	.hero .hero-form__btn { width: 100%; }
}

/* --- десктоп: фото слева, текст справа --- */
@media (min-width: 768px) {
	.hero { padding: 14px 0 10px; }

	.hero__grid {
		display: grid;
		grid-template-columns: minmax(280px, 42%) 1fr;
		align-items: stretch;
		border-radius: 16px;
	}

	.hero__media img { height: 100%; min-height: 380px; }

	.hero__body { padding: 28px 32px; }

	.hero .hero__title { font-size: 30px; }
	.hero .hero__price { font-size: 17px; margin-top: 10px; }
	.hero .hero__lead { font-size: 15px; margin-top: 14px; max-width: 60ch; }
	.hero__list li { font-size: 14px; }
	.hero .hero__cta { display: inline-block; padding: 15px 34px; }
	.hero .hero__cta-note { text-align: left; }
	.hero__alt { text-align: left; }
	.hero .hero__hours { text-align: left; }
	.hero .hero-form { margin-left: 0; }
}

@media (min-width: 1200px) {
	.hero .hero__title { font-size: 34px; }
	.hero__media img { min-height: 430px; }
}

/* ------------------------------------------------------------
   Невысокие телефоны

   На экране 360 x 690 главная кнопка уходила под сгиб: фото, заголовок,
   цена, подзаголовок, четыре пункта и строка доверия давали 750 px до неё.
   Уплотняем отступы и фото, но только там, где высоты действительно мало —
   на телефонах вроде iPhone 14 Pro (844 px) макет остаётся просторным.
   Доступность кнопки при этом обеспечивает нижняя панель: она включается,
   как только кнопка уходит с экрана.
   ------------------------------------------------------------ */
@media (max-width: 767px) and (max-height: 780px) {
	.hero__media img { height: 126px; }
	.hero__body { padding: 13px; }
	.hero .hero__title { font-size: 19px; line-height: 1.2; }
	.hero .hero__price { margin-top: 5px; }
	.hero .hero__lead { margin-top: 8px; line-height: 1.45; }
	.hero__list { margin-top: 9px; gap: 4px; }
	/* padding пишем целиком: сокращённая запись сбрасывала левый отступ
	   под звёздочку, и она наезжала на текст. */
	.hero__trust { margin-top: 9px; padding: 7px 10px 7px 30px; }
	.hero .hero__example { margin-top: 6px; }
	.hero .hero__cta { margin-top: 9px; padding: 13px 12px; }
	.hero__alt { margin-top: 11px; padding-top: 10px; }
}

/* Нижняя панель из четырёх кнопок (макет 02.09.2026). */
@media (max-width: 767px) {
	.mp-bar__item { flex: 1 1 25%; font-size: 11px; }
	.mp-bar__item + .mp-bar__item { border-left: 1px solid #efece8; }
}

@media (max-width: 360px) {
	.mp-bar__item { font-size: 10px; }
}

/* ============================================================
   Видеоплеер

   Эти правила жили инлайном в шаблоне первого экрана и обслуживали все
   видео на сайте. При переписывании шаблона они пропали вместе с ним:
   видео в блоке о компании потеряло ширину, стало 640 px по натуральному
   размеру и растянуло страницу на 295 px вправо.
   ============================================================ */
.js-video-wrap {
	position: relative;
	display: block;
	line-height: 0;
	max-width: 100%;
}

.js-video-wrap video.js-video {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #14110f;
	display: block;
}

.js-video-play {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.js-video-play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .65);
	transition: background .2s;
}

.js-video-play::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-38%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.js-video-play:hover::before,
.js-video-play:focus-visible::before { background: #e2231a; }

.js-video-play:focus-visible {
	outline: 3px solid #e2231a;
	outline-offset: 2px;
}

.js-video-wrap.is-playing .js-video-play { display: none; }