/* ==========================================================================
   Блоки главной страницы.
   Перенесено с артборда «01 Главная - Ритуал полная.dc.html»: сетки,
   отступы, размеры шрифтов и цвета — как в макете.
   ========================================================================== */

/* ----------------------------------------------------------------- герой */
/* Шапка сайта липкая и высотой 86px — под ней нужен запас, иначе бейдж
   начинается сразу под ней. */
/* Снизу отступ такой же, как сверху: без него нижний край видео упирался
   в разделительную черту, и первый экран заканчивался впритык. */
.hero__in { position: relative; max-width: var(--w); margin: 0 auto; padding: 64px var(--pad); }
.hero__main { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: stretch; min-height: 600px; }
/* Текст центрируем по вертикали: раньше колонку снизу подпирала строка с
   адресом (margin-top: auto), теперь без неё содержимое повисало вверху. */
.hero__col { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 0 32px; }
/* надзаголовок героя без черты: рядом с ним и так есть воздух */
.hero__eyebrow::before { content: none; }
/* Заголовок разбит на три строки вручную (в шаблоне), поэтому кегль ниже
   общего .h1 — иначе средняя строка не помещается и строк снова четыре. */
.hero__h1 { margin: 28px 0 22px; }
/* Адрес отдельной строкой между заголовком и строкой про акцию. Тише
   заголовка и крупнее подписи на фотографии: его читают, а не разглядывают. */
.hero__addr {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
  transition: color .15s;
}
/* метка на карте — значок адреса, понятный без подписи */
.hero__pin { flex-shrink: 0; color: var(--acc); }
.hero__addr:hover { color: var(--acc-lt); }
.hero__lead { max-width: 460px; margin-bottom: 32px; }
/* Пункты под адресом вместо строки про акцию (поле «Пункты под адресом»): сердечко — как в логотипе */
.hero__points { list-style: none; display: grid; gap: 10px; max-width: 460px; margin: 0 0 32px; padding: 0; }
.hero__points li { display: flex; align-items: center; gap: 12px; }
.hero__heart { flex-shrink: 0; fill: var(--call-lt); }
.hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

.hero__gift {
  display: flex; align-items: center; gap: 16px;
  background: rgba(230, 190, 152, .06); border: 1px solid var(--bd-16);
  border-radius: var(--r-md); padding: 18px 20px; max-width: 480px;
}
.hero__gift-i { font-size: 24px; line-height: 1; color: var(--acc); flex-shrink: 0; }
.hero__gift p { color: var(--tx-mute); }
.hero__gift > a { margin-left: auto; font-size: 20px; color: var(--acc); flex-shrink: 0; }

/* медиапанель: видео (или фото, если ролика нет) в закруглённой рамке */
/* Без вертикальных полей: панель занимает всю высоту ряда. Поля в 20px
   остались с той поры, когда текстовую колонку снизу держала строка с
   адресом — её убрали, и панель стала выглядеть коротковатой. */
.hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.hero__vid, .hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-color: var(--bg); background-position: 52% center; background-size: cover; background-repeat: no-repeat;
}
/* Фото — <img> под роликом (он же заставка, пока ролик не пошёл), поэтому у ролика фон прозрачный. */
img.hero__photo { object-position: 52% center; }
.hero__photo + .hero__vid { background-color: transparent; }
.hero__media-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 10, 8, .05) 30%, rgba(13, 10, 8, .88) 88%);
}
.hero__vert {
  position: absolute; right: 24px; top: 28px; z-index: 1;
  writing-mode: vertical-rl;
}
.hero__note-box { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 1; }
.hero__note-box strong {
  display: block; margin: 0 0 18px;
}
.hero__note-box a { display: inline-flex; align-items: center; gap: 10px; }
.hero__note-box a span { font-size: 17px; letter-spacing: 0; color: inherit; }
.hero__mark {
  position: absolute; right: 18px; bottom: 4px; z-index: 0; pointer-events: none;
  font-weight: 700; letter-spacing: .06em; line-height: 1; font-size: 70px; color: rgba(230, 190, 152, .08);
}

