/* ==========================================================================
   ProPM V2 — та же раскладка, что и в home-vw.css, но пересчитанная под
   телефон: 390 = 100vw (1px = 0.256411vw). Нужна потому, что этот файл
   служит базой для мобильных: всё, что mobile-vw.css не переопределяет,
   приходит отсюда.

   Единственный источник правды: правки вносятся прямо сюда.
   Подключается через media="(max-width: 767px)".
   ========================================================================== */

/* ==========================================================================
   ProPM V2 — главная
   Макет: Figma ProPM V2, фреймы 1:1573 (загрузка) и 1:8 (после анимации).
   База 1920px, все размеры из макета в px. Адаптив — отдельной задачей.
   ========================================================================== */

/* --- Шрифты --------------------------------------------------------------- */

@font-face {
	font-family: "Altro Grotesk";
	src: url("../fonts/altro-grotesk-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Altro Serif";
	src: url("../fonts/altro-serif-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Altro Flare";
	src: url("../fonts/altro-flare-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hagrid";
	src: url("../fonts/hagrid-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Hagrid";
	src: url("../fonts/hagrid-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Handjet";
	src: url("../fonts/handjet-cyrillic.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Handjet";
	src: url("../fonts/handjet-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-extrabold-cyrillic.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-extrabold-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}

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

:root {
	/* Палитра макета */
	--c-ink: #16171b;
	--c-text: #3d4046;
	--c-muted: #8c8f96;
	--c-mint: #8fd9d2;
	--c-purple: #9f7db8;
	--c-coral: #f69785;
	--c-white: #fff;

	/* Сетка */
	--layout-w: 492.307693vw;
	--container-w: 476.923077vw;
	--gutter: 2.564103vw;
	--header-h: 19.74359vw;

	/* Шрифтовые стеки */
	--f-grotesk: "Altro Grotesk", "Hagrid", system-ui, sans-serif;
	--f-serif: "Altro Serif", Georgia, "Times New Roman", serif;
	--f-flare: "Altro Flare", "Hagrid", system-ui, sans-serif;
	--f-logo: "Manrope", system-ui, sans-serif;
	--f-pixel: "Handjet", "Courier New", monospace;

	/* Интро */
	--intro-duration: 1500ms;                          /* подъём первого экрана */
	--intro-ease: cubic-bezier(0.65, 0, 0.35, 1);      /* easeInOutCubic: мягкий старт и мягкая остановка */
	--layer-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* easeOutQuart: для появления фигур */
	--layer-duration: 450ms;

	/* Раскрытие карточек */
	--card-duration: 600ms;
	--card-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--desc-duration: 300ms;
	--desc-delay: 200ms;

	/* Появление при скролле. Смещения в vw, чтобы ход анимации
	   масштабировался вместе с макетом, а не жил в фиксированных пикселях. */
	--reveal-duration: 750ms;
	--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* easeOutQuart: быстрый вход, мягкая остановка */
	--reveal-step: 80ms;                                /* сдвиг соседних элементов друг за другом */
	--reveal-shift: 2.1vw;                              /* ~40px при 1920 */
	--reveal-shift-sm: 1.1vw;                           /* мелкие элементы идут короче */

	/* Липкая секция «Чому це важливо» */
	--why-scroll: 300vh;   /* сколько прокрутки занимает смена состояний */
	--why-accent: #ee8747;
}

/* --- База ----------------------------------------------------------------- */

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

body {
	min-width: var(--layout-w); /* Только десктоп: ниже 1920 — горизонтальный скролл. */
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--f-flare);
	-webkit-font-smoothing: antialiased;
}

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

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

.container {
	width: var(--container-w);
	margin-inline: auto;
}

/* --- Шапка (node 1:25) ---------------------------------------------------- */

.site-header {
	position: fixed;
	z-index: 100;
	inset-block-start: 0;
	inset-inline: 0;
	min-inline-size: var(--layout-w);
	background: var(--c-white);
	border-bottom: 0.256411vw solid var(--c-mint);
}

/* Шапка вынута из потока — возвращаем странице её высоту */
body {
	padding-block-start: var(--header-h);
}

/* Плавный переход к якорям; цель не должна уезжать под шапку */
html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-block-start: var(--header-h);
}

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

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20.512821vw;
	width: var(--container-w);
	margin-inline: auto;
	/* 16/16 по макету минус 1px: в Figma рамка рисуется внутри фрейма, в CSS — снаружи. */
	padding-block: 4.102565vw 3.846154vw;
}

.site-header__sp {
	flex: 1 0 0;
	min-width: 0.256411vw;
	height: 0.256411vw;
}

.logo {
	display: flex;
	align-items: center;
	gap: 3.333334vw;
	flex-shrink: 0;
}

.logo__mark {
	display: block;
	width: 10vw;
	height: 11.538462vw;
}

.logo__text {
	font-family: var(--f-logo);
	font-weight: 800;
	font-size: 4.554616vw;
	line-height: 4.782308vw;
	letter-spacing: -0.091103vw;
	color: var(--c-ink);
}

.nav {
	display: flex;
	align-items: center;
	gap: 7.692308vw;
	flex-shrink: 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-text);
	white-space: nowrap;
}

.lang {
	display: flex;
	align-items: center;
	gap: 0.512821vw;
	flex-shrink: 0;
}

.lang__item {
	padding: 1.538462vw 2.564103vw;
	border-radius: 5.128206vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-muted);
}

.lang__item.is-active {
	padding-inline: 7.692308vw;
	background: var(--c-mint);
	color: #000;
}

/* Бургер и мобильное меню живут только на телефоне: на десктопе их место
   занимает обычная навигация. Включение — в css/mobile.css. */
.burger,
.mobile-menu {
	display: none;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3.846154vw 15.384616vw;
	border-radius: 25.641026vw;
	font-family: var(--f-flare);
	font-size: 5.641026vw;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 200ms ease;
}

.btn:hover {
	filter: brightness(0.95);
}

.btn--sm {
	padding: 2.820513vw 17.948718vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
}

.btn--mint {
	background: var(--c-mint);
	color: var(--c-text);
}

.btn--purple {
	background: var(--c-purple);
	color: var(--c-white);
}

.btn--coral {
	background: var(--c-coral);
	color: var(--c-white);
}

/* --- Герой ---------------------------------------------------------------- */

/* Конечное состояние (оно же состояние без JS): ряд-распорка схлопнут. */
.hero {
	position: relative;
	display: grid;
	grid-template-rows: 0fr auto;
	min-block-size: 0;
	overflow: hidden;
}

.hero__spacer {
	min-block-size: 13.076924vw;
}

/* Паттерн первого экрана — стопка одинаковых слоёв 1920x1080.
   Холст слоёв нарисован от самого верха макета, поэтому стопка поднята на
   высоту шапки: верхний ряд фигур уходит под неё, как в Figma. */
.hero__art {
	position: absolute;
	inset-block-start: calc(-1 * var(--header-h));
	inset-inline: 0;
	aspect-ratio: 1920 / 1080;
	pointer-events: none;
	height: 100vh;
	width: 100%;
}

/* Пропорции макета дают высоту 1080 только на экране 16:9. На более широких
   окнах паттерн не доставал до низа первого экрана — раньше это скрывала
   жёсткая ширина страницы в 1920. Тянем стопку минимум на высоту экрана,
   а слои подрезаем по бокам, чтобы фигуры не растягивались. */
.hero__art--desktop {
	min-block-size: 100svh;
}

.hero__art--desktop .hero__layer {
	object-fit: cover;
}

/* Мобильный комплект слоёв лежит в той же разметке и на десктопе не нужен.
   Обратное переключение — в css/mobile.css. */
.hero__art--mobile {
	display: none;
}

.hero__layer {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	/* display: none; */
}

.hero__body {
	position: relative;
	padding-block: 12.820513vw 14.102565vw;
}

.hero__title {
	margin: 0 0 2.564103vw;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 26.666667vw;
	line-height: 1;
	letter-spacing: -0.266667vw;
	text-transform: uppercase;
	color: var(--c-ink);
}

.hero__title span {
	font-family: var(--f-serif);
	font-weight: 400;
	letter-spacing: -0.266667vw;
}

.hero__desc {
	max-width: 265.897436vw;
	margin: 0 0 12.820513vw;
	font-family: var(--f-flare);
	font-size: 6.666667vw;
	line-height: 1.2;
	color: var(--c-text);
}

.hero-cta {
	display: flex;
	gap: 2.564103vw;
}

/* --- Интро-анимация -------------------------------------------------------
   Класс .has-intro ставит инлайн-скрипт из inc/home-intro.php до первой
   отрисовки, .is-revealed добавляет assets/js/home-intro.js через 1 с после
   window.load. Без JS страница сразу рендерится в конечном состоянии. */

html.has-intro:not(.is-revealed),
html.has-intro:not(.is-revealed) body {
	overflow: hidden;
}

/* Пока идёт интро, страница заблокирована через overflow: hidden у <html>.
   Safari при этом умеет терять position: fixed — шапка пропадала и
   возвращалась только в конце анимации. Прокрутки на это время всё равно нет,
   поэтому держим шапку абсолютом: визуально то же место, но клиппинг её
   не касается. */
html.has-intro:not(.is-revealed) .site-header {
	position: absolute;
}

html.has-intro .hero {
	grid-template-rows: 1fr auto;
	min-block-size: calc(105svh - var(--header-h) - var(--wp-admin--admin-bar--height, 0vw));
	transition:
		grid-template-rows var(--intro-duration) var(--intro-ease),
		min-block-size var(--intro-duration) var(--intro-ease);
}

html.has-intro .hero__body {
	padding-bottom: 15.384616vw;
	transition: padding-bottom var(--intro-duration) var(--intro-ease);
}

html.has-intro .hero__art {
	transition: opacity var(--intro-duration) var(--intro-ease);
}

/* Картинка собралась — снимаем will-change с 19 слоёв, иначе во время подъёма
   компоновщик тащит 19 отдельных слоёв и кадры проседают. Гасим один контейнер. */
html.has-intro.is-art-done .hero__layer {
	will-change: auto;
	transition: none;
}

html.has-intro.is-art-done .hero__art {
	will-change: opacity;
}

/* Сборка паттерна: слои появляются по одному.
   --d выставляет JS в перемешанном порядке, шаг — --intro-art-window / (N-1). */
html.has-intro .hero__layer {
	opacity: 0;
	transform: scale(0.92);
	transform-origin: center center;
	transition:
		opacity var(--layer-duration) ease-out var(--d, 0ms),
		transform var(--layer-duration) var(--layer-ease) var(--d, 0ms);
	will-change: opacity, transform;
	object-position: center bottom;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html.has-intro.is-art-in .hero__layer {
	opacity: 1;
	transform: none;
}

html.has-intro.is-revealed .hero {
	grid-template-rows: 0fr auto;
	min-block-size: 0;
}

html.has-intro.is-revealed .hero__body {
	padding-bottom: 14.102565vw;
}

html.has-intro.is-revealed .hero__art {
	opacity: 0;
}

/* Текст первого экрана проявляется после отрисовки */
html.has-intro:not(.is-hero-ready) .hero__body {
	opacity: 0;
	transform: translateY(6.153847vw);
}

html.has-intro .hero__body {
	transition:
		opacity 700ms var(--layer-ease),
		transform 700ms var(--layer-ease),
		padding-bottom var(--intro-duration) var(--intro-ease);
}

@media (prefers-reduced-motion: reduce) {
	html.has-intro .hero,
	html.has-intro .hero__art,
	html.has-intro .hero__body,
	html.has-intro .hero__layer {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}

/* --- Карточки (ноды 1:16—1:24, состояния наведения — 1:46, 1:84, 1:122) ----
   Раскрытая карточка — 900px, сжатые — по 310px, промежутки 10px:
   900 + 310*3 + 10*3 = 1860, то есть ширина контейнера при любом наведении
   постоянна. По умолчанию раскрыта первая, при наведении — та, что под курсором. */

.cards {
	padding-bottom: 15.384616vw;
}

/* Промежутки сделаны отступами внутри колонок, а не gap: иначе между
   карточками остаётся полоса, на которой :hover не срабатывает ни на одной
   из них — все сжимались бы до 310px. Колонка шире видимой карточки на
   --gutter, лишние полотступа по краям ряда снимает отрицательный margin. */
.cards__grid {
	display: flex;
	margin-inline: calc(var(--gutter) / -2);
}

.card {
	flex: 0 0 calc(79.48718vw + var(--gutter));
	block-size: 153.076924vw;
	padding-inline: calc(var(--gutter) / 2);
	transition: flex-basis var(--card-duration) var(--card-ease);
}

.card__inner {
	position: relative;
	block-size: 100%;
	border-radius: 2.564103vw;
	overflow: hidden;
}

.card--wide {
	flex-basis: calc(230.769231vw + var(--gutter));
}

/* Курсор над группой — карточка по умолчанию уступает место */
.cards__grid:hover .card--wide {
	flex-basis: calc(79.48718vw + var(--gutter));
}

/* ...и раскрывается та, на которую навели. Правило идёт последним намеренно:
   специфичность у него такая же, решает порядок. */
.cards__grid .card:hover {
	flex-basis: calc(230.769231vw + var(--gutter));
}

.card__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--img-pos, center);
}

.card__overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.08) 29.808%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.card--light .card__overlay {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.08) 29.808%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.card__content {
	position: absolute;
	inset: 5.128206vw 5.128206vw auto 5.128206vw;
}

.card__title {
	margin: 0;
	font-family: var(--f-flare);
	font-weight: 500;
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-white);
	white-space: nowrap;
}

/* Описание видно только у раскрытой карточки */
.card__desc {
	/* Именно фиксированная ширина, а не max-: в сжатой карточке текст невидим,
	   но уже свёрстан на две строки, поэтому при раскрытии он не переверстывается
	   на глазах. Выход за пределы карточки срезает overflow у .card__inner. */
	inline-size: var(--desc-w, 90.769231vw);
	margin: 1.282052vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-white);
	opacity: 0;
	transition: opacity var(--desc-duration) ease;
}

