/* ==========================================================================
   ProPM V2 — десктоп. Единственный источник правды: правки вносятся прямо
   сюда, пересборки из px больше нет.

   Размеры в vw из расчёта 1920 = 100vw (1px = 0.052084vw). Подключается через
   media="(min-width: 768px)"; ниже 768 работает home-mob-vw.css.
   Комментарии ниже писались при вёрстке в пикселях — цифры в них макетные.
   ========================================================================== */

/* ==========================================================================
   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: 100vw;
	--container-w: 96.875vw;
	--gutter: 0.520834vw;
	--header-h: 4.010417vw;

	/* Шрифтовые стеки */
	--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.052084vw solid var(--c-mint);
}

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

/* Плавный переход к якорям; цель не должна уезжать под шапку */
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: 4.166667vw;
	width: var(--container-w);
	margin-inline: auto;
	/* 16/16 по макету минус 1px: в Figma рамка рисуется внутри фрейма, в CSS — снаружи. */
	padding-block: 0.833334vw 0.78125vw;
}

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

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

.logo__mark {
	display: block;
	width: 2.03125vw;
	height: 2.34375vw;
}

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

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

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

.lang__item {
	padding: 0.3125vw 0.520834vw;
	border-radius: 1.041667vw;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	line-height: 1.2;
	color: var(--c-muted);
}

.lang__item.is-active {
	padding-inline: 1.5625vw;
	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: 0.78125vw 3.125vw;
	border-radius: 5.208334vw;
	font-family: var(--f-flare);
	font-size: 1.145834vw;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 200ms ease;
}

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

.btn--sm {
	padding: 0.572917vw 3.645834vw;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
}

.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: var(--header-h);
}

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

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

.hero__art--desktop .hero__layer {
	object-fit: cover;
	/* opacity: 0 !important; */
	/* display: none; */
}

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

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

.hero__body {
	position: relative;
	padding-block: 2.604167vw 2.864584vw;
}

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

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

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

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

/* --- Интро-анимация -------------------------------------------------------
   Класс .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(100svh - var(--header-h) - var(--wp-admin--admin-bar--height, 0vw));
	min-block-size: calc(100svh - 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: 3.125vw;
	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 bottom; */
	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-fit: cover; */
	/* transform-origin: center bottom; */
	/* inline-size: 100%; */
	/* block-size: 100%; */
	/* object-fit: cover; */
	object-position: 50% 100%;   /* по центру по горизонтали, прижата к низу */
	object-position: center bottom;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
}

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

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

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

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

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

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: 3.125vw;
}

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

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

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

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

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

/* ...и раскрывается та, на которую навели. Правило идёт последним намеренно:
   специфичность у него такая же, решает порядок. */
.cards__grid .card:hover {
	flex-basis: calc(46.875vw + 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: 1.041667vw 1.041667vw auto 1.041667vw;
}

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

/* Описание видно только у раскрытой карточки */
.card__desc {
	/* Именно фиксированная ширина, а не max-: в сжатой карточке текст невидим,
	   но уже свёрстан на две строки, поэтому при раскрытии он не переверстывается
	   на глазах. Выход за пределы карточки срезает overflow у .card__inner. */
	inline-size: var(--desc-w, 18.4375vw);
	margin: 0.260417vw 0 0;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 11.302084vw;
	inset-inline-start: 0;
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 3.385417vw;
	line-height: 1;
	letter-spacing: -0.033855vw;
	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: 37.5vw;
	inline-size: 59.375vw;
	block-size: 100%;
}

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

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

.why-card {
	position: relative;
	padding: 1.041667vw 2.083334vw 2.083334vw;
	border-radius: 0.520834vw;
}

.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: 2.083334vw 2.083334vw 1.041667vw;
	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: 0.520834vw 2.083334vw;
	border-start-start-radius: 0.520834vw;
	border-start-end-radius: 0.520834vw;
	font-family: var(--f-flare);
	font-size: 1.354167vw;
	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: 15.312501vw; /* 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: -1.354167vw; */
	/* inline-size: 26.875vw; */
	/* block-size: 22.552084vw; */
	/* background-image: url("../img/why/decor-dark.svg?v=2"); */
	/* background-size: 26.875vw 22.552084vw; */
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
}

