/* ===========================================================================
   Салон «Уют» — стили сайта. Редизайн, октябрь 2026 (вторая редакция).

   Из прежнего дизайна сохранены:
     · шрифт заголовков BebasNeue и их стиль: чёрный с синей частью;
     · палитра: синий, красная кнопка, лайм, зелёный, оранжевая цена,
       тёмная плита, фон страницы градиентом от тёплого к голубому;
     · первый экран (раздел 5): заголовок слева, слайдер справа.

   Второй шрифт — Onest: набор, кнопки, цены. Меню и малые заголовки — Golos Text
   (--f-sub). Unbounded и Steppe сняты.

   Формы, меню, окна, слайдер и появление блоков — эталон my-ui (css/ui/*),
   здесь только токены под этот сайт и слой вида.

   Язык блоков: белые плиты с крупным скруглением на градиентном фоне
   страницы, внутри — волосяные линии. Цвет несут три вещи: синий акцент,
   лаймовые кружки значков и купоны акций. Полос, толстых цветных границ
   и рисунков в фоне нет.

   Содержание:
     1. Токены              8. Акции               15. Отзывы
     2. База                9. Разделы текста      16. Вопросы
     3. Кнопки и мелочи    10. Таблицы             17. Форма и плита
     4. Шапка и меню       11. Шаги, карточки      18. Окно и просмотрщик
     5. Первый экран       12. Смежные разделы     19. Подвал и контакты
     6. Крошки, лид        13. Страницы            20. Уведомление о cookie
     7. Каталог            14. Работы              21. Уменьшенное движение
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Токены
   --------------------------------------------------------------------------- */

:root {
	/* Палитра прежнего дизайна */
	--c-ink:      #000;
	--c-text:     #222a33;   /* набор: чёрный на тон мягче заголовков        */
	--c-muted:    #5f6d7b;   /* вторичный текст, 5.2:1 на белом             */
	--c-blue:     #178FFF;
	--c-blue-2:   #0085FF;
	--c-blue-3:   #0076F6;   /* ссылки в тексте, наведение                  */
	--c-blue-4:   #0066FF;
	--c-red:      #FF2F2F;
	--c-lime:     #CAFF9B;
	--c-green:    #81E681;
	--c-orange:   #FF7A00;
	--c-grey:     #B8B8CC;
	--c-dark:     #191919;
	--c-line:     #C8DCEA;
	--c-hair:     #E4EDF3;   /* волосяные линии внутри белых плит           */
	--c-tint:     #EAF4FB;   /* подложки: плитки, строки, кружки            */
	--c-white:    #fff;

	--grad-red:   linear-gradient(180deg, #FF6262 0%, #FF0000 100%);
	--grad-blue:  linear-gradient(180deg, #359DFF 0%, #0084FF 100%);

	--f-display:  "BebasNeue", "Arial Narrow", Impact, sans-serif;
	/* Второй шрифт один на всё: набор, кнопки, меню, цены. Три переменные
	   оставлены, чтобы роли в правилах читались. */
	--f-text:     "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-ui:       var(--f-text);
	--f-strong:   var(--f-text);
	/* Малые заголовки: названия в карточках каталога, подзаголовки в тексте,
	   колонки подвала. Bebas — только для крупных: в 26–40px его узкие
	   прописные слипаются и читаются хуже набора. Сменить шрифт малых
	   заголовков на всём сайте — поменять эту переменную. */
	--f-sub:      "Golos Text", var(--f-text);
	--w-sub:      600;

	--r-s:        16px;
	--r-m:        24px;
	--r-l:        36px;

	/* Поля страницы и расстояние между блоками */
	--pad:        50px;
	--gap-sec:    clamp(72px, 9.4vw, 170px);
	/* Левый край контейнера от края окна: по нему выходит лента отзывов */
	--pad-outer:  max(var(--pad), calc((100vw - 1780px) / 2 + var(--pad)));

	/* --- my-ui: поверхности и текст --------------------------------------- */
	--ui-page:          #f3f9fb;
	--ui-card:          #ffffff;
	--ui-surface:       #eef5fa;
	--ui-surface-2:     #dfecf5;
	--ui-line:          #C8DCEA;
	--ui-ink:           #000;
	--ui-heading:       #000;
	--ui-muted:         #5f6d7b;

	--ui-accent:        #178FFF;
	--ui-accent-hover:  #0076F6;
	--ui-accent-active: #0066FF;
	--ui-on-accent:     #ffffff;
	--ui-check-fill:    #e1f0ff;

	--ui-search:        #eef5fa;
	--ui-search-hover:  #f3f8fc;
	--ui-search-active: #f8fbfd;

	--ui-error:         #d92d20;
	--ui-error-line:    #f0a199;

	--ui-font:          var(--f-text);
	--ui-w-normal:      400;
	--ui-w-ui:          500;
	--ui-w-strong:      600;

	/* --- my-ui: геометрия поля. 28 + 12 + 17 × 1.4 + рамка 2 = 66px ------- */
	--ui-field-radius:  20px;
	--ui-field-pad-x:   24px;
	--ui-field-pad-top: 28px;
	--ui-field-pad-bot: 12px;
	--ui-field-label:   21px;
	--ui-field-font:    17px;
	--ui-field-line:    1.4;

	--ui-radius:        16px;
	--ui-radius-lg:     40px;
	--ui-pill:          999px;
	--ui-touch:         44px;
	--ui-scrollbar:     4px;
	--ui-modal-pad:     44px;
	--ui-edge:          clamp(10px, 2.4vw, 24px);

	--ui-shadow-sm: 0 1px 4px -2px rgba(0, 68, 140, .05), 0 6px 20px -8px rgba(0, 68, 140, .09);
	--ui-shadow-md: 0 2px 6px -3px rgba(0, 68, 140, .05), 0 14px 40px -14px rgba(0, 68, 140, .13);
	--ui-shadow-lg: 0 3px 10px -5px rgba(0, 68, 140, .06), 0 24px 60px -18px rgba(0, 68, 140, .18);

	/* --- my-ui: движение. Общее для всех сайтов, не меняется --------------- */
	--ui-fast:   .18s;
	--ui-base:   .25s;
	--ui-slow:   .3s;
	--ui-turn:   .35s;
	--ui-ease:   cubic-bezier(.22, .68, .3, 1);
	--ui-ease-pop: cubic-bezier(.2, 1.12, .4, 1);
	--ui-spin:   .75s;
}

@media (max-width: 1200px) {
	:root { --pad: 30px; }
}

@media (max-width: 767px) {
	:root {
		--pad: 20px;
		/* my-ui: поле на телефоне. 24 + 12 + 16 × 1.4 + 2 = 60px */
		--ui-field-pad-x:   20px;
		--ui-field-pad-top: 25px;
		--ui-field-pad-bot: 11px;
		--ui-field-label:   19px;
		--ui-modal-pad:     20px;
	}
}

@media (max-width: 380px) {
	:root { --pad: 16px; }
}


/* ---------------------------------------------------------------------------
   2. База
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Админ-панель WordPress на сайте не показывается: она сдвигала
	   закреплённую шапку. */
	margin-top: 0 !important;
}

#wpadminbar {
	display: none;
}

/* Атрибут hidden обязан прятать элемент при любом display в правилах ниже.
   Без этого просмотрщик снимков (.zoom, display: grid) после закрытия
   оставался невидимым слоем поверх страницы и перехватывал все щелчки. */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--f-text);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text);
	background: #f5f8ee linear-gradient(270deg, #E8F5FF 0%, #FFFCEB 100%);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
	margin: 0;
}

h1, h2, h3, h4 {
	font-size: inherit;
	font-weight: inherit;
}

ul, ol {
	padding: 0;
}

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

img {
	height: auto;
}

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

button, input, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

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

.container {
	width: 100%;
	max-width: 1780px;
	margin-inline: auto;
	padding-inline: var(--pad);
}

.site-main {
	display: block;
}

.section {
	margin-top: var(--gap-sec);
}

.blue-text  { color: var(--c-blue); }
.grey-text  { color: var(--c-grey); }
.green-text { color: var(--c-green); }

/* Заголовок раздела — прежний стиль: BebasNeue, чёрный, синяя часть в span.
   Кегль тот же: 64px на 1200 и 95px на 1920, между ними линейно. */
.section-header {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(40px, calc(12.4px + 4.3vw), 95px);
	line-height: .95;
	color: var(--c-ink);
	text-wrap: balance;
}

.section-header span {
	color: var(--c-blue);
}

/* В BebasNeue нет знаков ₽, ², ×: их набирает Onest. Кегль подобран так,
   чтобы строка «Владивостоке от 1 510 ₽» первого экрана вставала в колонку
   на 1440. */
.rub {
	/* Перед знаком в разметке стоит неразрывный пробел: поджимаем его
	   до узкой отбивки, иначе строка первого экрана не встаёт в колонку. */
	word-spacing: -.17em;
	font-family: var(--f-strong);
	font-weight: 700;
	font-size: .64em;
	letter-spacing: 0;
}

/* Цена в заголовке не рвётся: «от 1 510 ₽» переносится целиком */
.green-text {
	white-space: nowrap;
}

/* Шапка блока: заголовок слева, пояснение или действие справа */
.sec-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 20px clamp(30px, 5vw, 90px);
	margin-bottom: clamp(28px, 3.6vw, 64px);
}

.sec-head__note {
	max-width: 34em;
	padding-bottom: .5em;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.5;
	color: var(--c-muted);
}

.sec-head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -80px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: var(--r-s);
	background: var(--c-ink);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
}

.skip-link:focus {
	top: 12px;
}

.ico {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

/* Ловушка для роботов (form-antibot): за краем экрана, не display: none */
.lc-trap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}


/* ---------------------------------------------------------------------------
   3. Кнопки и мелочи
   --------------------------------------------------------------------------- */

/* Кнопки — пилюли, подпись строчными: заголовки сайта набраны прописным
   Bebas, и вторая строка прописных рядом с ними спорила бы за внимание. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 60px;
	padding: 0 32px;
	border-radius: var(--ui-pill);
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--ui-fast) var(--ui-ease),
	            background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease),
	            filter var(--ui-base) var(--ui-ease);
}

.btn:active {
	transform: scale(.97);
}

.btn .ico {
	width: 20px;
	height: 20px;
}

.btn--red {
	background: var(--grad-red), #FF0000;
	color: #fff;
}

.btn--blue {
	background: var(--grad-blue);
	color: #fff;
}

.btn--white,
.btn--ghost {
	background: #fff;
	color: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
	.btn--red:hover,
	.btn--blue:hover { filter: brightness(1.08) saturate(1.05); }
	.btn--white:hover { background: var(--c-ink); color: #fff; }
	.btn--ghost:hover { background: var(--c-blue); color: #fff; }
}

/* Круглая ссылка на мессенджер */
.round-link {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(52px, 4.05vw, 78px);
	height: clamp(52px, 4.05vw, 78px);
	border-radius: 50%;
	background: #fff;
	transition: background-color var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}

.round-link img {
	width: 52%;
}

.round-link:active {
	transform: scale(.94);
}

@media (hover: hover) and (pointer: fine) {
	.round-link:hover { background: var(--c-tint); }
}

/* Телефон — белая пилюля с лаймовым кружком */
.phone-pill {
	display: flex;
	align-items: center;
	gap: clamp(8px, .7vw, 12px);
	height: clamp(52px, 4.05vw, 78px);
	padding: 0 clamp(16px, 1.7vw, 32px) 0 clamp(6px, .6vw, 12px);
	border-radius: var(--ui-pill);
	background: #fff;
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: clamp(15px, 1.15vw, 21px);
	letter-spacing: -.01em;
	color: var(--c-ink);
	white-space: nowrap;
	transition: color var(--ui-base) var(--ui-ease);
}

.phone-pill__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(40px, 2.95vw, 56px);
	height: clamp(40px, 2.95vw, 56px);
	border-radius: 50%;
	background: var(--c-lime);
}

.phone-pill__ico img {
	width: 38%;
}

@media (hover: hover) and (pointer: fine) {
	.phone-pill:hover { color: var(--c-blue-3); }
}

/* Плитка-ссылка: подразделы, смежные разделы, «Цены» под каталогом */
.link-tile {
	display: flex;
	align-items: center;
	gap: 4px 16px;
	flex-wrap: wrap;
	min-height: 76px;
	padding: 16px 76px 16px 28px;
	position: relative;
	border-radius: var(--r-m);
	background: #fff;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease), color var(--ui-base) var(--ui-ease);
}

.link-tile__name {
	font-weight: 600;
	font-size: clamp(16px, 1.2vw, 20px);
	line-height: 1.3;
	letter-spacing: -.01em;
}

.link-tile__meta {
	font-size: 15px;
	line-height: 1.3;
	color: var(--c-muted);
	transition: color var(--ui-base) var(--ui-ease);
}

.link-tile__go {
	box-sizing: content-box;
	position: absolute;
	right: 16px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -22px;
	padding: 12px;
	border-radius: 50%;
	background: var(--c-tint);
	color: var(--c-blue-3);
	transition: transform var(--ui-turn) var(--ui-ease),
	            background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease);
}

.link-tile:active {
	background: var(--c-tint);
}

@media (hover: hover) and (pointer: fine) {
	.link-tile:hover .link-tile__go { background: var(--c-blue); color: #fff; transform: translateX(4px); }
}


/* ---------------------------------------------------------------------------
   4. Шапка и меню

   Большой экран: шапка в потоке, как в прежнем дизайне, — логотип, город,
   мессенджеры, телефон, кнопка; под ними строка меню.
   До 1023px: закреплённый островок с логотипом, телефоном и бургером
   (css/ui/menu.css), остальное уходит в мобильное меню.
   --------------------------------------------------------------------------- */

.site-header {
	z-index: 20;
}

.site-header__top {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.1vw, 40px);
	/* Те же ширина и поля, что у контейнера и строки меню: левый край
	   логотипа и правый край кнопки стоят на линиях контента. */
	max-width: 1920px;
	margin-inline: auto;
	padding: 10px clamp(24px, 2.1vw, 40px) 0;
}

.site-header__logo {
	flex: 0 0 auto;
}

.site-header__logo img {
	width: clamp(140px, 10.8vw, 205px);
	height: auto;
}

.site-header__city {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.site-header__city .ico {
	width: 26px;
	height: 26px;
	margin-top: 1px;
	color: var(--c-blue);
}

.site-header__city p {
	font-size: 15px;
	line-height: 1.3;
	color: var(--c-muted);
	white-space: nowrap;
}

.site-header__city span {
	font-weight: 600;
	color: var(--c-ink);
}

.site-header__social {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1vw, 19px);
	margin-inline: auto;
}

.site-header__cta {
	min-height: clamp(44px, 2.9vw, 54px);
	padding-inline: clamp(20px, 2.2vw, 40px);
	font-size: clamp(14px, 1vw, 16px);
}

/* Мессенджеры и телефон в шапке ниже общих: строка не должна съедать первый экран */
.site-header__social .round-link {
	width: clamp(44px, 2.9vw, 54px);
	height: clamp(44px, 2.9vw, 54px);
}

.site-header__phone {
	height: clamp(44px, 2.9vw, 54px);
	font-size: clamp(14px, 1.05vw, 18px);
}

.site-header__phone .phone-pill__ico {
	width: clamp(34px, 2.2vw, 42px);
	height: clamp(34px, 2.2vw, 42px);
}

/* --- строка меню -----------------------------------------------------------
   Открытая строка на фоне страницы, как на исходном сайте. Цвет выделяет
   конкретный пункт; общий фон не спорит с кнопкой и первым экраном. */

.site-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 1920px;
	margin-inline: auto;
	padding: 10px clamp(24px, 2.1vw, 40px) 0;
}

.site-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	background: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-width: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
}

.site-nav__link,
.site-nav__sublink {
	font-family: var(--f-sub);
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 27px);
	line-height: 1.3;
	color: var(--c-ink);
	transition: color var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease);
}

.site-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 54px;
	padding: 0;
	font-weight: 750;
	letter-spacing: -.025em;
	border-radius: 0;
	white-space: nowrap;
}

.site-nav__link.is-active {
	background: transparent;
	color: var(--c-blue-4);
}

.site-nav__chev {
	width: 16px;
	height: 16px;
	color: var(--c-blue-4);
	transition: transform var(--ui-turn) var(--ui-ease);
}

/* Выпадающий список: показывается наведением и фокусом с клавиатуры.
   Зазор между пунктом и списком перекрыт невидимой перемычкой (::before) —
   курсор не теряет наведение по пути. */
.site-nav__sub {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 5;
	min-width: 280px;
	padding: 12px;
	list-style: none;
	border-radius: var(--r-m);
	background: #fff;
	box-shadow: var(--ui-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--ui-fast) var(--ui-ease),
	            transform var(--ui-base) var(--ui-ease),
	            visibility 0s linear var(--ui-base);
}

.site-nav__sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 14px;
}

.site-nav__item.has-sub:hover .site-nav__sub,
.site-nav__item.has-sub:focus-within .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--ui-fast) var(--ui-ease),
	            transform var(--ui-base) var(--ui-ease),
	            visibility 0s;
}

.site-nav__item.has-sub:hover .site-nav__chev,
.site-nav__item.has-sub:focus-within .site-nav__chev {
	transform: rotate(180deg);
}

.site-nav__sublink {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 16px;
	border-radius: 14px;
	white-space: nowrap;
	font-family: var(--f-ui);
	font-weight: 500;
	font-size: 16px;
}

.site-nav__sublink.is-active {
	color: var(--c-blue-3);
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__link:hover,
	.site-nav__item.has-sub:hover > .site-nav__link { background: transparent; color: var(--c-blue-4); }
	.site-nav__sublink:hover { background: var(--c-tint); color: var(--c-blue-3); }
}

/* --- большой экран: шапка в потоке, эталонный островок отключён ---------- */

