/* =========================================================
   SKANDIFAM — global stylesheet
   Architecture: BEM, mobile-first
   ========================================================= */

/* Manrope (variable, local) — cyrillic + latin */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- FONTS ----------
   Manrope подключён вверху файла как variable (cyrillic + latin + latin-ext).
   Старые per-weight @font-face удалены — файлов Manrope-*.woff2 нет,
   variable покрывает веса 200–800. */

/* ---------- CSS VARIABLES ---------- */
:root {
	/* colors */
	--color-white: #ffffff;
	--color-bg: #ffffff;
	--color-navy: #314463;
	--color-navy-hover: #3d5279;
	--color-text: #2f2f2f;
	--color-text-muted: #7a7a7a;
	--color-text-light: #8f8f8f;
	--color-label: #8a8a8a; /* section labels per TZ */
	--color-divider: #e9e9e9;
	--color-hero-overlay: rgba(0, 0, 0, 0.25);

	/* typography */
	--font-base: "Manrope", "Inter", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
	--fs-body: 18px;
	--lh-body: 32px;

	/* container */
	--container-max: 1440px;
	--container-inner: 1320px;
	--container-pad: 40px;

	/* spacing */
	--space-section: 90px;
	--space-section-inner: 80px;

	/* radius */
	--radius-pill: 18px;
	--radius-image: 26px;

	/* transitions */
	--transition: 0.25s ease;

	/* header */
	--header-height: 58px;
	--header-top: 20px;

	/* advantages (dark section) */
	--adv-bg: #050505;
	--adv-border: rgba(255, 255, 255, 0.12);
	--adv-text: #ffffff;
	--adv-text-secondary: rgba(255, 255, 255, 0.82);
	--adv-num: rgba(255, 255, 255, 0.22);
	--adv-hover-bg: rgba(255, 255, 255, 0.015);
	--adv-title-hover: #f4f4f4;
	--adv-radius: 22px;
}


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

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

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

body.is-locked {
	overflow: hidden;
}

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

ul, ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition), opacity var(--transition), background-color var(--transition);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

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

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

section {
	scroll-margin-top: calc(var(--header-height) + var(--header-top) + 20px);
}

/* ---------- CONTAINER ---------- */
.container {
	width: 100%;
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ---------- SECTION LABEL (dot + small caption) ---------- */
.section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-label);
	font-weight: 500;
}

.section-label__dot {
	width: 8px;
	height: 8px;
	color: var(--color-label);
	flex-shrink: 0;
}

.section-label__text {
	display: inline-block;
}

/* ---------- HEADER ---------- */
.header {
	position: absolute;
	top: var(--header-top);
	left: 0;
	width: 100%;
	z-index: 20;
}

.header__container {
	max-width: var(--container-inner);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: nowrap;
}

/* Header pill — shared style for all separate rounded blocks (logo, nav, contacts) */
.header__logo,
.header__nav,
.header__right {
	display: flex;
	align-items: center;
	height: var(--header-height);
	background: var(--color-navy);
	border-radius: var(--radius-pill);
	transition: background-color var(--transition);
	overflow: hidden;
}

.header__logo:hover,
.header__nav:hover,
.header__right:hover {
	background: var(--color-navy-hover);
}

/* logo — separate navy pill with centered image */
.logo {
	justify-content: center;
	width: 142px;
	padding: 0 16px;
	color: var(--color-white);
	line-height: 0;
	flex-shrink: 0;
}

.logo__img {
	display: block;
	width: 142px;
	height: 54px;
	object-fit: contain;
	margin: 0 auto;
}

/* nav (desktop) — separate navy pill */
.nav {
	padding: 0 26px;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.nav__link {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-white);
	line-height: 1;
	padding: 6px 2px;
	transition: color var(--transition), opacity var(--transition);
}

.nav__link:hover,
.nav__link:focus-visible {
	opacity: 0.75;
	outline-offset: 4px;
}

.nav__item.current-menu-item > .nav__link,
.nav__link[aria-current="page"] {
	opacity: 1;
	position: relative;
}

.nav__item.current-menu-item > .nav__link::after,
.nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: -2px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* WP submenu support */
.nav__item.menu-item-has-children {
	position: relative;
}

.nav__item .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 220px;
	background: var(--color-navy);
	border-radius: 14px;
	padding: 10px 0;
	display: none;
	flex-direction: column;
	z-index: 30;
}

.nav__item.menu-item-has-children:hover .sub-menu,
.nav__item.menu-item-has-children:focus-within .sub-menu {
	display: flex;
}

.nav__item .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: var(--color-white);
	font-size: 14px;
	font-weight: 500;
}

.nav__item .sub-menu a:hover {
	background: var(--color-navy-hover);
}

/* contacts — lives inside .header__right */
.contacts {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--header-height);
	padding: 0 8px 0 24px;
	background: transparent;
	border-radius: 0;
}

.contacts__phone {
	color: var(--color-white);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1;
}

.contacts__phone:hover {
	opacity: 0.8;
}

/* socials */
.socials {
	display: flex;
	align-items: center;
	gap: 6px;
}

.socials__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	transition: background-color var(--transition), transform var(--transition);
}

.socials__link:hover {
	background: rgba(255, 255, 255, 0.18);
}

.socials__link:active {
	transform: scale(0.96);
}

.socials__icon {
	width: 18px;
	height: 18px;
}

.socials--mobile .socials__link {
	background: var(--color-navy);
	width: 44px;
	height: 44px;
}

.socials--mobile .socials__link:hover {
	background: var(--color-navy-hover);
}

/* burger — lives inside .header__right */
.burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--header-height);
	height: var(--header-height);
	background: transparent;
	color: var(--color-white);
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color var(--transition);
}

.burger__icon {
	width: 22px;
	height: 22px;
}

.burger__icon--close {
	display: none;
}

.burger[aria-expanded="true"] .burger__icon--open {
	display: none;
}

.burger[aria-expanded="true"] .burger__icon--close {
	display: block;
}

/* mobile menu (hidden on desktop) */
.mobile-menu {
	display: none;
}

/* ---------- HERO ---------- */
.hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	padding-block: 120px 40px;
	overflow: hidden;
	color: var(--color-white);
}

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

.hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-hero-overlay);
	z-index: -1;
}

.hero__container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-white);
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	opacity: 0.9;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	opacity: 0.6;
}

.breadcrumbs__link {
	color: inherit;
	opacity: 0.85;
}

.breadcrumbs__link:hover {
	opacity: 1;
}

.breadcrumbs__item--current {
	opacity: 1;
}

.hero__title {
	font-size: 56px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: -0.01em;
}

/* ---------- ABOUT ---------- */
.about {
	background: #f2f2f2;
	padding-block: var(--space-section-inner);
}

.about__inner {
	display: flex;
	gap: 60px;
	align-items: stretch; /* media column stretches to text column height */
}

.about__col--text {
	flex: 0 0 42%;
	max-width: 42%;
	display: flex;
	flex-direction: column;
}

.about__col--media {
	flex: 1 1 58%;
	max-width: 58%;
	position: relative;
	display: flex;
}

.about__title {
	font-size: 40px;
	line-height: 50px;
	font-weight: 700;
	color: var(--color-text);
	max-width: 520px;
	margin-top: 24px;
	letter-spacing: -0.01em;
}

/* team avatars — overlapping */
.about__team {
	margin-top: 40px;
	display: flex;
	align-items: center;
	padding-left: 0;
}

.team__item {
	margin-left: -18px;
	transition: transform var(--transition);
}

.team__item:first-child {
	margin-left: 0;
}

.team__item:hover {
	transform: scale(1.05);
	z-index: 2;
}

.team__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 3px solid var(--color-white);
	background: var(--color-divider);
}

.about__desc {
	margin-top: 32px;
	max-width: 520px;
	font-size: 15px;
	line-height: 26px;
	color: var(--color-text-muted);
	font-weight: 400;
}

/* about media — photo + vertical brand image, both same height as text column */
.about__media {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

.about__image {
	flex: 1 1 auto;
	width: auto;
	height: 100%;
	min-height: 0;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--radius-image);
	transition: transform 0.5s ease;
}

.about__media:hover .about__image {
	transform: scale(1.02);
}

/* Brand image — vertical SKANDIFAM lettering, same height as photo */
.about__brand-img {
	display: block;
	height: 100%;
	min-height: 0;
	width: auto;
	max-width: 30%;
	object-fit: contain;
	object-position: center;
	flex-shrink: 0;
	pointer-events: none;
	user-select: none;
}

/* ---------- HOW ---------- */
.how {
	background: var(--color-white);
	padding-block: var(--space-section) 120px;
}

.how__title {
	margin-top: 24px;
	font-size: 54px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text);
	max-width: 780px;
	letter-spacing: -0.01em;
}

/* ---------- ADVANTAGES (full-width dark section) ---------- */
.advantages {
	/* full bleed — секция во всю ширину экрана без контейнера */
	background: var(--adv-bg);
	color: var(--adv-text);
	padding: 0;
}

/* Бокс-обёртка больше не нужен как декоративный — просто вертикальный список */
.advantages__box {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: inherit;
}

.advantages__list {
	display: flex;
	flex-direction: column;
	gap: 0; /* строки прилегают друг к другу вплотную, разделение фоном */
}

/* Advantage row — full-width, левый край экрана / правый край экрана */
.advantage {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 80px;
	min-height: 200px;
	/* небольшие «прижимающие» отступы, чтобы контент буквально уходил в углы экрана */
	padding: 90px var(--container-pad);
	transition: background-color var(--transition);
	position: relative;
}

/* Цветовые модификаторы строк */
.advantage--dark {
	background: #050505;
}

.advantage--gray {
	background: #262626;
}

.advantage:hover .advantage__title {
	color: var(--adv-title-hover);
}

/* Left column: number + title — прижат к левому краю */
.advantage__left {
	flex: 0 0 auto;
	max-width: 46%;
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-right: auto;
}

.advantage__num {
	display: inline-block;
	font-size: 56px;
	line-height: 1;
	font-weight: 400;
	color: var(--adv-num);
	flex-shrink: 0;
	letter-spacing: -0.01em;
}

.advantage__title {
	font-size: 44px;
	line-height: 54px;
	font-weight: 700;
	color: var(--adv-text);
	max-width: 420px;
	letter-spacing: -0.01em;
	transition: color var(--transition);
}

/* Right column: description — прижат к правому краю */
.advantage__right {
	flex: 0 0 auto;
	max-width: 46%;
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-left: auto;
	text-align: left;
}

.advantage__text {
	font-size: 18px;
	line-height: 31px;
	color: var(--adv-text-secondary);
	font-weight: 400;
}

.advantage__text strong {
	font-weight: 600;
	color: var(--adv-text-secondary);
}

/* ---------- BUTTONS (shared) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition);
}

.btn--primary {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 0 26px;
	min-height: 54px;
}

.btn--primary:hover {
	background: var(--color-navy-hover);
}

.btn--primary:active {
	transform: scale(0.98);
}

/* ---------- TEAM SECTION ---------- */
/* По ТЗ: max-width 1440, рабочая ширина 1320, горизонтальные паддинги 60px,
   вертикальные — 80/80. Локально переопределяем контейнер для этой секции. */
.team-section {
	background: var(--color-white);
	padding-block: 80px;
}

.team-section .container {
	max-width: 1440px;
	padding-inline: 60px;
}

/* Секция «Соцсети» — свой широкий контейнер, чтобы блок телефонов
   и фото человека справа помещались рядом и не резались основным контейнером. */
.socials-section .container {
	max-width: 1720px;
	padding-inline: 60px;
}

.team-section__title {
	margin-top: 24px;
	font-size: 60px;
	line-height: 68px;
	font-weight: 700;
	color: var(--color-text);
	max-width: 700px;
	letter-spacing: -0.01em;
}

.team-cards {
	margin-top: 56px;
	display: flex;
	gap: 20px;
	align-items: stretch;
	flex-wrap: nowrap;
}

/* Card — базовая карточка сотрудника */
.team-card {
	position: relative;
	flex: 0 0 300px;
	width: 300px;
	height: 520px;
	border-radius: 24px;
	overflow: hidden;
	background: #ececec;
	transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
	transform: scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 300 / 520;
	transition: transform 0.5s ease;
}

.team-card:hover .team-card__img {
	transform: scale(1.05);
}

/* Затемняющий градиент внизу карточки */
.team-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.team-card__body {
	position: absolute;
	left: 28px;
	bottom: 32px;
	right: 28px;
	color: var(--color-white);
	z-index: 2;
}

.team-card__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--color-white);
	line-height: 1.2;
	margin: 0;
}

.team-card__role {
	margin-top: 6px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
}

/* Круглые кнопки-стрелки на первой/последней карточке */
.team-card__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.team-card__arrow--prev {
	left: 14px;
}

.team-card__arrow--next {
	right: 14px;
}

.team-card__arrow:hover {
	background: #f5f5f5;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.team-card__arrow:active {
	transform: translateY(-50%) scale(0.95);
}

.team-card__arrow-icon {
	width: 20px;
	height: 20px;
}

/* Company card — четвёртая карточка */
.team-card--company {
	background: #f4f4f4;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px 28px;
	/* isolation, чтобы z-index работал внутри карточки без влияния на соседние */
	isolation: isolate;
}

.team-card--company:hover {
	transform: none;
	box-shadow: none;
}

/* Логотип-подложка на всю карточку */
.team-card__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 300 / 520;
	z-index: 0;
	pointer-events: none;
}

/* Плавное затемнение снизу, чтобы кнопка и подпись читались на любом фото */
.team-card--company::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 55%);
	z-index: 1;
	pointer-events: none;
}

.team-card__brand,
.team-card__cta {
	position: relative;
	z-index: 2;
}

.team-card__brand {
	margin-top: 0;
}

.team-card__brand-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.team-card__brand-sub {
	margin-top: 6px;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-muted);
}

.team-card__cta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.team-card__cta-text {
	font-size: 15px;
	line-height: 22px;
	color: #707070;
}

.team-card__btn {
	width: 220px;
	min-height: 54px;
	padding: 0;
}

/* ---------- SOCIALS SECTION ---------- */
.socials-section {
	background: #f2f2f2;
	padding-block: 80px;
}

.socials-section__title {
	margin-top: 24px;
	font-size: 58px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--color-text);
	max-width: 760px;
	letter-spacing: -0.01em;
}

/* Общая grid-композиция секции:
   Ряд 1 — section-label слева | (человек растянут вверх до этого ряда)
   Ряд 2 — h2 заголовок слева   | (человек / телефоны справа)
   Ряд 3 — блок телефонов (col-span 2), увеличен по высоте так,
           что его верх упирается в h2 → «телефоны доходят до текста».
   Фото человека занимает правую колонку целиком (ряды 1–3),
   поэтому его верх (голова) доходит до строки «Социальные сети». */
.socials-section__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	column-gap: 40px;
	row-gap: 32px;
	align-items: start;
}

.socials-section__text {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: start;
}

/* Правое фото человека — растянуто от самого верха секции
   (уровень section-label «Социальные сети») до низа блока телефонов.
   Так «высота правой картинки доходит до текста Социальные сети». */
.socials-section__person {
	grid-column: 2 / 3;
	grid-row: 1 / 4;
	width: 100%;
	height: auto;
	min-height: 720px;
	max-height: none;
	max-width: 460px;
	object-fit: contain;
	object-position: right bottom;
	background: transparent;
	border-radius: 0;
	align-self: stretch;
	justify-self: end;
}

/* Phones — блок с 5 крупными скриншотами телефонов в один ряд.
   Занимает нижнюю строку слева (под текстом), высота увеличена
   так, чтобы визуально «доходить до текста» заголовка. */
.phones {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	display: flex;
	gap: 20px;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	align-items: stretch;
	justify-content: space-between;
	box-sizing: border-box;
	margin-top: 24px;
}

.phones__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 20px;
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
}

/* Скриншоты телефонов — крупные, заполняют колонку по ширине,
   высота ~ в 2 раза больше ширины (реальные пропорции экрана телефона).
   min-height гарантирует, что даже на широком экране картинки
   визуально «доходят до текста» заголовка. */
.phones__img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 520px;
	aspect-ratio: 9 / 18;
	object-fit: cover;
	object-position: center;
	background: transparent;
	border-radius: 24px;
	transition: transform var(--transition);
}

.phones__item:hover .phones__img {
	transform: translateY(-4px);
}

.phones__btn {
	width: 100%;
	min-height: 46px;
	padding: 0;
	font-size: 15px;
	flex-shrink: 0;
}

/* ---------- FOOTER ---------- */

.footer {
	background: var(--color-navy);
	color: var(--color-white);
	padding-block: 40px 32px;
	margin-top: 80px;
}

.footer__container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --- top row: logo | menu | socials --- */
.footer__top {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 40px;
}

.footer__logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity var(--transition);
}

.footer__logo:hover,
.footer__logo:focus-visible {
	opacity: 0.85;
	outline: none;
}

.footer__logo-img {
	display: block;
	width: 150px;
	height: auto;
	object-fit: contain;
	/* заглушка: если изображение прозрачное на тёмном фоне — оставляем как есть */
}

.footer__nav {
	display: flex;
	justify-content: center;
}

.footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 40px;
}

.footer__menu-item {
	margin: 0;
}

.footer__menu-link {
	color: var(--color-white);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
	transition: opacity var(--transition);
}

.footer__menu-link:hover,
.footer__menu-link:focus-visible {
	opacity: 0.7;
	outline: none;
}

.current-menu-item > .footer__menu-link,
.footer__menu-link[aria-current="page"] {
	opacity: 0.7;
}

