/* ==========================================================================
   Дикий Угол — базовые переменные и сброс
   ========================================================================== */
:root {
	--du-cream: #F6F0E6;
	--du-cream-alt: #EFE6D4;
	--du-green-dark: #22301C;
	--du-green-darker: #182212;
	--du-brown: #4A2E16;
	--du-brown-light: #6B4626;
	--du-gold: #BE8735;
	--du-gold-dark: #9C6E28;
	--du-text: #2B2620;
	--du-text-light: #6B6355;
	--du-white: #FFFFFF;
	--du-border: rgba(43, 38, 32, 0.12);
	--du-radius: 8px;
	--du-shadow: 0 12px 32px rgba(34, 26, 14, 0.10);
	--du-container: 1200px;
	--du-font: 'Golos Text', 'Segoe UI', Arial, sans-serif;
	/* На просмотр по вашей просьбе — Roboto Slab вместо Playfair Display.
	   Чтобы вернуть Playfair: раскомментируйте нижнюю строку и закомментируйте верхнюю. */
	--du-font-head: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	/* --du-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; */
	--du-ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--du-font);
	color: var(--du-text);
	background: var(--du-cream);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--du-font-head); margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.du-container {
	max-width: var(--du-container);
	margin: 0 auto;
	padding: 0 24px;
}

.du-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 700;
	font-size: 15px;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	cursor: pointer;
}
.du-btn--gold {
	background: var(--du-gold);
	color: var(--du-white);
}
.du-btn--gold:hover { background: var(--du-gold-dark); transform: translateY(-1px); }
.du-btn--outline {
	background: transparent;
	border-color: rgba(255,255,255,.5);
	color: var(--du-white);
}
.du-btn--outline:hover { background: rgba(255,255,255,.12); }
.du-btn--dark {
	background: var(--du-green-dark);
	color: var(--du-white);
}
.du-btn--dark:hover { background: var(--du-green-darker); }
.du-btn--sm { padding: 10px 20px; font-size: 14px; }
.du-btn--xs { padding: 9px 14px; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
.du-btn--block { width: 100%; }

.du-section { padding: 44px 0; }
.du-section--alt { background: var(--du-cream-alt); }
.du-section__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	font-weight: 700;
	color: var(--du-gold-dark);
	margin-bottom: 10px;
}
.du-section__title {
	font-size: clamp(28px, 3.4vw, 42px);
	text-align: center;
	margin-bottom: 8px;
}
.du-section__lead {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 22px;
	color: var(--du-text-light);
	font-size: 17px;
}

/* ==========================================================================
   Хедер
   ========================================================================== */
.du-header {
	background: var(--du-cream);
	border-bottom: 1px solid var(--du-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.du-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: nowrap;
}
.du-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.du-logo__mark { display: block; height: 36px; width: auto; }
.du-logo__title { display: block; font-family: var(--du-font-head); font-weight: 700; font-size: 19px; color: var(--du-green-dark); letter-spacing: .02em; }
.du-logo__sub { display: block; font-size: 11px; color: var(--du-text-light); text-transform: uppercase; letter-spacing: .06em; }

.du-header__trust {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: var(--du-text-light);
	white-space: nowrap;
	padding-left: 24px;
	border-left: 1px solid var(--du-border);
	flex-shrink: 0;
	margin-right: auto;
}

.du-header__contact { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; text-align: right; }
.du-header__phone { font-weight: 700; font-size: 15px; white-space: nowrap; }
.du-header__callback { font-size: 12px; font-weight: 700; color: var(--du-gold-dark); white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.du-header__callback:hover { color: var(--du-gold); }

.du-header__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.du-header__cta { white-space: nowrap; padding: 12px 22px; }

.du-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px; flex-shrink: 0; }
.du-burger span { width: 24px; height: 2px; background: var(--du-green-dark); display: block; }

.du-nav { border-top: 1px solid var(--du-border); }
.du-nav__inner { display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.du-nav__list { display: flex; gap: 28px; flex-wrap: wrap; }
.du-nav__list a { font-size: 14.5px; font-weight: 600; color: var(--du-text); white-space: nowrap; }
.du-nav__list a:hover { color: var(--du-gold-dark); }
.du-nav__cta { display: none; }
.du-nav__tg { display: none; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; color: var(--du-text-light); }
.du-nav__tg:hover { color: var(--du-gold-dark); }

.du-nav__item--has-children { position: relative; display: flex; align-items: center; }
.du-nav__caret { display: none; }
.du-nav__submenu {
	position: absolute; top: 100%; left: 0; min-width: 15.5rem;
	background: var(--du-white); border-radius: var(--du-radius); box-shadow: var(--du-shadow);
	padding: .5rem; padding-top: .625rem;
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(.25rem);
	transition: opacity .25s var(--du-ease), transform .25s var(--du-ease), visibility .25s;
	z-index: 40;
}
.du-nav__item--has-children:hover .du-nav__submenu,
.du-nav__item--has-children:focus-within .du-nav__submenu {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.du-nav__submenu li a { display: block; padding: .625rem .75rem; border-radius: 6px; font-size: 14px; }
.du-nav__submenu li a:hover { background: var(--du-cream-alt); color: var(--du-gold-dark); }
.du-nav__submenu a::after { content: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.du-hero {
	position: relative;
	min-height: 740px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--du-green-darker) 0%, var(--du-brown) 60%, var(--du-brown-light) 100%);
	color: var(--du-white);
}
.du-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	z-index: 0;
}
/* Затемнение слева-направо под текстом, чтобы заголовок не сливался с фото -
   не трогает правую половину, где на фото сам дом. */
.du-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to right, rgba(10, 14, 8, .68) 0%, rgba(10, 14, 8, .42) 40%, rgba(10, 14, 8, 0) 72%);
	pointer-events: none;
}
.du-hero__inner {
	position: relative;
	z-index: 2;
	padding: 64px 24px 56px;
	max-width: 50%;
}
.du-hero__title {
	font-family: var(--du-font);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	margin-bottom: 18px;
}
.du-hero__title em {
	font-style: normal;
	color: var(--du-gold);
}
.du-hero__lead {
	font-size: 18px;
	color: rgba(255,255,255,.88);
	max-width: 560px;
	margin-bottom: 30px;
}
.du-hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.du-hero__video-btn { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--du-white); font-weight: 600; }
.du-hero__video-icon {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.7);
	display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   Цифры доверия
   ========================================================================== */
.du-trust {
	background: var(--du-brown) url('../img/wood-panel.webp') center/cover;
	color: var(--du-cream);
}
.du-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 2rem;
	padding: 28px 0;
}
.du-trust__item { display: flex; align-items: center; gap: 12px; }
.du-trust__icon { flex-shrink: 0; color: var(--du-gold); }
.du-trust__value { display: block; font-family: var(--du-font-head); font-weight: 700; font-size: 20px; }
.du-trust__label { display: block; font-size: 13px; color: rgba(246,240,230,.75); }

