/*
Theme Name: Konigsquash
Theme URI: https://konigsquash.com/
Author: Konigsquash
Description: Чистая тема клуба «Кёнигсквош». Без Elementor и Betheme в рантайме. Токены сняты с продакшена (см. design-system.md).
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: konigsquash
*/

/* ==========================================================================
   1. ТОКЕНЫ
   ========================================================================== */

:root {
  /* --- Бренд ---------------------------------------------------------- */
  /* Один тёмно-синий вместо четырёх (#153B6E / #163B6F / #0E356A / #0E3367) */
  --c-navy:            #153B6E;
  --c-navy-soft:       #45668E;
  --c-link:            #2B6CB0;

  /* --- Акцент --------------------------------------------------------- */
  --c-orange:          #F28D34;   /* главный CTA */
  --c-orange-rule:     #E68631;   /* подчёркивание заголовков */
  --c-orange-text:     #C2670C;   /* акцент в тексте: тот же оранжевый, затемнён до читаемого контраста */

  /* Шкала тарифов — сохранена как есть, от младшего пакета к старшему */
  --c-tier-1:          #FDA503;
  --c-tier-2:          #FF7F00;
  --c-tier-3:          #FD6303;

  /* --- Поверхности ---------------------------------------------------- */
  --c-bg:              #FFFFFF;
  --c-bg-alt:          #F7F7F7;   /* плашка заголовка, подвал */
  --c-bg-widget:       #F7F9FC;   /* блоки бронирования */
  --c-dark:            #191919;

  /* --- Текст ---------------------------------------------------------- */
  /* Шесть серых сведены к двум: основной текст + приглушённый */
  --c-text:            #0E3367;
  --c-text-muted:      #6B7280;
  --c-text-invert:     #FFFFFF;

  /* --- Рамки ---------------------------------------------------------- */
  --c-border:          #E6E9EF;
  --c-border-strong:   #D9E0EA;

  /* --- Гарнитуры ------------------------------------------------------ */
  --font-body:         'Roboto', Helvetica, Arial, sans-serif;
  /* Временно равна основной. Замена Warmovie — правка ровно этой строки. */
  --font-display:      var(--font-body);

  /* --- Ритм ----------------------------------------------------------- */
  --container:         1220px;
  --gutter:            20px;
  --space-unit:        10px;
  --space-widget:      20px;
  --space-text:        15px;
  --space-block:         60px;  /* ритм внутри контента и подвала — не зазор между секциями */
  /* Половина зазора: каждая секция кладёт столько сверху и снизу,
     поэтому между соседними блоками выходит 70 + 70 = 140px. */
  --space-section:       70px;  /* половина обычного зазора */
  --space-section-tight: 55px;  /* уплотнённые секции */
  --space-section-lg:   100px;  /* секции с фоном: больше воздуха внутри */

  /* --- Форма ---------------------------------------------------------- */
  --radius-btn:        10px;
  --radius-card:       10px;
  --radius-chip:       8px;
  --shadow-card:       0 1px 2px rgba(14, 51, 103, 0.06), 0 8px 24px -12px rgba(14, 51, 103, 0.22);
  --shadow-lift:       0 2px 4px rgba(14, 51, 103, 0.06), 0 18px 40px -16px rgba(14, 51, 103, 0.30);
  --shadow-soft:       0 4px 10px rgba(28, 9, 80, 0.07);
  --shadow-header:     0 1px 0 rgba(14, 51, 103, 0.08);
  --ring-active:       0 0 0 3px rgba(21, 59, 110, 0.18);

  --edge-fade:         56px;   /* на сколько заливка растворяется у краёв блока */

  --header-h:          80px;
  --transition:        160ms ease;
}

/* ==========================================================================
   2. СБРОС И БАЗА
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Контакты: пункт с иконкой в круге, подпись сверху и значение крупнее.
   Сам круг и раскладка — общие .feature--inline из блока «Почему стоит
   попробовать», здесь только типографика значения. */
.contact__title { margin: 0 0 6px; color: var(--c-text-muted); }
.contact__value {
  display: inline-block;
  margin: 0;
  color: var(--c-navy);
  font-weight: 600; font-size: 18px; line-height: 1.35;
}
a.contact__value:hover { color: var(--c-orange-text); }

/* Мессенджеры отбиваются от сетки контактов внутренним шагом блока. */
.socials { margin-top: var(--space-block); }
.socials__title { margin: 0 0 var(--space-text); color: var(--c-text-muted); }
.socials__list { display: flex; flex-wrap: wrap; gap: var(--space-text); margin: 0; padding: 0; list-style: none; }
.socials__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: var(--radius-chip);
  background: var(--c-navy); color: var(--c-text-invert);
  font-weight: 600; font-size: 16px; line-height: 1;
  transition: background var(--transition);
}
.socials__link:hover { background: #10305A; color: var(--c-text-invert); }
.socials__link svg { width: 21px; height: 21px; display: block; fill: currentColor; }

/* Иконка MAX приходит файлом; маска красит её в currentColor. */
.social-ico--max {
  width: 21px; height: 21px;
  background: currentColor;
  -webkit-mask: url('assets/img/max.svg') center / contain no-repeat;
          mask: url('assets/img/max.svg') center / contain no-repeat;
}

/* Виджет отзывов Яндекса. На старом сайте обёртка была зашита на 750px,
   из-за чего под мобильный держали вторую копию блока. Здесь ограничение
   мягкое, поэтому копия не нужна. */
.reviews { max-width: 750px; margin-inline: auto; }
.reviews__frame {
  display: block; width: 100%; height: 650px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-bg-alt);
}
.reviews__source {
  display: block;
  margin-top: var(--space-unit);
  color: var(--c-text-muted); font-size: 13px; text-align: center;
}
.reviews__source:hover { color: var(--c-navy); }

/* Таблица реквизитов: подпись слева, значение справа. Инлайновые цвета
   и классы t431__* из Tilda не переносились — только данные. */
.details-table { width: 100%; border-collapse: collapse; }
.details-table th,
.details-table td { padding: 11px 0; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.4; }
.details-table th { width: 38%; padding-right: var(--space-text); color: var(--c-text-muted); font-weight: 400; }
.details-table td { color: var(--c-text); font-weight: 600; }
.details-table tr + tr th,
.details-table tr + tr td { border-top: 1px solid var(--c-border); }

/* Карточка акции. Основа — карточка тренера: тот же кадр, подъём при
   наведении и зум фото. Отличия только в типографике и в том, что кнопка
   прижата к низу, иначе в ряду с разной длиной текста они пляшут. */
.promo { justify-content: flex-start; }
.promo__title { text-transform: none; }
.promo__short { margin: 0 0 var(--space-widget); color: var(--c-text-muted); max-width: none; }
.promo__actions { margin: auto 0 0; }

/* Подзаголовок внутри окна акции — «Клуб дарит», «Мы предлагаем». */
.modal__lead { color: var(--c-text); font-weight: 600; }
.modal__text > * + * { margin-top: var(--space-text); }
.modal__cta { margin: var(--space-widget) 0 0; }

/* Детский сквош: пары «текст + фото». Чётные блоки зеркалятся, чтобы
   колонка с фотографией не выстроилась в один столбец сверху вниз. */
.kids-intro + .kids-intro { margin-top: var(--space-block); }
.kids-intro--flip .kids-intro__text { order: 2; }
.kids-intro--flip .split__media { order: 1; }

/* Карточка тренера на детской странице шире, чем на главной: их всего две.
   Кнопка прижата к низу, иначе при разной длине должности они пляшут. */
.kids-coaches .person { justify-content: flex-start; }
.kids-coaches .btn { margin-top: auto; align-self: center; }

/* Список пунктов регламента Лиги: маркер брендовый, как в окнах тренеров. */
.rule__list { margin: 0; padding: 0; list-style: none; max-width: none; }
.rule__list li { position: relative; padding-left: 20px; }
.rule__list li + li { margin-top: var(--space-unit); }
.rule__list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-orange);
}

/* «О сквоше»: пары «текст + фото». Чётный блок зеркалится, как на детской
   странице, чтобы фотографии не выстроились в один столбец. */
.story--flip .story__text { order: 2; }
.story--flip .split__media { order: 1; }

/* Списки внутри аккордеона правил: маркер брендовый, как в окнах тренеров. */
.accordion__a ul { margin: 0; padding: 0; list-style: none; }
.accordion__a li { position: relative; padding-left: 20px; }
.accordion__a li + li { margin-top: var(--space-unit); }
.accordion__a li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-orange);
}
.accordion__a p + ul { margin-top: var(--space-text); }


/* «Для компаний». Почти всё собрано готовыми компонентами; здесь только
   то, чего в системе ещё не было. */

/* Завершающая строка под сеткой «Что есть у нас в клубе». */
.venue__closing { margin: var(--space-block) 0 0; max-width: 62ch; }

/* Подзаголовок внутри раскрытого пункта аккордеона: «Что входит»,
   «Форматы», «Программы для компаний». */
.acc__lead { color: var(--c-navy); font-weight: 600; }
.accordion__a > * + * { margin-top: var(--space-text); }
.accordion__a .acc__lead { margin-top: var(--space-widget); }

/* Форматы мероприятий внутри пункта — карточки в ряд. */
.formats { margin-top: var(--space-text); }
.format__title { margin: 0 0 var(--space-unit); color: var(--c-navy); }
.format ul { margin: 0; }

/* Карточка аудитории: иконка, заголовок, список «подпись + пояснение». */
.audience { padding: var(--space-widget); }
.audience__title { margin: var(--space-text) 0 var(--space-widget); color: var(--c-navy); }
.audience__list { margin: 0; padding: 0; list-style: none; }
.audience__list li + li { margin-top: var(--space-text); }
.audience__list strong { display: block; color: var(--c-text); }
.audience__list span { display: block; margin-top: 4px; color: var(--c-text-muted); font-size: 15px; line-height: 1.4; }

