/* NT Somic — лицензия SIL OFL 1.1 (свободная, см. public/fonts/NT_Somic_LICENSE.txt), self-hosted */
@font-face {
  font-family: 'NT Somic';
  src: url('/fonts/NTSomic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('/fonts/NTSomic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NT Somic';
  src: url('/fonts/NTSomic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Палитра — сверено с фреймом Colors в Figma */
  --color-accent-red: #DC5139;
  --color-text-dark: #2F2F2F;
  --color-bg-white: #FFFFFF;
  --color-bg-cream: #FFFBF7;
  --color-deco-pink: #F5CBDE;
  --color-deco-green: #92D48D;
  --color-deco-coral: #FFB09B;
  --color-deco-lavender: #B9AAD9;
  --color-deco-yellow: #F4D469;
  --color-btn-primary: #15B0EF;
  --color-btn-secondary: #DBFBFB;

  /* Типографика — фрейм Fonts в Figma */
  --font-main: 'NT Somic', 'Segoe UI', sans-serif;
  /* Fluid-заголовки: cap упирается в исходные px на ≥1280 (макет 1440 не меняется),
     ниже 1280 плавно уменьшаются к ~38/33px на 1024, чтобы не переполнять узкие колонки */
  --fs-header-48: clamp(38px, 3.75vw, 48px); /* 3.75vw·1280 = 48px */
  --fs-header-42: clamp(33px, 3.28vw, 42px); /* 3.28vw·1280 ≈ 42px */
  --fs-header-26: 26px;
  --fs-header-24: 24px;
  --fs-header-20: 20px;
  --fs-text-18: 18px;
  --fs-text-16: 16px;
  --fs-text-14: 14px;

  --radius-card: 30px;
  --radius-card-sm: 20px;
  --container-width: 1280px;
}

* { box-sizing: border-box; }

/* clip (не hidden!) режет горизонтальное переполнение, НЕ делая body скролл-контейнером:
   иначе position: sticky у scroll-pin-блоков перестаёт залипать. hidden — фолбэк старым браузерам. */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-text-18);
  color: var(--color-text-dark);
  background: var(--color-bg-cream);
}

h1, h2, h3 { margin: 0 0 16px; font-weight: 700; line-height: 1.15; }
h1 { font-size: var(--fs-header-48); }
h2 { font-size: var(--fs-header-42); }
h3 { font-size: var(--fs-header-24); }
p { line-height: 1.5; margin: 0 0 16px; }
ul { padding-left: 20px; line-height: 1.6; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

/* Кнопки — pill-форма, TZ_front 8.1 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: var(--fs-text-16);
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--color-btn-primary); color: #fff; }
.btn-primary:hover { background: #0f9bd6; }
.btn-secondary { background: #fff; color: var(--color-text-dark); border: 1px solid var(--color-btn-primary); }
.btn-secondary:hover { background: var(--color-btn-secondary); }
.btn-outline { background: transparent; border: 1px solid var(--color-text-dark); color: var(--color-text-dark); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Шапка */
.header-wrap { padding-top: 24px; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 6px 32px;
  position: relative;
  z-index: 30;
}
.site-header .logo { display: flex; align-items: center; order: 2; flex-shrink: 0; }
/* Лого по центру: nav-left/nav-right — равные flex:1 по бокам от лого (Figma: 3 пункта слева, лого по центру, 3 справа) */
.site-header nav { display: flex; gap: 28px; flex: 1; }
.site-header nav.nav-left { order: 1; }
.site-header nav.nav-right { order: 3; justify-content: flex-end; }
.site-header nav a { text-decoration: none; font-size: var(--fs-text-16); color: var(--color-text-dark); text-transform: uppercase; white-space: nowrap; transition: color 0.15s ease; }
/* Активный пункт (текущая страница) и наведение — оранжевая подсветка */
.site-header nav a.active { color: var(--color-accent-red); font-weight: 700; }
.site-header nav a:hover { color: var(--color-accent-red); }
.burger { display: none; background: none; border: none; font-size: 26px; cursor: pointer; order: 4; }

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav {
    display: none; flex-direction: column; gap: 12px; flex: 0 0 100%;
    background: #fff; padding: 12px 4px; order: 5;
  }
  .site-header nav.nav-right { padding-top: 0; justify-content: flex-start; }
  .site-header nav.open { display: flex; }
  .burger { display: block; }
}

/* Секции */
.section { padding: 64px 0; position: relative; }
.section-heading { max-width: 700px; }
.section-center { text-align: center; }
.section-center .section-heading { margin: 0 auto 40px; }

/* Desktop-адаптив: узкий ноутбук/desktop 1024–1200 (макет 1440 не затрагивается).
   Каскад по убыванию ширины: 64px (≥1200) → 48px (≤1200) → 40px (≤1024).
   Только padding-top/bottom: .section и .container часто висят на одном элементе,
   и шорткат `padding: Npx 0` обнулял бы горизонтальные поля контейнера. */
@media (max-width: 1200px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  .container { padding: 0 20px; }
}
@media (max-width: 1024px) {
  .section { padding-top: 40px; padding-bottom: 40px; }
}
.eyebrow { text-transform: uppercase; font-size: var(--fs-text-14); letter-spacing: 0.05em; color: var(--color-text-dark); opacity: 0.7; }

/* Hero */
.hero { text-align: center; padding-top: 40px; }
.hero h1 { max-width: 720px; margin: 12px auto 16px; }
.hero p.lead { max-width: 570px; margin: 0 auto 28px; }
.hero .btn-row { justify-content: center; margin-bottom: 40px; }
/* width:100% — иначе max-width:900px перебивает глобальный img{max-width:100%} и на узких
   экранах картинка вылезает на 900px (клипается overflow-x, выглядит увеличенной). */
.hero-illustration { width: 100%; max-width: 900px; margin: 0 auto; }

/* Карточки-плитки общего назначения */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards-grid, .cards-grid-2, .cards-grid-4 { grid-template-columns: 1fr; } }