.card--wide .card__desc {
	opacity: 1;
}

.cards__grid:hover .card--wide .card__desc {
	opacity: 0;
}

/* Текст проявляется, когда карточка уже почти раскрылась */
.cards__grid .card:hover .card__desc {
	opacity: 1;
	transition: opacity var(--desc-duration) ease var(--desc-delay);
}

@media (prefers-reduced-motion: reduce) {
	.card,
	.card__desc {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}
}

/* --- «Чому це важливо»: липкая секция ------------------------------------
   Состояния 1—4 из макета: карточка «Рішення» поднимается снизу (1080 -> 832
   -> 529 -> 268 по оси Y макета), набирая непрозрачность, а «Проблема» под ней
   уходит в размытие. Прогресс прокрутки считает assets/js/why-sticky.js и
   кладёт его в переменные --why-y2 / --why-o2 / --why-b1 / --why-d1. */

.why {
	position: relative;
	block-size: 100vh;
	background: var(--c-ink);
}

.why__sticky {
	position: sticky;
	inset-block-start: 0;
	block-size: 100vh;
	overflow: hidden;
}

.why__inner {
	position: relative;
	block-size: 100%;
}

.why__title {
	position: absolute;
	inset-block-start: 55.641026vw;
	inset-inline-start: 0;
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	letter-spacing: -0.166667vw;
	text-transform: uppercase;
	color: var(--c-white);
}

.why__title span {
	font-family: var(--f-serif);
	font-weight: 400;
}

/* Стопка карточек: левый край 750 по макету, то есть 720 от края контейнера */
.why__stack {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 184.615385vw;
	inline-size: 292.307693vw;
	block-size: 100%;
}

/* Обёртка отвечает за позицию и подъём. Фильтров на ней нет — иначе ярлык
   размылся бы вместе с карточкой (filter действует на всё поддерево).
   Верх обёртки — уровень ярлыка (217 по макету), карточка встаёт под ним на 268. */
