/* ==========================================================================
   Zabory — основные стили
   ========================================================================== */

/* Локальный шрифт Bebas Neue Cyrillic (тонкая версия от заказчика)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Bebas Neue Cyrillic';
	src: url('../fonts/BebasNeueCyrillic.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;       /* Bebas Neue идёт одним весом */
	line-height: 1.05;
	letter-spacing: 0.01em;
}

ul, ol {
	list-style: none;
}

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

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

/* Дизайн-токены (по UI-киту)
   -------------------------------------------------------------------------- */
:root {
	/* === Brand === */
	--color-primary:        #FE6A01;
	--color-secondary:      #171717;
	--color-black:          #000000;
	--color-white:          #FFFFFF;

	/* === Text === */
	--color-text:           #171717;          /* основной текст */
	--color-text-muted:     #9C9C9C;          /* Text/Secondary */
	--color-text-disabled:  #BDBDBD;          /* Text/Disabled */
	--color-text-link:      #FC7419;          /* Text/Link */
	--color-text-invert:    #FFFFFF;

	/* === Background === */
	--color-bg:             #FFFFFF;          /* Background/Alt */
	--color-bg-dark:        #000000;          /* Background/Default */

	/* === Алиасы старого кода (постепенно убираем) === */
	--color-dark:           var(--color-secondary);
	--color-gray-900:       #1F1F1F;
	--color-muted:          var(--color-text-muted);
	--color-primary-hover:  var(--color-secondary);   /* hover оранжевой = тёмный */
	--color-success:        #2ECC40;
	--color-border:         #e5e7eb;
	--color-on-dark:        var(--color-white);
	--color-on-dark-muted:  rgba(255, 255, 255, 0.7);

	/* === Шрифты === */
	--font-heading: "Bebas Neue Cyrillic", "Bebas Neue", Impact, sans-serif;
	--font-base:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* === Размеры === */
	--fs-base: 16px;
	--lh-base: 1.5;

	/* === Контейнер === */
	--container-max: 1200px;
	--container-padding: 20px;

	/* === Радиусы === */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* === Прочее === */
	--transition: 0.2s ease;
}

/* Типографика (UI-кит)
   -------------------------------------------------------------------------- */
/* Desktop */
.h1 { font-family: var(--font-heading); font-weight: 400; font-size: 48px; line-height: 52px; }
.h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 46px; }
.h3 { font-family: var(--font-heading); font-weight: 500; font-size: 32px; line-height: 34px; }

.body-1 { font-family: var(--font-base); font-weight: 400; font-size: 16px; line-height: 20px; }
.body-2 { font-family: var(--font-base); font-weight: 400; font-size: 16px; line-height: 19px; }
.body-3 { font-family: var(--font-base); font-weight: 400; font-size: 14px; line-height: 16px; }

.button-text {
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Mobile */
@media (max-width: 767px) {
	.h1 { font-size: 30px; line-height: 32px; }
	.h2 { font-size: 26px; line-height: 28px; }
	.h3 { font-size: 24px; line-height: 28px; }

	.body-1 { font-size: 16px; line-height: 18px; }
	.body-2 { font-size: 14px; line-height: 16px; }
	.body-3 { font-size: 12px; line-height: 14px; }

	.button-text { font-weight: 600; }
}

/* Утилиты
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 8px 12px;
	background: var(--color-dark);
	color: #fff;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
}

/* Кнопки (UI-кит)
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	border: 0;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
	white-space: nowrap;
	text-align: center;
}

/* Универсальный hover для всех кнопок: белое кольцо вокруг.
   Варианты могут переопределить цвет кольца (см. .btn--dark ниже). */
.btn:hover {
	box-shadow: 0 0 0 2px var(--color-white);
}

/* Default — оранжевая, основная CTA */
.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn--primary:hover {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 0 0 2px var(--color-white);
}

/* Тёмная — вторичная (например, "Заказать звонок" в шапке) */
.btn--dark {
	background: var(--color-gray-900);
	color: var(--color-white);
}

.btn--dark:hover {
	background: var(--color-gray-900);
	color: var(--color-white);
	box-shadow: 0 0 0 2px var(--color-primary);   /* оранжевое кольцо */
}

/* Outline — на тёмном фоне */
.btn--outline {
	background: transparent;
	color: var(--color-white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.btn--outline:hover {
	background: transparent;
	color: var(--color-white);
	/* сохраняем внутреннюю обводку + добавляем внешнее белое кольцо */
	box-shadow: inset 0 0 0 1px var(--color-white), 0 0 0 2px var(--color-white);
}

/* Disabled */
.btn:disabled,
.btn--disabled {
	background: var(--color-text-disabled);
	color: var(--color-white);
	cursor: not-allowed;
	pointer-events: none;
}

/* Header — общий контейнер
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	background: var(--color-black);
	color: var(--color-white);
}

/* Topbar (верхняя полоса)
   -------------------------------------------------------------------------- */
.topbar {
	background: var(--color-secondary);   /* #171717 */
	color: #808080;
	font-family: var(--font-base);         /* Inter */
	font-weight: 400;
	font-size: 12px;
	line-height: 1.4;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.topbar__left,
.topbar__right {
	display: flex;
	align-items: center;
	gap: 32px;
}

.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	transition: color var(--transition);
}

.topbar__phone:hover {
	color: var(--color-primary);
}

.topbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.topbar__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Main bar (основная шапка) */
.main-bar {
	background: var(--color-black);
	color: var(--color-white);
}

.main-bar__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.main-bar__logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-on-dark);
	flex-shrink: 0;
}

.main-bar__logo svg {
	display: block;
	width: auto;
	height: 48px;
}

/* Главное меню — растянуто между лого и мессенджерами */
.main-nav {
	flex: 1;
	min-width: 0;
}

.main-nav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
	padding: 0 16px;
}

.main-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 400;
	color: var(--color-white);
	white-space: nowrap;
	transition: color var(--transition);
}

.main-nav__link:hover,
.main-nav__item--has-children:hover .main-nav__link {
	color: var(--color-primary);
}

.main-nav__chevron {
	display: inline-block;
	transition: transform var(--transition);
}

.main-nav__item--has-children:hover .main-nav__chevron {
	transform: rotate(180deg);
}

.main-nav__item--has-children {
	position: relative;
}

.main-nav__sub {
	position: absolute;
	top: calc(100% + 8px);
	left: -16px;
	min-width: 220px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--color-secondary);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
	z-index: 10;
}

.main-nav__item--has-children:hover .main-nav__sub,
.main-nav__item--has-children:focus-within .main-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav__sub li a {
	display: block;
	padding: 10px 20px;
	font-family: var(--font-base);
	font-size: 14px;
	color: var(--color-white);
	white-space: nowrap;
	transition: background var(--transition), color var(--transition);
}

.main-nav__sub li a:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-primary);
}

/* Мессенджеры */
.main-bar__messengers {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
}

.main-bar__messengers a {
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 10px;       /* единое скругление, чтобы MAX выглядел как Telegram/WhatsApp */
	overflow: hidden;
	transition: transform var(--transition);
}

.main-bar__messengers a:hover {
	transform: translateY(-2px);
}

.main-bar__messengers svg {
	display: block;
	width: 32px;
	height: 32px;
}

/* Контактный блок (телефон + статус) */
.main-bar__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

.main-bar__phone {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-on-dark);
	letter-spacing: 0.01em;
	transition: color var(--transition);
}

.main-bar__phone:hover {
	color: var(--color-primary);
}

.main-bar__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-on-dark-muted);
}

.main-bar__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-success);
	box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.6);
	animation: zaboryPulse 2s ease-out infinite;
}

@keyframes zaboryPulse {
	0%   { box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.5); }
	70%  { box-shadow: 0 0 0 6px rgba(46, 204, 64, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 64, 0); }
}