@media (min-width: 1024px) {
	.site-header__top {
		gap: clamp(12px, 1.45vw, 28px);
		min-height: clamp(108px, 8.3vw, 150px);
		padding-top: 16px;
		padding-bottom: 10px;
	}

	.site-header__logo img {
		width: clamp(156px, 13vw, 250px);
	}

	.site-header__city {
		align-items: center;
		gap: 10px;
		flex: 0 0 auto;
	}

	.site-header__city .ico {
		width: 34px;
		height: 42px;
		margin: 0;
		color: var(--c-blue-4);
	}

	.site-header__city p {
		font-size: clamp(12px, 1vw, 15px);
		line-height: 1.5;
	}

	.site-header__city span {
		font-family: var(--f-sub);
		font-size: clamp(17px, 1.4vw, 22px);
		font-weight: 600;
		color: var(--c-blue-4);
	}

	.site-header__social {
		gap: clamp(8px, .7vw, 14px);
	}

	.site-header__social .round-link {
		width: clamp(44px, 3.5vw, 66px);
		height: clamp(44px, 3.5vw, 66px);
		background: rgba(255, 255, 255, .75);
	}

	.site-header__phone {
		flex: 0 0 auto;
		height: clamp(52px, 4.2vw, 78px);
		padding: 0;
		background: transparent;
		font-family: var(--f-sub);
		font-weight: 700;
		font-size: clamp(18px, 1.5vw, 28px);
	}

	.site-header__phone .phone-pill__ico {
		width: clamp(40px, 3.1vw, 48px);
		height: clamp(40px, 3.1vw, 48px);
	}

	.site-header__cta {
		flex: 0 0 auto;
		min-height: clamp(54px, 4vw, 76px);
		width: clamp(192px, 16.4vw, 314px);
		padding-inline: 20px;
		font-size: clamp(15px, 1.1vw, 17px);
	}

	.site-nav {
		padding-top: 0;
		padding-bottom: 12px;
	}

	.site-nav__list {
		padding-inline: 15px 30px;
	}

	.site-nav__item:first-child > .site-nav__link {
		margin-left: 0;
	}

	.site-nav__item:last-child > .site-nav__link {
		margin-right: 0;
	}

	.ui-header {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		border-radius: 0;
		background: none;
	}

	.ui-header-offset {
		padding-top: 0;
	}

	.ui-menu {
		display: none;
	}
}

/* --- большой экран: строка меню прилипает к верху -------------------------
   У верха страницы шапка обычная. Когда она целиком ушла за край, строка
   меню закрепляется у верхнего края вместе с телефоном и кнопкой: уезжает
   при прокрутке вниз, возвращается при прокрутке вверх. Классы ставит
   js/site.js (initStickyNav) — тот же приём, что на triumf.pro.
   Высоту шапки держит --site-header-h, чтобы страница не прыгала. */

.site-nav__extra {
	display: none;
}

/* MAX: официальный знак и номер для поиска, пока не заполнена ссылка профиля. */
.max-contact { position: relative; }
.max-contact summary { cursor: pointer; list-style: none; }
.max-contact summary::-webkit-details-marker { display: none; }
.max-contact summary img { width: 52%; height: auto; }
.max-contact[open] summary { background: #fff; }
.max-contact__panel {
	position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
	z-index: 50; width: 280px; padding: 24px; background: #fff;
	border-radius: 24px; box-shadow: var(--ui-shadow-md); font-size: 15px;
}
.max-contact__panel strong { display: block; font-family: var(--f-sub); font-size: 23px; }
.max-contact__panel p { margin-top: 12px; color: var(--c-muted); }
.max-contact__copy { min-height: 44px; padding: 0; font-size: 20px; font-weight: 650; color: var(--c-blue-4); cursor: pointer; user-select: text; }
.max-contact__status { display: block; margin-bottom: 18px; font-size: 12px; color: var(--c-muted); }
.max-contact__panel a { display: flex; justify-content: center; align-items: center; min-height: 44px; background: var(--c-tint); border-radius: 24px; color: var(--c-blue-4); font-weight: 600; }

@media (min-width: 1024px) {
	.site-header.is-compact {
		height: var(--site-header-h, 190px);
	}

	.site-header.is-compact .site-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40;
		padding: 8px clamp(24px, 2.1vw, 40px);
		max-width: 1920px;
		margin: 0 auto;
		border-radius: 0;
		background: #fff;
		box-shadow: var(--ui-shadow-md);
		transform: none;
		transition: transform .38s var(--ui-ease);
	}

	.site-header.is-compact .site-nav.is-away {
		transform: translate3d(0, calc(-100% - 20px), 0);
		/* уход быстрее возврата: убрать с дороги — не событие */
		transition-duration: .26s;
	}

	/* смена режима — без движения: строка уже за краем экрана */
	.site-header.is-snap .site-nav {
		transition: none;
	}

	.site-header.is-compact .site-nav__bar {
		box-shadow: none;
	}

	.site-header.is-compact .site-nav__link {
		min-height: 46px;
		padding-inline: clamp(8px, .8vw, 14px);
		font-size: clamp(14px, 1vw, 17px);
	}

	.site-header.is-compact .site-nav__item > .site-nav__link {
		margin: 0;
	}

	.site-header.is-compact .site-nav__link.is-active {
		background: transparent;
	}

	.site-header.is-compact .site-nav__extra {
		display: flex;
		align-items: center;
		gap: 10px;
		flex: 0 0 auto;
	}

	.site-nav__tel {
		display: flex;
		align-items: center;
		height: 46px;
		padding: 0 clamp(16px, 1.5vw, 26px);
		border-radius: var(--ui-pill);
		background: #fff;
		box-shadow: none;
		font-weight: 600;
		font-size: clamp(14px, 1.05vw, 17px);
		letter-spacing: -.01em;
		color: var(--c-ink);
		white-space: nowrap;
		transition: color var(--ui-base) var(--ui-ease);
	}

	.site-nav__cta {
		min-height: 46px;
		padding-inline: clamp(18px, 1.8vw, 32px);
		box-shadow: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__tel:hover { color: var(--c-blue-3); }
}

/* На 1024–1279 в прилипшей строке тесно: телефон уходит, остаётся кнопка */
@media (min-width: 1024px) and (max-width: 1279px) {
	.site-header.is-compact .site-nav__tel {
		display: none;
	}
}

/* --- до 1023px: островок ------------------------------------------------- */

@media (max-width: 1023px) {
	.site-header {
		box-shadow: var(--ui-shadow-sm);
	}

	.site-header__top {
		gap: 8px;
		padding: 8px 8px 8px 16px;
	}

	.site-header__logo {
		margin-right: auto;
	}

	.site-header__logo img {
		width: 104px;
	}

	.site-header__city,
	.site-header__social,
	.site-header__cta,
	.site-nav {
		display: none;
	}

	/* От пилюли остаётся кружок с трубкой: позвонить можно, не открывая меню */
	.site-header__phone {
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
	}

	.site-header__phone .phone-pill__num {
		display: none;
	}

	.site-header__phone .phone-pill__ico {
		width: 44px;
		height: 44px;
	}

	.ui-burger {
		width: 48px;
		height: 48px;
	}

	.ui-burger::before {
		inset: 9px;
	}

	/* Строки меню набраны крупнее и плотнее набора. Задержка нужна каждому пункту: пропущенный получает запасные
	   0.3 с и выскакивает раньше соседей. */
	.ui-menu__link {
		font-weight: 600;
		font-size: 19px;
		letter-spacing: -.01em;
	}

	.ui-menu__sub-link {
		font-size: 16px;
		color: var(--c-blue-3);
	}

	.ui-menu.is-open .ui-menu__item:nth-child(1) { --m-delay: 0.26s; }
	.ui-menu.is-open .ui-menu__item:nth-child(2) { --m-delay: 0.31s; }
	.ui-menu.is-open .ui-menu__item:nth-child(3) { --m-delay: 0.36s; }
	.ui-menu.is-open .ui-menu__item:nth-child(4) { --m-delay: 0.41s; }
	.ui-menu.is-open .ui-menu__item:nth-child(5) { --m-delay: 0.46s; }
	.ui-menu.is-open .ui-menu__item:nth-child(6) { --m-delay: 0.51s; }
	.ui-menu.is-open .ui-menu__item:nth-child(7) { --m-delay: 0.56s; }
	.ui-menu.is-open .ui-menu__ext               { --m-delay: 0.60s; }
	.ui-menu.is-open .ui-menu__foot              { --m-delay: 0.64s; }

	.ui-menu__contact--note {
		font-size: 15px;
		line-height: 1.35;
		color: var(--c-muted);
	}

	.ui-menu__btn {
		min-height: 60px;
		background: var(--grad-red), #FF0000;
		font-weight: 600;
		font-size: 16px;
	}

	.ui-menu__btn:active {
		background: #e00000;
	}
}


/* ---------------------------------------------------------------------------
   5. Первый экран — сохранён из прежнего дизайна

   Сетка, кегли и отступы перенесены из старых style.css и responsive.css
   по всем их порогам. Изменено три места: строка «Собственное производство»
   больше не заголовок, кнопка — <button>, слайдер листается шторкой.
   --------------------------------------------------------------------------- */

.main-screen {
	padding-top: 30px;
	padding-bottom: 55px;
}

.main-screen .container {
	display: grid;
	grid-template-columns: 50% 50%;
}

.main-screen .main-screen-top {
	padding-top: 66px;
}

.main-screen .main-screen-top h1 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc((100vw - 1200px) / (1920 - 1200) * (100 - 70) + 70px);
	line-height: .9;
	color: var(--c-ink);
}

.main-screen .main-screen-badge {
	position: relative;
	top: 15px;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 23px;
	font-family: var(--f-ui);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

.main-screen .main-screen-badge img {
	max-width: 90px;
}

.main-screen .main-screen-slider {
	grid-row: span 2;
	min-width: 0;
	max-width: 100%;
}

/* Слайдер: кадр 10:9 со скруглением 40px, отметки — белые полоски поверх
   нижнего края снимка. Первый кадр остаётся в потоке и задаёт высоту,
   остальные лежат под ним по его границам (slider.css, раздел 2) —
   поэтому пропорция стоит только на нём. */
.hero-slider {
	gap: 0;
}

.hero-slider .ui-slider__frame {
	border-radius: 40px;
}

.hero-slider .ui-slider__slide {
	height: auto;
	aspect-ratio: 10 / 9;
	background: var(--c-tint);
}

.hero-slider.is-single .ui-slider__slide {
	aspect-ratio: auto;
}

.hero-slider.is-single .ui-slider__slide:first-child {
	aspect-ratio: 10 / 9;
}

.hero-slider .ui-slider__slide picture,
.hero-slider .ui-slider__wipe picture {
	width: 100%;
	height: 100%;
}

.hero-slider .ui-slider__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 40;
	pointer-events: none;
}

.hero-slider .ui-slider__dots {
	gap: 9px;
	pointer-events: auto;
}

/* Все отметки одной ширины: текущая отличается плотностью, а не размером,
   поэтому в ряду ничего не растягивается и не сжимается. Цель касания
   добрана псевдоэлементом — сама полоска остаётся тонкой. */
.hero-slider .ui-slider__dot,
.hero-slider .ui-slider__dot.is-active {
	position: relative;
	width: 66px;
	height: 5px;
	border-radius: 40px;
	background: #fff;
	transition: opacity var(--ui-base) var(--ui-ease);
}

.hero-slider .ui-slider__dot {
	opacity: .4;
}

.hero-slider .ui-slider__dot.is-active {
	opacity: 1;
}

.hero-slider .ui-slider__dot::before {
	content: "";
	position: absolute;
	inset: -20px 0;
}

@media (hover: hover) and (pointer: fine) {
	.hero-slider .ui-slider__dot:hover { opacity: 1; }
}

.main-screen .modal-btn {
	display: flex;
	align-items: center;
	margin-bottom: 55px;
}

.main-screen .calc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 74px;
	width: 366px;
	max-width: 100%;
	margin-right: 66px;
	border-radius: 70px;
	background: var(--grad-red), #FF0000;
	font-family: var(--f-ui);
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	transition: transform var(--ui-base) var(--ui-ease), box-shadow var(--ui-base) var(--ui-ease);
}

.main-screen .calc-btn:active {
	transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
	.main-screen .calc-btn:hover { transform: scale(1.05); }
	.main-screen .calc-btn:hover:active { transform: scale(.99); }
}

.main-screen .modal-btn span {
	position: relative;
	display: flex;
	align-items: center;
	font-family: var(--f-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

.main-screen .modal-btn span::before {
	content: "—";
	position: absolute;
	left: -39px;
	font-size: 19px;
}

.main-screen .main-screen-bottom .advantages {
	display: flex;
	justify-content: space-between;
}

.main-screen .main-screen-bottom .advantage-item {
	flex: 1;
}

.main-screen .main-screen-bottom .advantage-item .advantage-top {
	display: block;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 95px;
	line-height: .95;
	color: var(--c-ink);
}

.main-screen .main-screen-bottom .advantage-item .advantage-bottom {
	display: block;
	padding-left: 10px;
	font-family: var(--f-ui);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--c-ink);
}

@media (min-width: 1920px) {
	.main-screen .main-screen-top h1 { font-size: 100px; }
}

@media (max-width: 1560px) {
	.main-screen .calc-btn { height: 70px; width: 320px; font-size: 16px; margin-right: 55px; }
	.main-screen .modal-btn span { font-size: 18px; }
	.main-screen .modal-btn span::before { font-size: 20px; }
	.main-screen .main-screen-bottom .advantage-item .advantage-top { font-size: 65px; }
}

@media (max-width: 1200px) {
	.main-screen .main-screen-badge { gap: 15px; font-size: 17px; }
	.main-screen .main-screen-badge img { max-width: 70px; }
	.main-screen .modal-btn { margin-bottom: 40px; }
	.main-screen .calc-btn { height: 65px; width: 280px; font-size: 15px; margin-right: 40px; }
	.main-screen .modal-btn span::before { font-size: 18px; left: -30px; }
	.main-screen .modal-btn span { font-size: 15px; }
	.main-screen .main-screen-bottom .advantage-item .advantage-top { font-size: 54px; }
	.main-screen .main-screen-bottom .advantage-item .advantage-bottom { font-size: 16px; }
	.hero-slider .ui-slider__dot,
	.hero-slider .ui-slider__dot.is-active { width: 40px; height: 4px; }
}

@media (max-width: 991px) {
	.main-screen { padding-top: 10px; }
	.main-screen .main-screen-top { padding-top: 35px; }
	.main-screen .main-screen-top h1 { font-size: 48px; margin-bottom: 10px; }
	.main-screen .main-screen-badge { font-size: 15px; }
	.main-screen .main-screen-badge img { max-width: 55px; }
	.main-screen .calc-btn { height: 60px; width: 230px; font-size: 14px; margin-right: 20px; }
	.main-screen .modal-btn span::before { display: none; }
	.main-screen .main-screen-bottom .advantage-item .advantage-top { font-size: 48px; }
	.main-screen .main-screen-bottom .advantage-item .advantage-bottom { font-size: 14px; padding-left: 5px; }
}

@media (max-width: 767px) {
	.main-screen { padding-bottom: 20px; }
	.main-screen .container { display: block; }
	.main-screen .main-screen-top { padding-top: 16px; }
	.main-screen .main-screen-badge { margin-bottom: 20px; }
	.main-screen .modal-btn { margin-bottom: 30px; justify-content: center; }
	.main-screen .main-screen-slider { margin-bottom: 30px; }
	.hero-slider .ui-slider__frame { border-radius: 30px; }
	.hero-slider .ui-slider__slide,
	.hero-slider.is-single .ui-slider__slide:first-child { aspect-ratio: 10 / 7; }
	.hero-slider.is-single .ui-slider__slide { aspect-ratio: auto; }
	.main-screen .main-screen-bottom .advantages { gap: 50px; max-width: 450px; margin-inline: auto; }
}

@media (max-width: 576px) {
	.main-screen .main-screen-top h1 { font-size: 42px; }
	.main-screen .calc-btn { font-size: 14px; height: 54px; width: 216px; }
	.main-screen .main-screen-badge img { max-width: 45px; }
	.hero-slider .ui-slider__bar { bottom: 20px; }
	.hero-slider .ui-slider__dots { gap: 5px; }
	.hero-slider .ui-slider__dot,
	.hero-slider .ui-slider__dot.is-active { width: 30px; height: 3px; }
	.main-screen .modal-btn span { font-size: 14px; }
	.main-screen .main-screen-bottom .advantages { gap: 10px; }
	.main-screen .main-screen-bottom .advantage-item .advantage-top { font-size: 36px; line-height: 1.1; margin-bottom: 6px; }
}


/* --- первый экран целиком в окне --------------------------------------------
   На компьютере шапка + первый экран укладываются в высоту окна: кадр слайдера
   берёт остаток высоты (но не выше прежнего 10:9), а кегли и отступы слева
   считаются от высоты окна, чтобы факты не уезжали за нижний край.
   --hero-head — высота шапки с меню, подогнанная под замер; если шапку менять,
   поправить здесь. На невысоком окне (< 620px) ограничения не действуют:
   сжимать нечего, страница просто листается. */
@media (min-width: 992px) and (min-height: 620px) {

	.main-screen {
		--hero-head: 170px;
		padding-top: 16px;
		padding-bottom: 20px;
	}

	.main-screen .main-screen-slider {
		align-self: start;
	}

	.hero-slider .ui-slider__slide,
	.hero-slider.is-single .ui-slider__slide:first-child {
		aspect-ratio: auto;
		height: clamp(400px, calc(100svh - var(--hero-head) - 36px), 760px);
	}

	.hero-slider .ui-slider__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.main-screen .main-screen-top {
		padding-top: min(4svh, 48px);
	}

	.main-screen .main-screen-top h1 {
		/* третья граница — ширина колонки: «ВЛАДИВОСТОКЕ ОТ 1 510 ₽» остаётся в одну строку */
		font-size: min(calc((100vw - 1200px) / 720 * 30 + 70px), calc((50vw - var(--pad)) / 8.5), 10svh);
	}

	.main-screen .main-screen-badge {
		margin-bottom: min(2svh, 18px);
	}

	.main-screen .main-screen-badge img {
		max-width: min(90px, 7svh);
	}

	.main-screen .main-screen-bottom .modal-btn.has-next {
		margin-bottom: min(1.6svh, 16px);
	}

	.main-screen .calc-btn {
		height: min(74px, 7svh);
	}

	.main-screen .main-screen-bottom .hero-measure {
		margin-bottom: min(2.6svh, 28px);
	}

	.main-screen .main-screen-bottom .advantage-item .advantage-top {
		font-size: min(95px, 8svh);
	}
}


/* ---------------------------------------------------------------------------
   6. Крошки, лид
   --------------------------------------------------------------------------- */

.crumbs {
	padding-top: 22px;
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.4;
	color: var(--c-muted);
}

.crumbs__item + .crumbs__item::before {
	content: "/";
	margin: 0 10px;
	color: var(--c-line);
}

.crumbs__item a {
	transition: color var(--ui-fast) var(--ui-ease);
}

.crumbs__item [aria-current] {
	color: var(--c-ink);
}

@media (hover: hover) and (pointer: fine) {
	.crumbs__item a:hover { color: var(--c-blue-3); }
}

/* На посадочных крошки стоят под первым экраном и забирают часть отступа
   следующего блока: расстояние от первого экрана до калькулятора остаётся
   тем же, что на главной. */
.main-screen + .crumbs {
	padding-top: clamp(24px, 2.6vw, 44px);
}

.main-screen + .crumbs + .section {
	margin-top: calc(var(--gap-sec) - clamp(44px, 4vw, 64px));
}

/* Лид: первые сто слов страницы. Главная мысль набрана крупно, во всю
   левую часть; справка (стаж, адрес салона) — карточкой справа от неё. */
.lead {
	margin-top: clamp(24px, 2.6vw, 44px);
}

/* Вводный абзац с ключами: обычный кегль, приглушённый цвет, две колонки.
   Крупным набором под первым экраном он занимал целый экран и отодвигал
   калькулятор и каталог. */
.lead__text {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: 10px clamp(24px, 3.4vw, 60px);
}

.lead__text p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-muted);
	text-wrap: pretty;
}

