/* CES FOR YOU - главный лендинг организации: сеть центров, филиалы, карта.
   Файл только добавляет. Ни один селектор ces-tokens.css и
   ces-landing.css здесь не переопределяется: все имена новые,
   а там, где форма совпадает, берётся готовый класс системы
   (.hero, .card, .cards-3, .panel-dark, .band-blue, .faq, .rail).
   Подключать после ces-landing.css. */

/* ── Ритм этих двух страниц ──────────────────────────────────
   Лестница --sp-* не меняется, меняется ступень, на которой
   стоит шаг между секциями: у продающего лендинга воздух
   работает на одно предложение, у сайта сети - против плотности.
   132 -> 72, ступень из той же лестницы. Правило привязано к телу
   этих страниц и не трогает остальные лендинги проекта. */

body[data-od-id^="landing-ces"] { --gap-section: var(--sp-11); }

/* ── Якоря шапки ─────────────────────────────────────────────
   Шапка липкая и высотой 76 px. Без запаса прокрутки браузер
   ставит верх секции на нулевую отметку, то есть прямо под
   шапку: надзаголовок и часть заголовка оказываются закрыты, и
   переход читается как «ничего не произошло». Запас поднимает
   цель на высоту шапки плюс шаг. */
body[data-od-id^="landing-ces"] main[id],
body[data-od-id^="landing-ces"] .section[id] {
  scroll-margin-top: calc(var(--h-head) + var(--sp-6));
}

/* Мгновенный скачок неотличим от отсутствия отклика, особенно
   когда соседние секции похожи по светлоте. Плавная прокрутка
   показывает, что переход состоялся. Снимается системной
   настройкой «меньше движения». */
html:has(body[data-od-id^="landing-ces"]) { scroll-behavior: smooth; }

/* Заголовок сети длиннее, чем у продающих лендингов: в казахской
   версии слово «Мүмкіндіктерге» при кегле 76 занимает 593 px и
   вылезает из колонки 554 px под фотографию. Колонка шире на
   три процента, кегль ниже - слово встаёт с запасом 54 px.
   Перенос по слогам оставлен страховкой: если строка всё же не
   поместится, она разорвётся, а не уедет на соседний блок. */
/* Панель героя должна укладываться в высоту экрана ноутбука.
   Высоту тянет не кадр, а текстовая колонка: при 58 % русский
   заголовок вставал в четыре строки. Колонка шире - заголовок
   встаёт в три, и панель теряет 70 px разом. Кадр при этом
   сужается с 471 до 401 px, то есть уменьшается вместе с
   панелью, а не отдельно от неё. */
body[data-od-id^="landing-ces"] .hero {
  grid-template-columns: 65% 35%;
  margin-top: var(--sp-6);
}

body[data-od-id^="landing-ces"] .t-hero {
  font-size: 68px;
  overflow-wrap: break-word;
}

/* ── Шапка: к языку и телефону добавлена навигация ────────────
   Пункты живут в шапке только на большом экране: ниже 1100 они
   начинают спорить с телефоном, а телефон здесь - главное
   действие всей страницы. */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  margin-left: var(--sp-9);
}

.site-nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
  transition: color var(--fast) var(--ease);
}

.site-nav a:hover { color: var(--ink); }

/* Телефон в шапке: не кнопка, но и не рядовая ссылка */
.head-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h-btn-sm);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-card);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
}

.head-phone svg { color: var(--blue); flex: none; }

.head-phone:hover { background: #fbfbfd; }

/* Выход на лендинги приложения: тихая ссылка, не второе главное */
.head-app {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}

.head-app:hover { text-decoration: underline; }

/* ── Герой: фотография вместо устройства ─────────────────────
   Каркас .hero из системы, меняется только содержимое правой
   колонки: снимок центра в скруглённом кадре и одна плашка
   в углу с запасом со всех сторон. */

.org-photo {
  display: block;
  position: relative;
  background: var(--inset);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-lift);
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--base) var(--glide);
}

.org-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--count) var(--glide);
}

/* Низ кадра уходит в тень: подпись и плашка ложатся на переход,
   а не встык к фотографии. Тот же приём держит светлый текст
   поверх снимка любой яркости. */
.org-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 20, 27, 0) 44%,
    rgba(20, 20, 27, .14) 68%,
    rgba(20, 20, 27, .46) 100%);
  transition: opacity var(--base) var(--ease);
}

/* ── Правая колонка героя: кадр навылет ──────────────────────
   Снимок выходит за поле панели вверх и вправо, ловит её
   скругление и растворяется внутрь - к тексту слева и к полосе
   показателей снизу. Видимой кромки у кадра нет ни одной,
   поэтому он перестаёт быть наклейкой поверх карточки и
   становится частью панели.

   Здесь же снято всё, что лежало поверх снимка. Три метки
   исходного сайта читались наклейками на лицах. Плашка
   «26 филиалов» повторяла показатель, который стоит на
   сорок пикселей ниже в полосе. */

.hero__photo {
  position: relative;
  display: flex;
  align-self: stretch;
  margin: calc(var(--pad-panel) * -1) calc(var(--pad-panel) * -1) 0 0;
}