/* Карточка пакета: три в ряд, сравниваются глазами. Список прижат вниз,
   чтобы у карточек разной длины совпадали заголовки. */
.package { display: flex; flex-direction: column; padding: var(--space-widget); }
.package__name { margin: 0 0 var(--space-unit); color: var(--c-navy); }
.package__dur {
  align-self: flex-start;
  padding: 5px 12px; margin-bottom: var(--space-text);
  border-radius: var(--radius-chip);
  background: var(--c-orange); color: var(--c-text-invert);
  font-weight: 700; font-size: 14px; line-height: 1.2;
}
.package__text { margin: 0 0 var(--space-widget); max-width: none; }
.package__list { margin: auto 0 0; padding: 0; list-style: none; }
.package__list li { position: relative; padding-left: 22px; }
.package__list li + li { margin-top: var(--space-unit); }
.package__list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-orange);
}

/* Карточка пакета: три в ряд, сравниваются глазами. Список прижат вниз,
   чтобы у карточек разной длины совпадали заголовки. */
.package { display: flex; flex-direction: column; padding: var(--space-widget); }
.package__name { margin: 0 0 var(--space-unit); color: var(--c-navy); }
.package__dur {
  align-self: flex-start;
  padding: 5px 12px; margin-bottom: var(--space-text);
  border-radius: var(--radius-chip);
  background: var(--c-orange); color: var(--c-text-invert);
  font-weight: 700; font-size: 14px; line-height: 1.2;
}
.package__text { margin: 0 0 var(--space-widget); max-width: none; }
.package__list { margin: auto 0 0; padding: 0; list-style: none; }
.package__list li { position: relative; padding-left: 22px; }
.package__list li + li { margin-top: var(--space-unit); }
.package__list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-orange);
}


/* «Сквош Кемп». Карточка смены — та же .card .day, что и день недели
   на «Расписании»; здесь добавлены строки часов, цены и кнопки. */
.shift { display: flex; flex-direction: column; }
.shift__dates { white-space: normal; }
.shift__dates--soon { background: var(--c-bg-alt); color: var(--c-text-muted); }
.shift__hours { margin: var(--space-text) 0 0; color: var(--c-text-muted); font-size: 15px; }
.shift__price { margin: 6px 0 0; color: var(--c-orange-text); font-weight: 600; }
.shift__cta { margin: var(--space-widget) 0 0; }
/* У смены без дат кнопки нет — прижимаем содержимое к верху,
   чтобы карточки в ряду не разъезжались по высоте. */
.shift--soon { justify-content: flex-start; }

/* Программа дня: маркер брендовый, как в остальных списках темы. */
.program { margin: 0; padding: 0; list-style: none; max-width: 74ch; }
.program li { position: relative; padding-left: 22px; }
.program li + li { margin-top: var(--space-text); }
.program li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-orange);
}


/* Онлайн-трансляция. На старом сайте ширины колонок были прибиты
   инлайновым CSS к id Elementor-элементов (60.957% / 39.001%) и потому
   применялись сразу ко всем кортам. Здесь обычная сетка на токенах. */
.stream {
  display: grid;
  gap: var(--space-widget);
  grid-template-columns: minmax(0, 61fr) minmax(0, 39fr);
  align-items: start;
}
.stream__video iframe {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border: 0; border-radius: var(--radius-card);
  background: var(--c-navy);
}
/* Табло Rankedin рассчитано на квадрат 300×300 — держим пропорцию
   и не растягиваем на всю колонку. */
.stream__score iframe {
  display: block; width: 100%; max-width: 360px; aspect-ratio: 1 / 1;
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  background: var(--c-bg-alt);
}

/* Сетка турнира и игра-заглушка — во всю ширину контейнера. */
.timetable iframe,
.game iframe {
  display: block; width: 100%; height: 620px;
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  background: var(--c-bg-alt);
}
/* Игра-заглушка. Заставку плеер Internet Archive растягивает на любой заданный
   размер, а запущенная игра рисуется в собственный холст 640×480 и прижимается
   к левому краю. Поэтому кадру задан ровно этот размер: на более широком справа
   оставалось чёрное поле. Пропорция 4:3 — родной режим аркады: верхнее табло с
   очками и пол корта читаются целиком, а фигуры игроков не расплющены вширь,
   как было на 16:10. */
.game iframe {
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}


/* Уведомление о cookie. Раскладка повторяет баннер старого сайта:
   карточка в левом нижнем углу, крестик, заголовок, текст и кнопка. */
.cookie-box {
  display: none;
  position: fixed; left: 30px; bottom: 30px; z-index: 300;
  width: 300px; max-width: calc(100vw - 32px);
  padding: 18px 20px 20px;
  border-radius: var(--radius-card);
  background: var(--c-bg);
  box-shadow: 0 18px 40px rgba(9, 30, 61, 0.28);
  border: 1px solid var(--c-border);
}
.cookie-close {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  border: none; background: none; cursor: pointer;
  color: var(--c-text-muted); font-size: 22px; line-height: 1;
}
.cookie-close:hover { color: var(--c-navy); }
.cookie-close:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.cookie-title { margin-bottom: 8px; color: var(--c-navy); font-weight: 700; font-size: 17px; }
.cookie-text { color: var(--c-text-muted); font-size: 14px; line-height: 1.45; }
.cookie-text a { color: var(--c-orange-text); text-decoration: underline; }
.cookie-btn {
  margin-top: var(--space-text);
  padding: 10px 18px;
  border: none; border-radius: var(--radius-chip); cursor: pointer;
  background: var(--c-orange); color: var(--c-text-invert);
  font-weight: 700; font-size: 14px; letter-spacing: 0.4px;
}
.cookie-btn:hover { background: #E07C22; }
.cookie-btn:focus-visible { outline: 3px solid var(--c-navy); outline-offset: 2px; }

/* Кластер плавающих кнопок. Круглый триггер раскрывает три пилюли над
   собой; пилюли белые с тёмно-синим текстом — на синем триггере они
   читаются лучше, чем синее на синем, и попадают в семейство .btn--ghost. */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 250;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.fab__items {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}
.fab.is-open .fab__items { opacity: 1; visibility: visible; pointer-events: auto; }

.fab__item {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 12px 18px;
  border-radius: 999px;
  background: var(--c-bg); color: var(--c-navy);
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 24px rgba(9, 30, 61, 0.18);
  font-weight: 600; font-size: 15px; line-height: 1;
  white-space: nowrap;
  transform: translateY(8px);
  transition: transform var(--transition), opacity var(--transition),
              background var(--transition), color var(--transition);
  opacity: 0;
}
.fab.is-open .fab__item { transform: translateY(0); opacity: 1; }

/* Ступенчатое появление: первой выезжает ближняя к триггеру пилюля. */
.fab__item:nth-child(3) { transition-delay: 0ms; }
.fab__item:nth-child(2) { transition-delay: 60ms; }
.fab__item:nth-child(1) { transition-delay: 120ms; }

.fab__item:hover { background: var(--c-navy); color: var(--c-text-invert); border-color: var(--c-navy); }
.fab__item:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }

.fab__toggle {
  width: 56px; height: 56px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--c-navy); color: var(--c-text-invert);
  box-shadow: 0 12px 28px rgba(9, 30, 61, 0.35);
  transition: background var(--transition), transform var(--transition);
}
.fab__toggle:hover { background: #10305A; }
.fab__toggle:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
.fab__toggle svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transition: transform var(--transition);
}
/* Плюс поворачивается в крестик — понятный признак «закрыть». */
.fab.is-open .fab__toggle svg { transform: rotate(45deg); }
/* Подсказка у триггера: видна всё время, пока кластер свёрнут.
   pointer-events отключены — подсказка перекрывает угол кнопки и иначе
   съедала бы часть зоны нажатия. */
.fab__trigger { position: relative; display: flex; align-items: center; }

.fab__label {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-navy); color: var(--c-text-invert);
  font-weight: 600; font-size: 14px; line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(9, 30, 61, 0.28);
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}

/* Раскрытый кластер сам себя объясняет — подсказка убирается. */
.fab.is-open .fab__label { opacity: 0 !important; visibility: hidden !important; }

/* Родная кнопка виджета Битрикса скрыта: чат вызывается из кластера,
   две плавающие кнопки в разных углах — дублирование. Прячем прозрачностью,
   а не display: виджету нужен живой узел, чтобы openLiveChat() работал.
   Само окно чата — .bx-livechat-*, другой префикс, его это не трогает. */
.b24-widget-button-wrapper,
.b24-widget-button-popup,
.b24-widget-button-social-item,
.b24-widget-button-social-tooltip {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Подвал прижат к низу, пока страница короче экрана */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-navy); }

:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 600; color: var(--c-text); }
p { margin: 0 0 var(--space-text); }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-navy); color: var(--c-text-invert);
  padding: 12px 20px; border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { left: 0; color: var(--c-text-invert); }

/* ==========================================================================
   3. РАСКЛАДКА
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ритм на padding, а не на margin — визуально те же 60 / 100px */
.section { padding-block: var(--space-section); }
.section--lg { padding-block: var(--space-section-lg); }
.section--flush { padding-block: 0; }
.section--tight { padding-block: var(--space-section-tight); }

.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }


.stack > * + * { margin-top: var(--space-widget); }

/* ==========================================================================
   4. ТИПОГРАФИКА
   ========================================================================== */

.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.t-h1, .page-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 1px;
}

.t-h2, .section-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--c-navy);
}

.t-h3 { font-weight: 600; font-size: 25px; line-height: 1.6; }
.t-h4 { font-weight: 400; font-size: 14px; line-height: 26px; text-transform: uppercase; letter-spacing: 0.7px; }
.t-h5 { font-weight: 600; font-size: 22px; line-height: 28px; }
/* Текст в теле блоков живёт в двух стилях, третьего на странице нет.
   .text-lead ведёт к действию: крупнее и чуть плотнее по начертанию.
   .text-body — информационный текст: базовый кегль и обычный вес.
   Ритм между абзацами оба задают сами, чтобы компоненты его не дублировали.
   Цвет остаётся за компонентом: он говорит о роли текста, а не о его размере. */