.why-card--light .why-card__decor {
	/* inset-block-start: 0; */
	/* inset-inline-start: 30.642188vw; */
	/* inline-size: 28.75vw; */
	/* block-size: 23.958334vw; */
	/* background-image: url("../img/why/decor-light-1.svg?v=2"); */
	/* background-size: 28.75vw 23.958334vw; */
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
}

.why-card__body {
	position: relative;
}

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

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

.why-card--light .why-card__lead {
	inline-size: 23.125vw;
	margin-bottom: 0.2604166667vw;
}

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

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

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

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

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

.why-card__logo-mark {
	width: auto;
	height: 7.29vw;
	/* margin-inline-start: 0.666667vw; */
}

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

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

.why:not(.is-scrollable) .why-card--dark {
	filter: blur(0.625vw);
	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: 2.083334vw 14.0625vw; /* 117 сверху от шапки и до блока команды на 1147 */
	background: var(--c-white);
}

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

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

.initiator__title {
	position: absolute;
	inset-block-start: 8.333334vw; /* 277 - 117 */
	inline-size: 26.927084vw;
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 3.385417vw;
	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: 28.177084vw; /* 658 - 117 */
	margin: 0;
	font-family: var(--f-serif);
	font-size: 2.083334vw;   /* по ширине строки в макете: 255px при этой гарнитуре */
	line-height: 1;
	color: var(--c-ink);
	white-space: nowrap;
}

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

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

/* Логотип из ACF вписывается в плитку целиком */
.logo-tile__img--fit {
	inset: 1.041667vw;
	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: 6.71875vw;
}

.initiator__photo {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 48.958334vw; /* 970 - 30 */
	inline-size: 33.333334vw;
	block-size: 39.583334vw;
	margin: 0;
	border-radius: 0.520834vw;
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

.slider-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.125vw;
	block-size: 3.125vw;
	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 15.46875vw; /* до блока «Про програму» на 2147 */
}

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

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

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

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

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

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

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

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

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

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

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

.tag--active,
.tag.is-active {
	/* Активный тег: рамка вдвое толще, поэтому паддинг на 1px меньше — высота остаётся 42 */
	padding: 0.520834vw;
	border-width: 0.104167vw;
	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.104167vw solid var(--c-coral);
	outline-offset: 0.104167vw;
}

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

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

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

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

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

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

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

.about__title {
	margin: 1.041667vw 0 0;               /* заголовок на 2211: чип заканчивается на 2191 */
	white-space: nowrap;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 3.385417vw;
	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: 3.645834vw;       /* теги на 2346 */
}

.about__text {
	position: relative;
	display: grid;                  /* панели лежат в одной ячейке */
	inline-size: 40.46875vw;
	block-size: auto;               /* высота по самой длинной вкладке */
	margin-block-start: auto;       /* прижимает текст и кнопку к низу блока */
	font-family: var(--f-serif);
	font-size: 1.145834vw;
	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: 1.25vw;
}

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

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

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

.about__photo {
	position: absolute;
	inset-block-start: 19.739584vw;       /* 2529 - 2150 */
	inset-inline-start: 80.572917vw;     /* 1577 - 30 */
	inline-size: 16.302084vw;
	block-size: 20.104167vw;
	border-radius: 0.520834vw;
	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 10.416667vw;
}

.pillars__title {
	white-space: nowrap;
	text-transform: uppercase;
	margin: 0 0 2.083334vw;
	margin-inline-start: 33.020834vw;     /* 664 - 30 */
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 3.385417vw;
	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, 31.614584vw);
	gap: 1.041667vw;
	justify-content: space-between;
}

.pillar {
	inline-size: 31.614584vw;
	height: 100%;
	padding: 1.145834vw 1.5625vw 1.5625vw 1.145834vw;
	border-radius: 0.520834vw;
	background: #f7f7f7;
}

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

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

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

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

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