.hero__photo .photo-hit { flex: 1; }

/* Высоту строки задаёт текстовая колонка, а не кадр. Жёсткий пол
   в 640 px тянул панель ниже, чем нужно тексту, и слева под
   чипом оставалась пустая полоса: 112 px в казахской версии,
   42 px в русской. Пол оставлен только страховкой - он заведомо
   ниже любой реальной высоты текста и строку не двигает. */
.photo-hit--hero .org-photo {
  width: 100%;
  height: 100%;
  min-height: 440px;
  aspect-ratio: auto;
  border-radius: 0 var(--r-panel) 0 0;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Кадр шире исходной пропорции, и обрезка идёт по вертикали.
   Окно смещено вверх: снизу уходит пол, который всё равно
   растворён маской, сверху остаются книги и лицо. */
.photo-hit--hero .org-photo img { object-position: center 30%; }

/* Орб в полосе контактов продолжает пользоваться этим движением */
@keyframes mark-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Снимок тянется на всю высоту панели. Заголовок героя набран
   в четыре строки, и кадр в фиксированной пропорции оставлял бы
   над собой и под собой пустые полосы. */
.hero__photo .org-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 380px;
  box-shadow: var(--sh-card);
}

/* Кадр героя растворяется по краям, а не показывает скруглённую
   рамку. Раньше здесь лежала белая вуаль поверх снимка: она
   высветляла левую кромку, но границу не убирала - угол и тень
   оставались. Теперь края снимает маска, поэтому кадр тает в
   любую подложку, а не только в белую.

   Растушёвка разная по сторонам: слева она длинная, 22 процента,
   там снимок встречается с текстом; сверху, справа и снизу - от
   пяти до десяти, ровно чтобы снять кромку. Скругление и тень
   сняты: у растворяющегося края не бывает угла и тени. */
.photo-hit--hero .org-photo {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}


/* Заголовки секций уравновешивают строки: без этого на последней
   строке оставалось одно короткое слово - "You", "өмір". */
.split .t-section,
.panel-dark .t-section,
.app-panel__text .t-section,
.branch-head .t-section,
.band-blue .t-section { text-wrap: balance; }

.hero__text > .chip-count { margin-top: var(--sp-7); }

/* ── Бегущая строка бренда ───────────────────────────────────
   Три слова, которыми сеть описывает себя. Набор капителью
   с положительным трекингом; движение выключается системной
   настройкой, и строка остаётся читаемой на месте. */

.ticker {
  margin-top: var(--sp-9);
  padding: var(--sp-5) 0;
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  box-shadow: var(--sh-card);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  animation: ticker-run 34s linear infinite;
}

.ticker span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

.ticker svg { color: var(--blue); flex: none; opacity: .55; }

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ── Три показателя сети ─────────────────────────────────── */

/* Полоса показателей стоит внутри панели героя третьей строкой
   сетки. Наезд на скруглённый угол белой панели читался как
   промах вёрстки: у исходного сайта под карточкой был сплошной
   цветной блок во всю ширину, здесь - карточка со скруглением,
   и слой на её кромке не собирается. */
.facts-row {
  grid-column: 1 / -1;
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

/* Заливка вместо белого: три тинта подряд дают цвет там, где
   раньше были три одинаковые белые плитки. Плашка глифа
   выворачивается в белое. */
.fact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-6) var(--sp-7);
}

.fact:nth-child(1) { background: var(--tint-blue); }
.fact:nth-child(2) { background: var(--tint-violet); }
.fact:nth-child(3) { background: var(--tint-green); }

.fact .plaque { background: var(--card); color: var(--blue); }

.fact__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.fact__cap {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* ── Секция «почему у нас» ───────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--pad-panel);
  align-items: start;
}

.split > * + * { margin-top: 0; }

.split > div > * + * { margin-top: var(--sp-4); }

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h-chip);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.chips svg { color: var(--blue); flex: none; }

.chips li:nth-child(1) { background: var(--tint-blue); }
.chips li:nth-child(2) { background: var(--tint-violet); }
.chips li:nth-child(3) { background: var(--tint-green); }

.about-media {
  margin-top: var(--gap-block);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
  align-items: stretch;
}

.about-media > * { height: 100%; }

.about-media .org-photo { aspect-ratio: 3 / 4; height: 100%; }

/* Цитата - четвёртая плитка ряда, не подпись под снимками:
   слово ученика стоит вровень со снимками, а не под ними. */
.quote-card {
  display: grid;
  align-content: center;
  gap: var(--sp-5);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--pad-card);
}

.quote-card { margin: 0; }

.quote-card blockquote { margin: 0; }

.quote-card__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: .8;
  color: var(--blue-quiet);
}

.quote-card p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 30ch;
}

/* ── Жизнь центра: пять кадров ───────────────────────────────
   Разный размер кадров держит ритм секции: широкий, высокий,
   три обычных. Подпись стоит под кадром, а не поверх лиц. */

/* Двенадцать колонок и ряд в 190 px: кадры разной ширины и
   высоты стоят вплотную, как на исходном сайте. Два банда -
   сверху широкий и средний, снизу три равных. Именно эта
   мозаика, а не отступы, делала секцию наполненной. */