.lead__text p:only-child {
	grid-column: 1 / -1;
	max-width: 60em;
}

/* Третий и следующие абзацы, если их добавят в редакторе, — под первым */
.lead__text p + p + p {
	grid-column: 1 / -1;
}

.lead__text strong {
	font-weight: 600;
}

.lead__text a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   7. Каталог
   --------------------------------------------------------------------------- */

/* --- витрина разделов -----------------------------------------------------
   Белая карточка без тени: снимок, название шрифтом меню, модели с ценами —
   голубыми строками-плашками сразу под названием, внизу ссылка в раздел.
   Ссылка прижата к низу: у соседей в ряду она стоит на одной линии, сколько
   бы моделей ни было в карточке. */

.showcase {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 24px);
	list-style: none;
}

.tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	border-radius: var(--r-l);
	background: var(--c-white);
	color: var(--c-ink);
}

.tile__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--r-l) - 10px);
	overflow: hidden;
	background: var(--c-tint);
	transform: translateZ(0);
}

.tile__media picture,
.tile__media img {
	width: 100%;
	height: 100%;
}

.tile__media img {
	object-fit: cover;
	transition: transform .9s var(--ui-ease);
}

/* Название раздела — шрифт меню. */
.tile__title {
	display: block;
	padding: clamp(18px, 1.5vw, 26px) 12px clamp(12px, 1vw, 18px);
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(16px, 1.22vw, 22px);
	line-height: 1.2;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.tile__list {
	display: grid;
	gap: 6px;
	padding: 0 2px;
}

.tile__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
	padding: 8px 14px;
	border-radius: 16px;
	background: var(--c-tint);
	font-size: 15px;
	line-height: 1.25;
}

.tile__name {
	color: var(--c-text);
}

.tile__price {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--c-blue-4);
	white-space: nowrap;
}

.tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: clamp(14px, 1.2vw, 20px) 2px 0 12px;
}

.tile__more {
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-muted);
	transition: color var(--ui-base) var(--ui-ease);
}

.tile__go {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-tint);
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease),
	            transform var(--ui-turn) var(--ui-ease);
}

.tile__go .ico {
	width: 20px;
	height: 20px;
}

/* Плитка-приглашение в конце витрины: синяя плита добивает последний ряд.
   Сколько колонок занять, считает разметка (--s4, --s3, --s2). */
.showcase__cell--fill {
	grid-column: span var(--s4, 1);
}

.tile-fill {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 14px;
	height: 100%;
	min-height: 260px;
	padding: clamp(24px, 2.4vw, 44px);
	border-radius: var(--r-l);
	background: var(--grad-blue), var(--c-blue-2);
	color: #fff;
}

.tile-fill__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(40px, 4.6vw, 88px);
	line-height: .95;
}

.tile-fill__text {
	max-width: 28em;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.4;
	opacity: .92;
}

.tile-fill__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: auto;
	padding-top: 18px;
}

.tile-fill__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
}

.tile-fill__link .ico {
	width: 18px;
	height: 18px;
	transition: transform var(--ui-turn) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	.tile-fill__link:hover .ico { transform: translateX(4px); }
}

@media (max-width: 1279px) {
	.showcase__cell--fill { grid-column: span var(--s3, 1); }
}

@media (max-width: 767px) {
	.showcase__cell--fill { grid-column: span var(--s2, 1); }
}

@media (max-width: 479px) {
	.showcase__cell--fill { grid-column: auto; }
	.tile-fill { min-height: 0; }
}

.tile:active .tile__go {
	background: var(--c-blue);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	a.tile:hover .tile__media img { transform: scale(1.05); }
	a.tile:hover .tile__go { background: var(--c-blue); color: #fff; transform: translateX(3px); }
	a.tile:hover .tile__more { color: var(--c-blue-4); }
}

.catalog__more,
.subsections__list,
.related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(10px, 1vw, 16px);
	list-style: none;
}

.catalog__more {
	margin-top: clamp(12px, 1.4vw, 24px);
}

/* --- модели раздела ------------------------------------------------------ */

.models {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 24px);
	list-style: none;
}

.models:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border-radius: var(--r-l);
	background: var(--c-white);
}

.model__media {
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--r-l) - 10px);
	overflow: hidden;
	background: var(--c-tint);
}

.model__media picture,
.model__media img {
	width: 100%;
	height: 100%;
}

.model__media img {
	object-fit: cover;
}

.model__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 14px 12px;
}

/* Название модели — один заголовок шрифтом меню: и вид изделия, и чем эта
   модель отличается («на створку», «с фотопечатью») читаются сразу, одним
   кеглем. Вид набран жирнее, уточнение — тем же шрифтом полегче. */
.model__title {
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: clamp(14px, 1.02vw, 18px);
	line-height: 1.35;
	letter-spacing: -.005em;
	color: var(--c-ink);
	text-wrap: balance;
}

.model__title b {
	font-weight: 700;
}

.model__price {
	margin-top: auto;
	padding-top: 18px;
	font-size: 15px;
	line-height: 1.3;
	color: var(--c-muted);
}

/* Оранжевая цена — из прежнего каталога. Кегль крупный: на мелком тексте
   оранжевому на светлом фоне не хватает контраста. */
.model__price strong {
	font-weight: 700;
	font-size: clamp(24px, 1.8vw, 30px);
	letter-spacing: -.01em;
	color: var(--c-orange);
	white-space: nowrap;
}

.model__btn {
	width: 100%;
	margin-top: 18px;
	padding-inline: 16px;
}

/* Одна-две модели: карточка в строку, снимок слева. Иначе одинокая
   карточка занимала бы четверть ряда, а остальное оставалось пустым. */
.models:has(> :nth-child(1):last-child),
.models:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.models:has(> :nth-child(1):last-child) .model,
.models:has(> :nth-child(2):last-child) .model {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: stretch;
}

.models:has(> :nth-child(1):last-child) .model__body,
.models:has(> :nth-child(2):last-child) .model__body {
	padding: clamp(14px, 1.6vw, 28px) clamp(14px, 1.6vw, 28px) clamp(10px, 1.2vw, 20px) clamp(20px, 2.2vw, 40px);
}

.models:has(> :nth-child(1):last-child) .model__btn,
.models:has(> :nth-child(2):last-child) .model__btn {
	align-self: flex-start;
	width: auto;
	padding-inline: 32px;
}

/* Единственная модель — во всю ширину: снимок крупнее, текст рядом */
.models:has(> :nth-child(1):last-child) {
	grid-template-columns: minmax(0, 1fr);
}

.models:has(> :nth-child(1):last-child) .model {
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}

.models:has(> :nth-child(1):last-child) .model__title {
	font-size: clamp(18px, 1.6vw, 28px);
}

.models:has(> :nth-child(1):last-child) .model__price strong {
	font-size: clamp(26px, 2.4vw, 40px);
}

/* --- москитные сетки (parts/nets.php) ----------------------------------- */
/* Цены сеток — карточки моделей со снимком; услуги по окнам — белые
   карточки со значком и ценой. Пояснение к ценам — строкой под карточками. */

.nets__after {
	max-width: 52em;
	margin-top: clamp(18px, 1.8vw, 30px);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.55;
	color: var(--c-muted);
}

.nets__after p + p { margin-top: .6em; }

.model__meta {
	margin-top: 8px;
	font-size: clamp(14px, .95vw, 16px);
	line-height: 1.4;
	color: var(--c-muted);
}

/* Переносы: абзацы без одинокого слова в последней строке. */
.nets .sec-head__note,
.nets-svc .sec-head__note,
.nets__after p {
	text-wrap: pretty;
}

.nets .sec-head__note,
.nets-svc .sec-head__note {
	max-width: 30em;
}

.nets__after a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.sec-head__note p + p { margin-top: .5em; }

.svc {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 24px);
	list-style: none;
}

.svc__item {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2vw, 34px);
	border-radius: var(--r-l);
	background: var(--c-white);
}

.svc__ico {
	display: block;
	width: clamp(96px, 7.6vw, 132px);
	aspect-ratio: 1;
	margin: -6px 0 clamp(14px, 1.4vw, 24px) -6px;
}

.svc__ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.svc__title {
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(15px, 1.1vw, 19px);
	line-height: 1.35;
	color: var(--c-ink);
	text-wrap: balance;
}

.svc__price {
	margin-top: auto;
	padding-top: 16px;
	font-weight: 700;
	font-size: clamp(24px, 1.8vw, 30px);
	letter-spacing: -.01em;
	color: var(--c-orange);
	white-space: nowrap;
}

.nets-svc__action { margin-top: clamp(20px, 2vw, 32px); }

@media (max-width: 1099px) {
	.svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон: значок слева, название и цена рядом — карточка ниже. */
@media (max-width: 599px) {
	.svc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.svc__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		align-items: center;
		padding: 16px 18px;
		border-radius: 20px;
	}
	.svc__ico { grid-row: 1 / span 2; width: 76px; margin: -4px 0; }
	.svc__price { padding-top: 4px; font-size: 22px; }
	.nets-svc__action .btn { width: 100%; justify-content: center; }
}

.subsections {
	margin-top: clamp(40px, 4vw, 72px);
}

.subsections__title {
	margin-bottom: 18px;
	font-family: var(--f-sub);
	font-weight: var(--w-sub);
	font-size: clamp(22px, 1.65vw, 29px);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--c-ink);
}


/* ---------------------------------------------------------------------------
   7а. Калькулятор

   Белая плита: слева выбор и размеры, справа плашка с ценой и действиями.
   Вид и модель — пилюли-переключатели (радио), размеры — поля my-ui.
   --------------------------------------------------------------------------- */

.calc__slab {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 3.2vw, 60px);
	padding: clamp(20px, 3vw, 56px);
	border-radius: var(--r-l);
	background: #fff;
}

.calc__form {
	display: grid;
	align-content: start;
	gap: clamp(22px, 2.2vw, 36px);
}

.calc__set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.calc__legend,
.calc__count-label {
	display: block;
	margin-bottom: 12px;
	padding: 0;
	font-weight: 600;
	font-size: 15px;
	color: var(--c-muted);
}

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

.chip {
	position: relative;
	display: block;
	cursor: pointer;
}

.chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.chip span {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: var(--ui-pill);
	background: var(--c-tint);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease),
	            transform var(--ui-fast) var(--ui-ease);
}

.chip:active span {
	transform: scale(.97);
}

.chip input:checked + span {
	background: var(--c-blue-3);
	color: #fff;
}

.chip input:focus-visible + span {
	outline: 2px solid var(--c-blue-3);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.chip:hover input:not(:checked) + span { background: var(--ui-surface-2); }
}

.calc__sizes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: end;
	gap: 14px;
}

.calc .ui-field__input {
	border: 1px solid var(--ui-surface-2);
	transition: border-color var(--ui-base) var(--ui-ease);
	font-variant-numeric: tabular-nums;
}

.calc .ui-field__input:focus {
	border-color: #7f97aa;
	box-shadow: none;
}

.calc .ui-field__input.is-invalid,
.calc .ui-field__input.is-invalid:focus {
	border-color: var(--ui-error-line);
	box-shadow: none;
}

.calc__count-label {
	margin-bottom: 8px;
}

.stepper {
	display: flex;
	align-items: center;
	height: 66px;
	padding: 0 8px;
	border: 1px solid var(--ui-surface-2);
	border-radius: var(--ui-field-radius);
	background: var(--ui-surface);
}

.stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease),
	            transform var(--ui-fast) var(--ui-ease),
	            opacity var(--ui-base) var(--ui-ease);
}

.stepper__btn:active:not(:disabled) {
	transform: scale(.94);
}

.stepper__btn:disabled {
	opacity: .45;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.stepper__btn:not(:disabled):hover { background: var(--c-blue-3); color: #fff; }
}

.stepper__value {
	min-width: 48px;
	font-weight: 600;
	font-size: 19px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- плашка с ценой -------------------------------------------------------- */

.calc__result {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.4vw, 44px);
	border-radius: var(--r-m);
	background: var(--c-tint);
}

.calc__label {
	font-weight: 600;
	font-size: 15px;
	color: var(--c-muted);
}

.calc__price {
	margin-top: 6px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(64px, calc(20px + 5vw), 124px);
	line-height: .92;
	color: var(--c-ink);
	white-space: nowrap;
}

.calc__detail {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--c-text);
}

.calc__discount {
	align-self: flex-start;
	margin-top: 14px;
	padding: 10px 18px;
	border-radius: var(--r-s);
	background: var(--c-lime);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--c-ink);
}

.calc__actions {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-top: clamp(22px, 2.4vw, 40px);
}

.calc__actions .btn {
	width: 100%;
	white-space: normal;
}

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

@media (max-width: 1023px) {
	.calc__slab { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.calc__slab { border-radius: var(--r-m); }
	.calc__result { border-radius: var(--r-s); }
	.calc__sizes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.calc__count { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
	.calc__count-label { margin-bottom: 0; }
	.stepper { height: 60px; }
	.chip span { padding: 0 16px; font-size: 15px; }
}


/* ---------------------------------------------------------------------------
   7б. Бесплатный замер

   Белая плита: слева заголовок и три довода со значками, справа плашка
   с выбором дня, времени и формой. Пилюли выбора — те же .chip, что
   в калькуляторе.
   --------------------------------------------------------------------------- */

.measure__slab {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(28px, 4.6vw, 84px);
	padding: clamp(28px, 3vw, 56px);
	border-radius: var(--r-l);
	background: #fff;
}

.measure__lead {
	max-width: 30em;
	margin-top: clamp(16px, 1.6vw, 28px);
	font-size: clamp(17px, 1.3vw, 22px);
	line-height: 1.45;
	color: var(--c-text);
}

.measure__facts {
	display: grid;
	gap: 14px;
	max-width: 34em;
	margin-top: clamp(22px, 2.4vw, 40px);
	list-style: none;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.4;
}

.measure__facts li {
	display: flex;
	align-items: center;
	gap: 16px;
}

.measure__facts .ico {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 13px;
	border-radius: 50%;
	background: var(--c-lime);
	color: var(--c-ink);
}

.measure__form {
	padding: clamp(18px, 2.4vw, 40px);
	border-radius: var(--r-m);
	background: var(--c-tint);
}

.measure__form .request-form {
	--f-bg: #fff;
}

.measure__form .chip span {
	background: #fff;
}

.slot {
	min-width: 0;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
}

.slot__legend {
	display: block;
	margin-bottom: 10px;
	padding: 0;
	font-weight: 600;
	font-size: 15px;
	color: var(--c-muted);
}

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

@media (max-width: 1023px) {
	.measure__slab { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	/* Сверху больше воздуха: заголовок не прилипает к краю плиты. */
	.measure__slab { padding: 34px 20px 20px; border-radius: var(--r-m); }
	.measure__form { border-radius: var(--r-s); }
	.measure__form .request-form__fields { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
   7в. Действие под разделом текста

   Белая плашка-строка: слева фраза по теме раздела, справа кнопка.
   --------------------------------------------------------------------------- */

.sec-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 30px;
	flex-wrap: wrap;
	padding: clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 26px) clamp(20px, 2.4vw, 40px);
	border-radius: var(--r-m);
	background: #fff;
}

.sec-action__text {
	flex: 1 1 18em;
	font-weight: 600;
	font-size: clamp(17px, 1.3vw, 22px);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

@media (max-width: 599px) {
	.sec-action .btn { width: 100%; }
}


/* ---------------------------------------------------------------------------
   7г. Первый экран: ссылка на замер под кнопкой расчёта
   --------------------------------------------------------------------------- */

.main-screen .modal-btn.has-next {
	margin-bottom: 16px;
}

.main-screen .hero-measure {
	margin-bottom: clamp(26px, 2.6vw, 44px);
	font-weight: 600;
	font-size: clamp(15px, 1.05vw, 18px);
}

.main-screen .hero-measure a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--c-blue-3);
	transition: color var(--ui-base) var(--ui-ease);
}

.main-screen .hero-measure .ico {
	width: 18px;
	height: 18px;
	transition: transform var(--ui-turn) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	.main-screen .hero-measure a:hover { color: var(--c-blue-4); }
	.main-screen .hero-measure a:hover .ico { transform: translateX(4px); }
}


/* ---------------------------------------------------------------------------
   7д. Панель на телефоне

   Три действия у нижнего края. Только до 767px. Видна после первого экрана
   (класс is-shown ставит js/site.js) и уходит, когда поверх страницы что-то
   открыто или человек печатает в поле: клавиатура подняла бы её на пол-экрана.
   --------------------------------------------------------------------------- */

.dock {
	display: none;
}

@media (max-width: 767px) {
	.dock {
		position: fixed;
		z-index: 45;
		left: 10px;
		right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: 6px;
		padding: 6px;
		border-radius: var(--ui-pill);
		background: #fff;
		box-shadow: var(--ui-shadow-lg);
		transform: translateY(calc(100% + 30px));
		opacity: 0;
		visibility: hidden;
		transition: transform .42s var(--ui-ease), opacity var(--ui-base) ease, visibility 0s linear .42s;
	}

	.dock.is-shown {
		transform: none;
		opacity: 1;
		visibility: visible;
		transition-delay: 0s, 0s, 0s;
	}

	html.ui-modal-open .dock,
	html.ui-menu-open .dock,
	html.zoom-open .dock,
	html:has(.ui-cookie.is-open) .dock,
	html:has(.ui-field__input:focus) .dock {
		transform: translateY(calc(100% + 30px));
		opacity: 0;
		visibility: hidden;
	}

	.dock__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		flex: 1 1 0;
		min-width: 0;
		min-height: 50px;
		padding: 0 10px;
		border-radius: var(--ui-pill);
		background: var(--c-tint);
		font-family: var(--f-ui);
		font-weight: 600;
		font-size: 14px;
		color: var(--c-ink);
		white-space: nowrap;
		transition: transform var(--ui-fast) var(--ui-ease);
	}

	.dock__btn:active {
		transform: scale(.96);
	}

	.dock__btn .ico {
		width: 19px;
		height: 19px;
	}

	.dock__btn--main {
		background: var(--grad-red), #FF0000;
		color: #fff;
	}

	/* Подвал не прячется под панелью */
	.site-footer {
		padding-bottom: 76px;
	}
}

@media (max-width: 359px) {
	.dock__btn .ico { display: none; }
}


/* ---------------------------------------------------------------------------
   8. Акции

   Низкие горизонтальные карточки: скидка, кому она положена и кнопка слева,
   иллюстрация справа. Изображения без текста редактируются в ACF.
   --------------------------------------------------------------------------- */

.offers__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.25vw, 24px);
	list-style: none;
}