.card {
  border-radius: var(--radius-card);
  padding: 28px;
}
.card h3 { font-size: var(--fs-header-20); margin-bottom: 8px; }
.card p { font-size: var(--fs-text-16); margin-bottom: 0; }

/* radius 20 — принципы работы (About "Почему выбирают", Team "Как мы работаем") по Figma-инспектору */
/* min-height 280 — в макете карточки высокие (~300px), не подгоняются под текст */
.card-sm { border-radius: var(--radius-card-sm); padding: 24px; min-height: 280px; text-align: center; }
.card-sm h3 { font-size: var(--fs-header-20); margin-bottom: 8px; }
.card-sm p { font-size: var(--fs-text-16); margin-bottom: 0; }

/* Team «Как мы работаем» (Figma 1:799/803/807/811, карточки 305×300 без иконки):
   контент вертикально по центру, заголовок 23px. About-карточки (с иконкой)
   не трогаем — там иконка сверху, контент заполняет высоту. */
.card-sm:not(:has(.card-icon)) {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-sm:not(:has(.card-icon)) h3 { font-size: 23px; margin-bottom: 20px; }

/* Белая карточка-пилюля с цветной обводкой (About "Среда") — radius 60, stroke 2px */
.outline-pill {
  background: #fff; border-radius: 60px; border: 2px solid var(--pill-color, var(--color-deco-yellow));
  padding: 16px 28px; text-align: center; font-weight: 700;
}

/* Hero-баннер с фото справа (About/Team) — левая колонка текст, правая фото, декор-круги за пределами блока */
.hero-banner-split { display: flex; align-items: center; gap: 32px; text-align: left; position: relative; overflow: visible; }
.hero-banner-split .btn-row { justify-content: flex-start; }
.hero-split-text { flex: 1 1 600px; position: relative; z-index: 2; }
.hero-split-text h1, .hero-split-text .lead { max-width: none; margin-left: 0; margin-right: 0; }
.hero-split-photo { width: 32%; max-width: 420px; aspect-ratio: 417/513; object-fit: cover; border-radius: var(--radius-card); flex-shrink: 0; position: relative; z-index: 2; }
.hero-split-circle { position: absolute; z-index: 1; aspect-ratio: 1; }
.hero-split-circle img { width: 100%; height: 100%; }
@media (max-width: 900px) { .hero-banner-split { flex-direction: column; } .hero-split-photo { width: 100%; max-width: 320px; } .hero-split-circle { display: none; } }

/* Обёртка секции-заголовка с одиночной декор-точкой (Team "Как мы работаем") */
.section-heading-dots { position: relative; }

/* Флэттенированный паттерн точек фона под текстом (About "Мы выстраиваем занятия") */
.section-dots-wrap { position: relative; }
.section-dots-pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; }
/* HERO-03: заголовок/абзац в about «естественно/интерес» — fluid вместо inline 32px.
   ≥1280 = 32px (как в макете), ниже плавно до 24px, чтобы не переполнять короткую рамку паттерна. */
.section-dots-wrap h2,
.section-dots-wrap p {
  font-size: clamp(24px, 2.5vw, 32px);
}

/* Иконка на карточке (About "Почему выбирают") — крупная иллюстрация по центру, по макету */
.card-icon { width: 130px; height: 130px; object-fit: contain; margin: 0 auto 12px; }

/* Точный разброс пилюль категорий (About "Мы создали среду") — координаты из Figma */
.pill-scatter-precise { position: relative; }
.pill-scatter-item { position: absolute; text-align: center; white-space: nowrap; }
.pill-scatter-text { position: absolute; margin: 0 !important; text-align: center; }
.pill-scatter-graphic { position: absolute; height: auto; }
@media (max-width: 900px) {
  .pill-scatter-precise { aspect-ratio: auto !important; max-width: 100% !important; }
  .pill-scatter-item, .pill-scatter-text, .pill-scatter-graphic { position: static !important; width: auto !important; display: block; margin: 8px auto !important; }
}

/* Одна большая фотография (About "Атмосфера, в которой...") */
.atmosphere-photo-wrap { position: relative; }
.atmosphere-photo { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-card); }

/* Карточка фото интерьера (About "Среда") — реальное фото с цветным бейджем-подписью поверх */
.interior-photo-card { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; }
.interior-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.interior-photo-card .tag-badge { position: absolute; left: 12px; bottom: 12px; }

/* Цветная пилюля-бейдж (About "Вы всегда знаете" / "Приходите, чтобы") — radius 60, залита цветом */
.solid-pill {
  background: var(--pill-color, var(--color-deco-yellow)); border-radius: 60px;
  padding: 16px 28px; font-weight: 700;
}

/* Маленький цветной бейдж-подпись внутри карточки (Programs "Результат", Events описание формата, Team роль) — radius 15 */
.tag-badge {
  display: inline-block; background: var(--pill-color, var(--color-deco-yellow)); border-radius: 15px;
  padding: 10px 16px; font-size: var(--fs-text-14); color: var(--color-text-dark);
}

/* Зелёный герой-баннер (About/Team верх страницы) — тот же паттерн, что .big-banner, но без доп. паддинга снизу */
.hero-banner { background: var(--color-deco-green); border-radius: var(--radius-card); padding: 48px; text-align: center; }
.hero-banner .btn-row { justify-content: center; }

