/* GNS Education — стили сайта. Направление «Высота»: два цвета, одна гарнитура в двух ширинах.
   Порядок: 1 токены · 2 основа · 3 общие элементы · 4 шапка · 5 разделы и служебные страницы · 6 форма · 7 подвал · 8 движение */

/* ───────── 1. Токены ───────── */
@font-face {
  font-family: "TikTok Sans";
  src: url("/assets/fonts/tiktok-sans-v4.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 100% 150%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #312726;
  --ink-deep: #1B1514;
  --cream: #FFF8ED;
  --sand: #EFE6D8;
  --muted-on-dark: rgba(255, 248, 237, .68);
  --muted-on-light: rgba(49, 39, 38, .72);
  --line-on-dark: rgba(255, 248, 237, .16);
  --line-on-light: rgba(49, 39, 38, .14);
  --error-on-light: #A8322A;
  --error-on-dark: #FFB4A8;
  --soft-on-dark: rgba(255, 248, 237, .86);
  --edge-on-dark: rgba(255, 248, 237, .3);
  --edge-on-dark-strong: rgba(255, 248, 237, .5);
  --frame-on-dark: rgba(255, 255, 255, .15);
  --planet-hi: #42352F;
  --planet-mid: #2A201E;
  --planet-lo: #17110F;
  --planet-shade: #0C0807;

  --font: "TikTok Sans", "Helvetica Neue", Arial, sans-serif;
  --wide: 145%;      /* ширина заголовков (ось wdth) */
  --semi: 122%;      /* ширина подзаголовков */

  --fs-hero: clamp(2.125rem, 1.494rem + 3.62vw, 5rem);
  --fs-h2: clamp(1.9375rem, 1.3rem + 2.72vw, 4rem);
  --fs-say: clamp(1.625rem, 1.207rem + 1.714vw, 3rem);
  --fs-h3: clamp(1.3125rem, 1.196rem + .476vw, 1.75rem);
  --fs-body: clamp(1.0625rem, 1.04rem + .095vw, 1.125rem);
  --fs-small: 1rem;
  --fs-caps: .75rem;

  --gutter: clamp(20px, 7.238vw - 8.2px, 96px);
  --section: clamp(72px, 10vw, 144px);
  --header-h: 72px;
  --wrap-max: 1248px;   /* наибольшая ширина содержимого */
  --hero-gap: 64px;     /* первый экран: расстояние между колонками */
  --hero-aside: 280px;  /* первый экран: наименьшая ширина правой колонки */
  --bar-lift: 64px;     /* подвал: на сколько нижняя строка заходит на сцену планеты */
  --radius: 12px;
  --radius-lg: 24px;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-photo: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);

  /* тема по умолчанию — тёмная */
  --bg: var(--ink);
  --fg: var(--cream);
  --fg-muted: var(--muted-on-dark);
  --line: var(--line-on-dark);
  --error: var(--error-on-dark);
}

/* ───────── 2. Основа ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--cream);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* телефон: слово шире своей колонки (увеличенный шрифт на узком экране) переносится по буквам и не растягивает колонку,
   а с ней страницу */
@media (max-width: 899px) { body { overflow-wrap: anywhere; } }
h1, h2, h3, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul[role="list"], ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cream); color: var(--ink); }
[data-theme="light"] ::selection { background: var(--ink); color: var(--cream); }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--cream); color: var(--ink); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ───────── 3. Общие элементы ───────── */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); margin-inline: auto; }

.section { position: relative; padding-block: var(--section); background: var(--bg); color: var(--fg); }
.section--ink { --bg: var(--ink); --fg: var(--cream); --fg-muted: var(--muted-on-dark); --line: var(--line-on-dark); --error: var(--error-on-dark); }
.section--cream { --bg: var(--cream); --fg: var(--ink); --fg-muted: var(--muted-on-light); --line: var(--line-on-light); --error: var(--error-on-light); }

/* зерно — один слой на тёмных разделах */
.section--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .93 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--ink > * { position: relative; }

.caps { font-size: var(--fs-caps); line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5.5vw, 80px); }
.section-title {
  font-size: var(--fs-h2); font-weight: 500; font-stretch: var(--wide);
  line-height: .98; letter-spacing: -.045em; word-spacing: .12em; text-wrap: balance;
}
.section-lead { color: var(--fg-muted); max-width: 34em; text-wrap: pretty; }
/* слово заголовка, разбитого скриптом на слова, — неразрывный блок: длиннее строки оно бывает только при увеличенном шрифте,
   тогда переносится внутри себя (по слогам, где браузер умеет) и не растягивает колонку */
.w { overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 900px) {
  :root { --fs-small: .9375rem; }
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: end; }
  .section-title { max-width: 13em; }
}
.section-action { margin-top: clamp(40px, 5vw, 64px); }

/* Главное действие: «пилюля» и круглая кнопка-самолёт в общей рамке.
   Кнопка не шире своего блока: подпись, которой не хватает места (узкий экран, увеличенный шрифт), переносится,
   «пилюля» растёт в высоту, самолёт остаётся кругом. Запрета переноса у кнопки нет: он растягивал блок вместе со страницей. */