/* ==========================================================================
   Карточки (грид) — переиспользуется в «Чем отличаемся», услугах и т.д.
   ========================================================================== */
.du-grid {
	display: grid;
	gap: 24px;
}
.du-grid--5 { grid-template-columns: repeat(5, 1fr); }
.du-grid--4 { grid-template-columns: repeat(4, 1fr); }
.du-grid--3 { grid-template-columns: repeat(3, 1fr); }
.du-grid--2 { grid-template-columns: repeat(2, 1fr); }

.du-section--branches { position: relative; overflow: hidden; }
.du-section--branches > .du-container { position: relative; z-index: 1; }
.du-branch {
	position: absolute;
	top: -20px;
	width: 220px;
	height: auto;
	pointer-events: none;
	opacity: .85;
	z-index: 0;
}
.du-branch--left { left: 0; }
.du-branch--right { right: 0; }
@media (max-width: 1500px) {
	.du-branch--left { transform: translateX(-50%); }
	.du-branch--right { transform: translateX(50%); }
}
@media (max-width: 860px) {
	.du-branch { width: 160px; }
}

.du-divider {
	width: 64px;
	height: 1px;
	background: var(--du-gold);
	margin: 0 auto 26px;
	position: relative;
}
.du-divider::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--du-gold);
	transform: translate(-50%, -50%);
}

.du-grid--divided .du-feature-card {
	position: relative;
}
.du-grid--divided .du-feature-card:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: var(--du-border);
}

.du-feature-card {
	text-align: center;
	padding: 8px;
}
.du-feature-card__icon {
	height: 64px;
	margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
	color: var(--du-brown);
}
.du-feature-card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: var(--du-font); }
.du-feature-card__desc { font-size: 14.5px; color: var(--du-text-light); }

/* Карточка услуги — ссылка на свою страницу (issue #25), поэтому display:
   block: <a> по умолчанию строчный, и без этого карточка развалилась бы. */
.du-service-card {
	display: block;
	color: inherit;
	background: var(--du-cream);
	border-radius: var(--du-radius);
	overflow: hidden;
	box-shadow: var(--du-shadow);
}
.du-service-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--du-cream-alt); }
.du-service-card__img img { width: 100%; height: 100%; object-fit: cover; }
.du-service-card__body { padding: 18px 20px 22px; }
.du-service-card__title { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; font-family: var(--du-font); text-transform: uppercase; letter-spacing: .02em; }
.du-service-card__desc { font-size: 14px; color: var(--du-text-light); margin: 0; }

/* ==========================================================================
   Калькуляторы
   ========================================================================== */
.du-calc-section {
	background: var(--du-brown) url('../img/wood-panel2.webp') center/cover;
	color: var(--du-cream);
}
.du-calc-section .du-section__title,
.du-calc-section .du-section__lead { color: var(--du-cream); }
.du-calc-card {
	background: var(--du-cream);
	color: var(--du-text);
	border-radius: var(--du-radius);
	padding: 26px 22px;
	text-align: center;
	box-shadow: var(--du-shadow);
}
.du-calc-card__icon {
	width: 76px; height: 76px; margin: 0 auto 16px;
	color: var(--du-gold-dark);
	display: flex; align-items: center; justify-content: center;
}
.du-calc-section .du-grid--4 { gap: 40px; }
.du-calc-card__title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.du-calc-card__desc { font-size: 13.5px; color: var(--du-text-light); margin-bottom: 18px; min-height: 42px; }
.du-calc-note { text-align: center; margin-top: 28px; font-size: 14px; color: rgba(246,240,230,.85); }

.du-calc {
	background: var(--du-cream); color: var(--du-text); border-radius: var(--du-radius);
	box-shadow: var(--du-shadow); overflow: hidden;
}
.du-calc__tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
.du-calc__tab {
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	padding: 1.25rem .5rem; background: var(--du-cream-alt); color: var(--du-text-light);
	border-right: 1px solid var(--du-border); border-bottom: 3px solid transparent;
	font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.du-calc__tab:last-child { border-right: 0; }
.du-calc__tab.is-active { background: var(--du-cream); color: var(--du-text); border-bottom-color: var(--du-gold); }
.du-calc__tab svg, .du-calc__tab img { color: var(--du-gold-dark); }
.du-calc__body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; }
.du-calc__inputs { padding: 2rem; }
.du-calc__panel { display: none; flex-direction: column; gap: 1.5rem; }
.du-calc__panel.is-active { display: flex; }
.du-calc__field { display: flex; flex-direction: column; gap: .625rem; }
.du-calc__field-label { font-size: .9375rem; font-weight: 600; }
.du-calc__area { width: 100%; accent-color: var(--du-gold); height: 1.5rem; }
.du-calc__option {
	padding: .75rem 1rem; border-radius: 6px; border: 1px solid var(--du-border);
	background: var(--du-white); font-family: inherit; font-size: .9375rem;
}
.du-calc__result {
	background: var(--du-green-dark); color: var(--du-cream); padding: 2rem;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem;
}
.du-calc__result-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(246,240,230,.65); }
.du-calc__price { font-family: var(--du-font-head); font-size: 1.625rem; font-weight: 700; }
.du-calc__price strong { color: var(--du-gold); }
.du-calc__static-note { font-family: var(--du-font-head); font-size: 1.625rem; font-weight: 700; }
.du-calc__static-note strong { color: var(--du-gold); }
.du-calc__disclaimer { font-size: .8125rem; color: rgba(246,240,230,.7); margin: 0 0 .5rem; }
.du-calc__submit { width: 100%; }
.du-calc__wood-note { margin-top: .5rem; }
.du-calc__wood-note p { font-size: .8125rem; line-height: 1.5; color: var(--du-text-light); margin: 0 0 .5em; }
.du-calc__whats-included {
	background: none; border: 0; padding: 0; margin: -.25rem 0 .25rem;
	font-size: .8125rem; color: var(--du-gold); text-decoration: underline; text-underline-offset: 2px;
	cursor: pointer; text-align: left;
}
.du-calc__whats-included:hover { color: var(--du-white); }