/* CTA-кнопка в шапке (по высоте как блок «телефон + Заявки онлайн») */
.main-bar__cta {
	flex-shrink: 0;
	min-height: 52px;
	padding: 0 28px;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* Hero
   -------------------------------------------------------------------------- */
.hero {
	background: var(--color-black);
	color: var(--color-white);
	padding: 0 24px 24px;              /* отступ от шапки берётся из padding-bottom main-bar (16px) */
}

.hero__media {
	position: relative;
	width: 100%;                       /* full-bleed между padding'ами hero */
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 560px;
	isolation: isolate;
}

.hero__picture {
	display: contents;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero__overlay {
	display: none;
}

.hero__layout {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);   /* текст выровнен по контейнеру 1200 */
	margin: 0 auto;
	padding: 48px var(--container-padding);
	min-height: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 57px;                          /* отступ от лида до кнопки */
}

.hero__top {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hero__badge {
	display: inline-block;
	padding: 10px 18px;
	margin-bottom: 28px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	color: var(--color-white);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.hero__title {
	font-family: var(--font-heading);  /* Bebas Neue Cyrillic */
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: 24px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hero__title-accent {
	color: var(--color-primary);
}

.hero__lead {
	max-width: 440px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: var(--color-white);
}

/* CTA "Получить расчёт" — у дизайнера без uppercase, обычный регистр */
.hero__cta {
	padding: 18px 36px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

@media (max-width: 1024px) {
	.hero {
		padding: 0 12px 12px;
	}

	.hero__media {
		min-height: 431px;
		height: 431px;
		border-radius: 20px;
	}

	.hero__image {
		object-position: center center;
	}

	.hero__layout {
		padding: 22px 18px 100px;
		min-height: 431px;
		gap: 16px;
		align-items: center;
		text-align: center;
	}

	.hero__top {
		max-width: 100%;
		align-items: center;
	}

	.hero__badge {
		padding: 8px 14px;
		font-size: 12px;
		line-height: 14px;
		margin-bottom: 18px;
	}

	.hero__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 14px;
	}

	.hero__lead {
		font-size: 14px;
		line-height: 20px;
		max-width: 100%;
	}

	.hero__cta {
		padding: 14px 28px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.hero__layout {
		padding: 24px 18px 180px;
	}
}

/* Карточки прижаты к низу, выровнены по правому краю контейнера */
.hero__cards-wrapper {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}

.hero__cards {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	pointer-events: auto;
}

.hero-card {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	min-width: 320px;
	padding: 24px 30px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-bottom: 0;
	border-radius: 16px 16px 0 0;            /* скругление только сверху */
	color: var(--color-white);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.hero-card__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.hero-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.hero-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hero-card__title {
	font-family: var(--font-heading);     /* Bebas Neue Cyrillic */
	font-weight: 400;
	font-size: 24px;
	line-height: 26px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-white);
}

.hero-card__sub {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--color-white);
}

@media (max-width: 1024px) {
	.hero__cards {
		padding: 0 8px;
		gap: 6px;
		justify-content: stretch;
	}

	.hero-card {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 14px 16px;
		border-radius: 14px 14px 0 0;
	}

	.hero-card__body {
		align-items: center;
		text-align: center;
	}

	.hero-card__icon {
		width: 32px;
		height: 32px;
	}

	.hero-card__title {
		font-size: 18px;
		line-height: 20px;
	}

	.hero-card__sub {
		font-size: 12px;
		line-height: 14px;
	}
}

@media (max-width: 480px) {
	.hero-card {
		padding: 12px 12px;
		gap: 6px;
	}

	.hero-card__icon {
		width: 28px;
		height: 28px;
	}

	.hero-card__title {
		font-size: 18px;
		line-height: 20px;
	}
}

/* Marquee (бегущая строка)
   -------------------------------------------------------------------------- */
.marquee {
	background: var(--color-secondary);   /* #171717 */
	color: var(--color-white);
	overflow: hidden;
	padding: 18px 0;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: zaboryMarquee 36s linear infinite;
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

.marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.marquee__item {
	font-size: 17px;
	font-weight: 500;
	white-space: nowrap;
	padding: 0 28px;
}

.marquee__divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.marquee__divider svg {
	width: 24px;
	height: 24px;
	display: block;
}

@keyframes zaboryMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}

@media (max-width: 1024px) {
	.marquee {
		padding: 0;
		height: 34px;
	}

	.marquee__track {
		height: 100%;
		align-items: center;
	}

	.marquee__group {
		height: 100%;
	}

	.marquee__item {
		font-size: 13px;
		line-height: 16px;
		padding: 0 16px;
	}

	.marquee__divider svg {
		width: 16px;
		height: 16px;
	}
}

/* ============================================================
   Преимущества (advantages)
   ============================================================ */

.advantages {
	background: var(--color-black);
	padding: 80px 24px;
	color: var(--color-white);
}

.advantages__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.advantages__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--color-white);
	text-align: center;
	margin: 0 0 40px;
}

.advantages__title-accent {
	display: block;
	color: var(--color-primary);
}

.advantages__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.adv-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 24px;
	background: #171717;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	aspect-ratio: 1;
}

.adv-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.adv-card__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	line-height: 34px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
	color: var(--color-white);
}

.adv-card__title--accent,
.adv-card__title-accent {
	color: var(--color-primary);
}

.adv-card__text {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	margin: 0;
	color: var(--color-white);
}

/* 1. Оранжевая «Делаем всё под ключ» */
.adv-card--orange {
	background: var(--color-primary);
	justify-content: flex-end;
}