.text-lead { font-size: 21px; line-height: 1.5; font-weight: 500; }
.text-body { font-size: 16px; line-height: 1.43; font-weight: 400; max-width: 72ch; }
/* Сплошной текст во всю ширину: там, где колонка одна на весь блок,
   ограничение длины строки оставляло пустоту справа. */
.text-body--wide { max-width: none; }
.text-lead > *,
.text-body > * { margin: 0; }
.text-lead > * + *,
.text-body > * + * { margin-top: var(--space-text); }

/* Ключевые слова выделяем цветом, а не только насыщенностью. Фирменный
   #F28D34 на белом даёт всего 2.4:1 — для текста берём затемнённый тон. */
.text-lead strong,
.text-body strong { font-weight: 700; color: var(--c-orange-text); }

.t-small { font-size: 13px; line-height: 1.4; }
.t-muted { color: var(--c-text-muted); }

/* Оранжевая черта под заголовком секции */
.section-title--ruled { padding-bottom: 14px; position: relative; }
.section-title--ruled::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 115px; height: 3px; background: var(--c-orange-rule);
}
.section-title--ruled.is-centered { text-align: center; }
.section-title--ruled.is-centered::after { left: 50%; transform: translateX(-50%); }

/* Где в тексте появилось оранжевое слово, черта становится короче и тоньше:
   два оранжевых акцента в одном блоке иначе спорят за внимание.
   Условие завязано на сам текст — уберут выделение в админке, вернётся
   обычная черта. Браузер без :has() просто оставит её длинной. */
.section:has(.text-lead strong, .text-body strong)
  .section-title--ruled::after { width: 56px; height: 2px; }

/* ==========================================================================
   5. КНОПКИ
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  border-radius: var(--radius-btn);
  padding: 15px 30px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  box-shadow: 0 6px 16px -8px var(--btn-glow, rgba(14, 51, 103, 0.5));
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}

/* Подъём под курсором и прожатие при клике — одинаково для всех вариантов */
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px var(--btn-glow, rgba(14, 51, 103, 0.5)); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 10px -8px var(--btn-glow, rgba(14, 51, 103, 0.5)); }
.btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }

.btn--primary { --btn-glow: rgba(242, 141, 52, 0.85); background: var(--c-orange); color: var(--c-text-invert); }
.btn--primary:hover { background: #E07C22; color: var(--c-text-invert); }
.btn--primary:active { background: #CE6F1B; }

.btn--secondary { --btn-glow: rgba(21, 59, 110, 0.75); background: var(--c-navy); color: var(--c-text-invert); font-size: 16px; }
.btn--secondary:hover { background: #10305A; color: var(--c-text-invert); }
.btn--secondary:active { background: #0C2647; }

.btn--ghost {
  background: transparent; color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--c-border-strong);
}
.btn--ghost:hover { background: var(--c-bg-widget); color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy-soft); }
.btn--ghost:active { box-shadow: inset 0 0 0 1px var(--c-border-strong); }

.btn--lg { padding: 20px 40px; }
.btn--sm { padding: 10px 18px; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Пульсация со свечением — такая же, как была на продакшене.
   Свечение берёт тот же оранжевый, что и --c-orange (#F28D34).
   Глобальный prefers-reduced-motion в §15 гасит анимацию целиком. */
@keyframes ksq-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 rgba(242, 141, 52, 0.4); }
  50%      { transform: scale(1.04); box-shadow: 0 0 15px rgba(242, 141, 52, 0.6); }
}
.btn--pulse { animation: ksq-pulse 2s ease-in-out infinite; }
/* Анимация перебивает обычные правила, поэтому на наведении её нужно снятьсовсем,
   иначе подъём кнопки не сработает. */
.btn--pulse:hover, .btn--pulse:focus-visible { animation: none; }

/* ==========================================================================
   6. КАРТОЧКИ
   ========================================================================== */

.card {
  border-radius: var(--radius-card);
  padding: var(--space-unit);
  box-shadow: var(--shadow-card);
  background: var(--c-bg);
}
.card--soft { box-shadow: var(--shadow-soft); padding: 15px; }
.card--flat {
  background: var(--c-bg-widget);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-chip);
  padding: 12px 14px;
  box-shadow: none;
}

/* Ступени тарифов */
.card--tier-1 { background: var(--c-tier-1); }
.card--tier-2 { background: var(--c-tier-2); }
.card--tier-3 { background: var(--c-tier-3); }
.card--tier-1, .card--tier-2, .card--tier-3 { color: var(--c-text-invert); }
.card--tier-1 :where(h1,h2,h3,h4,h5,h6),
.card--tier-2 :where(h1,h2,h3,h4,h5,h6),
.card--tier-3 :where(h1,h2,h3,h4,h5,h6) { color: var(--c-text); }

/* ==========================================================================
   7. ШАПКА
   ========================================================================== */

/* Наверху шапка сливается со страницей, при прокрутке — поднимается над контентом:
   полупрозрачный фон с размытием, тень и чуть меньшая высота. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-bg);
  box-shadow: none;
  transition: background var(--transition), box-shadow var(--transition),
              backdrop-filter var(--transition);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(14, 51, 103, 0.06), 0 10px 30px -18px rgba(14, 51, 103, 0.45);
}
/* Прижатая шапка ниже обычной на 12px. На узких экранах базовая высота
   и так 64px, поэтому там меняется только фон и тень — см. §17. */
.site-header.is-stuck .site-header__inner { min-height: calc(var(--header-h) - 12px); }
.site-header__inner { transition: min-height var(--transition); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}

/* Бренд уступает место первым: при длинном названии сайта без логотипа
   он сжимается и обрезается, а меню и телефон остаются целыми. */
.site-brand {
  display: inline-flex; align-items: center;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
/* У логотипа-SVG задан только viewBox, без width/height. При width:auto
   браузеру не от чего отталкиваться и картинка схлопывается в ноль вместе
   с контейнером, поэтому высота задана явно. */
.site-brand img { height: 54px; width: auto; max-width: none; }

/* С логотипом сжимать нечего — это картинка фиксированной ширины,
   а обрезать надо только длинное текстовое название. */
.site-brand:has(img) { flex: 0 0 auto; overflow: visible; }
.site-brand__text {
  font-weight: 700; font-size: 20px; color: var(--c-navy); letter-spacing: 0.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.site-nav { margin-left: auto; flex: 0 0 auto; }
.site-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block; padding: 10px 16px; border-radius: var(--radius-chip);
  color: var(--c-text); font-weight: 600; font-size: 16px; line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.site-nav a:hover { background: var(--c-bg-alt); color: var(--c-navy); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .is-active > a {
  background: var(--c-navy); color: var(--c-text-invert);
}

.site-header__phone {
  flex: 0 0 auto;
  background: var(--c-navy); color: var(--c-text-invert);
  border-radius: 5px; padding: 14px 16px;
  font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap;
}
.site-header__phone:hover { background: #10305A; color: var(--c-text-invert); }

.nav-toggle {
  display: none; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;
  background: var(--c-bg-alt); border: none; border-radius: var(--radius-chip);
  cursor: pointer; color: var(--c-navy);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; position: relative; width: 20px; height: 2px;
  margin-inline: auto; background: currentColor; border-radius: 2px;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* --- Подменю ---------------------------------------------------------- */

.site-nav li { position: relative; }

.site-nav--desktop .has-submenu > a { padding-right: 34px; }

.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--c-text); padding: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* Шеврон у обычных пунктов — поверх правого края ссылки.
   Иконочный триггер сюда не попадает: он сам является пунктом, а не довеском. */
.site-nav--desktop .has-submenu > .submenu-toggle:not(.submenu-toggle--icon) {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
}
.site-nav--desktop .has-submenu.is-open > .submenu-toggle .ksq-icon--chevron { transform: rotate(180deg); }

/* Активный пункт залит тёмно-синим, а кнопка шеврона — отдельный элемент
   и белый цвет ссылки ей не достаётся. Без этого шеврон сливается с фоном.
   Только десктоп: в мобильной панели кнопка стоит на светлом фоне.

   Иконка «три точки» исключена: у неё своя светлая плашка, а не синяя заливка
   активного пункта. Когда открыта одна из вложенных страниц, WordPress вешает
   на пункт current-menu-ancestor, и белый цвет делал её невидимой.
   Свои два состояния заданы ниже, в .submenu-toggle--icon. */
.site-nav--desktop .current-menu-item > .submenu-toggle:not(.submenu-toggle--icon),
.site-nav--desktop .current_page_item > .submenu-toggle:not(.submenu-toggle--icon),
.site-nav--desktop .current-menu-ancestor > .submenu-toggle:not(.submenu-toggle--icon),
.site-nav--desktop .is-active > .submenu-toggle:not(.submenu-toggle--icon) { color: var(--c-text-invert); }

/* Пункты не сжимаются: иначе иконка схлопывается в ноль */
.site-nav--desktop > ul > li { flex: 0 0 auto; }
.ksq-icon--chevron { transition: transform var(--transition); }

/* Иконочный триггер «три точки» */
.submenu-toggle--icon {
  width: 44px; height: 40px;
  background: var(--c-bg-alt); border-radius: var(--radius-chip);
  color: var(--c-navy);
}
.submenu-toggle--icon:hover { background: var(--c-border); }
.is-icon-item.is-open > .submenu-toggle--icon { background: var(--c-navy); color: var(--c-text-invert); }

/* Выпадающая панель */
.site-nav .sub-menu {
  display: none;
  margin: 0; padding: 8px; list-style: none;
  min-width: 236px;
}

.site-nav--desktop .sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  flex-direction: column; align-items: stretch; gap: 2px;
}
/* Панель у последнего пункта прижимается к правому краю, чтобы не уезжать за экран */
.site-nav--desktop > ul > li:last-child .sub-menu,
.site-nav--desktop > ul > li.is-icon-item .sub-menu { left: auto; right: 0; }

.site-nav .has-submenu.is-open > .sub-menu { display: flex; }

/* Без JS подменю всё равно доступно наведением и с клавиатуры */
.site-nav--desktop:not(.nav-js) .has-submenu:hover > .sub-menu,
.site-nav--desktop:not(.nav-js) .has-submenu:focus-within > .sub-menu { display: flex; }

.site-nav--desktop .sub-menu a {
  padding: 10px 12px; font-size: 15px; font-weight: 500;
  white-space: nowrap; border-radius: 6px;
}
.site-nav--desktop .sub-menu .has-submenu > a { padding-right: 12px; }
.site-nav--desktop .sub-menu .submenu-toggle { display: none; }

/* Третий уровень: не второе всплывающее окно, а сдвинутая группа внутри панели */
.site-nav--desktop .sub-menu .sub-menu {
  display: flex; position: static;
  border: none; box-shadow: none; border-radius: 0;
  min-width: 0; padding: 2px 0 2px 12px; margin-left: 10px;
  border-left: 2px solid var(--c-border);
}
.site-nav--desktop .sub-menu .sub-menu a { font-size: 14px; font-weight: 400; color: var(--c-text-muted); }
.site-nav--desktop .sub-menu .sub-menu a:hover { color: var(--c-navy); }

/* Активный пункт третьего уровня. Правило цвета выше специфичнее
   общего правила .site-nav .current-menu-item > a, поэтому на синей заливке
   текст оставался серым, а при наведении на активный пункт — синим на синем.
   Возвращаем контраст на том же уровне вложенности. */
.site-nav--desktop .sub-menu .sub-menu .current-menu-item > a,
.site-nav--desktop .sub-menu .sub-menu .current_page_item > a,
.site-nav--desktop .sub-menu .sub-menu .is-active > a,
.site-nav--desktop .sub-menu .sub-menu .current-menu-item > a:hover,
.site-nav--desktop .sub-menu .sub-menu .current_page_item > a:hover,
.site-nav--desktop .sub-menu .sub-menu .is-active > a:hover { color: var(--c-text-invert); }

/* Мобильная панель существует только на узких экранах */
.site-nav--mobile { display: none; }

/* --- Панель администратора WordPress ---------------------------------- */
/* Без этого липкая шапка уезжает под admin bar, и на узких экранах
   кнопка меню перестаёт ловить клик. */

body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ==========================================================================
   8. ПЛАШКА ЗАГОЛОВКА
   ========================================================================== */

/* Фон белый, как и у остальных блоков. Разделение держит тонкая
   оранжевая полоса внизу — ровно по ширине контента, чтобы она
   совпадала по краям с тем, что идёт ниже, а не тянулась от края окна. */
.page-hero {
  position: relative;
  background: var(--c-bg);
  padding-block: 34px;
  text-align: center;
}
.page-hero::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(100% - var(--gutter) * 2, var(--container) - var(--gutter) * 2);
  height: 2px;
  background: var(--c-orange-rule);
}
.page-hero .page-title { color: var(--c-text); font-style: italic; margin: 0; }

/* Путь до страницы. Разделитель — такая же угловая стрелка, как в меню. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-text);
  color: var(--c-text-muted); font-size: 14px; line-height: 1.3;
}
.crumbs a { color: var(--c-text-muted); }
.crumbs a:hover { color: var(--c-navy); }
.crumbs [aria-current] { color: var(--c-text); font-weight: 600; }
.crumbs__sep {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.65;
}

.page-lead {
  max-width: 56ch; margin: var(--space-text) auto 0;
  color: var(--c-text-muted); font-size: 17px; line-height: 1.45;
}

/* ==========================================================================
   9. КОНТЕНТ
   ========================================================================== */

.entry-content > * + * { margin-top: var(--space-text); }
.entry-content :where(h2, h3, h4) { margin-top: var(--space-block); margin-bottom: var(--space-text); }
.entry-content :where(h2, h3, h4):first-child { margin-top: 0; }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content li + li { margin-top: 6px; }
.entry-content img { border-radius: var(--radius-card); }

.placeholder {
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-card);
  background: var(--c-bg-widget);
  color: var(--c-text-muted);
  padding: 60px 30px;
  text-align: center;
}

/* ==========================================================================
   10. ПОДВАЛ
   ========================================================================== */

/* Верхний отступ подвала — половина секционного: подвал завершает страницу,
   а не продолжает её ритм. Считается от --space-section, чтобы на узких
   экранах ужиматься вместе с ним, а не жить отдельной константой.
   Кромка только сверху: низ упирается в конец страницы, растворять его не во что. */
.site-footer {
  background-color: var(--c-bg-alt);
  background-image: linear-gradient(
    180deg,
    var(--c-bg) 0,
    rgba(255, 255, 255, 0) var(--edge-fade)
  );
  padding-block: calc(var(--space-section) / 2) 30px;
}

.footer-docs ul {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin: 0 0 var(--space-block); padding: 0; list-style: none;
}
.footer-docs a { color: var(--c-text); font-weight: 500; font-size: 15px; }
.footer-docs a:hover { color: var(--c-navy); text-decoration: underline; }

/* Колонки ссылок: три рядом на десктопе, одна под другой на телефоне.
   Всегда раскрыты — без сворачивания. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px var(--space-widget);
  margin-bottom: 40px;
}

.footer-col__title {
  margin: 0 0 8px;
  color: var(--c-navy);
  font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.7px;
}

/* Отбивку задаёт не gap, а высота самой ссылки: 44px — минимальная
   комфортная зона нажатия, при 18px в неё сложно попасть пальцем.
   Там, где указатель точный, столько не нужно — см. правило ниже. */
.footer-col__list {
  display: flex; flex-direction: column; gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.footer-col__list a {
  display: flex; align-items: center; min-height: 32px;
  color: var(--c-text-muted);
  font-size: 14px; line-height: 1.35;
  transition: color var(--transition);
}

/* На тач-экранах ссылке нужна зона под палец: 44px — минимальный комфортный
   размер. Условие по указателю, а не по ширине: планшет в альбомной
   ориентации тоже широкий, но палец у него никуда не делся. Дубль по ширине —
   страховка для браузеров, которые тип указателя не сообщают. */
@media (pointer: coarse), (max-width: 782px) {
  .footer-col__list a { min-height: 44px; }
}
.footer-col__list a:hover { color: var(--c-orange); }

/* Пункт-заглушка: страницы ещё нет, поэтому ссылка не ведёт никуда.
   pointer-events снимает и переход по '#', и фокус — кликать не по чему. */
.is-soon > a {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.site-nav .is-soon > a:hover { background: none; color: var(--c-text); }

/* Логотип и телефон — опознавательный блок, а не навигация */
.footer-ident { display: flex; align-items: center; gap: var(--space-widget); flex-wrap: wrap; }
.footer-phone {
  color: var(--c-navy); font-weight: 600; font-size: 18px; white-space: nowrap;
  transition: color var(--transition);
}
.footer-phone:hover { color: var(--c-orange); }

.footer-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding-top: var(--space-widget);
  border-top: 1px solid var(--c-border);
}
.footer-brand img { height: 56px; width: auto; max-width: none; }
.footer-brand__text { font-weight: 700; font-size: 18px; color: var(--c-navy); }

/* График работы — отдельный смысловой блок: подпись сверху, время под ней */
.footer-hours { display: flex; flex-direction: column; gap: 2px; }
.footer-hours__label {
  color: var(--c-text-muted);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.7px;
}
.footer-hours__time { color: var(--c-navy); font-weight: 600; font-size: 16px; }

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: var(--radius-chip);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: var(--c-text-invert);
  font-weight: 700; font-size: 14px;
}
.footer-social a:hover { background: #10305A; color: var(--c-text-invert); }
.footer-social svg { width: 21px; height: 21px; display: block; fill: currentColor; }


.footer-legal {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted); font-size: 13px;
}

/* ==========================================================================
   11. СЕТКА И ПЕРЕЧИСЛЕНИЯ
   ========================================================================== */

/* Одна сетка на все перечисления. Число колонок задаёт модификатор,
   схлопывание по брейкпоинтам живёт в §15, а не рядом с каждым блоком. */
.grid {
  display: grid;
  gap: var(--space-widget);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.grid--2 { --cols: 2; }
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
.grid--roomy { gap: 40px var(--space-widget); }

/* Светлая заливка вместо прежней текстуры-мазка: два близких тона
   из палитры, без узора. Отделяет блок от белых соседей, но не шумит. */
/* Заголовок секции отбивается от содержимого одинаково во всех блоках:
   базовый сброс заголовков в §2 снимает margin, и без этого они слипаются. */
.section-title { margin-bottom: var(--space-widget); }

/* Шапка липкая — иначе она накроет верх секции при переходе по якорю */
.site-main [id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Кнопки под текстом: основная и второстепенная в один ряд.
   На узком экране .btn растягивается на всю ширину и они встают в столбик. */
.section__cta {
  margin-top: var(--space-widget);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-text);
}

/* Текст и картинка рядом — блок «Сквош — игра для всех» */
.split {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split__media img { width: 100%; border-radius: var(--radius-card); }

/* Пункт списка с иконкой слева — «Почему стоит попробовать». */
.feature { text-align: center; }

/* Кадр с подписью внутри. Сетка кадров — часть блока «О нас», поэтому
   отбивается от текста внутренним шагом, а не зазором между секциями. */
.shots { margin-top: var(--space-block); }

/* Подпись и затемнение лежат внутри рамки кадра, а подъём при наведении
   двигает всю рамку целиком — отстать от фотографии подпись не может.
   overflow скругляет и градиент, и текст по тому же радиусу, что у остальных фото. */
.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.shot__img {
  width: 100%; aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: var(--c-bg-alt);
}

/* Затемнение снизу: вверху прозрачное, у нижнего края держит белый текст */
.shot::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.shot__caption {
  position: absolute; z-index: 1; inset: auto 0 0 0;
  margin: 0;
  padding: 18px var(--space-text);
  color: var(--c-text-invert);
  font-weight: 600; font-size: 22px; line-height: 28px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.feature__title { margin: 0 0 var(--space-unit); }
.feature__text { margin: 0; color: var(--c-text-muted); }

/* Иконка слева от текста — и на десктопе, и на телефоне (см. §18).

   По вертикали — по верхнему краю заголовка. Центровка по всему блоку
   привязывает положение иконки к длине описания, и в ряду с разным
   числом строк заголовки встают на разной высоте. */
.feature--inline {
  display: flex; align-items: flex-start; gap: 18px;
  text-align: left;
}
.feature--inline .feature__body { flex: 1 1 auto; }
.feature--inline .feature__title { margin-bottom: 8px; }

/* Круг с мягкой брендовой заливкой: иконка строго по центру,
   без наложения и с равным отступом со всех сторон. */
/* Карточки не тянутся на высоту ряда: каждая начинается от верхней
   границы своей строки, поэтому заголовки в ряду стоят на одной линии. */
.section--reasons .grid { align-items: start; }

.feature__ico {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(242, 141, 52, 0.12);
  color: var(--c-orange);
}
.feature__ico svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Карточка тренера */
.person { display: flex; flex-direction: column; text-align: center; overflow: hidden; }
/* Фото зумится внутри своих границ — обрезка на обёртке карточки */
.person { transition: transform var(--transition), box-shadow var(--transition); }
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.person__photo {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--c-bg-alt);
  transition: transform 320ms ease;
}
.person:hover .person__photo { transform: scale(1.04); }
.person__name { margin: var(--space-text) 0 6px; text-transform: uppercase; }
.person__job {
  margin: 0 0 var(--space-widget);
  color: var(--c-navy-soft);
  text-transform: uppercase;
}


/* ==========================================================================
   12. ГЕРОЙ
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: var(--space-section) 0;
  overflow: hidden;
  background: var(--c-navy);
  color: var(--c-text-invert);
  text-align: center;
}

/* Видео кроет секцию целиком: height:auto из базового сброса тут мешает */
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Подложка видео — как на продакшене: повторяющийся паттерн поверх
   затемняющей заливки. Оба файла лежат в теме — внешних запросов нет. */
.hero__veil {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  background:
    url('assets/img/pattern-video.png') 0% 0% / auto repeat,
    url('assets/img/video_bg.png') 0% 0% / cover no-repeat;
}

.hero__inner {
  position: relative; z-index: 2;
  max-width: 900px; padding-inline: var(--gutter);
}
.hero__title { margin: 0 0 var(--space-widget); color: var(--c-text-invert); min-height: 1.2em; }

/* Теннис: финальная фраза «Приходи на настольный теннис» переносится на две
   строки даже на десктопе, поэтому место под неё резервируется заранее. */
.hero__title--tall { min-height: 2em; min-height: calc(2 * 1lh); }

/* Печатная машинка: курсор рисует сам typed.js, наше дело — цвет и кегль */
.hero__title .typed { color: inherit; }
.hero__title .typed-cursor {
  color: var(--c-text-invert);
  font-weight: 400;
  animation: ksq-caret 0.7s infinite;
}
@keyframes ksq-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ==========================================================================
   13. АККОРДЕОН
   ========================================================================== */

/* На <details>: раскрывается без JS, доступен с клавиатуры
   и попадает в браузерный поиск по странице. */
.accordion { display: flex; flex-direction: column; gap: var(--space-unit); }

.accordion__item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-chip);
  overflow: hidden;
  background: var(--c-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.accordion__item:hover { border-color: var(--c-orange); box-shadow: var(--shadow-soft); }
.accordion__item[open] { border-color: var(--c-orange); }

.accordion__q {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600; font-size: 17px;
  color: var(--c-navy);
  transition: background var(--transition), color var(--transition);
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { background: var(--c-bg-alt); }

/* Раскрытый вопрос — оранжевая плашка, как на продакшене */
.accordion__item[open] .accordion__q { background: var(--c-orange); color: var(--c-text-invert); }
.accordion__item[open] .accordion__q:hover { background: #E07C22; }

/* Плюс, превращающийся в минус */
.accordion__sign { flex: 0 0 auto; position: relative; width: 14px; height: 14px; }
.accordion__sign::before,
.accordion__sign::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: currentColor;
  transform: translateY(-50%);
  transition: opacity var(--transition);
}
.accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
.accordion__item[open] .accordion__sign::after { opacity: 0; }

.accordion__a { padding: 18px 20px 22px; }

/* Карточка дня в расписании. Рамка и радиус — как было на старом сайте,
   только на токенах темы вместо зашитых #163B6F и #fd6303. */
.day {
  border: 2px solid var(--c-navy);
  box-shadow: none;
  padding: var(--space-widget);
  text-align: center;
}
.day__name { margin: 0 0 var(--space-widget); color: var(--c-navy); }
/* Внутри карточки шаг мельче общего: 60px рвали воскресенье надвое. */
.day__block + .day__block { margin-top: var(--space-widget); }
.day__group { margin: 0 0 var(--space-text); color: var(--c-text); }

.day__slots { display: flex; flex-direction: column; gap: var(--space-text); margin: 0; padding: 0; list-style: none; }
.day__slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Плашка времени: единственное место, где оранжевый идёт заливкой —
   текст белый, контраст достаточный. */
.day__time {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-chip);
  background: var(--c-navy); color: var(--c-text-invert);
  font-weight: 700; font-size: 15px; line-height: 1.2;
  white-space: nowrap;
}
.day__activity { color: var(--c-text); font-size: 16px; line-height: 1.4; }
.day__cta { margin-top: var(--space-text); }

/* Карточка вакансии. Рамка та же, что у карточки дня, но текст выключен
   влево: внутри списки обязанностей и требований, по центру они не читаются.
   Единственная вакансия занимает всю ширину: сетка на два столбца оставляла
   бы рядом с ней пустую половину. */
.vacancies:has(> .vacancy:only-child) { --cols: 1; }

.vacancy {
  border: 2px solid var(--c-navy);
  box-shadow: none;
  padding: var(--space-widget);
}
.vacancy__title { margin: 0 0 var(--space-text); color: var(--c-navy); }
.vacancy__lead { margin: 0 0 var(--space-text); font-weight: 700; color: var(--c-orange-text); }
.vacancy__group { margin-top: var(--space-widget); }
.vacancy__group-title { margin: 0 0 var(--space-unit); color: var(--c-text); }
.vacancy__list { margin: 0; padding-left: 22px; }
.vacancy__list li + li { margin-top: 6px; }
.vacancy__cta { margin: var(--space-widget) 0 0; }

/* Контакты для отклика: подпись сверху, значение крупнее — та же
   раскладка, что у часов работы в подвале. */
.hire-contacts {
  display: flex; flex-wrap: wrap; gap: var(--space-text) 40px;
  margin: var(--space-widget) 0 0; padding: 0; list-style: none;
}
.hire-contacts__item { display: flex; flex-direction: column; gap: 4px; }
.hire-contacts__label { color: var(--c-text-muted); }
.hire-contacts__value { font-weight: 600; font-size: 18px; color: var(--c-navy); }
.hire-contacts__value:hover { color: var(--c-orange-text); }

/* Прайс внутри аккордеона: строка = услуга слева, цена справа.
   Единственный новый компонент страницы тарифов — всё остальное
   собрано из готовых классов главной. */
.price__lead { margin: 0 0 var(--space-widget); }

.price-group + .price-group { margin-top: var(--space-block); }
.price-group__title { margin: 0 0 var(--space-text); color: var(--c-navy); }

/* Узкий экран и три колонки: прокручивается сама таблица, а не страница.
   Обёртка расширена наружу на 10px с каждой стороны, а крайним ячейкам
   вернуты те же 10px отступа: текст остаётся на месте, а заливка строки
   при наведении не начинается вплотную к первой букве. */
.price-wrap { overflow-x: auto; margin-inline: -10px; }
.price-table th:first-child { padding-left: 10px; }
.price-table td:last-child { padding-right: 10px; }

/* Подсветка строки целиком — от названия услуги до цены.
   Только для мыши: на таче :hover залипает после касания. */
@media (hover: hover) {
  .price-table tbody tr { transition: background-color var(--transition); }
  .price-table tbody tr:hover { background-color: var(--c-bg-alt); }
}

.price-table { width: 100%; border-collapse: collapse; }
.price-table th,
.price-table td { padding: 11px 0; vertical-align: baseline; }
.price-table thead th {
  padding-top: 0;
  color: var(--c-text-muted);
  font-weight: 600; font-size: 13px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.6px;
  text-align: right;
}
.price-table tbody th {
  text-align: left; font-weight: 400;
  border-top: 1px solid var(--c-border);
}
.price-table td {
  padding-left: var(--space-widget);
  border-top: 1px solid var(--c-border);
  text-align: right; white-space: nowrap;
  font-weight: 600; color: var(--c-navy);
}
.price-table tbody tr:first-child th,
.price-table tbody tr:first-child td { border-top: none; }
.price-table__note {
  display: block; margin-top: 4px;
  color: var(--c-text-muted); font-size: 14px; line-height: 1.4;
}

/* Подраздел без данных: прямо говорим, что цен пока нет. */
.price-soon {
  margin: 0; padding: 14px 16px;
  background: var(--c-bg-widget);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-card);
  color: var(--c-text-muted);
}

.price-notes {
  margin: var(--space-widget) 0 0; padding: 0; list-style: none;
  color: var(--c-text-muted); font-size: 15px; line-height: 1.45;
}
.price-notes li { position: relative; padding-left: 16px; }
.price-notes li + li { margin-top: 6px; }
.price-notes li::before { content: '—'; position: absolute; left: 0; }
/* Справочный блок: заголовок легче секционного — без капса и на 40% мельче. */
.price-terms__title { margin: 0 0 var(--space-widget); color: var(--c-navy); }
.price-notes--terms { margin-top: 0; font-size: 16px; color: var(--c-text); }
.price-terms__closing { margin-top: var(--space-widget); }

/* Закрывающая панель блока вопросов. Подложка отделяет её от списка,
   но это часть той же секции, а не новый блок: отступ сверху заметно
   больше зазора между вопросами и заметно меньше зазора между секциями. */
.cta-panel {
  margin-top: 40px;
  padding: 36px var(--space-widget);
  text-align: center;
  background: var(--c-bg-widget);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.cta-panel__title { margin: 0 0 var(--space-unit); color: var(--c-navy); }
.cta-panel__text { margin: 0 auto var(--space-widget); color: var(--c-text-muted); }

/* ==========================================================================
   14. КАРТА
   ========================================================================== */

/* Виджет Яндекса приходит своим <iframe> без собственных пропорций,
   поэтому высоту задаём здесь, а ширину отдаём контейнеру. */
.map {
  height: 520px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-bg-alt);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.map__meta {
  margin: 0 0 var(--space-widget);
  color: var(--c-text-muted);
}
.map__meta b { color: var(--c-text); font-weight: 600; }
.map__actions { margin: var(--space-widget) 0 0; }

/* Подсказка прокрутки: стрелка под кнопкой, дышит вниз-вверх.
   Общий сброс анимаций при prefers-reduced-motion гасит и её. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--c-text-invert);
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--transition);
}
.hero__scroll:hover { background: rgba(255, 255, 255, 0.26); color: var(--c-text-invert); }
.hero__scroll-ico {
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  animation: ksq-nudge 1.9s ease-in-out infinite;
}
@keyframes ksq-nudge {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: 0.6; }
  50%      { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

/* ==========================================================================
   15. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   ========================================================================== */

/* Класс вешает скрипт: без JS ничего не прячется и страница остаётся читаемой.

   Появление сделано анимацией, а не переходом: иначе оно заняло бы свойство
   transition и затёрло собственные переходы карточек и аккордеона. Заливка
   backwards, а не forwards — иначе конечный кадр перебивал бы transform при наведении. */
.js-reveal { opacity: 0; }
.js-reveal.is-visible {
  opacity: 1;
  animation: ksq-reveal 520ms ease var(--reveal-delay, 0ms) backwards;
}
@keyframes ksq-reveal {
  from { opacity: 0; transform: translateY(16px); }
}

/* Подчёркивание заголовка прорисовывается вместе с появлением блока */
.js-reveal .section-title--ruled::after,
.section-title--ruled.js-reveal::after {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
.js-reveal.is-visible .section-title--ruled::after,
.section-title--ruled.js-reveal.is-visible::after { transform: scaleX(1); }
.section-title--ruled.is-centered::after { transform-origin: center; }

/* Кому движение мешает — показываем сразу и без сдвига */
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; animation: none; }
  .js-reveal .section-title--ruled::after,
  .section-title--ruled.js-reveal::after { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   16. МОДАЛЬНОЕ ОКНО
   ========================================================================== */

/* На <dialog>: затемнение, закрытие по Escape и удержание фокуса
   браузер берёт на себя — своего JS нужен только на открытие. */
.modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0; border: none;
  border-radius: var(--radius-card);
  background: var(--c-bg); color: var(--c-text);
  box-shadow: 0 24px 60px rgba(9, 30, 61, 0.35);
  overflow: visible;
}
.modal::backdrop { background: rgba(9, 30, 61, 0.75); backdrop-filter: blur(3px); }

.modal__inner { position: relative; max-height: calc(100vh - 64px); overflow-y: auto; border-radius: inherit; }

/* Кадр широкой плашкой сверху — современнее, чем картинка в столбик */
.modal__media { aspect-ratio: 16 / 9; background: var(--c-bg-alt); }
.modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(9, 30, 61, 0.55); color: var(--c-text-invert);
  transition: background var(--transition);
}
.modal__close:hover { background: rgba(9, 30, 61, 0.8); }
.modal__close:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.modal__close svg { width: 20px; height: 20px; }

.modal__body { padding: 28px 32px 32px; }
.modal__title { margin: 0 0 6px; }
.modal__job { margin: 0 0 var(--space-widget); color: var(--c-navy-soft); text-transform: uppercase; }

.modal__text { color: var(--c-text-muted); }

/* Список регалий: маркер — брендовый оранжевый, чтобы перечень
   читался отдельно от цитаты под ним. */
.modal__text ul { margin: 0; padding: 0; list-style: none; }
.modal__text li { position: relative; padding-left: 20px; }
.modal__text li + li { margin-top: var(--space-unit); }
.modal__text li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-orange);
}

/* Кнопка карточки прижата к низу: карточки в ряду равной высоты */
.person__more { margin-top: auto; align-self: center; }

@media (max-width: 782px) {
  .modal__body { padding: 22px 20px 26px; }
  .modal__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   17. ГАЛЕРЕЯ И ЛАЙТБОКС
   ========================================================================== */

/* Ровная сетка. Раньше была кладка колонками и кадры сохраняли свои
   пропорции — из-за разной высоты снимков столбцы расходились и низ
   галереи выглядел рваным. Теперь все кадры приводятся к общему
   соотношению, а обрезка идёт по центру. Целиком кадр виден в лайтбоксе. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-widget);
}
.gallery__item { margin: 0; }

/* Календарь: по две страницы в ряд — подписи турниров внутри читаются
   без открытия. Лайтбокс остаётся для деталей.

   Две колонки вместо трёх и без общего соотношения: у страниц календаря
   свои пропорции, и обрезка съела бы текст. */
.gallery--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery__item img { width: 100%; display: block; border-radius: var(--radius-card); }

/* Общее соотношение только для фотогалерей. Календарь турниров
   (.gallery--wide) исключён: там сканы страниц, обрезка съела бы текст. */
.gallery:not(.gallery--wide) .gallery__link,
.gallery:not(.gallery--wide) .gallery__item img { height: 100%; }
.gallery:not(.gallery--wide) .gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-bg-alt);
}