.du-calc-modal {
	position: fixed; inset: 0; z-index: 300; background: rgba(20,16,10,.7);
	display: flex; align-items: center; justify-content: center; padding: 1.5rem;
	opacity: 0; visibility: hidden; transition: opacity .25s var(--du-ease), visibility .25s;
}
.du-calc-modal.is-open { opacity: 1; visibility: visible; }
.du-calc-modal__box {
	position: relative; background: var(--du-cream); color: var(--du-text); border-radius: var(--du-radius);
	max-width: 38rem; overflow: hidden;
	box-shadow: var(--du-shadow);
}
.du-calc-modal__scroll { max-height: 84vh; overflow-y: auto; padding: 2.25rem; }
.du-calc-modal__box h3 { font-size: 1.125rem; margin: 1.25em 0 .6em; }
.du-calc-modal__box h3:first-child { margin-top: 0; }
.du-calc-modal__box ul { margin: 0 0 1em; padding-left: 1.25em; list-style: disc; }
.du-calc-modal__box li { font-size: .9375rem; line-height: 1.55; color: var(--du-text-light); margin-bottom: .45em; }
.du-calc-modal__guarantee { font-size: .9375rem; font-weight: 700; margin: 1em 0 0; }
.du-calc-modal__close {
	position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem;
	border-radius: 50%; border: 0; background: var(--du-border); color: var(--du-text);
	display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.du-calc-modal__close:hover { background: var(--du-gold); color: var(--du-white); }

/* ==========================================================================
   Этапы
   ========================================================================== */
.du-stages { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: start; position: relative; }
.du-stage { text-align: left; position: relative; }
.du-stage__arrow { height: 44px; color: var(--du-brown); display: flex; align-items: center; justify-content: center; }
.du-stage__head {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	height: 44px;
	margin-bottom: 8px;
}
.du-stage__num {
	display: block;
	font-family: var(--du-font-head);
	font-weight: 700;
	font-size: 34px;
	color: var(--du-gold);
	line-height: 1;
	flex-shrink: 0;
}
.du-stage__title { font-size: 17px; font-weight: 700; margin: 0; }
.du-stage__desc { font-size: 14px; color: var(--du-text-light); }
.du-stages-note { text-align: center; margin-top: 32px; color: var(--du-text-light); font-size: 14.5px; }
.du-stage .du-img-icon { margin-top: 20px; }

#etapy {
	background: var(--du-cream) url('../img/wood-panel3.webp') center/cover;
}
#portfolio-block {
	background: var(--du-cream-alt);
}

/* ==========================================================================
   Портфолио
   ========================================================================== */
.du-filter { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.du-filter__item {
	padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
	background: var(--du-white); border: 1px solid var(--du-border);
}
.du-filter__item.is-active { background: var(--du-green-dark); color: var(--du-white); border-color: var(--du-green-dark); }

/* 6 карточек в один ряд на главной (см. du-portfolio-filter в main.js, там
   показывает максимум 6 на вкладку). */
.du-portfolio-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.du-proekt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--du-cream);
	border-radius: var(--du-radius);
	overflow: hidden;
	box-shadow: var(--du-shadow);
	transition: transform .35s var(--du-ease), box-shadow .35s var(--du-ease);
}
.du-proekt-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }
.du-proekt-card__img { position: relative; aspect-ratio: 16/10; background: var(--du-cream-alt); overflow: hidden; flex-shrink: 0; }
.du-proekt-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--du-ease); }
.du-proekt-card:hover .du-proekt-card__img img { transform: scale(1.06); }
.du-proekt-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--du-cream-alt), var(--du-border)); }
.du-proekt-card__tag {
	position: absolute; top: 12px; left: 12px;
	background: rgba(34,48,28,.85); color: var(--du-white);
	font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.du-proekt-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 16px 18px 20px; }
/* Фикс высоты строк независимо от длины названия проекта - лишний текст
   скрывается многоточием (2 строки), поэтому все карточки в ряду ровные. */
.du-proekt-card__title {
	font-size: 16px; font-weight: 700; margin: 0 0 6px; font-family: var(--du-font-head);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; line-height: 1.3; min-height: 2.6em;
}
.du-proekt-card__meta {
	font-size: 13.5px; color: var(--du-text-light); margin: 0 0 10px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.du-proekt-card__link { margin-top: auto; }
.du-proekt-card__link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 700; color: var(--du-gold-dark);
	transition: gap .25s var(--du-ease);
}
.du-proekt-card:hover .du-proekt-card__link { gap: 10px; }

.du-portfolio-more { text-align: center; margin-top: 36px; }

.du-portfolio-page { padding: 64px 0 80px; }
.du-breadcrumbs { color: var(--du-text-light); font-size: 14px; margin-bottom: 20px; }

.du-portfolio-page .navigation.pagination { margin-top: 40px; }
.du-portfolio-page .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.du-portfolio-page .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: 999px; background: var(--du-white); border: 1px solid var(--du-border);
	font-size: 14px; font-weight: 600; color: var(--du-text);
}
.du-portfolio-page .page-numbers.current { background: var(--du-green-dark); color: var(--du-white); border-color: var(--du-green-dark); }
.du-portfolio-page .page-numbers.dots { border: 0; background: none; }

/* SEO-текст под каталогом на посадочных типов объектов (/proekty/dom/ и т.д.) */
.du-portfolio-seo {
	max-width: 780px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--du-border);
	color: var(--du-text-light);
	font-size: 16px;
}
.du-portfolio-seo h2, .du-portfolio-seo h3 { color: var(--du-text); margin-top: 1.4em; }
.du-portfolio-seo ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1em; }
.du-portfolio-seo li { margin-bottom: .4em; }
.du-portfolio-seo a { color: var(--du-brown-light); border-bottom: 1px solid var(--du-gold); }

/* ==========================================================================
   Живые объекты + отзывы
   ========================================================================== */
.du-zho-reviews {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: flex-start;
	padding: 2.5rem 0 1rem; border-top: 1px solid var(--du-border); margin-top: 1rem;
}
@media (max-width: 720px) { .du-zho-reviews { grid-template-columns: 1fr; } }

.du-live-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr 1fr 2.3fr; gap: 24px; align-items: flex-start; }
/* Пока нет ни одного реального отзыва, две «отзывные» ячейки не выводятся
   (issue #22) — колонок остаётся три, иначе справа зияла бы пустота. */
.du-live-grid--no-reviews { grid-template-columns: 1.15fr 1fr 2.3fr; }
.du-live-text h3 { font-size: 22px; margin-bottom: 10px; }
.du-review-carousel { display: flex; flex-direction: column; min-height: 284px; }
.du-live-text p { font-size: 14.5px; color: var(--du-text-light); margin-bottom: 18px; }
.du-live-text__note { margin-top: 14px; margin-bottom: 0; }
.du-live-photo { align-self: stretch; width: 100%; border-radius: var(--du-radius); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--du-shadow); position: relative; }
.du-live-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--du-ease); }
.du-live-photo:hover img { transform: scale(1.06); }

.du-review-carousel__photo img { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--du-ease); }
.du-review-carousel__photo img.is-active { opacity: 1; }

.du-live-map-card {
	align-self: stretch;
	position: relative;
	border-radius: var(--du-radius);
	overflow: hidden;
	box-shadow: var(--du-shadow);
}
.du-live-map-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.15) saturate(1.1); }
.du-live-map-card__overlay {
	position: absolute; top: 0; left: 0; bottom: 0; width: 55%;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
	padding: 22px; pointer-events: none;
	background: linear-gradient(to right, var(--du-cream) 0%, var(--du-cream) 55%, rgba(246,240,230,0) 100%);
}
.du-live-map-card__overlay > * { pointer-events: auto; }
.du-live-map__region { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--du-text-light); }