.why-card-wrap {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 55.641026vw;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.why-card-wrap--light {
	transform: translateY(var(--why-y2, 208.205129vw));
	opacity: var(--why-o2, 0);
	will-change: transform, opacity;
}

.why-card {
	position: relative;
	padding: 5.128206vw 10.256411vw 10.256411vw;
	border-radius: 2.564103vw;
}

.why-card--dark {
	background: #000;
	border-start-start-radius: 0; /* в этом углу сидит ярлык */
	color: var(--c-white);
	filter: blur(var(--why-b1, 0vw));
	opacity: var(--why-d1, 1);
	will-change: filter, opacity;
}

.why-card--light {
	padding: 10.256411vw 10.256411vw 5.128206vw;
	background: var(--c-white);
	color: #000;
}

/* Ярлык-закладка. z-index нужен, потому что размытие карточки растекается
   за её границы, в том числе вверх, и без него смазало бы низ плашки. */
.why-card__tab {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: flex;
	align-items: center;
	padding: 2.564103vw 10.256411vw;
	border-start-start-radius: 2.564103vw;
	border-start-end-radius: 2.564103vw;
	font-family: var(--f-flare);
	font-size: 6.666667vw;
	line-height: 1.2;
	text-transform: uppercase;
}

.why-card-wrap--dark .why-card__tab {
	background: #000;
	color: var(--c-white);
}

.why-card-wrap--light .why-card__tab {
	margin-inline-start: 75.384616vw; /* 1044 - 750 по макету */
	background: var(--c-white);
	color: #000;
}

/* Слой обрезки: повторяет форму карточки и прячет вылезающий декор.
   На самой карточке overflow: hidden нельзя — он срезает ярлык. */
.why-card__clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}

/* Декор. У тёмной карточки — группа за правым краем, проценты как в макете.
   У светлой — экспорт уже обрезан по карточке, поэтому ставим по месту. */
.why-card__decor {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
}

/* PNG-экспорт с запечённым размытием: в SVG эффект блюра не переносится,
   и вместо мягких пятен получалась сетка жёстких штрихов. Экспорт уже обрезан
   по карточке, поэтому просто прижимаем его к правому краю. */
.why-card--dark .why-card__decor {
	inset-block-start: 0;
	inset-inline-end: -6.666667vw;
	inline-size: 132.307693vw;
	block-size: 111.025642vw;
	background-image: url("../img/why/decor-dark.webp?v=2");
	background-size: 132.307693vw 111.025642vw;
}

.why-card--light .why-card__decor {
	inset-block-start: 0;
	inset-inline-start: 150.853847vw;
	inline-size: 141.538462vw;
	block-size: 117.948718vw;
	background-image: url("../img/why/decor-light.svg?v=2");
	background-size: 141.538462vw 117.948718vw;
}

.why-card__body {
	position: relative;
}

.why-card__number {
	margin: 0;
	font-family: var(--f-pixel);
	font-weight: 400;
	font-size: 48.717949vw;
	line-height: 1;
	letter-spacing: -2.435898vw;
	text-transform: uppercase;
	color: var(--c-mint);
	white-space: nowrap;
}

.why-card__lead {
	inline-size: 126.410257vw;
	margin: 0 0 7.179488vw; /* распорки 10 + 18 из макета */
	font-family: var(--f-flare);
	font-size: 5.641026vw;
	line-height: 1.2;
}

.why-card--light .why-card__lead {
	inline-size: 113.846154vw;
}

.why-list {
	display: flex;
	flex-direction: column;
	gap: 1.282052vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.why-list__item {
	display: flex;
	gap: 5.128206vw;
	align-items: center;
}

.why-list__bullet {
	flex: 0 0 12.820513vw;
	block-size: 1.282052vw;
	border-radius: 1.282052vw;
	background: var(--why-accent);
}

.why-list__text {
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	white-space: nowrap;
}

/* Логотип в светлой карточке */
.why-card__logo {
	display: flex;
	align-items: flex-end;
	gap: 5.641026vw;
	margin-block-start: 12.820513vw;
	block-size: 35.897436vw;
}

.why-card__logo-mark {
	inline-size: 19.805129vw;
	block-size: 30.23077vw;
	margin-inline-start: 3.282052vw;
}

.why-card__logo-text {
	font-family: var(--f-flare);
	font-size: 10.614359vw;
	line-height: 7.806924vw;
	color: #1c1c1c;
	padding-block-end: 2.820513vw;
}

/* Пока JS не включил прокрутку состояний (или его нет вовсе), секция — обычный
   экран высотой 100vh с конечным состоянием: карточка «Рішення» сверху. */
.why:not(.is-scrollable) .why-card-wrap--light {
	transform: none;
	opacity: 1;
}

.why:not(.is-scrollable) .why-card--dark {
	filter: blur(3.076924vw);
	opacity: 0.5;
}

.why.is-scrollable {
	block-size: calc(100vh + var(--why-scroll));
}

@media (prefers-reduced-motion: reduce) {
	.why.is-scrollable {
		block-size: 100vh;
	}
}

/* --- «Ініціаторка програми» (ноды 3:58—3:69) -------------------------------
   Блок раскладываю абсолютом по координатам макета: страница фиксированная
   под 1920, а колонки здесь не выравниваются ни по какой сетке. */

.initiator {
	padding-block: 10.256411vw 69.23077vw; /* 117 сверху от шапки и до блока команды на 1147 */
	background: var(--c-white);
}

.initiator__inner {
	position: relative;
	block-size: 194.871795vw; /* высота фото — самый высокий элемент блока */
}

.initiator__col {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 74.615385vw; /* 321 в макете минус поле контейнера 30 */
}

.initiator__title {
	position: absolute;
	inset-block-start: 41.025642vw; /* 277 - 117 */
	inline-size: 132.564103vw;
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	color: var(--c-ink);
}

.initiator__title span {
	display: block;
	font-family: var(--f-serif);
	font-weight: 400;
}

.initiator__support {
	position: absolute;
	inset-block-start: 138.717949vw; /* 658 - 117 */
	margin: 0;
	font-family: var(--f-serif);
	font-size: 10.256411vw;   /* по ширине строки в макете: 255px при этой гарнитуре */
	line-height: 1;
	color: var(--c-ink);
	white-space: nowrap;
}

.initiator__logos {
	position: absolute;
	inset-block-start: 154.102565vw; /* 718 - 117 */
	display: flex;
	gap: 2.564103vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.logo-tile {
	position: relative;
	inline-size: 53.846154vw;
	height: fit-content;
	border-radius: 2.564103vw;
	background: #f7f7f7;
	overflow: hidden;
}

/* Логотип из ACF вписывается в плитку целиком */
.logo-tile__img--fit {
	inset: 5.128206vw;
	inline-size: auto;
	block-size: auto;
}

/* Картинка внутри плитки крупнее её и сдвинута — так в макете */
.logo-tile__img {
	/* position: absolute; */
	/* inset-block-start: var(--logo-y, 0); */
	/* inset-inline-start: var(--logo-x, 0); */
	/* inline-size: var(--logo-w, 100%); */
	/* block-size: var(--logo-h, auto); */
}

.logo-tile__img img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	height: 33.076924vw;
}

.initiator__photo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 241.025642vw; /* 970 - 30 */
	inline-size: 164.102565vw;
	block-size: 194.871795vw;
	margin: 0;
	border-radius: 2.564103vw;
	overflow: hidden;
}

.initiator__photo-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Карточка с именем: отступ 30 от левого, правого и нижнего края фото */
.initiator__person {
	position: absolute;
	inset-block-end: 7.692308vw;
	inset-inline: 7.692308vw;
	padding: 2.564103vw 7.692308vw 5.128206vw; /* в макете карточка 129 высотой: 10 + 42 + 5 + 52 + 20 */
	border-radius: 2.564103vw;
	background: var(--c-white);
	text-align: center;
}

.initiator__name {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 8.974359vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.initiator__role {
	margin: 1.282052vw 0 0;
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
}

/* --- Общие части секций ---------------------------------------------------
   Заголовок «жирное слово + светлое слово», подзаголовок и стрелки слайдера
   повторяются в нескольких блоках, поэтому вынесены отдельно. */

.section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10.256411vw;
}

.section-title {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	color: var(--c-ink);
}

.section-title span {
	font-family: var(--f-serif);
	font-weight: 400;
}

.section-subtitle {
	margin: 2.564103vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	max-width: 356.410257vw;
	color: var(--c-ink);
}

/* Стрелки слайдера: круг 60px, активная — насыщенная мята */
.slider-nav {
	display: flex;
	gap: 5.128206vw;
	flex-shrink: 0;
	margin-block-start: 0.769231vw; /* в макете кнопки на 3px ниже верха заголовка */
}

.slider-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 15.384616vw;
	block-size: 15.384616vw;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(143, 217, 210, 0.4); /* неактивная стрелка в макете — мята 40% */
	color: var(--c-ink);
	cursor: pointer;
	transition: background 200ms ease, opacity 200ms ease;
}

.slider-nav__btn--accent {
	background: var(--c-mint);
}

.slider-nav__btn:hover {
	background: #7ccfc7;
}

.slider-nav__btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