/* Hero с двумя круглыми фото по бокам (Programs, Events) */
.hero-photo-duo { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hero-photo-duo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hero-photo-duo-dots { position: relative; overflow: visible; }
/* Events hero: композиция по макету Figma (1440×800) — абсолютное позиционирование.
   Координаты в % от арт-борда, поэтому масштабируется пропорционально. */
.events-hero { position: relative; max-width: 1440px; margin: 0 auto; aspect-ratio: 1440 / 800; overflow: visible; }
.events-hero-decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: 0; }
.events-hero-photo { position: absolute; aspect-ratio: 1; border-radius: 50%; object-fit: cover; z-index: 1; }
.events-hero-photo-left { left: 5.35%; top: 21%; width: 20.5%; }      /* Figma 77,168 · 295px */
.events-hero-photo-right { left: 74.44%; top: 51%; width: 21.67%; }   /* Figma 1072,408 · 312px */
.events-hero-text { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); width: 48%; max-width: 680px; text-align: center; z-index: 2; }
.events-hero-text h1 { text-transform: uppercase; margin: 0 0 20px; }
.events-hero-text .lead { margin: 0 auto 28px; }
@media (max-width: 900px) {
  .events-hero { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .events-hero-decor { display: none; }
  .events-hero-photo { position: static; width: 140px; }
  .events-hero-photo-right { order: 3; }
  .events-hero-text { position: static; transform: none; width: 100%; max-width: 100%; order: 2; }
}

/* Флэттенированный конфетти-паттерн на баннере пакета (Events) */
/* Декор пакета (гирлянды/шары/конфетти) — полностью покрывает баннер (холст 1280×1032 = фрейм Figma) */
.package-decor-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; pointer-events: none; border-radius: inherit; }
@media (max-width: 900px) { .package-decor-overlay { display: none; } }
@media (max-width: 900px) { .hero-photo-duo { flex-direction: column; } .hero-photo-duo img { width: 120px; height: 120px; } .hero-photo-duo-dots .deco-dot { display: none; } }

/* Декоративное круглое фото, занимающее пустую ячейку сетки (Programs, ряд 2) */
.program-grid-decor { display: flex; align-items: center; justify-content: center; }
.program-grid-decor img { max-width: 260px; width: 100%; }
@media (max-width: 900px) { .program-grid-decor { display: none; } }

/* Фото на карточках программ (Programs) */
.program-cards-photo { grid-template-columns: repeat(3, 1fr); }
.program-card-photo { width: 100%; height: 234px; object-fit: cover; border-radius: var(--radius-card) var(--radius-card) 0 0; }
@media (max-width: 900px) { .program-cards-photo { grid-template-columns: 1fr; } }

/* Фото-иллюстрация "Как проходят занятия" (Programs) — высота 530px и кроп со сдвигом вверх по макету (1:1835) */
.howitworks-photo { width: 100%; height: 530px; object-fit: cover; object-position: center 26%; border-radius: var(--radius-card); margin-top: 24px; }

/* Возрастные карточки программ (Главная, Programs) */
.age-cards .card:nth-child(5) { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.age-cards .card:nth-child(5) img { width: 200px; flex-shrink: 0; }
@media (max-width: 900px) { .age-cards .card:nth-child(5) { grid-column: span 1; flex-direction: column; } }

/* Белая пилюля с возрастом/этапом на возрастных карточках (Home) — Figma-узел "stage" */
.stage-badge {
  display: inline-block; background: #fff; color: var(--color-text-dark); border-radius: 999px;
  padding: 8px 16px; font-size: var(--fs-text-14); font-weight: 700; margin-bottom: 14px;
}

/* Доп. занятия карточки с иконкой — контент по центру, крупная иконка (по макету 59:97/59:99) */
/* flex-колонка: цена+кнопка пиннятся вниз (margin-top:auto), кнопки выравниваются по одному уровню */
.extra-card { text-align: center; display: flex; flex-direction: column; }
.extra-card h3 { font-size: var(--fs-header-24); }
.extra-card img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 16px; }
.interest-price { margin-top: auto; font-weight: 700; }

/* Карусель доп.занятий — в макете 4 карточки в ряд, у нас реальных пунктов больше:
   вместо второго неполного ряда — горизонтальный скролл с "выглядывающей" 5-й карточкой */
.cards-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-btn-primary) transparent;
}
.cards-carousel .card {
  flex: 0 0 305px;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .cards-carousel .card { flex: 0 0 75%; min-width: 0; }
}

/* Якорь /programs#courses (ABOUT-01): отступ от верха, чтобы шапка (в т.ч. если станет
   фиксированной) не перекрывала заголовок блока при переходе по ссылке. */
#courses {
  scroll-margin-top: 100px;
}

/* Горизонтальная прокрутка блока при вертикальной прокрутке страницы (ТЗ, задача 2).
   Класс is-pinned и inline-высоту ставит public/js/scroll-pin.js — без JS,
   на мобильном и при prefers-reduced-motion блок остаётся обычным
   горизонтальным скроллером, вёрстка не меняется. */
.scroll-pin.is-pinned > .scroll-pin-stage {
  position: sticky;
}
.scroll-pin.is-pinned .cards-carousel {
  /* прокрутку ведёт страница — своя полоса и снап только мешают */
  overflow-x: hidden;
  scroll-snap-type: none;
  padding-bottom: 0;
}

/* Бегущая строка скидок (Programs) — полоса на всю ширину, тёмно-зелёный UPPERCASE на светлом фоне */
.discount-ticker {
  width: 100vw; margin-left: calc(-50vw + 50%);
  background: #E9F5E8; color: #2E7D32; border-radius: 0;
  padding: 18px 32px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  font-weight: 700; margin-top: 8px; margin-bottom: 32px; font-size: var(--fs-text-16);
  text-transform: uppercase;
}
.discount-ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: #2E7D32; display: inline-block; margin-right: 10px; }

/* Пилюли "для развития/обучения/..." вокруг текста (About) */
.pill-scatter-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Таймлайн "путь развития" */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; margin-top: 40px; }
.timeline-3 { grid-template-columns: repeat(3, 1fr); }
/* Линия проходит через точки (от первой до правого края), толщина/центр — по макету (узел 1:2905) */
.timeline::before {
  content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 6px;
  background: var(--color-deco-coral); border-radius: 3px;
}
.timeline-step { position: relative; padding-top: 44px; }
.timeline-step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-deco-yellow);
}
.timeline-step h3 { font-size: var(--fs-header-20); }
.timeline-step p { font-size: var(--fs-text-16); }