.du-review-carousel__viewport { position: relative; }
.du-review-slide { display: none; }
.du-review-slide.is-active { display: block; }
.du-review-card__quote {
	font-size: 15px;
	color: var(--du-text);
	margin-bottom: 14px;
	font-style: italic;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	text-overflow: ellipsis;
}
.du-review-card__author { font-size: 13.5px; font-weight: 700; color: var(--du-text-light); font-style: normal; }
.du-review-slide__more {
	display: inline-block; margin-top: 6px;
	font-size: 13.5px; font-weight: 700; font-style: normal;
	color: var(--du-gold-dark); border-bottom: 1px solid transparent;
}
a.du-review-slide:hover .du-review-slide__more { border-bottom-color: var(--du-gold); }
a.du-review-slide { cursor: pointer; }
a.du-review-slide:hover .du-review-card__quote,
a.du-review-slide:hover .du-review-card__author { color: var(--du-gold-dark); }
.du-review-carousel__nav { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.du-review-carousel__arrow {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border-radius: 999px;
	border: 1px solid var(--du-border); background: var(--du-white); color: var(--du-text);
	cursor: pointer; transition: background .2s var(--du-ease), border-color .2s var(--du-ease);
	flex-shrink: 0;
}
.du-review-carousel__arrow:hover { background: var(--du-gold); border-color: var(--du-gold); color: var(--du-white); }
.du-review-carousel__arrow--prev svg { transform: scaleX(-1); }
.du-review-carousel__dots { display: flex; align-items: center; gap: 8px; }
.du-review-carousel__dot {
	width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0;
	background: var(--du-border); cursor: pointer; transition: background .2s var(--du-ease), transform .2s var(--du-ease);
}
.du-review-carousel__dot.is-active { background: var(--du-gold); transform: scale(1.3); }

/* ==========================================================================
   Производство и лес
   ========================================================================== */
.du-production { background: var(--du-green-dark); color: var(--du-cream); }
.du-production .du-section__title,
.du-production .du-section__lead { color: var(--du-cream); }
.du-production .du-section__lead { color: rgba(246,240,230,.78); }
.du-production-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Пропорция слота — по тому, что за снимки в блоке, а не наоборот (issue #44).
   Было 3/4, то есть вертикальная рамка, а все четыре файла горизонтальные
   (1.33-1.78): при object-fit: cover от кадра оставалось 42-56%. 4/3
   совпадает с двумя файлами точно и близко к третьему.
   Появятся вертикальные снимки производства — пропорцию менять вместе с ними. */
.du-production-grid img { border-radius: var(--du-radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; height: 100%; }
.du-production-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.du-production-facts div { text-align: center; }
.du-production-facts strong { display: block; font-family: var(--du-font-head); font-size: 18px; margin-bottom: 6px; color: var(--du-gold); }
.du-production-facts span { font-size: 14px; color: rgba(246,240,230,.78); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.du-faq { max-width: 780px; margin: 0 auto; }
.du-faq-item { border-bottom: 1px solid var(--du-border); }
.du-faq-item__q {
	width: 100%; text-align: left; background: none; border: 0;
	padding: 18px 0; font-size: 16.5px; font-weight: 700;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	color: var(--du-text);
}
.du-faq-item__q::after { content: '+'; font-size: 22px; color: var(--du-gold-dark); flex-shrink: 0; }
.du-faq-item.is-open .du-faq-item__q::after { content: '−'; }
.du-faq-item__a { display: none; padding: 0 0 20px; color: var(--du-text-light); font-size: 15px; max-width: 640px; }
.du-faq-item.is-open .du-faq-item__a { display: block; }

/* ==========================================================================
   Контакты / форма
   ========================================================================== */
.du-contact3 { display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; gap: 40px; align-items: start; }
.du-contact3__title { font-size: 22px; margin-bottom: 18px; }
.du-contact3__lead { color: var(--du-text-light); font-size: 14.5px; margin-bottom: 20px; }
.du-tg-post {
	display: flex; gap: 14px; align-items: center; color: inherit;
	background: var(--du-white); border-radius: var(--du-radius);
	padding: 14px; margin-bottom: 22px; box-shadow: var(--du-shadow);
	transition: transform .3s var(--du-ease), box-shadow .3s var(--du-ease);
}
.du-tg-post:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }
.du-tg-post__photo { flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.du-tg-post__photo img { width: 100%; height: 100%; object-fit: cover; }
.du-tg-post__body { min-width: 0; }
.du-tg-post__label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--du-gold-dark); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.du-tg-post__text {
	font-size: 14px; color: var(--du-text); margin: 0;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
.du-lead-form {
	background: var(--du-cream-alt);
	border-radius: var(--du-radius);
	padding: 30px;
	box-shadow: var(--du-shadow);
}
.du-lead-form h3 { margin-bottom: 6px; }
.du-lead-form__note { color: var(--du-text-light); font-size: 14px; margin-bottom: 22px; }
.du-lead-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea {
	background: var(--du-cream);
	border: 1px solid var(--du-border);
	border-radius: 6px;
	font-family: inherit;
}
.du-lead-form input {
	width: 100%; padding: 13px 16px; margin-bottom: 16px; font-size: 15px;
}
.du-lead-form__consent { font-size: 12.5px; color: var(--du-text-light); margin-top: 10px; }
.du-lead-form__success { background: #E6F0E3; color: #2D5C2D; padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
/* Ошибка отправки формы (#65): тот же блок, что успех, но предупреждающий. Не красный «алярм» — отказ здесь чаще всего означает просто истёкший nonce или пустое поле, и пугать человека незачем. */
.du-lead-form__error { background: #F6EBDC; color: #6B4A22; padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.du-lead-form__error a { color: inherit; text-decoration: underline; }

.du-contacts-block { display: grid; gap: 22px; margin-top: 28px; }
.du-contacts-block__item strong { display: block; font-size: 15px; }
.du-contacts-block__item span { color: var(--du-text-light); font-size: 13.5px; }
.du-contacts-block__item a { font-size: 16px; font-weight: 700; }

/* ==========================================================================
   CTA-баннер (используется на странице проекта)
   ========================================================================== */
.du-cta-banner {
	background: var(--du-green-dark);
	color: var(--du-white);
	border-radius: var(--du-radius);
	padding: 30px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin: 48px 0;
}
.du-cta-banner p { margin: 0; font-size: 18px; font-weight: 600; }

/* ==========================================================================
   Одиночный проект
   ========================================================================== */
.du-proekt-single { padding: 40px 0 80px; }
.du-proekt-single__hero { border-radius: var(--du-radius); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/8; background: var(--du-cream-alt); }
.du-proekt-single__hero img { width: 100%; height: 100%; object-fit: cover; }
.du-proekt-single__title { font-size: 32px; margin-bottom: 20px; }
.du-proekt-single__specs { display: flex; gap: 28px; flex-wrap: wrap; padding: 20px 0; margin-bottom: 24px; border-top: 1px solid var(--du-border); border-bottom: 1px solid var(--du-border); }
.du-proekt-single__specs li { font-size: 15px; }
.du-proekt-single__specs span { display: block; font-size: 12.5px; color: var(--du-text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.du-proekt-single__content { max-width: 760px; margin-bottom: 32px; font-size: 16px; }
.du-proekt-single__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.du-proekt-single__gallery img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; }

/* ==========================================================================
   Footer
   ========================================================================== */
.du-footer { background: var(--du-green-darker); color: rgba(246,240,230,.88); padding: 60px 0 0; }
.du-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.du-logo--footer .du-logo__title { color: var(--du-white); }
.du-logo--footer .du-logo__mark { color: var(--du-gold); }
.du-footer__desc { font-size: 14px; color: rgba(246,240,230,.65); margin-top: 14px; }
.du-footer__title { color: var(--du-white); font-size: 15px; margin-bottom: 16px; font-family: var(--du-font); }
.du-footer__links { display: grid; gap: 10px; }
.du-footer__links a, .du-footer__col a { font-size: 14px; color: rgba(246,240,230,.78); }
.du-footer__links a:hover, .du-footer__col a:hover { color: var(--du-gold); }
.du-footer__col p { font-size: 14px; margin-bottom: 14px; }
.du-footer__bottom {
	border-top: 1px solid rgba(246,240,230,.12);
	padding: 20px 0;
	font-size: 13px;
	color: rgba(246,240,230,.55);
}

/* ==========================================================================
   Прелоадер: топор рубит бревно
   ========================================================================== */
html.du-no-scroll, html.du-no-scroll body { overflow: hidden; height: 100%; }

.du-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--du-cream);
	transition: opacity .55s ease, visibility .55s ease;
}
.du-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.du-preloader__scene { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.du-preloader__spinner {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 4px solid var(--du-border);
	border-top-color: var(--du-gold);
	animation: du-spin .8s linear infinite;
}
@keyframes du-spin {
	to { transform: rotate(360deg); }
}

.du-preloader__brand { display: flex; align-items: center; gap: 8px; color: var(--du-green-dark); }
.du-preloader__logo { display: flex; }
.du-preloader__logo img { display: block; height: 26px; width: auto; }
.du-preloader__title { font-family: var(--du-font-head); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.du-preloader__text { font-size: 13.5px; color: var(--du-text-light); letter-spacing: .02em; }
.du-preloader__dots i { font-style: normal; opacity: .2; animation: du-dot-pulse 1.4s ease-in-out infinite; }
.du-preloader__dots i:nth-child(2) { animation-delay: .2s; }
.du-preloader__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes du-dot-pulse { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.du-preloader__spinner { animation: none; }
	.du-preloader__dots i { animation: none; }
}

/* ==========================================================================
   Анимации: reveal при скролле + hover
   ========================================================================== */
.du-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--du-ease), transform .7s var(--du-ease);
}
.du-reveal.is-visible { opacity: 1; transform: translateY(0); }
.du-reveal:nth-child(2) { transition-delay: .06s; }
.du-reveal:nth-child(3) { transition-delay: .12s; }
.du-reveal:nth-child(4) { transition-delay: .18s; }
.du-reveal:nth-child(5) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.du-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

.du-feature-card__icon { transition: transform .3s var(--du-ease); }
.du-feature-card:hover .du-feature-card__icon { transform: translateY(-4px) scale(1.08); }
.du-img-icon { display: block; }

.du-service-card { transition: transform .35s var(--du-ease), box-shadow .35s var(--du-ease); }
.du-service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }
.du-service-card__img { transition: background-color .3s ease; }
.du-service-card__img svg { transition: transform .35s var(--du-ease); }
.du-service-card:hover .du-service-card__img svg { transform: scale(1.12) rotate(-3deg); }

.du-calc-card { transition: transform .3s var(--du-ease), box-shadow .3s var(--du-ease); }
.du-calc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(0,0,0,.22); }
.du-calc-card__icon { transition: transform .3s var(--du-ease); }
.du-calc-card:hover .du-calc-card__icon { transform: scale(1.1); }

.du-nav__list a { position: relative; }
.du-nav__list a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
	background: var(--du-gold); transition: right .25s var(--du-ease);
}
.du-nav__list a:hover::after { right: 0; }

.du-live-card, .du-live-photo, .du-review-card { transition: transform .3s var(--du-ease), box-shadow .3s var(--du-ease); }

/* ==========================================================================
   Галерейные страницы (Работы / Ландшафтные работы / Интерьеры)
   ========================================================================== */
.du-gallery-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--du-green-darker) 0%, var(--du-brown) 65%, var(--du-brown-light) 100%);
	color: var(--du-cream); padding: 4.5rem 0 4rem;
}
.du-gallery-hero::before {
	content: ""; position: absolute; top: -30%; right: -10%; width: 26rem; height: 26rem;
	background: radial-gradient(circle, rgba(190,135,53,.35) 0%, rgba(190,135,53,0) 70%);
	pointer-events: none;
}
.du-gallery-hero__inner { position: relative; z-index: 1; max-width: 42rem; }
.du-gallery-hero__eyebrow {
	display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--du-gold); margin-bottom: 1rem;
}
.du-gallery-hero__title { font-size: 2.75rem; color: var(--du-white); margin-bottom: 1rem; }
.du-gallery-hero__title em { font-style: normal; color: var(--du-gold); }
.du-gallery-hero__lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(246,240,230,.88); max-width: 36rem; }
.du-gallery-hero__actions { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.du-gallery-intro { padding: 3rem 0 1rem; max-width: 46rem; }
.du-gallery-intro--short { padding: 1.75rem 0 .5rem; }
.du-gallery-intro p { font-size: 1.0625rem; line-height: 1.7; color: var(--du-text-light); margin: 0 0 1em; }
.du-gallery-intro strong { color: var(--du-text); }
.du-gallery-intro .du-text-accent {
	font-family: var(--du-font-head); font-style: italic; font-weight: 700;
	color: var(--du-gold-dark);
}

.du-gallery-details { padding: .5rem 0 2.5rem; max-width: 46rem; }
.du-gallery-details h3 {
	font-size: 1.375rem; color: var(--du-text); margin: 1.75em 0 .55em;
}
.du-gallery-details h3:first-child { margin-top: 0; }
.du-gallery-details p { font-size: 1rem; line-height: 1.75; color: var(--du-text-light); margin: 0 0 1em; }
.du-gallery-details ul { margin: 0 0 1em; padding-left: 1.25em; list-style: disc; }
.du-gallery-details li { font-size: 1rem; line-height: 1.65; color: var(--du-text-light); margin-bottom: .5em; }
.du-gallery-details a { color: var(--du-gold-dark); text-decoration: underline; text-underline-offset: .15em; }
.du-gallery-details a:hover { color: var(--du-gold); }

/* Содержательные блоки страниц услуг (issue #19, п.3).
   Две колонки, когда у блока есть картинка; чётные развёрнуты зеркально,
   иначе колонка картинок читается как таблица. Без картинки блок идёт
   одной колонкой той же ширины, что вводный текст выше, — чтобы строка не
   становилась нечитаемо длинной. */
.du-svc-sections { padding: .5rem 0 1rem; }

/* Блок «вопрос — ответ» на посадочных (issue #24). Сам аккордеон использует
   те же .du-faq* , что и FAQ на главной, поэтому здесь только обвязка. */
.du-landing-faq { padding: 2rem 0 1rem; border-top: 1px solid var(--du-border); }
.du-landing-faq__title { font-size: 1.5rem; margin-bottom: 1rem; }
.du-svc-section {
	display: grid; grid-template-columns: 1fr minmax(0, 22rem);
	gap: 2rem 2.5rem; align-items: start;
	padding: 2.25rem 0; border-top: 1px solid var(--du-border);
}
.du-svc-section--mirror .du-svc-section__body { order: 2; }
.du-svc-section--plain { display: block; max-width: 46rem; }
.du-svc-section__title { font-size: 1.5rem; margin-bottom: .6em; }
.du-svc-section__text { font-size: 1.0625rem; line-height: 1.7; color: var(--du-text-light); }
.du-svc-section__text > :first-child { margin-top: 0; }
.du-svc-section__text > :last-child { margin-bottom: 0; }
.du-svc-section__text h3 {
	font-size: 1.125rem; color: var(--du-text); margin: 1.5em 0 .4em;
}
.du-svc-section__text ul, .du-svc-section__text ol { padding-left: 1.25rem; margin: 0 0 1em; }
.du-svc-section__text li { margin-bottom: .35em; }
.du-svc-section__media { margin: 0; }
.du-svc-section__media img {
	width: 100%; height: auto; border-radius: var(--du-radius); box-shadow: var(--du-shadow);
}

.du-process-steps {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.75rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--du-border); margin-top: .5rem;
}
.du-process-step__num {
	display: block; font-family: var(--du-font-head); font-weight: 700;
	font-size: 2rem; color: var(--du-gold); line-height: 1; margin-bottom: .75rem;
}
.du-process-step__title { font-size: 1.0625rem; margin: 0 0 .5rem; }
.du-process-step__text { font-size: .9375rem; color: var(--du-text-light); margin: 0; line-height: 1.55; }