/* --- «Основна команда» (нода 3:30) ---------------------------------------- */

.team {
	padding-block: 0 76.153847vw; /* до блока «Про програму» на 2147 */
}

/* Дорожка идёт от кромки до кромки экрана: уезжающая карточка уходит за край,
   а не обрезается по полю контейнера. Поля внутри задают slidesOffsetBefore /
   slidesOffsetAfter — первая карточка встаёт на 30, последняя останавливается
   за 30 до правого края. Ширина карточки при этом фиксирована, иначе
   slidesPerView посчитал бы её от полной ширины экрана. */
.team__slider {
	margin-block-start: 11.794872vw; /* карточки на 1290 при заголовке 65 и подписи 21.6 */
	margin-inline: -7.692308vw;
	inline-size: calc(100% + 15.384616vw);
	overflow: hidden;         /* иначе слайды вылезают за страницу и дают горизонтальный скролл */
}

.team__slider .swiper-slide {
	inline-size: 115.384616vw;       /* 4 по 450 с зазорами 20 — ровно 1860 контейнера */
}

.person-card {
	position: relative;
	block-size: 143.589744vw;
	border-radius: 2.564103vw;
	overflow: hidden;
}

.person-card__img {
	position: absolute;
	inset-block-start: -7.692308vw;   /* фото выше карточки на 30 и ниже на 30 — как в макете */
	inset-inline: 0;
	inline-size: 100%;
	block-size: 158.974359vw;
	object-fit: cover;
}

/* Белая подпись: отступ 20 от левого, правого и нижнего края карточки */
.person-card__body {
	position: absolute;
	inset-block-end: 5.128206vw;
	inset-inline: 5.128206vw;
	padding: 5.128206vw;
	border-radius: 2.564103vw;
	background: var(--c-white);
	text-align: center;
}

.person-card__name {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.person-card__role {
	margin: 1.282052vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
}

/* --- Чипы и теги ---------------------------------------------------------- */

.chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 2.564103vw;  /* в макете высота чипа 44 вместе с рамкой */
	border: 0.256411vw solid #9AD27D;
	border-radius: 2.564103vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 2.564103vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag {
	padding: 2.307693vw;   /* в макете высота тега 42 вместе с рамкой */
	border: 0.256411vw solid var(--c-coral);
	border-radius: 2.564103vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
	white-space: nowrap;
}

.tag--active,
.tag.is-active {
	/* Активный тег: рамка вдвое толще, поэтому паддинг на 1px меньше — высота остаётся 42 */
	padding: 2.564103vw;
	border-width: 0.512821vw;
	background: rgba(246, 151, 133, 0.29);
}

/* Плашка-переключатель. Фон сбрасываем: у <button> он по умолчанию серый,
   а в макете у неактивной плашки заливки нет — только рамка. */
button.tag {
	/* font: inherit здесь нельзя — шорткат сбрасывает line-height из .tag и высота
	   плашки падает с 42 до 38. Гарнитуру и кегль задаёт .tag. */
	background: transparent;
	cursor: pointer;
	transition: border-color 200ms ease;
}

/* Наведение показываем только рамкой — заливка сместила бы акцент с активной */
button.tag:hover:not(.is-active) {
	border-color: #e8654b;
}

button.tag:focus-visible {
	outline: 0.512821vw solid var(--c-coral);
	outline-offset: 0.512821vw;
}

/* --- «Що ми змінюємо в бібліотеках» (ноды 3:70—3:72) ----------------------- */

.about {
	padding-block: 0 76.923077vw; /* до «Опор програми» на 3215 */
}

.about__inner {
	position: relative;
	/* Высоту задаёт колонка .about__body — см. ниже. */
}

/* Панель с глифами тянется на всю высоту блока, какой бы та ни стала */
.about__art {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 155.641026vw;
	border: 0.256411vw solid var(--c-mint);
	border-radius: 2.564103vw;
	overflow: hidden;
}

.about__art-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Колонка тянется до правого края контейнера: строке плашек нужен запас,
   она переносится и растёт вниз. Текст с кнопкой прижаты к низу блока,
   а отступ над ними получается сам — сколько осталось после плашек. */
.about__body {
	/* В потоке, а не абсолютом: иначе блок не знает своей высоты и длинный
	   текст вкладки наехал бы на следующую секцию. Высота из макета стала
	   минимальной — при необходимости колонка растёт. */
	position: relative;
	margin-inline-start: 176.153847vw;     /* 717 - 30 */
	inline-size: 300.769231vw;            /* 1860 - 687, до правого края */
	min-block-size: 196.153847vw;          /* макет 2150—2915; длинный текст растянет */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Чип на 2147, панель на 2150: отрицательный отступ внутри флекса не
   схлопывается с родителем, поэтому высота блока остаётся ровно 765. */
.about__body > .chip {
	margin-block-start: -0.769231vw;
}

.about__title {
	margin: 5.128206vw 0 0;               /* заголовок на 2211: чип заканчивается на 2191 */
	white-space: nowrap;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	color: var(--c-ink);
}

.about__title span {
	font-family: var(--f-serif);
	font-weight: 400;
}

.about__body .tag-list {
	inline-size: 100%;
	margin-block-start: 17.948718vw;       /* теги на 2346 */
}

.about__text {
	position: relative;
	display: grid;                  /* панели лежат в одной ячейке */
	inline-size: 199.23077vw;
	block-size: auto;               /* высота по самой длинной вкладке */
	margin-block-start: auto;       /* прижимает текст и кнопку к низу блока */
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
}

/* Все вкладки в одной ячейке сетки: блок берёт высоту самой высокой,
   а переключение остаётся плавным — панели не исчезают из потока. */
.about__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.about__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease;
}

.about__text p {
	margin: 0;
}

.about__text p + p {
	margin-block-start: 6.153847vw;
}

.about__text strong,
.about__text b {
	font-family: var(--f-grotesk);
	font-weight: 700;
}

.about__btn {
	position: relative;
	margin-block-start: 12.820513vw;       /* 50 от текста до кнопки */
	gap: 2.564103vw;
	padding-inline: 20.512821vw;
	overflow: visible;
}

/* Стикер PDF: координаты из макета относительно кнопки 454x56 */
.about__btn-pdf {
	position: absolute;
	inset-block-start: -7.948718vw;
	inset-inline-start: 102.48718vw;
	inline-size: 10.23077vw;
	block-size: 11.935898vw;
	pointer-events: none;
}

.about__photo {
	position: absolute;
	inset-block-start: 97.179488vw;       /* 2529 - 2150 */
	inset-inline-start: 396.666667vw;     /* 1577 - 30 */
	inline-size: 80.256411vw;
	block-size: 98.974359vw;
	border-radius: 2.564103vw;
	overflow: hidden;
}

.about__photo-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.about__photo-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease;
}

.about__photo-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* --- «Опори програми» (ноды 3:6673—3:6815) -------------------------------- */

.pillars {
	padding-block: 0 51.282052vw;
}

.pillars__title {
	white-space: nowrap;
	text-transform: uppercase;
	margin: 0 0 10.256411vw;
	margin-inline-start: 162.564103vw;     /* 664 - 30 */
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	color: var(--c-ink);
}

.pillars__title span {
	font-family: var(--f-serif);
	font-weight: 400;
}

.pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 155.641026vw);
	gap: 5.128206vw;
	justify-content: space-between;
}

.pillar {
	inline-size: 155.641026vw;
	height: 100%;
	padding: 5.641026vw 7.692308vw 7.692308vw 5.641026vw;
	border-radius: 2.564103vw;
	background: #f7f7f7;
}

.pillar__icon {
	inline-size: 16.923077vw;
	block-size: 16.923077vw;
}

.pillar__title {
	margin: 15.384616vw 0 0;               /* текст на 140 от верха карточки */
	font-family: var(--f-flare);
	font-weight: 500;
	/* font-weight: 700; */
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
	margin-left: 2.051283vw;
}

.pillar__text {
	margin: 1.282052vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
	margin-left: 2.051283vw;
}

/* --- «Як це працює» (нода 3:6840) ----------------------------------------- */

.how {
	position: relative;
	padding-block: 28.205129vw 0;
	/* block-size: 1030px; */
	background: var(--c-ink);
	overflow: hidden;
}

.how__title {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 16.666667vw;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: var(--c-white);
}

.how__title span {
	font-family: var(--f-serif);
	font-weight: 400;
}