/* socials in footer — round white-outlined pills */
.footer__socials {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.socials--footer .socials__link {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.socials--footer .socials__icon {
	width: 18px;
	height: 18px;
}

.socials--footer .socials__link:hover,
.socials--footer .socials__link:focus-visible {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-navy);
	outline: none;
}

/* --- bottom row: legal | instagram note --- */
.footer__bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

.footer__copy {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.footer__legal-link {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.5;
	transition: color var(--transition);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
	color: var(--color-white);
	outline: none;
}

.footer__insta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
	justify-self: end;
	max-width: 460px;
}

.footer__insta-title {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-white);
}

.footer__insta-note {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
}

/* --- responsive --- */
@media (max-width: 1280px) {
	.footer__top {
		gap: 24px;
	}
	.footer__menu {
		gap: 8px 28px;
	}
}

@media (max-width: 1023px) {
	.footer__top {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 24px;
	}
	.footer__bottom {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.footer__legal {
		align-items: center;
	}
	.footer__legal-links {
		justify-content: center;
	}
	.footer__insta {
		text-align: center;
		justify-self: center;
	}
	.footer__insta-note br {
		display: none;
	}
}

@media (max-width: 768px) {
	.footer {
		padding-block: 32px 24px;
		margin-top: 60px;
	}
	.footer__menu {
		flex-direction: column;
		gap: 10px;
	}
	.footer__logo-img {
		width: 130px;
	}
}

@media (max-width: 390px) {
	.footer__socials {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* =========================================================
   HEADER — GLASS (мыльно-прозрачная) КАПСУЛА МЕНЮ
   Модификатор применяется к самой шапке: <header class="header header--glass">
   но эффект действует ТОЛЬКО на nav-капсулу (меню).
   Логотип и правая группа (телефон / соцсети / бургер) остаются синими.
   ========================================================= */
.header--glass .header__nav {
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.header--glass .header__nav:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Ссылки меню в стеклянной капсуле остаются белыми (наследуется из базы),
   но чуть плотнее по цвету для контраста на светлом hero */
.header--glass .nav__link {
	color: var(--color-white);
}

/* Fallback для браузеров без backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header--glass .header__nav {
		background: rgba(49, 68, 99, 0.55);
	}
}

/* =========================================================
   PROJECTS PAGE — «Реализованные проекты»
   ========================================================= */

/* ---------- HERO variant for Projects page ---------- */
.hero--projects {
	min-height: 340px;
	padding-block: 130px 40px;
	align-items: flex-end;
}

.hero__overlay--projects {
	background: rgba(0, 0, 0, 0.28);
}

.breadcrumbs__list--projects {
	font-size: 15px;
	color: var(--color-white);
}

.hero__title--projects {
	font-size: 60px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* ---------- PROJECTS SECTION ---------- */
.projects {
	background: var(--color-white);
	padding-block: 48px 100px;
}

.projects__container {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ---------- CATEGORIES (filter) ---------- */
.projects__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.categories__item {
	list-style: none;
}

.categories__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 52px;
	padding: 0 32px;
	background: var(--color-white);
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.categories__btn:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

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

.categories__btn:active {
	transform: scale(0.98);
}

.categories__btn--active,
.categories__btn[aria-current="page"] {
	background: var(--color-navy);
	color: var(--color-white);
	border-color: var(--color-navy);
}

/* ---------- PROJECTS GRID ---------- */
.projects__grid {
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.projects__item {
	list-style: none;
	display: flex;
}

/* ---------- PROJECT CARD ---------- */
.project-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 660px;
	background: #f8f8f8;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	transition: transform var(--transition), box-shadow var(--transition);
}

.project-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* Top: image (~380px) */
.project-card__media {
	position: relative;
	width: 100%;
	height: 380px;
	overflow: hidden;
	background: var(--color-divider);
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

.project-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	transition: transform 0.5s ease;
}

.project-card:hover .project-card__img {
	transform: scale(1.05);
}

/* Small badge — top-left over image */
.project-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 70px;
	height: 28px;
	padding: 0 12px;
	background: rgba(47, 47, 47, 0.85);
	color: var(--color-white);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

/* Bottom info block */
.project-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	padding: 28px;
}

.project-card__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.project-card__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.project-card__desc {
	font-size: 16px;
	line-height: 28px;
	color: #666666;
	font-weight: 400;
	/* Максимум 5–6 строк (clamp) */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.project-card__btn {
	align-self: flex-start;
	width: 170px;
	min-height: 52px;
	padding: 0;
	font-size: 16px;
}

/* ---------- «Загрузить ещё» ---------- */
.projects__more {
	margin-top: 72px;
	display: flex;
	justify-content: center;
}

.projects__more-btn {
	width: 240px;
	min-height: 56px;
	padding: 0;
	font-size: 16px;
}

/* ---------- PROJECTS RESPONSIVE ---------- */
@media (max-width: 1440px) {
	.hero__title--projects {
		font-size: 56px;
	}
}

@media (max-width: 1280px) {
	.hero__title--projects {
		font-size: 48px;
	}

	.projects {
		padding-block: 40px 80px;
	}

	.projects__grid {
		gap: 24px;
		margin-top: 36px;
	}

	.project-card {
		min-height: 620px;
	}

	.project-card__media {
		height: 340px;
	}

	.categories__btn {
		min-width: 130px;
		padding: 0 24px;
		font-size: 16px;
	}
}

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

	.project-card {
		min-height: 600px;
	}

	.project-card__media {
		height: 320px;
	}

	.projects__more {
		margin-top: 56px;
	}
}

@media (max-width: 768px) {
	.hero--projects {
		min-height: 260px;
		padding-block: 100px 28px;
	}

	.hero__title--projects {
		font-size: 40px;
	}

	.breadcrumbs__list--projects {
		font-size: 14px;
	}

	.projects {
		padding-block: 32px 64px;
	}

	.projects__categories {
		gap: 10px;
		flex-wrap: wrap;
	}

	.categories__btn {
		min-width: 0;
		min-height: 44px;
		padding: 0 20px;
		font-size: 15px;
	}

	.projects__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 28px;
	}

	.project-card {
		min-height: 0;
	}

	.project-card__media {
		height: 240px;
	}

	.project-card__body {
		padding: 22px;
		gap: 18px;
	}

	.project-card__title {
		font-size: 22px;
	}

	.project-card__desc {
		font-size: 15px;
		line-height: 26px;
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}

	.project-card__btn {
		width: 100%;
	}

	.projects__more {
		margin-top: 40px;
	}

	.projects__more-btn {
		width: 100%;
		max-width: 320px;
	}
}

@media (max-width: 480px) {
	.hero__title--projects {
		font-size: 34px;
	}

	.categories__btn {
		padding: 0 16px;
		font-size: 14px;
		min-height: 42px;
	}
}

@media (max-width: 390px) {
	.hero__title--projects {
		font-size: 30px;
	}

	.project-card__media {
		height: 220px;
	}

	.project-card__body {
		padding: 18px;
	}

	.project-card__title {
		font-size: 20px;
	}

	.project-card__badge {
		font-size: 12px;
		height: 26px;
	}
}

@media (max-width: 375px) {
	.hero__title--projects {
		font-size: 28px;
	}

	.categories__btn {
		padding: 0 14px;
		font-size: 13px;
	}
}

/* =========================================================
   CONTACTS SECTION — финальная секция страницы
   ========================================================= */
.contacts-section {
	background: #F5F5F5;
	padding-block: 80px;
}

.contacts-section__container {
	max-width: 1440px;
	padding-inline: 60px;
}

.contacts-section__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

/* Левая карточка */
.contact-card {
	flex: 0 0 40%;
	max-width: 40%;
	background: #FFFFFF;
	border-radius: 28px;
	padding: 48px;
	min-height: 620px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact-card__label {
	color: #8A8A8A;
	font-size: 16px;
}

.contact-card__title {
	font-size: 56px;
	line-height: 62px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.01em;
	margin: 0;
}

.contact-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

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

.contact-card__label-sm {
	font-size: 18px;
	color: #444444;
	line-height: 1.4;
}

.contact-card__phone {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-text);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color var(--transition);
}

.contact-card__phone:hover {
	color: var(--color-navy);
}

.contact-card__email {
	font-size: 34px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--color-text);
	text-decoration: none;
	word-break: break-word;
	transition: color var(--transition);
}

.contact-card__email:hover {
	color: var(--color-navy);
}

.contact-card__address {
	font-size: 20px;
	line-height: 32px;
	color: var(--color-text);
	margin: 0;
}

/* Ряд круглых кнопок соцсетей 48×48 */
.socials--contacts {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
	padding: 0;
	list-style: none;
}

.socials--contacts .socials__link {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-navy);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), transform var(--transition);
}

.socials--contacts .socials__link:hover {
	background: var(--color-navy-hover);
}

.socials--contacts .socials__link:active {
	transform: scale(0.95);
}

.socials--contacts .socials__icon {
	width: 20px;
	height: 20px;
}

.contact-card__insta {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
}

.contact-card__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #777777;
	font-style: italic;
}

/* Правая карточка — фото + форма */
.contact-form-card {
	flex: 1 1 60%;
	max-width: 60%;
	position: relative;
	min-height: 620px;
	border-radius: 28px;
	overflow: hidden;
	background: #ddd;
	isolation: isolate;
}

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

.contact-form-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

.contact-form-card__form,
.contact-form {
	position: absolute;
	left: 48px;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--color-white);
}

.contact-form__title {
	margin: 0;
	font-size: 54px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-white);
	letter-spacing: -0.01em;
}

.contact-form__subtitle {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.4;
	color: var(--color-white);
	opacity: 0.95;
}

.contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-form__field {
	position: relative;
	display: block;
}

.contact-form__input {
	width: 100%;
	height: 56px;
	padding: 0 24px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	color: var(--color-white);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	outline: none;
	transition: border-color var(--transition), background var(--transition);
}

.contact-form__input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.contact-form__input:focus {
	border-color: var(--color-white);
	background: rgba(255, 255, 255, 0.08);
}

/* Поле «Ваш вопрос» + подсказка справа */
.contact-form__field--phone {
	position: relative;
}

.contact-form__input--question {
	padding-right: 220px;
}

.contact-form__phone-hint {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	pointer-events: none;
	white-space: nowrap;
}

.contact-form__flag {
	width: 22px;
	height: 16px;
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
}

.contact-form__phone-mask {
	font-size: 15px;
	line-height: 1;
}

/* Чекбоксы */
.contact-form__checks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.contact-form__check {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.contact-form__checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 2px;
	position: relative;
	transition: background var(--transition), border-color var(--transition);
}

.contact-form__checkbox:checked {
	background: var(--color-white);
	border-color: var(--color-white);
}

.contact-form__checkbox:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0px;
	width: 6px;
	height: 11px;
	border: solid var(--color-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.contact-form__checkbox:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.contact-form__check-text {
	font-size: 14px;
	line-height: 20px;
	color: var(--color-white);
}

.contact-form__submit {
	width: 100%;
	height: 58px;
	background: var(--color-white);
	color: #2F2F2F;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	margin-top: 8px;
	transition: background var(--transition), transform var(--transition);
}

.contact-form__submit:hover {
	background: #f2f2f2;
}

.contact-form__submit:active {
	transform: scale(0.98);
}

/* ---------- CONTACTS RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.contact-card {
		padding: 40px;
		min-height: 580px;
	}
	.contact-card__title {
		font-size: 48px;
		line-height: 56px;
	}
	.contact-card__phone {
		font-size: 36px;
	}
	.contact-card__email {
		font-size: 28px;
	}
	.contact-form-card {
		min-height: 580px;
	}
	.contact-form__title {
		font-size: 46px;
	}
	.contact-form-card__form,
	.contact-form {
		left: 40px;
		right: 40px;
	}
	.contact-form__input--question {
		padding-right: 200px;
	}
}

@media (max-width: 1023px) {
	.contacts-section {
		padding-block: 60px;
	}
	.contacts-section__container {
		padding-inline: 32px;
	}
	.contacts-section__grid {
		flex-direction: column;
		gap: 20px;
	}
	.contact-card,
	.contact-form-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.contact-card {
		min-height: 0;
	}
	.contact-form-card {
		min-height: 560px;
	}
	.contact-form-card__form,
	.contact-form {
		position: static;
		transform: none;
		padding: 48px 40px;
	}
	.contact-form-card {
		display: flex;
	}
	.contact-form-card__bg,
	.contact-form-card__overlay {
		position: absolute;
	}
}

@media (max-width: 768px) {
	.contacts-section {
		padding-block: 48px;
	}
	.contacts-section__container {
		padding-inline: 20px;
	}
	.contact-card {
		padding: 28px;
		border-radius: 22px;
		gap: 20px;
	}
	.contact-card__title {
		font-size: 34px;
		line-height: 42px;
	}
	.contact-card__phone {
		font-size: 28px;
	}
	.contact-card__email {
		font-size: 22px;
	}
	.contact-card__address {
		font-size: 17px;
		line-height: 28px;
	}
	.socials--contacts {
		gap: 10px;
	}
	.socials--contacts .socials__link {
		width: 44px;
		height: 44px;
	}
	.contact-form-card {
		border-radius: 22px;
		min-height: 0;
	}
	.contact-form-card__form,
	.contact-form {
		padding: 36px 24px;
		gap: 16px;
	}
	.contact-form__title {
		font-size: 32px;
	}
	.contact-form__subtitle {
		font-size: 18px;
	}
	.contact-form__input {
		height: 52px;
		padding: 0 20px;
		font-size: 15px;
	}
	.contact-form__input--question {
		padding-right: 20px;
	}
	.contact-form__phone-hint {
		display: none;
	}
	.contact-form__submit {
		height: 54px;
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.contact-card__title {
		font-size: 28px;
		line-height: 36px;
	}
	.contact-card__phone {
		font-size: 24px;
	}
	.contact-card__email {
		font-size: 18px;
	}
	.contact-form__title {
		font-size: 26px;
	}
	.contact-form__subtitle {
		font-size: 16px;
	}
}

/* =========================================================
   HEADER — WIDE (растянут по всей ширине экрана)
   Модификатор для главной: <header class="header header--wide">
   Логотип, меню и правая группа прижимаются к краям страницы.
   ========================================================= */
.header--wide .header__container {
	max-width: none;
	padding-inline: 24px;
}

@media (min-width: 1441px) {
	.header--wide .header__container {
		padding-inline: 32px;
	}
}

/* =========================================================
   HOME PAGE — Главная
   ========================================================= */

/* ---------- HOME HERO ---------- */
.home-hero {
	/* Full-bleed: секция во всю ширину экрана, без контейнера и скруглений.
	   Header расположен поверх (absolute), поэтому компенсируем его высоту. */
	padding: 0;
	margin: 0;
	background: var(--color-white);
}

/* На главной контейнер не ограничивает ширину — hero растянут на весь экран */
.home-hero__container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.home-hero__card {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 640px;
	max-height: 900px;
	border-radius: 0;
	overflow: hidden;
	isolation: isolate;
	background: #e6e6e6;
}

.home-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 16 / 9;
	z-index: 0;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.18);
	z-index: 1;
}

/* Левая нижняя область — заголовок + подзаголовок */
.home-hero__content {
	position: absolute;
	left: 40px;
	bottom: 40px;
	right: 40px;
	max-width: 780px;
	z-index: 2;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-hero__title {
	margin: 0;
	font-size: 64px;
	line-height: 70px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.home-hero__subtitle {
	margin: 0;
	font-size: 22px;
	line-height: 34px;
	color: var(--color-white);
	font-weight: 400;
	opacity: 0.95;
}

/* Правая нижняя часть — две карточки CTA */
.home-hero__cta {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	gap: 16px;
	align-items: flex-end;
}

/* Общий базовый класс карточки Hero */
.hero-card {
	display: flex;
	border-radius: 24px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition), box-shadow var(--transition);
}

.hero-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

/* Карточка «расчёт стоимости» */
.hero-card--calc {
	width: 220px;
	min-height: 120px;
	background: var(--color-navy);
	color: var(--color-white);
	padding: 20px;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start;
}

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

.hero-card__title {
	margin: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--color-white);
}

.hero-card__note {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, 0.75);
}

.hero-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	transition: background var(--transition), transform var(--transition);
	align-self: flex-end;
}

.hero-card__btn:hover {
	background: #f2f2f2;
}

.hero-card__btn:active {
	transform: scale(0.94);
}

.hero-card__btn-icon {
	width: 16px;
	height: 16px;
}

/* Карточка «карта» */
.hero-card--map {
	width: 170px;
	min-height: 120px;
	background: var(--color-white);
	padding: 12px;
	align-items: stretch;
	justify-content: center;
}

.hero-card__map-img {
	width: 100%;
	height: 100%;
	min-height: 96px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	display: block;
}

/* ---------- HOME ABOUT (вторая секция) ---------- */
.home-about {
	background: var(--color-white);
	padding-block: 80px;
}

/* Full-bleed вариант: секция во всю ширину, контейнер без max-width.
   Используем на главной: <section class="home-about home-about--wide"> */
.home-about--wide .home-about__container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: 40px;
}

@media (min-width: 1441px) {
	.home-about--wide .home-about__container {
		padding-inline: 60px;
	}
}

/* ============================================================
   HOME PAGE — единое горизонтальное выравнивание секций
   Все контейнеры секций главной выровнены по .home-about--wide:
   full-bleed (без max-width) + padding-inline: 40px
   (60px на экранах шире 1440px).
   Исключение — .home-hero (полноэкранная герой-картинка).
   ============================================================ */
.catalog-calc__container,
.adv-stages__container,
.videos__container,
.commercial__container,
.additional-section__container,
.socials-section__container,
.socials-section .container {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 40px;
}

@media (min-width: 1441px) {
	.catalog-calc__container,
	.adv-stages__container,
	.videos__container,
	.commercial__container,
	.additional-section__container,
	.socials-section__container,
	.socials-section .container {
		padding-inline: 60px;
	}
}