/* Асимметричная «журнальная» сетка: крупные и мелкие карточки вперемешку,
   не ровная колоночная раскладка — по прямому пожеланию заказчика. */
.du-masonry {
	display: grid; grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 11rem; grid-auto-flow: dense; gap: 1.375rem;
	padding: 1rem 0 4rem;
}
.du-masonry__item {
	grid-column: span 1; grid-row: span 1;
	position: relative; display: block; height: 100%;
	border-radius: var(--du-radius); overflow: hidden; box-shadow: var(--du-shadow);
	background: var(--du-cream-alt); cursor: zoom-in;
	transition: transform .35s var(--du-ease), box-shadow .35s var(--du-ease);
}
/* Форму плитки задаёт КАРТИНКА, а не позиция в сетке (issue #43).
   Раньше это были правила :nth-of-type, и вертикальный снимок регулярно
   попадал в горизонтальную плитку: при object-fit: cover от него оставалась
   полоса. Замер по четырём галереям: видно было 52-70% кадра, в худшем
   случае 14%. Класс проставляет template-parts/gallery-masonry.php по
   соотношению сторон файла.
   Пропорции плиток на десктопе: обычная 1.54, высокая 0.73, очень высокая
   0.47, крупная 1.51, широкая 3.21. */
.du-masonry__item--xtall { grid-column: span 1; grid-row: span 3; }
.du-masonry__item--tall  { grid-column: span 1; grid-row: span 2; }
.du-masonry__item--big   { grid-column: span 2; grid-row: span 2; }
.du-masonry__item--wide  { grid-column: span 2; grid-row: span 1; }
.du-masonry__item:hover, .du-masonry__item:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(34,26,14,.2); outline: none; }
.du-masonry__media { position: relative; line-height: 0; height: 100%; }
.du-masonry__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--du-ease); }
.du-masonry__item:hover .du-masonry__media img { transform: scale(1.05); }
.du-masonry__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--du-cream-alt), var(--du-border)); }
.du-masonry__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(246,240,230,.94);
	display: flex; align-items: center; justify-content: center; color: var(--du-green-dark);
	box-shadow: var(--du-shadow);
}
.du-masonry__caption {
	position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem .875rem .75rem;
	background: linear-gradient(to top, rgba(24,34,18,.86), rgba(24,34,18,0));
	color: var(--du-white); font-size: .8125rem; font-weight: 600;
	opacity: 0; transform: translateY(.4rem); transition: opacity .3s var(--du-ease), transform .3s var(--du-ease);
}
.du-masonry__item:hover .du-masonry__caption, .du-masonry__item:focus-visible .du-masonry__caption { opacity: 1; transform: translateY(0); }
.du-masonry-empty { padding: 3rem 0 4rem; color: var(--du-text-light); font-size: 1.0625rem; }