/* Карточка лежит горизонтально: слева скидка, кому и кнопка, справа
   иллюстрация у нижнего края. Так блок вдвое ниже прежних «плакатов». */
.offer {
	--offer-pad: clamp(20px, 1.9vw, 34px);
	position: relative;
	display: flex;
	min-width: 0;
	min-height: clamp(220px, 17vw, 290px);
	padding: var(--offer-pad);
	border-radius: var(--r-l);
	background: var(--c-tint);
	color: var(--c-ink);
	overflow: hidden;
	isolation: isolate;
}

.offer--1 { background: var(--grad-blue); color: #fff; }
.offer--2 { background: #e5f2e5; }
.offer--3 { background: #e7effc; }

.offer__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 52%;
	min-width: 0;
}

/* Ярлык над числом: что это за цифра. */
.offer__label {
	display: inline-flex;
	align-items: center;
	height: 28px;
	margin-bottom: clamp(8px, .8vw, 12px);
	/* У Unbounded прописные сидят выше середины строки: опускаем текст. */
	padding: .14em 14px 0;
	border-radius: var(--ui-pill);
	background: rgba(255, 255, 255, .22);
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.offer--2 .offer__label,
.offer--3 .offer__label { background: #fff; color: var(--c-blue-4); }

.offer:not(.offer--illustrated) .offer__copy { width: 100%; }

.offer__value {
	display: flex;
	align-items: flex-start;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(76px, 6.4vw, 120px);
	line-height: .8;
	letter-spacing: -.025em;
}

.offer--2 .offer__value,
.offer--3 .offer__value { color: var(--c-blue-4); }

/* В BebasNeue нет минуса: короткий штрих выровнен с цифрами. */
.offer__minus {
	align-self: center;
	width: .18em;
	height: .065em;
	margin-right: .055em;
	border-radius: .02em;
	background: currentColor;
	overflow: hidden;
	text-indent: -9em;
}

.offer__pct {
	margin-top: .06em;
	margin-left: .035em;
	font-size: .46em;
	line-height: 1;
}

/* Кому скидка: обычным шрифтом сайта, с прописной буквы. */
.offer__whom {
	margin: clamp(8px, .8vw, 14px) 0 clamp(14px, 1.3vw, 22px);
	font-family: var(--f-sub);
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 25px);
	line-height: 1.2;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.offer__whom::first-letter { text-transform: uppercase; }

.offer__btn {
	min-height: 46px;
	margin-top: auto;
	padding-inline: 22px;
	font-size: 15px;
	background: #fff;
	color: var(--c-ink);
}

/* Нажимается вся карточка, не только кнопка. */
.offer__btn::after {
	content: "";
	position: absolute;
	inset: 0;
}

.offer--2 .offer__btn,
.offer--3 .offer__btn { background: var(--c-blue-4); color: #fff; }

/* Иллюстрация занимает всю высоту карточки. Ширину (--w) шаблон считает
   по пропорциям картинки: широкой (ноутбук) достаётся больше, высокой
   (семья) меньше — на вид они выходят сопоставимого размера. */
.offer__media {
	position: absolute;
	right: -3%;
	bottom: 0;
	z-index: 0;
	width: var(--w, 54%);
	height: 100%;
	pointer-events: none;
}

.offer__media picture { display: contents; }

.offer__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
	transition: transform var(--ui-turn) var(--ui-ease);
	transform-origin: right bottom;
}

@media (hover: hover) and (pointer: fine) {
	.offer:hover .offer__image { transform: scale(1.04); }
	.offer--1:hover .offer__btn { background: var(--c-ink); color: #fff; }
	.offer--2:hover .offer__btn,
	.offer--3:hover .offer__btn { background: #005be2; }
}

/* Уже 1100px три карточки в ряд тесны: встают столбиком, каждая низкая. */
@media (max-width: 1099px) {
	.offers__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.offer { min-height: 190px; }
	.offer__copy { width: 56%; }
	.offer__value { font-size: 84px; }
	.offer__whom { font-size: 20px; }
	.offer__media { width: calc(var(--w, 54%) * .8); }
}

@media (max-width: 639px) {
	.offers__list { gap: 10px; }
	.offer {
		--offer-pad: 18px;
		min-height: 168px;
		border-radius: var(--r-m);
	}
	.offer__copy { width: 54%; }
	.offer__label { height: 26px; margin-bottom: 8px; padding: .14em 11px 0; font-size: 9.5px; }
	.offer__value { font-size: 60px; }
	.offer__whom { margin: 6px 0 12px; font-size: 16px; }
	.offer__btn { min-height: 44px; padding-inline: 16px; font-size: 14px; }
	.offer__media { width: calc(var(--w, 54%) * .92); }
}

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

/* ---------------------------------------------------------------------------
   9. Разделы текста

   Текст страницы разбит по H2 (inc/content.php), каждый раздел получает
   раскладку по тому, что в нём лежит:
     text   — заголовок слева стоит на месте, текст справа прокручивается;
     table  — таблица белой плитой во всю ширину;
     steps  — белая плита, шаги в ряд, связаны пунктиром;
     cards  — карточки со значком;
     picker — подборщик «ситуация → решение».
   --------------------------------------------------------------------------- */

.prose-sec {
	margin-top: var(--gap-sec);
}

.prose-sec__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 24px clamp(30px, 5vw, 90px);
}

.prose-sec__head {
	position: sticky;
	top: 32px;
}

/* Заголовки внутри текста мельче заголовков блоков: они длиннее */
.prose-sec__title {
	font-size: clamp(34px, calc(10px + 2.9vw), 66px);
}

.prose-sec--table .prose-sec__grid,
.prose-sec--steps .prose-sec__grid,
.prose-sec--cards .prose-sec__grid,
.prose-sec--picker .prose-sec__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 2.8vw, 48px);
}

/* Шапка раздела с блоком: заголовок слева, вступление справа по нижней линии */
.prose-sec--table .prose-sec__head,
.prose-sec--steps .prose-sec__head,
.prose-sec--cards .prose-sec__head,
.prose-sec--picker .prose-sec__head {
	position: static;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 16px clamp(30px, 5vw, 90px);
}

.prose-sec__intro {
	max-width: 34em;
	padding-bottom: .35em;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.5;
	color: var(--c-muted);
}

.prose-sec__intro p + p {
	margin-top: .6em;
}

.prose-sec__intro a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.prose {
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.65;
	color: var(--c-text);
}

.prose > * + * {
	margin-top: 1.05em;
}

.prose p {
	max-width: 44em;
}

.prose a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--ui-fast) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	.prose a:hover { color: var(--c-ink); }
}

.prose strong,
.prose b {
	font-weight: 600;
	color: var(--c-ink);
}

.prose h2 {
	margin-top: 1.8em;
	font-family: var(--f-sub);
	font-weight: var(--w-sub);
	font-size: clamp(24px, 1.9vw, 34px);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--c-ink);
}

.prose h3 {
	margin-top: 1.9em;
	font-weight: 600;
	font-size: clamp(18px, 1.4vw, 24px);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

.prose h3 + * {
	margin-top: .6em;
}

.prose > :first-child {
	margin-top: 0;
}

.prose ul {
	list-style: none;
}

.prose ul > li {
	position: relative;
	max-width: 44em;
	padding-left: 26px;
}

.prose ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-blue);
}

.prose li + li {
	margin-top: .55em;
}

.prose ol {
	padding-left: 1.4em;
}

.prose ol > li {
	max-width: 44em;
	padding-left: .3em;
}

/* Заметка: лаймовая плашка */
.prose .seo-note {
	max-width: 46em;
	padding: 20px 26px;
	border-radius: var(--r-m);
	background: var(--c-lime);
	color: var(--c-ink);
}

.prose .seo-note p {
	max-width: none;
}

.prose .seo-note a {
	color: var(--c-ink);
}


/* ---------------------------------------------------------------------------
   10. Таблицы
   --------------------------------------------------------------------------- */

.prose .seo-table-wrap {
	padding: clamp(6px, .7vw, 12px);
	overflow-x: auto;
	border-radius: var(--r-l);
	background: var(--c-white);
	-webkit-overflow-scrolling: touch;
}

.prose table {
	width: 100%;
	min-width: 520px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .95em;
	line-height: 1.45;
}

/* Шапка таблицы — подложка-пилюля внутри белой плиты */
.prose th {
	padding: 16px 24px;
	background: var(--c-tint);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	color: var(--c-muted);
	white-space: nowrap;
}

.prose th:first-child { border-radius: calc(var(--r-l) - 10px) 0 0 calc(var(--r-l) - 10px); }
.prose th:last-child  { border-radius: 0 calc(var(--r-l) - 10px) calc(var(--r-l) - 10px) 0; }

.prose td {
	padding: 17px 24px;
	border-top: 1px solid var(--c-hair);
	vertical-align: top;
	transition: background-color var(--ui-fast) var(--ui-ease);
}

/* Первая строка примыкает к шапке или к краю плиты — линия не нужна */
.prose tbody tr:first-child td,
.prose table > tr:first-child td {
	border-top-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.prose tbody tr:hover td { background: rgba(234, 244, 251, .55); }
}

.prose td.price {
	font-weight: 600;
	white-space: nowrap;
	color: var(--c-ink);
}

.prose td a {
	text-decoration: none;
}

.prose td a strong {
	color: var(--c-blue-3);
}

/* Пояснения под таблицей. С подзаголовками — в две колонки: таблица
   во всю ширину, и узкая колонка текста под ней оставляла полэкрана пустым. */
.prose__after:has(h3) {
	columns: 2;
	column-gap: clamp(30px, 5vw, 90px);
	margin-top: 1.9em;
}

.prose__after:has(h3) > * {
	break-inside: avoid;
	margin: 0 0 1.5em;
}

.prose__after:has(h3) > h3 {
	break-after: avoid;
	margin: 0 0 .5em;
}

.prose__after > * + * {
	margin-top: 1.05em;
}

.prose__after:has(h3) > * + * {
	margin-top: 0;
}


/* ---------------------------------------------------------------------------
   11. Шаги, карточки, подборщик
   --------------------------------------------------------------------------- */

/* --- шаги -----------------------------------------------------------------
   Настоящая последовательность (заявка → замер → расчёт → изготовление →
   монтаж): номера в кружках связаны пунктиром, последний шаг — зелёный. */

.prose--steps .steps {
	--step: clamp(52px, 4vw, 68px);
	--gap: clamp(16px, 1.8vw, 32px);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--gap);
	padding: clamp(26px, 3vw, 56px);
	border-radius: var(--r-l);
	background: var(--c-white);
	list-style: none;
	counter-reset: step;
}

.prose--steps .steps > li {
	position: relative;
	max-width: none;
	margin: 0;
	padding: calc(var(--step) + clamp(18px, 1.8vw, 30px)) 0 0;
	counter-increment: step;
	font-size: .95em;
	line-height: 1.5;
}

.prose--steps .steps > li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--step);
	height: var(--step);
	padding-top: .08em;
	border-radius: 50%;
	background: var(--c-blue);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: calc(var(--step) * .56);
	line-height: 1;
	color: #fff;
}

.prose--steps .steps > li:last-child::before {
	background: var(--c-green);
	color: var(--c-ink);
}

.prose--steps .steps > li::after {
	content: "";
	position: absolute;
	top: calc(var(--step) / 2 - 1px);
	left: calc(var(--step) + 12px);
	right: calc(12px - var(--gap));
	border-top: 2px dashed var(--c-line);
}

.prose--steps .steps > li:last-child::after {
	display: none;
}

.step__text {
	display: block;
	max-width: 17em;
}

.prose--steps .seo-note {
	max-width: none;
	margin-top: clamp(10px, 1vw, 16px);
	padding: clamp(18px, 1.7vw, 26px) clamp(22px, 2.6vw, 44px);
	border-radius: var(--r-m);
}

/* --- карточки -------------------------------------------------------------
   Перечень с выносами («Спальня. …») — одна белая плита, пункты в ней ровной
   сеткой: слева значок по смыслу заголовка (или снимок, если он заготовлен
   в img/cards/), справа заголовок и пояснение. Всё на одной линии чтения:
   значок, заголовок и текст стоят рядом, пустых полей внутри пункта нет.
   Теней нет. */

.prose--cards ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 56px) clamp(32px, 4vw, 80px);
	padding: clamp(28px, 3.4vw, 64px);
	border-radius: var(--r-l);
	background: var(--c-white);
}

/* Три пункта — в три колонки, один — во всю ширину. */
.prose--cards ul:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(28px, 3vw, 56px);
}

.prose--cards ul:has(> :nth-child(1):last-child) {
	grid-template-columns: minmax(0, 1fr);
}

.prose--cards ul > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(16px, 1.5vw, 26px);
	align-content: start;
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: .95em;
	line-height: 1.55;
}

.prose--cards ul > li::before {
	display: none;
}

.feat__ico {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(56px, 4.4vw, 76px);
	height: clamp(56px, 4.4vw, 76px);
	border-radius: 28%;
	background: var(--c-tint);
	color: var(--c-blue-4);
}

.feat__ico .ico {
	width: 48%;
	height: 48%;
}

/* Заголовок пункта — шрифт меню. */
.prose--cards ul > li > strong {
	display: block;
	grid-column: 2;
	margin: .15em 0 8px;
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(16px, 1.3vw, 22px);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

.feat__text {
	display: block;
	grid-column: 2;
	max-width: 34em;
	color: var(--c-text);
}

/* Пункт со снимком: снимок на месте значка, крупнее. */
.feat__media {
	grid-row: 1 / span 2;
	display: block;
	width: clamp(96px, 9vw, 168px);
	aspect-ratio: 1 / 1;
	border-radius: clamp(16px, 1.4vw, 24px);
	overflow: hidden;
	background: var(--c-tint);
}

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

/* --- подборщик ------------------------------------------------------------
   Больше четырёх пунктов: слева ситуация, справа — что под неё подходит. */

.prose--picker ul {
	padding: clamp(6px, .8vw, 14px) clamp(20px, 2.8vw, 52px);
	border-radius: var(--r-l);
	background: var(--c-white);
}

.prose--picker ul > li {
	display: grid;
	grid-template-columns: minmax(0, 5fr) 44px minmax(0, 7fr);
	align-items: center;
	gap: 8px clamp(16px, 2.4vw, 44px);
	max-width: none;
	margin: 0;
	padding: clamp(16px, 1.5vw, 24px) 0;
}

.prose--picker ul > li + li {
	border-top: 1px solid var(--c-hair);
}

.prose--picker ul > li::before {
	display: none;
}

.prose--picker ul > li > strong {
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 26px);
	line-height: 1.25;
	letter-spacing: -.012em;
}

.picker__go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-tint);
	color: var(--c-blue-3);
}

.picker__go .ico {
	width: 20px;
	height: 20px;
}

.picker__text {
	line-height: 1.5;
}


/* ---------------------------------------------------------------------------
   12. Смежные разделы
   --------------------------------------------------------------------------- */

.related__title {
	margin-bottom: clamp(24px, 2.8vw, 48px);
	font-size: clamp(34px, calc(10px + 2.9vw), 66px);
}


/* ---------------------------------------------------------------------------
   13. Страницы: портфолио, контакты, документы, 404
   --------------------------------------------------------------------------- */

.page-head {
	padding-top: clamp(24px, 3.4vw, 60px);
}

.page-head__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(42px, calc(20px + 4.2vw), 100px);
	line-height: .9;
	color: var(--c-ink);
}

.page-head__lead {
	max-width: 44em;
	margin-top: clamp(18px, 2vw, 32px);
	font-size: clamp(17px, 1.3vw, 22px);
	line-height: 1.5;
	color: var(--c-text);
}

.page-head__lead p + p {
	margin-top: .7em;
}

.page-head__lead a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-head--404 {
	padding-bottom: 10px;
}

.page-head--404 .btn {
	margin-top: 28px;
}

.page-head + .works {
	margin-top: clamp(32px, 4vw, 64px);
}

.legal {
	padding-top: clamp(24px, 3.4vw, 60px);
}

.legal .container {
	max-width: 980px;
}

.legal__title {
	margin-bottom: clamp(22px, 2.6vw, 40px);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(36px, 4.2vw, 68px);
	line-height: .95;
	color: var(--c-ink);
}

.legal__body {
	font-size: 17px;
}

.legal__body ol > li {
	list-style: decimal;
}