.home-about__grid {

	display: flex;
	gap: 64px;
	align-items: flex-start;
}

.home-about__col--text {
	flex: 0 0 46%;
	max-width: 46%;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.home-about__col--media {
	flex: 0 0 54%;
	max-width: 54%;
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 24px;
	min-height: 640px;
}

.home-about__label {
	color: #8A8A8A;
}

.home-about__title {
	margin: 0;
	font-size: 60px;
	line-height: 66px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

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

.home-about__text p {
	margin: 0;
	font-size: 18px;
	line-height: 32px;
	color: #666666;
}

.home-about__btn {
	align-self: flex-start;
	width: 260px;
	min-height: 56px;
	padding: 0 26px;
	gap: 10px;
	justify-content: space-between;
}

.home-about__btn-icon {
	width: 18px;
	height: 18px;
	color: var(--color-white);
	flex-shrink: 0;
}

/* Статистика — сетка 2×2:
   ряд 1: [2000+] [500 м²]
   ряд 2: [15 специалистов ..............] — во всю ширину, чтобы
          «15 специалистов» помещалось в одну горизонтальную строку. */
.home-stats {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.stat-card {
	position: relative;
	min-height: 150px;
	border-radius: 20px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--transition);
}

/* Широкая карточка «15 специалистов» — занимает обе колонки */
.stat-card--wide {
	grid-column: 1 / -1;
	min-height: 130px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 28px;
	padding: 24px 28px;
}

.stat-card--wide .stat-card__num {
	white-space: nowrap;
	flex-shrink: 0;
}

.stat-card--wide .stat-card__text {
	max-width: 360px;
}

/* Фоновая заглушка-домик в тёмной карточке «500 м²» */
.stat-card--house .stat-card__bg {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 88px;
	height: 88px;
	object-fit: contain;
	opacity: 0.18;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.stat-card--house .stat-card__num,
.stat-card--house .stat-card__text {
	position: relative;
	z-index: 1;
}

.stat-card:hover {
	transform: translateY(-3px);
}

.stat-card--light {
	background: #F2F2F2;
	color: var(--color-text);
}

.stat-card--dark {
	background: var(--color-navy);
	color: var(--color-white);
}

.stat-card__num {
	font-size: 34px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.01em;
	display: block;
}

.stat-card--light .stat-card__num {
	color: var(--color-text);
}

.stat-card--dark .stat-card__num {
	color: var(--color-white);
}

.stat-card__text {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
}

.stat-card--light .stat-card__text {
	color: #666666;
}

.stat-card--dark .stat-card__text {
	color: rgba(255, 255, 255, 0.85);
}

/* Правая колонка — фото + декоративный вертикальный текст */
.home-about__photo {
	display: block;
	width: 520px;
	max-width: 100%;
	height: 640px;
	object-fit: cover;
	aspect-ratio: 520 / 640;
	border-radius: 28px;
	background: #ececec;
}

.home-about__deco {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 20px;
	padding-top: 8px;
	flex-shrink: 0;
	width: 140px;
}

.home-about__deco-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-navy);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transition: transform var(--transition), box-shadow var(--transition);
	align-self: flex-end;
}

.home-about__deco-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.home-about__deco-icon {
	width: 18px;
	height: 18px;
}

.home-about__deco-text {
	/* Вертикальная надпись «СКАНДИ» — читается снизу вверх.
	   Убираем rotate(180deg), чтобы буквы стояли другой стороной. */
	writing-mode: vertical-rl;
	transform: none;
	font-size: 120px;
	line-height: 0.95;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: linear-gradient(0deg, #E9E9E9 0%, #314463 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
}

/* ---------- HOME PAGE RESPONSIVE ---------- */
@media (max-width: 1440px) {
	.home-hero__title {
		font-size: 60px;
		line-height: 66px;
	}

	.home-about__title {
		font-size: 54px;
		line-height: 62px;
	}
}

@media (max-width: 1280px) {
	.home-hero__card {
		height: 640px;
	}

	.home-hero__content {
		left: 32px;
		bottom: 32px;
		right: 32px;
	}

	.home-hero__title {
		font-size: 52px;
		line-height: 60px;
	}

	.home-hero__subtitle {
		font-size: 20px;
		line-height: 30px;
	}

	.home-hero__cta {
		right: 32px;
		bottom: 32px;
	}

	.home-about {
		padding-block: 64px;
	}

	.home-about__grid {
		gap: 40px;
	}

	.home-about__title {
		font-size: 46px;
		line-height: 54px;
	}

	.home-about__col--media {
		min-height: 560px;
	}

	.home-about__photo {
		width: 100%;
		height: 560px;
	}

	.home-about__deco {
		width: 120px;
	}

	.home-about__deco-text {
		font-size: 100px;
	}

	.stat-card__num {
		font-size: 30px;
	}
}

@media (max-width: 1023px) {
	.home-hero__card {
		height: 560px;
	}

	.home-hero__title {
		font-size: 42px;
		line-height: 50px;
	}

	.home-hero__subtitle {
		font-size: 18px;
		line-height: 28px;
	}

	.home-hero__content {
		left: 24px;
		bottom: 200px; /* оставляем место для CTA-карточек снизу */
		right: 24px;
	}

	.home-hero__cta {
		left: 24px;
		right: 24px;
		bottom: 24px;
		flex-wrap: wrap;
	}

	.hero-card--calc,
	.hero-card--map {
		flex: 1 1 200px;
	}

	.home-about__grid {
		flex-direction: column;
		gap: 40px;
	}

	.home-about__col--text,
	.home-about__col--media {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.home-about__col--media {
		justify-content: flex-start;
		min-height: 0;
	}

	.home-about__photo {
		width: 100%;
		max-width: 640px;
		height: auto;
		aspect-ratio: 520 / 640;
	}

	.home-about__deco {
		width: 100px;
	}

	.home-about__deco-text {
		font-size: 90px;
	}
}

@media (max-width: 768px) {
	.home-hero {
		padding-top: calc(var(--header-top) + var(--header-height) + 12px);
	}

	.home-hero__card {
		height: 520px;
		border-radius: 20px;
	}

	.home-hero__content {
		left: 20px;
		right: 20px;
		bottom: auto;
		top: 32px;
		max-width: 100%;
		gap: 14px;
	}

	.home-hero__title {
		font-size: 32px;
		line-height: 38px;
	}

	.home-hero__title br {
		display: none;
	}

	.home-hero__subtitle {
		font-size: 16px;
		line-height: 26px;
	}

	.home-hero__subtitle br {
		display: none;
	}

	.home-hero__cta {
		left: 20px;
		right: 20px;
		bottom: 20px;
		gap: 12px;
	}

	.hero-card--calc {
		width: auto;
		flex: 1 1 60%;
		padding: 16px;
		min-height: 110px;
	}

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

	.hero-card--map {
		width: auto;
		flex: 1 1 35%;
		padding: 10px;
		min-height: 110px;
	}

	.home-about {
		padding-block: 48px;
	}

	.home-about__title {
		font-size: 32px;
		line-height: 40px;
	}

	.home-about__title br {
		display: none;
	}

	.home-about__text p {
		font-size: 16px;
		line-height: 28px;
	}

	.home-about__btn {
		width: 100%;
		max-width: 320px;
	}

	.home-stats {
		gap: 12px;
	}

	.stat-card {
		flex: 1 1 100%;
		min-width: 0;
		min-height: 110px;
	}

	.stat-card__num {
		font-size: 28px;
	}

	.home-about__col--media {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.home-about__photo {
		height: auto;
		max-height: 480px;
		border-radius: 22px;
	}

	.home-about__deco {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-top: 0;
	}

	.home-about__deco-text {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 64px;
		line-height: 1;
	}
}

@media (max-width: 480px) {
	.home-hero__card {
		height: 480px;
	}

	.home-hero__title {
		font-size: 28px;
		line-height: 34px;
	}

	.home-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-card--calc,
	.hero-card--map {
		width: 100%;
		flex: 1 1 auto;
	}

	.hero-card--map {
		min-height: 100px;
	}

	.home-about__title {
		font-size: 28px;
		line-height: 36px;
	}

	.home-about__deco-text {
		font-size: 52px;
	}
}

@media (max-width: 390px) {
	.home-hero__title {
		font-size: 26px;
		line-height: 32px;
	}

	.home-hero__subtitle {
		font-size: 15px;
		line-height: 24px;
	}

	.stat-card__num {
		font-size: 24px;
	}
}

@media (max-width: 375px) {
	.home-hero__card {
		height: 460px;
	}

	.home-about__title {
		font-size: 24px;
		line-height: 32px;
	}

	.home-about__deco-text {
		font-size: 44px;
	}
}

/* ---------- WORDPRESS CONTENT STYLES ---------- */
.entry-content > * + * {
	margin-top: 20px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
	list-style: revert;
}

.entry-content blockquote {
	border-left: 4px solid var(--color-navy);
	padding: 12px 20px;
	color: var(--color-text-muted);
	font-style: italic;
	background: #f7f7f7;
	border-radius: 8px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-divider);
	text-align: left;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption img {
	border-radius: 12px;
}

.wp-caption-text {
	font-size: 14px;
	color: var(--color-text-muted);
	margin-top: 8px;
	text-align: center;
}

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
	max-width: 50%;
}

.alignwide {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1440px) {
	:root {
		--container-inner: 1240px;
		--container-pad: 32px;
	}
}

@media (max-width: 1280px) {
	:root {
		--container-inner: 1120px;
		--container-pad: 28px;
	}

	.nav__list {
		gap: 20px;
	}

	.nav {
		padding: 0 20px;
	}

	.contacts {
		padding-left: 18px;
	}

	.about__inner {
		gap: 40px;
	}

	.about__title {
		font-size: 36px;
		line-height: 46px;
	}

	.hero__title {
		font-size: 48px;
	}

	.how__title {
		font-size: 46px;
	}

	/* Team + Socials: уменьшаем крупный h2 */
	.team-section__title {
		font-size: 52px;
		line-height: 60px;
	}

	.socials-section__title {
		font-size: 50px;
	}

	/* На средних экранах уменьшаем колонку с человеком и высоту телефонов */
	.socials-section__grid {
		column-gap: 32px;
	}

	.socials-section__person {
		max-width: 380px;
		min-height: 620px;
	}

	.phones__img {
		min-height: 440px;
	}

	/* Advantages: 1024–1439 — уменьшаем gap колонок и размеры */
	.advantage {
		gap: 80px;
		padding-block: 72px;
	}

	.advantage__title {
		font-size: 40px;
		line-height: 48px;
	}

	.advantage__num {
		font-size: 48px;
	}
}

@media (max-width: 1100px) {

	/* Desktop nav and contacts collapse; only logo + burger stay */
	.header__nav,
	.header__contacts {
		display: none;
	}
}

@media (max-width: 1023px) {
	.about__inner {
		flex-direction: column;
		gap: 48px;
		align-items: flex-start;
	}

	.about__col--text,
	.about__col--media {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.about__media {
		min-height: 500px;
		height: 500px;
	}

	/* Advantages: 768–1023 — строка перестраивается вертикально */
	.advantage {
		flex-direction: column;
		gap: 24px;
		min-height: 0;
		padding: 56px max(40px, var(--container-pad));
	}

	.advantage__left,
	.advantage__right {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.advantage__right {
		max-width: 100%;
	}

	.advantage__title {
		font-size: 36px;
		line-height: 44px;
	}

	/* Team + Socials — становятся вертикальными */
	.team-section__title {
		font-size: 44px;
		line-height: 52px;
	}

	.team-cards {
		flex-wrap: wrap;
		justify-content: center;
	}

	.socials-section__title {
		font-size: 42px;
	}

	/* На планшетах/мобильных grid перестраиваем в одну колонку:
	   текст → фото человека → блок телефонов. */
	.socials-section__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 0;
		row-gap: 32px;
	}

	.socials-section__text {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}

	.socials-section__person {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
		width: auto;
		max-width: 320px;
		max-height: none;
		height: auto;
		justify-self: center;
		align-self: center;
		object-position: center bottom;
	}

	.phones {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		width: 100%;
		max-width: 600px;
		margin-inline: auto;
		margin-top: 0;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.phones__item {
		flex: 0 0 auto;
		width: 170px;
		height: auto;
	}

	.phones__img {
		min-height: 0;
		max-height: none;
		aspect-ratio: 9 / 19;
	}
}

@media (max-width: 768px) {

	:root {
		--container-pad: 24px;
		--space-section-inner: 56px;
		--space-section: 64px;
		--header-top: 14px;
	}

	.hero {
		min-height: 260px;
		padding-block: 100px 28px;
	}

	.hero__title {
		font-size: 40px;
	}

	.about__title {
		font-size: 30px;
		line-height: 40px;
	}

	.about__desc {
		font-size: 14px;
		line-height: 24px;
	}

	.about__media {
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
		min-height: 380px;
		height: 380px;
	}

	.about__brand-img {
		max-width: 28%;
	}

	.team__avatar {
		width: 52px;
		height: 52px;
	}

	.team__item {
		margin-left: -14px;
	}

	.how__title {
		font-size: 34px;
	}

	.logo,
	.logo__img {
		width: 120px;
	}

	/* Advantages: <768 — уменьшенные отступы и типографика */
	.advantage {
		padding: 40px var(--container-pad);
		gap: 20px;
	}

	.advantage__left {
		gap: 20px;
	}

	.advantage__num {
		font-size: 36px;
	}

	.advantage__title {
		font-size: 30px;
		line-height: 38px;
	}

	.advantage__text {
		font-size: 16px;
		line-height: 28px;
	}

	.advantage__right {
		gap: 20px;
	}

	/* Team + Socials — мобильные */
	.team-section__title {
		font-size: 32px;
		line-height: 40px;
	}

	.team-card,
	.team-card__img {
		width: 260px;
	}

	.team-card {
		flex: 0 0 260px;
		height: 460px;
	}

	.team-card--company {
		height: 460px;
		padding: 24px 22px;
	}

	.team-card__btn {
		width: 100%;
	}

	.socials-section__title {
		font-size: 32px;
	}

	.phones {
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.hero__title {
		font-size: 34px;
	}

	.about__title {
		font-size: 26px;
		line-height: 34px;
	}

	.how__title {
		font-size: 30px;
	}
}

@media (max-width: 390px) {
	:root {
		--container-pad: 20px;
	}

	.hero__title {
		font-size: 30px;
	}

	.about__title {
		font-size: 24px;
		line-height: 32px;
	}

	.logo,
	.logo__img {
		width: 110px;
	}

	.team__avatar {
		width: 46px;
		height: 46px;
	}
}

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

	.hero__title {
		font-size: 28px;
	}

	.about__title {
		font-size: 22px;
		line-height: 30px;
	}
}

/* ---------- MOBILE MENU ---------- */
@media (max-width: 1100px) {
	.mobile-menu {
		display: block;
		position: fixed;
		inset: 0;
		background: var(--color-white);
		z-index: 15;
		padding: 100px 24px 32px;
		overflow-y: auto;
		transform: translateY(-100%);
		transition: transform 0.35s ease;
	}

	.mobile-menu[hidden] {
		display: block;
		transform: translateY(-100%);
		pointer-events: none;
	}

	.mobile-menu.is-open {
		transform: translateY(0);
		pointer-events: auto;
	}

	.mobile-menu__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.mobile-menu__link {
		display: block;
		padding: 14px 0;
		font-size: 20px;
		font-weight: 600;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-divider);
	}

	.mobile-menu__link:hover,
	.mobile-menu__link:focus-visible {
		color: var(--color-navy);
	}

	.mobile-menu__item.current-menu-item > .mobile-menu__link,
	.mobile-menu__link[aria-current="page"] {
		color: var(--color-navy);
	}

	.mobile-menu__contacts {
		margin-top: 32px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}

	.mobile-menu__phone {
		font-size: 22px;
		font-weight: 700;
		color: var(--color-navy);
	}
}

/* =========================================================
   CATALOG + CALC — Каталог мебели + Расчет стоимости
   Секция состоит из двух блоков: каталог (8 карточек) и
   калькулятор (3 карточки — промо / форма / специалист).
   ========================================================= */

/* ---------- секция ---------- */
.catalog-calc {
	background: #f5f5f5;
	padding-block: 90px;
}

.catalog-calc__container {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* ---------- CATALOG ---------- */
.catalog__label {
	margin-bottom: 20px;
}

.catalog__title {
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	color: #2b2b2b;
	letter-spacing: -0.01em;
	margin: 0 0 40px;
	max-width: 780px;
}

.catalog__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
}

.catalog__item {
	list-style: none;
	display: flex;
}

/* ---------- CAT CARD (карточка категории) ---------- */
.cat-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
	background: #dcdcdc;
	color: var(--color-white);
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	transition: transform var(--transition), box-shadow var(--transition);
	isolation: isolate;
}

.cat-card:hover,
.cat-card:focus-visible {
	transform: scale(1.02);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	outline: none;
}

.cat-card:active {
	transform: scale(1);
}

.cat-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	z-index: 0;
}

.cat-card:hover .cat-card__img {
	transform: scale(1.05);
}

.cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 80%);
	pointer-events: none;
	z-index: 1;
}

.cat-card__name {
	position: absolute;
	top: 24px;
	left: 24px;
	right: 74px;
	z-index: 2;
	color: var(--color-white);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.cat-card__btn {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	color: #2b2b2b;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.cat-card:hover .cat-card__btn {
	background: var(--color-navy);
	color: var(--color-white);
	transform: rotate(-15deg);
}

.cat-card__btn-icon {
	width: 18px;
	height: 18px;
}

/* ---------- CALC BLOCK ---------- */
.calc__label {
	margin-bottom: 20px;
}

.calc__title {
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	color: #2c2c2c;
	letter-spacing: -0.01em;
	margin: 0 0 40px;
	max-width: 780px;
}

.calc__grid {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 28fr) minmax(0, 40fr);
	gap: 24px;
	align-items: stretch;
}