.how__title {
	margin: 0;
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 3.385417vw;
	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: 1.875vw;              /* шаг 316 при ширине этапа 280 */
	margin: 3.125vw 0 0;       /* полосы на 235 от начала блока */
	padding: 0;
	list-style: none;
}

.stage {
	inline-size: 14.583334vw;
}

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

.stage__card {
	margin-block-start: 0.78125vw;
	block-size: 11.770834vw;
	padding: 1.041667vw;
	border-radius: 0.520834vw;
	background: var(--c-white);
}

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

.stage__text {
	inline-size: 12.5vw;
	margin: 1.041667vw 0 0;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 14.0625vw 15.625vw; /* до блока 270, как в макете */
}

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

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

.pilots__slide {
	inline-size: 47.916667vw;
}

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

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

.pilot__gallery {
	block-size: 100%;
}

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

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

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

/* Стрелки галереи: в покое скрыты, появляются при наведении на фото */
.pilot__nav {
	position: absolute;
	z-index: 2;
	inset-block-start: 0.520834vw;
	inset-inline-end: 0.520834vw;
	display: flex;
	gap: 0.729167vw;
	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: 2.1875vw;
	block-size: 2.1875vw;
	padding: 0;
	border: 0.052084vw solid #4b63ae;
	border-radius: 3.645834vw;
	background: rgba(236, 236, 231, 0.8);
	color: var(--c-text);
	cursor: pointer;
}

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

.pilot__nav-btn .icon--arrow {
	inline-size: 0.9375vw;
	block-size: 0.625vw;
}

/* Панель с текстом. Заливка и начертание ссылки меняются при наведении
   на карточку — именно это состояние нарисовано на первом слайде макета. */
.pilot__body {
	display: flex;
	flex-direction: column;
	gap: 1.041667vw;
	padding: 0.520834vw 1.041667vw;
	border-radius: 0.520834vw;
	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: 0.520834vw;
}

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

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

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

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

.pilot__link {
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 44.270834vw;
}

.partner__art {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 57.65625vw;
	border-radius: 0.520834vw;
	background: #f2f8ff;
	overflow: hidden;
	border-radius: 0 0.520834vw 0.520834vw 0;
	fill: #f2f8ff;
	border: 0.052084vw solid rgba(12, 65, 135, 0.4);
	box-shadow: 0 0.208334vw 2.604167vw 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: 43.072917vw;
	margin: 30.989584vw 0 0 4.6875vw;
	font-family: var(--f-serif);
	font-size: 1.822917vw;
	line-height: 1.2;
	color: var(--c-ink);
}

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

.partner__note {
	inline-size: 43.072917vw;
	margin: 2.083334vw 0 0 4.6875vw;
	font-family: var(--f-serif);
	font-size: 1.822917vw;
	line-height: 1.2;
	color: var(--c-ink);
}

.partner__panel {
	position: absolute;
	inset-block-start: 1.5625vw;
	inset-inline-start: 57.65625vw;
	inline-size: 42.34375vw;
	block-size: 41.145834vw;
	padding: 7.8125vw 5.052084vw;
	border-radius: 0.520834vw;
	background: var(--c-ink);
}

.partner__title {
	margin: 0 0 1.302084vw;
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 3.385417vw;
	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: 0.78125vw;              /* шаг полей 69 при высоте 54 */
	inline-size: 32.239584vw;
}

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

.field__input {
	inline-size: 100%;
	block-size: 100%;
	padding-inline: 1.09375vw;
	border: 0;
	border-radius: inherit;
	background: transparent;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 0.3125vw;
	inline-size: 4.166667vw;
	block-size: 100%;
	flex-shrink: 0;
	border-start-start-radius: 0.520834vw;
	border-end-start-radius: 0.520834vw;
	background: #ececec;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	color: var(--c-ink);
}

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

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

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

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

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

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

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

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

.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: 0.9375vw;
	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: 15.625vw 15.625vw;
}

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

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