.life-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 190px;
  gap: var(--gap-card);
}

.life-grid > :nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 3; }
.life-grid > :nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }
.life-grid > :nth-child(3) { grid-column: 1 / 5;  grid-row: 3 / 5; }
.life-grid > :nth-child(4) { grid-column: 5 / 9;  grid-row: 3 / 5; }
.life-grid > :nth-child(5) { grid-column: 9 / 13; grid-row: 3 / 5; }

.life-card { margin: 0; height: 100%; }

.life-card .photo-hit { height: 100%; }

/* Высоту задаёт ряд сетки, пропорция кадра больше не нужна */
.life-card .org-photo { height: 100%; aspect-ratio: auto; box-shadow: var(--sh-card); }

/* Подпись живёт внутри кадра на плотной плашке, прижатой к углу
   с равным отступом: поверх фотографии текст иначе не держит
   контраст ни при какой яркости снимка. */
.life-card__cap {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 2;
  max-width: calc(100% - var(--sp-5) * 2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  box-shadow: var(--sh-lift);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  transition: transform var(--base) var(--glide), background-color var(--fast) var(--ease);
}

.life-card__cap svg { color: var(--blue); flex: none; }



/* ── Цифры на тёмной панели ──────────────────────────────────
   Единственное тёмное пятно на странице до подвала. Каркас
   .panel-dark из системы: слева речь, справа четыре числа. */

.numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.numbers article {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-tile);
  padding: var(--sp-7);
  transition: background-color var(--fast) var(--ease), transform var(--base) var(--glide);
}

.numbers article:hover { background: rgba(255, 255, 255, .11); transform: translateY(-4px); }

.numbers span { transition: color var(--fast) var(--ease); }

.numbers article:hover span { color: #C7C7D2; }

.numbers strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-feature-settings: 'tnum' 1;
}

.numbers span {
  display: block;
  margin-top: var(--sp-3);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #A6A6B2;
}

.panel-dark .t-section { color: #fff; margin-top: var(--sp-4); }
.panel-dark .panel-lede { margin-top: var(--sp-5); }
.panel-dark .t-eyebrow { color: #8E8E9C; }

.panel-lede {
  font-size: 17px;
  line-height: 1.6;
  color: #C7C7D2;
  max-width: 46ch;
}

/* ── Программы и награда ─────────────────────────────────── */

.program-strip {
  margin-top: var(--gap-block);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.program-strip span {
  display: inline-flex;
  align-items: center;
  height: var(--h-chip);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}

/* Наведение выворачивает обе краски одним правилом:
   контраст растёт с 4.8:1 до 5.7:1, а не падает. */
.program-strip span:hover { background: var(--blue); color: #fff; }

.award {
  margin-top: var(--gap-card);
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--pad-card);
}

.award p { max-width: 58ch; }

/* ── Приложение ──────────────────────────────────────────── */

.app-panel {
  background: var(--tint-violet);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--pad-panel);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--pad-panel);
  align-items: center;
}

.app-panel__text > * + * { margin-top: var(--sp-5); }
.app-panel__text > .t-section { margin-top: var(--sp-4); }
.app-panel__text > .app-benefits { margin-top: var(--sp-7); }
.app-panel__text > .btn { margin-top: var(--sp-8); }

.app-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}

.app-label i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  color: var(--blue);
  letter-spacing: .08em;
}

.app-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.app-benefits li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.app-benefits svg { color: var(--blue); flex: none; }

/* Один телефон в пустой колонке читался как заглушка.
   Два настоящих экрана внахлёст занимают колонку и показывают
   продукт с двух сторон: день и прогресс. */
.app-stage {
  position: relative;
  width: 340px;
  max-width: 100%;
  height: 470px;
}

.app-stage .device { position: absolute; width: auto; }

.app-stage__back { right: 0; top: 0; height: 360px; }
.app-stage__front { left: 0; top: 22px; height: 430px; z-index: 2; }

.app-stage__mark {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--h-chip);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-lift);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;

  /* Плашка целиком синяя. Раньше «CES» был серым, а «FOR YOU»
     синим - отдельный тег b для этого больше не нужен. */
  color: var(--blue);
}

/* ── Филиалы: поиск, список, карта ───────────────────────── */

/* Секция филиалов легла на сплошную заливку: белые карточки
   списка и карты внутри читаются слоем, а не растворяются
   в белом. Приём исходного сайта, где этот блок стоит на
   кремовой подложке. */
.branch-panel {
  background: var(--tint-green);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-card);
  padding: var(--pad-panel);
}

.branch-panel .t-eyebrow { color: var(--text); }

.branch-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: end;
  margin-bottom: var(--gap-block);
}

.branch-head > div > * + * { margin-top: var(--sp-4); }

.search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 340px;
  max-width: 100%;
  height: var(--h-field);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.search-field svg { color: var(--text); flex: none; }

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.search-field input::placeholder { color: var(--cap); }

.search-field:focus-within { box-shadow: var(--sh-card), 0 0 0 3px var(--blue-quiet); }