.cta {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 6px;
  border: 0; border-radius: 999px; background: var(--frame-on-dark);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta__pill, .cta__plane {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px;
  background: var(--cream); color: var(--ink); transition: background-color .2s ease;
}
.cta__pill { min-width: 0; padding: 8px 26px; font-size: 1rem; font-weight: 600; letter-spacing: -.005em; text-align: center; text-wrap: balance; }
.cta__plane { width: 52px; flex: none; overflow: hidden; }
.cta__plane svg { width: 20px; height: 20px; fill: currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.cta:active { transform: scale(.99); }
.cta:focus-visible { outline-color: var(--fg, currentColor); border-radius: 999px; }
/* Малая «пилюля» выбора: варианты в форме и кнопки стран у планеты */
.chip {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--edge-on-dark); border-radius: 999px;
  background: none; color: var(--cream); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"], .pill input:checked + .chip { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chip:active, .pill input:active + .chip { transform: scale(.98); }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover, .pill:hover input:not(:checked) + .chip { border-color: var(--edge-on-dark-strong); } }
.cta--lg .cta__pill, .cta--lg .cta__plane { min-height: 56px; }
.cta--lg .cta__pill { padding-inline: 30px; font-size: 1.0625rem; }
.cta--lg .cta__plane { width: 56px; }
.cta--lg .cta__plane svg { width: 22px; height: 22px; }
@media (max-width: 343px) {
  /* экран уже 344 px: главная кнопка с самой длинной подписью помещается в поля страницы одной строкой */
  .cta__pill { padding-inline: 14px; }
  .cta--lg .cta__pill { padding-inline: 18px; }
}
.cta--dark { background: rgba(49, 39, 38, .09); }
.cta--dark .cta__pill, .cta--dark .cta__plane { background: var(--ink); color: var(--cream); }
@media (hover: hover) {
  .cta:hover .cta__plane svg { transform: rotate(-45deg) translateX(3px); }
  .cta--light:hover .cta__pill, .cta--light:hover .cta__plane { background: #fff; }
  .cta--dark:hover .cta__pill, .cta--dark:hover .cta__plane { background: var(--ink-deep); }
}

/* Ссылки */
.link-arrow {
  display: inline-block; padding-block: 9px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .2s ease;
}
.nw { white-space: nowrap; }
.link-arrow svg { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -.2em; transition: transform .2s ease; }
.link-caps {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-caps); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .2s ease;
}
@media (hover: hover) {
  .link-arrow:hover, .link-caps:hover { text-decoration-color: currentColor; }
  .link-arrow:hover svg { transform: translate(2px, -2px); }
}

/* Текст только для программ чтения экрана */
.sr-only, .news-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Пункт «Новости» в меню и в подвале виден, только когда на сайте есть опубликованные новости: класс has-news на html ставит сервер */
html:not(.has-news) .only-news { display: none; }

/* Вкладки регионов (раздел стран, выбор у планеты). Кнопки role="tab" собирает скрипт из подзаголовков групп;
   выбранная — aria-selected="true": полный цвет и линия 2 px поверх волосяной. Без скриптов вкладок нет — видны подзаголовки.
   Подписи, которым не хватает ширины (узкий экран, увеличенный шрифт), переходят на следующую строку: каждая вкладка остаётся
   на виду, страница шире не становится. У последней строки волосяная линия — рамка блока, у строк над ней — фон: полоса 1 px
   в просвете между строками. Поэтому высота кнопки задана точно (--tab-h): шаг фона равен ей плюс просвет. */
.tabs {
  --tab-h: 48px;
  display: flex; flex-wrap: wrap; gap: 1px clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--line);
  background: linear-gradient(to top, var(--line) 1px, transparent 0) 0 0 / 100% calc(var(--tab-h) + 1px) padding-box;
}
html:not(.js) .tabs, .tabs:empty { display: none; }
.tabs__tab {
  position: relative; flex: none; min-width: 44px; height: var(--tab-h); padding: 0 0 6px; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(1rem, .86rem + .62vw, 1.375rem); font-weight: 500; font-stretch: var(--semi); letter-spacing: -.02em; white-space: nowrap;
  color: var(--fg-muted); transition: color .3s ease; -webkit-tap-highlight-color: transparent;
}
.tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.tabs__tab[aria-selected="true"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .tabs__tab:hover { color: var(--fg); } }
.tabs--sm { --tab-h: 44px; column-gap: 24px; }
.tabs--sm .tabs__tab { padding-bottom: 2px; font-size: var(--fs-small); font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
@media (max-width: 379px) {
  /* три подписи в одну строку на экране от 320 px: кегль и просвет идут от ширины окна */
  .tabs, .tabs--sm { column-gap: 12px; }
  .tabs__tab { font-size: clamp(.875rem, 4.3vw, 1rem); }
  .tabs--sm .tabs__tab { font-size: clamp(.8125rem, 4vw, .9375rem); }
}

/* Круглая кнопка со значком Telegram: в шапке — ссылка, в меню на телефоне — значок строки */
.tg-round {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent); border-radius: 50%; color: inherit; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tg-round svg { width: 20px; height: 20px; margin: 1px 2px 0 0; }
a.tg-round:active { transform: scale(.97); }
a.tg-round:focus-visible { border-radius: 50%; }
/* подсказка под кнопкой: что в канале */
.tg-round__tip {
  position: absolute; top: calc(100% + 10px); left: 50%; padding: 9px 16px; border-radius: 999px;
  background: var(--cream); color: var(--ink); font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, -4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
a.tg-round:focus-visible .tg-round__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) {
  a.tg-round:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
  a.tg-round:hover .tg-round__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
}

/* Фотография в рамке со скруглением */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── 4. Шапка ───────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--cream);
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.site-header.is-solid { background: rgba(27, 21, 20, .9); }
.site-header.is-solid[data-theme="light"] { background: rgba(255, 248, 237, .92); color: var(--ink); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-header__bar { position: relative; display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand__name { font-size: 1rem; font-weight: 600; font-stretch: var(--semi); letter-spacing: -.02em; white-space: nowrap; }
.site-nav { position: relative; margin-left: auto; }
.site-nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  opacity: .86; transition: opacity .2s ease;
}
.site-nav__list a:hover, .site-nav__list a.is-current, .site-nav__list a[aria-current] { opacity: 1; }
.site-nav__dot {
  position: absolute; left: 0; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: currentColor; opacity: 0; transform: translateX(var(--x, 0px));
  transition: transform .35s var(--ease), opacity .2s ease;
}
.site-nav__dot.is-on { opacity: 1; }
.site-nav__extra { display: none; }
/* почта в строку шапки не помещается ни на одной ширине: она остаётся в выдвижном меню, в подвале и в блоке заявки */
.site-header__mail {
  display: none; align-items: center; min-height: 44px;
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--cream); color: var(--ink);
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background-color .3s ease, color .3s ease;
}
.btn:active { transform: scale(.99); }
.site-header[data-theme="light"].is-solid .btn { background: var(--ink); color: var(--cream); }
/* кнопка Telegram стоит вплотную к главной кнопке: вместе они читаются как одна группа действий */
.site-header__tg { margin-right: -16px; }
.site-header[data-theme="light"].is-solid .tg-round__tip { background: var(--ink); color: var(--cream); }
@media (hover: hover) { .site-header[data-theme="light"].is-solid a.tg-round:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); } }
.site-nav__tg { display: none; }
.menu-toggle {
  position: relative; z-index: 2; display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; margin-left: auto;
  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-toggle__bars { position: relative; width: 24px; height: 10px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { bottom: 0; }
.menu-open .menu-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle__bars::after { transform: translateY(-4.25px) rotate(-45deg); }

@media (min-width: 1140px) {
  .site-header.is-solid { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (max-width: 1139px) {
  /* без размытия полупрозрачная шапка пропускает текст страницы — фон плотный */
  .site-header.is-solid { background: var(--ink-deep); }
  .site-header.is-solid[data-theme="light"] { background: var(--cream); }
}
/* Пороги строки меню сосчитаны по семи пунктам (с «Новостями»): уже 1140 px они не помещаются в строку даже плотно —
   там меню выдвижное. Меняется число или длина пунктов — пороги нужно перемерить. */
@media (min-width: 1140px) and (max-width: 1199px) {
  .site-nav__list a { padding: 0 8px; }
}
@media (min-width: 1140px) and (max-width: 1359px) {
  /* в строке — меню, кнопка Telegram и главная кнопка: название рядом с логотипом не помещается, логотип несёт его сам */
  .brand__name { display: none; }
}
@media (max-width: 1139px) {
  .btn--header, .site-nav { display: none; }
  /* на телефоне значок Telegram остаётся в шапке — рядом с кнопкой меню; подсказка под ним не показывается */
  .site-header__bar { gap: 8px; }
  /* название, которому не хватает места до значка (узкий экран, увеличенный шрифт), встаёт в две строки, а не заходит под него */
  .site-header .brand__name { white-space: normal; line-height: 1.125; }
  .site-header__tg { z-index: 2; margin: 0 0 0 auto; }
  .site-header__tg + .btn--header + .menu-toggle { margin-left: 0; }
  .site-header__tg .tg-round__tip { display: none; }
  /* в открытом меню у Telegram своя строка: значок в шапке прячется, место за ним остаётся */
  .menu-open .site-header__tg { visibility: hidden; }
  .js .menu-toggle { display: grid; }
  /* меню — полноэкранная тёмная панель; вложена в шапку, поэтому растёт от её верхнего края */
  .js .site-nav {
    position: absolute; top: 0; left: 50%; z-index: 1; display: flex; flex-direction: column;
    width: 100vw; height: 100dvh; margin: 0; padding: calc(var(--header-h) + 28px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--ink-deep); color: var(--cream); transform: translateX(-50%);
    overflow-y: auto; visibility: hidden; opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .js.menu-open .site-nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .menu-open .site-header { color: var(--cream) !important; transform: none !important; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a {
    min-height: 60px; padding: 0; opacity: 1; white-space: normal;
    font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 500; font-stretch: var(--wide); letter-spacing: -.045em;
  }
  .site-nav__list li + li { border-top: 1px solid var(--line-on-dark); }
  .site-nav__dot { display: none; }
  /* строка Telegram — сразу после пунктов меню: значок, подпись и что в канале */
  .site-nav__tg {
    display: flex; flex: none; align-items: center; gap: 16px; min-height: 80px; padding: 16px 0;
    border-block: 1px solid var(--line-on-dark); color: var(--cream); text-decoration: none;
  }
  .site-nav__tg-text { display: grid; gap: 2px; }
  .site-nav__tg-title { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
  .site-nav__tg-note { font-size: var(--fs-small); line-height: 1.35; color: var(--muted-on-dark); }
  .site-nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 32px; }
  .site-nav__mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted-on-dark); text-decoration: none; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  /* выдвижное меню на широком экране: главная кнопка остаётся в шапке, как и раньше на этих ширинах; в открытом меню её заменяет кнопка панели */
  .btn--header { display: inline-flex; }
  .menu-open .btn--header { visibility: hidden; }
}
.menu-open body { overflow: hidden; }

/* ───────── 5. Разделы ───────── */

/* Первый экран + «шторка» */
.curtain { position: relative; }
.hero {
  position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--ink-deep); color: var(--cream);
}
.hero__scene { position: absolute; inset: 0; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; }
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 21, 20, .5) 0, rgba(27, 21, 20, 0) 22%, rgba(27, 21, 20, 0) 40%, rgba(27, 21, 20, .5) 68%, rgba(27, 21, 20, .86) 100%),
    radial-gradient(110% 85% at 0% 100%, rgba(27, 21, 20, .8) 0, rgba(27, 21, 20, .62) 50%, rgba(27, 21, 20, 0) 100%),
    radial-gradient(52% 58% at 100% 100%, rgba(27, 21, 20, .62) 0, rgba(27, 21, 20, .5) 45%, rgba(27, 21, 20, 0) 100%);
}
.hero__shade::after { content: ""; position: absolute; inset: 0; background: var(--ink-deep); opacity: calc(var(--hp, 0) * .35); }
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 20px;
  padding-bottom: clamp(24px, 6.2svh, 56px);
}
.hero__title .w { display: inline-block; }
.hero__title {
  --d: .05s;
  max-width: 11.5em;
  font-size: var(--fs-hero); font-weight: 500; font-stretch: var(--wide);
  line-height: .94; letter-spacing: -.05em; word-spacing: .12em;
}
.hero__lead { --d: .45s; max-width: 33em; text-wrap: pretty; }
.hero__actions { --d: .55s; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 8px; }
.hero__aside { --d: .65s; display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--edge-on-dark); }
.hero__note { font-size: var(--fs-small); line-height: 1.45; color: var(--soft-on-dark); text-wrap: balance; }
@media (min-width: 900px) {
  /* слева заголовок и действие, справа внизу — подзаголовок и строка географии */
  .hero {
    --wrap-w: min(100vw - 2 * var(--gutter), var(--wrap-max));
    --aside-w: max(var(--hero-aside), .26 * var(--wrap-w));
    --lead-rise: 285px;   /* середина подзаголовка над нижним краем экрана: под неё ставится местное затемнение */
  }
  .hero__content { grid-template-columns: minmax(0, 1fr) var(--aside-w); column-gap: var(--hero-gap); row-gap: clamp(24px, 4svh, 40px); align-items: end; }
  /* кегль идёт от ширины колонки: строка «в зарубежные вузы» (11,3em) всегда помещается, заголовок — в четыре строки */
  .hero__title { grid-column: 1; grid-row: 1; max-width: none; font-size: min(var(--fs-hero), (var(--wrap-w) - var(--hero-gap) - var(--aside-w)) / 11.6); }
  .hero__lead { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
  .hero__actions { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hero__aside { grid-column: 2; grid-row: 2; align-self: center; }
}
/* Узкое (до 1199 px), «квадратное» (до 3:2) или невысокое (до 740 px) окно: закатная полоса кадра встаёт под правую колонку.
   Под подзаголовком лежит местное затемнение; оно спадает плавно, без видимой границы. */
@media (min-width: 900px) and (max-width: 1199px) and (min-aspect-ratio: 4/5), (min-width: 1200px) and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 3/2), (min-width: 1200px) and (max-height: 740px) {
  .hero__shade::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 440px at calc(100% - (100vw - var(--wrap-w)) / 2 - var(--aside-w) / 2) calc(100% - var(--lead-rise)),
      rgba(27, 21, 20, .74) 0, rgba(27, 21, 20, .7) 22%, rgba(27, 21, 20, .62) 40%, rgba(27, 21, 20, .47) 54%, rgba(27, 21, 20, .31) 66%, rgba(27, 21, 20, .17) 77%, rgba(27, 21, 20, .07) 88%, rgba(27, 21, 20, .02) 95%, rgba(27, 21, 20, 0) 100%);
  }
}
@media (max-width: 599px) {
  .hero__title { max-width: none; font-size: clamp(1.75rem, (100vw - 2 * var(--gutter)) / 10.9, 2.5rem); font-stretch: 135%; }
}
@media (max-width: 899px) {
  .hero__note { font-size: var(--fs-body); }
  .hero__content { gap: 20px; }
  .hero__aside { gap: 6px; padding-top: 14px; }
}
/* узкий высокий экран: кадр стоит в верхней части, крыло — над заголовком, ниже кадр уходит в темноту */
@media (max-aspect-ratio: 4/5) {
  .hero__poster, .hero__video { height: min(100%, 143.4vw); object-position: 50% 0; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(27, 21, 20, .55) 0, rgba(27, 21, 20, 0) 11svh, rgba(27, 21, 20, 0) 22svh, rgba(27, 21, 20, .7) min(46svh, 86vw), var(--ink-deep) min(100%, 143.4vw));
  }
}
/* низкое окно телефона: остаются заголовок, подзаголовок, главная кнопка и строка географии */
@media (max-width: 899px) and (max-height: 720px) {
  .hero__note, .hero .link-caps { display: none; }
  .hero__content { gap: 14px; padding-bottom: 20px; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .hero__lead { display: none; }
}
/* окно ниже минимальной высоты первого экрана (альбомная ориентация): экран не закреплён, его низ доступен прокруткой */
@media (max-height: 619px) {
  .hero { position: relative; height: auto; min-height: 0; }
  .hero__content { position: relative; padding-top: max(calc(var(--header-h) + 24px), 34svh); }
}
@media (max-width: 899px) and (max-height: 619px) and (orientation: landscape) {
  /* телефон в альбомной ориентации: заголовок и главная кнопка помещаются в первый экран.
     В портретной кегль от высоты окна не зависит: он не должен меняться, когда браузер сворачивает свою панель */
  .hero__title { font-size: clamp(1.75rem, 10.5svh, 2.75rem); }
}

/* Кому помогаем */
.for { z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.panels { display: grid; gap: 16px; }
.panel__photo { aspect-ratio: 3 / 4; }
.panel__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 24px 20px; color: var(--cream);
  background: linear-gradient(180deg, rgba(27, 21, 20, 0) 0, rgba(27, 21, 20, .72) 72px, rgba(27, 21, 20, .88) 100%);
}
.panel__title { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.1; letter-spacing: -.03em; }
.panel__situation { margin-top: 20px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
html:not(.js) img[data-lazy] { display: none; }
.panel__text { margin-top: 8px; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel__situation, .panel__text { padding-right: 24px; }
}
/* С чем помогаем */
.services__grid { display: grid; gap: 40px; }
.rows { border-bottom: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 26px 0 28px; border-top: 1px solid var(--line); }
.row::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.row.is-active::before { transform: scaleX(1); }
.row__num { padding-top: .6em; color: var(--fg-muted); transition: color .3s ease; }
.row.is-active .row__num { color: var(--fg); }
.row__body { display: grid; gap: 10px; }
.row__title, .claim__title, .step__title, .policy__title, .quiz__legend, .quiz__name { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.row__text { color: var(--fg-muted); text-wrap: pretty; }
.services__visual { order: -1; }
.services__frame { aspect-ratio: 4 / 5; max-width: 420px; }
.services__frame img { position: absolute; inset: 0; opacity: 0; transform: scale(1.035); transition: opacity .6s ease, transform .9s var(--ease-photo); }
.services__frame img.is-active { opacity: 1; transform: none; }
@media (min-width: 600px) and (max-width: 899px) {
  /* планшет: фото во всю колонку, горизонтальный кадр; у каждого снимка своя точка кадрирования */
  .services__frame { max-width: none; aspect-ratio: 3 / 2; }
  .services__frame img:nth-of-type(1) { object-position: 50% 50%; }
  .services__frame img:nth-of-type(2) { object-position: 50% 18%; }
  .services__frame img:nth-of-type(3) { object-position: 50% 22%; }
}
@media (min-width: 900px) {
  .services__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: start; }
  .services__visual { order: 0; position: sticky; top: calc(var(--header-h) + 32px); }
  .services__frame { max-width: none; }
  .row { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .row__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; }
  .row__text { padding-top: .2em; }
}

/* Страны: двенадцать направлений в трёх группах (.regions > .region > .strip > .country).
   · без скриптов группы идут подряд с подзаголовками .region__title, страны — карточками;
   · скрипт ставит на .regions класс is-tabbed и собирает вкладки: в потоке остаётся группа .region.is-current, остальные скрыты;
     .strip.is-entering — панели вошедшей группы появляются по очереди; .regions.is-resizing — высота блока переходит к новой;
   · на десктопе панели группы стоят в ряд, одна раскрыта (.country.is-active, её номер — --a на .strip);
     число панелей группы — --c в разметке .strip (рядом с --a): от него считаются ширина раскрытой панели и «корешков». */
.countries {
  --land: 24px;         /* зазор между шапкой и заголовком раздела после перехода по якорю */
  --above-strip: 258px; /* над панелями: заголовок в две строки, вкладки и отступы между ними; под панелями — запас 20 px */
}
.countries .section-head { margin-bottom: clamp(24px, 3vw, 44px); }
.countries__tabs { margin-bottom: clamp(20px, 2vw, 28px); }
.regions { position: relative; display: grid; gap: clamp(40px, 5vw, 64px); }
.region { display: grid; gap: 20px; min-width: 0; }
.region__title { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; }
.regions.is-tabbed, .is-tabbed .region { gap: 0; }
.is-tabbed .region__title { display: none; }
.is-tabbed .region:not(.is-current) { position: absolute; inset: 0 0 auto; visibility: hidden; opacity: 0; pointer-events: none; }
.regions.is-resizing { clip-path: inset(0 -100vw); }
/* снимок группы, открытой впервые, ещё загружается: на его месте подложка --sand (у карточки — под снимком, у панели — сама панель),
   снимок проявится, когда придёт */
.js .country .country__photo.is-loading { opacity: 0; }
.strip { display: grid; gap: 16px; }
.country { position: relative; display: grid; align-content: start; gap: 20px; }
.country picture { display: block; border-radius: var(--radius); background: var(--sand); }
.country__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--sand); }
.country__side { display: none; }
.country__body { display: grid; gap: 10px; justify-items: start; }
.country__title { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.1; letter-spacing: -.03em; }
.country__text { color: var(--fg-muted); text-wrap: pretty; }
.countries__unsure { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-top: 24px; border-top: 1px solid var(--line); }
/* ссылка на хаб /strany/ под строкой выбора страны */
.countries__all { margin-top: 12px; }
@media (min-width: 900px) {
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  /* переход по якорю ставит в экран заголовок, вкладки и панели целиком: заголовок встаёт под шапку, а не на полный отступ раздела */
  .countries { scroll-margin-top: calc(var(--land) - var(--section)); }
}
@media (max-width: 899px) {
  .js .country__photo { transition: opacity .3s ease; }
  .js .strip.is-live:not(.is-multi) .country:not(.is-active) .country__photo { opacity: .55; }
}
/* Ленты с прилипанием: ряд листается вбок, край следующего элемента виден. Правило одно на все ленты сайта:
   панели «Кому помогаем», страны, четыре учебных заведения, новости на главной и галерея в новости (она — лента при любой ширине, см. news.css).
   Поведение прокрутки задано без условий: пока ряд не прокручивается (сетка на десктопе), оно ничего не меняет. */