.denmark__lead {
	/* position: absolute; */
	inset-block-start: 4.53125vw;
	inset-inline-start: 0;
	/* inline-size: 56.041667vw; */
	font-family: var(--f-serif);
	font-size: 1.145834vw;
	line-height: 1.2;
	color: #000;
	max-width: 64vw;
	margin-top: 1.04vw;
}

.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: 1.5625vw; /* слайды на 247 от начала блока */
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

.partners__rows {
	flex: 1;
}

.partners__row {
	display: flex;
	align-items: center;
	gap: 2.083334vw;
	block-size: 6.614584vw;
	border-block-end: 0.052084vw solid #e4e5e6;
}

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

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

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

.partner-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 12.083334vw;
	block-size: 5.572917vw;
	border-radius: 0.520834vw;
	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 16.666667vw;
}

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

.news__title {
	text-transform: uppercase;
}

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

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

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

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

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

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

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

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

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

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

.news-card__text {
	margin: 0.520834vw 0 0;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 1.041667vw;
}

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

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

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

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

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

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

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

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

.site-footer-cta__logo-text {
	font-family: var(--f-logo);
	font-weight: 800;
	font-size: 0.822917vw;
	line-height: 0.863542vw;
	letter-spacing: -0.018506vw;
	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 1.041667vw;
	font-family: var(--f-serif);
	font-size: 3.385417vw;
	line-height: 1;
	color: var(--c-white);
}

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

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

.site-footer-cta__label {
	margin: 0 0 0.520834vw;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 1.145834vw;
	line-height: 1.2;
}

.site-footer-cta__phone {
	margin: 0 0 0.520834vw;
	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: 0.520834vw;
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}

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

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

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

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

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

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

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

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

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

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

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

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

.project__text {
	inline-size: 44.739584vw;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 47.916667vw;
	block-size: 31.25vw;
	flex-shrink: 0;
	border-radius: 0.625vw;
	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: 47.916667vw;
	block-size: 31.25vw;
}

/* Верхний снимок обрезается по шторке.
   Режем 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: 47.916667vw;
	block-size: 31.25vw;
	max-inline-size: none;
	object-fit: cover;
}

/* Подписи-таблетки в углах кадра */
.before-after__label {
	position: absolute;
	inset-block-start: 1.25vw;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.46875vw;
	padding: 0.46875vw 0.9375vw 0.46875vw 0.833334vw;
	border: 0.052084vw solid rgba(0, 0, 0, 0.07);
	border-radius: 5.208334vw;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 0.104167vw 0.520834vw 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: 1.25vw;
	font-size: 0.729167vw;
	letter-spacing: 0.014584vw;
}

.before-after__label--after {
	inset-inline-start: 41.510417vw;
	font-size: 0.78125vw;
	letter-spacing: 0.015625vw;
}

.before-after__dot {
	inline-size: 0.416667vw;
	block-size: 0.416667vw;
	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: 0.260417vw;
	margin-inline-start: -0.130209vw;
	inset-inline-start: var(--ba-pos, 50%);
	border: 0.052084vw solid rgba(0, 0, 0, 0.28);
	background: var(--c-white);
	box-shadow: 0 0 0.3125vw rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

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

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

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

.before-after__hint {
	position: absolute;
	inset-block-start: 17.083334vw;
	inset-inline-start: 50%;
	z-index: 2;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.46875vw 0.9375vw;
	border-radius: 5.208334vw;
	background: rgba(22, 23, 27, 0.82);
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 11.979167vw 0;   /* галерея на 947 при карточке до 717 */
}

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

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

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

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

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

.project-text__body {
	margin-block-start: 1.041667vw;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	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: 5.729167vw 0 1.041667vw;
	font-family: var(--f-serif);
	font-weight: 400;
	line-height: 1;
	color: #000;
}

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

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

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

.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: 0.416667vw;
}

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

.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: 2.083334vw;
	margin-block-start: 5.729167vw;
	block-size: 2.916667vw;
	padding-inline: 3.125vw;
}

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

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

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

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

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