.gallery__link {
  display: block; position: relative; cursor: zoom-in;
  border-radius: var(--radius-card); overflow: hidden;
}
.gallery__link img { transition: transform 420ms ease; }
.gallery__link:hover img { transform: scale(1.05); }

/* Затемнение с лупой — подсказка, что кадр откроется целиком */
.gallery__link::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(14, 51, 103, 0.32) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 40px no-repeat;
  opacity: 0; transition: opacity var(--transition);
}
.gallery__link:hover::after, .gallery__link:focus-visible::after { opacity: 1; }
.gallery__link:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }

/* Разметка лайтбокса собирается скриптом при первом открытии */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  padding: 72px 20px;
  background: rgba(9, 30, 61, 0.975);
}
.lightbox.is-open { display: grid; place-items: center; }

.lightbox__img {
  max-width: 100%; max-height: calc(100vh - 144px);
  width: auto; height: auto;
  border-radius: var(--radius-card);
  object-fit: contain;
}

.lightbox__btn {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: var(--c-text-invert);
  transition: background var(--transition);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.lightbox__btn svg { width: 22px; height: 22px; display: block; }
.lightbox__btn--close { top: 16px; right: 16px; }
.lightbox__btn--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 16px; top: 50%; transform: translateY(-50%); }

.lightbox__counter {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  color: var(--c-text-invert); font-size: 14px; letter-spacing: 0.4px;
}