/* Обе карточки ряда одной высоты. Раньше высоту ряда задавал предел
   списка, а карточка с картой набирала свою по содержимому - и они
   расходились. Теперь высоту держит сам ряд: список скроллится
   внутри неё, карта растягивается на остаток своей карточки.
   Карта - главное в блоке, поэтому её колонка шире: список это
   всего строка адреса, ему хватает узкой. */
.branch-layout {
  display: grid;
  grid-template-columns: 1fr 1.28fr;
  grid-template-rows: 600px;
  gap: var(--gap-card);
}

.branch-list {
  position: relative;   /* offsetTop строк считается от самого списка */
  min-height: 0;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-5);
  overflow-y: auto;
}

.branch-list__count {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
}

.branch-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--r-inset);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.branch-item + .branch-item { margin-top: var(--sp-1); }

/* Первая строка списка - обзор, а не филиал: она сбрасывает карту
   к общей картине. Вместо номера значок, а отступ под ней больше
   обычного - этого хватает, чтобы отделить её от нумерованных
   строк без линии. Ширина в 2ch равна ширине двух цифр в том же
   шрифте, поэтому колонка с названиями начинается ровно там же,
   что и у остальных строк. */
.branch-item--all + .branch-item { margin-top: var(--sp-5); }

.branch-item__num--all {
  display: grid;
  place-items: center;
  width: 2ch;
}

.branch-item[hidden] { display: none; }

.branch-item:hover { background: var(--inset); }

.branch-item.is-on { background: var(--tint-blue); }

.branch-item__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  font-feature-settings: 'tnum' 1;
}

.branch-item.is-on .branch-item__num { color: var(--blue); }

.branch-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.branch-item small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.branch-item > svg { color: var(--text); flex: none; }
.branch-item.is-on > svg { color: var(--blue); }

.branch-empty {
  padding: var(--sp-7) var(--sp-5) var(--sp-9);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* Карта */

/* ── Карта 2ГИС ──────────────────────────────────────────────
   Виджет 2ГИС со всеми 26 карточками филиалов сети.

   Карта стоит во всю ширину панели, а не в узкой правой
   колонке, и это не про красоту. Виджет сам подгоняет масштаб
   под все филиалы, а сеть растянута на 92 км с запада на восток.
   В колонке 500 px это давало примерно девятый масштаб, где
   2ГИС в этих местах рисует одну заливку без дорог и подписей.
   На всю ширину, 990 px, выходит около 93 м на пиксель - это
   десятый масштаб, где появляются дороги, посёлки и названия. */

/* ── Карта филиалов ──────────────────────────────────────────
   Карта своя, а не виджет 2ГИС. Причина не в оформлении:
   виджет живёт на старом API 2.0, которое добавляет слой карты
   только после проверки ключа через mapkeys.api.2gis.ru, а этот
   хост больше не существует. Проверка не проходит, слой тайлов
   не добавляется - остаются метки на пустой подложке. Со стороны
   страницы это не чинится.

   Тайлы при этом отдаются напрямую и без ключа, поэтому
   картография осталась 2ГИС. Свой слой меток даёт то, чего
   виджет не давал в принципе: выбор филиала из списка
   подсвечивает его метку, а клик по метке выбирает строку. */

.map-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--sp-5);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.map-card__top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}

.map-card__top strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.map-card__top span { font-size: 13px; font-weight: 600; color: var(--text); }

/* Вторая строка шапки: кнопка возврата к обзору слева, ссылка
   наружу держит правый край. Ссылка стоит в ячейке явно - иначе,
   когда кнопка скрыта, она уезжает на её место.
   Заливка кнопки серая: btn-quiet белая, а карточка тоже белая,
   и кнопка на ней просто не читалась. */
.map-card__top .btn {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  background: #EAEAEF;
  color: var(--ink);
  box-shadow: none;
}

.map-card__top .btn:hover { background: #E0E0E8; }

/* Кнопка и строка обзора в списке - одно состояние на двоих:
   пока показана вся сеть, кнопка держится нажатой. */
.map-card__top .btn.is-on { background: var(--tint-blue); color: var(--blue); }
.map-card__top .btn.is-on:hover { background: #DFEAFB; }
.map-card__top .btn[hidden] { display: none; }

.map-card__top .link {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
}

.map-live {
  position: relative;
  flex: 1;
  min-height: 240px;
  border-radius: var(--r-tile);
  background: var(--inset);
  overflow: hidden;
}

/* Метка филиала: тот же круг, что и номер в списке */
.map-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--sh-lift);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  font-feature-settings: 'tnum' 1;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.map-dot:hover { transform: scale(1.12); }

/* z-index здесь не работал: у кружка нет position, а перекрывают
   друг друга сами метки Leaflet. Подъём выбранной метки делает
   setZIndexOffset в ces-org.js. */
.map-dot.is-on {
  background: var(--blue);
  color: #fff;
  transform: scale(1.28);
}

/* Подписи и рамки чужой библиотеки под систему */
.map-live .leaflet-container { font-family: var(--font-body); background: var(--inset); }
.map-live .leaflet-control-attribution { font-size: 11px; }
.map-live .leaflet-bar a {
  border-radius: var(--r-plaque);
  color: var(--ink);
  border-bottom-color: rgba(20, 20, 27, .08);
}

.map-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-content: center;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.map-detail__num {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  font-feature-settings: 'tnum' 1;
}

.map-detail strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}