/* ---------- CALC CARD (общая база) ---------- */
.calc-card {
	background: var(--color-white);
	border-radius: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 640px;
}

/* --- Левая карточка (промо + фото) --- */
.calc-card--promo {
	position: relative;
	padding: 32px 32px 0;
	gap: 24px;
}

.calc-card__promo-title {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: #2b2b2b;
	letter-spacing: -0.01em;
	margin: 0;
	position: relative;
	z-index: 1;
}

.calc-card__promo-img {
	display: block;
	width: calc(100% + 64px);
	margin-inline: -32px;
	margin-top: auto;
	flex: 1 1 auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	/* нижние углы совпадают со скруглением карточки */
	border-bottom-left-radius: 24px;
	border-bottom-right-radius: 24px;
}

/* --- Центральная карточка (форма) --- */
.calc-card--form {
	padding: 32px;
}

.calc-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

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

.calc-form__group {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calc-form__label {
	font-size: 15px;
	font-weight: 500;
	color: #2b2b2b;
	line-height: 1.4;
	padding: 0;
}

/* File upload — темно-синяя pill-кнопка */
.calc-form__file {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition), transform var(--transition);
}

.calc-form__file:hover {
	background: var(--color-navy-hover);
}

.calc-form__file:active {
	transform: scale(0.98);
}

.calc-form__file:focus-within {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.calc-form__file-icon {
	width: 18px;
	height: 18px;
	color: currentColor;
}

.calc-form__file-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* Телефон с флагом */
.calc-form__phone {
	position: relative;
	display: flex;
	align-items: center;
	background: #f2f2f2;
	border-radius: 999px;
	padding: 0 20px;
	min-height: 48px;
	gap: 12px;
	transition: background-color var(--transition), box-shadow var(--transition);
}

.calc-form__phone:focus-within {
	background: #ececec;
	box-shadow: 0 0 0 2px var(--color-navy);
}

.calc-form__flag {
	width: 24px;
	height: 16px;
	border-radius: 2px;
	flex-shrink: 0;
	overflow: hidden;
}

.calc-form__input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 15px;
	color: #2b2b2b;
	line-height: 1;
	padding: 0;
}

.calc-form__input::placeholder {
	color: #9a9a9a;
}

/* Радио и чекбоксы */
.calc-form__radios,
.calc-form__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.radio,
.check {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	line-height: 1.4;
	font-size: 14px;
	color: #2b2b2b;
}

.radio__input,
.check__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.radio__mark,
.check__mark {
	flex-shrink: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: var(--color-white);
	border: 1.5px solid #c8c8c8;
	transition: border-color var(--transition), background-color var(--transition);
	position: relative;
	margin-top: 1px;
}

.radio__mark {
	border-radius: 50%;
}

.check__mark {
	border-radius: 5px;
}

.radio:hover .radio__mark,
.check:hover .check__mark {
	border-color: var(--color-navy);
}

.radio__input:focus-visible + .radio__mark,
.check__input:focus-visible + .check__mark {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.radio__input:checked + .radio__mark {
	border-color: var(--color-navy);
	background: var(--color-white);
}

.radio__input:checked + .radio__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--color-navy);
	border-radius: 50%;
}

.check__input:checked + .check__mark {
	background: var(--color-navy);
	border-color: var(--color-navy);
}

.check__input:checked + .check__mark::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.check__text {
	flex: 1;
	min-width: 0;
}

/* Submit — темно-синяя кнопка на всю ширину */
.calc-form__submit {
	margin-top: 8px;
	width: 100%;
	min-height: 54px;
	padding: 0 24px;
	font-size: 16px;
}

/* --- Правая карточка (специалист + преимущества + связь) --- */
.calc-card--specialist {
	padding: 32px;
	gap: 24px;
	display: flex;
	flex-direction: column;
}

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

.specialist__photo {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	background: var(--color-divider);
}

.specialist__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.specialist__name {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #2b2b2b;
	line-height: 1.2;
}

.specialist__role {
	margin: 0;
	font-size: 14px;
	color: #7a7a7a;
	line-height: 1.4;
}

/* Список преимуществ (черная точка) */
.benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.benefits__item {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.5;
	color: #2b2b2b;
}

.benefits__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	background: #2b2b2b;
	border-radius: 50%;
}

/* Ряд четырех кнопок связи — белые с navy-обводкой */
.contact-buttons {
	margin-top: auto;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	background: var(--color-white);
	color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.contact-btn:hover,
.contact-btn:focus-visible {
	background: var(--color-navy);
	color: var(--color-white);
	outline: none;
}

.contact-btn:active {
	transform: scale(0.97);
}

.contact-btn__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
}

/* ---------- CATALOG + CALC — АДАПТИВ ---------- */

/* 1440 — незначительная корректировка типографики */
@media (max-width: 1440px) {
	.catalog__title,
	.calc__title {
		font-size: 44px;
	}
}

/* 1280 — уменьшаем размеры и кнопки, добавляем перенос */
@media (max-width: 1280px) {
	.catalog-calc {
		padding-block: 72px;
	}

	.catalog-calc__container {
		gap: 64px;
	}

	.catalog__title,
	.calc__title {
		font-size: 40px;
		margin-bottom: 32px;
	}

	.cat-card__name {
		font-size: 20px;
	}

	.calc-card {
		min-height: 600px;
	}

	.calc-card--promo,
	.calc-card--form,
	.calc-card--specialist {
		padding: 28px;
	}

	.calc-card--promo {
		padding: 28px 28px 0;
	}

	.calc-card__promo-img {
		width: calc(100% + 56px);
		margin-inline: -28px;
	}

	.contact-btn {
		font-size: 12px;
		padding: 0 10px;
		min-height: 40px;
		gap: 6px;
	}

	.contact-btn__icon {
		width: 14px;
		height: 14px;
	}
}

/* 1023 — каталог 2х4, calc: промо + форма в ряд, специалист снизу */
@media (max-width: 1023px) {
	.catalog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.calc__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 20px;
	}

	.calc-card--promo {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}

	.calc-card--form {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}

	.calc-card--specialist {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}

	.calc-card {
		min-height: 0;
	}

	.calc-card--promo {
		min-height: 520px;
	}
}

/* 768 — всё в одну колонку */
@media (max-width: 768px) {
	.catalog-calc {
		padding-block: 56px;
	}

	.catalog-calc__container {
		gap: 48px;
	}

	.catalog__title,
	.calc__title {
		font-size: 32px;
		line-height: 1.2;
		margin-bottom: 24px;
	}

	.catalog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

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

	.cat-card__name {
		top: 16px;
		left: 16px;
		right: 60px;
		font-size: 17px;
	}

	.cat-card__btn {
		top: 14px;
		right: 14px;
		width: 36px;
		height: 36px;
	}

	.cat-card__btn-icon {
		width: 16px;
		height: 16px;
	}

	.calc__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		gap: 16px;
	}

	.calc-card--promo,
	.calc-card--form,
	.calc-card--specialist {
		grid-column: 1 / -1;
	}

	.calc-card--promo { grid-row: 1; }
	.calc-card--form { grid-row: 2; }
	.calc-card--specialist { grid-row: 3; }

	.calc-card {
		border-radius: 20px;
	}

	.calc-card--promo {
		min-height: 420px;
		padding: 24px 24px 0;
	}

	.calc-card__promo-title {
		font-size: 22px;
	}

	.calc-card__promo-img {
		width: calc(100% + 48px);
		margin-inline: -24px;
		aspect-ratio: 3 / 2;
	}

	.calc-card--form,
	.calc-card--specialist {
		padding: 24px;
	}

	.calc-form__file,
	.calc-form__phone {
		min-height: 46px;
	}

	.calc-form__submit {
		min-height: 50px;
	}

	.contact-buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-btn {
		font-size: 13px;
		min-height: 42px;
	}

	.specialist__photo {
		width: 60px;
		height: 60px;
	}

	.specialist__name {
		font-size: 18px;
	}

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

/* 480 — совсем узко: каталог одна колонка */
@media (max-width: 480px) {
	.catalog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cat-card {
		aspect-ratio: 16 / 10;
	}
}

/* 390 */
@media (max-width: 390px) {
	.catalog__title,
	.calc__title {
		font-size: 28px;
	}

	.catalog-calc {
		padding-block: 48px;
	}

	.calc-card--promo,
	.calc-card--form,
	.calc-card--specialist {
		padding: 20px;
	}

	.calc-card--promo {
		padding: 20px 20px 0;
	}

	.calc-card__promo-img {
		width: calc(100% + 40px);
		margin-inline: -20px;
	}

	.calc-card__promo-title {
		font-size: 20px;
	}
}

/* 375 */
@media (max-width: 375px) {
	.catalog__title,
	.calc__title {
		font-size: 26px;
	}

	.cat-card__name {
		font-size: 16px;
	}

	.contact-btn {
		font-size: 12px;
		padding: 0 8px;
	}
}


/* =========================================================
   ADVANTAGES + STAGES — «Наши преимущества» + «Этапы работы»
   ========================================================= */

/* wrapping section: light-grey background, vertical rhythm via padding-block */
.adv-stages {
	background: #f6f6f6;
	padding-block: var(--space-section-inner);
}

.adv-stages__container {
	display: flex;
	flex-direction: column;
	gap: 90px;
}

/* ===== БЛОК 1 — Наши преимущества (glassmorphism поверх фото) ===== */
.adv {
	position: relative;
	min-height: 660px;
	padding: 44px 52px 52px;
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	color: var(--color-white);
	display: flex;
	flex-direction: column;
	gap: 56px;
}

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

.adv__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
}

/* head: label + title */
.adv__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 640px;
}

.adv__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 16px;
	font-weight: 400;
}

.adv__label .section-label__dot {
	color: rgba(255, 255, 255, 0.7);
}

.adv__title {
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--color-white);
	max-width: 540px;
	letter-spacing: -0.01em;
}

/* grid of glass cards: 3 x 2 */
.adv__grid {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* glass card */
.adv-card {
	position: relative;
	min-height: 170px;
	padding: 24px;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
	overflow: hidden;
}

.adv-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.28);
}

/* decorative folded-corner triangle (top-right) */
.adv-card__corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 28px;
	height: 28px;
	background: #2c4266;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	pointer-events: none;
}

.adv-card__title {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--color-white);
	max-width: calc(100% - 36px); /* room for corner */
	letter-spacing: -0.01em;
}

.adv-card__text {
	font-size: 15px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 400;
}

/* ===== БЛОК 2 — Этапы работы ===== */
.stages {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

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

.stages__title {
	font-size: 48px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--color-text);
	max-width: 720px;
	letter-spacing: -0.01em;
}

/* grid of stages: 4 x 2 */
.stages__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* stage card — photo + gradient + text */
.stage-card {
	position: relative;
	min-height: 200px;
	border-radius: 20px;
	overflow: hidden;
	color: var(--color-white);
	isolation: isolate;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	aspect-ratio: 310 / 200;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stage-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.5s ease;
}

.stage-card__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 100%);
	pointer-events: none;
}

.stage-card:hover {
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.stage-card:hover .stage-card__img {
	transform: scale(1.05);
}

.stage-card__title {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--color-white);
	letter-spacing: -0.01em;
	max-width: 90%;
}

.stage-card__text {
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 400;
	max-width: 100%;
}

/* ---------- ADAPTIVE ---------- */

/* 1280 — чуть уменьшаем заголовки и внутренние отступы */
@media (max-width: 1280px) {
	.adv {
		padding: 40px 40px 44px;
		min-height: 620px;
	}

	.adv__title,
	.stages__title {
		font-size: 42px;
	}

	.adv-card__title {
		font-size: 20px;
	}
}

/* 1024 — карточки преимуществ 2 в ряд, этапы 3 в ряд */
@media (max-width: 1024px) {
	.adv-stages__container {
		gap: 70px;
	}

	.adv {
		padding: 36px;
		min-height: auto;
		gap: 40px;
	}

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

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

	.adv__title,
	.stages__title {
		font-size: 36px;
		max-width: 100%;
	}
}

/* 768 — планшет: этапы 2 в ряд */
@media (max-width: 768px) {
	.adv-stages {
		padding-block: 60px;
	}

	.adv-stages__container {
		gap: 60px;
	}

	.adv {
		padding: 28px;
		border-radius: 20px;
		gap: 32px;
	}

	.adv__title,
	.stages__title {
		font-size: 32px;
	}

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

	.stage-card {
		aspect-ratio: 16 / 10;
	}
}

/* 480 — карточки в одну колонку */
@media (max-width: 480px) {
	.adv__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.adv-card {
		min-height: auto;
		padding: 20px;
	}

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

	.stage-card {
		aspect-ratio: 16 / 9;
		min-height: 180px;
	}
}

/* 390 */
@media (max-width: 390px) {
	.adv-stages {
		padding-block: 48px;
	}

	.adv-stages__container {
		gap: 48px;
	}

	.adv {
		padding: 22px;
		gap: 28px;
	}

	.adv__title,
	.stages__title {
		font-size: 28px;
	}

	.adv-card__title {
		font-size: 18px;
	}

	.stage-card {
		padding: 16px;
	}

	.stage-card__title {
		font-size: 18px;
	}
}

/* 375 */
@media (max-width: 375px) {
	.adv__title,
	.stages__title {
		font-size: 26px;
	}
}


/* =========================================================
   VIDEOS — «Видео-обзоры»
   ========================================================= */
.videos {
	background: var(--color-white);
	padding-block: 80px;
}

.videos__container {
	max-width: 1440px;
	padding-inline: 60px;
}

.videos__label {
	margin-bottom: 24px;
}

.videos__title {
	margin: 0 0 48px;
	font-size: 60px;
	line-height: 68px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.02em;
}

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

/* card */
.video-card {
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
	border-radius: 24px;
	overflow: hidden;
}

.video-card__preview {
	position: relative;
	aspect-ratio: 424 / 300;
	overflow: hidden;
	background: #0a0a0a;
}

.video-card__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.85;
	transition: transform var(--transition), opacity var(--transition);
}

.video-card__shade {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.video-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 44px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--color-white);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform var(--transition), color var(--transition);
}

.video-card__play-icon {
	width: 44px;
	height: 22px;
	margin: 0;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.video-card__preview:hover .video-card__poster {
	transform: scale(1.03);
	opacity: 0.95;
}

.video-card__play:hover {
	transform: scale(1.1);
	color: var(--color-white);
}

.video-card__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 24px 28px;
}

.video-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

.video-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-muted);
}

/* «Показать больше» */
.videos__more {
	padding: 0 32px;
	min-height: 58px;
}

.videos__more-icon {
	width: 18px;
	height: 18px;
}

/* --- videos adaptive --- */
@media (max-width: 1280px) {
	.videos__container {
		padding-inline: 40px;
	}
	.videos__title {
		font-size: 48px;
		line-height: 56px;
	}
	.videos__grid {
		gap: 28px 20px;
	}
}