/* Фон под лайтбоксом не должен прокручиваться */
.lightbox-open { overflow: hidden; }

/* ==========================================================================
   18. АДАПТИВ
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --space-section: 55px; --space-section-tight: 45px; --space-section-lg: 80px; }
  .t-display { font-size: 40px; }
  .t-h2, .section-title { font-size: 30px; }

  .grid--4 { --cols: 2; }
  .hero { min-height: 520px; }
}

@media (max-width: 782px) {
  :root { --header-h: 64px; --gutter: 16px; }

  .nav-toggle { display: block; }

  .site-nav--desktop { display: none; }

  .site-nav--mobile {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    padding: 12px var(--gutter) 20px;
  }
  .site-nav--mobile.is-open { display: block; }
  .site-nav--mobile ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav--mobile a { padding: 14px 12px; }

  /* Подменю разворачивается вниз по месту, а не всплывает */
  .site-nav--mobile .has-submenu { display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav--mobile .has-submenu > a { flex: 1 1 auto; padding-right: 12px; }

  .site-nav--mobile .submenu-toggle {
    flex: 0 0 auto; width: 44px; height: 44px;
    border-radius: var(--radius-chip); color: var(--c-navy);
  }
  .site-nav--mobile .submenu-toggle:hover { background: var(--c-bg-alt); }
  .site-nav--mobile .has-submenu.is-open > .submenu-toggle { background: var(--c-bg-alt); }
  .site-nav--mobile .has-submenu.is-open > .submenu-toggle .ksq-icon--chevron { transform: rotate(180deg); }

  .site-nav--mobile .sub-menu {
    flex: 1 0 100%;
    position: static; padding: 2px 0 6px 14px; min-width: 0;
    border-left: 2px solid var(--c-border); margin-left: 12px;
    background: transparent; box-shadow: none;
  }
  .site-nav--mobile .has-submenu.is-open > .sub-menu { display: flex; }
  .site-nav--mobile .sub-menu a { font-size: 15px; padding: 12px; }
  .site-nav--mobile .sub-menu .sub-menu { margin-left: 10px; }

  /* Иконочный триггер на мобильном ведёт себя как обычная строка меню */
  .site-nav--mobile .is-icon-item > .submenu-toggle--icon {
    width: 100%; height: auto; justify-content: flex-start;
    padding: 14px 12px; background: transparent;
  }
  .site-nav--mobile .is-icon-item.is-open > .submenu-toggle--icon {
    background: var(--c-bg-alt); color: var(--c-navy);
  }

  .site-header__inner { position: relative; gap: 12px; }
  /* На телефоне высота не меняется: сжимать 64px некуда,
     а любое изменение двигает контент под ней. */
  .site-header.is-stuck .site-header__inner { min-height: var(--header-h); }
  .site-header__phone { padding: 12px 14px; font-size: 15px; }

  .t-display { font-size: 32px; }
  .t-h2, .section-title { font-size: 26px; }
  .t-h3 { font-size: 21px; }
  .page-hero { padding-block: 24px; }
  .page-hero .page-title { font-size: 24px; line-height: 30px; }

  .footer-main { flex-direction: column; align-items: flex-start; }
  .footer-docs ul { gap: 10px 18px; margin-bottom: 40px; }

  /* Колонки встают одна под другой, оставаясь раскрытыми */
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-bottom: 30px; }

  .cta-panel { margin-top: 30px; padding: 28px var(--space-text); }

  .footer-ident { gap: var(--space-text); }
  .footer-phone { font-size: 17px; }
  .footer-hours__time { font-size: 15px; }

  .map { height: 380px; }
  .reviews__frame { height: 560px; }
  .details-table th, .details-table td { display: block; width: auto; padding: 0; }
  .details-table th { padding-top: 12px; }
  .details-table td { padding-bottom: 12px; }
  .details-table tr + tr td { border-top: 0; }

  .grid--3, .grid--4 { --cols: 2; }

  .lightbox { padding: 64px 8px; }
  .lightbox__btn { width: 40px; height: 40px; }
  .lightbox__btn--prev { left: 6px; }
  .lightbox__btn--next { right: 6px; }
  .lightbox__img { max-height: calc(100vh - 128px); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .kids-intro--flip .kids-intro__text,
  .kids-intro--flip .split__media { order: 0; }
  .story--flip .story__text,
  .story--flip .split__media { order: 0; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-box { left: 16px; right: 16px; bottom: 16px; width: auto; }
  .fab { right: 14px; bottom: 14px; }
  /* Пока висит уведомление о cookie, кластер стоит над ним. */
  body.has-consent-banner .fab { bottom: calc(var(--ksq-consent-h, 0px) + 28px); }
  .fab__toggle { width: 52px; height: 52px; }
  .fab__item { font-size: 14px; padding: 12px 16px; }
  .stream { grid-template-columns: minmax(0, 1fr); }
  .stream__score iframe { max-width: 300px; margin-inline: auto; }
  .timetable iframe { height: 460px; }
  /* Высоту на узких экранах задаёт aspect-ratio, фиксированная больше не нужна. */
  .formats { --cols: 1; }
  .gallery--wide { grid-template-columns: minmax(0, 1fr); }

  .hero { min-height: 440px; }

  /* Иконка остаётся слева и на узком экране: центрованный столбик
     читается хуже и сильнее растягивает блок. */
  /* Описания здесь по 3–4 строки: по центру иконка отрывалась бы от заголовка */
  .feature--inline { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .feature--inline .feature__ico { width: 48px; height: 48px; }
  .feature--inline .feature__ico svg { width: 23px; height: 23px; }
}

@media (max-width: 480px) {
  .site-header__phone { display: none; }
  .btn { width: 100%; }

  .grid--2, .grid--3, .grid--4 { --cols: 1; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .price-table { font-size: 15px; }
  .price-table td { padding-left: var(--space-text); }
  .hero { min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Страницы под паролем: форма доступа, курс WSC, электронный учебник
   ========================================================================== */

/* Форма ввода пароля --------------------------------------------------- */

.pwgate {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-widget);
  text-align: center;
  background: var(--c-bg-alt);
  border-radius: var(--radius-card);
}

.pwgate__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  color: var(--c-navy);
  background: var(--c-bg);
  border-radius: 50%;
}

.pwgate__ico svg { width: 26px; height: 26px; }

.pwgate__title { margin: 0 0 10px; }

.pwgate__lead {
  margin: 0 0 24px;
  color: var(--c-text-muted);
}

.pwgate__err {
  margin: 0 0 20px;
  padding: 10px 14px;
  color: var(--c-orange-text);
  background: var(--c-bg);
  border-radius: var(--radius-chip);
}

.pwgate__label {
  display: block;
  margin-bottom: 8px;
  text-align: left;
  font-weight: 600;
}

.pwgate__row { display: flex; gap: 10px; }

.pwgate__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-chip);
}

.pwgate__input:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 1px;
}

