/* ==========================================================================
   Блоки главной страницы.
   Перенесено с артборда «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__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; }
.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;
}
/* «→» кодом: сервер отдаёт CSS без charset, и браузер читал стрелку как «â†’». */
.ulink::after {
  content: '\002192'; 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);
}

/* Мозаика интерьеров. Блоки трёх видов: большой 2×2,
   высокий 1×2 (под вертикальные кадры) и квадратный. Узор повторяется
   каждые девять кадров и при плотной укладке (dense) закрывает сетку
   без дыр: 4 колонки на компьютере, 2 на телефоне. Высота строки
   считается от ширины блока (cqi), поэтому ячейки не меняют пропорций. */
.imosaic {
  --mos-gap: 12px;
  --mos-cols: 4;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--mos-cols), minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--mos-gap);
}
@supports (width: 1cqi) {
  .imosaic { grid-auto-rows: calc((100cqi - (var(--mos-cols) - 1) * var(--mos-gap)) / var(--mos-cols) / 1.38); }
}
@supports not (width: 1cqi) {
  .imosaic { grid-auto-rows: 210px; }
  /* Телефон без cqi (Safari до iOS 16, часть встроенных браузеров): строка
     по 210px делала высокую ячейку 164×420, и от горизонтального кадра
     оставалась узкая полоска. Считаем от ширины экрана: две колонки,
     поля по 20px, зазор 8px. */
  @media (max-width: 760px) {
    .imosaic { grid-auto-rows: calc((100vw - 48px) / 2 / 1.38); }
  }
}
.imosaic .int { border-radius: var(--r-lg); }
.imosaic .int:nth-child(9n + 1),
.imosaic .int:nth-child(9n + 5),
.imosaic .int:nth-child(9n + 6),
.imosaic .int:nth-child(9n + 7) { grid-row: span 2; }
.imosaic .int:nth-child(9n + 2) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) {
  .imosaic { --mos-cols: 2; --mos-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; }
/* отзывы — светлая полоса (с 12.10.2026, когда сняли блок дополнений): карточки на ступень светлее фона */
.home #reviews :is(.quote, .revrate) { background-color: var(--bg-alt-2); }

@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; }