@media (max-width: 1023px) {
	.videos {
		padding-block: 64px;
	}
	.videos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.videos__title {
		font-size: 40px;
		line-height: 48px;
	}
	.video-card__play {
		width: 64px;
		height: 64px;
	}
	.video-card__title {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 768px) {
	.videos {
		padding-block: 56px;
	}
	.videos__container {
		padding-inline: 24px;
	}
	.videos__title {
		font-size: 32px;
		line-height: 40px;
		margin-bottom: 32px;
	}
	.videos__grid {
		gap: 24px 16px;
		margin-bottom: 32px;
	}
	.video-card__play {
		width: 56px;
		height: 56px;
	}
	.video-card__play-icon {
		width: 22px;
		height: 22px;
	}
	.videos__more {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.videos__grid {
		grid-template-columns: 1fr;
	}
	.videos__title {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 390px) {
	.videos__container {
		padding-inline: 16px;
	}
	.videos__title {
		font-size: 26px;
		line-height: 32px;
	}
	.video-card__title {
		font-size: 18px;
		line-height: 26px;
	}
}


/* =========================================================
   COMMERCIAL — «Коммерческое предложение»
   ========================================================= */
.commercial {
	background: var(--color-white);
	padding-block: 80px;
}

.commercial__container {
	max-width: 1440px;
	padding-inline: 60px;
}

.commercial__label {
	margin-bottom: 24px;
}

.commercial__title {
	margin: 0 0 48px;
	font-size: 60px;
	line-height: 68px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.02em;
}

.commercial__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

.commercial__left {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.commercial__right {
	position: relative;
	min-height: 480px;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: #f2f2f2;
}

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

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

.feature-card {
	position: relative;
	padding: 28px;
	background: #f5f5f5;
	border-radius: 20px;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
	overflow: hidden;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.feature-card__deco {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	color: var(--color-navy);
	opacity: 0.85;
	transition: color var(--transition), opacity var(--transition);
}

.feature-card__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--color-text);
	transition: color var(--transition);
}

.feature-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--color-text-muted);
	transition: color var(--transition);
}

.feature-card:hover,
.feature-card--active {
	background: var(--color-navy);
}

.feature-card:hover .feature-card__title,
.feature-card--active .feature-card__title {
	color: var(--color-white);
}

.feature-card:hover .feature-card__text,
.feature-card--active .feature-card__text {
	color: rgba(255, 255, 255, 0.82);
}

.feature-card:hover .feature-card__deco,
.feature-card--active .feature-card__deco {
	color: var(--color-white);
	opacity: 1;
}

/* Скачать КП */
.commercial__btn {
	align-self: flex-start;
	padding: 0 32px;
	min-height: 58px;
}

.commercial__btn-icon {
	width: 18px;
	height: 18px;
}

/* --- commercial adaptive --- */
@media (max-width: 1280px) {
	.commercial__container {
		padding-inline: 40px;
	}
	.commercial__title {
		font-size: 48px;
		line-height: 56px;
	}
	.commercial__layout {
		gap: 32px;
	}
	.commercial__right {
		min-height: 420px;
	}
	.feature-card {
		padding: 24px;
		min-height: 170px;
	}
}

@media (max-width: 1023px) {
	.commercial {
		padding-block: 64px;
	}
	.commercial__title {
		font-size: 40px;
		line-height: 48px;
	}
	.commercial__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.commercial__right {
		min-height: 360px;
		order: -1;
	}
	.commercial__btn {
		align-self: stretch;
	}
}

@media (max-width: 768px) {
	.commercial {
		padding-block: 56px;
	}
	.commercial__container {
		padding-inline: 24px;
	}
	.commercial__title {
		font-size: 32px;
		line-height: 40px;
		margin-bottom: 32px;
	}
	.features {
		gap: 12px;
	}
	.feature-card {
		padding: 20px;
		min-height: 150px;
		border-radius: 16px;
	}
	.feature-card__deco {
		width: 32px;
		height: 32px;
		top: 16px;
		right: 16px;
	}
	.feature-card__title {
		font-size: 18px;
		line-height: 26px;
	}
	.commercial__right {
		min-height: 280px;
	}
	.commercial__btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.features {
		grid-template-columns: 1fr;
	}
	.commercial__title {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 390px) {
	.commercial__container {
		padding-inline: 16px;
	}
	.commercial__title {
		font-size: 26px;
		line-height: 32px;
	}
	.feature-card__title {
		font-size: 17px;
		line-height: 24px;
	}
}

/* =========================================================
   ADDITIONAL SECTION — «Дополнительные услуги» + «FAQ» + Инфоблок
   ========================================================= */
.additional-section {
	background: var(--color-white);
	padding-block: var(--space-section);
}

.additional-section__container {
	max-width: 1440px;
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 100px;
}

/* ---------- БЛОК 1 — Дополнительные услуги ---------- */
.services__label {
	margin-bottom: 32px;
}

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

/* Карточки одинаковой ширины — 3 в ряд */
.service-card {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	background: #efefef;
	transition: transform var(--transition);
}
.service-card--normal,
.service-card--wide {
	grid-column: auto;
}

.service-card:hover {
	transform: translateY(-2px);
}

.service-card__link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

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

.service-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.service-card__title {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	color: var(--color-white);
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: -0.01em;
	z-index: 2;
}

/* ---------- БЛОК 2 — FAQ ---------- */
.faq__label {
	margin-bottom: 24px;
}

.faq__title {
	margin: 0 0 48px;
	font-weight: 800;
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

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

.faq__row {
	display: flex;
	flex-direction: column;
}

.faq-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 24px 28px;
	background: #f2f2f2;
	border: 0;
	border-radius: 18px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: var(--color-text);
	transition: background var(--transition), color var(--transition);
}

.faq-item:hover {
	background: #ececec;
}

.faq-item__question {
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.01em;
}

.faq-item__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.faq-item__icon-svg {
	width: 18px;
	height: 18px;
}

/* Active/open state */
.faq-item[aria-expanded="true"] {
	background: var(--color-navy);
	color: var(--color-white);
}
.faq-item[aria-expanded="true"] .faq-item__icon {
	background: var(--color-white);
	color: var(--color-navy);
	transform: rotate(45deg);
}

.faq-item__answer {
	overflow: hidden;
	max-height: 0;
	padding: 0 28px;
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 26px;
	transition: max-height var(--transition), padding var(--transition);
}

.faq__row.is-open .faq-item__answer,
.faq-item[aria-expanded="true"] + .faq-item__answer {
	padding: 20px 28px 4px;
}

.faq-item__answer p {
	margin: 0;
}

/* ---------- БЛОК 3 — Информационный ---------- */
.about-block {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 60px;
	align-items: start;
}

.about-block__image {
	position: relative;
	border-radius: 26px;
	overflow: hidden;
	aspect-ratio: 5 / 6;
	background: #eee;
}

.about-block__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-block__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	color: var(--color-text);
	font-size: 18px;
	line-height: 32px;
}

.about-block__content p {
	margin: 0;
}

.about-block__content b {
	font-weight: 700;
	color: var(--color-text);
}

/* ---------- Адаптивность ---------- */
@media (max-width: 1280px) {
	.additional-section__container {
		padding-inline: 40px;
		gap: 80px;
	}
	.faq__title {
		font-size: 48px;
		line-height: 56px;
	}
	.services__grid {
		grid-auto-rows: 200px;
	}
}

@media (max-width: 1023px) {
	.additional-section {
		padding-block: 72px;
	}
	.additional-section__container {
		gap: 64px;
	}
	.services__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 200px;
	}
	.service-card--normal,
	.service-card--wide {
		grid-column: span 1;
	}
	.faq__title {
		font-size: 40px;
		line-height: 48px;
		margin-bottom: 36px;
	}
	.faq__grid {
		grid-template-columns: 1fr;
	}
	.about-block {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.about-block__image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 768px) {
	.additional-section {
		padding-block: 56px;
	}
	.additional-section__container {
		padding-inline: 24px;
		gap: 56px;
	}
	.services__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 180px;
		gap: 16px;
	}
	.service-card__title {
		font-size: 20px;
		line-height: 26px;
		left: 20px;
		right: 20px;
		bottom: 18px;
	}
	.faq__title {
		font-size: 32px;
		line-height: 40px;
	}
	.faq-item {
		padding: 20px 20px;
		border-radius: 16px;
	}
	.faq-item__question {
		font-size: 16px;
		line-height: 24px;
	}
	.faq-item__icon {
		width: 36px;
		height: 36px;
	}
	.faq-item__answer {
		padding: 16px 20px 4px;
		font-size: 15px;
		line-height: 24px;
	}
	.about-block__content {
		font-size: 16px;
		line-height: 28px;
	}
}

@media (max-width: 480px) {
	.faq__title {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 390px) {
	.additional-section__container {
		padding-inline: 16px;
	}
	.faq__title {
		font-size: 26px;
		line-height: 32px;
	}
}

/* ============================================================
   INDEX PAGE — доработки по ТЗ (Screenshot_21)
   ============================================================ */

/* --- HOME ABOUT: 3 карточки статистики в один ряд одинакового размера --- */
.home-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Убираем «широкую» третью карточку — теперь все равнозначные */
.home-stats .stat-card--wide {
	grid-column: auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	padding: 22px;
	min-height: 150px;
}

.home-stats .stat-card--wide .stat-card__num {
	white-space: normal;
}

.home-stats .stat-card--wide .stat-card__text {
	max-width: none;
}

/* Тёмная карточка «500 м²» — новый цвет фона */
.home-stats .stat-card--dark {
	background: #26364D;
}

/* --- HOME ABOUT: фото справа растягивается на всю высоту левой колонки,
       затемнение уходит вправо до самого края карточки --- */
.home-about__grid {
	align-items: stretch;
}

.home-about__col--media {
	align-items: stretch;
	align-self: stretch;
	height: 100%;
}

.home-about__photo {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	align-self: stretch;
	flex: 1 1 auto;
	min-height: 100%;
	object-fit: cover;
}

/* Вертикальная декорация «СКАНДИ» тоже во всю высоту колонки */
.home-about__deco {
	top: 0;
	bottom: 0;
	height: auto;
}

/* Правое затемнение поверх фото — от верха до низа, до самого правого края карточки */
.home-about__col--media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 260px;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	border-radius: 0 28px 28px 0;
	pointer-events: none;
	z-index: 1;
}

/* Кнопка/стрелка и текст СКАНДИ должны быть поверх затемнения */
.home-about__deco {
	z-index: 2;
}

@media (max-width: 1280px) {
	.home-about__col--media::after {
		width: 220px;
	}
}

@media (max-width: 1023px) {
	.home-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.home-about__col--media::after {
		display: none;
	}
	.home-about__photo {
		height: auto;
		aspect-ratio: 520 / 640;
	}
}

@media (max-width: 768px) {
	.home-stats {
		grid-template-columns: 1fr;
	}
}

/* --- CALC: фон секции белый, у 1-й и 2-й карточек чёрная обводка --- */
.catalog-calc .calc {
	background: var(--color-white);
	border-radius: 32px;
	padding: 48px 40px;
	margin-top: 40px;
}

/* Тонкая чёрная обводка у 1-й и 2-й карточек, прозрачный фон,
   убираем светлую подложку/тень */
.catalog-calc .calc .calc-card--promo,
.catalog-calc .calc .calc-card--form {
	background: transparent;
	border: 1px solid #000;
	box-shadow: none;
}

@media (max-width: 768px) {
	.catalog-calc .calc {
		padding: 32px 20px;
		border-radius: 24px;
	}
}

/* --- ADV (Наши преимущества): больше высота фона, прозрачнее карточки --- */
.adv {
	min-height: 820px;
}

.adv-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.adv-card:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1023px) {
	.adv {
		min-height: 720px;
	}
}

@media (max-width: 768px) {
	.adv {
		min-height: 0;
	}
}

/* --- VIDEOS: full-bleed от левого края до правого --- */
.videos .videos__container {
	max-width: none;
	width: 100%;
	padding-inline: 40px;
}

@media (min-width: 1441px) {
	.videos .videos__container {
		padding-inline: 60px;
	}
}

/* ============================================================
   FAQ — самостоятельная full-width секция (вне .additional-section)
   Разметка:
     <section class="faq">
       <div class="faq__container"> ... </div>
     </section>
   ============================================================ */
.faq {
	background: var(--color-white);
	padding-block: var(--space-section);
}

.faq__container {
	width: 100%;
	max-width: var(--container-max); /* 1440px — шире базового контейнера */
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* На широких экранах чуть больше воздуха по бокам full-width секции */
@media (min-width: 1441px) {
	.faq__container {
		padding-inline: 60px;
	}
}

/* Сетка карточек занимает всю ширину контейнера */
.faq .faq__grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
	max-width: none;
}

/* ---------- Адаптив FAQ ---------- */
@media (max-width: 1280px) {
	.faq {
		padding-block: 72px;
	}
}

@media (max-width: 1023px) {
	.faq {
		padding-block: 64px;
	}
	.faq__container {
		padding-inline: 32px;
	}
	.faq .faq__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.faq {
		padding-block: 56px;
	}
	.faq__container {
		padding-inline: 24px;
	}
}

@media (max-width: 390px) {
	.faq {
		padding-block: 48px;
	}
	.faq__container {
		padding-inline: 16px;
	}
}


/* =========================================================
   BLOG PAGE
   ========================================================= */

/* ---------- HEADER (simple variant) ---------- */
.header--simple {
	position: relative;
	background: var(--color-white);
	padding-block: 24px;
}

.header-simple__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.header-simple__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-text);
}

.header-simple__logo-text {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

.header-simple__nav {
	display: flex;
}

.header-simple__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 40px;
}

.header-simple__item {
	display: inline-flex;
	align-items: center;
}

.header-simple__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1;
	transition: color var(--transition), opacity var(--transition);
}

.header-simple__link:hover {
	color: var(--color-navy);
}

.header-simple__link:focus-visible {
	color: var(--color-navy);
	outline: 2px solid var(--color-navy);
	outline-offset: 4px;
	border-radius: 4px;
}

.header-simple__item.current-menu-item > .header-simple__link,
.header-simple__link[aria-current="page"] {
	color: var(--color-navy);
	font-weight: 600;
}

.header-simple__caret {
	width: 12px;
	height: 12px;
	color: currentColor;
	transition: transform var(--transition);
}

.header-simple__item.menu-item-has-children:hover .header-simple__caret {
	transform: rotate(180deg);
}

/* ---------- BLOG HERO ---------- */
.blog-hero {
	padding-block: 24px 40px;
	background: var(--color-white);
}

.blog-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 260px;
	padding: 32px 40px;
	background: #c9c9c9;
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
}

.blog-hero__breadcrumbs {
	position: relative;
	z-index: 2;
	color: var(--color-white);
	opacity: 0.95;
}

.breadcrumbs__list--blog {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1;
	color: var(--color-white);
}

.breadcrumbs__list--blog .breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin: 0 8px 0 0;
	opacity: 0.7;
}

.breadcrumbs__list--blog .breadcrumbs__link {
	color: var(--color-white);
	text-decoration: none;
	opacity: 0.9;
	transition: opacity var(--transition);
}

.breadcrumbs__list--blog .breadcrumbs__link:hover,
.breadcrumbs__list--blog .breadcrumbs__link:focus-visible {
	opacity: 1;
	outline: none;
}

.breadcrumbs__list--blog .breadcrumbs__item--current {
	opacity: 1;
}

.blog-hero__title {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 64px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: -0.01em;
}

.blog-hero__placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.85);
	z-index: 1;
	pointer-events: none;
}

.blog-hero__placeholder-icon {
	width: 100%;
	height: 100%;
	color: currentColor;
}

/* ---------- BLOG SECTION ---------- */
.blog {
	background: var(--color-white);
	padding-block: 24px 100px;
}

.blog__container {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.blog__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 800;
	color: var(--color-text);
	letter-spacing: -0.01em;
}

/* ---------- BLOG CATEGORIES ---------- */
.blog-categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.blog-categories__item {
	display: inline-flex;
}

.blog-categories__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	background: var(--color-white);
	color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.blog-categories__btn:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

.blog-categories__btn:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.blog-categories__btn:active {
	transform: scale(0.98);
}

.blog-categories__btn--active,
.blog-categories__btn[aria-current="page"] {
	background: var(--color-navy);
	color: var(--color-white);
	border-color: var(--color-navy);
}

/* ---------- BLOG SLIDER ---------- */
.blog-slider {
	position: relative;
	margin-top: 12px;
}

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

.blog-slider__slide {
	display: flex;
}

/* Arrows */
.blog-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-text);
	border: 1px solid var(--color-divider);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	z-index: 3;
	transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.blog-slider__arrow--prev {
	left: -14px;
}

.blog-slider__arrow--next {
	right: -14px;
}

.blog-slider__arrow:hover {
	background: var(--color-navy);
	color: var(--color-white);
	border-color: var(--color-navy);
}

.blog-slider__arrow:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.blog-slider__arrow:active {
	transform: translateY(-50%) scale(0.96);
}

.blog-slider__arrow-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* ---------- BLOG CARD ---------- */
.blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 380px;
	padding: 22px;
	background: #d9d9d9;
	border-radius: 22px;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.blog-card__media {
	position: absolute;
	inset: 0;
	background: #d9d9d9;
	z-index: 0;
}

.blog-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.9);
	pointer-events: none;
}

.blog-card__placeholder-icon {
	width: 100%;
	height: 100%;
	color: currentColor;
}

/* "Подробнее" pill button — bottom left */
.blog-card__more {
	position: relative;
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 6px 0 16px;
	background: var(--color-white);
	color: var(--color-text);
	border-radius: 999px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	z-index: 2;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.blog-card__more:hover {
	background: var(--color-navy);
	color: var(--color-white);
}

.blog-card__more:hover .blog-card__more-icon {
	background: var(--color-white);
	color: var(--color-navy);
}

.blog-card__more:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.blog-card__more:active {
	transform: scale(0.98);
}

.blog-card__more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: 50%;
	transition: background-color var(--transition), color var(--transition);
}

.blog-card__more-arrow {
	width: 14px;
	height: 14px;
	color: currentColor;
}

/* ---------- BLOG RESPONSIVE ---------- */
@media (max-width: 1440px) {
	.blog-hero__title {
		font-size: 60px;
	}
}

@media (max-width: 1280px) {
	.blog-hero__card {
		min-height: 240px;
		padding: 28px 32px;
	}
	.blog-hero__title {
		font-size: 52px;
	}
	.blog__title {
		font-size: 36px;
	}
	.blog-slider__track {
		grid-template-columns: repeat(3, 1fr);
	}
	.blog-slider__slide:nth-child(4) {
		display: none;
	}
	.blog-categories__btn {
		padding: 0 20px;
	}
}

@media (max-width: 1023px) {
	.blog-hero__card {
		min-height: 220px;
		padding: 24px 28px;
	}
	.blog-hero__title {
		font-size: 44px;
	}
	.blog-slider__track {
		grid-template-columns: repeat(2, 1fr);
	}
	.blog-slider__slide:nth-child(3),
	.blog-slider__slide:nth-child(4) {
		display: flex;
	}
	.blog-card {
		min-height: 340px;
	}
	.blog-slider__arrow {
		width: 46px;
		height: 46px;
	}
	.blog-slider__arrow--prev {
		left: -8px;
	}
	.blog-slider__arrow--next {
		right: -8px;
	}
}

