/*
Theme Name: Virtus
Author: Virtus
Description: Custom presentation theme for the Virtus website.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: virtus
*/

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

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

:root {
	--container-width: 1340px;
	--page-padding: clamp(1.25rem, 4vw, 3.5rem);
	--color-background: var(--paper-100);
	--color-text: var(--ink-850);
	--color-text-inverse: var(--paper-050);
	--color-muted: var(--ink-350);
	--color-accent: var(--brass-500);
	--color-accent-hover: var(--brass-400);
	--color-border: rgba(255, 255, 255, 0.16);
	--font-primary: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--radius: 0.125rem;
	--transition: var(--dur-base) var(--ease-out);
	--header-height: 5.5rem;
	--space-lg: clamp(2rem, 4vw, 4rem);
	--space-xl: clamp(4rem, 8vw, 8rem);

	/* Движение: одна кривая на весь сайт, чтобы анимации читались как система. */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--reveal-delay: 0ms;

	/* Тени вынесены в токены: раньше они были разными в каждом блоке. */
	--shadow-card: 0 1px 2px rgba(20, 20, 16, 0.04), 0 8px 24px -12px rgba(20, 20, 16, 0.18);
	--shadow-card-hover: 0 2px 4px rgba(20, 20, 16, 0.06), 0 24px 48px -20px rgba(20, 20, 16, 0.3);
	--hairline-dark: var(--line-on-light);

	/* ---- Чернила: текст и тёмные поверхности ---- */
	--ink-1000: #000000;
	--ink-950: #0b0c0a;
	--ink-900: #11120f;
	--ink-850: #171814;
	--ink-800: #1c1e19;
	--ink-750: #222421;
	--ink-700: #292b26;
	--ink-650: #393b38;
	--ink-600: #4f514b;
	--ink-500: #777970;
	--ink-400: #999b94;
	--ink-350: #a9aaa4;
	--ink-300: #b3b5ad;
	--ink-250: #c4c5bf;

	/* ---- Бумага: светлые поверхности ---- */
	--paper-000: #ffffff;
	--paper-050: #f9f8f4;
	--paper-100: #f3f1ed;
	--paper-200: #e9e6df;

	/* ---- Латунь: единственный акцент ---- */
	--brass-300: #e8c078;
	--brass-400: #dca65a;
	--brass-500: #c99445;

	/* ---- Линии ---- */
	--line-on-dark: rgba(255, 255, 255, 0.14);
	--line-on-light: rgba(20, 21, 16, 0.12);
	--line-on-light-strong: rgba(20, 21, 16, 0.28);
	--line-on-dark-strong: rgba(255, 255, 255, 0.3);
	--veil-light: rgba(20, 21, 16, 0.55);
	--veil-dark: rgba(255, 255, 255, 0.6);

	/* ---- Шкала кегля ---- */
	--fs-3xs: 0.62rem;
	--fs-2xs: 0.68rem;
	--fs-xs: 0.72rem;
	--fs-sm: 0.78rem;
	--fs-base: 0.88rem;
	--fs-md: 0.95rem;
	--fs-lg: 1.06rem;
	--fs-xl: 1.2rem;

	/* ---- Длительности: пять ступеней вместо трёх десятков ---- */
	--dur-fast: 120ms;
	--dur-base: 240ms;
	--dur-slow: 380ms;
	--dur-slower: 620ms;
	--dur-scene: 900ms;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-primary);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body.has-open-menu {
	overflow: hidden;
}

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

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

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

button {
	color: inherit;
}

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

.container {
	width: min(100% - (2 * var(--page-padding)), var(--container-width));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 10000;
	top: 0.75rem;
	left: 0.75rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--color-background);
	color: var(--color-text);
}

.button {
	display: inline-flex;
	min-height: 3.375rem;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background: var(--color-accent);
	color: var(--ink-900);
	cursor: pointer;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.button:hover {
	border-color: var(--color-accent-hover);
	background: var(--color-accent-hover);
	transform: translateY(-1px);
}

.button--outline {
	border-color: rgba(255, 255, 255, 0.42);
	background: transparent;
	color: var(--color-text-inverse);
}

.button--outline:hover {
	border-color: var(--color-text-inverse);
	background: var(--line-on-dark);
}

.button--small {
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	font-size: var(--fs-2xs);
}

.site-header {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-inverse);
}

.site-header__inner {
	display: flex;
	min-height: var(--header-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
}

.site-brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.site-brand__mark {
	display: grid;
	width: 2rem;
	height: 2.35rem;
	place-items: center;
	border: 1px solid var(--color-accent);
	border-radius: 50% 50% 48% 48% / 18% 18% 72% 72%;
	color: var(--color-accent);
	font-size: var(--fs-sm);
	font-weight: 800;
	line-height: 1;
}

.primary-navigation,
.primary-navigation__list {
	display: flex;
	align-items: center;
}

.primary-navigation {
	flex: 1;
	justify-content: flex-end;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.primary-navigation__list {
	gap: clamp(1.25rem, 2.6vw, 2.75rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

.primary-navigation__list a {
	position: relative;
	padding-block: 0.5rem;
	font-size: var(--fs-sm);
	font-weight: 550;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.primary-navigation__list a::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--color-accent);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition);
}

.primary-navigation__list a:hover::after,
.primary-navigation__list .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.menu-toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
}

.hero {
	position: relative;
	min-height: min(900px, 100svh);
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(6, 7, 6, 0.98) 0%, rgba(9, 10, 9, 0.92) 43%, var(--line-on-light-strong) 75%, var(--veil-light) 100%),
		linear-gradient(135deg, var(--ink-850) 0%, var(--ink-700) 54%, var(--ink-900) 100%);
	color: var(--color-text-inverse);
}

.hero::before {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
	background-size: 5rem 5rem;
	content: "";
	mask-image: linear-gradient(90deg, var(--ink-1000), transparent 65%);
}

.hero__ambient {
	position: absolute;
	top: 5%;
	right: 2%;
	width: min(64vw, 900px);
	height: 85%;
	background: radial-gradient(circle at 62% 42%, rgba(205, 156, 82, 0.24), transparent 18%), radial-gradient(circle at 55% 50%, rgba(255, 241, 210, 0.08), transparent 45%);
	filter: blur(2px);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	min-height: min(810px, calc(100svh - 5.5rem));
	padding-top: var(--header-height);
	grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
	align-items: center;
	gap: var(--space-lg);
}