.map-detail small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* display: grid у кружка перебивает hidden, поэтому скрытие
   задано явно. Тексты закреплены во второй колонке: иначе при
   скрытом кружке они уезжают в первую. */
.map-detail__num[hidden] { display: none; }
.map-detail > div { grid-column: 2; grid-row: 1; }

/* В обзорном состоянии номера филиала нет, а кружок с меткой
   повторяет такую же метку в строке подсказки рядом. Кружок
   убран, и текст занимает всю ширину карточки: раньше он ютился
   в правой колонке, и длинная казахская подсказка ломалась на две
   строки, оставляя пустое место справа.
   Сам span остаётся в разметке - по нему :has отличает обзор от
   выбранного филиала, без обращения к JS. */
.map-detail [data-detail-all] { display: none; }

.map-detail:has([data-detail-all]:not([hidden])) { grid-template-columns: 1fr; }
.map-detail:has([data-detail-all]:not([hidden])) > div { grid-column: 1; }

/* Подсказка в обзорном состоянии повторяет метрику ссылки в
   карточке филиала - тот же отступ, кегль и высота строки.
   Из-за этого высота карточки не меняется при переключении и
   карта над ней не прыгает. */
.map-detail__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Метка держится первой строки: при переносе на узком экране
   она бы иначе повисла между строк. 3px - оптический центр
   значка 15px в строке высотой 21px. */
.map-detail__hint svg { flex: none; margin-top: 3px; }

.map-detail a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.map-detail a:hover { text-decoration: underline; }

/* ── Контакты: единственная синяя полоса ─────────────────── */

/* Контакты занимают обе колонки полосы: в правой узкой колонке
   почта переносилась по буквам, а заголовок терял место.
   Тот же приём, что у .flow в ces-landing.css. */
.band-blue > .contact-links { grid-column: 1 / -1; margin-top: var(--sp-3); }

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}

.contact-links a {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-7);
  border-radius: var(--r-tile);
  background: var(--card);
  box-shadow: var(--sh-card);
  text-decoration: none;
  transition: background-color var(--fast) var(--ease);
}

.contact-links a:hover { background: #fbfbfd; }

.contact-links small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.contact-links strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
  word-break: break-word;
  font-feature-settings: 'tnum' 1;
}