/* Сайт и редакция под названием документа */
.legal__body .legal__meta {
	color: var(--c-muted);
	font-size: 15px;
}

.legal__pdf {
	margin-top: clamp(28px, 3vw, 48px);
}


/* ---------------------------------------------------------------------------
   14. Работы
   --------------------------------------------------------------------------- */

.works__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(190px, 18vw, 300px);
	gap: clamp(12px, 1.4vw, 24px);
	list-style: none;
}

.works__cell {
	min-width: 0;
	min-height: 0;
}

.works__grid:not(.works__grid--all) .works__cell:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.works__grid:not(.works__grid--all) .works__cell:nth-child(2) {
	grid-row: span 2;
}

.works__grid--all {
	display: block;
	columns: 3;
	column-gap: 24px;
}

.works__grid--all .works__cell {
	break-inside: avoid;
	margin-bottom: 24px;
}

.works__grid--all .shot { height: auto; }
.works__grid--all .shot img { height: auto; }

.shot__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 70px 80px 26px 28px;
	background: linear-gradient(transparent, rgba(0,0,0,.7));
	color: #fff;
	font-family: var(--f-sub);
	font-weight: 500;
	font-size: clamp(17px, 1.4vw, 23px);
	line-height: 1.35;
	pointer-events: none;
}

.shot {
	position: relative;
	display: block;
	height: 100%;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-tint);
	transform: translateZ(0);
}

.shot picture,
.shot img {
	width: 100%;
}

.shot img {
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ui-ease);
}

.shot picture { display: block; height: 100%; }

.shot__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-ink);
	opacity: 1;
	z-index: 1;
	transition: opacity var(--ui-fast) var(--ui-ease), transform var(--ui-turn) var(--ui-ease-pop);
}

.shot__zoom .ico {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.shot:hover img { transform: scale(1.025); }
	.shot:hover .shot__zoom { background: var(--c-blue-4); color: #fff; }
}

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

/* Производство: материальная фактура вместо набора условных значков. */
/* Собственное производство: текст и факты слева, высокий снимок справа.
   Блок стоит прямо на фоне страницы, как первый экран: заголовок без плиты,
   под ним вступление с кнопкой и факты белыми плитками 2×2. Снимок занимает
   всю высоту блока. Значков, теней и затуханий нет. */

.prod__wrap {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(20px, 2.6vw, 50px);
	align-items: stretch;
}

.prod--plain .prod__wrap { grid-template-columns: minmax(0, 1fr); }

.prod__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.prod__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px clamp(24px, 3vw, 56px);
	margin: clamp(18px, 1.8vw, 30px) 0 clamp(24px, 2.6vw, 46px);
}

.prod__text {
	flex: 1 1 22em;
	max-width: 32em;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.6;
	color: var(--c-text);
}

.prod__text p + p { margin-top: 12px; }

.prod__btn { flex: 0 0 auto; }

.prod__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1vw, 18px);
	margin-top: auto;
	list-style: none;
}

.prod__fact {
	padding: clamp(20px, 1.9vw, 34px);
	border-radius: var(--r-m);
	background: #fff;
}

/* Первый факт — акцент блока: синим, как кнопки. */
.prod__fact:first-child {
	background: var(--c-blue);
	color: #fff;
}

/* Малые заголовки — шрифт меню. */
.prod__fact-title {
	margin-bottom: 10px;
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(17px, 1.4vw, 25px);
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--c-ink);
}

.prod__fact:first-child .prod__fact-title { color: #fff; }

.prod__fact-text {
	font-size: clamp(14.5px, .98vw, 16.5px);
	line-height: 1.55;
	color: var(--c-muted);
}

.prod__fact:first-child .prod__fact-text { color: rgba(255, 255, 255, .92); }

.prod__media {
	position: relative;
	min-height: clamp(380px, 36vw, 640px);
	margin: 0;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-tint);
	transform: translateZ(0);
}

.prod__media picture,
.prod__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.prod__media img {
	position: absolute;
	inset: 0;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.prod__wrap { grid-template-columns: minmax(0, 1fr); }
	.prod__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 599px) {
	.prod__media { aspect-ratio: 4 / 3; border-radius: var(--r-m); }
	.prod__btn { width: 100%; justify-content: center; }
	.prod__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.prod__fact { padding: 18px; border-radius: 20px; }
	.prod__fact-title { margin-bottom: 6px; font-size: 16px; }
}


@media (max-width: 900px) {
	.works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
	.works__grid:not(.works__grid--all) .works__cell:first-child { grid-row: span 1; }
	.works__grid:not(.works__grid--all) .works__cell:nth-child(2) { grid-row: span 2; }
	.works__grid--all { columns: 2; }
}

@media (max-width: 639px) {
	.works__grid { grid-auto-rows: 185px; gap: 12px; }
	.works__grid:not(.works__grid--all) .works__cell:first-child { grid-row: span 2; }
	.works__grid:not(.works__grid--all) .works__cell:nth-child(2) { grid-row: span 1; }
	.shot { border-radius: 18px; }
	.shot__caption { padding: 65px 66px 20px 20px; font-size: 18px; }
	.shot__zoom { right: 10px; bottom: 10px; }
	.works__grid--all { column-gap: 12px; }
	.works__grid--all .works__cell { margin-bottom: 12px; }
}

.sec-head__link {
	margin-bottom: .4em;
}


/* ---------------------------------------------------------------------------
   15. Отзывы
   --------------------------------------------------------------------------- */

.reviews__side {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 20px);
	margin-bottom: .4em;
}

/* Оценка на картах: белая пилюля, слева лаймовая плашка с числом */
.rating {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: clamp(60px, 4.6vw, 84px);
	padding: 8px clamp(18px, 1.6vw, 28px) 8px 8px;
	border-radius: var(--ui-pill);
	background: #fff;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}

.rating:active {
	transform: scale(.97);
}

.rating__score {
	display: flex;
	align-items: center;
	gap: 4px;
	align-self: stretch;
	padding: 0 clamp(12px, 1.1vw, 18px);
	border-radius: var(--ui-pill);
	background: var(--c-lime);
	font-weight: 700;
	font-size: clamp(17px, 1.4vw, 24px);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.rating__score .ico {
	width: 18px;
	height: 18px;
}

.rating__text {
	display: grid;
	line-height: 1.25;
}

.rating__name {
	font-weight: 600;
	font-size: 15px;
}

.rating__count {
	font-size: 14px;
	color: var(--c-muted);
}

@media (hover: hover) and (pointer: fine) {
	.rating:hover { background: var(--c-tint); }
}

@media (max-width: 767px) {
	/* Обе оценки и стрелки в одну строку не встают: стрелки уходят вправо
	   на следующую строку */
	.reviews__side { flex-wrap: wrap; }
	.reviews__side .strip-nav { margin-left: auto; }
}

.strip-nav {
	display: flex;
	gap: 8px;
}

.strip-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 4.6vw, 84px);
	height: clamp(52px, 4.6vw, 84px);
	border-radius: 50%;
	background: #fff;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease),
	            transform var(--ui-fast) var(--ui-ease),
	            opacity var(--ui-base) var(--ui-ease);
}

.strip-nav__btn:active {
	transform: scale(.94);
}

.strip-nav__btn:disabled {
	opacity: .45;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.strip-nav__btn:not(:disabled):hover { background: var(--c-blue); color: #fff; }
}

/* Лента: листается пальцем, колесом с Shift и стрелками. Начинается по
   левому краю контейнера и уходит за правый край окна. */
.strip {
	display: flex;
	gap: clamp(10px, 1.2vw, 20px);
	padding: 4px var(--pad-outer) 10px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--pad-outer);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

/* Ленту можно тянуть мышью (js/site.js, bindStripDrag). Пока тянут —
   без привязки к карточкам и без выделения текста. */
@media (hover: hover) and (pointer: fine) {
	.strip { cursor: grab; }
}

.strip.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	user-select: none;
}

.strip.is-dragging a {
	pointer-events: none;
}

.strip__cell {
	flex: 0 0 clamp(240px, 21vw, 350px);
	scroll-snap-align: start;
}

/* Снимок отзыва показан целиком, без вуали; по нажатию открывается крупно. У файла (456 × 910)
   сверху около 90px пустого белого поля: кадр на 60px ниже файла и прижат
   к низу, поэтому лишнее поле срезается сверху. Низ не трогаем — у коротких
   отзывов пустое место там естественно. */
.review {
	display: block;
	aspect-ratio: 456 / 850;
	border-radius: var(--r-l);
	overflow: hidden;
	background: #fff;
}

.review picture,
.review img {
	width: 100%;
	height: 100%;
}

.review img {
	object-fit: cover;
	object-position: bottom;
}


/* ---------------------------------------------------------------------------
   16. Вопросы

   Каждый вопрос — своя белая плашка. Раскрытый отличается знаком в кружке:
   плюс на голубом становится минусом на синем.
   --------------------------------------------------------------------------- */

.faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 30px clamp(30px, 5vw, 90px);
}

.faq__side {
	position: sticky;
	top: 32px;
}

.faq__ask {
	max-width: 420px;
	margin-top: clamp(22px, 2.6vw, 44px);
	padding: clamp(20px, 1.9vw, 30px);
	border-radius: var(--r-m);
	background: var(--c-white);
	font-size: 16px;
	line-height: 1.45;
	color: var(--c-muted);
}

.faq__phone {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	font-weight: 600;
	font-size: clamp(19px, 1.5vw, 25px);
	letter-spacing: -.01em;
	color: var(--c-ink);
	white-space: nowrap;
	transition: color var(--ui-fast) var(--ui-ease);
}

.faq__phone-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-lime);
	color: var(--c-ink);
}

.faq__phone-ico .ico {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.faq__phone:hover { color: var(--c-blue-3); }
}

.faq .seo-faq {
	display: grid;
	gap: 8px;
}

.faq .seo-faq-item {
	padding: 0 clamp(18px, 2vw, 32px);
	border-radius: var(--r-m);
	background: var(--c-white);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(14px, 1.3vw, 20px) 0;
	list-style: none;
	font-weight: 600;
	font-size: clamp(17px, 1.3vw, 21px);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--c-ink);
	cursor: pointer;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-right: calc(clamp(18px, 2vw, 32px) * -1 + 10px);
	border-radius: 50%;
	color: var(--c-ink);
	background:
		linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat,
		var(--c-tint);
	transition: transform var(--ui-turn) var(--ui-ease),
	            background-size var(--ui-turn) var(--ui-ease),
	            background-color var(--ui-base) var(--ui-ease),
	            color var(--ui-base) var(--ui-ease);
}

.faq details[open] summary::after {
	transform: rotate(180deg);
	color: #fff;
	background-color: var(--c-blue);
	background-size: 16px 2px, 2px 0, auto;
}

@media (hover: hover) and (pointer: fine) {
	.faq summary:hover::after { background-color: var(--c-blue); color: #fff; }
}

.faq .seo-faq-a {
	max-width: 44em;
	padding: 0 40px 24px 0;
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.6;
}

.faq .seo-faq-a a {
	color: var(--c-blue-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------------
   17. Форма и плита

   Поведение, разметка и состояния — css/ui/forms.css. Здесь вид под сайт:
   поле с рамкой в 1px и радиусом 20, кнопка — красная пилюля, как на первом
   экране. Цвета поля — четыре переменные на форме; тёмной форме хватает
   их переопределить.
   --------------------------------------------------------------------------- */

.request-form {
	--f-bg:         var(--ui-surface);
	--f-line:       var(--ui-surface-2);
	--f-line-hover: #b9cfdf;
	--f-focus:      #7f97aa;
	--f-ink:        var(--c-ink);
	--f-muted:      var(--c-muted);

	display: grid;
	gap: 14px;
}

.request-form--dark {
	/* Поле — оттенок самой плиты, только светлее: читается углублением,
	   а не вставкой чужого цвета. */
	--f-bg:         #2b2b2b;
	--f-line:       #3c3c3c;
	--f-line-hover: #595959;
	--f-focus:      #9a9a9a;
	--f-ink:        #fff;
	--f-muted:      #a3a3a3;
}

.request-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.request-form .ui-field > .ui-field__label {
	color: var(--f-muted);
}

.request-form .ui-field__input {
	border: 1px solid var(--f-line);
	background: var(--f-bg);
	color: var(--f-ink);
	transition: border-color var(--ui-base) var(--ui-ease);
}

.request-form .ui-field__input:focus::placeholder {
	color: var(--f-muted);
}

/* Контур один: фокус и ошибка меняют цвет рамки, внутренних теней нет */
.request-form .ui-field__input:focus {
	border-color: var(--f-focus);
	box-shadow: none;
}

.request-form .ui-field__input.is-invalid,
.request-form .ui-field__input.is-invalid:focus {
	border-color: var(--ui-error-line);
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.request-form .ui-field__input:hover:not(:focus):not(.is-invalid) { border-color: var(--f-line-hover); }
}

/* Автозаполнение: без этого Chrome красит поле в свой голубой */
.request-form .ui-field__input:-webkit-autofill,
.request-form .ui-field__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--f-ink);
	box-shadow: inset 0 0 0 100px var(--f-bg);
	caret-color: var(--f-ink);
}

.request-form--dark .ui-field__error,
.request-form--dark + .ui-field__error {
	color: #ff8a80;
}

.request-form__submit {
	width: 100%;
	min-height: 68px;
	border-radius: var(--ui-pill);
	background: var(--grad-red), #FF0000;
	color: #fff;
	font-family: var(--f-ui);
	font-weight: 600;
	font-size: 17px;
	white-space: nowrap;
	transition: transform var(--ui-fast) var(--ui-ease), filter var(--ui-base) var(--ui-ease), opacity var(--ui-base) var(--ui-ease);
}

.request-form__submit:hover:not(:disabled),
.request-form__submit:active:not(:disabled) {
	background: var(--grad-red), #FF0000;
}

.request-form__submit:active:not(:disabled) {
	transform: scale(.985);
}

@media (hover: hover) and (pointer: fine) {
	.request-form__submit:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); }
}

/* Идёт отправка: надпись гаснет, поверх — кольцо */
.request-form__submit.is-loading {
	position: relative;
	pointer-events: none;
}

.request-form__submit.is-loading > span {
	opacity: 0;
}

.request-form__submit.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin var(--ui-spin) linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Согласие. --consent-em — ширина длинной половины фразы в em с запасом 3 %,
   замерена под шрифт сайта (my-ui, markup.md, «Согласие»). */
.request-form .ui-consent {
	--consent-em: 29.4;   /* замер: 28.50 em, Onest 400 */
	margin-top: 4px;
	font-family: var(--f-text);
	font-weight: 400;
	color: var(--f-muted);
}

.request-form .ui-consent a {
	color: var(--f-ink);
}

.request-form .ui-consent input[type="checkbox"] {
	border-radius: 7px;
	border-color: var(--f-line-hover);
	background: var(--f-bg);
}

.request-form .ui-consent input[type="checkbox"]:checked {
	background: var(--ui-check-fill);
}

/* Ошибка — только собственная рамка квадрата, бледнее текста сообщения */
.request-form .ui-consent input[type="checkbox"].is-invalid {
	border-color: var(--ui-error-line);
}

.request-form--dark .ui-consent input[type="checkbox"]:checked {
	background: #fff;
	border-color: #fff;
}

.request-form .ui-form__status {
	font-size: 15px;
}

/* Заявка ушла: форма сменяется сообщением на том же месте */
.request-form.is-done > :not(.request-form__done) {
	display: none;
}

.request-form__done {
	padding: 8px 0;
}

.request-form__done-title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(36px, 3.4vw, 58px);
	line-height: .95;
	color: var(--f-ink);
}

.request-form__done-text {
	max-width: 28em;
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--f-muted);
}

/* --- тёмная плита с формой ------------------------------------------------
   Ровная тёмная плита без рисунка: слева заголовок и четыре довода
   со значками, справа — форма на плашке тоном светлее. */

.cta__slab {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(28px, 4.6vw, 84px);
	padding: clamp(26px, 4.4vw, 84px);
	border-radius: clamp(30px, 3.4vw, 60px);
	background: var(--c-dark);
	color: #fff;
}

.cta__title {
	font-size: clamp(38px, calc(10px + 3.7vw), 82px);
	color: #fff;
}

.cta__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.5vw, 24px) 30px;
	max-width: 640px;
	margin-top: clamp(26px, 3vw, 52px);
	list-style: none;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.35;
	color: rgba(255, 255, 255, .82);
}

.cta__facts li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cta__facts .ico {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 13px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--c-green);
}

.cta__form {
	padding: clamp(18px, 2.4vw, 40px);
	border-radius: clamp(24px, 2.4vw, 40px);
	background: #242424;
}

.cta__notice {
	margin-bottom: 16px;
	padding: 14px 20px;
	border-radius: var(--r-s);
	background: var(--c-lime);
	color: var(--c-ink);
	font-size: 16px;
	line-height: 1.4;
}

.cta__notice--error {
	background: #ffd9d4;
}


/* ---------------------------------------------------------------------------
   18. Окно и просмотрщик
   --------------------------------------------------------------------------- */

/* Окно формы: узкое, поля в одну колонку. Заголовок — шрифтом заголовков
   сайта: Bebas узкий, строка получается плотной и с полями не спорит. */
.ui-modal {
	width: min(580px, calc(100% - 32px));
	border-radius: 40px;
}

.ui-modal__head {
	padding: 40px 96px 6px var(--ui-modal-pad);
}

.ui-modal__title {
	margin: 0 0 10px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(38px, 3.4vw, 54px);
	line-height: .95;
	letter-spacing: 0;
	color: var(--c-ink);
}

.ui-modal__title span {
	display: block;
	color: var(--c-blue);
}

/* Окно под акцию: «Скидка 6 %» одной строкой, процент в строке со словом. */
.ui-modal__title span.is-inline {
	display: inline;
}

.ui-modal .ui-form__note {
	margin-bottom: 0;
	font-size: 16px;
	color: var(--c-muted);
}

/* margin + полоса + padding справа = полю слева (см. forms.css, раздел 6) */
.ui-modal__body {
	margin: 14px 20px 24px 0;
	padding: 8px 20px 20px var(--ui-modal-pad);
}

.ui-modal .request-form__fields {
	grid-template-columns: minmax(0, 1fr);
}