.adv-card--orange .adv-card__decor {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 82%;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

/* 2. Гарантия с большим «2 года» */
.adv-card--warranty {
	justify-content: space-between;
}

.adv-card--warranty .adv-card__big {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 76px;
	line-height: 1;
	text-transform: uppercase;
	margin-top: auto;
	letter-spacing: 0.01em;
	background: linear-gradient(90deg, #FE6A01 0%, #FFB47E 50%, #FE6A01 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* 3. Семья (фото + текст сверху) */
.adv-card--photo {
	padding: 0;
}

.adv-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.adv-card--photo .adv-card__caption {
	position: relative;
	z-index: 2;
	padding: 24px 20px;
	text-align: center;
}

.adv-card--photo .adv-card__title {
	color: var(--color-primary);
	margin-bottom: 4px;
}

.adv-card--photo .adv-card__text {
	color: #4a4a4a;
}

/* 4. Вертикальное фото забора (растягивается на 2 ряда) с текстом «Быстрый монтаж под ключ» */
.adv-card--feature {
	grid-column: 4;
	grid-row: 1 / span 2;
	aspect-ratio: auto;
	padding: 0;
}

.adv-card--feature .adv-card__photo {
	inset: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 65%;
	object-fit: cover;
	object-position: center bottom;
}

.adv-card--feature .adv-card__caption {
	position: relative;
	z-index: 2;
	padding: 28px 24px;
}

.adv-card--feature .adv-card__title {
	margin-bottom: 12px;
}

/* 5. «Свой сварочный цех» — фото на всю карточку + текст оверлей сверху */
.adv-card--workshop {
	padding: 0;
}

.adv-card--workshop::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

.adv-card--workshop .adv-card__caption {
	position: relative;
	z-index: 2;
	padding: 24px;
}

/* 8. Широкая карточка «Бесплатный выезд замерщика» */
.adv-card--wide {
	grid-column: span 2;
	aspect-ratio: auto;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.adv-card--wide .adv-card__tape {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: auto;
	z-index: 0;
	display: block;
	pointer-events: none;
}

.adv-card--wide .adv-card__body {
	flex: 1;
	position: relative;
	z-index: 1;
	padding: 24px;
	max-width: 360px;
	margin-left: auto;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
}

.adv-card--wide .adv-card__title {
	margin-bottom: 10px;
}

.adv-card--wide .adv-card__btn {
	margin-top: 18px;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

.adv-card__decor-pic {
	display: contents;
}

.adv-card__photo-pic {
	display: contents;
}

.adv-card__decor-keys {
	display: none;
}

.adv-card__text--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.adv-card__text--desktop {
		display: none;
	}
	.adv-card__text--mobile {
		display: block;
	}
}

@media (max-width: 1024px) {
	.advantages {
		padding: 32px 0;
	}

	.advantages__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.advantages__title {
		font-size: 26px;
		line-height: 28px;
		margin-bottom: 20px;
		text-align: center;
	}

	.advantages__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.adv-card {
		aspect-ratio: auto;
		min-height: auto;
		padding: 22px 20px;
		border-radius: 14px;
		text-align: center;
		align-items: center;
	}

	.adv-card__body {
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.adv-card__caption {
		text-align: center;
	}

	.adv-card__title {
		font-size: 20px;
		line-height: 22px;
		margin-bottom: 8px;
	}

	.adv-card__text {
		font-size: 14px;
		line-height: 18px;
	}

	/* 1. Orange — фон-картинка с ключами и замком, текст по центру сверху */
	.adv-card--orange {
		min-height: 125px;
		justify-content: flex-start;
		padding: 14px 16px;
		overflow: hidden;
		background-image: url('../images/advantages/lock-card-mobile.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
	}

	.adv-card--orange .adv-card__title br {
		display: none;
	}

	.adv-card--orange .adv-card__title {
		margin-bottom: 4px;
	}

	.adv-card--orange .adv-card__body {
		position: relative;
		z-index: 2;
	}

	.adv-card--orange .adv-card__decor {
		display: none;
	}

	.adv-card__decor-keys {
		display: none;
	}

	/* 2. Warranty — большой «2 года» центром */
	.adv-card--warranty {
		min-height: 163px;
		height: 163px;
		justify-content: flex-start;
		gap: 6px;
		padding: 14px 16px;
	}

	.adv-card--warranty .adv-card__title {
		margin-bottom: 2px;
	}

	.adv-card--warranty .adv-card__big {
		font-size: 56px;
		line-height: 1;
		margin-top: auto;
		text-align: center;
		align-self: center;
	}

	/* 3. Photo (family) — текст сверху, фото снизу, белая подложка */
	.adv-card--photo {
		background: var(--color-white);
		padding: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 238px;
		height: 238px;
	}

	.adv-card--photo .adv-card__photo {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		flex: 1 1 auto;
		min-height: 0;
		object-fit: cover;
		object-position: center;
		display: block;
		order: 2;
	}

	.adv-card--photo .adv-card__caption {
		padding: 14px 16px 10px;
		order: 1;
		flex-shrink: 0;
	}

	.adv-card--photo .adv-card__title {
		margin-bottom: 2px;
	}

	/* 4. Workshop — фото на всю высоту с тёмным оверлеем, текст центром */
	.adv-card--workshop {
		min-height: 105px;
		height: 105px;
		order: 4;
		justify-content: center;
	}

	.adv-card--workshop .adv-card__caption {
		padding: 0 16px;
	}

	/* 5. Wide — "БЕСПЛАТНЫЙ ВЫЕЗД" акцент + кнопка, без рулетки на мобилке */
	.adv-card--wide {
		grid-column: auto;
		flex-direction: column;
		order: 5;
		min-height: 179px;
		height: 179px;
	}

	.adv-card--wide .adv-card__tape {
		display: none;
	}

	.adv-card--wide .adv-card__body {
		max-width: 100%;
		padding: 14px 16px;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.adv-card--wide .adv-card__title br {
		display: none;
	}

	.adv-card--wide .adv-card__title {
		font-size: 20px;
		line-height: 22px;
		white-space: nowrap;
	}

	.adv-card--wide .adv-card__btn {
		margin-top: 10px;
		width: 100%;
		padding: 10px 16px;
	}

	/* 6. Feature (вертикальный забор) — последний, фон-картинка */
	.adv-card--feature {
		grid-column: auto;
		grid-row: auto;
		order: 6;
		min-height: 163px;
		height: 163px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-image: url('../images/advantages/feature-mobile.png');
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
	}

	.adv-card--feature .adv-card__photo {
		display: none;
	}

	.adv-card--feature .adv-card__caption {
		padding: 14px 16px;
		order: 1;
	}

	.adv-card--feature .adv-card__text {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   Services — «Что мы изготавливаем и устанавливаем»
   ========================================================================== */
.services {
	background: var(--color-black);
	padding: 24px;
	color: var(--color-black);
}

.services__container {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: 60px 32px;
	max-width: 100%;
	margin: 0 auto;
}

.services__title {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 40px;
	color: var(--color-black);
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 376px));
	justify-content: center;
	gap: 16px;
}

.srv-card {
	position: relative;
	aspect-ratio: 1 / 1;
	color: var(--color-white);
	perspective: 1400px;
}

.srv-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.srv-card:hover .srv-card__inner,
.srv-card:focus-within .srv-card__inner {
	transform: rotateY(180deg);
}

.srv-card--demo .srv-card__inner {
	animation: srvFlipDemo 3.4s ease-in-out var(--demo-delay, 0s) 1 both;
}

@keyframes srvFlipDemo {
	0%   { transform: rotateY(0deg); }
	22%  { transform: rotateY(180deg); }
	72%  { transform: rotateY(180deg); }
	100% { transform: rotateY(0deg); }
}

.srv-card__face {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	isolation: isolate;
}

.srv-card__face--back {
	background: #161616;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 28px;
	text-align: center;
}

.srv-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.srv-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.75) 100%);
	z-index: 1;
}

.srv-card__corner {
	position: absolute;
	width: 36px;
	height: 36px;
	z-index: 2;
	pointer-events: none;
}

.srv-card__corner--tl {
	top: 16px;
	left: 16px;
	transform: rotate(180deg);
}

.srv-card__corner--br {
	bottom: 16px;
	right: 16px;
}

.srv-card__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	z-index: 2;
}

.srv-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22%;
	padding: 0 24px;
	z-index: 2;
	text-align: center;
}

.srv-card__title {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 28px;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--color-white);
}

.srv-card__text {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.srv-card__back-body {
	max-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	position: relative;
	z-index: 2;
}

.srv-card__face--back .srv-card__title {
	color: var(--color-white);
	margin: 0;
}

.srv-card__back-text {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.srv-card__btn {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

.srv-card__decor {
	position: absolute;
	bottom: 0;
	width: 60%;
	height: auto;
	pointer-events: none;
	z-index: 1;
}

.srv-card__decor--br {
	right: 0;
}

.srv-card__decor--bl {
	left: 0;
}

.services__cta {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.services__btn {
	padding: 14px 28px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

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

@media (max-width: 1024px) {
	.services {
		padding: 16px;
	}

	.services__container {
		padding: 28px 16px;
	}

	.services__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 24px;
	}

	.services__grid {
		grid-template-columns: 1fr;
		justify-content: center;
		gap: 12px;
	}

	.srv-card {
		width: 270px;
		max-width: 100%;
		aspect-ratio: 270 / 265;
		justify-self: center;
		cursor: pointer;
	}

	.srv-card:hover .srv-card__inner,
	.srv-card:focus-within .srv-card__inner {
		transform: none;
	}

	.srv-card.is-flipped .srv-card__inner {
		transform: rotateY(180deg);
	}

	.srv-card--demo .srv-card__inner {
		animation: none;
	}

	.srv-card__face--front {
		border-radius: 14px;
	}

	.srv-card__face--back {
		border-radius: 14px;
		padding: 24px 20px;
	}

	.srv-card__icon {
		width: 36px;
		height: 36px;
		top: 14px;
		right: 14px;
	}

	.srv-card__corner {
		width: 28px;
		height: 28px;
	}

	.srv-card__corner--tl {
		top: 12px;
		left: 12px;
	}

	.srv-card__corner--br {
		bottom: 12px;
		right: 12px;
	}

	.srv-card__caption {
		bottom: 18px;
		padding: 0 16px;
	}

	.srv-card__title {
		font-size: 28px;
		line-height: 30px;
		margin-bottom: 4px;
	}

	.srv-card__text {
		font-size: 13px;
		line-height: 16px;
	}

	.services__cta {
		margin-top: 20px;
	}

	.services__btn {
		width: 100%;
		max-width: 270px;
	}
}

/* ==========================================================================
   Portfolio — «Посмотрите как может выглядеть ваш участок»
   ========================================================================== */
.portfolio {
	background: var(--color-black);
	color: var(--color-white);
	padding: 60px 24px 0;
	position: relative;
}

.portfolio__decor {
	position: absolute;
	bottom: -24px;
	pointer-events: none;
	z-index: 0;
	display: block;
}

.portfolio__decor--left {
	left: 0;
	width: 220px;
	height: auto;
}

.portfolio__decor--right {
	right: 0;
	width: 320px;
	height: auto;
}

.portfolio__container {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}

.portfolio__viewport,
.portfolio__nav,
.portfolio__title {
	position: relative;
	z-index: 1;
}

.portfolio__container {
	max-width: 1280px;
	margin: 0 auto;
}

.portfolio__title {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 40px;
	color: var(--color-white);
}

.portfolio__viewport {
	overflow: hidden;
}

.portfolio__track {
	display: flex;
	gap: 24px;
	transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
	will-change: transform;
}

.proj-card {
	flex: 0 0 calc((100% - 48px) / 3);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.proj-card__media {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #1c1c1c;
}

.proj-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* === Слайдер фотографий внутри карточки === */
.proj-card__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.proj-card__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 700ms ease, transform 6000ms ease-out;
	will-change: opacity, transform;
}

.proj-card__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

/* Точки-индикаторы слайдов */
.proj-card__dots {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	z-index: 3;
	pointer-events: none;
}

.proj-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transition: background-color 250ms ease, transform 250ms ease;
}

.proj-card__dot.is-active {
	background: var(--color-primary);
	transform: scale(1.3);
}

/* Подсказка/теги должны лежать поверх слайдов */
.proj-card__hint,
.proj-card__tags {
	z-index: 2;
}

/* Лёгкая «дышащая» подсказка, что фото можно листать */
.proj-card__media--slider::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: 100% 0;
	animation: projShimmer 6s ease-in-out infinite;
	z-index: 1;
}

@keyframes projShimmer {
	0%   { background-position: 100% 0; }
	50%  { background-position: 0 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.proj-card__slide { transition: opacity 200ms ease; transform: none; }
	.proj-card__media--slider::after { animation: none; }
}

.proj-card__hint {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #1f1f1f;
	color: var(--color-white);
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	max-width: 240px;
}

.proj-card__hint-icon {
	width: 14px;
	height: 24px;
	flex-shrink: 0;
}

.proj-card__tags {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.proj-tag {
	padding: 8px 14px;
	border-radius: 8px;
	background: #1f1f1f;
	color: var(--color-white);
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
}

.proj-tag--accent {
	background: var(--color-primary);
	color: var(--color-white);
}

.proj-card__body {
	padding: 0 4px;
}

.proj-card__title {
	font-family: var(--font-heading);
	font-size: 28px;
	line-height: 32px;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--color-white);
}

.proj-card__text {
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	color: rgba(255, 255, 255, 0.66);
	margin: 0 0 18px;
}

.proj-card__note {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-primary);
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
}

.proj-card__note:hover {
	text-decoration: underline;
}

.proj-card__note-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.portfolio__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	padding-bottom: 40px;
}

.portfolio__arrow {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: none;
	background: #1d1d1d;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

.portfolio__arrow:hover {
	background: #2a2a2a;
}

.portfolio__arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 1100px) {
	.proj-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

@media (max-width: 720px) {
	.proj-card {
		flex: 0 0 100%;
	}

	.portfolio__title {
		font-size: 28px;
		line-height: 32px;
	}
}

@media (max-width: 1024px) {
	.portfolio {
		padding: 32px 16px 0;
	}

	.portfolio__decor {
		display: none;
	}

	.portfolio__title {
		font-size: 30px;
		line-height: 32px;
		margin: 0 0 20px;
	}

	.portfolio__track {
		gap: 16px;
	}

	.proj-card {
		flex: 0 0 100%;
		gap: 14px;
	}

	.proj-card__media {
		border-radius: 14px;
	}

	.proj-card__hint {
		max-width: 240px;
		font-size: 14px;
		line-height: 16px;
		padding: 8px 12px;
	}

	.proj-card__hint-icon {
		width: 12px;
		height: 18px;
	}

	.proj-card__tags {
		left: 10px;
		bottom: 10px;
		gap: 6px;
	}

	.proj-tag {
		padding: 6px 12px;
		font-size: 14px;
		line-height: 16px;
	}

	/* На мобилке у карточек со слайдером прячем подсказку — точки уже сами говорят,
	   что фото несколько, а длинный текст не помещается рядом с ними */
	.proj-card__media--slider .proj-card__hint {
		display: none;
	}

	/* Точки чуть компактнее на мобилке */
	.proj-card__dots {
		right: 10px;
		bottom: 10px;
		padding: 5px 8px;
		gap: 4px;
	}

	.proj-card__dot {
		width: 5px;
		height: 5px;
	}

	/* Тегам оставляем место справа под точки, разрешаем переноситься */
	.proj-card__media--slider .proj-card__tags {
		max-width: calc(100% - 110px);
	}

	.proj-card__body {
		padding: 0 4px;
	}

	.proj-card__title {
		font-size: 22px;
		line-height: 24px;
		margin: 0 0 8px;
	}

	.proj-card__text {
		font-size: 14px;
		line-height: 20px;
		margin: 0 0 12px;
	}

	.proj-card__note {
		font-size: 14px;
		line-height: 18px;
	}

	.proj-card__note-icon {
		width: 20px;
		height: 20px;
	}

	.portfolio__nav {
		gap: 12px;
		margin-top: 22px;
		padding-bottom: 28px;
	}

	.portfolio__arrow {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Steps — «Путь от заявки до готового результата»
   ========================================================================== */
.steps {
	background: var(--color-black);
	padding: 24px;
	color: var(--color-black);
}

.steps__container {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: 56px 0;
}

.steps__title {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto 40px;
	padding: 0 var(--container-padding);
	max-width: var(--container-max);
	color: var(--color-black);
}

.steps__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.step-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 0 24px;
	position: relative;
}

.step-card + .step-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.step-card__icon-box {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.step-card__icon-box svg,
.step-card__icon-img {
	width: 24px;
	height: 24px;
	display: block;
	object-fit: contain;
}

.step-card__title {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 28px;
	text-transform: uppercase;
	margin: 0;
	color: var(--color-black);
}

.step-card__text {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.62);
	margin: 0;
}

.steps__cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.steps__btn {
	padding: 16px 36px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
}

@media (max-width: 1000px) {
	.steps__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}
}

@media (max-width: 1024px) {
	.steps {
		padding: 16px;
	}

	.steps__container {
		padding: 28px 0;
	}

	.steps__title {
		font-size: 30px;
		line-height: 32px;
		margin: 0 auto 24px;
	}

	.steps__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.step-card {
		align-items: center;
		text-align: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		padding: 0;
	}

	.step-card + .step-card::before {
		content: "";
		position: absolute;
		top: -11px;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 0;
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		display: block;
	}

	.step-card__icon-box {
		width: 28px;
		height: 28px;
		border-radius: 6px;
	}

	.step-card__icon-box svg,
	.step-card__icon-img {
		width: 18px;
		height: 18px;
	}

	.step-card__title {
		font-size: 22px;
		line-height: 24px;
	}

	.step-card__text {
		flex-basis: 100%;
		margin-top: 4px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}

	.steps__cta {
		margin-top: 28px;
	}

	.steps__btn {
		width: 100%;
		max-width: 280px;
	}
}

/* ==========================================================================
   Testimonials — «Что говорят те, кто уже живёт с нашими заборами»
   ========================================================================== */
.testimonials {
	background: var(--color-black);
	color: var(--color-white);
	padding: 60px 24px 60px;
}

.testimonials__container {
	max-width: 1280px;
	margin: 0 auto;
}

.testimonials__title {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 40px;
	color: var(--color-white);
}

.testimonials__title-accent {
	display: block;
	color: var(--color-primary);
}

.testimonials__viewport {
	overflow: hidden;
}

.testimonials__track {
	display: flex;
	gap: 24px;
	transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
	will-change: transform;
}

.review-card {
	flex: 0 0 calc((100% - 48px) / 3);
	background: #1a1a1a;
	border-radius: 16px;
	padding: 28px 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.review-card__stars {
	display: inline-flex;
	align-self: flex-end;
	gap: 4px;
	margin-bottom: 8px;
}

.review-card__name {
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
	margin: 0;
	color: var(--color-white);
}

.review-card__text {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 22px;
	color: rgba(255, 255, 255, 0.66);
	margin: 0;
	flex: 1;
}

.review-card__foot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.review-card__house {
	flex-shrink: 0;
}

.review-card__tag {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: var(--color-primary);
}

.testimonials__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.testimonials__arrow {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: none;
	background: #1d1d1d;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

.testimonials__arrow:hover {
	background: #2a2a2a;
}

.testimonials__arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 1100px) {
	.review-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

@media (max-width: 720px) {
	.review-card {
		flex: 0 0 100%;
	}

	.testimonials__title {
		font-size: 28px;
		line-height: 32px;
	}
}

@media (max-width: 1024px) {
	.testimonials {
		padding: 32px 16px;
	}

	.testimonials__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 22px;
	}

	.testimonials__track {
		gap: 16px;
	}

	.review-card {
		flex: 0 0 100%;
		padding: 22px 22px 20px;
		gap: 12px;
	}

	.review-card__stars {
		align-self: flex-start;
		margin-bottom: 0;
		order: 2;
	}

	.review-card__name {
		font-size: 22px;
		line-height: 24px;
		order: 1;
	}

	.review-card__text {
		order: 3;
		font-size: 14px;
		line-height: 20px;
	}

	.review-card__foot {
		order: 4;
	}

	.review-card__tag {
		font-size: 14px;
		line-height: 18px;
	}

	.testimonials__nav {
		gap: 12px;
		margin-top: 22px;
	}

	.testimonials__arrow {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   Calc — «Рассчитаем полную стоимость под ваш участок»
   ========================================================================== */
.calc {
	background: var(--color-black);
	padding: 24px;
}

.calc__container {
	position: relative;
	max-width: 964px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: 48px 48px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	overflow: hidden;
}

.calc__corner {
	position: absolute;
	width: 48px;
	height: 48px;
	pointer-events: none;
	z-index: 2;
}

.calc__corner--tl {
	top: 24px;
	left: 24px;
	transform: rotate(180deg);
}

.calc__corner--br {
	bottom: 24px;
	right: 24px;
}

.calc__left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.calc__title {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 52px;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0;
}

.calc__lead {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.55);
	margin: 0;
	max-width: 380px;
}

.calc__photo {
	display: block;
	width: calc(100% + 48px);
	height: auto;
	margin: auto 0 -48px -48px;
	border-radius: 0 14px 0 var(--radius-xl);
}

.calc__form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}

.calc__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.calc__label {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.62);
}

.calc__input {
	width: 100%;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(0, 0, 0, 0.04);
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 20px;
	color: var(--color-black);
	outline: none;
	transition: border-color 0.2s, background 0.2s;
}

.calc__input::placeholder {
	color: rgba(0, 0, 0, 0.35);
}

.calc__input:focus {
	border-color: var(--color-primary);
	background: var(--color-white);
}

.calc__check-wrap .wpcf7-list-item {
	margin: 0;
}

.calc__check-wrap label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.78);
}

.calc__checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: transparent;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	transition: background 0.2s, border-color 0.2s;
}