.panels, .strip, .schools__rest, .news-list__grid--feed, .js .news-gallery { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.panels::-webkit-scrollbar, .strip::-webkit-scrollbar, .schools__rest::-webkit-scrollbar, .news-list__grid--feed::-webkit-scrollbar, .js .news-gallery::-webkit-scrollbar { display: none; }
@media (max-width: 899px) {
  /* лента с видимым краем следующей панели (у сетки карточек новостей свои отступы ниже по файлу — здесь её селектор весомее) */
  .panels, .strip, .schools__rest, .news-list__grid.news-list__grid--feed, .js .news-gallery {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; scroll-padding-inline: var(--gutter);
  }
  .panel, .country, .schools__rest > .school, .news-list__grid--feed > * { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
  /* единственная страна группы (и единственная новость) занимает всю ширину, а не висит у левого края */
  .strip .country:only-child, .news-list__grid--feed > :only-child { flex-basis: 100%; }
}
/* Страны на десктопе: панели группы в ряд, одна раскрыта. Положение и вырез — transform и clip-path, раскладка не пересчитывается.
   --c — число панелей (из разметки; без него группа считается одной панелью), --A — ширина раскрытой, --n — ширина «корешка».
   Одна панель — во весь ряд, две — раскрытая на три четверти, три и больше — на половину ряда. */
@supports (width: 1cqw) {
  @media (min-width: 900px) {
    .js .strip {
      --g: 10px;
      --A: max(50cqw, 100cqw - (var(--c, 1) - 1) * 24cqw);
      display: block; position: relative; container-type: inline-size; overflow: clip;
      /* заголовок, вкладки и панели помещаются в окно вместе с шапкой */
      height: clamp(360px, min(42vw, 100svh - var(--header-h) - var(--land) - var(--above-strip)), 600px);
    }
    .js .country {
      --n: calc((100cqw - var(--A) - (var(--c, 1) - 1) * var(--g)) / max(1, var(--c, 1) - 1));
      --after: clamp(0, calc(var(--i) - var(--a)), 1);
      --x: calc(var(--i) * (var(--n) + var(--g)) + var(--after) * (var(--A) - var(--n)));
      --cut: calc((var(--A) - var(--n)) / 2);
      position: absolute; top: 0; left: 0; display: block; width: var(--A); height: 100%;
      background: var(--sand); color: var(--cream); cursor: pointer;
      transform: translateX(calc(var(--x) - var(--cut)));
      clip-path: inset(0 var(--cut) round var(--radius));
      transition: transform .7s var(--ease), clip-path .7s var(--ease);
    }
    .js .country.is-active { cursor: default; transform: translateX(var(--x)); clip-path: inset(0 0 round var(--radius)); }
    .js .country picture { border-radius: 0; background: none; }
    .js .country__photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; transition: transform .7s var(--ease), opacity .4s ease; }
    /* у «корешка» видна только середина кадра: --shift (на самой панели) подводит под неё главный объект снимка */
    .js .country:not(.is-active) .country__photo { transform: translateX(var(--shift, 0)); }
    .js .country::before, .js .country::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .js .country::before { background: rgba(27, 21, 20, .5); transition: opacity .3s ease; }
    .js .country.is-active::before { opacity: 0; }
    /* затемнение под вертикальным названием «корешка»; у раскрытой панели своё — под текстом */
    .js .country::after { background: linear-gradient(180deg, rgba(27, 21, 20, 0) 30%, rgba(27, 21, 20, .7) 62%, rgba(27, 21, 20, .92) 100%); opacity: .65; transition: opacity .5s ease; }
    .js .country.is-active::after { opacity: 0; }
    .js .country__side {
      position: absolute; z-index: 2; left: 50%; bottom: 28px; display: block;
      writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); white-space: nowrap;
      font-size: 1.25rem; font-weight: 500; font-stretch: var(--semi); letter-spacing: -.02em;
      transition: opacity .3s ease;
    }
    .js .country.is-active .country__side { opacity: 0; }
    .js .country__body {
      position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 24px; max-width: 34em;
      opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    /* затемнение растёт вместе с текстом: длинный текст страны закрывает больше кадра, короткий — меньше */
    .js .country__body::before {
      content: ""; position: absolute; z-index: -1; left: -32px; top: -112px; bottom: -24px; width: var(--A); pointer-events: none;
      background: linear-gradient(180deg, rgba(27, 21, 20, 0) 0, rgba(27, 21, 20, .7) 104px, rgba(27, 21, 20, .92) 100%);
    }
    .js .country.is-active .country__body { opacity: 1; pointer-events: auto; transition: opacity .5s ease .2s; }
    .js .country__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-stretch: var(--wide); letter-spacing: -.045em; }
    .js .country__text { color: var(--soft-on-dark); }
    @media (hover: hover) {
      .js .country:not(.is-active):hover::before { opacity: .6; }
      .js .country.is-active:hover .country__photo { transform: scale(1.035); transition: transform .45s var(--ease-photo); }
    }
  }
  @media (min-width: 900px) and (max-width: 1199px) {
    .js .strip { --g: 6px; }
    .js .country__body { left: 24px; right: 24px; }
    .js .country__body::before { left: -24px; }
  }
}

/* Тест «Какая страна подходит вам»
   Без скриптов — вопросы списком и строка со ссылкой на форму. Пошаговый вид включает класс .is-live на разделе (ставит quiz.js):
   · вид:  .quiz__view.is-current — начало (intro), вопросы (run) или результат (result); остальные скрыты и лежат вне потока.
           Высоту при смене вида скрипт переводит через grid-template-rows у .quiz__views (на время перехода — класс .is-resizing)
   · шаг:  .quiz__step.is-current — текущий вопрос; все шаги стоят в одной ячейке сетки, её высота — по самому высокому шагу
   · ход:  --q на .quiz__run — доля пройденного (0–1); data-dir="back" — шаг назад
   · «Назад» и «Дальше» выключаются атрибутом disabled: кнопка не видна, но место держит
   · html.quiz-busy — вопросы или результат на экране: закреплённая кнопка «Консультация» на телефоне убрана */
.quiz { --bg: var(--sand); --quiz-edge: color-mix(in srgb, var(--fg) 55%, transparent); --quiz-small: var(--fs-body); }
.quiz__stage { scroll-margin-top: calc(var(--header-h) + 24px); }
.quiz__views { display: grid; gap: clamp(28px, 4vw, 48px); }
.quiz__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.quiz__parents { max-width: 22em; color: var(--fg-muted); text-wrap: balance; }
.quiz:not(.is-live) :is(.quiz__start, .quiz__bar, .quiz__nav, .quiz__result), .quiz.is-live .quiz__nojs { display: none; }
.quiz__nojs { display: grid; gap: 4px; justify-items: start; margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); }
.quiz__nojs p { max-width: 38em; text-wrap: pretty; }

