/* ============================================================
   Годовой отчёт 2025 — Фонд «СПИД.ЦЕНТР»
   Самописная страница по визуальному языку year24.spid.center,
   на токенах дизайн-системы фонда (spidcenter-design).
   Без Tailwind/shadcn, теней и градиентов. Шрифт Gerbera (локально).
   Приёмы year24: гигантские красные числа по центру, фото-кольца
   в обращении и цитатах, чат-пузыри с контурными иконками,
   лента-конь в тестировании, кольцевая диаграмма в финансах.
   Плейсхолдеры недостающих ассетов помечены data-missing="...".
   ============================================================ */

@font-face { font-family:'Gerbera'; src:url('fonts/Gerbera-Light.woff2') format('woff2'),url('fonts/Gerbera-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Gerbera'; src:url('fonts/Gerbera-Regular.woff2') format('woff2'),url('fonts/Gerbera-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gerbera'; src:url('fonts/Gerbera-Medium.woff2') format('woff2'),url('fonts/Gerbera-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gerbera'; src:url('fonts/Gerbera-Bold.woff2') format('woff2'),url('fonts/Gerbera-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gerbera'; src:url('fonts/Gerbera-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root {
	/* палитра — tokens/colors.css дизайн-системы */
	--sc-web-red: #ff0000;
	--sc-web-red-dark: #ea0000;
	--sc-black: #1a1a1a;
	--sc-gray: #646464;
	--sc-light-gray: #999999;
	--sc-blue-gray: #dde5e5;
	--sc-gray-bg: #f6f6f8;
	--sc-white: #ffffff;
	--sc-black-10: rgba(0,0,0,.1);
	/* цвета колец (палитра иллюстраций ДС) */
	--sc-green: #95c11f;
	--sc-royal: #4252a6;
	--sc-purple: #962071;
	--sc-magenta: #ec6095;

	--sc-text: var(--sc-black);
	--sc-accent: var(--sc-web-red);
	--sc-accent-hover: var(--sc-web-red-dark);
	--sc-hairline: 1px solid var(--sc-black-10);

	--sc-font: 'Gerbera', sans-serif;

	/* Типографика резиновая: clamp(мин, от ширины экрана, макс).
	   Максимумы — те же, что были фиксированными: на десктопе ничего не изменилось.
	   Межстрочные — безразмерные коэффициенты, иначе при уменьшении кегля
	   строки налезали бы друг на друга. */
	--sc-text-giant: clamp(32px, 10vw, 92px);            --sc-lh-giant: 1.08;
	--sc-text-hero: clamp(28px, 20px + 4vw, 58px);       --sc-lh-hero: 1.12;
	--sc-text-h2: clamp(24px, 18px + 2.6vw, 44px);       --sc-lh-h2: 1.14;
	--sc-text-h3: clamp(20px, 16px + 1.1vw, 26px);       --sc-lh-h3: 1.23;
	--sc-text-body: clamp(17px, 14px + 0.8vw, 20px);     --sc-lh-body: 1.5;
	--sc-text-minor: clamp(16px, 13.5px + 0.65vw, 18px); --sc-lh-minor: 1.4;
	--sc-text-ref: clamp(15px, 13px + 0.35vw, 16px);     --sc-lh-ref: 1.5;
	--sc-text-caps: clamp(13px, 12px + 0.25vw, 14px);    --sc-lh-caps: 1.57;

	--sc-tracking-caps: 0.6px;
	--sc-tracking-tight: -0.6px;
	--sc-tracking-tighter: -1px;

	--sc-radius-pill: 35px;

	--sc-space-1:5px; --sc-space-2:10px; --sc-space-3:14px; --sc-space-4:18px;
	--sc-space-5:20px; --sc-space-6:24px; --sc-space-8:30px;
	--sc-space-9:40px; --sc-space-10:50px; --sc-space-12:60px; --sc-space-16:80px; --sc-space-20:100px;

	--sc-container: 1150px;
	--sc-article: 750px;
	--sc-page-pad: clamp(16px, 4vw, 20px);
}

* { box-sizing: border-box; }

/* Страховка от горизонтальной прокрутки. clip (а не hidden) не ломает
   position: sticky у шапки и сцен. */
html { scroll-behavior: smooth; overflow-x: clip; }

/* Картинки и векторы не шире своей колонки.
   Исключения (лента-конь) переопределяют это у себя. */
img, svg, video { max-width: 100%; }
body {
	margin: 0; padding: 0; overflow-x: clip;
	overflow-wrap: break-word;
	background: var(--sc-white);
	color: var(--sc-text);
	font-family: var(--sc-font);
	font-weight: 300;
	font-size: var(--sc-text-body);
	line-height: var(--sc-lh-body);
	-webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--sc-container); margin: 0 auto; padding-left: var(--sc-page-pad); padding-right: var(--sc-page-pad); }
/* узкая центральная колонка year24 */
.col { max-width: var(--sc-article); margin: 0 auto; padding-left: var(--sc-page-pad); padding-right: var(--sc-page-pad); }

a { color: var(--sc-accent); }

.eyebrow {
	font-weight: 500; font-size: var(--sc-text-caps); line-height: var(--sc-lh-caps);
	letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; color: var(--sc-gray);
}

/* ---------- шапка ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--sc-white); border-bottom: var(--sc-hairline); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.wordmark { font-weight: 700; font-size: 22px; letter-spacing: var(--sc-tracking-tight); text-transform: lowercase; color: var(--sc-text); text-decoration: none; }
.wordmark .dot { color: var(--sc-accent); }
.topbar .give {
	display: inline-block; height: 38px; line-height: 38px; padding: 0 22px;
	border-radius: var(--sc-radius-pill); background: var(--sc-accent); color: var(--sc-white);
	font-weight: 500; font-size: var(--sc-text-caps); letter-spacing: var(--sc-tracking-caps);
	text-transform: uppercase; text-decoration: none; transition: background-color .3s ease;
}
.topbar .give:hover { background: var(--sc-accent-hover); }

.secnav { border-bottom: var(--sc-hairline); background: var(--sc-white); }
.secnav .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 14px; padding-bottom: 14px; }
.secnav a {
	font-weight: 500; font-size: var(--sc-text-caps); line-height: 20px;
	letter-spacing: var(--sc-tracking-caps); text-transform: uppercase;
	color: var(--sc-gray); text-decoration: none; white-space: nowrap; transition: color .3s ease;
}
.secnav a:hover { color: var(--sc-accent); }

/* ---------- hero ---------- */
.hero { padding-top: var(--sc-space-20); padding-bottom: var(--sc-space-12); text-align: center; }
.hero h1 {
	margin: var(--sc-space-5) auto var(--sc-space-6);
	font-weight: 700; font-size: var(--sc-text-hero); line-height: var(--sc-lh-hero);
	letter-spacing: var(--sc-tracking-tighter); text-transform: lowercase;
	color: var(--sc-accent); max-width: 920px;
}
.lead { margin: 0 auto; font-weight: 300; max-width: var(--sc-article); }
.hero .down { display:block; margin: var(--sc-space-12) auto 0; width: 28px; height: 46px; color: var(--sc-light-gray); }

/* ---------- секции ---------- */
section { padding-top: var(--sc-space-16); padding-bottom: var(--sc-space-16); }
section.tight { padding-top: var(--sc-space-12); padding-bottom: var(--sc-space-12); }
section.divide { border-top: var(--sc-hairline); }
section.soft { background: var(--sc-gray-bg); }

h2 {
	margin: 0 0 var(--sc-space-9);
	font-weight: 700; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2);
	letter-spacing: var(--sc-tracking-tight); text-transform: lowercase; color: var(--sc-text);
	text-align: center;
}
h2 .small {
	display:block; font-weight:500; font-size:var(--sc-text-caps); line-height:var(--sc-lh-caps);
	letter-spacing:var(--sc-tracking-caps); text-transform:uppercase; color:var(--sc-gray);
	margin-bottom: var(--sc-space-3);
}

.prose p { margin: 0 0 var(--sc-space-5); }
.prose p:last-child { margin-bottom: 0; }

.src-note {
	margin: var(--sc-space-8) auto 0;
	font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref);
	color: var(--sc-gray); max-width: var(--sc-article); text-align: center;
}

/* ---------- ГИГАНТСКИЕ ЧИСЛА (язык year24) ---------- */
.giant { text-align: center; margin: var(--sc-space-12) 0; }
.giant .num {
	font-weight: 900; font-size: var(--sc-text-giant); line-height: var(--sc-lh-giant);
	letter-spacing: var(--sc-tracking-tighter); color: var(--sc-accent); white-space: nowrap;
}
.giant .num.dark { color: var(--sc-text); }
.giant .label { margin-top: var(--sc-space-3); font-weight: 500; font-size: var(--sc-text-body); line-height: var(--sc-lh-body); }
.giant .sub { margin-top: var(--sc-space-2); font-size: var(--sc-text-minor); line-height: var(--sc-lh-minor); color: var(--sc-gray); max-width: 560px; margin-left:auto; margin-right:auto; }

/* пара «остатков» с вертикальной чертой (year24 expenses) */
.balances { display: flex; justify-content: center; align-items: stretch; margin-top: var(--sc-space-10); border-top: var(--sc-hairline); padding-top: var(--sc-space-9); }
.balances .b { flex: 0 1 320px; text-align: center; padding: 0 var(--sc-space-9); }
.balances .b + .b { border-left: 1px solid var(--sc-black-10); }
.balances .v { font-weight: 700; font-size: var(--sc-text-h3); line-height: var(--sc-lh-h3); color: var(--sc-gray); }
.balances .k { margin-top: var(--sc-space-2); font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-light-gray); }

/* сравнение с 2024 — вторичное число */
.compare { display:flex; justify-content:center; gap: var(--sc-space-16); align-items: baseline; flex-wrap: wrap; }
.compare .was { text-align:center; }
.compare .was .num { font-weight:900; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); color: var(--sc-text); }
.compare .was .label { margin-top: var(--sc-space-2); font-size: var(--sc-text-ref); color: var(--sc-gray); }