.stages {
	display: flex;
	gap: 9.23077vw;              /* шаг 316 при ширине этапа 280 */
	margin: 15.384616vw 0 0;       /* полосы на 235 от начала блока */
	padding: 0;
	list-style: none;
}

.stage {
	inline-size: 71.794872vw;
}

.stage__bar {
	display: block;
	block-size: 1.282052vw;
	border-radius: 1.282052vw;
	background: #a2a2a4;
}

.stage__card {
	margin-block-start: 3.846154vw;
	block-size: 57.948718vw;
	padding: 5.128206vw;
	border-radius: 2.564103vw;
	background: var(--c-white);
}

.stage__num {
	display: block;
	font-family: var(--f-pixel);
	font-size: 25.641026vw;
	line-height: 1;
	color: var(--stage-color, var(--c-mint));
}

.stage__text {
	inline-size: 61.538462vw;
	margin: 5.128206vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.how__decor {
	position: relative;
}

.how__decor-img {
	width: 100%;
	height: fit-content;
}

/* --- «Пілотні громади» (нода 5:7648) --------------------------------------
   Внешний слайдер — громади (920x780). Внутри карточки своя галерея фото
   с зацикливанием, её стрелки показываются при наведении на фото.
   Первый слайд в макете нарисован в состоянии наведения: у панели другая
   заливка, а «Детальніше» жирным синим. */

.pilots {
	padding-block: 69.23077vw 76.923077vw; /* до блока 270, как в макете */
}

.pilots__title {
	text-transform: uppercase;
	font-family: var(--f-serif);
	font-weight: 400;
	letter-spacing: -0.166667vw;
}

/* Дорожка от кромки до кромки, поля задают slidesOffsetBefore / After по 30:
   уезжающий слайд уходит за край экрана, последний встаёт за 30 до правого. */
.pilots__slider {
	margin-block-start: 7.692308vw; /* слайды на 95 от начала блока */
	margin-inline: -7.692308vw;
	inline-size: calc(100% + 15.384616vw);
	overflow: hidden;
}

.pilots__slide {
	inline-size: 235.897436vw;
}

.pilot {
	display: flex;
	flex-direction: column;
	gap: 2.820513vw;
}

.pilot__media {
	position: relative;
	block-size: 153.846154vw;
	border-radius: 2.564103vw;
	overflow: hidden;
}

.pilot__gallery {
	block-size: 100%;
}

.pilot__img {
	inline-size: 100%;
	block-size: 153.846154vw;
	object-fit: cover;
}

/* Статус: плашка со скруглением 10, точка 11px */
.pilot__status {
	position: absolute;
	z-index: 2;
	inset-block-start: 2.564103vw;
	inset-inline-start: 2.564103vw;
	display: flex;
	align-items: center;
	gap: 2.564103vw;
	margin: 0;
	padding: 2.564103vw 5.128206vw;
	border-radius: 2.564103vw;
	background: #ddf4f1;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
}

.pilot__dot {
	inline-size: 2.820513vw;
	block-size: 2.820513vw;
	border-radius: 50%;
	background: #a1cd45;
	flex-shrink: 0;
}

/* Стрелки галереи: в покое скрыты, появляются при наведении на фото */
.pilot__nav {
	position: absolute;
	z-index: 2;
	inset-block-start: 2.564103vw;
	inset-inline-end: 2.564103vw;
	display: flex;
	gap: 3.589744vw;
	opacity: 0;
	transition: opacity 200ms ease;
}

.pilot__media:hover .pilot__nav,
.pilot__nav:focus-within {
	opacity: 1;
}

.pilot__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 10.769231vw;
	block-size: 10.769231vw;
	padding: 0;
	border: 0.256411vw solid #4b63ae;
	border-radius: 17.948718vw;
	background: rgba(236, 236, 231, 0.8);
	color: var(--c-text);
	cursor: pointer;
}

.pilot__nav-btn--accent {
	background: #ecece7;
	box-shadow: 0 1.025642vw 7.692308vw rgba(75, 99, 174, 0.2);
}

.pilot__nav-btn .icon--arrow {
	inline-size: 4.615385vw;
	block-size: 3.076924vw;
}

/* Панель с текстом. Заливка и начертание ссылки меняются при наведении
   на карточку — именно это состояние нарисовано на первом слайде макета. */
.pilot__body {
	display: flex;
	flex-direction: column;
	gap: 5.128206vw;
	padding: 2.564103vw 5.128206vw;
	border-radius: 2.564103vw;
	background: rgba(241, 177, 120, 0.28);
	transition: background 200ms ease;
}

.pilot:hover .pilot__body {
	background: rgba(238, 135, 71, 0.26);
}

.pilot__group {
	display: flex;
	flex-direction: column;
	gap: 2.564103vw;
}

.pilot__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5.128206vw;
	white-space: nowrap;
}

.pilot__name {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 6.666667vw;
	line-height: 1.2;
	color: #000;
}

.pilot__region {
	margin: 0;
	font-family: var(--f-serif);
	font-size: 6.666667vw;
	line-height: 1.2;
	color: #000;
}

/* Описание обрезается по трём строкам — высота 66 из макета */
.pilot__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	block-size: 16.923077vw;
	margin: 0;
	overflow: hidden;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
	opacity: 0.6;
}

.pilot__link {
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
	text-decoration: underline;
	text-underline-position: from-font;
}

.pilot:hover .pilot__link,
.pilot__link:focus-visible {
	font-family: var(--f-grotesk);
	font-weight: 700;
	color: #0c4187;
}

/* --- «Стати партнером»: форма (нода 3:6951) -------------------------------- */

.partner {
	position: relative;
	block-size: 217.948718vw;
}

.partner__art {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 283.846154vw;
	border-radius: 2.564103vw;
	background: #f2f8ff;
	overflow: hidden;
	border-radius: 0 2.564103vw 2.564103vw 0;
	fill: #f2f8ff;
	border: 0.256411vw solid rgba(12, 65, 135, 0.4);
	box-shadow: 0 1.025642vw 12.820513vw 0 rgba(61, 64, 70, 0.15);
}

.partner__art-img {
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}

.partner__art-img-mob{
	display: none;
}