/* вопросы */
.quiz__run { --q: .2; }
.quiz__bar { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.quiz__progress { position: relative; height: 1px; background: color-mix(in srgb, var(--fg) 22%, transparent); }
.quiz__progress span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--fg); transform: scaleX(var(--q)); transform-origin: 0 50%; }
.quiz__count { font-size: var(--quiz-small); line-height: 1.4; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.quiz__steps { display: grid; gap: 28px; }
.quiz__step { display: flow-root; min-width: 0; }
.quiz:not(.is-live) .quiz__step + .quiz__step { padding-top: 28px; border-top: 1px solid var(--line); }
/* legend — обычный блок: плавающий, он не встаёт в рамку группы и слушается ширины */
.quiz__legend { float: left; width: 100%; margin-bottom: 20px; }
.quiz__options { clear: both; display: grid; gap: 6px; padding-left: 1.2em; }
.quiz__options li::marker { color: var(--fg-muted); }
/* Вариант ответа — «пилюля» формы (.pill > .chip). Без скриптов это строка списка: оформление «пилюли» снято целиком. */
.quiz:not(.is-live) :is(.pill, .chip) { all: unset; }
.quiz:not(.is-live) .quiz__option input { display: none; }
.quiz.is-live .quiz__steps { gap: 0; }
.quiz.is-live .quiz__step { grid-area: 1 / 1; }
.quiz.is-live .quiz__options { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
/* отличия от «пилюли» формы: крупнее, в цветах светлого раздела, длинная подпись переносится */
.quiz .quiz__option { display: flex; }
/* z-index: при нажатии «пилюля» получает transform и иначе встала бы поверх самой радиокнопки */
.quiz__option input { z-index: 1; }
.quiz__option .chip { flex: 1; height: auto; min-height: 56px; padding: 12px 28px; border-color: var(--quiz-edge); border-radius: 28px; color: var(--fg); font-size: 1.0625rem; line-height: 1.25; white-space: normal; }
.quiz .quiz__option input:checked + .chip { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.quiz .quiz__option input:focus-visible + .chip { outline-color: var(--fg); }
@media (hover: hover) { .quiz .quiz__option:hover input:not(:checked) + .chip { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); } }
.quiz__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(20px, 2.6vw, 32px); }
/* «Назад», «Дальше», «Пройти заново» — кнопки в виде ссылки .link-arrow; здесь только отличия */
.quiz__btn { justify-self: start; min-height: 44px; padding-inline: 0; border: 0; background: none; cursor: pointer; transition: text-decoration-color .2s ease, opacity .2s ease; }
.quiz__btn--back svg { margin: 0 8px 0 0; transform: rotate(-135deg); }
.quiz__btn--next svg { transform: rotate(45deg); }
.quiz__btn:disabled { visibility: hidden; opacity: 0; }
@media (hover: hover) {
  .quiz__btn--back:hover svg { transform: rotate(-135deg) translate(2px, -2px); }
  .quiz__btn--next:hover svg { transform: rotate(45deg) translate(2px, -2px); }
}

/* виды: в потоке только текущий */
.quiz.is-live .quiz__views { position: relative; grid-template-rows: auto; gap: 0; }
.quiz.is-live .quiz__view { min-height: 0; }
.quiz.is-live .quiz__view:not(.is-current) { position: absolute; inset: 0 0 auto; }
.quiz.is-live :is(.quiz__view, .quiz__step):not(.is-current) { visibility: hidden; opacity: 0; pointer-events: none; }
.quiz__views.is-resizing { clip-path: inset(-12px -24px 0); }

/* результат */
.quiz__outcome { display: grid; gap: 28px; }
.quiz__verdict { display: grid; gap: 10px; align-content: start; }
.quiz__lead-in { color: var(--fg-muted); }
.quiz__lead-in[hidden] { display: none; }
.quiz__head { display: grid; gap: 24px; }
.quiz__title { font-size: var(--fs-say); font-weight: 500; font-stretch: var(--wide); line-height: 1.06; letter-spacing: -.045em; word-spacing: .12em; text-wrap: balance; }
.quiz__title:focus-visible { outline: none; }
.quiz__reasons { display: grid; gap: 24px; align-content: start; }
.quiz__body { display: grid; gap: 28px; justify-items: start; }
.quiz__why { width: 100%; border-bottom: 1px solid var(--line); }
.quiz__why li { padding: 14px 0 15px; border-top: 1px solid var(--line); text-wrap: pretty; }
.quiz__country { display: grid; gap: 20px; justify-items: start; width: 100%; }
.quiz__country + .quiz__country { margin-top: 12px; }
.quiz__name { margin: 0; }
.quiz__text { max-width: 34em; text-wrap: pretty; }
/* следующий шаг по ответу о сроке (nextStep в quiz-logic.js): под кнопками результата, обычным текстом */
.quiz__next { max-width: 34em; text-wrap: pretty; }
.quiz__near { display: grid; gap: 6px; }
.quiz__closest { font-weight: 600; text-wrap: pretty; }
.quiz__caveat { color: var(--fg-muted); text-wrap: pretty; }
.quiz__disclaimer { max-width: 40em; font-size: var(--quiz-small); line-height: 1.45; color: var(--fg-muted); text-wrap: pretty; }
.quiz__again { display: grid; gap: 4px 24px; margin-top: clamp(28px, 4vw, 56px); padding-top: 16px; border-top: 1px solid var(--line); }
.quiz__compare { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.quiz__compare[hidden] { display: none; }
@media (min-width: 600px) {
  .quiz.is-live .quiz__options { flex-direction: row; flex-wrap: wrap; }
  .quiz__option .chip { flex: none; }
}
@media (min-width: 900px) {
  .quiz { --quiz-small: var(--fs-small); }
  /* слева вопрос или заголовок результата, справа с середины — ответы или строки «почему» */
  .quiz__legend { width: calc(100% * 5 / 12); margin-bottom: 0; }
  .quiz__options { clear: none; margin-left: 50%; }
  .quiz.is-live .quiz__options { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .quiz__nav { column-gap: 0; }
  .quiz__nav .quiz__btn--next { grid-column: 2; }
  .quiz__outcome { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .quiz__verdict { position: sticky; top: calc(var(--header-h) + 32px); }
  .quiz__again { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; align-items: center; }
}

/* Высказывание */
.statement {
  position: relative; display: grid; align-items: end; min-height: min(92svh, 820px); padding-block: var(--section) clamp(40px, 6vw, 80px);
  overflow: clip; background: var(--ink-deep); color: var(--cream);
}
.statement__photo { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; object-position: 50% 35%; transform: translate3d(0, calc(var(--py, 0) * 4%), 0); }
@media (max-aspect-ratio: 4/5) { .statement__photo { object-position: 50% 30%; } }
.statement__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 20, .34) 0, rgba(27, 21, 20, .5) 38%, rgba(27, 21, 20, .86) 72%, rgba(27, 21, 20, .92) 100%); }
.statement .wrap { position: relative; }
.statement__text {
  max-width: 17em;
  font-size: var(--fs-say); font-weight: 500; font-stretch: var(--wide);
  line-height: 1.06; letter-spacing: -.045em; word-spacing: .12em;
}

/* Маршрут поступления */
.route__grid { display: grid; gap: 48px; }
.route__intro { display: grid; gap: 20px; align-content: start; }
.route__action { display: grid; gap: 16px; justify-items: start; margin-top: 12px; }
.route__action p { color: var(--fg-muted); }
.route__track { --track: 44px; position: relative; padding-left: var(--track); }
.route__track::before { content: ""; position: absolute; left: calc(var(--track) / 2 - 12px); top: 0; bottom: 0; border-left: 1px dashed color-mix(in srgb, var(--fg) 34%, transparent); }
.route__line { display: none; position: absolute; left: 0; top: 0; width: var(--track); height: 100%; overflow: visible; }
.route__line path { fill: none; }
.route__line-base { stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1; stroke-dasharray: 2 6; }
.route__line-done { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
.route__plane {
  display: none; position: absolute; left: 0; top: 0; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  place-items: center; border-radius: 50%; background: var(--bg); color: var(--fg);
}
.route__plane svg { width: 24px; height: 24px; fill: currentColor; }
.steps { display: grid; gap: clamp(36px, 4.4vw, 60px); }
.step { position: relative; display: grid; gap: 10px; max-width: 34em; }
.step__dot {
  position: absolute; left: calc(var(--track) / -2 - 12px); top: .5em; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px var(--bg);
}
.step__num { color: var(--fg-muted); }
.step__text { color: var(--fg-muted); text-wrap: pretty; }
.js .route.is-live .route__track::before { display: none; }
.js .route.is-live .route__line { display: block; }
.js .route.is-live .route__plane { display: grid; }
.js .route.is-live .step:not(.is-on) .step__dot { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--fg-muted), 0 0 0 5px var(--bg); }
.js .route.is-live .step.is-on .step__num { color: var(--fg); }
.step__dot, .step__num { transition: background-color .3s ease, box-shadow .3s ease, color .3s ease, transform .4s var(--ease); }
@media (min-width: 900px) {
  .route__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .route__intro { position: sticky; top: calc(var(--header-h) + 48px); }
  .route__track { --track: 128px; }
}

/* Почему GNS Education */
.why__grid { display: grid; gap: 56px; }
.spread { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.spread__a { grid-column: 1 / span 9; grid-row: 1; aspect-ratio: 4 / 5; }
.spread__b { grid-column: 5 / span 8; grid-row: 1; aspect-ratio: 3 / 2; margin-top: 96%; z-index: 1; box-shadow: 0 0 0 8px var(--bg); }
.spread__a img { transform: translate3d(0, calc(var(--py, 0) * -3%), 0) scale(1.07); }
.claims { border-bottom: 1px solid var(--line); }
.claim { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0; padding: 32px 0 36px; border-top: 1px solid var(--line); }
.claim__num { grid-row: span 2; padding-top: calc((var(--fs-say) * 1.1 - 1.3em) / 2); color: var(--fg-muted); }
.quiz__legend { font-size: clamp(1.4375rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -.035em; }
/* утверждения набраны ступенью «крупное высказывание» — раздел не повторяет список услуг */
.claim__title { font-size: var(--fs-say); font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.04em; word-spacing: .1em; }
@media (max-width: 899px) {
  /* кегль идёт от ширины колонки: самое длинное слово («Индивидуальный», 11 em) помещается в строку на экране от 320 px */
  .claim__title { font-size: min(var(--fs-say), (100vw - 2 * var(--gutter) - 52px) / 11.2); }
}
.claim__text { grid-column: 2; margin-top: 16px; max-width: 32em; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .spread { position: sticky; top: calc(var(--header-h) + 40px); }
  .claim { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .spread { max-width: 520px; }
}

/* Вопросы и ответы */
.faq { --bg: var(--sand); }
.faq__grid { display: grid; gap: 40px; }
.faq__head { display: grid; gap: 20px; align-content: start; }
.faq__list { border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 18px 0;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q h3 { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.5rem); font-weight: 500; font-stretch: 112%; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.qa__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.qa__icon svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.qa[open] .qa__icon svg { transform: rotate(45deg); }
.qa.is-closing .qa__icon svg { transform: none; }
.qa__a { display: grid; grid-template-rows: 1fr; }
.qa__a-inner { min-height: 0; overflow: hidden; }
.qa__a p { max-width: 38em; padding: 0 68px 28px 0; text-wrap: pretty; }
@media (hover: hover) {
  .qa__q:hover .qa__icon { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(100% / 12); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 48px); }
}
@media (max-width: 599px) {
  .qa__a p { padding-right: 0; }
}

/* Блоки по ответам заказчика: «С чем к нам приходят», языковые курсы, учебные заведения, после приезда с «Учёбой и работой», команда.
   Новых приёмов нет: волосяные линии, две ступени заголовков (--fs-say и --fs-h3), подписи капсом, сетка в двенадцать колонок.
   У каждого раздела своя раскладка — два одинаковых списка подряд не стоят. Скрипты здесь ничего не переключают:
   появление — общие data-words, data-rise и data-stagger; раскрывающиеся части — <details class="more"> (работают без скриптов). */

/* Плотный раздел: воздуха сверху и снизу меньше, чем у остальных, — пять разделов подряд не должны удваивать страницу */
.section--dense { padding-block: clamp(52px, 6.1vw, 88px); }
.section--dense .section-head { margin-bottom: clamp(24px, 3.4vw, 48px); }

/* Две ступени заголовков новых блоков — каждая записана один раз. Подзаголовок: */
.school__name, .arrive__title, .work__help, .person__name, .team__langs, .more__title, .language__key { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
/* «крупное высказывание»: страх семьи, главное учебное заведение, заголовок и названия групп «Учёбы и работы» */
.fear__say, .school--lead .school__name, .work__title, .work__where { font-size: var(--fs-say); font-weight: 500; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.04em; word-spacing: .1em; text-wrap: balance; }
.fear__label, .fact__term, .school__country, .person__meta { color: var(--fg-muted); }
.school__text, .arrive__text, .work__text, .person__text { max-width: 34em; color: var(--fg-muted); text-wrap: pretty; }

/* Раскрывающаяся часть: строка-заголовок с кружком «плюс» (тот же, что у вопросов), под ней содержимое. Закрыта по умолчанию;
   открывается нажатием, Enter и пробелом — это обычный <details>, скрипт его только открывает при переходе по якорю */
.more { border-block: 1px solid var(--line); }
.more__sum { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 14px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.more__sum::-webkit-details-marker { display: none; }
.more[open] > .more__sum .qa__icon svg { transform: rotate(45deg); }
@media (hover: hover) { .more__sum:hover .qa__icon { background: var(--fg); color: var(--bg); border-color: var(--fg); } }

/* С чем к нам приходят: страх — прямая речь ступенью «крупное высказывание», ответ команды рядом (на телефоне — под ним) */
.concerns { --bg: var(--sand); }
.fears { border-bottom: 1px solid var(--line); }
.fear { display: grid; gap: 12px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
/* страх на шаг мельче остальных высказываний раздела: пять подряд не должны занимать два экрана;
   открывающая кавычка висит за левым краем — строки стоят по одной вертикали с ответами и заголовком */
.fear__say { font-size: min(var(--fs-say), 2.25rem); text-indent: -.5em; }
.fear__answer { display: grid; gap: 6px; justify-items: start; max-width: 36em; }
.fear__do, .fact__text { text-wrap: pretty; }
.fear__answer .link-arrow { margin-bottom: -9px; }
@media (max-width: 599px) {
  .fear__say { font-size: clamp(1.3125rem, 5.9vw, 1.5rem); }
}
@media (min-width: 900px) {
  .fear { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(100% / 12); align-items: start; padding: 28px 0 32px; }
  /* подпись «Что делаем» стоит на середине первой строки страха */
  .fear__answer { padding-top: calc((min(var(--fs-say), 2.25rem) * 1.1 - var(--fs-caps) * 1.3) / 2); }
}

/* Языковые курсы: заголовок, вводная строка и действие; сведения парами «подпись — текст» — в раскрывающейся части */
.language__lead { display: grid; gap: 20px; justify-items: start; }
/* главное о курсах — видно без нажатия, над раскрывающейся строкой */
.language__key { max-width: 30em; padding-bottom: clamp(20px, 2.4vw, 28px); }
.facts { display: grid; margin: 0; padding-bottom: 8px; }
.fact { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.fact__text { margin: 0; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(100% / 12); }
}

/* Учебные заведения: одно крупно слева (с ним договор), четыре — списком справа; на телефоне четыре идут лентой с прилипанием
   (общее правило лент — выше, у «Кому помогаем» и «Стран»). Страна — подпись капсом в начале строки о профиле */
.schools__list { display: grid; gap: 20px; }
.school { display: grid; gap: 8px; justify-items: start; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.school--lead { gap: 12px; padding-top: 22px; }
.school__country { margin-right: .6em; }
.school .news-tags { margin: 0; }
/* Название — ссылка на сайт заведения, открывается в новой вкладке. Типографика заголовка прежняя: признак ссылки — стрелка у последнего слова,
   линия под названием проступает при наведении (как у .link-arrow). Ссылка строчная: поля сверху и снизу вёрстку не сдвигают,
   а доводят высоту области нажатия до 44 px и растут вместе с увеличенным шрифтом. position — чтобы скрытый текст .sr-only
   оставался внутри ленты и ехал вместе с карточкой. Запрета переноса у ссылки нет: неразрывны только последнее слово и стрелка (.nw) */
.school__link {
  position: relative; padding-block: max(0px, (44px - 1em) / 2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: transparent;
  transition: text-decoration-color .2s ease;
}
/* стрелка занимает середину своего поля (10 из 24): поле в 1em даёт знак высотой с половину прописной, как у .link-arrow;
   отрицательные поля убирают пустоту справа и не дают значку раздвинуть строку */
.school__link svg { display: inline-block; width: 1em; height: 1em; margin: -.1em -.26em -.1em .04em; vertical-align: -.16em; transition: transform .2s ease; }
/* фокус с клавиатуры — ровная рамка вокруг всего названия: контур самой ссылки шёл бы ступенями по строкам вместе с полями нажатия.
   Браузер без :has оставляет общий контур ссылки */
@supports selector(:has(a)) {
  .school__name:has(.school__link:focus-visible) { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
  .school__link:focus-visible { outline: none; }
}
@media (hover: hover) {
  .school__link:hover { text-decoration-color: currentColor; }
  .school__link:hover svg { transform: translate(.1em, -.1em); }
}
/* Лента четырёх заведений (до 899 px): край следующей карточки виден всегда, не уже 40 px —
   на телефоне одна карточка и край второй, на планшете две карточки и край третьей */
@media (max-width: 599px) {
  .schools__rest > .school { flex-basis: min(76vw, 360px); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .schools__rest > .school { flex-basis: calc((100vw - var(--gutter) - 88px) / 2); }
}
/* Фокус с клавиатуры на названии в карточке, от которой виден один край: Chrome такую ленту сам не докручивает.
   Пока название в фокусе, точка прилипания в ленте одна — его карточка, и лента встаёт на неё целиком */
@media (max-width: 899px) {
  .schools__rest:has(.school__link:focus-visible) > .school:not(:focus-within) { scroll-snap-align: none; }
}
/* лента в фокусе с клавиатуры: контур внутри её границ — она стоит от края до края экрана */
.schools__rest:focus-visible { outline-offset: -2px; border-radius: 0; }
@media (min-width: 900px) {
  .schools__list { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  /* крупная запись едет вместе с прокруткой, пока рядом идёт список: левая колонка не остаётся пустой */
  .school--lead { position: sticky; top: calc(var(--header-h) + 24px); padding-top: 26px; }
  .schools__rest { display: grid; border-bottom: 1px solid var(--line); }
  .schools__rest .school { padding: 20px 0 22px; }
}

/* После приезда: пять шагов. На телефоне — строки, на планшете — название слева и текст справа,
   на широком экране — пять колонок на одной линии, точка шага стоит на ней (как точки маршрута) */
.arrive__step { display: grid; gap: 4px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
@media (min-width: 600px) and (max-width: 1199px) {
  .arrive__step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
}
@media (min-width: 1200px) {
  .arrive { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--edge-on-dark); }
  .arrive__step { position: relative; align-content: start; gap: 10px; padding: 30px 0 0; border-top: 0; }
  .arrive__step::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px var(--bg); }
  .work { margin-top: 48px; }
}
/* Учёба и работа: вторая часть того же раздела, свой якорь #work; раскрывается. До 1199 px её строка продолжает список шагов */
.work { scroll-margin-top: calc(var(--header-h) + 24px); }
.work__body { display: grid; gap: 24px; padding: 10px 0 28px; }
.work__cols { display: grid; gap: 24px; }
.work__col { display: grid; gap: 12px; align-content: start; }
.work__foot { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.work__help { max-width: 26em; }
.work__note { max-width: 34em; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .work__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); }
  .work__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: start; }
  .work__note { padding-top: .45em; }
}

/* Команда: трое, у каждого портрет 4:5 (голова и плечи, кадр у всех одинаковый). Снимки из разной съёмки цветные,
   фильтров в стилях нет: яркость и теплота сведены в самих файлах (SOURCES.md); волосяная линия по краю держит форму плашки у светлого снимка.
   До 599 px портрет стоит слева от имени, текст — во всю ширину под ними; с 600 px — портрет слева, имя и текст справа;
   с 900 px — три колонки, портрет над текстом; строки трёх карточек общие (subgrid): роли и тексты начинаются на одной высоте
   при любой длине имени, короткое имя стоит у нижнего края своей строки, вплотную к роли.
   Подсетка в карточке одна: портрет, имя, роль и текст — её прямые строки (обёртка имени и роли с 900 px — display: contents),
   просвет строк 8 px, остальное добрано отступами портрета и текста. Вложенную подсетку со своим просветом не возвращать:
   высоту её строк движки считают по-разному, и строка роли выходила ниже своих букв.
   Менять вместе: ширина портрета (104 px, с 600 px — 140 px, с 1200 px — 180 px) ↔ атрибут sizes снимков в разделе #team главной. */
.person { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px 18px; align-items: end; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.person__plate { aspect-ratio: 4 / 5; }
.person__plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.person__head { display: grid; gap: 8px; }
/* экран уже 340 px: самая длинная фамилия помещается в колонку рядом с портретом целиком */
@media (max-width: 339px) { .person { column-gap: 8px; } }
/* роль и страна — в строку через точку; если страна перенеслась на свою строку, её точка уходит за левый край и срезается.
   Обрезка действует только слева: сверху, снизу и справа рамка вынесена далеко за строку, буквы целы при любой высоте ячейки */
.person__meta { display: flex; flex-wrap: wrap; margin-left: -1.9em; clip-path: inset(-100vw -100vw -100vw 1.9em); }
.person__role, .person__place { margin-left: 1.9em; }
.person__place { position: relative; }
.person__place::before { content: "•"; position: absolute; left: -1.25em; }
.person__text { grid-column: 1 / -1; }
.team__foot { display: grid; gap: 20px; justify-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.team__langs { max-width: 26em; }
@media (min-width: 600px) {
  .person { grid-template-columns: 140px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px 28px; align-items: start; padding: 24px 0; }
  .person__plate { grid-row: 1 / span 2; }
  .person__text { grid-column: 2; }
}
@media (min-width: 900px) {
  .people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(100% / 24); }
  /* первая запись строк — для браузера без subgrid: карточка складывается сама, текст забирает остаток высоты */
  .person { grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-rows: subgrid; row-gap: 8px; padding: 28px 0 0; }
  .person__plate { grid-row: auto; width: 140px; margin-bottom: 12px; }
  .person__head { display: contents; }
  .person__name { align-self: end; }
  .person__text { grid-column: 1; margin-top: 4px; }
  .team__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: center; margin-top: clamp(32px, 3.4vw, 48px); }
  /* кнопка может занять и просвет между колонками (он равен четверти её колонки): подпись переносится, только когда не хватает и его */
  .team__foot .cta { justify-self: end; width: max-content; max-width: 125%; }
}
@media (min-width: 1200px) {
  .person__plate { width: 180px; }
}

/* Заявка */
.lead { position: relative; overflow: clip; padding-block: var(--section) clamp(56px, 7vw, 96px); background: var(--ink-deep); color: var(--cream); --fg: var(--cream); --fg-muted: var(--muted-on-dark); --line: var(--line-on-dark); --error: var(--error-on-dark); --bg: var(--ink-deep); }
.lead__photo { position: absolute; inset: -5% 0 auto; width: 100%; height: 110%; object-fit: cover; object-position: 32% 40%; transform: translate3d(0, calc(var(--py, 0) * 4%), 0); }
.lead__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 21, 20, .78) 0, rgba(27, 21, 20, .7) 45%, var(--ink-deep) 100%); }
.lead__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lead__intro { display: grid; gap: 20px; align-content: start; }
.lead__intro .section-lead { color: var(--soft-on-dark); }
.lead__other { display: grid; gap: 12px; margin-top: clamp(20px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--edge-on-dark); max-width: 30em; }
.lead__other-title { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; }
.lead__other p { color: var(--soft-on-dark); }
.lead__mail { justify-self: start; }
/* Указатель Telegram в блоке заявки: крупный значок, что в канале, кнопка */
.tg-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; margin-top: 12px; padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--edge-on-dark); border-radius: var(--radius-lg); background: rgba(27, 21, 20, .46);
}
.tg-card__icon { color: var(--cream); }
.tg-card__icon svg { width: 48px; height: 48px; }
.tg-card__body { display: grid; gap: 10px; justify-items: start; }
.tg-card__title { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.tg-card__text a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.tg-card .tg-pill { margin-block: 8px 0; padding: 0 20px 0 24px; }
.tg-card .tg-pill svg { width: 18px; height: 18px; }
@media (max-width: 599px) {
  /* телефон: значок и заголовок в одной строке, текст и кнопка — во всю ширину карточки */
  .tg-card { gap: 14px 16px; align-items: center; }
  .tg-card__body { display: contents; }
  .tg-card__text, .tg-card .tg-pill { grid-column: 1 / -1; }
  .tg-card .tg-pill { justify-self: start; margin-top: 2px; }
}
.lead__panel {
  padding: clamp(20px, 3.4vw, 44px); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  background: rgba(27, 21, 20, .72);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
@media (min-width: 900px) {
  .lead__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .lead__intro { position: sticky; top: calc(var(--header-h) + 48px); }
}
@media (max-width: 899px) {
  /* телефон: левая колонка распадается на части — заголовок и вводный текст, форма, после неё другие способы связи */
  .lead__intro { display: contents; }
  .lead__grid { gap: 20px; }
  .lead__panel { margin-top: 8px; }
  .lead__other { order: 1; margin-top: 20px; }
}

/* Служебные страницы. «Не найдено» целиком собрана из блока первого экрана (.hero); здесь — только политика. */
.page-head { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 104px)); padding-bottom: clamp(40px, 5.5vw, 80px); }
.page-head .section-head { margin-bottom: 0; }
.page-head__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px;
  margin-top: clamp(32px, 4.5vw, 64px); padding-top: 16px; border-top: 1px solid var(--line);
}
.page-head__edition { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.policy { padding-top: clamp(24px, 4vw, 56px); }
.policy__list { border-bottom: 1px solid var(--line); }
.policy__item { display: grid; gap: 16px; padding: 32px 0 36px; scroll-margin-top: var(--header-h); }
.policy__item + .policy__item { border-top: 1px solid var(--line); }
.prose { display: grid; gap: 14px; max-width: 36em; overflow-wrap: anywhere; text-wrap: pretty; }
.prose ul { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; }
.prose li::marker { color: var(--fg-muted); }
.prose a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (min-width: 900px) {
  .policy__item { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(100% / 12); padding: 40px 0 48px; }
}

/* Страница для родителей /roditelyam/. Тексты — content/site-copy.md, «/roditelyam/».
   Новых приёмов нет: волосяные линии, подписи капсом, две ступени заголовков (--fs-say и --fs-h3), сетка в двенадцать колонок.
   Плоскости чередуются: тёмная шапка страницы → кремовый → тёмный → песочный → тёмный → кремовый → тёмный → песочный → подвал.
   У каждого раздела своя раскладка. Текстовым строкам обрезка (clip-path, overflow) не задана, вложенных подсеток нет;
   запрета переноса нет нигде, кроме названия Red-White-Red (.nw). Ссылка «Ответы на вопросы родителей» в карточке главной — .panel__link. */
.panel__link { margin-top: 6px; }
/* две ступени заголовков страницы — каждая записана один раз */
.rights__country, .phase__title, .plan__title { font-size: var(--fs-say); font-weight: 500; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.04em; word-spacing: .1em; text-wrap: balance; }
.eu__title, .rights__title, .ledger__term, .stay__text, .minor__key, .contact__name { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.parents-head__note, .rights__lead, .rights__fact dt, .stay__label, .contact__role, .contact__text, .minor__text, .plan__text, .money__terms, .consult__tg p { color: var(--fg-muted); }
.rights__lead, .rights__fact dd, .phase__list li, .ledger__to, .contact__text, .minor__text, .plan__text, .money__terms { text-wrap: pretty; }

/* Первый экран страницы: заголовок, вводный текст и действие слева, снимок справа (на телефоне — под действием, горизонтальным кадром);
   под ними, за линией, — перечень разделов страницы */
.parents-head__grid { display: grid; gap: 32px; }
.parents-head__main { display: grid; gap: 20px; justify-items: start; align-content: start; }
.parents-head__action { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.parents-head__note { font-size: var(--fs-small); line-height: 1.4; }
/* подпись «Записаться на консультацию» длиннее остальных подписей главного действия: на телефоне поля «пилюли» уже,
   и кнопка стоит одной строкой на экране от 375 px (на более узком и при увеличенном шрифте подпись переносится) */
@media (max-width: 429px) { .parents-cta .cta__pill { padding-inline: 16px; } }
.parents-head__photo { aspect-ratio: 3 / 2; }
.parents-head__photo img { object-position: 50% 26%; }
.parents-index { display: grid; margin-top: clamp(32px, 4.5vw, 64px); padding-top: 16px; border-top: 1px solid var(--line); }
.parents-index__label { display: flex; align-items: center; min-height: 44px; color: var(--fg-muted); }
.parents-index__list a { display: flex; align-items: center; min-height: 48px; font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.parents-index__list li + li { border-top: 1px solid var(--line); }
@media (hover: hover) { .parents-index__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; } }
@media (min-width: 600px) {
  .parents-index__list { display: flex; flex-wrap: wrap; column-gap: 28px; }
  .parents-index__list a { min-height: 44px; }
  .parents-index__list li + li { border-top: 0; }
}
@media (min-width: 900px) {
  .parents-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: end; }
  .parents-head__photo { aspect-ratio: 4 / 5; }
  .parents-head__photo img { object-position: 50% 50%; }
  .parents-index { grid-template-columns: max-content minmax(0, 1fr); column-gap: 40px; align-items: start; }
}

/* Что даёт учёба в Европе: общая система (название слева, текст справа) и четыре страны строками.
   Страна — ступенью «крупное высказывание», рядом две пары «подпись капсом — текст»; на телефоне пары стоят под названием */
.europe .section-lead a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
.eu, .rights { border-top: 1px solid var(--line); }
.eu { display: grid; gap: 16px; padding: 24px 0 clamp(40px, 5vw, 72px); }
.rights { padding-top: 24px; }
.rights__head { display: grid; gap: 12px; padding-bottom: clamp(20px, 2.4vw, 28px); }
.rights__lead { max-width: 34em; }
.rights__row { display: grid; gap: 14px; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.rights__country { margin: 0; }
.rights__facts { display: grid; gap: 16px; margin: 0; }
.rights__fact { display: grid; gap: 6px; align-content: start; }
.rights__fact dd { margin: 0; }
.rights__note { max-width: 46em; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); text-wrap: pretty; }
@media (min-width: 600px) {
  .rights__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
}
@media (min-width: 900px) {
  .eu, .rights__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .eu { padding-top: 32px; }
  .rights { padding-top: 32px; }
  .rights__lead { padding-top: .3em; }
  .rights__row { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: calc(100% / 12); align-items: start; padding: 28px 0 32px; }
  /* подписи капсом стоят на середине первой строки названия страны */
  .rights__facts { padding-top: calc((var(--fs-say) * 1.1 - var(--fs-caps) * 1.3) / 2); }
}

/* Безопасность: два этапа. С 900 px — две колонки на одной линии, точка этапа стоит на ней (как у шагов «После приезда» на главной) */
.phases { display: grid; gap: 36px; }
.phase { display: grid; gap: 14px; align-content: start; }
.phase__list { border-bottom: 1px solid var(--line); }
.phase__list li { padding: 14px 0 16px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .phases { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); border-top: 1px solid var(--edge-on-dark); }
  .phase { position: relative; gap: 20px; padding-top: 30px; }
  .phase::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 5px var(--bg); }
}

/* Деньги: статья слева, получатель платежа справа; сумм нет */
.money, .consult { --bg: var(--sand); }
.ledger { margin: 0; border-bottom: 1px solid var(--line); }
.ledger__row { display: grid; gap: 6px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.ledger__to { margin: 0; max-width: 34em; }
.money__foot { display: grid; gap: 4px; justify-items: start; padding-top: 24px; }
.money__terms { max-width: 34em; }
/* Правовая информация /legal/: та же таблица dl.ledger — подпись слева, сведение справа; под ней строка со ссылками на документы */
.legal { padding-top: clamp(24px, 4vw, 56px); }
.legal__foot { display: grid; padding-top: 24px; }
.legal__docs { max-width: 34em; text-wrap: pretty; }
.ledger__to a, .legal__docs a { text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (min-width: 600px) {
  .ledger__row, .money__foot, .legal__foot { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); }
  .ledger__row { align-items: baseline; padding: 22px 0 24px; }
  .money__foot > *, .legal__foot > * { grid-column: 2; }
}

/* Жильё и связь: подпись капсом и крупная строка; у связи — портрет руководителя проекта (плашка 4:5, как в команде на главной) */
.stay__cols { display: grid; gap: 36px; }
.stay__col { display: grid; gap: 12px; justify-items: start; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.stay__text { max-width: 22em; line-height: 1.25; }
.contact { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact__plate { aspect-ratio: 4 / 5; }
.contact__plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.contact__body { display: grid; gap: 8px; }
.contact__text { max-width: 26em; }
@media (min-width: 900px) {
  .stay__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); }
}

/* Если студенту нет 18: заголовок слева, главная строка и пояснение справа */
.minor__grid { display: grid; gap: 20px; }
.minor__body { display: grid; gap: 14px; }
.minor__key { max-width: 24em; }
.minor__text { max-width: 34em; }
@media (min-width: 900px) {
  .minor__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
  .minor__body { padding-top: .5em; }
}

/* Запасной план: утверждение ступенью высказывания (на шаг мельче, как страхи на главной), пояснение рядом */
.plan { border-bottom: 1px solid var(--line); }
.plan__row { display: grid; gap: 10px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.plan__title { font-size: min(var(--fs-say), 2.25rem); }
.plan__text { max-width: 34em; }
.plan__more { margin-top: 16px; }
@media (max-width: 599px) {
  .plan__title { font-size: clamp(1.3125rem, 5.9vw, 1.5rem); }
}
@media (min-width: 900px) {
  .plan__row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(100% / 12); align-items: start; padding: 28px 0 32px; }
  .plan__text { padding-top: calc((min(var(--fs-say), 2.25rem) * 1.1 - 1.5em) / 2); }
}

/* Завершение: действие слева, строка о канале справа у нижнего края */
.consult__grid { display: grid; gap: 40px; }
.consult__main { display: grid; gap: 20px; justify-items: start; }
.consult__tg { display: grid; gap: 4px; justify-items: start; align-content: start; max-width: 30em; padding-top: 18px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .consult__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(100% / 12); align-items: end; }
}

/* Новости: карточка и сетки карточек — для ленты на главной, списка /news/ и «Других новостей».
   Всё остальное в разделе новостей (страница новости, галерея, просмотр фотографий, видео) — в news.css, на главную он не грузится.
   · .news-list__grid — карточки в две-три колонки;
   · .news-list__grid--lead (список /news/) — первая новость крупно во всю ширину: обложка слева, текст справа;
   · .news-list__grid--feed (главная) — первая новость широкая, две следующие узкие, обложки одной высоты; на телефоне — лента с прилипанием;
   · у карточки без обложки на её месте тёмная плоскость со словом (.news-card__cover--empty).
   Менять вместе: пороги 600, 700, 900 и 1100 px, доли колонок и ширину карточки ленты на телефоне (min(78vw, 360px) — в общем
   правиле лент выше) повторяет атрибут sizes обложек — COVER_SIZES в server/news-render.js. */
.news-list__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px) clamp(16px, 2.6vw, 32px); margin: 0; padding: 0; }
.news-list__item { min-width: 0; }
.news-card { position: relative; display: grid; gap: 18px; align-content: start; }
.news-card__cover { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-photo); }
.news-card__cover--empty { display: grid; place-items: end center; background: var(--ink-deep); container-type: inline-size; }
.news-card__cover--empty::before { content: attr(data-word); font-size: 31cqw; font-weight: 600; font-stretch: var(--wide); line-height: .72; letter-spacing: -.04em; color: #261d1c; user-select: none; }
.news-card__body { display: grid; gap: 10px; align-content: start; justify-items: start; }
.news-card__meta { display: flex; flex-wrap: wrap; column-gap: 0; font-size: var(--fs-caps); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; color: var(--fg-muted); }
/* дата и страна — в одну строку через точку; университет — своей строкой: его название бывает длинным */
.news-card__country::before { content: "•"; margin-inline: .7em; }
.news-card__university { flex-basis: 100%; }
.news-card__title { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 14 5 5; }
.news-card__title a { text-decoration: none; }
/* вся карточка — одна ссылка: её область растянута от заголовка на обложку и текст */
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--fg-muted); text-wrap: pretty; }
.news-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; padding: 0; }
.news-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--fg) 34%, transparent); border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
@media (hover: hover) {
  .news-card:hover .news-card__cover img { transform: scale(1.035); }
  .news-card:hover .news-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
}
.news-feed__all { margin-top: clamp(28px, 4vw, 56px); }
@media (min-width: 700px) {
  .news-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .news-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .news-list__grid--lead > :first-child { grid-column: 1 / -1; }
  .news-list__grid--lead > :first-child .news-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(100% / 12); align-items: end; }
  /* текст стоит у нижнего края обложки; если он выше неё — обложка остаётся у верхнего края */
  :is(.news-list__grid--lead > :first-child, .news-list__grid--feed > :only-child) .news-card__cover { align-self: start; }
  .news-list__grid--lead > :first-child .news-card__cover { aspect-ratio: 16 / 10; }
  .news-list__grid--lead > :first-child .news-card__body { gap: 14px; padding-bottom: 4px; }
  .news-list__grid--lead > :first-child .news-card__title { font-size: clamp(1.625rem, 1rem + 1.4vw, 2.25rem); font-stretch: var(--wide); line-height: 1.06; letter-spacing: -.045em; word-spacing: .12em; }
  .news-list__grid--lead > :first-child .news-card__lead { -webkit-line-clamp: 5; line-clamp: 5; }

  /* главная: широкая карточка и две узкие; обложки одной высоты, как панели стран */
  .news-list__grid--feed { --cover-h: clamp(300px, 29vw, 420px); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .news-list__grid--feed:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .news-list__grid--feed .news-card__cover { aspect-ratio: auto; height: var(--cover-h); }
  .news-list__grid--feed > :first-child .news-card__title { font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem); }
  .news-list__grid--feed > :not(:first-child) .news-card__title { font-size: clamp(1.1875rem, 1rem + .45vw, 1.4375rem); letter-spacing: -.025em; }
  /* единственная новость: обложка слева, текст справа — как первая в списке */
  .news-list__grid--feed:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .news-list__grid--feed > :only-child .news-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(100% / 12); align-items: end; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* узкая карточка: дата и страна в одну строку не помещаются — страна встаёт своей строкой, без точки */
  .news-list__grid--feed > :not(:first-child) .news-card__country { flex-basis: 100%; }
  .news-list__grid--feed > :not(:first-child) .news-card__country::before { content: none; }
}
/* главная на телефоне: лента с видимым краем следующей карточки — общее правило лент с прилипанием выше, у «Кому помогаем» и «Стран» */