/* ---------- ЦИТАТА с фото-кольцом (язык year24) ---------- */
.quote { display: grid; grid-template-columns: 1fr 220px; gap: var(--sc-space-10); align-items: start; max-width: 900px; margin: var(--sc-space-12) auto 0; padding: 0 var(--sc-page-pad); }
.quote .qmark { font-weight: 900; font-size: 44px; line-height: 1; color: var(--sc-light-gray); }
.quote blockquote { margin: var(--sc-space-2) 0 0; font-style: italic; text-align: right; }
.quote blockquote p { margin: 0 0 var(--sc-space-4); }
.quote .person { text-align: center; }
.avatar {
	width: 160px; height: 160px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sc-gray-bg); color: var(--sc-light-gray);
	font-weight: 500; font-size: var(--sc-text-caps); letter-spacing: var(--sc-tracking-caps); text-transform: uppercase;
	overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.ring-green  { border: 8px solid var(--sc-green); }
.ring-royal  { border: 8px solid var(--sc-royal); }
.ring-purple { border: 8px solid var(--sc-purple); }
.ring-magenta{ border: 8px solid var(--sc-magenta); }
.person .name { margin-top: var(--sc-space-3); font-weight: 500; color: var(--sc-accent); }
.person .role { margin-top: 2px; font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-gray); }