.calc__checkbox:checked {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.calc__checkbox:checked::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 5px;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--color-white);
	border-bottom: 2px solid var(--color-white);
	transform: rotate(-45deg);
}

.calc__check-wrap .wpcf7-list-item-label a {
	color: rgba(0, 0, 0, 0.78);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.calc__check-wrap .wpcf7-list-item-label a:hover {
	color: var(--color-primary);
}

.calc__submit {
	margin-top: 8px;
	padding: 16px 36px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	align-self: flex-start;
}

@media (max-width: 900px) {
	.calc__container {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 28px;
	}

	.calc__title {
		font-size: 26px;
		line-height: 30px;
	}
}

@media (max-width: 1024px) {
	.calc {
		padding: 16px;
	}

	.calc__container {
		padding: 28px 30px;
		gap: 18px;
		grid-template-columns: 1fr;
	}

	.calc__corner {
		width: 36px;
		height: 36px;
	}

	.calc__corner--tl {
		top: 16px;
		left: 16px;
	}

	.calc__corner--br {
		bottom: 16px;
		right: 16px;
	}

	.calc__left {
		gap: 10px;
	}

	.calc__title {
		font-size: 26px;
		line-height: 28px;
	}

	.calc__lead {
		font-size: 14px;
		line-height: 20px;
		max-width: 100%;
	}

	.calc__photo {
		display: none;
	}

	.calc__form {
		gap: 14px;
	}

	.calc__field {
		gap: 6px;
	}

	.calc__label {
		font-size: 14px;
		line-height: 16px;
	}

	.calc__input {
		padding: 14px 16px;
		font-size: 14px;
		line-height: 18px;
		border-radius: 10px;
	}

	.calc__check {
		gap: 10px;
		font-size: 13px;
		line-height: 16px;
	}

	.calc__submit {
		width: 200px;
		align-self: center;
		padding: 14px 28px;
		margin-top: 4px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-black);
	color: var(--color-white);
	padding: 80px 24px 32px;
}

.site-footer__container {
	max-width: 1280px;
	margin: 0 auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 320px 1fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.footer-cta {
	background: #1a1a1a;
	border-radius: 18px;
	padding: 32px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.footer-cta__logo {
	display: inline-flex;
	margin-bottom: 4px;
}

.footer-cta__logo svg {
	width: 130px;
	height: auto;
	display: block;
}

.footer-cta__title {
	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 30px;
	text-transform: uppercase;
	color: var(--color-white);
	margin: 0;
}

.footer-cta__text {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.footer-cta__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.footer-cta__btn {
	width: 100%;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	text-align: center;
}

.footer-cta__btn.btn--ghost {
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.footer-cta__btn.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.36);
	color: var(--color-white);
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.footer-col__title {
	font-family: var(--font-heading);
	font-size: 18px;
	line-height: 22px;
	text-transform: uppercase;
	color: var(--color-white);
	margin: 0;
}

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

.footer-col__list a {
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: color 0.2s;
}

.footer-col__list a:hover {
	color: var(--color-primary);
}

.footer-col--contacts {
	gap: 12px;
}

.footer-contacts__phone {
	font-family: var(--font-base);
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.footer-contacts__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.78);
}

.footer-contacts__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2bd06e;
}

.footer-contacts__alt {
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	margin-top: 6px;
	transition: opacity .15s ease;
}

.footer-contacts__alt:hover,
.footer-contacts__alt:focus {
	opacity: 0.75;
}

.footer-contacts__line {
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

.footer-contacts__messengers {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	gap: 12px;
}

.footer-contacts__messengers a {
	display: inline-flex;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	overflow: hidden;
	align-items: center;
	justify-content: center;
}

.footer-contacts__messengers svg {
	width: 36px;
	height: 36px;
	display: block;
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 60px;
	padding-top: 24px;
	gap: 16px;
}

.site-footer__copy,
.site-footer__policy {
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	text-decoration: none;
}

.site-footer__policy:hover {
	color: var(--color-primary);
}

@media (max-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: 320px repeat(2, 1fr);
		gap: 40px 32px;
	}

	.footer-col--contacts {
		grid-column: span 2;
	}
}

@media (max-width: 720px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.footer-col--contacts {
		grid-column: auto;
	}

	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 1024px) {
	.site-footer {
		padding: 32px 16px 24px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px 22px;
	}

	.footer-cta {
		grid-column: 1 / -1;
		order: 1;
		text-align: center;
		align-items: center;
		padding: 26px 22px 24px;
		gap: 12px;
	}

	.footer-cta__logo svg {
		width: 110px;
	}

	.footer-cta__title {
		font-size: 22px;
		line-height: 24px;
	}

	.footer-cta__text {
		font-size: 14px;
	}

	.footer-cta__buttons {
		width: 100%;
	}

	.footer-col--contacts {
		grid-column: 1 / -1;
		order: 2;
		text-align: center;
		align-items: center;
		gap: 8px;
	}

	.footer-col--contacts .footer-col__title {
		text-align: center;
		color: var(--color-white);
	}

	.footer-contacts__phone {
		font-size: 14px;
		line-height: 18px;
	}

	.footer-contacts__alt,
	.footer-contacts__line,
	.footer-contacts__status,
	.footer-contacts__messengers {
		margin: 0;
	}

	.footer-contacts__messengers {
		justify-content: center;
		margin-top: 14px;
		gap: 14px;
	}

	.footer-contacts__messengers a {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}

	.footer-contacts__messengers svg {
		width: 40px;
		height: 40px;
	}

	.site-footer__grid > :nth-child(3) {
		order: 3;
	}

	.site-footer__grid > :nth-child(2) {
		order: 4;
	}

	.footer-col {
		gap: 14px;
	}

	.footer-col__list {
		gap: 12px;
	}

	.site-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		margin-top: 32px;
	}
}

/* Каталог — Hero
   -------------------------------------------------------------------------- */
.catalog-hero {
	background: var(--color-black);
	color: var(--color-white);
	padding: 0 24px 0;
}

.catalog-hero__crumbs-wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 16px var(--container-padding) 16px;
}

