/* ============================================================
   ROOT & RESET
============================================================ */
*,
*::before,
*::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; overflow-x: hidden; font-size: 20px; scroll-padding-top: 76px; /* якоря не ныряют под fixed-шапку 64px */ }

/* Токены (--cream, --gold, --soft …) — в public/css/tokens.css, подключается перед этим файлом */

/* Доступность: видимый фокус для навигации с клавиатуры */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

body{
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  background: var(--cream);
  background-image: radial-gradient(circle at 1px 1px, rgba(28,26,22,0.022) 1px, transparent 0);
  background-size: 28px 28px;
  color: var(--dark);
  line-height: 1.6;
}
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; }

h1, h2, h3, h4{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(1.6rem, 6vw, 2.93rem); }
h2{ font-size: clamp(1.07rem, 3.5vw, 1.7rem); }
h3{ font-size: clamp(1.05rem, 2vw, 1.25rem); } /* было 18.6px < body 20px — названия пакетов мельче описаний */

/* ============================================================
   LAYOUT
============================================================ */
.wrap{ max-width: 1160px; margin: 0 auto; padding: 0 48px; }
.section{ padding: 56px 0; } /* было 80 — Босс: убрать большие полосы пустоты между блоками */
.section-alt{ background: var(--cream-dark); }
.section-white{ background: var(--white); }

.label{
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}


/* ============================================================
   BUTTONS — ЕДИНАЯ СИСТЕМА (2026-09-18)

   КАНОН: одна геометрия, четыре заливки, четыре размера.
     Роли (что видит посетитель):
       .btn-gold          — ГЛАВНАЯ, золотая заливка. Одна на экран.
       .btn-outline       — ВТОРИЧНАЯ, контур на светлом фоне.
       .btn-outline-light — та же вторичная, но на ТЁМНОМ фоне.
       .btn-dark          — тёмная заливка (виджеты поверх фото, шапка на тёмном).
     Размеры (это НЕ разные кнопки, а один и тот же вид):
       базовый · .btn-md (карточки) · .btn-sm (тесно) · .btn-xs (виджеты, мобпанель).

   ПСЕВДОНИМЫ. .ebc-cta (оборудование), .btn-hero-gold / .btn-hero-dark — имена из разметки
   и селекторов v3.js; описаны здесь вместе с .btn, чтобы геометрия и hover были одни.
   (.format-cta / .format-detail-link ушли вместе со старыми карточками форматов — чистка CSS 2026-09-26.)

   НОВЫЕ кнопки делать ТОЛЬКО как .btn + модификатор. Заводить ещё один
   одноразовый класс с собственными паддингами — запрещено: именно так
   и накопилось 27 разных видов.

   ВНЕ КАНОНА ОСОЗНАННО: .pull-tab (красный хлястик «Ещё», форма задана
   Боссом 2026-09-06), круглые иконочные (.float-btn, стрелки листания).
============================================================ */
.btn,
.ebc-cta,
.btn-hero-gold,
.btn-hero-dark{
  display: inline-flex;
  align-items: center;
  justify-content: center; /* кнопка шире текста (min-width/width:100%) — надпись по центру, не у левого паддинга */
  gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  font-family: 'Jost', sans-serif;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  border: var(--btn-bw) solid transparent; /* рамка есть у всех: залитая и контурная одного роста */
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--btn-ease), color var(--btn-ease), border-color var(--btn-ease), transform var(--btn-ease), box-shadow var(--btn-ease);
  white-space: nowrap;
  text-decoration: none;
}

/* ── ЗАЛИВКИ ─────────────────────────────────────────────────────────────── */
/* Золото кнопок — всегда --gold-btn: белый на --gold даёт 4.04:1 (ниже AA). */
.btn-gold,
.btn-hero-gold{ background: var(--gold-btn); color: var(--white); border-color: var(--gold-btn); }
.btn-gold:hover,
.btn-hero-gold:hover{ background: var(--gold-text); /* темнее покоя — AA и на hover */ border-color: var(--gold-text); transform: translateY(var(--btn-lift)); box-shadow: var(--btn-shadow); }

/* Вторичная НЕ заливается на hover — иначе рядом с золотой становится неотличима
   от неё и пропадает иерархия «главное действие / запасное». */
.btn-outline,
.ebc-cta{ background: transparent; color: var(--dark); border-color: rgba(28,26,22,0.35); }
.btn-outline:hover,
.ebc-cta:hover{ border-color: var(--gold); color: var(--gold-text); }

.btn-outline-light,
.btn-hero-dark{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.btn-outline-light:hover,
.btn-hero-dark:hover{ border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn-dark{ background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-dark:hover{ background: var(--gold-btn); border-color: var(--gold-btn); }

/* ── РАЗМЕРЫ ─────────────────────────────────────────────────────────────── */
.btn-md,
.btn-hero-gold,
.btn-hero-dark{ padding: var(--btn-py-md) var(--btn-px-md); font-size: var(--btn-font-md); }

.btn-sm,
.ebc-cta{ padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-font-sm); letter-spacing: var(--btn-ls-sm); }
.btn-xs{ padding: var(--btn-py-xs) var(--btn-px-xs); font-size: var(--btn-font-xs); letter-spacing: var(--btn-ls-sm); }

/* Во всю ширину родителя — не отдельный вид, а раскладка. */
.btn-block,
.ebc-cta{ display: flex; width: 100%; }

/* ── СОСТОЯНИЯ ───────────────────────────────────────────────────────────── */
/* Нажатие. До 2026-09-18 :active не был задан НИ У ОДНОЙ кнопки сайта — палец
   на телефоне жал в пустоту, потому что hover на тач-экране не работает. */
.btn:active,
.ebc-cta:active,
.btn-hero-gold:active,
.btn-hero-dark:active{ transform: translateY(var(--btn-press)); box-shadow: none; }

/* Заблокированная кнопка не должна подпрыгивать под курсором. */
.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover{ opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* Нажатие у кнопок ВНЕ канона (свой облик, но отклик на палец нужен всем). */
.faq-btn:active,
.hb-toggle:active,
.cases-all:active,
.nav-dropdown-btn:active,
.ev-filter-btn:active,
.clb-arrow:active{ transform: translateY(var(--btn-press)); }

/* Глобальное правило reduced-motion гасит только ДЛИТЕЛЬНОСТЬ, сам transform
   остаётся — кнопки прыгали мгновенным скачком. Здесь отменяем движение явно. */
@media (prefers-reduced-motion: reduce) {
.btn,
.ebc-cta,
.btn-hero-gold,
.btn-hero-dark,
.btn:hover,
.ebc-cta:hover,
.btn-hero-gold:hover,
.btn-hero-dark:hover,
.btn:active,
.ebc-cta:active,
.btn-hero-gold:active,
.btn-hero-dark:active,
.float-btn:hover,
.float-btn:active,
.case-card-video:hover .case-video-play,
.case-card-video:focus-visible .case-video-play,
.faq-btn:active,
.hb-toggle:active,
.cases-all:active,
.nav-dropdown-btn:active,
.ev-filter-btn:active,
.clb-arrow:active{
    transform: none;
    box-shadow: none;
  }
}

/* ============================================================
   NAV
============================================================ */
/* Skip-link: первая Tab-остановка — сразу к <main>, мимо 24 tab-стопов шапки */
.skip-link{
  position: fixed; left: 16px; top: -60px; z-index: 4100; /* выше кулис .curtain (4000) — Tab сразу после загрузки */
  background: var(--dark); color: #fff; padding: 12px 20px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  transition: top 0.2s;
}
.skip-link:focus{ top: 12px; }

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 48px;
  background: rgba(245,243,238,0.93);
  backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--border);
  transition: box-shadow 0.3s;
}
.nav.scrolled{ box-shadow: 0 2px 20px rgba(28,26,22,0.08); }

.nav-logo-name{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-logo-role{ font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

.nav-links{ display: flex; gap: 16px; list-style: none; align-items: center; }
.nav-links a{
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft); transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover{ color: var(--gold); }
.nav-links .nav-sep{
  width: 0.5px; height: 14px; background: var(--border); flex-shrink: 0;
}

.nav-burger{ display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-burger span{ display: block; width: 22px; height: 1.5px; background: var(--dark); }

.nav-mobile{
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  border-bottom: 0.5px solid var(--border);
  z-index: 299;
  padding: 24px 48px;
  flex-direction: column;
  gap: 14px;
}
.nav-mobile.open{ display: flex; }
.nav-mobile a{
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mid);
  padding: 6px 0; border-bottom: 0.5px solid var(--border);
}

/* ============================================================
   HERO — первый экран (Босс 2026-09-19…21, папка Screen_01_First)

   ⚠️ ГЛАВНОЕ ПРАВИЛО: ЭТО ФИКСИРОВАННЫЙ МАКЕТ 1440×751, КОТОРЫЙ
   МАСШТАБИРУЕТСЯ ЦЕЛИКОМ. Всё внутри .hero-stage задано в ПИКСЕЛЯХ этого
   макета — и по горизонтали, и по вертикали, — а масштаб считает САМ CSS:
   scale(min(100cqw / 1440px, 100cqh / 751px)). Поэтому на любом экране
   композиция одна и та же, просто крупнее или мельче.

   ⚠️ Единицы КОНТЕЙНЕРНЫЕ (cqw/cqh от .hero), а не vw/vh, и считает это CSS,
   а не JS. Оба решения приняты после граблей: vw включает ширину полосы
   прокрутки, а window.innerWidth в мобильном браузере врёт — на экране
   360px он возвращает 393, и макет оказывался шире экрана.

   Так сделано после прямого требования Босса: «оно же должно пропорционально
   уменьшиться и быть на тех же местах, чтобы выглядело одинаково». Прежние
   заходы проваливались потому, что величины были в РАЗНЫХ единицах: шрифты в
   vw, вертикаль в процентах высоты, календарь в пикселях. На 21:9 текст
   налезал на «ВЕДУЩИЙ», на 1011×741 имя уезжало вверх над фигурой — это были
   не «ошибки в кеглях», а разные законы масштабирования у соседних блоков.

   ⚠️ НОВЫЙ БЛОК СЮДА — ТОЛЬКО В ПИКСЕЛЯХ МАКЕТА. Ни vw, ни процентов высоты,
   ни rem. Иначе он снова поедет относительно остальных.

   ⚠️ Макет прижат к НИЗУ секции (transform-origin: bottom). Это не прихоть:
   так фигура всегда упирается в нижнюю кромку экрана («иначе ощущение
   отрезанного летающего тела»), а незанятое место уходит наверх, под фон.

   Координаты сняты с эталонного кадра 1440×751 и сверены с референсом
   EXAMPLE.png. Календарь оставлен как был (Босс: «календарь наш прикольный»).

   ⚠️ Ниже 760px макет не годится (на телефоне он сжался бы в нечитаемую
   полоску) — там вертикальная версия, см. медиазапрос в конце раздела.
   Граница живёт в трёх местах: HERO_FLOW_W в v3.js и два медиазапроса здесь.

   ⚠️ ЗАТЕМНЕНИЯ ВУАЛЬЮ НЕТ (Босс: «фон так не затемняй»). Кадр приходит уже
   затемнённым из tools/make_hero_assets.py.
============================================================ */
.hero {
  --hero-gold: #c9a961;
  --hero-gold-d: #a8873f;
  --hero-sand: #e3be86;
  position: relative;
  /* ⚠️ ВЫСОТА СЕКЦИИ = ВЫСОТЕ САМОЙ КОМПОЗИЦИИ, а не всему экрану.
     Это и есть ответ на «откуда полоса фона сверху». Кадр широкий (1.92:1);
     если заставить секцию быть ровно в высоту экрана, то на «квадратном»
     окне (например 1000×800) вписанная композиция физически не закрывает
     высоту — и разница вылезает полосой. Секция просто не обязана быть в
     экран: она равна композиции, а сразу под ней начинается второй экран.
     min(...) со 100svh нужен для широких низких окон (21:9), где композиция
     по пропорции ВЫШЕ экрана — там ограничиваем и получаем поля по бокам.
     ⚠️ height, а НЕ min-height: при container-type: size высота считается без
     учёта содержимого, и с min-height единица cqh равна нулю. */
  height: min(calc(100vw * 751 / 1440), 100svh);
  /* ⚠️ Исключение для окон от 16:10 до 1.92:1 — см. медиазапрос сразу после
     этого правила: там секция добирает до низа окна. */
  padding: 0;
  overflow: hidden;
  background: #0d0a07;
  color: var(--white);
  /* Контейнер для cqw/cqh: они дают РЕАЛЬНЫЙ размер секции, без полосы
     прокрутки и без мобильных сюрпризов window.innerWidth. */
  container-type: size;
}
/* ⚠️ БЕЛАЯ ПОЛОСА НА МОНИТОРЕ 16:10 (Босс 2026-09-27: «на мониторе 16:10 под
   первым экраном зазор белой полосы второго экрана, на 21:9 её нет»).
   Причина: окно браузера на 16:10 (≈1.76–1.87:1 за вычетом вкладок и панели
   задач) «выше» макета 1.92:1. Макет упирается в ширину, секция по правилу
   выше равна ему, и в остаток окна (19–71px, в полноэкранном F11 — 199px)
   заглядывал светлый верх следующего блока. На 16:9 и 21:9 окно шире макета —
   макет упирается в высоту, полосы нет.
   Решение (вариант 1, выбран Боссом): для окон от 16:10 секция добирает до
   низа окна. Макет не трогаем — тот же масштаб по ширине, стоит на нижней
   кромке (.hero-stage прижат к низу), а лишнее уходит НАВЕРХ, под фон зала
   и меню. Порог 16:10 — ПОТОЛОК: на «квадратных» окнах (1000×800, 5:4, iPad)
   сверху набралось бы 150–280px фона — именно это Босс раньше и забраковал
   («откуда полоса фона сверху»); там остаётся правило выше.
   Граница 760px — как у телефонной версии ниже (HERO_FLOW_W в v3.js). */
@media (min-width: 760px) and (min-aspect-ratio: 16/10){
  .hero{ height: 100svh; }
}

/* ── Фон ─────────────────────────────────────────────────────────────────── */
/* Фон НЕ входит в макет: он всегда кроет всю секцию, а поля, которые остаются
   от макета при другом соотношении сторон, закрывает собой. */
.hero-bg, .hero-bg img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ── Макет ───────────────────────────────────────────────────────────────── */
/* ⚠️ МАКЕТ ЦЕЛЬНЫЙ И НЕРАЗРЫВНЫЙ: 1440×751, вписывается в экран целиком и
   центрируется. Ничего не растягивается и не разъезжается по краям.

   Была попытка (21.09) тянуть высоту и крепить верхние блоки к верху, а
   нижние к низу — чтобы убрать полосу фона при сужении окна. Босс забраковал
   сразу: «ты нахуя развалил композицию, теперь ВЕДУЩИЙ к самому верху, а
   фигура внизу». И правильно: композиция — единое целое, её нельзя растягивать.

   ⚠️ ЧЕСТНОЕ ОГРАНИЧЕНИЕ, которое надо знать. Кадр широкий (1.92:1). Если
   окно «квадратнее» (например 1000×800 — это 1.25:1), вписанный макет физически
   не закрывает всю высоту, и остаётся полоса фона. Варианта ровно три:
     • вписать и ОТЦЕНТРИРОВАТЬ — полоса делится пополам сверху и снизу (так);
     • прижать к краю — вся полоса собирается с одной стороны (было, 309px сверху);
     • заполнить по высоте с обрезкой по бокам — тогда за край уезжает календарь.
   Выбран первый: композиция цела, поля симметричны и закрыты фоном.
   ⚠️ 2026-09-27: макет ПРИЖАТ К НИЗУ секции (bottom: 0, transform-origin:
   низ). Там, где секция равна макету (почти везде), это то же самое, что
   центр. Разница — только на окнах 16:10, где секция добирает до низа окна
   (медиазапрос у .hero): лишнее уходит наверх под фон, а фигура стоит на
   нижней кромке, а не висит над ней. */
.hero-stage {
  position: absolute; left: 50%; bottom: 0;
  width: 1440px; height: 751px;
  transform: translateX(-50%) scale(min(calc(100cqw / 1440px), calc(100cqh / 751px)));
  transform-origin: center bottom;
}

/* ── Фигура ──────────────────────────────────────────────────────────────── */
/* z-index 2: проходит ПОВЕРХ титула (голова перекрывает «Д», как на референсе)
   и поверх нижней полосы, но ПОД правой колонкой и календарём.
   top + height = 766 > 751 — низ намеренно уходит за кромку макета. */
.hero-figure {
  position: absolute; z-index: 2;
  /* top + height = 766 > 751 — низ намеренно уходит за кромку макета. */
  left: 359px; top: 83px;
  width: auto; height: 683px; max-width: none;
  object-fit: contain; object-position: top center;
  filter: drop-shadow(0 26px 52px rgba(0, 0, 0, 0.45));
}

/* ── ШАР-ПЕРЕКЛЮЧАТЕЛЬ «Ведущий ↔ Организатор» (Босс 2026-09-21) ─────────────
   «Хочу, чтобы дискошар в руках мерцал, и при клике он прокрутился, фигура
   сменилась на 1_2.png, а заголовок стал ОРГАНИЗАТОР, всё остальное сохранить».

   Как устроено: вторая фигура лежит ПОВЕРХ первой и проявляется кроссфейдом
   под вспышку света на шаре. Кнопку-шар ставит v3.js (без JS её нет — не должно
   быть мёртвого элемента).

   ⚠️ ГЛАВНОЕ: шары обеих фигур обязаны совпасть на экране — он ось переключения.
   Кадры разные (ведущий 1400×2070, организатор 1400×2296; шар лежит в них
   по-разному), поэтому у второй фигуры СВОИ left/top/height. Числа считает
   tools/make_hero_assets.py — он меряет шар в обоих кадрах и печатает готовые
   строки. Доли кадра на 21.09.2026:
       ведущий      u=0.1480 v=0.2892 r=0.1393  (ширина/высота 0.67633)
       организатор  u=0.1673 v=0.2986 r=0.1571  (ширина/высота 0.60976)
   ⚠️ Поменяли фигуру в редакторе — прогоните скрипт и перепишите числа, иначе
   при переключении картинка дёрнется.
   ⚠️ Высота второй на десктопе (676.5, а не 671.7 по чистому равенству шаров)
   выбрана так, чтобы низ кадра ушёл ЗА кромку макета: иначе видна прямая линия
   среза ног. Шар от этого крупнее на 0.8% — под вспышкой не видно. */
.hero-figure--alt {
  left: 358.4px; top: 78.5px; height: 676.5px;
  opacity: 0; transition: opacity 0.32s ease;
}
.hero-figure--main { transition: opacity 0.32s ease; }
.hero-stage.is-alt .hero-figure--main { opacity: 0; }
.hero-stage.is-alt .hero-figure--alt { opacity: 1; }

/* Кнопка-шар: прозрачный круг ровно по дискошару. Своего фона нет — светится
   только псевдоэлементами, чтобы фотография под ней осталась нетронутой. */
.hero-ball {
  position: absolute; z-index: 3;
  left: 363.1px; top: 216.2px; width: 128.6px; height: 128.6px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero-ball:focus-visible { outline: 2px solid var(--gold-bright, #e6c77a); outline-offset: 6px; }
/* Три слоя поверх фотографии:
   lift  — поднимает яркость САМОГО шара (backdrop-filter по кругу). Именно он
           делает мерцание настоящим: светлеет не плёнка сверху, а зеркальные
           грани на фото. Без него эффект читался как еле заметная дымка.
   glow  — блик: узкая яркая полоса, которая обегает шар (conic-градиент).
   spark — звёздочки-искры на гранях.
   glow и spark идут через mix-blend-mode: screen — они ДОБАВЛЯЮТ света, а не
   кладут плёнку: серебро вспыхивает, тёмный пиджак рядом почти не реагирует. */
.hero-ball-lift, .hero-ball-glow, .hero-ball-spark {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
.hero-ball-glow, .hero-ball-spark { mix-blend-mode: screen; }

/* ⚠️ ПРИГЛАШЕНИЕ НАЖАТЬ (Босс 21.09.2026: «как-то плохо, непонятно, что на него
   нажать нужно»). Одного подъёма яркости мало — нужен ЖЕСТ. Кольцо расходится
   от шара раз в 2.8 секунды: читается как «нажми», но не мельтешит, потому что
   между импульсами почти половина цикла тишины. На наведении — вдвое чаще.
   На время вспышки пульс выключается, чтобы не спорить с ней. */
.hero-ball::before {
  content: ''; position: absolute; inset: -4%;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 247, 226, 0.95), 0 0 42px 12px rgba(255, 236, 190, 0.5);
  opacity: 0;
  animation: ball-ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
/* Подпись под шаром — та же золотая микро-капитель, что у «ЛИСТАЙТЕ ВНИЗ».
   Кольцо говорит «здесь что-то живое», подпись — ЧТО именно сделать; вдвоём
   они снимают вопрос «непонятно, что нажать». Появляется через 1.4с после
   загрузки, чтобы не спорить с первым впечатлением, и уходит навсегда после
   первого клика. Текст — поле hero.ball_hint; пустое поле = подписи нет. */
.hero-ball-hint {
  /* --hint-x: на телефоне шар прижат к левому краю, и подпись по центру уходила
     за кромку на 8px — там она смещается вправо и набирается мельче. */
  --hint-x: -50%;
  position: absolute; top: 106%; left: 50%; transform: translateX(var(--hint-x)) translateY(4px);
  white-space: nowrap; pointer-events: none;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-bright, #e6c77a);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-ball.is-hinted .hero-ball-hint { opacity: 0.92; transform: translateX(var(--hint-x)) translateY(0); }
.hero-ball.is-used .hero-ball-hint { opacity: 0; transform: translateX(var(--hint-x)) translateY(-4px); }
@keyframes ball-ping {
  0%        { transform: scale(0.9);  opacity: 0; }
  14%       { opacity: 0.9; }
  62%, 100% { transform: scale(1.3);  opacity: 0; }
}
.hero-ball.is-spin::before { animation: none; opacity: 0; }

/* Покой: шар дышит светом в такт кольцу-пульсу (2.8с). */
.hero-ball-lift { animation: ball-lift 2.8s ease-in-out infinite; }
@keyframes ball-lift {
  0%, 100% { -webkit-backdrop-filter: brightness(1)    saturate(1);
                     backdrop-filter: brightness(1)    saturate(1); }
  45%      { -webkit-backdrop-filter: brightness(1.34) saturate(1.06);
                     backdrop-filter: brightness(1.34) saturate(1.06); }
}
.hero-ball-glow {
  background: radial-gradient(36% 36% at 33% 28%, rgba(255,252,243,0.9), rgba(255,246,225,0.3) 48%, transparent 74%);
  opacity: 0.14; animation: ball-breathe 2.8s ease-in-out infinite;
}
/* Искра — крестик-звёздочка на грани, вспыхивает раз в цикл. */
.hero-ball-spark {
  background:
    linear-gradient(to right, transparent 44%, rgba(255,255,255,0.98) 50%, transparent 56%),
    linear-gradient(to bottom, transparent 44%, rgba(255,255,255,0.98) 50%, transparent 56%);
  background-size: 52% 52%, 52% 52%;
  background-position: 62% 24%, 62% 24%;
  background-repeat: no-repeat;
  opacity: 0; animation: ball-spark 2.8s ease-in-out infinite;
}
@keyframes ball-breathe {
  0%, 100% { opacity: 0.14; transform: translate(0, 0); }
  45%      { opacity: 0.7;  transform: translate(4%, -3%); }
}
@keyframes ball-spark {
  0%, 60%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  70%           { opacity: 0.95; transform: scale(1) rotate(14deg); }
  82%           { opacity: 0; transform: scale(1.3) rotate(22deg); }
}
@media (hover: hover) and (pointer: fine) {
  .hero-ball:hover::before,
  .hero-ball:hover .hero-ball-lift,
  .hero-ball:hover .hero-ball-glow,
  .hero-ball:hover .hero-ball-spark { animation-duration: 1.4s; }
}

/* Клик: по шару пробегает блик (conic-градиент крутится на 360°), поверх —
   короткая вспышка. Под её пиком (≈55% времени) скрипт и меняет фигуру.
   ⚠️ Настоящего вращения тут нет и быть не может: шар — часть фотографии.
   Это иллюзия света; если Босс захочет ближе к настоящему — резать шар
   отдельным слоем и тянуть его фактуру (обсуждалось, отложено). */
/* Сам шар вспыхивает: яркость и контраст его собственных пикселей. Это главное
   в иллюзии — глаз читает «грани поймали свет», а не «сверху положили пятно». */
.hero-ball.is-spin .hero-ball-lift { animation: ball-flash 0.72s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes ball-flash {
  0%   { -webkit-backdrop-filter: brightness(1)    contrast(1);
                 backdrop-filter: brightness(1)    contrast(1); }
  22%  { -webkit-backdrop-filter: brightness(1.75) contrast(1.12);
                 backdrop-filter: brightness(1.75) contrast(1.12); }
  55%  { -webkit-backdrop-filter: brightness(2.15) contrast(1.05);
                 backdrop-filter: brightness(2.15) contrast(1.05); }
  100% { -webkit-backdrop-filter: brightness(1)    contrast(1);
                 backdrop-filter: brightness(1)    contrast(1); }
}
/* Блик обегает шар полтора оборота — чем быстрее, тем больше похоже на кручение. */
.hero-ball.is-spin .hero-ball-glow {
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.98) 18deg, transparent 54deg,
                   transparent 150deg, rgba(255,252,240,0.75) 172deg, transparent 206deg,
                   transparent 300deg, rgba(255,250,235,0.5) 318deg, transparent 344deg),
    radial-gradient(62% 62% at 50% 45%, rgba(255,250,238,0.55), transparent 72%);
  animation: ball-sweep 0.72s cubic-bezier(0.3, 0, 0.25, 1);
}
.hero-ball.is-spin .hero-ball-spark { animation: ball-burst 0.72s ease-out; }
@keyframes ball-sweep {
  0%   { transform: rotate(0deg);   opacity: 0.5; }
  55%  { transform: rotate(320deg); opacity: 1; }
  100% { transform: rotate(540deg); opacity: 0; }
}
@keyframes ball-burst {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1.5) rotate(40deg); }
  100% { opacity: 0; transform: scale(2.4) rotate(80deg); }
}
/* Свечение ВОКРУГ шара — под ним и проходит подмена фигуры. */
.hero-ball.is-spin { animation: ball-bloom 0.72s ease-out; }
@keyframes ball-bloom {
  0%   { box-shadow: 0 0 0 0 rgba(255, 246, 222, 0); }
  30%  { box-shadow: 0 0 46px 10px rgba(255, 246, 222, 0.55); }
  55%  { box-shadow: 0 0 92px 30px rgba(255, 248, 228, 0.72); }
  100% { box-shadow: 0 0 0 0 rgba(255, 246, 222, 0); }
}

/* Слово в заголовке меняется коротким затуханием (текст подменяет скрипт,
   строго по событию окончания перехода — см. v3.js). Гаснет быстро,
   появляется чуть медленнее: так смена читается как «проявилось», а не «моргнуло». */
.hero-title { transition: opacity 0.24s ease; }
.hero-title.is-swap { opacity: 0; transition: opacity 0.13s ease; }
/* ⚠️ «ОРГАНИЗАТОР» на 36% длиннее «ВЕДУЩЕГО» и тем же кеглем заезжал бы на
   календарь на 170px. Решение Босса (21.09.2026): то же слово той же ШИРИНЫ —
   167px → 124px, левый и правый край совпадают с «ВЕДУЩИЙ», композиция не
   дёргается. top подправлен так, чтобы совпала БАЗОВАЯ ЛИНИЯ (низ 259 против 258).
   ⚠️ КЕГЛЬ ВИСИТ НА СЛОВЕ, А НЕ НА СЦЕНЕ. Сначала правило было
   `.hero-stage.is-alt .hero-title`, и на обратном переходе Босс поймал кадр:
   класс сцены снимается сразу, а текст меняется на 160мс позже — эти 160мс
   «ОРГАНИЗАТОР» стоял ГИГАНТСКИМИ буквами (167px) и только потом превращался
   в «Ведущий». Теперь класс переключает скрипт ровно в тот момент, когда
   подменяет текст, — то есть пока слово невидимо. */
/* ⚠️ КЕГЛЬ ПОДНЯТ ДО ПРЕДЕЛА ЗАЗОРА (Босс 2026-09-23: «увеличь кегль, но
   чтобы остался зазор между Р и календарём»). Замер на 1920 (правый край
   слова против левого края .hero-col-cal = 1473px):
     124px → зазор 190   136px → 74   138px → ~54
     140px → 35          144px → −4 (наезд на календарь)
   Взято 138px: заметно крупнее и с запасом до календаря.
   top пересчитан так, чтобы БАЗОВАЯ ЛИНИЯ осталась прежней: слово стало
   выше на ~16px, поэтому top уменьшен на столько же. */
.hero-title.is-alt-word { font-size: 138px; top: 157px; }

@media (prefers-reduced-motion: reduce) {
  /* Пульс — движение; вместо него постоянное тихое кольцо, чтобы шар всё равно
     читался как кнопка. */
  .hero-ball::before { animation: none; opacity: 0.5; transform: none; }
  .hero-ball-lift { animation: none; }
  .hero-ball-glow, .hero-ball-spark { animation: none; opacity: 0.18; }
  .hero-ball.is-spin, .hero-ball.is-spin .hero-ball-glow, .hero-ball.is-spin .hero-ball-spark { animation: none; }
  .hero-figure--main, .hero-figure--alt, .hero-title { transition: none; }
}

/* ── «Й» с короной (Босс 2026-09-26: «Corona.png — над буквой И, чтобы из неё сделать красивую Й
   в фамилии Цареградский и Ведущий»). В ТЕКСТЕ ОСТАЁТСЯ «Й» — H1 для поиска, копирование и чтение вслух
   «Ведущий Феликс Цареградский». Рисуется она буквой «И»: шрифты-подмены ниже содержат только «Й/й»
   с глифом «И» того же шрифта (tools/make_crown_yi.py), остальные буквы идут из основного Jost/Cormorant.
   Корона — ::after у слова (см. ниже), картинка /images/brand/crown-yi-gold.png из PNG Босса.
   font-display: block — пока подмена грузится (≈1 КБ, preload в home.ejs), «Й» невидима, а не мелькает
   с краткой под короной. Прежний приём (обрезка краткой, 2026-09-21) откатан — changelog 253. */
@font-face {
  font-family: 'Jost Yi'; font-style: normal; font-weight: 100 900; font-display: block;
  src: url(/fonts/jost-yi.woff2) format('woff2'); unicode-range: U+0419, U+0439;
}
@font-face {
  font-family: 'Cormorant Yi'; font-style: normal; font-weight: 300 700; font-display: block;
  src: url(/fonts/cormorant-yi.woff2) format('woff2'); unicode-range: U+0419, U+0439;
}

/* ── Заголовок ───────────────────────────────────────────────────────────── */
/* ⚠️ Без z-index СПЕЦИАЛЬНО: со своим z-index h1 замыкал бы контекст наложения
   и «Феликс Цареградский» всё равно оказывался бы под фигурой. */
.hero-h1 { position: absolute; inset: 0; margin: 0; pointer-events: none; }
/* Имя и фамилия — один шрифт, разные кегли: «Феликс» шесть букв, «Цареградский»
   двенадцать, и каждая строка упирается в диско-шар на своей высоте. */
.hero-name, .hero-surname {
  display: block; position: absolute; z-index: 3; left: 60px;
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; color: var(--white);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.hero-name { top: 282px; font-size: 50px; }
/* Строка запроса внутри H1 (Босс 2026-10-09): заголовок страницы — «Ведущий мероприятий в Сочи
   Феликс Цареградский». Набрана как подписи первого экрана (Jost, капс, разрядка) и золотом,
   чтобы не спорить ни с титулом, ни с именем. Стоит посередине зазора между базовой линией
   титула (≈255px) и верхом букв «ФЕЛИКС» (≈290px): по 12px сверху и снизу. Выше не поднимать —
   под строкой «В СОЧИ» проходит ножка «Д» из «ВЕДУЩИЙ», она спускается на 6px ниже базовой линии.
   У «ОРГАНИЗАТОР» базовая линия та же (см. .is-alt-word) — строка остаётся на месте. */
.hero-sub {
  display: block; position: absolute; z-index: 3; left: 60px; top: 265px;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 15px; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase;
  white-space: nowrap; color: var(--gold-bright, #e6c77a);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Корона над «Й» в «ВЕДУЩИЙ» и «ЦАРЕГРАДСКИЙ» (Босс 2026-09-26, шрифты-подмены — выше). Сама буква рисуется
   как «И» (краткой в глифе нет — резать ничего не надо), корона — ::after слова: оба слова кончаются на «Й».
   ⚠️ ЧИСЛА ЗАМЕРЕНЫ ПО DOM, НЕ ПО КАНВЕ (урок changelog 253): центр последней буквы — Range по символу,
   базовая линия — нулевой инлайн-блок с vertical-align: baseline, верх заглавной = база − capHeight из файла
   шрифта (OS/2: Jost 0.700, Cormorant 0.625). Всё в em слова — масштаб hero на них не влияет:
     --crown-cx  — центр «И» от ПРАВОГО края коробки слова;
     --crown-cap — верх заглавной от ВЕРХА коробки (с padding-top у заголовка);
     --crown-w   — ширина короны, --crown-gap — зазор между ободом и буквой.
   Меняете кегль, line-height, padding или межбуквенный этих слов — ПЕРЕМЕРИТЬ (скрипт замера — changelog 415).
   Пропорция 0.6583 = 316/480 — у файла crown-yi-gold.png (tools/make_crown_yi.py). */
.hero-title::after, .hero-surname::after {
  content: ''; position: absolute; pointer-events: none;
  width: var(--crown-w); height: calc(var(--crown-w) * 0.6583);
  right: calc(var(--crown-cx) - var(--crown-w) / 2);
  top: calc(var(--crown-cap) - var(--crown-gap) - var(--crown-w) * 0.6583);
  background: url(/images/brand/crown-yi-gold.png) center / contain no-repeat;
}
/* тень заголовка (filter на самом слове) ложится и на корону; у фамилии тень текстовая — короне своя */
.hero-title {
  display: block;
  position: absolute; z-index: 1; left: 60px; top: 135px;
  font-family: 'Jost Yi', 'Jost', sans-serif; font-weight: 600;   /* 'Jost Yi' — только «Й» (как «И»), см. выше */
  font-size: 167px; line-height: 0.74; letter-spacing: 0.005em; text-transform: uppercase;
  /* ⚠️ Краткая у «Й» выходит ВЫШЕ строки, а фон под background-clip:text
  рисуется только по коробке элемента — без этой пары читалось «ВЕДУЩИИ». */
  padding-top: 0.16em; margin-top: -0.16em;
  background: linear-gradient(180deg, #fffdfb 0%, #fcf8ee 52%, #ead7b9 76%, #d5b283 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
  --crown-w: 0.5em; --crown-cx: 0.3988em; --crown-cap: 0.1721em; --crown-gap: 0.05em;
}
.hero-surname {
  top: 334px; font-size: 29px; font-family: 'Cormorant Yi', 'Cormorant Garamond', serif;
  --crown-w: 0.62em; --crown-cx: 0.4036em; --crown-cap: 0.1321em; --crown-gap: 0.07em;
}
.hero-surname::after { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
/* «ОРГАНИЗАТОР» (переключатель шара) — без «Й», без короны */
.hero-title.is-alt-word::after { content: none; }
.hero-rule {
  position: absolute; z-index: 3; left: 60px; top: 376px;
  display: block; width: 62px; height: 1px;
  background: var(--hero-gold);
}
.hero-claim {
  position: absolute; z-index: 3; left: 60px; top: 387px;
  margin: 0; width: 490px; white-space: pre-line;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: 14px; letter-spacing: 0.24em; line-height: 1.55; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ── Правый лозунг ───────────────────────────────────────────────────────── */
.hero-motto { position: absolute; z-index: 3; left: 792px; top: 270px; width: 293px; }
.hero-motto-rule { display: block; width: 240px; height: 1px; background: rgba(201, 169, 97, 0.7); margin-bottom: 13px; }
.hero-lead {
  margin: 0; white-space: pre-line;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 39px; line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.hero-script {
  margin: 16px 0 0; white-space: pre-line;
  transform: rotate(-4deg); transform-origin: left top;
  font-family: 'Marck Script', cursive; font-weight: 400;
  font-size: 36px; line-height: 1.16; color: var(--hero-sand);
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* ── Колонка календаря ───────────────────────────────────────────────────── */
/* Масштаб календарю больше не нужен: его масштабирует сам макет. */
.hero-col-cal { position: absolute; z-index: 4; right: 43px; top: 90px; }

/* ── Нижняя полоса: ценности, цифры, шоурил ──────────────────────────────── */
/* Своего z-index у полосы нет НАМЕРЕННО: иначе она замыкает контекст наложения
   и «Ценности» не могут подняться над фигурой — «История» пропадала под ногой. */
.hero-strip {
  position: absolute; left: 60px; right: 58px; top: 586px;
  display: grid; grid-template-columns: 688px 423px 1fr; align-items: center;
}
.hero-values, .hero-stats { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.hero-values { position: relative; z-index: 3; gap: 30px; }
.hero-value { display: flex; align-items: center; gap: 12px; }
.hero-value-icon { color: var(--hero-gold); flex: none; width: 23px; height: auto; }
.hero-value-text { display: flex; flex-direction: column; }
.hero-value-text b, .hero-value-text i { font-family: 'Jost', sans-serif; font-style: normal; white-space: pre-line; }
.hero-value-text b { font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); }
.hero-value-text i { margin-top: 4px; font-size: 10px; font-weight: 300; letter-spacing: 0.11em; line-height: 1.5; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
/* Цифры тоже поднимаем над фигурой: её ноги проходят как раз по этой полосе. */
.hero-stats { position: relative; z-index: 3; gap: 0; }
.hero-stat { text-align: center; padding: 0 24px; border-left: 1px solid rgba(201, 169, 97, 0.32); }
.hero-stat:first-child { border-left: 0; }
.hero-stat b {
  display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 32px; line-height: 1; color: var(--hero-sand);
}
.hero-stat i {
  display: block; margin-top: 5px; font-family: 'Jost', sans-serif; font-style: normal;
  font-size: 10px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
/* На референсе тут «Смотреть шоурил»; надпись и адрес — поля редактора
   (hero.showreel / link.link40), поэтому смена на шоурил обойдётся без кода. */
.hero-showreel {
  position: relative; display: flex; align-items: center; gap: 14px;
  border: 0; text-decoration: none; white-space: pre-line;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.17em; line-height: 1.45; text-transform: uppercase; color: var(--white);
}
.hero-showreel::before {
  content: ''; flex: none; width: 38px; height: 38px;
  border: 1px solid rgba(201, 169, 97, 0.85); border-radius: 50%;
}
/* Треугольник «play» внутри кружка — псевдоэлементом, без лишних узлов. */
.hero-showreel::after {
  content: ''; position: absolute; pointer-events: none;
  top: 50%; transform: translateY(-50%); left: 15px;
  width: 0; height: 0;
  border-left: 9px solid var(--hero-gold);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.hero-showreel:hover { color: var(--hero-gold); }
.hero-showreel:hover::before { border-color: var(--hero-gold); background-color: rgba(201, 169, 97, 0.12); }

/* ── Нижняя строка: «листайте вниз» по центру, подпись справа ─────────────── */
.hero-bottom { position: absolute; z-index: 3; left: 60px; right: 58px; top: 668px; height: 75px; }
.hero-scroll {
  position: absolute; left: 50%; transform: translateX(-50%); top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; text-decoration: none;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.hero-scroll::before { content: ''; width: 1px; height: 18px; background: rgba(255, 255, 255, 0.38); }
.hero-scroll::after { content: '↓'; font-size: 1.1em; letter-spacing: 0; opacity: 0.75; }
.hero-scroll:hover { color: var(--hero-gold); }
.hero-sign-wrap { position: absolute; right: 0; top: 9px; display: flex; align-items: center; gap: 20px; }
.hero-sign { font-family: 'Marck Script', cursive; font-size: 21px; line-height: 1; color: var(--hero-sand); }
.hero-more {
  padding-left: 20px; border-left: 1px solid rgba(201, 169, 97, 0.4);
  white-space: pre-line;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.17em; line-height: 1.5; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Шапка НАД первым экраном (Босс 2026-09-19, референс Screen_01_First) ───────
   На референсе шапка не плашка, а прозрачная строка поверх фотографии.
   Живёт ТОЛЬКО пока страница не прокручена: .scrolled возвращает обычную
   светлую шапку, иначе белые надписи исчезли бы на светлых секциях ниже.

   ⚠️ ПРОЗРАЧНОСТЬ И БЕЛЫЕ НАДПИСИ — НА ВСЕХ УСТРОЙСТВАХ (Босс 2026-09-21:
   «не на всех устройствах прозрачная шапка на первом экране»). Раньше весь
   блок лежал внутри @media (min-width: 1200px), и на планшете с телефоном
   шапка оставалась светлой плашкой. В медиазапросе осталась только
   трёхколоночная раскладка логотипа с монограммой и ролью — она требует
   места, которого на узких экранах нет. */
.nav-mono { display: none; }   /* показывается только в раскладке ≥1200 */

.nav--hero:not(.scrolled):not(.menu-open) {
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
/* Полоска затемнения ПОД шапкой — она есть и на референсе. Без неё надписи
   ложатся прямо на пятно люстры и пропадают. */
.nav--hero:not(.scrolled):not(.menu-open)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 7, 4, 0.72) 0%, rgba(10, 7, 4, 0.34) 62%, rgba(10, 7, 4, 0) 100%);
}
/* Тени обязательны: надписи ложатся на золотой зал, и без них имя сливается
   с пятном люстры, а золотая роль — с золотым фоном. */
.nav--hero:not(.scrolled):not(.menu-open) .nav-logo-name {
  color: var(--white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.nav--hero:not(.scrolled):not(.menu-open) .nav-logo-role {
  color: rgba(219, 190, 132, 0.95); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.nav--hero:not(.scrolled):not(.menu-open) .nav-links a,
.nav--hero:not(.scrolled):not(.menu-open) .nav-dropdown-btn {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.88);
}
.nav--hero:not(.scrolled):not(.menu-open) .nav-links a:hover,
.nav--hero:not(.scrolled):not(.menu-open) .nav-dropdown-btn:hover { color: var(--hero-gold, #c9a961); }
.nav--hero:not(.scrolled):not(.menu-open) .nav-sep { background: rgba(255, 255, 255, 0.25); }
/* Раскрывашки «Форматы ▾» и «Полезное ▾» — кремовая панель ВНУТРИ .nav-links, и белый цвет пунктов шапки с тенью
   протекал в неё: над первым экраном пункты меню были белыми на кремовом, почти не читались (2026-09-26).
   Возвращаем панели её обычные цвета (как у .nav-dropdown-menu / .nav-mega-all ниже в файле). */
.nav--hero:not(.scrolled):not(.menu-open) .nav-dropdown-menu a { color: var(--soft); text-shadow: none; }
.nav--hero:not(.scrolled):not(.menu-open) .nav-dropdown-menu a:hover { color: var(--gold); }
.nav--hero:not(.scrolled):not(.menu-open) .nav-mega a.nav-mega-all { color: var(--gold-text); }
.nav--hero:not(.scrolled):not(.menu-open) .nav-mega a.nav-mega-all:hover { color: var(--dark); }
/* Бургер на узких экранах — тоже белый, иначе тёмные полоски на тёмном фоне. */
.nav--hero:not(.scrolled):not(.menu-open) .nav-burger span { background: var(--white); }
/* Кнопка справа: на референсе обведённая, а не залитая золотом. Стрелка « →» снята 2026-09-26 (правило Босса:
   в кнопках стрелок не ставим). */
.nav--hero:not(.scrolled):not(.menu-open) > .btn-gold {
  background: transparent; color: var(--white);
  border: 1px solid rgba(201, 169, 97, 0.75);
}
.nav--hero:not(.scrolled):not(.menu-open) > .btn-gold:hover {
  background: rgba(201, 169, 97, 0.16); border-color: var(--hero-gold, #c9a961);
}

@media (min-width: 1200px) {
  .nav-mono img { display: block; width: auto; height: 44px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)); }
  /* БЕЛАЯ шапка (главная после прокрутки и все внутренние страницы): знак слева, справа имя и под ним роль
     (Босс 2026-09-26: «когда шапка белеет — подпись оставь и знак наш вставь»). Прозрачная раскладка ниже
     перебивает это своими правилами. */
  .nav-logo { display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; }
  .nav-mono {
    /* Знак «ФЦ» картинкой (Босс 2026-09-25; было — буквы «ФЦ» в золотой рамке). Высота 44 px — в 64 px шапки. */
    flex: none; margin-right: 0; line-height: 0;
    display: flex; align-items: center; grid-row: 1 / span 2;
  }
  .nav:not(.nav--hero) .nav-mono img, .nav--hero.scrolled .nav-mono img { height: 40px; filter: none; }
  /* Три колонки В СТРОКУ, как на референсе: монограмма | имя | роль. */
  .nav--hero:not(.scrolled):not(.menu-open) .nav-logo {
    display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
    align-items: center; column-gap: 24px;
  }
  .nav--hero:not(.scrolled):not(.menu-open) .nav-mono { display: flex; align-items: center; grid-row: auto; }
  .nav--hero:not(.scrolled):not(.menu-open) .nav-logo-name {
    font-size: 0.82rem; line-height: 1.25;
    /* В px, а не в ch: «Цареградский» с разрядкой шире 13ch и вылезал на роль. */
    max-width: 124px; white-space: normal;
  }
  /* Роль в ПРОЗРАЧНОЙ шапке первого экрана снята (Босс 2026-09-26: «убери Ведущий и организатор мероприятий»):
     остаются знак и имя. В белой шапке роль на месте. Прежняя раскладка роли — git show 0833568 -- public/css/v3.css. */
  .nav--hero:not(.scrolled):not(.menu-open) .nav-logo-role { display: none; }
}

/* ── Планшеты и складни ──────────────────────────────────────────────────────
   ⚠️ ЗДЕСЬ НАМЕРЕННО НЕТ ОТДЕЛЬНОГО ПРАВИЛА. 21.09 пробовали для «квадратных»
   экранов (раскрытый Fold 884×760, планшет в ландшафте) растягивать секцию на
   весь экран и центрировать композицию. Босс забраковал: «на планшетах
   сломалось, раньше было лучше — оно как на ПК уменьшало масштаб».
   Правильное поведение — общее для всех: высота секции равна высоте
   композиции, она во всю ширину, а сразу под ней начинается второй экран.
   Не возвращайте сюда height: 100svh. */

/* ── Телефон: ВТОРОЙ фиксированный макет, 390×600 ────────────────────────── */
/* ⚠️ Тот же принцип, что у десктопа: всё внутри в ПИКСЕЛЯХ макета, масштаб
   считает CSS. Но макет СВОЙ, вертикальный, и это вынужденно: десктопный кадр
   1.92:1, уменьшенный до ширины телефона, дал бы кегль основного текста 3–4px.

   ⚠️ Это КОМПОЗИЦИЯ, А НЕ СТОЛБИК (Босс: «там надписи все стало в столбик»).
   Как и на десктопе, блоки разнесены по горизонтали: девиз слева, УТП справа,
   фигура по центру поверх них. Прежняя версия выстраивала всё по левому краю
   одной колонкой — и читалась именно как список.

   ⚠️ ШИРИНА макета фиксирована (390px), а ВЫСОТА тянется под экран. Масштаб
   считается ТОЛЬКО по ширине, поэтому полей по бокам нет никогда. Телефоны
   сильно разнятся по высоте, и фиксированная высота давала на длинных
   аппаратах пустую полосу сверху и дыру между текстом и фигурой — Босс это
   и увидел: «как-то высоко над фигурой, и зазор над ВЕДУЩИЙ здоровый».
   ⚠️ Поэтому ВЕРХНИЕ блоки привязаны к ВЕРХУ (top), нижние — к НИЗУ (bottom),
   а фигура растянута между ними (top + bottom) и вписывается по месту:
   на длинном экране она просто крупнее, пустоты не остаётся.
   ⚠️ Граница 760px есть ещё в медиазапросе сворачивания календаря (.hb-toggle) —
   они обязаны совпадать. */
@media (max-width: 759px) {
  /* ⚠️ Высота БЕЗ панели действий (68px): иначе фигура упирается в самый низ
     экрана и панель связи закрывает ей ноги. Теперь ноги аккуратно встают
     на панель (Босс: «если ноги будут именно к нему красиво стыковаться»). */
  .hero { display: block; position: relative; height: calc(100svh - 68px); padding: 0; overflow: hidden; }

  .hero-name, .hero-surname {
    position: absolute; left: 20px; max-width: none; white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  }
  /* ⚠️ Имя, фамилия и линия стоят на 5px ниже прежнего (было 162 / 187 / 211): между титулом
     и «ФЕЛИКС» встала строка запроса .hero-sub (Босс 2026-10-09). Девиз .hero-claim НЕ сдвинут:
     на коротких телефонах под ним сразу шар, запаса там нет. */
  .hero-name { top: 167px; font-size: 26px; }
  /* На телефоне строка светлая, а не золотая: под ней самый яркий участок кадра,
     золото 10-м кеглем там теряется (сверено на 390 и 320px). Тон — низ градиента титула. */
  .hero-sub {
    left: 20px; top: 154px;
    font-size: 10px; letter-spacing: 0.26em;
    color: #f6e7c3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  }
  /* корона над «Й»: у телефона свой line-height заголовка — верх заглавной ниже (замер по DOM на 390) */
  .hero-title {
    position: absolute; left: 20px; top: 106px;
    font-size: 52px; line-height: 0.82;
    padding-top: 0.16em; margin-top: -0.16em;   /* иначе пропадает краткая у «Й» */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
    --crown-cap: 0.2108em;
  }
  .hero-surname {
    top: 192px; font-size: 17px;
    --crown-cap: 0.1405em; --crown-cx: 0.4047em; --crown-w: 0.8em;
  }   /* кегль 17px — при 0.62em корона была ~10px, не читалась */
  .hero-rule { position: absolute; left: 20px; top: 216px; width: 46px; }
  /* ⚠️ Девиз и УТП стоят НА ПЛЕЧАХ фигуры, по бокам от головы, а не висят над
     ней (Босс: «блоки текста парят выше фигуры слишком, тут тогда они должны
     быть как бы на плечах, так как ширина не позволяет по разные стороны»).
     Координаты привязаны к ВЕРХУ ФИГУРЫ: она начинается на 214px, голова
     занимает примерно её первую четверть — значит плечи около 300px. */
  /* ⚠️ Девиз и УТП стоят ПО БОКАМ ОТ ГОЛОВЫ и кончаются ВЫШЕ линии плеч —
     «как будто лежат на плечах», с зазором, а не поверх фигуры (Босс: «ты
     прям положил на плечи, что оно залезает на фигуру, я имел в виду как
     будто лежит на плечах, чтобы были зазоры»). Голова занимает по ширине
     только середину, поэтому слева и справа от неё текст помещается целиком. */
  .hero-claim {
    position: absolute; left: 16px; top: 225px; width: 128px;
    font-size: 10px; line-height: 1.6; letter-spacing: 0.2em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  }
  .hero-motto { position: absolute; left: 246px; top: 232px; right: auto; width: 130px; }
  .hero-motto-rule { width: 70px; margin-bottom: 6px; }
  .hero-lead { font-size: 16px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
  .hero-script { margin-top: 5px; font-size: 14px; transform: rotate(-3deg); }

  /* Фигура прижата к низу макета и обрезается им — как на десктопе. */
  /* ⚠️ Фигура растянута от конца текста до низа (top + bottom, без height):
     на длинном телефоне она крупнее и заполняет место, на коротком — мельче.
     Прежняя фиксированная высота оставляла дыру между текстом и фигурой. */
  /* ⚠️ Высота фигуры вынесена в --fig-h: по ней же считаются посадка второй
     фигуры и круг кнопки-шара — они обязаны ходить вместе с картинкой.
     min(…, 576px) заменил прежний max-width: 390px. Причина: при клампе по
     ширине object-fit: contain начинал вписывать кадр с полями, коробка
     элемента переставала совпадать с самой картинкой — а по коробке считается
     шар. Нарисованный результат тот же: 576 × 0.67633 = 389.6 ≈ прежние 390. */
  .hero-stage {
    /* bottom: auto — сброс общего правила (там макет прижат к низу) */
    position: absolute; left: 50%; top: 0; bottom: auto;
    width: 390px;
    /* Высота в «макетных» пикселях: после масштаба даёт ровно высоту секции. */
    height: calc(100cqh * 390px / 100cqw);
    /* calc() обязателен: голое деление прямо в scale() браузер не считает. */
    transform: translateX(-50%) scale(calc(100cqw / 390px));
    transform-origin: top center;
    --fig-h: min(calc(100cqh * 390px / 100cqw - 214px), 576px);
  }
  .hero-figure {
    position: absolute; z-index: 2;
    left: 50%; transform: translateX(-50%);
    /* ⚠️ Высота задана ЯВНО, а не парой top+bottom: у картинки есть атрибуты
       width/height, из них браузер выводит aspect-ratio и при height:auto
       считает высоту от ширины — фигура не дотягивалась до низа на 50px. */
    /* ⚠️ 214px, НЕ БОЛЬШЕ: каждый пиксель здесь — минус к размеру Феликса.
       Пробовал опустить до 300, чтобы освободить место тексту, — фигура
       сразу ужалась с 380×562 до 322×476, и Босс это забраковал. Текст
       разводится по бокам от ГОЛОВЫ, а не опусканием фигуры. */
    top: auto; bottom: 0; height: var(--fig-h);
    width: auto; max-width: none;
    object-fit: contain; object-position: bottom center; margin: 0;
  }
  /* Вторая фигура на телефоне: низ там же (ноги на панели связи), шар — в той же
     точке. Из равенства «расстояние от шара до низа»: h2 = h1 × 0.7108/0.7014. */
  .hero-figure--alt {
    left: 50%; top: auto; bottom: 0;
    height: calc(var(--fig-h) * 1.0134);
    /* при простом центрировании её шар уходит правее — возвращаем на место */
    transform: translateX(-50%) translateX(calc(var(--fig-h) * -0.0325));
  }
  /* Круг кнопки считается от той же --fig-h: доли кадра ведущего (u .1480,
     v .2892, r .1393) × ширина фигуры (0.67633 высоты). */
  .hero-ball {
    --ball-r: calc(var(--fig-h) * 0.09421);
    left: calc(195px - var(--fig-h) * 0.238 - var(--ball-r));
    top: auto; bottom: calc(var(--fig-h) * 0.7108 - var(--ball-r));
    width: calc(var(--ball-r) * 2); height: calc(var(--ball-r) * 2);
  }
  .hero-ball-hint { --hint-x: -38%; font-size: 10px; letter-spacing: 0.15em; }
  .hero-title.is-alt-word { font-size: 38.7px; top: 116px; }

  /* Кнопка дат и цифры лежат поверх фигуры; 72px снизу — над мобильной панелью. */
  .hero-col-cal { position: absolute; z-index: 5; left: 16px; right: 16px; top: auto; bottom: 4px; transform: none; }
  /* ⚠️ Полоса растянута на весь макет и сама ничего не ловит (pointer-events),
     а её половинки разведены: ЦЕННОСТИ наверх — в пустое место над титулом
     (Босс: «сверху где они можно поместить блок ЛЮДИ ЭМОЦИИ ИСТОРИЯ, тогда
     будет цельная композиция»), ЦИФРЫ остаются внизу поверх фигуры. */
  .hero-strip {
    position: absolute; z-index: 4; inset: 0;
    display: block; padding: 0; pointer-events: none;
  }
  .hero-values {
    display: flex; position: absolute; top: 40px; left: 16px; right: 16px;
    justify-content: space-between; gap: 6px; pointer-events: auto;
  }
  /* Иконка в РЯД с текстом, а не над ним: так блок вдвое ниже (38 против 65px
     макета) и между ним и «ВЕДУЩИЙ» остаётся нормальный зазор. */
  .hero-value { flex-direction: row; align-items: flex-start; gap: 6px; }
  /* ⚠️ Контраст: на телефоне блок лежит на самом ярком месте зала, и мелкий
     полупрозрачный текст там пропадал (Босс: «на телефоне плохо видно»).
     Описание сделано почти непрозрачным, кегли чуть крупнее, у всех трёх
     элементов — тень. Не ослабляйте: замеряли на золотом фоне. */
  .hero-value-icon { width: 18px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.7)); }
  /* Тень в три слоя даёт тёмный ореол вокруг букв — на ярком пятне люстры
     одного слоя не хватало, текст всё равно читался серым. */
  .hero-value-text b {
    font-size: 10px; letter-spacing: 0.16em; color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 7px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.75);
  }
  .hero-value-text i {
    margin-top: 3px; font-size: 8px; letter-spacing: 0.08em; line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 7px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.75);
  }
  .hero-showreel { display: none; }                 /* места нет — оставляем цифры */
  .hero-stats {
    position: absolute; left: 0; right: 0; bottom: 80px;
    justify-content: center; margin: 0; gap: 0; pointer-events: auto;
  }
  .hero-stat { padding: 0 12px; }
  .hero-stat b { font-size: 17px; }
  .hero-stat i { margin-top: 2px; font-size: 8px; letter-spacing: 0.12em; }
  .hero-bottom { display: none; }                   /* подпись и «листайте вниз» уходят */
}


/* hero buttons */
/* .btn-hero-gold / .btn-hero-dark — пара кнопок «Обсудить стоимость / Смотреть
   кейсы». Имена исторические и врут: в живом шаблоне они стоят не в hero, а в
   секции преимуществ (#advantages), и только в подстраховке v3.html остались на
   тёмной полосе. Поэтому вид описан в BUTTONS: золотая = .btn-gold,
   тёмная = .btn-outline-light (для тёмной полосы), а на светлом втором экране
   её перекрывает .adv-ctas ниже. */


/* ============================================================
   PACKAGES
============================================================ */
/* Пакеты (Босс 2026-09-14): отдельные карточки с зазорами, блок шире колонки текста,
   креатив вписан внутрь карточки с полями. */
/* поля под тень и подъём карточки при наведении — иначе overflow их обрежет (снизу тень длиннее) */
.pkg{
  flex: 0 0 auto;
  width: calc((100% - 3 * var(--pkg-gap)) / 4);
  min-width: 0;
  overflow: hidden;
  background: var(--cream-dark); padding: 14px 14px 28px; /* бежевый как фон «Как мы работаем» (Босс 2026-09-14); «Премиум» — тёмный, .pkg.featured */
  display: flex; flex-direction: column;
  border: 0.5px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(28,26,22,0.04), 0 18px 40px -26px rgba(28,26,22,0.32);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pkg:hover{ transform: translateY(-4px); box-shadow: 0 2px 4px rgba(28,26,22,0.05), 0 26px 50px -26px rgba(28,26,22,0.4); }
.pkg-media{ aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--cream); margin-bottom: 24px; }
.pkg-media picture, .pkg-media img{ display: block; width: 100%; height: 100%; }
.pkg-media img{ object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.pkg:hover .pkg-media img{ transform: scale(1.03); }
.pkg-body{ display: flex; flex-direction: column; flex: 1; padding: 0 14px; }
/* ряд карточек шире колонки текста — заголовок блока по центру, как и «Нестандартный формат» под ним */
/* Правило «#packages .wrap > .label, > h2 { text-align: center }» снято 2026-09-22:
   оно центрировало заголовок пакетов СЕЛЕКТОРОМ ПО ID, то есть било любой класс,
   и новая шапка экрана (прижата влево) не могла его пересилить. Выравнивание
   теперь задаёт сам блок — см. .pk-heading / .pk-eyebrow. */
@media (max-width: 1199px) and (min-width: 961px) { .pkg { width: calc((100% - 2 * var(--pkg-gap)) / 3); } }
@media (prefers-reduced-motion: reduce) { .pkg, .pkg-media img { transition: none; } .pkg:hover, .pkg:hover .pkg-media img { transform: none; } }
/* Телефон: все цены одним списком над карточками (карусель по одной карточке не давала
   сравнить пакеты). Показывается только ≤640, см. медиа-блок */
.pkg-summary{ display: none; list-style: none; margin: 28px 0 0; padding: 0; border: 0.5px solid var(--border); background: var(--white); }
.pkg-summary li{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid var(--border); }
.pkg-summary li:last-child{ border-bottom: none; }
.pkg-summary a{ font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--dark); }
.pkg-summary span{ font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--gold-text); white-space: nowrap; }
.pkg .btn{ width: 100%; justify-content: center; padding: 18px 12px; white-space: normal; text-align: center; line-height: 1.3; font-size: 0.74rem; letter-spacing: 0.1em; min-height: 58px; } /* надпись в одну строку при карточке ~320px, кнопки в ряду одной высоты */

.pkg.featured{
  border-color: rgba(154,122,50,0.55);
  background: var(--dark); color: var(--white);
}
.pkg.featured .pkg-desc{ color: rgba(255,255,255,0.45); }
.pkg.featured .pkg-feat{ color: rgba(255,255,255,0.55); }
.pkg.featured .pkg-feat::before{ background: var(--gold); }
.pkg.featured .pkg-divider{ background: rgba(255,255,255,0.1); }

.pkg-badge{
  display: inline-block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 3px 8px; border: 0.5px solid var(--border-gold);
  color: var(--gold); margin-bottom: 16px; align-self: flex-start;
}
.pkg h3{ margin-bottom: 6px; }
.pkg-desc{ font-size: 0.95rem; color: var(--soft); margin-bottom: 20px; line-height: 1.6; }
.pkg-divider{ height: 0.5px; background: var(--border); margin-bottom: 20px; }
.pkg-price{ font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300; color: var(--dark); line-height: 1; margin-bottom: 4px; }
.pkg.featured .pkg-price{ color: var(--white); }
.pkg-price-note{ font-size: 0.7rem; color: var(--soft); margin-bottom: 20px; }
.pkg-from{ font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; color: var(--soft); margin-right: 7px; }
.pkg.featured .pkg-from{ color: rgba(255,255,255,0.65); }
.pkg-feats{ display: flex; flex-direction: column; gap: 8px; flex: 1; margin-bottom: 28px; }
.pkg-feat{ font-size: 0.95rem; color: var(--mid); display: flex; gap: 10px; align-items: flex-start; }
.pkg-feat::before{ content:''; display:block; flex-shrink:0; width:4px; height:4px; border-radius:50%; background:var(--gold); margin-top:7px; }

/* ============================================================
   EQUIPMENT & CALCULATOR
============================================================ */
.calc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}
.guests-card{
  background: var(--white);
  border: 0.5px solid var(--border);
  padding: 28px;
  margin-bottom: 8px;
}
.guests-num{
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.5rem; color: var(--dark); line-height: 1; margin-bottom: 14px;
}
.guests-num small{ font-size: 1.4rem; color: var(--soft); }
.calc-slider{
  width: 100%; appearance: none; height: 1px;
  background: rgba(28,26,22,0.15); outline: none; cursor: pointer;
}
.calc-slider::-webkit-slider-thumb{
  appearance: none; width: 18px; height: 18px;
  background: var(--gold); border-radius: 50%;
  cursor: pointer; box-shadow: 0 0 0 3px rgba(154,122,50,0.18);
}
.slider-labels{
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 0.62rem; color: var(--soft); letter-spacing: 0.06em;
}
.result-card{
  background: var(--white); border: 0.5px solid var(--border);
  padding: 28px; margin-bottom: 12px;
}
.result-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 0.5px solid var(--border);
}
.result-row:last-child{ border-bottom: none; }
.result-lbl{ font-size: 0.72rem; color: var(--soft); letter-spacing: 0.04em; }
.result-val{ font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--dark); }
.total-line{
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 20px; margin-top: 16px; border-top: 0.5px solid var(--border);
}
.total-lbl{ font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.total-price{ font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; color: var(--dark); }
.includes-card{
  background: var(--white); border: 0.5px solid var(--border); padding: 22px 24px;
}
.includes-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.includes-list li{ font-size: 0.85rem; color: var(--mid); padding-left: 14px; position: relative; }
.includes-list li::before{ content: '—'; position: absolute; left: 0; color: var(--gold); }


/* ============================================================
   EQUIPMENT CATALOG — BIG CARDS + ACCORDION
============================================================ */

.ebc{
  border: 0.5px solid var(--border); background: var(--cream);
  display: flex; flex-direction: column; transition: border-color 0.2s;
}
.ebc.hl{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: var(--white); }
.ebc-photo-slot span{ font-size: 1.5rem; opacity: 0.3; }
.ebc-photo-slot small{ font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.ebc-body{ padding: 20px 20px 16px; display: flex; flex-direction: column; flex: 1; }
.ebc-top{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ebc-sz{ font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300; color: var(--gold); line-height: 1; }
.ebc-meta{ text-align: right; }
.ebc-cap{ font-size: 0.68rem; color: var(--soft); letter-spacing: 0.04em; margin-bottom: 4px; }
.ebc-type{ font-size: 0.58rem; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.ebc-pr{ font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: var(--dark); }
.ebc-list{ list-style: none; flex: 1; margin-bottom: 14px; }
.ebc-list li{
  font-size: 0.78rem; color: var(--mid); padding: 6px 0 6px 16px;
  border-bottom: 0.5px solid var(--border); position: relative; display: flex; gap: 8px; align-items: flex-start;
}
.ebc-list li::before{ content:'—'; position: absolute; left: 0; color: var(--gold); flex-shrink: 0; }
/* .ebc-cta — вторичная кнопка во всю ширину карточки (вид и размер в BUTTONS). */
.ebc-cta{ margin-top: 4px; }
/* Комплект, ВЫБРАННЫЙ калькулятором, — это состояние, а не наведение, поэтому
   оно залито: так выбранный комплект отличается и от покоя, и от hover. */
.ebc.hl .ebc-cta{ background: var(--gold-btn); color: var(--white); border-color: var(--gold-btn); }
/* …но отклик на наведение у него всё равно должен быть: правило выше по
   специфичности (0,3,0) глушило общий hover вторичной, и выбранная кнопка
   переставала реагировать на курсор вообще. Темнее покоя — как у золотой. */
.ebc.hl .ebc-cta:hover{ background: var(--gold-text); border-color: var(--gold-text); color: var(--white); }

/* ============================================================
   REVIEWS
============================================================ */
.reviews-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 0.5px solid var(--border); margin-top: 40px;
}
.review-text{
  /* настоящий Cormorant italic (загружен ital@1,300;1,400) вместо синтезированного наклона Jost */
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; color: var(--mid); line-height: 1.7; flex: 1; margin-bottom: 24px;
  font-style: italic;
}
.review-name{ font-size: 0.82rem; font-weight: 600; color: var(--dark); }

/* ============================================================
   ОТЗЫВЫ — ВИТРИНА СКРИНОВ (с 2026-09-19, композиция по эскизу Босса)

   Блок показывает НАСТОЯЩИЕ скриншоты: комментарии из Instagram и переписки
   WhatsApp (материал Босса, Я.Диск Screen_10_Reviews). Решение Босса 2026-09-19: ставить
   как есть, согласие авторов есть. Карточка = сам скрин, потому что скрин —
   это доказательство, а набранный текст им уже не является.

   Скрины приходят с РАЗНЫМИ пропорциями (от 9:1 до 1:2), поэтому на главную
   отобраны только те, что попадают в узкую полосу пропорций — иначе карточки
   в карусели скачут по высоте. Все 59 — на странице /reviews.

   Карусель — «коверфлоу»: центральная карточка крупная, соседние уменьшены и
   отвёрнуты в перспективу. Сдвиг считает v3.js (CSSOM, не инлайн-стиль в
   разметке — CSP без unsafe-inline).
============================================================ */
.rv-showcase{
  position: relative;
  overflow: hidden;
  /* Верхний отступ вдвое меньше нижнего (Босс 2026-09-19: «отступ от начала
     экрана отзывов сократи в два раза», было 92px). Нижний не трогаем — он
     отделяет секцию от FAQ. */
  padding: 46px 0 84px;
  background: #0f0d0a; /* подложка, пока не загрузился фон */
}
.rv-bg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Вуаль: сверху и снизу плотнее — под заголовком и подписями текст белый,
   в середине светлее, чтобы зал за карточками читался. */
.rv-veil{
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,8,6,0.82) 0%, rgba(10,8,6,0.58) 38%, rgba(10,8,6,0.62) 62%, rgba(10,8,6,0.86) 100%);
}
.rv-showcase-inner{ position: relative; z-index: 1; text-align: center; }

.rv-eyebrow{
  display: block;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-mid); /* на тёмном именно --gold-mid, см. tokens.css */
  margin-bottom: 13px; /* вдвое меньше прежних 26px (Босс 2026-09-19) */
}
.rv-eyebrow span{ opacity: 0.5; margin: 0 6px; }
.rv-title{
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.04; color: var(--white);
  margin-bottom: 18px;
}
/* Акцент — В СТРОКУ с остальным заголовком, а не отдельной строкой:
   «Что говорят» золотым курсивом + «после мероприятий» белым = одна фраза. */
.rv-title em{ font-style: italic; color: var(--gold-mid); }
.rv-sub{
  font-size: clamp(0.84rem, 1.3vw, 0.98rem); line-height: 1.65;
  color: rgba(255,255,255,0.66); max-width: 620px; margin: 0 auto;
}

/* ── Карусель ───────────────────────────────────────────────────────────── */
.rv-stage{ position: relative; margin-top: 24px; }
.rv-deck{
  position: relative;
  perspective: 1600px;
  height: var(--rv-h, 460px); /* ставит v3.js по самой высокой карточке */
  transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rv-shot img{ width: 100%; height: auto; display: block; }
/* Скрины идут от однострочного комментария (9:1) до длинной переписки (1:2).
   Высоту карточки ограничиваем кадром колоды: 6 самых длинных из 59 обрезаются
   снизу растушёвкой и открываются целиком по клику, остальные видны полностью. */
.rv-shot{
  /* Карточка стоит НЕ по центру колоды, а выше: --rv-bias — доля свободного места,
  которая остаётся НАД ней. Колода фиксирована по самой длинной переписке, и при
  центровке над карточкой средней высоты зияло ~97px пустоты — провал между
  подзаголовком и лентой (Босс 2026-09-19: «отступ слишком большой»).
  Сдвигать пришлось смещением, а не высотой колоды: высота фиксирована нарочно,
  иначе при листании прыгали бы полоса, счётчик и кнопка под лентой.
  ⚠️ Это же число стоит в v3.js — в transform карточки. Менять ПАРОЙ. */
  position: absolute; left: 50%; top: 35%;
  width: var(--rv-w, clamp(260px, 32vw, 440px));
  margin: 0;
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0,0,0,0.5);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s, filter 0.45s;
  will-change: transform;
  cursor: pointer;
  border: 0; padding: 0;
  transform: translate(-50%, -35%); /* стартовое положение до первого прохода JS */
  max-height: var(--rv-h, 460px);
}
/* Растушёвка доходит до СПЛОШНОГО белого за треть до низа: подсказка «Открыть
   целиком» должна лежать на чистом поле, иначе она тонет в недоскрытом тексте. */
.rv-shot.is-clipped::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 118px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 48%, #fff 70%, #fff 100%);
  pointer-events: none;
}
.rv-more{
  /* z-index обязателен: растушёвка выше — это ::after, а псевдоэлемент рисуется
     ПОСЛЕ дочерних узлов и закрывал надпись собой. Проверять тут надо не opacity
     (она была 1), а что элемент реально видно. */
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text); white-space: nowrap; opacity: 0; transition: opacity 0.3s;
}
.rv-shot.is-clipped[data-center] .rv-more{ opacity: 1; }
.rv-shot[data-center].is-clipped{ cursor: zoom-in; }

/* Полноразмерный просмотр: у обрезанных скринов иначе не дочитать отзыв */
.rv-zoom{
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10,8,6,0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overflow: auto;
}
.rv-zoom[hidden]{ display: none; }
.rv-zoom img{
  max-width: min(92vw, 720px); width: 100%; height: auto; display: block;
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.rv-zoom-close{
  position: fixed; top: 16px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28);
  color: var(--white); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rv-zoom-close:hover{ background: rgba(255,255,255,0.18); }
.rv-zoom-close:focus-visible{ outline: 2px solid var(--gold-mid); outline-offset: 3px; }
/* Боковые притушены: центральная карточка должна быть единственной, которую читают */
.rv-shot[data-side]{ filter: brightness(0.62) saturate(0.85); }
.rv-shot[data-side]:hover{ filter: brightness(0.8) saturate(0.95); }
.rv-shot[data-center]{ cursor: default; }
.rv-shot:focus-visible{ outline: 2px solid var(--gold-mid); outline-offset: 4px; }

/* ── Стрелки листания: ониксовая пластина (Босс 2026-09-19: «как из 2000-х») ──
   ЧТО БЫЛО СЛОМАНО. Кружок 52px с ТЕКСТОВЫМ глифом ‹ не имел собственной
   плотности: заливка 5% белого, рамка золотом 45%. Он жил цветом чужого фона, а
   фон под левой и правой стрелкой РАЗНЫЙ — слева тёмный зал, справа белый скрин
   отзыва. Замер живой страницы: глиф --gold-mid на карточке телефона давал
   2.08:1 и 2.25:1 — ниже порога 3:1 для графики, то есть обе стрелки там не
   «плохо видны», а формально невидимы; рамка 45% на белом — 1.24:1.

   ПОЧЕМУ ПЛАСТИНА, А НЕ КРУЖОК. Круглая полупрозрачная кнопка и была тем самым
   «импортом из нулевых»: вся геометрия сайта прямоугольная, радиус канона 3px
   (кнопки, .clb-arrow). Вертикальная пластина с волосяной золотой
   рамкой — язык издания, а не плеера.

   ГРАНИЦУ ОБЪЕКТА ДЕРЖАТ ДВА СЛОЯ, и на любом фоне работает хотя бы один
   (замер 1440 и 390, контраст к реальному композиту, не к чистому белому):
     фон под стрелкой            тело пластины   золотая рамка
     тёмный зал (слева)              1.06 ✗        11.19 ✓
     притушенная карточка (справа)   3.06          3.47  ✓
     карточка на телефоне           12.25 ✓        1.16  ✗
   ⚠️ ЗНАЧИТ РАМКА — НЕСУЩАЯ, а не декор: на тёмном фоне слева она единственная, что рисует объект. Её нельзя потом «облагородить» до 0.5px или до 80%
   плотности — вернётся ровно та болезнь, от которой ушли.
   Шеврон при этом не зависит от фона страницы вообще: он всегда лежит на своём
   ониксе, 10.6:1 и слева, и справа. В этом весь смысл непрозрачной заливки. */
.rv-arrow{
  /* z-index выше карточек: у центральной 10, у соседних меньше — со значением 3
     стрелки тонули под боковыми скринами и были почти не видны */
  position: absolute; z-index: 20;
  /* Локальные переменные — только внутри .rv-*: глобальные токены описывают
     КАНОН КНОПОК, а стрелки листания вынесены из него сознательно (шапка BUTTONS). */
  --rv-arrow-w: 54px;
  --rv-arrow-h: 80px;
  --rv-glyph:   28px;
  /* ⚠️ 43%, а не 50%. Карточки стоят на top:35% с translateY(-35%), поэтому центр
     карточки = 0.35·колода + 0.15·высота_карточки — он ГУЛЯЕТ вместе с высотой.
     Замер 59 скринов: колода 484px, высоты 49…484px, центры карточек 177…242px.
     Прежние 50% (=242px) — это КРАЙ диапазона, отсюда расхождение до 65px на
     коротких отзывах. 43% (=209px) — середина: максимум падает до 33px.
     Линия статичная: считать её по текущей карточке нельзя, иначе стрелки
     запрыгают при листании — ровно то, из-за чего высоту колоды зафиксировали. */
  top: 43%;
  margin-top: calc(var(--rv-arrow-h) / -2);
  width: var(--rv-arrow-w); height: var(--rv-arrow-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: var(--dark);                             /* НЕПРОЗРАЧНО — суть решения */
  border: var(--btn-bw) solid var(--gold-bright);      /* толщина канона, плотность 100% */
  border-radius: var(--radius);
  color: var(--gold-bright);                           /* им же красится stroke шеврона */
  /* Мягкий отрыв: без него непрозрачная пластина поверх скрина читается как
     дырка, прорезанная в отзыве, а не как предмет над ним. На тёмном фоне слева
     тень не видна и ничего не стоит — она работает только там, где нужна. */
  box-shadow: 0 10px 30px rgba(0,0,0,0.38);
  cursor: pointer;
  /* border-color в переходе НЕ участвует намеренно: рамка и так горит на полную,
     светлее ей становиться некуда — анимировать нечего. */
  transition: background var(--btn-ease), box-shadow var(--btn-ease);
}
.rv-arrow svg{
  /* pointer-events снимаем намеренно: делегированный e.target.closest('[data-action]')
     и так поднялся бы до кнопки, но так зона нажатия ровно равна пластине. */
  display: block; pointer-events: none;
  width: var(--rv-glyph); height: var(--rv-glyph);
  transition: transform var(--btn-ease);
}
/* Наведение — ТОЛЬКО для настоящего курсора. На тач-экране hover «залипает»
   после тапа, и пластина осталась бы в наведённом состоянии до тапа по пустому
   месту. Размер при этом не меняется: прыгающая геометрия — дешёвый приём,
   движется только шеврон, на 2px в сторону листания. */
@media (hover: hover) and (pointer: fine){
  .rv-arrow:hover { background: #241f16; box-shadow: 0 14px 34px rgba(0,0,0,0.46); }
  .rv-arrow-next:hover svg { transform: translateX(2px); }
  .rv-arrow-prev:hover svg { transform: translateX(-2px); }
}
/* Нажатие меняет КРАСКУ, а не только положение: на телефоне hover не наступает
   вовсе, и палец иначе не получает подтверждения. */
.rv-arrow:active{ background: #2d2619; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.rv-arrow-next:active svg{ transform: translateX(3px); }
.rv-arrow-prev:active svg{ transform: translateX(-3px); }
/* Фокус уводим ВНУТРЬ пластины. Кольцо снаружи легло бы на фон страницы, а
   справа и на телефоне это светлый скрин — светлое золото на нём 1.16:1, то
   есть повторилась бы ровно исходная ошибка. Внутри оно всегда на ониксе, 10.6:1. */
.rv-arrow:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: -6px; }
.rv-arrow-prev{ left: 0; }
.rv-arrow-next{ right: 0; }
/* От 1200px у .wrap есть поля — уводим пластины на поле, чтобы они меньше
   накрывали крайний скрин ленты. Полностью уйти со скрина всё равно нельзя:
   замер 1440 — соседняя карточка занимает 1071–1376, стрелка после сдвига
   1212–1266, то есть по-прежнему целиком на ней. Сдвиг тут косметика, а
   читаемость стрелки держат заливка и рамка, а не выход на чистый фон. */
@media (min-width: 1200px){
  .rv-arrow-prev { left: -14px; }
  .rv-arrow-next { right: -14px; }
}

/* Точки-страницы. Их ПЯТЬ, а не по одной на отзыв (Босс 2026-09-19): пятёрка
   показывает текущую пятёрку отзывов и сменяется на следующую, логика в v3.js
   (rvDotsRender). Раньше их было 59, и ряд помещался только при видимой точке
   в 6px на десктопе и 3px на телефоне — попасть пальцем было невозможно.
   Теперь точек мало, поэтому они нормального размера и снова кликабельны на
   любом экране; ужимать их по брейкпоинтам больше не нужно.
   margin-top — МИНИМАЛЬНЫЙ зазор до карточки: у карточки во всю высоту колоды
   свободного места под ней нет совсем, остаётся только он. */
.rv-dots{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin-top: 20px;
}
.rv-dot{
  width: 26px; height: 26px; padding: 9px; /* видимая точка 8px, зона нажатия 26px */
  background: rgba(255,255,255,0.32); background-clip: content-box;
  border: 0; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  transition: background-color var(--btn-ease), transform var(--btn-ease);
}
.rv-dot[hidden]{ display: none; } /* хвост последней, неполной пятёрки */
.rv-dot:hover{ background-color: rgba(255,255,255,0.6); }
.rv-dot.active{ background-color: var(--gold-mid); transform: scale(1.35); }
.rv-dot:focus-visible{ outline: 2px solid var(--gold-mid); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .rv-dot.active { transform: none; } }
/* Ужимание точек по брейкпоинтам снято: их пять, ряд короткий на любом экране. */

/* ── Подвал витрины ─────────────────────────────────────────────────────── */
.rv-count{
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.5rem); color: rgba(255,255,255,0.88);
  margin-top: 21px; /* Босс 2026-09-19: отступ от точек до «Более 1300» вдвое меньше */
  display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.rv-count b{
  font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 0.9;
  color: var(--gold-mid); letter-spacing: 0.01em;
}
.rv-values{
  margin-top: 44px;
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.rv-values i{ display: inline-block; width: 26px; height: 1px; background: rgba(255,255,255,0.22); }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 960px){
  .rv-showcase { padding: 34px 0 64px; } /* верх вдвое, было 68px (Босс) */
  .rv-stage { margin-top: 34px; }
  /* ⚠️ Размеры пластины — ТОЛЬКО через переменные: явная width перебила бы
     --rv-arrow-w и схлопнула бы её обратно в квадрат. */
  .rv-arrow { --rv-arrow-w: 48px; --rv-arrow-h: 72px; --rv-glyph: 25px; }
}
@media (max-width: 640px) {
.rv-showcase{ padding: 28px 0 52px; } /* верх вдвое, было 56px (Босс) */
/* Скрин читают с телефона — карточке нужна вся доступная ширина, иначе текст
     переписки мельчает вдвое против исходных 720px и не читается.
     Соседние карточки гасит v3.js (прозрачность ставится инлайном и правило
     отсюда её бы не перебило), здесь только клики. */
  .rv-deck{ --rv-w: min(92vw, 420px); }
.rv-shot[data-side]{ pointer-events: none; }
/* Пластина 44px — полный минимум зоны нажатия, ниже не опускаемся. */
  .rv-arrow{ --rv-arrow-w: 44px; --rv-arrow-h: 64px; --rv-glyph: 22px; }
/* ⚠️ −20px = боковое поле .wrap (16px) плюс ещё 4px ЗА край экрана.
     Зачем именно так: на телефоне карточка занимает 92vw, и стрелке физически
     некуда уйти со скрина — она ложится на него. Пластина непрозрачная, и на
     прежнем месте (заподлицо с колодой) съедала по 20px строки: «последнего»
     читалось как «следнего». Уводим наружу, пока под пластиной не останется
     поле самого скриншота вместо слов. Нажимать при этом надо по-прежнему
     полными 44px, поэтому за экран уходит не пластина целиком, а 4 пикселя её
     края: видно 40, зона нажатия 44. Отзыв читают — стрелка не имеет права его
     закрывать; на скринах с совсем узким полем лёгкий заход всё же остаётся. */
  .rv-arrow-prev{ left: -20px; }
.rv-arrow-next{ right: -20px; }
.rv-count{ margin-top: 16px; gap: 8px; } /* вдвое меньше — как на десктопе (Босс) */
/* Разрядка как у .rv-values ниже: на 360px (очень частая ширина Android)
     строка «Люди · События · Эмоции · Истории» при 0.28em просит 356px, а в
     колонке их 328 — и она ломалась надвое. При 0.18em это 316px, держится
     одной строкой. Прежний текст был длиннее (402px) и ломался тем более.
     ⚠️ Будете менять надпись — проверьте её на 360px, запас всего 12px. */
  .rv-eyebrow{ letter-spacing: 0.18em; }
.rv-values{ margin-top: 32px; gap: 8px; font-size: 0.54rem; letter-spacing: 0.18em; }
.rv-values i{ width: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.rv-shot, .rv-deck{ transition: none; }
/* Гасим не только длительность, но и сами сдвиги шеврона: иначе они остались
     бы и срабатывали мгновенным скачком. Смена краски при наведении и нажатии
     сохраняется — это обратная связь, а не движение. */
  .rv-arrow,
.rv-arrow svg{ transition: none; }
.rv-arrow:hover svg, .rv-arrow:active svg{ transform: none; }
}

/* ============================================================
   FAQ — РЕДАКЦИОННЫЙ РАЗВОРОТ (Босс 2026-09-19, ТЗ + референс)

   Слева вопросы, справа имиджевая композиция: фоновая карточка, вырезанная
   фигура, узкая полоса банкета, подпись. Верстается как разворот журнала —
   ни карточек-«саасов», ни тяжёлых теней, ни рамок. Красного в блоке нет
   СОЗНАТЕЛЬНО (прямой запрет Босса), поэтому хлястик «Ещё» тут переодет.

   ⚠️ ЦВЕТА. В ТЗ даны #F8F5EF / #A47C2C / #201E1B / #5B5750. Что с ними стало:
     · фон — токен сайта --cream (#f5f3ee). Контраст к #F8F5EF = 1.02, то есть
       глазом это один и тот же молочный; заводить второй почти-такой-же хекс
       мимо tokens.css нельзя (SSOT).
     · золото ТЗ #A47C2C оставлено там, где оно ГРАФИКА (линии, знак «+»,
       рукописный декор): 3.5:1 на фоне, порога 3:1 для графики достаточно.
     · для мелкого золотого ТЕКСТА (надпись «Частые вопросы») и для заливки
       кнопки взяты токены сайта --gold-text / --gold-btn: #A47C2C дал бы
       3.51:1 у надписи и 3.82:1 у белого на кнопке — ниже нормы 4.5:1,
       которую сайт держит намеренно (см. комментарии в tokens.css).
       Захотите ровно как в ТЗ — поменять две переменные ниже.
============================================================ */
.fq{
  --fq-gold-line: #A47C2C;              /* золото ТЗ — только графика */
  --fq-gold-text: var(--gold-text);     /* мелкий золотой текст — 5.18:1, AA */
  --fq-btn-bg: var(--gold-btn);         /* белый на нём 4.73:1, AA */
  --fq-btn-bg-hover: var(--gold-text);  /* темнее примерно на 10% */
  --fq-rule: rgba(67, 54, 36, 0.15);    /* тонкие разделители из ТЗ */
  --fq-card: #EAE5DD;                   /* фоновая карточка справа */
  --fq-answer: #5B5750;                 /* цвет ответа из ТЗ, 6.6:1 */
  background: var(--cream);
  color: var(--dark);
  /* ⚠️ Верхний отступ 100 → 50px (Босс 2026-09-24: «очень большой отступ от
     предыдущего экрана до заголовка, подними, там где-то 50 пикселей»).
     Нижний не трогаем: он отделяет блок от формы связи.
     ⚠️ 34, а не 50: Босс просит 50px ДО НАДСТРОЧНИКА, а замер от края
     секции даёт на 17px больше (верх строки надстрочника ниже края
     блока). С 34 фактический зазор — 51px. */
  padding: 34px 0 110px;
  /* Декор (рукописная строка, монограмма, фигура) выходит за края колонок —
     иначе он дал бы горизонтальную прокрутку страницы.
     ⚠️ Именно clip, а НЕ hidden: hidden делает секцию скролл-контейнером, и
     position: sticky у правой колонки перестаёт работать — липнуть ей было бы
     не к чему. clip обрезает так же, но контейнера прокрутки не создаёт.
     hidden оставлен запасным для браузеров без clip (Safari до 16). */
  overflow: hidden;
}
@supports (overflow: clip) { .fq { overflow: clip; } }
.fq-wrap{ max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.fq-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  gap: 80px; align-items: start;
}

/* ── Левая колонка ───────────────────────────────────────────────────────── */
/* Надстрочник с золотой линейкой — как на экранах «Пакеты и цены» и
   «Среди клиентов» (Босс 2026-09-24: «надо добавить вот эту золотую линию»).
   inline-flex, а не block: линейка должна стоять вплотную к надписи, а не
   тянуться на всю колонку. */
.fq-eyebrow{
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 0.58rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fq-gold-text);
}
.fq-eyebrow::after{
  content: ''; width: 46px; height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.5));
}
/* ⚠️ Кегль и вес — как у заголовка «Пакеты и цены» (Босс 2026-09-24:
   «сделать так же, как идёт заголовок “Стоимость того…”»): тот же clamp с
   коэффициентом 0.026 от ширины и вес 600. Прежние 2.6–3.6rem при весе 400
   выбивались из ряда заголовков сайта. */
.fq-title{
  margin: 18px 0 0;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, calc(100vw / var(--site-zoom, 1) * 0.026), 3.2rem);
  line-height: 1.04; letter-spacing: -0.01em;
  color: var(--dark);
}
/* Кегль поднят 0.78 → 0.95rem и вес 300 → 400 (Босс 2026-09-24: «подзаголовку
   надо увеличить шрифт»): текст стал длиннее и в прежнем «шёпоте» читался
   тяжело. Колонка расширена с 520 до 560px, иначе фраза ложилась в пять строк. */
.fq-intro{
  margin: 22px 0 0; max-width: 560px;
  font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 400; line-height: 1.6;
  font-style: italic;   /* Босс 2026-09-24: «подпись — наверное, курсивом» */
  color: var(--fq-answer);
  white-space: pre-line;   /* перевод строки в поле — часть вёрстки */
}

/* ── Аккордеон ───────────────────────────────────────────────────────────── */
/* Нижняя черта висит на СПИСКЕ, а не на последнем вопросе: когда список
   свёрнут до шести, «последний» элемент — шестнадцатый и он скрыт, то есть
   черта под видимым списком просто исчезла бы. */
.faq-list{ margin: 46px 0 0; border-bottom: 1px solid var(--fq-rule); }
.faq-item{ border-top: 1px solid var(--fq-rule); }
/* Обёртка-заголовок вокруг кнопки нужна скринридерам, а не глазу: сбрасываем
   ей всё, чтобы она не приносила свои отступы и кегль. */
.faq-h{ margin: 0; font: inherit; font-weight: inherit; }
.faq-btn{
  width: 100%; min-height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: none; border: 0; padding: 16px 0; cursor: pointer; text-align: left;
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  /* кегль 1.07 → 1.28rem (Босс 2026-09-24: «вопросы побольше») */
  font-size: 1.28rem; line-height: 1.25; color: var(--dark);
  transition: color 0.25s;
}
.faq-q{ max-width: 88%; }
.faq-btn:hover, .faq-btn.open{ color: var(--fq-gold-text); }
.faq-btn:focus-visible{ outline: 2px solid var(--fq-gold-line); outline-offset: 4px; }
/* Знак «+» — две волосяные линии, а не символ шрифта: глиф тонкий, пляшет по
   базовой линии и в разных шрифтах разный. При раскрытии вертикальная линия
   схлопывается, и «+» становится «−». */
.faq-icon{ position: relative; flex: none; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after{
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--fq-gold-line);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s;
}
.faq-icon::before{ width: 20px; height: 1px; transform: translate(-50%, -50%); }
.faq-icon::after{ width: 1px; height: 20px; transform: translate(-50%, -50%); }
.faq-btn.open .faq-icon::after{ transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
/* Раскрытие: высоту ставит v3.js (scrollHeight), прозрачность — здесь.
   ⚠️ visibility обязательна. max-height: 0 + overflow: hidden прячут ответ
   ТОЛЬКО от глаза: в дереве доступности он остаётся, и скринридер зачитывает
   подряд все свёрнутые ответы, хотя кнопка рядом говорит «свёрнуто».
   Переход у visibility — нулевой длительности с задержкой на время схлопывания:
   при открытии показываем сразу, при закрытии прячем после анимации. */
.faq-answer{
  overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height 0.32s ease, opacity 0.3s ease, visibility 0s linear 0.32s;
}
.faq-answer.open{
  opacity: 1; visibility: visible;
  transition: max-height 0.32s ease, opacity 0.3s ease, visibility 0s;
}
.faq-answer-inner{
  padding-bottom: 26px; max-width: 90%;
  /* ⚠️ Ответ тоже крупнее (0.78 → 0.92rem), но РАЗНИЦА С ВОПРОСОМ СОХРАНЕНА
     (Босс: «чтобы было явное разделение»): вопрос — серифный Cormorant 1.28rem
     тёмный, ответ — гротеск Jost 0.92rem серый. Уравняете кегли — блок
     превратится в сплошную простыню. */
  font-family: 'Jost', sans-serif; font-size: 0.92rem; font-weight: 400; line-height: 1.65;
  color: var(--fq-answer); white-space: pre-line; /* абзацы ответов через пустую строку (2026-09-06) */
}
.faq-answer-inner strong{ color: var(--dark); font-weight: 500; }
/* видны первые 6 вопросов, остальные по кнопке (Босс 2026-09-06, 16 вопросов) */
.faq-collapsed .faq-item:nth-child(n+7){ display: none; }

/* ── «Ещё вопросы» ───────────────────────────────────────────────────────── */
/* Тот же механизм (setupMore), но БЕЗ красного язычка: в этом блоке красного
   нет по прямому запрету Босса. Поэтому у .pull-tab здесь снята форма-флажок
   и заливка — остаётся тихая строчка с уголком. */
.fq-more-wrap{ margin-top: 24px; display: flex; }
.fq-more-wrap[hidden]{ display: none; }
.fq .pull-tab{
  --tab-w: auto; --tab-h: auto; --tip: 0px;
  /* Вертикальные поля — это зона нажатия. Без них у строки остаётся высота
     самого текста (замер: 11.6px), то есть промахнуться пальцем проще, чем
     попасть; норма минимальной цели — 44px. */
  width: auto; height: auto; min-height: 44px; padding: 12px 0; gap: 10px;
  flex-direction: row; align-items: center;
  background: none; color: var(--fq-gold-text);
  clip-path: none;
  font-size: 0.58rem; letter-spacing: 0.22em;
  transition: color 0.25s, opacity 0.25s;
}
.fq .pull-tab:hover{ background: none; color: var(--dark); transform: none; }
.fq .pull-tab:focus-visible{ outline: 2px solid var(--fq-gold-line); outline-offset: 4px; }
.fq .pull-tab-arrow{ width: 7px; height: 7px; border-width: 1.2px; margin-top: -3px; }
.fq .pull-tab[aria-expanded="true"] .pull-tab-arrow{ margin-top: 2px; }
/* Надпись у развёрнутого списка остаётся видимой: у язычка её прятали, потому
   что на флажке хватало треугольника, — у строки прятать нечего. */
.fq .pull-tab[aria-expanded="true"]{ justify-content: flex-start; padding: 0; }
.fq .pull-tab[aria-expanded="true"] .pull-tab-label{
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
}
.fq .pull-tab[aria-expanded="true"] .pull-tab-arrow{ margin-top: 2px; }

/* ── Кнопка ──────────────────────────────────────────────────────────────── */
.fq-cta{
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: 46px; height: 66px; padding: 0 34px;
  background: var(--fq-btn-bg); color: var(--white); text-decoration: none;
  border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  transition: background 0.25s, box-shadow 0.25s;
}
@media (hover: hover) and (pointer: fine) {
.fq-cta:hover{ background: var(--fq-btn-bg-hover); box-shadow: 0 10px 26px rgba(154, 122, 50, 0.22); }
}

/* ── Полоса «Остались вопросы?» ПРЕВРАЩАЕТСЯ в каналы связи (Босс 2026-09-21) ──
   На наведении надпись уходит вверх, а из-под неё поднимаются четыре кружка:
   телефон, Max, Telegram, заявка. Коробка полосы НЕ меняется — ширину задаёт
   надпись, она остаётся в потоке (просто прозрачная), поэтому вёрстка вокруг
   не шевелится и соседние блоки не прыгают.
   ⚠️ Кружки КРЕМОВЫЕ, а не прозрачные: знаки Telegram и Max стоят в родном
   виде, а чужому логотипу нужна нейтральная подложка — синий знак прямо на
   золоте не читается и нарушает правило «бренд-знаки без покраски».
   ⚠️ На тач-экранах ховера нет: там раскрытие вешает класс is-open скрипт
   (блок «Полоса-каналы» в v3.js), первое касание раскрывает, второе уводит. */
/* ⚠️ ЗОЛОТО ПЕРЕЕХАЛО НА ОБЁРТКУ. Сначала фон оставался на самой ссылке, и при
   раскрытии вместе с надписью гасла вся полоса — кружки висели в воздухе на
   кремовом фоне. Теперь полоса рисуется обёрткой и стоит на месте, а гаснет
   только содержимое ссылки. */
.fq-cta-wrap{
  /* ⚠️ Переменные продублированы здесь: конструкция используется не только в
     блоке FAQ (с 2026-09-24 — и у кнопки «Задать вопрос лично» в «Обо мне»),
     а --fq-btn-bg объявлена на .fq и за его пределами была бы пустой. */
  --fq-btn-bg: var(--gold-btn, #9a7a32);
  --fq-btn-bg-hover: var(--gold-text, #7d6428);
  position: relative; display: inline-flex; margin-top: 46px;
  background: var(--fq-btn-bg); border-radius: 2px;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.34s cubic-bezier(0.22,0.61,0.36,1);
}
.fq-cta-wrap .fq-cta{ margin-top: 0; background: none; box-shadow: none; }
.fq-cta-wrap .fq-cta:hover,
.fq-cta-wrap .fq-cta:active{ background: none; box-shadow: none; }   /* золото живёт на обёртке */
@media (hover: hover) and (pointer: fine) {
  .fq-cta-wrap:not(.is-open):hover{ background: var(--fq-btn-bg-hover); box-shadow: 0 10px 26px rgba(154, 122, 50, 0.22); }
}
.fq-cta-wrap .fq-cta{ transition: opacity 0.26s ease, transform 0.4s cubic-bezier(0.22,0.75,0.3,1); }

/* ⚠️ РАСКРЫТОЕ СОСТОЯНИЕ: ПРЯМОУГОЛЬНИКА НЕТ. Босс: «при нажатии на кнопку
   превращалась в такие значки и при этом сам прямоугольник пропадал». Полоса
   гаснет вместе с надписью и чуть поджимается, остаются только кружки —
   привычный по многим сайтам жест «кнопка рассыпалась на каналы».
   Коробка обёртки при этом сохраняет высоту и ширину: иначе соседние блоки
   прыгали бы в момент превращения. */
.fq-cta-wrap.is-open{ background: transparent; box-shadow: none; transform: scale(0.99); }
.fq-cta-wrap.is-open .fq-cta{ opacity: 0; transform: translateY(-10px) scale(0.985); pointer-events: none; }

.ab-cta-wrap{ margin-top: 0; }
.fq-cta-channels{
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 14px;
  pointer-events: none;
}
/* ⚠️ ЗНАЧКИ САМИ ПО СЕБЕ — КРУГЛЫЕ КНОПКИ, как плавающие справа внизу
   (Босс 21.09.2026: «нахера значки в белых кругах, пускай значки будут сами по
   себе кругами, как у нас сделано со значками справа внизу»). Поэтому размеры,
   тень и поведение при наведении здесь ТЕ ЖЕ, что у .float-btn:
     • телефон и заявка — золотой круг с белым знаком (как .float-call);
     • Telegram и Max — фирменный знак ЦЕЛИКОМ как кнопка, своей подложки нет
       (как .float-btn--brand): круг Telegram, скруглённый квадрат Max.
   ⚠️ Знаки не красим и не подкладываем — это правило по чужим логотипам. */
.fq-ch{
  /* flex: none — иначе овальная «Заявка» отбирает ширину и круглые кнопки
     сплющиваются в овалы (замер: 49.8px вместо 57). */
  flex: none;
  width: 57px; height: 57px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-btn, #9a7a32); color: var(--white, #fff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  /* ⚠️ visibility, а не только opacity: закрытые кружки не должны попадать в
     обход табом — иначе клавиатура уходит «в никуда» посреди страницы. */
  visibility: hidden;
  /* ⚠️ Раскрытие сделано мягче (Босс 2026-09-24: «более культурную анимацию»):
     кружки не выпрыгивают из точки, а всплывают снизу почти в полном размере,
     кривая без «перелёта» за 1. Длительность больше, шаг между кружками тоже —
     движение читается как волна, а не как щелчок. */
  opacity: 0; transform: translateY(16px) scale(0.86);
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 0.75, 0.3, 1),
              box-shadow 0.2s ease, visibility 0s linear 0.44s;
}
/* Звонок — анимированный стикер вместо плоского знака (Босс 2026-09-24).
   Стикер чёрный и объёмный, на золоте он тонул, поэтому кружок светлый —
   как у фирменных знаков рядом. */
.fq-ch--call{ background: var(--cream, #f5f3ee); }
/* «Заявка» — овал с подписью (Босс 2026-09-24): у этой кнопки есть слово,
   поэтому она шире остальных и с закруглением по высоте. */
.fq-ch--form{
  width: auto; min-width: 57px; padding: 0 22px; border-radius: 999px;
  grid-auto-flow: column; gap: 9px; place-items: center;
}
.fq-ch-label{
  font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.fq-ch--brand{ background: transparent; box-shadow: none; }
.fq-ch--brand img{ width: 52px; height: 52px; display: block; }
.fq-ch--max{ border-radius: 12px; }          /* знак Max — скруглённый квадрат */
.fq-ch img{ display: block; }

/* Крестик — вернуться к кнопке.
   ⚠️ flex: none обязателен: без него овальная «Заявка» отбирала ширину и
   крестик вытягивался в овал по вертикали (Босс 2026-09-24: «стала овальной
   вытянутой вверх»).
   Оформлен как обычная кнопка сайта (та же заливка и белый знак, что у
   «Задать вопрос лично»), а подсветка при наведении — КРАСНАЯ: это действие
   «закрыть», золото тут читалось как ещё один канал связи. */
.fq-ch-close{
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  margin-left: 6px; padding: 0; cursor: pointer;
  /* В покое — приглушённый красный, на наведении яркий (Босс 2026-09-24).
     Золото тут читалось как ещё один канал связи, а это «закрыть». */
  background: rgba(166, 30, 30, 0.12); color: var(--red, #a61e1e);
  border: 1px solid rgba(166, 30, 30, 0.35);
  visibility: hidden; opacity: 0; transform: scale(0.6);
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1.2),
              background 0.2s ease, color 0.2s ease, visibility 0s linear 0.3s;
}
/* Кружки выходят один за другим — «рассыпается», а не «моргает». */
.fq-ch:nth-child(2){ transition-delay: 0.05s, 0.05s, 0s, 0.44s; }
.fq-ch:nth-child(3){ transition-delay: 0.1s, 0.1s, 0s, 0.44s; }
.fq-ch:nth-child(4){ transition-delay: 0.15s, 0.15s, 0s, 0.44s; }

.fq-cta-wrap.is-open .fq-cta-channels{ pointer-events: auto; }
.fq-cta-wrap.is-open .fq-ch,
.fq-cta-wrap.is-open .fq-ch-close{
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition-delay: 0s;
}
.fq-cta-wrap.is-open .fq-ch:nth-child(2){ transition-delay: 0.08s; }
.fq-cta-wrap.is-open .fq-ch:nth-child(3){ transition-delay: 0.16s; }
.fq-cta-wrap.is-open .fq-ch:nth-child(4){ transition-delay: 0.24s; }
.fq-cta-wrap.is-open .fq-ch-close{ transition-delay: 0.34s; }   /* крестик приходит последним */
@media (hover: hover) and (pointer: fine) {
  /* Поведение ровно как у плавающих кнопок: подрастают, тень плотнее. */
  .fq-ch:hover{ transform: scale(1.1); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
  .fq-ch--brand:hover{ box-shadow: none; }
  /* Красная подсветка — «закрыть», а не «ещё один канал» (Босс 2026-09-24). */
  .fq-ch-close:hover{ background: var(--red, #a61e1e); color: var(--white, #fff); border-color: var(--red, #a61e1e); transform: scale(1.06); }
}
.fq-ch:active{ transform: scale(1.04); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.26); }
.fq-ch:focus-visible,
.fq-ch-close:focus-visible{ outline: 2px solid var(--red, #a61e1e); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .fq-cta-wrap, .fq-cta-wrap .fq-cta, .fq-ch, .fq-ch-close{ transition: opacity 0.12s linear; }
  .fq-cta-wrap.is-open{ transform: none; }
  .fq-ch, .fq-ch-close,
  .fq-cta-wrap.is-open .fq-ch, .fq-cta-wrap.is-open .fq-ch-close{ transform: none; transition-delay: 0s; }
  .fq-ch:hover, .fq-ch:active{ transform: none; }
}
.fq-cta:active{ background: var(--fq-btn-bg-hover); }
.fq-cta:focus-visible{ outline: 2px solid var(--dark); outline-offset: 3px; }

/* ── Правая колонка: имиджевая композиция ────────────────────────────────── */
.fq-col-image{ position: relative; }
.fq-stage{ position: relative; min-height: 820px; }
/* Фоновая карточка. Тень нарочно почти незаметная: тяжёлая тень — язык
   интерфейса, а не разворота. */
.fq-card{
  position: absolute; left: 0; top: 20px;
  width: 83%; height: 740px;
  background: var(--fq-card);
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(53, 42, 24, 0.07);
}
/* Мягкий свет внутри карточки, чтобы фон не был плоской заливкой. */
.fq-card::before{
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Света ровно столько, чтобы фон не был плоской заливкой. Больше белого —
     и карточка выбеливается до почти белой, теряя тёплый беж из ТЗ. */
  background:
    radial-gradient(112% 70% at 74% 8%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 58%),
    linear-gradient(176deg, rgba(255, 255, 255, 0.2), rgba(198, 187, 170, 0.3));
}
/* Монограмма — очень слабая, на грани видимости (по ТЗ 0.035–0.06). */
.fq-mono{
  /* Низ-слева: там карточка пустая (текст вверху, фигура справа), и буква
     читается целиком. Выше она попадала под обрез верхнего края и оставляла
     на фоне непонятный обрывок дуги. */
  position: absolute; z-index: 1; left: 2%; bottom: -5%;
  font-family: 'Marck Script', 'Cormorant Garamond', cursive;
  font-size: 17rem; line-height: 0.8; color: var(--fq-gold-line);
  opacity: 0.05; pointer-events: none; user-select: none;
}
.fq-card-copy{ position: absolute; z-index: 2; left: 38px; top: 52px; max-width: 48%; }
.fq-card-head{ margin: 0; }
.fq-card-head span{
  display: block;
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.4rem; line-height: 1.02; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dark);
}
.fq-card-head .fq-gold{ color: var(--fq-gold-text); }
.fq-card-sub{
  margin: 24px 0 0;
  font-family: 'Jost', sans-serif; font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.28em; line-height: 1.65; text-transform: uppercase;
  /* Сплошной цвет, а не прозрачность от чёрного: rgba(32,30,27,.62) давала на
     карточке 4.3:1 — ниже нормы 4.5:1, и это самый тяжёлый для чтения текст
     блока (10px капс с разрядкой). Здесь 5.73:1. */
  color: var(--fq-answer); white-space: pre-line;
}
/* Фигура. Пропорции не трогаем (object-fit: contain), низ прижат к нижнему краю
   карточки, правый край чуть выходит за неё и срезается скруглением. */
/* Высота задаётся НАПРЯМУЮ, ширина считается по пропорции (width: auto). Через
   object-fit: contain фигура вписывалась в коробку ПО ШИРИНЕ и оставляла над
   головой пустую треть — чтобы заполнить карточку по высоте, коробке пришлось бы
   быть шире самой карточки. Так проще и пропорции гарантированы. */
/* top: 7% — воздух над головой. Без него фигура упирается макушкой в верхний
   край карточки и встаёт вплотную к надписи «ЛЮДИ СОЗДАЮТ СОБЫТИЯ». */
/* pointer-events: none — фигура лежит ПОВЕРХ надписи в карточке (z-index 3
   против 2). Без этого по «ЛЮДИ/СОЗДАЮТ/СОБЫТИЯ» и подписи под ними нельзя
   кликнуть (выделить текст): клик попадал бы в картинку. */
.fq-figure{ position: absolute; z-index: 3; right: -13%; top: 7%; bottom: 0; display: block; pointer-events: none; }
/* ⚠️ max-width: none обязателен. Глобальное правило img { max-width: 100% }
   (v3.css:32) зажимает ШИРИНУ, пока высота остаётся 100%, — и фигура плющится
   по горизонтали. Замер до правки: 503px вместо положенных 523px, то есть
   −4% по ширине, а на 900–1020px сжатие доходило до −12%. ТЗ прямо запрещает
   искажать пропорции. */
.fq-figure img{ height: 100%; width: auto; max-width: none; display: block; }

/* Узкая полоса банкета. Стоит ВНУТРИ вертикали карточки (top 42, высота 650
   против карточки 20…760) и смещена к правому краю — асимметрию даёт смещение
   и разная высота, а не выход за карточку. */
.fq-strip{
  position: absolute; z-index: 2; right: 0; top: 42px;
  width: 96px; height: 650px;
  border-radius: 24px; overflow: hidden; display: block;
  box-shadow: 0 24px 54px rgba(53, 42, 24, 0.10);
}
.fq-strip img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Это читаемая фраза, а не орнамент, поэтому цвет — золото ТЕКСТА (5.08:1).
   Золото графики #A47C2C давало 3.44:1 при кегле 21px: ниже нормы. */
.fq-script-top{
  position: absolute; z-index: 4; right: 4px; top: -30px;
  font-family: 'Marck Script', cursive; font-size: 1.05rem; line-height: 1;
  color: var(--fq-gold-text); white-space: nowrap; pointer-events: none;
  transform: rotate(-7deg); transform-origin: 100% 100%;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* flex-wrap и min-width у строки — на случай длинной надписи из редактора:
   без них ряд не переносится и подпись уезжает за край композиции. */
.fq-foot{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
}
.fq-foot-line{
  margin: 0; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.32em; line-height: 1.7; text-transform: uppercase;
  color: var(--fq-answer); white-space: pre-line; /* было rgba(…,.6) = 4.27:1, ниже нормы; стало 6.48:1 */
  min-width: 0;
}
.fq-foot-rule{ flex: none; width: 78px; height: 1px; background: var(--fq-gold-line); opacity: 0.5; }
.fq-sign{
  font-family: 'Marck Script', cursive; font-size: 1.8rem; line-height: 1;
  color: var(--fq-gold-line);
}

/* ── Появление блока ─────────────────────────────────────────────────────── */
/* Класс fq-pre ставит JS, поэтому без JS блок просто виден — ничего не прячем
   стилями наглухо. */
/* Селекторы по классу, а не по data-fq-in: на телефоне левая колонка
   распущена через display: contents и анимируются её ДЕТИ, у которых этого
   атрибута нет (см. v3.js). */
.fq-pre{
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fq-stage.fq-pre{ transform: translateY(24px); }
.fq-strip.fq-pre{ transition-delay: 0.13s; }
.fq-pre.fq-in{ opacity: 1; transform: none; }

/* ── Планшет ─────────────────────────────────────────────────────────────── */
@media (min-width: 1200px){
  /* Правая композиция короче списка вопросов — держим её на виду при прокрутке. */
  .fq-col-image { position: sticky; top: 100px; }
}
/* Плавающий виджет мессенджеров прибит к правому краю ОКНА. Пока контейнер
   упирается в края экрана (уже 1384px = 1320 + поля), виджет ложится ровно на
   правый низ композиции и накрывает подпись «Феликс». Отодвигаем подпись —
   двигать виджет нельзя, он общий для всей страницы. На телефоне виджета нет
   (там нижняя панель, а сам виджет скрыт до 961px), поэтому нижняя граница правила — 961px. */
@media (min-width: 961px) and (max-width: 1383px){
  .fq-foot { padding-right: 72px; }
}
@media (max-width: 1199px) {
.fq{ padding: 78px 0 84px; }
.fq-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: 44px; }
.fq-stage{ min-height: 660px; }
.fq-card{ height: 600px; width: 85%; }
.fq-strip{ width: 78px; height: 520px; }
.fq-card-copy{ left: 26px; top: 40px; }
.fq-card-head span{ font-size: 1.15rem; }
.fq-mono{ font-size: 18rem; }
.fq-foot{ gap: 14px; }
.fq-foot-rule{ width: 48px; }
}

/* ── Телефон: одна колонка ───────────────────────────────────────────────── */
/* Порядок по ТЗ: надпись → заголовок → вступление → композиция → вопросы →
   кнопка. Левая колонка распускается через display: contents, чтобы её дети
   стали элементами той же колонки и композицию можно было вклинить между
   вступлением и списком — без дубля разметки. */
@media (max-width: 899px){
  .fq { padding: 56px 0 64px; }
  .fq-wrap { padding: 0 16px; }
  /* ⚠️ align-items: stretch вернуть обязательно: с десктопа тянется start, а в
     колоночном flex это поперечная ось — колонка с одними абсолютными детьми
     схлопывается в нулевую ширину, и вся композиция пропадает с экрана. */
  .fq-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fq-col-text { display: contents; }
  /* ⚠️ align-self обязателен: колонка тянет детей на всю ширину (stretch), и
     золотая линейка после надстрочника уезжала к правому краю экрана. */
  .fq-eyebrow { order: 1; align-self: flex-start; }
  .fq-title { order: 2; font-size: clamp(2.1rem, 8vw, 2.4rem); }
  .fq-intro { order: 3; max-width: none; }
  .fq-col-image { order: 4; margin: 34px 0 6px; }
  .faq-list { order: 5; margin-top: 30px; }
  .fq-more-wrap { order: 6; }
  /* ⚠️ order и внешний отступ — на ОБЁРТКЕ: теперь колонка держит её, а не
     саму ссылку, иначе полоса уезжает из своего места в мобильном порядке. */
  .fq-cta-wrap { order: 7; margin-top: 30px; align-self: stretch; }
  .fq-cta { margin-top: 0; height: 64px; padding: 0 24px; justify-content: center; flex: 1 1 auto; } /* 64 — нижняя граница ТЗ */
  /* Надпись на узком экране по центру — значит и кружки по центру. */
  .fq-cta-channels { justify-content: center; gap: 10px; }
  .fq-ch, .fq-ch--brand img { width: 46px; height: 46px; }
  .fq-ch-close { width: 36px; height: 36px; margin-left: 2px; }

  /* Высота сцены = карточка + место под подпись внизу. */
  .fq-stage { min-height: 606px; }
  /* Карточка во всю ширину, полоса наложена справа поверх её угла — иначе на
     360px ей просто не остаётся места. */
  .fq-card { width: 100%; height: 508px; top: 10px; border-radius: 22px; }
  .fq-strip { width: 58px; height: 320px; top: 26px; right: 10px; border-radius: 16px; }
  .fq-card-copy { left: 22px; top: 30px; max-width: 52%; }
  .fq-card-head span { font-size: 1.05rem; }
  .fq-card-sub { margin-top: 16px; font-size: 0.46rem; letter-spacing: 0.22em; }
  /* Фигура целиком в кадре: голову и руки не режем. */
  .fq-figure { right: -6%; top: 6%; }
  .fq-mono { font-size: 13rem; bottom: -8%; }
  .fq-script-top { top: -22px; font-size: 0.85rem; }
  /* ⚠️ position оставляем absolute. При static подпись становится единственным
     элементом В ПОТОКЕ (остальные в композиции абсолютные) и уезжает на самый
     верх сцены — наезжает на рукописную строку и на карточку. */
  .fq-foot { bottom: 0; justify-content: center; gap: 14px; }
  .fq-foot-rule { width: 38px; }
  .fq-sign { font-size: 1.5rem; }
  /* ⚠️ 1.12rem, а не прежние 0.95: на десктопе вопрос подрос до 1.28rem, и с
     0.95 он тут оказывался вровень с ответом (замер: 19 против 18px) — то
     самое «нет явного разделения», от которого уходили. */
  .faq-btn { min-height: 72px; font-size: 1.12rem; gap: 16px; }
  .faq-q { max-width: 84%; }
  .faq-answer-inner { max-width: none; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
.faq-answer{ transition: none; }
.faq-icon::before, .faq-icon::after{ transition: none; }
.fq-cta, .fq-cta-wrap{ transition: none; }
}

/* ============================================================
   CONTACT FORM
============================================================ */
.contact-section{ background: var(--cream); padding: 64px 0; } /* было 100 */
/* Слева заголовок+лид и под ними контакты, справа форма на две строки сетки.
   На мобиле (≤960) порядок: заголовок → форма → контакты (см. медиа-блок) */

.form-submit{ width: 100%; padding: 18px; font-size: 0.85rem; margin-top: 12px; letter-spacing: 0.15em; }
.form-note{ font-size: 0.7rem; color: var(--soft); text-align: center; margin-top: 12px; }
/* ============================================================
   ФОРМА ЗАЯВКИ в блоке #contact — обычная форма по композиции trylucid (Босс 2026-09-06,
   вместо квиза): шапка карточки (титул + «отвечу в течение часа» + «* обязательные поля»),
   два поля в ряд, чипы типа события, дата + гости, «коротко о задаче» со счётчиком,
   согласие, кнопка во всю ширину. Отправка — lead-form.js; интерактив — v3.js (initLeadForm).
============================================================ */
.contact-form{
  background: var(--white);
  border: 1px solid var(--border-gold); box-shadow: 0 3px 30px rgba(28,26,22,0.06); padding: 30px 28px 28px;
}
#lead-form{ display: flex; flex-direction: column; gap: 14px; }
#lead-form [hidden]{ display: none !important; }
/* ловушка для ботов (поле lf_alt_topic): display:none — не видна, не фокусируется и не заполняется
   автозаполнением браузера (невидимые поля браузеры не заполняют; сдвиг за экран так не работает) */
.lf-trap{ display: none !important; }
/* титул на своей строке (в карточке 460px рядом с «отвечу в течение часа» он переносился), под ним — срок ответа слева, «* обязательные поля» справа */
.lf-title{ font-size: 1.45rem; margin: 0; }
/* звёздочка обязательного поля — красная (Босс 2026-09-25; была золотая) */
.req{ color: var(--red); font-weight: 600; }
.lf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lf-field{ display: flex; flex-direction: column; gap: 6px; }
.lf-lbl{ font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.lf-lbl-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lf-counter{ font-size: 0.66rem; color: var(--soft); flex: none; font-variant-numeric: tabular-nums; }
#lead-form input:not([type="checkbox"]), #lead-form textarea{
  width: 100%; font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--dark);
  background: var(--cream); border: 1px solid rgba(28,26,22,0.16); border-radius: var(--radius);
  padding: 13px 15px; outline: none; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
#lead-form input::placeholder, #lead-form textarea::placeholder{ color: rgba(28,26,22,0.45); }
#lead-form input:focus, #lead-form textarea:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154,122,50,0.14); background: var(--white); }
#lead-form textarea{ resize: vertical; min-height: 96px; line-height: 1.5; }
/* Телефон: серый пример номера после «+7 » (приём с trylucid): подсказка лежит поверх поля и начинается
   с НЕВИДИМОГО «+7 » тем же шрифтом — пример встаёт точно за префиксом; видна, пока в поле только префикс */
.lf-phone{ position: relative; display: block; }
.lf-ghost{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: 'Jost', sans-serif; font-size: 0.95rem; color: rgba(28,26,22,0.38); white-space: nowrap; pointer-events: none; user-select: none; opacity: 0; transition: opacity 0.15s; }
.lf-ghost i{ visibility: hidden; font-style: normal; }
.lf-phone.is-prefix .lf-ghost{ opacity: 1; }
/* ТИП СОБЫТИЯ — ОДИН ОВАЛ СО СПИСКОМ (Босс 2026-09-24). Раньше тут было семь
   чипов, они занимали три строки и растягивали форму. Стрелка рисуется
   ::after у обёртки: у select снят системный вид (appearance: none), иначе
   в каждом браузере своя стрелка и своя высота. */
.lf-select{ position: relative; display: block; }
.lf-select select{
  -webkit-appearance: none; appearance: none;
  width: 100%; padding: 12px 42px 12px 16px;
  font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--dark);
  background: #fff; border: 1px solid rgba(28,26,22,0.16); border-radius: 999px;
  cursor: pointer; transition: border-color 0.18s;
}
.lf-select select:hover{ border-color: var(--gold); }
.lf-select select:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.lf-select::after{
  content: ''; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--gold-text, #7d6428);
  border-bottom: 1.5px solid var(--gold-text, #7d6428);
  transform: rotate(45deg); pointer-events: none;
}
/* поле «свой вариант» — появляется, когда в списке выбрано «Другое» */
.lf-other{ margin-top: 8px; }
.lf-other[hidden]{ display: none; }
.lf-date-hint{ font-size: 0.8rem; line-height: 1.5; margin: -4px 0 0; padding: 8px 12px; border-left: 3px solid var(--border); background: rgba(28,26,22,0.03); color: var(--mid); }
/* live-регион всегда в DOM (скринридер); пустой — схлопнут, но НЕ display:none */
.lf-date-hint:empty{ padding: 0; border: 0; margin: -14px 0 0; background: transparent; }
.lf-date-free{ border-left-color: #4c7a3f; color: #3f6534; background: rgba(76,122,63,0.07); }
.lf-date-partial{ border-left-color: var(--gold); color: var(--gold-text); background: rgba(154,122,50,0.07); }
.lf-date-busy{ border-left-color: #a04b3c; color: #8a3f33; background: rgba(160,75,60,0.07); }
.lf-date-far{ border-left-color: var(--border); color: var(--soft); }
#lead-form .lf-consent{ justify-content: flex-start; margin-top: 0; font-size: 0.72rem; line-height: 1.5; }
/* Три отметки согласия идут столбиком с одинаковым шагом (Босс 2026-09-24).
   Пометка «— необязательно» тише текста: видно, что эту галочку можно не
   ставить, но она не спорит с остальными. */
.lf-consents{ display: flex; flex-direction: column; gap: 9px; }
/* Галочка слева, текст ровным блоком: при переносе вторая строка не должна
   заезжать под чекбокс. */
.lf-consents .form-consent,
.lf-consents .lf-consent{
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px;
  text-align: left; margin: 0;
}
.lf-consents input[type="checkbox"]{ margin-top: 2px; }
.lf-consent-opt{ font-style: normal; opacity: 0.62; }
/* Строка о Политике под кнопкой (Босс 2026-09-24, ТЗ юриста): не отметка, а ссылка на документ */
.lf-privacy-note{ margin: 0; font-size: 0.68rem; line-height: 1.5; color: var(--soft); text-align: center; }
.lf-privacy-note a{ color: var(--gold-text); }
/* Ссылки на документы в отметках согласия (и Политика под кнопкой) — золотые и подчёркнутые:
   видно, что их можно открыть и прочитать (Босс 2026-09-25) */
#lead-form .lf-consent a, .lf-privacy-note a{
  color: var(--gold-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
#lead-form .lf-consent a:hover, .lf-privacy-note a:hover{ color: var(--dark); }
#lead-form .lf-submit{ margin-top: 0; }
#lead-form .pkg-note{ font-size: 0.8rem; color: var(--mid); margin: 0; padding: 10px 14px; background: var(--cream-dark); border-left: 3px solid var(--gold); }

/* ============================================================
   DIVIDER
============================================================ */
.divider-gold{ height: 0.5px; background: var(--border-gold); }


/* ============================================================
   FOOTER
============================================================ */
.footer-links a{
  transition: color 0.2s; text-decoration: none;
}
.footer-contact-icon{
  width: 32px; height: 32px; background: rgba(154,122,50,0.15);
  border: 0.5px solid rgba(154,122,50,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; flex-shrink: 0; color: var(--gold);
}
.footer-contact-value{
  text-decoration: none;
  transition: color 0.2s; display: block;
}
/* иконки в подвале — те же, что в блоке «Связаться» (Босс 2026-09-06): бренд-знаки и Noto на кремовой плитке
   (тёмная трубка и светлый конверт на тёмном подвале иначе не видны) */
.footer-contact-icon--brand{ background: transparent; border: 0; width: 36px; height: 36px; }
.footer-contact-icon--brand img{ width: 34px; height: 34px; display: block; }


/* ============================================================
   CASES / PORTFOLIO
============================================================ */
.cases-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 40px;
}
.case-card{
  background: var(--white); display: flex; flex-direction: column; overflow: hidden;
  border: 0.5px solid var(--border);
  transition: background 0.2s;
}
.case-card:hover{ background: var(--cream); }
.case-photo{
  background: var(--cream-dark);
  border-bottom: 0.5px solid var(--border);
  overflow: hidden;
  height: 280px;
}
.case-photo::after{
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.22s;
}
.case-card[data-gallery]:hover .case-photo::after{
  border-color: var(--gold);
}
.case-photo img{
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
  transition: opacity 0.28s;
}
/* листание фото по положению курсора (v3.js): сегменты-индикатор поверх превью, видны при наведении */
.case-scrub{ position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; gap: 3px; z-index: 3; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.scrub-on .case-scrub{ opacity: 1; }
.case-scrub i{ flex: 1; height: 3px; background: rgba(255,255,255,0.5); border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,0.25); }
.case-scrub i.on{ background: var(--gold); }
.case-body{ padding: 24px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.case-format{
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.case-title{
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; line-height: 1.3;
}
.case-meta{
  font-size: 0.72rem; color: var(--soft); margin-top: auto; padding-top: 8px;
}
.cases-cta{
  text-align: center; margin-top: 20px; /* было 48 + подводка + 20 — Босс 2026-09-05: подводка снята, отступы ужаты */
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.82rem; color: var(--soft);
}

/* ============================================================
   HERO: ПЕРЕКИДНОЙ КАЛЕНДАРЬ (Босс 2026-09-19)

   Тёмный корпус, два кольца и кнопка — НЕПОДВИЖНЫ. Переворачивается только
   кремовый лист внутри .cal-book: им занимается StPageFlip (портретный режим,
   по листу на месяц), разметку листов строит buildHeroCalendar в v3.js.
   ⚠️ .hero-booking остаётся только оболочкой-позиционером: его положение и
   масштаб считает fitHeroBooking по аспекту окна (титул запечён в hero-фото).
   Весь вид переехал на .cal — не возвращать сюда фон и рамку.
============================================================ */
/* ⚠️ С 2026-09-19 виджет — ОБЫЧНЫЙ элемент сетки первого экрана.
   Прежде он висел absolute и масштабировался скриптом fitHeroBooking, потому
   что заголовок был ЗАПЕЧЁН в фотографию и виджет приходилось обводить вокруг
   букв. Фон теперь чистый, заголовок — живой текст, вся та арифметика снята. */
.hero-booking{
  position: relative;
  width: 292px; max-width: 100%;
  z-index: 10;
}


/* ── Кольца ──────────────────────────────────────────────────────────────── */
/* Два металлических кольца поверх корпуса и верхнего края бумаги. */
.cal-rings{ position: absolute; left: 0; right: 0; top: 11px; height: 26px; z-index: 6; pointer-events: none; }
.cal-rings i{
  position: absolute; top: 0; width: 13px; height: 24px;
  border: 2px solid var(--cal-gold);
  border-radius: 7px;
  background: linear-gradient(100deg, rgba(255,255,255,0.5), rgba(168,135,63,0.1) 45%, rgba(255,255,255,0.25));
  box-shadow: 0 2px 3px rgba(0,0,0,0.45);
}
.cal-rings i:first-child{ left: 31%; }
.cal-rings i:last-child{ right: 31%; }

/* ── Стопка бумаги ───────────────────────────────────────────────────────── */
/* Толщина пачки: под верхним листом видны кромки нижних. Это НЕ тени
   StPageFlip — те живут внутри и появляются только на время переворота. */
/* Ширина — ровно по листу: иначе кромки тянутся во всю ширину корпуса и
   читаются не как пачка бумаги, а как серая полоса под календарём. */
.cal-stack{ position: relative; width: 258px; margin: 0 auto; }
.cal-stack::before, .cal-stack::after{
  content: ''; position: absolute; left: 2px; right: 2px; border-radius: 2px;
  background: #e5dcc8; pointer-events: none;
}
.cal-stack::before{ bottom: -4px; height: 7px; opacity: 0.8; }
.cal-stack::after{ bottom: -8px; left: 6px; right: 6px; height: 7px; opacity: 0.55; }

/* ── Стили StPageFlip ────────────────────────────────────────────────────────
   Перенесены ДОСЛОВНО из библиотеки (page-flip 2.0.7, MIT): она вставляет их
   собственным <style>, а наша CSP такие блокирует — стили не применялись.
   Инъекция в вендор-файле погашена, правила живут здесь. Менять их нельзя:
   это внутренняя геометрия библиотеки. При обновлении — сверить с оригиналом. */
.stf__parent{
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.stf__parent canvas{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block{ position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item{ display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow{ position: absolute; left: 0; top: 0; }
.stf__innerShadow{ position: absolute; left: 0; top: 0; }
.stf__hardShadow{ position: absolute; left: 0; top: 0; }
.stf__hardInnerShadow{ position: absolute; left: 0; top: 0; }

.cal-book{ position: relative; z-index: 2; width: 258px; height: 322px; margin: 0 auto; }
/* Лист заполняет коробку, которую StPageFlip создаёт под каждую страницу. */
.cal-leaf{ width: 100%; height: 100%; }
.cal-sheet{
  width: 100%; height: 100%; box-sizing: border-box;
  padding: 13px 13px 10px;
  background: var(--cal-paper);
  color: var(--cal-ink);
  /* Очень слабая фактура бумаги: два почти невидимых штриховых слоя + светлое
     пятно у верхнего края. Без картинок — чистый CSS. */
  background-image:
    radial-gradient(120% 70% at 28% 0%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(94deg, rgba(120,100,60,0.022) 0 2px, rgba(0,0,0,0) 2px 4px),
    repeating-linear-gradient(6deg, rgba(120,100,60,0.018) 0 3px, rgba(0,0,0,0) 3px 6px);
  box-shadow: inset 0 0 22px rgba(120,96,48,0.10), inset 0 -1px 0 rgba(120,96,48,0.12);
}
/* Без JS/библиотеки листы лежат друг на друге — показываем только текущий. */
.cal-book.is-plain{ position: relative; }
.cal-book.is-plain .cal-leaf{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.cal-book.is-plain .cal-leaf.is-shown{ opacity: 1; visibility: visible; }

/* ── Содержимое листа ────────────────────────────────────────────────────── */
.cal-month{
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  font-family: 'Cormorant Garamond', serif; font-size: 1.02rem; line-height: 1;
  letter-spacing: 0.02em; margin-bottom: 9px;
}
.cal-month i{ font-style: normal; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--cal-gold-d); }
.cal-dow, .cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow{
  gap: 1px; margin-bottom: 5px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(120,96,48,0.22);
  font-family: 'Jost', sans-serif; font-size: 0.42rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(42,38,32,0.5); text-align: center;
}
.cal-grid{ gap: 2px; }
.cal-day{
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 400;
  height: 29px; padding: 0; border: 1px solid transparent; border-radius: 2px;
  background: none; color: var(--cal-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.cal-day.is-blank{ visibility: hidden; }
.cal-day.is-past{ color: rgba(42,38,32,0.22); }
/* Свободно — заливка champagne; частично — только контур; занято — приглушённое. */
.cal-day.is-free{ background: var(--cal-gold); color: #33291a; cursor: pointer; }
.cal-day.is-partial{ border-color: var(--cal-gold-d); color: var(--cal-gold-d); cursor: pointer; }
.cal-day.is-unknown{ background: var(--cal-gold); color: #33291a; cursor: pointer; }   /* нет данных календаря (пока нет Яндекс-синка) — даты показываем золотыми, как свободные (Босс 2026-10-20); занятость подтверждаем лично по заявке */
.cal-day.is-booked{ color: var(--cal-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-day.is-today{ box-shadow: inset 0 0 0 1px var(--cal-ink); }
@media (hover: hover) and (pointer: fine) {
.cal-day.is-free:hover, .cal-day.is-unknown:hover{ background: var(--cal-gold-d); color: #fff; }
.cal-day.is-partial:hover{ background: rgba(201,169,97,0.22); }
}
.cal-day:focus-visible{ outline: 2px solid var(--cal-gold-d); outline-offset: 1px; }
/* Выбранная дата (Босс 2026-09-26): клик по дню только выделяет его, заявку открывает «Забронировать дату».
   Тёмная заливка с золотой цифрой и кольцом — отличается и от свободных (золото), и от «сегодня» (тонкая рамка). */
.cal-day.is-selected, .cal-day.is-selected:hover{ background: #2b2419; color: #f1d892; box-shadow: 0 0 0 2px var(--cal-gold-d); text-decoration: none; }
.cal-day[disabled]{ cursor: default; }

.cal-legend{
  display: flex; justify-content: center; gap: 9px; margin-top: 8px;
  font-family: 'Jost', sans-serif; font-size: 0.4rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(42,38,32,0.62);
}
.cal-legend span{ display: inline-flex; align-items: center; gap: 3px; }
.cal-key{ width: 7px; height: 7px; border-radius: 1px; border: 1px solid transparent; }
.cal-key.is-free{ background: var(--cal-gold); }
.cal-key.is-partial{ border-color: var(--cal-gold-d); }
.cal-key.is-booked{ background: var(--cal-muted); }

/* ── Навигация по месяцам ────────────────────────────────────────────────── */
/* «Назад» / «Вперёд» — видимыми словами в нижних углах листа, под легендой (Босс 2026-09-25; раньше кнопки
   были только для клавиатуры, а мышью и пальцем листали за уголок — это по-прежнему работает).
   Слой над книгой (z-index выше листа), но сам ряд прозрачен для мыши — ловят клики только кнопки.
   На первом/последнем месяце кнопка гаснет (disabled ставит calSyncNav в v3.js). */
.cal-nav{
  position: absolute; left: 0; right: 0; bottom: 80px; z-index: 7;
  display: flex; justify-content: space-between; padding: 0 28px; pointer-events: none;
}
.cal-nav-btn{
  pointer-events: auto; padding: 4px 2px; margin: 0; border: 0; background: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: 0.46rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cal-gold-d); transition: color 0.2s, opacity 0.2s;
}
@media (hover: hover) and (pointer: fine) { .cal-nav-btn:not(:disabled):hover { color: var(--cal-ink); } }
.cal-nav-btn:disabled{ opacity: 0.3; cursor: default; }
.cal-nav-btn:focus-visible{ outline: 2px solid var(--cal-gold-d); outline-offset: 2px; border-radius: 2px; }

/* Корпус календаря — в цвет костюма фигуры на первом экране (Босс 2026-09-25): у «Ведущего» тёмно-зелёный
   (#16211c ≈ его костюм #10211c), при «Организаторе» (шар → .hero-stage.is-alt) — бордовый, как его костюм
   (замер фигуры felix-figure-2: освещённая ткань #5c1e23, тень #34…). Градиент не анимируется —
   бордовый лежит слоем ::before над фоном корпуса и проявляется прозрачностью, под содержимым (isolate). */
.cal{
  /* Палитра календаря живёт здесь: это отдельный «предмет» на фотографии,
  а не элемент интерфейса сайта. */
  --cal-panel:  #16211c;   /* deep charcoal с изумрудным уклоном */
  --cal-panel2: #24332c;
  --cal-paper:  #f3ecdd;   /* тёплая ivory, НЕ белая */
  --cal-ink:    #2a2620;
  --cal-gold:   #c9a961;   /* champagne gold */
  --cal-gold-d: #a8873f;
  --cal-muted:  #8d8274;   /* занято — приглушённый серо-коричневый */
  position: relative;
  padding: 26px 17px 17px;
  border-radius: 3px;
  background: linear-gradient(168deg, var(--cal-panel2), var(--cal-panel) 62%);
  box-shadow:
  0 26px 54px rgba(0,0,0,0.45),          /* предмет лежит на фотографии */
  inset 0 1px 0 rgba(201,169,97,0.22);   /* фаска по верхней кромке */
  isolation: isolate;
}
.cal::before{
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(168deg, #5e1f25, #3b1317 62%);
  box-shadow: inset 0 1px 0 rgba(201,169,97,0.22);
  opacity: 0; transition: opacity 0.6s ease;
}
.hero-stage.is-alt .cal::before{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .cal::before, .cal-nav-btn{ transition: none; } }

/* ── Кнопка ──────────────────────────────────────────────────────────────── */
.cal-cta{
  display: flex; align-items: center; justify-content: center;
  margin-top: 15px; height: 40px;
  background: var(--cal-gold); color: #241c0d; text-decoration: none;
  border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.2s;
}
@media (hover: hover) and (pointer: fine) { .cal-cta:hover { background: #dcbd75; } }
.cal-cta:focus-visible{ outline: 2px solid var(--cal-gold); outline-offset: 3px; }

/* ============================================================
   RESPONSIVE
============================================================ */
/* ⚠️ ПОРОГ БУРГЕРА ПОДНЯТ С 960 ДО 1100px (2026-09-22, пункт «Мой подход»).
   Замер: на 1100px и уже даже три пункта меню не дают кнопке «Обсудить
   мероприятие» уместиться в секцию — её обрезало на 30–170px. Лучше отдать
   всё меню бургеру целиком (в нём пункты все), чем показывать огрызок с
   обрезанной кнопкой. Остальные правила блока 960px (отступы, hero и т.д.)
   к ширине шапки отношения не имеют и остались на своём пороге. */
@media (max-width: 1100px){
  .nav-links, .nav > .btn { display: none; }
  .nav-burger { display: flex; }
}
/* ── 960px: планшеты ── */
@media (max-width: 960px){
  .wrap { padding: 0 24px; }
  .nav { padding: 0 24px; }
  .nav-mobile { padding: 20px 24px; }
  /* Правила прежнего hero отсюда убраны 2026-09-19: кроп фото под запечённый
     заголовок, ручная посадка виджета и кегли .hero-name/.hero-tagline. Фон
     теперь чистый, заголовок — живой текст, адаптив первого экрана живёт
     целиком в его разделе выше. */
  .hero-booking { width: 100%; max-width: 360px; margin: 0 auto; }
  .section { padding: 56px 0; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .pkg { width: calc((100% - var(--pkg-gap)) / 2); }
  .calc-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  /* контакт: форма сразу под заголовком, семь строк контактов — после неё */
  .lf-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px 16px 22px; }
  .footer-main { gap: 32px; padding: 48px 0 32px; }
}

/* ── 640px: малые планшеты / большие телефоны ── */
@media (max-width: 640px){
  body { padding-bottom: 68px; }
  .wrap { padding: 0 16px; }
  /* nowrap снимается у ВСЕХ кнопок канона: длинную подпись из редактора на
     узком экране лучше перенести, чем выпустить за край. */
  .btn, .ebc-cta, .btn-hero-gold, .btn-hero-dark { white-space: normal; text-align: center; line-height: 1.3; }
  .section { padding: 44px 0; }
  .btn-hero-gold, .btn-hero-dark { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-font-sm); }
  .cases-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  /* пакеты: столбик вместо карусели — все четыре карточки и цены видны при прокрутке */
  .pkg-summary { display: block; }
  .pkg { width: 100%; padding: 12px 12px 24px; scroll-margin-top: 76px; }
  .pkg:hover { transform: none; }
  .pkg-media { margin-bottom: 20px; }
  .pkg-body { padding: 0 8px; }
  .contact-form { padding: 28px 16px; }
  .faq-list { margin-top: 28px; }
}

/* ── 480px: смартфоны ── */
@media (max-width: 480px){
  .nav { height: 56px; padding: 0 16px; }
  /* ⚠️ padding у первого экрана БОЛЬШЕ НЕ НУЖЕН и вреден: содержимое лежит в
     абсолютном макете, а padding уменьшал content-box секции — и единица cqh,
     по которой считается масштаб, оказывалась на 72px меньше высоты экрана.
     Из-за этого макет масштабировался по высоте и по бокам оставались поля. */
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }
  .section { padding: 36px 0; }
  /* ≤480: вся шкала съезжает на ступень вниз. Модификаторы идут ПОСЛЕ базовой
     .btn — при равной специфичности побеждает последнее правило, иначе .btn
     перебил бы .btn-md и .btn-xs и мелкая кнопка стала бы на телефоне крупнее,
     чем на десктопе. */
  .btn { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-font-sm); }
  .btn-md { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-font-sm); }
  .btn-sm, .ebc-cta { padding: var(--btn-py-xs) var(--btn-px-xs); font-size: var(--btn-font-xs); }
  .btn-xs { padding: var(--btn-py-xs) var(--btn-px-xs); font-size: var(--btn-font-xs); }
  .nav-mobile a { font-size: 0.7rem; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .footer-desc { max-width: 100%; }
}


/* ===== FLOAT CALL BUTTONS ===== */
.float-actions{
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.float-actions.visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.float-btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.float-btn:hover{ transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
.float-btn:active{ transform: scale(1.04); box-shadow: 0 3px 12px rgba(0,0,0,0.26); }
@media (prefers-reduced-motion: reduce) { .float-btn:hover, .float-btn:active { transform: none; } }
/* ⚠️ КНОПКА «ПОЗВОНИТЬ» СТАЛА СВЕТЛОЙ — это вынужденно, а не по вкусу.
   Босс 21.09.2026 поставил сюда анимированный стикер и выбрал его в РОДНЫХ,
   тёмных цветах. Тёмная трубка на золоте #8d6f2d даёт контраст ~1.9:1 при
   норме 3:1 для значимой графики — на 52px кнопка превращалась в тёмное
   пятно, по которому не понять, куда жмёшь (проверено примеркой в размер).
   Кремовый круг с золотой каймой — тот же приём, что у значков контактов,
   так что тройка кнопок не рассыпается. Золото осталось в кайме.
   Вернуть золотой фон можно только вместе с БЕЛЫМ стикером. */
/* Письмо — заявка во всплывающей форме (Босс 2026-09-26): золотой круг, белый конверт */
.float-mail{ background: linear-gradient(180deg, #c9a25a 0%, #9a7a3f 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.float-mail:hover{ filter: brightness(1.08); }
.float-mail:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.float-call{
  background: rgba(250, 248, 243, 0.97);
  color: var(--dark);
  border: 1px solid rgba(154, 122, 50, 0.55);
}

/* ── Анимированный стикер звонка (Босс 2026-09-21) ────────────────────────── */
/* Внутри лежит статичная картинка; проигрыватель подменяет её живой анимацией,
   когда (и если) загрузится. Размер задаёт контейнер — у стикера свои поля
   вокруг трубки, поэтому он крупнее прежнего глифа. */
.call-anim{
  display: block; position: relative;
  line-height: 0; pointer-events: none;
}
.call-anim img, .call-anim svg{ display: block; width: 100%; height: 100%; }
.call-anim--float{ width: 34px; height: 34px; }
.call-anim--contact{ width: 30px; height: 30px; }
.call-anim--fq{ width: 34px; height: 34px; }
/* Telegram и Max — фирменные знаки целиком как кнопка (Босс 2026-09-06): круг Telegram / скруглённый квадрат Max */
.float-btn--brand{ background: transparent; }
.float-btn--brand img{ width: 52px; height: 52px; display: block; }
.float-tg{ background: transparent; }
.float-max{ background: transparent; border-radius: 12px; }

/* ===== MOBILE BOTTOM BAR ===== */
.mobile-bar{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-bar-btn:hover{ opacity: 0.85; }
/* Панель тач-режима: hover тут не существует, отклик даёт только нажатие. */
.mobile-bar-btn:active{ transform: translateY(var(--btn-press)); opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .mobile-bar-btn:active { transform: none; } }
.mobile-bar-call{ background: var(--white); color: var(--dark); }
/* .mobile-bar-tg — ниже по файлу (белый фон + знак Telegram, 2026-09-06);
   прежнее золотое правило было мёртвым, оно полностью перебивалось. */

@media (max-width: 960px) {
.float-actions{ display: none; }
.mobile-bar{ display: flex; }
}
@media (min-width: 961px) {
.mobile-bar{ display: none !important; }
}


/* Nav dropdown */
.nav-dropdown{ position: relative; }
.nav-dropdown-btn{
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft);
  display: flex; align-items: center; gap: 4px;
  font-family: 'Jost', sans-serif;
  transition: color 0.2s;
}
.nav-dropdown-btn:hover{ color: var(--gold); }
.nav-dropdown-arrow{ font-size: 0.55rem; transition: transform 0.2s; }
.nav-dropdown.open .nav-dropdown-arrow{ transform: rotate(180deg); }
.nav-dropdown-menu{
  display: none; position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%);
  background: var(--cream); border: 0.5px solid var(--border);
  box-shadow: 0 8px 32px rgba(28,26,22,0.12);
  list-style: none; padding: 8px 0; min-width: 200px; z-index: 400;
  border-radius: 10px;   /* лёгкое скругление, как у карточек каталога .fa-card (Босс 2026-09-26) */
}
.nav-dropdown.open .nav-dropdown-menu{ display: block; }
.nav-dropdown-menu li a{
  display: block; padding: 10px 20px;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--soft);
  white-space: nowrap; transition: color 0.2s, background 0.2s;
}
.nav-dropdown-menu li a:hover{ color: var(--gold); background: rgba(154,122,50,0.05); }
/* Мега-меню форматов: три колонки с некликабельными заголовками-группами (Босс 2026-09-06) */
.nav-mega{ padding: 16px 10px 12px; min-width: 0; width: max-content; }
.nav-dropdown.open .nav-mega{ display: grid; grid-template-columns: repeat(3, auto); gap: 0 14px; }
.nav-mega ul{ list-style: none; margin: 0; padding: 0; }
/* Строка «Все форматы» над группами (без стрелки — правило Босса 2026-09-25: стрелок в кнопках не ставим) — одна горизонтальная кнопка во всю ширину панели, ведёт в каталог /formats
   (Босс 2026-09-25). Первый ребёнок сетки, занимает все три колонки. */
/* селектор с .nav-mega и a: иначе общее .nav-links a (цвет, кегль) перебивало строку — текст выходил серым */
.nav-mega a.nav-mega-all{
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 12px 14px; padding: 12px 18px; border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: rgba(154,122,50,0.07); color: var(--gold-text); text-decoration: none; white-space: nowrap;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-mega a.nav-mega-all:hover{ background: rgba(154,122,50,0.14); border-color: var(--gold); color: var(--dark); }
.nav-mega a.nav-mega-all:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.nav-mega-title{
  margin: 0 12px 6px; padding: 4px 8px 8px; white-space: nowrap; cursor: default;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
  border-bottom: 0.5px solid var(--border-gold);
}
/* Раскрывашка «Полезное ▾» (Босс 2026-09-26): тот же вид, что у форматов — строка «Всё полезное» и под ней
   разделы, но колонка одна (разделов пока два). Заголовка группы нет: название уже на кнопке. */
.nav-dropdown.open .nav-mega--useful{ grid-template-columns: minmax(220px, auto); }
.nav-mega--useful a.nav-mega-all{ margin-bottom: 8px; }
/* бургер: заголовки групп форматов */
.nav-mobile-group{ font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); padding: 10px 0 0; }


/* ============================================================
   CASE CARD — cursor
============================================================ */
.case-card[data-gallery]{ cursor: pointer; }

/* ============================================================
   CASE GALLERY LIGHTBOX
============================================================ */
.clb{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.clb[hidden]{ display: none; }
.clb-backdrop{
  position: absolute; inset: 0; background: rgba(15,13,10,0.92);
  cursor: pointer;
}
.clb-close{
  position: absolute; top: 20px; right: 24px; z-index: 2;
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 4px 10px;
  transition: color 0.2s;
}
.clb-close:hover{ color: #fff; }
.clb-inner{
  position: relative; z-index: 1; width: min(92vw, 1000px);
  display: flex; flex-direction: column; gap: 16px;
}
.clb-header{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.clb-title{
  color: #fff; font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 600;
}
/* длинное название переносится само, счётчик «1 / 12» не сжимается в столбик */
.clb-counter{
  color: rgba(255,255,255,0.45); font-size: 0.75rem; letter-spacing: 0.08em;
  white-space: nowrap; flex-shrink: 0;
}
/* ловушка фокуса в конце диалога (создаёт v3.js): фокусируемая, но невидимая */
.clb-trap{ position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* justify-content: center — ради рамки телефона (рилсы): там .clb-img-wrap
   узкий и flex: 0 0 auto, и по умолчанию (flex-start) телефон со стрелками
   прижимался к левому краю плеера. Для фото и роликов событий wrap растянут
   (flex: 1), так что центрирование им ничего не меняет. */
.clb-stage{
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
/* ⚠️ Стрелки — ТЕ ЖЕ, что на экране «События в движении» (Босс 2026-09-24:
   «у рилсов хорошие золотые стрелочки, сделай такие везде»): круг на тёмном,
   золотая рамка и шеврон. Значения 1-в-1 с .rl-nav — меняете там, меняйте и
   здесь, иначе разойдутся. */
.clb-arrow{
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(20, 16, 12, 0.6); color: #e6c77a; border: 1px solid rgba(230, 199, 122, 0.6);
  font-size: 0;   /* текстовая стрелка из старой разметки не нужна — внутри svg */
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.clb-arrow:hover:not(:disabled){ background: rgba(20, 16, 12, 0.85); border-color: #e6c77a; transform: scale(1.06); }
.clb-arrow:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }
.clb-arrow:disabled{ opacity: 0.25; cursor: default; }
.clb-img-wrap{
  flex: 1; position: relative; background: rgba(255,255,255,0.04);
  border-radius: 2px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; max-height: 68vh;
}
/* ⚠️ Одиночное медиа (шоурил с первого экрана, одиночное фото) раскрывается
   почти во весь экран (Босс 2026-09-24: «чтобы картинка открывалась
   практически во весь экран»). Листать там нечего: миниатюр и стрелок нет,
   значит и место под них резервировать незачем. */
/* ⚠️ Коробка лайтбокса ограничена 1000px — для одиночного медиа этого мало:
   заставка шоурила 1672px шириной выводилась в 1000 (52% экрана). В одиночном
   режиме коробке разрешено 96vw, а картинке — расти до своего размера. */
.clb-single .clb-inner{ width: min(96vw, 1900px); }
.clb-single .clb-img-wrap{ max-height: 90vh; }
.clb-single .clb-img{ max-height: 90vh; max-width: 100%; width: auto; }
.clb-img{
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  display: block; object-fit: contain;
  transition: opacity 0.18s;
}
.clb-img.loading{ opacity: 0; }
.clb-spinner{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.clb-spinner::after{
  content: ''; width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold);
  border-radius: 50%; animation: clb-spin 0.7s linear infinite;
}
.clb-img:not(.loading) ~ .clb-spinner{ display: none; }
@keyframes clb-spin { to { transform: rotate(360deg); } }
/* safe center: пока миниатюры помещаются — лента по центру под кадром;
   когда их много и появляется прокрутка, «safe» не даёт срезать первые
   кадры за левым краем (обычный center при overflow их прячет). */
/* Один кадр в лайтбоксе (заставка шоурила, событие с единственным фото):
   стрелки и лента миниатюр не нужны — листать нечего (Босс 2026-09-24). */
.clb-single .clb-arrow,
.clb-single .clb-thumbs{ display: none; }
.clb-thumbs{
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  justify-content: safe center;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.clb-thumb{
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 2px;
  object-fit: cover; cursor: pointer; opacity: 0.45;
  border: 2px solid transparent; transition: opacity 0.18s, border-color 0.18s;
}
.clb-thumb.active, .clb-thumb:hover{ opacity: 1; }
.clb-thumb.active{ border-color: var(--gold); }
/* Ролики событий архива /events — в галерее видео-события или после фото (v3.js показывает <video> вместо картинки).
   .clb-img/.clb-video{ display:block } перебивает UA-правило [hidden] — прячем явно. */
.clb-img[hidden], .clb-video[hidden]{ display: none; }
.clb-video{
  display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto;
  background: #000; outline: none;
}
.clb-video:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; }
/* спиннер привязан к загрузке картинки — у ролика свой индикатор в плеере */
.clb-img-wrap.is-video .clb-spinner{ display: none; }
/* миниатюра ролика: постер + круглый значок play (кремовый круг, золотой треугольник) */
.clb-thumb-video{ position: relative; display: block; overflow: hidden; background: #2b2721; opacity: 0.6; }
.clb-thumb-video img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.clb-thumb-video::before{
  content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(245,243,238,0.94); box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
.clb-thumb-video::after{
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-32%, -50%);
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--gold-text);
}
@media (max-width: 600px) {
.clb-arrow{ width: 36px; height: 36px; font-size: 1rem; }
.clb-title{ font-size: 1rem; }
.clb-thumbs{ display: none; }
/* в галерее один кадр или ролик — неактивные стрелки не отнимают ~100px ширины у кадра */
  .clb-single .clb-arrow{ display: none; }
}

/* ============================================================
   BLOG SECTION
============================================================ */
.blog-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 0.5px solid var(--border);
}
.blog-card{
  background: var(--white); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: background 0.2s;
}
.blog-card:hover{ background: var(--cream); }
.blog-card-top{
  display: flex; justify-content: space-between; align-items: center;
}
.blog-card-cat{
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.blog-card-time{
  font-size: 0.62rem; color: var(--soft); letter-spacing: 0.06em;
}
.blog-card-title{
  font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
  font-weight: 600; line-height: 1.35; color: var(--dark);
}
.blog-card-excerpt{
  font-size: 0.84rem; color: var(--soft); line-height: 1.7; flex: 1;
}
.blog-card-date{
  font-size: 0.62rem; color: var(--soft); letter-spacing: 0.06em;
  border-top: 0.5px solid var(--border); padding-top: 12px; margin-top: 4px;
}
@media (max-width: 900px) {
.blog-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.blog-grid{ grid-template-columns: 1fr; }
.blog-card{ padding: 24px 20px; }
}

/* ============================================================
   SECTION CTA — центрированные кнопки после блоков
============================================================ */
.section-cta{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* ===== FORM ERROR (заявка не ушла — прямые контакты) ===== */
.form-error{
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(192, 57, 43, 0.06);
  border-left: 3px solid #c0392b;
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
}
.form-error p{ margin: 0 0 6px; }
.form-error p:last-child{ margin-bottom: 0; }
.form-error a{ color: var(--gold); font-weight: 600; }
.form-submit:disabled{ opacity: 0.65; cursor: wait; }

/* ===== ФИКСЫ 2026-07-07 (v=33): календарь-горизонт, мобильное меню, планшетные бары, цена, шапка ===== */
/* дни за горизонтом данных занятости: нейтральные{ background: transparent; color: rgba(28,26,22,0.45); border: 0.5px dashed rgba(28,26,22,0.18); cursor: pointer; }

/* мобильное меню: непрозрачный фон + скролл (нижние пункты были недостижимы).
   Вычитаем реальную высоту шапки (64px; 56px только ≤480) и бара (~80px) */
.nav-mobile{ background: var(--cream); max-height: calc(100dvh - 64px - 80px); overflow-y: auto; }

/* планшет 641-960: mobile-bar активен уже здесь — компенсация отступа снизу тоже должна быть здесь */
@media (max-width: 960px){
  body { padding-bottom: 80px; }
}
@media (max-width: 480px) {
.nav-mobile{
  top: 56px; padding: 16px;
  max-height: calc(100dvh - 56px - 80px);
}
}

/* mobile-bar: кнопка «Оставить заявку» переносилась на 2 строки → бар 98px и заезды под него */
.mobile-bar-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: var(--radius);
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--btn-ease), transform var(--btn-ease);
  white-space: nowrap;
}
@media (max-width: 400px) {
.mobile-bar-btn{ font-size: 0.62rem; padding: 13px 8px; gap: 6px; }
}
/* 320px: nowrap + min-width:auto не давали кнопкам ужаться — бар вылезал за экран */
@media (max-width: 360px){
  .mobile-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .mobile-bar-btn { min-width: 0; font-size: 0.58rem; letter-spacing: 0.04em; padding: 13px 4px; gap: 5px; }
}

/* цена калькулятора: не разваливать «от 160 000 ₽» на три строки */
@media (max-width: 480px){
  .total-price { font-size: 1.5rem; white-space: nowrap; }
  /* подпись лого вылезала за навбар */
}

/* шапка 961-1280: полный набор пунктов шире вьюпорта (~1205px контента) — CTA обрезалась,
   лого налезало на контент. Ужимаем ступенчато: роль лого + паддинги CTA, ниже 1120 — минус 2 пункта */
.nav-logo{
  cursor: pointer;
  flex-shrink: 0;
}
.nav > .btn{ flex-shrink: 0; white-space: nowrap; }
/* ⚠️ ПОРОГИ СЖАТИЯ ШАПКИ ПОДНЯТЫ 2026-09-22 вместе с пунктом «Мой подход».
   Меню и раньше шло впритык к золотой кнопке; лишний пункт (+107px) начинал
   выдавливать кнопку за правый край уже с 1500px — она обрезалась до 184px.
   Пороги подобраны замером: на каждой ширине считался правый край кнопки
   против края секции (ширина окна минус padding шапки). Добавите пункт —
   ПЕРЕМЕРЯТЬ снова, на глаз этот запас не виден. */
@media (max-width: 1500px) and (min-width: 961px) {
.nav-logo-role{ display: none; }
.nav-logo{ font-size: 0.85rem; }
.nav-links{ gap: 12px; }
.nav-links a{ font-size: 0.58rem; }
.nav > .btn{ padding: 14px 22px; }
}
/* Пункты снимаются по одному, в порядке важности. Пороги ПЕРЕМЕРЕНЫ 2026-09-24
   после того, как в шапку добавился пункт REELS (Босс: «кнопку REELS перед
   кнопкой ЦЕНЫ»). Мерилось так: на каждой ширине бралcя просвет между правым
   краем меню и левым краем золотой кнопки, порогом считалась ширина, где
   просвет падает ниже 28px. Минимальная ширина для каждого состава:
        полный набор — 1613px          без «Блога» — 1577px
        без «Аренды» — 1289px          без «Отзывов» — 1234px
        без «Моего подхода» — 1101px
   Ниже 1100px не помещается даже такой огрызок, поэтому там меню целиком
   уходит под бургер (см. блок 1100px ниже).
   ⚠️ Добавите пункт — ПЕРЕМЕРЯТЬ заново, на глаз этот запас не виден.
   ⚠️ Селекторы через `$=` («заканчивается на»), а НЕ точное равенство: на
   внутренних страницах общая шапка прогоняет ссылки через abs(), и якорь
   выглядит как `/#blog`. С точным `[href="#blog"]` правила там молча не
   срабатывали — меню оставалось полным и упиралось в золотую кнопку
   (замер 2026-09-24 на /equipment: просвет 0px при 1101px). */
/* ⚠️ Пороги ПЕРЕМЕРЕНЫ 2026-09-24 дважды: сначала под «Цены» → «Стоимость»
   (слово длиннее на 21px), потом обратно вниз, когда «Аренда оборудования»
   стала «Оборудованием» (короче на 74px). Замер тем же методом — минимальная
   ширина, на которой состав держит просвет 28px до золотой кнопки:
        полный набор 1594 · без «Блога» 1558 · без «Оборудования» 1331
        без «Отзывов» 1276 · без «Моего подхода» 1131 · без «Кейсов» 1101 */
/* ⚠️ 2026-09-26: «Блога» в шапке больше нет — он пункт раскрывашки «Полезное ▾», а сама она стоит В КОНЦЕ меню,
   на месте «Блога» (Босс: «блог поставим внутри Полезного, а Полезное — там, где сейчас блог»). ⚠️ Правил вида
   `.nav-links a[href="/blog"]` больше НЕ ПИСАТЬ: ссылка на блог теперь внутри раскрывашки, её бы и спрятало.
   ПЕРЕМЕРЕНО: просвет ≥ 28px С ОБЕИХ сторон меню (до логотипа и до кнопки) на всех ширинах выше порога,
   на главной (шапка шире — монограмма) и на внутренней странице, порог — по большему:
        полный набор — главная 1614 / внутренние 1606      без «Полезного» — 1508 / 1350
        без «Оборудования» — 1286 / 1241      без «Отзывов» — 1230 / 1185      без «Моего подхода» — 1101
   Первым уходит «Полезное» (как раньше «Блог»); пороги «Оборудования» и ниже прежние — запас есть.
   Прячется li целиком (.nav-useful), а не ссылка: это раскрывашка, пустого li с отступом не остаётся. */
/* 2026-09-26 (позже): в БЕЛОЙ шапке появился знак «ФЦ» (+~54px к логотипу) — перемер белой шапки (внутренние страницы
   и главная после прокрутки, обе стороны меню ≥ 28px): полный набор 1661 · без «Полезного» 1556 · без «Оборудования» 1296 ·
   без «Отзывов» 1241. Сдвинут только порог «Полезного» (1613 → 1660), остальные держат с запасом. Прозрачная шапка
   первого экрана без роли уже — там запас больше. */
@media (max-width: 1660px) and (min-width: 1101px) {
.nav-links .nav-useful{ display: none; }
}
@media (max-width: 1557px) and (min-width: 1101px) {
.nav-links a[href="/equipment"]{ display: none; }
}
@media (max-width: 1385px) and (min-width: 1101px) {
.nav{ padding: 0 32px; }
}
@media (max-width: 1330px) and (min-width: 1101px) {
.nav-links a[href$="#reviews"]{ display: none; }
}
@media (max-width: 1275px) and (min-width: 1101px) {
.nav-links a[href$="#advantages"]{ display: none; }
}
@media (max-width: 1130px) and (min-width: 1101px) {
.nav-links a[href$="#cases"]{ display: none; }
}

/* ============================================================
   A11Y-ПАКЕТ (2026-07-14): контраст, reduced-motion, фокус, touch-targets
============================================================ */
/* Мелкий золотой текст на СВЕТЛОМ фоне: --gold 3.3:1 → --gold-text 4.6:1 (WCAG AA).
   На тёмном фоне НЕ применять — там затемнение ухудшает контраст. */
/* --gold-text определён в tokens.css */
.label,
.nav-logo-role,
.pkg-badge,
.case-format,
.ebc-type,
.faq-btn:hover,
.faq-btn.open,
.form-error a{ color: var(--gold-text); }


/* Видимый фокус для не-нативных интерактивов (div/img с tabindex) */
.case-card:focus-visible,
.clb-thumb:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* Уважение к prefers-reduced-motion (JS при нём не запускает автопрокрутку) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* легенда — колонкой, каждая пара с новой строки (просьба Босса 2026-07-20) */

/* Кнопка-строка «Свободные даты» — видна только на ≤640px, где виджет свёрнут */
.hb-toggle{
  display: none;
  width: calc(100% - 32px); max-width: 360px;
  margin: 16px auto 4px;
  padding: 12px 18px;
  /* столбик: заголовок сверху, призыв под ним — длинная фраза
     («успейте забронировать свою») в строку рядом не влезает */
  flex-direction: column; align-items: flex-start; gap: 4px;
  background: rgba(28,26,22,0.72); backdrop-filter: blur(6px);
  border: 0.5px solid rgba(201,176,100,0.45);
  cursor: pointer; font-family: 'Jost', sans-serif;
}
.hb-toggle-title{
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(201,176,100,0.95);
}
.hb-toggle-hint{ font-size: 0.62rem; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }
/* ⚠️ ПОРОГ 759px — тот же, что у вертикальной раскладки первого экрана и
   HERO_FLOW_W в v3.js. Пока он стоял на 640, в полосе 641–759 календарь уже
   был развёрнут, а композиция ещё вертикальная — и он налезал на УТП. */
@media (max-width: 759px) {
/* кремовые поля вокруг плашки — минимальные: почти во всю ширину, впритык к фото */
  .hb-toggle{ display: flex; width: calc(100% - 8px); max-width: none; margin: 4px auto 2px;
    background: rgba(13, 10, 7, 0.82); }
.hero-booking{ display: none; }
.hero-booking.hb-open{
  /* Раскрытый календарь получает СВОЮ подложку: он ложится поверх заголовка и
  девиза, и без неё текст просвечивал сквозь него. */
  background: rgba(13, 10, 7, 0.93); border-radius: 4px; padding: 6px 0 10px;
  display: block;
  width: calc(100% - 8px); max-width: none;
  margin: 4px auto 12px;
}
}

/* Кейсы: 2 ряда (6 карточек) видны, остальные по кнопке «Ещё»/«Скрыть» (Босс 2026-09-05).
   Класс .cases-collapsed вешает v3.js — без JS все кейсы видны. ≤640 — лента, все карточки,
   обёртка кнопки скрыта (ниже, в блоке лент). */
.cases-collapsed .case-card:nth-child(n+7){ display: none; }
.cases-more-wrap{ margin-top: 0; }
.cases-more-wrap[hidden]{ display: none; }
/* Плитка «Смотреть все мероприятия» — последний элемент .cases-grid, ведёт на архив /events (Босс 2026-09-17).
   Размер — ячейка сетки (высоту задаёт карточка того же ряда); в свёрнутом виде скрыта вместе с карточками 7+.
   Кремовая плита с золотой рамкой-паспарту и круглой стрелкой; наведение — стрелка заливается золотом. */
.cases-all{
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  min-height: 280px; padding: 40px 28px; text-align: center; text-decoration: none; color: var(--dark);
  background: var(--cream); border: 0.5px solid var(--border-gold);
  transition: background 0.25s;
}
.cases-all::before{
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 0.5px solid var(--border-gold); transition: inset 0.25s, border-color 0.25s;
}
/* «Смотреть все мероприятия» — овальная жёлтая кнопка, как «Все форматы» (.fx-all-btn) на экране форматов
   (Босс 2026-09-26). Кнопкой оформлена надпись, ссылка — по-прежнему вся карточка: наведение на карточку
   подсвечивает кнопку. Тень мягче, чем у .fx-all-btn: там кнопка на тёмном кадре, здесь — на кремовой карточке.
   Прежний вид (крупный Cormorant): font-size 1.7rem, weight 400, line-height 1.2, max-width 12em. */
.cases-all-label{
  /* размеры 1-в-1 с .fx-all-btn; текст короткий — «Смотреть все» (Босс 2026-09-26: «без лишних слов»,
     длинное «Смотреть все мероприятия» в узкой карточке ломалось на 2–3 строки) */
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 38px; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase;
  color: #1c1a16; background: #e6c77a; border: 1px solid #e6c77a; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(28,26,22,.16), 0 0 0 6px rgba(230,199,122,.18);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.cases-all:hover .cases-all-label, .cases-all:focus-visible .cases-all-label{
  background: #f1d894; box-shadow: 0 10px 24px rgba(28,26,22,.2), 0 0 0 9px rgba(230,199,122,.25); transform: translateY(-1px);
}
/* круглая стрелка .cases-all-arrow снята 2026-09-25 (правило Босса: в кнопках стрелок не ставим) */
.cases-all:hover{ background: var(--cream-dark); }
.cases-all:hover::before{ inset: 8px; border-color: var(--gold); }
.cases-all:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.cases-collapsed .cases-all{ display: none; }
/* «Ещё» — хлястик (Босс 2026-09-06): вытянутый вниз язычок с заострённым концом, свисает из-под блока;
   надпись + шеврон, при раскрытии шеврон вверх; hover — язычок чуть «вытягивается» вниз */
.pull-tab{
  --tab-w: 96px; --tab-h: 112px; --tip: 16px; /* Босс 2026-09-06: надпись 20px и стрелка крупные, сам язычок компактнее (было 112×134) */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  width: var(--tab-w); height: var(--tab-h); padding: 16px 6px 0; margin: 0;
  background: var(--red); color: var(--gold-on-red); border: 0; cursor: pointer; /* красный хлястик, золотая надпись (Босс 2026-09-06) */
  font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));
  transition: background 0.2s, transform 0.2s;
}
.pull-tab:hover{ background: var(--red-dark); color: #f0d58a; transform: translateY(4px); }
.pull-tab:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }
.pull-tab-label{ line-height: 1; }
.pull-tab-arrow{ width: 15px; height: 15px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s; margin-top: 0; }
.pull-tab[aria-expanded="true"] .pull-tab-arrow{ transform: rotate(-135deg); margin-top: 8px; }
/* Раскрыт (Босс 2026-09-14): надпись скрыта, остаётся только треугольник по центру язычка.
   Текст «Скрыть» остаётся для скринридера (визуально скрыт, не display:none).
*/
.pull-tab{ position: relative; }
.pull-tab[aria-expanded="true"]{ justify-content: center; padding-top: 0; padding-bottom: var(--tip); }
.pull-tab[aria-expanded="true"] .pull-tab-label{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pull-tab[aria-expanded="true"] .pull-tab-arrow{ margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .pull-tab, .pull-tab-arrow { transition: none; } .pull-tab:hover { transform: none; } }


/* Mobile-bar: третья кнопка — настоящий Telegram (иконка), заявка — отдельным классом */
.mobile-bar-tg{ flex: 0 0 46px; padding: 9px 0; background: var(--white); border: 0.5px solid var(--border); } /* фирменный знак Telegram на белом (2026-09-06) */
.mobile-bar-tg img{ width: 28px; height: 28px; display: block; }
.mobile-bar-form{ background: var(--gold-btn); color: var(--white); } /* тот же оттенок, что у главной кнопки на десктопе (AA с белым текстом) */

/* Лого не вылезает за навбар на ≤480px */
@media (max-width: 480px){
  .nav-logo-role { display: none; }
  .nav-logo-name { font-size: 0.9rem; }
}


/* Success-экран больше не тупик */
.form-success-links{ margin-top: 10px; font-size: 0.85rem; }
.form-success-links a{ color: var(--gold-text); font-weight: 600; }


/* ============================================================
   МОБИЛЬНАЯ ПЛОТНОСТЬ (2026-07-20, просьба Босса): блоки должны
   +- влезать в экран — ужаты межстрочные, паддинги карточек,
   отступы гридов. Только ≤640px, десктоп не трогаем.
============================================================ */
@media (max-width: 640px){
  /* отступ грида/сетки от заголовка секции */
  .calc-grid, .cases-grid, .reviews-grid,
  .blog-grid { margin-top: 24px; }
  .section-cta { margin-top: 28px; }

  /* межстрочные длинных текстов */
  .faq-answer-inner { line-height: 1.6; }


  /* карточки: паддинги */
   .review-text { line-height: 1.55; margin-bottom: 14px; }

  /* оборудование: гигантский зазор колонок в столбике не нужен */
  .calc-grid { gap: 24px; }

  /* кейсы: фото карточек ограничены по высоте (одна колонка на ≤480) */
  .case-photo { height: 200px; }
  .case-photo img { width: 100%; height: 100%; object-fit: cover; }

  /* контакт: секция без гигантских полей */
  .contact-section { padding: 44px 0; }

  /* ── тяжёлые сетки → горизонтальные свайп-ленты (scroll-snap):
       блок = высота одной карточки, листается вбок ── */
  .reviews-grid, .cases-grid, .blog-grid {
    display: flex; overflow-x: auto; gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px;
    padding: 0 16px 14px;
    scroll-padding-left: 16px;
    /* индикатор позиции — тонкая золотая полоса прокрутки (лента без индикатора
       читалась как обрыв, консилиум 2026-08-01) */
    scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream-dark);
  }
  .reviews-grid::-webkit-scrollbar, .cases-grid::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar { height: 3px; }
  .reviews-grid::-webkit-scrollbar-thumb, .cases-grid::-webkit-scrollbar-thumb,
  .blog-grid::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
  .reviews-grid::-webkit-scrollbar-track, .cases-grid::-webkit-scrollbar-track,
  .blog-grid::-webkit-scrollbar-track { background: var(--cream-dark); }
  /* оборудование: коды комплектов (S / M / L / XL) в шапке аккордеона слипались с
     заголовком — на телефоне уходят второй строкой под заголовок, стрелка справа */
  .reviews-grid > *, .cases-grid > *,
  .blog-grid > * {
    flex: 0 0 84%; scroll-snap-align: start; min-width: 0;
  }
  /* в ленте кейсов показываем все карточки — свёртка и кнопка не нужны */
  .cases-collapsed .case-card:nth-child(n+7) { display: block; }
  .cases-collapsed .cases-all { display: flex; }
  .cases-all { min-height: 0; padding: 32px 20px; gap: 18px; }
  .cases-all-label { font-size: 1.5rem; }
  .cases-more-wrap { display: none !important; }
  /* шаг-«хвост» и элементы, тянувшиеся на всю сетку — обычные слайды */


  /* оборудование: карточки калькулятора и «что входит» компактнее */
  .guests-card, .result-card { padding: 16px 14px; }
  .includes-card { padding: 14px 16px; }
}

/* ── Кулисы при входе (ненавязчиво: раз за сессию; класс curtain-on ставит
     инлайн-скрипт в <head> ДО первой отрисовки; без JS и при reduced-motion
     не показываются вовсе; клики не перехватывают никогда) ── */
.curtain{ display: none; }
html.curtain-on .curtain{
  display: block; position: fixed; inset: 0; z-index: 4000;
  pointer-events: none;
  /* Половинки занавеса разъезжаются ЗА пределы экрана — без обрезки они
     растягивали документ вправо и давали горизонтальную прокрутку. */
  overflow: hidden;
  animation: curtain-gone 0s linear 1.3s forwards; /* после разъезда — visibility:hidden */
}
.curtain-half{
  position: absolute; top: 0; bottom: 0; width: 50%;
  /* театральный бордовый бархат: вертикальные складки (повторяющийся градиент)
     + затемнение к верху/низу для объёма ткани */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.03) 55%, rgba(0,0,0,0.32)),
    repeating-linear-gradient(90deg,
      #430a10 0, #611019 2.6%, #86202b 5.2%, #96313b 6.5%, #86202b 7.8%, #611019 10.4%, #430a10 13%);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
}
.curtain-left{ left: 0;  animation: curtain-left  1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
.curtain-right{ right: 0; animation: curtain-right 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
/* золотая тесьма по внутренним кромкам — как кайма занавеса */
.curtain-left::after,
.curtain-right::before{
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(90deg, #7d6428, #bf9d50 45%, #7d6428);
}
.curtain-left::after{ right: 0; }
.curtain-right::before{ left: 0; }
@keyframes curtain-left  { to { transform: translateX(-102%); } }
@keyframes curtain-right { to { transform: translateX(102%); } }
@keyframes curtain-gone  { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
html.curtain-on .curtain{ display: none; }
}


/* ============================================================
   ЭКРАН 2: «МОЙ ПОДХОД» (Босс 2026-09-19, ТЗ + референс EXAMPLE.png)

   Светлый редакционный разворот после тёмного первого экрана: фотография
   зала на всю секцию, по центру заголовочный блок, ниже три карточки,
   внизу две кнопки и мелкие подписи по краям.
   ⚠️ Фон — отдельная <picture class="adv-bg"> ПОД содержимым, а не
   background-image: так работают srcset и webp родного конвейера проекта.
============================================================ */
.advantages {
  /* Палитра экрана из ТЗ. Держим локально: это отдельный «разворот», и его
     золото чуть теплее общесайтового. */
  --adv-bg1:   #F8F5EF;
  --adv-bg2:   #F3EEE5;
  --adv-ink:   #181512;
  --adv-gold:  #A98239;
  --adv-gold2: #B38A46;
  --adv-line:  rgba(169, 130, 57, 0.30);
  /* Расстояние от края крайней карточки до края ЭКРАНА: поля .wrap (48px)
     плюс половина остатка, когда контейнер уже окна. По нему креатив первой
     карточки дотягивается до левого края экрана, третьей — до правого.
     ⚠️ ДЕЛИТЬ НА --site-zoom ОБЯЗАТЕЛЬНО (та же грабля, что у 100svh ниже).
     На мониторах шире 1920 секция отмасштабирована CSS zoom (wide.css), и
     внутри неё 100vw — это ширина экрана в НЕзумленных пикселях, которую
     браузер потом ещё умножит на zoom. Без деления вынос раздувался в zoom раз:
     на 2560×1080 — 600px вместо 280, на 3440×1440 — 1040px вместо 280, и кадр
     уезжал за край экрана на 1361px. Коробка картинки становилась 5.7:1 при
     самом кадре 0.8:1, object-fit: cover показывал тонкую полосу, увеличенную
     в шесть раз, — именно это Босс видел на 21:9 (21.09.2026). На экранах
     ≤1920px zoom = 1, и формула даёт прежние числа до пикселя. */
  --adv-wrap: 1456px;
  --adv-edge: max(48px, calc((100vw / var(--site-zoom, 1) - var(--adv-wrap)) / 2 + 48px));
  position: relative; isolation: isolate;
  padding: 64px 0;
  background: var(--adv-bg1);
  color: var(--adv-ink);
  overflow: hidden;
}
.adv-bg, .adv-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; z-index: -2; pointer-events: none;
}
/* Вуаль: фотография должна остаться светлой и НЕ спорить с текстом. */
.adv-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(248,245,239,0.92) 0%, rgba(248,245,239,0.62) 26%,
                             rgba(243,238,229,0.66) 74%, rgba(248,245,239,0.94) 100%);
}
.advantages .wrap { position: relative; width: 100%; max-width: 1456px; }

/* ── Заголовочный блок ───────────────────────────────────────────────────── */
.adv-head { text-align: center; max-width: 1000px; margin: 0 auto 18px; } /* ближе к карточкам (Босс) */
/* Надпись с волосяными линейками по бокам — как на референсе. */
.adv-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Jost', sans-serif; font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--adv-gold);
  margin-bottom: 6px; /* плотнее к заголовку (Босс 2026-09-19) */
}
.adv-eyebrow::before, .adv-eyebrow::after {
  content: ''; width: clamp(28px, 7vw, 92px); height: 1px; background: var(--adv-line);
}
.adv-heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: 0.005em;
  margin: 0 0 6px; color: var(--adv-ink); /* плотнее к подзаголовку (Босс) */
  text-wrap: balance;
}
.adv-tagline {
  margin: 0; font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: rgba(24,21,18,0.62);
  line-height: 1.7;
}

/* ── Подписи по краям (editorial-мелочи с референса) ─────────────────────── */
.adv-side, .adv-foot-note {
  font-family: 'Jost', sans-serif; font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(24,21,18,0.5);
  line-height: 2; white-space: pre-line;
}
/* ⚠️ Отступ от края обязателен: .wrap позиционируется своей ПАДДИНГ-коробкой,
   и left: 0 прижимает подпись вплотную к краю экрана — её срезает overflow секции. */
.adv-side { position: absolute; left: clamp(14px, 3vw, 48px); top: 4px; }
.adv-script {
  position: absolute; right: clamp(14px, 3vw, 48px); top: -2px;
  font-family: 'Marck Script', cursive; font-size: 1.1rem; line-height: 1.3;
  color: var(--adv-gold); max-width: 210px; text-align: right;
  transform: rotate(-5deg); transform-origin: 100% 50%;
}
/* Мелочи по краям прячем там, где места для них нет: они украшение, а не смысл. */
@media (max-width: 1279px) { .adv-side, .adv-script { display: none; } }

/* ── Карточки ────────────────────────────────────────────────────────────── */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.adv-item {
  display: flex; flex-direction: column;
  /* Не глухой белый прямоугольник: полупрозрачная слоновая кость поверх фото. */
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,245,239,0.78));
  border: 1px solid var(--adv-line);
  box-shadow: 0 10px 30px rgba(24, 21, 18, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.adv-text {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start;
  padding: clamp(16px, 1.6vw, 24px) clamp(14px, 1.5vw, 22px) clamp(12px, 1.2vw, 18px);
}
.adv-body { display: contents; }
.adv-num {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 0.9;
  color: var(--adv-gold); opacity: 0.75;
}
/* ⚠️ ОПИСАНИЯ КАРТОЧЕК НАЧИНАЮТСЯ НА ОДНОЙ ЛИНИИ (Босс 2026-09-23). Карточки —
   самостоятельные гриды, общей строки у них нет, поэтому место под заголовок
   резервируем: min-height в две строки.
   ⚠️ ЗАМЕР ПЕРЕНОСОВ (число строк заголовков 01/02/03 по ширине окна).
   Перемерен 2026-09-23 ПОСЛЕ увеличения кегля заголовков (1.2…1.56rem):
     1920, 1800  — 2/2/1
     1700, 1600  — 1/2/1
     1500…1366   — 1/1/1
     1280…1200   — 1/2/1
     1100, 1024  — 2/2/1
   ⚠️ Раньше на «ровном» участке резерв снимался медиазапросом, чтобы не было
   пустой строки под заголовком. С новым кеглем участок сжался до 1366…1500, и
   его границы плавают: на 1330 и 1560 линия описаний уже разъезжалась. Поэтому
   резерв теперь стоит ВСЕГДА — предсказуемость важнее пары лишних пикселей. */
.adv-title {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.2rem, 1.72vw, 1.56rem); line-height: 1.18; color: var(--adv-ink);
  min-height: 2.4em;
}
/* Босс 2026-09-23: «еле читается». Кегль 0.7 → 0.95rem (14 → 19px), тонкое
   начертание 300 → 400 и меньше прозрачности: на кремовой карточке 0.72 давали
   серую дымку. Межстрочный чуть сжат, чтобы блок не вырос по высоте. */
.adv-desc {
  grid-column: 2 / -1; margin: 10px 0 0;
  font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 400; line-height: 1.6;
  color: rgba(24,21,18,0.86);
}
/* Креатив занимает нижние ~55–60% карточки (ТЗ). Высота от окна, чтобы экран
   не растягивался на несколько прокруток.
   ⚠️ ГЛАВНОЕ ПРО КРЕАТИВЫ (Босс 2026-09-19: «они как бы часть карточки»).
   Рамка карточки — это ЛИНИЯ, а не коробка: предметы ВЫХОДЯТ за неё, как на
   референсе. Поэтому здесь overflow: visible, а картинка позиционируется
   абсолютно и шире карточки. Первая уходит влево, третья вправо — обе в поле
   страницы; вторая зажата соседями и остаётся внутри.
   Края кадра растворяются маской: иначе виден прямоугольник фотографии, и
   получается «шлёпнутая» картинка вместо предметов, стоящих на поверхности. */
.adv-media {
  position: relative; margin-top: auto;
  height: var(--adv-media-h, 240px);
  overflow: visible;
}
/* Растягиваем КОРОБКУ (picture), а картинку кладём в неё на 100%.
   ⚠️ Нельзя задавать это самой <img>: у заменяемого элемента height: auto
   берётся из его пропорции, а не из пары top/bottom, — картинка вырастала
   до 525px вместо 294 и наезжала на кнопки. */
.adv-media picture, .adv-media > img {
  position: absolute; top: -10px; bottom: -14px; display: block;
}
.adv-media img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  /* ⚠️ ТОЧКА КАДРИРОВАНИЯ СВОЯ У КАЖДОГО КРЕАТИВА (Босс 21.09.2026: «верхние
     световые приборы пропали из виду»). Кадры вертикальные (0.8), полоса
     горизонтальная — видно 46–51% высоты, и от процента зависит, что уцелеет.
     Замерено по самим кадрам, где лежит главное (доли высоты):
       01 ежедневник — разворот с таймингом 30–75%  → 55%
       02 оборудование — световые головы 19–29%, пульт 45–55%, кейс до 78% → 33%
       03 команда — саксофон/камера/наушники 15–42%, планшет «КОМАНДА» 45–80% → 26%
     Прежние общие 46% срезали световые приборы пополам и верх техники команды.
     ⚠️ Заменили креатив в редакторе — перемерьте проценты под новый кадр. */
  object-position: center var(--adv-pos, 46%);
  /* Кадр растворяется ВВЕРХ в карточку — это и даёт «часть карточки», а не
     наклеенное фото. Низ и та сторона, которой креатив уходит к краю экрана,
     НЕ гаснут: там кадр просто продолжается и обрезается краем секции. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Сторона выхода за рамку — как в референсе: первая наружу влево, третья
   вправо (обе в поле страницы), вторая зажата соседями и остаётся внутри. */
.adv-item:nth-child(1) .adv-media picture, .adv-item:nth-child(1) .adv-media > img {
  left: calc(-1 * var(--adv-edge)); right: 0;
}
.adv-item:nth-child(2) .adv-media picture, .adv-item:nth-child(2) .adv-media > img { left: 0; right: 0; }
/* свои точки кадрирования — см. памятку у object-position выше */
.adv-item:nth-child(1) .adv-media img { --adv-pos: 55%; }
.adv-item:nth-child(3) .adv-media img { --adv-pos: 26%; }
.adv-item:nth-child(3) .adv-media picture, .adv-item:nth-child(3) .adv-media > img {
  left: 0; right: calc(-1 * var(--adv-edge));
}
/* Средняя карточка внутри рамки: ей боковые края тоже гасим, иначе видно
   прямоугольник фотографии между соседями. */
.adv-item:nth-child(2) .adv-media img {
  --adv-pos: 33%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%),
  linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%),
  linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
@media (hover: hover) and (pointer: fine) {
  .adv-item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(24,21,18,0.10); border-color: var(--adv-gold2); }
  .adv-item:hover .adv-media img { transform: scale(1.02); }
}

/* ── Низ: подписи + кнопки ───────────────────────────────────────────────── */
.adv-foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; margin-top: clamp(34px, 5.5vh, 72px); /* кнопки ниже: креативы теперь крупные и доходят до края (Босс) */
}
.adv-foot-note:first-child { justify-self: start; }
.adv-foot-note:last-child { justify-self: end; text-align: right; }
/* Плавающий виджет мессенджеров прибит к правому краю ОКНА и накрывает правую
   подпись, пока контейнер почти упирается в край экрана. Виджета нет ниже 961px. */
@media (min-width: 961px) and (max-width: 1507px) {
  .adv-foot-note:last-child { padding-right: 68px; }
}
.adv-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* btn-hero-dark писан под тёмную полосу (белая рамка/текст) — здесь светлый фон:
   тёмная рамка, hover без заливки (заливка сделала бы её неотличимой от золотой). */
.adv-ctas .btn-hero-dark { border-color: rgba(24,21,18,0.35); color: var(--adv-ink); background: rgba(255,255,255,0.55); }
.adv-ctas .btn-hero-dark:hover { border-color: var(--adv-gold); color: var(--adv-gold); background: rgba(255,255,255,0.8); }

/* ── Появление ───────────────────────────────────────────────────────────── */
/* Класс-заготовку ставит v3.js, поэтому без JS блок просто виден. */
.adv-in-pre { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }
.adv-in-pre.adv-in { opacity: 1; transform: none; }
.adv-grid .adv-item.adv-in-pre { transform: translateY(18px); }
/* карточки — одна за другой слева направо */
.adv-grid .adv-item:nth-child(2).adv-in-pre { transition-delay: 0.12s; }
.adv-grid .adv-item:nth-child(3).adv-in-pre { transition-delay: 0.24s; }

@media (min-width: 961px) {
  /* Секция = «второй экран»: содержимое по центру высоты окна.
     /var(--site-zoom) — под CSS zoom (wide.css, ≥1921px) vh умножаются на zoom. */
  .advantages {
    min-height: calc((100svh - 64px) / var(--site-zoom, 1));
    display: flex; align-items: center; padding: 40px 0;
    /* Высота креатива берётся от окна и ограничена сверху: так экран остаётся
       одним экраном, а карточка держит пропорцию «текст сверху, фото снизу». */
    /* Высота креатива = окно минус всё остальное в секции (замерено: поля 80 +
       заголовочный блок ~150 + текст карточки ~157 + отступ и кнопки ~93).
       Так экран остаётся ОДНИМ экраном и кнопки не уходят под край — на
       1366×768 без этой формулы они вылезали на 109px. */
    --adv-media-h: clamp(190px, calc((100svh - 64px) / var(--site-zoom, 1) - 512px), 410px);
  }
}
@media (min-width: 1600px) { .advantages { --adv-media-h: clamp(210px, calc((100svh - 64px) / var(--site-zoom, 1) - 534px), 430px); } }

/* ── Мониторы шире 1920: БЕЗ выноса за рамку (Босс 21.09.2026) ──────────────
   «Может тогда так не растягивать на широких экранах — не делать, чтобы первый
   и третий были до краёв». Причина: секция здесь отмасштабирована CSS zoom, и
   вертикали остаётся вдвое меньше — на 2560×1080 полоса креатива 252px против
   454px на FHD. Кадр, растянутый ещё и до краёв экрана, давал коробку 2.84:1
   при самом кадре 0.8:1 — видно 28% высоты, «вытянутая сосиска».
   Без выноса: 1.73:1 и 46% — практически как на FHD (1.58:1 и 51%).
   ⚠️ Вместе с выносом ОБЯЗАТЕЛЬНО снимается односторонняя маска: кадру, который
   больше никуда не уходит, край внутри карточки надо гасить с обеих сторон —
   иначе виден прямоугольник фотографии (та же причина, что у средней карточки).
   Вернуть вынос на широких — удалить этот блок целиком. */
@media (min-width: 1921px) {
  .advantages { --adv-edge: 0px; }
  .adv-item:nth-child(1) .adv-media img,
  .adv-item:nth-child(3) .adv-media img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%),
                        linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%),
                linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ── Планшет: 2 + 1 по центру ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .advantages { padding: 52px 0; --adv-media-h: 260px; }
  /* Выход креатива за рамку снимаем: карточка тут во всю ширину колонки, и
     «за рамку» означало бы за край экрана — предмет просто срезало бы. */
  .adv-item:nth-child(1) .adv-media picture, .adv-item:nth-child(1) .adv-media > img,
  .adv-item:nth-child(3) .adv-media picture, .adv-item:nth-child(3) .adv-media > img { left: 0; right: 0; }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  /* третья карточка — по центру под первыми двумя (ТЗ) */
  .adv-item:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 15px); justify-self: center; }
  .adv-foot { grid-template-columns: 1fr; justify-items: center; }
  .adv-foot-note { display: none; }
}

/* ── Телефон: карточки одна под другой ───────────────────────────────────── */
@media (max-width: 640px) {
  .advantages { padding: 44px 0; --adv-media-h: 230px; }
  .adv-grid { grid-template-columns: 1fr; gap: 16px; }
  .adv-item:nth-child(3) { grid-column: auto; max-width: none; }
  .adv-head { margin-bottom: 26px; }
  .adv-tagline { font-size: 0.56rem; letter-spacing: 0.16em; }
  .adv-ctas { flex-direction: column; width: 100%; }
  .adv-ctas a { width: 100%; }
  /* фон ещё менее контрастный (ТЗ) */
  .adv-veil { background: linear-gradient(180deg, rgba(248,245,239,0.95), rgba(243,238,229,0.88)); }
}
@media (prefers-reduced-motion: reduce) {
  .adv-item, .adv-media img, .adv-in-pre { transition: none; }
  .adv-item:hover { transform: none; }
  .adv-item:hover .adv-media img { transform: none; }
}

/* Появление карточек, раскрытых кнопкой «Ещё» (кейсы, FAQ и др. — v3.js). Имя осталось от карточек
   форматов, класс общий. */
.format-card-reveal{ animation: card-in 0.5s ease backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .format-card-reveal { animation: none; } }


/* ============================================================
   УТИЛИТЫ вместо инлайн-атрибутов style (CSP без 'unsafe-inline', 2026-09-05)
   Именование: u-<свойство>-<значение>; логотипы «Мне доверяют» — высота через --h
============================================================ */
.u-mt-16 { margin-top: 16px; }
.u-mb-0{ margin-bottom: 0; } .u-mb-10 { margin-bottom: 10px; } .u-mb-12 { margin-bottom: 12px; } .u-mb-14 { margin-bottom: 14px; }

.u-text-soft-sm{ font-size: 0.85rem; color: var(--soft); line-height: 1.75; }
/* Поля, где переводы строк из редактора значимы (описание комплектов света): без этого HTML
   схлопывает \n в пробел и абзац, сохранённый в content.json, на странице не виден. */
.u-pre-line{ white-space: pre-line; }
.u-gold-text{ color: var(--gold-text); }
.u-no-border{ border-bottom: none; }
.u-full-center{ width: 100%; justify-content: center; }
.logo-h-60{ --h: 60; } .logo-h-52 { --h: 52; } .logo-h-40 { --h: 40; } .logo-h-34 { --h: 34; } .logo-h-28 { --h: 28; } .logo-h-26 { --h: 26; } .logo-h-20 { --h: 20; } .logo-h-12 { --h: 12; }

/* ============================================================
   АРХИВ МЕРОПРИЯТИЙ /events (views/events.ejs, Босс 2026-09-17)
   Карточки — те же .case-card, что в кейсах главной (лайтбокс и листание фото из v3.js).
   Сетка своя: на ≤640 одна колонка, а не горизонтальная лента, как у кейсов главной.
============================================================ */
.ev-h1{ font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.1; margin: 6px 0 18px; }
.ev-lead{ max-width: 640px; color: var(--mid); font-size: 0.95rem; line-height: 1.75; }
.ev-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.ev-filter-btn{
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border-gold); border-radius: 2px;
  background: transparent; color: var(--mid); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ev-filter-btn:hover{ border-color: var(--gold); color: var(--dark); }
.ev-filter-btn[aria-pressed="true"]{ background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.ev-filter-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.ev-filter-count{ font-size: 11px; letter-spacing: 0; opacity: 0.75; }
.events-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
/* .case-card{ display:flex } перебивает UA-правило [hidden] — фильтр прячет карточки атрибутом */
.events-grid .case-card[hidden]{ display: none; }
.ev-empty{ margin-top: 32px; color: var(--soft); font-size: 0.95rem; }
.ev-cta{ margin-top: 56px; text-align: center; }
/* Пустое событие — ни фото, ни видео, которое играет браузер (Босс 2026-09-17: «пускай будут без фото»):
   вместо обложки заглушка «Фото скоро» (или «Есть видео», если ролики только в .mov и подобных).
   Событие с одними роликами сюда не относится — у него обычная карточка с постером, см. «Видео-событие» ниже.
   Высоту держит сам .case-photo (280px, на ≤480 — 200px), поэтому ряд сетки не прыгает.
   Кремовая плита с тонким золотым паспарту и круглым значком — как плитка .cases-all главной.
   У карточки нет data-gallery: v3.js не вешает лайтбокс и листание, курсор обычный (.case-card[data-gallery]
   { cursor: pointer }); фон при наведении не меняется, чтобы карточка не притворялась кнопкой. */
.case-card-nophoto:hover{ background: var(--white); }
.case-nophoto{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--cream);
}
.case-nophoto::before{
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 0.5px solid var(--border-gold);
}
.case-nophoto-icon{
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-text);
}
.case-nophoto-icon svg{ display: block; }
.case-nophoto-label{
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
}
/* Видео-событие (фото нет, есть ролики; Босс 2026-09-17: «там, где только видео, была возможность это видео
   посмотреть»): обычная карточка с data-gallery — лайтбокс играет ролики. Обложка — постер первого ролика,
   поверх — круглая кнопка play (кремовая, золотая рамка и значок, как у заглушек; при наведении — золотая)
   и метка «Видео» / «N видео». Постера нет — кремовая плита с паспарту, как у заглушки.
   Та же метка (без кнопки play) — на фото-карточке события с фото и роликами: в галерее после фото идут ролики
   (Босс 2026-09-17 «ДА ДОБАВЬ ТУДА»). */
.case-video-noposter{ background: var(--cream); }
.case-video-noposter::before{
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  border: 0.5px solid var(--border-gold);
}
.case-video-play{
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(245,243,238,0.94); border: 1px solid var(--gold); color: var(--gold-text);
  box-shadow: 0 6px 22px rgba(28,26,22,0.28); pointer-events: none;
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
}
.case-video-noposter .case-video-play{ box-shadow: none; }
.case-video-play svg{ display: block; margin-left: 3px; } /* треугольник визуально по центру круга */
.case-card-video:hover .case-video-play,
.case-card-video:focus-visible .case-video-play{ background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; transform: scale(1.06); }
.case-video-badge{
  position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px; background: rgba(245,243,238,0.94); color: var(--gold-text); border-radius: 2px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  pointer-events: none;
}
.case-video-badge svg{ display: block; flex-shrink: 0; }
@media (max-width: 960px) {
.events-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.ev-lead{ font-size: 0.9rem; line-height: 1.65; }
/* кнопки форматов — одной строкой с прокруткой вбок: 18 кнопок в перенос съели бы экран до карточек */
  .ev-filter{
    flex-wrap: nowrap; overflow-x: auto; margin: 24px -16px 0; padding: 0 16px 10px; scroll-padding-left: 16px;
    scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream-dark);
  }
.ev-filter::-webkit-scrollbar{ height: 3px; }
.ev-filter::-webkit-scrollbar-thumb{ background: var(--gold); border-radius: 2px; }
.ev-filter::-webkit-scrollbar-track{ background: var(--cream-dark); }
.ev-filter-btn{ flex: 0 0 auto; }
.events-grid{ grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.ev-cta{ margin-top: 40px; }
}

/* ============================================================
   КАК МЫ РАБОТАЕМ — МАРШРУТ (Босс 2026-09-21, ТЗ + референс Screen_07_How)

   Было: сетка из пяти одинаковых карточек — «ощущение Excel-таблицы».
   Стало: золотая линия-маршрут через этапы 01–04 (при прокрутке рисуется,
   карточки выходят одна за другой) и 05 отдельным финальным блоком во всю
   ширину с фотографией зала.
   ⚠️ Линия горизонтальная только когда этапы стоят в РЯД (≥1200px). На двух
   колонках линии нет (она бы резала сетку пополам), на телефоне она
   вертикальная и идёт вдоль номеров — маршрут читается сверху вниз.
============================================================ */
/* ⚠️ РЯД ШИРЕ ОБЩЕГО КОНТЕЙНЕРА (Босс 21.09.2026: «шаги 01 02 03 04 как-то мелко,
   карточки надо их увеличить в масштабе»). Общий .wrap — 1160px, и на четыре
   колонки каждая карточка выходила 245px: мокап в ней читался как марка. Здесь
   контейнер 1456px (как у экрана 2), карточка становится ~320px — на треть
   крупнее, а вместе с ней подняты кегли номера, заголовка и текста.
   Заголовочный блок при этом остаётся узким: строка в 1360px не читается. */
/* ⚠️ Контейнер 1456px нужен ОБОИМ контейнерам блока: ряду карточек и финалу.
   Финал лежит отдельным блоком (он во всю ширину), и правило для прямого
   потомка .how его не ловило — внутренний .wrap оставался общим 1160px.
   Из-за этого текст финала не совпадал по левому краю с карточками, а дорожка
   кнопок на 2560 недобирала 10px, и кнопки вставали в столбик. */
/* 1600 вместо 1456: карточки этапов стали шире после снятия подводки
   (Босс 2026-09-23 «увеличь карточки 01 02 03 04»). Карточка 319 → 355px. */
.how > .wrap,
.how-final .wrap{ max-width: 1600px; }
/* Финальный блок — последний в секции и доходит до её низа: собственный отступ
   секции оставил бы под фотографией пустую кремовую полосу в 56px. */
/* --how-vw: ширина окна БЕЗ учёта масштаба страницы — иначе на зуме кегль
   заголовка уезжает (та же ловушка, что на других экранах). */
.how{ padding-bottom: 0; --how-vw: calc(100vw / var(--site-zoom, 1)); }
.how .wrap{ position: relative; }
/* Шапка: надстрочник у левого края с чертой перед ним («—— КАК МЫ РАБОТАЕМ»),
   заголовок по центру и жирный, подводка снята (Босс 2026-09-23). */
.how-head{
  text-align: center; max-width: none; margin: 0 auto 4px; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
/* заголовок с рукописной пометкой: ширина по тексту, поэтому пометка висит
   у самого заголовка, а не у края секции */
.how-title{ position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.how-head .label{
  align-self: flex-start; display: flex; align-items: center; gap: 14px;
  margin-bottom: 0;
}
.how-head .label::before{
  content: ''; width: clamp(48px, 5vw, 110px); height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.55));
}
/* −10px: заголовок подтянут к надстрочнику (Босс: «чуть поднимаешь») */
/* Кегль и начертание — как у заголовка экрана «Мне доверяют» (.cl-heading,
   Босс 2026-09-23: «сделай форматирование как у …»): тот же clamp, та же
   плотность строки и тот же приём с золотым словом в *звёздочках*. */
.how-head h2{
  margin: -10px 0 14px; font-weight: 600; color: var(--dark);
  font-size: clamp(1.6rem, calc(var(--how-vw) * 0.026), 3.2rem); line-height: 1.05;
}
.how-heading-gold{ color: var(--gold-btn, #8d6f2d); }
/* Подводка «Вы рассказываете…» снята по просьбе Босса; текст жив в how.lead.
   Вернуть — убрать это правило. Освободившееся место отдано карточкам. */
.how-lead{ display: none; }
/* Рукописная пометка у заголовка — как на референсе. Прячем там, где тесно. */
.how-script{
  /* привязка к правому краю ЗАГОЛОВКА (.how-title по ширине текста):
     right: -40px отсчитывался бы от узкой обёртки и пометка наезжала бы на
     сам заголовок — поэтому ставим её сразу за ним */
  position: absolute; left: 100%; right: auto; margin-left: 14px; top: 6px;
  font-family: 'Marck Script', cursive; font-size: 1.05rem; line-height: 1.3;
  color: var(--gold); width: max-content; max-width: none; text-align: left; white-space: pre-line;   /* ровно две строки — перенос в тексте (2026-09-26); без max-content абсолютный блок у края сжимался до слова в строке */
  transform: rotate(-4deg); transform-origin: 0 50%;
}
@media (max-width: 1279px){ .how-script{ display: none; } }

/* ── Маршрут ──────────────────────────────────────────────────────────────── */
/* ⚠️ СВЯЗКИ МЕЖДУ ШАГАМИ, А НЕ ОДНА ОБЩАЯ ЧЕРТА (Босс 21.09.2026: «там линии
   между шагами 1 2 3 4 идут, а ты сделал 1 линию над ними»). На референсе
   у каждого номера своя точка, и от неё отрезок тянется до следующего номера:
       01 •———— 02 •———— 03 •———— 04 •————
   Поэтому отрезок принадлежит СВОЕМУ шагу: он и рисуется вместе с ним, и
   маршрут собирается по участку за раз, а не одной чертой поверху. */
/* ⚠️ Отступ до маршрута маленький НАРОЧНО: между подзаголовком и кадрами стоит
   ещё строка номера (94px высотой), и вместе с прежними 54px зазор доходил до
   166px — Босс справедливо назвал его огромным. Меняете кегль номера —
   пересчитайте и эти два отступа. */
.how-route{ position: relative; margin-top: 22px; }

.how-steps{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.how-step{
  position: relative; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ⚠️ Хореография замедлена (Босс 2026-09-26: «сделай больше задержку при появлении шагов, чтобы это было грациозно»):
   шаги через 0.45с (было 0.12с), сами проявляются дольше; точки, связки и галочки сдвинуты в тот же такт —
   весь маршрут собирается примерно за 3 секунды. Было: git show a73675a -- public/css/v3.css */
.how-route.is-in .how-step{ opacity: 1; transform: none; }
.how-route.is-in .how-step:nth-child(2){ transition-delay: 0.45s; }
.how-route.is-in .how-step:nth-child(3){ transition-delay: 0.9s; }
.how-route.is-in .how-step:nth-child(4){ transition-delay: 1.35s; }

/* Строка маршрута: крупный призрачный номер, золотая точка и отрезок. */
.how-step-head{ display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.how-step-num{
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 5.1rem; line-height: 1; color: var(--gold);
  opacity: 0.34;
}
.how-step-dot{
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); margin-bottom: 0.22em;
  opacity: 0; transform: scale(0.3);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1.3);
}
/* ⚠️ Отрицательный правый отступ РАВЕН зазору сетки: иначе отрезок обрывался бы
   на краю своей колонки и до следующего номера не доходил. */
.how-step-link{
  flex: 1 1 auto; height: 1px; background: var(--gold); opacity: 0.55;
  margin: 0 -28px 0.22em 0;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* У последнего шага отрезок упирается в край контейнера, а не лезет за него. */
.how-step:last-child .how-step-link{ margin-right: 0; }
.how-route.is-in .how-step-dot{ opacity: 1; transform: none; }
.how-route.is-in .how-step-link{ transform: scaleX(1); }
/* Точка загорается чуть раньше своего отрезка — «дошли до этапа и пошли дальше». */
.how-route.is-in .how-step:nth-child(1) .how-step-dot{ transition-delay: 0.3s; }
.how-route.is-in .how-step:nth-child(1) .how-step-link{ transition-delay: 0.5s; }
.how-route.is-in .how-step:nth-child(2) .how-step-dot{ transition-delay: 0.75s; }
.how-route.is-in .how-step:nth-child(2) .how-step-link{ transition-delay: 0.95s; }
.how-route.is-in .how-step:nth-child(3) .how-step-dot{ transition-delay: 1.2s; }
.how-route.is-in .how-step:nth-child(3) .how-step-link{ transition-delay: 1.4s; }
.how-route.is-in .how-step:nth-child(4) .how-step-dot{ transition-delay: 1.65s; }
.how-route.is-in .how-step:nth-child(4) .how-step-link{ transition-delay: 1.85s; }

.how-card{ display: flex; flex-direction: column; flex: 1 1 auto; }
.how-card-media{
  position: relative; overflow: hidden; border-radius: 2px;
  box-shadow: 0 10px 26px rgba(24, 21, 18, 0.1);
}
.how-card-media img{ display: block; width: 100%; height: auto; }
/* Золотой знак этапа наезжает на угол кадра — связывает картинку с текстом. */
.how-card-icon{
  position: relative; z-index: 1; margin: -26px 0 14px 18px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-btn, #9a7a32); color: var(--white, #fff);
  box-shadow: 0 6px 16px rgba(24, 21, 18, 0.22);
}
.how-card-title{
  margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1.16; color: var(--dark);   /* 1.6 → 1.5 (2026-09-26): «должно случиться почти всё.» не влезало в строку */
  white-space: pre-line;   /* заголовок этапа в две строки — перенос \n в тексте (Босс 2026-09-26) */
}
/* описание — несколько абзацев (пустая строка в тексте); между ними 10px, после последнего — 16px */
.how-card-desc{
  margin: 0 0 10px; font-family: 'Jost', sans-serif; font-size: 0.88rem;
  font-weight: 400; line-height: 1.7; color: var(--mid);
}
/* ⚠️ Акцентная строка прижата к низу, а её волосяная черта — на одной высоте у
   всех карточек ряда. Одного `margin-top: auto` мало: у коротких строк (одна
   строка против двух) черта уезжала на 20px ниже соседних. min-height в две
   строки выравнивает их по верху, оставляя низ на месте. */
.how-card-desc:not(:has(+ .how-card-desc)){ margin-bottom: 16px; }
.how-card-accent{
  margin: auto 0 0; padding-top: 14px; min-height: calc(1.6em * 2 + 14px);
  border-top: 1px solid var(--border-gold, rgba(154, 122, 50, 0.3));
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 400;
  line-height: 1.6; color: var(--gold-text, #7e6326);
}

/* ── Чипы третьего этапа ──────────────────────────────────────────────────── */
.how-chips{
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.how-chip{
  padding: 6px 11px; border: 1px solid var(--border-gold, rgba(154, 122, 50, 0.3));
  border-radius: 2px;
  font-family: 'Jost', sans-serif; font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text, #7e6326);
}

/* ── Чек-лист четвёртого этапа ────────────────────────────────────────────── */
.how-checks{ list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.how-check{
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px;
  font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 400;
  line-height: 1.5; color: var(--dark);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.6s ease, transform 0.7s ease;
}
/* Галочки проявляются одна за другой — «проверено» на глазах. */
.how-route.is-in .how-check{ opacity: 1; transform: none; }
.how-route.is-in .how-check:nth-child(1){ transition-delay: 1.9s; }
.how-route.is-in .how-check:nth-child(2){ transition-delay: 2.08s; }
.how-route.is-in .how-check:nth-child(3){ transition-delay: 2.26s; }
.how-route.is-in .how-check:nth-child(4){ transition-delay: 2.44s; }
.how-route.is-in .how-check:nth-child(5){ transition-delay: 2.62s; }
.how-route.is-in .how-check:nth-child(6){ transition-delay: 2.8s; }
.how-check-mark{
  width: 20px; height: 20px; padding: 2px; border-radius: 50%;
  color: var(--white, #fff); background: var(--gold-btn, #9a7a32);
}

/* ── Финал 05 ─────────────────────────────────────────────────────────────── */
/* ⚠️ Блок во всю ширину и ВНЕ .wrap: фотография должна доходить до краёв экрана. */
.how-final{
  position: relative; isolation: isolate; overflow: hidden;
  /* нижнего отступа нет: блок теперь последний в секции и держит кнопки сам */
  margin: 64px 0 0; padding: clamp(48px, 7vh, 96px) 0;
  min-height: min(78vh, 780px); display: flex; align-items: center;
}
.how-final-bg, .how-final-bg img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: -2;
}
/* Молочная вуаль: фотография остаётся тёплой, но текст поверх читается. */
.how-final-veil{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(252,249,243,0.9) 0%, rgba(250,246,238,0.76) 38%,
                                      rgba(250,246,238,0.74) 66%, rgba(252,249,243,0.92) 100%);
}
/* ⚠️ Сетка финала двухрядная: сверху «05 | текст | пометка», снизу — кнопки и
   подпись В ТОЙ ЖЕ КОЛОНКЕ, что и текст. Так они читаются как продолжение
   обещания, а не как оторванный хвост секции (Босс 21.09.2026). */
/* ⚠️ Рукописная пометка ВЫНЕСЕНА ИЗ ПОТОКА сетки. Пока она была третьей
   колонкой, дорожка кнопок упиралась в её ширину: на 1440 две кнопки (365+427)
   ещё влезали, а на 2560 — уже нет, и они вставали в столбик. Пометка
   декоративная и на узких экранах всё равно скрыта, поэтому ей место в
   абсолютном слое, а сетка остаётся двухколоночной: номер и всё остальное. */
.how-final-inner{
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  grid-template-areas: "num body" ". foot";
  /* между рядами зазора нет — расстояние цитата → кнопка задаёт только margin-top у .how-final-foot
     (Босс 2026-09-26: «подними кнопку и подпись поближе к цитате, большой разрыв»; было до ~108px) */
  column-gap: clamp(24px, 4vw, 64px); row-gap: 0;
}
.how-final-body{ grid-area: body; }
.how-final-foot{ grid-area: foot; margin-top: clamp(22px, 2.6vh, 30px); }
.how-final-num{
  grid-area: num;
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(5rem, 11vw, 11.5rem); line-height: 0.82;
  color: var(--gold); opacity: 0.38;
}
.how-final-title{
  /* жирный — как заголовок шапки этого же экрана (Босс 2026-09-23) */
  margin: 0 0 16px; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.08; color: var(--dark);
  text-wrap: balance;
}
/* Подводка финального блока снята по просьбе Босса (2026-09-23). Текст жив в
   how.step5_desc — вернуть можно, убрав display: none. */
.how-final-desc{
  display: none;
  margin: 0; max-width: 620px;
  font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 300;
  line-height: 1.8; color: var(--mid);
}
/* Последняя фраза — ради неё весь блок: крупнее, с золотой кавычкой. */
.how-final-quote{
  /* ⚠️ Жирный КУРСИВ (Босс 2026-09-23). Начертание 1,600 добавлено в ссылку на
     шрифт в views/home.ejs и public/v3.html — без него браузер наклонял бы
     прямое начертание сам, и буквы выглядели бы кривовато. */
  position: relative; margin: 26px 0 0; padding-left: 30px; max-width: 640px;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.75rem); line-height: 1.32; color: var(--dark);
}
.how-final-quote::before{
  content: '«'; position: absolute; left: 0; top: -2px;
  font-size: 2.2em; line-height: 0.8; color: var(--gold); opacity: 0.6;
}
.how-final-script{
  grid-area: script;
  /* top в % от высоты сетки финала: после сжатия зазора (2026-09-26) при 18% пометка поднялась на заголовок */
  position: absolute; right: 0; top: 36%;
  font-family: 'Marck Script', cursive; font-size: 1.1rem; line-height: 1.35;
  color: var(--gold); max-width: none; width: max-content; text-align: right; white-space: pre-line;   /* строки — переносами в тексте (Босс 2026-09-26: «Лучшие моменты / не контролируют. / Их проживают.») */
  transform: rotate(-4deg);
}
@media (max-width: 1099px){ .how-final-script{ display: none; } }

/* ── Низ блока ────────────────────────────────────────────────────────────── */
/* Кнопки выровнены по левому краю текста финала, а не по центру полосы. */
.how-ctas{ display: flex; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
/* Подпись под кнопкой — крупнее, жирным курсивом (Босс 2026-09-25; была мелкая капсом Jost 0.52rem):
   тот же Cormorant italic, что у цитаты шага 5, только жирнее */
.how-footnote{
  margin: 18px 0 0;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 1.1rem; line-height: 1.3; letter-spacing: 0.01em; color: rgba(24, 21, 18, 0.82);
}

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 1199px){
  /* Две колонки: связки работают как были — 01→02 в первом ряду, 03→04 во втором.
     Зазор сетки другой, значит и вылет отрезка за колонку тоже. */
  .how-steps{ grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .how-step-link{ margin-right: -26px; }
  .how-step:nth-child(2n) .how-step-link{ margin-right: 0; }
  .how-final-body{ max-width: none; }
}
@media (max-width: 700px){
  .how-steps{ grid-template-columns: 1fr; gap: 30px; }
  /* На телефоне маршрут вертикальный: номер с точкой слева, а отрезок от точки
     уходит ВНИЗ к следующему шагу (через зазор сетки — отсюда bottom: -30px). */
  .how-step{ padding-left: 68px; }
  /* Шапка перестаёт быть строкой: номер, точка и отрезок встают по месту сами,
     считая координаты от самого шага (он position: relative). */
  .how-step-head{ display: block; margin: 0; }
  .how-step-num{ position: absolute; left: 26px; top: -4px; font-size: 2.1rem; }
  .how-step-dot{ position: absolute; left: 4px; top: 12px; margin: 0; }
  .how-step-link{
    position: absolute; left: 8px; top: 28px; bottom: -30px; width: 1px; height: auto;
    margin: 0; flex: none;
    transform: scaleY(0); transform-origin: 50% 0;
  }
  .how-route.is-in .how-step-link{ transform: scaleY(1); }
  .how-step:last-child .how-step-link{ display: none; }   /* последнему вести некуда */
  .how-final{ margin: 48px 0 44px; min-height: 0; padding: 44px 0; }
  .how-final-inner{ grid-template-columns: 1fr; grid-template-areas: "num" "body" "foot"; gap: 14px; }
  .how-final-num{ font-size: 4.2rem; }
  .how-final-foot{ margin-top: 22px; }
  .how-ctas{ flex-direction: column; }
  .how-ctas .btn{ width: 100%; }
  .how-footnote{ text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .how-step, .how-check, .how-step-dot, .how-step-link{
    transition: none;
    opacity: 1; transform: none;
  }
  .how-step-link{ opacity: 0.55; }
}

/* ============================================================
   ЭКРАН «СВЯЗАТЬСЯ» (Босс 2026-09-21, ТЗ + референс Screen_12_Contact)

   Слева Феликс в кресле на террасе со столиком переднего плана, по центру
   текст с контактами, справа кремовая карточка формы.

   ⚠️ СЦЕНА СЛЕВА — ЗАПЕЧЁННЫЙ КАДР, А НЕ СЛОИ (решение Босса 21.09.2026,
   вечер). До этого секция складывалась в CSS из трёх файлов (фон, вырезка
   Феликса, передний декор), а композиция считалась формулами: размер столика
   от кресла, посадка за кромку, тень-эллипс на полу. Босс собрал то же самое
   руками и отдал одним изображением. Слои .cs-figure / .cs-decor / .cs-shadow
   и все их переменные убраны. Вернуть: git show 2a1d410.

   ⚠️ Следствие запекания: картинка НЕ подстраивается под пропорции секции.
   Отсюда два правила ниже, оба обязательные:
     1) object-position: left — при обрезке режется правый край (море),
        Феликс и столик остаются в кадре при любой высоте секции;
     2) ниже 1700px секция перестраивается ВЕРТИКАЛЬНО. Причина считается:
        занятая Феликсом зона — 40% ширины кадра, а кадр при узкой секции
        масштабируется по ВЫСОТЕ, и эти 40% превращаются в 52% ширины экрана
        (замер на 1440). Текст туда уже не помещается.
   ⚠️ Внутренности формы (.lf-*) остались прежними: карточка только переодета.
============================================================ */
.cs{
  --cs-pad: clamp(44px, 6.5vh, 92px);
  /* ⚠️ ТА ЖЕ ГРАБЛЯ, ЧТО У ЭКРАНА 2: на мониторах шире 1920 секция
     отмасштабирована CSS zoom (wide.css), и 100vw внутри неё — ширина экрана
     в НЕзумленных пикселях. Без деления формула отступа считает вдвое шире. */
  --cs-vw: calc(100vw / var(--site-zoom, 1));
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--cs-pad) 0 0;
  background: var(--cream);
  display: flex; align-items: center;
}
/* Кадр во всю секцию. ⚠️ object-position: left — не украшение, см. шапку. */
.cs-bg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center; display: block; z-index: 0;
}
/* Вуаль: слева почти прозрачная — там Феликс, и его лицо ничем не затянуто
   (прямое требование Босса). Плотнеет там, где начинается текст, и держит
   карточку. Осветление кремовым, а не затемнение: «грязи» в кадре нет. */
.cs-veil{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(247,243,236,0.04) 0%,
    rgba(247,243,236,0.07) 36%,
    rgba(247,243,236,0.46) 50%,
    rgba(247,243,236,0.88) 70%,
    rgba(247,243,236,0.96) 100%);
}

/* ── Раскладка ────────────────────────────────────────────────────────────── */
/* Текст начинается там, где кончается сцена. Формула — не магическое число:
      занятая зона кадра = 0.40 его ширины (замерено по сетке на FON3);
      ширина кадра на экране = max(ширина секции, высота × 16/9).
   Широкие экраны упираются в первое слагаемое, узкие — в пол 820px.
   ⚠️ Пол нужен потому, что высоту секции CSS не знает: её задаёт карточка
   формы, и на 1600×900 секция оказывается выше, чем на 1600×1000 — кадр
   тянется по высоте до 1867px, и Феликс дотягивается до 747px. С полом 730
   текст наезжал на него на 17px (замер). 820 держит запас на такие случаи. */
.cs > .wrap{
  max-width: none;
  padding-left: max(820px, calc(var(--cs-vw) * 0.4 + 60px));
  padding-right: clamp(24px, calc(var(--cs-vw) * 0.045), 124px);
}
.cs-inner{
  position: relative; z-index: 4; width: 100%;
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: center; column-gap: clamp(20px, calc(var(--cs-vw) * 0.027), 52px);
}

/* ── Текстовая колонка ────────────────────────────────────────────────────── */
/* ⚠️ КОЛОНКА ЛЕЖИТ НА ФОТОГРАФИИ, и одной общей вуали ей мало. Замер контраста
   на 1920 до правки: лид и подписи контактов 3.7:1, роль золотом 2.2:1,
   подпись у автографа 2.4:1 — при норме 4.5:1 для такого кегля. Причина не
   только в вуали: за колонкой проходит самый пёстрый кусок кадра (город и
   море), и яркость под строкой скачет от края к краю.
   Лечится двумя вещами сразу, одной мало:
     1) собственная подложка под колонкой (ниже) — она РОВНАЯ, в отличие от
        общей вуали, которая слева от текста вдвое слабее, чем справа;
     2) укрупнение мелкого кегля (лид, роль, подписи) — 10-12px тонким
        начертанием не спасает никакая подложка.
   ⚠️ ПОДЛОЖКА — ЛИСТ БУМАГИ: НЕПРОЗРАЧНЫЙ ПРЯМОУГОЛЬНИК С ЧЁТКИМИ КРОМКАМИ.
   Это выбор Босса 21.09.2026, и он сделан ПОСЛЕ двух отвергнутых попыток:
     • полоса во всю высоту секции — кромок не видно, но она осветляет всю
       правую половину кадра: «ты фотку закрыл белизной»;
     • та же плашка с растушёванными краями — «было всё хорошо, пока ты
       контур не размыл, верни прямоугольник с явными границами».
   ⚠️ НЕ РАСТУШЁВЫВАТЬ КРАЙ. Мягкая кромка тут выглядит не «деликатнее», а
   грязнее: кадр за ней пёстрый, и полупрозрачный край читается как муть.
   Чёткая граница честнее — лист лежит на фотографии.
   Плашка кончается выше низа и ниже верха секции, поэтому кадр сверху и
   снизу остаётся живым; вылезает за колонку на поля, чтобы текст не упирался
   в кромку. Фактура бумаги — двумя слоями ниже. */
.cs-text{
  grid-column: 1;
  position: relative; padding: 28px 0 var(--cs-pad);
}
.cs-text::before{
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -58px; right: -92px; top: -26px; bottom: -6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23g%29' opacity='0.22'/%3E%3C/svg%3E") repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='2' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23f%29' opacity='0.13'/%3E%3C/svg%3E") repeat,
    rgb(248, 246, 241);
  background-size: 180px 180px, 300px 300px, auto;
}
/* ⚠️ Фактура бумаги: зерно и волокна рисует САМ БРАУЗЕР (SVG feTurbulence в
   data-URI), файла нет и грузить нечего. CSP это пускает: img-src 'self' data:.
   Два слоя, потому что одним бумага не получается: мелкое зерно даёт «цифровой
   шум», а бумагу узнаёшь по длинным волокнам — их даёт вторая турбулентность,
   вытянутая по одной оси. stitchTiles='stitch' — плитки сходятся без швов.
   ⚠️ Внутри SVG НЕТ белой подложки — картинка сама полупрозрачная и ложится
   прямо на кремовый цвет. С белой подложкой пришлось бы звать
   background-blend-mode: multiply, а это лишняя зависимость ради того же вида. */
.cs-label{ display: inline-flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cs-label::before{ content: ''; width: 38px; height: 1px; background: var(--border-gold, rgba(154,122,50,0.5)); }
.cs-heading{
  margin: 0 0 18px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.04; color: var(--dark);
}
.cs-heading em{ display: block; font-style: normal; color: var(--gold-text, #7e6326); }
/* ⚠️ Кегль и начертание подняты против остального сайта осознанно: здесь текст
   на фотографии, а не на кремовом фоне (замер контраста — см. .cs-text). */
.cs-lead{
  margin: 0 0 26px; max-width: 370px;
  font-family: 'Jost', sans-serif; font-size: 0.84rem; font-weight: 400;
  line-height: 1.75; color: #3b3833;
}
.cs-name{
  margin: 0 0 4px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.62rem; line-height: 1.1; color: var(--dark);
}
.cs-role{
  margin: 0 0 24px;
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b541f;
}
.cs-contacts{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.cs-contact{
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
/* Кружки почти непрозрачные: на 0.72 сквозь них просвечивал город, и знаки
   читались мутно — на кремовом фоне подстраниц эта же прозрачность была незаметна. */
.cs-contact-icon{
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(154, 122, 50, 0.4);
  box-shadow: 0 5px 16px rgba(24, 21, 18, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-contact-icon img{ display: block; width: 25px; height: 25px; }
.cs-contact-text{ display: flex; flex-direction: column; gap: 2px; }
.cs-contact-text b{
  font-family: 'Jost', sans-serif; font-size: 0.92rem; font-weight: 500;
  color: var(--dark); letter-spacing: 0.01em;
}
.cs-contact-text i{
  font-style: normal; font-family: 'Jost', sans-serif; font-size: 0.68rem;
  font-weight: 400; color: #4f4a43;
}
/* «Обычно отвечаю в течение часа» — в строке один только этот текст, без
   названия сверху, поэтому мелкий кегль подписи тут не годится. */
.cs-contact--static .cs-contact-text i{ font-size: 0.78rem; color: #3b3833; }
@media (hover: hover) and (pointer: fine){
  a.cs-contact:hover .cs-contact-icon{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24,21,18,0.16); }
}
.cs-sign{ display: flex; align-items: center; gap: 18px; }
.cs-sign-name{
  font-family: 'Marck Script', cursive; font-size: 1.85rem; line-height: 1;
  color: var(--gold-text, #7e6326);
}
.cs-sign-note{
  padding-left: 18px; border-left: 1px solid rgba(154,122,50,0.45);
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(24,21,18,0.78);
  line-height: 1.85; white-space: pre-line;
}

/* ── Карточка формы ───────────────────────────────────────────────────────── */
/* ⚠️ НАЙДЕННЫЙ БАГ (2026-09-21): блок «заявка принята» на главной ничем не
   скрывался — правило display:none жило только в инлайновых стилях подстраниц
   форматов. На прежней вёрстке он терялся в хвосте карточки, а на новом экране
   стал виден сразу. Скрипт показывает его сам (style.display = 'block'). */
.contact-form .form-success{ display: none; }

.cs-card{
  grid-column: 2;
  padding: var(--cs-pad) 0;
}
.cs .contact-form{
  background: rgba(250, 247, 241, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(24, 21, 18, 0.22);
  padding: 30px 30px 26px;
}
/* Карточку поджимаем ТОЛЬКО на этом экране: общие .lf-* делят её с формами
   подстраниц форматов, там своя ширина и трогать их нельзя. */
.cs #lead-form{ gap: 11px; }
.cs .lf-lbl{ font-size: 0.58rem; letter-spacing: 0.11em; }
/* в узкой карточке «Связаться» список и поле компактнее */
.cs .lf-select select{ padding: 10px 38px 10px 14px; font-size: 0.86rem; }
.cs .lf-other{ font-size: 0.86rem; }
.cs .lf-submit{ margin-top: 4px; }
.cs-card-head{ margin-bottom: 14px; }
.cs-card-head .lf-title{ font-size: 1.62rem; margin: 0 0 6px; }
.cs-card-sub{
  margin: 0; font-family: 'Jost', sans-serif; font-size: 0.66rem;
  font-weight: 300; line-height: 1.7; color: var(--mid);
}
/* Подпись под кнопкой — с волосяными линейками по бокам, как на референсе. */
.cs-card-foot{
  display: flex; align-items: center; gap: 14px; margin: 16px 0 0;
  font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 300;
  color: var(--mid); white-space: nowrap;
}
.cs-card-foot::before, .cs-card-foot::after{
  content: ''; flex: 1 1 auto; height: 1px; background: var(--border-gold, rgba(154,122,50,0.3));
}

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
/* ⚠️ НИЖЕ 1440 — ВЕРТИКАЛЬНАЯ ПЕРЕСТРОЙКА, и это не вкус, а арифметика.
   ⚠️ Порог опущен с 1700 до 1440 (Босс 2026-09-24: «фон отдельным экраном
   становится»). Замер ширины карточки формы в наложении: 1699 → 454px,
   1600 → 399, 1500 → 343, 1440 → 310, 1366 → 269, 1300 → 232. До 1440
   форма ещё читается, ниже — поля сжимаются в нечитаемые огрызки, поэтому
   у «Связаться» порог выше, чем у остальных сцен (там 1280).
   Кадр запечён: занятая Феликсом зона — 40% ШИРИНЫ КАДРА. Пока секция шире
   своей высоты в 16/9 раз, кадр масштабируется по ширине и эти 40% остаются
   40% экрана. Но высоту секции задаёт карточка формы (~1030px на любой
   ширине), и уже на 1440 секция становится «высокой»: кадр тянется по высоте
   до 1868px, и 40% кадра = 52% экрана (замер). Текст и карточка в оставшееся
   не влезают — карточка сжималась до 320px.
   Поэтому ниже порога кадр выносится ОТДЕЛЬНОЙ ПОЛОСОЙ сверху (16/9, сцена
   видна целиком), а текст и форма идут под ней по кремовому фону. */
@media (max-width: 1439px){
  .cs{ display: block; padding: 0 0 var(--cs-pad); }
  .cs > picture{ display: block; }
  .cs-bg{
    position: static; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-position: left center;
  }
  /* Кадр стоит отдельно — осветлять под ним нечего. */
  .cs-veil{ display: none; }
  .cs > .wrap{
    padding-left: clamp(20px, calc(var(--cs-vw) * 0.045), 64px);
    padding-right: clamp(20px, calc(var(--cs-vw) * 0.045), 64px);
    max-width: 1456px; margin: 0 auto;
  }
  .cs-inner{ padding-top: var(--cs-pad); grid-template-columns: minmax(0, 1fr) minmax(340px, 46%); }
  .cs-text{ padding-top: 0; }
  /* Кадр отдельной полосой — текст лежит на кремовом, подложка не нужна. */
  .cs-text::before{ display: none; }
}
@media (max-width: 760px){
  .cs-inner{ grid-template-columns: 1fr; row-gap: 26px; padding-top: 32px; }
  .cs-text, .cs-card{ grid-column: 1; }
  .cs-text{ padding-bottom: 0; }
  .cs-card{ padding-top: 0; }
  .cs .contact-form{ padding: 24px 20px 22px; border-radius: 14px; }
  .cs-lead{ max-width: none; }
  .cs-card-foot{ white-space: normal; }
}

/* ── Скрины отзывов: порог против «сохранить картинку» (Босс 2026-09-21) ───── */
/* ⚠️ Это НЕ защита, а порог. Браузер обязан получить пиксели, чтобы показать
   картинку, — значит забрать её можно всегда (панель разработчика, сетевой лог,
   кэш, снимок экрана). Здесь закрыты только очевидные пути: перетаскивание на
   рабочий стол и меню «Сохранить изображение» по долгому нажатию в iOS.
   Правую кнопку глушит public/js/shots-guard.js — тоже только на этих картинках.
   Единственное, что переживает скачивание, — водяной знак на самих файлах. */
.rv-shot img,
#rv-zoom-img{
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   ЭКРАН БЛОГА (Босс 2026-09-21, ТЗ-папка Screen_13_Blog)

   Слева Феликс с подарками на кремовом заднике, справа заголовок, лид,
   три свежие статьи и кнопки.

   ⚠️ СЦЕНА СЛЕВА — ЗАПЕЧЁННЫЙ КАДР, не слои. Значит картинка НЕ подстраивается
   под пропорции секции, и отсюда два обязательных правила — те же, что на
   экране «Связаться», и по той же причине:
     1) object-position: left — при обрезке режется правый край (пустой
        задник), Феликс с подарками остаётся в кадре при любой высоте;
     2) ниже 1700px секция перестраивается ВЕРТИКАЛЬНО. Занятая фигурой зона —
        0.40 ширины КАДРА; при высокой секции кадр тянется по высоте, и эти
        40% превращаются в половину ширины экрана — текст туда не влезает.
   ⚠️ Меняете сцену — перемеряйте долю 0.40 по сетке и поправьте отступ ниже.
============================================================ */
.bl{
  --bl-pad: clamp(48px, 7vh, 96px);
  /* ⚠️ 100vw делим на zoom: на мониторах шире 1920 секция отмасштабирована
     (wide.css), и без деления формула отступа считает экран вдвое шире. */
  --bl-vw: calc(100vw / var(--site-zoom, 1));
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--bl-pad) 0;
  background: var(--cream);
  display: flex; align-items: center;
  /* ⚠️ Высота секции = пропорции кадра (16/9). Без этого секция получалась
     ниже сцены (881px против нужных 1080 на 1920), и cover срезал у кадра
     верх и низ: над головой не оставалось воздуха, а ботинки уходили за
     кромку. Это минимум — если контент однажды станет выше, секция вырастет
     сама, просто кадр начнёт подрезаться, как раньше. */
  min-height: calc(var(--bl-vw) * 0.5625);
}
.bl-scene{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center; display: block; z-index: 0;
}
/* Вуаль: слева прозрачная — там фигура, её не трогаем; к правому краю
   плотнеет под текст и карточки. Осветление, а не затемнение. */
.bl-veil{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(250, 247, 241, 0) 0%,
    rgba(250, 247, 241, 0.06) 34%,
    rgba(250, 247, 241, 0.5) 46%,
    rgba(250, 247, 241, 0.82) 60%,
    rgba(250, 247, 241, 0.88) 100%);
}

/* ── Раскладка ────────────────────────────────────────────────────────────── */
/* Текст начинается там, где кончается сцена: 0.40 ширины кадра, а ширина
   кадра на экране = max(ширина секции, высота × 16/9). Пол в 800px — на тот
   случай, когда секция выше обычного и кадр тянется по высоте (высоту секции
   CSS не знает, её задают карточки). Та же формула, что у .cs. */
.bl > .wrap{
  max-width: none;
  padding-left: max(800px, calc(var(--bl-vw) * 0.4 + 56px));
  padding-right: clamp(24px, calc(var(--bl-vw) * 0.045), 120px);
}
.bl-inner{ position: relative; z-index: 4; width: 100%; }

/* ── Шапка блока ──────────────────────────────────────────────────────────── */
.bl-eyebrow{
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px;
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-text, #7d6428);
}
.bl-eyebrow::after{
  content: ''; width: 72px; height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.5));
}
.bl-title{
  margin: 0 0 18px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.02; color: var(--dark);
}
.bl-title em{ font-style: italic; color: var(--gold-text, #7d6428); }
.bl-lead{
  margin: 0 0 30px; max-width: 640px;
  font-family: 'Jost', sans-serif; font-size: 0.86rem; font-weight: 400;
  line-height: 1.75; color: #3b3833;
}

/* ── Карточки статей ──────────────────────────────────────────────────────── */
.bl-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px); margin-bottom: 32px;
}
.bl-card{
  display: flex; flex-direction: column;
  padding: 24px 24px 20px;
  background: rgba(252, 250, 246, 0.94);
  border: 1px solid rgba(154, 122, 50, 0.22);
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bl-card-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bl-card-cat{
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase; color: #6b541f;
}
.bl-card-time{
  font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 400; color: var(--mid);
}
.bl-card-title{
  margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.32rem; line-height: 1.22; color: var(--dark);
}
.bl-card-excerpt{
  margin: 0 0 20px; font-family: 'Jost', sans-serif; font-size: 0.68rem;
  font-weight: 400; line-height: 1.7; color: #4f4a43;
}
/* Подвал прижат к низу — карточки в ряду разной длины, а даты и стрелки
   должны стоять на одной линии. */
.bl-card-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid rgba(154, 122, 50, 0.22);
}
.bl-card-date{
  font-family: 'Jost', sans-serif; font-size: 0.62rem; font-weight: 400; color: var(--mid);
}
.bl-card-go{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(154, 122, 50, 0.45); color: var(--gold-text, #7d6428);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .bl-card:hover{ transform: translateY(-3px); border-color: rgba(154,122,50,0.45);
                  box-shadow: 0 14px 34px rgba(24, 21, 18, 0.12); }
  .bl-card:hover .bl-card-go{ background: var(--gold-btn, #8d6f2d); color: #fff; transform: translateX(2px); }
}
.bl-card:focus-visible{ outline: 2px solid var(--gold-text, #7d6428); outline-offset: 3px; }

/* ── Кнопки ───────────────────────────────────────────────────────────────── */
.bl-ctas{ display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); flex-wrap: wrap; }

/* ── Подписи-украшения с референса ────────────────────────────────────────── */
.bl-script{
  position: absolute; z-index: 4; pointer-events: none; white-space: pre-line;
  left: clamp(10px, 1.6vw, 34px); top: 30%;
  font-family: 'Marck Script', cursive; font-size: 1.05rem; line-height: 1.5;
  color: var(--gold-text, #7d6428);
  transform: rotate(-8deg); transform-origin: 0 50%;
}
.bl-note{
  position: absolute; z-index: 4; pointer-events: none; white-space: pre-line;
  font-family: 'Jost', sans-serif; font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24, 21, 18, 0.45);
  line-height: 2;
}
.bl-note--tr{ right: clamp(16px, 2.2vw, 40px); top: clamp(20px, 4vh, 54px); text-align: right; }
/* ⚠️ Отодвинута от правого края сильнее верхней: там же висит колонка
   плавающих кнопок связи (fixed, right: 24px, ширина 52) — подпись уезжала
   под них. Колонка fixed, поэтому проверять надо именно в прокрутке. */
.bl-note--br{ right: clamp(90px, 7vw, 150px); bottom: clamp(18px, 3.5vh, 44px); letter-spacing: 0.2em; }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
/* ⚠️ Ниже 1280 — вертикальная перестройка, причина та же, что на «Связаться»
   (порог опущен с 1700 по просьбе Босса 2026-09-24, замер — в комментарии там):
   кадр запечён, при высокой секции он тянется по высоте, и занятые фигурой
   40% кадра превращаются в половину ширины экрана. Кадр выносится полосой
   16/9 сверху, текст и карточки идут под ней по кремовому фону. */
@media (max-width: 1279px){
  .bl{ display: block; padding: 0 0 var(--bl-pad); min-height: 0; }
  .bl > picture{ display: block; }
  .bl-scene{
    position: static; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-position: left center;
  }
  .bl-veil, .bl-script, .bl-note{ display: none; }
  .bl > .wrap{
    max-width: 1456px; margin: 0 auto;
    padding-left: clamp(20px, calc(var(--bl-vw) * 0.045), 64px);
    padding-right: clamp(20px, calc(var(--bl-vw) * 0.045), 64px);
  }
  .bl-inner{ padding-top: var(--bl-pad); }
}
@media (max-width: 900px){
  .bl-grid{ grid-template-columns: 1fr; }
  .bl-card{ padding: 20px 20px 16px; }
}
@media (max-width: 560px){
  .bl-ctas{ flex-direction: column; align-items: stretch; gap: 18px; }
  .bl-cta-main{ width: 100%; text-align: center; }
}

/* ============================================================
   ЭКРАН «ОБО МНЕ» (Босс 2026-09-22, ТЗ-папка «Screen_03_AboutMe»)
   Слева Феликс с бокалом на коллаже из кадров зала, справа — светлое поле
   кадра, в нём текст, цитата и кнопка.

   ⚠️ СЦЕНА ЗАПЕЧЕНА, но ведёт себя НЕ ТАК, как на «Связаться» и в блоге.
   Там ценное было слева (фигура), кадр прижимался к левому краю и спокойно
   терял правый. ЗДЕСЬ ЦЕННОЕ СПРАВА — светлое поле под текст, и резать его
   нельзя. Поэтому секции задана пропорция кадра (min-height = ширина × 9/16):
   по ширине кадр не обрезается вовсе, и поле всегда на месте.
   ⚠️ Из этого же следует: НЕ добавлять сюда object-position: left, как у
   соседних экранов. Скопируете «по аналогии» — срежете поле с текстом.

   ⚠️ Светлое поле занимает 0.50…0.87 ширины кадра (замерено по сетке).
   Отсюда отступы колонки ниже. Меняете сцену — перемерять по сетке.

   ⚠️ Ниже 1280px — вертикальная перестройка, как у соседних экранов: кадр
   полосой сверху, текст под ним по кремовому фону. Причина та же: при узкой
   и высокой секции доли кадра перестают совпадать с долями экрана.
============================================================ */
.ab-scene{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: 0;
}
/* Текст ложится прямо на светлое поле кадра — своей вуали ему не нужно:
   поле и так почти белое, контраст меряли, он с запасом. */
.ab > .wrap{
  max-width: none;
  /* ⚠️ ГРАНИЦЫ СВЕТЛОГО ПОЛЯ ЗАМЕРЕНЫ ПО ЯРКОСТИ ПИКСЕЛЕЙ, не на глаз: левая
     кромка коллажа СТУПЕНЧАТАЯ и в середине кадра выдаётся до 0.535 ширины,
     а справа с 0.882 начинается тёмный клин. Безопасная колонка — ровно
     между ними. С прежними 0.525 первые буквы абзацев ложились на тёмное
     фото и пропадали (видно только на рендере). */
}
/* Подъём блока на 27px (Босс 2026-09-23: «подними выше… считая от
   надстрочника»). Блок центрирован по высоте кадра, поэтому сдвигаем его
   визуально: раскладка не меняется, запас снизу растёт — оттуда и взяты
   увеличенные отступы между абзацами.
   ⚠️ В top не 27, а 17: увеличенные отступы подняли блок ещё на 10px сами —
   он вырос на 20px, а центрирование делит прибавку пополам. Замер по
   надстрочнику: 76 → 49px от верха секции на 1920, ровно −27. */
.ab-inner{ position: relative; top: -17px; z-index: 2; width: 100%; }

/* ⚠️ КЕГЛЬ ТЕКУЧИЙ ОТ ШИРИНЫ ЭКРАНА, а не фиксированный (Босс 2026-09-22:
   «шрифт крупнее, а то плохо читается»). Причина: высота секции жёстко
   привязана к пропорции кадра, расти ей нельзя — вырастет, и cover начнёт
   резать кадр по ширине, а вместе с ним светлое поле под текстом. Значит
   текст обязан уложиться в фиксированную высоту на КАЖДОЙ ширине. Колонка —
   постоянная доля ширины экрана, поэтому кегль от неё же: на 1920 выходит
   ~18px, на 1700 ~16px, и запас снизу остаётся на всех ширинах.
   ⚠️ Поднимете кегль ещё — перемерьте запас снизу на САМОЙ УЗКОЙ ширине с
   боковой раскладкой (1700). Там места меньше всего. */
/* ⚠️ 2026-09-22, второй заход («увеличь ещё, плохо читается», теги форматов
   сняты): кегль выжат ЗАМЕРОМ — максимум, при котором текст ещё влезает в
   кадр: 17.5px при 1700, 18.5 при 1760, 20 при 1850, 21 при 1920+. Формула —
   прямая через 1700→17.1 и 1920→20.6 (запас ~0.4px). Шире 1920 --ab-vw
   упирается в 1920 (zoom). Правите текст или вёрстку — перемерить. */
/* ⚠️ Четвёртый заход «ещё крупнее» (2026-09-22). Свободной высоты в кадре
   больше нет, поэтому место добрано по мелочам: колонка чуть шире (0.54…0.875
   вместо 0.545…0.865 — светлое поле кадра кончается на 0.882), заголовок и
   поля цитаты/кнопки компактнее. Прибавка небольшая: максимум по замеру вырос
   с 19 до 20px при 1700 и с 22.5 до 23.5 при 1920. Это потолок: дальше только
   сокращать текст или отпускать секцию выше кадра — а там слева коллаж, и
   стык будет виден. */
.ab{
  --ab-pad: clamp(40px, 6vh, 84px);
  /* ⚠️ 100vw делим на zoom: на мониторах шире 1920 секция отмасштабирована
  (wide.css), и без деления формула отступов считает экран вдвое шире. */
  --ab-vw: calc(100vw / var(--site-zoom, 1));
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--ab-pad) 0;
  background: var(--cream);
  display: flex; align-items: center;
  min-height: calc(var(--ab-vw) * 0.5625);
  --ab-text: clamp(15px, calc(var(--ab-vw) * 0.01591 - 7.45px), 23.1px);
}
/* «ФЕЛИКС ЦАРЕГРАДСКИЙ ——», смещён вправо (Босс 2026-09-23). Черта тянется
   до правого края колонки: flex: 1 у ::after, поэтому длина сама
   подстраивается под ширину текста на любой ширине экрана. */
.ab-label{
  display: flex; align-items: center; gap: 14px;
  /* Ещё правее (Босс 2026-09-24: «чтобы практически у правой границы»):
     отступ слева 22% → 52% ширины колонки. Линия после надписи — остаток
     строки, поэтому она сама укорачивается, отдельной правки не требует. */
  margin: 0 0 10px clamp(140px, 60%, 660px);
  /* ⚠️ Линия выходит за правый край колонки и упирается в КРАЙ ЭКРАНА
     (Босс 2026-09-24: «она должна упираться в правую границу»). Отрицательный
     отступ ровно равен правому паддингу колонки (--ab-vw * 0.135) — иначе
     линия обрывалась бы за 259px до края на 1920. */
  /* 0.125, а не 0.135: замер показал перелёт линии за край экрана на
     13-19px — ровно 1% ширины, его и вычитаем. */
  margin-right: calc(var(--ab-vw) * -0.125);
}
.ab-label::after{
  content: ''; flex: 1; height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.5));
}
.ab-lead{
  /* отступы между абзацами увеличены (Босс 2026-09-23), место взято из запаса,
     который освободил подъём блока на 27px */
  margin: 0 0 13px;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: calc(var(--ab-text) * 1.14);
  line-height: 1.45; color: var(--dark);
}
.ab-para{
  /* ⚠️ Интерлиньяж и отступ ужаты 2026-09-22 (третий заход «ещё крупнее»):
     высота секции жёстко равна кадру, и место под более крупный кегль можно
     взять только отсюда. Замер: при 1.66/11px максимум 17.5px@1700, при
     1.45/7px — уже 19px@1700 и 22.5@1920. */
  margin: 0 0 12px;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: var(--ab-text);
  line-height: 1.45; color: #3b3833;
}
/* ── Ряд кнопок под цитатой (Босс 2026-09-24) ────────────────────────────────
   «Задать вопрос лично» + «Смотреть кейсы» + «Смотреть шоурилл», все ОДНОГО
   размера. Высота задана переменной и общей для всех трёх: у первой кнопки
   свой класс .btn, у шоурила — вид с первого экрана, и без общей высоты они
   разъезжались на 6–10px. */
/* ⚠️ СЕТКА, а не flex: при flex первая кнопка выходила уже соседей на 26px
   (её обёртка с каналами считает ширину по-своему — замер 189 против 215).
   Сетка из трёх равных колонок гарантирует одинаковый размер, чего Босс и
   просил. На узких — одна колонка: три кнопки в строку ужимались до 91px,
   и надпись в них не помещалась. */
.ab-actions{
  /* ⚠️ Высота 66px — ровно как у кнопки «Остались вопросы?» в FAQ (.fq-cta):
     56 выглядели мелко рядом с текстом блока (Босс 2026-09-24: «зачем такие
     малюсенькие»). Колонки — auto-fit: на широком экране три в ряд, на 1440
     их становится две, на телефоне одна. Фиксированные три ужимали кнопку до
     135px, и надпись ломалась. */
  --ab-act-h: 66px;
  /* ⚠️ ТРИ ЖЁСТКИХ КОЛОНКИ, а не auto-fit: с auto-fit на 1280…1700 третья
     кнопка переносилась на вторую строку, блок вырастал и распирал секцию —
     а её высота привязана к пропорции кадра, и фон начинал резаться по бокам
     (Босс 2026-09-24: «зачем двигаешь и портишь фон»). Замер до правки:
     перебор над кадром 100px на 1600 и 209px на 1280. Кегль сделан текучим,
     чтобы надписи влезали в узкую кнопку. */
  --ab-act-h: 66px;
  /* ⚠️ Колонки ПО СОДЕРЖИМОМУ (max-content), а не равные доли (Босс
     2026-09-24: «места в строке ещё есть, сделай отступы больше, а „задать
     вопрос лично“ — чтобы фраза влезала в одну строку»). При равных долях
     самая длинная надпись ломалась на две строки, хотя справа оставалось
     пустое место. Высота у всех общая, «одного размера» сохраняется. */
  display: grid; grid-template-columns: repeat(3, max-content);
  justify-content: start; align-items: stretch; gap: 20px;
}
/* ⚠️ Ниже 1440 колонка текста узкая: по содержимому три кнопки в строку уже
   не встают и вылезают за край. Там возвращаем равные доли с переносом
   надписи внутри кнопки — блок остаётся одной строкой, секция не растёт. */
@media (max-width: 1439px){
  .ab-actions{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* ⚠️ Селекторы специфичнее базовых: правило .ab-action{white-space:nowrap}
     стоит в файле НИЖЕ этого медиазапроса и при равной специфичности
     побеждало — надписи вылезали за овал (замер: обрезка на 1366 и 1280). */
  .ab .ab-actions .ab-cta, .ab .ab-actions .ab-action{ white-space: normal; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 899px){
  .ab-actions{ grid-template-columns: 1fr; gap: 12px; }
}
/* ⚠️ Раскрытые каналы связи ложились ПОВЕРХ соседних кнопок (Босс: «менюшка
   некрасиво накладывается»). Пока полоса раскрыта, соседи спрятаны —
   селектор по классу is-open, который вешает v3.js. */
.ab-actions .fq-cta-wrap.is-open ~ .ab-action{
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
}
/* ⚠️ flex-basis 0, а не 220px: колонка текста ~656px, и с базисом 220 третья
   кнопка не влезала в строку — переносилась вниз и растягивалась на всю
   ширину (замер: 643 против 316 у соседей). С нулевым базисом три кнопки
   делят строку поровну. */
.ab-actions > .fq-cta-wrap{
  margin-top: 0;
  flex: 1 1 0; min-width: 0;
}
/* ⚠️ Перенос разрешён всем трём: на 1440 колонка текста узкая (кнопка 153px),
   и в одну строку надписи не помещались — вылезали за овал. Высота 56px при
   line-height 1.2 держит две строки. */
.ab-actions .ab-cta{
  width: 100%; height: var(--ab-act-h);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; text-align: center; line-height: 1.2; padding: 0 20px; gap: 0;
  font-size: clamp(0.58rem, calc(var(--ab-vw) * 0.0055), 0.74rem);
  letter-spacing: 0.07em;
}
.ab-action{
  flex: 1 1 0; min-width: 0; height: var(--ab-act-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 20px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border-gold, rgba(154, 122, 50, 0.5));
  background: transparent;
  font-family: 'Jost', sans-serif; font-weight: 600;
  font-size: clamp(0.58rem, calc(var(--ab-vw) * 0.0055), 0.74rem);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-text, #7d6428);
  text-align: center; line-height: 1.2;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ab-action:hover{ background: var(--gold-btn, #9a7a32); border-color: var(--gold-btn, #9a7a32); color: #fff; }
/* ⚠️ Шоурил повторяет кнопку первого экрана: КРУЖОК С «PLAY» и надпись рядом.
   Кружок — отдельный узел .ab-play, а не псевдоэлемент кнопки: на первом
   экране треугольник позиционируется от левого края пикселями, а здесь
   кнопка центрируется в колонке — привязка к краю уводила play на текст
   (Босс 2026-09-24: «сделал какую-то дичь»). */
.ab-action--showreel{ gap: 8px; color: var(--gold-text, #7d6428); }
.ab-play{
  position: relative; flex: none;
  width: clamp(24px, calc(var(--ab-vw) * 0.0177), 34px);
  height: clamp(24px, calc(var(--ab-vw) * 0.0177), 34px);
  border-radius: 50%;
  border: 1px solid currentColor;
}
.ab-play::before{
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-35%, -50%);
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ab-action--showreel:hover{ color: #fff; }

.ab-quote cite{
  display: block; margin-top: 8px;
  font-family: 'Jost', sans-serif; font-style: normal; font-size: 0.6rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6b541f;
}

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 1279px){
  /* ⚠️ Здесь высота секции НЕ ограничена (кадр стоит отдельной полосой),
     поэтому кегль не зажат пропорцией и задан прямо — крупнее, чем в боковой
     раскладке, где текст обязан уложиться в фиксированную высоту. */
  .ab{ display: block; padding: 0 0 var(--ab-pad); min-height: 0; --ab-text: 21px; }
  .ab > picture{ display: block; }
  .ab-scene{
    position: static; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-position: center;
  }
  .ab > .wrap{
    max-width: 1160px; margin: 0 auto;
  }
  /* ⚠️ Мера строки. На десктопе её задаёт само светлое поле (~615px), а в
     вертикальной раскладке контейнер широкий, и строки уходили за 120 знаков —
     читать такое тяжело. 860px держит около 90 знаков. */
  .ab-inner{ padding-top: var(--ab-pad); max-width: 860px; }
  /* ⚠️ Вынос линии за край экрана снят: тут колонка не во всю ширину, и
     отрицательный отступ уводил линию на 99px за экран. */
  .ab-label{ margin-right: 0; }
}
@media (max-width: 560px){
  .ab-cta{ display: block; text-align: center; }
}

/* ============================================================
   ЭКРАН «ПАКЕТЫ И ЦЕНЫ» (Босс 2026-09-22, ТЗ-папка Screen_09_Packets)
   Справа Феликс у стула, слева светлая стена — на ней заголовок, четыре
   пакета и нижняя полоса с индивидуальным расчётом.

   ⚠️ СЦЕНУ НЕЛЬЗЯ РЕЗАТЬ НИ С ОДНОЙ СТОРОНЫ: слева светлое поле под контент,
   справа Феликс. Поэтому секции задана пропорция кадра (min-height = ширина
   × 9/16) и обрезки по ширине не происходит вовсе. Не ставить сюда
   object-position — он тут ничего не спасёт, резать просто нечего.

   ⚠️ ЗАМЕРЫ ПО ЯРКОСТИ ПИКСЕЛЕЙ (не на глаз):
        Феликс со стулом начинается с 0.696 ширины кадра;
        тёмная пальма и подиум слева заканчиваются к 0.12;
        стена и пол в зоне контента — яркость 180–200, тёмного нет.
   Отсюда колонка контента: 0.045…0.665. Карточки НЕПРОЗРАЧНЫЕ и могут
   заходить на тёмный левый угол, а вот заголовок и подзаголовок — нет,
   поэтому они выровнены по центру колонки, над стеной.
   ⚠️ Меняете сцену — перемерять.

   ⚠️ Ниже 1700px — вертикальная перестройка, как у соседних экранов-сцен:
   кадр полосой сверху, контент под ним по кремовому фону.
============================================================ */
.pk{
  /* ⚠️ 100vw делим на zoom: шире 1920 секция отмасштабирована (wide.css). */
  --pk-vw: calc(100vw / var(--site-zoom, 1));
  /* ⚠️ Поля считаем от ШИРИНЫ, а не от vh: высота секции задана пропорцией
     кадра, и поле от высоты окна делало запас непредсказуемым — на мониторе
     1700×1200 контент вылезал за кадр, на 1700×900 влезал. */
  --pk-pad: clamp(22px, calc(var(--pk-vw) * 0.018), 44px);
  /* ⚠️ КЕГЛЬ КАРТОЧЕК ВЫЖАТ ПО ЗАМЕРУ, а не подобран на глаз. Высота секции
     задана пропорцией кадра и расти не может, значит весь контент обязан
     уложиться в неё на каждой ширине. Формула — прямая через две замеренные
     точки «максимум, который ещё влезает» (с запасом ~0.4px):
         1700px → 13.9px      1920px → 16.8px
     Шире 1920 --pk-vw упирается в 1920 (wide.css масштабирует zoom-ом), и
     кегль дальше не растёт — потолок 17px только страховочный.
     ⚠️ Меняете шапку, поля или содержимое карточек — ПЕРЕМЕРЯТЬ обе точки:
     перебор упрётся в кадр, и сцена начнёт обрезаться по бокам. */
  /* ⚠️ Кегль поднят (Босс 2026-09-24: «размер текста увеличь, я ради этого и
     просил карточки крупнее»). Прежняя формула держала 12–17px под четыре
     карточки в ряд; сейчас их три и они шире, место есть. */
  --pk-text: clamp(14px, calc(var(--pk-vw) * 0.0155 - 9.6px), 21px);
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--pk-pad) 0;
  background: var(--cream);
  display: flex; align-items: center;
  min-height: calc(var(--pk-vw) * 0.5625);
}
.pk-scene{
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* ⚠️ Кадрируем ПРАВЕЕ центра: карточки с целым креативом делают секцию выше
     кадра, cover тянет картинку по высоте и срезает бока. При center первым
     уходил Феликс справа — ради него тут и держится этот фон. */
  object-fit: cover; object-position: 62% center; display: block; z-index: 0;
}
.pk > .wrap{
  max-width: none;
  /* ⚠️ Колонка расширена до предела кадра: слева карточки заходят на тёмный
     угол (они непрозрачные, это не мешает), справа упираются в Феликса — он
     начинается с 0.696 ширины, колонка кончается на 0.685. Дальше двигать
     некуда, ширину карточек ограничивает сама сцена. */
  padding-left: calc(var(--pk-vw) * 0.025);
  padding-right: calc(var(--pk-vw) * 0.315);
}
.pk-inner{ position: relative; z-index: 2; width: 100%; }

/* ── Шапка блока ──────────────────────────────────────────────────────────── */
/* ⚠️ ШАПКА СТОИТ ОДНОЙ СТРОКОЙ (Босс 2026-09-22: сначала «Пакеты и цены сдвинь
   влево, заголовок подними на это место», затем «заголовок и подзаголовок
   должны быть дальше как в одну строчку с надстрочником»). Смысл правки не в
   выравнивании: три строки шапки превращаются в одну полосу, и освободившаяся
   высота уходит карточкам — они «плохо просматриваются».

   ⚠️ ВЫСОТА СЕКЦИИ ЖЁСТКО ЗАДАНА пропорцией кадра (min-height = ширина × 9/16)
   и расти не может. Поэтому всё, что шапка отдаёт, тут же забирает кегль
   карточек (--pk-text) — увеличите шапку обратно, карточки вылезут за кадр. */
/* ⚠️ Все размеры шапки считаются от --pk-vw, а НЕ от vw/vh напрямую: шире
   1920 секция отмасштабирована zoom-ом, и чистый vw там даёт другой кегль,
   чем на 1920 (проверено: заголовок раздувался до 46px и выдавливал
   подзаголовок в три строки). */
.pk-head{
  display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: clamp(14px, calc(var(--pk-vw) * 0.013), 26px); row-gap: 2px;
  margin-bottom: clamp(10px, calc(var(--pk-vw) * 0.008), 18px);
}
/* ⚠️ НАДСТРОЧНИК СТОИТ НАД ГОЛОВОЙ ФЕЛИКСА (Босс 2026-09-23: «перемести
   вправо, чтобы было над головой фигуры»), поэтому он вынут из строки шапки
   и позиционирован абсолютно по самой секции.
   ЗАМЕР ПО КАДРУ packages-scene.jpg: фигура в верхней половине занимает
   0.725…0.82 ширины, центр головы ≈ 0.79, макушка — на 0.095 высоты.
   Отсюда left (центр надписи по центру головы) и top — выше макушки. */
.pk-eyebrow{
  position: absolute; z-index: 2;
  left: calc(var(--pk-vw) * 0.79); transform: translateX(-50%);
  top: 4.4%;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 0.54rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  /* ⚠️ НЕ --gold-text (#7d6428): тот подобран под КРЕМОВЫЙ фон и даёт на нём
     свои 4.6:1, а здесь надстрочник лежит на фотографии — у левого края
     колонки его пересекает тёмный пальмовый лист. Замер по готовому кадру:
     с #7d6428 норме AA (4.5:1) отвечали лишь 15% штрихов надписи, медиана
     3.9:1. С этим значением — медиана 5.7:1, AA держат 89%; остаются пять
     пикселей первой буквы прямо на листе, темнее золото делать нельзя,
     иначе оно перестанет быть золотом. Меняете сцену — перемерять. */
  color: #5f4c1c;
}
/* Линейка только ПОСЛЕ надстрочника: слева он у самого края колонки. */
.pk-eyebrow::after{
  content: ''; width: 46px; height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.5));
}
.pk-heading{
  /* ⚠️ text-align: left ОБЯЗАТЕЛЕН: общее правило для h2 на сайте центрирует
     заголовки секций, и без этой строки заголовок оставался по центру, хотя
     коробка уже прижата влево. */
  /* Кегль и начертание — как у заголовка «Как мы работаем» (Босс 2026-09-23):
     тот же clamp с коэффициентом 0.026 и вес 600.
     ⚠️ Шапка на этом экране растёт ЗА СЧЁТ КАРТОЧЕК: высота секции задана
     пропорцией кадра. Кегль карточек (--pk-text) перемерян под новый заголовок. */
  flex: none; margin: 0; text-align: left;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, calc(var(--pk-vw) * 0.026), 3.2rem);
  line-height: 1.04; color: var(--dark);
}
/* Часть заголовка золотом — слова, обёрнутые *звёздочками* в content.json
   (Босс 2026-09-24). Тот же цвет, что у «финального аккорда» в «Как мы
   работаем»: заголовок лежит на светлой стене сцены, поэтому золото тут
   кнопочное (#8d6f2d), а не бледное декоративное. */
.pk-heading-gold{ color: var(--gold-btn, #8d6f2d); }
/* Подзаголовок — остаток строки. min-width: 0 обязателен: без него flex-элемент
   не даёт себя сжать уже содержимого и строка переносится целиком. */
/* Подзаголовок снят (Босс 2026-09-23: «это можно спокойно убирать»).
   Текст жив в packages.sub — вернуть, сняв display: none. */
.pk-sub{
  display: none;
  flex: 1 1 300px; min-width: 0; margin: 0; text-align: left;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: calc(var(--pk-text) * 0.96); line-height: 1.45; color: #3b3833;
}

/* ── Четыре пакета в ряд ──────────────────────────────────────────────────── */
/* ── Лента пакетов: видны три, четвёртая приезжает стрелкой ──────────────── */
.pk-carousel-wrap{ position: relative; margin-bottom: 14px; --pk-lane: 64px; }
/* ⚠️ Справа у ленты СВОЯ ПОЛОСА ПОД СТРЕЛКИ (Босс 2026-09-24: «стрелочки
   наезжают на сами карточки, выглядит упорото»). Поставить их просто за край
   ленты не вышло: на 1280…1440 сразу за лентой начинается фигура на фоне, и
   кружки ложились Феликсу на плечо. Полоса отъедает у карточек ~20px на 1920
   и держит стрелки на чистом фоне на всех ширинах. */
.pk-carousel{
  /* ⚠️ Полосу отрезаем ШИРИНОЙ окна, а не его padding: overflow режет по
  padding-box, и в полосе был виден край следующей карточки — стрелка снова
  оказывалась «на карточке», только на другой (проверено замером). */
  position: relative; width: calc(100% - var(--pk-lane, 56px));
  overflow: hidden;
}
/* ⚠️ «Всё включено» ШИРЕ соседей (Босс 2026-09-24: «так по маркетингу делают,
   чтобы привлечь внимание»). Доли считаются от одного окна: две обычные по
   1, выделенная — 1.22, плюс зазоры. Поэтому ширина задана через calc с общим
   знаменателем, а не процентами на глаз. */
/* 1.12, а не 1.22: при 1.22 карточка выглядела непропорционально широкой
   (Босс 2026-09-24: «слишком сильно расширил, чуть ужми») */
.pk-grid{
  /* ⚠️ Ровно три карточки в окне: ширина считается от него, а не от числа
  карточек (было четыре в сетке). Четвёртая стоит за краем и выезжает по
  стрелке — за счёт этого первые три стали заметно шире. */
  --pk-gap: clamp(10px, 0.8vw, 16px);
  --pk-visible: 3;
  display: flex; gap: var(--pk-gap); align-items: stretch;
  transition: transform 0.45s cubic-bezier(0.22, 0.75, 0.3, 1);
  --pk-accent: 1.12;
}
.pk-grid > .pkg{
  flex: 0 0 calc((100% - (var(--pk-visible) - 1) * var(--pk-gap))
                 / (var(--pk-visible) - 1 + var(--pk-accent)));
}
.pk-grid > .pkg.featured{
  flex: 0 0 calc((100% - (var(--pk-visible) - 1) * var(--pk-gap))
                 * var(--pk-accent) / (var(--pk-visible) - 1 + var(--pk-accent)));
}
@media (prefers-reduced-motion: reduce){ .pk-grid{ transition: none; } }
/* Стрелки стоят в своей полосе справа от карточек (см. .pk-carousel выше),
   обе колонкой: слева поля всего 32…48px, туда кнопка не встаёт.
   Прячутся на крайних позициях (hidden ставит v3.js) и на узких экранах,
   где карусели нет. */
/* Заметные: золотая заливка + белый знак (Босс 2026-09-24: «стрелочки сделай
   более заметными, поярче»). Светлый кружок с тонким золотым шевроном на
   светлом фоне секции читался как декор, а не как кнопка. */
.pk-nav{
  position: absolute; right: 4px; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; background: var(--gold-btn, #9a7a32);
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff;
  box-shadow: 0 8px 24px rgba(24, 21, 18, 0.3);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pk-nav[hidden]{ display: none; }
/* колонкой: «назад» сверху, «вперёд» снизу, обе по центру высоты ленты */
/* ⚠️ ОБЕ СТРЕЛКИ СТОЯТ В ОДНОЙ ТОЧКЕ (Босс 2026-09-24: «зачем она прыгает
   вверх-вниз — пусть будет на одном месте и просто меняет сторону»). Это
   работает, потому что листание страничное: позиции всего две, крайние, и
   одновременно видна всегда одна кнопка. Если карточек станет столько, что
   появится промежуточная позиция и обе стрелки покажутся разом, v3.js вешает
   на обёртку .pk-nav-both — тогда они снова расходятся колонкой и не
   накладываются друг на друга. */
.pk-nav--prev, .pk-nav--next{ top: 50%; transform: translateY(-50%); }
.pk-nav:hover{
  background: var(--dark); border-color: rgba(255, 255, 255, 0.7); color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.pk-nav-both .pk-nav--prev{ transform: translateY(calc(-50% - 32px)); }
.pk-nav-both .pk-nav--next{ transform: translateY(calc(-50% + 32px)); }
.pk-nav-both .pk-nav--prev:hover{ transform: translateY(calc(-50% - 32px)) scale(1.06); }
.pk-nav-both .pk-nav--next:hover{ transform: translateY(calc(-50% + 32px)) scale(1.06); }
/* ⚠️ На 1280…1439 в окне ДВЕ карточки, а не три. Замер: при трёх карточка
   сжимается до 279–293px, текст переносится сильнее, и секция вылезает за
   кадр на 26–49px. С двумя — карточки шире, высота укладывается. */
@media (min-width: 1280px) and (max-width: 1439px){
  .pk-grid{ --pk-visible: 2; }
  /* и креатив ниже: на 1280 даже с двумя карточками секция вылезала на 38px.
     ⚠️ Кадр смещён выше (18% вместо 30%): при низком креативе название пакета,
     нарисованное в верхней части картинки, срезалось. */
  .pk-grid .pkg-media{ height: calc(var(--pk-vw) * 0.114); }
  /* ⚠️ Селектор длиннее базового: этот медиазапрос стоит в файле ВЫШЕ правила
     `.pk-grid .pkg-media img`, и при равной специфичности побеждало бы оно. */
  .pk-carousel .pk-grid .pkg-media img{ object-position: center top; }
}
.pk-grid .pkg{
  display: flex; flex-direction: column; min-width: 0;
  background: rgba(252, 250, 246, 0.96);
  border: 1px solid rgba(154, 122, 50, 0.25);
  overflow: hidden;
}
/* ⚠️ Выделенный пакет тёмный (как на референсе). Все цвета внутри него
   переопределяются ниже — иначе тёмный текст на тёмном фоне. */
.pk-grid .pkg.featured{
  background: #1c1a16; border-color: rgba(201, 169, 97, 0.6);
  box-shadow: 0 18px 46px rgba(24, 21, 18, 0.32);
}
/* ⚠️ КРЕАТИВ ПОКАЗЫВАЕТСЯ ЦЕЛИКОМ (Босс 2026-09-24: «раньше же было видно
   полностью, что изменилось»). И правда: пока карточек было четыре, узкий
   креатив влезал сам. Когда карточки стали крупнее, он по пропорции вырос на
   ~140px и я его подрезал ради высоты кадра — это и выглядело «криво».
   Теперь высоту не режем, а место берём: полоса «индивидуальный состав» ушла
   из потока (см. ниже), и секции разрешено быть чуть выше кадра. */
.pk-grid .pkg-media{ margin: 0; line-height: 0; }
.pk-grid .pkg-media picture{ display: block; }
.pk-grid .pkg-media img{ display: block; width: 100%; height: auto; }
.pk-grid .pkg-body{ display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
/* Ярлыки «Базовый», «Стандарт», «Игровой формат» сняты (Босс 2026-09-24):
   место отдано тексту карточки. У выделенного пакета ярлык «Чаще выбирают»
   остаётся — он не классификация, а акцент. Ключи packages.card_*_badge живы. */
.pk-grid .pkg:not(.featured) .pkg-badge{ display: none; }
.pk-grid .pkg-badge{
  align-self: flex-start; margin-bottom: 8px; padding: 4px 10px;
  border: 1px solid rgba(154, 122, 50, 0.45);
  font-family: 'Jost', sans-serif; font-size: calc(var(--pk-text) * 0.76);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6b541f;
}
.pk-grid .pkg h3{
  /* жирный и крупнее (Босс 2026-09-24); вес 600 → 700 по второй просьбе:
     «заголовки карточек должны стать жирным шрифтом» */
  margin: 0 0 4px; font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: calc(var(--pk-text) * 1.62); line-height: 1.12; color: var(--dark);
}
/* Длительность — тихой строкой под названием (раньше стояла под ценой) */
.pk-grid .pkg-duration{
  margin: 0 0 8px; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.82); letter-spacing: 0.04em; color: var(--mid);
}
.pk-grid .pkg-desc{
  margin: 0 0 10px; font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: var(--pk-text); line-height: 1.5; color: #4f4a43;
}
.pk-grid .pkg-divider{ height: 1px; background: rgba(154, 122, 50, 0.28); margin: 0 0 10px; }
/* ── Звёздочка-оговорка у цены (Босс 2026-09-24) ──────────────────────────────
   «Поставить сверху большую красную звёздочку, при наведении на которую
   вылезает блок с текстом». Работает и по наведению, и по клику: на телефоне
   наведения нет, а подсказка нужна именно там, где человек смотрит цену.
   ⚠️ Подсказка лежит ВНУТРИ .pkg-price (у него position: relative), поэтому
   она не обрезается карточкой и не тянет её высоту. */
.pk-grid .pkg-price{
  /* ЦЕНА ВНИЗУ, прямо над кнопками (Босс 2026-09-24). margin-top: auto прижимает
  её к низу карточки — список выше может быть любой длины, цена всё равно
  окажется на одной линии во всех четырёх карточках. */
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'Cormorant Garamond', serif; font-size: calc(var(--pk-text) * 2);
  line-height: 1.1; color: var(--dark);
  position: relative;
}
.pkg-note-btn{
  align-self: flex-start;      /* звёздочка встаёт над строкой цены, а не по базовой линии */
  /* Крупнее и выше (Босс 2026-09-24: «сделай ещё крупнее и повыше, чтобы их
     было явно видно»). line-height 0.72 поднимает глиф: в шрифте звёздочка
     и так сидит в верхней части кегельной площадки, а прижимать её пиксельным
     margin нельзя — на другом кегле уедет. */
  margin-left: 5px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: calc(var(--pk-text) * 2); line-height: 0.72;
  color: var(--red, #a61e1e);
  transition: opacity 0.2s, transform 0.2s;
}
.pkg-note-btn:hover{
  transform: scale(1.12);
  opacity: 0.75;
}
.pkg-note-btn:focus-visible{ outline: 2px solid var(--red, #a61e1e); outline-offset: 2px; border-radius: 2px; }
.pkg-note-pop{
  display: none; position: absolute; z-index: 6;
  left: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(280px, 92vw);
  padding: 12px 14px; border-radius: 3px;
  background: #fff; border: 1px solid var(--border-gold, rgba(154,122,50,0.35));
  box-shadow: 0 10px 28px rgba(24, 21, 18, 0.18);
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 400; line-height: 1.5;
  color: #3b3833; white-space: pre-line;   /* два абзаца оговорки — через пустую строку */
  text-align: left;
}
.pkg-note-btn:hover + .pkg-note-pop,
.pkg-note-btn:focus-visible + .pkg-note-pop,
.pkg-note-btn[aria-expanded="true"] + .pkg-note-pop{ display: block; }
/* ⚠️ У выделенной тёмной карточки подсказка остаётся СВЕТЛОЙ: это отдельный
   слой поверх, а не часть карточки. Специально не наследуем её палитру. */

/* Оговорка о ценах в подвале */

/* ── Видимая оговорка под ценой (Босс 2026-09-27) ─────────────────────────────
   Текст (Босс, 2026-09-27) — в packages.price_min_note: в минимальный состав входит
   не весь перечень, перечень может быть шире, итог — на брифе. Не вместо звёздочки,
   а рядом с ней: звёздочка открывается кликом, а эту строку нельзя не увидеть —
   ФАС требует, чтобы оговорка о цене была заметной. Поэтому кегль не мельче
   строки длительности и цвет тот же, читаемый (--mid), а не бледная сноска.
   Текст у всех карточек одинаковый, значит и высота одна — цены и кнопки
   по-прежнему стоят на одной линии. */
.pk-grid .pkg-price-min{
  margin: 6px 0 0; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.85); line-height: 1.4; color: var(--mid);
}
.pk-grid .pkg.featured .pkg-price-min{ color: rgba(246, 239, 224, 0.72); }
/* ⚠️ В ленте (≥1280) «Всё включено» шире соседей в --pk-accent раз, и длинная
   оговорка переносилась в ней на строку меньше — цена этой карточки уезжала
   ниже остальных (строка стоит между ценой и прижатой к низу кнопкой). Даём
   строке ровно ширину строки обычной карточки: тот же текст, та же ширина —
   те же переносы при любом тексте. 62px = 2 × (рамка 1 + поле карточки 14 +
   поле .pkg-body 16) — если эти поля поменяются, поменять и здесь. В сетке
   (≤1279) карточки одной ширины, правило не нужно. */
@media (min-width: 1280px){
  .pk-grid .pkg.featured .pkg-price-min{ max-width: calc((100% + 62px) / var(--pk-accent) - 62px); }
}
/* Та же строка под кратким списком цен (он виден только на телефоне) */
.pk-inner .pkg-summary-note{ display: none; }

.pk-grid .pkg-from{ font-family: 'Jost', sans-serif; font-size: calc(var(--pk-text) * 0.85); color: var(--mid); }
.pk-grid .pkg-price-note{
  margin: 2px 0 10px; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.82); color: var(--mid);
}
/* ⚠️ flex: none + align-content: start — ОБЯЗАТЕЛЬНО (Босс 2026-09-24: «между
   точками огромнейшие отступы»). Базовое правило .pkg-feats{flex:1} тянуло
   список на всю свободную высоту карточки, и grid растягивал строки: в
   короткой карточке между пунктами набегало по 40-50px пустоты. Цену вниз
   держит её собственный margin-top: auto, список для этого не нужен. */
.pk-grid .pkg-feats{
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 5px; flex: none; align-content: start;
}
/* Состав «Ведущий + DJ» пришёл группами (Босс 2026-09-24): вводная строка,
   подзаголовок «Профессиональный DJ:», список, оговорка про аппаратуру и
   отдельный хвостовой пункт. Кегли — доли того же --pk-text, что и список,
   иначе на другой ширине группа «поедет» относительно пунктов. */
.pk-grid .pkg-feats-lead{
  margin: 0 0 8px; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.98); line-height: 1.45; color: #3b3833;
}
.pk-grid .pkg-feats-head{
  margin: 0 0 6px; font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: calc(var(--pk-text) * 0.98); line-height: 1.45; color: var(--dark);
}
/* Оговорка «без звуковой аппаратуры» — не пункт услуги, поэтому без точки и
   мельче: её задача предупредить, а не выглядеть ещё одной строкой состава. */
.pk-grid .pkg-feats-note{
  margin: 0 0 8px; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.88); line-height: 1.4; color: var(--gold-text, #7d6428);
}
.pk-grid .pkg-feats--tail{ margin-bottom: 12px; }
/* «Всё включено» — тёмная карточка: строки групп на ней светлые, иначе
   тёмно-серый текст вводной и подзаголовков на чёрном не читается. */
.pk-grid .pkg.featured .pkg-feats-lead{ color: rgba(246, 239, 224, 0.82); }
.pk-grid .pkg.featured .pkg-feats-head{ color: #f6efe0; }
.pk-grid .pkg.featured .pkg-feats-note{ color: #c9a961; }
/* Вторая группа в карточке идёт подряд за списком — ей нужен отступ сверху,
   иначе подзаголовок «Организация:» липнет к последнему пункту предыдущей. */
.pk-grid .pkg-feats + .pkg-feats-head{ margin-top: 10px; }
/* ⚠️ Точка и текст выровнены по первой строке (Босс 2026-09-24: «тексты и
   точки вразнобой смещены»). Было: абсолютная точка с top в em — при переносе
   строки и на другом кегле она уезжала. Стало: сетка «точка | текст», точка —
   отдельная ячейка, сдвиг считается от высоты строки, а не на глаз. */
.pk-grid .pkg-feat{
  display: grid; grid-template-columns: 5px 1fr; gap: 10px;
  font-family: 'Jost', sans-serif; font-size: calc(var(--pk-text) * 0.98);
  line-height: 1.45; color: #3b3833;
}
.pk-grid .pkg-feat::before{
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-text, #7d6428);
  margin-top: calc((1.45em - 5px) / 2);
}
/* Кнопка карточки — тихая ссылка, а не блок: на референсе её нет вовсе, но
   клик по ней подставляет пакет в форму заявки, и терять это нельзя. */
/* Две кнопки в ряд: тихая ссылка заказа и «Подробнее» */
.pk-grid .pkg-actions{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
/* ⚠️ Заказ — ОВАЛЬНАЯ КНОПКА, а не подчёркнутая ссылка (Босс 2026-09-24).
   Кнопка «Подробнее» рядом убрана, поэтому заказу отдана вся ширина карточки:
   это единственное действие в ней, и мельчить его больше незачем. */
.pk-grid .pkg-cta{
  display: block; width: 100%; text-align: center; white-space: normal;
  padding: 12px 16px; border-radius: 999px;
  background: var(--gold-btn, #9a7a32); border: 1px solid var(--gold-btn, #9a7a32);
  font-family: 'Jost', sans-serif; font-size: calc(var(--pk-text) * 0.82);
  font-weight: 600; letter-spacing: 0.06em; color: #fff;
  text-decoration: none; line-height: 1.25;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pk-grid .pkg-cta:hover{ background: var(--dark); border-color: var(--dark); color: #fff; }
/* На тёмной карточке заливка спорила бы с фоном — там кнопка обводкой. */
.pk-grid .pkg.featured .pkg-cta{
  background: transparent; border-color: rgba(201, 169, 97, 0.75); color: #f0e2bf;
}
.pk-grid .pkg.featured .pkg-cta:hover{ background: rgba(201, 169, 97, 0.95); border-color: rgba(201, 169, 97, 0.95); color: #1c1a16; }
/* Перекрасы для тёмной карточки */
.pk-grid .pkg.featured h3,
.pk-grid .pkg.featured .pkg-price{ color: #f6efe0; }
.pk-grid .pkg.featured .pkg-desc,
.pk-grid .pkg.featured .pkg-feat{ color: rgba(246, 239, 224, 0.82); }
.pk-grid .pkg.featured .pkg-from,
.pk-grid .pkg.featured .pkg-price-note{ color: rgba(246, 239, 224, 0.6); }
.pk-grid .pkg.featured .pkg-divider{ background: rgba(201, 169, 97, 0.4); }
.pk-grid .pkg.featured .pkg-badge{ border-color: rgba(201, 169, 97, 0.7); color: #c9a961; }
.pk-grid .pkg.featured .pkg-feat::before{ background: #c9a961; }
.pk-grid .pkg-cta--on-dark{ color: #c9a961; }

/* ── Нижняя полоса ────────────────────────────────────────────────────────── */
/* ⚠️ Полоса «Нужен индивидуальный состав услуг?» вынута ИЗ ПОТОКА и лежит в
   свободной правой части кадра — там, где стул (идея Босса 2026-09-24).
   Так она отдаёт карточкам свои ~100px высоты, и креатив помещается целиком.
   На узких экранах (ниже 1280) возвращается в поток — там кадр идёт полосой
   сверху и свободного места справа нет. */
.pk-bar{
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px);
  padding: 14px 18px;
  background: rgba(252, 250, 246, 0.96);
  border: 1px solid rgba(154, 122, 50, 0.25);
}
/* ⚠️ Полоса уходит в свободную правую зону только с 1600px: ниже карточки
   занимают всю ширину колонки, и абсолютная полоса ложилась прямо на них
   (проверено на 1280/1366/1440). Там она остаётся в потоке. */
@media (min-width: 1600px){
  .pk-inner{ position: relative; }
  .pk-bar-text{ min-width: 0; }
  /* ⚠️ Кнопке разрешён перенос: «Рассчитать индивидуальный формат» одной
     строкой не помещается в узкую полосу и уезжала за её край. */
  .pk-bar-cta{
    flex: none; align-self: stretch; text-align: center;
    white-space: normal; line-height: 1.3; padding: 11px 14px;
    font-size: calc(var(--pk-text) * 0.76);
  }
}
/* ⚠️ Полоса ПОЯВЛЯЕТСЯ С ЗАДЕРЖКОЙ (Босс 2026-09-24: «чтобы человек сначала
   увидел фигуру, а блок появился спустя время»). Класс .is-in вешает v3.js,
   когда экран попадает в зону видимости; задержка — в transition-delay, а не
   в таймере JS: без JS полоса просто видна сразу (см. .no-js ниже).
   ⚠️ Прятать можно ТОЛЬКО там, где полоса абсолютная (≥1600px). Ниже она
   стоит в потоке, и скрытый блок оставил бы дыру в раскладке. */
@media (min-width: 1600px){
  .pk-bar{
    /* ⚠️ Полоса стоит в свободной правой части кадра — там, где стул (идея
    Босса). Ширина считается от места МЕЖДУ картами и краем: карточки
    занимают левые ~70% колонки, поэтому 26% и прижатие вправо. Колонкой,
    а не строкой: в узкой зоне строка сжималась в столбик по слову и
    кнопка уезжала за край (замер: полоса 860px наезжала на карточки). */
    /* right: 96px — правее сидят плавающие кнопки мессенджеров (fixed,
    всегда поверх), и у края они перекрывали кнопку расчёта. */
    /* ⚠️ Уровень ГРУДИ фигуры, а не ног (Босс 2026-09-24): у низа полоса
    перекрывала ботинки и читалась как подпись к ним. 30% высоты секции —
    замер по кадру: голова начинается около 8%, грудь — 27…34%. */
    position: absolute; right: 96px; top: 30%; bottom: auto; z-index: 2;
    width: min(24%, 390px); padding: 16px 18px;
    flex-direction: column; align-items: flex-start; gap: 10px;
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 20s;   /* Босс 2026-09-24: «побольше, секунд 20-30, чтобы человек успел почитать блоки» */
  }
  .pk-bar.is-in{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .pk-bar{ opacity: 1 !important; transform: none !important; transition: none !important; }
}
.pk-bar-icon{
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-btn, #8d6f2d); color: #fff;
}
.pk-bar-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pk-bar-text b{
  /* заголовок строки «Событие не обязано помещаться в пакет» — строки ровные, без одинокого слова (Босс 2026-09-24) */
  text-wrap: balance;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; /* жирный (Босс 2026-09-24) */
  font-size: calc(var(--pk-text) * 1.5); line-height: 1.2; color: var(--dark);
}
.pk-bar-text i{
  font-style: normal; font-family: 'Jost', sans-serif;
  font-size: calc(var(--pk-text) * 0.94); line-height: 1.5; color: #4f4a43;
}
/* Надпись на кнопке длинная, и в общем кегле кнопка перевешивала полосу —
   здесь она чуть мельче базовой .btn-gold. */
.pk-bar-cta{
  flex: none; padding: 13px 24px;
  font-size: calc(var(--pk-text) * 0.86); letter-spacing: 0.1em;
}

/* Список цен — только на телефоне (он уже был в блоке) */
.pk-inner .pkg-summary{ display: none; }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 1279px){
  .pk{ display: block; padding: 0 0 var(--pk-pad); min-height: 0; --pk-text: 14.5px; }
  .pk > picture{ display: block; }
  .pk-scene{
    position: static; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-position: center;
  }
  .pk > .wrap{
    max-width: 1456px; margin: 0 auto;
    padding-left: clamp(20px, calc(var(--pk-vw) * 0.045), 64px);
    padding-right: clamp(20px, calc(var(--pk-vw) * 0.045), 64px);
  }
  .pk-inner{ padding-top: var(--pk-pad); }
}
@media (max-width: 1100px){
  /* карусели нет: карточки снова сеткой, лента и стрелки выключены.
     Полосу под стрелки тоже убираем — иначе сетка была бы уже на 56px. */
  .pk-carousel{ overflow: visible; width: 100%; }
  .pk-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; transform: none !important; }
  .pk-nav{ display: none; }
  /* Колонка стала узкой — шапка в одну строку тут уже не строка, а каша.
     Возвращаем ей обычную вертикаль: высота секции здесь не ограничена. */
  .pk-head{ display: block; }
  /* ⚠️ Здесь надстрочник ВОЗВРАЩАЕТСЯ В ПОТОК, над заголовком. Позиция «над
     головой» — приём для широкого экрана: тут сцена идёт узкой полосой сверху,
     и надпись, привязанная к секции, ложилась Феликсу на ноги (высота секции
     считается вместе с карточками, поэтому проценты дают совсем не ту точку). */
  .pk-eyebrow{
    position: static; transform: none; margin: 14px auto 0;
    width: 100%; max-width: 1456px;
    padding-left: clamp(20px, calc(var(--pk-vw) * 0.045), 64px);
    padding-right: clamp(20px, calc(var(--pk-vw) * 0.045), 64px);
  }
  .pk-heading{ margin-bottom: 8px; }
  .pk-sub{ max-width: 64ch; font-size: calc(var(--pk-text) * 1.02); }
}
@media (max-width: 760px){
  .pk-grid{ display: grid; grid-template-columns: 1fr; }
  .pk-inner .pkg-summary{ display: block; }
  .pk-inner .pkg-summary-note{
    display: block; margin: 8px 0 0; font-family: 'Jost', sans-serif;
    font-size: calc(var(--pk-text) * 0.85); line-height: 1.4; color: var(--mid);
  }
  .pk-bar{ flex-direction: column; align-items: flex-start; }
  .pk-bar-cta{ width: 100%; text-align: center; }
}
/* Там, где полоса стоит столбиком (≥1600 — колонка справа у фигуры; ≤760 — телефон), значок подарка
   занимал отдельную строку и растягивал блок (Босс 2026-09-24: «смотрится кучно»). Теперь значок и
   заголовок в одну строку, описание и кнопка — ниже во всю ширину. .pk-bar-text растворён в сетке. */
@media (min-width: 1600px), (max-width: 760px){
  .pk-bar{ display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 10px; }
  .pk-bar-text{ display: contents; }
  .pk-bar-icon{ grid-column: 1; grid-row: 1; }
  .pk-bar-text b{ grid-column: 2; grid-row: 1; }
  .pk-bar-text i{ grid-column: 1 / -1; grid-row: 2; }
  .pk-bar-cta{ grid-column: 1 / -1; grid-row: 3; }
}

/* ============================================================
   ЭКРАН «ИЗБРАННЫЕ РАБОТЫ» (Босс 2026-09-22, ТЗ-папка «Screen_05_Cases»)
   Слева Феликс с микрофоном у красной арки «Good Events Better People»,
   справа пустое кремовое поле — в нём шапка, сетка кейсов, «Ещё» и кнопка.

   ⚠️ ЗАМЕРЫ ПО ЯРКОСТИ ПИКСЕЛЕЙ (не на глаз):
        занятая зона (Феликс + арка + колонна + кофр) кончается на 0.33
        ширины кадра — максимум по всем строкам 0.329 на высоте 0.30;
        дальше поле ровное: с 0.35 минимальная яркость 206, средняя 230+.
   Отсюда колонка контента: 0.355…0.965. Меняете сцену — перемерять.

   ⚠️ КАДР ПРИБИТ К ВЕРХУ И НЕ РАСТЯГИВАЕТСЯ — здесь НЕ object-fit: cover,
   как на соседних экранах-сценах. Причина: список кейсов раскрывается
   кнопкой «Ещё» (6 карточек → 15), секция становится вдвое выше кадра, и
   cover раздул бы сцену до неузнаваемости — Феликс уехал бы под текст.
   Картинка лежит своей пропорцией по всей ширине сверху, а секция растёт
   вниз по цвету поля.

   ⚠️ ФОН СЕКЦИИ — ЦВЕТ САМОГО ПОЛЯ, #f7e7d8, а НЕ сайтовый --cream
   (#f5f3ee): поле тёплое, --cream холодный, и на раскрытом списке под
   кадром был бы виден стык. Нижняя кромка кадра чуть темнее поля, поэтому
   поверх неё лежит короткая растяжка .cx::after.
============================================================ */
.cx{
  /* ⚠️ 100vw делим на zoom: шире 1920 секция отмасштабирована (wide.css). */
  --cx-vw: calc(100vw / var(--site-zoom, 1));
  /* ⚠️ Поля и кегль считаем от ШИРИНЫ, а не от vh: высота кадра тоже задана
     шириной, и привязка к высоте окна делала бы запас непредсказуемым. */
  --cx-pad: clamp(18px, calc(var(--cx-vw) * 0.0155), 36px);
  /* Кегль карточек выжат замером: всё содержимое обязано уложиться в кадр
     в свёрнутом виде (6 карточек). Подробности — в changelog. */
  --cx-text: clamp(11px, calc(var(--cx-vw) * 0.0072), 14.5px);
  /* ⚠️ Высота превью — множитель к кеглю, ВЫЖАТ ЗАМЕРОМ.
     2026-09-22, второй заход: «Показываю.» ушло в строку к предыдущей, заголовок
     стал двухстрочным, и освободившаяся высота отдана фото. Максимум, который
     ещё влезает в кадр: 16 при 1700px, 17 при 1920 и 2560 — берём 15.5 с
     запасом на разное отрисовывание шрифта (было 14). Превью при 1920 —
     214px вместо 194. Поднимете выше — контент вылезет за кадр на узком краю
     диапазона. Перемерять при любой правке шапки или хвоста секции. */
  --cx-photo: 15.5;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--cx-pad) 0;
  display: flex; align-items: center;
  min-height: calc(var(--cx-vw) * 0.5625);
}
.cx-scene{
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: auto; display: block;
}
/* Стык кадра с фоном секции виден только на раскрытом списке — короткая
   растяжка от цвета нижней кромки кадра к цвету поля. */
.cx > .wrap{
  max-width: none;
  padding-left: calc(var(--cx-vw) * 0.355);
  padding-right: calc(var(--cx-vw) * 0.035);
}
.cx-inner{ position: relative; z-index: 2; width: 100%; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.cx-eyebrow::after{
  content: ''; width: 46px; height: 1px;
  background: var(--border-gold, rgba(154, 122, 50, 0.5));
}
/* Последняя строка заголовка — золотом (шаблон сам выделяет её в span). */
.cx-heading-gold{ color: var(--gold-btn, #8d6f2d); }

/* ── Сетка кейсов внутри кадра ─────────────────────────────────────────── */
/* ⚠️ ПРЕВЬЮ КВАДРАТНОЕ 1:1 (Босс 2026-09-22: «сможем сделать место под карточку
   фото в соотношении 1 к 1?»). Высота теперь не множитель к кеглю, а сторона
   карточки, поэтому секция стала выше кадра 16:9 примерно на 260px: низ уходит
   на цвет поля — ровно так же, как при раскрытии списка кнопкой «Ещё» (кадр
   прибит к верху и не растягивается). Вернуть прямоугольник — снять
   aspect-ratio и вернуть height ниже. */
.cx .case-photo{ height: auto; aspect-ratio: 1 / 1; }
.cx .case-body{
  padding: calc(var(--cx-text) * 0.95) calc(var(--cx-text) * 1.15);
  gap: 4px;
}
.cx .case-format{ font-size: calc(var(--cx-text) * 0.78); letter-spacing: 0.14em; }
.cx .case-title{ font-size: calc(var(--cx-text) * 1.42); line-height: 1.22; }
.cx .case-meta{ font-size: calc(var(--cx-text) * 0.85); padding-top: 5px; }

/* Плитка «Смотреть все мероприятия» — в свёрнутом виде скрыта, появляется
   вместе с остальными кейсами. Её собственная min-height в кадре не нужна:
   высоту задаёт карточка того же ряда. */
.cx .cases-all{
  min-height: 0; padding: calc(var(--cx-text) * 2) calc(var(--cx-text) * 1.4);
  gap: calc(var(--cx-text) * 1.2);
}
.cx .cases-all-label{ font-size: calc(var(--cx-text) * 1.75); }

/* ── Хвост: «Ещё» и кнопка ─────────────────────────────────────────────── */
.cx .cases-cta .btn{
  padding: calc(var(--cx-text) * 0.95) calc(var(--cx-text) * 2);
  font-size: calc(var(--cx-text) * 0.86);
}

/* ── Адаптив ───────────────────────────────────────────────────────────── */
/* Ниже 1700px — вертикальная перестройка, как у соседних экранов-сцен:
   кадр полосой сверху, контент под ним по цвету поля. */
@media (max-width: 1279px){
  .cx{ display: block; padding: 0 0 var(--cx-pad); min-height: 0; --cx-text: 14.5px; }
  .cx > picture{ display: block; }
  .cx-scene{ position: static; width: 100%; height: auto; }
  .cx::after{ display: none; }
  .cx > .wrap{
    max-width: 1456px; margin: 0 auto;
    padding-left: clamp(20px, calc(var(--cx-vw) * 0.045), 64px);
    padding-right: clamp(20px, calc(var(--cx-vw) * 0.045), 64px);
  }
  .cx-inner{ padding-top: var(--cx-pad); }
  .cx .case-photo{ height: auto; aspect-ratio: 1 / 1; }   /* квадрат и в перестроенной раскладке */
}

/* ============================================================
   ЭКРАН «ФОРМАТЫ МЕРОПРИЯТИЙ» (Босс 2026-09-22, ТЗ-папка «Screen_04_Formats»)
   Два кадра друг на друге: B2C (свадьба) снизу, B2B (корпоратив) сверху,
   B2B обрезается clip-path по --split (0…100 — где стоит ручка, в %
   ширины). Ручку тянут мышью/пальцем/стрелками (v3.js, «ЭКРАН ФОРМАТОВ»).
   Дотянули до края — секция получает fx--b2b / fx--b2c: фон одной
   категории, и в слотах чужой колонки вместо её карточек встают
   карточки этой категории (каждый слот — две карточки в одной ячейке
   сетки, видна одна). Антиквиз по центру — для обеих категорий.

   ⚠️ style="" в разметке нельзя (CSP): начальное --split = 50 задаёт
   @property ниже, дальше v3.js пишет его через CSSOM.
   ⚠️ @property нужен и для анимации: без регистрации переменная не
   анимируется, и «прилипание» к краю было бы скачком.
============================================================ */
@property --split { syntax: '<number>'; inherits: true; initial-value: 50; }
.fx{
  --fx-vw: calc(100vw / var(--site-zoom, 1));
  --fx-pad: clamp(24px, calc(var(--fx-vw) * 0.022), 48px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(var(--fx-vw) * 0.5625);
  padding: var(--fx-pad) 0;
  display: flex; align-items: center;
  background: #1a1612;
  touch-action: pan-y;
}
.fx.is-snapping{ transition: --split 0.45s cubic-bezier(.2,.7,.2,1); }
.fx-bg{ position: absolute; inset: 0; z-index: 0; }
.fx-layer{ position: absolute; inset: 0; }
.fx-layer picture, .fx-bg-img{ display: block; width: 100%; height: 100%; }
.fx-bg-img{ object-fit: cover; object-position: center; }
.fx-layer--b{ clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); }
/* Вуали: тёмная у B2B, тёплая светлая у B2C — под читаемость подписей сторон.
   Сверху общая растяжка — под заголовок, который стоит на стыке двух кадров. */
.fx-layer--b::after{ content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,10,8,.72), rgba(12,10,8,.45) 60%, rgba(12,10,8,.55)); }
.fx-layer--c::after{ content: ''; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(248,240,228,.55), rgba(248,240,228,.18) 60%, rgba(248,240,228,.3)); }
.fx-bg::after{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(14,11,8,.62), rgba(14,11,8,0)); }

/* Линия-граница: под карточками (z 1), по ней тоже можно тянуть. */
.fx-line{
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 28px;
  left: calc(var(--split) * 1%); transform: translateX(-50%);
  cursor: ew-resize;
}
.fx-line::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(to bottom, rgba(230,199,122,0), rgba(230,199,122,.85) 18%, rgba(230,199,122,.85) 82%, rgba(230,199,122,0)); }
.fx-knob{
  position: absolute; z-index: 4; top: 50%;
  /* У края ручка не уезжает за кадр (секция обрезает всё, что вне её), иначе
     из положения «весь фон B2B/B2C» её было бы не за что взять обратно. */
  left: clamp(44px, calc(var(--split) * 1%), calc(100% - 44px)); transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: ew-resize; touch-action: none;
  background: rgba(22,18,13,.78); color: #e6c77a;
  border: 1px solid rgba(230,199,122,.8);
  box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 6px rgba(230,199,122,.12);
  backdrop-filter: blur(6px);
  transition: box-shadow .2s, background .2s;
}
.fx-knob:hover, .fx-knob.is-drag{ background: rgba(22,18,13,.92); box-shadow: 0 6px 24px rgba(0,0,0,.35), 0 0 0 10px rgba(230,199,122,.18); }
.fx-knob:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 4px; }

.fx > .wrap{ max-width: none; padding-left: calc(var(--fx-vw) * 0.028); padding-right: calc(var(--fx-vw) * 0.028); }
.fx-inner{
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1fr minmax(0, 1180px) 1fr;
  grid-template-areas: "sb head sc" "sb grid sc";
  column-gap: clamp(16px, calc(var(--fx-vw) * 0.015), 32px);
  pointer-events: none;           /* пустоты не мешают тянуть линию под ними */
}
/* тексты экрана (надпись, заголовок, подписи колонок) — выделяются и не пропускают перетаскивание линии */
.fx-inner a, .fx-inner .fx-eyebrow, .fx-inner .fx-heading, .fx-inner .fx-side-title{ pointer-events: auto; }

.fx-head{ grid-area: head; text-align: center; margin-bottom: clamp(18px, calc(var(--fx-vw) * 0.016), 34px); }
.fx-eyebrow{
  display: inline-block; padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(230,199,122,.55);
  font-family: 'Jost', sans-serif; font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: #e6c77a;
}
/* Кегль и жирность — как у заголовка «Мне доверяют» (.cl-heading: тот же clamp, 600, 1.05), цвет — свой
   светлый (Босс 2026-09-25: «кегль и жирность как у „События для тех…“, только цвет белый оставь»). */
.fx-heading{
  margin: 0; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(1.6rem, calc(var(--fx-vw) * 0.026), 3.2rem); line-height: 1.05;
  color: #f7f0e3; text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

/* Подписи сторон */
.fx-side{ align-self: start; padding-top: clamp(40px, calc(var(--fx-vw) * 0.03), 70px);
  display: flex; flex-direction: column; gap: 14px; }
.fx-num{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .08em; opacity: .85; }
.fx-side-title{
  font-family: 'Cormorant Garamond', serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.1rem, calc(var(--fx-vw) * 0.0145), 1.75rem); line-height: 1.12; letter-spacing: .04em;
  max-width: 9em; padding-bottom: 14px; border-bottom: 1px solid currentColor;
}
.fx-side--c{
  grid-area: sc; align-items: flex-end; text-align: right; color: #2d241a;
  opacity: calc(1 - var(--pb));
}
.fx-side--b{
  grid-area: sb; align-items: flex-start; text-align: left; color: #f3ead9;
  opacity: calc(1 - var(--pc));
}

/* Сетка: две колонки по два слота + антиквиз по центру */
.fx-grid{
  grid-area: grid; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(56px, calc(var(--fx-vw) * 0.05), 110px);    /* коридор под линию и ручку */
  row-gap: clamp(10px, calc(var(--fx-vw) * 0.008), 16px);
}
/* align-content: start — колонки держат один ритм, даже если слотов в них
   разное число (страховка: при растяжении между карточками появлялась дыра). */
.fx-col{ display: grid; row-gap: inherit; align-content: start; }
.fx-slot{ display: grid; }
.fx-slot > .fx-card{ grid-area: 1 / 1; }
.fx-col--r .fx-card:not(.fx-card--alt){ opacity: calc(1 - var(--pb)); }
.fx-col--r .fx-card--alt{ opacity: var(--pb); }
.fx-col--l .fx-card:not(.fx-card--alt){ opacity: calc(1 - var(--pc)); }
.fx-col--l .fx-card--alt{ opacity: var(--pc); }
.fx-card--alt{ pointer-events: none; }
.fx--b2c .fx-col--l .fx-card--alt,
.fx--b2b .fx-col--r .fx-card--alt{ pointer-events: auto; z-index: 1; }
.fx--b2c .fx-col--l .fx-card:not(.fx-card--alt),
.fx--b2b .fx-col--r .fx-card:not(.fx-card--alt){ pointer-events: none; }
.fx-quiz{ grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% + 40px)); }

.fx-card picture{ position: absolute; inset: 0; z-index: 0; }
.fx-card-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fx-card:hover .fx-card-img{ transform: scale(1.04); }
.fx-card::before{ content: ''; position: absolute; inset: 0; z-index: 1; }
.fx-card--b::before, .fx-card--c::before, .fx-card--q::before{ background: linear-gradient(90deg, rgba(14,11,8,.9), rgba(14,11,8,.62) 55%, rgba(14,11,8,.25)); }
/* Белая дымка на карточках частных событий снята (Босс 2026-09-22) — у всех карточек одна тёмная растяжка. */
.fx-card-body{ position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; max-width: 34em; }
.fx-card-title{
  font-family: 'Cormorant Garamond', serif; font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.15rem, calc(var(--fx-vw) * 0.0145), 1.8rem); line-height: 1.05;
}
.fx-card{
  /* Карточка: фото на всю плашку, текст слева на растяжке, стрелка справа */
  /* ⚠️ Пропорция 16:9, а не фиксированная низкая высота (Босс 2026-09-22: «сделай
  карточки побольше, чтоб фото так не обрезалось в длину»). Было ~2.6:1 — фото
  резалось в узкую полосу. Экран из-за этого выше кадра 16:9 — это нормально:
  фон cover, ручка по центру высоты. */
  position: relative; display: flex; align-items: flex-end; gap: 16px;
  aspect-ratio: 16 / 9; padding: clamp(16px, calc(var(--fx-vw) * 0.014), 28px);
  border-radius: 10px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(230,199,122,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  color: #f5ede0;
}
.fx-card-desc{
  font-family: 'Jost', sans-serif; font-size: clamp(12.5px, calc(var(--fx-vw) * 0.0078), 15px); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: rgba(245,237,224,.84);
}
.fx-card:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .fx.is-snapping{ transition: none; }
  .fx-card-img{ transition: none; }
}

/* ≤1100px: боковые подписи уходят над сеткой */
@media (max-width: 1100px){
  .fx-inner{ grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "sb sc" "grid grid"; }
  .fx-side{ padding-top: 0; margin-bottom: 18px; }
  .fx-grid{ column-gap: 64px; }
}
/* ≤760px: тянуть ручку пальцем по узкому экрану неудобно и мешает прокрутке —
   ручка и линия скрыты, раскладка в столбик: две бизнес-карточки, две
   частные, антиквиз. Фон — кадр B2B целиком. */
@media (max-width: 760px){
  .fx{ min-height: 0; }
  .fx-line, .fx-knob{ display: none; }
  .fx-layer--b{ clip-path: none; }
  .fx-inner{ grid-template-columns: 1fr; grid-template-areas: "head" "grid"; }
  .fx-side{ display: none; }
  .fx-grid{ grid-template-columns: 1fr; }
  .fx-col{ row-gap: 10px; }
  .fx-quiz{ width: 100%; }
  .fx-card--alt{ display: none; }
  .fx-col .fx-card:not(.fx-card--alt){ opacity: 1; }
}

/* Кнопка «Все форматы» под антиквизом (Босс 2026-09-22) */
.fx-all{ grid-column: 1 / -1; justify-self: center; margin-top: clamp(8px, calc(var(--fx-vw) * 0.008), 16px); }
/* Сплошное золото с тёмным текстом (Босс 2026-09-22: «более контрастную золотую,
   стрелку убери»). Тёмный #1c1a16 на #e6c77a — 11:1. */
.fx-all-btn{
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 38px;
  font-family: 'Jost', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #1c1a16; text-decoration: none; background: #e6c77a;
  border: 1px solid #e6c77a; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 6px rgba(230,199,122,.18);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.fx-all-btn:hover{ background: #f1d894; box-shadow: 0 12px 34px rgba(0,0,0,.4), 0 0 0 9px rgba(230,199,122,.25); transform: translateY(-1px); }
.fx-all-btn:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 4px; }
@media (max-width: 760px){ .fx-all, .fx-all-btn{ width: 100%; justify-content: center; } }

/* ============================================================
   СТРАНИЦА «ВСЕ ФОРМАТЫ» /formats (Босс 2026-09-22). Шаблон views/formats-index.ejs.
   Карточки того же рисунка, что на экране форматов главной (фото на всю
   плашку 16:9, тёмная растяжка слева, стрелка), три группы как в мега-меню.
============================================================ */
.u-nav-spacer{ height: 64px; }
.fa{ padding: 40px 0 88px; background: var(--cream); position: relative; isolation: isolate; }
/* Хлебные крошки каталога; .site-crumbs — тот же вид на блоге, статьях, архиве и оборудовании (Босс 2026-09-25) */
.fa-crumbs, .site-crumbs{ display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-bottom: 28px; }
.fa-crumbs a, .site-crumbs a{ color: var(--gold-text); text-decoration: none; }
.site-crumbs a:hover{ color: var(--dark); }
/* длинное название статьи — одной строкой с многоточием, а не в три строки */
.site-crumbs [aria-current]{ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-eyebrow{ display: block; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.fa-h1{ margin: 0 0 14px; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; color: var(--dark); }
.fa-lead{ max-width: 620px; margin: 0 0 48px; color: var(--mid); font-size: 15px; line-height: 1.7; }
/* Переключатель групп каталога (Босс 2026-09-25): прямоугольные кнопки одной строкой, выбранная залита
   золотом — как фильтр архива .ev-filter-btn, но крупнее; на телефоне сетка 2×2. */
.fa-tabs{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -12px 0 44px; }
.fa-tab{
  min-height: 56px; padding: 12px 16px; border: 1px solid var(--border-gold); border-radius: 2px;
  background: var(--white); color: var(--mid); font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; text-align: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.fa-tab:hover{ border-color: var(--gold); color: var(--dark); }
.fa-tab[aria-pressed="true"]{ background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.fa-tab:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.fa-group[hidden]{ display: none; }
/* Страница оборудования (Босс 2026-09-25): те же группы, сетка и переключатель, что в каталоге /formats,
   но кнопок три — «Все / Звук / Свет» (на телефоне тоже в ряд: подписи короткие). */
.fa-tabs--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eq-tabs{ margin: 28px 0 34px; }
/* овальная кнопка «Калькулятор» под вводным текстом (Босс 2026-09-25) */
.eq-calc-btn{
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 26px;
  border: 1px solid var(--gold-btn); border-radius: 999px; background: transparent; color: var(--gold-text);
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: background .2s, color .2s;
}
.eq-calc-btn:hover{ background: var(--gold-btn); color: var(--white); }
.eq-calc-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
/* Калькулятор: галочки «что подбираем» (Звук / Свет) и карточки подобранных комплектов под ним (Босс 2026-09-25) */
.calc-pick{ margin-bottom: 22px; }
.calc-pick-opts{ display: flex; flex-wrap: wrap; gap: 10px; }
.calc-pick-opt{
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--border-gold); border-radius: 2px; background: var(--white);
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mid); transition: border-color .2s, color .2s;
}
.calc-pick-opt input{ width: 16px; height: 16px; margin: 0; accent-color: var(--gold-btn); cursor: pointer; }
.calc-pick-opt:has(input:checked){ border-color: var(--gold-btn); color: var(--dark); }
.calc-pick-opt:has(input:focus-visible){ outline: 2px solid var(--gold); outline-offset: 2px; }
.result-row[hidden]{ display: none; }
.eq-picked{ margin-top: 44px; }
.eq-picked > .label{ display: block; margin-bottom: 18px; }
.eq-picked[hidden]{ display: none; }
/* Калькулятор ОДНОЙ цельной карточкой (Босс 2026-09-25): «Что подбираем» → «Количество гостей» → «Рекомендованный
   комплект»; внутренние карточки без своих рамок и фона, разделы — через тонкую линию. */
.calc-card{ background: var(--white); border: 0.5px solid var(--border); padding: 28px; margin-bottom: 12px; }
.calc-card .calc-pick{ margin-bottom: 0; }
.calc-card .guests-card, .calc-card .result-card{
  background: none; border: 0; border-top: 0.5px solid var(--border); margin: 22px 0 0; padding: 22px 0 0;
}
.eq-calc-title{ margin-top: 8px; }
.eq-calc-title + .calc-grid{ margin-top: 28px; }
@media (max-width: 640px){ .calc-card{ padding: 18px 16px; } }
/* Фото-поля карточек комплектов — квадратные (Босс 2026-09-25; было 140px в высоту) */
.ebc-photo-slot{
  background: var(--cream-dark);
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  height: auto; aspect-ratio: 1 / 1;
}
/* «4 комплекта · от 15 000 до 35 000 ₽ · S / M / L / XL» — из прежних шапок списков, справа от заголовка группы */
.eq-group-meta{
  margin-left: auto; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.5; color: var(--soft); text-align: right;
}
@media (max-width: 760px){ .fa-tabs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: -16px 0 32px; } .fa-tab{ min-height: 52px; font-size: 12px; letter-spacing: .06em; padding: 10px 10px; } }
@media (max-width: 760px){
  .fa-tabs--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eq-tabs{ margin: 24px 0 28px; }
  .eq-group .fa-group-title{ flex-wrap: wrap; }
  /* название сжимается и переносится рядом с номером (как в каталоге), подпись — строкой ниже */
  .eq-group .fa-group-title > .eq-group-name{ flex: 1 1 0; min-width: 0; }
  .eq-group-meta{ flex-basis: 100%; margin-left: 48px; text-align: left; }
}
.fa-group{ margin-bottom: 56px; }
.fa-group-title{ display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2rem); text-transform: uppercase; letter-spacing: .04em; color: var(--dark); text-align: left; }
.fa-num{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center;
  font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .06em; color: var(--gold-text); flex: none; }
.fa-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* карточки квадратные 1:1 (Босс 2026-09-25: «увеличить размер, соотношение сторон один к одному»; было 16:10) */
.fa-card{ position: relative; display: flex; align-items: flex-end; gap: 14px; aspect-ratio: 1 / 1; padding: 22px;
  border-radius: 10px; overflow: hidden; text-decoration: none; color: #f5ede0;
  border: 1px solid rgba(154,122,50,.35); box-shadow: 0 12px 34px rgba(28,26,22,.14); }
.fa-card picture{ position: absolute; inset: 0; }
.fa-card-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fa-card::before{ content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14,11,8,.88), rgba(14,11,8,.35) 55%, rgba(14,11,8,.05)); }
.fa-card:hover .fa-card-img{ transform: scale(1.05); }
.fa-card-body{ position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fa-card-title{ font-family: 'Cormorant Garamond', serif; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.05; }
.fa-card-desc{ font-size: 13.5px; line-height: 1.45; color: rgba(245,237,224,.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fa-card-hover{
  /* Вместо кружка со стрелкой — золотая дымка на всей карточке и овальная «Подробнее»
     по центру, как у карточек экрана форматов главной (.fx-card-hover; Босс 2026-09-25). */
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  opacity: 0; transition: opacity .28s;
  background: linear-gradient(rgba(230,199,122,.34), rgba(154,122,50,.44));
  backdrop-filter: blur(1px);
}
.fa-card-btn{
  padding: 14px 32px; border-radius: 999px; background: #e6c77a; color: #1c1a16;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.96); transition: transform .28s;
}
.fa-card:hover .fa-card-hover, .fa-card:focus-visible .fa-card-hover{ opacity: 1; }
.fa-card:hover .fa-card-btn, .fa-card:focus-visible .fa-card-btn{ transform: none; }
@media (prefers-reduced-motion: reduce){ .fa-card-hover, .fa-card-btn{ transition: none; } }
@media (hover: none){
  /* на тачскрине наведения нет — кнопка видна сразу, без дымки, в углу, чтобы не закрывать название */
  .fa-card-hover{ opacity: 1; background: none; backdrop-filter: none; place-items: start end; padding: 14px; }
  .fa-card-btn{ transform: none; padding: 8px 16px; font-size: 11px; letter-spacing: .14em; }
}
.fa-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1100px){ .fa-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .fa-grid{ grid-template-columns: 1fr; } .fa{ padding-top: 24px; } }

/* ============================================================
   ПОДВАЛ НА СЦЕНЕ (Босс 2026-09-22, ТЗ-папка «Screen_14_Footer»)
   Фон — тёмная стена с монограммой «ФЦ» слева и световой щелью справа
   (public/images/footer/footer-door.*, tools/make_footer_assets.py).
   ⚠️ С 2026-09-25 кадр ВЫШЕ исходника (1.75:1, верх стены отражён вверх) и прижат к НИЗУ:
   подвал вырос («Наверх», документы) и фон cover растягивался по высоте — щель света
   уезжала за правый край (Босс: «нет полосы света, как открывающейся двери»). Теперь
   лишняя стена сверху просто обрезается, а кадр влезает по ширине вместе со щелью.
   Раскладка по FOOTER_EXAMPLE, значки контактов — НАШИ цветные бренд-знаки
   (Босс: «только значки наши красивые оставь») — их правила выше не трогаем.
   Разметка та же на всех страницах с .footer (главная, /events, /equipment,
   /reviews), поэтому стиль общий.

   ⚠️ ЗАМЕРЫ ФОНА: монограмма занимает 0…0.135 ширины кадра, щель света —
   около 0.889. Колонки стоят между ними (0.16…0.86), подписи-украшения —
   у левого края над монограммой и справа за щелью.
   ⚠️ Фон задан через CSS background, а не <img>: одна правка вместо
   четырёх шаблонов. image-set отдаёт webp, где поддерживается.
============================================================ */
.footer{
  background: #0f0e0b;
  --ft-vw: calc(100vw / var(--site-zoom, 1));
  position: relative; overflow: hidden; border-top: 0;
  background-color: #0b0a08;
  background-image: url('/images/footer/footer-door-1920.jpg');
  background-image: image-set(url('/images/footer/footer-door-1920.webp') type('image/webp'), url('/images/footer/footer-door-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: left bottom; background-repeat: no-repeat;
  min-height: calc(var(--ft-vw) * 0.4285);
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 1921px){
  .footer{ background-image: image-set(url('/images/footer/footer-door-2560.webp') type('image/webp'), url('/images/footer/footer-door.jpg') type('image/jpeg')); }
}
.footer::before{
  /* Подписи-украшения по краям, как на примере */
  position: absolute; z-index: 1; pointer-events: none; white-space: pre;
  font-family: 'Jost', sans-serif; font-size: 0.56rem; letter-spacing: 0.32em; line-height: 2.1;
  text-transform: uppercase; color: rgba(230,199,122,.42);
  padding-bottom: 16px; border-bottom: 0;
  background: linear-gradient(rgba(230,199,122,.5), rgba(230,199,122,.5)) left bottom / 26px 1px no-repeat;
  content: 'События\A со смыслом\A остаются\A надолго'; left: calc(var(--ft-vw) * 0.037); top: calc(var(--ft-vw) * 0.055);
}
/* Правая подпись «Люди · события · впечатления» снята (Босс 2026-09-22). */
.footer > .wrap{
  position: relative; z-index: 2; max-width: none; width: 100%;
  padding-left: calc(var(--ft-vw) * 0.037); padding-right: calc(var(--ft-vw) * 0.037);
}
.footer-main{
  grid-template-columns: 1.45fr 0.85fr 0.95fr 1.1fr;
  gap: clamp(28px, calc(var(--ft-vw) * 0.03), 64px);
  padding: calc(var(--ft-vw) * 0.085) calc(var(--ft-vw) * 0.13) calc(var(--ft-vw) * 0.03) calc(var(--ft-vw) * 0.123);
}
.footer-logo-name{
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  font-size: clamp(1.6rem, calc(var(--ft-vw) * 0.0185), 2.4rem); font-weight: 500; letter-spacing: .08em;
  line-height: 1.15; color: #f5efe3; margin-bottom: 18px; max-width: 11em;
}
.footer-logo-role{
  text-transform: uppercase;
  font-size: .62rem; letter-spacing: .34em; line-height: 2; color: #d9b96e; max-width: 26em;
}
.footer-desc{ font-size: .95rem; color: rgba(245,239,227,.72); line-height: 1.6; max-width: 26em; margin-top: 20px; }
.footer-address{
  /* Footer address */
  font-style: normal;
  margin-top: 26px; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245,239,227,.5); line-height: 2;
}
.footer-address a{
  display: inline-block; margin-top: 6px; font-size: 1.15rem; letter-spacing: .04em; text-transform: none;
  color: #d9b96e; text-decoration: none;
}
.footer-col-title{
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  font-size: .62rem; letter-spacing: .3em; color: #d9b96e; margin-bottom: 26px;
  padding-bottom: 14px; position: relative;
}
.footer-col-title::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 24px; height: 1px; background: #d9b96e; }
.footer-links{
  display: flex; flex-direction: column;
  gap: 13px;
}
.footer-links a{ font-size: .9rem; color: rgba(245,239,227,.78); }
.footer-links a:hover{ color: #e6c77a; }
.footer-contact-item{
  display: flex;
  align-items: center; gap: 16px; margin-bottom: 22px;
}
.footer-contact-label{
  font-weight: 600;
  text-transform: uppercase;
  font-size: .56rem; letter-spacing: .26em; color: rgba(217,185,110,.75); margin-bottom: 4px;
}
.footer-contact-value{ font-size: .95rem; color: #f5efe3; }
.footer-contact-value:hover{ color: #e6c77a; }
.footer-bottom{
  border-top: 1px solid rgba(245,239,227,.14);
  /* справа запас под плавающие кнопки звонка/мессенджеров — иначе «Политика…» уходит под них */
  --fb-pr: clamp(84px, calc(var(--ft-vw) * 0.055), 120px);
  padding: 26px var(--fb-pr) 30px 0;
}

/* «Наверх» — у ВЕРХНЕЙ границы подвала по центру страницы (Босс 2026-09-24): зеркально «Листайте вниз»,
   прижатому к низу первого экрана (.hero-scroll) — стрелка вверх, надпись, тонкая линия вниз.
   Стоит прямым потомком .footer (absolute), поэтому центр — ровно центр страницы. Чтобы не наползать на
   имя в левой колонке, у .footer-main сверху запас не меньше 112px (ниже, после медиа-правил подвала). */
.footer-up{
  position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245, 239, 227, 0.72); text-decoration: none;
  transition: color 0.2s ease;
}
.footer-up::before{ content: '↑'; font-size: 1.1em; letter-spacing: 0; opacity: 0.75; }
.footer-up::after{ content: ''; width: 1px; height: 18px; background: rgba(245, 239, 227, 0.38); }
.footer-up:hover{ color: #e6c77a; }
@media (max-width: 960px){
  /* ≤960 круглых кнопок связи нет (их заменяет нижняя полоса) — запас справа не нужен, иначе строка смещена влево */
  .footer-bottom{
    flex-direction: column; text-align: center; gap: 12px;
    padding-right: 0;
  }
}

/* «Свободные даты / Календарь» под телефоном в левой колонке (Босс 2026-09-24): овальная кнопка
   с золотым контуром и значком календаря, в одну строку — ведёт к виджету свободных дат (#availability) */
.footer-calendar{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgba(217, 185, 110, 0.45); border-radius: 999px;
  font-size: .78rem; letter-spacing: .03em; line-height: 1.2; white-space: nowrap;
  color: rgba(245, 239, 227, 0.86); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.footer-calendar-ic{ flex-shrink: 0; width: 15px; height: 15px; color: #d9b96e; }
.footer-calendar:hover{ color: #e6c77a; border-color: #e6c77a; background: rgba(217, 185, 110, 0.08); }
@media (prefers-reduced-motion: reduce){ .footer-up, .footer-calendar{ transition: none; } }

/* ≤1280: колонкам тесно — снимаем внутренние поля, монограмма уходит под текст
   (фон приглушён, читается). Подписи-украшения прячем. */
@media (max-width: 1280px){
  .footer::before{ display: none; }
  .footer-main{ padding: 64px 0 36px; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .footer{ background-position: 20% bottom; }
}
@media (max-width: 960px){
  .footer-main{ grid-template-columns: 1fr 1fr; }
  .footer{ min-height: 0; }
}
@media (max-width: 640px){
  .footer-main{ grid-template-columns: 1fr; padding-top: 48px; }
  .footer > .wrap{ padding-left: 20px; padding-right: 20px; }
}
/* Знак «ФЦ» из шапки документов над именем (Босс 2026-09-25). Стоит в верхнем запасе колонки
   (под «Наверх» у .footer-main сверху ≥112px): отрицательный отступ сверху = высота знака + зазор,
   поэтому имя и заголовки колонок остаются на месте, а подвал не растёт — щель света фона не уезжает. */
.footer-crest{
  --crest: clamp(56px, calc(var(--ft-vw) * 0.045), 84px);
  display: block; width: var(--crest); margin: calc(var(--crest) * -0.965 - 18px) 0 18px;
}
.footer-crest img{ display: block; width: 100%; height: auto; }

/* Одна строка под колонками (Босс 2026-09-25): копирайт слева, документы и реквизиты ИП справа —
   раньше они шли отдельной строкой ниже со второй линией. ≤960 строка столбиком по центру. */
.footer-bottom{
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px 40px;
}
.footer-copy{
  font-size: .75rem; color: rgba(245,239,227,.55);
  flex: 0 0 auto; padding-top: 2px;
}
.footer-bottom .footer-legal{ margin: 0; padding: 0; border-top: 0; flex: 0 1 auto; text-align: right; }
.footer-bottom .footer-legal-links{ justify-content: flex-end; }
@media (max-width: 960px){
  .footer-bottom .footer-legal{ text-align: center; }
  .footer-bottom .footer-legal-links{ justify-content: center; }
  /* «Форматы» двумя столбцами (Босс 2026-09-25) — там, где названия помещаются в строку. На десктопе
     (961+) столбец узкий: названия ломались бы надвое, а высоту подвала задаёт левая колонка с именем. */
  /* столбцы по 6 и 5 пунктов сверху вниз, каждый по ширине своего самого длинного названия;
     не хватит места — сожмутся и перенесут слово, но не вылезут за колонку */
  .footer-col--formats .footer-links{
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto);
    grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 18px; row-gap: 13px;
  }
  /* 16px вместо 18: иначе два столбца «Форматов» (157 + 179px) не помещаются в колонку 320–350px
     (телефон 360–390, планшет 2×2) и длинные названия ломаются. «Разделы» — тем же размером. */
  .footer-links a{ font-size: 16px; }
}

/* место под «Наверх» у верхней границы подвала (.footer-up, низ линии — 90px от верха подвала):
   сверху не меньше 112px на всех ширинах — между линией и именем остаётся ≥20px воздуха */
.footer-main{
  display: grid;
  padding-top: max(112px, calc(var(--ft-vw) * 0.085));
}
@media (max-width: 1280px){ .footer-main{ padding-top: 112px; } }
/* 1141–1280: щель света фона (кадр 1.75:1, прижат к низу) встаёт у правого края — колонки заканчиваются
   раньше неё, иначе «Феликс Цареградский» в контактах ложится прямо на свет (2026-09-25) */
@media (max-width: 1280px) and (min-width: 1141px){ .footer-main{ padding-right: calc(var(--ft-vw) * 0.09); } }

/* ============================================================
   ЭКРАН «МНЕ ДОВЕРЯЮТ» (Босс 2026-09-22, ТЗ-папка «Screen_06_Clients»)
   Фон — камень с золотой лентой слева, светлое поле, терраса с горами справа.
   ⚠️ ЗАМЕРЫ ФОНА (яркость по полосам): тёмное слева до ~0.12, светлое поле
   0.18…0.55, дальше вид темнеет. Заголовок стоит на светлом поле (с 0.155);
   карточки непрозрачные и могут заходить на камень и на вид.
   Раскладка: список компаний (0.017…0.18) | кейс (центр) | три кадра галереи.
   Босс: «лишние надписи не делай, стрелки у кнопок не делай».
============================================================ */
.cl{
  --cl-vw: calc(100vw / var(--site-zoom, 1));
  --cl-pad: clamp(24px, calc(var(--cl-vw) * 0.02), 44px);
  --cl-text: clamp(13px, calc(var(--cl-vw) * var(--cl-k, 0.0098)), 19px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(var(--cl-vw) * 0.5625);
  padding: var(--cl-pad) 0; display: flex;
  background: #efe7dc;
}
.cl-scene{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.cl > picture{ position: absolute; inset: 0; z-index: 0; }
.cl > .wrap{ max-width: none; padding-left: calc(var(--cl-vw) * 0.017); padding-right: calc(var(--cl-vw) * 0.09); }
.cl-inner{
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: calc(var(--cl-vw) * 0.165) minmax(0, 1fr);
  /* список брендов начинается на строке заголовка (Босс 2026-09-22: «блок листания
     подними выше»), поэтому занимает обе строки левой колонки. */
  grid-template-areas: "list head" "list stage";
  column-gap: calc(var(--cl-vw) * 0.012);
}
.cl-head{
  grid-area: head; display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(16px, calc(var(--cl-vw) * 0.02), 48px); flex-wrap: wrap;
}
/* Надстрочник поднят к верху строки заголовка (Босс 2026-09-22: «надстрочник
   повыше сделай») — по базовой линии он стоял вровень с заголовком. */
.cl-eyebrow{
  order: 2; display: flex; align-items: center; gap: 14px;
  align-self: flex-start; margin: 2px 0 0;
  font-family: 'Jost', sans-serif; font-size: .6rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text, #7d6428);
}
/* линейка после надписи — «Среди клиентов ——» */
.cl-eyebrow::after{ content: ''; width: clamp(60px, calc(var(--cl-vw) * 0.07), 180px); height: 1px; background: var(--border-gold, rgba(154,122,50,.55)); }

/* ── Список компаний ─────────────────────────────────────────── */
.cl-list-wrap{ grid-area: list; display: flex; flex-direction: column; gap: 8px; min-height: 0; align-self: start; }
.cl-list{
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none;
  /* высоту задаёт сцена справа — список не растягивает секцию */
  max-height: var(--cl-list-h, 60vh);
}
.cl-list::-webkit-scrollbar{ display: none; }
.cl-list li{ scroll-snap-align: start; }
.cl-item{
  width: 100%; display: grid; grid-template-columns: 42% 1fr auto; align-items: center; gap: 10px;
  min-height: calc(var(--cl-text) * 5); padding: 10px 14px; text-align: left; cursor: pointer;
  background: rgba(252,249,244,.9); border: 1px solid rgba(154,122,50,.22); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(40,30,15,.08); transition: background .2s, border-color .2s, box-shadow .2s;
  font-family: 'Jost', sans-serif; color: #3b3833;
}
.cl-item:hover{ background: #fff; }
.cl-item.is-active{ background: #fffdf8; border-color: rgba(154,122,50,.85); box-shadow: 0 8px 24px rgba(40,30,15,.16), inset 0 0 0 1px rgba(154,122,50,.5); }
.cl-item:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.cl-item-logo .cl-logo, .cl-item-logo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cl-item-logo-text{ font-size: calc(var(--cl-text) * .78); font-weight: 600; text-align: center; line-height: 1.2; }
.cl-item-name{ font-size: calc(var(--cl-text) * .82); line-height: 1.25; min-width: 0; }
.cl-item-num{ font-size: calc(var(--cl-text) * .7); letter-spacing: .08em; color: #9a8d78; }
/* Белая часть стрелок сделана ярче (Босс 2026-09-22): на светлом фоне сцены
   полупрозрачная плашка сливалась, верхняя стрелка терялась совсем. */
.cl-scroll{
  flex: none; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: #fffdf9; color: #6b541f;
  border: 1px solid rgba(154,122,50,.5); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(40,30,15,.12);
  transition: background .2s, opacity .2s, border-color .2s;
}
.cl-scroll:hover{ background: #fff; border-color: rgba(154,122,50,.85); }
.cl-scroll:disabled{ opacity: .6; cursor: default; }
.cl-scroll:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Кейс ────────────────────────────────────────────────────── */
.cl-stage{ grid-area: stage; min-width: 0; }
.cl-panel{ display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--cl-vw) * 0.185); gap: calc(var(--cl-vw) * 0.01); }
.cl-panel[hidden]{ display: none; }
.cl-panel.is-in{ animation: cl-in .45s ease both; }
@keyframes cl-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.cl-case{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: rgba(250,246,239,.94); border: 1px solid rgba(154,122,50,.25); border-radius: 10px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(40,30,15,.12);
  /* пропорция подобрана замером (2026-09-22, после переноса кнопки заявки в
     левую колонку): предел — 12, берём 11.5 с запасом (снизу остаётся 58–90px
     на 1440…1920). Кадр справа вырос с 289 до 352px при 1920.
     ⚠️ Замерять с пересчётом высоты списка (resize), иначе список держит
     старую высоту и цифры врут. */
  aspect-ratio: 16 / var(--cl-ar, 11.5);
}
.cl-case-text{ display: flex; flex-direction: column; gap: calc(var(--cl-text) * .7); padding: calc(var(--cl-text) * 2) calc(var(--cl-text) * 2); min-width: 0; }
.cl-case-num{ font-family: 'Jost', sans-serif; font-size: calc(var(--cl-text) * .72); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text, #7d6428); }
.cl-case-title{ margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: calc(var(--cl-text) * 2.35); line-height: 1.05; color: var(--dark); min-height: 1.05em; }
.cl-case-meta{ font-family: 'Jost', sans-serif; font-size: calc(var(--cl-text) * .74); letter-spacing: .2em; text-transform: uppercase; color: #6b5f4f; min-height: 1.4em; }
.cl-case-desc{ margin: 0; font-family: 'Jost', sans-serif; font-size: var(--cl-text); line-height: 1.55; color: #3b3833; min-height: 3.1em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cl-gal{
  align-self: flex-start; margin-top: 4px; padding: 11px 22px; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: calc(var(--cl-text) * .72); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dark); background: transparent; border: 1px solid rgba(154,122,50,.7); border-radius: 999px; transition: background .2s, color .2s;
}
.cl-gal:hover{ background: var(--gold-btn, #8d6f2d); border-color: var(--gold-btn, #8d6f2d); color: #fff; }
.cl-gal:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.cl-letter:disabled, .cl-letter:disabled:hover{ margin-top: auto; max-width: 100%; cursor: default; color: #6b541f; background: transparent; border-color: rgba(154,122,50,.7); opacity: .8; }
.cl-gal--empty{ visibility: hidden; height: calc(var(--cl-text) * 2.6); }
.cl-case-quote{ margin: auto 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: calc(var(--cl-text) * 1.45); line-height: 1.3; color: #3a3129; min-height: 2.6em; }
.cl-case-quote cite{ display: block; margin-top: 6px; font-family: 'Jost', sans-serif; font-style: normal; font-size: calc(var(--cl-text) * .7); letter-spacing: .14em; text-transform: uppercase; color: #6b541f; }
.cl-case-photo{ position: relative; display: block; min-height: 100%; overflow: hidden; }
.cl-case-photo picture, .cl-case-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.cl-case-photo:hover img{ transform: scale(1.03); }
.cl-case-photo:focus-visible{ outline: 2px solid var(--gold); outline-offset: -4px; }

/* Пустые поля единой заготовки: рамка-плашка того же размера (Босс: «где не хватает
   контента — оставь поля»). */
.cl-empty{ background: linear-gradient(135deg, rgba(236,228,214,.9), rgba(246,240,230,.9)); border: 1px dashed rgba(154,122,50,.35); }

/* ── Три кадра справа ────────────────────────────────────────── */
/* Две плитки вместо трёх (Босс 2026-09-22): площадь третьей и один отступ
   отданы оставшимся — кадры крупнее. */
.cl-thumbs{ display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(var(--cl-vw) * 0.008); }
.cl-thumb{ position: relative; display: block; border-radius: 10px; overflow: hidden; min-height: 0; box-shadow: 0 10px 28px rgba(40,30,15,.14); }
.cl-thumb img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cl-thumb:hover img{ transform: scale(1.04); }
button.cl-thumb{ padding: 0; border: 0; cursor: pointer; background: #222; }
button.cl-thumb:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* Кнопка заявки живёт в левой колонке, под стрелкой листания (Босс 2026-09-22):
   по ширине списка и мельче обычной — иначе забирает высоту у кадров справа. */
.cl-cta-btn{
  width: 100%; margin-top: 4px; text-align: center;
  /* Крупнее по просьбе Босса 2026-09-22. Высоту берёт у списка (его высота
     считается в v3.js как «карточка минус стрелки, кнопка и отступы»), сам
     кадр секции от этого не растёт. */
  padding: 20px 12px; font-size: clamp(13px, calc(var(--cl-text) * .84), 18px); letter-spacing: .14em; line-height: 1.3;
}

@media (prefers-reduced-motion: reduce){ .cl-panel.is-in{ animation: none; } .cl-list{ scroll-behavior: auto; } }

/* ≤1280: кадры справа уходят под кейс в ряд */
@media (max-width: 1280px){
  .cl > .wrap{ padding-right: calc(var(--cl-vw) * 0.03); }
  .cl-inner{ grid-template-columns: 220px minmax(0, 1fr); }
  .cl-panel{ grid-template-columns: 1fr; }
  .cl-thumbs{ grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .cl-thumb{ aspect-ratio: 16 / 10; }
}
/* ≤900: список — горизонтальная лента сверху, кейс под ним */
@media (max-width: 900px){
  .cl{ min-height: 0; }
  .cl > .wrap{ padding-left: 20px; padding-right: 20px; }
  /* minmax(0,…) и min-width: 0 обязательны: иначе лента из 21 карточки задаёт
     ширину колонки (≈4200px), и вся секция вместе с фото раздувается. */
  .cl-inner{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "stage"; }
  .cl-scroll{ height: auto; width: 34px; }
  .cl-scroll svg{ transform: rotate(-90deg); }
  .cl-list{
    min-width: 0;
    flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x mandatory;
  }
  .cl-list li{ flex: 0 0 200px; }
  .cl-case{ grid-template-columns: 1fr; aspect-ratio: auto; }
  .cl-case-photo{ aspect-ratio: 16 / 10; min-height: 0; order: -1; }
}

/* ── «Мне доверяют»: кейс выше, под ним ряд других мероприятий компании
      (Босс 2026-09-22: «карточки передвинь выше, чтобы внизу было поле, где
      будут помельче блоки других мероприятий этой же компании»). Список
      компаний слева не менялся. Слотов всегда три — пустые остаются полями. */
.cl{ align-items: flex-start; }
.cl-inner{ row-gap: clamp(10px, calc(var(--cl-vw) * 0.009), 18px); }
.cl-more{
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--cl-vw) * 0.008);
}
/* Дополнительные события сохраняют один ряд из трёх карточек. */
.cl-more--many{
  min-width: 0; grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc(33.333333% - var(--cl-vw) * 0.005333333);
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.cl-more--many > .cl-more-card{ scroll-snap-align: start; }
.cl-more-card{
  display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; gap: 0;
  height: calc(var(--cl-text) * 6.2); padding: 0; text-align: left; overflow: hidden; cursor: pointer;
  background: rgba(252,249,244,.94); border: 1px solid rgba(154,122,50,.25); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(40,30,15,.1); font-family: 'Jost', sans-serif; color: var(--dark);
  transition: border-color .2s, box-shadow .2s;
}
button.cl-more-card:hover{ border-color: rgba(154,122,50,.7); box-shadow: 0 10px 26px rgba(40,30,15,.16); }
button.cl-more-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
div.cl-more-card, .cl-more-card--empty{ cursor: default; }
.cl-more-img{ position: relative; overflow: hidden; }
.cl-more-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
button.cl-more-card:hover .cl-more-img img{ transform: scale(1.05); }
.cl-more-img.cl-empty{ border: 0; border-right: 1px dashed rgba(154,122,50,.3); }
.cl-more-text{ display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; min-width: 0; }
.cl-more-title{ font-family: 'Cormorant Garamond', serif; font-size: calc(var(--cl-text) * 1.15); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-more-date{ font-size: calc(var(--cl-text) * .68); letter-spacing: .14em; text-transform: uppercase; color: #6b5f4f; }
@media (max-width: 900px){
  .cl-more{ grid-template-columns: 1fr; }
  .cl-more--many{ grid-template-columns: none; grid-auto-columns: 100%; }
  .cl-more-card--empty{ display: none; }
}

/* Знак + название текстом, как было в прежней раскладке (Босс 2026-09-22: «логотип
   LUNDA замени на тот, что был раньше»): у LUNDA официального SVG нет, логотип —
   зелёный знак из фавикона + слово LUNDA. Правило для строк clientRows с text
   без stack (сейчас это только LUNDA). */
.cl-item-logo{
  display: flex; align-items: center; justify-content: center; height: calc(var(--cl-text) * 2.6); min-width: 0;
  gap: 8px;
}
.cl-item-logo .cl-logo{ flex: none; }
.cl-item-logo--dark{ background: #252525; border-radius: 4px; padding: 5px; }
.cl-item-wordmark{ font-family: 'Jost', sans-serif; font-weight: 600; font-size: calc(var(--cl-text) * 1.05); letter-spacing: .12em; color: var(--dark); white-space: nowrap; }
/* Со словом LUNDA рядом со знаком название в соседней колонке дублировалось бы,
   а сам логотип не влезал в свою колонку — отдаём ему обе. */
.cl-item:has(.cl-item-wordmark) .cl-item-logo{ grid-column: 1 / 3; justify-content: flex-start; padding-left: 4px; }
.cl-item:has(.cl-item-wordmark) .cl-item-name{ display: none; }

/* Значок «плей» на плитке с роликом (Босс 2026-09-22: «одна из карточек — видео»).
   Треугольник — из рамок, без картинки: так он одинаково чёткий на любом экране. */
.cl-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; pointer-events: none;
  background: rgba(16,13,10,.55); border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
}
.cl-play::after{
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: 9px solid transparent; border-left: 14px solid #fff; border-right: 0;
}
.cl-play--sm{ width: 34px; height: 34px; }
.cl-play--sm::after{ border-width: 6px; border-left-width: 9px; border-right-width: 0; }
button.cl-thumb--video:hover .cl-play{ background: rgba(16,13,10,.75); }

@media (max-width: 900px){
  /* лента компаний горизонтальная — кнопка встаёт под неё на всю ширину */
  .cl-list-wrap{
    flex-direction: row; align-items: stretch; min-width: 0;
    flex-wrap: wrap;
  }
  .cl-cta-btn{ flex: 1 0 100%; font-size: .72rem; padding: 14px 16px; }
}

@media (max-width: 900px){
  .cl-head{ display: block; }
  .cl-eyebrow{ margin-bottom: 6px; }
}

/* Кнопка «Обсудить ваше мероприятие» на экране избранных работ убрана
   (Босс 2026-09-22: «пока уберём»). Разметка на месте — вернуть можно этой
   строкой. Заявку с экрана по-прежнему открывают карточки и кнопка в шапке. */
.cx .cases-cta{
  margin-top: clamp(8px, calc(var(--cx-vw) * 0.007), 18px);
  display: none;
}
/* Хвост экрана избранных работ ужат (Босс 2026-09-22: «уменьшим выход с фона»):
   хлястик «Ещё» мельче, поля и отступы короче. Сам язычок на других экранах
   не трогаем — правило только под .cx. */
.cx .cases-more-wrap{ margin-top: 2px; }
.cx .pull-tab{ --tab-w: 78px; --tab-h: 74px; --tip: 12px; font-size: .8rem; gap: 6px; padding-top: 12px; }
.cx .pull-tab[aria-expanded="true"]{ padding-top: 0; } /* раскрыт — треугольник у верхнего края, как у общего хлястика */
.cx .pull-tab-arrow{ width: 11px; height: 11px; border-width: 2px; }
.cx .cases-grid{
  /* ⚠️ Все правки .case-* ОБЯЗАТЕЛЬНО под .cx: те же классы работают на
  странице архива /events, и общий сдвиг кегля сломал бы её. */
  margin-top: 0;
  gap: clamp(9px, calc(var(--cx-vw) * 0.0072), 16px);
  margin-bottom: 0;
}

/* Шапка экрана избранных работ — в одну строку: слева заголовок, справа
   надстрочник «Кейсы ——» (Босс 2026-09-22: «смещай вправо и поднимай заголовок
   повыше»). Порядок в разметке прежний — местами их меняет order. */
.cx-head{
  margin-bottom: clamp(8px, calc(var(--cx-vw) * 0.006), 14px);
  display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, calc(var(--cx-vw) * 0.02), 48px); flex-wrap: wrap;
}
.cx-eyebrow{
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
  font-family: 'Jost', sans-serif; font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-text, #7d6428);
  order: 2; align-self: flex-start; margin: 2px 0 0;
}
@media (max-width: 900px){
  .cx-head{ display: block; }
  .cx-eyebrow{ margin-bottom: 6px; }
}
/* Кегль заголовка ужат, чтобы надстрочник «Кейсы ——» помещался справа в ту же
   строку: на прежних 47px строка занимала всю колонку и надстрочник сваливался
   вниз, съедая высоту (замер: шапка 109px против 50). */
.cx-heading{
  /* ⚠️ text-align: left ОБЯЗАТЕЛЕН: общее правило для h2 центрирует заголовки
  секций, и без этой строки заголовок уедет в центр колонки. */
  margin: 0; text-align: left;
  /* ⚠️ white-space: pre-line — разбивка на строки приходит ИЗ ТЕКСТА
  (content.json, cases.heading). Босс задал заголовок тремя строками:
  «Не рассказываю, / как проходят мои события. / Показываю.» — это часть
  высказывания, а не случайный перенос. */
  white-space: pre-line;
  /* ⚠️ Вес 600 у Cormorant Garamond ПОДКЛЮЧЁН В ССЫЛКЕ НА ШРИФТ (во всех views
  и в public/v3.html: …wght@0,300;0,400;0,500;0,600;…). До 2026-09-22 в наборе
  было только до 500, и два места на сайте, просившие 600, рисовались
  синтетическим жирным. Уберёте вес из ссылки — заголовок поплывёт. */
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  line-height: 1.08; color: var(--dark);
  order: 1;
  font-size: clamp(1.2rem, calc(var(--cx-vw) * 0.0215), 2.4rem);
}

/* Второй кадр экрана кейсов — сразу под первым (Босс 2026-09-22). Кадр 2560×1441,
   то есть 0.5629 ширины: сверху он начинается ровно там, где кончается первый.
   ⚠️ Растяжку первого кадра в цвет поля (.cx::after) отключаем — стык должен
   быть чётким: синяя полоса на светлом сайте и есть приманка «разверни». */
.cx-scene--2{
  /* Тянется от низа первого кадра до низа секции: в свёрнутом виде это узкая
     синяя полоса, в раскрытом — сцена целиком за карточками. object-fit: cover
     (а не растяжение) — при раскрытии кадр подрезается по бокам, Феликс слева
     остаётся. */
  /* высоту задаём явно: у <img> с top+bottom и height:auto растяжки не выходит */
  top: calc(var(--cx-vw) * 0.5629); bottom: 0;
  height: calc(100% - var(--cx-vw) * 0.5629); object-fit: cover; object-position: center top;
}
.cx::after{
  /* ⚠️ Границы растяжки НЕ круглые числа, и это важно:
  начало 0.53 — это 0.942 высоты кадра, ровно НИЖЕ обуви Феликса
  (самый нижний тёмный пиксель фигуры — 0.932, замер по яркости);
  конец 0.566 — чуть НИЖЕ низа картинки (кадр 2560×1441, то есть
  0.5629 ширины, а не 0.5625). Пока конец совпадал с 0.5625, снизу
  оставалась непокрытая полоска в 0.75px — тонкая тёмная черта на
  раскрытом списке. */
  content: ''; position: absolute; left: 0; right: 0; z-index: 1;
  top: calc(var(--cx-vw) * 0.53); height: calc(var(--cx-vw) * 0.036);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(247, 231, 216, 0), #f7e7d8 92%, #f7e7d8);
  display: none;
}
/* Ниже второго кадра фон — тёмно-синий, в тон его низу: если контент окажется
   длиннее двух кадров, стык не будет резать глаз. */
.cx{
  padding-bottom: clamp(12px, calc(var(--cx-vw) * 0.01), 22px);
  background: #16243c;
}
@media (max-width: 1279px){
  /* В перестроенной раскладке кадр стоит полосой, контент под ним по цвету поля —
     второй сцене там места нет. */
  .cx-scene--2{ display: none; }
  .cx{ background: #f7e7d8; }
}

/* Заголовок экрана клиентов жирнее, выделенное слово — золотом (Босс 2026-09-22).
   Вес 600 у Cormorant Garamond подключён в ссылке на шрифт (см. partials/nav). */
.cl-heading{
  /* ⚠️ +20px висит на ЗАГОЛОВКЕ, а не на .cl-head (Босс 2026-09-23: сначала
  «опустить на 20 пикселей», затем «надстрочник должен стоять как был, а он
  тоже поехал»). Отступ у шапки сдвигал и надстрочник — он её ребёнок.
  Так вниз уходят только заголовок и карточка события под ним: высота шапки
  растёт, а надстрочник прижат к её верху (align-self: flex-start). */
  order: 1; margin: 20px 0 0; text-align: left; font-family: 'Cormorant Garamond', serif;
  /* ⚠️ Нижняя граница 1.6rem (=32px при корневых 20px), а не 2rem: с длинным
  заголовком «События для тех, чьи имена говорят сами за себя» на 1280–1440
  надстрочник срывался на вторую строку. */
  font-size: clamp(1.6rem, calc(var(--cl-vw) * 0.026), 3.2rem); line-height: 1.05; color: var(--dark);
  font-weight: 600;
}
.cl-heading-gold{ color: var(--gold-btn, #8d6f2d); }

/* Колонка «Обо мне» расширена и хвост ужат — см. комментарий у --ab-text. */
.ab > .wrap{ padding-left: calc(var(--ab-vw) * 0.54); padding-right: calc(var(--ab-vw) * 0.125); }
.ab-heading{
  margin: 0 0 14px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  line-height: 1.08; color: var(--dark);
  font-size: clamp(1.6rem, calc(var(--ab-vw) * 0.023), 2.3rem); margin-bottom: 9px;
}
/* ⚠️ Это правило НИЖЕ основного и перебивает его — правку отступа цитаты
   делать здесь. Нижний отступ больше: кнопка сливалась с цитатой
   (Босс 2026-09-23). */
.ab-quote{
  /* нижний отступ больше верхнего: кнопка «Задать вопрос лично» сливалась с
  цитатой (Босс 2026-09-23) */
  padding-left: 20px;
  border-left: 2px solid var(--border-gold, rgba(154, 122, 50, 0.45));
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: calc(var(--ab-text) * 1.34); line-height: 1.4; color: var(--dark);
  margin: 11px 0 38px;
}   /* +8px до кнопок (Босс 2026-09-24) */
.ab-cta{ padding: 13px 26px; }
@media (max-width: 1279px){
  .ab > .wrap{ padding-left: clamp(20px, calc(var(--ab-vw) * 0.045), 64px); padding-right: clamp(20px, calc(var(--ab-vw) * 0.045), 64px); }
}

/* Карточки форматов: кружок со стрелкой снят, вместо него при наведении —
   золотая дымка на всей карточке и овальная кнопка «Подробнее» по центру
   (Босс 2026-09-22). Клавиатуре то же самое показывает :focus-visible. */
.fx-card-hover{
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  opacity: 0; transition: opacity .28s;
  background: linear-gradient(rgba(230,199,122,.34), rgba(154,122,50,.44));
  backdrop-filter: blur(1px);
}
.fx-card-btn{
  padding: 14px 32px; border-radius: 999px;
  background: #e6c77a; color: #1c1a16;
  font-family: 'Jost', sans-serif; font-size: calc(var(--fx-card-text, 13px) * 1); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.96); transition: transform .28s;
}
.fx-card:hover .fx-card-hover, .fx-card:focus-visible .fx-card-hover{ opacity: 1; }
.fx-card:hover .fx-card-btn, .fx-card:focus-visible .fx-card-btn{ transform: none; }
.fx{
  /* ⚠️ СМЕНА КАРТОЧЕК ПЛАВНАЯ И ИДЁТ ВМЕСТЕ С РУЧКОЙ (Босс 2026-09-22: «меняются
  резко, хочу плавно»). Прозрачность считается прямо из --split: правая
  колонка начинает перетекать в B2B-карточки с 60% и заканчивает к 95%,
  левая — в B2C-карточки с 40% до 5%. --split зарегистрирован через
  @property и анимируется при «прилипании» к краю, поэтому доплывают и
  карточки. Классы fx--b2b/fx--b2c теперь отвечают только за то, какие
  карточки кликабельны, — на вид они не влияют. */
  --pb: clamp(0, calc((var(--split) - 60) / 35), 1);
  --pc: clamp(0, calc((40 - var(--split)) / 35), 1);
  --fx-card-text: clamp(11px, calc(var(--fx-vw) * 0.0072), 14px);
}
@media (prefers-reduced-motion: reduce){
  .fx-card-hover, .fx-card-btn{ transition: none; }
}
@media (hover: none){
  /* На тачскрине кнопки «Подробнее» НЕТ (Босс 2026-09-25: «на телефоне и так понятно, что на карточку
     можно нажать»): вся карточка — ссылка. Что она нажимается, показывает жест .fx-tap (ниже) — один раз,
     когда экран доехал до глаз. display: none, а не opacity: после тапа телефон «залипает» в :hover
     и мигнул бы дымкой. (Раньше кнопка стояла внизу карточки без дымки.) */
  .fx-card-hover{ display: none; }
}

/* ПОДСКАЗКА «НАЖМИТЕ» НА ТАЧСКРИНЕ (Босс 2026-09-25: «когда пользователь сюда доходит — появляется tap,
   чтобы показать, что сюда можно нажать»). Ставит v3.js, блок «ЭКРАН ФОРМАТОВ: ПОДСКАЗКА ТАПА»: только
   hover: none, один раз за просмотр, на первой карточке, когда она видна на 60%. Палец дважды нажимает —
   от кончика расходится золотое кольцо, карточка в такт проседает; под пальцем подпись — та же золотая
   микро-капитель, что «НАЖМИТЕ НА ШАР» (поле formats.tap_hint, пустое — только жест). Потом всё гаснет.
   Глиф руки — Material Icons «touch_app» (Apache 2.0), без дуг над пальцем: их заменяет кольцо. */
/* ⚠️ Жест — в ВЕРХНЕЙ части карточки, не по центру: название и описание прижаты к низу, и на телефоне
   (карточка 16:9, ~200px) подпись по центру ложилась прямо на «КОРПОРАТИВЫ». */
.fx-tap{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding-top: 16px;   /* не в %: у padding проценты считаются от ШИРИНЫ, на планшете жест съезжал на название */
  background: radial-gradient(circle at 50% 26%, rgba(14,11,8,.45), rgba(14,11,8,0) 60%);
  opacity: 0; transition: opacity .4s ease;
}
.fx-tap.is-on{ opacity: 1; }
.fx-tap-hand{ position: relative; width: 40px; aspect-ratio: 17 / 21; }
.fx-tap-hand svg{
  display: block; width: 100%; height: 100%; fill: #fff;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
  transform-origin: 44% 12%; animation: fx-tap-press 1.6s ease-in-out 2;
}
/* кольцо — у кончика пальца (в глифе он на 44% ширины и ~12% высоты) */
.fx-tap-ring{
  position: absolute; left: 44%; top: 12%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 2px solid var(--gold-bright, #e6c77a);
  box-shadow: 0 0 18px rgba(230,199,122,.6);
  opacity: 0; animation: fx-tap-ring 1.6s ease-out 2;
}
.fx-tap-text{
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap; color: var(--gold-bright, #e6c77a);
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.6);
}
.fx-card.is-tap-demo{ animation: fx-tap-card 1.6s ease-in-out 2; }
@keyframes fx-tap-press{
  0%, 100% { transform: translateY(0) scale(1); }
  28%      { transform: translateY(5px) scale(.9); }
  44%      { transform: translateY(0) scale(1); }
}
@keyframes fx-tap-ring{
  0%, 24% { transform: scale(.35); opacity: 0; }
  30%     { opacity: .95; }
  100%    { transform: scale(1.9); opacity: 0; }
}
@keyframes fx-tap-card{
  0%, 100% { transform: none; }
  28%      { transform: scale(.985); }
  44%      { transform: none; }
}
@media (prefers-reduced-motion: reduce){
  /* без движения: рука и подпись просто появляются и гаснут */
  .fx-tap-hand svg, .fx-tap-ring, .fx-card.is-tap-demo{ animation: none; }
}

/* ============================================================
   ЭКРАН «СОБЫТИЯ В ДВИЖЕНИИ» — REELS (Босс 2026-09-22, папка Screen_08_Reels)
   Тёмный зал: слева Феликс с микрофоном, в центре золотой подиум, на нём
   карусель вертикальных роликов 9:16 (центральный крупнее).
   ⚠️ ЗАМЕРЫ ФОНА: фигура слева до 0.30 ширины, подиум и свет 0.33…0.88.
   Поэтому колонка контента начинается с 0.33 и кончается на 0.93.
   ⚠️ Карточки без обложки и ссылки — пустые поля той же формы (Босс:
   «где не хватает контента, оставь поля»), не кликаются.
============================================================ */
.rl{
  --rl-vw: calc(100vw / var(--site-zoom, 1));
  --rl-pad: clamp(20px, calc(var(--rl-vw) * 0.018), 40px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(var(--rl-vw) * 0.5625);
  padding: var(--rl-pad) 0; display: flex;
  background: #0d0b09; color: #f5efe3;
}
.rl-scene{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.rl > picture{ position: absolute; inset: 0; z-index: 0; }
.rl > .wrap{ max-width: none; }

.rl-sub{
  margin: 0 auto; max-width: 46ch; text-align: center;
  font-family: 'Jost', sans-serif; font-size: clamp(13px, calc(var(--rl-vw) * 0.0085), 17px);
  color: rgba(245,239,227,.8);
}

/* ── Карусель ─────────────────────────────────────────────────────────────── */
.rl-stage{ display: flex; align-items: center; justify-content: center; gap: clamp(8px, calc(var(--rl-vw) * 0.008), 18px); }
.rl-track{
  list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, calc(var(--rl-vw) * 0.0075), 16px);
}
.rl-item{ flex: 0 1 auto; transition: transform .35s, opacity .35s; }
/* Центральная карточка крупнее — как на референсе */
.rl-item.is-far{ opacity: .55; }
.rl-card{
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 14px; text-decoration: none; color: inherit;
  background: rgba(26,22,17,.72);
  border: 1px solid rgba(230,199,122,.45);
  box-shadow: 0 18px 46px rgba(0,0,0,.5);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
a.rl-card:hover{ border-color: rgba(230,199,122,.9); box-shadow: 0 22px 54px rgba(0,0,0,.6); transform: translateY(-3px); }
a.rl-card:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }
.rl-card-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-card::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,6,.55), rgba(10,8,6,.1) 45%, rgba(10,8,6,.75)); }
.rl-card-dur{
  position: absolute; z-index: 2; right: 12px; top: 12px;
  font-family: 'Jost', sans-serif; font-size: clamp(9px, calc(var(--rl-vw) * 0.0055), 12px);
  letter-spacing: .06em; color: rgba(245,239,227,.85);
}
/* Кружок «плей» — только у заполненной карточки: у пустой нечего играть */
.rl-play{
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(34px, calc(var(--rl-vw) * 0.026), 56px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8); background: rgba(16,13,10,.45);
}
.rl-play::after{
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: .32em solid transparent; border-left: .5em solid #fff; border-right: 0; font-size: inherit;
}
.rl-nav{
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(20,16,12,.6); color: #e6c77a; border: 1px solid rgba(230,199,122,.6);
  transition: background .2s, border-color .2s;
}
.rl-nav:hover{ background: rgba(20,16,12,.85); border-color: #e6c77a; }
.rl-nav:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }
.rl-dots{ display: flex; justify-content: center; gap: 10px; margin-top: clamp(10px, calc(var(--rl-vw) * 0.009), 20px); }
.rl-dot{
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(245,239,227,.3); border: 0; transition: background .2s, transform .2s;
}
.rl-dot.is-on{ background: #e6c77a; transform: scale(1.25); }
.rl-dot:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){ .rl-item, .rl-card{ transition: none; } }

/* ≤1400: фигура слева уже не мешает — колонка на всю ширину, кадр отпускаем */
@media (max-width: 1400px){
  .rl{ min-height: 0; }
  .rl > .wrap{ padding-left: clamp(20px, calc(var(--rl-vw) * 0.04), 56px); padding-right: clamp(20px, calc(var(--rl-vw) * 0.04), 56px); }
  .rl-item .rl-card{ width: clamp(120px, calc(var(--rl-vw) * 0.15), 220px); }
  .rl-item.is-center .rl-card{ width: clamp(150px, calc(var(--rl-vw) * 0.2), 280px); }
}
/* ≤760: лента с прокруткой пальцем, стрелки прячем */
@media (max-width: 760px){
  .rl-nav{ display: none; }
  .rl-track{ justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .rl-track::-webkit-scrollbar{ display: none; }
  .rl-item{ scroll-snap-align: center; }
  .rl-item .rl-card, .rl-item.is-center .rl-card{ width: 62vw; max-width: 260px; }
  .rl-item.is-far{ opacity: 1; }
}
/* Доводка экрана REELS по первому просмотру (2026-09-22):
   1) пустые заготовки были почти прозрачными на пёстром зале — даём плотную
      подложку, иначе карусель «теряется»;
   2) карусель стояла выше золотого подиума — опускаем её на него;
   3) карточки крупнее: пять штук должны занимать ширину подиума. */
/* Карточка рилса — кнопка (открывает плеер), поэтому сбрасываем стиль кнопки. */
button.rl-card{ padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.rl-card:focus-visible{ outline: 2px solid #e6c77a; outline-offset: 3px; }
.rl-item[hidden]{ display: none; }
/* Пять видимых карточек + стрелки должны помещаться в колонку: при 0.105/0.142
   лента вылезала на 50px и перекрывала стрелку (клик по ней не проходил). */
/* Босс 2026-09-22: «блок вместе с видео и точками подними выше по фону,
   карточки можно побольше». Поднимаем: контент прижат к верху кадра, свой
   отступ сверху снят. Увеличиваем: колонка расширена (фигура слева кончается
   на 0.30 — берём с 0.31; справа запас был лишний), карточки +10%.
   ⚠️ Шире нельзя: пять карточек со стрелками перестают помещаться в строку,
   лента вылезает и перекрывает стрелку — проверяется замером scrollWidth. */
.rl{ align-items: flex-start; }
.rl > .wrap{ padding-left: calc(var(--rl-vw) * 0.31); padding-right: calc(var(--rl-vw) * 0.045); }
/* Замер: при 0.107/0.145 лента вылезала на 17–33px и краем заходила под стрелку. */
.rl-item .rl-card{ width: calc(var(--rl-vw) * 0.104); }
.rl-item.is-center .rl-card{ width: calc(var(--rl-vw) * 0.141); }
/* Босс 2026-09-22: «чуть ниже опусти — нижняя линия выбранной карточки должна
   опуститься на 85 пикселей». Отступ задан долей ширины (85/1920 = 0.0443),
   а не жёсткими 85px: на других ширинах и при zoom сдвиг останется таким же
   по отношению к кадру. */
.rl-inner{
  position: relative; z-index: 2; width: 100%;
  padding-top: calc(var(--rl-vw) * 0.0443);
}
/* Босс 2026-09-22: «отступ от видео увеличь на 40 пикселей» — между шапкой
   экрана и каруселью. Прибавка долей ширины (40/1920 = 0.0208), как и сдвиг
   блока: на другой ширине и при zoom просвет останется тем же по отношению
   к кадру. Карусель едет вниз вместе с точками — проверено, что они
   по-прежнему внутри кадра. */
/* Сдвиг шапки на 40px упирался в карточки: просвет между ними был всего 19px,
   и подводка заезжала под верх карусели. Освобождаем 24px внутри самой шапки
   (надстрочник, заголовок, интерлиньяж подводки) — тогда 40px помещаются,
   а карточки остаются на своих местах. */
/* Итог правки «опустить только текст» (Босс 2026-09-22):
   • шапка сдвинута вниз на 40px (top, долей ширины) — сама раскладка не едет;
   • внутренние отступы шапки ужаты на ~26px, иначе подводка заезжала на
     карточки: просвета между ними было всего 19px;
   • ровно эти 26px возвращены нижним отступом шапки, чтобы карусель осталась
     там же, где была (низ выбранной карточки — 766px от верха секции). */
/* ⚠️ ИТОГ (Босс 2026-09-23): шапку надо было двигать ВВЕРХ от верхнего края
   карточки, а не вниз. Сдвиг отрицательный; внутренние отступы шапки и её
   нижний отступ возвращены к исходным — карусель остаётся на своём месте,
   просто над ней становится просторнее. */
.rl-eyebrow{
  display: block;
  font-family: 'Jost', sans-serif; font-size: .58rem; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: rgba(230,199,122,.85);
  margin-bottom: 8px;
}
.rl-heading{
  margin: 0 0 10px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.7rem, calc(var(--rl-vw) * 0.031), 3.6rem); line-height: 1.02;
  color: #f7efdd; text-shadow: 0 4px 26px rgba(0,0,0,.55);
  margin-bottom: 10px;
}
.rl-head{
  text-align: center;
  /* ⚠️ ИСПРАВЛЕНИЕ (Босс 2026-09-22): опускать надо было САМ ТЕКСТОВЫЙ БЛОК, а не
  карусель. Прошлая правка растила нижний отступ шапки и утаскивала карточки
  вниз вместе с собой. Возвращаем отступ как был и сдвигаем только шапку —
  через position/top, чтобы в раскладке ничего не поехало: карточки, точки и
  стрелки остаются на прежних местах. */
  position: relative;
  margin-bottom: clamp(10px, calc(var(--rl-vw) * 0.01), 20px);
  top: calc(var(--rl-vw) * -0.0208);
}
/* Босс 2026-09-23: подводку «Короткие видео…» убрать, но чтобы ничего не
   поехало. Поэтому visibility, а не display: строка исчезает, а место под неё
   остаётся — шапка той же высоты, карусель, точки и стрелки на прежних местах.
   Текст жив в content.json (reels.sub): вернуть — снять это правило. */
.rl-sub{
  line-height: 1.5;
  visibility: hidden;
}

/* ============================================================
   РИЛС В РАМКЕ iPHONE (Босс 2026-09-23, папка Screen_08_Reels/Mocup)
   Класс clb-phone на .clb-img-wrap вешает v3.js — только когда ролик открыт
   с экрана «События в движении». Галереи мероприятий открываются как прежде.
   ⚠️ ЗАМЕРЫ ЭКРАНА МОКАПА (доли от кадра рамки 2062×4277, см.
   tools/make_phone_mockup.py): слева 0.023, справа 0.979, сверху 0.010,
   снизу 0.993, скругление ≈0.06 ширины. Меняете мокап — перемерять.
============================================================ */
.clb-phone-frame[hidden]{ display: none; }
.clb-img-wrap.clb-phone{
  background: none; overflow: visible;
  /* высота кадра рамки = высота видео-области; ширину считаем из пропорции 2062:4277 */
  aspect-ratio: 2062 / 4277; height: min(78vh, 760px); max-height: 78vh; width: auto; flex: 0 0 auto;
  position: relative;
}
/* Рамка ПОВЕРХ видео: экран в PNG прозрачный, корпус — нет, поэтому ролик
   обрезается самой картинкой телефона и вылезти за корпус не может.
   Скругления углов и «остров» — родные, из мокапа, CSS их не повторяет. */
.clb-img-wrap.clb-phone .clb-phone-frame{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; z-index: 2; pointer-events: none;
}
/* Ролик — во весь экран телефона, как при просмотре вживую: заезжает под
   строку статуса и «остров», они остаются поверх (в PNG не вырезаны).
   ⚠️ cover, а не contain: экран мокапа 19.1:9, ролики 9:16. Кадр срезается по
   бокам примерно на 8% с каждой стороны — это плата за отсутствие полей.
   Никакой размытой подложки: Босс забраковал (сессия 2026-09-23). */

/* ⚠️ Углы режет МАСКА из того же мокапа (screen-mask.png), а не border-radius:
   у айфона скругление не круговое (squircle), CSS-радиусом его не повторить —
   по углам оставался «прямоугольник». Маска и рамка сняты с одного кадра,
   поэтому совпадают пиксель в пиксель. Маска на весь кадр → inset 0. */
.clb-img-wrap.clb-phone .clb-video{
  position: absolute; z-index: 1;
  left: 0; top: 0; right: auto; bottom: auto;
  width: 100%; height: 100%;
  max-width: none; max-height: none; border-radius: 0;
  object-fit: cover; background: #000;
  -webkit-mask-image: url('/images/reels/screen-mask.png?v=6');
          mask-image: url('/images/reels/screen-mask.png?v=6');
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (max-width: 760px){
  .clb-img-wrap.clb-phone{ height: min(70vh, 560px); }
}
/* ⚠️ У абсолютного <video> отступы left/right/top/bottom НЕ растягивают кадр:
   при width/height: auto браузер берёт СОБСТВЕННЫЙ размер ролика (720×1280).
   Поэтому размер задан явно (см. правило выше), а не через inset. */

/* ---- Плеер рилсов: без ленты миниатюр, стрелки — золотые шевроны ----
   Метку .clb-phone-mode вешает v3.js в setPhone(). Галереи мероприятий
   (фото и ролики архива) сохраняют свои миниатюры и кнопки-плашки. */
.clb.clb-phone-mode .clb-thumbs{ display: none; }
.clb.clb-phone-mode .clb-stage{ gap: clamp(14px, 3vw, 44px); }
.clb.clb-phone-mode .clb-arrow{
  width: 54px; height: 54px; border: none; background: none;
  color: transparent; font-size: 0;      /* стрелка ← → из разметки не нужна */
  position: relative; border-radius: 50%;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* сам шеврон: две волосяные линии под 45°, как у дорогих каталогов */
.clb.clb-phone-mode .clb-arrow::before{
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px;
  border-top: 1.5px solid var(--gold-bright);
  border-right: 1.5px solid var(--gold-bright);
  transform: rotate(45deg);
  transition: border-color 0.25s ease;
}
.clb.clb-phone-mode .clb-prev::before{ transform: rotate(-135deg); }
/* мягкое золотое свечение — без него волосяная линия теряется на тёмном фоне */
.clb.clb-phone-mode .clb-arrow::after{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,199,122,0.16) 0%, transparent 68%);
  opacity: 0; transition: opacity 0.25s ease;
}
.clb.clb-phone-mode .clb-arrow:hover:not(:disabled){ background: none; }
.clb.clb-phone-mode .clb-arrow:hover:not(:disabled)::before{ border-color: #f2ddab; }
.clb.clb-phone-mode .clb-arrow:hover:not(:disabled)::after{ opacity: 1; }
.clb.clb-phone-mode .clb-next:hover:not(:disabled){ transform: translateX(3px); }
.clb.clb-phone-mode .clb-prev:hover:not(:disabled){ transform: translateX(-3px); }
.clb.clb-phone-mode .clb-arrow:disabled{ opacity: 0.22; }

/* ============================================================
   ВСПЛЫВАЮЩАЯ ФОРМА ЗАЯВКИ (Босс 2026-09-26, референс Я.Диск Screen_PopUP/Example.png)
   Разметка — views/partials/lead-popup.ejs, логика — public/js/lead-popup.js, отправка — lead-form.js.
   Слева фото с подписью, справа форма: иконки в полях, золотая кнопка во всю ширину, три гарантии внизу.
   Телефон (≤760): окно на весь экран, фото — узкой полосой сверху.
============================================================ */
html.lp-lock, html.lp-lock body { overflow: hidden; }
.lp[hidden] { display: none; }
.lp {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px;
}
.lp-backdrop {
  position: absolute; inset: 0; background: rgba(18, 14, 10, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .28s ease;
}
.lp-box {
  position: relative; width: min(1000px, 100%); max-height: calc(100dvh - 48px);
  display: grid; grid-template-columns: 40% 60%;
  background: #f8f5ef; border: 1px solid rgba(201, 169, 97, 0.55); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(0.975);
  transition: opacity .28s ease, transform .34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp.is-open .lp-backdrop { opacity: 1; }
.lp.is-open .lp-box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-backdrop, .lp-box { transition: none; } }

.lp-media { position: relative; min-height: 100%; background: #2b241c; }
.lp-media picture, .lp-media-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-media-img { object-fit: cover; object-position: 30% 50%; }
.lp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 8, 0.62), rgba(14, 11, 8, 0) 45%); }
.lp-media-caption {
  position: absolute; z-index: 1; left: 28px; bottom: 30px; max-width: 150px;
  font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; line-height: 1.75;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.92);
}
.lp-media-caption::after { content: ''; display: block; width: 26px; height: 1px; margin-top: 14px; background: rgba(255, 255, 255, 0.7); }

/* Высоту тела ограничиваем явно, иначе грид-строка бокса тянется под контент формы и игнорирует
   max-height бокса: тело не прокручивается, а низ (кнопка + гарантии) режется overflow:hidden бокса —
   на невысоких экранах до кнопки не добраться (Босс 2026-10-20). На телефоне (≤760) бокс height:100dvh
   и строка 1fr уже дают телу меньшую высоту, так что это правило там ничего не меняет. */
.lp-body { position: relative; overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: calc(100dvh - 48px); }
.lp-content { padding: 44px 48px 30px; }
.lp-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: none; color: #4a4640; cursor: pointer;
  border-radius: 50%; transition: color .2s, background .2s;
}
.lp-close:hover { color: #b3261e; background: rgba(179, 38, 30, 0.07); }   /* крестик — красным (правило Босса 2026-09-24) */
.lp-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.lp-eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text);
}
.lp-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--gold); }
.lp-title { margin: 0 0 14px; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.08; color: var(--dark); }
.lp-lead { margin: 0 0 26px; max-width: 460px; font-size: 0.92rem; line-height: 1.6; color: var(--mid); }

.lp-form { display: grid; gap: 12px; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-field {
  position: relative; display: flex; align-items: center;
  background: #fff; border: 1px solid #e2dace; border-radius: 6px; transition: border-color .2s, box-shadow .2s;
}
.lp-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.14); }
.lp-ico { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #9a8f80; pointer-events: none; }
.lp-ico svg { width: 18px; height: 18px; display: block; }
.lp-field input, .lp-field select, .lp-field textarea {
  width: 100%; min-height: 50px; padding: 0 16px 0 46px; border: 0; background: transparent;
  font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--dark); outline: none; border-radius: 6px;
}
.lp-field input::placeholder, .lp-field textarea::placeholder { color: #8d8478; opacity: 1; }
.lp-field--select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
/* пока ничего не выбрано — цвет подсказки, как у placeholder соседних полей; варианты в списке — обычным цветом */
.lp-field--select select:has(option[value=""]:checked) { color: #8d8478; }
.lp-field--select select option { color: var(--dark); }
.lp-caret { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #6e665c; pointer-events: none; }
.lp-caret svg { width: 18px; height: 18px; display: block; }
.lp-field--area { align-items: flex-start; }
.lp-field--area .lp-ico { top: 16px; transform: none; }
.lp-field--area textarea { min-height: 86px; padding-top: 14px; padding-bottom: 12px; resize: vertical; line-height: 1.5; }

.lp-consents { display: grid; gap: 6px; margin: 2px 0 4px; }
.lp-consent { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; font-size: 12px; line-height: 1.45; color: var(--mid); cursor: pointer; }
.lp-consent input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--gold-btn); }
.lp-consent a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.lp-consent i { font-style: normal; color: #9a9187; }

.lp-submit {
  min-height: 54px; margin-top: 4px; border: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, #b89259 0%, #9a7a3f 100%); color: #fff;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(154, 122, 63, 0.28); transition: filter .2s, transform .2s, box-shadow .2s;
}
.lp-submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(154, 122, 63, 0.34); }
.lp-submit:active { transform: none; }
.lp-submit:disabled { opacity: .7; cursor: default; }
.lp-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.lp-msg { margin-top: 14px; font-size: 0.9rem; line-height: 1.6; }
.lp-msg a { color: var(--gold-text); }
.lp .form-success { display: none; }
/* После успешной отправки lead-form.js ставит .is-sent на .lp-content: верхние eyebrow/заголовок/подзаголовок
   убираем, крупным остаётся само сообщение «Заявка принята» (Босс 2026-10-20). Гарантии внизу оставляем. */
.lp-content.is-sent .lp-eyebrow,
.lp-content.is-sent .lp-title,
.lp-content.is-sent .lp-lead { display: none; }
.lp-content.is-sent .form-success { margin-top: 0; }
.lp-content.is-sent .form-success p:first-child {
  margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--dark);
}

.lp-trust { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid #e8e1d5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-trust li { display: flex; align-items: center; gap: 10px; font-size: 11.5px; line-height: 1.4; color: var(--mid); }
.lp-trust-ico { flex: none; width: 26px; height: 26px; color: var(--gold); }
.lp-trust-ico svg { width: 26px; height: 26px; display: block; }

@media (max-width: 900px) {
  .lp-content { padding: 40px 30px 26px; }
  .lp-box { grid-template-columns: 34% 66%; }
}
@media (max-width: 760px) {
  .lp { padding: 0; place-items: stretch; }
  .lp-box { max-height: none; height: 100dvh; width: 100%; border-radius: 0; border: 0; grid-template-columns: 1fr; grid-template-rows: 150px 1fr; }
  .lp-media-caption { left: 20px; bottom: 18px; max-width: none; }
  .lp-media-caption::after { display: none; }
  .lp-close { top: 10px; right: 10px; color: #fff; background: rgba(0, 0, 0, 0.35); }
  .lp-close:hover { color: #fff; background: #b3261e; }
  .lp-content { padding: 24px 18px 28px; }
  .lp-row { grid-template-columns: 1fr; }
  .lp-trust { grid-template-columns: 1fr; gap: 10px; }
  .lp-field input, .lp-field select, .lp-field textarea { font-size: 16px; }   /* iOS не приближает поле при фокусе */
}

/* ============================================================
   «НАВЕРХ» — круглая кнопка в ЛЕВОМ нижнем углу, на всех страницах (Босс 2026-09-26:
   «кругленький значок со стрелочкой и маленькой надписью внутри «наверх»»; стрелка — по его просьбе).
   Разметка — partials/float-ui.ejs, показ после 400px прокрутки — js/float-ui.js.
   Справа — кнопки связи (.float-actions), на телефоне снизу — .mobile-bar: «Наверх» встаёт над ней.
============================================================ */
.to-top{
  position: fixed; left: 24px; bottom: 32px; z-index: 800;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(252, 249, 243, 0.94); border: 1px solid rgba(201, 169, 97, 0.7);
  box-shadow: 0 8px 22px rgba(28, 26, 22, 0.16); color: var(--gold-text); text-decoration: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s, color .2s, border-color .2s;
}
.to-top.visible{ opacity: 1; transform: none; pointer-events: auto; }
.to-top span{ font-family: 'Jost', sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.to-top svg{ display: block; transition: transform .2s; }
.to-top:hover{ background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.to-top:hover svg{ transform: translateY(-2px); }
.to-top:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .to-top, .to-top svg{ transition: none; } }
@media (max-width: 960px){
  /* над нижней панелью «Звонок / Telegram / MAX / Заявка» */
  .to-top{ left: 14px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .to-top span{ font-size: 7.5px; }
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛИ В ШАПКАХ /blog, /equipment, /formats — ПРИЖАТЫ К НИЗУ КАДРА ШАПКИ
   (Босс 2026-09-26: «примагнитить к низу фона шапки»). Шапка — колонка на всю высоту кадра, у переключателя
   margin-top: auto; от нижнего края 36px. На телефоне (≤760) кадр стоит ПОД текстом — там раскладка прежняя.
   Селекторы с «> .wrap >» — сильнее правил в css/pages/*.css самих страниц (там margin-top: 36px у переключателей).
============================================================ */
@media (min-width: 761px){
  /* section.… — сильнее «padding: 120px 0 64px» в css/pages/*.css страниц (там тот же вес, но файл подключён позже) */
  section.blog-hero, section.eq-hero, section.fa-hero, section.ev-hero{ display: flex; flex-direction: column; padding-bottom: 36px; }
  .blog-hero > .wrap, .eq-hero > .wrap, .fa-hero > .wrap, .ev-hero > .wrap{ flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
  .blog-hero > .wrap > .blog-filter, .eq-hero > .wrap > .eq-tabs, .fa-hero > .wrap > .fa-tabs, .ev-hero > .wrap > .ev-filter{ margin-top: auto; padding-top: 28px; }
  /* /equipment: «Калькулятор» стоял ПОД переключателем — переносим его под лид, чтобы к низу прижимался переключатель */
  .eq-hero > .wrap > .eq-calc-btn{ order: 1; }
  .eq-hero > .wrap > .eq-tabs{ order: 2; }
}

/* «Смотреть все мероприятия» — кнопкой-овалом (2026-09-26): кегль кнопки фиксированный, как у «Все форматы».
   Перебивает старые размеры крупной надписи-заголовка: .cx .cases-all-label (масштаб экрана кейсов, ≈19px)
   и мобильное 1.5rem — иначе в одну строку овал не помещался и раздвигал карточку. */
.cx .cases-all .cases-all-label, .cases-all .cases-all-label{ font-size: .7rem; }


/* ============================================================
   ЭКРАН 2: ВТОРАЯ КАРТОЧКА → /equipment (Босс 2026-09-26)
   Ссылка .adv-link растянута на всю карточку; при наведении (мышь) на фото — овальная «Смотреть оборудование»
   (как «Подробнее» у карточек форматов); один раз при появлении — жест «нажмите» (.fx-tap, общие стили с
   экраном форматов, v3.js). Подпись — advantages.adv2_link_btn.
============================================================ */
.adv-item--link{ position: relative; cursor: pointer; }
.adv-link{ position: absolute; inset: 0; z-index: 5; }
.adv-link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.adv-item--link .adv-media{ position: relative; }
.adv-link-btn{
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, calc(-50% + 8px)) scale(.96);
  padding: 13px 26px; border-radius: 999px; background: #e6c77a; color: #1c1a16; white-space: nowrap;
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 6px rgba(230,199,122,.2);
  opacity: 0; pointer-events: none; transition: opacity .28s, transform .28s;
}
@media (hover: hover){
  .adv-item--link:hover .adv-link-btn, .adv-item--link:focus-within .adv-link-btn{ opacity: 1; transform: translate(-50%, -50%); }
}
/* жест — по центру фото, а не вверху карточки, как у форматов */
.adv-media .fx-tap{ justify-content: center; padding-top: 0; background: radial-gradient(ellipse 70% 55% at 50% 52%, rgba(14,11,8,.62), rgba(14,11,8,0) 72%); }   /* фото светлое — подложка под жестом плотнее, чем у форматов */
.adv-item.is-tap-demo{ animation: fx-tap-card 1.6s ease-in-out 2; }
@media (prefers-reduced-motion: reduce){ .adv-item.is-tap-demo{ animation: none; } .adv-link-btn{ transition: none; } }


/* ============================================================
   ПОДСКАЗКА КЕЙСОВ «ФОТО ЛИСТАЮТСЯ» (Босс 2026-09-26) — v3.js, блок «ЭКРАН КЕЙСОВ: ПОДСКАЗКА».
   Рука ездит по фото (left задаёт скрипт), кадры листаются по-настоящему; подпись над индикатором.
============================================================ */
.case-photo{ position: relative; }
.case-hint{
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, rgba(14,11,8,.6), rgba(14,11,8,.1) 55%, rgba(14,11,8,0));
  opacity: 0; transition: opacity .4s ease;
}
.case-hint.is-on{ opacity: 1; }
.case-hint-hand{ position: absolute; top: 44%; width: 40px; aspect-ratio: 17 / 21; transform: translate(-44%, -12%); }
.case-hint-hand svg{ display: block; width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.case-hint-text{
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; padding: 0 12px;
  font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright, #e6c77a); text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.6);
}

/* Открытое мобильное меню: сплошная шапка, панель до низа и группы событий. */
@media (max-width: 1100px) {
  body.mobile-menu-open { overflow: hidden; }
  .nav.menu-open { background: var(--cream); backdrop-filter: none; }
  .nav-mobile.open {
    top: var(--menu-top, 64px); bottom: 0; max-height: none;
    padding-bottom: calc(var(--menu-bar-height, 80px) + 20px);
    background: var(--cream); overscroll-behavior: contain;
  }
  .nav-mobile-section { border-bottom: 0.5px solid var(--border); }
  .nav-mobile-section > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 48px; padding: 12px 0;
    cursor: pointer; list-style: none;
  }
  .nav-mobile-section > summary::-webkit-details-marker { display: none; }
  .nav-mobile-section > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .nav-mobile-chevron { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; flex-shrink: 0; }
  .nav-mobile-section[open] .nav-mobile-chevron { transform: rotate(225deg); }
  .nav-mobile-section-links { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px 12px; }
  .nav-mobile-section-links a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 1100px) {
  .nav .nav-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .nav .nav-mono { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
  .nav .nav-mono img { display: block; width: auto; height: 30px; }
  .nav .nav-logo-role { display: none; }
  .nav .nav-logo-name { font-size: clamp(14px, 4vw, 18px); letter-spacing: .06em; }
}

/* Свободные даты: отдельная раскрывающаяся полоса между экранами на телефоне. */
.mobile-availability { display: none; }
.hb-toggle-triangle { display: none; }
@media (max-width: 759px) {
  .mobile-availability { display: block; background: var(--cream); padding: 12px 16px; }
  .mobile-availability .hero-col-cal { position: static; transform: none; }
  .mobile-availability .hb-toggle { position: relative; width: 100%; margin: 0; padding: 14px 44px 14px 18px; background: var(--dark); backdrop-filter: none; }
  .mobile-availability .hb-toggle-triangle { display: block; position: absolute; right: 18px; top: 50%; margin-top: -3px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gold-bright, #e6c77a); }
  .mobile-availability .hb-toggle[aria-expanded="true"] .hb-toggle-triangle { transform: rotate(180deg); }
  .mobile-availability .hero-booking.hb-open { width: 100%; margin: 8px 0 0; background: var(--dark); }
}

/* На телефоне ценности идут под цифрами опыта, а не над титулом. */
@media (max-width: 759px) {
  .hero-values { top: auto; bottom: 32px; }
}

/* Мобильная полоса дат: бумага календаря и окантовка в цвет режима. */
@media (max-width: 759px) {
  .mobile-availability { --availability-frame: #24332c; background: var(--availability-frame); }
  body:has(.hero-stage.is-alt) .mobile-availability { --availability-frame: #5e1f25; }
  .mobile-availability .hb-toggle { background: #f3ecdd; border: 1px solid var(--availability-frame); }
  .mobile-availability .hb-toggle-title { color: #2a2620; }
  .mobile-availability .hb-toggle-hint { color: #655c4e; }
  .mobile-availability .hb-toggle-triangle { border-top-color: var(--availability-frame); }
  .mobile-availability .hero-booking.hb-open { background: #f3ecdd; }
  body:has(.hero-stage.is-alt) .mobile-availability .cal::before { opacity: 1; }
}

/* На телефоне имя и роль занимают светлое поле коллажа «Обо мне». */
@media (max-width: 759px) {
  .ab .ab-inner { position: static; top: auto; padding-top: 24px; }
  .ab .ab-intro { position: absolute; z-index: 2; left: 54%; right: 10.5%; top: 6.5vw; }
  .ab .ab-label { display: block; margin: 0 0 clamp(14px, 4vw, 22px); font-family: 'Cormorant Garamond', serif; font-size: clamp(16px, 5vw, 30px); font-weight: 600; line-height: 1.1; letter-spacing: 0; text-transform: none; }
  .ab .ab-label::after { display: none; }
  .ab .ab-heading { margin: 0; font-size: clamp(22px, 7vw, 42px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
}

/* Мобильный коллаж: имя справа с короткой линией, шоурилл под ролью. */
@media (max-width: 759px) {
  .ab .ab-label { position: absolute; top: -3vw; right: 0; width: calc(100% + 2vw); display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; margin: 0; text-align: right; }
  .ab .ab-label::before { content: ''; flex: 0 0 16px; height: 1px; margin-top: .55em; background: var(--gold-text, #7d6428); }
  .ab .ab-heading { padding-top: 15vw; }
  .ab .ab-actions .ab-action--showreel { position: absolute; z-index: 2; top: 39vw; left: 54%; width: 35.5%; height: clamp(36px, 10vw, 56px); padding: 0 8px; gap: 6px; font-size: clamp(8px, 2.2vw, 12px); letter-spacing: .025em; white-space: normal; }
  .ab .ab-action--showreel .ab-play { width: 18px; height: 18px; }
  .ab .ab-action--showreel .ab-play::before { border-left-width: 6px; border-top-width: 4px; border-bottom-width: 4px; }
}

/* Телефон: сцена под кейсами, фигура только у первой карточки ленты. */
@media (max-width: 759px) {
  .cx { background-image: url('/images/cases/cases-scene.jpg'); background-position: right top; background-size: auto max(100vw, 560px); background-repeat: repeat-y; }
  .cx > picture { display: none; }
  .cx .cx-inner { padding-top: 28px; }
  .cx .cases-grid { display: flex; gap: 16px; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 16px 20px 20px; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .cx .cases-grid > * { flex: 0 0 80vw; min-width: 0; scroll-snap-align: start; }
  .cx .cases-grid > .case-card:first-child { flex-basis: 60vw; margin-left: 30vw; scroll-margin-left: 30vw; position: relative; isolation: isolate; overflow: visible; }
  .cx .cases-grid > .case-card:first-child::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -36vw; right: -20px; background: url('/images/cases/cases-scene.jpg') -18vw top / auto 100% no-repeat; pointer-events: none; }
  .cx .cases-grid > .case-card:first-child .case-body { background: var(--white); }
}

/* Мобильная сцена Reels: размеры и координаты отдельно от десктопа. */
@media (max-width: 759px) {
  .rl { min-height: 138vw; padding: 0 0 6vw; }
  .rl .rl-scene { object-position: 32% center; }
  .rl > .rl-inner { padding: 9vw 4vw 0 30vw; }
  .rl .rl-head { top: auto; margin: 0 0 15vw; }
  .rl .rl-eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: .25em; }
  .rl .rl-heading { margin: 0; font-size: 6vw; line-height: 1.05; letter-spacing: .025em; }
  .rl .rl-sub { display: none; }
  .rl .rl-stage { min-width: 0; }
  .rl .rl-track { justify-content: flex-start; gap: 10px; padding: 4px 0 8px; scroll-padding-inline: 0; }
  .rl .rl-item { flex: 0 0 auto; opacity: 1; }
  .rl .rl-item .rl-card, .rl .rl-item.is-center .rl-card { width: 40vw; max-width: none; }
  .rl .rl-card-dur { font-size: 9px; top: 8px; right: 8px; }
  .rl .rl-dots { flex-wrap: wrap; gap: 4px; margin-top: 12px; }
  .rl .rl-dot { width: 10px; height: 10px; }
}

/* Телефон: левая часть сцены только под вводной частью цен, до карточек. */
@media (max-width: 759px) {
  .pk > picture { display: none; }
  .pk .pk-eyebrow { position: relative; z-index: 3; left: auto; right: auto; top: auto; bottom: auto; margin-top: 0; padding-top: 24px; }
  .pk .pk-inner { padding-top: 24px; }
  .pk .pk-intro { position: relative; padding-bottom: 24px; }
  .pk .pk-intro::before { content: ''; position: absolute; z-index: -1; top: -100px; bottom: 0; left: calc(clamp(20px, 4.5vw, 64px) * -1); right: calc(clamp(20px, 4.5vw, 64px) * -1); background: radial-gradient(ellipse 95% 55% at 0 12%, rgba(242, 231, 214, .82) 0%, rgba(242, 231, 214, .62) 38%, rgba(242, 231, 214, 0) 100%) left top / 100% 100% no-repeat, url('/images/packages/packages-scene.jpg') left center / auto max(100%, 120vw) no-repeat; pointer-events: none; }
  .pk .pk-intro .pkg-summary-note { margin-bottom: 0; }
}

/* Телефон: свободное поле контактной сцены занято заголовком и автором. */
@media (max-width: 759px) {
  .cs .cs-inner, .cs .cs-text { position: static; }
  .cs .cs-veil { display: block; height: 56.25vw; bottom: auto; background: linear-gradient(90deg, rgba(247,243,236,0) 0%, rgba(247,243,236,0) 43%, rgba(247,243,236,.72) 56%, rgba(247,243,236,.86) 100%); }
  .cs .cs-intro { position: absolute; z-index: 4; left: 48%; right: 5%; top: 6vw; }
  .cs .cs-label { margin-bottom: 9px; gap: 8px; font-size: 8px; letter-spacing: .2em; }
  .cs .cs-label::before { width: 20px; }
  .cs .cs-heading { margin: 0; font-size: clamp(20px, 6.2vw, 32px); line-height: 1.05; }
  .cs .cs-name { position: absolute; z-index: 4; top: 32vw; left: 48%; right: 5%; margin: 0; font-size: clamp(15px, 4.8vw, 26px); white-space: nowrap; }
  .cs .cs-role { position: absolute; z-index: 4; top: 42vw; left: 48%; right: 5%; margin: 0; font-size: clamp(8px, 2.2vw, 12px); letter-spacing: .045em; line-height: 1.5; }
}

/* Mobile blog: the complete introduction sits on the scene's paper field. */
@media (max-width: 759px) {
  .bl .bl-inner { padding-top: 0; }
  .bl .bl-card { background: #fcfaf6; }
  .bl .bl-intro {
    position: relative;
    isolation: isolate;
    margin-top: -56.25vw;
    margin-bottom: 28px;
    padding: 6vw 0 24px 44%;
    min-height: 56.25vw;
  }
  .bl::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 56.25vw;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('/images/blog/blog-scene.jpg') right top / auto 100vw repeat-y;
    pointer-events: none;
  }
  .bl .bl-eyebrow { gap: 8px; font-size: 8px; letter-spacing: .17em; margin-bottom: 12px; }
  .bl .bl-eyebrow::after { width: 20px; }
  .bl .bl-title { font-size: clamp(28px, 8vw, 38px); line-height: 1.02; margin-bottom: 16px; }
  .bl .bl-title span, .bl .bl-title em { display: block; }
  .bl .bl-lead { font-size: 14px; line-height: 1.55; margin-bottom: 0; }
}

/* Contact details use the same paper grain and fibres as desktop. */
.cs-paper { display: contents; }
@media (max-width: 759px) {
  .cs .cs-paper {
    display: block;
    padding: 24px 20px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23g%29' opacity='0.22'/%3E%3C/svg%3E") repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.7' numOctaves='2' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url%28%23f%29' opacity='0.13'/%3E%3C/svg%3E") repeat,
    rgb(248, 246, 241);
  background-size: 180px 180px, 300px 300px, auto;
    border: 1px solid rgba(154,122,50,.2);
    box-shadow: 0 8px 24px rgba(24,21,18,.07);
  }
}

/* Tall mobile footer: keep the texture at a fixed scale instead of cover. */
@media (max-width: 759px) {
  .footer {
    background-image:
      linear-gradient(90deg, transparent 85%, rgba(219,170,76,.08) 89%, rgba(246,201,114,.22) 92%, #d9ad60 93%, rgba(255,227,169,.85) 93.25%, rgba(216,162,68,.18) 94%, rgba(11,10,8,.9) 96%, #0b0a08 100%),
      linear-gradient(180deg, transparent 65%, #0b0a08 100%),
      image-set(url('/images/footer/footer-door-1920.webp') type('image/webp'), url('/images/footer/footer-door-1920.jpg') type('image/jpeg'));
    background-size: 100% 100%, 100% 640px, auto 640px;
    background-position: left top, left top, center top;
    background-repeat: no-repeat;
  }
}

/* Reserve space for the fixed contact bar inside the dark footer. */
@media (max-width: 960px) {
  body { padding-bottom: 0; }
  .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Mobile hero heading: raise the complete name/title composition slightly. */
@media (max-width: 759px) {
  .hero-h1 { translate: 0 -12px; }
}