/* обращение директора: фото слева, текст справа (year24 appeal) */
.appeal { display: grid; grid-template-columns: 220px 1fr; gap: var(--sc-space-10); align-items: start; max-width: 900px; margin: 0 auto; padding: 0 var(--sc-page-pad); }
.appeal .text { font-style: italic; }
.appeal .text p { margin: 0 0 var(--sc-space-5); }

/* ---------- чат-пузыри инфолинии (year24 infoline) ---------- */
.bubbles { max-width: 820px; margin: var(--sc-space-10) auto 0; padding: 0 var(--sc-page-pad); display: flex; flex-direction: column; gap: var(--sc-space-5); }
.bubble {
	position: relative; display: inline-flex; align-items: center; gap: var(--sc-space-4);
	background: var(--sc-gray-bg); border-radius: 28px;
	padding: var(--sc-space-4) var(--sc-space-6); max-width: 520px;
	font-weight: 400; color: var(--sc-gray);
}
.bubble.right { align-self: flex-end; }
.bubble .ico { flex: 0 0 auto; width: 44px; height: 44px; color: var(--sc-accent); }
.bubble .ico svg { width: 100%; height: 100%; }

/* ---------- лента-конь в тестировании ---------- */
.horse-wrap { text-align: center; margin: var(--sc-space-12) auto 0; position: relative; max-width: 640px; }
.horse-wrap img { width: 100%; max-width: 520px; height: auto; }