@media (max-width: 768px) {
	.blog-hero {
		padding-block: 16px 32px;
	}
	.blog-hero__card {
		min-height: 180px;
		padding: 22px 24px;
		border-radius: 22px;
	}
	.blog-hero__title {
		font-size: 36px;
	}
	.blog-hero__placeholder {
		width: 64px;
		height: 64px;
	}
	.blog {
		padding-block: 16px 64px;
	}
	.blog__title {
		font-size: 30px;
	}
	.blog__container {
		gap: 22px;
	}
	.blog-categories {
		gap: 10px;
	}
	.blog-categories__btn {
		min-height: 42px;
		padding: 0 18px;
		font-size: 13px;
	}
	.blog-slider__track {
		grid-template-columns: 1fr;
	}
	.blog-card {
		min-height: 300px;
	}
	.blog-slider__arrow {
		width: 42px;
		height: 42px;
	}
	.blog-slider__arrow--prev {
		left: 4px;
	}
	.blog-slider__arrow--next {
		right: 4px;
	}
	.header-simple__container {
		gap: 16px;
	}
	.header-simple__list {
		gap: 20px;
	}
	.header-simple__link {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.blog-hero__title {
		font-size: 32px;
	}
	.blog__title {
		font-size: 26px;
	}
	.header-simple__nav {
		display: none;
	}
	.header-simple__container {
		justify-content: center;
	}
}

@media (max-width: 390px) {
	.blog-hero__card {
		min-height: 160px;
		padding: 18px 20px;
	}
	.blog-hero__title {
		font-size: 28px;
	}
	.blog__title {
		font-size: 24px;
	}
	.blog-card {
		min-height: 260px;
		padding: 18px;
	}
}

@media (max-width: 375px) {
	.blog-hero__title {
		font-size: 26px;
	}
	.blog-categories__btn {
		min-height: 38px;
		padding: 0 14px;
		font-size: 12px;
	}
}

/* =========================================================
   CONTACT BLOCK — «Давайте обсудим ваш проект» + форма
   (используется на blog.html; готово под ACF/CF7)
   ========================================================= */
.contact-block {
	background: var(--color-white);
	padding-block: 40px 60px;
}

.contact-block__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: 60px;
	align-items: start;
}

/* ---------- CONTACT INFO (left column) ---------- */
.contact-info__title {
	margin: 0 0 24px;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--color-navy);
}

.contact-info__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text);
}

.contact-info__subtitle {
	margin: 32px 0 20px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--color-navy);
}

.contact-info__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text);
}

.contact-info__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
	margin-top: 1px;
}

.contact-info__icon-svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.contact-info__text-sm {
	color: var(--color-text);
}

.contact-info__link {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}

.contact-info__link:hover,
.contact-info__link:focus-visible {
	color: var(--color-navy);
	outline: none;
}

/* ---------- FEEDBACK FORM (right column) ---------- */
.feedback-form {
	background: var(--color-white);
	border: 1px solid #e5e5e5;
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.feedback-form__title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--color-navy);
	text-align: center;
}

.feedback-form__subtitle {
	margin: 0 0 22px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text-muted);
	text-align: center;
}

.feedback-form__fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 22px;
}

.feedback-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #f4f4f4;
	border-radius: 10px;
	padding: 8px 14px;
	transition: background var(--transition);
}

.feedback-form__field:focus-within {
	background: #eeeeee;
}

.feedback-form__label {
	font-size: 11px;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.feedback-form__input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text);
	padding: 0;
}

.feedback-form__input::placeholder {
	color: var(--color-text);
	opacity: 0.9;
}

.feedback-form__submit {
	display: block;
	width: 100%;
	background: var(--color-navy);
	color: var(--color-white);
	border: none;
	border-radius: 10px;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}

.feedback-form__submit:hover {
	background: var(--color-navy-hover);
}

.feedback-form__submit:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
}

.feedback-form__submit:active {
	transform: scale(0.99);
}

/* ---------- CONTACT BLOCK — RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.contact-block__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		gap: 40px;
	}
	.contact-info__title {
		font-size: 34px;
	}
}

@media (max-width: 1023px) {
	.contact-block__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.contact-block__form-wrap {
		max-width: 520px;
	}
}

@media (max-width: 768px) {
	.contact-block {
		padding-block: 24px 48px;
	}
	.contact-info__title {
		font-size: 28px;
	}
	.contact-info__subtitle {
		font-size: 18px;
		margin-top: 24px;
	}
	.contact-info__list {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.feedback-form {
		padding: 24px 20px;
	}
	.feedback-form__title {
		font-size: 22px;
	}
}

@media (max-width: 390px) {
	.contact-info__title {
		font-size: 24px;
	}
	.feedback-form {
		padding: 20px 16px;
	}
}

/* =========================================================
   FOOTER — CTA-вариант (тёмно-синий скруглённый блок)
   Все селекторы под .footer--cta, чтобы не пересечься
   с базовым .footer (projects.html, about.html, index.html)
   ========================================================= */
.footer--cta {
	background: transparent;
	padding-block: 20px 40px;
}

.footer--cta .footer__container {
	/* использует базовый .container */
}

.footer--cta .footer__card {
	position: relative;
	background: var(--color-navy);
	border-radius: 22px;
	color: var(--color-white);
	padding: 32px 40px 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"nav      nav"
		"headline headline"
		"contacts contacts"
		"legal    legal";
	row-gap: 22px;
	column-gap: 24px;
}

/* top: nav */
.footer--cta .footer__nav {
	grid-area: nav;
}

.footer--cta .footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.footer--cta .footer__menu-item {
	display: inline-flex;
}

.footer--cta .footer__menu-link {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	transition: color var(--transition), opacity var(--transition);
}

.footer--cta .footer__menu-link:hover,
.footer--cta .footer__menu-link:focus-visible {
	color: var(--color-white);
	opacity: 1;
	outline: none;
}

.footer--cta .footer__menu-item.current-menu-item > .footer__menu-link,
.footer--cta .footer__menu-link[aria-current="page"] {
	color: var(--color-white);
}

/* middle: headline + logo */
.footer--cta .footer__headline {
	grid-area: headline;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 8px;
}

.footer--cta .footer__title {
	margin: 0;
	font-size: 56px;
	line-height: 1.05;
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: -0.01em;
}

.footer--cta .footer__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	text-decoration: none;
}

.footer--cta .footer__logo-text {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-white);
}

/* bottom: contacts + call button */
.footer--cta .footer__contacts {
	grid-area: contacts;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 4px;
}

.footer--cta .footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.3;
	transition: color var(--transition);
}

.footer--cta .footer__contact:hover,
.footer--cta .footer__contact:focus-visible {
	color: var(--color-white);
	outline: none;
}

.footer--cta .footer__contact-icon {
	width: 24px;
	height: 24px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.footer--cta .footer__contact-icon-svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

.footer--cta .footer__call {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--color-white);
	color: var(--color-navy);
	padding: 8px 8px 8px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.footer--cta .footer__call:hover {
	background: #f2f2f2;
}

.footer--cta .footer__call:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.footer--cta .footer__call:active {
	transform: scale(0.98);
}

.footer--cta .footer__call-icon {
	width: 28px;
	height: 28px;
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.footer--cta .footer__call-icon-svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* legal */
.footer--cta .footer__legal {
	grid-area: legal;
	margin: 0;
	font-size: 10px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- FOOTER --cta — RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.footer--cta .footer__title {
		font-size: 48px;
	}
	.footer--cta .footer__card {
		padding: 28px 32px 24px;
	}
}

@media (max-width: 1023px) {
	.footer--cta .footer__title {
		font-size: 40px;
	}
	.footer--cta .footer__menu {
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.footer--cta {
		padding-block: 16px 32px;
	}
	.footer--cta .footer__card {
		padding: 24px 22px 22px;
		border-radius: 18px;
		row-gap: 18px;
	}
	.footer--cta .footer__menu {
		gap: 16px;
		font-size: 13px;
	}
	.footer--cta .footer__menu-link {
		font-size: 13px;
	}
	.footer--cta .footer__headline {
		flex-wrap: wrap;
		gap: 14px;
	}
	.footer--cta .footer__title {
		font-size: 34px;
	}
	.footer--cta .footer__contacts {
		gap: 14px;
	}
	.footer--cta .footer__call {
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.footer--cta .footer__title {
		font-size: 28px;
	}
	.footer--cta .footer__menu {
		gap: 12px;
	}
	.footer--cta .footer__contacts {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.footer--cta .footer__call {
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 390px) {
	.footer--cta .footer__card {
		padding: 20px 18px 18px;
	}
	.footer--cta .footer__title {
		font-size: 26px;
	}
}


/* =========================================================
   CONTACTS PAGE — «Создаём по индивидуальным проектам»
   Map (left) + два блока справа (contact-cta + contact-address)
   ========================================================= */
.custom-projects {
	background: var(--color-white);
	padding-block: 40px 60px;
}

.custom-projects__title {
	margin: 0 0 28px;
	font-family: var(--font-heading, inherit);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--color-text, #111);
}

.custom-projects__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

.custom-projects__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* ---------- MAP CARD ---------- */
.map-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: #e9edf0;
	min-height: 420px;
	aspect-ratio: 4 / 3;
}

.map-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}

.map-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(0, 0, 0, 0.25);
	z-index: 0;
}

.map-card__placeholder-icon {
	width: 64px;
	height: 64px;
	fill: currentColor;
}

/* ---------- CONTACT CTA (тёмная карточка «Свяжитесь с нами») ---------- */
.contact-cta {
	background: var(--color-navy, #0e2440);
	color: var(--color-white, #fff);
	border-radius: 16px;
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-cta__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
}

.contact-cta__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.contact-cta__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 4px;
}

.contact-cta__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.contact-cta__field {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 8px 12px;
	transition: border-color var(--transition), background var(--transition);
}

.contact-cta__field:focus-within {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
}

.contact-cta__label {
	font-size: 10px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 2px;
}

.contact-cta__input {
	width: 100%;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--color-white);
	font-size: 13px;
	line-height: 1.4;
	padding: 0;
	font-family: inherit;
}

.contact-cta__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.contact-cta__submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--color-white);
	color: var(--color-navy, #0e2440);
	border: 0;
	border-radius: 999px;
	padding: 6px 6px 6px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), color var(--transition), transform var(--transition);
	font-family: inherit;
}

.contact-cta__submit:hover {
	background: #f2f2f2;
}

.contact-cta__submit:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.contact-cta__submit:active {
	transform: scale(0.98);
}

.contact-cta__submit-icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-navy, #0e2440);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.contact-cta__submit-arrow {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* ---------- CONTACT ADDRESS (белая карточка «Адрес и контакты») ---------- */
.contact-address {
	background: var(--color-white);
	border: 1px solid #e6e8ec;
	border-radius: 16px;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contact-address__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-navy, #0e2440);
}

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

.contact-address__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text, #111);
}

.contact-address__icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-navy, #0e2440);
	margin-top: 1px;
}