/* Большая цветная плашка-секция (праздники на Главной) */
.big-banner {
  border-radius: var(--radius-card);
  padding: 56px;
  padding-bottom: 190px;
  position: relative;
}
.big-banner .section-heading { position: relative; z-index: 2; }
.pill-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pill-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 10px 18px; font-size: var(--fs-text-14);
}
.pill-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pill-color, var(--color-accent-red)); }
.banner-photo {
  position: absolute; border-radius: 50%; object-fit: cover; border: 6px solid #fff; z-index: 3;
}
.banner-photo-1 { width: 200px; height: 200px; left: 48px; bottom: -40px; }
.banner-photo-2 { width: 170px; height: 170px; right: 64px; top: -30px; }
@media (max-width: 900px) { .banner-photo { display: none; } .big-banner { padding-bottom: 40px; } }

/* Праздничный баннер на Главной (узел Figma "holiday 5", 1277x603) — декор (гирлянда/шарики/конфетти)
   единым PNG-фоном, фото — точные % из макета */
.holiday-banner {
  aspect-ratio: 1277 / 603;
  background-image: url('/images/holiday-decor.png');
  background-size: cover;
  background-position: center;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.holiday-banner .section-heading { position: relative; z-index: 2; }
.holiday-banner .banner-photo-1 { left: 2.7%; top: 37.1%; width: 15.7%; height: auto; aspect-ratio: 1; bottom: auto; right: auto; }
.holiday-banner .banner-photo-2 { left: 80.6%; top: 56.7%; width: 15.4%; height: auto; aspect-ratio: 1; right: auto; bottom: auto; }
@media (max-width: 900px) {
  .holiday-banner { aspect-ratio: auto; padding: 32px 20px; background-position: top center; }
  .holiday-banner .banner-photo { display: none; }
}

/* Баннер с 4 фото-вставками + декор-кругами (About "Ждём вас в клубе") */
.final-photo-banner { position: relative; overflow: visible; padding-bottom: 56px; }
.final-banner-photo { position: absolute; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 6px solid #fff; z-index: 2; }
.final-banner-circle { position: absolute; z-index: 1; aspect-ratio: 1; }
.final-banner-circle img { width: 100%; height: 100%; }
@media (max-width: 900px) { .final-banner-photo, .final-banner-circle { display: none; } }

/* CTA-баннер с одним крупным фото (Team «Запишитесь на пробное занятие») —
   пропорция арт-борда Figma 1280×478, чтобы фото 32% помещалось по высоте */
.cta-photo-banner { aspect-ratio: 1280 / 478; display: flex; align-items: center; }
.cta-photo-banner .section-heading { margin: 0; }
@media (max-width: 900px) { .cta-photo-banner { aspect-ratio: auto; display: block; } }

/* Фото на карточках форматов праздника (Events) */
.event-card-photo { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.event-card-photo-side { width: 550px; height: 356px; flex: 1 1 550px; border-radius: var(--radius-card) 0 0 var(--radius-card); }
@media (max-width: 900px) { .event-card-photo-side { width: 100%; height: 260px; flex-basis: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; } }

/* Карточки "Выберите формат" (Events) — фото вписано с отступом, а не во всю ширину карточки, TZ_dorabotki_figma_2026-07-18 */
.card.event-format-card { padding: 40px; }
.card.event-format-card .event-card-photo { border-radius: var(--radius-card); aspect-ratio: 7 / 3; height: auto; margin-bottom: 30px; }
.card.event-format-card h3 { margin-bottom: 16px; }
.card.event-format-card p { margin-bottom: 30px; }
.card.event-format-card .tag-badge { display: block; }

/* Кнопка фиксированной ширины по макету (карточки форматов, баннер пакета "Праздник") */
.btn-wide { width: 292px; max-width: 100%; font-weight: 700; }
.btn-block { width: 100%; }
/* Компактная кнопка (карточки «по интересам» — 159×47 в макете, не 64px) */
.btn-sm { min-height: 47px; padding: 0 28px; }

/* Блок "Организуем мероприятие без лишних забот" (Events) — инлайн-форма вместо кнопки-триггера модалки, TZ_dorabotki_figma_2026-07-18 */
.party-form-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: flex-start; }
.party-form-illustration { max-width: 320px; margin: 32px auto 0; }
/* Карточка формы — светлее фона страницы, чтобы белые поля выделялись (в макете форма на отдельной карточке) */
.party-form-card { background: #F5F0E9; border-radius: var(--radius-card); padding: 56px; }
.party-form-card form { display: flex; flex-direction: column; gap: 16px; }
.pill-input {
  width: 100%; height: 75px; border: 1px solid #EDE6DE; border-radius: var(--radius-card); background: #fff;
  padding: 0 28px; font-family: inherit; font-size: var(--fs-text-16); color: var(--color-text-dark);
}
textarea.pill-input { padding-top: 27px; resize: none; }
.party-form-consent { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-text-14); cursor: pointer; }
.party-form-consent input[type="checkbox"] {
  width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; border-radius: 5px;
  border: 1px solid var(--color-text-dark); accent-color: var(--color-btn-primary);
}
@media (max-width: 900px) { .party-form-section { grid-template-columns: 1fr; } .party-form-card { padding: 32px; } }

/* Баннер пакета "Праздник" (Events) */
.package-banner { text-align: center; }
/* Включает/Дополнительно — одной карточкой с вертикальными разделителями (по макету 1:1402), робастно к числу пунктов */
.package-list-card { display: inline-flex; background: #fff; border-radius: var(--radius-card-sm); overflow: hidden; margin-top: 16px; max-width: 100%; vertical-align: top; position: relative; z-index: 2; }
.package-list-item { min-width: 200px; padding: 28px 24px; border-left: 1px solid #EDE6DE; display: flex; flex-direction: column; align-items: center; }
.package-list-item:first-child { border-left: none; }
.package-list-item img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 12px; }
.package-list-item strong { font-size: var(--fs-header-20); }
.package-list-item span { font-size: var(--fs-text-14); opacity: 0.75; margin-top: 4px; }
@media (max-width: 700px) { .package-list-card { flex-wrap: wrap; } .package-list-item { flex: 1 1 50%; min-width: 0; border-left: none; } }
.package-icons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.package-icon-card {
  background: #fff; border-radius: var(--radius-card-sm); padding: 16px 20px; width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: var(--fs-text-14);
}
.package-icon-card img { width: 56px; height: 56px; object-fit: contain; }

/* Отзывы */
.review-card {
  background: #fff; border: 1px solid var(--review-color, var(--color-deco-green)); border-radius: var(--radius-card-sm);
  padding: 24px; text-align: left;
}
.stars { color: var(--color-deco-yellow); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.review-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--review-color, var(--color-deco-lavender));
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0;
}
.review-meta strong { display: block; }
.review-meta span { font-size: var(--fs-text-14); opacity: 0.7; }

/* Команда — анонс на Главной */
.badge-pill {
  display: inline-block; background: var(--color-deco-yellow); border-radius: 999px;
  padding: 10px 24px; font-weight: 700; font-size: var(--fs-text-16); margin-bottom: 16px;
}
/* Аватары команды разнесены на всю ширину (по макету 1:2696), без наложения */
.avatar-strip { display: flex; justify-content: space-between; align-items: center; margin: 40px 0; flex-wrap: wrap; gap: 12px 8px; }
.avatar-strip img {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
}
@media (max-width: 900px) {
  .avatar-strip { justify-content: center; }
  .avatar-strip img { width: 60px; height: 60px; }
}

/* Финальный CTA (жёлтый блок) */
.final-cta {
  background: var(--color-deco-yellow); border-radius: var(--radius-card);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px;
  padding: 48px; overflow: hidden;
}
/* Фото в круге + декоративный круг за ним (по макету — banner 8 на Home, «Куда направить» на Programs) */
.final-cta-photo { position: relative; display: flex; align-items: center; justify-content: center; }
.final-cta-photo img { border-radius: 50%; aspect-ratio: 1; width: 100%; max-width: 400px; height: auto; object-fit: cover; position: relative; z-index: 2; }
.final-cta-circle { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.4); left: 6%; bottom: 4%; z-index: 1; }
@media (max-width: 900px) { .final-cta { grid-template-columns: 1fr; } .final-cta-photo img { max-width: 280px; } }

/* Декоративные точки фона (паттерн из макета — Home hero и т.п.) */
.deco-dot { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
/* Декоративное кольцо-контур (Home: допзанятия, «Программы», «Путь развития» — узлы 1:2918/1:2982/1:2912) */
.deco-ring { position: absolute; border-radius: 50%; border: 2px solid var(--ring-color, var(--color-deco-pink)); z-index: -1; pointer-events: none; }
@media (max-width: 700px) { .deco-ring { display: none; } }
.hero-with-dots { position: relative; overflow: hidden; }
@media (max-width: 700px) { .hero-with-dots .deco-dot { display: none; } }

/* Цитата директора (Team) — большие декоративные кавычки « » до и после (макет 1:989) */
.director-quote {
  position: relative; margin: 14px 0 0; padding: 0 40px 0 50px; color: var(--color-text-dark);
}
.director-quote::before {
  content: "«"; position: absolute; left: 0; top: -4px; font-size: 40px; font-weight: 700;
  color: var(--color-btn-primary); line-height: 1;
}
.director-quote::after {
  content: "»"; position: absolute; right: 0; bottom: -20px; font-size: 40px; font-weight: 700;
  color: var(--color-btn-primary); line-height: 1;
}

/* Команда — карточка директора (макет 1:989: 1280×285, фото 225 круг на жёлтом диске,
   порядок имя → бейдж → описание → цитата) */
.team-director {
  display: flex; align-items: center; gap: 42px;
  padding: 30px; margin-bottom: 24px; min-height: 285px;
  background: var(--color-bg-white); border: 1px solid #eee;
}
.director-photo { position: relative; flex-shrink: 0; width: 225px; height: 225px; }
.director-photo::before {
  content: ""; position: absolute; left: -6px; top: -6px; width: 225px; height: 225px;
  border-radius: 50%; background: var(--color-deco-yellow);
}
.director-photo img {
  position: relative; width: 225px; height: 225px; border-radius: 50%;
  object-fit: cover; border: 4px solid var(--color-bg-white);
}
.director-body { flex: 1; min-width: 260px; }
.director-body h3 { font-size: var(--fs-header-24); margin-bottom: 8px; }
.director-body > .tag-badge { display: inline-block; margin-bottom: 12px; }

.team-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .team-grid-3 { grid-template-columns: 1fr; } }
.team-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
/* «Читать больше» — кнопка-ссылка (не <a href="#">, чтобы клик не прыгал наверх);
   раскрывает скрытый расширенный текст педагога (макет 186:203). */
.team-more-btn {
  background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer;
  color: var(--color-btn-primary); font-weight: 700; font-size: var(--fs-text-16);
  font-family: inherit; text-align: left;
}
.team-more-btn:hover { text-decoration: underline; }
.team-more-text { margin: 8px 0 0; }
.team-more-text[hidden] { display: none; }

/* Модалки */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(47, 47, 47, 0.6);
  z-index: 100; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius-card); padding: 32px; max-width: 480px; width: 90%;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; }