/* полоса преимуществ под геро */
.hero-feats { border-top: 1px solid var(--bd-14); border-bottom: 1px solid var(--bd-14); }
.hero-feats__in {
  max-width: var(--w); margin: 0 auto; padding: 46px var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
/* каждая ячейка отделена линией — полоса читается как четыре карточки */
.hf { display: flex; align-items: center; gap: 18px; padding: 4px 32px; border-left: 1px solid var(--bd-10); }
.hf:first-child { border-left: none; padding-left: 0; }
.hf__i {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bd-20); background: rgba(230, 190, 152, .05);
  font-weight: 300; font-size: 22px; line-height: 1; color: var(--acc);
}
.hf p { margin: 0; }
.hf b { display: block; color: var(--tx-soft); }
.hf small { display: block; color: var(--tx-dim-2); margin-top: 6px; }
a.hf { transition: background .2s; }
a.hf:hover { background: rgba(230, 190, 152, .04); }
a.hf:hover .hf__i { border-color: var(--bd-50); }
a.hf:hover b { color: var(--acc-lt); }

/* ------------------------------------------- заголовок секции по макету */
.shead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 40px;
}
.shead--top { align-items: flex-start; gap: 40px; margin-bottom: 56px; }
.shead__note { max-width: 340px;
}

/* ------------------------------------------------- баннер-призыв в конце */
.banner {
  margin-top: 40px;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse 70% 90% at 88% 0%, rgba(230, 190, 152, .16), transparent 60%), var(--surface);
  padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.banner__t { margin-bottom: 12px; text-wrap: pretty;
}
.banner__d { max-width: 520px; }
.banner__acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }

/* --------------------------------------------------- табы-метки программ */
.ptabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ptab {
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--bd-30); border-radius: 5px;
  padding: 9px 15px; cursor: pointer; color: var(--tx-mute-2);
  transition: background .18s, color .18s, border-color .18s;
}
.ptab:hover { color: var(--tx-hi); border-color: var(--bd-50); }
.ptab.is-on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }

/* --------------------------------- строка программы: точная сетка макета */
.prow {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) 120px 150px 34px;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--bd-22);
}
.prow:last-of-type { border-bottom: none; }
.prows { display: flex; flex-direction: column; border-bottom: 1px solid var(--bd-22); }
.prow__name { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.prow__name b {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.prow__chips { display: flex; gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.prow__dur { white-space: nowrap; }
.prow__price { white-space: nowrap; text-align: left; }
.prow__go { font-size: 18px; color: var(--acc-lt); text-align: right; }

/* мелкая метка внутри строки */
.chip-sm {
  color: var(--tx-mute-2); background: transparent;
  border: 1px solid var(--bd-30); border-radius: 5px;
  padding: 3px 8px; white-space: nowrap;
}

/* ------------------------------------------------- карусель с кнопками */
.carousel { position: relative; }
.crail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.crail::-webkit-scrollbar { display: none; }
.crail > * { scroll-snap-align: start; }
.crail--4 > * { flex: 0 0 calc((100% - 60px) / 4); }
.crail--33 > * { flex: 0 0 calc((100% - 40px) / 3.3); }
/* Ровно три в ряд: карточки отзывов должны обрываться не на полуслове,
   а по краю — лента листается страницами по три. */
.crail--3 > * { flex: 0 0 calc((100% - 40px) / 3); }

/* акции сеткой, когда их три или меньше */
.pgrid { display: grid; gap: 20px; }
.pgrid--1 { grid-template-columns: minmax(0, 420px); }
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }

/* Стрелки ленты. Раньше это был плотный кружок цвета подложки поверх
   фотографии — он читался как дырка в кадре. Теперь затемнённое стекло:
   кадр за кнопкой виден, а сама кнопка не спорит со снимком. Внутри —
   та же SVG-галка, что на карточках мастеров и в расписании. */
.carr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 10, 9, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--tx-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: color .18s, border-color .18s, background .18s, opacity .18s;
}
.carr:hover:not(:disabled) {
  color: var(--acc-lt); border-color: var(--acc); background: rgba(12, 10, 9, .78);
}
/* Дошли до края — кнопка гаснет и не ловит клик: раньше она нажималась
   впустую, и было непонятно, кончилась лента или что-то сломалось. */
.carr:disabled { opacity: .28; cursor: default; }
.carr--prev { left: -21px; }
.carr--next { right: -21px; }

/* Стрелки под лентой отзывов: слева от неё стоит панель оценок, и кнопке
   у левого края ленты некуда вылезать — она налезала бы на панель. */
.carr--flat {
  position: static; transform: none;
  width: 38px; height: 38px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--bd-20);
}
.carr--flat:hover:not(:disabled) { background: rgba(230, 190, 152, .08); }