.contact-address__icon-svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.contact-address__text {
	color: var(--color-text, #111);
}

.contact-address__link {
	color: var(--color-text, #111);
	text-decoration: none;
	transition: color var(--transition);
}

.contact-address__link:hover,
.contact-address__link:focus-visible {
	color: var(--color-navy, #0e2440);
}

/* ---------- CUSTOM PROJECTS — RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.custom-projects__title {
		font-size: 26px;
	}
	.map-card {
		min-height: 380px;
	}
	.contact-cta,
	.contact-address {
		padding: 24px;
	}
}

@media (max-width: 1023px) {
	.custom-projects__grid {
		grid-template-columns: 1fr;
	}
	.map-card {
		aspect-ratio: 16 / 10;
		min-height: 320px;
	}
}

@media (max-width: 768px) {
	.custom-projects {
		padding-block: 32px 48px;
	}
	.custom-projects__title {
		font-size: 22px;
		margin-bottom: 20px;
	}
	.custom-projects__grid {
		gap: 16px;
	}
	.custom-projects__cards {
		gap: 16px;
	}
	.contact-cta,
	.contact-address {
		padding: 20px;
		border-radius: 14px;
	}
	.contact-cta__fields {
		grid-template-columns: 1fr;
	}
	.map-card {
		border-radius: 14px;
		min-height: 260px;
	}
}

@media (max-width: 480px) {
	.custom-projects__title {
		font-size: 20px;
	}
	.contact-cta__submit {
		width: 100%;
		justify-content: space-between;
	}
}

@media (max-width: 390px) {
	.custom-projects {
		padding-block: 24px 40px;
	}
	.contact-cta,
	.contact-address {
		padding: 18px;
	}
	.map-card {
		min-height: 220px;
	}
}

/* =========================================================
   STANDARDS PAGE — «Высокие стандарты качества»
   Namespace: .standards-hero, .standards-stats,
              .standards-steps, .steps-slider, .step-card
   Соответствие правилам проекта:
   - единый style.css, БЭМ
   - .container внутри section
   - отступы секций только padding-block
   - mobile-first адаптив: 1440 / 1280 / 768 / 390 / 375
   ========================================================= */

/* ---------- STANDARDS HERO ---------- */
.standards-hero {
	padding-block: 32px 48px;
}

.standards-hero__card {
	background: var(--color-surface, #eceef1);
	border-radius: 28px;
	padding: 48px;
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);
	gap: 40px;
	align-items: stretch;
}

.standards-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-width: 0;
}

.standards-hero__title {
	font-family: var(--font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 600;
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.05;
	color: var(--color-text, #0f1720);
	margin: 0;
}

.standards-hero__subtitle {
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-muted, #5b6572);
	margin: 0;
	max-width: 32ch;
}

.standards-hero__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 22px;
	background: var(--color-primary, #0f1720);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	transition: background-color .2s ease, transform .2s ease;
}

.standards-hero__cta:hover,
.standards-hero__cta:focus-visible {
	background: #1c2732;
	outline: none;
}

.standards-hero__cta:active {
	transform: translateY(1px);
}

.standards-hero__cta-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary, #0f1720);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.standards-hero__cta-arrow {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ---------- STANDARDS STATS (grid inside hero) ---------- */
.standards-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 16px;
	min-width: 0;
}

.standards-stats__item {
	position: relative;
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	min-height: 160px;
	overflow: hidden;
}

.standards-stats__item--light {
	background: #f5f6f8;
	color: var(--color-text, #0f1720);
}

.standards-stats__item--dark {
	background: var(--color-primary, #0f1720);
	color: #fff;
}

.standards-stats__item--wide {
	grid-column: span 2;
}

.standards-stats__item--image {
	background: #dfe2e6;
	align-items: center;
	justify-content: center;
}

.standards-stats__value {
	font-family: var(--font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 600;
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.1;
}

.standards-stats__value sup {
	font-size: 0.55em;
	vertical-align: super;
}

.standards-stats__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.9;
}

.standards-stats__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa2ac;
}

.standards-stats__placeholder-icon {
	width: 42px;
	height: 42px;
	fill: currentColor;
}

/* ---------- STANDARDS STEPS ---------- */
.standards-steps {
	padding-block: 48px 72px;
}

.standards-steps__title {
	font-family: var(--font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.2;
	color: var(--color-text, #0f1720);
	margin: 0 0 28px;
}

/* Slider wrapper (готовим под Swiper с data-slider="standards-steps") */
.steps-slider {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 16px;
}

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

.steps-slider__slide {
	min-width: 0;
	display: flex;
}

.steps-slider__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border, #d7dbe0);
	background: #fff;
	color: var(--color-text, #0f1720);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	padding: 0;
}

.steps-slider__arrow:hover,
.steps-slider__arrow:focus-visible {
	background: var(--color-primary, #0f1720);
	color: #fff;
	border-color: var(--color-primary, #0f1720);
	outline: none;
}

.steps-slider__arrow:active {
	transform: translateY(1px);
}

.steps-slider__arrow-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ---------- STEP CARD ---------- */
.step-card {
	background: #f5f6f8;
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.step-card__header {
	display: flex;
	align-items: center;
	gap: 14px;
}

.step-card__num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary, #0f1720);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
}

.step-card__title {
	margin: 0;
	font-family: var(--font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-text, #0f1720);
}

.step-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.step-card__item {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text, #0f1720);
}

.step-card__item::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary, #0f1720);
}

.step-card__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid #e2e5ea;
}

.step-card__subtitle {
	margin: 8px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text, #0f1720);
}

.step-card__subtitle-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary, #0f1720);
}

.step-card__subtitle-svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.step-card__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text-muted, #5b6572);
}

/* ---------- STANDARDS — RESPONSIVE ---------- */
@media (max-width: 1280px) {
	.standards-hero__card {
		padding: 36px;
		gap: 28px;
	}
	.standards-stats {
		gap: 12px;
	}
	.standards-stats__item {
		padding: 20px;
		min-height: 140px;
	}
}

@media (max-width: 1023px) {
	.standards-hero__card {
		grid-template-columns: 1fr;
	}
	.steps-slider__track {
		grid-template-columns: repeat(2, 1fr);
	}
	.steps-slider__slide:nth-child(n+3) {
		display: none;
	}
}

@media (max-width: 768px) {
	.standards-hero {
		padding-block: 24px 32px;
	}
	.standards-hero__card {
		padding: 24px;
		border-radius: 20px;
	}
	.standards-stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.standards-stats__item--wide {
		grid-column: span 2;
	}
	.standards-steps {
		padding-block: 32px 48px;
	}
	.steps-slider {
		grid-template-columns: 1fr;
	}
	.steps-slider__arrow {
		display: none;
	}
	.steps-slider__track {
		grid-template-columns: 1fr;
	}
	.steps-slider__slide:nth-child(n+3) {
		display: flex;
	}
	.steps-slider__slide:nth-child(n+2) {
		display: none;
	}
}

@media (max-width: 390px) {
	.standards-hero__card {
		padding: 20px;
		border-radius: 16px;
	}
	.standards-stats__item {
		padding: 16px;
		min-height: 120px;
	}
	.step-card {
		padding: 20px;
		border-radius: 16px;
	}
}

@media (max-width: 375px) {
	.standards-hero__title {
		font-size: 28px;
	}
	.standards-hero__cta {
		width: 100%;
		justify-content: space-between;
	}
	.standards-stats {
		grid-template-columns: 1fr;
	}
	.standards-stats__item--wide {
		grid-column: span 1;
	}
}


/* =========================================================
   STANDARDS PAGE — extra sections
   Namespace: .advantages, .advantage-card,
              .offers, .offers-slider, .offer-card,
              .custom, .contact-panel, .contact-form-quick,
              .contact-info
   Architecture: BEM, mobile-first
   ========================================================= */

/* ---------- utils ---------- */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- ADVANTAGES ---------- */
.advantages {
	padding-block: 48px 72px;
}

.advantages__container {
	/* uses .container */
}

.advantages__panel {
	background: #0f1720;
	color: var(--color-white);
	border-radius: 32px;
	padding: 56px 48px;
}

.advantages__title {
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 40px;
	color: var(--color-white);
}

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

.advantages__item {
	display: flex;
}

/* сдвиг 4-й карточки во втором ряду, начиная со второй колонки — как на макете */
.advantages__item--offset {
	grid-column: 2 / 3;
}

/* ---------- advantage card ---------- */
.advantage-card {
	position: relative;
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 22px;
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 220px;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.advantage-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.18);
}

.advantage-card__corner {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	color: #0f1720;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition), background-color var(--transition);
}

.advantage-card__corner-icon {
	width: 20px;
	height: 20px;
}

.advantage-card:hover .advantage-card__corner {
	transform: rotate(-12deg);
}

.advantage-card__title {
	margin: 0;
	padding-right: 60px; /* room for corner */
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.advantage-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- OFFERS ---------- */
.offers {
	padding-block: 72px 88px;
}

.offers__container {
	/* uses .container */
}

.offers__title {
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
	color: var(--color-text);
}

/* tabs */
.offers__tabs {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.offers__tab-item {
	display: inline-flex;
}

.offers__tab {
	appearance: none;
	background: transparent;
	color: var(--color-text);
	border: 1px solid #d5d7da;
	border-radius: 999px;
	padding: 10px 22px;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.offers__tab:hover {
	background: #f2f3f5;
}

.offers__tab--active,
.offers__tab[aria-current="true"] {
	background: #0f1720;
	color: var(--color-white);
	border-color: #0f1720;
}

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

/* slider */
.offers-slider {
	position: relative;
	padding-inline: 56px;
}

.offers-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 20px;
}

/* когда инициализирован Swiper — сбрасываем grid, чтобы swiper управлял */
.offers-slider.swiper-initialized .offers-slider__track {
	display: flex;
	gap: 0;
	grid-auto-flow: initial;
	grid-auto-columns: initial;
}

.offers-slider__slide {
	min-width: 0;
	display: flex;
}

.offers-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	color: #0f1720;
	border: 1px solid #e0e2e6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.offers-slider__arrow--prev { left: 0; }
.offers-slider__arrow--next { right: 0; }

.offers-slider__arrow:hover,
.offers-slider__arrow:focus-visible {
	background: #0f1720;
	color: var(--color-white);
	border-color: #0f1720;
	outline: none;
}

.offers-slider__arrow:active {
	transform: translateY(-50%) scale(0.96);
}

.offers-slider__arrow-icon {
	width: 18px;
	height: 18px;
}

/* offer card */
.offer-card {
	position: relative;
	width: 100%;
	background: #eceef1;
	border-radius: 22px;
	overflow: hidden;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform var(--transition), box-shadow var(--transition);
}

.offer-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 23, 32, 0.12);
}

.offer-card__media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8bdc4;
}

.offer-card__media-icon {
	width: 56px;
	height: 56px;
}

.offer-card__cta {
	position: relative;
	z-index: 2;
	margin: 20px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	background: var(--color-white);
	color: var(--color-text);
	padding: 8px 8px 8px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.offer-card__cta:hover {
	background: #0f1720;
	color: var(--color-white);
}

.offer-card__cta-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0f1720;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.offer-card__cta:hover .offer-card__cta-icon {
	background: var(--color-white);
	color: #0f1720;
	transform: rotate(-12deg);
}

.offer-card__cta-arrow {
	width: 14px;
	height: 14px;
}

/* ---------- CUSTOM (map + form + contacts) ---------- */
.custom {
	padding-block: 48px 96px;
}

.custom__container {
	/* uses .container */
}

.custom__title {
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 32px;
	color: var(--color-text);
}

.custom__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.custom__map {
	position: relative;
	min-height: 520px;
	border-radius: 24px;
	overflow: hidden;
	background: #eceef1;
}

.custom__map-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

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

/* --- contact panel (dark) --- */
.contact-panel {
	background: #0f1720;
	color: var(--color-white);
	border-radius: 24px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-panel__title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--color-white);
}

.contact-panel__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.contact-panel__form {
	margin-top: 4px;
}

/* --- contact form quick --- */
.contact-form-quick {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-form-quick__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.contact-form-quick__field {
	display: block;
	min-width: 0;
}

.contact-form-quick__input {
	width: 100%;
	height: 48px;
	padding: 0 18px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	color: var(--color-white);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	outline: none;
	transition: border-color var(--transition), background-color var(--transition);
}

.contact-form-quick__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.contact-form-quick__input:focus {
	border-color: var(--color-white);
	background: rgba(255, 255, 255, 0.14);
}

.contact-form-quick__submit {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 52px;
	padding: 6px 6px 6px 22px;
	background: var(--color-white);
	color: #0f1720;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.contact-form-quick__submit:hover {
	background: #e7e9ec;
}

.contact-form-quick__submit:active {
	transform: translateY(1px);
}

.contact-form-quick__submit-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0f1720;
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--transition);
}

.contact-form-quick__submit:hover .contact-form-quick__submit-icon {
	transform: rotate(-12deg);
}

.contact-form-quick__submit-arrow {
	width: 16px;
	height: 16px;
}

/* --- contact info (light card) --- */
.contact-info {
	background: #f5f6f8;
	border-radius: 24px;
	padding: 28px 32px;
}

.contact-info__title {
	margin: 0 0 16px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

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

.contact-info__item {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	align-items: start;
	font-size: 15px;
	line-height: 1.45;
	color: var(--color-text);
}

.contact-info__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-white);
	color: #0f1720;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(15, 23, 32, 0.06);
}

.contact-info__svg {
	width: 16px;
	height: 16px;
}

.contact-info__text {
	display: inline-block;
}

.contact-info__link {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}

.contact-info__link:hover {
	color: var(--color-navy);
}

/* =========================================================
   STANDARDS EXTRA — RESPONSIVE
   ========================================================= */

/* 1280 — уменьшаем внутренние отступы тёмной панели и заголовков */
@media (max-width: 1280px) {
	.advantages__panel {
		padding: 44px 36px;
	}
	.advantages__title,
	.offers__title,
	.custom__title {
		font-size: 38px;
	}
	.offer-card {
		min-height: 340px;
	}
	.custom__map {
		min-height: 460px;
	}
}

/* 1023 — advantages: 2 в ряд, offset сбрасываем; offers: без стрелок в ряд; custom: 1 колонка */
@media (max-width: 1023px) {
	.advantages__panel {
		padding: 36px 28px;
		border-radius: 24px;
	}
	.advantages__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.advantages__item--offset {
		grid-column: auto;
	}

	.offers-slider {
		padding-inline: 0;
	}
	.offers-slider__arrow {
		display: none;
	}
	.offers-slider__track {
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: repeat(2, 1fr);
		grid-auto-flow: row;
	}
	.offers-slider__slide:nth-child(n+3) {
		display: none;
	}

	.custom__grid {
		grid-template-columns: 1fr;
	}
	.custom__map {
		min-height: 360px;
	}
}

/* 768 — планшет */
@media (max-width: 768px) {
	.advantages {
		padding-block: 32px 48px;
	}
	.advantages__panel {
		padding: 28px 20px;
	}
	.advantages__title,
	.offers__title,
	.custom__title {
		font-size: 30px;
		margin-bottom: 24px;
	}
	.advantages__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.advantage-card {
		padding: 22px 22px 24px;
		min-height: 0;
	}

	.offers {
		padding-block: 40px 56px;
	}
	.offers__tabs {
		gap: 8px;
		margin-bottom: 20px;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.offers__tab {
		padding: 9px 18px;
		font-size: 14px;
	}
	.offers-slider__track {
		grid-template-columns: 1fr;
	}
	.offers-slider__slide:nth-child(n+2) {
		display: none;
	}
	.offer-card {
		min-height: 300px;
	}

	.custom {
		padding-block: 32px 56px;
	}
	.contact-panel,
	.contact-info {
		padding: 24px;
		border-radius: 20px;
	}
	.contact-form-quick__row {
		grid-template-columns: 1fr;
	}
}

/* 480 */
@media (max-width: 480px) {
	.advantage-card__title {
		font-size: 20px;
		padding-right: 52px;
	}
	.advantage-card__corner {
		width: 40px;
		height: 40px;
		top: 14px;
		right: 14px;
	}
	.offer-card {
		min-height: 260px;
	}
	.offer-card__cta {
		margin: 14px;
		padding: 6px 6px 6px 16px;
		font-size: 14px;
	}
	.offer-card__cta-icon {
		width: 28px;
		height: 28px;
	}
}

/* 390 */
@media (max-width: 390px) {
	.advantages__panel {
		padding: 24px 18px;
		border-radius: 20px;
	}
	.advantages__title,
	.offers__title,
	.custom__title {
		font-size: 26px;
	}
	.contact-panel,
	.contact-info {
		padding: 20px;
	}
}

/* 375 */
@media (max-width: 375px) {
	.advantages__title,
	.offers__title,
	.custom__title {
		font-size: 24px;
	}
	.contact-form-quick__submit {
		padding-left: 18px;
		font-size: 14px;
	}
	.contact-info__item {
		grid-template-columns: 28px 1fr;
		gap: 10px;
		font-size: 14px;
	}
	.contact-info__icon {
		width: 28px;
		height: 28px;
	}
}

/* =========================================================
   EXTRA SERVICES — «Дополнительные услуги»
   Сетка карточек-плейсхолдеров: 3 в ряд на desktop.
   ========================================================= */
.extra-services {
	padding-block: 40px var(--space-section);
}

.extra-services__title {
	font-size: 42px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 28px;
}

.extra-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 200px;
	padding: 22px 24px;
	border-radius: var(--radius-image);
	background: #d9d9d9;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.service-card__media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.7);
	pointer-events: none;
}

.service-card__media-icon {
	width: 56px;
	height: 56px;
}

.service-card__title {
	position: relative;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	color: rgba(47, 47, 47, 0.85);
	margin: 0;
}

/* =========================================================
   FAQ — «Часто задаваемые вопросы»
   2 колонки: слева — заголовок + иллюстрация; справа — аккордеон.
   ========================================================= */
.faq {
	padding-block: var(--space-section);
}

.faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) 1fr;
	gap: 60px;
	align-items: start;
}

.faq__title {
	font-size: 42px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 28px;
}

.faq__figure {
	margin: 0;
}

.faq__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: #d9d9d9;
	border-radius: var(--radius-image);
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 18px;
}

.faq__image-icon {
	width: 56px;
	height: 56px;
}

.faq__caption-title {
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
}

.faq__caption-text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --- отдельная карточка вопроса --- */
.faq-item {
	background: #f2f3f4;
	border-radius: 14px;
	overflow: hidden;
	transition: background-color var(--transition);
}

.faq-item__heading {
	margin: 0;
}

.faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	background: transparent;
	text-align: left;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-text);
	cursor: pointer;
}

.faq-item__question {
	flex: 1;
}

.faq-item__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-navy);
	color: var(--color-white);
	transition: background-color var(--transition), transform var(--transition);
}

.faq-item__icon-svg {
	width: 18px;
	height: 18px;
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
	transform: rotate(180deg);
	background: var(--color-navy-hover);
}

.faq-item__trigger:hover .faq-item__icon {
	background: var(--color-navy-hover);
}

.faq-item__answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.35s ease;
}

.faq-item__answer-inner {
	padding: 0 18px 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

/* =========================================================
   DISCUSS — «Давайте обсудим ваш проект»
   ========================================================= */
.discuss {
	padding-block: var(--space-section);
}

.discuss__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}

.discuss__title {
	font-size: 42px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 24px;
}

.discuss__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 14px;
	max-width: 480px;
}

.discuss__contacts {
	margin-top: 32px;
}

/* --- contacts-block (переиспользуемый компонент) --- */
.contacts-block__title {
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 16px;
}

.contacts-block__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

.contacts-block__item {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text);
}

.contacts-block__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--color-navy);
}

.contacts-block__svg {
	width: 18px;
	height: 18px;
}

.contacts-block__link {
	color: var(--color-text);
	transition: color var(--transition);
}

.contacts-block__link:hover {
	color: var(--color-navy);
}

/* --- feedback card (форма «Обратная связь») --- */
.feedback {
	background: #f4f5f6;
	border-radius: var(--radius-image);
	padding: 32px;
}

.feedback__title {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 10px;
	text-align: center;
}

.feedback__text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin-bottom: 20px;
	text-align: center;
}

.feedback__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.feedback__field {
	display: block;
}

.feedback__input {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--color-divider);
	border-radius: 10px;
	background: var(--color-white);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.feedback__input::placeholder {
	color: var(--color-text-light);
}

.feedback__input:focus {
	outline: none;
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(49, 68, 99, 0.12);
}

.feedback__input--textarea {
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}

.feedback__submit {
	margin-top: 4px;
	padding: 14px 20px;
	background: var(--color-navy);
	color: var(--color-white);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition);
}

.feedback__submit:hover {
	background: var(--color-navy-hover);
}

/* =========================================================
   SITE FOOTER — «Свяжитесь с нами»
   Тёмная нижняя секция, БЭМ, WP-совместимо.
   ========================================================= */
.site-footer {
	background: var(--color-navy);
	color: var(--color-white);
	padding-block: 40px 32px;
	margin-top: 40px;
}

.site-footer__container {
	display: grid;
	gap: 28px;
}

/* --- top nav --- */
.site-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__nav-link {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	transition: color var(--transition);
}

.site-footer__nav-link:hover {
	color: var(--color-white);
}

/* --- CTA (title + logo) --- */
.site-footer__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.site-footer__title {
	font-size: 56px;
	line-height: 1;
	font-weight: 700;
	color: var(--color-white);
	margin: 0;
}

.site-footer__logo-text {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-white);
}

/* --- contacts row --- */
.site-footer__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-white);
	transition: opacity var(--transition);
}

.site-footer__contact:hover {
	opacity: 0.8;
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: rgba(255, 255, 255, 0.8);
}

.site-footer__contact-svg {
	width: 18px;
	height: 18px;
}

/* --- city select --- */
.site-footer__city {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: auto;
}

.site-footer__city-select {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 8px 34px 8px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
}

.site-footer__city-select:hover {
	background: rgba(255, 255, 255, 0.14);
}

.site-footer__city-select option {
	color: var(--color-text);
}

.site-footer__city-caret {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	width: 16px;
	height: 16px;
	color: var(--color-white);
	display: inline-flex;
}

.site-footer__city-caret svg {
	width: 16px;
	height: 16px;
}

/* --- legal --- */
.site-footer__legal {
	display: grid;
	gap: 4px;
}

.site-footer__legal-text {
	font-size: 11px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

/* =========================================================
   EXTRA SECTIONS — RESPONSIVE
   ========================================================= */
@media (max-width: 1280px) {
	.extra-services__title,
	.faq__title,
	.discuss__title {
		font-size: 36px;
	}
	.faq__grid {
		gap: 40px;
	}
	.discuss__grid {
		gap: 40px;
	}
	.site-footer__title {
		font-size: 46px;
	}
}

@media (max-width: 1023px) {
	.extra-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.faq__grid,
	.discuss__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.faq__figure {
		max-width: 420px;
	}
	.contacts-block__list {
		grid-template-columns: 1fr;
	}
	.site-footer__title {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.extra-services {
		padding-block: 24px 56px;
	}
	.extra-services__title,
	.faq__title,
	.discuss__title {
		font-size: 28px;
		margin-bottom: 20px;
	}
	.service-card {
		min-height: 160px;
		padding: 18px 18px;
	}
	.faq {
		padding-block: 40px;
	}
	.faq-item__trigger {
		font-size: 14px;
		padding: 14px 14px;
	}
	.faq-item__icon {
		width: 30px;
		height: 30px;
	}
	.faq-item__answer-inner {
		padding: 0 14px 14px;
	}
	.discuss {
		padding-block: 40px 56px;
	}
	.feedback {
		padding: 24px;
	}
	.site-footer {
		padding-block: 32px 24px;
	}
	.site-footer__nav-list {
		gap: 18px;
	}
	.site-footer__title {
		font-size: 32px;
	}
	.site-footer__contacts {
		gap: 16px;
	}
	.site-footer__city {
		margin-left: 0;
	}
}

@media (max-width: 480px) {
	.extra-services__grid {
		grid-template-columns: 1fr;
	}
	.service-card {
		min-height: 140px;
	}
	.feedback__title {
		font-size: 18px;
	}
	.feedback__input {
		padding: 12px 14px;
	}
}

@media (max-width: 375px) {
	.extra-services__title,
	.faq__title,
	.discuss__title {
		font-size: 24px;
	}
	.site-footer__title {
		font-size: 26px;
	}
	.site-footer__contact {
		font-size: 13px;
	}
}


/* ============================================================ */
/* ===== index-new.html � LDOO Landing (namespace: nw-) ======= */
/* ============================================================ */

/* ============================================================
   index-new.html — LDOO Landing
   Namespace: nw-*  (не пересекается с существующими стилями)
   Mobile-first. БЭМ. CSS-переменные.
   ============================================================ */

.nw-body {
	/* ---------- CSS VARIABLES ---------- */
	--nw-color-bg: #ffffff;
	--nw-color-surface: #ececec;
	--nw-color-surface-2: #f4f4f4;
	--nw-color-text: #111111;
	--nw-color-muted: #6b6b6b;
	--nw-color-line: #e4e4e4;
	--nw-color-accent: #0e3b5c;        /* тёмно-синий с макета */
	--nw-color-accent-hover: #0a2c46;
	--nw-color-on-accent: #ffffff;
	--nw-color-dark: #1a1a1a;

	--nw-font-body: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--nw-fs-base: 15px;
	--nw-fs-h1: clamp(30px, 5vw, 52px);
	--nw-fs-h2: clamp(24px, 3.6vw, 40px);
	--nw-fs-h3: clamp(16px, 1.6vw, 18px);
	--nw-fs-stat: clamp(24px, 2.6vw, 34px);

	--nw-container: 1280px;
	--nw-container-pad: 24px;

	--nw-radius-sm: 12px;
	--nw-radius-md: 20px;
	--nw-radius-lg: 28px;
	--nw-radius-xl: 36px;

	--nw-gap: 20px;
	--nw-gap-sm: 12px;

	--nw-section-pad-y: 24px;

	--nw-transition: 200ms ease;

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

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

.nw-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

.nw-body a {
	color: inherit;
	text-decoration: none;
}

.nw-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nw-body h1,
.nw-body h2,
.nw-body h3,
.nw-body p {
	margin: 0;
}

.nw-body svg {
	display: block;
	width: 100%;
	height: 100%;
}

.nw-body--lock {
	overflow: hidden;
}

/* ---------- CONTAINER ---------- */
.nw-container {
	width: 100%;
	max-width: var(--nw-container);
	margin: 0 auto;
	padding-inline: var(--nw-container-pad);
}

/* якоря — учёт фикс. хедера (на будущее) */
.nw-body [id] {
	scroll-margin-top: 80px;
}

/* ============================================================
   HEADER
   ============================================================ */
.nw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--nw-color-bg);
	border-bottom: 1px solid transparent;
}

.nw-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nw-gap);
	min-height: 64px;
	padding-block: 12px;
}