.hero__content {
	max-width: 47rem;
	padding-block: var(--space-xl);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.75rem;
	color: var(--color-accent);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eyebrow::before {
	width: 2.5rem;
	height: 1px;
	background: currentColor;
	content: "";
}

.hero__title {
	max-width: 11ch;
	margin: 0;
	font-size: clamp(3.2rem, 6.1vw, 6.75rem);
	font-weight: 400;
	letter-spacing: -0.052em;
	line-height: 0.94;
	text-wrap: balance;
}

.hero__description {
	max-width: 37rem;
	margin: 2rem 0 0;
	color: var(--ink-250);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.65;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: 2.5rem;
}

.hero__visual {
	position: relative;
	height: min(650px, 70vh);
	min-height: 500px;
}

.hero-door {
	position: absolute;
	right: 2%;
	bottom: 0;
	width: min(82%, 530px);
	height: 92%;
	perspective: 1000px;
}

.hero-door::before,
.hero-door::after {
	position: absolute;
	content: "";
}

.hero-door::before {
	inset: -8% -32% 0 -26%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(118deg, #252620 0 35%, #3a3931 35.2% 36%, #181a17 36.2% 100%);
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.46), 0 2.5rem 6rem rgba(0, 0, 0, 0.35);
	transform: skewY(-1.2deg);
}

.hero-door::after {
	right: -45%;
	bottom: -3%;
	left: -42%;
	height: 18%;
	background: repeating-linear-gradient(0deg, #1b1c19 0 2px, #2c2d28 3px 31px);
	clip-path: polygon(14% 0, 100% 0, 88% 100%, 0 100%);
	filter: drop-shadow(0 1.5rem 1rem rgba(0, 0, 0, 0.45));
}

.hero-door__frame {
	position: absolute;
	z-index: 1;
	inset: 2% 10% 2% 10%;
	padding: 1rem;
	background: #0a0b0a;
	box-shadow: 0 0 0 1px rgba(204, 157, 87, 0.24), 0 2rem 4rem rgba(0, 0, 0, 0.65), 0 0 6rem rgba(210, 157, 76, 0.1);
}

.hero-door__leaf {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: 1px solid #282a26;
	background: linear-gradient(100deg, #111311, #262822 48%, #11120f 49%, #080908 100%);
	box-shadow: inset 1.5rem 0 3rem rgba(255, 255, 255, 0.025), inset -1.5rem 0 3rem rgba(0, 0, 0, 0.7);
}

.hero-door__leaf::before,
.hero-door__leaf::after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
}

.hero-door__leaf::before {
	left: 24%;
	width: 1px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 11rem 0 rgba(255, 255, 255, 0.035);
}

.hero-door__leaf::after {
	left: 50%;
	width: 3.5rem;
	background: linear-gradient(90deg, #6a4820, #d29b4b 48%, #795324);
	box-shadow: 0 0 2rem rgba(199, 143, 59, 0.18);
	transform: translateX(-50%);
}

.hero-door__inlay {
	position: absolute;
	z-index: 1;
	top: 9%;
	bottom: 9%;
	left: 50%;
	width: 1px;
	background: rgba(255, 242, 208, 0.6);
}

.hero-door__handle {
	position: absolute;
	z-index: 2;
	top: 48%;
	right: 12%;
	width: 0.36rem;
	height: 4.5rem;
	border-radius: 1rem;
	background: linear-gradient(90deg, #6c6d66, #d7d4c6, #66675f);
	box-shadow: 0 0 1rem rgba(255, 255, 255, 0.12);
}

.hero__meta {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	padding-block: 1.3rem;
	border-top: 1px solid var(--color-border);
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.hero__meta p {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	color: var(--ink-250);
	font-size: var(--fs-2xs);
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero__meta span {
	color: var(--color-accent);
}

.section {
	padding-block: var(--space-xl);
}

.section-kicker {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1.25rem;
	color: var(--color-muted);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.section-kicker span {
	color: var(--color-accent);
}

.section-title {
	max-width: 14ch;
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 5rem);
	font-weight: 430;
	letter-spacing: -0.052em;
	line-height: 0.98;
	text-wrap: balance;
}

.section-description {
	max-width: 39rem;
	margin: 1.75rem 0 2.25rem;
	color: var(--color-muted);
	font-size: clamp(1rem, 1.35vw, 1.16rem);
	line-height: 1.7;
}

.button--dark {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-text-inverse);
}

.button--dark:hover {
	border-color: var(--ink-700);
	background: var(--ink-700);
}

.button--outline-dark {
	border-color: var(--line-on-light-strong);
	background: transparent;
	color: var(--color-text);
}

.button--outline-dark:hover {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-text-inverse);
}

.constructor-intro {
	position: relative;
	overflow: hidden;
	background: var(--paper-200);
}

.constructor-intro::before {
	position: absolute;
	top: -13rem;
	right: -8rem;
	width: 36rem;
	height: 36rem;
	border: 1px solid var(--line-on-light);
	border-radius: 50%;
	box-shadow: 0 0 0 5rem rgba(23, 24, 20, 0.018), 0 0 0 10rem rgba(23, 24, 20, 0.012);
	content: "";
}

.constructor-intro__inner {
	position: relative;
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 0.83fr) minmax(480px, 1.17fr);
	gap: clamp(3rem, 8vw, 8rem);
}

.constructor-preview {
	position: relative;
	min-height: 610px;
	overflow: hidden;
	border-radius: calc(var(--radius) * 2);
	background: #111310;
	box-shadow: 0 2.5rem 5rem rgba(24, 25, 21, 0.18);
	color: var(--color-text-inverse);
}

.constructor-preview__toolbar {
	position: relative;
	z-index: 2;
	display: flex;
	min-height: 4rem;
	padding-inline: 1.5rem;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.7rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.constructor-preview__status {
	display: inline-flex;
	padding: 0.35rem 0.65rem;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid rgba(201, 148, 69, 0.42);
	border-radius: 2rem;
	color: var(--color-accent);
}

.constructor-preview__status::before {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.constructor-preview__canvas {
	position: absolute;
	inset: 4rem 0 3.5rem;
	background: radial-gradient(circle at 50% 38%, rgba(196, 149, 78, 0.23), transparent 22%), linear-gradient(120deg, #161814, #303128 50%, #11120f);
}

.constructor-preview__canvas::before,
.constructor-preview__canvas::after {
	position: absolute;
	content: "";
}

.constructor-preview__canvas::before {
	inset: 0;
	background: linear-gradient(90deg, transparent 49.9%, rgba(255, 255, 255, 0.045) 50%, transparent 50.1%), linear-gradient(transparent 49.9%, rgba(255, 255, 255, 0.045) 50%, transparent 50.1%);
	background-size: 5rem 5rem;
}

.constructor-preview__canvas::after {
	right: 7%;
	bottom: 0;
	left: 7%;
	height: 12%;
	background: repeating-linear-gradient(0deg, #181916 0 2px, #272923 3px 24px);
	clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.concept-door {
	position: absolute;
	z-index: 1;
	top: 8%;
	bottom: 5%;
	left: 50%;
	width: 42%;
	border: 0.85rem solid #080908;
	background: linear-gradient(105deg, #11120f, #292b25 47%, #0a0b09 48%);
	box-shadow: 0 0 0 1px rgba(218, 166, 88, 0.28), 0 2rem 5rem rgba(0, 0, 0, 0.7);
	transform: translateX(-50%);
}

.concept-door::before,
.concept-door::after {
	position: absolute;
	top: 0;
	bottom: 0;
	content: "";
}

.concept-door::before {
	left: 26%;
	width: 1px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 8rem 0 rgba(255, 255, 255, 0.04);
}

.concept-door::after {
	left: 50%;
	width: 2.6rem;
	background: linear-gradient(90deg, #714c21, #d8a14f, #6c481f);
	transform: translateX(-50%);
}

.concept-door__line {
	position: absolute;
	z-index: 1;
	top: 8%;
	bottom: 8%;
	left: 50%;
	width: 1px;
	background: rgba(255, 244, 218, 0.58);
}

.concept-door__handle {
	position: absolute;
	z-index: 2;
	top: 48%;
	right: 13%;
	width: 0.3rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: #b9b7ad;
}

.constructor-preview__steps {
	position: absolute;
	z-index: 2;
	right: 1.5rem;
	bottom: 1.25rem;
	left: 1.5rem;
	display: flex;
	align-items: center;
	color: #73756e;
	font-size: 0.62rem;
	font-weight: 700;
}

.constructor-preview__steps span.is-active {
	color: var(--color-accent);
}

.constructor-preview__steps i {
	flex: 1;
	height: 1px;
	margin-inline: 0.7rem;
	background: rgba(255, 255, 255, 0.14);
}

.featured-projects {
	background: var(--color-background);
}

.section-header {
	display: grid;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	align-items: end;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	gap: var(--space-lg);
}

.section-header .section-title {
	max-width: 12ch;
}

.section-header__note {
	max-width: 30rem;
	margin: 0 0 0.4rem auto;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.65;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.project-card {
	min-width: 0;
	background: var(--paper-000);
}

.project-card__media {
	position: relative;
	display: block;
	aspect-ratio: 0.78;
	overflow: hidden;
	background: var(--ink-750);
}

.project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slower) var(--ease-out);
}

.project-card:hover .project-card__image {
	transform: scale(1.025);
}

.project-card__image-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: end center;
	background: radial-gradient(circle at 50% 25%, rgba(200, 149, 72, 0.18), transparent 24%), linear-gradient(135deg, #242620, #11120f);
}

.project-card__image-placeholder::before {
	width: 54%;
	height: 78%;
	border: 0.55rem solid #080908;
	background: linear-gradient(110deg, #151613, #2b2d27 48%, #0b0c0a 49%);
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.48);
	content: "";
}

.project-card__image-placeholder i {
	position: absolute;
	bottom: 10%;
	left: 50%;
	width: 1.5rem;
	height: 62%;
	background: linear-gradient(90deg, #6f4a20, #c58e3f, #6f4a20);
	transform: translateX(-50%);
}

.project-card__arrow {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: grid;
	width: 2.6rem;
	height: 2.6rem;
	place-items: center;
	border: 1px solid var(--line-on-dark-strong);
	border-radius: 50%;
	background: rgba(10, 11, 9, 0.62);
	color: var(--paper-000);
	font-size: 1rem;
	transition: background-color var(--transition), color var(--transition);
}

.project-card:hover .project-card__arrow {
	background: var(--color-accent);
	color: var(--ink-900);
}

.project-card__body {
	padding: 1.35rem 1.25rem 1.5rem;
	border: 1px solid var(--line-on-light);
	border-top: 0;
}

.project-card__category {
	margin: 0 0 0.7rem;
	color: var(--color-accent);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.project-card__title {
	margin: 0;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.project-card__details {
	display: -webkit-box;
	min-height: 3em;
	margin: 0.85rem 0 1.2rem;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--color-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

.text-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* Класс вешают и на <button> (например "Начать заново") — без сброса
	   такие кнопки остаются с браузерной рамкой и отступами по умолчанию. */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Подчёркивание выезжает при наведении — тот же приём, что у ссылок
   в меню (.primary-navigation__list a::after). */
.text-link::after {
	position: absolute;
	right: 0;
	bottom: -0.2rem;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition);
}

.text-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.text-link span {
	color: var(--color-accent);
	transition: transform var(--transition);
}

.text-link:hover span {
	transform: translateX(0.2rem);
}

.featured-projects__footer {
	display: flex;
	margin-top: 2.5rem;
	justify-content: center;
}

.projects-empty {
	padding: 2rem;
	border: 1px solid var(--line-on-light);
	color: var(--color-muted);
	text-align: center;
}

.projects-empty--development {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
	font-size: var(--fs-xs);
}

.project-card--placeholder {
	pointer-events: none;
}

.project-card--placeholder .project-card__media,
.placeholder-line {
	position: relative;
	overflow: hidden;
}

.project-card--placeholder .project-card__media::after,
.placeholder-line::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
	content: "";
	transform: translateX(-100%);
}

.placeholder-line {
	display: block;
	width: 100%;
	height: 0.55rem;
	margin-top: 0.8rem;
	background: #e9e7e1;
}

.placeholder-line--short {
	width: 32%;
	margin-top: 0;
}

.placeholder-line--title {
	width: 68%;
	height: 1.15rem;
}

@media (max-width: 1023px) {
	:root {
		--header-height: 4.75rem;
	}

	.site-header__inner {
		gap: 1.5rem;
	}

	.primary-navigation {
		gap: 1.5rem;
	}

	.primary-navigation__list {
		gap: 1.25rem;
	}

	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
	}

	.hero__title {
		font-size: clamp(3.5rem, 7vw, 5.25rem);
	}

	.hero-door {
		right: -10%;
		width: 105%;
	}

	.constructor-intro__inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(390px, 1.2fr);
		gap: 3rem;
	}

	.constructor-preview {
		min-height: 520px;
	}

	.projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.project-card__media {
		aspect-ratio: 0.9;
	}
}

@media (max-width: 767px) {
	:root {
		--page-padding: clamp(1rem, 5vw, 1.5rem);
	}

	.site-header {
		position: absolute;
	}

	.site-header__inner {
		min-height: var(--header-height);
	}

	.site-brand {
		font-size: 1rem;
	}

	.site-brand__mark {
		width: 1.75rem;
		height: 2rem;
	}

	.menu-toggle {
		z-index: 2;
		display: inline-flex;
		align-items: center;
		gap: 0.75rem;
		color: var(--color-text-inverse);
		cursor: pointer;
	}

	.menu-toggle__label {
		font-size: var(--fs-2xs);
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.menu-toggle__icon {
		position: relative;
		display: block;
		width: 1.75rem;
		height: 1rem;
	}

	.menu-toggle__icon span {
		position: absolute;
		right: 0;
		width: 100%;
		height: 1px;
		background: currentColor;
		transition: top var(--transition), transform var(--transition);
	}

	.menu-toggle__icon span:first-child {
		top: 0.2rem;
	}

	.menu-toggle__icon span:last-child {
		top: 0.75rem;
		width: 72%;
	}

	.is-menu-open .menu-toggle__icon span:first-child,
	.is-menu-open .menu-toggle__icon span:last-child {
		top: 0.48rem;
		width: 100%;
	}

	.is-menu-open .menu-toggle__icon span:first-child {
		transform: rotate(45deg);
	}

	.is-menu-open .menu-toggle__icon span:last-child {
		transform: rotate(-45deg);
	}

	.primary-navigation {
		position: fixed;
		z-index: 1;
		inset: 0;
		display: flex;
		padding: calc(var(--header-height) + 3.5rem) var(--page-padding) 2rem;
		align-items: stretch;
		justify-content: flex-start;
		flex-direction: column;
		gap: 2.5rem;
		background: var(--ink-900);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-1rem);
		transition: opacity var(--transition), transform var(--transition);
	}

	.is-menu-open .primary-navigation {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.primary-navigation__list {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.primary-navigation__list li {
		border-bottom: 1px solid var(--color-border);
	}

	.primary-navigation__list a {
		display: block;
		padding-block: 1.1rem;
		font-size: clamp(1.5rem, 8vw, 2.25rem);
		font-weight: 400;
		letter-spacing: -0.03em;
		text-transform: none;
	}

	.primary-navigation__list a::after {
		display: none;
	}

	.primary-navigation__cta {
		width: 100%;
		margin-top: auto;
	}

	.hero {
		min-height: 100svh;
		background: linear-gradient(180deg, rgba(7, 8, 7, 0.94) 0%, rgba(8, 9, 8, 0.74) 50%, var(--ink-950) 100%), linear-gradient(135deg, var(--ink-800), var(--ink-700) 55%, var(--ink-950));
	}

	.hero::before {
		background-size: 3.5rem 3.5rem;
		mask-image: linear-gradient(var(--ink-1000), transparent 75%);
	}

	.hero__inner {
		display: flex;
		min-height: 100svh;
		padding-top: calc(var(--header-height) + 2.75rem);
		padding-bottom: 8rem;
		align-items: stretch;
		flex-direction: column;
		gap: 2.5rem;
	}

	.hero__content {
		z-index: 3;
		padding: 0;
	}

	.eyebrow {
		margin-bottom: 1.25rem;
		font-size: var(--fs-3xs);
	}

	.hero__title {
		max-width: 12ch;
		font-size: clamp(2.8rem, 13vw, 4.6rem);
		line-height: 0.96;
	}

	.hero__description {
		max-width: 31rem;
		margin-top: 1.5rem;
		font-size: var(--fs-md);
		line-height: 1.55;
	}

	.hero__actions {
		display: grid;
		margin-top: 1.75rem;
		grid-template-columns: 1fr;
	}

	.hero__visual {
		position: absolute;
		right: 0;
		bottom: 4.25rem;
		width: 70%;
		height: 48%;
		min-height: 330px;
		opacity: 0.7;
	}

	.hero-door {
		right: -12%;
		width: 100%;
		height: 100%;
	}

	.hero__meta {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.hero__meta p {
		font-size: 0.57rem;
	}

	.hero__meta p:nth-child(n + 2) {
		display: none;
	}

	.section {
		padding-block: clamp(4rem, 16vw, 6rem);
	}

	.section-title {
		font-size: clamp(2.5rem, 11vw, 4rem);
	}

	.constructor-intro__inner {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 3rem;
	}

	.constructor-intro__content .button {
		width: 100%;
	}

	.constructor-preview {
		min-height: min(135vw, 560px);
	}

	.concept-door {
		width: 48%;
	}

	.section-header {
		display: block;
	}

	.section-header__note {
		max-width: 32rem;
		margin: 1.5rem 0 0;
	}

	.projects-grid {
		display: flex;
		margin-right: calc(-1 * var(--page-padding));
		padding-right: var(--page-padding);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.project-card {
		min-width: min(82vw, 330px);
		scroll-snap-align: start;
	}

	.project-card__media {
		aspect-ratio: 0.82;
	}

	.featured-projects__footer .button {
		width: 100%;
	}
}

/* Reviews map. */
.reviews-map-section { background: var(--paper-200); }
.reviews-map { z-index: 1; width: 100%; height: clamp(390px,52vw,650px); border: 1px solid var(--line-on-light); background: #d8d7d1; }
.map-pin { display: grid; place-items: center; border-radius: 50%; box-shadow: 0 .4rem 1rem rgba(0,0,0,.28); }
/* Правка 18.08: метка производства терялась среди точек отзывов по всей
   стране (отзывы реально разбросаны от Калининграда до Новосибирска —
   честная география, не баг) — крупнее, с кольцом-ореолом и явным
   размером буквы, чтобы читалось сразу, а не только по клику. */
.map-pin--production { border: 3px solid #fff; background: var(--color-accent); color: #111; font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 0 6px rgba(201, 148, 69, .25), 0 .4rem 1rem rgba(0,0,0,.3); }
.map-pin--review { border: 4px solid #fff; background: #111; }
.map-pin--review span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* Постоянная подпись у метки производства — раньше была видна только по
   клику (popup), теперь читается сразу на любом масштабе карты. */
.map-pin__label.leaflet-tooltip {
	background: var(--ink-900);
	color: var(--paper-050);
	border: none;
	border-radius: 999px;
	padding: .3rem .75rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 .3rem .7rem rgba(0, 0, 0, .3);
}
.map-pin__label.leaflet-tooltip::before { display: none; }
.reviews-slider { display: flex; margin-top: 1rem; padding-bottom: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; }
.review-card { flex: 0 0 min(390px,85vw); min-height: 260px; padding: 1.5rem; border: 1px solid var(--line-on-light); background: var(--paper-000); cursor: pointer; scroll-snap-align: start; transition: border-color var(--transition),transform var(--transition); }
.review-card.is-active { border-color: var(--color-accent); transform: translateY(-3px); }
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-card__rating { color: var(--color-accent); letter-spacing: .08em; }
.review-card__city { color: var(--color-muted); font-size: var(--fs-xs); text-transform: uppercase; }
.review-card blockquote { margin: 1.5rem 0; font-size: var(--fs-md); line-height: 1.7; }
.contacts-map { z-index: 1; height: 430px; margin-top: 3rem; border: 1px solid var(--line-on-light); }

/* Nine production steps. */
.work-steps__list { grid-template-columns: repeat(3,1fr); }
.work-steps__list li { min-height: 230px; border-bottom: 1px solid var(--color-border); }
.work-steps__list li:nth-child(3n) { border-right: 0; }
.work-steps__list h3 { margin-top: 4rem; }

/* Constructor MVP. */
.constructor-page .page-hero h1 { max-width: 14ch; }
.constructor-app { background: var(--paper-200); }
.constructor-app__layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(460px,3fr); gap: clamp(2rem,4vw,4rem); }
.quiz-panel { min-width: 0; }
.quiz-progress { display: flex; margin-bottom: 2.5rem; align-items: center; gap: 1rem; color: var(--color-muted); font-size: var(--fs-xs); text-transform: uppercase; }
.quiz-progress > div { flex: 1; height: 2px; background: var(--line-on-light); }
.quiz-progress i { display: block; width: 0; height: 100%; background: var(--color-accent); transition: width var(--transition); }
[data-quiz-content] > h2 { margin: 0 0 2rem; font-size: clamp(2.2rem,4vw,4rem); font-weight: 500; letter-spacing: -.05em; }
.quiz-question { padding: 1.5rem 0; border: 0; border-top: 1px solid var(--line-on-light); }
.quiz-question legend { padding: 0; font-size: 1rem; font-weight: 650; }
.quiz-question > input { width: 100%; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line-on-light); background: var(--paper-000); }
.quiz-choices { display: grid; margin-top: 1rem; grid-template-columns: repeat(2,1fr); gap: .65rem; }
.quiz-choice { position: relative; display: grid; min-height: 3.5rem; overflow: hidden; border: 1px solid var(--line-on-light); background: var(--paper-050); cursor: pointer; }
.quiz-choice img { width: 100%; aspect-ratio: 1.8; object-fit: cover; }
.quiz-choice input { position: absolute; opacity: 0; }
.quiz-choice span { display: block; padding: .9rem 1rem; }
.quiz-choice:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.quiz-navigation { display: flex; margin-top: 2rem; gap: .7rem; }
.quiz-navigation .button { min-width: 130px; }
.quiz-lead { margin-top: 1.5rem; border: 0; background: none; cursor: pointer; }
.quiz-result { position: sticky; top: 1rem; height: min(720px,calc(100svh - 2rem)); min-height: 580px; overflow: hidden; background: var(--ink-900); color: var(--paper-000); }
.quiz-result__head { display: flex; height: 4rem; padding-inline: 1.25rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); font-size: var(--fs-2xs); text-transform: uppercase; }
.quiz-result__visual { position: absolute; inset: 4rem 0 4.5rem; background: radial-gradient(circle at 50% 30%,rgba(201,148,69,.25),transparent 25%),linear-gradient(135deg,var(--ink-700),var(--ink-950)); }
.quiz-result__visual .concept-door { top: 8%; bottom: 3%; }
.quiz-result__notice { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; margin: 0; color: var(--ink-350); font-size: var(--fs-xs); text-align: center; }
.project-card__meta { display: flex; margin: .7rem 0 0; align-items: baseline; justify-content: space-between; gap: .5rem; color: var(--color-muted); font-size: var(--fs-xs); }
.project-card__meta strong { color: var(--color-text); font-size: .82rem; }

@media (max-width:1023px) {
	.work-steps__list { grid-template-columns: repeat(3,1fr); }
	.constructor-app__layout { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.quiz-choices { grid-template-columns: 1fr; }
}
@media (max-width:767px) {
	.work-steps__list { grid-template-columns: 1fr; }
	.work-steps__list li { min-height: auto; border-right: 0; }
	.constructor-app__layout { grid-template-columns: 1fr; }
	.quiz-result { position: relative; top: auto; height: 540px; min-height: 0; grid-row: 1; }
	.quiz-navigation { display: grid; grid-template-columns: 1fr 1fr; }
	.review-card { min-height: 240px; }
	.reviews-map { height: 430px; }
}

/* Premium live door renderer and AI crossfade. */
.quiz-result { display: grid; grid-template-rows: 4rem minmax(360px,1fr) auto; height: min(820px,calc(100svh - 2rem)); }
.door-visual { position: relative; min-height: 0; overflow: hidden; background: #151713; }
.door-scene { position: absolute; inset: 0; overflow: hidden; perspective: 900px; background: linear-gradient(115deg,#4a4941 0 18%,#292b26 18.2% 82%,#46453e 82.2%); }
.door-scene__light { position: absolute; z-index: 1; top: -10%; left: 50%; width: 65%; height: 75%; background: radial-gradient(ellipse,rgba(255,226,173,.27),transparent 68%); transform: translateX(-50%); }
.door-scene__wall { position: absolute; top: 0; bottom: 14%; width: 18%; background: repeating-linear-gradient(0deg,transparent 0 85px,rgba(255,255,255,.08) 86px 88px),linear-gradient(90deg,#34352f,#55534a); }
.door-scene__wall--left { left: 0; box-shadow: inset -18px 0 25px rgba(0,0,0,.25); }
.door-scene__wall--right { right: 0; transform: skewY(-1deg); box-shadow: inset 18px 0 25px rgba(0,0,0,.25); }
.door-scene__floor { position: absolute; right: -8%; bottom: -5%; left: -8%; height: 23%; background: repeating-linear-gradient(0deg,#272823 0 2px,#3b3b35 3px 39px); transform: rotateX(55deg); box-shadow: 0 -2rem 4rem rgba(0,0,0,.3); }
.live-door { --door-ratio:.48; --door-color:#292b28; --frame-color:#292b28; position: absolute; z-index: 2; top: 8%; bottom: 8%; left: 50%; aspect-ratio: var(--door-ratio); padding: 13px; background:var(--frame-color); background: linear-gradient(90deg,color-mix(in srgb,var(--frame-color),#000 30%),var(--frame-color),color-mix(in srgb,var(--frame-color),#fff 12%)); box-shadow: 0 0 0 2px rgba(0,0,0,.65),0 2rem 4rem rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08); transform: translateX(-50%); transition: aspect-ratio .35s ease,background .35s ease; }
.live-door__frame { position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.08); pointer-events:none; }
.live-door__leaf { position: absolute; z-index: 1; top: 13px; bottom: 13px; overflow: hidden; border: 1px solid rgba(0,0,0,.7); background:var(--door-color); background: linear-gradient(105deg,color-mix(in srgb,var(--door-color),#fff 8%),var(--door-color) 46%,color-mix(in srgb,var(--door-color),#000 24%)); box-shadow: inset 14px 0 22px rgba(255,255,255,.03),inset -14px 0 25px rgba(0,0,0,.28); transition: background .35s ease,left .35s ease,right .35s ease; }
.live-door__leaf--primary { right: 13px; left: 13px; }
.live-door__leaf--secondary { display:none; }
.live-door[data-leaves="double"] .live-door__leaf--primary { left: 50%; }
.live-door[data-leaves="double"] .live-door__leaf--secondary { display:block; right: 50%; left:13px; }
.live-door[data-leaves="asymmetric"] .live-door__leaf--primary { left: 36%; }
.live-door[data-leaves="asymmetric"] .live-door__leaf--secondary { display:block; right: 64%; left:13px; }
.live-door[data-tall="true"]::before { position:absolute; z-index:4; top:13px; right:13px; left:13px; height:12%; border-bottom:3px solid var(--frame-color); background:linear-gradient(105deg,rgba(178,208,216,.2),rgba(20,28,28,.7)); content:""; }
.live-door[data-finish="wood"] .live-door__leaf { background: repeating-linear-gradient(88deg,rgba(42,22,10,.2) 0 2px,transparent 3px 19px),linear-gradient(100deg,color-mix(in srgb,var(--door-color),#d09a61 24%),var(--door-color),color-mix(in srgb,var(--door-color),#000 18%)); }
.live-door[data-finish="stone"] .live-door__leaf { background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 2%),radial-gradient(circle at 70% 60%,rgba(0,0,0,.18),transparent 2%),var(--door-color); background-size: 37px 43px,49px 53px,auto; }
.live-door__glass { position:absolute; top:8%; bottom:8%; left:50%; width:19%; background: linear-gradient(105deg,rgba(178,208,216,.3),rgba(28,38,39,.78)); border:3px solid rgba(0,0,0,.45); box-shadow:inset 8px 0 15px rgba(255,255,255,.08); transform:translateX(-50%); }
.live-door[data-glass="none"] .live-door__glass { display:none; }
.live-door[data-glass-position="side"] .live-door__glass { left:18%; width:16%; }
.live-door__panels::before,.live-door__panels::after { position:absolute; right:10%; left:10%; height:34%; border:1px solid rgba(255,255,255,.11); box-shadow:inset 0 0 0 5px rgba(0,0,0,.08); content:""; }
.live-door__panels::before { top:9%; }.live-door__panels::after { bottom:9%; }
.live-door[data-panels="horizontal"] .live-door__panels::before { top:22%; height:18%; }.live-door[data-panels="horizontal"] .live-door__panels::after { bottom:22%; height:18%; }
.live-door[data-panels="smooth"] .live-door__panels { display:none; }
.live-door__handle { position:absolute; z-index:3; top:32%; right:8%; width:7px; height:38%; border-radius:5px; background:linear-gradient(90deg,#111,#777,#111); box-shadow:2px 4px 8px rgba(0,0,0,.45); }
.live-door[data-handle-position="left"] .live-door__handle { right:auto; left:8%; }
.live-door[data-handle="lever"] .live-door__handle { top:48%; width:23%; height:7px; }
.live-door[data-handle="hidden"] .live-door__handle { width:3px; opacity:.35; }
.live-door__decor { position:absolute; z-index:2; top:0; bottom:0; left:50%; width:3px; background:#bc873e; opacity:0; transform:translateX(-50%); }
.live-door[data-decor="vertical"] .live-door__decor,.live-door[data-decor="brass"] .live-door__decor { opacity:1; }
.door-visual__ai { position:absolute; z-index:5; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.015); transition:opacity .7s ease,transform 1s ease; }
.door-visual__ai.is-visible { opacity:1; transform:scale(1); }
.door-visual__loading { position:absolute; z-index:7; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.09) 48%,transparent 75%); background-size:220% 100%; color:#fff; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; animation:virtus-shimmer 1.5s infinite linear; }
.door-visual__loading[hidden] { display:none; }
.door-visual__loading i { width:2rem; height:2rem; border:2px solid rgba(255,255,255,.25); border-top-color:var(--color-accent); border-radius:50%; animation:virtus-spin .8s linear infinite; }
@keyframes virtus-shimmer { to{background-position:-220% 0;} } @keyframes virtus-spin { to{transform:rotate(360deg);} }
.door-summary { max-height:220px; padding:1rem 1.25rem 1.25rem; overflow-y:auto; border-top:1px solid var(--color-border); background:var(--ink-900); }
.door-summary h3 { margin:0 0 .75rem; font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; }
.door-summary__heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.door-summary__heading strong { color:var(--color-accent); font-size: var(--fs-sm); font-weight:650; }
.door-summary dl { display:grid; margin:0; grid-template-columns:1fr 1fr; gap:.35rem 1rem; }
.door-summary dl div { display:flex; justify-content:space-between; gap:.5rem; border-bottom:1px solid var(--line-on-dark); }
.door-summary dt,.door-summary dd { margin:0; color:var(--ink-400); font-size: var(--fs-3xs); }.door-summary dd { color:var(--ink-250); text-align:right; }
.door-summary__error { margin:.6rem 0 0; color:#e7a5a0; font-size: var(--fs-xs); }
.door-tools { display:flex; margin-top:.85rem; flex-wrap:wrap; gap:.65rem 1rem; }
.door-tools .text-link { padding:0; border:0; background:none; color:#d7d8d2; cursor:pointer; font-size: var(--fs-2xs); text-decoration:underline; text-underline-offset:3px; }
.door-tools .text-link:disabled { cursor:not-allowed; opacity:.35; }
.door-tools .door-render-button { padding:.8rem 1rem; border:1px solid var(--color-accent); color:var(--ink-900); font-size: var(--fs-2xs); text-decoration:none; }
.door-history { display:flex; min-height:0; margin-top:.75rem; gap:.45rem; }
.door-history__item { width:48px; height:48px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:var(--ink-750); cursor:pointer; opacity:.65; transition:opacity var(--transition),border-color var(--transition); }
.door-history__item:hover,.door-history__item:focus-visible,.door-history__item.is-active { border-color:var(--color-accent); opacity:1; }
.door-history__item img { width:100%; height:100%; object-fit:cover; }
.quiz-question textarea { width:100%; margin-top:1rem; padding:1rem; border:1px solid var(--line-on-light); background:var(--paper-000); resize:vertical; }
.constructor-recovery { display:grid; max-width:34rem; padding:2rem 0; justify-items:start; gap:1rem; }
.constructor-recovery p { margin:0; font-size:1.15rem; }
.constructor-debug { position:fixed; z-index:10000; right:1rem; bottom:1rem; left:1rem; max-height:45vh; padding:1rem; overflow:auto; border:1px solid var(--brass-500); background:var(--ink-950); color:var(--paper-200); box-shadow:0 1rem 3rem var(--veil-light); font:12px/1.45 monospace; }
.constructor-debug strong { color:var(--brass-500); }.constructor-debug button { float:right; border:0; background:transparent; color:var(--paper-000); cursor:pointer; }.constructor-debug pre { margin:.75rem 0 0; white-space:pre-wrap; word-break:break-word; }
.quiz-choice--swatch { min-height:4.5rem; padding-left:3.6rem; }
.quiz-choice--swatch::before { position:absolute; top:50%; left:1rem; width:2rem; height:2rem; border:1px solid var(--line-on-light); border-radius:50%; background:var(--swatch); content:""; transform:translateY(-50%); box-shadow:inset 0 0 0 2px var(--line-on-dark-strong); }
@media(max-width:1023px){.quiz-result{height:700px}.door-summary dl{grid-template-columns:1fr}.constructor-app__layout{grid-template-columns:minmax(0,2fr) minmax(360px,3fr)}}
@media(max-width:767px){.quiz-result{height:540px;grid-template-rows:3.5rem minmax(300px,1fr) auto}.constructor-app__layout{display:flex;flex-direction:column}.quiz-result{order:-1}.door-summary{max-height:180px}.door-summary dl{grid-template-columns:1fr 1fr}.quiz-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-choice{min-width:0}.quiz-choice span{font-size: var(--fs-sm)}.live-door{top:7%;bottom:7%}.door-tools .door-render-button{width:100%}}
@media(max-width:389px){.quiz-result{height:570px}.quiz-choices{grid-template-columns:1fr}.door-summary dl{grid-template-columns:1fr}}

@media (max-width: 389px) {
	.hero__title {
		font-size: clamp(2.55rem, 12.5vw, 3.2rem);
	}

	.hero__description {
		max-width: 23rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Base site pages and footer. */
.page-surface { padding-top: var(--header-height); background: var(--color-background); }
body:not(.home) .site-header { background: var(--ink-900); }
.page-hero { padding-block: clamp(5rem, 10vw, 9rem); background: var(--ink-900); color: var(--color-text-inverse); }
.page-hero--compact { padding-block: clamp(4rem, 7vw, 7rem); }
.page-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(3.25rem, 7vw, 7rem); font-weight: 420; letter-spacing: -.055em; line-height: .92; }
.page-hero__text { max-width: 42rem; margin-top: 1.75rem; color: #b9bbb4; font-size: var(--fs-lg); line-height: 1.7; }
.page-hero .button { margin-top: 2rem; }
.site-footer { padding-top: clamp(4rem, 8vw, 7rem); background: var(--ink-950); color: var(--color-text-inverse); }
.site-footer__top { display: grid; padding-bottom: 4rem; grid-template-columns: 1.2fr .7fr .8fr; gap: 3rem; }
.site-brand--footer { margin-bottom: 1.25rem; }
.site-footer p { max-width: 19rem; color: var(--ink-400); }
.site-footer nav, .site-footer__contacts { display: flex; align-items: flex-start; flex-direction: column; gap: .9rem; }
.site-footer nav a, .site-footer__contacts a { color: var(--ink-250); font-size: var(--fs-base); }
.site-footer__contacts > a:first-child { color: var(--paper-000); font-size: 1.35rem; }
.text-link--light { padding: 0; border: 0; background: none; color: var(--color-accent); cursor: pointer; }
.site-footer__bottom { display: flex; padding-block: 1.25rem; border-top: 1px solid var(--color-border); justify-content: space-between; gap: 1rem; color: var(--ink-500); font-size: var(--fs-2xs); }

/* Forms and modal. */
.lead-modal[hidden] { display: none; }
.lead-modal { position: fixed; z-index: 1000; inset: 0; display: grid; padding: 1rem; place-items: center; }
.lead-modal__backdrop { position: absolute; inset: 0; background: rgba(5,6,5,.8); backdrop-filter: blur(5px); }
.lead-modal__dialog { position: relative; z-index: 1; width: min(100%, 610px); max-height: calc(100svh - 2rem); padding: clamp(1.5rem, 5vw, 3.5rem); overflow-y: auto; background: #f2f0ea; box-shadow: 0 2rem 8rem var(--veil-light); }
.lead-modal__dialog h2 { max-width: 12ch; margin: 0 0 2rem; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.lead-modal__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-on-light); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.5rem; }
body.has-open-modal { overflow: hidden; }
.lead-form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .45rem; }
.field span { color: #676961; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--line-on-light-strong); outline: 0; background: transparent; color: var(--color-text); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--color-accent); }
.checkbox { display: grid; align-items: start; grid-template-columns: auto 1fr; gap: .7rem; color: var(--ink-500); font-size: var(--fs-xs); line-height: 1.5; }
.checkbox input { margin-top: .2rem; accent-color: var(--color-accent); }
.checkbox a { text-decoration: underline; }
.form-message { min-height: 1.5em; margin: 0; font-size: .82rem; }
.lead-form.is-success .form-message { color: #317346; }
.lead-form.is-error .form-message { color: #a52d2d; }
.lead-form button:disabled { cursor: wait; opacity: .55; }

/* Home completion. */
.work-steps { background: var(--ink-850); color: var(--color-text-inverse); }
.work-steps .section-header__note, .work-steps .section-kicker { color: var(--ink-400); }
.work-steps__list { display: grid; padding: 0; border-top: 1px solid var(--color-border); grid-template-columns: repeat(4,1fr); list-style: none; }
.work-steps__list li { min-height: 250px; padding: 1.5rem; border-right: 1px solid var(--color-border); }
.work-steps__list li:last-child { border-right: 0; }
.work-steps__list span { color: var(--color-accent); font-size: var(--fs-2xs); }
.work-steps__list h3 { margin: 5rem 0 .75rem; font-size: 1.4rem; font-weight: 500; }
.work-steps__list p { margin: 0; color: var(--ink-400); font-size: var(--fs-base); line-height: 1.6; }
.final-cta { background: linear-gradient(100deg,rgba(5,6,5,.94),rgba(12,13,11,.72)),linear-gradient(135deg,var(--ink-700),var(--ink-950)); color: var(--paper-000); }
.final-cta__inner h2 { max-width: 12ch; margin: 0; font-size: clamp(3rem,7vw,7rem); font-weight: 400; letter-spacing: -.06em; line-height: .92; }
.final-cta__inner > p:not(.section-kicker) { max-width: 38rem; margin: 1.5rem 0 2rem; color: var(--ink-300); }
.final-cta__inner > div { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Catalog. */
.category-filter { display: flex; margin-bottom: 2.5rem; padding-bottom: .75rem; overflow-x: auto; gap: .65rem; }
.category-filter a { flex: 0 0 auto; padding: .65rem 1rem; border: 1px solid var(--line-on-light); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.category-filter a.is-active, .category-filter a:hover { border-color: var(--color-text); background: var(--color-text); color: var(--paper-000); }
.catalog__grid { row-gap: 2rem; }
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; justify-content: center; gap: .4rem; }
.pagination .page-numbers { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid var(--line-on-light); }
.pagination .current { background: var(--color-text); color: var(--paper-000); }
.catalog-empty { padding: clamp(3rem,8vw,7rem); border: 1px solid var(--line-on-light); text-align: center; }
.catalog-empty h2 { margin: 0; font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; }
.catalog-empty p { color: var(--color-muted); }

/* Single project. */
.project-single__top { display: grid; padding-block: clamp(3rem,7vw,7rem); grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: clamp(2.5rem,7vw,7rem); }
.project-gallery__main, .project-gallery__placeholder { position: relative; aspect-ratio: .9; overflow: hidden; background: var(--ink-800); }
.project-gallery__image { width: 100%; height: 100%; object-fit: cover; }
.project-gallery__placeholder .project-card__image-placeholder { inset: 0; }
.project-gallery__thumbs { display: grid; margin-top: .75rem; grid-template-columns: repeat(5,1fr); gap: .5rem; }
.project-gallery__thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; }
.project-gallery__thumbs button.is-active { border-color: var(--color-accent); opacity: 1; }
.project-gallery__thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.project-summary { align-self: center; }
.project-summary h1 { margin: 0; font-size: clamp(3rem,6vw,6rem); font-weight: 430; letter-spacing: -.06em; line-height: .92; }
.project-summary__city { color: var(--color-muted); }
.project-summary__price { margin: 1.5rem 0; font-size: 1.8rem; font-weight: 650; }
.project-specs { margin: 2rem 0; border-top: 1px solid var(--line-on-light); }
.project-specs div { display: grid; padding-block: .7rem; border-bottom: 1px solid var(--line-on-light); grid-template-columns: 1fr 1fr; gap: 1rem; }
.project-specs dt { color: var(--color-muted); font-size: var(--fs-sm); }
.project-specs dd { margin: 0; font-size: .82rem; }
.project-summary__actions { display: grid; gap: .65rem; }
.project-content { display: grid; border-top: 1px solid var(--line-on-light); grid-template-columns: 1.2fr .8fr; gap: clamp(3rem,8vw,8rem); }
.project-content aside { padding: 2rem; background: var(--paper-200); }
.project-content aside h2 { margin-top: 0; }
.project-content aside li { padding-block: .7rem; border-bottom: 1px solid var(--line-on-light); }
.prose { max-width: 55rem; font-size: 1rem; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2em; font-size: 2rem; }
.projects-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.related-projects { background: var(--paper-200); }

/* Partners and contacts. */
.page-hero--partners { background: linear-gradient(100deg,rgba(7,8,7,.97),rgba(15,16,14,.64)),linear-gradient(135deg,var(--ink-700),var(--ink-950)); }
.audiences__grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line-on-light); }
.audiences__grid article { min-height: 180px; padding: 1.5rem; border-right: 1px solid var(--line-on-light); }
.audiences__grid article:last-child { border: 0; }
.audiences__grid span { color: var(--color-accent); }
.audiences__grid h3 { margin-top: 5rem; font-size: 1.15rem; }
.partner-benefits { background: var(--ink-900); color: var(--paper-000); }
.benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.benefits-grid article { padding: 2rem; border: 1px solid var(--color-border); }
.benefits-grid strong { color: var(--color-accent); font-size: var(--fs-2xs); }
.benefits-grid h3 { margin-top: 4rem; }
.benefits-grid p { color: var(--ink-400); }
.geography__inner { display: grid; align-items: center; grid-template-columns: .8fr 1.2fr; gap: 5rem; }
.geography__visual { display: grid; min-height: 400px; place-items: center; background: radial-gradient(circle at 52% 48%,rgba(201,148,69,.5) 0 3px,transparent 4px),radial-gradient(circle at 38% 38%,rgba(201,148,69,.45) 0 2px,transparent 3px),linear-gradient(135deg,#d9d6ce,#f0eee8); color: var(--line-on-light); font-size: clamp(4rem,10vw,9rem); font-weight: 800; letter-spacing: .08em; }
.request-section { background: var(--paper-200); }
.request-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,8vw,8rem); }
.contacts__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem,8vw,8rem); }
.contacts__details h2, .contacts__form h2 { margin-top: 0; font-size: clamp(2rem,4vw,3.5rem); font-weight: 500; letter-spacing: -.04em; }
.contacts__details dl div { padding-block: 1.2rem; border-bottom: 1px solid var(--line-on-light); }
.contacts__details dt { color: var(--color-muted); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; }
.contacts__details dd { margin: .4rem 0 0; font-size: 1.1rem; }
.contacts__form { padding: clamp(1.5rem,4vw,3rem); background: var(--paper-200); }
.legal-content .prose { margin-inline: auto; }
.legal-content,.legal-content * { overflow-wrap:anywhere; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }

@media (max-width: 1023px) {
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__contacts { grid-column: 2; grid-row: 1; }
	.work-steps__list, .audiences__grid { grid-template-columns: repeat(2,1fr); }
	.work-steps__list li:nth-child(2), .audiences__grid article:nth-child(2) { border-right: 0; }
	.work-steps__list li, .audiences__grid article { border-bottom: 1px solid var(--color-border); }
	.project-single__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
	.projects-grid--three { grid-template-columns: repeat(2,1fr); }
	.geography__inner { gap: 3rem; }
}

@media (max-width: 767px) {
	.page-hero h1 { font-size: clamp(3rem,15vw,4.6rem); }
	.legal-content + *, .legal-content { min-width:0; }
	.page-surface > .page-hero h1 { font-size:clamp(2.55rem,12.5vw,4rem); overflow-wrap:anywhere; }
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__contacts { grid-column: auto; grid-row: auto; }
	.site-footer__bottom { align-items: flex-start; flex-direction: column; }
	.form-grid { grid-template-columns: 1fr; }
	.work-steps__list, .audiences__grid { grid-template-columns: 1fr; }
	.work-steps__list li, .audiences__grid article { min-height: auto; border-right: 0; }
	.work-steps__list h3, .audiences__grid h3 { margin-top: 2.5rem; }
	.final-cta__inner > div { display: grid; }
	.project-single__top, .project-content, .request-section__inner, .contacts__grid, .geography__inner { grid-template-columns: 1fr; }
	.project-single__top { padding-top: 1rem; }
	.project-gallery__main, .project-gallery__placeholder { aspect-ratio: .8; }
	.projects-grid--three { display: flex; grid-template-columns: none; }
	.benefits-grid { grid-template-columns: 1fr; }
	.geography__visual { min-height: 280px; }
	.lead-modal { padding: 0; }
	.lead-modal__dialog { width: 100%; max-height: 100svh; min-height: 100svh; }
}

/* Presentation polish: shared depth, typography and configurator controls. */
:root {
	--color-accent: #d2a04e;
	--color-accent-hover: #e0ae5b;
	--shadow-soft: 0 1.5rem 4rem rgba(18, 19, 16, .09);
	--shadow-card: 0 .75rem 2.5rem rgba(18, 19, 16, .08);
}

body {
	font-feature-settings: "kern" 1, "liga" 1;
	text-rendering: optimizeLegibility;
}

.button {
	position: relative;
	overflow: hidden;
	box-shadow: 0 .5rem 1.5rem rgba(201, 148, 69, .12);
}

/* Блик по наведению. Раньше это была повёрнутая полоса высотой 300%
   за пределами кнопки: при overflow:hidden её не видно, но габариты
   кнопки раздувались до 442 пикселей при видимых 258. Теперь блик —
   это подвижная позиция фона, которая ничего не выпячивает. */
.button::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, var(--line-on-dark-strong) 50%, transparent 62%);
	background-size: 250% 100%;
	background-position: 125% 0;
	content: "";
	transform: none;
	transition: background-position var(--dur-slower) var(--ease-out), opacity var(--dur-fast) linear;
}

.button:hover::after { background-position: -25% 0; }
.button:active { transform: translateY(0) scale(.985); }
.button--outline, .button--outline-dark { box-shadow: none; }

.site-nav a, .site-footer a, .text-link {
	text-underline-offset: .3em;
	transition: color var(--transition), opacity var(--transition);
}

.site-nav a:hover, .site-footer a:hover { color: var(--color-accent); }

.page-hero h1, .hero__title, .section-title, .final-cta__inner h2 {
	text-wrap: balance;
}

.page-hero__text, .hero__description, .section-header__note, .prose p {
	text-wrap: pretty;
}

.project-card {
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

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

.project-card__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, var(--line-on-light));
	content: "";
	pointer-events: none;
}

.review-card, .benefits-grid article, .contacts__form {
	box-shadow: 0 0 0 rgba(0,0,0,0);
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.review-card:hover, .benefits-grid article:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-3px);
}

.field input, .field textarea, .quiz-question textarea {
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.field input:focus, .field textarea:focus, .quiz-question textarea:focus {
	box-shadow: 0 1px 0 var(--color-accent);
}

.lead-modal__dialog {
	border: 1px solid rgba(255,255,255,.4);
	box-shadow: 0 2.5rem 8rem rgba(0,0,0,.58);
}

.constructor-page .page-hero--compact {
	padding-block: clamp(3.5rem, 6vw, 6rem);
}

.constructor-page .page-hero h1 {
	font-size: clamp(3.4rem, 6.2vw, 6.2rem);
}

.constructor-app__layout {
	align-items: start;
}

.quiz-progress {
	position: sticky;
	z-index: 3;
	top: 0;
	padding-block: .85rem;
	background: linear-gradient(90deg, var(--paper-200) 88%, transparent);
}

.quiz-question legend {
	letter-spacing: -.01em;
}

.quiz-choice {
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 0 transparent;
	transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.quiz-choice:hover {
	border-color: rgba(23,24,20,.38);
	background: var(--paper-000);
	transform: translateY(-1px);
}

.quiz-choice:has(input:checked) {
	background: var(--paper-000);
	box-shadow: inset 0 0 0 1px var(--color-accent), 0 .5rem 1.5rem var(--line-on-light);
}

.quiz-choice:has(input:checked)::after {
	position: absolute;
	top: .65rem;
	right: .65rem;
	display: grid;
	width: 1.15rem;
	height: 1.15rem;
	place-items: center;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--ink-900);
	content: "✓";
	font-size: var(--fs-2xs);
	font-weight: 800;
}

.quiz-choice--swatch { padding-left: 4rem; }
.quiz-choice--swatch::before { width: 2.25rem; height: 2.25rem; box-shadow: inset 0 0 0 2px var(--line-on-dark-strong), 0 .2rem .65rem var(--line-on-light); }

.quiz-custom-color {
	--custom-color: var(--ink-700);
	position: relative;
	display: grid;
	min-height: 4.5rem;
	padding: .75rem 4.5rem .75rem 4rem;
	align-items: center;
	border: 1px dashed var(--line-on-light-strong);
	background: rgba(255,255,255,.48);
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.quiz-custom-color:hover { border-color: var(--color-accent); background: var(--paper-000); transform: translateY(-1px); }
.quiz-custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.quiz-custom-color::before { position: absolute; top: 50%; left: 1rem; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-on-light); border-radius: 50%; background: var(--custom-color); box-shadow: inset 0 0 0 2px var(--line-on-dark-strong), 0 .2rem .65rem var(--line-on-light); content: ""; transform: translateY(-50%); }
.quiz-custom-color span { display: grid; line-height: 1.25; }
.quiz-custom-color strong { font-size: .84rem; font-weight: 650; }
.quiz-custom-color small { margin-top: .2rem; color: var(--ink-500); font-size: var(--fs-2xs); }
.quiz-custom-color output { position: absolute; right: 1rem; color: var(--ink-500); font: 600 .62rem/1 var(--font-primary); letter-spacing: .04em; }

.quiz-choice--material {
	min-height: 5rem;
	padding-left: 4.75rem;
}

.quiz-choice--material::before {
	position: absolute;
	top: .7rem;
	bottom: .7rem;
	left: .75rem;
	width: 3.1rem;
	border: 1px solid var(--line-on-light);
	background: linear-gradient(120deg,var(--ink-650),var(--ink-750) 48%,var(--ink-600));
	box-shadow: inset 0 0 0 1px var(--line-on-dark), 0 .25rem .7rem var(--line-on-light);
	content: "";
}

.quiz-choice--material[data-material="wood"]::before {
	background: repeating-linear-gradient(86deg,rgba(45,22,10,.28) 0 2px,transparent 3px 9px), linear-gradient(115deg,#7a5032,#4d2d1d 52%,#865d39);
}

.quiz-choice--material[data-material="stone"]::before {
	background: radial-gradient(circle at 25% 30%,var(--line-on-dark-strong) 0 1px,transparent 2px), radial-gradient(circle at 72% 60%,var(--line-on-light-strong) 0 1px,transparent 2px), linear-gradient(135deg,#86837c,var(--ink-600));
	background-size: 13px 17px,17px 19px,auto;
}

.quiz-dimension {
	display: grid;
	min-height: 5.25rem;
	padding: .8rem 1rem;
	align-items: center;
	border: 1px dashed var(--line-on-light-strong);
	background: rgba(255,255,255,.48);
	grid-column: 1 / -1;
	grid-template-columns: minmax(7rem,.75fr) minmax(8rem,1.5fr) 6.5rem;
	gap: 1rem;
}

.quiz-dimension > div { display: grid; }
.quiz-dimension strong { font-size: .84rem; font-weight: 650; }
.quiz-dimension small { margin-top: .2rem; color: var(--ink-500); font-size: var(--fs-2xs); }
.quiz-dimension > input[type="range"] { width: 100%; accent-color: var(--color-accent); cursor: pointer; }
.quiz-dimension > label { display: flex; height: 2.6rem; align-items: center; border: 1px solid rgba(23,24,20,.18); background: var(--paper-000); }
.quiz-dimension > label input { width: 100%; min-width: 0; height: 100%; padding: 0 .25rem 0 .75rem; border: 0; outline: 0; background: transparent; font-weight: 650; }
.quiz-dimension > label span { padding-right: .65rem; color: var(--ink-500); font-size: var(--fs-2xs); }
.quiz-dimension:focus-within { border-color: var(--color-accent); background: var(--paper-000); }

.quiz-result {
	border: 1px solid var(--line-on-dark);
	box-shadow: 0 2rem 6rem var(--line-on-light-strong);
}

.door-visual::after {
	position: absolute;
	z-index: 4;
	inset: 0;
	border: 1px solid rgba(255,255,255,.07);
	box-shadow: inset 0 0 5rem rgba(0,0,0,.18);
	content: "";
	pointer-events: none;
}

.door-scene {
	background: radial-gradient(circle at 50% 15%, rgba(219,190,139,.13), transparent 28%), linear-gradient(115deg,#555249 0 18%,#292b26 18.2% 82%,#514f46 82.2%);
}

.live-door {
	filter: drop-shadow(0 2rem 2rem rgba(0,0,0,.34));
}

.door-summary {
	scrollbar-color: rgba(210,160,78,.55) transparent;
	scrollbar-width: thin;
}

.door-summary dt { letter-spacing: .015em; }
.door-summary dd { max-width: 58%; }

.door-render-button {
	flex: 1 1 15rem;
}

@media (max-width: 767px) {
	.constructor-page .page-hero--compact { padding-block: 3.25rem 3.75rem; }
	.constructor-page .page-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
	.constructor-page .page-hero__text { margin-top: 1.25rem; font-size: var(--fs-md); }
	.constructor-app { padding-top: 2rem; }
	.quiz-result { height: min(555px, 70svh); border-radius: var(--radius); }
	.quiz-progress { top: -.1rem; margin-bottom: 1.5rem; }
	.quiz-choice, .quiz-custom-color { min-height: 4rem; }
	.quiz-custom-color { padding-right: 3.75rem; }
	.quiz-custom-color output { right: .65rem; font-size: .55rem; }
	.quiz-dimension { padding: .75rem; grid-template-columns: 1fr 5.75rem; gap: .65rem; }
	.quiz-dimension > div { grid-column: 1 / -1; }
	.door-summary dd { max-width: 60%; }
	.project-card:hover, .review-card:hover, .benefits-grid article:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.button::after { display: none; }
}

/* Configurator product pass. */
.constructor-page .page-hero--compact {
	padding-block: clamp(2.25rem, 3.6vw, 3.75rem);
}

.constructor-hero__inner {
	display: grid;
	align-items: end;
	grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
	gap: clamp(2rem, 6vw, 7rem);
}

.constructor-page .page-hero h1 {
	max-width: 11ch;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: .94;
}

.constructor-page .page-hero__text {
	max-width: 34rem;
	margin: 0 0 .35rem;
	font-size: clamp(.92rem, 1.15vw, 1.06rem);
}

.constructor-app.section {
	padding-block: clamp(2rem, 4vw, 4rem) clamp(4rem, 7vw, 7rem);
}

.quiz-stage-tabs {
	display: grid;
	margin-bottom: 1.5rem;
	border-top: 1px solid var(--line-on-light);
	border-bottom: 1px solid var(--line-on-light);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quiz-stage-tab {
	position: relative;
	display: grid;
	min-width: 0;
	padding: .85rem .75rem .8rem;
	border: 0;
	border-right: 1px solid var(--line-on-light);
	background: transparent;
	color: var(--ink-500);
	cursor: pointer;
	text-align: left;
	transition: color var(--transition), background-color var(--transition);
}

.quiz-stage-tab:last-child { border-right: 0; }
.quiz-stage-tab:hover { background: rgba(255,255,255,.42); color: var(--color-text); }
.quiz-stage-tab small { color: var(--color-accent); font-size: .58rem; font-weight: 750; letter-spacing: .08em; }
.quiz-stage-tab span { display: -webkit-box; min-height: 2.5em; margin-top: .35rem; overflow: hidden; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .045em; line-height: 1.25; text-transform: uppercase; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.quiz-stage-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--color-accent); content: ""; opacity: 0; transform: scaleX(.25); transition: opacity var(--transition), transform var(--transition); }
.quiz-stage-tab.is-active { background: var(--veil-dark); color: var(--color-text); }
.quiz-stage-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.quiz-stage-tab.is-complete small::after { margin-left: .35rem; color: #52735a; content: "✓"; }

.quiz-progress {
	margin-bottom: 1.5rem;
}

[data-quiz-content] > h2 {
	margin-bottom: 1rem;
	font-size: clamp(2.25rem, 3.4vw, 3.5rem);
}

.quiz-question {
	padding: 1.15rem 0;
}

.quiz-result {
	top: 1.25rem;
	height: min(760px, calc(100svh - 2.5rem));
	min-height: 620px;
}

.door-visual__badge {
	position: absolute;
	z-index: 8;
	top: 1rem;
	left: 1rem;
	padding: .42rem .65rem .4rem;
	border: 1px solid rgba(255,255,255,.17);
	background: rgba(12,13,11,.7);
	color: rgba(255,255,255,.82);
	backdrop-filter: blur(9px);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.door-visual__badge::before {
	display: inline-block;
	width: .4rem;
	height: .4rem;
	margin-right: .45rem;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 4px rgba(210,160,78,.11);
	content: "";
}

.quiz-navigation .button {
	flex: 1 1 0;
}

.quiz-lead {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
}

@media (max-width: 1023px) {
	.constructor-hero__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.quiz-stage-tab { padding-inline: .5rem; }
	.quiz-stage-tab span { font-size: var(--fs-3xs); }
}

@media (max-width: 767px) {
	.constructor-page .page-hero--compact { padding-block: 2.25rem 2.5rem; }
	.constructor-hero__inner { display: block; }
	.constructor-page .page-hero h1 { max-width: 9ch; font-size: clamp(2.65rem, 12vw, 3.5rem); }
	.constructor-page .page-hero__text { margin-top: 1rem; font-size: var(--fs-base); line-height: 1.55; }
	.constructor-app.section { padding-top: 1.25rem; }
	.constructor-app__layout { gap: 1.75rem; }
	.quiz-result { height: min(500px, 62svh); min-height: 430px; }
	.quiz-stage-tabs { margin-bottom: .75rem; overflow-x: auto; grid-auto-columns: minmax(8.5rem, 1fr); scrollbar-width: none; }
	.quiz-stage-tabs::-webkit-scrollbar { display: none; }
	.quiz-stage-tab { min-height: 3.6rem; }
	.quiz-progress { position: static; margin-bottom: 1rem; padding-block: .5rem; }
	[data-quiz-content] > h2 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
	.quiz-question { padding-block: 1rem; }
	.door-visual__badge { top: .75rem; left: .75rem; }
}

/* Constructor studio v3: photography-first product experience. */
.constructor-studio {
	min-height: 100svh;
	padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
	background:
		radial-gradient(circle at 82% 18%, rgba(210,160,78,.11), transparent 22rem),
		linear-gradient(180deg,#efede8 0,var(--paper-200) 100%);
}

.constructor-studio__intro {
	display: grid;
	padding-bottom: clamp(2rem,4vw,3.75rem);
	align-items: end;
	border-bottom: 1px solid var(--line-on-light);
	grid-template-columns: minmax(0,1.25fr) minmax(22rem,.75fr);
	gap: clamp(2rem,6vw,7rem);
}

.constructor-studio__intro h1 {
	max-width: 12ch;
	margin: .75rem 0 0;
	font-size: clamp(3.2rem,6vw,6.4rem);
	font-weight: 420;
	letter-spacing: -.06em;
	line-height: .9;
	text-wrap: balance;
}

.constructor-studio__aside > p {
	max-width: 35rem;
	margin: 0;
	color: #676960;
	font-size: 1rem;
	line-height: 1.7;
}

.constructor-studio__aside ul {
	display: flex;
	margin: 1.25rem 0 0;
	padding: 0;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
}

.constructor-studio__aside li {
	padding: .45rem .7rem;
	border: 1px solid var(--line-on-light);
	background: rgba(255,255,255,.44);
	color: var(--ink-600);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.constructor-studio .constructor-app {
	padding-top: clamp(2rem,4vw,3.75rem);
	background: transparent;
}

.constructor-studio .constructor-app__layout {
	grid-template-columns: minmax(380px, .78fr) minmax(540px, 1.22fr);
	gap: clamp(1.5rem,3vw,3rem);
}

.constructor-studio .quiz-panel {
	padding: clamp(1.25rem,2.4vw,2.25rem);
	border: 1px solid var(--line-on-light);
	background: rgba(248,247,243,.88);
	box-shadow: 0 1.5rem 5rem var(--line-on-light);
	backdrop-filter: blur(12px);
}

.constructor-studio .quiz-stage-tabs {
	margin: calc(clamp(1.25rem,2.4vw,2.25rem) * -1) calc(clamp(1.25rem,2.4vw,2.25rem) * -1) 1.25rem;
	border-top: 0;
	background: rgba(235,232,225,.75);
}

.constructor-studio .quiz-stage-tab {
	padding: 1rem .85rem;
}

.constructor-studio .quiz-progress {
	position: static;
	padding: .5rem 0;
	background: transparent;
}

.constructor-studio [data-quiz-content] > h2 {
	font-size: clamp(2rem,3vw,3rem);
}

.constructor-studio .quiz-question legend {
	font-size: var(--fs-md);
}

.constructor-studio .quiz-choice,
.constructor-studio .quiz-custom-color,
.constructor-studio .quiz-dimension {
	background-color: rgba(255,255,255,.72);
}

.constructor-studio .quiz-choice:hover,
.constructor-studio .quiz-choice:has(input:checked) {
	background-color: var(--paper-000);
}

.constructor-studio .quiz-result {
	top: 1.25rem;
	height: min(790px,calc(100svh - 2.5rem));
	min-height: 650px;
	border-color: var(--line-on-light);
	background: var(--ink-900);
	box-shadow: 0 2.5rem 7rem rgba(27,24,18,.2);
}

.constructor-studio .door-scene {
	background-color: #b7aa97;
	background-image: linear-gradient(rgba(17,15,11,.03),rgba(17,15,11,.03)),url("assets/images/constructor/entrance-scene-v2.webp");
	background-position: 50% 50%;
	background-size: cover;
}

.constructor-studio .door-scene__light,
.constructor-studio .door-scene__wall,
.constructor-studio .door-scene__floor {
	display: none;
}

.constructor-studio .live-door {
	top: 27.5%;
	bottom: 14.5%;
	padding: 5px;
	border-radius: 1px;
	box-shadow: 0 0 0 2px rgba(15,13,10,.6), 0 1.2rem 2.5rem rgba(12,10,7,.43), inset 0 0 0 1px rgba(255,255,255,.12);
	filter: none;
}

.constructor-studio .live-door__leaf {
	top: 5px;
	bottom: 5px;
}

.constructor-studio .live-door[data-leaves="single"] .live-door__leaf--primary { left:5px; right:5px; }
.constructor-studio .live-door[data-leaves="double"] .live-door__leaf--primary { left:5px; right:50%; }
.constructor-studio .live-door[data-leaves="double"] .live-door__leaf--secondary { left:50%; right:5px; }
.constructor-studio .live-door[data-leaves="asymmetric"] .live-door__leaf--primary { left:5px; right:34%; }
.constructor-studio .live-door[data-leaves="asymmetric"] .live-door__leaf--secondary { left:66%; right:5px; }

.constructor-studio .door-visual__badge {
	top: .85rem;
	left: .85rem;
	border-color: rgba(255,255,255,.2);
	background: rgba(13,13,11,.78);
}

.constructor-studio .door-summary {
	background: var(--ink-900);
}

@media(max-width:1100px){
	.constructor-studio .constructor-app__layout { grid-template-columns:minmax(340px,.9fr) minmax(430px,1.1fr); }
	.constructor-studio__intro { grid-template-columns:1fr 1fr; }
}

@media(max-width:767px){
	.constructor-studio { padding-top:2rem; }
	.constructor-studio__intro { display:block; padding-bottom:1.75rem; }
	.constructor-studio__intro h1 { max-width:100%; min-width:0; font-size:clamp(2.55rem,11.3vw,3.5rem); overflow-wrap:anywhere; }
	.constructor-studio__aside > p { margin-top:1.25rem; font-size: var(--fs-base); line-height:1.6; }
	.constructor-studio__aside ul { margin-top:.9rem; }
	.constructor-studio .constructor-app { padding-top:1rem; }
	.constructor-studio .constructor-app__layout { display:flex; gap:1rem; }
	.constructor-studio .quiz-panel { padding:1rem; }
	.constructor-studio .quiz-stage-tabs { margin:-1rem -1rem .75rem; }
	.constructor-studio .quiz-result { height:min(490px,61svh); min-height:420px; }
	.constructor-studio .live-door { top:27.5%; bottom:14.5%; }
}

/* Embedded preference-led constructor */
.home-configurator{position:relative;padding:clamp(5rem,9vw,9rem) 0;background:var(--paper-200);overflow:hidden}
.home-configurator::before{position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(210,160,78,.16),transparent 28%),linear-gradient(135deg,var(--veil-dark),transparent 45%);content:"";pointer-events:none}
.home-configurator>.container{position:relative}
.home-configurator__head{display:grid;margin-bottom:clamp(2.5rem,5vw,4.5rem);padding-bottom:2rem;border-bottom:1px solid var(--ink-250);grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);align-items:end;gap:4rem}
.home-configurator__head .section-title{max-width:14ch;margin-bottom:0;font-size:clamp(3rem,5.7vw,6rem);line-height:.92;letter-spacing:-.055em}
.home-configurator__head>p{max-width:34rem;margin:0;color:#676961;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65}
.constructor-app__layout--embedded{display:grid;grid-template-columns:minmax(24rem,.84fr) minmax(36rem,1.16fr);align-items:start;gap:1rem}
.constructor-app__layout--embedded .quiz-panel{min-height:49rem;padding:clamp(1.5rem,3vw,3rem);background:var(--paper-050);box-shadow:0 1.5rem 5rem var(--line-on-light)}
.constructor-app__layout--embedded .quiz-result{position:sticky;top:1rem;height:auto;min-height:49rem;grid-template-rows:3.5rem minmax(32rem,1fr) auto;background:var(--ink-900);box-shadow:0 2rem 6rem rgba(20,19,16,.2)}
.constructor-app__layout--embedded .quiz-progress{margin:0 0 1.6rem}
.constructor-app__layout--embedded .quiz-progress>span{display:block;margin-bottom:.75rem;color:var(--ink-500);font-size: var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.constructor-app__layout--embedded .quiz-progress>div{height:2px;background:#dedbd3}
.constructor-app__layout--embedded .quiz-progress i{display:block;height:100%;background:#d5a047;transition:width .45s var(--ease-out)}
.quiz-stage-caption{margin-bottom:2.6rem;color:#b38437;font-size: var(--fs-2xs);font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.quiz-question-number{display:block;margin-bottom:.65rem;color:var(--ink-400);font-size: var(--fs-xs);font-weight:650;letter-spacing:.09em;text-transform:uppercase}
.constructor-app__layout--embedded .quiz-question{padding:0;border:0}
.constructor-app__layout--embedded .quiz-question legend{max-width:15ch;margin-bottom:.7rem;color:var(--ink-850);font-size:clamp(2rem,3vw,3.35rem);font-weight: 500;line-height:1.02;letter-spacing:-.045em}
.quiz-question__hint{margin:0 0 2rem;color:var(--ink-500);font-size: var(--fs-base)}
.constructor-app__layout--embedded .quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.constructor-app__layout--embedded .quiz-choice{position:relative;display:flex;min-height:6.5rem;padding:1rem;border:1px solid #d8d5ce;background:var(--paper-000);align-items:flex-end;gap:.8rem;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.constructor-app__layout--embedded .quiz-choice:hover{border-color:var(--ink-400);transform:translateY(-2px);box-shadow:0 .7rem 1.8rem var(--line-on-light)}
.constructor-app__layout--embedded .quiz-choice:has(input:checked){border-color:var(--brass-500);box-shadow:inset 0 0 0 1px var(--brass-500),0 .7rem 1.8rem rgba(126,88,25,.12)}
.constructor-app__layout--embedded .quiz-choice:has(input:checked)::after{position:absolute;top:.7rem;right:.7rem;display:grid;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--brass-500);color:#161711;content:"✓";font-size: var(--fs-xs);font-weight:900;place-items:center}
.constructor-app__layout--embedded .quiz-choice input{position:absolute;opacity:0;pointer-events:none}
.constructor-app__layout--embedded .quiz-choice>span{position:relative;z-index:2;font-size: var(--fs-md);font-weight:600}
.quiz-choice__door-sample{position:relative;display:block;width:3rem;height:4.4rem;margin-right:.2rem;border:.25rem solid #272925;background:linear-gradient(135deg,#41443f,#181a18);box-shadow:.25rem .3rem .8rem rgba(0,0,0,.22);flex:0 0 auto}
.quiz-choice__door-sample::before{position:absolute;inset:.35rem;border:1px solid rgba(255,255,255,.14);content:""}
.quiz-choice__door-sample::after{position:absolute;top:48%;right:.3rem;width:.12rem;height:1rem;background:#c4a66e;content:""}
.quiz-choice--image{min-height:12.5rem!important;padding:0!important;overflow:hidden}
.quiz-choice--image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quiz-choice--image::before{position:absolute;z-index:1;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.78));content:""}
.quiz-choice--image>span{z-index:2!important;padding:1rem;color:var(--paper-000)}
.constructor-app__layout--embedded .quiz-navigation{display:grid;margin-top:2.2rem;grid-template-columns:.75fr 1.25fr;gap:.65rem}
.constructor-app__layout--embedded .quiz-navigation .button{width:100%;min-height:3.6rem}
.quiz-lead-now{width:100%;margin-top:1rem;padding:1rem;border:0;background:transparent;color:var(--ink-500);text-align:center;cursor:pointer}
.quiz-lead-now strong{color:var(--ink-850);text-decoration:underline;text-underline-offset:.25rem}
.constructor-app__layout--embedded .door-scene{background-image:url("assets/images/constructor/entrance-scene-v2.webp");background-size:cover;background-position:center}
.constructor-app__layout--embedded .door-summary{padding:1.3rem 1.5rem 1.5rem}
.door-summary__heading small{display:block;margin-bottom:.2rem;color:var(--ink-400);font-size: var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:1023px){.home-configurator__head{grid-template-columns:1fr;gap:1.5rem}.constructor-app__layout--embedded{grid-template-columns:minmax(19rem,.9fr) minmax(26rem,1.1fr)}.constructor-app__layout--embedded .quiz-panel{padding:1.6rem}.constructor-app__layout--embedded .quiz-result{min-height:43rem}.constructor-app__layout--embedded .quiz-choice{min-height:5.5rem}}
@media(max-width:767px){.home-configurator{padding:4.5rem 0}.home-configurator__head{margin-bottom:1.5rem}.home-configurator__head .section-title{font-size:clamp(2.6rem,12vw,4rem)}.constructor-app__layout--embedded{display:flex;flex-direction:column}.constructor-app__layout--embedded .quiz-result{position:relative;top:auto;order:-1;width:100%;min-height:0;height:auto;grid-template-rows:3rem minmax(19rem,55vw) auto}.constructor-app__layout--embedded .quiz-panel{width:100%;min-height:0;padding:1.25rem}.constructor-app__layout--embedded .quiz-question legend{font-size:2.15rem}.constructor-app__layout--embedded .quiz-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.constructor-app__layout--embedded .quiz-choice{min-height:5.5rem;padding:.75rem}.quiz-choice__door-sample{width:2.3rem;height:3.4rem}.constructor-app__layout--embedded .quiz-navigation{position:sticky;z-index:10;bottom:0;padding:.65rem 0;background:linear-gradient(transparent,var(--paper-050) 20%)}.quiz-choice--image{min-height:10rem!important}}
@media(max-width:389px){.constructor-app__layout--embedded .quiz-choices{grid-template-columns:1fr}.constructor-app__layout--embedded .quiz-result{grid-template-rows:3rem 18rem auto}}


/* =========================================================================
   ОТДЕЛКА
   Слой поверх базовых стилей: типографика на своём шрифте, состояния
   наведения, появление при прокрутке, недостающие брейкпоинты.
   ========================================================================= */

/* ---------- 1. Типографика ---------- */

body {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.006em;
	font-feature-settings: "ss01", "cv11";
}

/* Manrope плотнее системного гротеска: крупным заголовкам нужен чуть больший
   вес и чуть менее агрессивный трекинг, иначе они «слипаются». */
.hero__title {
	font-weight: 500;
	letter-spacing: -0.042em;
	line-height: 0.92;
}

.section-title {
	font-weight: 500;
	letter-spacing: -0.038em;
	line-height: 0.97;
}

.page-hero h1 {
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.95;
	text-wrap: balance;
}

h2,
h3 {
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.eyebrow,
.section-kicker {
	font-weight: 700;
	letter-spacing: 0.17em;
}

.hero__description,
.section-description {
	font-weight: 400;
	letter-spacing: -0.004em;
}

/* Цифры в характеристиках, ценах и таблицах должны стоять в колонку. */
.project-card__price,
.project-card__meta,
.door-summary dd,
.work-steps__number,
.hero__meta span,
.section-kicker span {
	font-variant-numeric: tabular-nums;
}

/* ---------- 2. Кнопки ---------- */

.button {
	position: relative;
	overflow: hidden;
	font-weight: 700;
	letter-spacing: 0.1em;
	transition:
		background-color var(--transition),
		border-color var(--transition),
		color var(--transition),
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(201, 148, 69, 0.65);
}

.button:active {
	transform: translateY(0);
	transition-duration: var(--dur-fast);
}

.button--outline:hover,
.button--outline-dark:hover {
	box-shadow: none;
}

.button--dark:hover {
	box-shadow: 0 12px 28px -14px rgba(20, 21, 16, 0.6);
}

/* ---------- 3. Ссылки-стрелки ---------- */

.text-link span,
.text-link::after {
	transition: transform var(--dur-base) var(--ease-out);
}

.text-link:hover span {
	transform: translateX(0.25rem);
}

/* ---------- 4. Карточки проектов ---------- */

.project-card {
	transition:
		transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out),
		border-color var(--transition);
}

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

.project-card__media {
	overflow: hidden;
}

.project-card__media img,
.project-card__media > span {
	transition: transform var(--dur-slower) var(--ease-out);
}

.project-card:hover .project-card__media img,
.project-card:hover .project-card__media > span {
	transform: scale(1.045);
}

/* ---------- 5. Появление при прокрутке ---------- */

.has-motion [data-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition:
		opacity var(--dur-slower) var(--ease-out) var(--reveal-delay),
		transform var(--dur-slower) var(--ease-out) var(--reveal-delay);
}

.has-motion [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.has-motion [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ---------- 6. Секция «Как мы работаем» ---------- */

/* Была решёткой из тусклых ячеек с нечитаемым текстом на почти чёрном.
   Стало: ступенчатый список с крупной нумерацией и внятным контрастом. */

.work-steps {
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(201, 148, 69, 0.11), transparent 55%),
		var(--ink-850);
}

/* Этапов может быть сколько угодно, поэтому не сетка с фиксированным числом
   колонок, а гибкий ряд: элементы последней строки растягиваются и не
   оставляют пустую ячейку. */
.work-steps__list {
	display: flex;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line-on-dark);
	flex-wrap: wrap;
	gap: 0;
	counter-reset: none;
}

.work-steps__list li {
	position: relative;
	display: flex;
	min-height: 0;
	padding: 2rem 1.75rem 2.25rem;
	border-right: 1px solid var(--line-on-dark);
	border-bottom: 1px solid var(--line-on-dark);
	flex: 1 1 15rem;
	flex-direction: column;
	gap: 0.55rem;
	transition: background-color var(--dur-slow) var(--ease-out);
}

.work-steps__list li::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	content: "";
	transition: width var(--dur-slow) var(--ease-out);
}

.work-steps__list li:hover {
	background: var(--line-on-dark);
}

.work-steps__list li:hover::before {
	width: 100%;
}

.work-steps__number {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--color-accent);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.14em;
}

.work-steps__list h3 {
	margin: 0;
	color: var(--color-text-inverse);
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.work-steps__list p {
	margin: 0;
	max-width: 26ch;
	/* Было var(--ink-400) на var(--ink-850) — контраст ниже нормы. Подняли до читаемого. */
	color: var(--ink-300);
	font-size: var(--fs-base);
	line-height: 1.6;
}

.work-steps .section-header__note,
.work-steps .section-kicker {
	color: var(--ink-300);
}

/* ---------- 7. Отзывы: убираем горизонтальное переполнение ---------- */

.reviews-map-section,
.reviews-map-section .container {
	max-width: 100%;
	overflow-x: clip;
}

.reviews-slider {
	margin-inline: calc(var(--page-padding) * -1);
	padding-inline: var(--page-padding);
	padding-block: 0.35rem 1.1rem;
	scroll-padding-inline: var(--page-padding);
	scrollbar-width: thin;
	scrollbar-color: var(--line-on-light-strong) transparent;
}

.reviews-slider::-webkit-scrollbar {
	height: 4px;
}

.reviews-slider::-webkit-scrollbar-thumb {
	background: var(--line-on-light-strong);
}

/* Последняя карточка должна доезжать до края, а не липнуть к нему. */
.reviews-slider > :last-child {
	margin-right: var(--page-padding);
}

.review-card {
	box-shadow: var(--shadow-card);
	transition:
		border-color var(--transition),
		transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out);
}

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

/* ---------- 8. Шапка ---------- */

.site-header {
	transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), backdrop-filter var(--dur-slow) var(--ease-out);
}

.site-header.is-stuck {
	/* Без backdrop-filter: размытие подложки заставляло браузер
	   перерисовывать всё под шапкой на каждом кадре. */
	background: rgba(11, 12, 11, 0.94);
	border-bottom: 1px solid var(--line-on-dark);
}

.primary-navigation__list a {
	position: relative;
}

.primary-navigation__list a::after {
	position: absolute;
	bottom: -0.35rem;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--color-accent);
	content: "";
	transition: width var(--dur-base) var(--ease-out);
}

.primary-navigation__list a:hover::after,
.primary-navigation__list .current-menu-item > a::after {
	width: 100%;
}

/* ---------- 9. Подвал: соцсети ---------- */

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	margin: 1.25rem 0 0;
	padding: 0;
	gap: 0.4rem 1.1rem;
	list-style: none;
}

.site-footer__social a {
	color: var(--color-muted);
	font-size: var(--fs-sm);
	letter-spacing: 0.02em;
	transition: color var(--transition);
}

.site-footer__social a:hover {
	color: var(--color-accent);
}

.site-footer__phone {
	font-size: 1.32rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* ---------- 10. Фотография в шапке главной ---------- */

.hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.94) contrast(1.04);
}

/* ---------- 11. Недостающие брейкпоинты по ТЗ ---------- */

/* 1440+ — на широких экранах не даём макету расползтись. */
@media (min-width: 1440px) {
	:root {
		--container-width: 1400px;
	}

	.hero__title {
		font-size: clamp(5.5rem, 5.4vw, 7.25rem);
	}
}

/* 1280 — промежуточный ноутбук: колонки уже, заголовки чуть меньше. */
@media (max-width: 1279px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
	}

	.hero__title {
		max-width: 13ch;
		font-size: clamp(3rem, 5.6vw, 4.6rem);
	}

	.work-steps__list li {
		flex-basis: 13.5rem;
	}
}

/* 768 — планшет книжной ориентации. */
@media (max-width: 767px) {
	.work-steps__list li {
		padding: 1.6rem 0 1.75rem;
		border-right: 0;
		flex-basis: 100%;
	}

	.site-footer__phone {
		font-size: var(--fs-xl);
	}
}

/* 390 и 360 — телефоны. Ключевая правка: фотография в шапке больше не
   лежит под кнопками, а встаёт отдельным блоком под текстом. */
@media (max-width: 767px) {
	.hero {
		min-height: 0;
	}

	.hero__inner {
		display: flex;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		padding-top: calc(var(--header-height) + 1rem);
		gap: 2.25rem;
	}

	.hero__content {
		max-width: none;
		padding-block: 1.5rem 0;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 2rem;
	}

	.hero__actions .button {
		width: 100%;
	}

	/* В прежней версии блок был полупрозрачной подложкой под текстом
	   (position:absolute, opacity .7) — отсюда наложение на кнопки.
	   Возвращаем его в поток обычным блоком и гасим старые смещения. */
	.hero__visual {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
		margin-bottom: 2rem;
		overflow: hidden;
		opacity: 1;
	}

	.hero__photo {
		position: absolute;
		inset: 0;
	}

	/* Нарисованная дверь тоже должна помещаться в свой блок. */
	.hero .hero-door {
		position: absolute;
		inset: 0;
		transform: none;
	}

	/* Декоративное свечение не должно выходить за правый край экрана. */
	.hero__ambient {
		top: auto;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 50%;
		opacity: 0.7;
	}
}

@media (max-width: 389px) {
	.hero__title {
		font-size: clamp(2.5rem, 11.5vw, 3.1rem);
		letter-spacing: -0.035em;
	}

	.section-title {
		font-size: clamp(2.1rem, 10.5vw, 2.75rem);
	}

	.hero__meta {
		gap: 0.5rem;
	}
}

/* 360 — узкие Android. Раньше этот размер не обрабатывался вовсе. */
@media (max-width: 360px) {
	:root {
		--page-padding: 1rem;
	}

	.hero__title {
		font-size: 2.35rem;
	}

	.button {
		padding-inline: 1.15rem;
		font-size: var(--fs-2xs);
	}

	.site-footer__phone {
		font-size: var(--fs-lg);
	}
}

/* ---------- 12. Ничто не должно выезжать вбок ---------- */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

/* При печати и в режиме чтения появления не должны прятать содержимое. */
@media print {
	.has-motion [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- Кластеры на карте отзывов ---------- */

.map-cluster {
	display: grid;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: #161814;
	box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.3);
	color: var(--color-accent);
	font-size: 0.86rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	place-items: center;
	transition: transform 220ms var(--ease-out);
}

.map-cluster:hover {
	transform: scale(1.08);
}

/* Плагин рисует свои обёртки — убираем его стандартный вид. */
.marker-cluster,
.marker-cluster div {
	background: none !important;
	border-radius: 50%;
}

/* Старые правила расставляли границы по номеру ячейки в сетке из 3–4 колонок.
   При гибком ряду номер больше ни о чём не говорит — возвращаем границу всем. */
.work-steps__list li:nth-child(3n),
.work-steps__list li:last-child {
	border-right: 1px solid var(--line-on-dark);
}

@media (max-width: 767px) {
	.work-steps__list li:nth-child(3n),
	.work-steps__list li:last-child {
		border-right: 0;
	}
}

/* ---------- Компенсация пробелов ----------
   У Manrope пробел заметно уже, чем у системного гротеска, а отрицательный
   трекинг на заголовках сжимает его ещё сильнее — слова начинают слипаться.
   Возвращаем воздух между словами, не трогая межбуквенное расстояние. */

body {
	word-spacing: 0.028em;
}

.hero__title,
.page-hero h1,
.section-title {
	word-spacing: 0.075em;
}

h2,
h3 {
	word-spacing: 0.04em;
}

.eyebrow,
.section-kicker,
.button {
	/* Здесь трекинг положительный, дополнительный пробел только мешает. */
	word-spacing: normal;
}

/* ---------- Нарисованная дверь на телефоне ----------
   На десктопе дверь прижата к правому краю широкой колонки. В мобильной
   раскладке колонка стала отдельным блоком, и та же привязка оставляла
   половину блока пустой. Центрируем и вписываем по высоте. */

@media (max-width: 767px) {
	.hero__visual {
		aspect-ratio: 3 / 4;
		margin-top: 0.5rem;
	}

	.hero .hero-door {
		right: auto;
		bottom: auto;
		left: 50%;
		top: 50%;
		width: min(78%, 320px);
		height: 88%;
		transform: translate(-50%, -50%);
	}

	.hero .hero-door__frame {
		inset: 0 0 0 0;
		padding: 0.7rem;
	}
}

@media (max-width: 360px) {
	.hero .hero-door {
		width: min(82%, 270px);
	}
}

/* ---------- Карточка отзыва ---------- */

.review-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.35rem 1.4rem 1.5rem;
}

.review-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.review-card__person {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.review-card__avatar {
	display: grid;
	width: 2.6rem;
	height: 2.6rem;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 50%;
	background: var(--ink-850);
	color: var(--color-accent);
	font-size: var(--fs-md);
	font-weight: 700;
	place-items: center;
}

.review-card__avatar.has-photo {
	background: none;
}

.review-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review-card__person strong {
	display: block;
	font-size: var(--fs-md);
	font-weight: 650;
	letter-spacing: -0.012em;
	line-height: 1.25;
}

.review-card__city {
	margin: 0.1rem 0 0;
	color: var(--ink-mute, #86887f);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.review-card__rating {
	flex: 0 0 auto;
	color: var(--color-accent);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.review-card blockquote {
	margin: 0;
	/* Длинные отзывы не должны растягивать карточку: обрезаем по строкам. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
	font-size: var(--fs-md);
	line-height: 1.66;
}

.review-card .text-link {
	margin-top: auto;
	font-size: var(--fs-sm);
}

.review-card.is-active {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent), var(--shadow-card-hover);
	transform: translateY(-3px);
}

/* =========================================================================
   ШАПКА: ДВЕРЬ, ОТКРЫВАЮЩАЯСЯ ПРИ ПРОКРУТКЕ
   Три кадра одной двери накладываются друг на друга. Прокрутка первого
   экрана управляет их непрозрачностью — дверь распахивается, из проёма
   выходит свет и мягко подсвечивает всю секцию.
   ========================================================================= */

.hero-doorway {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0b0c0b;
	/* Мягкая виньетка по краям, чтобы кадр врастал в тёмный фон секции. */
	mask-image: radial-gradient(125% 100% at 50% 45%, #000 58%, transparent 100%);
}

.hero-doorway__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 520ms var(--ease-out), transform 900ms var(--ease-out);
	will-change: opacity;
}

.hero-doorway__frame.is-visible {
	opacity: 1;
}

/* Каждый следующий кадр чуть ближе — появляется ощущение входа внутрь. */
.hero-doorway[data-progress="1"] .hero-doorway__frame { transform: scale(1.055); }
.hero-doorway[data-progress="2"] .hero-doorway__frame { transform: scale(1.075); }

/* Свет из проёма: разгорается по мере открывания. */
.hero-doorway__glow {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 62%;
	height: 78%;
	/* Раньше здесь был filter: blur(26px). Размытие большого слоя
	   пересчитывалось на каждом кадре прокрутки и роняло частоту вдвое.
	   Градиент и так мягкий — фильтр не нужен. */
	background: radial-gradient(ellipse at center, rgba(255, 203, 122, 0.5), rgba(214, 152, 62, 0.14) 45%, transparent 74%);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-scene) var(--ease-out);
	pointer-events: none;
	mix-blend-mode: screen;
}

.hero-doorway[data-progress="1"] .hero-doorway__glow { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
.hero-doorway[data-progress="2"] .hero-doorway__glow { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }

/* Тёплый отсвет на всей секции, когда дверь распахнута. */
.hero__ambient {
	transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-scene) var(--ease-out);
}

.hero.is-door-open .hero__ambient {
	opacity: 1;
	transform: scale(1.12);
}

.hero.is-door-ajar .hero__ambient {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.hero-doorway__frame,
	.hero-doorway__glow,
	.hero__ambient {
		transition: none;
	}

	/* Без анимации показываем сразу открытую дверь — она выразительнее. */
	.hero-doorway__frame[data-hero-frame="2"] { opacity: 1; }
	.hero-doorway__frame[data-hero-frame="0"],
	.hero-doorway__frame[data-hero-frame="1"] { opacity: 0; }
	.hero-doorway__glow { opacity: 1; }
}

/* На телефоне дверь занимает собственный блок под текстом. */
@media (max-width: 767px) {
	.hero .hero-doorway {
		position: absolute;
		inset: 0;
		mask-image: radial-gradient(130% 100% at 50% 50%, #000 66%, transparent 100%);
	}
}

/* ---------- Липкая сцена шапки ----------
   Шапка удерживается на экране, пока прокручивается сцена высотой в два
   экрана. За это время дверь успевает открыться на глазах у посетителя,
   а не где-то за пределами видимости. */

.hero-stage {
	position: relative;
	height: 170vh;
}

.hero-stage .hero {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 100vh;
}

.hero-stage .hero__inner {
	min-height: 0;
	height: calc(100vh - var(--header-height) - 5.5rem);
	padding-top: var(--header-height);
}

.hero-stage .hero__content {
	padding-block: 0;
}

/* Подпись 01/02/03 прижата к низу залипшего экрана. */
.hero-stage .hero__meta {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin-inline: auto;
}

/* Подсказка «крутите вниз» — исчезает, как только дверь начала открываться. */
.hero__scroll-hint {
	position: absolute;
	z-index: 2;
	bottom: 5.5rem;
	left: 50%;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 0.55rem;
	color: var(--veil-dark);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: translateX(-50%);
	transition: opacity var(--dur-slow) var(--ease-out);
	pointer-events: none;
}

.hero__scroll-hint::after {
	width: 1px;
	height: 2.4rem;
	background: linear-gradient(var(--color-accent), transparent);
	content: "";
	animation: virtus-scroll-hint 2.1s var(--ease-inout) infinite;
	transform-origin: top;
}

@keyframes virtus-scroll-hint {
	0% { transform: scaleY(0); opacity: 0; }
	35% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

.hero.is-door-ajar .hero__scroll-hint,
.hero.is-door-open .hero__scroll-hint {
	opacity: 0;
}

/* Кадры теперь перекрываются плавно: непрозрачность задаёт скрипт. */
.hero-doorway__frame {
	transition: transform var(--dur-scene) var(--ease-out);
}

.hero-doorway__glow {
	transition: transform var(--dur-scene) var(--ease-out);
}

/* На телефоне липкая сцена только мешает: экран маленький, прокрутка дорогая. */
@media (max-width: 767px) {
	.hero-stage {
		height: auto;
	}

	.hero-stage .hero {
		position: static;
		height: auto;
		min-height: 0;
	}

	.hero-stage .hero__inner {
		height: auto;
	}

	.hero-stage .hero__meta {
		position: static;
	}

	.hero__scroll-hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-stage { height: auto; }
	.hero-stage .hero { position: static; height: auto; min-height: 0; }
	.hero-stage .hero__inner { height: auto; }
	.hero-stage .hero__meta { position: static; }
	.hero__scroll-hint { display: none; }
	.hero__scroll-hint::after { animation: none; }
}

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

.has-motion [data-hero-enter] {
	animation: virtus-hero-enter 780ms var(--ease-out) both;
	animation-delay: var(--enter-delay, var(--dur-fast));
}

@keyframes virtus-hero-enter {
	from { opacity: 0; transform: translateY(1.1rem); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.has-motion [data-hero-enter] { animation: none; }
}

/* =========================================================================
   ПРЕВЬЮ ВАРИАНТОВ В КВИЗЕ
   Раньше у всех ответов рисовалась одна и та же схематичная дверь, и выбор
   был вслепую. Теперь каждое значение получает свой облик: цвет полотна,
   число створок, фактуру, стекло и форму ручки видно прямо в кнопке.
   ========================================================================= */

.quiz-choice__door-sample {
	--leaf: #3a3d38;
	--frame: #202320;
	--hardware: #c9a45f;
	position: relative;
	display: block;
	width: 3.4rem;
	height: 4.8rem;
	margin-right: 0.15rem;
	flex: 0 0 auto;
	border: 0.28rem solid var(--frame);
	background: linear-gradient(118deg, color-mix(in srgb, var(--leaf), #fff 9%), var(--leaf) 46%, color-mix(in srgb, var(--leaf), #000 34%));
	box-shadow: 0.2rem 0.28rem 0.85rem rgba(0, 0, 0, 0.24);
	transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.quiz-choice:hover .quiz-choice__door-sample {
	transform: translateY(-2px) rotate(-0.6deg);
	box-shadow: 0.25rem 0.5rem 1.1rem rgba(0, 0, 0, 0.3);
}

/* Полотно: тонкая внутренняя филёнка у всех вариантов. */
.quiz-choice__door-sample::before {
	position: absolute;
	inset: 0.3rem;
	border: 1px solid rgba(255, 255, 255, 0.13);
	content: "";
}

/* Ручка: по умолчанию вертикальная скоба справа. */
.quiz-choice__door-sample::after {
	position: absolute;
	top: 46%;
	right: 0.3rem;
	width: 0.13rem;
	height: 1.15rem;
	border-radius: 0.1rem;
	background: var(--hardware);
	content: "";
}

/* ---------- Тип двери: разный контекст ---------- */

.quiz-choice__door-sample[data-variant="premium residential entrance door"] { height: 5rem; }
.quiz-choice__door-sample[data-variant="premium apartment entrance door"] { width: 3rem; height: 4.4rem; }
.quiz-choice__door-sample[data-variant="premium commercial entrance door"] {
	width: 4.2rem;
	--leaf: #2f3b41;
}
.quiz-choice__door-sample[data-variant="premium commercial entrance door"]::before {
	inset: 0.3rem;
	border-color: rgba(190, 220, 235, 0.22);
	background: linear-gradient(160deg, rgba(180, 214, 230, 0.16), transparent 60%);
}

/* ---------- Створки ---------- */

.quiz-choice__door-sample[data-variant="single leaf"] { width: 2.9rem; }

.quiz-choice__door-sample[data-variant="one and a half leaves"] { width: 4rem; }
.quiz-choice__door-sample[data-variant="one and a half leaves"]::before {
	inset: 0.3rem 0.3rem 0.3rem 1.15rem;
	border-left: 2px solid rgba(0, 0, 0, 0.55);
}

.quiz-choice__door-sample[data-variant="double leaf"] { width: 4.4rem; }
.quiz-choice__door-sample[data-variant="double leaf"]::before {
	inset: 0.3rem;
	border-left: 0;
	border-right: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
	background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, 0.6) calc(50% - 1px), rgba(0, 0, 0, 0.6) calc(50% + 1px), transparent calc(50% + 1px));
}
.quiz-choice__door-sample[data-variant="double leaf"]::after {
	right: auto;
	left: 50%;
	width: 0.42rem;
	margin-left: -0.21rem;
	background: linear-gradient(90deg, #c9a45f 45%, transparent 45%, transparent 55%, #c9a45f 55%);
}

/* ---------- Цвет полотна ---------- */

.quiz-choice__door-sample[data-variant="dark graphite"]           { --leaf: #3c4043; }
.quiz-choice__door-sample[data-variant="deep matte black"]        { --leaf: #17181a; }
.quiz-choice__door-sample[data-variant="warm architectural gray"] { --leaf: #8d887e; }
.quiz-choice__door-sample[data-variant="dark natural walnut"]     { --leaf: #5a3b25; }

/* ---------- Покрытие: разная фактура ---------- */

.quiz-choice__door-sample[data-variant="fine texture powder coating"] {
	--leaf: #3d4043;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.09) 0.5px, transparent 0.5px),
		linear-gradient(118deg, #4a4d50, #35383b);
	background-size: 3px 3px, 100% 100%;
}

.quiz-choice__door-sample[data-variant="dark natural wood veneer"] {
	--leaf: #4a3323;
	background-image:
		repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.24) 0 1px, transparent 1px 5px),
		linear-gradient(118deg, #5c4029, #38251a);
}

.quiz-choice__door-sample[data-variant="dark stone textured panels"] {
	--leaf: #43454a;
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 1.15rem),
		radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(118deg, #4e5054, #34363a);
	background-size: 100% 100%, 5px 5px, 100% 100%;
}

/* ---------- Стекло ---------- */

.quiz-choice__door-sample[data-variant="no glass"]::before {
	border-color: rgba(255, 255, 255, 0.1);
}

.quiz-choice__door-sample[data-variant="narrow smoked glass insert"]::before {
	inset: 0.5rem 1.05rem 0.5rem 0.5rem;
	border: 0;
	background: linear-gradient(160deg, rgba(120, 140, 150, 0.5), rgba(30, 36, 40, 0.75));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.quiz-choice__door-sample[data-variant="narrow clear architectural glass insert"]::before {
	inset: 0.5rem 1.05rem 0.5rem 0.5rem;
	border: 0;
	background: linear-gradient(160deg, rgba(226, 240, 245, 0.82), rgba(150, 180, 195, 0.5));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* ---------- Ручка ---------- */

.quiz-choice__door-sample[data-variant="long vertical matte black pull handle"]::after {
	top: 26%;
	height: 2.3rem;
	width: 0.16rem;
	background: #1b1c1e;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.quiz-choice__door-sample[data-variant="minimal matte black lever handle"]::after {
	top: 52%;
	right: 0.28rem;
	width: 0.85rem;
	height: 0.14rem;
	background: #1b1c1e;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.quiz-choice__door-sample[data-variant="integrated hidden handle"]::after {
	top: 44%;
	right: 0;
	width: 0.2rem;
	height: 1.5rem;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.65);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18);
}

/* ---------- Стиль ---------- */

.quiz-choice__door-sample[data-variant="modern minimalism"]::before {
	inset: 0.42rem;
	border-color: rgba(255, 255, 255, 0.08);
}

.quiz-choice__door-sample[data-variant="contemporary classic"] { --leaf: #45403a; }
.quiz-choice__door-sample[data-variant="contemporary classic"]::before {
	inset: 0.42rem;
	border: 1px solid rgba(201, 164, 95, 0.5);
	box-shadow: inset 0 0 0 0.28rem rgba(0, 0, 0, 0.28), inset 0 0 0 0.3rem rgba(201, 164, 95, 0.28);
}

.quiz-choice__door-sample[data-variant="refined industrial"] { --leaf: #34383c; }
.quiz-choice__door-sample[data-variant="refined industrial"]::before {
	inset: 0.34rem;
	border: 2px solid rgba(255, 255, 255, 0.16);
	background:
		radial-gradient(circle at 0.2rem 0.2rem, rgba(255, 255, 255, 0.4) 1px, transparent 1.5px),
		radial-gradient(circle at calc(100% - 0.2rem) 0.2rem, rgba(255, 255, 255, 0.4) 1px, transparent 1.5px),
		radial-gradient(circle at 0.2rem calc(100% - 0.2rem), rgba(255, 255, 255, 0.4) 1px, transparent 1.5px),
		radial-gradient(circle at calc(100% - 0.2rem) calc(100% - 0.2rem), rgba(255, 255, 255, 0.4) 1px, transparent 1.5px);
}

/* ---------- Механика квиза: переходы и отклик ---------- */

/* Смена вопроса: содержимое въезжает, а не подменяется рывком. */
.has-motion [data-quiz-content] > * {
	animation: virtus-question-in var(--dur-slow) var(--ease-out) both;
}

@keyframes virtus-question-in {
	from { opacity: 0; transform: translateY(0.9rem); }
	to { opacity: 1; transform: none; }
}

/* Варианты появляются лесенкой — взгляд успевает пройти по ряду. */
.has-motion .quiz-choices > * {
	animation: virtus-choice-in var(--dur-slow) var(--ease-out) both;
}

.has-motion .quiz-choices > *:nth-child(1) { animation-delay: var(--dur-fast); }
.has-motion .quiz-choices > *:nth-child(2) { animation-delay: var(--dur-fast); }
.has-motion .quiz-choices > *:nth-child(3) { animation-delay: var(--dur-fast); }
.has-motion .quiz-choices > *:nth-child(4) { animation-delay: var(--dur-base); }
.has-motion .quiz-choices > *:nth-child(n+5) { animation-delay: var(--dur-base); }

@keyframes virtus-choice-in {
	from { opacity: 0; transform: translateY(0.7rem) scale(0.985); }
	to { opacity: 1; transform: none; }
}

/* Выбранный вариант отзывается заметно, но без прыжка. */
.constructor-app__layout--embedded .quiz-choice {
	transition:
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.constructor-app__layout--embedded .quiz-choice:active {
	transform: scale(0.985);
	transition-duration: var(--dur-fast);
}

.constructor-app__layout--embedded .quiz-choice:has(input:checked) {
	background: #fffdf8;
}

.constructor-app__layout--embedded .quiz-choice:has(input:checked)::after {
	animation: virtus-check-in var(--dur-slow) var(--ease-out) both;
}

@keyframes virtus-check-in {
	from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
	to { opacity: 1; transform: none; }
}

/* Полоса прогресса тянется плавно и подсвечивается на ходу. */
.quiz-progress i {
	background: linear-gradient(90deg, var(--color-accent), var(--brass-300));
	box-shadow: 0 0 0.6rem rgba(201, 148, 69, 0.5);
	transition: width 520ms var(--ease-out);
}

/* ---------- Кнопки навигации перестали обрезать текст ---------- */

.constructor-app__layout--embedded .quiz-navigation {
	grid-template-columns: auto minmax(0, 1fr);
}

.quiz-navigation .button {
	min-width: 0;
	padding-inline: 1.1rem;
	white-space: nowrap;
}

@media (max-width: 1023px) {
	.quiz-navigation .button {
		padding-inline: 0.85rem;
		font-size: var(--fs-2xs);
		letter-spacing: 0.06em;
	}
}

@media (max-width: 389px) {
	.constructor-app__layout--embedded .quiz-navigation {
		grid-template-columns: 1fr;
	}
}

/* ---------- Понятное состояние, когда генерация недоступна ---------- */

.door-summary__error {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.85rem;
	border-left: 2px solid var(--color-accent);
	background: rgba(201, 148, 69, 0.1);
	color: #e6d9c2;
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.door-summary__error:empty {
	display: none;
}

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

.constructor-app__layout--embedded .quiz-choice > span {
	/* В колоночном флексе с align-items:flex-start подпись сжимается по
	   содержимому и вылезает за плитку. Растягиваем её на всю ширину. */
	align-self: stretch;
	width: 100%;
	min-width: 0;
	/* break-word рвёт слово только когда оно физически не влезает —
	   автоматический перенос по слогам для русского даёт «ком-мерче-ского». */
	overflow-wrap: break-word;
	font-size: var(--fs-base);
	line-height: 1.34;
}

/* Подпись под превью, а не сбоку: так ей достаётся вся ширина плитки и
   длинные слова вроде «коммерческого» помещаются целиком. */
.constructor-app__layout--embedded .quiz-choice {
	align-items: flex-start;
	flex-direction: column;
	gap: 0.65rem;
}

@media (max-width: 1023px) {
	.constructor-app__layout--embedded .quiz-choice > span {
		font-size: 0.84rem;
	}
}

/* Картиночные варианты подпись накрывает снизу — там переносы тоже нужны. */
.quiz-choice--image > span {
	overflow-wrap: break-word;
}

/* Превью чуть компактнее — освобождаем место под подпись. */
.constructor-app__layout--embedded .quiz-choice__door-sample {
	width: 2.9rem;
	height: 4.1rem;
}

.constructor-app__layout--embedded .quiz-choice__door-sample[data-variant="premium commercial entrance door"],
.constructor-app__layout--embedded .quiz-choice__door-sample[data-variant="double leaf"] {
	width: 3.5rem;
}

/* ---------- Горизонтальные ленты: понятно, что дальше есть ещё ----------
   Карточка, срезанная краем экрана, читается как поломка вёрстки. Мягкое
   затухание у правого края превращает срез в приглашение прокрутить. */

.reviews-map-section .container {
	position: relative;
}

/* Затухание рисуем накладкой, а не маской: маска на прокручиваемом
   контейнере пересчитывается на каждом кадре и заметно роняет частоту. */
.reviews-map-section .container::after {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 1.1rem;
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: clamp(240px, 30vw, 300px);
	background: linear-gradient(90deg, transparent, var(--paper-200));
	content: "";
	opacity: 1;
	transition: opacity var(--dur-base) var(--ease-out);
	pointer-events: none;
}

.reviews-map-section .container:has(.reviews-slider.is-at-end)::after {
	opacity: 0;
}

/* =========================================================================
   ШАПКА С ДВЕРЬЮ НА ФОНЕ
   Дверь занимает весь первый экран и открывается за текстом по мере
   прокрутки. Прежняя двухколоночная раскладка с картинкой справа отменяется.
   ========================================================================= */

.hero--backdrop .hero-doorway {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	background: #0b0c0b;
	mask-image: none;
	/* Свой слой на GPU: прокрутка липкой шапки становится сдвигом готового
	   слоя, а не перерисовкой трёх полноэкранных картинок каждый кадр. */
	transform: translateZ(0);
	contain: paint;
}

.hero--backdrop .hero-doorway__frame {
	position: absolute;
	inset: 0;
	will-change: opacity;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
	opacity: 0;
	/* Плавность даёт скрипт, меняя opacity покадрово. Переход оставляем
	   коротким — он сглаживает шаг прокрутки, но не создаёт «резину». */
	transition: opacity 90ms linear;
	transform: none;
}

.hero--backdrop .hero-doorway__frame[data-hero-frame="0"] {
	opacity: 1;
}

/* Затемнение под текстом: без него белый заголовок не читается на светлых
   участках кадра. Слева плотнее, справа прозрачнее — дверь остаётся видна. */
.hero-doorway__scrim {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(8, 9, 8, 0.94) 0%, rgba(8, 9, 8, 0.86) 26%, rgba(8, 9, 8, 0.45) 58%, rgba(8, 9, 8, 0.3) 100%),
		linear-gradient(to bottom, rgba(8, 9, 8, 0.65) 0%, transparent 22%, transparent 72%, rgba(8, 9, 8, 0.8) 100%);
	pointer-events: none;
}

.hero--backdrop .hero-doorway__glow {
	z-index: 2;
	left: 62%;
	width: 46%;
	height: 70%;
}

/* Своя подложка секции больше не нужна — фон рисует кадр. */
.hero--backdrop {
	background: var(--ink-950);
}

.hero--backdrop::before {
	opacity: 0.35;
	mask-image: linear-gradient(100deg, var(--ink-1000), transparent 55%);
}

.hero--backdrop .hero__ambient {
	z-index: 1;
	opacity: 0.5;
}

/* Контент поверх фона, в одну колонку. */
.hero--backdrop .hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	grid-template-columns: none;
}

.hero--backdrop .hero__content {
	max-width: 34rem;
}

.hero--backdrop .hero__meta,
.hero--backdrop .hero__scroll-hint {
	z-index: 3;
}

.hero--backdrop .hero__meta {
	background: linear-gradient(transparent, rgba(8, 9, 8, 0.75));
	padding-block: 1.25rem;
}

@media (max-width: 767px) {
	/* На телефоне текста больше, поэтому затемнение плотнее по вертикали. */
	.hero-doorway__scrim {
		background:
			linear-gradient(to bottom, rgba(8, 9, 8, 0.92) 0%, rgba(8, 9, 8, 0.78) 45%, rgba(8, 9, 8, 0.5) 70%, rgba(8, 9, 8, 0.88) 100%);
	}

	.hero--backdrop .hero-doorway__frame {
		object-position: center 40%;
	}

	.hero--backdrop .hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 84svh;
		padding-block: calc(var(--header-height) + 1.5rem) 3rem;
	}

	.hero--backdrop .hero__content {
		max-width: none;
	}

	.hero--backdrop .hero__meta {
		position: static;
	}
}

/* =========================================================================
   СТРАНИЦА «НЕ НАЙДЕНО» И РЕЗУЛЬТАТЫ ПОИСКА
   ========================================================================= */

.error-page {
	display: flex;
	min-height: calc(100svh - var(--header-height) - 8rem);
	align-items: center;
	padding-block: clamp(4rem, 10vh, 8rem);
}

.error-page__inner {
	max-width: 62rem;
}

.error-page h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
}

.error-page__text {
	max-width: 34rem;
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	color: var(--color-muted);
	font-size: var(--fs-lg);
	line-height: 1.65;
}

.error-page__links {
	display: grid;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--hairline-dark);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.error-page__link {
	position: relative;
	display: flex;
	padding: 1.6rem 1.5rem 1.75rem 0;
	border-bottom: 1px solid var(--hairline-dark);
	flex-direction: column;
	gap: 0.3rem;
	transition: background-color var(--dur-base) var(--ease-out);
}

.error-page__link + .error-page__link {
	padding-left: 1.5rem;
	border-left: 1px solid var(--hairline-dark);
}

.error-page__link::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	content: "";
	transition: width var(--dur-slow) var(--ease-out);
}

.error-page__link:hover {
	background: var(--line-on-light);
}

.error-page__link:hover::before {
	width: 100%;
}

.error-page__link-number {
	color: var(--color-accent);
	font-size: var(--fs-2xs);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
}

.error-page__link strong {
	font-size: var(--fs-lg);
	font-weight: 650;
	letter-spacing: -0.015em;
}

.error-page__link span:last-child {
	color: var(--color-muted);
	font-size: var(--fs-base);
	line-height: 1.5;
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 767px) {
	.error-page__link,
	.error-page__link + .error-page__link {
		padding: 1.3rem 0 1.4rem;
		border-left: 0;
	}

	.error-page__actions .button {
		width: 100%;
	}
}

/* ---------- Результаты поиска ---------- */

.search-results {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--hairline-dark);
	list-style: none;
}

.search-result {
	border-bottom: 1px solid var(--hairline-dark);
}

.search-result a {
	display: block;
	padding: 1.6rem 0 1.75rem;
	transition: padding-left var(--dur-slow) var(--ease-out);
}

.search-result a:hover {
	padding-left: 0.9rem;
}

.search-result h2 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.2rem, 2.4vw, 1.65rem);
	font-weight: 600;
	letter-spacing: -0.022em;
}

.search-result p {
	max-width: 46rem;
	margin: 0 0 0.7rem;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.6;
}

.pagination {
	display: flex;
	margin-top: 2.5rem;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: grid;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.7rem;
	border: 1px solid var(--hairline-dark);
	font-size: var(--fs-base);
	font-variant-numeric: tabular-nums;
	place-items: center;
	transition: border-color var(--transition), background-color var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	border-color: var(--color-text);
	background: var(--color-text);
	color: var(--color-text-inverse);
}

/* ---------- Правки после сведения к токенам ---------- */

/* Кегль кнопок подтянулся к ступени шкалы, и «Продолжить →» перестало
   помещаться на планшете. Отдаём кнопке недостающие пиксели за счёт полей. */
@media (max-width: 1023px) {
	.quiz-navigation .button {
		padding-inline: 0.7rem;
		letter-spacing: 0.05em;
	}
}

/* На узком экране плитки вариантов стояли по две в ряд, и длинные слова
   вроде «коммерческого» приходилось рвать посередине. Один столбец решает
   это без уменьшения кегля. */
@media (max-width: 430px) {
	.constructor-app__layout--embedded .quiz-choices {
		grid-template-columns: 1fr;
	}

	.constructor-app__layout--embedded .quiz-choice {
		align-items: center;
		flex-direction: row;
		gap: 0.85rem;
	}

	.constructor-app__layout--embedded .quiz-choice > span {
		align-self: auto;
		width: auto;
		flex: 1 1 auto;
	}
}

/* ---------- Предложение продолжить незаконченный подбор ---------- */

.quiz-resume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
	padding: 0.95rem 1.1rem;
	border-left: 2px solid var(--color-accent);
	background: var(--paper-200);
}

.quiz-resume strong {
	display: block;
	font-size: var(--fs-md);
	font-weight: 650;
	letter-spacing: -0.014em;
}

.quiz-resume span {
	color: var(--ink-500);
	font-size: var(--fs-sm);
}

.quiz-resume__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.door-tools [data-quiz-restart] {
	color: var(--ink-400);
}

.door-tools [data-quiz-restart]:hover {
	color: var(--color-accent);
}

@media (max-width: 560px) {
	.quiz-resume {
		align-items: stretch;
		flex-direction: column;
	}

	.quiz-resume__actions {
		justify-content: space-between;
	}
}

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

.constructor-app__layout--embedded .quiz-choice--image {
	justify-content: flex-end;
}

.quiz-choice--image > span {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0.9rem 1rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* Градиент делаем плотнее и выше — подпись читается на любом кадре. */
.quiz-choice--image::before {
	inset: 45% 0 0 !important;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.88)) !important;
}

/* =========================================================================
   КОНСТРУКТОР: ПОЛНОЭКРАННЫЙ БЛОК
   Секция занимает всю ширину и всю высоту экрана. Слева вопрос, справа
   дверь — как две половины одного кадра, без общего контейнера и полей.
   ========================================================================= */

.configurator {
	position: relative;
	background: var(--paper-050);
	border-block: 1px solid var(--line-on-light);
}

.configurator__grid {
	display: grid;
	/* Ровно один экран: блок не должен вылезать за него, иначе шапка панели
	   и низ сводки оказываются за краем и до них надо доскроллить. */
	height: 100svh;
	min-height: 40rem;
	max-height: 100svh;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	/* Отменяем прежнюю раскладку внутри контейнера. */
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- Левая половина: вопрос ---------- */

.configurator__panel {
	display: flex;
	min-width: 0;
	/* Без min-height:0 и overflow:hidden колонка растёт под содержимое,
	   внутренняя прокрутка не включается, и кнопки уезжают за экран. */
	min-height: 0;
	overflow: hidden;
	padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 4vw, 4.5rem);
	background: var(--paper-050);
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(0.9rem, 2vh, 2rem);
}

.configurator__head {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.75rem;
}

.configurator__kicker {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	color: var(--ink-500);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.configurator__kicker span {
	color: var(--color-accent);
}

.configurator__title {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.038em;
	line-height: 1;
	word-spacing: 0.075em;
}

/* Вопрос занимает всё свободное место между шапкой и кнопками. */
.configurator__question {
	display: flex;
	min-height: 0;
	flex: 1 1 0;
	flex-direction: column;
	/* safe center: при центрировании во флексе с прокруткой верх содержимого
	   уезжает за край и до него нельзя доскроллить. safe отключает
	   центрирование, как только содержимое перестаёт помещаться. */
	justify-content: safe center;
	overflow-y: auto;
	padding-block: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong, rgba(20, 21, 16, 0.28)) transparent;
}

/* Запасной вариант для браузеров без safe: лучше прижать к верху, чем срезать. */
@supports not (justify-content: safe center) {
	.configurator__question {
		justify-content: flex-start;
	}
}

.configurator__foot {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.75rem;
}

/* ---------- Правая половина: дверь ---------- */

/* Флекс, а не сетка: с grid-строками низ сводки упорно вылезал за экран,
   потому что элементы сетки не сжимаются меньше содержимого. */
.configurator__stage {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 0;
	height: 100%;
	max-height: none;
	background: var(--ink-900);
	color: var(--paper-050);
	flex-direction: column;
	top: auto;
	overflow: hidden;
}

.configurator__stage .quiz-result__head {
	flex: 0 0 auto;
}

/* Дверь забирает всё свободное место, но может ужаться на низком экране. */
.configurator__stage .door-visual {
	flex: 1 1 auto;
	min-height: 8rem;
}

/* Сводка не выше половины и прокручивается внутри себя. */
.configurator__stage .door-summary {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
	max-height: 50%;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--line-on-dark-strong) transparent;
}

/* ---------- Сообщение об ошибке ---------- */

.quiz-error {
	display: none;
	margin: 0;
	padding: 0.65rem 0.85rem;
	border-left: 2px solid var(--oxide, #9b3a25);
	background: rgba(155, 58, 37, 0.08);
	color: #8e3421;
	font-size: var(--fs-sm);
	font-weight: 600;
}

.quiz-error.is-visible {
	display: block;
	animation: virtus-shake 380ms var(--ease-out);
}

@keyframes virtus-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.quiz-error.is-visible { animation: none; }
}

/* Подсветка неотвеченного вопроса. */
.quiz-choices.is-invalid .quiz-choice {
	border-color: rgba(155, 58, 37, 0.45);
}

/* ---------- Примерная стоимость ---------- */

.door-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--line-on-dark);
}

.door-price small {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--ink-400);
	font-size: var(--fs-3xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.door-price strong {
	color: var(--color-accent);
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.door-price p {
	max-width: 22rem;
	margin: 0;
	color: var(--ink-400);
	font-size: var(--fs-3xs);
	line-height: 1.5;
}

/* ---------- Планшет и телефон: дверь сверху, вопрос снизу ---------- */

@media (max-width: 1023px) {
	.configurator__grid {
		height: auto;
		min-height: 0;
		max-height: none;
		grid-template-columns: 1fr;
	}

	.configurator__stage {
		order: -1;
		height: auto;
	}

	.configurator__stage .door-visual {
		flex: 0 0 auto;
		height: clamp(18rem, 46vw, 26rem);
	}

	.configurator__stage .door-summary {
		max-height: none;
		overflow: visible;
	}

	.configurator__stage .door-summary {
		max-height: none;
	}

	.configurator__question {
		justify-content: flex-start;
		overflow: visible;
	}
}

/* Панель действий прилипает к низу прокручиваемой сводки: кнопка
   «Показать фотореалистично» — главное действие на этой половине,
   она не должна уезжать за край экрана. */

.configurator__stage .door-tools {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: 0.9rem;
	padding: 0.85rem 0 0.2rem;
	background: linear-gradient(transparent, var(--ink-900) 28%);
}

.configurator__stage .door-summary {
	padding-bottom: 0.4rem;
}

/* Строки конфигурации плотнее — так помещается больше без прокрутки. */
.configurator__stage .door-summary dl {
	gap: 0.15rem 1.1rem;
}

.configurator__stage .door-summary dt,
.configurator__stage .door-summary dd {
	font-size: var(--fs-3xs);
	line-height: 1.5;
}

/* Атрибут hidden должен побеждать любой класс с собственным display.
   Из-за этого «Попробовать ещё раз» показывалась даже когда ошибки нет. */
[hidden] {
	display: none !important;
}

/* Элементы сетки по умолчанию не сжимаются меньше содержимого (min-height:auto),
   поэтому сводка выталкивала кнопки за экран вместо того, чтобы прокручиваться. */
.configurator__stage > * {
	min-height: 0;
}

/* ---------- Низкие экраны ----------
   На ноутбуках с высотой около 700 px конструктору не хватало полусотни
   пикселей. Ужимаем поля и заголовок, а не ломаем раскладку. */

@media (min-width: 1024px) and (max-height: 780px) {
	.configurator__panel {
		padding-block: clamp(1.1rem, 2.4vh, 2rem);
		gap: 0.7rem;
	}

	.configurator__title {
		font-size: clamp(1.5rem, 2.4vw, 2rem);
	}

	.configurator__stage .door-visual {
		min-height: 6rem;
	}

	.configurator__stage .door-summary {
		max-height: 56%;
	}

	.quiz-lead-now {
		padding-block: 0.55rem;
		font-size: var(--fs-sm);
	}

	.quiz-navigation .button {
		min-height: 2.9rem;
	}
}

/* Прежняя раскладка задавала панели и сцене жёсткую минимальную высоту
   (49rem и 43rem). В полноэкранном блоке это и выталкивало низ за экран:
   колонка не могла стать ниже своего минимума. */

.configurator .constructor-app__layout--embedded .quiz-panel,
.configurator__panel {
	min-height: 0;
	height: 100%;
}

/* Прежняя сцена была липкой колонкой с собственной высотой — в новом блоке
   она должна просто занимать свою половину. */
.configurator .constructor-app__layout--embedded .quiz-result,
.configurator__stage {
	position: relative;
	min-height: 0;
	height: 100%;
	top: auto;
}

@media (max-width: 1023px) {
	.configurator .constructor-app__layout--embedded .quiz-result {
		min-height: 0;
	}
}

/* Один вопрос с картинками-вариантами (например «Какая дверь нужна», где
   часть карточек — фото, а часть — просто значок) не помещался на экран:
   заголовок вопроса, подсказка и карточки суммарно были выше видимой
   области, и приходилось прокручивать внутри одного шага квиза. Карточки
   и отступы вокруг вопроса уменьшены — сам квиз не тронут, задача та же:
   один вопрос = один экран, насколько это возможно. */

.constructor-app__layout--embedded .quiz-choice {
	min-height: 5.2rem;
}

.quiz-choice--image {
	min-height: 9rem !important;
}

.constructor-app__layout--embedded .quiz-question legend {
	margin-bottom: 0.5rem;
	font-size: clamp(1.6rem, 2.4vw, 2.5rem);
}

.quiz-question__hint {
	margin-bottom: 0.85rem;
}

.constructor-app__layout--embedded .quiz-progress {
	margin-bottom: 1.1rem;
}

.constructor-app__layout--embedded .quiz-navigation {
	margin-top: 1.4rem;
}

@media (max-width: 1023px) {
	.quiz-choice--image {
		min-height: 8rem !important;
	}
}

@media (max-width: 767px) {
	.constructor-app__layout--embedded .quiz-choice {
		min-height: 4.6rem;
	}

	.quiz-choice--image {
		min-height: 6.5rem !important;
	}

	.constructor-app__layout--embedded .quiz-question legend {
		font-size: 1.6rem;
	}

	.quiz-question__hint {
		margin-bottom: 0.65rem;
	}
}

/* Невысокие экраны телефонов (SE-подобные, ~ до 700px высоты): та же логика,
   что уже была сделана для ноутбуков с низким окном — ужимаем поля и шрифт
   заголовка вопроса, а не позволяем шагу вылезать за экран. */
@media (max-width: 767px) and (max-height: 700px) {
	.configurator__panel {
		padding-block: clamp(0.9rem, 2.2vh, 1.4rem);
		gap: 0.5rem;
	}

	.constructor-app__layout--embedded .quiz-question legend {
		font-size: 1.4rem;
	}

	.quiz-choice--image {
		min-height: 5.5rem !important;
	}
}

/* Сжатия карточек оказалось мало: при 4-6 вариантах ответа сетка в две
   колонки всё равно давала несколько строк, и чтобы увидеть и выбрать
   последний вариант, приходилось прокручивать страницу вниз прямо внутри
   одного вопроса. Пробовали и горизонтальную ленту (неочевидно листать
   мышью), и перенос строк с уменьшенными карточками (мало места по
   высоте). Вместо подбора фиксированной ширины под конкретное число
   карточек — flex:1 на каждой: сколько бы ни было вариантов (2 или 5),
   они всегда делят ширину строки поровну и остаются в одну строку без
   переноса и без скролла. min-width:0 — чтобы flex реально ужимал
   карточки, а не упирался в их содержимое. */
.constructor-app__layout--embedded .quiz-choices {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.65rem;
}

.constructor-app__layout--embedded .quiz-choice,
.constructor-app__layout--embedded .quiz-custom-color,
.constructor-app__layout--embedded .quiz-choice--image {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.constructor-app__layout--embedded .quiz-choice--image {
	/* !important — в файле несколько старых правил .quiz-choice--image
	   с !important (12.5rem и другие). */
	min-height: 8rem !important;
}

/* Расширенные списки (цвет/отделка/стекло/ручка теперь до 6-8 вариантов)
   в одну строку поровну уже не делятся читаемо — при 8 карточках flex:1
   давал бы ~2rem на карточку. Вместо этого переносим на несколько строк
   с комфортной фиксированной шириной: JS добавляет этот класс, когда
   вариантов больше 5 (см. renderStage в constructor.js). */
.constructor-app__layout--embedded .quiz-choices.quiz-choices--wrap {
	flex-wrap: wrap;
}

.constructor-app__layout--embedded .quiz-choices.quiz-choices--wrap .quiz-choice,
.constructor-app__layout--embedded .quiz-choices.quiz-choices--wrap .quiz-choice--image {
	flex: 0 1 calc(33.333% - 0.45rem);
	width: auto;
	min-width: 8rem;
}

/* Свотчи цвета — компактные (кружок + подпись, без фото), поэтому в ряд
   помещается больше: 4 вместо 3. */
.constructor-app__layout--embedded .quiz-choices.quiz-choices--wrap .quiz-choice--swatch {
	flex-basis: calc(25% - 0.5rem);
	min-width: 6rem;
}

/* Длинные подписи («Подъездная», «Максимальная») при пяти карточках в
   ряд всё ещё довольно узкие — чуть меньший шрифт держит их в 1-2 слова
   без разрыва посередине (overflow-wrap:break-word уже настроен на
   .quiz-choice--image>span). */
.constructor-app__layout--embedded .quiz-choice > span {
	font-size: var(--fs-sm);
	line-height: 1.25;
}

/* "Свой оттенок" в исходном виде (padding под кружок и код цвета справа,
   плюс поясняющая строка) не сжимается вместе с остальными карточками
   при пяти вариантах в ряд — текст не помещается. Прячем поясняющую
   строку (кружок + подпись понятны и без неё) и переносим код цвета под
   подпись вместо жёсткой привязки к правому краю. */
.constructor-app__layout--embedded .quiz-custom-color {
	min-height: 8rem;
	padding: 0.75rem 0.75rem 0.75rem 2.75rem;
}

.constructor-app__layout--embedded .quiz-custom-color::before {
	width: 1.6rem;
	height: 1.6rem;
	left: 0.75rem;
}

.constructor-app__layout--embedded .quiz-custom-color small {
	display: none;
}

.constructor-app__layout--embedded .quiz-custom-color strong {
	font-size: 0.82rem;
}

.constructor-app__layout--embedded .quiz-custom-color output {
	position: static;
	display: block;
	margin-top: 0.25rem;
}

@media (max-width: 767px) {
	/* На десктопе flex:1 честно делит строку поровну между карточками —
	   при 4 фото-карточках по ~110px это красиво. На узком экране (390px)
	   та же арифметика на 5 вариантов даёт по 76px на карточку — уже
	   нечитаемо. "Свой оттенок" при этом не может ужаться настолько же
	   (внутри дырка под кружок + текст с минимальной шириной), забирает
	   себе больше своей доли — и весь ряд вылезает за экран пошире.
	   На мобильном странице и так можно расти под контент (overflow:visible
	   у .configurator__question) — возвращаем перенос на новую строку
	   с комфортным фиксированным размером карточек вместо жёсткого
	   деления на одну строку. */
	.constructor-app__layout--embedded .quiz-choices {
		flex-wrap: wrap;
	}

	.constructor-app__layout--embedded .quiz-choice,
	.constructor-app__layout--embedded .quiz-custom-color,
	.constructor-app__layout--embedded .quiz-choice--image {
		flex: 0 0 auto;
		width: calc(50% - 0.325rem);
	}

	.constructor-app__layout--embedded .quiz-choice--image {
		min-height: 7rem !important;
	}

	.constructor-app__layout--embedded .quiz-custom-color {
		min-height: 7rem;
	}
}

/* =========================================================================
   ЦИФРЫ О ПРОИЗВОДСТВЕ
   Конкретные числа сразу после первого экрана: сколько дверей, сколько лет,
   куда возят, какую высоту делают. Это то, что проверяют перед звонком.
   ========================================================================= */

.facts {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background: var(--ink-900);
	color: var(--paper-050);
}

.facts__list {
	display: grid;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--line-on-dark);
	border: 1px solid var(--line-on-dark);
	list-style: none;
}

.facts__list li {
	display: flex;
	padding: 1.5rem 1.6rem 1.7rem;
	background: var(--ink-900);
	flex-direction: column;
	gap: 0.4rem;
	transition: background-color var(--dur-slow) var(--ease-out);
}

.facts__list li:hover {
	background: var(--ink-850);
}

.facts__list strong {
	color: var(--color-accent);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 1;
}

.facts__list span {
	max-width: 16ch;
	color: var(--ink-300);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

@media (max-width: 560px) {
	.facts__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.facts__list li {
		padding: 1.1rem 1.1rem 1.25rem;
	}
}

/* ---------- Превью новых товарных линеек ---------- */

/* Нестандартная высокая: вытянутая, с фрамугой сверху. */
.quiz-choice__door-sample[data-variant="oversized entrance door up to three meters tall"] {
	height: 5.4rem;
}

.quiz-choice__door-sample[data-variant="oversized entrance door up to three meters tall"]::before {
	inset: 0.3rem;
	border-top: 0.55rem solid rgba(255, 255, 255, 0.1);
}

/* Подъездная: широкая, с панелью домофона. */
.quiz-choice__door-sample[data-variant="apartment building entrance door"] {
	--leaf: #4a4f52;
	width: 3.4rem;
}

.quiz-choice__door-sample[data-variant="apartment building entrance door"]::after {
	top: 38%;
	right: 0.22rem;
	width: 0.42rem;
	height: 0.7rem;
	border-radius: 0.06rem;
	background: #1b1c1e;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Техническая: простая, без филёнки, серая. */
.quiz-choice__door-sample[data-variant="technical utility steel door"] {
	--leaf: #6b6f6d;
	--frame: #4a4d4b;
	width: 2.7rem;
	background: linear-gradient(118deg, #757978, #5c605e);
}

.quiz-choice__door-sample[data-variant="technical utility steel door"]::before {
	inset: 0.25rem;
	border-color: rgba(0, 0, 0, 0.18);
}

/* Противопожарная: красный корпус и полоса-антипаника. */
.quiz-choice__door-sample[data-variant="certified fire rated steel door"] {
	--leaf: #8f3a2c;
	--frame: #5d281f;
	width: 3rem;
	background: linear-gradient(118deg, #9c4234, #6f2c21);
}

.quiz-choice__door-sample[data-variant="certified fire rated steel door"]::after {
	top: 48%;
	right: 0.25rem;
	left: 0.25rem;
	width: auto;
	height: 0.16rem;
	border-radius: 0.06rem;
	background: #d8d5ce;
}

/* =========================================================================
   ЧИТАЕМОСТЬ НА СВЕТЛОМ ФОНЕ
   Приглушённый серый и латунь задумывались для тёмных секций, где они
   читаются отлично. На белых карточках те же цвета давали 2,1–2,7 к 1
   при норме 4,5 — мелкий текст сливался с фоном.
   Значения подобраны расчётом контраста, а не на глаз.
   ========================================================================= */

:root {
	/* Приглушённый текст на светлой поверхности. Значение подобрано так,
	   чтобы проходить норму на всех четырёх светлых фонах сайта: белой
	   карточке, панели квиза, светлой секции и подложке формы. */
	--ink-muted-on-light: #616359;
	/* Латунь для текста на светлом: обычная слишком светлая. */
	--brass-on-light: #7f5d20;
}

/* Карточка проекта: город, цена, характеристики. */
.project-card__meta,
.project-card__details,
.project-card__city {
	color: var(--ink-muted-on-light);
}

.project-card__category {
	color: var(--brass-on-light);
}

/* Подписи и примечания секций на светлых полосах. */
.page-surface .section-kicker,
.featured-projects .section-kicker,
.reviews-map-section .section-kicker,
.home-configurator .section-kicker,
.section-header__note,
.section-description {
	color: var(--ink-muted-on-light);
}

.page-surface .section-kicker span,
.featured-projects .section-kicker span,
.reviews-map-section .section-kicker span,
.home-configurator .section-kicker span {
	color: var(--brass-on-light);
}

/* Карточка отзыва. */
.review-card__city {
	color: var(--ink-muted-on-light);
}

.review-card__rating {
	color: var(--brass-on-light);
}

/* Панель конструктора. */
.configurator__kicker,
.quiz-question__hint,
.quiz-lead-now {
	color: var(--ink-muted-on-light);
}

.configurator__kicker span {
	color: var(--brass-on-light);
}

.quiz-question-number {
	color: var(--ink-muted-on-light);
}

.door-summary__error,
.error-page__link span:last-child,
.search-result p {
	color: var(--ink-muted-on-light);
}

/* Ссылка «Смотреть проект» и стрелка на карточке. */
.project-card .text-link {
	color: var(--ink-850);
}

/* Стрелка в углу картинки: белая на тёмной подложке, а не полупрозрачная. */
.project-card__arrow {
	background: rgba(11, 12, 10, 0.72);
	color: var(--paper-000);
}

/* Оставшиеся места, где приглушённый серый стоит на светлом фоне. */

.contacts__details dt,
.project-specs dt,
.project-summary__city,
.checkbox,
.checkbox span,
.quiz-progress > span,
.door-summary small {
	color: var(--ink-muted-on-light);
}

/* Сводка конструктора живёт на тёмной подложке — там прежний серый уместен. */
.configurator__stage .door-summary small,
.configurator__stage .door-summary dt {
	color: var(--ink-400);
}

/* Стрелка в углу карточки проекта. */
.project-card__media > span:last-child,
.project-card__media::after {
	color: var(--paper-000);
}

/* Стрелка на карточке проекта была почти невидима: тёмный знак на тёмной
   подложке давала 1,1 к 1. И подпись прогресса не добирала до нормы. */

a.project-card__media {
	color: var(--paper-000);
}

.quiz-progress > span,
.constructor-app__layout--embedded .quiz-progress > span,
.configurator__panel .quiz-progress > span {
	color: var(--ink-muted-on-light);
}

/* ---------- Экран результата конструктора ---------- */

.quiz-done {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	animation: virtus-question-in 520ms var(--ease-out) both;
}

.quiz-done__kicker {
	margin: 0;
	color: var(--brass-on-light);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.quiz-done h3 {
	margin: 0;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.quiz-done__text {
	max-width: 34ch;
	margin: 0;
	color: var(--ink-muted-on-light);
	font-size: var(--fs-md);
	line-height: 1.6;
}

.quiz-done__price {
	margin: 0.2rem 0 0;
	color: var(--brass-on-light);
	font-size: 1.45rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.quiz-done__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem 1.4rem;
	margin-top: 0.5rem;
}

.quiz-done__hint {
	margin: 0;
	color: var(--ink-muted-on-light);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

@media (max-width: 560px) {
	.quiz-done__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.quiz-done__actions .button {
		width: 100%;
	}
}

/* =========================================================================
   ПРИЛИПАНИЕ К БЛОКАМ ПРИ ПРОКРУТКЕ
   Страница мягко «доводит» себя до начала следующей секции, вместо того
   чтобы замирать на полпути между блоками.

   Режим proximity, а не mandatory: жёсткое прилипание перехватывает
   управление и не даёт остановиться посреди длинной секции — например
   в каталоге или в списке отзывов. Proximity срабатывает, только когда
   вы и так почти на границе.
   ========================================================================= */

@media (pointer: fine) and (min-width: 1024px) {
	html {
		scroll-snap-type: y proximity;
		/* Шапка перекрывает верх секции — сдвигаем точку прилипания. */
		scroll-padding-top: 0;
	}

	.hero-stage,
	.facts,
	.configurator,
	.featured-projects,
	.reviews-map-section,
	.work-steps,
	.final-cta,
	.page-hero,
	.error-page {
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	/* Секции выше экрана прилипают верхом и отпускают дальше свободно. */
	.site-footer {
		scroll-snap-align: end;
	}
}

/* При включённом «уменьшить движение» никакого доведения. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-snap-type: none;
	}
}

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

@media (max-width: 1023px) {
	.featured-projects .container,
	.projects-archive .container {
		position: relative;
	}

	.projects-grid {
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--page-padding);
		scrollbar-width: thin;
		scrollbar-color: var(--line-strong, rgba(20, 21, 16, 0.28)) transparent;
	}

	.projects-grid > * {
		scroll-snap-align: start;
	}

	/* Мягкий край: видно, что лента продолжается. */
	.featured-projects .container::after {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		width: clamp(1.25rem, 5vw, 2.5rem);
		height: 100%;
		background: linear-gradient(90deg, transparent, var(--paper-100));
		content: "";
		pointer-events: none;
	}

	.projects-grid::-webkit-scrollbar {
		height: 4px;
	}

	.projects-grid::-webkit-scrollbar-thumb {
		background: var(--line-strong, rgba(20, 21, 16, 0.28));
	}
}

/* Подпись-подсказка под лентой: без неё жест неочевиден. */
@media (max-width: 767px) {
	.projects-grid + .featured-projects__footer::before,
	.projects-grid ~ .featured-projects__footer::before {
		display: block;
		margin-bottom: 0.9rem;
		color: var(--ink-muted-on-light);
		content: "Листайте вбок, чтобы увидеть остальные проекты";
		font-size: var(--fs-sm);
	}
}

/* Подсказка и кнопка каталога встали в строку и жались друг к другу. */
@media (max-width: 767px) {
	.featured-projects__footer {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 0.2rem;
	}

	.featured-projects__footer .button {
		width: 100%;
	}
}

/* Активировали найденный, но не подключённый компактный hero конструктора
   (не хватало класса .constructor-page на странице) — стало ниже, но
   max-width:11ch оказался слишком узким именно для текста "AI-конструктор
   двери": слово ломалось некрасиво, "AI-" повисало отдельной строкой.
   Расширяем, чтобы "AI-конструктор" помещалось целиком на одной строке. */
.constructor-page .page-hero h1 {
	max-width: 17ch;
}

.constructor-page .page-hero__text {
	margin-top: 0.85rem;
}

/* ---------- Финальный экран квиза: только фото и цена ---------- */
/* На "Нравится результат?" список характеристик и кнопки
   "Отменить выбор"/"Начать заново"/"Показать фотореалистично" избыточны —
   решение уже принято, фото уже показано. Оставляем только цену. */
[data-constructor-app].is-quiz-done .door-summary__heading,
[data-constructor-app].is-quiz-done .door-summary dl,
[data-constructor-app].is-quiz-done .door-tools,
[data-constructor-app].is-quiz-done .door-history,
[data-constructor-app].is-quiz-done .door-summary__error,
[data-constructor-app].is-quiz-done [data-ai-retry] {
	display: none;
}

/* ---------- 3D-предпросмотр двери (door3d.js) ---------- */
.door-3d {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.door-3d canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.door-3d.is-ready {
	opacity: 1;
}

.door-3d.is-ready ~ .door-scene {
	display: none;
}

/* =========================================================================
   Полная переработка UI/UX квиза (17.08, второй запрос пользователя):
   3D-конфигуратор и любой предпросмотр двери во время квиза убраны
   целиком — во время вопросов дверь не показывается вообще. Никакого
   горизонтального скролла: варианты — сеткой карточек 3-4 колонки,
   у каждой обязательно есть визуал (см. buildCardArt() в constructor.js).
   Дверь показывается один раз, как финальное фото ИИ, на экране .qresult.
   ========================================================================= */

.configurator--quiz-only {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	background: var(--paper-100);
}
/* Переработка 17.08 (третий запрос — "всё в одной плоскости, не листать
   вверх-вниз"): раньше .quiz-shell был просто узкой колонкой (46rem) без
   ограничения по высоте — при большом количестве вариантов страница росла
   вниз, а между вопросами разной "высоты" scroll-позиция плыла (то выше,
   то ниже). Теперь .quiz-shell — панель ВЫСОТОЙ ПОД ЭКРАН: заголовок и
   футер зафиксированы, скроллится (если вообще нужно) только
   .quiz-shell__body — переход между вопросами никогда не требует скролла
   страницы. Шире (60rem вместо 46rem) — меньше пустого места по бокам.
*/
.quiz-shell {
	/* Шестой раунд фидбека 17.08: "справа и снизу огромное пустое
	   пространство" — фиксированные 82rem/54rem были меньше реального
	   вьюпорта почти на любом мониторе. Панель больше не зажата
	   произвольным потолком — использует весь вьюпорт за вычетом отступа
	   по краям, а не долю от --container-width (та переменная думалась под
	   текстовый контент сайта, а не под полноэкранный квиз). */
	width: calc(100% - (2 * var(--page-padding)));
	max-height: calc(100vh - 1.5rem);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
.quiz-shell__head { flex: 0 0 auto; display: flex; flex-direction: column; gap: .25rem; }
.quiz-shell__head .configurator__kicker { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--color-accent); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.quiz-shell__head .configurator__kicker span { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--color-accent); border-radius: 50%; font-size: .6rem; }
.quiz-shell__head .configurator__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.quiz-shell__head .quiz-progress { margin-bottom: 0; }
/* margin-bottom переопределяет 2.6rem из общего .quiz-stage-caption
   (нашёл при разборе перепол­нения) — та величина думалась под другую,
   не полноэкранную раскладку и тут просто съедала высоту без пользы. */
.quiz-stage-caption { margin-top: .5rem; margin-bottom: .35rem; color: var(--ink-500); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; }

/* Единственная скроллящаяся зона внутри фиксированной по высоте панели —
   если у вопроса много вариантов, скроллится сам блок вопроса, а не вся
   страница; заголовок/прогресс/футер остаются на месте между вопросами. */
.quiz-shell__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: .35rem;
	margin-right: -.35rem;
}
.quiz-shell__body .quiz-question { border-top: 0; padding-top: 0; }
.quiz-shell__body .quiz-question legend { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.22; }
.quiz-shell__body .quiz-question__hint { margin-top: .4rem; color: var(--ink-500); }

/* Плавный переход между вопросами — короткий fade+slide (renderStage()
   переключает класс на каждый рендер, см. constructor.js). */
.quiz-shell__body { opacity: 0; transform: translateY(6px); transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); }
.quiz-shell__body.is-entering { opacity: 1; transform: translateY(0); }

/* --- Сетка карточек: без горизонтального И без вертикального скролла ---
   Шестой раунд (17.08): вместо auto-fill по минимальной ширине карточки —
   явное число колонок под ТОЧНОЕ число вариантов вопроса, подобранное так,
   чтобы всё помещалось строго в 1-2 ряда (для 8 вариантов на desktop —
   ровно 4×2, как в референсе пользователя). Правило простое и одно и то же
   на каждом брейкпоинте: пока вариантов не больше "потолка колонок" этого
   экрана — один ряд (colspan = число вариантов); больше — делим на
   МИНИМАЛЬНОЕ число рядов, при котором строки остаются заполненными
   (2 ряда почти всегда достаточно вплоть до ~14 вариантов). */
.qcard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: .6rem;
	margin-top: .65rem;
}
.qcard {
	position: relative;
	/* 7/4, не 4/3 — при фикс. aspect-ratio высота карточки растёт вместе с
	   шириной (которая теперь не зажата --container-width, см. .quiz-shell
	   выше), а на 2 ряда (7-14 вариантов) высоты вьюпорта не хватало даже
	   на обычных ноутбучных экранах (проверено на 1280×800). Более широкий
	   кроп даёт запас по вертикали без скролла; фото всё ещё узнаётся как
	   дверь (object-fit: cover, кадр остаётся по центру объекта). */
	aspect-ratio: 7 / 4;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink-900);
	cursor: pointer;
	box-shadow: 0 .3rem .9rem rgba(10, 9, 6, .1);
	transition: transform var(--transition), box-shadow var(--transition);
}
.qcard:hover { transform: translateY(-3px); box-shadow: 0 .7rem 1.5rem rgba(10, 9, 6, .16); }
.qcard__input { position: absolute; opacity: 0; pointer-events: none; }
/* Раунд правок 18.08: тонкая 2px обводка терялась на фото с похожим по
   тону краем — пользователь не мог понять, выбран вариант или нет. Кольцо
   толще + читаемый бейдж-галочка поверх фото (как в референсе с самого
   начала), а не только обводка по краю карточки. */
.qcard:has(.qcard__input:checked) { box-shadow: 0 0 0 3px var(--color-accent), 0 .5rem 1.3rem rgba(10, 9, 6, .4); }
.qcard:has(.qcard__input:checked)::after {
	content: "✓";
	position: absolute;
	top: .55rem;
	right: .55rem;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--ink-950);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 .15rem .4rem rgba(10, 9, 6, .45);
	z-index: 2;
}
.qcard:has(.qcard__input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Карточка = фото на всю площадь, БЕЗ отдельного визуала-заглушки под
   ним — по прямой просьбе пользователя убрать любую абстрактную графику
   (см. buildCardArt() в constructor.js, шестой раунд правок 17.08).
   Пока для варианта ещё нет сгенерированного фото — просто нейтральная
   тёмная заливка, ни одной декоративной линии/фигуры. */
.qcard__art { position: absolute; inset: 0; background: var(--ink-900); }
.qcard__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Текст — не отдельным блоком под фото, а поверх него, на затемнении снизу
   (ровно как в референсе: фото + затемнение + подпись поверх). */
.qcard__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1rem 1.05rem 1.05rem;
	background: linear-gradient(to top, rgba(8, 7, 5, .92) 0%, rgba(8, 7, 5, .68) 45%, rgba(8, 7, 5, 0) 100%);
	pointer-events: none;
}
.qcard__title { color: var(--paper-050); font-size: .9rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.qcard__caption { color: var(--ink-250); font-size: var(--fs-2xs); }

/* "Свой оттенок" — служебный пикер точного цвета, не вариант ответа с
   фото; сохраняет прежнюю компактную горизонтальную раскладку. */
.qcard--custom-color { aspect-ratio: auto; flex-direction: row; align-items: center; grid-column: span 1; display: flex; }
.qcard--custom-color .qcard__art { position: static; flex: 0 0 4.5rem; aspect-ratio: 1; }
.qcard--custom-color input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.qcard--custom-color .qcard__body { position: static; flex: 1; background: var(--ink-850); pointer-events: auto; }

.quiz-shell__foot { display: flex; flex-direction: column; gap: 1rem; }
.quiz-shell__foot-links { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

@media (max-width: 640px) {
	.qcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quiz-shell__foot-links { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 900px) {
	.qcard-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* Мало вариантов — не растягиваем на всю ширину непропорционально
	   широкими карточками, держим их у естественного размера (1 ряд). */
	.qcard-grid:has(.qcard:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	/* Больше 6 — делим на 2 ровных ряда вместо переполнения последнего. */
	.qcard-grid:has(.qcard:nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(9):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(11):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(12):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.qcard-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* 8 вариантов на desktop — ровно 4×2, по прямой просьбе пользователя. */
	.qcard-grid:has(.qcard:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(9):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(11):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(12):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(13):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.qcard-grid:has(.qcard:nth-child(14):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* --- Экран результата (.qresult) — единственный момент, когда дверь
   реально показывается, финальное фото от ИИ на весь экран. --- */
.qresult { display: flex; flex-direction: column; gap: 1.5rem; min-height: 22rem; }
.qresult__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 22rem; color: var(--ink-500); font-size: var(--fs-sm); text-align: center; }
.qresult__loading i { width: 2.25rem; height: 2.25rem; border: 2px solid var(--line-on-light); border-top-color: var(--color-accent); border-radius: 50%; animation: qresult-spin 1s linear infinite; }
@keyframes qresult-spin { to { transform: rotate(360deg); } }
.qresult.is-ready { gap: 1.75rem; }
.qresult__image { width: 100%; border-radius: var(--radius); object-fit: contain; background: var(--ink-900); }
.qresult__panel { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.qresult__title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.qresult__subtitle { margin: 0; max-width: 30rem; color: var(--ink-500); }
.qresult__price { margin: 0; font-weight: 700; color: var(--color-accent); }
.qresult__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }
.qresult.is-failed { align-items: center; justify-content: center; gap: 1rem; min-height: 22rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.quiz-shell__body, .qcard { transition: none; }
	.qresult__loading i { animation-duration: 2s; }
}

/* Экран результата (.is-quiz-done) — прогресс/подпись этапа и футер-ссылки
   квиза больше не нужны, у .qresult свои заголовок/кнопки. */
[data-constructor-app].is-quiz-done .quiz-progress,
[data-constructor-app].is-quiz-done .quiz-stage-caption,
[data-constructor-app].is-quiz-done .quiz-shell__foot {
	display: none;
}

/* Мягкое затухание внизу скроллящейся зоны вопроса — сигнал "здесь есть
   ещё варианты, докрутите", а не грубый обрез контента. Пропадает, когда
   докрутили до конца (has-more снимается в JS по scroll-событию). */
.quiz-shell__body.has-more { mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent 100%); }