.thanks__message {
	inline-size: 100%;
	font-family: var(--f-serif);
	font-size: 2.34375vw;
	line-height: 1;
	letter-spacing: -0.023438vw;
	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: 5.729167vw;
}

/* --- Появление при скролле -------------------------------------------------
   Элементы помечены в шаблонах атрибутом 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: 7.8125vw 1.041667vw;
	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(1.041667vw);
	-webkit-backdrop-filter: blur(1.041667vw);
}

.popup__panel {
	position: relative;
	/* margin auto вместо центрирования флексом: высокая панель не обрежется
	   сверху на низком экране. */
	margin: auto;
	inline-size: 52.083334vw;
	max-inline-size: 100%;
	padding: 5.208334vw 3.125vw;
	border-radius: 0.520834vw;
	background: #282828;
	transform: translateY(1.041667vw);
	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: 3.385417vw;
	line-height: 1;
	letter-spacing: -0.033855vw;
	color: var(--c-mint);
}

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

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

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

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

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

.popup__close span {
	position: absolute;
	inset-block-start: 0.520834vw;
	inset-inline-start: 1.770834vw;
	inline-size: 0.15625vw;
	block-size: 2.604167vw;
	border-radius: 0.520834vw;
	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;
	}
}

/* --- Текстовые страницы (политика конфиденциальности и подобные) ----------
   Обычная страница WordPress: контент набирается блоками Гутенберга, поэтому
   стили висят на .entry-*, а не на классах секций. Колонка узкая — длинный
   юридический текст на всю ширину контейнера не читается. */

.site-main--text {
	/* body без верхнего отступа (так сделан первый экран), поэтому высоту
	   фиксированной шапки добавляем сами — иначе она накрывает заголовок. */
	padding-block: calc(var(--header-h) + 5.729167vw) 7.291667vw;
}

.text-page .entry-header,
.text-page .entry-content {
	max-inline-size: 57.291667vw;           /* 1100 */
}

.text-page .entry-title {
	margin: 0 0 2.083334vw;                 /* 40 до текста */
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 2.604167vw;                  /* 50 */
	line-height: 1.1;
	letter-spacing: -0.026042vw;
	color: var(--c-ink);
}

.text-page .entry-content {
	font-family: var(--f-serif);
	font-size: 0.9375vw;                    /* 18 */
	line-height: 1.45;
	color: var(--c-text);
}

.text-page .entry-content h2 {
	margin: 2.604167vw 0 0.833334vw;        /* 50 сверху, 16 до абзаца */
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: 1.354167vw;                  /* 26 */
	line-height: 1.2;
	text-transform: none;
	color: var(--c-ink);
}

.text-page .entry-content h2:first-child {
	margin-block-start: 0;
}

.text-page .entry-content p {
	margin: 0 0 0.833334vw;
}

/* Маркеры рисуем сами — как в описании проєкта */
.text-page .entry-content ul {
	margin: 0 0 0.833334vw;
	padding: 0;
	list-style: none;
}

.text-page .entry-content li {
	position: relative;
	padding-inline-start: 1.041667vw;       /* 20 */
	margin-block-end: 0.3125vw;             /* 6 */
}

.text-page .entry-content li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	color: var(--c-purple);
}

.text-page .entry-content a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	word-break: break-word;
}

.text-page .entry-content strong {
	font-family: var(--f-grotesk);
	font-weight: 700;
	color: var(--c-ink);
}

/* Нижняя строка подвала: ссылка на политику конфиденциальности */
.site-footer-cta__rule--legal {
	margin: 2.604167vw 0 1.302084vw;   /* 50 от контактов, 25 до ссылки */
}

.site-footer-cta__legal {
	grid-column: 2;                    /* по левому краю колонки контактов */
	margin: 0;
	font-family: var(--f-serif);
	font-size: 0.9375vw;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.7);
}

.site-footer-cta__legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer-cta__legal a:hover {
	color: var(--c-white);
}