.nw-header__logo {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--nw-color-text);
	transition: opacity var(--nw-transition);
}
.nw-header__logo:hover { opacity: 0.75; }
.nw-header__logo:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---------- Основное меню ---------- */
.nw-header__nav {
	display: none;
}

.nw-menu {
	display: flex;
	gap: 28px;
	align-items: center;
}

.nw-menu__link,
/* поддержка WordPress-классов */
.nw-menu .current-menu-item > .nw-menu__link {
	position: relative;
	display: inline-block;
	padding: 6px 2px;
	font-size: 14px;
	color: var(--nw-color-muted);
	transition: color var(--nw-transition);
}

.nw-menu__link:hover,
.nw-menu__link:focus-visible {
	color: var(--nw-color-text);
	outline: none;
}
.nw-menu__link:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 4px;
	border-radius: 4px;
}
.nw-menu__link:active { color: var(--nw-color-accent); }

.nw-menu__link[aria-current="page"],
.nw-menu .current-menu-item > .nw-menu__link {
	color: var(--nw-color-text);
	font-weight: 500;
}

/* Заготовки под подменю WordPress */
.nw-menu .menu-item-has-children { position: relative; }
.nw-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	border-radius: var(--nw-radius-sm);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	padding: 8px 0;
}
.nw-menu .menu-item-has-children:hover > .sub-menu,
.nw-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

/* ---------- Бургер ---------- */
.nw-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--nw-color-line);
	border-radius: 10px;
	color: var(--nw-color-text);
	cursor: pointer;
	transition: background var(--nw-transition), border-color var(--nw-transition);
}
.nw-burger:hover { background: var(--nw-color-surface-2); }
.nw-burger:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 2px;
}
.nw-burger__icon { width: 22px; height: 22px; }
.nw-burger__icon--close { display: none; }
.nw-burger.is-open .nw-burger__icon--open { display: none; }
.nw-burger.is-open .nw-burger__icon--close { display: block; }

/* ---------- Мобильное меню ---------- */
.nw-mobile-menu {
	position: fixed;
	inset: 64px 0 0 0;
	background: var(--nw-color-bg);
	padding: 24px var(--nw-container-pad) 32px;
	overflow-y: auto;
	z-index: 40;
}
.nw-mobile-menu[hidden] { display: none; }

.nw-mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nw-mobile-menu__link {
	display: block;
	padding: 14px 4px;
	font-size: 18px;
	color: var(--nw-color-text);
	border-bottom: 1px solid var(--nw-color-line);
	transition: color var(--nw-transition);
}
.nw-mobile-menu__link:hover,
.nw-mobile-menu__link[aria-current="page"] {
	color: var(--nw-color-accent);
}
.nw-mobile-menu__link:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================================================
   PILL BUTTON — общая tёмно-синяя кнопка со стрелкой
   ============================================================ */
.nw-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 22px;
	background: var(--nw-color-accent);
	color: var(--nw-color-on-accent);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background var(--nw-transition), transform var(--nw-transition);
	white-space: nowrap;
}
.nw-pill-btn:hover { background: var(--nw-color-accent-hover); }
.nw-pill-btn:active { transform: translateY(1px); }
.nw-pill-btn:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 3px;
}

.nw-pill-btn__text { padding-block: 8px; }

.nw-pill-btn__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #fff;
	color: var(--nw-color-accent);
	border-radius: 50%;
	flex-shrink: 0;
}

.nw-pill-btn__icon { width: 16px; height: 16px; }

/* ============================================================
   MAIN
   ============================================================ */
.nw-main {
	display: block;
}

/* Все секции: отступы только через padding-block */
.nw-hero,
.nw-about,
.nw-stats,
.nw-services {
	padding-block: var(--nw-section-pad-y);
}

/* ============================================================
   HERO — «Высокие стандарты качества»
   ============================================================ */
.nw-hero__card {
	position: relative;
	background: var(--nw-color-surface);
	border-radius: var(--nw-radius-lg);
	padding: 24px 20px 20px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
}

.nw-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.nw-hero__title {
	font-size: var(--nw-fs-h1);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.nw-hero__media {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c9c9c9;
	min-height: 140px;
	padding-block: 24px;
}

.nw-hero__placeholder {
	width: 56px;
	height: 56px;
}

.nw-hero__btn {
	align-self: flex-start;
	margin-top: 8px;
}

/* ============================================================
   ABOUT — «Воплощаем ваши мечты в жизнь»
   ============================================================ */
.nw-about__card {
	background: var(--nw-color-surface-2);
	border-radius: var(--nw-radius-lg);
	padding: 20px;
}

.nw-about__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: stretch;
}

.nw-about__media {
	background: var(--nw-color-surface);
	border-radius: var(--nw-radius-md);
	min-height: 220px;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bfbfbf;
}
.nw-about__placeholder { width: 56px; height: 56px; }

.nw-about__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px;
}

.nw-about__title {
	font-size: var(--nw-fs-h2);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.nw-about__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--nw-color-muted);
	font-size: 14px;
	line-height: 1.55;
	max-width: 460px;
}

.nw-about__btn {
	align-self: flex-start;
	margin-top: 4px;
}

/* ============================================================
   STATS — 4 карточки
   ============================================================ */
.nw-stats__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nw-gap-sm);
}

.nw-stat-card {
	position: relative;
	background: var(--nw-color-surface-2);
	border-radius: var(--nw-radius-md);
	padding: 18px 16px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.nw-stat-card__num {
	font-size: var(--nw-fs-stat);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.nw-stat-card__text {
	font-size: 12px;
	line-height: 1.4;
	color: var(--nw-color-muted);
}

.nw-stat-card--dark {
	background: var(--nw-color-dark);
	color: #fff;
}
.nw-stat-card--dark .nw-stat-card__text { color: rgba(255,255,255,.7); }

/* ============================================================
   SERVICES — «Создаем по индивидуальным проектам»
   ============================================================ */
.nw-services__title {
	font-size: var(--nw-fs-h2);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}

.nw-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nw-gap-sm);
}

.nw-service-card {
	position: relative;
	background: var(--nw-color-surface);
	border-radius: var(--nw-radius-md);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 200px;
	transition: transform var(--nw-transition);
}
.nw-service-card:hover { transform: translateY(-2px); }

.nw-service-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 34px;
	height: 34px;
	background: var(--nw-color-accent);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.nw-service-card__badge-icon { width: 16px; height: 16px; }

.nw-service-card__media {
	flex: 1;
	background: var(--nw-color-surface-2);
	border-radius: var(--nw-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c9c9c9;
	min-height: 90px;
	aspect-ratio: 1 / 1;
}
.nw-service-card__placeholder { width: 40px; height: 40px; }

.nw-service-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 4px 4px;
}

.nw-service-card__title {
	font-size: var(--nw-fs-h3);
	line-height: 1.25;
	font-weight: 500;
	color: var(--nw-color-text);
}

.nw-service-card__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--nw-color-accent);
	color: #fff;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background var(--nw-transition), transform var(--nw-transition);
}
.nw-service-card__more:hover { background: var(--nw-color-accent-hover); }
.nw-service-card__more:active { transform: translateY(1px); }
.nw-service-card__more:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 3px;
}
.nw-service-card__more-icon { width: 14px; height: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.nw-footer {
	padding-block: 24px 40px;
	border-top: 1px solid var(--nw-color-line);
	margin-top: 24px;
}
.nw-footer__copy {
	font-size: 13px;
	color: var(--nw-color-muted);
	text-align: center;
}

/* ============================================================
   Поддержка WordPress editor-контента
   ============================================================ */
.nw-body .alignleft  { float: left;  margin: 0 1em 1em 0; }
.nw-body .alignright { float: right; margin: 0 0 1em 1em; }
.nw-body .aligncenter { display: block; margin-inline: auto; }
.nw-body .alignwide  { max-width: 1100px; margin-inline: auto; }
.nw-body .alignfull  { width: 100vw; margin-inline: calc(50% - 50vw); }
.nw-body .wp-caption { max-width: 100%; }
.nw-body .wp-caption-text { font-size: 12px; color: var(--nw-color-muted); }
.nw-body .entry-content ul { list-style: disc; padding-left: 1.2em; }
.nw-body .entry-content ol { list-style: decimal; padding-left: 1.2em; }
.nw-body .entry-content blockquote {
	border-left: 3px solid var(--nw-color-accent);
	padding: 8px 16px;
	color: var(--nw-color-muted);
	margin: 16px 0;
}
.nw-body .entry-content table {
	width: 100%;
	border-collapse: collapse;
}
.nw-body .entry-content table th,
.nw-body .entry-content table td {
	border: 1px solid var(--nw-color-line);
	padding: 8px 12px;
	text-align: left;
}

/* ============================================================
   ADAPTIVE — Mobile-first
   ============================================================ */

/* ---------- 390px ---------- */
@media (min-width: 390px) {
	.nw-body { --nw-section-pad-y: 28px; }
	.nw-hero__card { padding: 28px 24px 24px; min-height: 360px; }
	.nw-about__card { padding: 24px; }
}

/* ---------- 768px (tablet) ---------- */
@media (min-width: 768px) {
	.nw-body {
		--nw-container-pad: 24px;
		--nw-section-pad-y: 36px;
		--nw-gap-sm: 16px;
	}

	.nw-header__nav { display: block; }
	.nw-burger { display: none; }
	.nw-mobile-menu { display: none !important; }

	.nw-hero__card {
		padding: 40px 36px 32px;
		min-height: 420px;
	}

	.nw-about__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
	.nw-about__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
	.nw-about__content { padding: 12px 8px; justify-content: space-between; }

	.nw-stats__list {
		grid-template-columns: repeat(4, 1fr);
	}
	.nw-stat-card { min-height: 140px; padding: 22px 20px; }

	.nw-services__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.nw-service-card { min-height: 260px; padding: 16px; }
}

/* ---------- 1280px ---------- */
@media (min-width: 1280px) {
	.nw-body {
		--nw-container-pad: 40px;
		--nw-section-pad-y: 44px;
	}
	.nw-header__container { min-height: 72px; }
	.nw-hero__card {
		padding: 56px 48px 40px;
		min-height: 520px;
	}
	.nw-about__card { padding: 32px; }
	.nw-about__media { min-height: 360px; }
	.nw-stat-card { min-height: 160px; padding: 26px 24px; }
	.nw-service-card { min-height: 290px; }
}

/* ---------- 1440px ---------- */
@media (min-width: 1440px) {
	.nw-body {
		--nw-container: 1360px;
		--nw-section-pad-y: 48px;
	}
}

/* ============================================================
   STAGES — «Этапы работы» (namespace nw-)
   ============================================================ */
.nw-stages {
	padding-block: var(--nw-section-pad-y);
}

.nw-stages__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nw-gap-sm);
	align-items: stretch;
}

/* ---------- Левая большая карточка ---------- */
.nw-stages__hero {
	position: relative;
	background: var(--nw-color-surface);
	border-radius: var(--nw-radius-lg);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 280px;
	overflow: hidden;
}

.nw-stages__media {
	background: var(--nw-color-surface-2);
	border-radius: var(--nw-radius-md);
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bfbfbf;
}
.nw-stages__placeholder { width: 56px; height: 56px; }

.nw-stages__lead {
	color: var(--nw-color-muted);
	font-size: 13px;
	line-height: 1.55;
	max-width: 46ch;
}

.nw-stages__title {
	margin-top: auto;
	font-size: var(--nw-fs-h2);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--nw-color-text);
}

/* ---------- Правый блок: слайдер ---------- */
.nw-stages__slider {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	overflow: hidden;
}

.nw-stages__track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 400ms ease;
	will-change: transform;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Карточка проекта ---------- */
.nw-project-card {
	flex: 0 0 100%;
	min-width: 0;
	padding-inline: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nw-project-card__media {
	background: var(--nw-color-surface);
	border-radius: var(--nw-radius-md);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c9c9c9;
}
.nw-project-card__placeholder { width: 44px; height: 44px; }

.nw-project-card__body {
	padding: 2px 6px 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nw-project-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--nw-color-text);
	line-height: 1.2;
}

.nw-project-card__text {
	font-size: 13px;
	color: var(--nw-color-muted);
	line-height: 1.4;
}

/* ---------- Управление слайдером ---------- */
.nw-stages__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-inline: 6px;
}

.nw-slider-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.nw-slider-dots__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfcfcf;
	cursor: pointer;
	transition: background var(--nw-transition), transform var(--nw-transition);
}
.nw-slider-dots__dot:hover { background: #a8a8a8; }
.nw-slider-dots__dot:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 3px;
}
.nw-slider-dots__dot.is-active {
	background: var(--nw-color-accent);
	transform: scale(1.25);
}

.nw-slider-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nw-slider-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--nw-color-accent);
	color: #fff;
	cursor: pointer;
	transition: background var(--nw-transition), transform var(--nw-transition), opacity var(--nw-transition);
}
.nw-slider-btn:hover { background: var(--nw-color-accent-hover); }
.nw-slider-btn:active { transform: translateY(1px); }
.nw-slider-btn:focus-visible {
	outline: 2px solid var(--nw-color-accent);
	outline-offset: 3px;
}
.nw-slider-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}
.nw-slider-btn__icon { width: 16px; height: 16px; }
.nw-slider-btn__icon--prev { transform: rotate(180deg); }

/* ---------- Адаптив ---------- */
@media (min-width: 560px) {
	.nw-project-card { flex-basis: 50%; }
}

@media (min-width: 768px) {
	.nw-stages__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 20px;
	}
	.nw-stages__hero {
		padding: 28px 24px;
		min-height: 100%;
	}
	.nw-stages__media { min-height: 200px; }
	.nw-project-card { flex-basis: 33.3333%; }
}

@media (min-width: 1280px) {
	.nw-stages__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
		gap: 24px;
	}
	.nw-stages__hero {
		padding: 36px 32px;
	}
	.nw-stages__media { min-height: 240px; }
	.nw-project-card { flex-basis: 25%; }
	.nw-slider-btn { width: 40px; height: 40px; }
}

/* forced horizontal scroll tracks (sliders.js) */
.is-scroll-track::-webkit-scrollbar { display: none; }
.is-scroll-track { -ms-overflow-style: none; }

/* =========================================================
   Картинки заполняют свои рамки целиком (object-fit: cover)
   Касается всех мест вывода изображений.
   Логотип (header-simple__logo-img) намеренно исключён — contain.
   ========================================================= */
.about2-hero__image-img,
.about2-quote__image-img,
.about2-member__photo,
.about2-card__img,
.blog-card__img,
.blog-hero__img,
.faq__image-img,
.map-card__img,
.custom-projects__map-img,
.nw-about__img,
.nw-hero__img,
.nw-project-card__img,
.nw-stages__img,
.offer-card__media-img,
.service-card__media-img,
.nw-service-card__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Рамки клипят по радиусу */
.about2-hero__image,
.about2-quote__image,
.faq__image,
.map-card,
.offer-card__media,
.service-card__media,
.nw-service-card__media,
.nw-project-card__media,
.nw-stages__media,
.nw-hero__media,
.nw-about__media {
	overflow: hidden;
}

.header-simple__logo-img {
	object-fit: contain;
	max-height: 40px;
	width: auto;
}

/* Редактируемый фон hero-блока (Изображение записи страницы) */
.blog-hero__card--image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	isolation: isolate;
}
.blog-hero__card--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.1) 100%);
	z-index: 0;
}
.blog-hero__card--image > * {
	position: relative;
	z-index: 1;
}
.blog-hero__card--image .blog-hero__title,
.blog-hero__card--image .breadcrumbs,
.blog-hero__card--image .breadcrumbs__link,
.blog-hero__card--image .breadcrumbs__current,
.blog-hero__card--image .breadcrumbs__item {
	color: #fff;
}

/* Фикс-ширина карточек в горизонтальных треках — ровный слайдер */
.is-scroll-track > * { flex: 0 0 auto; }
.nw-stages__track > .nw-project-card {
	width: clamp(200px, 22vw, 260px);
}
.blog-slider__track > .blog-slider__slide {
	width: clamp(240px, 26vw, 320px);
}
.blog-slider__track > .blog-slider__slide > .blog-card { width: 100%; }