/* ---------- пары чисел в ряд (группы year24) ---------- */
.numrow { display: flex; justify-content: center; gap: var(--sc-space-16); flex-wrap: wrap; margin-top: var(--sc-space-10); text-align: center; }
.numrow .n { }
.numrow .v { font-weight: 900; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); }
.numrow .v.accent { color: var(--sc-accent); }
.numrow .k { margin-top: var(--sc-space-1); font-size: var(--sc-text-ref); color: var(--sc-gray); }

/* ---------- кольцевая диаграмма (year24 expenses) ---------- */
/* Одна центральная колонка на всех ширинах: сумма частных пожертвований
   стоит между подзаголовком и кольцом, как на телефоне. Боковых подписей
   больше нет, поэтому сетка из трёх колонок не нужна. */
.donut-block { display: flex; flex-direction: column; align-items: center; gap: var(--sc-space-6); max-width: 980px; margin: var(--sc-space-10) auto 0; padding: 0 var(--sc-page-pad); }
/* Явные размеры обязательны: SVG с одним viewBox Safari растягивает
   на всю ширину блока — на айпаде кольцо вылезало за правый край. */
.donut-block > svg { width: 100%; max-width: 260px; height: auto; display: block; }
.donut-side { text-align: center; }
.donut-side .v { font-weight: 700; font-size: var(--sc-text-h3); line-height: var(--sc-lh-h3); }
.donut-side .k { margin-top: var(--sc-space-2); font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-gray); }
.donut-top { text-align: center; margin-top: var(--sc-space-10); }
.donut-top .v { font-weight: 700; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); }
.donut-top .k { font-size: var(--sc-text-ref); color: var(--sc-gray); margin-bottom: var(--sc-space-2); }
.legend { display:flex; justify-content:center; gap: var(--sc-space-8); flex-wrap: wrap; margin-top: var(--sc-space-8); font-size: var(--sc-text-ref); color: var(--sc-gray); }
.legend .li { display:flex; align-items:center; gap: 8px; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; }

/* ---------- фото-плейсхолдеры ---------- */
.photo-strip {
	position: relative; background: #3a3a3a; color: var(--sc-white);
	min-height: 260px; display:flex; align-items:center; justify-content:center;
	text-align:center; padding: var(--sc-space-10) var(--sc-page-pad);
}
.photo-strip .cap { font-weight:500; font-size: var(--sc-text-caps); letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; opacity: .75; }
.photo-inline {
	max-width: 750px; margin: var(--sc-space-10) auto 0; aspect-ratio: 3 / 2;
	background: var(--sc-blue-gray); display:flex; align-items:center; justify-content:center;
	color: var(--sc-gray); font-weight:500; font-size: var(--sc-text-caps);
	letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; text-align:center; padding: var(--sc-space-5);
}

/* ---------- плейсхолдер данных ---------- */
.placeholder {
	margin: var(--sc-space-8) auto 0;
	border: 1px dashed var(--sc-light-gray); background: var(--sc-gray-bg);
	padding: var(--sc-space-6) var(--sc-space-8); max-width: var(--sc-article);
}
.placeholder .tag { font-weight: 500; font-size: var(--sc-text-caps); letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; color: var(--sc-accent); }
.placeholder p { margin: var(--sc-space-2) 0 0; font-size: var(--sc-text-minor); line-height: var(--sc-lh-minor); color: var(--sc-gray); }

/* ---------- таблица (управленческая разбивка) ---------- */
.ftable { width:100%; border-collapse: collapse; margin: var(--sc-space-6) auto 0; max-width: var(--sc-article); }
.ftable th, .ftable td { text-align:left; padding: var(--sc-space-3) var(--sc-space-4); border-bottom: var(--sc-hairline); font-size: var(--sc-text-minor); }
.ftable th { font-weight:500; text-transform:uppercase; letter-spacing:var(--sc-tracking-caps); font-size: var(--sc-text-caps); color: var(--sc-gray); }
.ftable td.n { text-align:right; font-weight:500; white-space:nowrap; }