/* Модальные формы заявки (макеты 1:3452 lesson, 1:3349 party): центр. заголовок,
   pill-инпуты с плейсхолдерами (без лейблов), кнопка на всю ширину. */
.modal-form { max-width: 600px; padding: 40px; }
.modal-form h3 { text-align: center; font-size: var(--fs-header-26); margin-bottom: 24px; }
.modal-form form { display: flex; flex-direction: column; gap: 16px; }
.modal-form .pill-input { background: var(--color-bg-cream); border-color: #ede6de; }
.modal-form select.pill-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" fill="none"><path d="M1 1l6 6 6-6" stroke="%232F2F2F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat; background-position: right 28px center;
}
.modal-form select.pill-input:invalid { color: #8a8a8a; }
.modal-form .party-form-consent { margin: 4px 0; }
.modal-form .btn-block { margin-top: 4px; }
.modal-form [data-form-status] { margin: 0; text-align: center; }
@media (max-width: 600px) { .modal-form { padding: 28px 20px; } }

/* Афиши программ — готовый графический постер на весь экран (макеты 1:3234/1:3155/1:3076) */
.afisha-poster-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.afisha-poster-img {
  max-height: 80vh; max-width: 92vw; width: auto; height: auto;
  border-radius: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); display: block;
}
.afisha-close {
  position: fixed; top: 24px; right: 32px; z-index: 110;
  width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--color-text-dark);
  font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .afisha-poster-img { max-height: 76vh; border-radius: 20px; }
  .afisha-close { top: 12px; right: 16px; width: 40px; height: 40px; font-size: 24px; }
  .afisha-poster-wrap { gap: 14px; }
}