.socials {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--h-btn-sm);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-card);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.socials a:hover { background: #fbfbfd; }

.socials svg { color: var(--blue); }

.socials svg { flex: none; }

/* ── Орб исходного сайта ─────────────────────────────────────
   Единственная английская метка в полосе контактов. Занимает
   правую колонку полосы, поэтому не наезжает на заголовок
   ни при какой длине строки. */
.contact-orb {
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 52% 48% 64% 36%;
  background: var(--card);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
  box-shadow: var(--sh-lift);
  rotate: 8deg;
  animation: mark-float 5000ms var(--ease-io) infinite;
}

/* ── Подвал: подпись сети ────────────────────────────────── */

.foot-claim {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 22ch;
}

/* ── Фокус клавиатуры ────────────────────────────────────── */

.branch-item:focus-visible,
.search-field:focus-within,
.site-nav a:focus-visible,
.head-phone:focus-visible,
.head-app:focus-visible,
.contact-links a:focus-visible,
.socials a:focus-visible,
.map-detail a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.contact-links a:focus-visible,
.socials a:focus-visible { outline-color: #fff; outline-offset: 3px; }

/* ── Планшет ─────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .site-nav { display: none; }

  /* Колонка сузилась - число уменьшается, чтобы строка
     «глиф - число - подпись» осталась в одну линию. */
  .fact { padding: var(--sp-6) var(--sp-5); gap: var(--sp-2) var(--sp-4); }
  .fact__num { font-size: 32px; }
  .fact__cap { font-size: 14px; }
}

@media (max-width: 1000px) {
  .branch-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .branch-list { max-height: 420px; }
  .split { grid-template-columns: 1fr; gap: var(--gap-block); }
  .app-panel { grid-template-columns: 1fr; }
  .about-media { grid-template-columns: repeat(2, 1fr); }
  .app-stage { margin: 0 auto; }
  .life-grid { grid-auto-rows: 158px; }
}

/* ── Телефон ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Шапка на телефоне не помещалась в строку: знак, ссылка на
     лендинги приложения, переключатель языка и телефон вместе
     просят около 560px при 350px доступных. Из-за этого вбок
     прокручивалась вся страница, а номер уезжал за правый край.
     Ссылка на приложение уходит первой - она есть в подвале. */
  .head-app { display: none; }

  /* Правило выше по силе, чем .hero в ces-landing.css, и держало
     герой в две колонки на телефоне. Возвращаю раскладку файла. */
  body[data-od-id^="landing-ces"] .hero {
    grid-template-columns: 1fr;
    margin-top: var(--sp-8);
  }

  /* Порядок героя на телефоне продолжает лестницу ces-landing.css:
     снимок идёт третьим, чип со сроком работы - последним. */
  /* В одну колонку кадр стоит в потоке обычной карточкой:
     выносить его за поле панели здесь некуда. */
  .hero__photo { order: 3; margin: var(--sp-8) 0 0; align-self: auto; }
  .hero__photo .org-photo { height: auto; min-height: 0; aspect-ratio: 3 / 4; border-radius: var(--r-card); }
  .hero__text > .chip-count { order: 8; margin-top: var(--sp-6); }

  /* Наезд на герой держится только на широком экране: в одну
     колонку он превращается в наложение блоков друг на друга. */
  .facts-row { order: 10; grid-template-columns: 1fr; margin-top: var(--sp-8); }

  .branch-panel { padding: var(--sp-7) var(--sp-6); }

  .ticker { padding: var(--sp-4) 0; }

  .contact-orb { width: 110px; height: 110px; font-size: 18px; justify-self: center; }

  .app-stage { width: 292px; height: 400px; }
  .app-stage__front { height: 366px; top: 18px; }
  .app-stage__back { height: 306px; }
  .fact__num { font-size: 32px; }

  .ticker { margin-top: var(--sp-9); }

  .org-photo { aspect-ratio: 3 / 2; }
  .about-media { grid-template-columns: 1fr 1fr; }
  .about-media .org-photo { aspect-ratio: 3 / 4; }

  /* Заголовок сети на 360 px: при кегле 38 «Мүмкіндіктерге»
     занимает 296 px против 280 доступных. */
  body[data-od-id^="landing-ces"] .t-hero { font-size: 34px; }

  body[data-od-id^="landing-ces"] main[id],
  body[data-od-id^="landing-ces"] .section[id] {
    scroll-margin-top: calc(var(--h-head-sm) + var(--sp-4));
  }

  /* В одну колонку кадр стоит по центру, и длинная растушёвка
     слева при короткой справа читалась бы как перекос. */
  .photo-hit--hero .org-photo {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }

  /* Двенадцать колонок на 390 px нечитаемы: мозаика
     складывается в две, первый кадр остаётся широким. */
  .life-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; }
  .life-grid > :nth-child(n) { grid-column: auto; grid-row: span 1; }
  .life-grid > :nth-child(1) { grid-column: span 2; }

  .numbers { gap: var(--sp-4); }
  .numbers article { padding: var(--sp-6); }
  .numbers strong { font-size: 28px; }

  .quote-card p { font-size: 18px; max-width: none; }

  .branch-head { grid-template-columns: 1fr; align-items: start; }
  .search-field { width: 100%; }

  .contact-links { grid-template-columns: 1fr; }
  .contact-links strong { font-size: 18px; }

  .award { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }

  .foot-claim { font-size: 19px; }

  .map-card__top { grid-template-columns: 1fr; align-items: start; gap: var(--sp-3); }
  .map-card__top .btn,
  .map-card__top .link { grid-column: 1; grid-row: auto; justify-self: start; }

  .map-live { min-height: 300px; }
}

@media (max-width: 560px) {
  /* Совсем узкий экран: от телефона в шапке остаётся значок.
     Номер никуда не делся - он в aria-label ссылки, а звонок
     целиком дублирует липкая кнопка внизу страницы. */
  .head-phone { width: var(--h-btn-sm); padding: 0; justify-content: center; }
  .head-phone span { display: none; }

  .life-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .life-grid > :nth-child(1) { grid-column: span 1; }
  .about-media { grid-template-columns: 1fr; }
  .about-media .org-photo { aspect-ratio: 3 / 2; }
  .numbers { grid-template-columns: 1fr; }
}

/* ── Выход на главный лендинг из витрины ─────────────────────
   Полоса под тремя обложками: организация - общее для всех
   трёх аудиторий, поэтому стоит отдельной строкой, а не
   четвёртой карточкой в ряду из трёх. */

.pick-org {
  margin-top: var(--gap-card);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-7);
  padding: var(--sp-7) var(--pad-card);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.pick-org:hover { transform: translateY(-4px); box-shadow: var(--sh-panel); }

.pick-org:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.pick-org__mark { color: var(--blue); line-height: 0; }

.pick-org__mark svg { height: var(--h-logo); width: auto; display: block; }

.pick-org__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.pick-org__gist {
  display: block;
  margin-top: var(--sp-1);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.pick-org__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--blue);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .pick-org { transition: none; }
  .pick-org:hover { transform: none; }
}

@media (max-width: 900px) {
  .pick-org { grid-template-columns: auto 1fr; gap: var(--sp-5); }
  .pick-org__go { display: none; }
  .pick-org__mark svg { height: var(--h-logo-sm); }
}

/* ════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ И ОТКЛИК

   Длительности и кривые берутся из ces-tokens.css: --fast на
   нажатие, --base на смену состояния, --reveal на появление,
   --count на досчёт и оседание кадра. Своих значений здесь три:
   шаг ступеньки пинов, длительность пульса и время лайтбокса -
   всё остальное системное.
   ════════════════════════════════════════════════════════════ */

