/* ============================================================
   Первый экран — 18.09.2026. Перенос вёрстки заказчика
   (soft-wall-panels) на сайт один в один.

   Пропорции, отступы, цвета и правила переносов взяты из
   css/style.css исходной вёрстки без пересчёта: размеры заданы
   в cqw — процентах от ширины самой карточки, — поэтому композиция
   сохраняется на любом экране.

   Отличия от исходника — только там, где вёрстка встречается с сайтом:
     — имена классов с приставкой mp-hero, чтобы не конфликтовать
       с bootstrap и со старым первым экраном (.hero остался на
       странице «Регионы», у неё свой шаблон);
     — шрифт Manrope лежит у нас, а не на Google Fonts;
     — карточка выходит из узкого .container темы (1170 px) на всю
       ширину окна, как в макете;
     — кнопки и форма подключены к рабочим механизмам сайта (квиз
       mp-quiz и обработчик заявок), а не к демонстрационным
       модальным окнам вёрстки.
   ============================================================ */

/* Manrope, переменное начертание 400–800, кириллица и латиница.
   Лежит у нас: шрифт первого экрана не должен зависеть
   от доступности fonts.gstatic.com. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-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;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-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;
}

/* ------------------------------------------------------------------
   Секция во всю ширину и фон страницы из макета.
   ------------------------------------------------------------------ */