.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 6px; font-size: var(--fs-text-14); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #ddd; font-family: inherit; font-size: var(--fs-text-16);
}

/* Контакты — иконки строк "Как с нами связаться" (цветные кружки, как в макете) */
.contact-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.contact-icon { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.contact-text { display: flex; flex-direction: column; gap: 2px; }
.contact-label { text-transform: uppercase; color: #8a8a8a; font-size: var(--fs-text-14); letter-spacing: 0.02em; }
.contact-text strong { color: var(--color-text-dark); font-weight: 600; }

/* Контакты — карта + фото фасада */
.contacts-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contacts-map-grid img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-card-sm); }
@media (max-width: 900px) { .contacts-map-grid { grid-template-columns: 1fr; } }

/* Промо-приложения (Контакты) — текст слева, пилюли в ряд, иконки-бейджи сторов */
.app-promo .app-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }
.app-badges { display: flex; gap: 12px; }
.app-store-icon { display: inline-flex; width: 52px; height: 52px; }
.app-store-icon img { width: 100%; height: 100%; object-fit: contain; }
.app-promo-img { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 900px) { .app-promo-img { max-width: 360px; margin: 0 auto; } }

/* Футер */
.site-footer { background: var(--color-deco-lavender); padding: 48px 0; margin-top: 64px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-copyright { margin: 0; font-size: var(--fs-text-14); }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { text-decoration: none; font-size: var(--fs-text-16); }
.footer-contacts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-contacts a { text-decoration: none; }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social img { width: 40px; height: 40px; }

/* ─── Фаза 2: узкий desktop 901–1024 — снятие тесноты сеток/timeline/пакета ───
   Диапазон 901–1024, чтобы не пересекаться с мобильным схлопом @900 (→1fr) и @700 (→1fr !important).
   Раскладка 1440 не затрагивается. */
@media (min-width: 901px) and (max-width: 1024px) {
  /* GRID-01: about «Почему выбирают», home доп.занятия (≤4), team — было 4 колонки */
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* GRID-02: отзывы/age home, фото-карточки программ, команда — было 3 колонки */
  .cards-grid,
  .program-cards-photo,
  .team-grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* GRID-03: путь развития — 4 (home) / 3 (programs .timeline-3) шага были стиснуты */
  .timeline,
  .timeline-3 { grid-template-columns: repeat(2, 1fr); }
  /* GRID-04: список «Праздник» — вместо клипа многих «Дополнительно» гориз. скролл в пределах контейнера */
  .package-list-card { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
}

/* ─── Фаза 2: GRID-05 — боковое фото «Тематические» (Events) на 901–1200 ───
   Уменьшаем базис фото, чтобы текст-колонка (flex:2 1 400px) не стискивалась.
   Side-by-side сохраняется; на ≤900 работает существующий полноширинный стек (@900). */
@media (min-width: 901px) and (max-width: 1200px) {
  .event-card-photo-side { flex-basis: 400px; width: 400px; }
}

/* ─── Фаза 2: GRID-06 — шапка на 901–1100 ───
   6 uppercase-пунктов + лого начинают жаться перед бургером (900): уменьшаем gap/шрифт и
   боковой padding шапки. Бургер по-прежнему включается только на 900. */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header { padding: 6px 20px; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: var(--fs-text-14); }
}

/* ─── Фаза 3: hero/aspect-ratio блоки на 901–1200 — страховка от переполнения текстом ───
   Жёсткий aspect-ratio → min-height-ПОЛ. Значение = calc((100vw − 40px) · пропорция), где
   (100vw − 40px) — ширина блока при ≤1200 (контейнер даёт padding 20px по бокам, Фаза 1). При
   влезающем контенте высота = прежней (нейтрально), но это ПОЛ: рамка растёт под текст, а не клипает.
   Диапазон 901–1200 не трогает мобильный стек @900/@700 и раскладку ≥1200/1440. */
@media (min-width: 901px) and (max-width: 1200px) {
  /* HERO-01: events-hero (aspect в CSS; дети absolute — min-height держит высоту под текст/фото) */
  .events-hero {
    aspect-ratio: auto;
    min-height: calc((100vw - 40px) * 0.5556); /* 800/1440 */
  }
  /* HERO-02: holiday-banner (aspect в CSS; flex-контент теперь растит фон, а не спиллит поверх него) */
  .holiday-banner {
    aspect-ratio: auto;
    min-height: calc((100vw - 40px) * 0.4722); /* 603/1277 */
  }
  /* HERO-03: section-dots-wrap (aspect ИНЛАЙН в about.ejs → !important; рамка растёт под текст) */
  .section-dots-wrap {
    aspect-ratio: auto !important;
    min-height: calc((100vw - 40px) * 0.3259); /* 407/1249 */
  }
  /* HERO-04: pill-scatter-precise (aspect ИНЛАЙН в about.ejs → !important; держит высоту разброса) */
  .pill-scatter-precise {
    aspect-ratio: auto !important;
    min-height: calc((100vw - 40px) * 0.2918); /* 389/1333 */
  }
  /* HERO-05: cta-photo-banner (aspect в CSS; пол под absolute-фото 32%, чтобы не свисало за край) */
  .cta-photo-banner {
    aspect-ratio: auto;
    min-height: calc((100vw - 40px) * 0.3734); /* 478/1280 */
  }
}

/* ─── Галерея-карусель (ТЗ docs/whirligig.md) ───
   Пропорция задана aspect-ratio → нет скачков вёрстки (CLS) и плавный fluid-ресайз.
   Десктоп — кадр 1277×530, мобайл (в блоке ≤767) — 343×230. */
.gallery { position: relative; max-width: 1277px; margin: 0 auto; }
.gallery-viewport { overflow: hidden; border-radius: var(--radius-card); }
.gallery-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease;
  will-change: transform;
}
.gallery-track.is-dragging { transition: none; }
.gallery-slide { flex: 0 0 100%; min-width: 0; }
.gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1277 / 530;
  object-fit: cover;
  border-radius: var(--radius-card);
  cursor: zoom-in;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-dark);
  font-size: 30px;
  line-height: 44px;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.gallery-arrow:hover { background: #fff; }
.gallery-arrow-prev { left: 16px; }
.gallery-arrow-next { right: 16px; }
.gallery-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.gallery-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d9d2ca;
  cursor: pointer;
}
.gallery-dot[aria-selected='true'] { background: var(--color-btn-primary); }
/* Лайтбокс — полноэкранный просмотр */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 24px;
}
.gallery-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  border-radius: var(--radius-card-sm);
  object-fit: contain;
}
.gallery-lightbox-close,
.gallery-lightbox-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-dark);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 44px;
  cursor: pointer;
  padding: 0;
}
.gallery-lightbox-close { top: 20px; right: 20px; font-size: 24px; }
.gallery-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .cards-grid, .cards-grid-2, .cards-grid-4, .timeline, .team-grid-3 { grid-template-columns: 1fr !important; }
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .big-banner, .final-cta { padding: 28px; }
  .footer-inner { flex-direction: column; }
}