.partner__lead {
	inline-size: 212.051283vw;
	margin: 152.564103vw 0 0 23.076924vw;
	font-family: var(--f-serif);
	font-size: 8.974359vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.partner__lead strong {
	font-family: var(--f-grotesk);
	font-weight: 700;
}

.partner__note {
	inline-size: 212.051283vw;
	margin: 10.256411vw 0 0 23.076924vw;
	font-family: var(--f-serif);
	font-size: 8.974359vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.partner__panel {
	position: absolute;
	inset-block-start: 7.692308vw;
	inset-inline-start: 283.846154vw;
	inline-size: 208.461539vw;
	block-size: 202.564103vw;
	padding: 38.461539vw 24.871795vw;
	border-radius: 2.564103vw;
	background: var(--c-ink);
}

.partner__title {
	margin: 0 0 6.410257vw;
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 16.666667vw;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-mint);
}

.partner__title span {
	font-family: var(--f-grotesk);
	font-weight: 700;
}

/* --- Поля формы ----------------------------------------------------------- */

.partner-form {
	display: flex;
	flex-direction: column;
	gap: 3.846154vw;              /* шаг полей 69 при высоте 54 */
	inline-size: 158.717949vw;
}

.field {
	position: relative;
	display: flex;
	align-items: center;
	block-size: 13.846154vw;
	border-radius: 2.564103vw;
	background: var(--c-white);
}

.field__input {
	inline-size: 100%;
	block-size: 100%;
	padding-inline: 5.384616vw;
	border: 0;
	border-radius: inherit;
	background: transparent;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.field__input::placeholder {
	color: var(--c-text);
	opacity: 1;
}

/* Рамку фокуса у полей не показываем — по просьбе. Ориентир при наборе
   остаётся штатный: курсор в поле. */
input:focus,
select:focus,
textarea:focus,
.field__input:focus {
	outline: none;
}

/* Телефон: слева блок с флагом и кодом, 80px по макету */
.field--phone .field__prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.538462vw;
	inline-size: 20.512821vw;
	block-size: 100%;
	flex-shrink: 0;
	border-start-start-radius: 2.564103vw;
	border-end-start-radius: 2.564103vw;
	background: #ececec;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	color: var(--c-ink);
}

.field__flag {
	inline-size: 5.128206vw;
	block-size: 3.589744vw;
	border-radius: 0.512821vw;
	background: linear-gradient(to bottom, #0057b7 50%, #ffd700 50%);
}

.field--phone .field__input {
	padding-inline-start: 2.564103vw;
}

.field--select .field__input {
	appearance: none;
	cursor: pointer;
}

.field__chevron {
	position: absolute;
	inset-inline-end: 5.384616vw;
	pointer-events: none;
	color: var(--c-ink);
}

.field__error {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 5.384616vw;
	font-family: var(--f-serif);
	/* 13 × 1.1 = 14.3 — умещается в зазор 15px между полями и не задевает
	   следующее поле. */
	font-size: 3.333334vw;
	line-height: 1.1;
	color: #ff6b6b;
}

.field.is-invalid {
	outline: 0.256411vw solid #ff6b6b;
}

/* Ловушка для ботов */
.field__trap {
	position: absolute;
	inline-size: 0.256411vw;
	block-size: 0.256411vw;
	margin: -0.256411vw;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.partner-form__submit {
	justify-content: center;
	inline-size: 100%;
	block-size: 14.358975vw;
	padding: 0;
	border: none;   /* у <button> своя рамка от браузера */
	font-size: 5.641026vw;
}

.partner-form.is-sending .partner-form__submit {
	opacity: 0.6;
	pointer-events: none;
}

/* Пустая строка статуса не должна занимать место: в попапе она добавляла
   лишние 15px флекс-отступа. */
.form-status:empty {
	display: none;
}

.form-status {
	margin: 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.3;
	color: var(--c-mint);
}

.form-status.is-error {
	color: #ff8f8f;
}

/* --- «Навчання в Данії» (нода 3:7500) --------------------------------------
   Заголовок двухчастный: «Навчання» — serif, «в Данії» — grotesk bold.
   Лид 1076 шириной двумя абзацами. Слайд 613: фото 390 и подпись на
   персиковой плашке с центрированным текстом. */

.denmark {
	padding-block: 76.923077vw 76.923077vw;
}

/* Голова блока: заголовок на 2, лид на 87, кнопки на 157 — всё из макета */
.denmark__head {
	position: relative;
	display: block;
	block-size: 55.641026vw;
	padding-block-start: 0.512821vw;
}

.denmark__title {
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: -0.166667vw;
}

.denmark__lead {
	position: absolute;
	inset-block-start: 22.307693vw;
	inset-inline-start: 0;
	inline-size: 275.897436vw;
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: #000;
}

.denmark__lead p {
	margin: 0;
}

/* В макете абзацы разделены пустой строкой */
.denmark__lead p + p {
	margin-block-start: 1.2em;
}

.denmark__head .slider-nav {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	margin-block-start: 0;
}

.denmark__slider {
	margin-block-start: 7.692308vw; /* слайды на 247 от начала блока */
	overflow: hidden;
}

.denmark__slide {
	display: flex;
	flex-direction: column;
	gap: 2.564103vw;
	margin: 0;
}

.denmark__img {
	inline-size: 100%;
	block-size: 100vw;
	border-radius: 2.564103vw;
	object-fit: cover;
}

/* Подпись: плашка с персиковой заливкой, текст по центру */
.denmark__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2.564103vw;
	border-radius: 2.564103vw;
	background: rgba(241, 177, 120, 0.28);
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	text-align: center;
	color: #000;
}

/* --- «Партнери» (нода 3:7564) --------------------------------------------- */

.partners {
	padding-block: 0 89.74359vw;
}

.partners__inner {
	display: flex;
	gap: 28.205129vw;      /* левая колонка 0..360, правая с 470 */
}

.partners__col {
	inline-size: 92.307693vw;
	flex-shrink: 0;
	padding-block-start: 3.846154vw;
}

.partners__title {
	margin-block-end: 7.692308vw;
	text-transform: uppercase;
	/* letter-spacing: -0.65px; */
}

.partners__btn {
	padding-inline: 15.384616vw;
	background: var(--c-purple);
	color: var(--c-white);
}

.partners__rows {
	flex: 1;
}

.partners__row {
	display: flex;
	align-items: center;
	gap: 10.256411vw;
	block-size: 32.564103vw;
	border-block-end: 0.256411vw solid #e4e5e6;
}

.partners__row:last-child {
	border-block-end: 0;
}

.partners__label {
	inline-size: 100.512821vw;
	margin: 0;
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.partners__logos {
	display: flex;
	gap: 2.564103vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 59.48718vw;
	block-size: 27.435898vw;
	border-radius: 2.564103vw;
	background: #f7f7f7;
}

.partner-tile__img {
	/* inline-size: 180px; */
	block-size: auto;
	object-fit: contain;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* --- «Новини проєкту» (ноды 3:7415, 3:7416) ------------------------------- */

.news {
	position: relative;
	padding-block: 0 82.051283vw;
}

.news__decor {
	position: absolute;
	z-index: -1;
	/* В макете декор на 9388, заголовок блока на 9643 — то есть на 255 выше него.
	   Секция начинается с заголовка, поэтому отступ отрицательный. */
	inset-block-start: -65.384616vw;
	inset-inline-end: 0;
	pointer-events: none;
}

.news__title {
	text-transform: uppercase;
}

.news__filters {
	margin-block-start: 10.256411vw;
}

/* Фильтры новостей — тот же компонент, стили берутся из .tag */

.news__slider {
	margin-block-start: 10.256411vw;
	overflow: hidden;
}

.news-card {
	display: flex;
	flex-direction: column;
	inline-size: 115.384616vw;
	block-size: auto;
	border-radius: 2.564103vw;
	background: #f9f9f8;
	overflow: hidden;
}

.news-card__media {
	position: relative;
	block-size: 69.23077vw;
}

.news-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.news-card__tag {
	position: absolute;
	inset-block-start: 5.128206vw;
	inset-inline-start: 5.128206vw;
	display: flex;
	align-items: center;
	gap: 2.564103vw;
	margin: 0;
	padding: 1.538462vw 4.102565vw;
	border-radius: 25.641026vw;
	background: #fbd9d2;
	font-family: var(--f-serif);
	font-size: 4.102565vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.news-card__tag::before {
	content: "";
	inline-size: 2.051283vw;
	block-size: 2.051283vw;
	border-radius: 50%;
	background: var(--c-coral);
}

.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 5.128206vw;
}

.news-card__title {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.news-card__text {
	margin: 2.564103vw 0 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.3;
	color: var(--c-ink);
}

.news-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-start: auto;
	padding-block-start: 5.128206vw;
}

.news-card__link {
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	color: var(--c-purple);
	text-decoration: underline;
}

.news-card__date {
	display: flex;
	align-items: center;
	gap: 2.051283vw;
	margin: 0;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	color: var(--c-ink);
}

.news-card__date .icon--calendar {
	color: var(--c-mint);
}

/* --- Подвал (нода 3:7622) -------------------------------------------------- */

.site-footer-cta {
	padding-block: 10.512821vw 25.641026vw;  /* заголовок на 41 от начала подвала */
	background: var(--c-ink);
	color: var(--c-white);
}

.site-footer-cta__inner {
	display: grid;
	grid-template-columns: 203.589744vw 157.948718vw auto;
	column-gap: 0;
	row-gap: 0;
}

.site-footer-cta__logo {
	display: flex;
	align-items: center;
	gap: 2.974359vw;
	grid-row: 1;
	margin-block-start: 4.871795vw;   /* логотип в макете на 60 */
	align-self: flex-start;
}

/* В подвале лого мельче, чем в шапке: 40 против 45 по высоте */
.site-footer-cta__mark svg {
	inline-size: 8.897436vw;
	block-size: 10.256411vw;
}

.site-footer-cta__logo-text {
	font-family: var(--f-logo);
	font-weight: 800;
	font-size: 4.051283vw;
	line-height: 4.251283vw;
	letter-spacing: -0.091103vw;
	color: var(--c-white);
}

.site-footer-cta__cta {
	grid-column: 2 / -1;
	grid-row: 1;
	align-self: start;
}

.site-footer-cta__heading {
	margin: 0 0 5.128206vw;
	font-family: var(--f-serif);
	font-size: 16.666667vw;
	line-height: 1;
	color: var(--c-white);
}

.site-footer-cta__rule {
	grid-column: 1 / -1;
	block-size: 0.256411vw;
	margin: 20.512821vw 0;             /* линия на 327, нижний ряд на 408 */
	border: 0;
	background: #3d4046;
}

.site-footer-cta__about {
	inline-size: 133.333334vw;
	align-self: start;
	margin: 0;
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-white);
}

.site-footer-cta__label {
	margin: 0 0 2.564103vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-muted);
}

.site-footer-cta__contacts p,
.site-footer-cta__socials li {
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
}

.site-footer-cta__phone {
	margin: 0 0 2.564103vw;
	font-family: var(--f-grotesk);
	font-weight: 700;
}

.site-footer-cta__email {
	margin: 0;
}

.site-footer-cta__email a,
.site-footer-cta__socials a {
	text-decoration: underline;
}

.site-footer-cta__socials ul {
	display: flex;
	flex-direction: column;
	gap: 2.564103vw;
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}

/* --- Страница проєкта: карточка громади (нода 21:18783) ------------------- */

.project {
	padding-block: 10.256411vw 0;   /* блок на 117 от начала страницы при шапке 77 */
}

.project__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.project__col {
	display: flex;
	flex-direction: column;
	gap: 7.692308vw;
	inline-size: 235.897436vw;
	flex-shrink: 0;
}

.project__title {
	margin: 0;
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 16.666667vw;
	line-height: 1;
	letter-spacing: -0.166667vw;
	color: #000;
}

.project__title strong {
	font-family: var(--f-grotesk);
	font-weight: 700;
}

.project__meta {
	display: flex;
	align-items: center;
	gap: 5.128206vw;
}

/* Плашки: обе высотой 42 вместе с рамкой, скругление 10 */
.project-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.564103vw;
	margin: 0;
	padding: 2.564103vw 5.128206vw;
	border-radius: 2.564103vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
	white-space: nowrap;
}

.project-pill--region {
	padding-block: 2.307693vw;      /* рамка съедает по пикселю сверху и снизу */
	border: 0.256411vw solid #45bfb4;
	background: rgba(221, 244, 241, 0.4);
}

.project-pill--status {
	background: #ddf4f1;
}

.project-pill .icon--location {
	inline-size: 5.128206vw;
	block-size: 5.128206vw;
	color: #45bfb4;
	flex-shrink: 0;
}

.project-pill__dot {
	inline-size: 2.820513vw;
	block-size: 2.820513vw;
	border-radius: 50%;
	background: #a1cd45;
	flex-shrink: 0;
}

.project__text {
	inline-size: 220.256411vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
}

.project__text p {
	margin: 0;
}

/* В макете абзацы разделены пустой строкой */
.project__text p + p {
	margin-block-start: 1.2em;
}

/* --- Сравнение «до / після» (нода 21:18795) --------------------------------
   Кадр 920x600, снимки внутри ровно по кадру: object-fit: cover сам подрежет
   лишнее по центру. (В макете лежали квадраты 920x920 с обрезкой по нижнему
   краю — правка с прода от 22.09, кадрирование по центру выглядит лучше.)
   Положение шторки живёт в --ba-pos, её двигает assets/js/before-after.js. */

.before-after {
	position: relative;
	inline-size: 235.897436vw;
	block-size: 153.846154vw;
	flex-shrink: 0;
	border-radius: 3.076924vw;
	background: #efefeb;
	overflow: hidden;
	touch-action: none;   /* иначе браузер перехватит движение под прокрутку */
	cursor: ew-resize;
}

.before-after__layer {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 235.897436vw;
	block-size: 153.846154vw;
}

/* Верхний снимок обрезается по шторке.
   Режем clip-path, а не шириной слоя: при обрезке шириной снимок внутри
   обязан быть жёстко заданного размера, иначе он сжимается вместе со слоем
   и «едет» при перетаскивании — так и было на телефоне, где размеры
   резиновые. С clip-path слой всегда во всю ширину кадра. */
.before-after__layer--before {
	clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}

.before-after__img {
	inline-size: 235.897436vw;
	block-size: 153.846154vw;
	max-inline-size: none;
	object-fit: cover;
}

/* Подписи-таблетки в углах кадра */
.before-after__label {
	position: absolute;
	inset-block-start: 6.153847vw;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2.307693vw;
	padding: 2.307693vw 4.615385vw 2.307693vw 4.102565vw;
	border: 0.256411vw solid rgba(0, 0, 0, 0.07);
	border-radius: 25.641026vw;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.512821vw 2.564103vw rgba(0, 0, 0, 0.1);
	font-family: var(--f-logo);
	font-weight: 600;
	line-height: 1.2;   /* у Manrope «normal» шире макетного: 39 вместо 37 */
	color: #16171b;
	white-space: nowrap;
	pointer-events: none;
}

.before-after__label--before {
	inset-inline-start: 6.153847vw;
	font-size: 3.589744vw;
	letter-spacing: 0.071795vw;
}

.before-after__label--after {
	inset-inline-start: 204.358975vw;
	font-size: 3.846154vw;
	letter-spacing: 0.076924vw;
}

.before-after__dot {
	inline-size: 2.051283vw;
	block-size: 2.051283vw;
	border-radius: 50%;
	background: var(--c-mint);
	flex-shrink: 0;
}

.before-after__label--after .before-after__dot {
	background: var(--c-coral);
}

/* Шторка: линия 5px по центру позиции */
.before-after__divider {
	position: absolute;
	inset-block: 0;
	z-index: 2;
	inline-size: 1.282052vw;
	margin-inline-start: -0.641026vw;
	inset-inline-start: var(--ba-pos, 50%);
	border: 0.256411vw solid rgba(0, 0, 0, 0.28);
	background: var(--c-white);
	box-shadow: 0 0 1.538462vw rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

.before-after__handle {
	position: absolute;
	inset-block-start: 59.48718vw;
	inset-inline-start: var(--ba-pos, 50%);
	z-index: 3;
	inline-size: 19.48718vw;
	block-size: 19.48718vw;
	margin-inline-start: -9.74359vw;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: ew-resize;
}

.before-after__handle .icon--drag {
	display: block;
	inline-size: 19.48718vw;
	block-size: 19.48718vw;
}

.before-after__handle:focus-visible {
	outline: 0.512821vw solid var(--c-mint);
	outline-offset: 1.025642vw;
	border-radius: 50%;
}

.before-after__hint {
	position: absolute;
	inset-block-start: 84.102565vw;
	inset-inline-start: 50%;
	z-index: 2;
	transform: translateX(-50%);
	margin: 0;
	padding: 2.307693vw 4.615385vw;
	border-radius: 25.641026vw;
	background: rgba(22, 23, 27, 0.82);
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: var(--c-white);
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 200ms ease;
}

/* Пока тянут — подсказка не нужна */
.before-after.is-dragging .before-after__hint {
	opacity: 0;
}

/* --- Страница проєкта: галерея ---------------------------------------------
   Разметка и стили общие с «Навчання в Данії», здесь только снят заголовок:
   стрелки встают над слайдами справа. */

.denmark--bare {
	padding-block: 58.974359vw 0;   /* галерея на 947 при карточке до 717 */
}

.denmark--bare .denmark__head {
	display: flex;
	justify-content: flex-end;
	block-size: auto;
	padding-block-start: 0;
	margin-block-end: 7.692308vw;
}

.denmark--bare .denmark__head .slider-nav {
	position: static;
}

/* --- Страница проєкта: описание (ноды 21:18829, 21:18832) ------------------ */

.project-text {
	padding-block: 28.205129vw 0;   /* текст на 1589 при галерее до 1479 */
}

.project-text__lead {
	margin: 0;
	font-family: var(--f-serif);
	font-size: 11.538462vw;
	line-height: 1;
	letter-spacing: -0.115385vw;
	color: #000;
}

.project-text__body {
	margin-block-start: 5.128206vw;
	font-family: var(--f-serif);
	font-size: 4.615385vw;
	line-height: 1.2;
	color: #000;
}

.project-text__body p {
	margin: 0;
}

.project-text__body p + p {
	margin-block-start: 1.2em;
}

/* Текст приходит из визуального редактора. В макете (ноды 5:63, 5:66) описание
   состоит из повторяющихся пар «заголовок 45 — текст 18», между парами 110,
   между заголовком и текстом 20. Заголовок второго уровня внутри редактора
   ведёт себя так же, поэтому вторую пару автор набирает прямо в поле. */
.project__text h2,
.project-text__body h2,
.project__text h3,
.project-text__body h3,
.project__text h4,
.project-text__body h4 {
	margin: 28.205129vw 0 5.128206vw;
	font-family: var(--f-serif);
	font-weight: 400;
	line-height: 1;
	color: #000;
}

.project__text h2,
.project-text__body h2 {
	font-size: 11.538462vw;
	letter-spacing: -0.115385vw;
}

.project__text h3,
.project-text__body h3 {
	font-size: 8.974359vw;
	letter-spacing: -0.089744vw;
}

.project__text h4,
.project-text__body h4 {
	font-size: 6.666667vw;
	letter-spacing: -0.066667vw;
}

.project__text :first-child,
.project-text__body :first-child {
	margin-block-start: 0;
}

/* Списки идут по левому краю текста: маркер часть строки, как в макете */
.project__text ul,
.project-text__body ul,
.project__text ol,
.project-text__body ol {
	margin: 1.2em 0 0;
	padding: 0;
	list-style: none;
}

.project__text ul li::before,
.project-text__body ul li::before {
	content: "•";
	margin-inline-end: 2.051283vw;
}

.project__text ol,
.project-text__body ol {
	list-style: decimal;
	padding-inline-start: 6.153847vw;
}

.project__text li + li,
.project-text__body li + li {
	margin-block-start: 0;
}

.project__text strong,
.project-text__body strong,
.project__text b,
.project-text__body b {
	font-family: var(--f-grotesk);
	font-weight: 700;
}

.project__text a,
.project-text__body a {
	color: var(--c-purple);
	text-decoration: underline;
}

/* Кнопка во всю ширину контейнера */
.project-text__back {
	display: flex;
	inline-size: 100%;
	gap: 10.256411vw;
	margin-block-start: 28.205129vw;
	block-size: 14.358975vw;
	padding-inline: 15.384616vw;
}

/* Стрелка глифом Handjet. Кнопка ведёт назад, поэтому смотрит влево */
.project-text__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 7.692308vw;
	block-size: 4.102565vw;
	font-family: var(--f-pixel);
	font-size: 7.692308vw;
	line-height: 1;
	letter-spacing: -0.384616vw;
	transform: rotate(90deg);
}

/* Подвал на странице проєкта: 110 от кнопки, как в макете */
.site-main--project + .site-footer-cta {
	margin-block-start: 28.205129vw;
}

/* --- Страница «Дякуємо» (нода 5:129) -------------------------------------- */

.thanks {
	padding-block: 25.641026vw 0;   /* содержимое на 177 при шапке 77 */
}

.thanks__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28.205129vw;
}