/* ───────── 6. Форма ─────────
   Состояния включает скрипт отправки (следующий таск), вёрстка реагирует только на атрибуты:
   · форма:   <form id="lead-form" data-state="idle | submitting | success | error">
   · поле:    у обёртки .field[data-field="<имя>"] класс .is-invalid, у самого input — aria-invalid="true",
              текст ошибки — в .field__error[data-error] внутри обёртки (пустой элемент не виден);
              общая строка над формой — снять hidden у [data-form-alert]
   · готовность: кнопка [data-submit] в разметке выключена (disabled) и скрыта; модуль формы ставит на форму data-ready и включает её.
              Пока data-ready нет (нет скриптов, модуль не загрузился), под полями видна строка .form-unavailable с почтой и каналом
   · отправка: data-state="submitting" (+ disabled у кнопки [data-submit]) — подпись «Отправляем…»
   · сбой:     data-state="error" — виден блок [data-form-fail]; заголовок и текст — в [data-fail-title], [data-fail-text]; подпись кнопки «Повторить»
   · успех:    data-state="success" — форма скрыта, виден [data-form-success]; номер заявки — в [data-lead-id] */
.lead-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.field { display: grid; gap: 8px; }
.field__label { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.field__optional { margin-left: 6px; font-weight: 400; color: var(--fg-muted); }
legend.field__label { margin-bottom: 10px; }
.field__input {
  width: 100%; height: 56px; padding: 0 18px; border: 1px solid var(--edge-on-dark); border-radius: var(--radius);
  background: rgba(255, 248, 237, .06); color: var(--cream); font-size: 1.0625rem; caret-color: var(--cream);
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.field__input--area { height: auto; min-height: 112px; padding: 14px 18px; line-height: 1.45; resize: vertical; }
.field__input:hover { border-color: var(--edge-on-dark-strong); }
.field__input:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; border-color: var(--cream); border-radius: var(--radius); background: rgba(255, 248, 237, .1); }
.field__hint { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
/* строка, которую добавил тест: уйдёт в заявке перед комментарием, посетитель её видит, но не правит */
/* заметок может быть две (тест и ссылка с data-note): каждая стоит своей строкой */
.field__note { white-space: pre-line; padding: 12px 18px; border: 1px dashed var(--edge-on-dark); border-radius: var(--radius); font-size: var(--fs-small); line-height: 1.45; color: var(--soft-on-dark); }
.field__error { font-size: var(--fs-small); line-height: 1.4; font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }
.field.is-invalid .field__input, .field__input[aria-invalid="true"] { border-color: var(--error); }
.field.is-invalid .field__hint { display: none; }
.field.is-invalid .consent__box { border-color: var(--error); }
.form-alert { padding: 14px 18px; border: 1px solid var(--error); border-radius: var(--radius); color: var(--error); font-weight: 600; }
.form-alert[hidden] { display: none; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill input:focus-visible + .chip { outline: 2px solid var(--cream); outline-offset: 3px; }
/* «пилюли» с длинными подписями (срок, «как узнали»): подпись переносится, а не растягивает форму вбок на узком экране и при крупном шрифте */
.pills--wrap .pill { max-width: 100%; }
.pills--wrap .chip { height: auto; min-height: 44px; padding-block: 11px; line-height: 1.25; white-space: normal; }

/* Выбор страны группами: подпись региона и его «пилюли». Группа, не помещающаяся в строку, занимает её целиком, короткие стоят рядом.
   На телефоне — ровная сетка в --cols колонок: группа занимает столько колонок, сколько в ней стран (но не больше --cols),
   короткие группы делят один ряд, «Пока не знаю» стоит отдельно. Число стран в группе стили узнают из разметки (:has). */
.cpick { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 28px; }
.cpick__group { display: grid; gap: 8px; }
.cpick__label { color: var(--fg-muted); }
@media (max-width: 599px) {
  .cpick { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px 8px; }
  .cpick__group, .cpick__solo { grid-column: 1 / -1; }
  .cpick__group .pills { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  /* одна или две страны: группа не занимает весь ряд */
  .cpick__group:not(:has(.pill:nth-child(3))) { grid-column: span 2; }
  .cpick__group:not(:has(.pill:nth-child(3))) .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpick__group:not(:has(.pill:nth-child(2))) { grid-column: span 1; }
  .cpick__group:not(:has(.pill:nth-child(2))) .pills { grid-template-columns: minmax(0, 1fr); }
  .cpick__group .pill { display: flex; min-width: 0; }
  .cpick__group .chip { flex: 1; justify-content: center; min-width: 0; padding: 0 4px; font-size: .9375rem; }
}
@media (max-width: 429px) {
  /* самая длинная подпись («Португалия») помещается в треть ряда с запасом */
  .cpick__group .chip { padding: 0 2px; font-size: .875rem; }
}
@media (min-width: 360px) and (max-width: 429px) {
  /* первый столбец шире остальных — сразу во всех группах, «пилюли» по-прежнему стоят ровными столбцами:
     у «Португалии» до рамки остаётся не меньше 10 px (при равных столбцах — 5 px на экране 360 px) */
  .cpick, .cpick__group .pills { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr) minmax(0, 1fr); }
  .cpick__group:has(.pill:nth-child(2)):not(:has(.pill:nth-child(3))) .pills { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); }
}
@media (max-width: 379px) {
  /* 360–379 px: колонки шире за счёт полей панели и просвета между «пилюлями» */
  .lead__panel { padding: 16px; }
  /* кнопка отправки помещается в панель на экране от 320 px */
  .submit .cta__pill { padding-inline: clamp(12px, 5vw - 4px, 20px); font-size: 1rem; }
  .cpick, .cpick__group .pills { column-gap: 6px; }
  .cpick__group .chip { padding: 0 1px; letter-spacing: -.01em; }
}
@media (max-width: 359px) {
  /* уже 360 px — две колонки и прежний кегль */
  .cpick { --cols: 2; }
  .cpick__group .chip { padding: 0 4px; font-size: .9375rem; }
}

.consent { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 44px; cursor: pointer; }
.consent input { position: absolute; left: -8px; top: -8px; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.consent__box { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--edge-on-dark-strong); border-radius: 8px; color: var(--ink); transition: background-color .18s ease, border-color .18s ease; }
.consent__box svg { width: 18px; height: 18px; opacity: 0; transform: scale(.8); transition: opacity .15s ease, transform .2s var(--ease); }
.consent input:checked + .consent__box { background: var(--cream); border-color: var(--cream); }
.consent input:checked + .consent__box svg { opacity: 1; transform: none; }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--cream); outline-offset: 3px; }
.consent__text { padding-top: 3px; font-size: var(--fs-small); line-height: 1.45; color: var(--soft-on-dark); }
.consent__text a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* ловушка: вне экрана, вне табуляции, скрыта от программ чтения экрана */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.submit { justify-self: start; }
.submit:disabled { cursor: progress; }
.submit__label { display: none; }
.submit__label--idle { display: inline-flex; }
.lead-form:not([data-ready]) .submit { display: none; }
.form-unavailable { display: grid; gap: 8px; color: var(--soft-on-dark); }
.form-unavailable__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.form-unavailable a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.lead-form[data-ready] .form-unavailable { display: none; }
/* при включённых скриптах строка ждёт полторы секунды: обычно модуль успевает раньше, и она не мелькает */
html.js .lead-form:not([data-ready]) .form-unavailable { animation: form-unavailable-in 0s 1.5s backwards; }
@keyframes form-unavailable-in { from { visibility: hidden; } }
.form-fail, .form-success { display: none; }
.form-fail { gap: 8px; padding: 20px; border: 1px solid var(--error); border-radius: var(--radius); }
.form-fail__title { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--error); }
.form-fail__links { display: grid; justify-items: start; }
.form-success { gap: 16px; justify-items: start; }
.form-success__title { font-size: var(--fs-h2); font-weight: 500; font-stretch: var(--wide); line-height: .98; letter-spacing: -.045em; word-spacing: .12em; }
.form-success__id { padding: 14px 20px; border: 1px solid var(--edge-on-dark); border-radius: var(--radius); }
.form-success__id strong { font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-success p { max-width: 32em; color: var(--soft-on-dark); }
.form-success__id { color: var(--cream) !important; }
.form-success:focus-visible { outline: none; }

.lead-form[data-state="submitting"] .submit__label--idle,
.lead-form[data-state="error"] .submit__label--idle { display: none; }
.lead-form[data-state="submitting"] .submit__label--submitting,
.lead-form[data-state="error"] .submit__label--error { display: inline-flex; }
.lead-form[data-state="submitting"] .field, .lead-form[data-state="submitting"] .form-fail { opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.lead-form[data-state="error"] .form-fail { display: grid; }
.lead-form[data-state="success"] { display: none; }
.lead-form[data-state="success"] + .form-success { display: grid; }

/* ───────── 7. Подвал ───────── */
.site-footer { position: relative; background: var(--ink-deep); color: var(--cream); --fg: var(--cream); --fg-muted: var(--muted-on-dark); --line: var(--line-on-dark); overflow: clip; }
.site-footer__top { position: relative; z-index: 2; display: grid; gap: 40px; padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.site-footer__brand { display: grid; gap: 20px; align-content: start; justify-items: start; }
.brand--footer img { width: 56px; height: 56px; }
.site-footer__about { max-width: 22em; font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.site-footer__label { margin-bottom: 8px; color: var(--fg-muted); }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: opacity .2s ease; }
.site-footer__col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
/* Адрес — сведение, а не действие: приглушён и стоит в ритме ссылок высотой 44 px; длинная строка переносится */
.site-footer__address { max-width: 20em; padding-block: 8px; color: var(--fg-muted); text-wrap: pretty; }
.site-footer__stage { position: relative; min-height: clamp(260px, 44vw, 660px); margin-top: clamp(24px, 4vw, 64px); }
.site-footer__word {
  position: absolute; left: 50%; bottom: -.2em; transform: translateX(-50%);
  font-size: clamp(80px, 34vw, 1000px); font-weight: 600; font-stretch: var(--wide); line-height: .9; letter-spacing: -.04em; white-space: nowrap;
  color: #261d1c; pointer-events: none; user-select: none;
}
/* Цвета шара (--planet-*, --cream) читает скрипт планеты из токенов. */
/* Планета: проезжает поверх слова вместе с прокруткой; на canvas вращается, без скриптов — неподвижный кадр */
.planet {
  position: absolute; left: 50%; top: -3.5vw; width: clamp(320px, 58vw, 860px); aspect-ratio: 1040 / 878;
  margin-left: clamp(-430px, -29vw, -160px);
  transform: translate3d(0, calc((1 - var(--fp, 1)) * 22%), 0);
}
/* Выбор страны рядом с планетой: в разметке — список ссылок, кнопки и сводку добавляет скрипт */
.chooser { position: relative; z-index: 3; display: grid; gap: 16px; padding-top: clamp(24px, 4vw, 56px); }
.chooser__label { color: var(--fg-muted); }
.chooser__regions { display: grid; gap: 12px; }
.chooser__region-title { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.chooser__list { display: grid; gap: 0 32px; margin: 0; padding: 0; justify-items: start; }
.chooser.is-interactive .chooser__regions { display: none; }
/* кнопки стран: по набору на регион, все наборы стоят в одной ячейке — высота блока не меняется при смене вкладки */
.chooser__sets { display: grid; grid-template-columns: minmax(0, 1fr); }
.chooser__buttons { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; min-width: 0; }
.chooser__buttons:not(.is-current) { visibility: hidden; pointer-events: none; }
.chooser__panel { display: none; }
.chooser.is-interactive .chooser__panel { display: grid; gap: 6px; justify-items: start; align-content: start; min-height: var(--chooser-min, 14em); margin-top: 8px; }
.chooser__name { font-size: var(--fs-h3); font-weight: 500; font-stretch: var(--semi); line-height: 1.15; letter-spacing: -.03em; }
.chooser__text { color: var(--soft-on-dark); text-wrap: pretty; }
@media (min-width: 900px) {
  /* выбор стоит в потоке: длинная сводка раздвигает сцену, а не наезжает на нижнюю строку подвала (она заходит на сцену на 64 px) */
  .chooser { padding-bottom: calc(var(--bar-lift) + 32px); pointer-events: none; }
  .chooser > * { max-width: min(42%, 524px); pointer-events: auto; }
  .chooser__list { grid-template-columns: repeat(2, max-content); }
  .planet { left: 69%; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* узкая колонка: место под самую длинную сводку держится заранее, сцена не меняет высоту при выборе страны */
  .chooser { --chooser-min: 18em; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .chooser { --chooser-min: 22em; }
}
.planet__still, .planet__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.planet__canvas { opacity: 0; }
.planet.is-live .planet__canvas { opacity: 1; }
.planet.is-live .planet__still { opacity: 0; }
.tg-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px 0 18px; margin-block: 4px 12px;
  border: 1px solid var(--edge-on-dark-strong); border-radius: 999px; color: var(--cream);
  font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.tg-pill svg { width: 24px; height: 24px; flex: none; transition: transform .2s ease; }
.tg-note { margin: -4px 0 12px; font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); }
.tg-pill:active { transform: scale(.99); }
@media (hover: hover) {
  .tg-pill:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
  .tg-pill:hover svg { transform: translate(2px, -2px); }
}
.site-footer__bar {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  margin-top: calc(-1 * var(--bar-lift)); padding-bottom: 24px;
  font-size: var(--fs-caps); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 248, 237, .78);
}
/* Подвал служебных страниц: без планеты и слова, полоса с подписями стоит под колонками */
.site-footer--plain .site-footer__bar { margin-top: clamp(40px, 5vw, 72px); padding-block: 20px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* планшет: разделы и контакты рядом, а не одной длинной колонкой */
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  /* выбор страны и планета стоят до строки «©»: она закрывает страницу */
  .site-footer__bar { flex-direction: column; margin-top: 0; padding-block: 20px calc(24px + env(safe-area-inset-bottom)); }
  .site-footer__stage { margin-top: 32px; min-height: 0; padding-bottom: 16px; }
  .planet { position: relative; left: 50%; top: 0; width: 124vw; margin-left: -62vw; margin-top: -4vw; }
  .chooser__buttons { flex-wrap: nowrap; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .chooser__buttons::-webkit-scrollbar { display: none; }
  .chooser__buttons .chip { flex: none; }
}

/* Закреплённый призыв на телефоне */
.sticky-cta {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: none;
  width: max-content; /* иначе ширина считается от половины экрана (left: 50%) и подпись переносится раньше времени */
  background: rgba(27, 21, 20, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateX(-50%);
  transition: transform .35s var(--ease), opacity .25s ease, visibility 0s linear 0s;
}
/* .quiz-busy на html ставит quiz.js, пока вопросы или результат теста на экране: иначе кнопка перекрывает «Назад» и «Дальше» */
.sticky-cta.is-hidden, .quiz-busy .sticky-cta { transform: translate(-50%, 150%); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .25s ease, visibility 0s linear .3s; }
@media (max-width: 899px) { .js .sticky-cta { display: inline-flex; } }
.menu-open .sticky-cta { display: none; }

/* Плашка согласия на счётчики посещаемости. Собирает её analytics.js, только когда счётчик включён настройками хостинга
   и посетитель ещё не выбирал; без скриптов её нет (и счётчиков тоже). Плашка всегда тёмная, закреплена внизу экрана:
   на телефоне — во всю ширину, с 700 px — карточкой слева. Состояния, которые ставит скрипт:
   · html.stats-consent-open — плашка на экране; --stats-consent-h на html — её высота: на столько поднимается закреплённая кнопка
     «Консультация» и удлиняется низ страницы, чтобы плашка ничего не закрывала насовсем;
   · кнопка «Настройки cookie» (.site-footer__consent) — в колонке «Контакты» подвала, после ссылки на политику.
   Под меню шапки (z-index 50), над закреплённой кнопкой (40). */
.stats-consent {
  position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; gap: 10px; max-height: calc(100svh - 24px); overflow-y: auto; padding: 20px;
  border: 1px solid var(--edge-on-dark); border-radius: var(--radius);
  background: var(--ink-deep); color: var(--cream); font-size: var(--fs-small); line-height: 1.45;
}
.stats-consent__title { font-size: 1.0625rem; font-weight: 600; font-stretch: var(--semi); line-height: 1.2; letter-spacing: -.01em; }
.stats-consent__text { max-width: 34em; color: var(--soft-on-dark); text-wrap: pretty; }
.stats-consent__text a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.stats-consent__now { color: var(--muted-on-dark); text-wrap: pretty; }
/* Две кнопки равного веса: одинаковые по виду и ширине; не помещаются в строку (узкий экран, крупный шрифт) — встают друг под другом */
.stats-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.stats-consent__button {
  flex: 1 1 8rem; min-width: 0; min-height: 48px; padding: 8px 20px;
  border: 1px solid var(--edge-on-dark-strong); border-radius: 999px; background: none;
  color: var(--cream); font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.stats-consent__button:active { transform: scale(.98); }
@media (hover: hover) { .stats-consent__button:hover { border-color: var(--cream); background: rgba(255, 248, 237, .08); } }
@media (min-width: 700px) { .stats-consent { right: auto; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); width: min(30rem, 100% - 48px); padding: 24px; } }
.stats-consent-open body { padding-bottom: calc(var(--stats-consent-h, 0px) + 24px + env(safe-area-inset-bottom)); }
.stats-consent-open .sticky-cta { bottom: calc(var(--stats-consent-h, 0px) + 24px + env(safe-area-inset-bottom)); }
/* «Настройки cookie» — действие, а не переход: кнопка в ритме ссылок подвала */
.site-footer__consent {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; font-size: inherit; text-align: left; cursor: pointer;
}
.site-footer__consent:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

/* ───────── 8. Движение ─────────
   Скрытые стартовые состояния действуют только под классом .js (его ставит скрипт) и только без prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* «Шторка»: сцена и заголовок первого экрана уходят под следующий раздел */
  .hero__scene { transform: translate3d(0, calc(var(--hp, 0) * -40px), 0) scale(calc(1 + var(--hp, 0) * .04)); }
  .hero__content { transform: translate3d(0, calc(var(--hp, 0) * -66px), 0); opacity: calc(1 - var(--hp, 0) / .6); }

  /* первый экран появляется сам, без скрипта */
  .hero__title .w { animation: word-in .94s var(--ease) both; animation-delay: calc(var(--d, 0s) + var(--wi, 0) * 50ms); }
  .hero__lead, .hero__actions, .hero__aside { animation: rise-in .6s var(--ease) both; animation-delay: var(--d, .15s); }
  @keyframes word-in { from { opacity: 0; transform: translateY(50%); } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }
  .chooser__panel.is-swapping > * { animation: rise-in .5s var(--ease) backwards; }
  .stats-consent { animation: rise-in .5s var(--ease) both; }
  .chooser__panel.is-swapping > :nth-child(2) { animation-delay: .06s; }
  .chooser__panel.is-swapping > :nth-child(3) { animation-delay: .12s; }

  /* 1. Пословное появление заголовков */
  .js [data-words] { visibility: hidden; }
  .js [data-words].is-split { visibility: visible; }
  .js [data-words] .w { display: inline-block; opacity: 0; transform: translateY(50%); transition: opacity .94s var(--ease), transform .94s var(--ease); transition-delay: calc(var(--d, .1s) + var(--wi, 0) * 50ms); }
  .js [data-words].is-in .w { opacity: 1; transform: none; }

  /* подпись и кнопки */
  .js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, .15s); }
  .js [data-rise].is-in { opacity: 1; transform: none; }
  .js [data-reveal="rise"] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js [data-reveal="rise"].is-in { opacity: 1; transform: none; }

  /* 3. Раскрытие фотографий: рамка проявляется, снимок внутри неё поднимается и доходит до масштаба */
  .js [data-stagger="photo"] > *, .js [data-reveal="photo"] { opacity: 0; }
  .js [data-stagger="photo"].is-in > *, .js [data-reveal="photo"].is-in {
    opacity: 1; animation: reveal-fade .6s var(--ease) calc(var(--si, 0) * 100ms) backwards;
  }
  .js [data-stagger="photo"].is-in > * img, .js [data-reveal="photo"].is-in img {
    animation: reveal-photo .9s var(--ease) calc(var(--si, 0) * 100ms) backwards;
  }
  @keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes reveal-photo { from { transform: translateY(24px) scale(1.06); } }
  /* панелей стран в группе до девяти: шаг короче, чтобы группа раскрылась за то же время */
  .js .strip.is-in > *, .js .strip.is-in > * img { animation-delay: calc(var(--si, 0) * 55ms); }

  /* 4. Вкладки регионов: прежняя группа гаснет, панели новой раскрываются по очереди тем же приёмом, что при появлении;
     высота блока (на телефоне группы разной высоты) переходит к новой */
  .is-tabbed .region { transition: opacity .3s ease; }
  .is-tabbed .region:not(.is-current) { transition: opacity .2s ease, visibility 0s linear .2s; }
  .regions.is-resizing { transition: height .5s var(--ease); }
  .js .strip.is-entering > .country { animation: tab-fade .6s var(--ease) calc(var(--i, 0) * 40ms) backwards; }
  .js .strip.is-entering > .country img { animation: tab-photo .9s var(--ease) calc(var(--i, 0) * 40ms) backwards; }
  @keyframes tab-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tab-photo { from { transform: translateY(24px) scale(1.06); } }
  .chooser__buttons.is-entering .chip { animation: rise-in .45s var(--ease) calc(var(--ci, 0) * 30ms) backwards; }

  /* портреты «разворота» выходят из размытия */
  .js [data-stagger="blur"] > * { opacity: 0; filter: blur(8px); transition: opacity .6s ease calc(var(--si, 0) * 120ms), filter .6s ease calc(var(--si, 0) * 120ms); }
  .js [data-stagger="blur"].is-in > * { opacity: 1; filter: none; }

  /* 2. Каскад строк */
  .js [data-stagger="row"] > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-soft) calc(var(--si, 0) * 80ms), transform .5s var(--ease-soft) calc(var(--si, 0) * 80ms); }
  .js [data-stagger="row"].is-in > * { opacity: 1; transform: none; }

  /* 9. Высказывание проявляется по словам вместе с прокруткой */
  .js [data-scrub] .w { opacity: clamp(.3, calc(var(--sp, 1) * (var(--n) + 2) - var(--wi)), 1); }

  /* 8. Маршрут: шаги загораются, когда самолёт до них долетел */
  .js .route.is-live .step__dot { transform: scale(.72); }
  .js .route.is-live .step.is-on .step__dot { transform: none; }

  /* 12. Вопросы и ответы */
  .js .qa__a { transition: grid-template-rows .35s var(--ease); }
  .js .qa__a-inner { transition: opacity .25s ease .08s; }
  .js .qa.is-closing .qa__a, .js .qa.is-opening .qa__a { grid-template-rows: 0fr; }
  .js .qa.is-closing .qa__a-inner, .js .qa.is-opening .qa__a-inner { opacity: 0; transition-delay: 0s; }

  /* меню на телефоне: пункты появляются каскадом */
  @media (max-width: 1139px) {
    .js .site-nav__list li, .js .site-nav__tg, .js .site-nav__extra { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft); }
    .js.menu-open .site-nav__list li, .js.menu-open .site-nav__tg, .js.menu-open .site-nav__extra { opacity: 1; transform: none; transition-delay: calc(.08s + var(--si, 0) * 50ms); }
  }

  /* отправка формы: самолёт уходит и возвращается, пока идёт запрос */
  .lead-form[data-state="submitting"] .submit .cta__plane svg { animation: plane-send 1.1s var(--ease-soft) infinite; }
  @keyframes plane-send {
    0% { transform: rotate(-45deg) translateX(0); opacity: 1; }
    45% { transform: rotate(-45deg) translateX(34px); opacity: 0; }
    55% { transform: rotate(-45deg) translateX(-34px); opacity: 0; }
    100% { transform: rotate(-45deg) translateX(0); opacity: 1; }
  }

  /* Тест: линия прогресса растёт, вопрос и ответы проявляются по очереди с небольшим сдвигом, высота блока меняется плавно */
  .quiz__progress span { transition: transform .6s var(--ease); }
  .quiz__views.is-resizing { transition: grid-template-rows .5s var(--ease); }
  .quiz.is-live :is(.quiz__view, .quiz__step):not(.is-current) { transition: opacity .18s ease, visibility 0s linear .18s; }
  .quiz.is-live .quiz__view.is-current { animation: quiz-in .55s var(--ease) .1s backwards; }
  .quiz.is-live .quiz__step.is-current .quiz__legend { animation: quiz-in .55s var(--ease) .08s backwards; }
  .quiz.is-live .quiz__step.is-current li { animation: quiz-in .5s var(--ease) calc(.14s + var(--oi, 0) * 50ms) backwards; }
  .quiz__options li:nth-child(2) { --oi: 1; }
  .quiz__options li:nth-child(3) { --oi: 2; }
  .quiz__options li:nth-child(4) { --oi: 3; }
  .quiz.is-live .quiz__result.is-current .quiz__reasons { animation: quiz-in .55s var(--ease) .2s backwards; }
  .quiz.is-live .quiz__result.is-current .quiz__again { animation: quiz-in .55s var(--ease) .28s backwards; }
  .quiz__run[data-dir="back"] { --quiz-shift: -12px; }
  @keyframes quiz-in { from { opacity: 0; transform: translateY(var(--quiz-shift, 12px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .country, .country__photo, .country::before, .country::after, .country__body, .country__side, .row::before, .row__num, .tabs__tab::after { transition: none !important; }
  .site-header, .sticky-cta, .services__frame img, .cta, .cta__plane svg { transition-duration: .01s; }
}