/* ─── v1.1 МОБИЛЬНЫЙ ФУНДАМЕНТ ≤767 (макет Figma m/*, 375) ───
   Стоит ПОСЛЕ @700 → переопределяет по источнику при пересечении диапазонов.
   Desktop ≥768 не затрагивается (все правила строго внутри @media max-width:767px). */
@media (max-width: 767px) {
  /* MFND-03: контейнер 16px по бокам + мобильная типографика (fluid от 375, cap = 34/28 как @700) */
  .container { padding: 0 16px; }
  h1 { font-size: clamp(28px, 9.07vw, 34px); }
  h2 { font-size: clamp(24px, 7.47vw, 28px); }
  /* MFND-04: кнопки в столбик, во всю ширину до 292px (макет 292–298px) */
  .btn-row { flex-direction: column; align-items: center; }
  .btn-row .btn { width: 100%; max-width: 292px; }
  /* MFND-01: мобильная шапка — бар ~60px, лого 39px слева, бургер справа (JS-тоггл @900 не трогаем) */
  .header-wrap { padding-top: 16px; }
  .site-header { padding: 10px 16px; }
  .site-header .logo img { height: 39px; }
  /* MFND-02: мобильный футер — колонка, компактнее */
  .site-footer { padding: 32px 0; margin-top: 40px; }
  .footer-inner { flex-direction: column; gap: 24px; }
  .footer-brand img { height: 48px; }
  /* MHERO-01 (home): вернуть паттерн декор-точек (скрыт @700), уменьшить под мобайл; overflow клипает края */
  .hero-with-dots .deco-dot { display: block; transform: scale(0.62); }
  /* MHERO-01 (about/team): вернуть декор-круги (скрыты @900) + мобильный размер фото; overflow клипает.
     width:100% !important перебивает инлайн width:44% у team-фото → фото на всю колонку до 292px */
  .hero-banner-split { overflow: hidden; }
  .hero-split-circle { display: block; }
  .hero-banner-split .hero-split-photo { width: 100% !important; max-width: 292px !important; }
  /* MHERO-02 (programs): мобильные размеры 2 фото (212/195) + вернуть точки (скрыты @900) */
  .hero-photo-duo img:first-of-type { width: 212px; height: 212px; }
  .hero-photo-duo img:last-of-type { width: 195px; height: 195px; }
  .hero-photo-duo-dots .deco-dot { display: block; }
  .hero-photo-duo-dots { overflow: hidden; }
  /* MHERO-02 (events): мобильные размеры 2 фото (222/229) */
  .events-hero { overflow: hidden; }
  .events-hero-photo-left { width: 222px; }
  .events-hero-photo-right { width: 229px; }
  /* MHERO-03 (events): вернуть праздничный декор — оверлей как верхний festive-слой (гирлянда/облака/шары),
     ширина 100% → полоса ~375×208 сверху; z-index:0 под фото; overflow:hidden hero клипает */
  .events-hero-decor {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }
  /* MCONT-01 (home): «Программы» — карточки стопкой 343×248, stage-пилюля + заголовок + описание, без фото */
  .age-cards { gap: 16px; }
  .age-cards .card { min-height: 248px; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
  .age-cards .card:nth-child(5) { gap: 0; }
  .age-cards .card:nth-child(5) img { display: none; }
  .age-cards .stage-badge { margin-bottom: 12px; }
  /* MCONT-01/02: доп.занятия (home) и «по интересам» (programs) — слайдер по макету (одна карточка на экран) */
  .extra-cards-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .extra-cards-slider > .card { flex: 0 0 88%; min-width: 0; scroll-snap-align: start; min-height: 320px; }
  .extra-cards-slider .extra-card img { width: 96px; height: 96px; margin-bottom: 12px; }
  /* MCONT-01/02: таймлайн-путь (home 4 шага, programs 3 шага) — вертикальный коннектор слева */
  .timeline, .timeline-3 { grid-template-columns: 1fr; gap: 0; padding-left: 44px; margin-top: 24px; }
  .timeline::before { top: 14px; bottom: 14px; left: 11px; right: auto; width: 6px; height: auto; }
  .timeline-step { padding-top: 0; padding-bottom: 28px; }
  .timeline-step:last-child { padding-bottom: 0; }
  .timeline-step::before { top: 0; left: -44px; }
  /* MCONT-03 (events): пакет «Праздник» — Включает/Дополнительно вертикально, 1 в ряд, с разделителями
     (перебивает @700 `flex: 1 1 50%` по источнику) */
  .package-list-card { display: flex; flex-direction: column; width: 100%; max-width: 100%; }
  .package-list-item { flex: 0 0 auto; width: 100%; min-width: 0; border-left: none; border-top: 1px solid #ede6de; }
  .package-list-item:first-child { border-top: none; }
  /* MCONT-03 (events): формат-карточки — компактнее под 375 */
  .card.event-format-card { padding: 24px; }
  /* MCONT-04 (about): pill-scatter — пилюли рядами вместо absolute-разброса, текст между рядами */
  .pill-scatter-precise { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .pill-scatter-item { position: static !important; width: auto !important; margin: 0 !important; }
  .pill-scatter-precise > span:nth-of-type(-n + 3) { order: 1; }
  .pill-scatter-text {
    order: 2;
    flex: 0 0 100%;
    position: static !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }
  .pill-scatter-precise > span:nth-of-type(n + 4) { order: 3; }
  .pill-scatter-graphic { display: none; }
  /* MCONT-04 (about): «Мы рядом» — пилюли столбиком */
  .pill-scatter-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .pill-scatter-row .solid-pill { text-align: center; padding: 14px 20px; }
  /* MCONT-04 (about): «Почему выбирают» — карточки 338 стопкой, иконка компактнее */
  .cards-grid-4 { gap: 16px; }
  .card-sm:has(.card-icon) { min-height: 338px; display: flex; flex-direction: column; justify-content: center; }
  .card-icon { width: 96px; height: 96px; margin-bottom: 12px; }
  /* MCONT-05 (team): карточки педагогов — горизонтальные, фото 76px слева, текст справа */
  .team-grid-3 { gap: 16px; }
  .team-card { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; padding: 20px; }
  .team-card > * { grid-column: 2; }
  .team-card > img { grid-column: 1; grid-row: 1 / span 20; width: 76px; height: 76px; margin-bottom: 0; }
  .team-card > .tag-badge { justify-self: start; }
  .team-card h3 { font-size: var(--fs-header-20); margin: 8px 0 4px; }
  .team-card p { margin-bottom: 8px; }
  /* MCONT-05 (team): директор-карточка по макету + принципы «Как мы работаем» 343×300 */
  .team-director { flex-direction: column; align-items: center; text-align: center; padding: 24px; gap: 16px; min-height: 0; }
  .director-photo, .director-photo::before, .director-photo img { width: 150px; height: 150px; }
  .director-body { min-width: 0; }
  .director-quote { text-align: left; padding-left: 40px; margin-top: 12px; }
  .card-sm { min-height: 300px; }
  /* CAR-05: мобильный кадр галереи 343×230 (макет 375); стрелки прячем — листаем свайпом */
  .gallery-slide img { aspect-ratio: 343 / 230; border-radius: var(--radius-card-sm); }
  .gallery-arrow { display: none; }
  .gallery-lightbox { padding: 12px; }
  .gallery-lightbox-prev, .gallery-lightbox-next { width: 40px; height: 40px; font-size: 22px; line-height: 36px; }
  .gallery-lightbox-prev { left: 8px; }
  .gallery-lightbox-next { right: 8px; }
  /* MMEDIA-01/02: вернуть фото баннеров на мобайле (скрыты @900). Desktop-позиции absolute на узкой
     колонке наезжали на текст → на мобайле фото в ПОТОКЕ под контентом, по центру (как в макете). */
  .big-banner, .cta-photo-banner { overflow: hidden; }
  .final-banner-circle { display: none; }
  .final-banner-photo { display: block; position: static; width: 100% !important; margin: 16px auto 0; }
  /* team CTA «Запишитесь»: фото 269px под текстом/кнопкой */
  .cta-photo-banner { display: flex; flex-direction: column; }
  .cta-photo-banner .section-heading { order: 1; }
  .cta-photo-banner .final-banner-photo { order: 2; max-width: 269px; }
  /* about «Ждём вас»: в мобильном макете 2 фото — показываем первые два, под контентом */
  .final-photo-banner { display: flex; flex-direction: column; }
  .final-photo-banner .section-heading { order: 1; }
  .final-photo-banner .final-banner-photo { order: 2; max-width: 183px; }
  .final-photo-banner .final-banner-photo:nth-of-type(n + 3) { display: none; }
  /* Праздники (Главная): 2 круглых фото под контентом — в макете скрыты не были (узел 1:2452).
     Обёртка .banner-photos на десктопе прозрачна (фото absolute), на мобайле — flex-ряд. */
  .holiday-banner { flex-direction: column; }
  .holiday-banner .banner-photos { display: flex; justify-content: center; align-items: flex-start; order: 2; margin-top: 20px; }
  .holiday-banner .banner-photo { display: block; position: static; inset: auto; width: 46%; max-width: 170px; height: auto; aspect-ratio: 1; }
  .holiday-banner .banner-photo-2 { margin-left: -16px; margin-top: 32px; }
  /* Педагоги (Главная): фото 3 в ряд, как в макете (узел 1:2409), а не 5 сжатыми */
  .avatar-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; justify-items: center; }
  .avatar-strip img { width: 100%; height: auto; aspect-ratio: 1; max-width: 110px; }
}