/* Видео-плитка на странице проекта — всегда крупная и с золотой рамкой,
   чтобы визуально выделяться среди фото (порядок в разметке её не задаёт). */
.du-masonry__item--video {
	grid-column: span 2 !important; grid-row: span 2 !important;
	outline: 3px solid var(--du-gold); outline-offset: -3px;
}
.du-masonry__item--video .du-masonry__play {
	width: 4.5rem; height: 4.5rem; background: var(--du-gold); color: var(--du-white);
}
.du-masonry__item--video .du-masonry__caption { opacity: 1; transform: none; background: linear-gradient(to top, rgba(24,34,18,.75), rgba(24,34,18,0)); }

.du-lightbox {
	position: fixed; inset: 0; z-index: 200; background: rgba(20,16,10,.92);
	display: flex; align-items: center; justify-content: center; padding: 2rem;
	opacity: 0; visibility: hidden; transition: opacity .25s var(--du-ease), visibility .25s;
}
.du-lightbox.is-open { opacity: 1; visibility: visible; }
.du-lightbox__stage { max-width: 90vw; max-height: 86vh; }
.du-lightbox__stage img, .du-lightbox__stage video { max-width: 90vw; max-height: 86vh; border-radius: 6px; display: block; }
.du-lightbox__close {
	position: absolute; top: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem;
	border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--du-white);
	display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.du-lightbox__close:hover { background: rgba(255,255,255,.24); }