.catalog-hero__media {
	position: relative;
	width: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 480px;
	isolation: isolate;
}

.catalog-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.catalog-hero__layout {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 48px var(--container-padding);
	min-height: 480px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.catalog-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.55);
}

.catalog-hero__crumb {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

a.catalog-hero__crumb:hover {
	color: var(--color-white);
}

.catalog-hero__crumb--current {
	color: rgba(255, 255, 255, 0.8);
}

.catalog-hero__crumb-sep {
	color: rgba(255, 255, 255, 0.35);
}

.catalog-hero__title {
	max-width: 720px;
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.catalog-hero__title-accent {
	color: var(--color-primary);
}

.catalog-hero__title-logo {
	display: inline-flex;
	align-items: center;
	height: 0.9em;
	margin-right: 0.2em;
	color: var(--color-white);
	vertical-align: -0.05em;
}

.catalog-hero__title-logo svg {
	height: 100%;
	width: auto;
	display: block;
}

.catalog-hero__lead {
	max-width: 540px;
	margin: 0 0 36px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: var(--color-white);
}

.catalog-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}

/* Hero с центрированным по высоте контентом (страница «Акции») */
.catalog-hero--centered .catalog-hero__layout {
	justify-content: center;
}

.catalog-hero--centered .catalog-hero__buttons {
	margin-top: var(--hero-buttons-gap, 40px);
}

.catalog-hero__btn {
	padding: 16px 30px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

.catalog-hero__btn.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.catalog-hero__btn.btn--ghost {
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.catalog-hero__btn.btn--ghost:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
	.catalog-hero__title { font-size: 34px; line-height: 38px; }
	.catalog-hero__layout { min-height: 420px; }
	.catalog-hero__media { min-height: 420px; }
}

/* На десктопе мобильный break прячем — нужен только на узких экранах. */
.catalog-hero__lead br.hero-br--mobile,
.catalog-hero__title br.hero-br--mobile { display: none; }

@media (max-width: 600px) {
	.catalog-hero { padding: 0 16px 0; }
	.catalog-hero__title { font-size: 26px; line-height: 30px; }
	.catalog-hero__lead br:not(.hero-br--mobile),
	.catalog-hero__title br:not(.hero-br--mobile) { display: none; }
	.catalog-hero__lead br.hero-br--mobile,
	.catalog-hero__title br.hero-br--mobile { display: inline; }
	.catalog-hero__crumbs-wrap { padding: 12px var(--container-padding); }
}

.catalog-hero__picture {
	display: contents;
}

@media (max-width: 1024px) {
	.catalog-hero {
		padding: 0 12px 0;
	}

	.catalog-hero__crumbs-wrap {
		padding: 10px 8px;
	}

	.catalog-hero__crumbs {
		font-size: 13px;
		line-height: 16px;
	}

	.catalog-hero__media {
		min-height: 340px;
		height: 340px;
		border-radius: 20px;
	}

	.catalog-hero__image {
		object-position: center;
	}

	.catalog-hero__layout {
		min-height: 340px;
		height: 340px;
		padding: 18px 18px 20px;
		align-items: center;
		text-align: center;
	}

	.catalog-hero__title {
		max-width: 100%;
		font-size: 30px;
		line-height: 32px;
		margin: 0 0 8px;
	}

	.catalog-hero__lead {
		max-width: 100%;
		font-size: 16px;
		line-height: 22px;
		margin: 0 0 12px;
	}

	.catalog-hero__lead br {
		display: none;
	}

	.catalog-hero--centered .catalog-hero__lead {
		margin-bottom: 0;
	}

	.catalog-hero__buttons {
		flex-direction: column;
		width: auto;
		align-items: center;
		gap: 10px;
		margin-top: auto;
	}

	.catalog-hero__btn {
		width: 200px;
		padding: 14px 24px;
	}

	/* /about/ hero — на мобиле логотип СКМ выносим над заголовком,
	   тире прячем, остальной текст красим в primary. */
	.catalog-hero__title .catalog-hero__title-logo {
		display: flex;
		justify-content: center;
		height: auto;
		max-height: 32px;
		margin: 0 auto 10px;
	}

	.catalog-hero__title .catalog-hero__title-logo svg {
		height: 32px;
		width: auto;
	}

	.about-hero__title-sep {
		display: none;
	}

	.about-hero__title-text {
		display: block;
	}
}

/* Feature strip mobile */
@media (max-width: 1024px) {
	.feature-strip {
		padding: 12px;
	}

	.feature-strip__list {
		flex-direction: column;
		gap: 8px;
	}

	.feature-strip__item {
		width: 100%;
		text-align: center;
		padding: 14px 18px;
		font-size: 14px;
		white-space: normal;
		background: #1a1a1a;
		border-radius: 999px;
	}
}

/* Лента 4 преимуществ под hero
   -------------------------------------------------------------------------- */
.feature-strip {
	background: var(--color-black);
	padding: 24px;
}

.feature-strip__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.feature-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.feature-strip__item {
	padding: 14px 28px;
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: var(--color-white);
	background: var(--color-secondary);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.feature-strip__list {
		justify-content: flex-start;
	}
	.feature-strip__item {
		padding: 12px 18px;
		font-size: 13px;
	}
}

/* Каталог — сетка карточек товаров
   -------------------------------------------------------------------------- */
.cat-grid {
	background: var(--color-black);
	padding: 24px 24px 80px;
}

.cat-grid__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.cat-grid__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.cat-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.cat-grid__item {
	display: flex;
}

.cat-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--color-white);
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--color-black);
}