.mp-hero {
	--mph-accent: #ff5a14;
	--mph-accent-light: #ffad6e;
	--mph-muted: #cecbc7;
	--mph-radius: 24px;

	background:
		radial-gradient(ellipse 58% 230px at 50% -50px, rgba(60, 49, 43, .65), transparent 92%),
		radial-gradient(ellipse 26% 280px at 14% -35px, #e6bb93, transparent 100%),
		radial-gradient(ellipse 24% 190px at 79% -20px, #e5c6ac, transparent 100%),
		#f1ebe5;
}

.mp-hero__page {
	width: calc(100% - 40px);
	max-width: 1920px;
	margin: 0 auto;
	padding: 7px 0 22px;
}

/* На телефоне шапка — белая карточка с отступами от краёв, и под ней должен
   быть тёплый фон первого экрана, а не белая полоса. Шапка приклеена к верху,
   место под неё держит отступ .wrapper — поэтому секцию поднимаем на ту же
   величину и возвращаем её отступом. */
@media (max-width: 767px) {
	.mp-hero { margin-top: -72px; padding-top: 72px; }
}

@media (max-width: 374px) {
	.mp-hero { margin-top: -68px; padding-top: 68px; }
}

/* Хлебные крошки живут внутри секции — как в макете, на тёплом фоне. */
.mp-hero .mp-hero__crumbs {
	margin: 0 0 13px;
	padding-left: 10px;
	color: #393730;
	font-family: "Manrope", "Roboto", Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	text-transform: none;
}

.mp-hero__crumbs a { color: #393730; text-decoration: none; }

/* Сама функция крошек отдаёт div с шириной темы (1170 / 970 / 750) и
   отступом слева 70 px — внутри секции это выталкивало строку за экран.
   Ширину и отступы снимаем, оформление берёт .mp-hero__crumbs. */
.mp-hero .mp-hero__crumbs .kama_breadcrumbs {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-align: left;
}
.mp-hero__crumbs a:hover { color: #a2521f; text-decoration: underline; }

.mp-hero__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Карточка. cqw считается от её ширины.
   ------------------------------------------------------------------ */
.mp-hero__card {
	position: relative;
	display: grid;
	grid-template-columns: 52.5% 47.5%;
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	border-radius: var(--mph-radius);
	background: #30291f;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
	font-family: "Manrope", "Roboto", Arial, sans-serif;
	font-weight: 400;
	color: #f7f7f5;
	-webkit-font-smoothing: antialiased;
}

/* Сброс: тема задаёт заголовкам верхний регистр и выравнивание по центру,
   спискам — маркеры, ссылкам — подчёркивание. Внутри карточки гасим. */
.mp-hero__card *,
.mp-hero__card *::before,
.mp-hero__card *::after { box-sizing: border-box; }

.mp-hero__card p,
.mp-hero__card ul,
.mp-hero__card li,
.mp-hero__card h1 {
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
	list-style: none;
}

.mp-hero__card a { text-decoration: none; }
.mp-hero__card img { max-width: 100%; }
.mp-hero__card button { font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mp-hero__card input { font: inherit; }

.mp-hero__icon { display: inline-block; flex: 0 0 auto; width: 32px; height: 32px; fill: none; }

/* --- фотография --- */
.mp-hero__visual { position: relative; min-width: 0; min-height: 100%; background: #efe9df; }
.mp-hero__visual picture { display: block; position: absolute; inset: 0; }
.mp-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.mp-hero__badge {
	position: absolute;
	left: 1.1cqw;
	top: 1cqw;
	padding: .35cqw .8cqw;
	border-radius: 20px;
	background: rgba(24, 22, 19, .74);
	color: #f1efe8;
	font-size: .85cqw;
	line-height: 1.4;
}

/* --- тёмная панель --- */
.mp-hero__content {
	position: relative;
	z-index: 1;
	min-width: 0;
	--mph-pad: 2.2cqw;
	padding: 1.95cqw var(--mph-pad) 1.9cqw;
	border-radius: var(--mph-radius);
	background:
		radial-gradient(ellipse 60% 50% at 104% 45%, rgba(119, 83, 53, .23), transparent 90%),
		radial-gradient(ellipse 50% 35% at 0% 0%, rgba(115, 89, 64, .18), transparent 92%),
		radial-gradient(ellipse 60% 35% at 70% 110%, rgba(88, 78, 60, .09), transparent 95%),
		linear-gradient(120deg, #191918 0%, #111211 48%, #171615 100%);
}

/* Содержимое тёмной панели — колонка с явным порядком. На широком экране
   порядок макетный, в одну колонку кнопка поднимается к фактам (см. ниже). */
.mp-hero__content { display: flex; flex-direction: column; }
.mp-hero .mp-hero__eyebrow { order: 1; }
.mp-hero .mp-hero__title { order: 2; }
.mp-hero__facts { order: 3; }
.mp-hero__more { order: 4; }
.mp-hero__actions { order: 5; }
.mp-hero .hero-form { order: 6; }
.mp-hero .mp-hero__hint { order: 7; }
.mp-hero__footer { order: 8; }

.mp-hero .mp-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 1.8cqw;
	margin: 0;
	color: #d6d3d0;
	font-size: .84cqw;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .23em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mp-hero__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	min-width: 35px;
	background: rgba(244, 239, 235, .49);
}

.mp-hero .mp-hero__title {
	margin: 1.4cqw 0 1.1cqw;
	font-family: inherit;
	font-size: 3.35cqw;
	font-weight: 800;
	line-height: .97;
	letter-spacing: -.095cqw;
	color: #f7f7f5;
}

/* В макете заголовок разбит на строки вручную. Здесь он приходит из поля
   страницы и у двадцати страниц разный, поэтому на свою строку уводим
   выделенный хвост — граница акцента всегда совпадает с переносом. */
.mp-hero__accent { display: block; color: var(--mph-accent-light); }

/* --- цена, срок, гарантия --- */
.mp-hero__facts {
	display: grid;
	grid-template-columns: 1.13fr 1fr 1fr;
	align-items: start;
	column-gap: 1.1cqw;
}

.mp-hero__fact { display: flex; align-items: flex-start; gap: 1.02cqw; min-width: 0; }

.mp-hero__fact-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 4.25cqw;
	aspect-ratio: 1;
	color: var(--mph-accent-light);
	border-radius: 50%;
	border: 1px solid rgba(211, 142, 83, .19);
	background:
		radial-gradient(circle at 10% 0, rgba(209, 145, 86, .39), transparent 54%),
		radial-gradient(circle at 92% 110%, rgba(188, 125, 68, .31), transparent 61%),
		linear-gradient(135deg, #2b2925, #1a1a19 73%);
	box-shadow: inset 0 0 3px rgba(255, 208, 156, .12), 0 1px 1px rgba(0, 0, 0, .24);
}

.mp-hero__fact-icon .mp-hero__icon { width: 2.22cqw; height: 2.22cqw; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.mp-hero__fact-body { display: block; min-width: 0; padding-top: .2cqw; }
.mp-hero__fact-title { display: block; font-size: 1.25cqw; line-height: 1.15; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; }
.mp-hero__fact-caption { display: block; margin-top: .35cqw; color: var(--mph-muted); font-size: 1.015cqw; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }

.mp-hero .mp-hero__lead {
	margin: .85cqw 0 0;
	color: #f0efed;
	font-size: 1.355cqw;
	font-weight: 400;
	line-height: 1.27;
	letter-spacing: -.018em;
}

/* --- список условий --- */
.mp-hero .mp-hero__benefits {
	display: grid;
	gap: .5cqw;
	margin: 1cqw 0 1cqw;
}

.mp-hero .mp-hero__benefits li {
	display: flex;
	align-items: center;
	gap: 1.05cqw;
	min-width: 0;
	font-size: 1.19cqw;
	line-height: 1.35;
	letter-spacing: -.014em;
	color: #f7f7f5;
}

.mp-hero__benefits .mp-hero__icon { width: 1.78cqw; height: 1.78cqw; color: #ffab55; }

/* --- рейтинг Яндекс.Карт --- */
.mp-hero .mp-hero__proof {
	display: flex;
	align-items: center;
	gap: .83cqw;
	min-width: 0;
	min-height: 3.2cqw;
	padding: .25cqw .6cqw .25cqw .94cqw;
	border: 1px solid rgba(226, 181, 134, .08);
	border-radius: 1cqw;
	background:
		radial-gradient(ellipse 17% 110% at 0% 50%, rgba(200, 135, 74, .27), transparent 100%),
		linear-gradient(100deg, #292725, #222322 65%, #282827);
	box-shadow: inset 0 1px 5px rgba(233, 208, 181, .06), 0 4px 16px rgba(0, 0, 0, .07);
	color: #f7f7f5;
	transition: border-color .18s ease;
}

.mp-hero .mp-hero__proof:hover,
.mp-hero .mp-hero__proof:focus { color: #fff; border-color: rgba(255, 173, 110, .4); text-decoration: none; }

.mp-hero__proof-star { width: 1.82cqw; height: 1.82cqw; color: var(--mph-accent-light); }
.mp-hero__proof-text { display: flex; align-items: center; gap: .63cqw; font-size: .955cqw; line-height: 1.4; letter-spacing: -.016em; white-space: nowrap; }
.mp-hero__proof-dot { font-size: .7em; }
.mp-hero__proof-avatars { display: block; flex: 0 0 auto; width: 11cqw; margin-left: auto; }
.mp-hero__proof-avatars img { display: block; width: 100%; height: auto; }

/* --- кнопки --- */
.mp-hero__actions { display: grid; grid-template-columns: 1.74fr 1fr; gap: .82cqw; margin-top: .6cqw; }

.mp-hero .mp-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	min-height: 60px;
	padding: 15px 22px;
	color: #fff;
	border: 1px solid transparent;
	border-radius: 13px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mp-hero__actions > .mp-hero__btn { min-height: 4.48cqw; border-radius: .88cqw; }

.mp-hero .mp-hero__btn--primary {
	justify-content: space-between;
	border-color: #ff6b2b;
	background: linear-gradient(105deg, #ff5004 0%, #ff5d16 100%);
	box-shadow: 0 5px 18px rgba(232, 67, 0, .11), inset 0 1px 0 rgba(255, 199, 128, .2);
}

.mp-hero__actions .mp-hero__btn--primary {
	gap: .65cqw;
	padding: .9cqw 1.48cqw;
	font-size: 1.255cqw;
	font-weight: 500;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.mp-hero__actions .mp-hero__btn--primary .mp-hero__icon { width: 1.9cqw; height: 1.9cqw; }
.mp-hero .mp-hero__btn--primary:active { transform: translateY(1px); }

.mp-hero .mp-hero__btn--call {
	gap: .7cqw;
	padding: .65cqw .75cqw;
	border-color: #d4d3d1;
	background: linear-gradient(120deg, #111211, #171716);
	box-shadow: inset 0 0 0 3px #171817, inset 0 0 0 4px rgba(238, 238, 233, .13);
}

.mp-hero__btn-phone {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.55cqw;
	height: 2.55cqw;
	border-radius: 50%;
	background: radial-gradient(circle at 25% 0, #2e2e2c, transparent 75%);
}

.mp-hero__btn-phone .mp-hero__icon { width: 1.8cqw; height: 1.8cqw; }
.mp-hero__btn-copy { display: grid; gap: .22cqw; text-align: left; }
.mp-hero__btn-title { font-size: 1.08cqw; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mp-hero__btn-caption { font-size: .82cqw; font-weight: 400; color: var(--mph-muted); white-space: nowrap; }

/* --- подпись под кнопками --- */
.mp-hero .mp-hero__hint {
	display: flex;
	align-items: center;
	gap: .72cqw;
	margin: .8cqw 0 0;
	color: #dedcda;
	font-size: .94cqw;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -.008em;
}

.mp-hero__hint .mp-hero__icon { width: 1.38cqw; height: 1.58cqw; color: #f4f2ee; }
.mp-hero__hint i { font-style: normal; display: inline-block; margin: 0 .48cqw; font-size: .85em; }

/* --- нижняя строка --- */
.mp-hero__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 1.2cqw;
	padding-top: 1.35cqw;
	border-top: 1px solid rgba(248, 244, 237, .43);
	color: #e0deda;
}

.mp-hero .mp-hero__example {
	display: flex;
	align-items: center;
	gap: .72cqw;
	min-width: 0;
	font-size: .845cqw;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -.015em;
}

.mp-hero__example .mp-hero__icon { width: 1.42cqw; height: 1.42cqw; }

.mp-hero .mp-hero__hours {
	flex: 0 0 auto;
	font-size: .825cqw;
	font-weight: 400;
	line-height: 1.45;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Форма телефона. Разметка и обработчик — сайта, оформление — из
   макета: поля и кнопка из модального окна обратного звонка.
   ------------------------------------------------------------------ */
.mp-hero .hero-form { margin: 1cqw 0 0; text-align: left; }
.mp-hero .hero-form[hidden] { display: none; }
.mp-hero .hero-form__row { display: flex; gap: 10px; flex-wrap: wrap; }

.mp-hero .hero-form__input {
	flex: 1 1 220px;
	min-width: 0;
	height: 54px;
	padding: 12px 15px;
	color: #fff;
	border: 1px solid #62574b;
	border-radius: 10px;
	background: #232320;
	font-size: 17px;
	line-height: 1.2;
}

.mp-hero .hero-form__input::placeholder { color: #948c81; }
.mp-hero .hero-form__input:focus { outline: 2px solid var(--mph-accent-light); outline-offset: 2px; }

.mp-hero .hero-form__btn {
	flex: 0 0 auto;
	height: 54px;
	padding: 12px 26px;
	border: 1px solid #ff6b2b;
	border-radius: 13px;
	background: linear-gradient(105deg, #ff5004 0%, #ff5d16 100%);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.mp-hero .hero-form__btn[disabled] { opacity: .65; cursor: wait; }

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

.mp-hero .hero-form__consent input {
	display: inline-block;
	vertical-align: middle;
	width: 17px;
	height: 17px;
	margin: -2px 8px 0 0;
	accent-color: var(--mph-accent);
}

.mp-hero .hero-form__consent span { display: inline; color: #bdb6ae; font-size: 12px; line-height: 1.6; }
.mp-hero .hero-form__consent a { color: var(--mph-accent-light); text-decoration: underline; }

.mp-hero .form-status,
.mp-hero .form-message { margin: 16px 0 0; color: #ffbd8b; font-size: 14px; line-height: 1.5; }

/* Видимый фокус — как в макете. */
.mp-hero a:focus-visible,
.mp-hero button:focus-visible,
.mp-hero input:focus-visible { outline: 3px solid #ffb177; outline-offset: 5px; }

@media (hover: hover) {
	.mp-hero .mp-hero__btn--primary:hover,
	.mp-hero .hero-form__btn:hover:not([disabled]) { background: linear-gradient(105deg, #ff6722, #ff722f); box-shadow: 0 7px 24px rgba(255, 84, 13, .24); }
	.mp-hero .mp-hero__btn--call:hover { border-color: var(--mph-accent-light); background: #29231d; }
}

/* ------------------------------------------------------------------
   Планшет: фото сохраняется крупным, текст — читаемым.
   Пороги и размеры — из макета.
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.mp-hero__page { width: calc(100% - 32px); padding-top: 9px; }
	.mp-hero__card { grid-template-columns: 1fr; }

	/* Высота фотографии ограничена и шириной, и высотой экрана: на низких
	   телефонах пропорция из макета уводила кнопку расчёта под сгиб. */
	.mp-hero__visual {
		min-height: 0;
		aspect-ratio: auto;
		height: min(34vh, 52vw);
	}

	/* Порядок в одну колонку: обещание — заголовок — три факта — кнопка.
	   Подзаголовок, условия и рейтинг уходят под кнопку: в колонке они
	   занимают две трети экрана, и кнопка расчёта оказывалась под сгибом. */
	.mp-hero__actions { order: 4; }
	.mp-hero .hero-form { order: 5; }
	.mp-hero .mp-hero__hint { order: 6; }
	.mp-hero__more { order: 7; }
	.mp-hero__footer { order: 8; }
	.mp-hero__photo { object-position: center 53%; }
	.mp-hero__content { --mph-pad: 32px; padding: 32px; border-radius: 0; }
	.mp-hero__badge { left: 14px; top: 14px; padding: 5px 11px; font-size: 12px; }
	.mp-hero .mp-hero__eyebrow { gap: 24px; font-size: 12px; }
	.mp-hero .mp-hero__title { margin: 25px 0 27px; font-size: clamp(40px, 5.1vw, 57px); line-height: 1.02; letter-spacing: -.035em; }
	.mp-hero__facts { grid-template-columns: 1.12fr 1fr 1fr; gap: 24px; }
	.mp-hero__fact { gap: 14px; }
	.mp-hero__fact-icon { width: 62px; }
	.mp-hero__fact-icon .mp-hero__icon { width: 33px; height: 33px; }
	.mp-hero__fact-body { padding-top: 4px; }
	.mp-hero__fact-title { font-size: 19px; }
	.mp-hero__fact-caption { margin-top: 6px; font-size: 15px; }
	.mp-hero .mp-hero__lead { margin-top: 24px; font-size: 21px; }
	.mp-hero .mp-hero__benefits { gap: 13px; margin: 26px 0 27px; }
	.mp-hero .mp-hero__benefits li { gap: 16px; font-size: 18px; }
	.mp-hero__benefits .mp-hero__icon { width: 28px; height: 28px; }
	.mp-hero .mp-hero__proof { gap: 14px; min-height: 58px; padding: 5px 12px 5px 16px; border-radius: 14px; }
	.mp-hero__proof-star { width: 28px; height: 28px; }
	.mp-hero__proof-text { gap: 10px; font-size: 14px; }
	.mp-hero__proof-avatars { width: 165px; }
	.mp-hero__actions { grid-template-columns: 1.65fr 1fr; gap: 14px; margin-top: 14px; }
	.mp-hero__actions > .mp-hero__btn { min-height: 72px; border-radius: 13px; }
	.mp-hero__actions .mp-hero__btn--primary { gap: 12px; padding: 18px 23px; font-size: 19px; }
	.mp-hero__actions .mp-hero__btn--primary .mp-hero__icon { width: 29px; height: 29px; }
	.mp-hero .mp-hero__btn--call { gap: 12px; padding: 12px; }
	.mp-hero__btn-phone { width: 42px; height: 42px; }
	.mp-hero__btn-phone .mp-hero__icon { width: 29px; height: 29px; }
	.mp-hero__btn-copy { gap: 4px; }
	.mp-hero__btn-title { font-size: 17px; }
	.mp-hero__btn-caption { font-size: 12px; }
	.mp-hero .mp-hero__hint { gap: 12px; margin-top: 16px; font-size: 14px; }
	.mp-hero__hint .mp-hero__icon { width: 24px; height: 26px; }
	.mp-hero__hint i { margin: 0 7px; }
	.mp-hero__footer { gap: 12px; margin-top: 23px; padding-top: 24px; }
	.mp-hero .mp-hero__example { gap: 11px; font-size: 13px; }
	.mp-hero__example .mp-hero__icon { width: 22px; height: 22px; }
	.mp-hero .mp-hero__hours { font-size: 13px; }
	.mp-hero .hero-form { margin-top: 14px; }
}

@media (min-width: 641px) and (max-width: 800px) {
	.mp-hero__content { --mph-pad: 26px; padding: 26px; }
	.mp-hero .mp-hero__title { font-size: 5.08vw; }
	.mp-hero .mp-hero__eyebrow { font-size: 10px; gap: 18px; }
	.mp-hero__facts { gap: 13px; }
	.mp-hero__fact { gap: 11px; }
	.mp-hero__fact-icon { width: 53px; }
	.mp-hero__fact-icon .mp-hero__icon { width: 29px; height: 29px; }
	.mp-hero__fact-title { font-size: 17px; }
	.mp-hero__fact-caption { font-size: 13px; }
	.mp-hero .mp-hero__proof { gap: 10px; padding: 6px 10px; }
	.mp-hero__proof-star { width: 24px; height: 24px; }
	.mp-hero__proof-text { gap: 8px; font-size: 12px; }
	.mp-hero__proof-avatars { width: 140px; }
	.mp-hero__actions .mp-hero__btn--primary { padding: 14px; font-size: 16px; }
	.mp-hero .mp-hero__btn--call { gap: 7px; }
	.mp-hero__btn-phone { width: 32px; height: 32px; }
	.mp-hero__btn-phone .mp-hero__icon { width: 25px; height: 25px; }
	.mp-hero__btn-title { font-size: 15px; }
	.mp-hero__btn-caption { font-size: 11px; }
	.mp-hero .mp-hero__example,
	.mp-hero .mp-hero__hours { font-size: 11px; }
}

/* ------------------------------------------------------------------
   Телефон.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.mp-hero { --mph-radius: 20px; }
	.mp-hero__page { width: calc(100% - 24px); padding: 9px 0 12px; }
	.mp-hero .mp-hero__crumbs { margin-bottom: 10px; padding-left: 6px; font-size: 13px; line-height: 21px; }
	.mp-hero__visual { height: min(32vh, 76vw); }
	.mp-hero__photo { object-position: center 51%; }

	/* Тёмная панель заходит на фотографию и скруглена сверху — как в макете. */
	.mp-hero__content {
		position: relative;
		z-index: 1;
		--mph-pad: 21px;
		margin-top: -22px;
		padding: 24px var(--mph-pad) 25px;
		border-radius: 22px 22px 0 0;
	}

	.mp-hero .mp-hero__eyebrow { display: block; font-size: clamp(8px, 2.25vw, 11px); letter-spacing: .16em; white-space: normal; }
	.mp-hero__eyebrow::after { display: none; }
	.mp-hero .mp-hero__title { margin: 19px 0 24px; font-size: clamp(29px, 8.4vw, 48px); line-height: 1.06; letter-spacing: -.045em; }
	.mp-hero__facts { grid-template-columns: 1.06fr 1fr 1fr; column-gap: 8px; }
	.mp-hero__fact { display: flex; align-items: flex-start; gap: 7px; }
	.mp-hero__fact-icon { width: 30px; margin-bottom: 0; }
	.mp-hero__fact-icon .mp-hero__icon { width: 17px; height: 17px; }
	.mp-hero__fact-body { padding-top: 1px; }
	.mp-hero__fact-title { min-height: 0; font-size: 11.5px; line-height: 1.25; letter-spacing: -.03em; }
	.mp-hero__fact-caption { margin-top: 3px; font-size: 10px; line-height: 1.35; letter-spacing: -.02em; }
	.mp-hero .mp-hero__lead { margin-top: 0; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; }
	.mp-hero .mp-hero__benefits { gap: 13px; margin: 18px 0 0; }
	.mp-hero .mp-hero__benefits li { align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; }
	.mp-hero__benefits .mp-hero__icon { width: 23px; height: 23px; margin-top: 0; }
	.mp-hero .mp-hero__proof { gap: 10px; margin-top: 20px; padding: 12px 10px; border-radius: 13px; }
	.mp-hero__proof-star { width: 23px; height: 23px; }
	.mp-hero__proof-text { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; white-space: nowrap; }
	.mp-hero__proof-dot { display: none; }
	.mp-hero__proof-avatars { width: 99px; }
	.mp-hero__actions { grid-template-columns: 1fr; gap: 11px; margin-top: 20px; }
	.mp-hero__actions > .mp-hero__btn { min-height: 62px; border-radius: 12px; }
	.mp-hero__actions .mp-hero__btn--primary { gap: 8px; padding: 15px; font-size: 15px; letter-spacing: -.025em; white-space: normal; }
	.mp-hero__actions .mp-hero__btn--primary .mp-hero__icon { width: 25px; height: 25px; }
	.mp-hero .mp-hero__btn--call { justify-content: flex-start; gap: 11px; padding: 11px 16px; }
	.mp-hero__btn-phone { width: 36px; height: 36px; }
	.mp-hero__btn-phone .mp-hero__icon { width: 26px; height: 26px; }
	.mp-hero__btn-copy { gap: 3px; }
	.mp-hero__btn-title { font-size: 16px; }
	.mp-hero__btn-caption { font-size: 12px; }
	.mp-hero .mp-hero__hint { align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 12px; line-height: 1.7; }
	.mp-hero__hint .mp-hero__icon { width: 20px; height: 23px; margin-top: 2px; }
	.mp-hero__hint i { margin: 0 4px; }
	.mp-hero__footer { flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 21px; padding-top: 19px; }
	.mp-hero .mp-hero__example { align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.6; }
	.mp-hero__example .mp-hero__icon { width: 20px; height: 20px; margin-top: 1px; }
	.mp-hero .mp-hero__hours { margin-left: 30px; font-size: 12px; color: #b9b3ad; }
	.mp-hero .hero-form { margin-top: 13px; }
	.mp-hero .hero-form__row { flex-direction: column; }
	.mp-hero .hero-form__row > * { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------------------------
   Где кончается первый экран (одна колонка)

   В колонку всё содержимое карточки не помещается ни на одном телефоне:
   после кнопок идут подзаголовок, условия, рейтинг и строка с примером
   цены — это ещё около 350 px. Поэтому тёмная карточка заканчивается
   на кнопках и подписи к ним: ровно она и есть первый экран, и она
   укладывается в высоту экрана целиком.

   Всё, что ниже, продолжает ту же секцию, но на светлом фоне — видно,
   что экран закончился и дальше идёт продолжение. Ничего не скрывается:
   тексты остаются на странице и в коде в прежнем порядке.
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
	.mp-hero__content { padding-bottom: 26px; }

	.mp-hero__more,
	.mp-hero__footer {
		margin-left: calc(-1 * var(--mph-pad));
		margin-right: calc(-1 * var(--mph-pad));
		padding-left: var(--mph-pad);
		padding-right: var(--mph-pad);
		background: #f1ebe5;
	}

	.mp-hero__more {
		margin-bottom: 0;
		padding-top: 26px;
		padding-bottom: 0;
		border-radius: 22px 22px 0 0;
	}

	.mp-hero .mp-hero__lead { color: #2c2823; }
	.mp-hero .mp-hero__benefits li { color: #2c2823; }
	.mp-hero__benefits .mp-hero__icon { color: #c2611f; }

	.mp-hero__footer {
		margin-top: 0;
		padding-top: 20px;
		padding-bottom: 6px;
		border-top-color: rgba(60, 49, 43, .22);
		color: #4a443d;
	}

	.mp-hero .mp-hero__hours { color: #6b645b; }
}

@media (max-width: 640px) {
	.mp-hero__more { padding-top: 22px; }
	.mp-hero__content { padding-bottom: 22px; }
}

@media (max-width: 360px) {

	.mp-hero__content { --mph-pad: 17px; padding-right: 17px; padding-left: 17px; }
	.mp-hero .mp-hero__title { font-size: 28px; }
	.mp-hero__facts { gap: 8px; }
	.mp-hero__fact-title { font-size: 13px; }
	.mp-hero__fact-caption { font-size: 11px; }
	.mp-hero .mp-hero__proof { gap: 8px; padding: 10px 8px; }
	.mp-hero__proof-star { width: 20px; height: 20px; }
	.mp-hero__proof-text { font-size: 10px; }
	.mp-hero__proof-avatars { width: 83px; }
	.mp-hero__actions .mp-hero__btn--primary { padding: 12px; font-size: 13px; }
	.mp-hero__actions .mp-hero__btn--primary .mp-hero__icon { width: 23px; height: 23px; }
}

/* Широкое, но низкое окно (ноутбук с открытыми панелями браузера):
   две колонки остаются, но карточке нужно уложиться в высоту экрана. */
@media (min-width: 900px) and (max-height: 1000px) {
	.mp-hero__page { padding: 5px 0 12px; }
	.mp-hero .mp-hero__crumbs { margin-bottom: 8px; font-size: 14px; line-height: 19px; }
	.mp-hero__content { --mph-pad: 2cqw; padding: 1.6cqw var(--mph-pad) 1.5cqw; }
	.mp-hero .mp-hero__title { margin: 1.1cqw 0 .9cqw; font-size: 3.05cqw; }
	.mp-hero__fact-icon { width: 3.8cqw; }
	.mp-hero__fact-icon .mp-hero__icon { width: 2cqw; height: 2cqw; }
	.mp-hero .mp-hero__lead { margin-top: .7cqw; font-size: 1.25cqw; }
	.mp-hero .mp-hero__benefits { gap: .4cqw; margin: .8cqw 0 .8cqw; }
	.mp-hero .mp-hero__benefits li { font-size: 1.12cqw; line-height: 1.3; }
	.mp-hero .mp-hero__proof { min-height: 2.9cqw; }
	.mp-hero__actions > .mp-hero__btn { min-height: 4.1cqw; }
	.mp-hero__footer { margin-top: .9cqw; padding-top: 1cqw; }
}

/* ------------------------------------------------------------------
   Низкие экраны (старые телефоны, телефон в альбоме, узкое окно).
   Задача одна: фотография, заголовок, три факта и кнопка расчёта должны
   помещаться без прокрутки. Уплотняем только то, что стоит до кнопки.
   ------------------------------------------------------------------ */
@media (max-width: 899px) and (max-height: 900px) {
	.mp-hero__visual { height: min(27vh, 48vw); }
	.mp-hero__content { --mph-pad: 16px; margin-top: -18px; padding: 16px var(--mph-pad) 18px; border-radius: 18px 18px 0 0; }
	.mp-hero .mp-hero__title { margin: 9px 0 12px; font-size: clamp(21px, 6.4vw, 30px); line-height: 1.08; }
	.mp-hero .mp-hero__eyebrow { font-size: 9px; }
	.mp-hero__fact-icon { width: 26px; }
	.mp-hero__fact-icon .mp-hero__icon { width: 15px; height: 15px; }
	.mp-hero__fact-title { font-size: 10.5px; }
	.mp-hero__fact-caption { margin-top: 2px; font-size: 9.5px; }
	.mp-hero__actions { margin-top: 11px; gap: 7px; }
	.mp-hero__actions > .mp-hero__btn { min-height: 50px; }
	.mp-hero__actions .mp-hero__btn--primary { padding: 11px 13px; font-size: 13.5px; }
	.mp-hero .mp-hero__hint { margin-top: 9px; font-size: 11px; line-height: 1.45; }
}

/* Совсем низкие экраны — старые телефоны и телефон в альбоме.
   Здесь одного уплотнения мало: ужимаем и кнопки, и подпись под ними. */
@media (max-width: 899px) and (max-height: 640px) {
	.mp-hero__page { padding: 5px 0 8px; }
	.mp-hero .mp-hero__crumbs { margin-bottom: 6px; font-size: 12px; line-height: 17px; }
	.mp-hero__visual { height: min(18vh, 38vw); }
	.mp-hero__content { --mph-pad: 14px; margin-top: -14px; padding: 10px var(--mph-pad) 12px; border-radius: 14px 14px 0 0; }
	.mp-hero .mp-hero__title { margin: 7px 0 9px; font-size: clamp(17px, 5.4vw, 24px); line-height: 1.04; }
	.mp-hero__facts { column-gap: 6px; }
	.mp-hero__fact { gap: 5px; }
	.mp-hero__fact-icon { width: 22px; }
	.mp-hero__fact-icon .mp-hero__icon { width: 13px; height: 13px; }
	.mp-hero__fact-title { font-size: 9px; line-height: 1.2; }
	.mp-hero__fact-caption { margin-top: 1px; font-size: 8px; line-height: 1.25; }
	.mp-hero__actions { margin-top: 10px; gap: 6px; }
	.mp-hero__actions > .mp-hero__btn { min-height: 42px; border-radius: 10px; }
	.mp-hero__actions .mp-hero__btn--primary { padding: 9px 11px; font-size: 12.5px; }
	.mp-hero .mp-hero__btn--call { padding: 7px 11px; }
	.mp-hero__btn-phone { width: 28px; height: 28px; }
	.mp-hero__btn-phone .mp-hero__icon { width: 19px; height: 19px; }
	.mp-hero__btn-title { font-size: 13px; }
	.mp-hero__btn-caption { font-size: 10px; }
	.mp-hero .mp-hero__hint { margin-top: 4px; font-size: 10px; line-height: 1.4; }
	.mp-hero__hint .mp-hero__icon { width: 15px; height: 17px; }
	.mp-hero__content { padding-bottom: 10px; }
	.mp-hero__more { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-hero *,
	.mp-hero *::before,
	.mp-hero *::after { transition: none !important; animation: none !important; }
}

/* 06.10.2026: шесть фактов — сетка 3×2, колонки равные. */
.mp-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.15cqw; }
@media (max-width: 899px) { .mp-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 640px) { .mp-hero__facts { row-gap: 10px; } }
@media (max-width: 899px) and (max-height: 640px) { .mp-hero__facts { row-gap: 6px; } }

/* На телефоне шесть фактов в три колонки: значки забирали треть ширины,
   подписи ломались на 3–4 строки и кнопка уезжала под сгиб (06.10.2026). */
@media (max-width: 640px) {
	.mp-hero__fact-icon { display: none; }
}

/* Низкие телефоны (SE 1, 320×454): шести фактам нужно место — фото ниже. */
@media (max-width: 640px) and (max-height: 640px) {
	.mp-hero__visual { height: min(13vh, 30vw); }
}

/* Невысокие экраны: ряды фактов плотнее. */
@media (min-width: 900px) and (max-height: 1000px) { .mp-hero__facts { row-gap: .7cqw; } }
@media (max-width: 899px) and (max-height: 900px) { .mp-hero__facts { row-gap: 8px; } }