/* ---------- CTA ---------- */
.cta-final { text-align: center; }
.btn {
	display: inline-block; border: none; height: 56px; line-height: 56px; padding: 0 var(--sc-space-10);
	border-radius: var(--sc-radius-pill); background: var(--sc-accent); color: var(--sc-white);
	font-family: var(--sc-font); font-weight: 500; font-size: var(--sc-text-caps);
	letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; cursor: pointer;
	text-decoration: none; transition: background-color .3s ease;
}
.btn:hover { background: var(--sc-accent-hover); }
.phone { font-weight: 500; color: var(--sc-accent); text-decoration: none; border-bottom: 2px solid var(--sc-accent); white-space: nowrap; transition: opacity .3s ease; }
.phone:hover { opacity: .6; }

/* ---------- футер ---------- */
.foot { border-top: var(--sc-hairline); padding-top: var(--sc-space-10); padding-bottom: var(--sc-space-12); }
.foot .cols { display:grid; grid-template-columns: 2fr minmax(0,1fr) minmax(0,1fr); gap: var(--sc-space-8); }
.foot .cols > div { font-size: var(--sc-text-minor); line-height: var(--sc-lh-minor); }
.foot .h { font-weight:500; text-transform:uppercase; letter-spacing:var(--sc-tracking-caps); font-size:var(--sc-text-caps); color:var(--sc-gray); margin-bottom: var(--sc-space-3); }
.foot a { text-decoration:none; }
.foot .fine { margin-top: var(--sc-space-9); font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-gray); }

/* ---------- draft-плашка ---------- */
.draftbar { background: var(--sc-accent); color: var(--sc-white); }
.draftbar .wrap { padding: 10px var(--sc-page-pad); font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); font-weight:500; }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
	.appeal, .quote { grid-template-columns: 1fr; }
	.quote .person { order: -1; }
	.quote blockquote { text-align: left; }
	.donut-block { grid-template-columns: 1fr; }
	.foot .cols { grid-template-columns: 1fr 1fr; }
	.giant .num { font-size: var(--sc-text-hero); line-height: var(--sc-lh-hero); white-space: normal; }
}
@media (max-width: 620px) {
	.hero { padding-top: var(--sc-space-12); padding-bottom: var(--sc-space-10); }
	.hero h1 { font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); letter-spacing: var(--sc-tracking-tight); }
	h2 { font-size: var(--sc-text-h3); line-height: var(--sc-lh-h3); margin-bottom: var(--sc-space-6); }
	section { padding-top: var(--sc-space-10); padding-bottom: var(--sc-space-10); }
	.giant .num { font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); }
	.balances { flex-direction: column; gap: var(--sc-space-6); }
	.balances .b + .b { border-left: none; border-top: 1px solid var(--sc-black-10); padding-top: var(--sc-space-6); }
	.numrow { gap: var(--sc-space-9); }
	.foot .cols { grid-template-columns: 1fr; }
	.avatar { width: 120px; height: 120px; }
}

/* ---------- добавлено в версии 2026-08: логотип, ряды показателей, ссылки-сервисы ---------- */

/* вордмарк «спид.центр» — SVG, не текст */
.wordmark { display: inline-flex; align-items: center; }
.wordmark svg { height: 20px; width: auto; display: block; color: var(--sc-text); }
.foot .wordmark svg { height: 22px; }

/* ряд показателей с подпоказателем (тесты по инфекциям) */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-8); max-width: 900px; margin: var(--sc-space-10) auto 0; padding: 0 var(--sc-page-pad); }
.metric { text-align: center; border-top: 3px solid var(--sc-accent); padding-top: var(--sc-space-5); }
.metric .m-what { font-weight: 500; font-size: var(--sc-text-minor); }
.metric .m-num { margin-top: var(--sc-space-3); font-weight: 900; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); letter-spacing: var(--sc-tracking-tight); }
.metric .m-sub { margin-top: var(--sc-space-2); font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-gray); }
.metric .m-sub b { color: var(--sc-accent); font-weight: 700; }