.cat-card__media {
	padding: 16px 16px 0;
}

.cat-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
}

.cat-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 24px 24px;
	gap: 8px;
}

.cat-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-black);
}

.cat-card__desc {
	margin: 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.65);
}

.cat-card__price {
	margin: 8px 0 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: var(--color-black);
}

.cat-card__price-label {
	color: rgba(0, 0, 0, 0.65);
	margin-right: 4px;
}

.cat-card__price-value {
	font-weight: 700;
}

.cat-card__time {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: var(--color-black);
}

.cat-card__time-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.cat-card__time-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cat-card__time-label {
	color: rgba(0, 0, 0, 0.65);
	margin-right: 2px;
}

.cat-card__time-value {
	font-weight: 700;
}

.cat-card__btn {
	margin-top: auto;
	width: 100%;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

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

@media (max-width: 600px) {
	.cat-grid {
		padding: 24px 16px 60px;
	}
	.cat-grid__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.cat-grid__title {
		font-size: 26px;
		line-height: 30px;
	}
}

@media (max-width: 1024px) {
	.cat-grid {
		padding: 28px 16px 32px;
	}

	.cat-grid__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 18px;
	}

	.cat-grid__list {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.cat-card {
		border-radius: 18px;
	}

	.cat-card__media {
		padding: 12px 12px 0;
	}

	.cat-card__image {
		height: 200px;
		border-radius: 12px;
	}

	.cat-card__body {
		padding: 16px 18px 18px;
		gap: 6px;
	}

	.cat-card__title {
		font-size: 20px;
		line-height: 22px;
	}

	.cat-card__desc {
		font-size: 14px;
		line-height: 18px;
	}

	.cat-card__price,
	.cat-card__time {
		font-size: 14px;
		line-height: 18px;
	}

	.cat-card__btn {
		padding: 12px 20px;
		margin-top: 10px;
	}
}

/* Заборы — «Выберите тип забора» (тёмные карточки)
   -------------------------------------------------------------------------- */
.fence-types {
	background: var(--color-black);
	padding: 24px 24px 80px;
}

.fence-types__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.fence-types__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.fence-types__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.fence-types__item {
	display: flex;
}

.ftype-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.ftype-card__media {
	padding: 16px 16px 0;
}

.ftype-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 12px;
}

.ftype-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 24px 20px;
	gap: 8px;
}

.ftype-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	line-height: 34px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}

.ftype-card__desc {
	margin: 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: var(--color-white);
}

.ftype-card__feature {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: var(--color-white);
}

.ftype-card__feature-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.ftype-card__price {
	margin: auto 0 12px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: linear-gradient(90deg, #FE6A01 0%, #FFB47E 50%, #FE6A01 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.ftype-card__btn {
	margin-top: 0;
	width: 100%;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

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

@media (max-width: 600px) {
	.fence-types {
		padding: 24px 16px 60px;
	}
	.fence-types__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.fence-types__title {
		font-size: 26px;
		line-height: 30px;
	}
}

@media (max-width: 1024px) {
	.fence-types {
		padding: 28px 16px 32px;
	}

	.fence-types__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 18px;
	}

	.fence-types__list {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ftype-card {
		border-radius: 18px;
	}

	.ftype-card__media {
		padding: 12px 12px 0;
	}

	.ftype-card__image {
		height: 200px;
		border-radius: 12px;
	}

	.ftype-card__body {
		padding: 16px 18px 20px;
		gap: 6px;
	}

	.ftype-card__title {
		font-size: 24px;
		line-height: 26px;
	}

	.ftype-card__desc,
	.ftype-card__feature {
		font-size: 14px;
		line-height: 18px;
	}

	.ftype-card__btn {
		padding: 12px 20px;
		margin-top: 10px;
	}
}

/* FAQ — «Часто задаваемые вопросы»
   -------------------------------------------------------------------------- */
.faq {
	background: var(--color-black);
	padding: 24px 24px 80px;
}

.faq__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.faq__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.faq-card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--color-black);
}

.faq-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 28px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Скрываем дефолтный треугольник <details> */
.faq-card__head::-webkit-details-marker { display: none; }
.faq-card__head::marker                  { display: none; content: ''; }

.faq-card__question {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	line-height: 34px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-black);
}

.faq-card__chevron {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: rgba(0, 0, 0, 0.55);
	transition: transform var(--transition);
}

.faq-card[open] .faq-card__chevron {
	transform: rotate(180deg);
}

.faq-card__body {
	padding: 0 28px 22px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.78);
}

.faq-card__body p {
	margin: 0;
}

@media (max-width: 720px) {
	.faq__list {
		grid-template-columns: 1fr;
	}
	.faq {
		padding: 24px 16px 60px;
	}
	.faq__title {
		font-size: 26px;
		line-height: 30px;
	}
	.faq-card__head {
		padding: 18px 22px;
	}
	.faq-card__question {
		font-size: 24px;
		line-height: 28px;
	}
	.faq-card__body {
		padding: 0 22px 18px;
	}
}

@media (max-width: 1024px) {
	.faq__title {
		font-size: 30px;
		line-height: 32px;
		margin-bottom: 18px;
	}
}

/* Акции — «Сейчас выгодно»
   -------------------------------------------------------------------------- */
.promo-deals {
	background: var(--color-black);
	padding: 32px 24px 80px;
}

.promo-deals__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.promo-deals__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.promo-deals__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.promo-deals__item {
	display: flex;
}

.deal-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--color-white);
}

.deal-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	isolation: isolate;
}

.deal-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.deal-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.65) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px 28px;
	gap: 4px;
}

.deal-card__discount {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 64px;
	line-height: 1;
	letter-spacing: 0.01em;
	background: linear-gradient(90deg, #FE6A01 0%, #FFB47E 50%, #FE6A01 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.deal-card__until {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-white);
}

.deal-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 28px 28px;
}

.deal-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}

.deal-card__desc {
	margin: 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.75);
}

.deal-card__btn {
	margin-top: auto;
	width: 100%;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0.01em;
}

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

@media (max-width: 600px) {
	.promo-deals {
		padding: 24px 16px 60px;
	}
	.promo-deals__list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.promo-deals__title {
		font-size: 32px;
		line-height: 36px;
	}
	.deal-card__discount {
		font-size: 48px;
	}
}