.ui-modal__close {
	top: 24px;
	right: 24px;
	width: 52px;
	height: 52px;
	background: var(--ui-surface);
	color: var(--c-ink);
}

.ui-modal__close:hover {
	background: var(--c-blue);
	color: #fff;
}

.ui-modal__close:active {
	background: var(--c-blue-3);
	color: #fff;
}

.ui-modal__veil {
	background: rgba(8, 18, 30, .55);
}

/* Просмотрщик снимков: работы и отзывы. Собирает js/site.js. */
.zoom {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	/* Колонка не шире окна: иначе широкий снимок раздвигает её за край. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	justify-items: center;
	align-items: center;
	gap: 16px;
	padding: 72px 16px 24px;
	background: rgba(8, 14, 22, .9);
	opacity: 0;
	transition: opacity var(--ui-slow) var(--ui-ease);
}

.zoom.is-open {
	opacity: 1;
}

/* Снимки на сайте небольшие (540px по ширине): в просмотрщике они
   подрастают до двух третей высоты окна, но не больше — дальше мыло.
   Ширина считается из пропорций кадра (--r ставит js/site.js), поэтому
   снимок всегда целиком заполняет свою рамку, без полей по краям. */
.zoom__img {
	--zoom-h: min(66vh, 620px, 100vh - 180px);
	width: min(100%, 1100px, var(--zoom-h) * var(--r, 1.333));
	height: auto;
	aspect-ratio: var(--r, 1.333);
	border-radius: 20px;
	object-fit: cover;
}

.zoom__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	transition: background-color var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease);
}

.zoom__btn:active {
	transform: scale(.94);
}

.zoom__btn--close { top: 12px; right: 12px; }
.zoom__btn--prev  { left: 12px; top: 50%; margin-top: -26px; }
.zoom__btn--next  { right: 12px; top: 50%; margin-top: -26px; }

@media (hover: hover) and (pointer: fine) {
	.zoom__btn:hover { background: var(--c-blue); }
}

.zoom__foot {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 52px;
	color: rgba(255, 255, 255, .7);
	font-size: 15px;
}

.zoom__count {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.zoom__foot .btn {
	min-height: 52px;
	padding-inline: 28px;
	font-size: 15px;
}

html.zoom-open {
	overflow: hidden;
}


/* ---------------------------------------------------------------------------
   19. Подвал и контакты
   --------------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--gap-sec);
	padding-bottom: clamp(24px, 3vw, 44px);
}

/* «Контакты» — крупно и синим, как в прежнем подвале */
.contacts__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(60px, calc(26px + 6.4vw), 150px);
	line-height: .9;
	color: var(--c-blue);
}

.contacts__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
	gap: clamp(12px, 1.4vw, 24px);
	margin-top: clamp(22px, 2.6vw, 44px);
}

/* Левая колонка — белая плита: контакты, действия, снимок входа */
.contacts__info {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.4vw, 40px);
	border-radius: var(--r-l);
	background: var(--c-white);
}

.contacts__list {
	display: grid;
	gap: clamp(12px, 1.2vw, 20px);
	list-style: none;
}

.contacts__item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.contacts__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-tint);
	color: var(--c-blue-3);
}

.contacts__ico .ico {
	width: 22px;
	height: 22px;
}

.contacts__text {
	font-weight: 500;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.35;
	color: var(--c-ink);
}

.contacts__text--phone {
	font-weight: 600;
	font-size: clamp(21px, 1.75vw, 30px);
	letter-spacing: -.012em;
	white-space: nowrap;
}

a.contacts__text {
	transition: color var(--ui-fast) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	a.contacts__text:hover { color: var(--c-blue-3); }
}

.contacts__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: clamp(22px, 2.2vw, 36px);
}

.contacts__actions .round-link {
	width: 60px;
	height: 60px;
	background: var(--c-tint);
}

.contacts__photo {
	margin-top: auto;
	padding-top: clamp(22px, 2.2vw, 36px);
}

.contacts__photo img {
	width: 100%;
	border-radius: calc(var(--r-l) - 12px);
}

.contacts__map {
	position: relative;
	min-height: 440px;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-tint);
}

/* Запасная ссылка поверх карты: работает и тогда, когда виджет не загрузился */
.contacts__maplink {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: var(--ui-pill);
	background: #fff;
	box-shadow: var(--ui-shadow-sm);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease), color var(--ui-base) var(--ui-ease);
}

.contacts__maplink .ico {
	width: 18px;
	height: 18px;
}

@media (hover: hover) and (pointer: fine) {
	.contacts__maplink:hover { background: var(--c-blue); color: #fff; }
}

.contacts__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 440px;
	border: 0;
}

/* --- контакты в подвале: строка без карты --------------------------------- */

.nap {
	display: flex;
	align-items: center;
	gap: 20px clamp(20px, 2.4vw, 44px);
	padding: clamp(18px, 2vw, 34px) clamp(18px, 2.4vw, 40px);
	border-radius: var(--r-l);
	background: #fff;
}

.nap__list {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 18px clamp(18px, 2.2vw, 44px);
	flex: 1 1 auto;
	min-width: 0;
	list-style: none;
}

.nap__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.nap__text {
	display: grid;
	gap: 2px;
	font-weight: 500;
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.35;
	color: var(--c-ink);
}

.nap__label {
	font-weight: 400;
	font-size: 14px;
	color: var(--c-muted);
}

.nap__text a {
	transition: color var(--ui-fast) var(--ui-ease);
}

.nap__phone {
	font-weight: 600;
	white-space: nowrap;
}

.nap__more {
	flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
	.nap__text a:hover { color: var(--c-blue-3); }
}

@media (max-width: 1399px) {
	.nap { flex-wrap: wrap; }
	.nap__list { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; flex-basis: 100%; }
}

@media (max-width: 599px) {
	.nap { border-radius: var(--r-m); }
	.nap__list { grid-template-columns: minmax(0, 1fr); }
	.nap__more { width: 100%; }
}

/* --- плита подвала ---------------------------------------------------------
   Белая плита без тени, как остальные плиты сайта. Слева знак,
   телефон и мессенджеры, справа карта разделов. Документы — строкой ссылок
   внизу: это служебное, а не раздел каталога. */

.foot {
	margin-top: clamp(14px, 1.4vw, 24px);
	padding: clamp(30px, 4vw, 72px) clamp(22px, 4vw, 72px) clamp(22px, 2vw, 34px);
	border-radius: var(--r-l);
	background: #fff;
	color: var(--c-ink);
}

.foot__top {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px clamp(32px, 5vw, 100px);
}

.foot__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.foot__logo {
	display: block;
	/* У файла логотипа пустые поля: сдвигаем знак к краю плиты. */
	margin: -3% 0 0 -4%;
}

.foot__logo img {
	display: block;
	width: clamp(190px, 17vw, 300px);
	height: auto;
}

.foot__about {
	max-width: 24em;
	margin-top: clamp(10px, 1vw, 18px);
	font-size: clamp(15px, 1.05vw, 18px);
	line-height: 1.55;
	color: var(--c-muted);
}

.foot__reach {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: clamp(22px, 2.2vw, 38px);
}

.foot__phone {
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(20px, 1.75vw, 32px);
	line-height: 1.1;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: var(--c-ink);
	transition: color var(--ui-fast) var(--ui-ease);
}

.foot__social {
	display: flex;
	gap: 8px;
}

.foot__social .round-link {
	width: 48px;
	height: 48px;
	background: var(--c-tint);
}

.foot__cta {
	margin-top: clamp(22px, 2.2vw, 36px);
}

.foot__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px clamp(18px, 2vw, 40px);
	align-content: start;
	padding-top: clamp(4px, 1vw, 18px);
}

/* Малые заголовки — шрифт меню. */
.foot__head {
	margin-bottom: 16px;
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: clamp(12px, .85vw, 14px);
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.foot__col ul {
	display: grid;
	gap: 2px;
	list-style: none;
}

.foot__col a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	font-size: clamp(15px, 1vw, 16.5px);
	line-height: 1.3;
	color: var(--c-muted);
	transition: color var(--ui-fast) var(--ui-ease);
}

.foot__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 40px;
	margin-top: clamp(30px, 3.4vw, 64px);
	padding-top: clamp(18px, 1.6vw, 26px);
	border-top: 1px solid var(--c-hair);
}

.foot__copy,
.foot__docs a,
.foot__docs button {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--c-muted);
}

.foot__docs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 26px;
	list-style: none;
}

.foot__docs a,
.foot__docs button {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0;
	text-align: left;
	cursor: pointer;
	transition: color var(--ui-fast) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	.foot__col a:hover,
	.foot__docs a:hover,
	.foot__docs button:hover,
	.foot__phone:hover { color: var(--c-blue-3); }
}

.foot a:focus-visible,
.foot button:focus-visible {
	outline: 2px solid var(--c-blue);
	outline-offset: 3px;
}

/* Четыре колонки разделов умещаются рядом со знаком только на широком
   экране; уже — по две. */
@media (min-width: 1024px) and (max-width: 1679px) {
	.foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.foot__top { grid-template-columns: minmax(0, 1fr); }
	.foot__nav { padding-top: 0; }
}

@media (max-width: 599px) {
	.foot { padding: 26px 20px 18px; border-radius: var(--r-m); }
	.foot__logo img { width: min(74vw, 280px); }
	.foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.foot__cta { width: 100%; justify-content: center; }
	.foot__bottom { flex-direction: column; align-items: flex-start; }
	.foot__docs { flex-direction: column; }
}

@media (max-width: 359px) {
	.foot__nav { grid-template-columns: minmax(0, 1fr); }
}

/* На странице «Контакты» блок стоит в теле страницы, заголовок — H1 */
.page-head--contacts .contacts__title {
	font-size: clamp(60px, calc(26px + 6.4vw), 150px);
}


/* ---------------------------------------------------------------------------
   20. Уведомление о cookie — вид кнопок под сайт
   --------------------------------------------------------------------------- */

.ui-cookie__btn {
	font-family: var(--f-ui);
	font-weight: 600;
}


/* ---------------------------------------------------------------------------
   Адаптив блоков
   --------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.showcase,
	.models {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.works__grid {
		columns: 3;
	}

	/* Пять шагов в ряд на такой ширине — по три слова в строке */
	.prose--steps .steps {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: clamp(28px, 3vw, 44px);
	}

	.prose--steps .steps > li:nth-child(3n)::after {
		display: none;
	}
}