.du-gallery-cta__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
.du-gallery-cta__phones { margin-top: 1.5rem; font-size: .9375rem; line-height: 1.9; color: var(--du-text-light); }
.du-gallery-cta__phones a { font-weight: 700; color: var(--du-text); }

/* ==========================================================================
   Этапы строительства (/etapy/)
   ========================================================================== */
.du-etapy-list { display: flex; flex-direction: column; gap: 0; padding: 1rem 0 2.5rem; }
.du-etapy-card {
	display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2rem; align-items: start;
	background: var(--du-white); border-radius: var(--du-radius); box-shadow: var(--du-shadow);
	padding: 2rem 2.25rem;
}
.du-etapy-card__head { display: flex; align-items: center; gap: 1rem; grid-column: 1 / -1; }
.du-etapy-card__title { font-size: 1.375rem; margin: 0; }
.du-etapy-card__text { font-size: 1rem; color: var(--du-text-light); line-height: 1.6; margin: 0 0 1rem; max-width: 34rem; }
.du-etapy-card__items { display: grid; gap: .625rem; max-width: 34rem; }
.du-etapy-card__items li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; line-height: 1.5; }
.du-etapy-card__items svg { flex-shrink: 0; margin-top: .1rem; color: var(--du-gold-dark); }
.du-etapy-card .du-img-icon { justify-self: end; align-self: center; }
.du-etapy-arrow {
	display: flex; align-items: center; justify-content: center; height: 2.5rem;
	color: var(--du-brown); transform: rotate(90deg);
}

/* ==========================================================================
   Отзывы (/otzyvy/)
   ========================================================================== */
.du-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1rem 0 2rem; }
.du-review-tile {
	background: var(--du-white); border-radius: var(--du-radius); box-shadow: var(--du-shadow);
	overflow: hidden; display: flex; flex-direction: column;
	transition: transform .3s var(--du-ease), box-shadow .3s var(--du-ease);
}
.du-review-tile__photo { aspect-ratio: 4/3; overflow: hidden; background: var(--du-cream-alt); }
.du-review-tile__photo img { width: 100%; height: 100%; object-fit: cover; }
.du-review-tile__body { padding: 1.375rem 1.5rem 1.625rem; }
.du-review-tile .du-review-card__quote { -webkit-line-clamp: 8; }
.du-review-tile__more {
	display: inline-block; margin-top: 2px;
	font-size: 13.5px; font-weight: 700; font-style: normal;
	color: var(--du-gold-dark); border-bottom: 1px solid transparent;
}
.du-review-tile-link:hover .du-review-tile__more { border-bottom-color: var(--du-gold); }
.du-review-tile-link { display: block; color: inherit; }
.du-review-tile-link:hover .du-review-tile { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }

.du-review-single__object { max-width: 24rem; margin: 0 auto 3rem; }
.du-review-single__object-title { font-size: 17px; margin-bottom: 1rem; text-align: center; }
.du-review-single__object-card { display: grid; }

.du-proekt-review {
	display: block; max-width: 42rem; margin: 0 auto 3rem;
	padding: 1.5rem 1.75rem; background: var(--du-white);
	border-radius: var(--du-radius); box-shadow: var(--du-shadow); color: inherit;
	transition: transform .3s var(--du-ease), box-shadow .3s var(--du-ease);
}
.du-proekt-review:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }
.du-proekt-review__title { font-size: 17px; margin-bottom: .75rem; }
.du-proekt-review .du-review-card__quote { -webkit-line-clamp: 8; }
.du-proekt-review:hover .du-review-slide__more { border-bottom-color: var(--du-gold); }

.du-review-single { max-width: 42rem; margin: 0 auto; padding: 1rem 0 3rem; text-align: center; }
.du-review-single__photo { border-radius: var(--du-radius); overflow: hidden; box-shadow: var(--du-shadow); margin-bottom: 2rem; }
.du-review-single__photo img { width: 100%; height: auto; display: block; }
.du-review-single__quote { font-size: 1.375rem; font-style: italic; line-height: 1.5; color: var(--du-text); margin: 0 0 1.25rem; }
.du-review-single__author { font-size: 1rem; font-weight: 700; color: var(--du-text-light); }

/* ==========================================================================
   Контакты (/kontakty/)
   ========================================================================== */
.du-kontakty-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; padding: 1rem 0 3rem; align-items: stretch; }
.du-kontakty-map { min-height: 22rem; }
.du-kontakty-side {
	background: var(--du-cream-alt); border-radius: var(--du-radius); padding: 2rem;
	display: flex; flex-direction: column;
}
.du-kontakty-tg { display: grid; gap: .875rem; margin: 1rem 0 1.5rem; }
.du-kontakty-tg a { display: flex; align-items: center; gap: .625rem; font-size: 1rem; font-weight: 600; }
.du-kontakty-tg a:hover { color: var(--du-gold-dark); }
.du-kontakty-note { font-size: .9375rem; color: var(--du-text-light); margin-top: auto; }

/* ==========================================================================
   Блог (/blog/)
   ========================================================================== */