.thanks__message {
	inline-size: 100%;
	font-family: var(--f-serif);
	font-size: 11.538462vw;
	line-height: 1;
	letter-spacing: -0.115385vw;
	text-align: center;
	color: #000;
}

.thanks__message p {
	margin: 0;
}

/* Кнопка взята со страницы проєкта, где у неё свой отступ сверху. Здесь
   расстояние держит шаг контейнера, поэтому отступ снимаем. */
.thanks .project-text__back {
	margin-block-start: 0;
}

/* Подвал отстоит от кнопки так же, как на странице проєкта */
.site-main--thanks + .site-footer-cta {
	margin-block-start: 28.205129vw;
}

/* --- Появление при скролле -------------------------------------------------
   Элементы помечены в шаблонах атрибутом data-reveal. Класс .has-reveal ставит
   инлайн-скрипт из inc/home-intro.php до первой отрисовки — иначе блоки успели
   бы мелькнуть до того, как их спрячет CSS. Переводит в data-reveal="in"
   наблюдатель из assets/js/reveal.js, порядковый номер внутри группы приходит
   в --reveal-i.

   Появление сделано анимацией, а не переходом, намеренно: transition в общем
   правиле оказался бы специфичнее собственных правил блоков и затёр бы их.
   Так у .card остаётся её transition: flex-basis — плавное раскрытие по наведению. */