/* две колонки чисел (АРВТ / ПКП) */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-9); max-width: 640px; margin: var(--sc-space-9) auto 0; text-align: center; }
.split .s-num { font-weight: 900; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); color: var(--sc-text); }
.split .s-key { margin-top: var(--sc-space-1); font-size: var(--sc-text-ref); color: var(--sc-gray); }

/* строка «также в фонде» */
.also { max-width: var(--sc-article); margin: 0 auto; text-align: center; }
.also a { text-decoration: none; border-bottom: 2px solid var(--sc-accent); }
.also a:hover { opacity: .65; }

/* картинка секции */
.shot { display: block; width: 100%; max-width: 750px; margin: var(--sc-space-10) auto 0; height: auto; }
.shot--wide { max-width: 100%; }

/* активный пункт навигации */
.secnav a.is-active { color: var(--sc-accent); }

/* кнопка-ссылка второго уровня */
.btn-ghost {
	display: inline-block; height: 48px; line-height: 46px; padding: 0 var(--sc-space-8);
	border: 2px solid var(--sc-accent); border-radius: var(--sc-radius-pill);
	color: var(--sc-accent); font-weight: 500; font-size: var(--sc-text-caps);
	letter-spacing: var(--sc-tracking-caps); text-transform: uppercase; text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}
.btn-ghost:hover { background: var(--sc-accent); color: var(--sc-white); }

@media (max-width: 900px) {
	.metrics { grid-template-columns: 1fr; gap: var(--sc-space-6); }
}
@media (max-width: 620px) {
	.split { grid-template-columns: 1fr; gap: var(--sc-space-6); }
	.metric .m-num, .split .s-num { font-size: var(--sc-text-h3); line-height: var(--sc-lh-h3); }
}

/* обложка теперь живёт в сцене, а не в .hero — переносим типографику */
.hero-title {
	margin: var(--sc-space-5) auto var(--sc-space-6);
	font-weight: 700; font-size: var(--sc-text-hero); line-height: var(--sc-lh-hero);
	letter-spacing: var(--sc-tracking-tighter); text-transform: lowercase;
	color: var(--sc-accent); max-width: 920px;
}
@media (max-width: 620px) {
	.hero-title { font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); letter-spacing: var(--sc-tracking-tight); }
}

/* широкая фото-полоса: фиксированная высота, кадрируем по центру */
.photo-band { display:block; width: 100%; height: min(58vh, 520px); object-fit: cover; object-position: center 30%; }
@media (max-width: 620px) { .photo-band { height: 42vh; } }

/* пара гигантских чисел рядом (услуг оказано · уникальных людей) */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-9); align-items: start; }
.pair > div { text-align: center; }
.pair .num { font-size: var(--sc-text-hero); line-height: var(--sc-lh-hero); }
.pair .label { margin-top: var(--sc-space-3); font-weight: 500; }
@media (max-width: 700px) {
	.pair { grid-template-columns: 1fr; gap: var(--sc-space-8); }
	.pair .num { font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); }
}

/* три числа в ряд с общей сеткой — колонки не разъезжаются между рядами */
.grid3 {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-space-6) var(--sc-space-8);
	max-width: 900px; margin: var(--sc-space-10) auto 0;
	padding: 0 var(--sc-page-pad);
}
.grid3 > div { text-align: center; display: flex; flex-direction: column; align-items: center; }
.grid3 .g-num {
	font-weight: 900; font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2);
	letter-spacing: var(--sc-tracking-tight); white-space: nowrap;
}
.grid3 .g-num.accent { color: var(--sc-accent); }
.grid3 .g-key {
	margin-top: var(--sc-space-2); max-width: 22ch;
	font-size: var(--sc-text-ref); line-height: var(--sc-lh-ref); color: var(--sc-gray);
}
@media (max-width: 700px) {
	.grid3 { grid-template-columns: 1fr; gap: var(--sc-space-6); }
	.grid3 .g-num { font-size: var(--sc-text-h3); line-height: var(--sc-lh-h3); }
}