.du-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; padding: 1rem 0 1rem; }
.du-blog-card {
	display: flex; flex-direction: column; height: 100%;
	background: var(--du-white); border-radius: var(--du-radius); overflow: hidden; box-shadow: var(--du-shadow);
	transition: transform .35s var(--du-ease), box-shadow .35s var(--du-ease);
}
.du-blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34,26,14,.16); }
.du-blog-card__img { display: block; aspect-ratio: 4/3; background: var(--du-cream-alt); overflow: hidden; flex-shrink: 0; }
.du-blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.du-blog-card__img-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--du-cream-alt), var(--du-border)); }
.du-blog-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.25rem 1.375rem 1.5rem; }
.du-blog-card__date { font-size: .8125rem; color: var(--du-text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.du-blog-card__title { font-size: 1.1875rem; margin: 0 0 .625rem; }
.du-blog-card__title a:hover { color: var(--du-gold-dark); }
.du-blog-card__excerpt { font-size: .9375rem; color: var(--du-text-light); margin: 0 0 1rem; }

.du-blog-single__cover { border-radius: var(--du-radius); overflow: hidden; margin: 1.5rem 0 2rem; aspect-ratio: 16/8; background: var(--du-cream-alt); }
.du-blog-single__cover img { width: 100%; height: 100%; object-fit: cover; }
.du-blog-single__content { max-width: 46rem; margin: 0 auto 3rem; font-size: 1.0625rem; line-height: 1.75; color: var(--du-text); }
.du-blog-single__content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.du-blog-single__content h3 { font-size: 1.1875rem; margin-top: 1.4em; }
.du-blog-single__content p { margin: 0 0 1.1em; }
.du-blog-single__content ul, .du-blog-single__content ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.du-blog-single__content li { margin-bottom: .4em; }
.du-blog-single__content a { color: var(--du-brown-light); border-bottom: 1px solid var(--du-gold); }
.du-blog-single__content strong { color: var(--du-text); }

/* ==========================================================================
   Страница 404
   ========================================================================== */
.du-error {
	padding: 72px 24px 88px;
	text-align: center;
	max-width: 760px;
}
.du-error__code {
	font-family: var(--du-font-head);
	font-size: clamp(72px, 12vw, 132px);
	line-height: 1;
	margin: 0 0 8px;
	color: var(--du-gold);
	opacity: .35;
}
.du-error__title { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 12px; }
.du-error__lead {
	color: var(--du-text-light);
	font-size: 17px;
	margin: 0 auto 28px;
	max-width: 560px;
}
.du-error__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.du-error__links {
	display: flex;
	gap: 10px 28px;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 28px;
	border-top: 1px solid var(--du-border);
}
.du-error__links a {
	color: var(--du-brown-light);
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.du-error__links a:hover { border-bottom-color: var(--du-gold); }
.du-error__phone { margin-top: 28px; color: var(--du-text-light); }
.du-error__phone a { font-weight: 700; color: var(--du-text); }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1080px) {
	.du-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.du-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.du-portfolio-grid { grid-template-columns: repeat(3, 1fr); }
	.du-production-grid { grid-template-columns: repeat(2, 1fr); }
	.du-live-grid { grid-template-columns: 1fr 1fr; }
	.du-live-map-card { grid-column: 1 / -1; min-height: 260px; }
	.du-contact3 { grid-template-columns: 1fr; }
	.du-footer__inner { grid-template-columns: 1fr 1fr; }
	.du-masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10rem; }
}
@media (max-width: 860px) {
	/* Блоки услуг: одна колонка, картинка всегда под текстом — порядок
	   чтения важнее зеркальности, которая на узком экране не читается. */
	.du-svc-section { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 0; }
	.du-svc-section--mirror .du-svc-section__body { order: 0; }
	.du-svc-section__media { max-width: 26rem; }

	.du-header__trust { display: none; }
	.du-header__cta-wrap { display: none; }
	.du-burger { display: flex; }
	.du-nav__cta { display: flex; margin-top: 10px; }
	.du-nav__tg { display: flex; }
	.du-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--du-cream);
		box-shadow: 0 16px 24px rgba(34,26,14,.14);
		transition: max-height .3s var(--du-ease);
	}
	.du-nav.is-open { max-height: min(85vh, 56.25rem); overflow-y: auto; }
	.du-nav__inner { flex-direction: column; align-items: stretch; gap: 4px; padding-top: 8px; padding-bottom: 18px; }
	.du-nav__list { flex-direction: column; gap: 0; }
	.du-nav__list a { display: block; padding: 11px 0; border-bottom: 1px solid var(--du-border); }
	.du-nav__item--has-children { flex-wrap: wrap; }
	.du-nav__item--has-children > a { flex: 1; border-bottom: none; }
	.du-nav__caret {
		display: flex; align-items: center; justify-content: center;
		width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; background: none;
		color: var(--du-text-light); border-bottom: 1px solid var(--du-border); flex-shrink: 0;
		transition: transform .25s var(--du-ease);
	}
	.du-nav__item--has-children.is-open .du-nav__caret { transform: rotate(180deg); color: var(--du-gold-dark); }
	.du-nav__submenu {
		position: static; box-shadow: none; padding: 0 0 0 .75rem; width: 100%;
		opacity: 1; visibility: visible; pointer-events: auto; transform: none;
		display: none;
	}
	.du-nav__item--has-children.is-open .du-nav__submenu { display: block; }
	.du-nav__submenu li a { padding: .625rem 0; border-bottom: 1px solid var(--du-border); color: var(--du-text-light); font-weight: 600; }
	.du-grid--3 { grid-template-columns: 1fr; }
	.du-stages { grid-template-columns: 1fr; }
	.du-stage__arrow { display: none; }
	.du-stage { text-align: center; }
	.du-stage__head { justify-content: center; }
	.du-stage .du-img-icon { margin-left: auto; margin-right: auto; }
	.du-grid--5, .du-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.du-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.du-production-grid { grid-template-columns: repeat(2, 1fr); }
	.du-production-facts { grid-template-columns: 1fr; }
	.du-footer__inner { grid-template-columns: 1fr; }
	.du-hero { min-height: 520px; }
	.du-hero__inner { max-width: 100%; }
	.du-gallery-hero__title { font-size: 2.125rem; }
	.du-gallery-hero { padding: 3.25rem 0 3rem; }
	.du-gallery-cta__inner { grid-template-columns: 1fr; }
	.du-etapy-card { grid-template-columns: 1fr; padding: 1.5rem; }
	.du-etapy-card .du-img-icon { justify-self: center; margin-top: 1rem; }
	.du-etapy-arrow { transform: none; }
	.du-reviews-grid { grid-template-columns: 1fr 1fr; }
	.du-kontakty-grid { grid-template-columns: 1fr; }
	.du-kontakty-map { min-height: 16rem; }
	.du-blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.du-grid--5, .du-grid--4, .du-grid--2, .du-portfolio-grid { grid-template-columns: 1fr; }
	/* Калькулятор: на телефонах поля и результат идут вертикально, одной колонкой.
	   В десктопной раскладке (1.4fr 1fr) правая панель распирается своим
	   min-content, и при контейнере 327 px колонки дают 202 + 199 — цена и кнопка
	   уезжают под overflow: hidden у .du-calc. */
	.du-calc__body { grid-template-columns: 1fr; }
	.du-calc__inputs, .du-calc__result { min-width: 0; }
	.du-calc__result { align-items: stretch; }
	.du-calc__price, .du-calc__static-note { font-size: 1.5rem; }
	.du-hero__actions { flex-direction: column; align-items: flex-start; }
	.du-section { padding: 36px 0; }
	.du-header__callback { display: none; }
	.du-logo__sub { display: none; }
	.du-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; gap: .875rem; }
	.du-gallery-hero__title { font-size: 1.75rem; }
	.du-reviews-grid { grid-template-columns: 1fr; }
	.du-blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
	.du-header__contact { display: none; }
}

/* Особенности объекта на карточке проекта (issue #35): ссылка на посадочную
   кластера. Отдельного блока не заводим — это строка под описанием. */
.du-proekt-osobennosti {
	margin: 0 0 24px;
	color: rgba(30, 26, 22, .7);
	font-size: 15px;
}
.du-proekt-osobennosti a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.du-proekt-osobennosti a + a::before {
	content: ", ";
	text-decoration: none;
	display: inline-block;
}

.du-kontakty-geo { margin: 2.5rem 0; max-width: 46rem; }
.du-kontakty-geo p { margin: .75rem 0 0; line-height: 1.6; }