/* О компании — «Наша миссия и ценности»
   -------------------------------------------------------------------------- */
.mission {
	background: var(--color-black);
	padding: 32px 24px 60px;
}

.mission__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.mission__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.mission__title-accent {
	display: block;
	margin-top: 8px;
	font-size: 32px;
	line-height: 36px;
	color: var(--color-primary);
}

.mission__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mission-card {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 100px;
	padding: 16px 20px;
	background: var(--color-white);
	border-radius: 16px;
	color: var(--color-black);
}

.mission-card__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.mission-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mission-card__text {
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 20px;
	color: var(--color-black);
}

@media (max-width: 1000px) {
	.mission__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.mission {
		padding: 24px 16px 48px;
	}
	.mission__title {
		font-size: 32px;
		line-height: 36px;
	}
	.mission__title-accent {
		font-size: 18px;
		line-height: 22px;
	}
}

/* О компании — «Наше производство»
   -------------------------------------------------------------------------- */
.production {
	background: var(--color-black);
	padding: 32px 24px 60px;
}

.production__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.production__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-white);
}

.production__card {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 32px;
	padding: 16px;
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
	align-items: stretch;
}

.production__media {
	overflow: hidden;
	border-radius: 16px;
}

.production__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.production__body {
	display: flex;
	flex-direction: column;
	padding: 16px 24px 24px;
}

.production__heading {
	margin: 0 0 16px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.production__text br.prod-br--mobile { display: none; }
.production__heading .prod-heading-tail { display: inline; }

.production__text {
	margin: 0;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	color: var(--color-white);
}

.production__features {
	margin: auto 0 0;
	padding: 32px 0 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.production__feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	color: var(--color-white);
}

.production__feature-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.production__feature-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 900px) {
	.production__card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.production {
		padding: 24px 16px 48px;
	}
	.production__title {
		font-size: 32px;
		line-height: 36px;
	}
	.production__heading {
		font-size: 20px;
		line-height: 22px;
	}
	.production__body {
		padding: 8px 12px 16px;
	}
}

@media (max-width: 1024px) {
	.production {
		padding: 28px 16px 32px;
	}

	.production__card {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		padding: 16px;
		gap: 0;
	}

	.production__body {
		display: contents;
	}

	.production__heading {
		order: 1;
		font-size: 20px;
		line-height: 22px;
		margin: 0 0 3px;
		padding: 0 4px;
	}

	.production__text {
		order: 1;
		font-size: 12px;
		line-height: 16px;
		padding: 0 4px;
		margin: 0 0 16px;
	}

	.production__text br.prod-br--desktop { display: none; }
	.production__text br.prod-br--mobile { display: inline; }
	.production__heading .prod-heading-tail { display: block; }

	.production__media {
		order: 2;
		margin: 0 0 16px;
	}

	.production__image {
		aspect-ratio: 16 / 10;
		height: auto;
		border-radius: 14px;
	}

	.production__features {
		order: 3;
		margin: 0;
		padding: 4px 4px 0;
		gap: 12px;
	}

	.production__feature {
		font-size: 14px;
		line-height: 18px;
	}
}

/* Портфолио — сетка 3×3
   -------------------------------------------------------------------------- */
.portfolio-grid {
	background: var(--color-black);
	padding: 32px 24px 80px;
}

.portfolio-grid__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.portfolio-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

.portfolio-grid__item {
	flex: initial;
	width: auto;
}

.portfolio-grid__nav {
	display: none;
}

.portfolio-grid__title {
	display: none;
}

@media (max-width: 1024px) {
	.portfolio-grid__title {
		display: block;
		margin: 0 0 18px;
		font-family: var(--font-heading);
		font-weight: 400;
		font-size: 30px;
		line-height: 32px;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		text-align: center;
		color: var(--color-white);
		padding: 0 16px;
	}
}

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

@media (max-width: 600px) {
	.portfolio-grid {
		padding: 24px 16px 60px;
	}
}

@media (max-width: 1024px) {
	.portfolio-grid {
		padding: 28px 0 32px;
	}

	.portfolio-grid__container {
		padding: 0;
	}

	.portfolio-grid__list {
		display: flex;
		flex-direction: row;
		grid-template-columns: none;
		gap: 14px;
		padding: 0 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-behavior: smooth;
	}

	.portfolio-grid__list::-webkit-scrollbar {
		display: none;
	}

	.portfolio-grid__item {
		flex: 0 0 calc(100% - 32px);
		scroll-snap-align: center;
	}

	.portfolio-grid__nav {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 22px;
		padding-bottom: 0;
	}

	.portfolio-grid__arrow {
		width: 44px;
		height: 44px;
		border-radius: 999px;
		border: none;
		background: #1d1d1d;
		color: var(--color-white);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background 0.2s, opacity 0.2s;
	}

	.portfolio-grid__arrow:hover {
		background: #2a2a2a;
	}

	.portfolio-grid__arrow:disabled {
		opacity: 0.4;
		cursor: not-allowed;
	}
}

/* Контакты — «Все способы связи»
   -------------------------------------------------------------------------- */
.contacts-block {
	background: var(--color-black);
	padding: 16px 24px 60px;
}

.contacts-block__container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.contacts-block__card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	padding: 16px;
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
}

.contacts-block__media {
	overflow: hidden;
	border-radius: 16px;
}

.contacts-block__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contacts-block__body {
	display: flex;
	flex-direction: column;
	padding: 8px 24px 24px;
	gap: 14px;
	align-items: flex-start;
	text-align: left;
}

.contacts-block__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.contacts-block__lead {
	margin: 0;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.78);
	max-width: 320px;
}

.contacts-block__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	align-items: flex-start;
}

.contacts-block__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contacts-block__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.contacts-block__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.contacts-block__phone,
.contacts-block__mail,
.contacts-block__address {
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	color: var(--color-white);
	text-decoration: none;
}

.contacts-block__mail {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 3px;
}

.contacts-block__phone:hover,
.contacts-block__mail:hover {
	color: var(--color-primary);
}

.contacts-block__messengers {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.contacts-block__messengers li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	overflow: hidden;
}

.contacts-block__messengers li svg {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 900px) {
	.contacts-block__card {
		grid-template-columns: 1fr;
	}
	.contacts-block__body {
		padding: 8px 12px 16px;
	}
}

@media (max-width: 600px) {
	.contacts-block {
		padding: 16px 16px 48px;
	}
	.contacts-block__title {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (max-width: 1024px) {
	.contacts-block {
		padding: 16px 16px 32px;
	}

	.contacts-block__card {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		padding: 22px 18px;
		gap: 14px;
		align-items: center;
		text-align: center;
	}

	.contacts-block__body {
		display: contents;
	}

	.contacts-block__title {
		order: 1;
		text-align: center;
		margin: 0;
	}

	.contacts-block__lead {
		order: 2;
		text-align: center;
		max-width: 100%;
		padding: 0 8px;
		font-size: 14px;
		line-height: 18px;
	}

	.contacts-block__media {
		order: 3;
		width: 100%;
		border-radius: 14px;
	}

	.contacts-block__image {
		aspect-ratio: 16 / 9;
		height: auto;
		display: block;
	}

	.contacts-block__list {
		order: 4;
		align-items: center;
		gap: 10px;
		margin: 4px 0 0;
	}

	.contacts-block__row {
		justify-content: center;
	}

	.contacts-block__phone,
	.contacts-block__mail,
	.contacts-block__address {
		font-size: 14px;
		line-height: 18px;
		text-align: center;
	}

	.contacts-block__messengers {
		order: 5;
		justify-content: center;
		margin: 6px 0 0;
		gap: 12px;
	}

	.contacts-block__messengers li a,
	.contacts-block__messengers li svg {
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}
}

/* Политика конфиденциальности
   -------------------------------------------------------------------------- */
.legal {
	background: var(--color-black);
	color: var(--color-white);
	padding: 16px 24px 60px;
}

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

.legal__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0 24px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.55);
}

.legal__crumb {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

a.legal__crumb:hover { color: var(--color-white); }

.legal__crumb--current { color: rgba(255, 255, 255, 0.8); }
.legal__crumb-sep { color: rgba(255, 255, 255, 0.35); }

.legal__title {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 56px;
	line-height: 60px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}

.legal__content {
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	color: rgba(255, 255, 255, 0.85);
}

.legal__heading {
	margin: 0 0 16px;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--color-white);
}

.legal__section {
	margin: 28px 0 12px;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	color: var(--color-white);
}

.legal__content p {
	margin: 0 0 12px;
}

.legal__num {
	font-weight: 700;
	color: var(--color-white);
	margin-right: 4px;
}

.legal__list {
	margin: 0 0 12px;
	padding-left: 20px;
}

.legal__list li {
	margin-bottom: 8px;
}

.legal__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(254, 106, 1, 0.5);
}