@media (max-width: 1023px) {
	.sec-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.sec-head__note {
		padding-bottom: 0;
	}

	.lead__text {
		grid-template-columns: minmax(0, 1fr);
	}

	.prose-sec__grid,
	.faq__grid,
	.prose-sec--table .prose-sec__head,
	.prose-sec--steps .prose-sec__head,
	.prose-sec--cards .prose-sec__head,
	.prose-sec--picker .prose-sec__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.prose-sec__head,
	.faq__side {
		position: static;
	}

	.prose-sec__intro {
		padding-bottom: 0;
	}

	.faq__ask {
		max-width: none;
	}



	/* Планшет: пункты в две колонки. */
	.prose--cards ul,
	.prose--cards ul:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.prose__after:has(h3) {
		columns: 1;
	}

	.cta__slab {
		grid-template-columns: minmax(0, 1fr);
	}

	.contacts__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.contacts__photo {
		display: none;
	}

	.models:has(> :nth-child(1):last-child),
	.models:has(> :nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Шапка закреплена: якорям нужен запас сверху */
	.section[id] {
		scroll-margin-top: calc(var(--ui-header-h, 66px) + 24px);
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16px;
	}

	:root {
		--r-m: 20px;
		--r-l: 28px;
	}

	.showcase,
	.models {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.tile {
		padding: 8px;
	}

	.tile__media,
	.model__media {
		border-radius: 20px;
	}

	.tile__title {
		padding: 14px 8px 10px;
		font-size: 15px;
	}

	.tile__list {
		padding-inline: 0;
	}

	.tile__foot {
		display: none;
	}

	.tile__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-height: 0;
		padding: 8px 12px;
		border-radius: 14px;
		font-size: 14px;
	}

	.model {
		padding: 8px;
	}

	.model__body {
		padding: 16px 10px 8px;
	}

	.model__title {
		font-size: 13px;
	}

	.model__btn {
		min-height: 52px;
		font-size: 14px;
	}

	.works__grid {
		columns: 2;
	}

	.btn {
		min-height: 56px;
		padding-inline: 26px;
		font-size: 15px;
	}

	.link-tile {
		min-height: 64px;
		padding: 14px 64px 14px 20px;
	}

	.link-tile__go {
		right: 12px;
	}

	.prose .seo-table-wrap {
		margin-inline: calc(var(--pad) * -1);
		padding-inline: 0;
		border-radius: 0;
	}

	.prose th,
	.prose td {
		padding-inline: var(--pad);
	}

	.prose th:first-child,
	.prose th:last-child {
		border-radius: 0;
	}

	.prose td + td,
	.prose th + th {
		padding-left: 0;
	}

	/* Телефон: пункты столбиком, значок меньше. */
	.prose--cards ul,
	.prose--cards ul:has(> :nth-child(3):last-child) {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 22px 18px;
		border-radius: var(--r-m);
	}

	.feat__ico {
		width: 48px;
		height: 48px;
	}

	.prose--cards ul > li > strong {
		margin: 0 0 6px;
		font-size: 15.5px;
	}

	.feat__media { width: 84px; }

	/* Подборщик: ситуация над решением, стрелка не нужна */
	.prose--picker ul > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 16px 0;
	}

	.picker__go {
		display: none;
	}

	/* Шаги на телефоне: столбиком, номер слева, пунктир идёт вниз */
	.prose--steps .steps {
		--step: 48px;

		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding: 22px 20px;
	}

	.prose--steps .steps > li {
		min-height: calc(var(--step) + 22px);
		padding: 2px 0 22px calc(var(--step) + 16px);
		font-size: 1em;
	}

	.prose--steps .steps > li:last-child {
		min-height: var(--step);
		padding-bottom: 0;
	}

	.prose--steps .steps > li::after,
	.prose--steps .steps > li:nth-child(3n)::after {
		display: block;
		top: calc(var(--step) + 6px);
		bottom: 6px;
		left: calc(var(--step) / 2 - 1px);
		right: auto;
		border-top: 0;
		border-left: 2px dashed var(--c-line);
	}

	.prose--steps .steps > li:last-child::after {
		display: none;
	}

	.step__text {
		max-width: none;
	}

	.faq .seo-faq-a {
		padding-right: 0;
	}

	.cta__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.cta__facts .ico {
		width: 20px;
		height: 20px;
		padding: 11px;
	}

	/* На телефоне внутренняя плашка формы снята: её поля отнимали у колонки
	   36px, а согласию в две строки нужен каждый пиксель ширины. */
	.cta__slab {
		padding: 28px 20px 24px;
	}

	.cta__form {
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.request-form__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.request-form__submit {
		min-height: 60px;
		font-size: 16px;
	}

	.ui-modal {
		border-radius: 28px;
	}

	.ui-modal__head {
		padding: 28px 72px 4px var(--ui-modal-pad);
	}

	.ui-modal__body {
		margin: 12px 10px 14px 0;
		padding: 6px 10px 18px var(--ui-modal-pad);
	}

	.ui-modal__close {
		top: 14px;
		right: 14px;
		width: 44px;
		height: 44px;
	}

	.ui-modal__close svg {
		width: 20px;
		height: 20px;
	}

	.contacts__info {
		padding: 20px;
	}

	.contacts__map,
	.contacts__map iframe {
		min-height: 360px;
	}

	.zoom {
		padding-top: 64px;
	}

	.zoom__btn--prev,
	.zoom__btn--next {
		top: auto;
		bottom: 24px; /* как нижний отступ .zoom: на одной линии с кнопкой */
		margin-top: 0;
	}

	.zoom__img {
		border-radius: 14px;
	}

	.zoom__foot {
		min-height: 52px;
		padding-inline: 64px;
		text-align: center;
	}

	/* Между стрелками помещается только кнопка, счётчик — в угол напротив крестика. */
	.zoom__count {
		position: absolute;
		top: 12px;
		left: 16px;
		line-height: 52px;
	}

	.strip__cell {
		flex-basis: 68vw;
	}
}

@media (max-width: 479px) {
	/* Плитка каталога на телефоне — строкой: снимок слева, название рядом,
	   ценник под ними во всю ширину. Столбиком со снимком во весь экран
	   восемь плиток растягивали каталог на шесть экранов. */
	.showcase {
		grid-template-columns: minmax(0, 1fr);
	}

	.tile {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		align-items: center;
		column-gap: 16px;
		padding: 10px;
	}

	.tile__media {
		aspect-ratio: 1 / 1;
		border-radius: 18px;
	}

	.tile__title {
		min-width: 0;
		padding: 0 6px 0 0;
		font-size: 16px;
	}

	.tile__list {
		grid-column: 1 / -1;
		margin-top: 10px;
		padding-inline: 0;
	}

	@media (max-width: 359px) {
		.tile {
			grid-template-columns: 84px minmax(0, 1fr);
			column-gap: 14px;
		}

		.tile__title {
			font-size: 15px;
		}
	}

	.tile__row {
		flex-direction: row;
		align-items: center;
		font-size: 15px;
	}

	.models {
		grid-template-columns: minmax(0, 1fr);
	}

	.models:has(> :nth-child(1):last-child) .model,
	.models:has(> :nth-child(2):last-child) .model {
		display: flex;
	}

	.models:has(> :nth-child(1):last-child) .model__body,
	.models:has(> :nth-child(2):last-child) .model__body {
		padding: 16px 10px 8px;
	}

	.model__btn,
	.models:has(> :nth-child(1):last-child) .model__btn,
	.models:has(> :nth-child(2):last-child) .model__btn {
		width: 100%;
		font-size: 15px;
	}

	.reviews__side {
		width: 100%;
		justify-content: space-between;
	}

	.sec-head--row .btn {
		width: 100%;
	}

	.contacts__actions .btn {
		flex: 1 1 100%;
	}


}

/* Экраны уже 360: плиты формы ужимают поля, чтобы согласию в две строки
   достался каждый пиксель колонки. Правило стоит в конце — его не должны
   перебивать поля конкретных плит выше. */
@media (max-width: 359px) {
	.cta__slab { padding: 22px 16px 20px; }
	.ui-modal__body { padding-left: 16px; padding-right: 6px; }
	.ui-modal__head { padding-left: 16px; }
}


/* ---------------------------------------------------------------------------
   21. Уменьшенное движение
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tile,
	.tile__media img,
	.shot img,
	.btn,
	.site-nav__sub,
	.link-tile__go,
	.tile__go,
	.zoom {
		transition-duration: .01s;
	}

	.request-form__submit.is-loading::after {
		animation-duration: 1.6s;
	}
}

/* Шапка и первый экран: пропорции исходного salon-uyt.ru. */
@media (min-width: 1024px) {
 .site-header__top, .site-nav { max-width: 1780px; padding-inline: var(--pad); }
 .site-header__top { min-height: 0; padding-top: 0; padding-bottom: 0; gap: clamp(10px, 1.2vw, 23px); }
 .site-header__logo img { width: clamp(154px, 14.84vw, 250px); }
 .site-header__city { gap: 12px; }
 .site-header__city .ico { width: 24px; height: 32px; }
 .site-header__city p { font-family: "Unbounded Header", var(--f-ui); font-size: clamp(10px, .95vw, 14px); line-height: 1.45; }
 .site-header__city span { font-family: inherit; font-size: inherit; font-weight: 700; }
 .site-header__social { gap: clamp(10px, 1.2vw, 20px); }
 .site-header__social .round-link { width: clamp(44px, 4.55vw, 78px); height: clamp(44px, 4.55vw, 78px); background: rgba(226, 232, 235, .45); }
 .site-header__phone { height: clamp(48px, 4.55vw, 78px); padding: 0 clamp(8px, 1vw, 18px); background: rgba(255,255,255,.55); font-family: "Unbounded Header", var(--f-ui); font-size: clamp(11px, 1.01vw, 17px); }
 .site-header__phone .phone-pill__ico { width: clamp(34px, 3vw, 50px); height: clamp(34px, 3vw, 50px); }
 .site-header__cta { width: clamp(180px, 20.32vw, 344px); min-height: clamp(48px, 4.3vw, 74px); font-family: "Unbounded Header", var(--f-ui); font-size: clamp(10px, .87vw, 15px); text-transform: uppercase; }
 .site-nav { padding-top: 6px; padding-bottom: 3px; }
 .site-nav__link { min-height: 44px; font-family: "Unbounded Header", var(--f-ui); font-size: clamp(10px, .82vw, 14px); font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
 .site-nav__chev { width: 14px; height: 14px; }
 .site-header.is-compact .site-nav__link { font-size: clamp(10px, .82vw, 14px); }
 .main-screen { padding-top: 24px; --hero-head: clamp(134px, 11.2vw, 180px); }
 .main-screen .main-screen-badge img { width: clamp(68px, 6.3vw, 90px); max-width: none; height: auto; }
}
.cta__form-title { margin: 0 0 12px; font-family: "Unbounded Header", var(--f-ui); font-weight: 700; font-size: clamp(20px, 1.5vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.cta__form-note { max-width: 30em; margin: 0 0 26px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .68); }
@media (max-width: 767px) { .cta__form-title { font-size: 20px; } .cta__form-note { margin-bottom: 20px; } }

/* Десктопная шапка: размеры и отступы исходной темы; ссылки и подменю новой. */
@media (min-width: 1024px) {
 .site-header__top { max-width: 1920px; padding: 0 56px 0 40px; justify-content: space-between; gap: 0; }
 .site-header__logo { margin-right: clamp(20px, calc((100vw - 1200px) / 720 * 25 + 20px), 45px); }
 .site-header__logo img { width: clamp(180px, calc((100vw - 1200px) / 720 * 70 + 180px), 250px); }
 .site-header__city { align-items: flex-start; gap: 17px; }
 .site-header__city .ico { width: 24px; height: 32px; margin-top: 5px; }
 .site-header__city p { font-family: "Steppe Header", var(--f-ui); font-size: 16px; line-height: 1.25; font-weight: 800; color: #c1c1c1; }
 .site-header__city span { font-family: inherit; font-size: inherit; color: #0085ff; }
 .site-header__social { gap: 19px; margin: auto; }
 .site-header__social .round-link { width: clamp(55px, calc((100vw - 1200px) / 720 * 23 + 55px), 78px); height: clamp(55px, calc((100vw - 1200px) / 720 * 23 + 55px), 78px); background: rgba(201,201,201,.2); backdrop-filter: blur(10px); }
 .site-header__social .round-link img { width: clamp(30px, calc((100vw - 1200px) / 720 * 10 + 30px), 40px); height: auto; }
 .site-header__phone { width: clamp(220px, calc((100vw - 1200px) / 720 * 120 + 220px), 340px); height: clamp(55px, calc((100vw - 1200px) / 720 * 23 + 55px), 78px); margin-right: clamp(10px, calc((100vw - 1200px) / 720 * 17 + 10px), 27px); padding: 0 0 0 10px; gap: 0; border: 4px dashed #f2f2f2; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); font-size: clamp(12px, calc((100vw - 1200px) / 720 * 7 + 12px), 18px); letter-spacing: .02em; }
 .site-header__phone .phone-pill__ico { width: clamp(35px, calc((100vw - 1200px) / 720 * 20 + 35px), 55px); height: clamp(35px, calc((100vw - 1200px) / 720 * 20 + 35px), 55px); margin-right: clamp(8px, calc((100vw - 1200px) / 720 * 3 + 8px), 11px); background: #caff9b; }
 .site-header__phone .phone-pill__ico img { width: clamp(13px, calc((100vw - 1200px) / 720 * 7 + 13px), 20px); }
 .site-header__cta { width: clamp(250px, calc((100vw - 1200px) / 720 * 64 + 250px), 314px); height: clamp(52px, calc((100vw - 1200px) / 720 * 22 + 52px), 74px); min-height: 0; padding: 0; font-size: 12px; letter-spacing: .03em; background: linear-gradient(180deg,#359dff 0%,#0084ff 100%); }
 .site-nav { max-width: 1920px; padding: 20px 55px 10px; }
 .site-nav__list { gap: 8px; }
 .site-nav__link { min-height: 0; height: 19px; padding: 0; font-size: clamp(10px, calc((100vw - 1200px) / 720 * 3 + 10px), 13px); line-height: 1; }
 .site-nav__item.has-sub > .site-nav__link { padding-left: 20px; padding-right: 30px; gap: 20px; }
 .site-nav__chev { width: 12px; height: 12px; color: #0085ff; }
 .site-header.is-compact .site-nav { padding-top: 0; padding-bottom: 0; }
 .site-header.is-compact .site-nav__link { min-height: 54px; height: auto; }
 .site-header.is-compact .site-nav__item.has-sub > .site-nav__link { padding-inline: 0; gap: 8px; }
}
@media (min-width: 1024px) and (max-width: 1560px) {
 .site-header__top { padding-inline: 30px; }
 .site-header__city p { font-size: 14px; }
 .site-header__cta { font-size: 11px; padding-top: 2px; }
 .site-nav { padding-inline: 35px; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
 .site-header__top { padding-inline: 20px; }
 .site-header__logo { margin-right: 5px; }
 .site-header__logo img { width: 160px; }
 .site-header__city { gap: 8px; }
 .site-header__city .ico { width: 15px; height: 20px; margin-top: 0; }
 .site-header__city p { font-size: 11px; }
 .site-header__social { gap: 10px; }
 .site-header__social .round-link { width: 50px; height: 50px; }
 .site-header__social .round-link img { width: 25px; }
 .site-header__phone { width: 220px; height: 50px; font-size: 12px; margin-right: 10px; padding-left: 5px; }
 .site-header__phone .phone-pill__ico { width: 35px; height: 35px; margin-right: 8px; }
 .site-header__phone .phone-pill__ico img { width: 15px; }
 .site-header__cta { width: 200px; height: 50px; font-size: 9px; }
 .site-nav { padding: 15px 20px 10px; }
 .site-nav__link { font-size: 10px; }
 .site-nav__item.has-sub > .site-nav__link { padding-left: 15px; padding-right: 15px; gap: 10px; }
}
@media (min-width: 1920px) {
 .site-header__cta { height: 52px; }
 .site-nav__link { font-size: 12px; }
}

/* Мессенджеры в десктопной шапке: компактнее, одинаковые пропорции. */
@media (min-width: 1024px) {
 .site-header__social { gap: 14px; }
 .site-header__social .round-link { width: clamp(44px, calc(44px + (100vw - 1024px) * .0179), 60px); height: clamp(44px, calc(44px + (100vw - 1024px) * .0179), 60px); }
 .site-header__social .round-link img { width: 52%; height: auto; }
}

/* Приклеенная строка — та же типографика и светлая палитра шапки. */
@media (min-width: 1024px) {
 .site-header.is-compact .site-nav { padding: 6px clamp(32px,5vw,96px) 6px clamp(40px,6.25vw,120px); background: linear-gradient(270deg,rgba(232,245,255,.97),rgba(255,252,235,.97)); backdrop-filter: blur(14px); box-shadow: 0 4px 20px rgba(32,55,75,.06); }
 .site-header.is-compact .site-nav__bar { max-width: 1560px; margin-inline: auto; gap: clamp(28px,2.6vw,50px); }
 .site-header.is-compact .site-nav__list { width: auto; flex: 1 1 auto; justify-content: space-between; gap: clamp(14px,1.8vw,34px); padding-inline: 0; }
 .site-header.is-compact .site-nav__item > .site-nav__link { min-height: 44px; height: 44px; padding: 0; gap: 7px; font-family: "Unbounded Header",var(--f-ui); font-weight: 500; font-size: clamp(9px,.63vw,11px); letter-spacing: 0; }
 .site-header.is-compact .site-nav__chev { width: 11px; height: 11px; }
 .site-header.is-compact .site-nav__extra { gap: clamp(28px,2.6vw,50px); }
 .site-header.is-compact .site-nav__tel { height: 44px; padding: 0; background: transparent; font-family: "Unbounded Header",var(--f-ui); font-weight: 700; font-size: clamp(11px,.75vw,14px); letter-spacing: .02em; }
 .site-header.is-compact .site-nav__cta { min-height: 44px; height: 44px; padding: 0 clamp(32px,2.6vw,48px); font-family: "Unbounded Header",var(--f-ui); font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; background: linear-gradient(180deg,#359dff,#0084ff); }
}
@media (min-width:1024px) and (max-width:1200px) {
 .site-header.is-compact .site-nav { padding-left: 40px; padding-right: 32px; }
 .site-header.is-compact .site-nav__bar { gap: 28px; }
 .site-header.is-compact .site-nav__cta { padding-inline: 28px; }
}

@media (min-width:1024px) { .site-header.is-compact .site-nav { gap: clamp(28px,2.6vw,50px); } }

/* Цена первого экрана: компактные цифры и уменьшенная единица цены. */
.main-screen h1 .hero-price-digits { letter-spacing: -.035em; }
.main-screen h1 .rub { font-size: .64em; line-height: inherit; word-spacing: -.17em; }

.main-screen-badge__text { transform: translateY(4px); }

/* Оптический центр Unbounded: опускаем только текст, значок остаётся на месте. */
@media (min-width: 1024px) {
 .site-header__phone .phone-pill__num, .site-header .header-action__text { display: inline-block; transform: translateY(2px); }
}

/* Равномерные строки заголовков; предлоги связывает heading-typography.js. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Единица за площадь — в прежнем уменьшенном размере. */
.main-screen h1 .rub--area { font-size: .64em; line-height: inherit; word-spacing: -.17em; }



/* ---------------------------------------------------------------------------
   Работы: галерея рядами
   ---------------------------------------------------------------------------
   Ряды одной высоты (--row). Ширину снимка задаёт его пропорция --r, остаток
   ряда добирает flex-grow: снимки не режутся «в квадрат». Шапка — заголовок
   слева, пояснение и ссылка справа; под ней переключатель вида одной лентой.
   Длинная галерея свёрнута ровно до --rows рядов, без затухания края. */

.works__box {
	--row: clamp(220px, 19vw, 340px);
	--gap: clamp(10px, 1vw, 18px);
	--rows: 3;
}

.works__head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 20px clamp(30px, 5vw, 90px);
	margin-bottom: clamp(24px, 2.6vw, 44px);
}

.works__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 1.4vw, 24px);
	padding-bottom: .4em;
}

.works__intro {
	max-width: 30em;
	margin: 0;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.55;
	color: var(--c-muted);
}

/* Переключатель вида: белая лента, выбранный пункт — синяя пилюля. */
.works__kinds {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 100%;
	margin-bottom: clamp(18px, 1.8vw, 30px);
	padding: 6px;
	border-radius: 32px;
	background: #fff;
}

.works__kinds .chip span {
	min-height: 46px;
	padding: 0 clamp(16px, 1.5vw, 26px);
	background: transparent;
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: clamp(11px, .78vw, 13px);
	letter-spacing: .02em;
	text-transform: uppercase;
	/* У Unbounded прописные сидят выше середины строки: опускаем текст. */
	line-height: 1;
	padding-top: .22em;
}

.works__kinds .chip input:checked + span {
	background: linear-gradient(180deg, #359dff, #0084ff);
	color: #fff;
}

.works__view {
	position: relative;
}

.works__view.is-clipped {
	/* Ровно --rows рядов: край чистый, без затухания. */
	max-height: calc(var(--row) * var(--rows) + var(--gap) * (var(--rows) - 1));
	overflow: hidden;
}

.works__rows {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	list-style: none;
	transition: opacity var(--ui-fast) var(--ui-ease);
}

.works__rows.is-swapping { opacity: 0; }

/* Последний ряд не растягивается на всю ширину. */
.works__rows::after {
	content: "";
	flex: 1000 0 0;
}

.works__cell {
	flex: var(--r) 1 calc(var(--r) * var(--row));
	height: var(--row);
	min-width: 0;
}

.works__cell[hidden] { display: none; }

.works__rows .shot {
	border-radius: clamp(16px, 1.5vw, 28px);
	cursor: zoom-in;
}

/* Подпись вида — по нижнему краю снимка, на затемнении. */
.shot__kind {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 20px 16px;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 500;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
	pointer-events: none;
}

.works__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 2vw, 36px);
}

.works__foot[hidden] { display: none; }

.works__toggle {
	gap: 10px;
}

.works__toggle .ico {
	width: 20px;
	height: 20px;
	transition: transform var(--ui-turn) var(--ui-ease);
}

.works__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* Мало снимков: ряд выше, чтобы один-два кадра не терялись. */
.works--few .works__box { --row: clamp(260px, 26vw, 440px); }

@media (hover: hover) and (pointer: fine) {
	.works__rows .shot__kind {
		opacity: 0;
		transition: opacity var(--ui-base) var(--ui-ease);
	}
	.works__rows .shot:hover .shot__kind,
	.works__rows .shot:focus-visible .shot__kind { opacity: 1; }
	.works__rows .shot:hover img { transform: scale(1.04); }
	.works__kinds .chip:hover input:not(:checked) + span { background: var(--c-tint); }
}

@media (hover: none) {
	.works__rows .shot__kind { display: none; }
}

@media (max-width: 1023px) {
	.works__box { --row: clamp(170px, 26vw, 260px); --rows: 3; }
	.works__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 599px) {
	.works__box { --row: 150px; --gap: 8px; }
	.works__rows .shot { border-radius: 14px; }
	.works__more { width: 100%; justify-content: center; }
	/* Лента видов — одной прокручиваемой строкой. */
	.works__kinds {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.works__kinds::-webkit-scrollbar { display: none; }
	.works__kinds .chip { flex: 0 0 auto; }
	.works__kinds .chip span { min-height: 44px; padding: 0 16px; }
	.works--few .works__box { --row: 220px; }
}

@media (prefers-reduced-motion: reduce) {
	.works__rows,
	.works__toggle .ico,
	.works__rows .shot__kind { transition: none; }
}

/* MAX в подвале: окно с номером открывается вверх и на голубой подложке —
   плита подвала белая, а снизу окну некуда раскрыться. */
.foot .max-contact__panel {
	top: auto;
	bottom: calc(100% + 12px);
	background: var(--c-tint);
	box-shadow: none;
}
.foot .max-contact[open] summary { background: var(--c-tint); }
.foot .max-contact__panel a { background: #fff; }


/* ---------------------------------------------------------------------------
   Заголовок первого экрана: строки и кегль
   ---------------------------------------------------------------------------
   Строки собраны в шаблоне (zhaluzi_hero_title_lines): --len — знаков в самой
   длинной, --lines — число строк. Кегль берётся такой, чтобы самая длинная
   строка занимала колонку не до края: между заголовком и слайдером остаётся
   воздух. Широкая строка BebasNeue («ЖАЛЮЗИ И РУЛОННЫЕ ШТОРЫ») — до .44 кегля
   на знак, отсюда делитель. */

.main-screen h1 .hero-line {
	display: block;
	white-space: nowrap;
}

.main-screen .main-screen-top h1 {
	--col: calc(100vw - 2 * var(--pad));
	--fit: calc(var(--col) / (var(--len, 22) * .44));
	font-size: min(48px, var(--fit));
	text-wrap: nowrap;
}

@media (min-width: 768px) {
	/* Две колонки: заголовку — половина контейнера без зазора до слайдера. */
	.main-screen .main-screen-top h1 {
		--col: calc(50vw - var(--pad) - clamp(16px, 2.2vw, 44px));
		font-size: min(clamp(52px, 5.4vw, 104px), var(--fit));
	}
}

@media (min-width: 992px) and (min-height: 620px) {
	/* Плюс граница по высоте окна: на заголовок остаётся то, что не заняли
	   шапка, значок производства, кнопка и факты (их высота растёт с шириной).
	   Ниже 3.9vw кегль не опускается: на низком окне факты уйдут под край,
	   но заголовок останется заголовком. */
	.main-screen .main-screen-top h1 {
		font-size: min(
			clamp(52px, 5.4vw, 104px),
			var(--fit),
			max(3.9vw, calc((100svh - 420px - 14.8vw) / (var(--lines, 3) * .9)))
		);
	}
}


/* Три вида карточного раздела — чередуются в пределах страницы.
   v1 — белая плита, значок слева от текста (правила выше).
   v2 — отдельные белые карточки в ряд, значок над заголовком.
   v3 — белая плита, пункты в ряд, значок над заголовком. */

.prose--cards.prose--v2 ul,
.prose--cards.prose--v3 ul {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.2vw, 22px);
}

.prose--cards.prose--v2 ul:has(> :nth-child(3):last-child),
.prose--cards.prose--v3 ul:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(12px, 1.2vw, 22px);
}

.prose--cards.prose--v2 ul:has(> :nth-child(2):last-child),
.prose--cards.prose--v3 ul:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose--cards.prose--v2 ul > li,
.prose--cards.prose--v3 ul > li {
	display: block;
}

.prose--cards.prose--v2 .feat__ico,
.prose--cards.prose--v3 .feat__ico,
.prose--cards.prose--v2 .feat__media,
.prose--cards.prose--v3 .feat__media {
	margin-bottom: clamp(16px, 1.5vw, 26px);
}

.prose--cards.prose--v2 .feat__media,
.prose--cards.prose--v3 .feat__media {
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* v2: плиты нет, каждая карточка — своя белая плитка. */
.prose--cards.prose--v2 ul {
	padding: 0;
	border-radius: 0;
	background: none;
}

.prose--cards.prose--v2 ul > li {
	padding: clamp(22px, 2vw, 34px);
	border-radius: var(--r-m);
	background: var(--c-white);
}

.prose--cards.prose--v2 .feat__ico {
	background: var(--c-lime);
	color: var(--c-ink);
}

/* v3: белая плита, пункты в ряд. Была синей — владельцу синий фон
   под снимками не понравился (16.10.2026). */
.prose--cards.prose--v3 ul {
	gap: clamp(24px, 2.6vw, 48px);
	background: var(--c-white);
}

.prose--cards.prose--v3 ul:has(> :nth-child(3):last-child) {
	column-gap: clamp(24px, 2.6vw, 48px);
}

.prose--cards.prose--v3 .feat__ico {
	background: var(--c-lime);
	color: var(--c-ink);
}

@media (max-width: 1099px) {
	.prose--cards.prose--v2 ul,
	.prose--cards.prose--v3 ul,
	.prose--cards.prose--v2 ul:has(> :nth-child(3):last-child),
	.prose--cards.prose--v3 ul:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.prose--cards.prose--v2 ul,
	.prose--cards.prose--v3 ul,
	.prose--cards.prose--v2 ul:has(> :nth-child(3):last-child),
	.prose--cards.prose--v3 ul:has(> :nth-child(3):last-child),
	.prose--cards.prose--v2 ul:has(> :nth-child(2):last-child),
	.prose--cards.prose--v3 ul:has(> :nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* На телефоне значок снова слева от текста: карточка ниже. */
	.prose--cards.prose--v2 ul > li,
	.prose--cards.prose--v3 ul > li {
		display: grid;
	}

	.prose--cards.prose--v2 ul { gap: 8px; padding: 0; }
	.prose--cards.prose--v2 ul > li { padding: 18px; border-radius: 20px; }

	.prose--cards.prose--v2 .feat__ico,
	.prose--cards.prose--v3 .feat__ico,
	.prose--cards.prose--v2 .feat__media,
	.prose--cards.prose--v3 .feat__media {
		margin-bottom: 0;
	}

	.prose--cards.prose--v2 .feat__media,
	.prose--cards.prose--v3 .feat__media {
		width: 84px;
		aspect-ratio: 1 / 1;
	}
}



/* Шаги, второй вид (второй блок с номерами на странице): не цепочка кружков
   на плите, а отдельные белые плитки с крупной синей цифрой. Пунктира нет:
   такой блок чаще перечень вопросов, чем последовательность. */

.prose--steps.prose--alt .steps {
	gap: clamp(12px, 1.2vw, 22px);
	padding: 0;
	border-radius: 0;
	background: none;
}

.prose--steps.prose--alt .steps > li {
	padding: clamp(20px, 2vw, 34px);
	border-radius: var(--r-m);
	background: var(--c-white);
}

.prose--steps.prose--alt .steps > li::before,
.prose--steps.prose--alt .steps > li:last-child::before {
	content: counter(step, decimal-leading-zero);
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin-bottom: clamp(14px, 1.4vw, 24px);
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(52px, 4.6vw, 84px);
	line-height: .85;
	color: var(--c-blue);
}

.prose--steps.prose--alt .steps > li::after,
.prose--steps.prose--alt .steps > li:nth-child(3n)::after {
	display: none;
}

.prose--steps.prose--alt .step__text { max-width: none; }

.prose--steps.prose--alt .step__text strong {
	display: block;
	margin-bottom: 8px;
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	font-size: clamp(15px, 1.1vw, 19px);
	line-height: 1.25;
	color: var(--c-ink);
}

@media (max-width: 1279px) {
	.prose--steps.prose--alt .steps {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(12px, 1.2vw, 22px);
	}
}

@media (max-width: 599px) {
	/* Телефон: плитки столбиком, цифра слева от текста. */
	.prose--steps.prose--alt .steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
		padding: 0;
	}

	.prose--steps.prose--alt .steps > li,
	.prose--steps.prose--alt .steps > li:last-child {
		display: grid;
		grid-template-columns: 54px minmax(0, 1fr);
		column-gap: 12px;
		min-height: 0;
		padding: 18px;
		border-radius: 20px;
	}

	.prose--steps.prose--alt .steps > li::before,
	.prose--steps.prose--alt .steps > li:last-child::before {
		margin: 0;
		font-size: 44px;
	}
}


/* Витрина разделов: название не доходит до правого края карточки. */
.showcase .tile__title {
	padding-right: clamp(28px, 3vw, 56px);
	font-size: clamp(15px, 1.02vw, 19px);
	line-height: 1.25;
}

/* Не разрывается переносом строки: телефон (inc/typography.php). */
.nowrap { white-space: nowrap; }


/* ---------------------------------------------------------------------------
   Телефон: доводка
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* Таблица на телефоне — строками-карточками: название и цена в одной
	   строке, остальные ячейки под ними. Четыре колонки в 340px рвали слова
	   посередине, а прокрутка вбок неудобна. Шапка скрыта: подписи колонок
	   читаются из самих значений. */
	.prose .seo-table-wrap {
		margin-inline: 0;
		padding: 6px 16px;
		overflow-x: visible;
		border-radius: var(--r-m);
	}

	.prose table,
	.prose tbody {
		display: block;
		min-width: 0;
	}

	.prose thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.prose tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 14px;
		padding: 14px 0;
		border-top: 1px solid var(--c-hair);
	}

	.prose tbody tr:first-child,
	.prose table > tr:first-child {
		border-top: 0;
	}

	.prose td,
	.prose td + td {
		grid-column: 1 / -1;
		padding: 0;
		border: 0;
		font-size: 14.5px;
		color: var(--c-muted);
	}

	.prose td:first-child {
		grid-column: 1;
		font-weight: 600;
		font-size: 16px;
		color: var(--c-ink);
	}

	.prose td.price {
		grid-column: 2;
		grid-row: 1;
		font-size: 16px;
		color: var(--c-blue-4);
	}

	/* В строке без цены название занимает всю ширину. */
	.prose tr:not(:has(td.price)) td:first-child {
		grid-column: 1 / -1;
	}
}

/* --- Телефон и планшет: шапка как на salon-uyt.ru ------------------------
   Не островок, а строка во всю ширину на фоне страницы: логотип,
   мессенджеры, бургер. Под ней номер телефона и город (.mob-contacts,
   уходит с прокруткой). Пока номер виден, кружка с трубкой в шапке нет. */

.mob-contacts { display: none; }

@media (max-width: 1023px) {
	body {
		background: #fdfff4 linear-gradient(270deg, #E8F4FF 0%, #FDFFF4 100%);
	}

	.ui-header,
	.site-header {
		top: 0;
		left: 0;
		right: 0;
		border-radius: 0;
		background: linear-gradient(270deg, #E8F4FF 0%, #FDFFF4 100%);
		box-shadow: none;
	}

	.site-header.is-scrolled {
		box-shadow: 0 6px 20px rgba(32, 55, 75, .07);
	}

	.ui-header-offset {
		padding-top: var(--ui-header-h, 72px);
	}

	.site-header__top {
		gap: 8px;
		padding: 10px var(--pad, 16px);
	}

	.site-header__logo img { width: 112px; }

	.site-header__social {
		display: flex;
		gap: 8px;
		margin: 0;
	}
	.site-header__social .max-contact { display: none; }
	.site-header__social .round-link {
		width: 44px;
		height: 44px;
		background: rgba(201, 201, 201, .2);
	}
	.site-header__social .round-link img { width: 26px; height: auto; }

	/* Кружок с трубкой: только когда строка с номером ушла за край */
	.site-header__phone { display: none; }
	.site-header.is-scrolled .site-header__phone { display: flex; }

	.ui-burger {
		width: 48px;
		height: 48px;
		margin-left: 4px;
		border-radius: 50%;
		background: rgba(201, 201, 201, .2);
	}

	.mob-contacts {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		max-width: 720px;
		margin: 0 auto;
		padding: 2px var(--pad, 16px) 0;
	}
	/* Пилюля и город — размеры и шрифты старого сайта на телефоне:
	   Unbounded Bold 10px (жирность там наследуется от body), высота 40px, пунктирная рамка, кружок 30px;
	   город Steppe 11px в две строки. */
	.mob-contacts__phone {
		flex: 0 0 auto;
		height: 40px;
		padding: 0 14px 0 4px;
		gap: 5px;
		border: 2px dashed #f2f2f2;
		background: rgba(255, 255, 255, .2);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		font-family: "Unbounded Header", var(--f-ui);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .02em;
	}
	.mob-contacts__phone .phone-pill__ico { width: 30px; height: 30px; background: #caff9b; }
	.mob-contacts__phone .phone-pill__ico img { width: 10px; }
	.mob-contacts__city {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: "Steppe Header", var(--f-ui);
		font-size: 11px;
		font-weight: 800;
		line-height: 1.25;
		color: #c1c1c1;
		white-space: nowrap;
	}
	.mob-contacts__city img { flex: 0 0 auto; width: 15px; height: 20px; }
	.mob-contacts__city strong { font-weight: inherit; color: #0085ff; }
}

@media (max-width: 380px) {
	.site-header__logo img { width: 96px; }
	.site-header__social { gap: 6px; }
	.site-header__social .round-link { width: 40px; height: 40px; }
}


/* --- Телефон: шапка, заголовок и «Собственное производство» --------------
   Шапка как на salon-uyt.ru: логотип, Telegram, WhatsApp, MAX; бургер свой —
   синяя скруглённая плитка вместо серого кружка старого сайта.
   Заголовок на телефоне разложен заново (zhaluzi_hero_title_lines, строка
   до 17 знаков): .br-d — переносы широкой раскладки, .br-m — телефонной. */

.main-screen h1 .br-m { display: none; }

@media (max-width: 1023px) {
	.site-header__social .max-contact { display: block; }
	/* Окошко MAX не выходит за правый край: прижато к кнопке справа. */
	.site-header__social .max-contact__panel {
		left: auto;
		right: -60px;
		transform: none;
		width: min(280px, calc(100vw - 32px));
	}

	.ui-burger {
		width: 48px;
		height: 48px;
		border-radius: 16px;
		background: var(--c-blue);
		color: #fff;
		transition: background-color .2s var(--ui-ease, ease), transform .16s var(--ui-ease, ease);
	}
	.ui-burger::before { display: none; }
	.ui-burger:active { transform: scale(.96); }
	@media (hover: hover) {
		.ui-burger:hover { background: var(--c-blue-4); }
	}
	/* Средняя полоска короче и прижата вправо */
	.ui-burger__lines { width: 20px; height: 14px; }
	.ui-burger__line:nth-child(2) { top: 6px; left: auto; right: 0; width: 60%; }
	.ui-burger__line:nth-child(3) { top: 12px; }
}

@media (max-width: 767px) {
	.main-screen h1 .br-m { display: inline; }
	.main-screen h1 .br-d { display: none; }

	.main-screen .main-screen-top { padding-top: 44px; }

	.main-screen .main-screen-top h1 {
		--fit: calc(var(--col) / (var(--len-m, 23) * .44));
		font-size: min(42px, var(--fit));
		line-height: .92;
		margin-bottom: 14px;
	}

	/* Значок крупнее прежнего, подпись — шрифтом меню в две строки,
	   чуть мельче, чем на старом сайте; начертание Medium, как там. */
	.main-screen .main-screen-badge {
		top: 0;
		gap: 14px;
		margin: 22px 0 24px;
		font-family: "Unbounded Header", var(--f-ui);
		font-size: 17px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
	}
	.main-screen .main-screen-badge img { width: 72px; max-width: none; height: auto; }
	.main-screen-badge__text { width: min-content; transform: translateY(2px); }
}

@media (max-width: 380px) {
	.main-screen .main-screen-badge { font-size: 15px; }
	.main-screen .main-screen-badge img { width: 62px; }
	.ui-burger { width: 44px; height: 44px; border-radius: 14px; }
}


/* --- Телефон: правки 14.10 по сравнению со старым сайтом ------------------
   Кнопка расчёта и «Скидка 6 %» прижаты влево, подпись шрифтом старого
   сайта (Unbounded Medium). Плита с формой — заголовок, пояснение и поля:
   преимущества и подзаголовок «Расчёт стоимости» на телефоне лишние. */
@media (max-width: 767px) {
	.main-screen .modal-btn { justify-content: flex-start; }
	.main-screen .calc-btn { margin-right: 18px; }
	.main-screen .modal-btn span {
		font-family: "Unbounded Header", var(--f-ui);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0;
	}

	.cta__facts,
	.cta__form-title { display: none; }
	.cta__slab { gap: 14px; }
}

/* Узкий телефон: город «Отправляем по всему ДВ» не уходит за край. */
@media (max-width: 380px) {
	.mob-contacts { gap: 8px; }
	.mob-contacts__phone { padding-right: 10px; letter-spacing: 0; }
	.mob-contacts__city { gap: 6px; font-size: 10px; }
	.mob-contacts__city img { width: 13px; height: 18px; }
}

/* Пояснение в белом окне заявки — тем же шрифтом и размером, что в чёрной
   плите с формой (.cta__form-note). */
.ui-modal .ui-form__note {
	font-family: var(--f-text);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.5;
}

/* Обводка фокуса после касания или клика не рисуется (класс ставит js/site.js
   по pointerdown, снимает по Tab). Красная рамка у неотмеченного согласия
   (.is-invalid) — сообщение об ошибке, её не трогаем. */
html.ui-pointer :focus-visible:not(.is-invalid) {
	outline: none !important;
}

/* --- 14.10: номер телефона везде одним шрифтом — как в шапке ------------- */
.phone-pill,
.site-nav__tel,
.ui-menu__contact--phone,
.contacts__text--phone,
.nap__phone {
	font-family: "Unbounded Header", var(--f-ui);
	font-weight: 700;
	letter-spacing: .02em;
}
.contacts__text--phone { font-size: clamp(18px, 1.5vw, 26px); }
.nap__phone { font-size: .92em; }

@media (max-width: 1023px) {
	/* Мобильное меню: отступ слева вдвое больше края страницы у всего,
	   кроме кнопки «Узнать стоимость» — она остаётся во всю ширину. */
	.ui-menu { --menu-in: calc(var(--ui-edge) * 2); }
	.ui-menu__search,
	.ui-menu__ext,
	.ui-menu__foot { padding-left: var(--menu-in); }
	.ui-menu__link,
	.ui-menu__sub-link { padding-left: var(--menu-in); }
	.ui-menu__sub2-link { padding-left: calc(var(--menu-in) + 16px); }
	.ui-menu__btn {
		width: calc(100% + var(--menu-in) - var(--ui-edge));
		margin-left: calc(var(--ui-edge) - var(--menu-in));
	}
	.ui-menu__contact--phone { font-size: 17px; }
}

/* --- 14.10: калькулятор на телефоне компактнее -------------------------------
   Кнопки выбора ниже и уже, две-три в строку; поле касания добирается до 44px
   невидимым запасом у самой радиокнопки. */
@media (max-width: 767px) {
	.calc__slab { padding: 22px 14px 14px; }
	.calc__form { gap: 18px; }
	.calc__legend { margin-bottom: 8px; font-size: 14px; }
	.calc__chips { gap: 6px; }
	.calc .chip span {
		min-height: 38px;
		padding: 0 11px;
		font-size: 13px;
	}
	.calc .chip input { inset: -3px 0; height: auto; }
	.calc__sizes { gap: 10px; }
	.calc {
		--ui-field-pad-top: 20px;
		--ui-field-pad-bot: 7px;
		--ui-field-pad-x: 16px;
	}
	.calc .stepper { height: 50px; padding: 0 4px; }
	.calc .stepper__btn { width: 44px; height: 44px; font-size: 22px; }
	.calc .stepper__value { min-width: 40px; font-size: 17px; }
}

/* Сводная таблица цен ([zhaluzi_prices]) на телефоне: названия на пункт
   мельче остальных таблиц, чтобы строка чаще укладывалась в одну. */
@media (max-width: 767px) {
	.prose .price-table td:first-child { font-size: 15px; }
}

/* --- 14.10: «Вся продукция» на телефоне — крупное фото ---------------------
   Плитка в одну колонку: снимок изделия во всю ширину, под ним название,
   компактный ценник по моделям и «Смотреть раздел». Прежний вид (снимок
   104px сбоку) делал продукцию нечитаемой. */
@media (max-width: 767px) {
	.showcase {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.showcase .tile {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 8px 8px 10px;
		text-align: left;
	}

	.showcase .tile__media {
		aspect-ratio: 3 / 2;
		border-radius: 20px;
	}

	.showcase .tile__title {
		padding: 16px 10px 12px;
		font-size: 18px;
		line-height: 1.2;
	}

	.showcase .tile__list {
		margin-top: 0;
		gap: 5px;
		padding-inline: 0;
	}

	.showcase .tile__row {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		min-height: 42px;
		padding: 8px 14px;
		border-radius: 14px;
		font-size: 14px;
	}

	.showcase .tile__foot {
		display: flex;
		justify-content: space-between;
		padding: 12px 2px 0 10px;
	}

	.showcase .tile__name { flex: 1 1 auto; }
}