/* --------------------------------------------------- отзывы: панель + лента */
.revlab { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: stretch; }
.revlab__slider { position: relative; min-width: 0; }
/* Две карточки в ряд: с тремя отзыв ужимался до колонки в 300 пикселей,
   и живой текст рвался на десяток строк. */
.crail--rev > * { flex: 0 0 calc((100% - 20px) / 2); }
.revctl { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
/* точки на одной линии со стрелками: общее .carousel .cdots ниже по файлу
   добавляет margin-top — перебиваем весом селектора */
.revlab .revctl .cdots { margin: 0 0 0 8px; justify-content: flex-start; }

@media (max-width: 1000px) {
  .revlab { grid-template-columns: 1fr; gap: 20px; }
  /* Панель ложится строкой: два числа рядом, кнопка справа. */
  .revrate { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 18px 26px; padding: 20px; }
  .revrate__c { width: auto; }
  .revrate__c + .revrate__c { border-top: 0; padding-top: 0; }
  .revrate__btn { width: auto; margin-top: 0; }
}
@media (max-width: 760px) {
  .crail--rev > * { flex: 0 0 100%; }
  .revrate { flex-direction: column; align-items: stretch; }
  .revrate__c + .revrate__c { border-top: 1px solid var(--bd-10); padding-top: 18px; }
  .revrate__btn { width: 100%; }
}


/* ------------------------------------------------------- карточка акции */
.pcard2 {
  border-radius: var(--r-xl);
  overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column;
}
.pcard2__img { height: 230px; background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pcard2__body { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; }
/* В карточке заголовок — это название акции (kicker), а под ним её описание:
   вес шрифта расставлен по этой роли, а не по порядку блоков. */
.pcard2__kicker { margin-bottom: 12px; text-wrap: pretty; }
.pcard2__t { margin-bottom: 8px; text-wrap: pretty; }
/* Описание акции — три строки; не поместилось — последняя строка гаснет, под ней «Подробнее» (initQuoteMore в ui.js) */
.pcard2__t[data-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pcard2.is-clamped:not(.is-open) .pcard2__t { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.pcard2.is-open .pcard2__t { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pcard2__more { margin: 0 0 14px; }
.pcard2__d { margin-bottom: 26px; }
.pcard2__acts { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------- особые случаи */
/* Карточка повода кликается целиком: ссылку «Подробнее» растягиваем
   псевдоэлементом на всю карточку (::after у неё занят стрелкой). Ссылка
   в разметке одна — для экранных читалок и поиска ничего не меняется. */
.occ {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
}
.occ__img {
  height: 240px; background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
/* «Подробнее» — по нижнему краю, на одной линии во всех карточках ряда */
.occ__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 30px 32px; }
.occ__t { margin-bottom: 14px; }
.occ__d { margin-bottom: 26px; }
.occ .ulink { margin-top: auto; }
.occ .ulink::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.occ:hover .occ__img { transform: scale(1.04); }
.occ:hover .ulink { color: var(--tx-white); border-bottom-color: var(--acc-lt); }
.occ:hover .ulink::after { transform: translateX(5px); }
.occ:has(.ulink:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; }
.occ .ulink:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .occ:hover .occ__img, .occ:hover .ulink::after { transform: none; }
}
#occasions .grid { gap: 28px; }

/* ссылка-подчёркивание «Подробнее» */
/* Стрелка — часть самой ссылки, а не дописанный в текст символ: раньше её
   ставили руками только в двух местах из трёх, и блоки выглядели по-разному.
   На наведении подчёркивание разгорается, а стрелка делает шаг вперёд. */
.ulink {
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(230, 190, 152, .4);
  padding-bottom: 6px;
  transition: color .18s, border-color .18s;
}
.ulink::after {
  content: '→'; font-size: 13px; letter-spacing: 0; line-height: 1;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
}
.ulink:hover { color: var(--tx-white); border-bottom-color: var(--acc-lt); }
.ulink:hover::after { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .ulink:hover::after { transform: none; }
}

/* -------------------------------------------------- подарочные номиналы */
.cert-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center;
  background: var(--surface); border: 1px solid var(--bd-14);
  border-radius: 20px; padding: 45px;
}
/* Кому дарят: строка под заголовком и список поводов. Это повод, а не
   условие, и читают его первым — отсюда акцентный цвет и размер крупнее
   описания. Сплошной строкой перечисление проскакивали глазами, списком
   каждый повод виден отдельно. */
.cert-who__list {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 460px;
}
.cert-who__list li {
  position: relative; padding-left: 24px;
}
/* Маркер — ромбик акцентом: точка терялась в тексте, а галочка обещала бы
   «включено в стоимость», чего здесь нет. Центр — на середине первой
   строки (.5lh), а не в em: иначе уезжает при смене межстрочного интервала. */
.cert-who__list li::before {
  content: '';
  position: absolute; left: 3px; top: .85em; top: .5lh;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: var(--acc);
}
/* Полоса во всю ширину: заливка уходит на секцию, а сетка внутри держится
   той же колонки, что и остальные блоки страницы. Скруглённая карточка
   внутри пустой секции читалась как «блок в блоке». */
.certband {
  background: var(--surface);
  border-block: 1px solid var(--bd-14);
  padding: 92px var(--pad);
}
/* Полоса идёт сразу за другой полосой — верхний отступ срезаем, как
   и у обычных секций: иначе к отступу соседа снизу прибавляется свой. */
.sec--line + .certband { padding-top: 64px; }
.certband .cert-grid {
  background: none; border: 0; border-radius: 0; padding: 0;
  max-width: var(--w); margin-inline: auto;
}
/* Веер карточек: чуть повёрнут — на столе сертификаты тоже не лежат по линейке. */
.certcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transform: rotate(-3deg); }

/* ------------------------------------------------------------ интерьеры */
/* Точки идут сразу под лентой: тридцать четыре пикселя общего отступа
   отрывали их от карусели и они висели сами по себе. */
.carousel .cdots { margin-top: 22px; }
.int {
  padding: 0; border: none; cursor: pointer; border-radius: 0; overflow: hidden;
  position: relative;
  background-color: var(--bg); background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Наведение как в галерее мастера: приближается отдельный слой с кадром. */
.int::before {
  content: ''; position: absolute; inset: 0;
  background: inherit; background-size: cover; background-position: center;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s;
}
.int:hover::before, .int:focus-visible::before {
  transform: scale(1.06); filter: brightness(1.06) saturate(1.06);
}

/* Интерьеры KAIF — ровная плитка 4:3 (07.10, заказчик): у части кадров невысокое
   разрешение, в мозаике с большими ячейками 2×2 они растягивались. Все ячейки
   одного размера: 4 в ряд на компьютере, 2 на телефоне. */
.imosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.imosaic .int { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .imosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ------------------------------------------------------------ Crazy-меню */
/* две колонки по 5 строк, заполняются сверху вниз — как в макете */
.crazy { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 56px; }
/* Разделитель тише прежнего: строки читаются как список, а не как
   расчерченная таблица. Первая строка каждой колонки без линии — над ней
   и так подпись блока, и лишняя черта выглядела обрезанным краем.
   В колонке пять строк, отсюда 5n+1. */
.crazy__i { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--bd-10); }
.crazy__i:nth-child(5n+1) { border-top: 0; }
.crazy__l { flex: 1; border-bottom: 1px dotted var(--bd-30); }
.crazy__p { white-space: nowrap; }
.crazy__note { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 34px; }

/* ------------------------------------------ аккордеон в стиле макета */
.acc--plain { gap: 0; }
.acc--plain .acc__it { background: none; border: none; border-top: 1px solid var(--bd-20); border-radius: 0; }
.acc--plain .acc__btn { padding: 24px 0; }
.acc--plain .acc__q { color: var(--tx-soft); }
.acc--plain .acc__ico { border: none; width: auto; height: auto; color: var(--acc-lt); }
.acc--plain .acc__body { padding: 0 0 26px; }
.acc--plain .acc__a { color: var(--tx-mute); max-width: 700px; }

/* -------------------------------------------------------- блок контактов */
.cgrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.cinfo { display: flex; flex-direction: column; gap: 24px; margin-bottom: 34px; }
.cinfo__k { margin-bottom: 8px; }

.cmap { border-radius: var(--r-xl); overflow: hidden; }
.cmap .ymap { display: block; width: 100%; height: 440px; border: 0; }
.cmap__foot {
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--bd-20);
}

/* --------------------------------------------------- адаптив главной */
@media (max-width: 1440px) {
  .carr--prev { left: 8px; }
  .carr--next { right: 8px; }
}

@media (max-width: 1180px) {
  .prow { grid-template-columns: minmax(0, 1.3fr) 120px 150px 34px; gap: 22px; }
  .prow__desc { display: none; }
}

@media (max-width: 1080px) {
  .cgrid, .cert-grid { grid-template-columns: 1fr; gap: 40px; }
  .banner { padding: 36px 28px; }
  .crail--4 > * { flex: 0 0 calc((100% - 20px) / 2); }
  .crail--33 > * { flex: 0 0 calc((100% - 20px) / 2.2); }
}

@media (max-width: 900px) {
  /* В одну колонку строки идут подряд, и «первая в колонке» — только самая
     первая: правило 5n+1 здесь оторвало бы линию у шестой строки посреди списка. */
  .crazy { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .crazy__i:nth-child(5n+1) { border-top: 1px solid var(--bd-10); }
  .crazy__i:first-child { border-top: 0; }
  .hero__in { padding-top: 40px; }
  .hero__main { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hero__col { padding: 0; }
  .hero__media { min-height: 380px; margin: 0 0 8px; }
  /* в сетке 2×2 вертикальные линии только мешают — разводим ячейки зазором */
  .hero-feats__in { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding: 32px var(--pad); }
  .hf { border-left: none; padding: 0; }
}

@media (max-width: 820px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; padding: 22px 0; }
  .prow__go { display: none; }
  .prow__name { flex-wrap: wrap; }
  .prow__name b { white-space: normal; }
  .prow__desc { display: block; grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  /* на узких экранах кнопки баннера перестают быть неразрывными */
  .banner { padding: 28px 20px; }
  .banner__acts { flex-shrink: 1; width: 100%; }
  .banner__acts > * { flex: 1 1 100%; }
  .hero-feats__in { grid-template-columns: 1fr; gap: 20px; }
  .hero__cta { width: 100%; }
  .hero__cta > * { flex: 1 1 auto; }
  .hero__gift { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .crail--4 > *, .crail--33 > * { flex: 0 0 86%; }
  .carr { display: none; }
  .certcards { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Ритм и воздух главной (28.09.2026)

   Отступы — по шкале 16 / 28 / 32 / 56 / ~124:
   - секция: одинаково сверху и снизу (было 64 сверху и 142 снизу —
     заголовок прилипал к черте, под содержимым висел провал);
   - заголовок секции → содержимое: всегда 56 (было 22…56 вразнобой);
   - заголовок → абзац под ним: 16, абзац → содержимое: 40;
   - карточки в сетке: 28 между, 32 внутри.

   Фон — строгое чередование двух тонов вместо почти неотличимых
   #0d0a08 / #100c0a, разрезанных волосяными чертами:
   тёмный (#0d0a08, с подсветкой) — мастера, акции, поводы, интерьеры,
   отзывы, контакты; светлее (#1a1512) — первый экран, программы, рулетка,
   сертификаты, дополнения, вопросы. Смена тона сама отбивает секции,
   поэтому черты сняты.

   Только главная (.home на body): у посадочных своя разметка полос
   (sec--glow / sec--deep на самих секциях), им этот порядок не подходит.
   ========================================================================== */

.home {
  --sp-sec: clamp(96px, 10vw, 128px);
  --sp-head: 56px;
  --sp-gap: 28px;
  --sp-card: 32px;
  --bg-alt: #1a1512;
  --bg-alt-2: #221b17;               /* плашка внутри светлой полосы */
  /* подсветка тёмных секций вдвое тише: иначе угол тёмной секции
     выходил светлее светлой полосы и чередование смазывалось */
  --glow: radial-gradient(ellipse 62% 58% at 82% 6%, rgba(230, 190, 152, .07), transparent 62%);
}
@media (max-width: 760px) {
  .home {
    --sp-sec: 80px;
    --sp-head: 36px;
    --sp-gap: 16px;
    --sp-card: 24px;
  }
}

/* ---------------------------------------------------- отступы секций */
.home :is(.sec, .sec.sec--wide, .sec--line + .sec,
          .sec--line > .sec:first-child, .sec--glow > .sec:first-child),
.home :is(.certband, .sec--line + .certband, .slot--band) {
  padding-block: var(--sp-sec);
}

/* ------------------------------------------------------------- фоны */
.home .sec--line { border-bottom: 0; }
.home .hero::after { content: none; }
.home :is(.certband, .slot--band) { border-block: 0; }

/* светлые полосы — во всю ширину, даже если секция уже экрана */
.home :is(.hero, main > .sec, main > #slot, .certband) {
  background-color: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
}
.home .slot--band { background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(230, 190, 152, .12), transparent 68%), var(--bg-alt); }
/* плашка внутри светлой полосы — на ступень светлее самой полосы */
.home .banner {
  background: radial-gradient(ellipse 70% 90% at 88% 0%, rgba(230, 190, 152, .16), transparent 60%), var(--bg-alt-2);
  border: 1px solid var(--bd-10);
}

/* ------------------------------------------ заголовок секции → содержимое */
.home :is(.shead, .shead--top, .slot__head),
.home .sec > .h2 { margin-bottom: var(--sp-head); }
/* заголовок с абзацем под ним: абзац ближе к заголовку, отступ — после абзаца */
.home .sec > .h2:has(+ .body-t),
.home .certband .h2 { margin-bottom: 16px; }
.home .sec > .h2 + .body-t,
.home .certband .h2 + .body-t { margin-bottom: 40px; }
/* в контактах под заголовком сразу список — отступ как внутри колонки */
.home .cgrid .h2 { margin-bottom: 40px; }
.home .eyebrow + .h2,
.home .slot__head .eyebrow { margin-bottom: 16px; }
.home .shead__note { max-width: 380px; }

/* ------------------------------------------------ сетки и карточки */
.home :is(.pgrid, #occasions .grid, .revlab) { gap: var(--sp-gap); }
.home .grid--gap-lg { gap: 56px var(--sp-gap); }
.home :is(.pcard2__body, .occ__body) { padding: var(--sp-card); }
.home .quote { padding: var(--sp-card) 28px; }
.home .revrate { padding: var(--sp-card) 24px; }
.home .banner { margin-top: var(--sp-head); padding: 56px 64px; }
.home .prow { padding-block: 32px; }
.home .crazy__i { padding-block: 20px; }
.home .acc__btn { padding-block: 28px; }
.home .cinfo { gap: 28px; margin-bottom: 40px; }

@media (max-width: 760px) {
  .home .banner { padding: 32px 24px; }
  .home .quote { padding: var(--sp-card) 20px; }
  .home .grid--gap-lg { gap: 40px var(--sp-gap); }
}

/* ==========================================================================
   Ритм посадочных и районов (29.09.2026) — тот же принцип, что у главной.

   Секции на посадочных выводятся по условиям (есть о-нас, мастера, FAQ…),
   поэтому тон задаём не классами sec--glow/sec--deep в разметке, а по
   фактическому порядку: первый экран светлый, дальше строго через одну —
   тёмная с подсветкой / светлая. Блок записи в конце всегда противоположен
   последней секции. Черты между секциями сняты — отбивает смена тона.
   ========================================================================== */

:is(.single-landing, .single-district) {
  --sp-sec: clamp(96px, 10vw, 128px);
  --sp-strip: 72px;                    /* полоса преимуществ после первого экрана */
  --sp-head: 56px;
  --bg-alt: #1a1512;
  --bg-alt-2: #221b17;
  --glow: radial-gradient(ellipse 62% 58% at 82% 6%, rgba(230, 190, 152, .07), transparent 62%);
}
@media (max-width: 760px) {
  :is(.single-landing, .single-district) { --sp-sec: 80px; --sp-strip: 48px; --sp-head: 36px; }
}

/* отступы: одинаково сверху и снизу */
:is(.single-landing, .single-district) main > .sec,
:is(.single-landing, .single-district) main > .sec.sec--line + .sec { padding-block: var(--sp-sec); }
:is(.single-landing, .single-district) main > .sec.sec--xs { padding-block: var(--sp-strip); }

/* черты — долой, отбивка тоном */
:is(.single-landing, .single-district) main > .sec { border-top: 0; border-bottom: 0; }
:is(.single-landing, .single-district) .hero::after { content: none; }

/* тона по порядку: 1-я секция (первый экран) светлая, дальше через одну */
:is(.single-landing, .single-district) main > section:nth-of-type(odd) { background: var(--bg-alt); }
:is(.single-landing, .single-district) main > section:nth-of-type(even) { background: var(--glow), var(--bg-deep); }
/* блок записи: по умолчанию тёмный; если последняя секция тёмная — светлый */
:is(.single-landing, .single-district) main > div.sec:last-child { background: var(--glow), var(--bg-deep); }
:is(.single-landing, .single-district) main:has(> section:nth-of-type(even):last-of-type) > div.sec:last-child { background: var(--bg-alt); }

/* карточки в светлых секциях — на ступень светлее фона, иначе сливаются */
:is(.single-landing, .single-district) main > section:nth-of-type(odd) :is(.card, .tile, .pcard, .pcard2, .quote, .revrate) {
  background-color: var(--bg-alt-2);
}

/* заголовок секции → содержимое */
:is(.single-landing, .single-district) main > .sec .sec-head { margin-bottom: var(--sp-head); }
:is(.single-landing, .single-district) main > .sec > .wrap > .h2 { margin-bottom: var(--sp-head) !important; }

/* Иконка плитки-преимущества (mars_perk_icon, набор Lucide) */
.tile__ico { display: block; color: var(--acc); margin-bottom: 18px; }
/* Тексты блоков «мастерицы» и «программы» SEO-страницы — во всю ширину, абзацы в две колонки */
.lp-text { margin: 22px 0 8px; }
@media (min-width: 900px) { .lp-text { columns: 2; column-gap: 56px; } .lp-text > * { break-inside: avoid; } .lp-text > :first-child { margin-top: 0; } }

/* ------------------------------------------------ Английская страница /en/ */
.en-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 30px; padding: 0 8px;
  border: 1px solid var(--bd-30); border-radius: 6px;
  font-size: var(--fs-label); letter-spacing: .08em; color: var(--c-mute);
  transition: color .2s, border-color .2s;
}
.en-lang:hover { color: var(--acc-lt); border-color: var(--acc); }
.en-h2 { margin-bottom: 32px; }
.en-tile__t { margin-bottom: 10px; }
.en .mcard__acts > .btn { flex: 1 1 100%; }

.en-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.en-prog {
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 30px 28px; border-radius: var(--r-xl);
  border: 1px solid var(--bd-14); background: rgba(22, 17, 16, .5);
}
.en-prog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.en-prog__name { margin: 0; }
.en-prog__price { flex-shrink: 0; white-space: nowrap; font-size: var(--fs-h4); font-weight: 600; color: var(--c-head); }
.en-prog__meta { margin: 0; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.en-prog__text { margin: 0; color: var(--tx-mute); }
.en-prog__book { align-self: flex-start; margin-top: auto; }
.en-grid { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.en-grid th, .en-grid td { padding: 9px 12px 9px 0; text-align: left; border-bottom: 1px solid var(--bd-14); white-space: nowrap; }
.en-grid thead th { font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-mute); }
.en-grid tbody th { font-weight: 400; color: var(--c-text); }
.en-grid td { color: var(--c-head); }
.en-grid tr > :last-child { padding-right: 0; }

.en-loc { align-items: flex-start; gap: 48px; }
.en-loc__list { max-width: 520px; }
.en-loc__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.en-loc__map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--bd-16); }
.en-faq { max-width: 900px; }
.en-cta__t { max-width: 460px; }
.en-cta__acts { display: flex; flex-direction: column; gap: 12px; max-width: 360px; width: 100%; }
.en-foot { display: grid; gap: 16px; padding-block: 44px; }
.en-foot__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }

@media (max-width: 900px) {
  .en-progs { grid-template-columns: 1fr; }
  .en-loc { gap: 32px; }
}
@media (max-width: 560px) {
  .en-prog { padding: 24px 20px 22px; }
  .en-grid th, .en-grid td { font-size: var(--fs-small); padding-right: 8px; }
  .en .hdr__tel { display: none; }
}