/* цитата с фото слева (зеркало обычной) */
.quote--flip { grid-template-columns: 220px 1fr; }
.quote--flip blockquote { text-align: left; }
@media (max-width: 900px) {
	.quote--flip { grid-template-columns: 1fr; }
	.quote--flip .person { order: 0; }
}

/* брендовая иллюстрация в сетке чисел — вместо снятого показателя */
.g-art { display: flex; align-items: center; justify-content: center; }
.g-art img { height: 130px; width: auto; display: block; }
@media (max-width: 700px) { .g-art img { height: 110px; } }

/* зеркальная цитата чуть шире: текст должен читаться слева направо длинными строками */
.quote--flip { max-width: 1000px; }
.quote--flip blockquote { text-align: left; }
.quote--flip blockquote p { max-width: 46ch; }

/* ============================================================
   Адаптив 2026-09: страница должна одинаково работать
   от 320px до десктопа. Правки точечные — макет на десктопе
   не меняется, меняется его поведение на узких экранах.
   ============================================================ */

/* 1. Кольцо не шире экрана на телефоне */
@media (max-width: 900px) {
	.donut-block > svg { max-width: min(260px, 66vw); }
}

/* 2. Ряд из четырёх показателей (публичная программа) — раньше стоял
   инлайновым стилем repeat(4,1fr) и перебивал любой медиазапрос */
.metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 900px) { .metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .metrics--4 { grid-template-columns: minmax(0, 1fr); } }

/* 3. Шапка на узком экране: вордмарк мельче, кнопка компактнее */
@media (max-width: 480px) {
	.topbar .wrap { height: 56px; gap: var(--sc-space-2); }
	.wordmark { min-width: 0; flex: 0 1 auto; }
	.wordmark svg { height: 16px; max-width: 100%; }
	.topbar .give { flex: 0 0 auto; height: 34px; line-height: 34px; padding: 0 16px; }
}

/* 4. Оглавление разделов: на телефоне листается вбок одной строкой,
   а не занимает пять строк экрана */
@media (max-width: 760px) {
	.secnav .wrap {
		flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.secnav .wrap::-webkit-scrollbar { display: none; }
}

/* 5. Крупные числа: кегль уже резиновый, поэтому неразрывность больше
   не ломает верстку — снимаем прежний форсированный перенос */
@media (max-width: 900px) {
	.giant .num { font-size: var(--sc-text-giant); line-height: var(--sc-lh-giant); white-space: nowrap; }
}
@media (max-width: 620px) {
	.giant .num { font-size: var(--sc-text-giant); line-height: var(--sc-lh-giant); }
	.pair .num, .metric .m-num, .split .s-num, .grid3 .g-num, .numrow .v { font-size: var(--sc-text-h2); line-height: var(--sc-lh-h2); }
}

/* 6. Таблица расходов: на телефоне поля меньше, сумма не переносится */
@media (max-width: 620px) {
	.ftable th, .ftable td { padding: var(--sc-space-2) var(--sc-space-1); font-size: var(--sc-text-ref); }
	.ftable td.n { padding-left: var(--sc-space-2); }
}

/* 7. Мелочи, из-за которых появлялась горизонтальная прокрутка */
.legend .li { max-width: 100%; }
.bubble { max-width: min(520px, 100%); }
.horse-wrap img, .shot, .photo-band { max-width: 100%; }
@media (max-width: 620px) {
	.bubbles { gap: var(--sc-space-4); }
	.bubble { padding: var(--sc-space-3) var(--sc-space-4); gap: var(--sc-space-3); }
	.bubble .ico { width: 34px; height: 34px; }
}

/* 8. Легенда диаграммы на телефоне: столбиком и по левому краю —
   иначе двухстрочный пункт разъезжается с собственным квадратиком */
@media (max-width: 620px) {
	.legend {
		flex-direction: column; align-items: flex-start; text-align: left;
		gap: var(--sc-space-2); max-width: var(--sc-article);
		margin-left: auto; margin-right: auto; padding: 0 var(--sc-page-pad);
	}
	.legend .li { align-items: flex-start; }
	.legend .sw { flex: 0 0 14px; margin-top: 6px; }
}