.legal__content a:hover {
	text-decoration-color: var(--color-primary);
}

@media (max-width: 600px) {
	.legal {
		padding: 8px 16px 48px;
	}
	.legal__title {
		font-size: 36px;
		line-height: 40px;
	}
}

/* 404
   -------------------------------------------------------------------------- */
.error-404 {
	background: var(--color-black);
	color: var(--color-white);
	padding: 16px 24px 80px;
}

.error-404__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.error-404__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 0 24px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.55);
}

.error-404__crumb {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

a.error-404__crumb:hover { color: var(--color-white); }

.error-404__crumb--current { color: rgba(255, 255, 255, 0.8); }
.error-404__crumb-sep { color: rgba(255, 255, 255, 0.35); }

.error-404__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 60px 0 40px;
}

.error-404__code {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 350px;
	line-height: 0.85;
	letter-spacing: 0.02em;
	color: rgba(254, 106, 1, 0.18);
	margin-bottom: 24px;
}

.error-404__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}

.error-404__btn {
	min-width: 280px;
	padding: 18px 36px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.01em;
}

@media (max-width: 600px) {
	.error-404__code {
		font-size: 140px;
	}
	.error-404__title {
		font-size: 32px;
		line-height: 36px;
	}
}

/* Модальные формы
   -------------------------------------------------------------------------- */
.modal[hidden] { display: none; }

.modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.modal__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--color-secondary);
	border-radius: var(--radius-xl);
	padding: 32px 32px 28px;
	color: var(--color-white);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	border-radius: 8px;
	transition: color var(--transition), background var(--transition);
}

.modal__close:hover {
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.08);
}

.modal__title {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}

.modal__lead {
	margin: 0 0 20px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.78);
}

.modal__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.modal__label {
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.6);
}

.modal__input {
	width: 100%;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 10px;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 18px;
	color: var(--color-black);
}

.modal__input::placeholder {
	color: rgba(0, 0, 0, 0.35);
}

.modal__check-wrap {
	margin-top: 6px;
}

.modal__check-wrap .wpcf7-list-item {
	margin: 0;
}

.modal__check-wrap label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-base);
	font-size: 13px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.78);
	cursor: pointer;
}

.modal__checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 1.5px solid var(--color-primary);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.modal__checkbox:checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	background: var(--color-primary);
	border-radius: 2px;
}

.modal__check-wrap .wpcf7-list-item-label a {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.modal__submit {
	width: 100%;
	margin-top: 6px;
	padding: 16px 24px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.01em;
}

body.modal-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.modal__dialog {
		padding: 24px 22px 22px;
	}
	.modal__title {
		font-size: 24px;
		line-height: 28px;
	}
}

/* ==========================================================================
   Mobile header: бургер + drawer
   ========================================================================== */
.main-bar__messengers-call {
	display: none;
}

.main-bar__burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 8px;
	transition: background var(--transition);
}

.main-bar__burger:hover {
	background: rgba(255, 255, 255, 0.08);
}

.main-bar__burger-line {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* Mobile drawer (скрыт по умолчанию, активен на мобилках) */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.mobile-drawer[hidden] {
	display: none;
}

.mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--transition);
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
	opacity: 1;
}

.mobile-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 88vw);
	background: var(--color-secondary);
	color: var(--color-white);
	padding: 20px 24px 32px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 280ms ease;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}

.mobile-drawer.is-open .mobile-drawer__panel {
	transform: translateX(0);
}

.mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.mobile-drawer__logo {
	display: inline-flex;
	color: var(--color-on-dark);
}

.mobile-drawer__logo svg {
	display: block;
	height: 40px;
	width: auto;
}

.mobile-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	border-radius: 8px;
	transition: background var(--transition);
}

.mobile-drawer__close:hover {
	background: rgba(255, 255, 255, 0.08);
}

.mobile-drawer__nav {
	flex: 0 0 auto;
}

.mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-drawer__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-drawer__item > a {
	display: block;
	padding: 16px 0;
	font-family: var(--font-base);
	font-size: 17px;
	color: var(--color-white);
	transition: color var(--transition);
}

.mobile-drawer__item > a:hover {
	color: var(--color-primary);
}

.mobile-drawer__details {
	border: 0;
}

.mobile-drawer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	font-family: var(--font-base);
	font-size: 17px;
	color: var(--color-white);
	cursor: pointer;
	list-style: none;
}

.mobile-drawer__summary::-webkit-details-marker {
	display: none;
}

.mobile-drawer__chevron {
	transition: transform 200ms ease;
	flex-shrink: 0;
}

.mobile-drawer__details[open] .mobile-drawer__chevron {
	transform: rotate(180deg);
}

.mobile-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 12px 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mobile-drawer__sub li a {
	display: block;
	padding: 10px 0 10px 16px;
	font-family: var(--font-base);
	font-size: 15px;
	color: var(--color-on-dark-muted);
	transition: color var(--transition);
}

.mobile-drawer__sub li a:hover {
	color: var(--color-primary);
}

.mobile-drawer__contacts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-drawer__phone {
	font-family: var(--font-base);
	font-size: 22px;
	font-weight: 700;
	color: var(--color-white);
	transition: color var(--transition);
}

.mobile-drawer__phone:hover {
	color: var(--color-primary);
}

.mobile-drawer__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-on-dark-muted);
	margin-bottom: 6px;
}

.mobile-drawer__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-success);
	box-shadow: 0 0 0 0 rgba(46, 204, 64, 0.6);
	animation: zaboryPulse 2s ease-out infinite;
}

.mobile-drawer__phone-alt {
	font-family: var(--font-base);
	font-size: 16px;
	color: var(--color-white);
	transition: color var(--transition);
}

.mobile-drawer__phone-alt:hover {
	color: var(--color-primary);
}

.mobile-drawer__line {
	margin: 0;
	font-family: var(--font-base);
	font-size: 13px;
	color: var(--color-on-dark-muted);
}

.mobile-drawer__cta {
	width: 100%;
	margin-top: 8px;
}

body.drawer-open {
	overflow: hidden;
}

/* Переключение на мобильный режим (≤1024px) */
@media (max-width: 1024px) {
	.topbar {
		display: none;
	}

	.main-bar__inner {
		gap: 10px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.main-bar__logo svg {
		height: 36px;
	}

	.main-nav,
	.main-bar__contact,
	.main-bar__cta {
		display: none;
	}

	.main-bar__messengers-call {
		display: block;
	}

	.main-bar__messengers {
		margin-left: auto;
		gap: 10px;
	}

	.main-bar__messengers a {
		border-radius: 20px;
	}

	.main-bar__messengers a,
	.main-bar__messengers svg {
		width: 36px;
		height: 36px;
	}

	/* Telegram скрываем в мобильной шапке — иконка уже есть рядом со звонком/мессенджерами */
	.main-bar__messengers li:has([aria-label="Telegram"]) {
		display: none;
	}

	.main-bar__burger {
		display: inline-flex;
	}
}

@media (max-width: 480px) {
	.main-bar__inner {
		gap: 8px;
	}

	.main-bar__messengers {
		gap: 8px;
	}

	.main-bar__messengers a,
	.main-bar__messengers svg {
		width: 32px;
		height: 32px;
	}

	.main-bar__logo svg {
		height: 32px;
	}
}


/* ==========================================================================
   Унифицированный размер заголовков блоков на мобилке
   ========================================================================== */
@media (max-width: 1024px) {
	.advantages__title,
	.services__title,
	.portfolio__title,
	.steps__title,
	.testimonials__title,
	.calc__title,
	.cat-grid__title,
	.fence-types__title,
	.faq__title,
	.promo-deals__title,
	.mission__title,
	.production__title,
	.contacts-block__title {
		font-size: 30px;
		line-height: 32px;
	}
}


/* Lightbox */
.ftype-card__image,
.proj-card__media[data-lightbox],
.proj-card__media[data-lightbox] .proj-card__photo,
.proj-card__media[data-lightbox] .proj-card__hint { cursor: zoom-in; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	background: rgba(0, 0, 0, 0.92);
	cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	border-radius: 6px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	outline: none;
}

.lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
	z-index: 2;
}

.lightbox__arrow[hidden] { display: none; }

.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	outline: none;
}

.lightbox__arrow--prev { left: 16px; }
.lightbox__arrow--next { right: 16px; }

.lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: var(--font-base);
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	z-index: 2;
	pointer-events: none;
}

.lightbox__counter[hidden] { display: none; }

@media (max-width: 1024px) {
	.lightbox { padding: 40px 12px; }
	.lightbox__close { top: 10px; right: 10px; width: 38px; height: 38px; }
	.lightbox__arrow { width: 42px; height: 42px; }
	.lightbox__arrow--prev { left: 8px; }
	.lightbox__arrow--next { right: 8px; }
	.lightbox__counter { bottom: 10px; font-size: 12px; padding: 6px 10px; }
}