.pwgate__contact { margin: 20px 0 0; }

@media (max-width: 560px) {
  .pwgate__row { flex-direction: column; }
  .pwgate__row .btn { width: 100%; }
}

/* Превью видео --------------------------------------------------------- */

.vid {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-widget);
  overflow: hidden;
  background: var(--c-navy);
  border-radius: var(--radius-card);
}

.vid__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--c-text-invert);
  background: none;
  border: 0;
  cursor: pointer;
}

.vid__icon {
  position: relative;
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, .14);
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: background .18s ease, transform .18s ease;
}

/* Треугольник «play» рисуем рамкой, чтобы не тянуть иконку. */
.vid__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent currentColor;
  transform: translate(-50%, -50%);
}

.vid__play:hover .vid__icon,
.vid__play:focus-visible .vid__icon {
  background: rgba(255, 255, 255, .26);
  transform: scale(1.06);
}

.vid__text {
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vid__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* WSC Foundation Coach ------------------------------------------------- */

.wsc-intro { max-width: 760px; }

.wsc-intro .btn { margin-top: 24px; }

.wsc-hero-video {
  max-width: 860px;
  margin: var(--space-widget) auto 0;
}

.module__title { margin-bottom: 28px; }

.wsc-notes { margin-top: 4px; }

.wsc-notes p { margin: 0 0 10px; }

.wsc-notes p:last-child { margin-bottom: 0; }

/* Электронный учебник -------------------------------------------------- */

.book-intro { max-width: 760px; }

.book-cta { margin-top: 32px; }

.book-cta__note {
  margin: 12px 0 0;
  color: var(--c-text-muted);
  font-size: 14px;
}

/* «Теория»: текст учебника со скриншотами из CD-книги 2000 года. */

.theory__body img {
  height: auto;
  max-width: 100%;
  margin: 16px 0;
  border-radius: var(--radius-chip);
}

.theory__body p { margin: 0 0 12px; }

.theory__body p:last-child { margin-bottom: 0; }

.theory__body a { text-decoration: underline; }


/* ==========================================================================
   Футбольное поле
   ========================================================================== */

/* Герой ---------------------------------------------------------------- */

/* Заголовок здесь длинный (полное предложение), а не два слова с печатной
   машинкой, как на главной, — поэтому колонка шире и кегль сдержаннее. */
.hero--foot { min-height: 720px; }

.hero__inner--foot { max-width: 1040px; }

/* Плашка времени работы: прижата к верху колонки героя. */
.hero__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-invert);
  background: rgba(14, 51, 103, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.hero__hours svg { width: 16px; height: 16px; }

.hero__title--foot {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.18;
  min-height: 0;
}

.hero__lead {
  margin: 0 auto var(--space-widget);
  max-width: 720px;
  font-size: 18px;
  color: rgba(255, 255, 255, .92);
}


.hero__cta { margin-top: 4px; }

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

   Пункты идут вплотную (row-gap: 0), поэтому чёрточки сливаются в сплошную
   линию вдоль колонки. Если дать им зазор, штрихи получаются разной
   длины — по высоте своего текста, и ряды визуально прыгают. */

.pitch {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0 48px;
}

.pitch__item {
  padding: 18px 0 18px 18px;
  border-left: 3px solid var(--c-orange);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-navy);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
}

/* Две колонки: без разделителя остаются два последних пункта. */
.pitch__item:nth-last-child(-n + 2) { border-bottom: 0; }

@media (max-width: 780px) {
  /* В одну колонку разделителя лишается только последний.
     Правило возвращается тем же селектором, что и сняло его выше:
     у :nth-last-child специфичность выше, чем у голого класса. */
  .pitch__item {
    padding: 15px 0 15px 15px;
    font-size: 17px;
  }
  .pitch__item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--c-border); }
  .pitch__item:last-child { border-bottom: 0; }
}

/* Блок-переход к остальным видам спорта.
   Сплошная тёмная плашка во всю ширину: соседние блоки — светлые сетки
   карточек, и на их фоне этот должен читаться как смена темы, а не как
   ещё один их ряд. Кнопка оранжевая — единственный вариант, который
   уверенно читается на navy. */

.cross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-widget);
  padding: 34px var(--space-block);
  background: var(--c-navy);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.cross__text {
  flex: 1 1 460px;
  margin: 0;
  color: var(--c-text-invert);
  font-size: 18px;
  line-height: 1.45;
}

.cross__cta { flex: 0 0 auto; }

@media (max-width: 780px) {
  .cross { padding: 26px var(--space-widget); }
  .cross__text { font-size: 16px; }
}

@media (max-width: 700px) {
  .cross { flex-direction: column; align-items: flex-start; }

  /* В колонке flex-basis задаёт уже высоту, а не ширину: без сброса
     текст растягивается на 460px, а базовый margin-top: auto у .btn
     отжимает кнопку к самому низу плашки. */
  .cross__text { flex: 0 1 auto; }
  .cross__cta { width: 100%; text-align: center; margin-top: 0; align-self: stretch; }
}

/* Мобильные ------------------------------------------------------------ */

@media (max-width: 780px) {
  .hero--foot { min-height: 0; padding: var(--space-section-tight) 0; }



  .hero__lead { font-size: 16px; }

  .hero__cta { width: 100%; }
}

/* ==========================================================================
   Плавающий кластер: место под него на узких экранах
   ========================================================================== */