/* ── Кликабельный кадр ───────────────────────────────────────
   Снимок - кнопка: наведение, фокус с клавиатуры и нажатие
   получают ответ, клик открывает фотографию во весь экран. */

.photo-hit {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--r-card);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--base) var(--glide);
}

.photo-hit:hover { transform: translateY(-6px); }

/* Нажатие возвращает кадр почти на место: жест ощущается физически */
.photo-hit:active { transform: translateY(-1px); }

.photo-hit:hover .org-photo,
.photo-hit:focus-visible .org-photo { box-shadow: var(--sh-panel); }

/* Кроме кадра героя: у растворяющегося края тени не бывает.
   Правило стоит здесь, а не рядом с маской: сила селекторов
   равна, и решает порядок в файле. */
.photo-hit--hero:hover .org-photo,
.photo-hit--hero:focus-visible .org-photo { box-shadow: none; }

/* Кадр героя стоит вплотную к верхней кромке панели: подъём
   на 6 px обнажил бы под ней белую полосу. Отвечает зум снимка
   и лупа, положение остаётся. */
.photo-hit--hero:hover,
.photo-hit--hero:active { transform: none; }

.photo-hit:hover .org-photo img,
.photo-hit:focus-visible .org-photo img { transform: scale(1.08); }

/* Скрим слегка отступает: снимок при наведении становится ярче */
.photo-hit:hover .org-photo::after { opacity: .72; }

.photo-hit:hover .life-card__cap { transform: translateY(-4px); background: #fff; }

.photo-hit:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.photo-hit:hover .photo-hit__zoom,
.photo-hit:focus-visible .photo-hit__zoom { opacity: 1; transform: none; }

/* Лупа появляется только под курсором: в покое кадр чистый */
.photo-hit__zoom {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .95);
  color: var(--blue);
  box-shadow: var(--sh-lift);
  opacity: 0;
  transform: translateY(-8px) scale(.86);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--glide);
  pointer-events: none;
}

.photo-hit--hero .photo-hit__zoom { top: var(--sp-6); right: var(--sp-6); }

/* ── Появление ───────────────────────────────────────────────
   Текст поднимается, кадр раскрывается маской снизу вверх,
   а снимок внутри за то же время оседает из лёгкого зума.
   Два движения одной длительности читаются как одно. */

.has-reveal [data-rise] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal) var(--glide), transform var(--reveal) var(--glide);
}

.has-reveal [data-rise].is-in { opacity: 1; transform: none; }

.has-reveal [data-frame] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.16);
  transition: clip-path var(--count) var(--glide), transform var(--count) var(--glide);
}

.has-reveal [data-frame].is-in img {
  clip-path: inset(0 0 0 0);
  transform: scale(1.02);
  transition: clip-path var(--count) var(--glide), transform var(--reveal) var(--glide);
}

/* Скрим приходит вместе со снимком, а не висит над пустой подложкой */
.has-reveal [data-frame]::after { opacity: 0; }
.has-reveal [data-frame].is-in::after { opacity: 1; }

.photo-hit:hover .org-photo.is-in::after,
.photo-hit:focus-visible .org-photo.is-in::after { opacity: .72; }

/* Ступенька внутри ряда. Списки короткие и известны наперёд,
   поэтому задержка стоит правилом, а не переменной в разметке. */
.has-reveal .facts-row > [data-rise]:nth-child(2),
.has-reveal .about-media > [data-rise]:nth-child(2),
.has-reveal .life-grid > [data-rise]:nth-child(2) { transition-delay: var(--stagger); }

.has-reveal .facts-row > [data-rise]:nth-child(3),
.has-reveal .about-media > [data-rise]:nth-child(3),
.has-reveal .life-grid > [data-rise]:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }

.has-reveal .about-media > [data-rise]:nth-child(4),
.has-reveal .life-grid > [data-rise]:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }

.has-reveal .life-grid > [data-rise]:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }

.has-reveal .about-media > :nth-child(2) [data-frame],
.has-reveal .life-grid > :nth-child(2) [data-frame] { transition-delay: var(--stagger); }

.has-reveal .about-media > :nth-child(3) [data-frame],
.has-reveal .life-grid > :nth-child(3) [data-frame] { transition-delay: calc(var(--stagger) * 2); }

.has-reveal .life-grid > :nth-child(4) [data-frame] { transition-delay: calc(var(--stagger) * 3); }
.has-reveal .life-grid > :nth-child(5) [data-frame] { transition-delay: calc(var(--stagger) * 4); }

/* ── Отклик карточек ─────────────────────────────────────────
   Правило одно на весь лендинг: подъём на 4 px и тень глубже.
   Цвет текста при этом не меняется - контраст не падает. */

.fact,
.program-strip span,
.contact-links a,
.socials a,
.quote-card,
.award {
  transition: transform var(--base) var(--glide), box-shadow var(--base) var(--glide),
              background-color var(--fast) var(--ease);
}

.fact:hover,
.program-strip span:hover,
.award:hover,
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }

.contact-links a:hover,
.socials a:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }

.contact-links a:active,
.socials a:active { transform: translateY(0); }

