/* Сайт образовательного направления OPEN A ED — opena.school
   Фирстиль школы от КИАН: лайм, голубой, чёрный; Styrene + Graphik + Circe. */
@font-face { font-family:"Montserrat"; src:url("/fonts/montserrat-cyrillic.woff2") format("woff2");
  font-weight:100 900; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Montserrat"; src:url("/fonts/montserrat-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face { font-family:"Styrene"; src:url("/fonts/styrene-bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Graphik"; src:url("/fonts/graphik-semibold.otf") format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Circe"; src:url("/fonts/circe-regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Circe"; src:url("/fonts/circe-extrabold.otf") format("opentype"); font-weight:800; font-display:swap; }

:root {
  --ink:#1a1a18; --sky:#5fcefa; --lime:#bafd4f; --paper:#fff; --grey:#77776f; --line:#e6e6e0;
  /* «светло-светло-серый» — фон ячейки сетки (плитки/шага) при наведении,
     когда своего цвета у неё нет. */
  --fog:#f7f7f2;
  --gutter: clamp(20px, 4vw, 48px);
  --block-gap: clamp(28px,3.5vw,56px);
}
* { box-sizing:border-box; }
/* Переход по плитке к разделу — плавный, и раздел не уезжает под липкую
   шапку. Тем, кто просил уменьшить анимацию, прокрутка остаётся мгновенной. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
html { -webkit-text-size-adjust:100%; }
/* Рамка разделов выступает за края на 96px. overflow-x:hidden на body
   мобильные браузеры не считают — страница становилась шире экрана
   (451px на 375px), вместе с ней съезжал попап. clip, а не hidden (и на
   html, и на body): hidden делает body отдельной прокруткой, и липкая
   шапка перестаёт липнуть. */
html { overflow-x:clip; }
/* overflow-x:hidden — иначе full-bleed черта под стартовым блоком раздела
   (100vw шире фактической ширины окна на ширину полосы прокрутки) даёт
   настоящий горизонтальный скролл на всю страницу. */
body { margin:0; background:var(--paper); color:var(--ink); overflow-x:clip;
  font-family:"Circe", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:17px; line-height:1.5; }
h1,h2,h3 { font-family:"Montserrat", "Styrene", sans-serif; font-weight:700; letter-spacing:-.025em; line-height:1; margin:0; }
a { color:inherit; }
.wrap { width:min(1440px, 100% - var(--gutter)*2); margin:0 auto; }
.mono { font-family:"Graphik", sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }

/* шапка */
.nav { border-bottom:1px solid var(--ink); position:sticky; top:0; background:var(--paper); z-index:9; }
.nav .wrap { display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); height:64px;
  font-family:"Graphik", sans-serif; font-size:14px; }
/* Логотип — чёрный «OPEN A» (19.09.2026), инверсия не нужна. Рядом в
   строку «ОБРАЗОВАТЕЛЬНАЯ ПЛАТФОРМА» Montserrat тонким (решение Олега),
   чуть ниже логотипа: высота прописных ≈ 0.70 кегля, кегль = 88% от
   высоты логотипа / 0.70. */
.nav img { height:18px; width:auto; display:block; }
.home, .foot__logo { --logo-h:18px; display:flex; align-items:center; gap:14px; }
.brand-caption { font-family:"Montserrat", sans-serif; font-weight:300; text-transform:uppercase;
  font-size:calc(var(--logo-h) / .70 * .88); line-height:1; letter-spacing:.04em; color:var(--ink); white-space:nowrap; }
/* На телефоне логотип с подписью не помещаются рядом с кнопками шапки:
   подпись мельче, служебная «Битрикс» и «Заявка в школу» (на MVP её нет
   по решению Олега) скрыты. */
@media (max-width:640px) {
  .home, .foot__logo { --logo-h:11px; gap:9px; }
  .nav img { height:11px; }
  .nav .sync-btn, .nav .cta { display:none; }
}
.nav .home { margin-right:auto; display:flex; align-items:center; text-decoration:none; }
.nav a { text-decoration:none; white-space:nowrap; }
.nav .cta { background:var(--sky); color:var(--ink); padding:11px 18px; border-radius:4px; }
.nav .links { display:flex; gap:clamp(14px,2vw,28px); }
/* MVP на стартовой: в шапке только логотип с подписью, без кнопок
   (решение Олега 19.09.2026). Кнопка «⟳ Битрикс» остаётся на /studio. */
.is-mvp .nav .links, .is-mvp .nav .cta, .is-mvp .nav .sync-btn { display:none; }
/* Временная кнопка ручной синхронизации с Битриксом (см. #sync-btn в
   site.js) — на время дизайна сайта, убрать вместе с разметкой потом. */
.sync-btn { font:inherit; font-size:13px; background:none; color:var(--grey); border:1px solid var(--line);
  border-radius:4px; padding:9px 14px; cursor:pointer; white-space:nowrap; }
.sync-btn:hover { color:var(--ink); border-color:var(--ink); }
.sync-btn:disabled { opacity:.5; cursor:default; }

/* первый экран */
.hero { padding:clamp(40px,6vw,72px) 0 clamp(28px,3.5vw,44px); }
.hero .row { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end; }
/* Надстрочник над крупным названием: воздуха между ними больше, чем между
   строками самого названия, иначе они читаются одним блоком. */
/* Крупнее и тоньше, чем подписи на карточках. Graphik у нас только в
   полужирном начертании, поэтому здесь Montserrat — он вариативный, и
   тонкое начертание настоящее, а не подделанное браузером. */
.hero #hero-eyebrow { margin-bottom:clamp(18px,2.2vw,34px);
  font-family:"Montserrat", sans-serif; font-weight:300;
  font-size:clamp(12px,1.05vw,15px); letter-spacing:.12em; }
.hero h1 { font-size:clamp(30px,6.4vw,104px); line-height:.92; overflow-wrap:normal; word-break:normal;
  hyphens:none; text-wrap:balance; }
/* Слово в |палочках|/`бэктиках`/*звёздочках* в ЛЮБОМ тексте карточки —
   заголовке, абзаце, подписи, цитате отзыва, факте — акцентным цветом,
   без курсива (см. el()/richTitle() в site.js: разбирает не только
   заголовки). Модалка попапа кнопки стоит вне <main> (buildModal() кладёт
   её в document.body), поэтому не main em, а просто em — общее правило. */
em { font-style:normal; color:var(--sky); }
/* На голубом фоне голубой акцент терялся бы — там он тёмный, как и весь
   остальной текст на этом фоне. */
.tile.bg-sky em { color:var(--ink); }
.hero p { margin:0; font-size:clamp(16px,1.3vw,18px); color:#3c3c36; }

/* сетка-навигатор */
.grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  /* высота строки — доля от ширины колонки, чтобы плитки держали пропорцию
     макета, а не растягивались под текст. Значение ставит скрипт. */
  grid-auto-rows:var(--row, minmax(210px, auto));
  grid-auto-flow:row dense; margin-bottom:clamp(48px,7vw,96px); position:relative; }
/* Решётка рисуется отдельным слоем поверх: на каждый край плитки своя
   линия в 1px. Совпадающие края ложатся друг на друга ровно, поэтому на
   стыках всегда одна линия, а углы сходятся. Пустых клеток слой не
   касается — там линий нет. */
.grid-lines { position:absolute; inset:0; pointer-events:none; }
/* Пустая клетка в хвосте сетки: занимает место, но не рисуется. */
.grid .spacer { pointer-events:none; }
.grid-lines i { position:absolute; background:var(--ink); }
.tile { position:relative; display:flex; flex-direction:column; min-width:0;
  padding:var(--pad); text-decoration:none; background:var(--paper);
  overflow:hidden; transition:background .15s ease; }
.tile:hover { background:var(--fog); }
/* Серо-бежевый фон заметно темнее обычной карточки, а при наведении
   светлеет до того же оттенка, что и все остальные. */
.tile.bg-sand { background:#e8e6da; }
.tile.bg-sand:hover { background:var(--fog); }
/* Светло-светло-серый — постоянный (не только hover) вариант того же
   оттенка: при наведении светлеет ещё на шаг, до чистого белого. */
.tile.bg-fog { background:var(--fog); }
.tile.bg-fog:hover { background:var(--paper); }
.tile .meta { display:flex; gap:9px; align-items:center; min-height:24px; }
/* Несколько аудиторий через запятую — столбиком, у каждой своя иконка. */
.tile .meta--list { flex-direction:column; align-items:flex-start; gap:10px; }
.tile .meta__row { display:flex; gap:9px; align-items:center; min-height:24px; }
.tile .ico { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.tile.bg-lime .ico, .tile.bg-sky .ico { color:var(--ink); opacity:1; }
.tile.bg-ink .ico, .tile.bg-image .ico { color:#fff; }
.tile h2 { font-size:clamp(20px,1.9vw,28px); margin:auto 0 10px; }
/* В крупных блоках — вертикальном, горизонтальном и двойном — название
   в полтора раза больше, иначе заголовок в них теряется. */
.tile.f12 h2, .tile.f21 h2, .tile.f22 h2 { font-size:calc(clamp(20px,1.9vw,28px) * 1.5); }
.tile p { margin:0; font-size:15px; color:var(--ink); overflow:hidden; }
/* Картинка или видео в карточке: прижата к правому краю, отступы сверху,
   снизу и справа одинаковые — те же, что у текста до края карточки.
   Пока файл грузится, в рамке видна полоска-индикатор, само изображение до
   готовности спрятано, чтобы не мелькали недорисованные строки. */
.tile { --pad:20px; --thumb-w:clamp(84px,11vw,150px); }
.tile .thumb { position:absolute; right:var(--pad); top:var(--pad); bottom:var(--pad);
  width:var(--thumb-w); border-radius:3px; overflow:hidden; background:rgba(0,0,0,.06); }
/* Рамка с известными пропорциями картинки: низ отпускаем, высоту задаёт
   JS. Внутри — contain, чтобы в невысокой карточке картинка уменьшилась
   целиком, а не обрезалась. */
.tile .thumb--ratio { bottom:auto; }
.tile .thumb--ratio img, .tile .thumb--ratio video { object-fit:contain; }
.tile .thumb img, .tile .thumb video { width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .35s ease; }
.tile .thumb.is-loaded img, .tile .thumb.is-loaded video { opacity:1; }
.tile .thumb.is-loaded { background:none; }
.tile .thumb::after { content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--ink); opacity:.25; transform-origin:left; animation:loadbar 1.1s ease-in-out infinite; }
.tile .thumb.is-loaded::after { display:none; }
/* Текст не доходит до картинки ровно на тот же отступ, что и до края карточки. */
.tile.has-thumb .meta, .tile.has-thumb h2, .tile.has-thumb p { padding-right:calc(var(--thumb-w) + var(--pad)); }
@keyframes loadbar { 0% { transform:scaleX(0) } 50% { transform:scaleX(1) } 100% { transform:scaleX(0); transform-origin:right } }

/* форм-факторы: пропорции блока в сетке */
.tile.f21 { grid-column:span 2; }
.tile.f12 { grid-row:span 2; }
.tile.f22 { grid-column:span 2; grid-row:span 2; }

/* фон карточки */
.tile.bg-lime { background:var(--lime); } .tile.bg-lime:hover { background:#c7ff62; }
.tile.bg-sky  { background:var(--sky); }  .tile.bg-sky:hover { background:#7ed8fb; }
.tile.bg-ink  { background:var(--ink); color:#fff; } .tile.bg-ink:hover { background:#2a2a26; }
.tile.bg-lime .mono, .tile.bg-sky .mono, .tile.bg-lime p, .tile.bg-sky p { color:var(--ink); }
.tile .meta .mono { color:var(--ink); }
.tile.bg-ink p { color:#fff; }
.tile.bg-image { color:#fff; background:#333 center/cover no-repeat; }
/* Фон карточки — картинка или видео — лежит под содержимым и закрывает её
   целиком. При наведении медленно и едва заметно приближается. */
.tile .bgmedia { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1); transition:transform 2.4s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.tile:hover .bgmedia { transform:scale(1.07); }
@media (prefers-reduced-motion: reduce) { .tile .bgmedia { transition:none; } .tile:hover .bgmedia { transform:none; } }
.tile.bg-image > *:not(.bgmedia) { position:relative; z-index:1; }
.tile.bg-image p { color:#fff; }
.tile.bg-image h2 { color:#fff; }
.tile.bg-lime h2, .tile.bg-sky h2 { color:var(--ink); }

/* Знак, надпись аудитории и описание живут по тем же правилам, что и
   название: на светлом фоне чёрные, на тёмном и на картинке белые. Серый
   на карточках терялся. */
.tile.bg-ink .meta .mono, .tile.bg-image .meta .mono { color:#fff; }
.tile.bg-ink .ico, .tile.bg-image .ico { color:#fff; opacity:1; }
.tile.bg-sand .meta .mono, .tile.bg-sand .ico { color:var(--ink); }

/* подвал */
/* Подвал: отсечка — линия через весь экран (подвал во всю ширину окна,
   граница по его верху), слева логотип с подписью, слоган, юрлицо и
   копирайт. */
.foot { border-top:1px solid var(--ink); padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,64px); font-size:14px; color:var(--grey); }
.foot .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.foot p { margin:0; }
.foot__brand { display:flex; flex-direction:column; gap:10px; }
.foot__logo img { height:var(--logo-h); width:auto; display:block; }
.foot__slogan { margin-top:8px !important; font-family:"Montserrat", sans-serif; font-weight:300; font-size:clamp(16px,1.4vw,20px); color:var(--ink); }
.foot__legal, .foot__copy { font-size:13px; }
/* Логотипы партнёров — справа в подвале, в ряд, одной высоты. */
/* Логотипы партнёров — справа в подвале, в одну строку, одной высоты. */
.foot__partners { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:clamp(16px,2.4vw,40px);
  max-width:100%; }
.foot__partners[hidden] { display:none; }
.foot__partners a { display:block; flex:none; transition:opacity .2s ease; }
.foot__partners a:hover { opacity:.75; }
.foot__partners img { height:clamp(28px,3.4vw,48px); width:auto; display:block; flex:none; }
/* На телефоне все логотипы — в одну строку: высота подстраивается под
   ширину экрана (12.2 — суммарная ширина пяти логотипов на пиксель высоты,
   с запасом), но не больше 26px. Строка — на всю ширину, логотипы
   расставлены по ней равномерно. */
@media (max-width:640px) { .foot__partners { width:100%; justify-content:space-between; gap:12px; } .foot__partners img { height:min(26px, calc((100vw - 92px) / 12.2)); } }

/* MVP: вокруг видео о школе рамки раздела нет; между разделом и блоком
   перед подвалом, и перед самим подвалом — воздух (решение Олега). */
.is-mvp .chapter__blocks::after { display:none; }
.is-mvp .chapter { padding-bottom:clamp(64px,8vw,128px); }
.follow { padding-bottom:clamp(80px,10vw,160px); }

@media (max-width:1100px) { .grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:760px) {
  .hero .row { grid-template-columns:1fr; align-items:start; }
  /* Одна колонка: ширина у всех блоков одинаковая, поэтому форм-фактор
     работает высотой. Вертикальный блок 1:2 остаётся вдвое выше обычного,
     широкий 2:1 просто занимает всю ширину. minmax, чтобы длинный текст
     не обрезался. */
  .grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(var(--row, 190px), auto); }
  /* В одну колонку ширины у всех одинаковые, поэтому крупные блоки —
     и вертикальный, и длинный — выражаются высотой: занимают две строки. */
  .tile.f21, .tile.f12, .tile.f22 { grid-column:auto; grid-row:span 2; }
  .nav .links { display:none; }
}

/* --- Кнопка на карточке --- */
/* Живёт в верхней строке карточки, поэтому прижата к правому краю с тем же
   отступом, что и картинка в углу, и никогда не наезжает ни на подпись
   аудитории слева, ни на саму картинку справа. */
.tile .cta { margin-left:auto; cursor:pointer; white-space:nowrap;
  font-family:"Graphik", sans-serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; background:var(--ink); color:#fff;
  transition:background .25s ease, color .25s ease; }
.tile .cta:hover { background:var(--sky); color:var(--ink); }
.tile.bg-ink .cta, .tile.bg-image .cta { background:#fff; color:var(--ink); }
.tile.bg-ink .cta:hover, .tile.bg-image .cta:hover { background:var(--sky); }
.tile.bg-sky .cta:hover { background:var(--paper); }

/* --- Попап кнопки --- */
/* Тот же язык, что у панели меню на сайте бюро: белый лист, мягкая тень,
   плавное появление сверху. */
.modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:var(--gutter); background:rgba(20,20,15,0); transition:background .4s ease; }
.modal.is-open { background:rgba(20,20,15,.4); }
/* display:flex выше перебивает стандартное [hidden] — без этого закрытый
   попап оставался в разметке невидимым слоем. */
.modal[hidden] { display:none; }
.modal__panel { position:relative; width:min(520px, 100%); max-height:calc(100vh - var(--gutter)*2);
  overflow-y:auto; background:var(--paper); color:var(--ink);
  box-shadow:0 24px 48px rgba(20,20,15,.18);
  padding:clamp(28px,4vw,56px); transform:translateY(-16px); opacity:0;
  transition:transform .45s ease, opacity .45s ease; }
.modal.is-open .modal__panel { transform:translateY(0); opacity:1; }
/* Крестик всегда поверх содержимого: форма Битрикса рисует свой белый лист
   и иначе накрывает его. */
.modal__close { position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; padding:0;
  border:0; background:var(--paper); cursor:pointer; }
.modal__close span { position:absolute; left:7px; top:16px; width:20px; height:2px; background:var(--ink);
  transition:background .2s ease; }
.modal__close span:first-child { transform:rotate(45deg); }
.modal__close span:last-child { transform:rotate(-45deg); }
.modal__close:hover span { background:var(--sky); }
.modal__frame { width:100%; min-height:min(70vh, 560px); border:0; display:block; }
/* На телефоне попап — на весь экран (после базовых правил .modal__panel,
   иначе их max-height перебивает). */
@media (max-width:640px) {
  .modal { padding:0; align-items:stretch; }
  .modal__panel { width:100%; max-height:none; height:100%; padding:56px 20px 32px; }
}

/* Макет формы внутри попапа */
.form { display:flex; flex-direction:column; gap:16px; }
.form__tag { margin:0; }
.form h3 { font-size:clamp(22px,2.4vw,30px); }
.form__lead { margin:0; font-size:15px; color:var(--grey); }
.form__field { display:flex; flex-direction:column; gap:7px; }
.form__field input, .form__field textarea { font:inherit; font-size:15px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line); border-radius:3px; background:var(--paper);
  transition:border-color .2s ease; }
.form__field textarea { min-height:84px; resize:vertical; }
.form__field input:focus, .form__field textarea:focus { outline:none; border-color:var(--ink); }
.form .btn { font-family:"Graphik", sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 22px; border:0; background:var(--sky); color:var(--ink); cursor:pointer;
  transition:background .25s ease; }
.form .btn:hover { background:var(--lime); }
.form__note { margin:0; font-size:13px; color:var(--grey); }

/* Форма Битрикс24 в попапе — перекрашена под сайт, вид как у макета выше:
   подпись над полем мелкими капсами, поле в тонкой рамке, наша кнопка.
   Стили формы Битрикс подгружает позже наших и с селекторами в два класса,
   поэтому здесь на класс больше (.b24-host.b24-host …). Контейнер .b24-host —
   тело попапа и форма в блоке перед подвалом. */
.form--head { margin-bottom:22px; }
.b24-host.b24-host .b24-form { font-family:"Circe", -apple-system, system-ui, sans-serif; color:var(--ink);
  --b24-font-family:"Circe", -apple-system, system-ui, sans-serif; --b24-text-color:var(--ink);
  --b24-primary-color:var(--sky); --b24-primary-text-color:var(--ink); --b24-background-color:transparent;
  --b24-field-background-color:var(--paper); --b24-field-border-color:var(--line);
  --b24-field-focus-background-color:var(--paper); }
.b24-host.b24-host .b24-form-wrapper { max-width:none; margin:0; padding:0; border:0; box-shadow:none; background:transparent; }
.b24-host.b24-host .b24-form-wrapper.b24-form-border-bottom, .b24-host.b24-host .b24-form-wrapper::after { border:0; }
.b24-host.b24-host .b24-form-header-padding, .b24-host.b24-host .b24-form-content { padding:0; }
.b24-host.b24-host .b24-form-field { margin-bottom:16px; }
.b24-host.b24-host .b24-form-control-container { display:flex; flex-direction:column; gap:7px; }
.b24-host.b24-host .b24-form-control-label { position:static; order:-1; transform:none; opacity:1; padding:0; margin:0;
  font-family:"Graphik", sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); pointer-events:auto; }
.b24-host.b24-host .b24-form-control-required { color:var(--ink); }
.b24-host.b24-host .b24-form-control { height:auto; min-height:0; padding:11px 13px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:3px; box-shadow:none;
  transition:border-color .2s ease; }
.b24-host.b24-host textarea.b24-form-control { height:120px; min-height:96px; padding-top:11px; resize:vertical; }
.b24-host.b24-host .b24-form-control:focus { outline:none; border-color:var(--ink); background:var(--paper); }
.b24-host.b24-host .b24-form-control-alert .b24-form-control { border-color:#c0392b; }
.b24-host.b24-host .b24-form-control-alert-message { font:12px "Circe", sans-serif; color:#c0392b; background:none;
  padding:0; position:static; max-width:none; animation:none; }
.b24-host.b24-host .b24-form-control-alert-message::before, .b24-host.b24-host .b24-form-control-alert-message::after { display:none; }
.b24-host.b24-host .b24-form-control-alert { margin-bottom:16px !important; }
.b24-host.b24-host .b24-form-field-agreement label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.b24-host.b24-host .b24-form-field-agreement input { accent-color:var(--ink); margin:2px 0 0; flex:none; }
.b24-host.b24-host .b24-form-field-agreement .b24-form-control-required { position:static; margin-left:-6px; }
.b24-host.b24-host .b24-form-control-desc, .b24-host.b24-host .b24-form-field-agreement-link { font-size:12px; line-height:1.45;
  color:var(--grey); }
.b24-host.b24-host .b24-form-field-agreement-link { text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.b24-host.b24-host .b24-form-field-agreement-link:hover { color:var(--ink); }
.b24-host.b24-host .b24-form-btn-container { padding:6px 0 0; }
.b24-host.b24-host .b24-form-btn { width:auto; height:auto; padding:14px 22px; border:0; border-radius:0;
  font-family:"Graphik", sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--sky); color:var(--ink); box-shadow:none; transition:background .25s ease; }
.b24-host.b24-host .b24-form-btn:hover { background:var(--lime); }
/* «Заряжено Битрикс24» выключено в настройках формы; ссылку «Сообщить о
   нарушении» Битрикс не отключает — прячем (решение Олега 19.09.2026). */
.b24-host.b24-host .b24-form-sign { display:none; }
/* Окно с полным текстом согласия — тот же лист, что и попап. */
.b24-host.b24-host .b24-window-popup { border-radius:0; box-shadow:0 24px 48px rgba(20,20,15,.18); }
.b24-host.b24-host .b24-window-popup-title { font-family:"Montserrat", "Styrene", sans-serif; font-weight:700;
  letter-spacing:-.02em; font-size:18px; color:var(--ink); }
.b24-host.b24-host .b24-window-popup-body, .b24-host.b24-host .b24-window-popup-body * {
  font-family:"Circe", sans-serif; font-size:14px; line-height:1.5; color:var(--ink); }
.b24-host.b24-host .b24-window-close { background-color:var(--ink); border-radius:0; opacity:1; }
.b24-host.b24-host .b24-form-btn-white { background:var(--paper); border:1px solid var(--ink); }
.b24-host.b24-host .b24-form-btn-white:hover { background:var(--fog); }
.b24-host.b24-host .b24-form-state-text, .b24-host.b24-host .b24-form-state-text * { font-family:"Circe", sans-serif; color:var(--ink); }
/* Экран после отправки — в цветах сайта, а не зелёный #a0be47 Битрикса:
   лайм, чёрная галочка в белом круге, текст — Montserrat, как заголовки.
   Действует для всех форм на сайте (и в блоке перед подвалом, и в окне
   «Интересно»). Ошибка — чёрный фон с белым текстом. */
.b24-host.b24-host .b24-form-state-container .b24-form-state { border-radius:0; }
.b24-host.b24-host .b24-form-state-container .b24-form-success { background-color:var(--lime); }
.b24-host.b24-host .b24-form-success-icon { width:96px; height:96px; margin:0 0 22px; filter:none;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a18' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 46px no-repeat;
  border-radius:50%; }
.b24-host.b24-host .b24-form-success .b24-form-state-text,
.b24-host.b24-host .b24-form-success .b24-form-state-text * { font-family:"Montserrat", sans-serif; font-weight:600;
  font-size:clamp(18px,1.6vw,22px); line-height:1.35; color:var(--ink); opacity:1; }
.b24-host.b24-host .b24-form-state-container .b24-form-error { background-color:var(--ink); }
.b24-host.b24-host .b24-form-error .b24-form-state-text, .b24-host.b24-host .b24-form-error .b24-form-state-text * { color:#fff; }
.b24-host.b24-host .b24-form-state-container .b24-form-error .b24-form-btn { background:var(--sky); color:var(--ink); border:0; }

/* Блок перед подвалом: текст и круглые кнопки-ссылки слева, форма справа. */
.follow { border-top:1px solid var(--ink); padding:clamp(56px,7vw,110px) 0; }
.follow__in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(32px,5vw,96px); align-items:start; }
.follow__text { display:flex; flex-direction:column; gap:16px; }
.follow h2 { font-size:clamp(28px,4.4vw,64px); }
.follow__lead { margin:0; font-family:"Montserrat", sans-serif; font-weight:300; font-size:clamp(16px,1.8vw,23px);
  line-height:1.3; color:#3c3c36; max-width:36em; }
.follow__links { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,40px); }
.follow__link { display:flex; flex-direction:column; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  width:clamp(128px,11.2vw,160px); text-align:center; }
.follow__circle { width:clamp(128px,11.2vw,160px); height:clamp(128px,11.2vw,160px); border-radius:50%; background:var(--sky);
  display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .25s ease; }
.follow__circle svg { width:42%; height:42%; fill:var(--ink); }
.follow__circle.has-avatar { overflow:hidden; background:var(--fog); }
.follow__circle img { width:100%; height:100%; object-fit:cover; display:block; }
.follow__link:hover .follow__circle.has-avatar { background:var(--fog); box-shadow:0 0 0 3px var(--lime); }
.follow__link:hover .follow__circle { background:var(--lime); transform:translateY(-2px); }
.follow__label { font-family:"Graphik", sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; line-height:1.35;
  white-space:pre-line; }
.follow__bots { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(18px,2.4vw,28px); }
.follow__bot { display:inline-flex; align-items:center; gap:14px; padding:8px 22px 8px 8px; border-radius:999px;
  background:var(--sky); color:var(--ink); text-decoration:none; transition:background .25s ease; }
.follow__bot:hover { background:var(--lime); }
.follow__bot-ava { width:48px; height:48px; border-radius:50%; overflow:hidden; background:var(--fog); flex:none; }
.follow__bot-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.follow__bot-label { font-family:"Graphik", sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:900px) { .follow__in { grid-template-columns:1fr; } }
/* На телефоне круглые кнопки каналов и кнопка бота — по центру экрана. */
@media (max-width:640px) { .follow__links, .follow__bots { justify-content:center; } }

/* --- Разделы продуктов --- */
/* Одна длинная страница: под сеткой идут разделы, у каждого свой якорь,
   к которому ведёт плитка. */
.chapter { padding:clamp(56px,7vw,110px) 0 0; scroll-margin-top:80px; }
.chapter { --head-gap: clamp(28px,3.5vw,52px); }
.chapter__head { position:relative; display:flex; flex-direction:column; gap:12px; margin-bottom:var(--head-gap); }
/* Картинка в шапке раздела: стоит справа и чуть висит над линией, которой
   начинается первый блок. */
/* pointer-events:auto — картинка кликабельна (см. bounceOnClick() в site.js):
   подлетает шариком по клику, как собачка над шагами. Курсор — обычный, не
   указатель ссылки: клик тут пасхалка, а не переход. */
.chapter__deco { position:absolute; right:0; bottom:calc(var(--head-gap) * -1 + 26px);
  width:clamp(170px,20vw,320px); color:var(--sky); pointer-events:auto;
  transform-origin:50% 50%; }
.chapter__deco svg, .chapter__deco img { display:block; width:100%; height:auto; }
/* Подзаголовок раздела крупным кеглем (см. .chapter__lead ниже) иногда
   переносится на вторую строку — резервируем под собаку справа место в
   самой шапке, а не только у неё самой, иначе перенесённая строка уезжает
   ей за спину. */
@media (min-width: 861px) {
  .chapter__head { padding-right: clamp(190px,22vw,340px); }
}
/* Та же картинка работает и в блоке с подробностями: висит у его верхней
   линии справа. */
.block { position:relative; }
.block__deco { position:absolute; right:0; top:calc(clamp(20px,2.4vw,32px) * -1 - 26px);
  width:clamp(120px,13vw,210px); color:var(--sky); pointer-events:auto;
  transform-origin:50% 50%; }
.block__deco svg, .block__deco img { display:block; width:100%; height:auto; }
/* На узком экране большая собака (картинка в шапке раздела/блока) не
   пропадает — просто выходит из абсолютного наложения на текст в обычный
   поток, уменьшенная, и встаёт НАД заголовком (order:-1 — в разметке она
   идёт после него, «шапка» у раздела — flex-колонка, значит порядок можно
   поменять визуально, не трогая DOM), без наезда на сетку карточек над
   разделом. Перекрытие при клике (собака подлетает шариком) — это нормально,
   речь только про состояние покоя. */
@media (max-width: 860px) {
  .chapter__deco, .block__deco { position:static; display:block; width:104px; margin:0 0 12px; order:-1; }
  /* Большая собака над заголовком раздела (не .block__deco у инфоблоков) —
     на мобильном вдвое крупнее и прижата к правому краю экрана: своё
     выравнивание по поперечной оси (шапка раздела — flex-колонка) и
     отрицательный правый отступ на ширину --gutter, чтобы дотянуться до
     самого края вьюпорта, а не только до края .wrap. */
  .chapter__deco { width:208px; align-self:flex-end; margin-right:calc(var(--gutter) * -1); }
}
.chapter__head .mono { margin:0; color:var(--ink); }
.chapter h2 { font-size:clamp(28px,4.4vw,64px); }
.chapter__lead { margin:0; font-family:"Montserrat", sans-serif; font-weight:300; letter-spacing:-.01em;
  font-size:clamp(16px,1.8vw,23px); line-height:1.3; color:#3c3c36; max-width:44em; }
.chapter__blocks { display:flex; flex-direction:column; gap:var(--block-gap); position:relative; }
/* Декоративная рамка вокруг всей группы инфоблоков раздела — только на
   широком экране. Отступ фиксированный (px, не vw/clamp) специально: это
   не адаптивный элемент разметки, а чисто визуальный штрих для большого
   экрана. При сужении окна рамка не подстраивается под его границы — она
   просто уезжает за them, обрезаясь overflow-x:hidden на body, а верстка
   самих блоков внутри никак не меняется. */
/* Рамка шире (было -56px по бокам, стало -96px) — снизу на ту же разницу
   (40px) добавлен внутренний отступ (было -40px, стало -80px). Сверху
   тот же сдвиг вверх (top:-40px) резал верхнюю линию прямо по большой
   собаке в шапке раздела — та свисает чуть ниже своей шапки по задумке
   (см. .chapter__deco), но не настолько; вернули top:0, вровень со
   старой full-bleed чертой, где собака и раньше слегка нависала, не
   пересекая линию. Если нужен зазор сверху — увеличивать не через это
   свойство, а через --head-gap самой шапки раздела. */
/* z-index выше 10 — при наведении на аватар в мозаике его .block
   поднимается до z-index:10 (см. .block:has(.mosaic__cell:hover) ниже),
   и если у этого блока цветной фон, доходящий до той же линии (-96px),
   рамка иначе оказывалась бы под его заливкой и пропадала на время ховера. */
.chapter__blocks::after { content:""; position:absolute; top:0; bottom:-80px;
  left:-96px; right:-96px; border:1px solid var(--ink); pointer-events:none; z-index:11; }
/* Рамка свисает на 80px ниже последнего блока — под последним разделом
   страницы это место надо оставить, иначе рамка заезжает на подвал. */
#sections > .chapter:last-child { padding-bottom:calc(80px + clamp(56px,7vw,110px)); }

/* Внутренний отступ между линией (границей блока/верхом рамки у первого
   блока) и заголовком блока — втрое больше обычного (было
   clamp(20px,2.4vw,32px)). */
.block { border-top:1px solid var(--ink); padding-top:clamp(60px,7.2vw,96px); }
.chapter__blocks > .block:first-child { border-top:none; }
.block__text { display:flex; flex-direction:column; gap:14px; }
.block h3 { font-size:clamp(24px,2.8vw,40px); }
.block__lead { margin:0; font-family:"Montserrat", sans-serif; font-weight:300; letter-spacing:-.01em;
  font-size:clamp(16px,1.8vw,23px); line-height:1.3; color:var(--grey); }
/* Отступ от заголовка с подписью до остального контента блока — втрое
   больше обычного зазора между абзацами (14px): к нему обычный gap уже
   идёт, добавляем сверху ещё 28px = 42px итого. Оба варианта — когда
   подписи нет и после заголовка сразу текст/факты/шаги, и когда подпись
   есть. */
/* :not(.steps-wrap) — у неё уже свой margin-top:78px под трек собаки
   (см. .steps-wrap ниже), рассчитанный под её высоту; наше правило было
   более специфичным и молча его перебивало до 28px, из-за чего собака
   наезжала на текст над ней, когда шаги идут сразу после подписи. */
.block__text > h3 + *:not(.block__lead):not(.steps-wrap),
.block__text > .block__lead + *:not(.steps-wrap) { margin-top:28px; }
/* Обычный наборный текст инфоблока — тоньше обычного (Circe грузится
   только в regular/extrabold, настоящего тонкого начертания у неё нет,
   поэтому здесь Montserrat, как у подписи/цитаты/фактов рядом). Подпись
   (.block__lead) — тоже <p>, но со своим кеглем/цветом, её не трогаем. */
.block p:not(.block__lead) { margin:0; max-width:40em; font-family:"Montserrat", sans-serif;
  font-weight:300; letter-spacing:-.005em;
  /* У Montserrat при том же font-size буквы заметно шире/крупнее Circe
     (~18% по замеру) — без компенсации текст визуально увеличился бы,
     хотя размер в CSS не менялся. Возвращаем прежний зрительный размер. */
  font-size:14.5px; }

/* Цвет фона инфоблока — то же поле «Цвет фона», что у плитки сетки и у
   шага (bgClassFor() в site.js). Заливка — вровень с рамкой вокруг группы
   блоков (те же -56px по бокам, см. .chapter__blocks::after), не за неё:
   цвет блока должен оставаться внутри общей рамки, а не бежать до края
   окна. Если у соседнего блока тоже есть цвет, стык между ними
   расширяется на половину зазора .chapter__blocks в каждую сторону —
   прогала бумажного фона между двумя цветными блоками быть не должно
   (см. .block--join-*, классы ставит renderSections() при совпадении
   цвета соседей). */
.block.bg-lime, .block.bg-sky, .block.bg-ink, .block.bg-sand, .block.bg-fog, .block.bg-image {
  z-index:0; border-top:none; padding-bottom:clamp(20px,2.4vw,32px); }
.block.bg-lime::after, .block.bg-sky::after, .block.bg-ink::after, .block.bg-sand::after, .block.bg-fog::after {
  content:""; position:absolute; top:0; bottom:0; left:-96px; right:-96px; z-index:-1; }
.block.bg-lime::after  { background:var(--lime); }
.block.bg-sky::after   { background:var(--sky); }
.block.bg-ink::after   { background:var(--ink); }
.block.bg-sand::after  { background:#e8e6da; }
.block.bg-fog::after   { background:var(--fog); }
.block.bg-ink  { color:#fff; }
.block.bg-ink .block__lead, .block.bg-ink p { color:#fff; }
.block.bg-sky em { color:var(--ink); }
.block.bg-image { color:#fff; }
.block.bg-image .block__lead, .block.bg-image p { color:#fff; }
.block.bg-image > *:not(.bgmedia) { position:relative; z-index:1; }
.block .bgmedia { position:absolute; top:0; bottom:0; left:-96px; right:-96px;
  width:auto; height:auto; min-height:100%; object-fit:cover; z-index:-1; }
.block--join-prev.bg-lime::after, .block--join-prev.bg-sky::after,
.block--join-prev.bg-ink::after, .block--join-prev.bg-sand::after, .block--join-prev.bg-fog::after,
.block--join-prev .bgmedia {
  top:calc(var(--block-gap) / -2); }
.block--join-next.bg-lime::after, .block--join-next.bg-sky::after,
.block--join-next.bg-ink::after, .block--join-next.bg-sand::after, .block--join-next.bg-fog::after,
.block--join-next .bgmedia {
  bottom:calc(var(--block-gap) / -2); }
/* Последний блок группы, если он цветной, — заливка должна доходить до
   самого низа рамки (-80px), а не обрываться на границе своего блока:
   иначе между концом цвета и рамкой снизу виден чистый бумажный фон
   вместо цвета. Сверху не нужно — рамка там начинается вровень с первым
   блоком (top:0), обычный top:0 у заливки уже совпадает. */
.chapter__blocks > .block:last-child[class*="bg-"]::after,
.chapter__blocks > .block:last-child .bgmedia { bottom:-80px; }

.block__media { position:relative; border-radius:3px; overflow:hidden; background:rgba(0,0,0,.06); }
.block__media img, .block__media video { width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .4s ease; }
.block__media.is-loaded img, .block__media.is-loaded video { opacity:1; }
.block__media.is-loaded { background:none; }
.block__media::after { content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--sky), transparent); animation:load 1.1s linear infinite; }
.block__media.is-loaded::after { display:none; }

/* текст и картинка — в две колонки, картинка справа */
.block--media { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,3vw,48px); align-items:start; }
.block--wide { display:flex; flex-direction:column; gap:clamp(18px,2vw,28px); }
.block--wide .block__media { width:100%; }

/* Плеер ролика во всю ширину (видео в блоке «картинка во всю ширину») */
.player { aspect-ratio:16/9; background:var(--ink); }
.player video { object-fit:contain; background:var(--ink); }
.player__play { position:absolute; inset:0; margin:auto; width:88px; height:88px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); cursor:pointer; transition:transform .15s ease, background .15s ease; }
.player__play::before { content:""; position:absolute; left:36px; top:28px;
  border-style:solid; border-width:16px 0 16px 26px; border-color:transparent transparent transparent var(--ink); }
.player__play:hover { background:var(--sky); transform:scale(1.05); }
.player.is-playing .player__play { display:none; }
.player__sound { position:absolute; left:16px; top:16px; z-index:2; padding:10px 16px; border:0; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink); font-family:"Graphik", sans-serif; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.player__sound:hover { background:var(--lime); }
.player__sound[hidden] { display:none; }

/* цифры и факты */
/* Фиксированное число колонок, а не auto-fit «сколько влезет»: с ним
   строки выходили неровными (например 6 фактов в одной, 3 — в другой,
   с большим пустым хвостом). Три в ряд — ровно и на десктопе, и на
   планшете (там просто оборачивается по счётчику). */
.facts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px,2.4vw,36px);
  margin-top:10px; }
@media (max-width: 700px) { .facts { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px) { .facts { grid-template-columns:1fr; } }
/* min-width:0 — иначе крупная подпись до тире («выпускников») не
   переносится по словам, а раздвигает свою колонку сетки шире границы
   и наезжает на соседнюю ячейку (стандартный «grid blowout» с текстом
   без пробелов). */
.fact { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fact__number { font-family:"Montserrat", sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(48px,6vw,88px); line-height:1; }
/* Число тоже красится, если факт был в |акценте| вместе с подписью
   (см. factNode() в site.js — само число не проходит через обычный
   разбор richTitle, поэтому цвет ставит явный класс). */
.fact__number.is-accent, .fact__label.is-accent, .fact__note.is-accent { color:var(--sky); }
.block.bg-sky .fact__number.is-accent, .block.bg-sky .fact__label.is-accent,
.block.bg-sky .fact__note.is-accent { color:var(--ink); }
/* Короткая подпись до тире («потоков», «выпускников») — средним кеглем,
   тем же начертанием, что число, но заметно мельче его. */
.fact__label { font-family:"Montserrat", sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(26px,3vw,38px); line-height:1.1; }
/* Пояснение после тире (или весь остаток, если тире нет) — та же цитата
   отзыва по кеглю и весу, тонкий Montserrat, что и .testimonials__quote. */
.fact__note { font-family:"Montserrat", sans-serif; font-weight:300; letter-spacing:-.01em;
  font-size:clamp(16px,1.8vw,23px); line-height:1.3; color:#3c3c36; }

@media (max-width: 860px) {
  .block--media { grid-template-columns:1fr; }
  .block--media .block__media { order:-1; }
}

/* --- Мозаика выпускников --- */
/* Имена показываются (решение Олега 17.09.2026, см. src/alumni.js) — отзывы
   к лицу больше не привязаны, крутятся анонимно рядом (.testimonials, ниже),
   решение от 18.09.2026. Ячейка квадратная, размер тянется под ширину блока. */
.block--mosaic { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(24px,3vw,48px); align-items:start; }

/* Слайдшоу анонимных отзывов — под текстом левой колонки блока
   school.alumni (см. testimonialSlideshow() в site.js). Не тихая курсивная
   цитата бордером — Олег попросил громче по форме 18.09.2026: жирный
   заголовочный кегль (Montserrat, как у h3/фактов), плотный акцентный
   корешок слева и графичный знак кавычек (заливка, без фона) — тот же
   язык «плашки-акцента», что у full-bleed линий и у чисел в цифрах и
   фактах, а не цветовая заливка блока. */
.testimonials { position:relative; padding:20px 24px; margin-top:32px;
  border-left:2px solid var(--ink); background:var(--paper); }
.testimonials__mark { display:block; width:34px; height:auto; margin-bottom:14px; color:var(--sky); }
.testimonials__quote { margin:0; font-family:"Montserrat", sans-serif; font-weight:300;
  letter-spacing:-.01em; font-size:clamp(16px,1.8vw,23px); line-height:1.3; color:var(--ink);
  transition:opacity .3s ease, transform .3s ease; }
.testimonials__quote.is-fading { opacity:0; transform:translateY(6px); }
@media (prefers-reduced-motion: reduce) { .testimonials__quote { transition:none; } }
.mosaic { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:0; }
.mosaic__gap { aspect-ratio:1/1; background:var(--paper); }
.mosaic__gap--lime { background:var(--lime); }
.mosaic__gap--sky { background:var(--sky); }
.mosaic__cell { position:relative; aspect-ratio:1/1; background:#e8e6da; }
.mosaic__frame { position:absolute; inset:0; overflow:hidden; }
.mosaic__frame img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease; }
.mosaic__cell:hover { z-index:5; }
.mosaic__cell:hover .mosaic__frame img { transform:scale(1.06); }

/* Карточка участника при наведении. У цветного блока (bg-lime/bg-sky/...)
   свой стек — нужен, чтобы full-bleed заливка (z-index:-1) не вылезала за
   блок, — а из-за этого попап без доп. z-index у самого .block упирался бы
   в следующий блок раздела и обрезался им. Поднимаем весь .block, пока в
   нём наведена ячейка мозаики, — попап всплывает целиком поверх соседей. */
.block:has(.mosaic__cell:hover) { z-index:10; }
.mosaic__card { position:absolute; width:240px; background:var(--paper); color:var(--ink);
  box-shadow:0 18px 40px rgba(20,20,15,.22); z-index:6;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; }
.mosaic__cell:hover .mosaic__card { opacity:1; transform:translateY(0); }
.mosaic__card { padding:10px; }
.mosaic__card img { width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top; display:block; }
.mosaic__about { display:flex; flex-direction:column; gap:6px; padding:12px 4px 4px; }
.mosaic__about b { font-family:"Montserrat", sans-serif; font-weight:600; font-size:15px; line-height:1.15; }
.mosaic__about .mono { color:var(--grey); }
@media (max-width: 860px) {
  .block--mosaic { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .mosaic { grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); }
}



/* Шаги внутри блока: карточки, привязанные к нему в смарт-процессе. */
/* Рамки рисуем на самих шагах, а не фоном под сеткой: в последнем ряду
   может не хватать карточек, и фон вылезал бы чёрным прямоугольником. */
.steps { list-style:none; counter-reset:step; margin:6px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:0;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.step { counter-increment:step; position:relative; overflow:hidden; background:var(--paper);
  padding:18px 18px 20px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  display:flex; flex-direction:column; gap:7px; transition:background .15s ease; }
.step::before { content:counter(step); font-family:"Montserrat", sans-serif; font-weight:700;
  font-size:26px; line-height:1; letter-spacing:-.03em; color:var(--sky); }
.step b { font-family:"Montserrat", sans-serif; font-weight:600; font-size:16px; line-height:1.15; }
.step p { margin:0; font-size:14px; line-height:1.45; color:#3c3c36; max-width:none; }

/* Шаг — та же карточка, что и в сетке-навигаторе: цвет из поля «Цвет
   карточки», при наведении та же лёгкая подсветка, фон может быть
   картинкой или видео (см. bgClassFor()/appendBgMedia() в site.js). */
.step:hover { background:var(--fog); }
.step.bg-sand { background:#e8e6da; } .step.bg-sand:hover { background:var(--fog); }
.step.bg-fog { background:var(--fog); } .step.bg-fog:hover { background:var(--paper); }
.step.bg-lime { background:var(--lime); } .step.bg-lime:hover { background:#c7ff62; }
.step.bg-sky  { background:var(--sky); }  .step.bg-sky:hover { background:#7ed8fb; }
.step.bg-ink  { background:var(--ink); color:#fff; } .step.bg-ink:hover { background:#2a2a26; }
.step.bg-image { color:#fff; background:#333 center/cover no-repeat; }
.step.bg-ink p, .step.bg-image p { color:#fff; }
.step.bg-sky::before, .step.bg-lime::before { color:var(--ink); }
.step .bgmedia { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1); transition:transform 2.4s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.step:hover .bgmedia { transform:scale(1.07); }
@media (prefers-reduced-motion: reduce) { .step .bgmedia { transition:none; } .step:hover .bgmedia { transform:none; } }
.step.bg-image > *:not(.bgmedia) { position:relative; z-index:1; }

/* Собачка над сеткой шагов: стоит на её верхней линии и бегает вдоль. */
/* Над сеткой шагов оставляем полосу — по ней бегает собачка. */
.steps-wrap { position:relative; margin-top:78px; }
.steps__track { position:absolute; left:0; right:0; bottom:100%; height:62px; pointer-events:none; }
.steps__track .dog { color:var(--sky); }
@media (max-width: 860px) { .steps__track { display:none; } }

/* Собака лопается, как шарик (bounceOnClick → burstBalloon в site.js):
   клочки, вспышка и всплывающая снизу новая собака — в слое поверх
   страницы, клики сквозь него проходят. */
.balloon-layer { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.balloon-shred, .balloon-ring, .balloon-copy { position:absolute; display:block; }
.balloon-ring { border:3px solid; border-radius:50%; }
.balloon-copy { transform-origin:50% 50%; }
.balloon-copy svg, .balloon-copy img { display:block; width:100%; height:auto; }