/*
 * Две отдельные проблемы, и лечатся они по-разному.
 *
 * 1. .fab — flex-контейнер, а свёрнутый список пунктов внутри него скрыт
 *    через visibility: hidden, то есть ПРОДОЛЖАЕТ занимать место. Из-за
 *    этого бокс контейнера был шириной 167px (на экране 390px — почти
 *    половина) и перехватывал клики там, где ничего не нарисовано. Ниже
 *    контейнер объявлен прозрачным для указателя, а события возвращены
 *    только настоящим органам управления.
 *
 * 2. Круглый триггер всё же закрывает свои 52px в правом нижнем углу.
 *    Кластер зафиксирован, поэтому под него попадает любая широкая кнопка,
 *    доведённая до края: достаточно докрутить её к низу экрана. Ширину
 *    выреза считает JS и отдаёт в --ksq-fab-safe (как высоту куки-баннера
 *    в --ksq-consent-h), а правило ниже включает резерв только на мобильных.
 */

.fab { pointer-events: none; }

.fab__toggle { pointer-events: auto; }

.fab.is-open .fab__items { pointer-events: auto; }

/* Подпись у триггера декоративная (aria-hidden) — клики ей не нужны. */
.fab__label { pointer-events: none; }

:root {
  /* Запасное значение, если скрипт не отработал: столько нужно снять с
     каждой стороны центрованной кнопки, чтобы её правый край не дошёл
     до триггера. Пересчитывается в assets/js/fab.js. */
  --ksq-fab-safe: 0px;
}

@media (max-width: 780px) {

  /* На узком экране подпись ложится поверх широких кнопок: места
     слева от триггера просто нет. Назначение кнопки остаётся доступным:
     его несёт aria-label самого триггера, а подпись и так aria-hidden. */
  .fab__label { display: none; }

  /*
   * Прыгающая кнопка в героях с печатной машинкой.
   *
   * .hero — это grid с place-items: center, поэтому .hero__inner получает
   * ширину по содержимому. Пока Typed набирает заголовок посимвольно,
   * ширина колонки меняется на каждом кадре, а вместе с ней — и доля,
   * которую забирает max-width: calc(100% - 2 * --ksq-fab-safe) у кнопки.
   * Кнопка то помещалась в строку, то переносилась: на 390px её ширина
   * гуляла на ~130px.
   *
   * Колонка получает всю доступную ширину, кнопка — собственную явную.
   * Ни то, ни другое больше не зависит от длины соседней строки.
   */
  .hero__inner { width: 100%; }

  /*
   * Ширина кнопки. --ksq-fab-safe отмеряется от края экрана и гаттер колонки
   * уже включает, а 100% здесь — ширина колонки, из которой гаттеры вычтены.
   * Без «+ 2 * --gutter» отступ под кластер считался дважды и съедал 32px:
   * ровно из-за них подпись не помещалась в строку.
   *
   * Боковые поля ужаты с 40px до 24px. Кегль остаётся 18px — читаемость важнее,
   * а высота кнопки не меняется, зона нажатия остаётся 58px.
   */
  .hero .hero__inner .hero__btn {
    width: 260px;
    max-width: calc(100% + 2 * var(--gutter) - 2 * var(--ksq-fab-safe, 0px));
    padding-inline: 24px;
  }


  /*
   * Кнопки остаются по центру и просто становятся уже: асимметричный сдвиг
   * вправо выглядит браком внутри карточек, где фото и подписи центрованы.
   * Отступ снимается с обеих сторон, отсюда множитель 2.
   */
  .section__cta .btn,
  .hero .btn,
  .person .btn,
  .card .btn,
  .promo__actions .btn,
  .shift__cta .btn,
  .vacancy__cta .btn,
  .map__actions .btn,
  .cross__cta,
  .cta-panel .btn,
  .day__cta {
    max-width: calc(100% - 2 * var(--ksq-fab-safe, 0px));
    margin-inline: auto;
  }
}

/*
 * Узкие экраны: заголовок переносится на строку больше, чем на планшете
 * и десктопе. Замерено по фактическим фразам — на 390px главная занимает
 * до двух строк, теннис до трёх, а начиная с 420px обе теряют по строке.
 * Резерв держим ровно по максимуму для этой ширины: лишние строки оставили
 * бы в герое пустую полосу.
 */
@media (max-width: 419px) {

  .hero__title:not(.hero__title--foot) {
    min-height: 2em;
    min-height: calc(2 * 1lh);
  }

  .hero__title--tall:not(.hero__title--foot) {
    min-height: 3em;
    min-height: calc(3 * 1lh);
  }
}


/* ==========================================================================
   Подарочный сертификат
   ========================================================================== */

/* Текст и сама карточка сертификата рядом: картинка сама по себе
   объясняет, что именно получит покупатель. */
.sert-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-block);
  align-items: center;
}

.sert-intro__text { margin: 0; }

.sert-intro__card { margin: 0; }

.sert-intro__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Виды сертификатов */

.sert-kind { text-align: center; }

.sert-kind .feature__ico { margin: 0 auto var(--space-text); }

.sert-kind__title { margin: 0 0 var(--space-unit); }

.sert-kind__text { margin: 0; color: var(--c-text-muted); }



@media (max-width: 900px) {
  .sert-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-widget); }
}

/* Блок связи вместо формы: номиналы нигде не зафиксированы,
   поэтому заказ начинается с разговора, а не с отправки телефона в форму. */

.sert-cta { margin-top: 0; }

.sert-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-text);
  margin: 0;
}

.sert-cta__hours {
  margin: var(--space-widget) 0 0;
  color: var(--c-text-muted);
  font-size: 15px;
}

@media (max-width: 560px) {
  .sert-cta__actions { flex-direction: column; }
  .sert-cta__actions .btn { width: 100%; }
}

/* ==========================================================================
   Страница 404
   ========================================================================== */

/* Крупный номер над заголовком: сразу видно, что это сообщение об ошибке,
   а не контентная страница. */
.err404__code {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1;
  font-weight: 700;
  color: var(--c-orange);
}

.err404__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-widget);
  margin: 0;
  padding: 0;
  list-style: none;
}

.err404__link {
  display: block;
  height: 100%;
  padding: var(--space-unit);
  border-radius: var(--radius-card);
  background: var(--c-bg-widget);
  box-shadow: inset 0 0 0 1px var(--c-border);
  color: var(--c-navy);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

.err404__link:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--c-navy-soft), var(--shadow-card);
  color: var(--c-navy);
}

.err404__link b {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.err404__link span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-text-muted);
}

/* Курсор-рука на всём, что в кластере кликается. У <button> браузер по
   умолчанию оставляет стрелку, в отличие от ссылок, поэтому пунктам-кнопкам
   («Онлайн-чат», «Записаться на тренировку») правило нужно явно. */
.fab__toggle,
.fab__item { cursor: pointer; }

/* ==========================================================================
   Подсказка по управлению рядом с игрой
   ========================================================================== */

/* Инструкция нужна ровно в момент игры, поэтому стоит рядом с кадром,
   а не под ним. На узких экранах встаёт снизу: 640px кадра и колонка
   подсказки рядом перестают помещаться раньше общего мобильного порога. */
.game {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(220px, 1fr);
  gap: var(--space-block);
  align-items: start;
}

.game-help {
  padding: var(--space-unit);
  border-radius: var(--radius-card);
  background: var(--c-bg-widget);
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.game-help__title {
  margin: 0 0 var(--space-text);
  color: var(--c-navy);
  font-size: 17px;
  font-weight: 600;
}

.game-help__steps {
  margin: 0 0 var(--space-widget);
  padding-left: 20px;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.5;
}

.game-help__steps li + li { margin-top: 7px; }

.game-help__keys {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px var(--space-text);
  align-items: center;
  margin: 0;
}

.game-help__keys dt { display: flex; flex-wrap: wrap; gap: 4px; }

.game-help__keys dd {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.35;
}

/* Клавиша: маленькая накладка с рамкой и подсветкой снизу, как на клавиатуре. */
.game-help kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 6px;
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-border-strong), 0 1px 0 var(--c-border);
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; line-height: 1;
}

.game-help__note {
  margin: var(--space-widget) 0 0;
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Порог считан от размеров колонок: 640 кадр + 60 зазор + 220 подсказка
   перестают помещаться рядом раньше общего мобильного порога. */
@media (max-width: 900px) {
  .game { grid-template-columns: minmax(0, 1fr); gap: var(--space-widget); }
}

/* ==========================================================================
   Шуточная ачивка у ретро-игры
   ========================================================================== */

/* Плашка в духе игрового оверлея: тёмный угол справа внизу, над
   кластером плавающих кнопок и под ним по z-index, чтобы никогда его
   не перекрывать. Клики пропускает насквозь: управление игрой важнее. */
.achv {
  position: fixed; right: 24px; bottom: 96px; z-index: 240;
  display: flex; align-items: center; gap: 12px;
  width: 330px; max-width: calc(100vw - 32px);
  padding: 12px 16px 12px 12px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #10233F 0%, #1B3A63 100%);
  box-shadow: 0 18px 40px rgba(9, 30, 61, 0.38), inset 0 0 0 1px rgba(242, 141, 52, 0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.achv.is-shown { opacity: 1; transform: translateX(0); }

.achv__icon {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: var(--radius-chip);
  background: rgba(242, 141, 52, 0.16);
  box-shadow: inset 0 0 0 1px rgba(242, 141, 52, 0.45);
  color: var(--c-orange);
}

.achv__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.achv__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.achv__kicker {
  color: var(--c-orange);
  font-size: 11px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.6px; text-transform: uppercase;
}

.achv__name { color: var(--c-text-invert); font-size: 15px; font-weight: 700; line-height: 1.25; }

.achv__text { color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.35; }

@media (max-width: 900px) {
  .achv { right: 14px; bottom: 80px; width: auto; max-width: calc(100vw - 28px); }
  /* Пока висит уведомление о cookie, плашка уходит выше кластера. */
  body.has-consent-banner .achv { bottom: calc(var(--ksq-consent-h, 0px) + 90px); }
}

@media (prefers-reduced-motion: reduce) {
  .achv { transform: none; transition: opacity 200ms ease; }
}