/* ── Шапка ───────────────────────────────────────────────────
   Тень появляется, только когда под шапкой уже уехало
   содержимое: в покое кромки нет. Правило намеренно привязано
   к телу этих двух страниц и не трогает остальные лендинги. */

body[data-od-id^="landing-ces"] .site-head {
  transition: box-shadow var(--base) var(--ease);
}

body[data-od-id^="landing-ces"] .site-head.is-scrolled {
  box-shadow: 0 10px 30px -22px rgba(20, 20, 27, .30);
}

.site-nav a { position: relative; }

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--glide);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }

/* Пункт секции, которая сейчас на экране: видно, куда попал клик */
.site-nav a[aria-current] { color: var(--ink); }

.head-phone,
.head-app { transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease); }

.head-phone:hover { transform: translateY(-2px); }
.head-phone:active { transform: translateY(0); }

.head-app svg { transition: transform var(--fast) var(--glide); }
.head-app:hover svg { transform: translate(2px, -2px); }

/* Бегущая строка останавливается под курсором: прочитать можно */
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ── Список филиалов ─────────────────────────────────────── */

.branch-item > svg { transition: transform var(--base) var(--glide), color var(--fast) var(--ease); }

.branch-item:hover > svg { transform: translate(3px, -3px); color: var(--blue); }

.branch-item:active { transform: translateY(1px); }

.branch-item__num { transition: color var(--fast) var(--ease); }

.branch-item:hover .branch-item__num { color: var(--blue); }

/* ── Кнопка со ссылкой на приложение ─────────────────────── */

.pick-org__go { transition: transform var(--base) var(--glide), background-color var(--fast) var(--ease); }

.pick-org:hover .pick-org__go { transform: translate(3px, -3px); background: var(--blue); color: #fff; }

/* ── Лайтбокс ────────────────────────────────────────────────
   Снимки сети сняты в высоком разрешении, и на плитке видно
   меньше половины кадра. Клик открывает фотографию целиком,
   стрелки и Esc работают с клавиатуры. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--sp-9);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}

.lightbox[hidden] { display: none; }

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

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 27, .93);
  cursor: zoom-out;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--sp-6);
  max-width: 100%;
  transform: translateY(14px) scale(.97);
  transition: transform var(--reveal) var(--glide);
}

.lightbox.is-open .lightbox__figure { transform: none; }

.lightbox__figure img {
  max-width: min(1120px, 88vw);
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: var(--r-card);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
}

.lightbox__figure figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.lightbox__count { color: #8E8E9C; font-feature-settings: 'tnum' 1; }

.lightbox__btn {
  position: absolute;
  z-index: 2;
  width: var(--h-btn);
  height: var(--h-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--glide);
}

/* Наведение делает подложку плотнее, а не светлее текста:
   белый глиф на ней читается лучше, чем в покое. */
.lightbox__btn:hover { background: #fff; color: var(--ink); }

.lightbox__btn:active { transform: scale(.94); }

.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.lightbox__btn--close { top: var(--sp-6); right: var(--sp-6); }
.lightbox__btn--prev { left: var(--sp-6); top: 50%; margin-top: calc(var(--h-btn) / -2); }
.lightbox__btn--next { right: var(--sp-6); top: 50%; margin-top: calc(var(--h-btn) / -2); }

.is-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
  .lightbox { padding: var(--sp-6); }
  .lightbox__figure img { max-width: 92vw; max-height: 62vh; }
  .lightbox__btn { width: var(--h-btn-sm); height: var(--h-btn-sm); }
  .lightbox__btn--prev { left: var(--sp-4); }
  .lightbox__btn--next { right: var(--sp-4); }
  .lightbox__btn--close { top: var(--sp-4); right: var(--sp-4); }
  .photo-hit__zoom { width: 36px; height: 36px; top: var(--sp-4); right: var(--sp-4); }
  .photo-hit:hover { transform: none; }
}

/* ── Меньше движения ─────────────────────────────────────────
   Системная настройка снимает всё: страница показывается
   собранной, без появления, зума, пульса и параллакса. */

@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-rise],
  .has-reveal [data-rise].is-in,
  .has-reveal [data-frame]::after,
  .has-reveal [data-frame].is-in::after {
    opacity: 1;
    transform: none;
    scale: 1;
    transition: none;
  }

  .has-reveal [data-frame] img,
  .has-reveal [data-frame].is-in img,
  .photo-hit:hover .org-photo img,
  .photo-hit:focus-visible .org-photo img {
    clip-path: none;
    transform: none;
    transition: none;
  }

  .photo-hit,
  .photo-hit:hover,
  .photo-hit:active,
  .fact:hover,
  .program-strip span:hover,
  .award:hover,
  .quote-card:hover,
  .contact-links a:hover,
  .socials a:hover,
  .head-phone:hover,
  .branch-item:active,
  .lightbox__figure,
  .lightbox.is-open .lightbox__figure { transform: none; transition: none; }

  .contact-orb { animation: none; }

  html:has(body[data-od-id^="landing-ces"]) { scroll-behavior: auto; }
  .site-nav a::after { transition: none; }
  .lightbox { transition: none; }
}