html.has-reveal [data-reveal] {
	--reveal-x: 0;
	--reveal-y: var(--reveal-shift);
	--reveal-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
}

html.has-reveal [data-reveal=""] {
	opacity: 0;
	transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
	will-change: opacity, transform;
}

html.has-reveal [data-reveal="in"] {
	animation: propm-reveal var(--reveal-duration) var(--reveal-ease) var(--reveal-delay) both;
}

@keyframes propm-reveal {
	from {
		opacity: 0;
		transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Короткий ход у мелочи: плитки, теги, подписи */
html.has-reveal .initiator__support[data-reveal],
html.has-reveal .initiator__logos[data-reveal],
html.has-reveal .news__filters[data-reveal],
html.has-reveal .stage[data-reveal],
html.has-reveal .partners__row[data-reveal],
html.has-reveal .site-footer-cta__logo[data-reveal],
html.has-reveal .site-footer-cta__about[data-reveal],
html.has-reveal .site-footer-cta__contacts[data-reveal],
html.has-reveal .site-footer-cta__socials[data-reveal] {
	--reveal-shift: var(--reveal-shift-sm);
}

/* Крупные панели приезжают вбок, а не снизу. Сдвиг всегда отрицательный:
   вылет за левый край браузер обрезает, а вылет за правый добавил бы
   горизонтальную прокрутку на всё время, пока блок ждёт появления. */
html.has-reveal .about__art[data-reveal],
html.has-reveal .about__photo[data-reveal],
html.has-reveal .initiator__photo[data-reveal],
html.has-reveal .partner__art[data-reveal],
html.has-reveal .partner__panel[data-reveal] {
	--reveal-x: calc(-1 * var(--reveal-shift));
	--reveal-y: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.has-reveal [data-reveal=""] {
		opacity: 1;
		transform: none;
	}

	html.has-reveal [data-reveal="in"] {
		animation: none;
	}
}

/* --- Попап с формой (нода 7:197) -------------------------------------------
   Панель 1000x807 по центру затемнённого фона с размытием. Поля те же, что в
   секции «Стати партнером», но с сиреневой рамкой из макета. */

.popup {
	position: fixed;
	inset: 0;
	z-index: 300;                   /* выше шапки (100) и меню (200) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 38.461539vw 5.128206vw;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 250ms ease;
}

/* [hidden] должен победить display:flex — иначе прозрачный оверлей
   перехватывает клики по странице. */
.popup[hidden] {
	display: none;
}

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

.popup__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(24, 24, 24, 0.5);
	backdrop-filter: blur(5.128206vw);
	-webkit-backdrop-filter: blur(5.128206vw);
}

.popup__panel {
	position: relative;
	/* margin auto вместо центрирования флексом: высокая панель не обрежется
	   сверху на низком экране. */
	margin: auto;
	inline-size: 256.410257vw;
	max-inline-size: 100%;
	padding: 25.641026vw 15.384616vw;
	border-radius: 2.564103vw;
	background: #282828;
	transform: translateY(5.128206vw);
	transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1);
}

.popup.is-open .popup__panel {
	transform: translateY(0);
}

.popup__title {
	margin: 0;
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 16.666667vw;
	line-height: 1;
	letter-spacing: -0.166667vw;
	color: var(--c-mint);
}

.popup__text {
	inline-size: 133.333334vw;
	max-inline-size: 100%;
	margin: 6.410257vw 0 0;
	font-family: var(--f-serif);
	font-size: 5.641026vw;
	line-height: 1.2;
	color: var(--c-white);
}

.popup__form {
	inline-size: 100%;
	margin-block-start: 6.410257vw;
}

/* Поля в попапе обведены сиреневым — так в макете */
.popup .field {
	border: 0.256411vw solid #8d64aa;
}

.popup .field--phone .field__prefix {
	background: rgba(0, 0, 0, 0.1);
}

/* Крестик: две полосы 3x50 под ±45°, бокс 70 в углу панели */
.popup__close {
	position: absolute;
	inset-block-start: 2.564103vw;
	inset-inline-end: 2.564103vw;
	inline-size: 17.948718vw;
	block-size: 17.948718vw;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.popup__close span {
	position: absolute;
	inset-block-start: 2.564103vw;
	inset-inline-start: 8.717949vw;
	inline-size: 0.769231vw;
	block-size: 12.820513vw;
	border-radius: 2.564103vw;
	background: #45bfb4;
}

.popup__close span:first-child {
	transform: rotate(45deg);
}

.popup__close span:last-child {
	transform: rotate(-45deg);
}

.popup__close:hover span {
	background: var(--c-mint);
}

/* Фон страницы не скроллится, пока открыт попап */
html.has-popup {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.popup,
	.popup__panel {
		transition: none;
	}

	.popup__panel {
		transform: none;
	}
}