/* ==========================================================================
   Oil Massage — стили блоков сайта. Опирается на css/tokens.css.
   ========================================================================== */

:root {
  /* единый отступ контента от краёв (общий для меню и содержимого hero) */
  --edge: clamp(18px, 4vw, 56px);
  --edge-top: clamp(16px, 2.4vw, 28px);
  /* Боковой отступ контента секций (Блок 2 и далее). Подложка секции идёт
     на всю ширину, контент отступает от краёв на --gutter. Единый на все блоки:
     меняешь тут — двигаются все секции разом. На 1920 даёт ~140px поля. */
  --gutter: clamp(24px, 7.3vw, 140px);
  /* «Черепица»: каждая секция скруглена снизу и заходит под предыдущую.
     Две крутилки на весь сайт — правишь тут, перестраиваются все стыки.
     Заход обязан равняться радиусу, иначе в пазухах углов вылезет полоса. */
  --tile-r: 48px;         /* радиус нижних углов секции */
  --tile-overlap: 48px;   /* насколько следующая секция уходит под предыдущую */
}

.wrap { max-width: var(--content); margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.accent { color: var(--sage-300); }

/* ======================= Блок 1. Hero ======================= */
.hero {
  position: relative;
  z-index: 8;                 /* верхняя черепица, лежит поверх Блока 2 */
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* мягкая тень вниз: карточка hero отбрасывает тень на зелень Блока 2 */
  box-shadow: 0 26px 40px -18px rgba(16, 22, 16, 0.55);
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../assets/fon.png") center right / cover no-repeat;
  transform: scale(1.04);
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg,
      rgba(28, 36, 28, 0.92) 0%,
      rgba(28, 36, 28, 0.66) 34%,
      rgba(28, 36, 28, 0.20) 62%,
      rgba(28, 36, 28, 0.42) 100%),
    linear-gradient(180deg,
      rgba(20, 26, 20, 0.55) 0%,
      rgba(20, 26, 20, 0.05) 26%,
      rgba(20, 26, 20, 0.10) 62%,
      rgba(20, 26, 20, 0.72) 100%);
}

/* --- Меню --- */
.nav {
  position: absolute; top: var(--edge-top); left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--edge);
  --btn-r: 28.5px;  /* радиус капсулы кнопки (половина высоты) */
  --notch: 34.5px;  /* радиус выемки в плашке (больше на величину зазора) */
  --notch-pos: 100%; /* положение выемки по X (десктоп: у правого края плашки) */
  --nav-fz: clamp(0.95rem, 0.86rem + 0.4vw, 1.06rem);  /* размер меню, середина */
}
.nav__bar {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-radius: var(--r-pill);
  /* правого отступа больше: выемка съедает место, последний пункт не должен упираться */
  padding: 14px clamp(49px, 4.2vw, 64px) 14px clamp(25px, 2.6vw, 37px);
  box-shadow: 0 8px 30px rgba(20, 26, 20, 0.28);
  /* вогнутая выемка под кнопку-осколок. Положение по X — переменная --notch-pos
     (десктоп: 100% = у правого края; мобилка сдвигает выемку к левому краю кнопки). */
  -webkit-mask: radial-gradient(circle var(--notch) at var(--notch-pos) 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
  mask: radial-gradient(circle var(--notch) at var(--notch-pos) 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
}
.nav__links {
  display: flex; align-items: center; gap: clamp(16px, 1.95vw, 29px);
  list-style: none; margin: 0; padding: 0;
}
.nav__links a {
  color: var(--paper); font-weight: 600; font-size: var(--nav-fz);
  opacity: 0.9; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__links a:hover { opacity: 1; color: #fff; }
/* Кнопка-осколок «Связаться»: обёртка садится центром в выемку плашки,
   внутри — капсула-триггер и выпадающий список способов связи. */
.nav__contact {
  position: relative; z-index: 2;
  margin-left: calc(-1 * var(--btn-r));   /* капсула садится центром в выемку */
}
.nav__cta {
  padding: 0.88em 1.5em 0.88em 1.78em; font-size: var(--nav-fz);
  box-shadow: var(--shadow-sage); cursor: pointer;
}
.nav__cta:hover { transform: translateY(-2px); }
/* Иконка справа от «Связаться»: стрелка вниз, при открытии меняется на крестик. */
.nav__caret, .nav__cross { flex: none; }
.nav__cross { display: none; }
.nav__contact.is-open .nav__caret { display: none; }
.nav__contact.is-open .nav__cross { display: inline-block; }

/* Выпадающий список. Прозрачный padding сверху — мост через зазор,
   чтобы курсор не терял ховер по пути от кнопки к карточке. */
.nav__menu {
  position: absolute; top: 100%; right: 0;
  padding-top: 12px; min-width: 272px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  pointer-events: none;
  /* Это состояние = ЗАКРЫТИЕ. Здесь opacity фейдится плавно (стекло уходит вместе
     с картой), а visibility гаснет с задержкой в --dur, чтобы карта дожила до конца
     фейда и не пропадала рывком. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
/* Открытие по .is-open (тап — работает на любом устройстве, ставит JS). */
.nav__contact.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  /* opacity НЕ в переходе → мгновенно 1, backdrop-filter рисуется с первого кадра,
     стекло не «впрыгивает». Двигается только transform. */
  transition: transform var(--dur) var(--ease), visibility 0s;
}
/* Десктоп с мышью: раскрытие ещё и по ховеру/фокусу. На тач этих правил НЕТ —
   иначе фокус от тапа держал бы список открытым и ломал toggle по кнопке. */
@media (hover: hover) {
  .nav__contact:hover .nav__caret,
  .nav__contact:focus-within .nav__caret { display: none; }
  .nav__contact:hover .nav__cross,
  .nav__contact:focus-within .nav__cross { display: inline-block; }
  .nav__contact:hover .nav__menu,
  .nav__contact:focus-within .nav__menu {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }
}
/* Подложка — тот же стеклянный стиль, что и у плашки меню (.nav__bar). */
.nav__menu-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border-radius: var(--r-lg);
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 8px 30px rgba(20, 26, 20, 0.28);
}
.nav__opt {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 9px; border-radius: 14px;
  color: var(--paper); font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.nav__opt:hover { background: rgba(255, 255, 255, 0.12); }
.nav__opt-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__opt--call .nav__opt-ico { background: var(--sage-600); }
.nav__opt--vk   .nav__opt-ico { background: #0077FF; }
.nav__opt--max  .nav__opt-ico { background: linear-gradient(135deg, #2D8CF0, #6C5CE7); }
.nav__opt--tg   .nav__opt-ico { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.nav__opt--wa   .nav__opt-ico { background: #25D366; }
.nav__burger { display: none; }
/* Компактный логотип внутри плашки — только мобилка (см. блок max-width:900). */
.nav__logo { display: none; }
/* Мобильное меню (выпадашка бургера) — только мобилка. */
.nav__mobile-menu { display: none; }

/* --- Внутренний контейнер --- */
.hero__inner {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--edge-top) var(--edge) clamp(40px, 6vh, 64px);
}

/* --- Леттеринг бренда --- */
.hero__brand {
  position: relative; width: max-content;
  /* Отступ логотипа сверху: буквы встают на линию плашки меню.
     hero__inner уже даёт --edge-top, поэтому доп. маржин 0. Крутилка тут: */
  --logo-top: 35px;
  margin-top: var(--logo-top);
  /* ЛОГОТИП ЗАПЕЧЁН В ОДИН МАСШТАБ. Всё (обе строки букв + размер и сдвиги ветви)
     считается от одного числа --logo-size. Меняешь его — весь лок сжимается
     пропорционально, ветвь замерзает в текущем положении относительно букв.
     Коэффициенты ниже сняты с одобренного десктопного вида (при 8.2rem = 131.2px):
       строка 2 = 0.7927 от строки 1;  ветвь: ширина ×2.439, сдвиг X ×-2.4466, Y ×0.1982. */
  --logo-size: clamp(3.4rem, 9vw, 8.2rem);
  display: flex; flex-direction: column;
  line-height: 0.86; letter-spacing: -0.03em;
  font-weight: 800;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
/* Оливковая ветвь логотипа. Размеры теперь в долях от --logo-size (не в px),
   поэтому ветвь масштабируется вместе с буквами. Поворот — единственная крутилка. */
.hero__branch {
  --bw: calc(var(--logo-size) *  2.439);   /* ширина ветви (было 320px при 131.2px) */
  --bx: calc(var(--logo-size) * -2.4466);  /* сдвиг по X (было -321px) */
  --by: calc(var(--logo-size) *  0.1982);  /* сдвиг по Y (было 26px) */
  --brot: -119deg;                          /* поворот */
  position: absolute; top: 0; right: 0; z-index: 1;
  width: var(--bw); height: auto;
  transform: translate(var(--bx), var(--by)) rotate(var(--brot));
  transform-origin: right top;
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22));
}
.hero__brand-1 { font-size: var(--logo-size); color: var(--paper); }
.hero__brand-2 {
  font-size: calc(var(--logo-size) * 0.7927);
  color: var(--sage-300);
  letter-spacing: -0.02em;
}
.hero__brand-1 i { font-style: normal; color: var(--sage-300); }

/* --- Лид + карточка в одном ряду --- */
.hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch; gap: clamp(24px, 5vw, 72px);
}
/* Текстовая зона = якорь фиксированной высоты (тянется на высоту ряда).
   Заголовок, подзаголовок и кнопки стоят в ней независимо, каждый привязан
   к её низу своим отступом. Правка одного не двигает соседей. Крутилки: */
.hero__lead {
  position: relative; max-width: 46ch;
  --title-y: 295px;   /* отступ низа заголовка от низа текстовой зоны */
  --sub-y: 150px;      /* отступ низа подзаголовка */
  --cta-y: 0px;       /* отступ низа кнопок */
}
.hero__title {
  --title-gap: 19px;                 /* воздух между строками (по буквам) */
  position: absolute; left: 0; bottom: var(--title-y);
  font-size: var(--step-5); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.02; color: var(--paper);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero__title-1, .hero__title-2 { white-space: nowrap; line-height: 1; }
/* -14.5px гасит полу-leading шрифта, чтобы --title-gap = видимый зазор по буквам.
   Пересчитать это число при смене --font-display. */
.hero__title-2 { font-size: 54px; margin-top: calc(var(--title-gap) - 14.5px); }
.hero__sub {
  position: absolute; left: 0; bottom: var(--sub-y);
  font-size: var(--step-1);
  color: var(--paper); opacity: 0.9;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.hero__sub span { display: block; white-space: nowrap; width: max-content; }
.hero__cta {
  position: absolute; left: 0; bottom: var(--cta-y);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
}

/* --- Сменные карточки услуг --- */
.svc-rotator {
  width: clamp(300px, 30vw, 384px);
  height: clamp(360px, 46vh, 396px);   /* фиксированная высота, карточка не прыгает */
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: 0 20px 50px rgba(16, 22, 16, 0.42);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.svc-rotator__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.svc-rotator__eyebrow {
  font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--sage-300);
}
.svc-rotator__arrows { display: flex; gap: 8px; }
.svc-rotator__arrow {
  width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center; border-radius: 50%;
  color: var(--paper);
  background: rgba(244, 240, 231, 0.12);
  border: 1px solid var(--glass-light-brd);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-rotator__arrow:hover { background: rgba(244, 240, 231, 0.24); transform: translateY(-1px); }
.svc-rotator__arrow:active { transform: translateY(0); }

.svc-rotator__body { flex: 1; min-height: 0; overflow: hidden; }
.svc-rotator__name {
  font-size: var(--step-2); font-weight: 800; color: var(--paper);
  letter-spacing: -0.02em; line-height: 1.1;
}
.svc-rotator__meta { margin-top: var(--space-2); color: var(--paper); opacity: 0.85; font-size: var(--step-0); }
.svc-rotator__meta b { color: var(--sage-300); font-weight: 700; }
.svc-rotator__desc {
  margin-top: var(--space-4); color: var(--paper-soft); font-size: var(--step-0); line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* мягкая смена контента */
.svc-rotator__body.is-fading .svc-rotator__name,
.svc-rotator__body.is-fading .svc-rotator__meta,
.svc-rotator__body.is-fading .svc-rotator__desc { opacity: 0; transform: translateY(8px); }
.svc-rotator__name, .svc-rotator__meta, .svc-rotator__desc {
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.svc-rotator__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.svc-rotator__dots { display: flex; gap: 7px; }
.svc-rotator__dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(244, 240, 231, 0.35); transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.svc-rotator__dots button.is-active { background: var(--sage-300); width: 22px; border-radius: var(--r-pill); }
.svc-rotator__btn { padding: 0.7em 1.5em; font-size: var(--step--1); }

/* ======================= Блок 2. Описание салона ======================= */
.about {
  position: relative;
  z-index: 7;                          /* под hero, но над Блоком 3 */
  overflow: hidden;                    /* ветви-водяные знаки обрезаются по форме секции */
  --about-overlap: var(--tile-overlap); /* заход под hero (= радиусу низа hero) */
  margin-top: calc(-1 * var(--about-overlap));
  padding-top: calc(var(--about-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);  /* «черепица»: секция скруглена снизу */
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз, как у hero: без неё нахлёст на Блок 3 не читается */
  box-shadow: 0 26px 40px -18px rgba(20, 30, 20, 0.42);
}
/* Контент секции: во всю ширину минус боковой отступ --gutter (общий для блоков).
   z-index поднимает контент над ветвями (они на z-index 0). */
.about__inner {
  position: relative; z-index: 1;
  padding: 0 var(--gutter);
}

/* Оливковые ветви-водяные знаки в двух углах Блока 2. Те же числа, что в Блоке 5
   (.process__branch): нижняя правая и верхняя левая, зеркальные, за краями. */
.about__branch {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 736 / 660;
  background: var(--sage-200);
  -webkit-mask: url("../assets/vetka.svg") no-repeat center / contain;
          mask: url("../assets/vetka.svg") no-repeat center / contain;
  opacity: 0.12;
}
.about__branch--br {
  width: 600px;
  right: -90px;
  bottom: -96px;
  transform: rotate(4deg);
}
.about__branch--tl {
  width: 760px;
  left: -100px;
  top: -40px;
  transform: scale(-1, -1) rotate(4deg);
}

/* --- Верхний ряд: текст + промо-ролик --- */
.about__top {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: clamp(22px, 3.4vw, 60px);
}
.about__text {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 38px);
  border-radius: var(--r-lg);
  background: rgba(244, 240, 231, 0.05);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.about__lead {
  font-size: var(--step-1); line-height: 1.35; color: var(--paper);
  font-weight: 600; letter-spacing: -0.01em;
}
.about__body {
  margin-top: var(--space-4);
  color: var(--paper-soft); font-size: var(--step-0); line-height: 1.6;
}
.about__facts {
  margin-top: auto; padding-top: clamp(20px, 2.2vw, 30px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  font-size: var(--step--1); color: var(--paper-soft);
}
.about__fact b { color: #E9EFDD; font-weight: 700; font-size: var(--step-0); }
.about__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(244, 240, 231, 0.45); }

/* Промо-ролик */
.about__video {
  position: relative; min-height: clamp(280px, 32vw, 420px);
  border-radius: var(--r-xl);
  display: grid; place-items: center;
  overflow: hidden;
  /* Та же тень, что у фото ленты (поджата по горизонтали, см. .about__photo). */
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.66);
}
/* Видео заполняет слот целиком; кадр 2.4:1 шире слота, поэтому cover (центр
   сохраняется, лишнее по бокам подрезается). Тёмная подложка на случай, пока
   постер/видео грузятся. */
.about__video { background: var(--sage-800); }
.about__video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- Лента фото + пульсирующая кнопка --- */
.about__gallery {
  margin-top: clamp(18px, 2vw, 28px);
  display: flex; align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}
/* Лента-карусель: видно ~4 плитки, бесконечная петля (как отзывы), стрелки,
   драг мышью и свайп. Механика на transform: лента клонируется в 3 набора и
   двигается translateX, по кругу без «отброса» на первое фото. */
.about__carousel { position: relative; flex: 1; min-width: 0; }
/* Вьюпорт клипует ленту; вертикальные padding с компенсацией margin дают
   место тени плиток, чтобы её не срезало. */
.about__viewport {
  overflow: hidden;
  /* Запас со всех сторон под тень плиток (S2), чтобы overflow не срезал её
     прямоугольником. Компенсируем отрицательным margin — визуально лента на месте.
     Горизонтальный запас безопасен: фото 7 шт, карусель по ширине всё равно активна. */
  padding: 30px 14px 52px;
  margin: -30px -14px -52px;
}
.about__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(14px, 1.4vw, 22px);
  cursor: grab; touch-action: pan-y;          /* можно зажать и тянуть мышью */
  will-change: transform;
}
.about__track.is-dragging, .about__track.is-dragging * { cursor: grabbing; }
.about__track > li {
  flex: 0 0 calc((100% - 3 * clamp(14px, 1.4vw, 22px)) / 4);
}
.about__photo {
  margin: 0; padding: 0; border: none; cursor: pointer;
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--sage-800);
  /* Тень S2, поджатая по горизонтали (spread -20 → боковой разлёт ~12px), чтобы
     она влезала в запас .about__viewport (14px) и её не резал overflow ленты по
     краям. Расширять запас нельзя: больше зазора между фото — начнёт выглядывать
     соседняя плитка петли. Вниз тень сохраняет мягкость. */
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.66);
  transition: box-shadow var(--dur) var(--ease);
}
.about__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease);
}
.about__photo:hover { box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.64); }
.about__photo:hover img { transform: scale(1.05); }
.about__photo:focus-visible { outline: 2px solid var(--sage-300); outline-offset: 2px; }
/* Стрелки листания ленты — стеклянные кружки поверх краёв ленты. */
.about__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--paper); background: rgba(20, 26, 18, 0.55);
  border: 1px solid var(--glass-light-brd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.about__nav:hover { background: rgba(20, 26, 18, 0.8); }
.about__nav--prev { left: 8px; }
.about__nav--next { right: 8px; }
.about__nav[hidden] { display: none; }

/* Пульсирующая круглая кнопка */
/* Размер уменьшен на треть от исходного (было 140/12vw/184). */
.about__pulse {
  position: relative; align-self: center;
  width: clamp(93px, 8vw, 123px);
  display: grid; place-items: center;
  border-radius: 50%; aspect-ratio: 1;
  color: var(--paper);
  background: var(--sage-500);          /* в покое — светлый шалфей */
  box-shadow: var(--shadow-sage);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.about__pulse:hover { transform: translateY(-2px); background: var(--sage-600); }
/* расходящиеся кольца пульсации */
.about__pulse::before,
.about__pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--sage-400);
  animation: about-pulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
.about__pulse::after { animation-delay: 1.4s; }
@keyframes about-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
/* Контент держим внутри вписанного в круг квадрата (сторона = диаметр / √2) */
.about__pulse-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: calc(100% / 1.414); padding: 0 2px;
  font-weight: 700; text-align: center; line-height: 1.15;
}
.about__pulse-text { font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .about__pulse::before, .about__pulse::after { animation: none; opacity: 0; }
}

/* ======================= Блок 3. Виды услуг =======================
   Сетка «зигзаг»: в каждом ряду одна длинная плашка (--k:2) и две коротких
   (--k:1), длинная прыгает слева-справа-слева.
   Ряд 1 — длинная слева (2:1:1), ряд 2 — длинная справа (1:1:2),
   ряд 3 — длинная слева (2:1:1). Доля карточки задаётся в разметке --k.

   Механика раскрытия («гармошка»): при наведении карточка получает
   flex-basis = --panel-w (фиксированная ширина панели, ОДНА И ТА ЖЕ у всех
   карточек), свободное место ряда делится по --k. Значит соседи ужимаются,
   ряд остаётся в тех же полях, ничего не перекрывается. */
.services {
  position: relative;
  z-index: 6;                                /* над Блоком 4 */
  overflow: hidden;                          /* тень пальмы обрезается по форме секции */
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень жёстче, чем у Блока 2: под ним секция того же цвета, и ребро стыка
     держится только на тени (пазухи углов на одном цвете не читаются) */
  box-shadow: 0 20px 28px -14px rgba(18, 26, 16, 0.45);
}
.services__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* Заголовок секции (общий для всех блоков): строго одна строка, без переноса.
   Чтобы строка влезала на любой ширине, размер ограничен ещё и по vw:
   на широких работает --step-3 (45px), на узких строка ужимается по экрану.
   Крутилка --title-fit считается под ДЛИНУ КОНКРЕТНОЙ ФРАЗЫ: сменил текст —
   пересчитай, иначе на узком экране строка вылезет за поле. */
.section-title {
  --title-fit: 3.55vw;  /* под строку Блока 3 (23.0em) с запасом ~4% */
  margin-bottom: clamp(24px, 2.6vw, 42px);
  font-size: min(var(--step-3), var(--title-fit));
  line-height: 1.1; letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--sage-600);   /* тот же шалфей, что у кнопки «Записаться» в покое */
}

.services__grid {
  --card-gap: clamp(14px, 1.4vw, 22px);
  --card-h: clamp(210px, 17vw, 268px);       /* высота ряда карточек */
  display: flex; flex-direction: column; gap: var(--card-gap);
}
.services__row { display: flex; gap: var(--card-gap); align-items: stretch; }

/* --- Карточка услуги --- */
.svc-card {
  --k: 1;                                    /* доля ширины в ряду (из разметки) */
  --panel-w: clamp(232px, 18vw, 312px);      /* ширина выдвижной панели, общая для всех */
  position: relative;
  flex: var(--k) 1 0;
  min-width: 0; height: var(--card-h);
  display: flex; align-items: stretch;
  border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  background: var(--sage-800);
  box-shadow: var(--shadow);
  transition: flex-basis 0.5s var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card.is-open { flex-basis: var(--panel-w); box-shadow: var(--shadow-lg); }
.svc-card:focus-visible { outline: 2px solid var(--sage-900); outline-offset: 3px; }

/* Лицо карточки: фото на всю площадь, поверх затемнение и подписи */
.svc-card__face {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 1.5vw, 24px);
  color: var(--paper);
}
.svc-card__media { position: absolute; inset: 0; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__media.is-placeholder {
  display: grid; place-items: center;
  background: var(--placeholder);
}
.svc-card__media.is-placeholder span {
  font-size: var(--step--1); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--placeholder-ink);
}
/* затемнение снизу, чтобы название читалось на любом фото */
.svc-card__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 18, 12, 0) 38%, rgba(24, 18, 12, 0.4) 100%);
}
.svc-card__info {
  position: relative; z-index: 1; min-width: 0;
  /* мягкий halo под подписью: держит читаемость на светлых кадрах, невидим на тёмных */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 0, 0, 0.45);
}
.svc-card__name {
  font-size: var(--step-1); font-weight: 800; color: var(--paper);
  line-height: 1.15; letter-spacing: -0.02em;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.svc-card__from {
  margin-top: 6px; font-size: var(--step--1); color: var(--paper-soft); white-space: nowrap;
}
.svc-card__from b { color: #E9EFDD; font-weight: 700; font-size: var(--step-0); }

/* Выдвижная панель: одинаковая у всех карточек, распахивается вбок */
.svc-card__panel {
  flex: none; width: 0; overflow: hidden;
  background: rgba(250, 247, 240, 0.96);
  transition: width 0.5s var(--ease);
}
.svc-card.is-open .svc-card__panel { width: var(--panel-w); }
/* фиксированная ширина содержимого: при анимации текст не пережимается */
.svc-card__panel-inner {
  width: var(--panel-w); height: 100%;
  padding: clamp(16px, 1.4vw, 22px);
  display: flex; flex-direction: column; color: var(--ink);
  opacity: 0; transition: opacity 0.32s var(--ease) 0.08s;
}
.svc-card.is-open .svc-card__panel-inner { opacity: 1; }
.svc-card__desc {
  font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
.svc-card__prices {
  list-style: none; margin: auto 0 0; padding: clamp(10px, 1vw, 14px) 0 0;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--sand-200);
}
.svc-card__prices li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--step--1); color: var(--ink-soft);
}
.svc-card__prices b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.svc-card__btn {
  margin-top: clamp(10px, 1vw, 14px); width: 100%;
  padding: 0.7em 1.2em; font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card__panel, .svc-card__panel-inner { transition: none; }
}

/* ======================= Блок 4. Мастера салона =======================
   Раскладка макета: ряд из 4 карточек, ряд из 3, оба центрированы.
   Фон общий с Блоком 3, отличается только затемнением --tint-strength. */
.masters {
  position: relative;
  z-index: 5;                                /* уходит под Блок 3 */
  overflow: hidden;                          /* тень пальмы обрезается по форме секции */
  --tint-strength: 0.06;                     /* насколько темнее Блока 3 */
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз: раньше Блок 4 был последним и тень была не нужна, теперь под ним
     Блок 5 — без неё нахлёст не читается. Плотнее, чем у .about: под ней тёмная зелень. */
  box-shadow: 0 26px 40px -18px rgba(16, 22, 16, 0.5);
}
.masters__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* ==== Тень пальмы на светлых блоках 3 и 4 ====
   Альфа ten.png = форма листа, заливка = тёмный шалфей (тень нашего цвета).
   Лежит под контентом (z-index 0, контент в __inner на z-index 1).
   Крутилки: --leaf-w размер, --leaf-op сила тени, --leaf-blur мягкость. */
.leaf-shadow {
  --leaf-w: 1250px;
  --leaf-op: 0.14;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Запечённый лист: форма (ten.png), цвет (sage-900) и размытие 2px уже внутри
     картинки. Раньше это собиралось в рантайме через mask + filter:blur на всю
     площадь блока, и браузер перерисовывал лист на каждом кадре скролла (20 fps
     на блоках 3, 4, 7). Обычный PNG браузер рисует один раз и при скролле просто
     двигает, как и оливковую ветку-SVG. Перепечь: tools/bake-leaf.js. */
  background: url("../assets/leaf.png") no-repeat right top / var(--leaf-w) auto;
  opacity: var(--leaf-op);
}
/* Углы тени. Базовый .leaf-shadow смотрит из правого верхнего угла,
   модификаторами зеркалим в нужный угол. Блок 3: верхние углы (база + --tl).
   Блок 4: нижние углы (--bl + --br). */
.leaf-shadow--tl { transform: scaleX(-1); }   /* верхний левый (гориз. зеркало) */
.leaf-shadow--br { transform: scaleY(-1); }   /* нижний правый (верт. зеркало) */
.leaf-shadow--bl { transform: scale(-1, -1); } /* нижний левый (обе оси) */

/* Полосы света «из окна»: мягкое диагональное высветление тоном бумаги. */
.light-streaks {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(122deg, rgba(255, 253, 246, 0.22) 0%, transparent 24%),
    linear-gradient(122deg, transparent 40%, rgba(255, 253, 246, 0.12) 50%, transparent 64%);
}
/* Строка Блока 4 короче, чем в Блоке 3 (14.8em против 23.0em),
   поэтому ужимать её можно позже. Сменишь текст — пересчитай. */
.masters__title { --title-fit: 5.5vw; }

.masters__row {
  display: flex; justify-content: center;
  gap: clamp(20px, 3.6vw, 68px);
}
.masters__row + .masters__row { margin-top: clamp(22px, 2.2vw, 36px); }

/* --- Карточка мастера --- */
.master {
  --master-w: clamp(200px, 16vw, 296px);     /* ширина карточки */
  --master-ratio: 1.45;                      /* высота = ширина × это число */
  --bar-drop: 28px;                          /* насколько плашка свисает ниже фото */
  position: relative;
  width: var(--master-w); height: calc(var(--master-w) * var(--master-ratio));
  padding-bottom: var(--bar-drop);           /* место под свисающую плашку */
  transition: transform var(--dur) var(--ease);
}
.master:hover, .master:focus-within { transform: translateY(-4px); }

/* Обрезку и тень держит фото, а не карточка: плашка должна выходить за его край */
.master__photo {
  position: relative; height: 100%;
  display: grid; place-items: center;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--sage-800);
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur) var(--ease);
}
.master:hover .master__photo { box-shadow: var(--shadow-lg); }
.master__photo img { width: 100%; height: 100%; object-fit: cover; }
.master__photo.is-placeholder { background: var(--placeholder); }
.master__photo.is-placeholder span {
  font-size: var(--step--1); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--placeholder-ink);
}

/* Плашка зелёного стекла свисает с нижнего края фото (приём варианта 5):
   сидит по центру низа, наполовину выходит за фото. Имя и специализация
   видны всегда, кнопка выезжает при наведении, плашка растёт вверх.
   Плотность стекла — --glass-sage в tokens.css. */
.master__bar {
  position: absolute; left: 14px; right: 14px; bottom: 0; z-index: 2;
  padding: clamp(11px, 0.9vw, 15px) clamp(13px, 1vw, 17px);
  border-radius: var(--r);
  background: var(--glass-sage);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--glass-sage-brd);
  color: var(--paper);
  transition: background var(--dur) var(--ease);
}
.master:hover .master__bar { background: rgba(58, 74, 52, 0.52); }
/* halo на имя и специализацию: тот же приём, что в FAQ и подписях услуг.
   Мягкая глубина + страховка читаемости на светлых участках фото. На кнопку
   (белая, тёмный текст) не вешаем. */
.master__name {
  font-weight: 800; font-size: var(--step-0); line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}
.master__role {
  margin-top: 2px; font-size: var(--step--1); color: var(--paper-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}
.master__btn {
  /* flex, а не inline-flex: строчный элемент даже нулевой высоты
     держал бы под собой строку и раздувал плашку в покое */
  display: flex;
  width: 100%; margin-top: 0;
  padding: 0 1em; font-size: var(--step--1); line-height: 1.2;
  background: #fff; color: var(--ink); box-shadow: none;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
              margin-top var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.master:hover .master__btn,
.master:focus-within .master__btn {
  max-height: 60px; opacity: 1; margin-top: 10px; padding: 0.7em 1em;
}
.master__btn:hover { background: var(--cream); transform: none; }

/* Врезка вместо восьмого мастера. Плашки у неё нет, значит нет и свеса:
   обрезку со скруглением она держит сама. */
.master--cta {
  --cta-dim: 0.52;   /* плотность затемнения поверх фото */
  position: relative;
  padding-bottom: 0;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  background:
    var(--grain),
    radial-gradient(120% 100% at 20% 0%, rgba(180, 190, 168, 0.20), transparent 62%),
    linear-gradient(155deg, var(--sage-700) 0%, var(--sage-900) 100%);
  background-blend-mode: soft-light, normal, normal;
  color: var(--paper);
}
/* Фото под текстом, без размытия. Читаемость держит затемнение (--cta-dim). */
.master-cta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
/* Затемнение поверх фото: держит контраст текста */
.master--cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(165deg,
    rgba(30, 40, 28, calc(var(--cta-dim) * 0.82)) 0%,
    rgba(24, 33, 22, var(--cta-dim)) 100%);
}
.master-cta__body {
  position: relative; z-index: 2;
  height: 100%; padding: clamp(18px, 1.6vw, 26px);
  display: flex; flex-direction: column;
}
.master-cta__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: var(--step-1); line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}
.master-cta__text {
  margin-top: var(--space-3);
  font-size: var(--step--1); line-height: 1.5; color: var(--paper-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}
.master-cta__btn { margin-top: auto; width: 100%; padding: 0.7em 1em; font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .master, .master__bar, .master__btn { transition: none; }
}

/* ======================= Блок 5. Как проходит сеанс + FAQ =======================
   Черепица: тёмно-шалфейная подложка (surface-green), заходит под Блок 4.
   z-index держим низом лесенки, но НЕ отрицательным: при z-index -1 секция
   уходит за фон body и клики проваливаются насквозь (весь FAQ мёртвый). Низ
   лесенки = 0. Добавляя секцию ниже, поднимай всю лесенку на +1, а не уводи
   этy в минус. */
.process {
  position: relative;
  /* Лесенка растёт при добавлении блоков ниже. Низ = .site-foot (0), выше .reviews (1), .certs (2), .cta (3), .process (4). */
  z-index: 4;
  overflow: hidden;   /* ветви-водяные знаки обрезаются по скруглённой форме секции */
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз на Блок 6: без неё нахлёст с CTA не читается (тот же приём, что у masters).
     overflow:hidden выше клипает только потомков, собственную тень секции не режет. */
  box-shadow: 0 22px 30px -14px rgba(14, 20, 12, 0.5);
}
.process__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* Оливковые ветви-водяные знаки в двух углах секции. Бренд botanical, очень
   бледные, лежат за контентом (z-index 0, контент в __inner на z-index 1).
   Форму даёт CSS-маска из vetka.svg, цвет — заливка. Крутилки:
   --branch-w  размер (высота считается по пропорции 736:660),
   --branch-op прозрачность (0.09 = едва слышно, 0.14 = заметнее). */
/* Ветви настроены раздельно: у каждой свой размер и сдвиг (числа в её блоке).
   Минус в right/bottom/left/top = ветвь уходит ЗА край (прячется), к нулю и в
   плюс = ближе к центру. width = размер. Общая только прозрачность. */
.process__branch {
  --branch-op: 0.12;   /* прозрачность обеих: 0.09 бледно, 0.14 заметнее */
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 736 / 660;
  background: var(--sage-200);
  -webkit-mask: url("../assets/vetka.svg") no-repeat center / contain;
          mask: url("../assets/vetka.svg") no-repeat center / contain;
  opacity: var(--branch-op);
}
/* Нижняя правая — как легла в самом начале, не трогаем. */
.process__branch--br {
  width: 600px;
  right: -90px;
  bottom: -96px;
  transform: rotate(4deg);
}
/* Верхняя левая — крупнее и ближе к центру (одобренный вид). */
.process__branch--tl {
  width: 760px;
  left: -100px;
  top: -40px;
  transform: scale(-1, -1) rotate(4deg);
}

/* Заголовок Блока 5 живёт в левой колонке (не полосой над секцией), на тёмной
   подложке — светлый (базовый .section-title тёмный, для светлых секций).
   В колонке узко: снимаем nowrap, пусть переносится, иначе на планшете вылезет. */
.process__title {
  --title-fit: 7vw;
  color: var(--paper);
  white-space: normal;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
/* FAQ-колонку выравниваем по вертикали по центру относительно текстовой
   (текст читается сверху вниз, а стёкла FAQ встают в центр строки). */
.process__grid > .faq { align-self: center; }

/* --- Левая колонка: рассказ о визите --- */
.process__lead {
  font-size: var(--step-1); line-height: 1.4; font-weight: 600;
  color: var(--paper);
}
.process__body {
  margin-top: var(--space-4);
  font-size: var(--step-0); line-height: var(--leading-body);
  color: var(--paper-soft);
}
.process__body .accent { color: var(--sage-300); }

/* --- Правая колонка: аккордеон FAQ ---
   Матовое стекло. Под плашками ровный градиент, не фото, поэтому backdrop-filter
   размывать нечего — стекло продаём бликами: светлый градиент заливки сверху вниз,
   блик на верхнем ребре (inset highlight), мягкая тень (плашка приподнята). Блюр
   оставлен для мягкости краёв. Так стекло читается и над ровным фоном. */
.faq { display: flex; flex-direction: column; gap: 8px; }
/* Каждая плашка = ячейка со своей подложкой. .faq__item только позиционирует. */
.faq__item { position: relative; }
/* Подложка podsteklo строго под своей плашкой: светлый верх, тёмный низ, резкая
   граница. Растянута на плашку (100% 100%), граница всегда на одной доле высоты. */
.faq__tex {
  position: absolute; inset: 0; z-index: 0;
  border-radius: var(--r); overflow: hidden;
  /* Кадр: тёмная зона podsteklo под текстом (читаемость белого), светлая — тонкой
     полоской-бликом у верхнего края. Anchor bottom + зум по высоте прячет светлый
     верх, оставляя только границу свет/тень вверху; блюр стекла её размягчает. */
  background: url("../assets/podsteklo.png") center bottom / 100% 175% no-repeat;
  pointer-events: none;
}
/* Стекло поверх своей подложки. Блюр размывает резкую границу свет/тень в мягкий
   переход — тот же рецепт стекла, что у ротатора в hero и плашек мастеров. */
.faq__glass {
  position: relative; z-index: 1;
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--glass-light-brd);
  border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(14, 20, 12, 0.22);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq__item.is-open .faq__glass {
  background: rgba(255, 255, 255, 0.24);
  border-color: transparent;
}
.faq__q {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: clamp(15px, 1.5vw, 20px) clamp(18px, 1.8vw, 24px);
  font-family: var(--font-text); font-weight: 700; font-size: var(--step-0);
  color: var(--paper); line-height: 1.3;
  /* halo под текст: бронирует читаемость на светлой полосе-блике подложки,
     тот же приём, что у подписей мастеров. На тёмной зоне невидим. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 12px rgba(0, 0, 0, 0.35);
}
.faq__chev { flex: none; color: var(--sage-300); transition: transform var(--dur) var(--ease); }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }

/* Раскрытие: высоту анимирует JS (см. main.js) — CSS-переход рядом со стеклом
   подмерзает. Здесь только закрытое состояние; запасное правило is-open для
   случая без JS (откроется мгновенно, без анимации). */
.faq__a-wrap { overflow: hidden; max-height: 0; border-radius: 0 0 var(--r) var(--r); }
.faq__item.is-open .faq__a-wrap { max-height: 400px; }
/* Ответ — серый полупрозрачный фон: притемняет стекло под текстом, мелкий текст
   читается, но плашка остаётся лёгкой. Кнопка-вопрос сверху стеклянная. Всё
   внутри wrap (overflow hidden) — закрытым не видно. */
.faq__a-inner {
  margin: 0;
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 20px);
  background: rgba(40, 42, 40, 0.45);
  border-radius: 0 0 var(--r) var(--r);
  font-size: var(--step--1); line-height: 1.55; color: var(--paper);
}

/* ======================= Блок 6. CTA «Записаться» =======================
   Полноширинная плашка-черепица, как все блоки (нахлёст + скруглённый низ),
   только фоном идёт фото зала, а не цвет. z-index 2: заходит под Блок 5,
   а под ним Блоки 7 и 8. Плотный градиент поверх фото держит читаемость текста. */
.cta {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background-color: var(--sage-900);   /* запас под фото */
  color: var(--paper);
  /* Высота под пропорцию фото 21:9 (2.36): при 100vw ширины высота ~42vw даёт
     ту же пропорцию, и кадр помещается целиком, без обрезки верха/низа. */
  min-height: clamp(560px, 42vw, 820px);
  display: flex; flex-direction: column; justify-content: center;
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(40px, 5vw, 80px));
  padding-bottom: clamp(40px, 5vw, 80px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз на Блок 7: без неё нахлёст не читается (как у остальных блоков). */
  box-shadow: 0 22px 30px -14px rgba(14, 20, 12, 0.5);
}
.cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../assets/2block/fonpriz.jpg") center / cover no-repeat;
}
.cta__ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(98deg, rgba(24,32,24,0.95) 0%, rgba(24,32,24,0.80) 32%, rgba(24,32,24,0.44) 62%, rgba(24,32,24,0.62) 100%),
    linear-gradient(180deg, rgba(14,20,14,0.30) 0%, rgba(14,20,14,0.58) 100%);
}
.cta__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(50% 60% at 18% 44%, rgba(226,210,170,0.16), transparent 60%);
}
/* Контент во всю ширину минус боковой отступ (как __inner других блоков),
   сам текстовый блок ограничен по ширине слева. */
.cta__inner { position: relative; z-index: 3; padding: 0 var(--gutter); }
.cta__inner > * { max-width: 620px; }
.cta__title {
  font-family: var(--font-display); font-weight: 800; color: var(--paper);
  line-height: 1.03; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 90px);   /* на 1920 упирается в 90px */
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  max-width: none;   /* заголовку даём всю ширину, чтобы 1-я строка не переносилась */
}
.cta__title span { display: block; }        /* две строки друг под другом */
.cta__title-1 { white-space: nowrap; }       /* «Место, где начинается» без переноса */
.cta__title .accent { color: var(--sage-300); }
.cta__sub {
  color: var(--paper-soft); line-height: 1.5;
  font-size: var(--step-1); margin-top: clamp(16px,1.6vw,22px); max-width: 42ch;
}
.cta__btns { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: clamp(26px,2.6vw,38px); }
.cta .btn { font-size: var(--step-0); padding: 1em 2em; }
.cta .btn-glass { color: var(--paper); border: none; }

/* ======================= Блок 7. Сертификат + Абонемент =======================
   Светлый шалфей (как блоки 3-4). Две панели встык, на шве круглый медальон
   (моховое лого) в вогнутом вырезе — приём из hero-меню. z-index 1: заходит
   под Блок 5-6, а под ним Блок 8 (отзывы, новый низ лесенки = 0). */
.certs {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз на Блок 8: без неё нахлёст с отзывами не читается (как у остальных). */
  box-shadow: 0 22px 30px -14px rgba(14, 20, 12, 0.5);
}
.certs__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }
.certs__title { --title-fit: 6vw; margin-bottom: clamp(28px, 3vw, 48px); }

/* Две панели встык + вырез на шве. --notch радиус выреза, медальон чуть меньше. */
.certs__duo { --notch: 100px; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.certs__cell { padding: clamp(26px, 2.4vw, 40px); display: flex; flex-direction: column; }
.certs__cell--l {
  background: rgba(250, 247, 240, 0.66);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  padding-right: clamp(120px, 9vw, 150px);   /* контент в стороне от выреза, чтобы карту не резало */
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
          mask: radial-gradient(circle var(--notch) at 100% 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
}
.certs__cell--r {
  background: rgba(58, 74, 52, 0.10);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding-left: clamp(120px, 9vw, 150px);
  -webkit-mask: radial-gradient(circle var(--notch) at 0% 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
          mask: radial-gradient(circle var(--notch) at 0% 50%, transparent calc(var(--notch) - 0.5px), #000 var(--notch));
}
.certs__seal {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 192px; height: 192px; border-radius: 50%; overflow: hidden;
  background: var(--sage-900); box-shadow: var(--shadow-lg);
}
.certs__seal img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Фото-карты: сгенерённый фон + текст в спокойной левой зоне. Поверх фото мягкая
   шторка (::before, z-index -1 под текстом) для читаемости: тёмная на сертификате
   (светлый текст), кремовая на абонементе (тёмный текст). */
.gc, .pc {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1.58 / 1; border-radius: 16px;
  padding: clamp(18px, 1.7vw, 26px);
  display: flex; flex-direction: column; justify-content: space-between;
  margin-bottom: clamp(18px, 1.6vw, 24px);
  background-size: cover; background-position: center;
  box-shadow: 0 16px 34px -16px rgba(28, 38, 26, 0.5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gc { background-image: url("../assets/certs/sertifikat.jpeg"); color: var(--paper); }
.pc { background-image: url("../assets/certs/abonement.jpeg"); color: var(--ink); }
.gc::before, .pc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.gc::before { background: linear-gradient(90deg, rgba(18, 24, 14, 0.80) 0%, rgba(18, 24, 14, 0.5) 30%, rgba(18, 24, 14, 0) 60%); }
.pc::before { background: linear-gradient(90deg, rgba(250, 247, 240, 0.92) 0%, rgba(250, 247, 240, 0.62) 30%, rgba(250, 247, 240, 0) 60%); }

/* Наведение: лёгкий подъём и усиление тени (свап стилей убран — у карт свои фото). */
.gc:hover, .pc:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -18px rgba(28, 38, 26, 0.58); }

/* Текст карты: верхняя группа (кикер + бренд) и нижняя (значение + срок). */
.ccard__top, .ccard__bottom { position: relative; display: flex; flex-direction: column; max-width: 64%; }
.ccard__kicker { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 10px; }
.ccard__brand { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -0.02em; }
.ccard__brand i { font-style: normal; }
.ccard__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.7vw, 1.75rem); letter-spacing: -0.01em; }
.ccard__foot { font-size: 0.84rem; margin-top: 3px; }
/* Тёмная карта (сертификат): светлый текст */
.gc .ccard__kicker { color: var(--sage-200); }
.gc .ccard__brand { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.gc .ccard__brand i { color: var(--sage-300); }
.gc .ccard__foot { color: var(--paper-soft); }
/* Светлая карта (абонемент): тёмный текст */
.pc .ccard__kicker { color: var(--sage-700); }
.pc .ccard__brand i { color: var(--sage-600); }
.pc .ccard__foot { color: var(--ink-soft); }

/* текст под картой */
.certs .prod__t { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: var(--step-1); }
.certs .prod__d { margin-top: 8px; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; max-width: 34ch; }
.certs .prod__btns { margin-top: clamp(14px, 1.4vw, 20px); }
.certs .btn { font-size: var(--step--1); }


/* ======================= Блок 8. Отзывы =======================
   Черепица: тёмно-шалфейная подложка (surface-green, как Блоки 2 и 5), заходит
   под Блок 7. Новый низ лесенки — z-index 0. Карточки отзывов — стеклянные
   плашки (тот же рецепт podsteklo + glass, что у FAQ): под каждой своя подложка
   .rev__tex (светлый верх, тёмный низ), сверху стекло .rev__glass размывает
   границу. Лента листается стрелками/свайпом (механика ленты Блока 2). */
.reviews {
  --star: #FF9500;                           /* оранжевый звёзд, как на DiKiDi */
  position: relative;
  z-index: 1;                                /* над подвалом (низ лесенки = .site-foot 0) */
  overflow: hidden;
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(52px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom-left-radius: var(--tile-r);
  border-bottom-right-radius: var(--tile-r);
  /* тень вниз на подвал: без неё нахлёст не читается (как у Блока 7). */
  box-shadow: 0 22px 30px -14px rgba(14, 20, 12, 0.5);
}
.reviews__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* Оливковые ветви-водяные знаки в двух углах (как в Блоке 5), очень бледные. */
.reviews__branch {
  --branch-op: 0.10;
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 736 / 660;
  background: var(--sage-600);
  -webkit-mask: url("../assets/vetka.svg") no-repeat center / contain;
          mask: url("../assets/vetka.svg") no-repeat center / contain;
  opacity: var(--branch-op);
}
.reviews__branch--tl { width: 620px; left: -110px; top: -70px; transform: scale(-1, -1) rotate(6deg); }
.reviews__branch--br { width: 540px; right: -80px; bottom: -80px; transform: rotate(-6deg); }

/* Шапка: заголовок слева, строка-агрегат справа (на узком — друг под другом). */
.reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(14px, 1.8vw, 24px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.reviews__title { --title-fit: 6vw; white-space: normal; margin-bottom: 0; }
.reviews__agg {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  color: var(--ink-soft); font-size: var(--step--1);
}
.reviews__rating { display: inline-flex; align-items: center; gap: 8px; }
.reviews__rating b { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.reviews__stars { display: inline-flex; gap: 2px; color: var(--star); }
.reviews__stars svg { width: 16px; height: 16px; }
.reviews__agg-item--award { color: var(--sage-700); font-weight: 700; }
.reviews__agg-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(20, 28, 18, 0.28); }
/* Перенос строки шапки — только для мобильной раскладки (см. медиа ниже). */
.reviews__agg-br { display: none; }

/* Лента-карусель: видно ~3 карточки, бесконечная петля, драг мышью/свайп/стрелки.
   Механика на transform (не нативный скролл): лента дублируется, JS двигает
   translateX и незаметно возвращает в середину — так листание идёт по кругу
   бесшовно, без «перебрасывания» на первый отзыв. */
.reviews__carousel { position: relative; }
/* Вьюпорт клипует петлю по горизонтали (иначе из-за краёв лезут соседние карточки).
   Запас со всех сторон под тень карточки с компенсацией margin. Горизонтальный
   запас 14px безопасен: он меньше зазора между карточками (~21px), сосед не выглядывает,
   а поджатая тень (разлёт ~12px) в него влезает целиком. */
.reviews__viewport {
  overflow: hidden;
  padding: 28px 14px 40px;
  margin: -28px -14px -40px;
}
.reviews__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(14px, 1.5vw, 22px);
  cursor: grab; touch-action: pan-y;
  will-change: transform;
}
.reviews__track.is-dragging { cursor: grabbing; }
/* li — flex, а track тянет все li по высоте самой длинной карточки
   (align-items: stretch по умолчанию). Так карточки одинаковой высоты и не
   скачут при листании независимо от длины текста. */
.reviews__track > li {
  flex: 0 0 calc((100% - 2 * clamp(14px, 1.5vw, 22px)) / 3);
  display: flex;
}

/* Карточка отзыва — белая плашка (текст отзыва тёмный, остальное чуть светлее).
   flex: 1 — заполняет свою li по ширине и высоте (li растянут до самой высокой). */
.rev { position: relative; display: flex; flex: 1; min-height: clamp(210px, 20vw, 260px); }
.rev__glass {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px);
  /* Приглушённый крем, как у светлой карты абонемента — чистый белый слишком бьёт. */
  background: linear-gradient(140deg, var(--cream) 0%, var(--sand-100) 100%);
  border-radius: var(--r);
  /* Тень поджата по горизонтали (spread -16 → боковой разлёт ~12px), чтобы влезала
     в запас вьюпорта (14px) и её не резал overflow петли по краям, как в ленте фото. */
  box-shadow: 0 4px 10px -4px rgba(42, 54, 43, 0.10), 0 14px 28px -16px rgba(42, 54, 43, 0.15);
}
.rev__stars { display: inline-flex; gap: 3px; color: var(--star); margin-bottom: clamp(10px, 1vw, 14px); }
.rev__stars svg { width: 18px; height: 18px; }
.rev__text {
  color: var(--ink); font-size: var(--step-0); line-height: 1.5;
  /* Длинные отзывы обрезаем 5 строками с многоточием, чтобы карточки не
     вытягивались по самой длинной. Полный текст — по кнопке на DiKiDi. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.rev__meta { margin-top: auto; padding-top: clamp(14px, 1.4vw, 20px); }
.rev__name { color: var(--ink-soft); font-weight: 700; font-size: var(--step-0); }
.rev__svc { color: var(--ink-faint); font-size: var(--step--1); margin-top: 2px; }
.rev__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 0.78rem; color: var(--ink-faint);
}
.rev__src {
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; font-size: 0.68rem;
  color: var(--ink-faint);
}

/* Стрелки листания — стеклянные кружки поверх краёв ленты (как .about__nav). */
.reviews__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--paper); background: rgba(20, 26, 18, 0.55);
  border: 1px solid var(--glass-light-brd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.reviews__nav:hover { background: rgba(20, 26, 18, 0.8); }
/* Стрелки вынесены за карточки в боковой отступ (--gutter велик на десктопе). */
.reviews__nav--prev { left: -60px; }
.reviews__nav--next { right: -60px; }
.reviews__nav[hidden] { display: none; }

.reviews__foot { margin-top: clamp(26px, 3vw, 40px); display: flex; justify-content: center; }

@media (max-width: 960px) {
  .reviews__track > li { flex-basis: calc((100% - clamp(14px, 1.5vw, 22px)) / 2); }
}
@media (max-width: 620px) {
  .reviews__track > li { flex-basis: 84%; }
  .reviews__head { align-items: flex-start; }
}
/* На узких экранах боковой отступ мал — возвращаем стрелки к краям карточек. */
@media (max-width: 860px) {
  .reviews__nav--prev { left: -6px; }
  .reviews__nav--next { right: -6px; }
}

@media (max-width: 820px) {
  /* Стопкой + вертикальный отступ между подложками (было впритык). */
  .certs__duo { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px); }
  .certs__cell--l, .certs__cell--r {
    --cpad: clamp(26px, 2.4vw, 40px);
    -webkit-mask: none; mask: none; border-radius: var(--r-lg);
    padding: var(--cpad);
  }
  .certs__seal { display: none; }
  /* Фото-карта — в самый верх подложки, впритык сверху и по бокам (серое только
     снизу). Отрицательные поля = внутренние поля подложки → карта тянется на всю
     ширину и прижимается к верху. Верхние углы под радиус подложки, нижние — карты. */
  .gc, .pc {
    margin: calc(-1 * var(--cpad)) calc(-1 * var(--cpad)) clamp(16px, 2vw, 22px);
    border-radius: var(--r-lg) var(--r-lg) 16px 16px;
  }
}

/* ======================= Адаптив ======================= */
@media (max-width: 900px) {
  /* Мобильная шапка: плашка тянется на всё свободное место (flex:1), слева бургер,
     после него компактный логотип, справа кнопка-осколок «Связаться». Кнопка —
     обычный flex-сосед: садится в вырез у правого края плашки и свисает вправо до
     края экрана (как на десктопе). Стекла за кнопкой нет → нет «кусков подложки». */
  .nav__bar {
    flex: 1 1 auto;
    gap: 10px;
    padding: 8px clamp(44px, 12vw, 56px) 8px 10px;
    /* Высота плашки ФИКСИРОВАНА и НЕ зависит от логотипа: меняешь --logo-size —
       плашка стоит на месте, лого просто масштабируется внутри (или вылезает за
       край, если сильно увеличить). Крутиль высоты плашки — тут: */
    height: var(--bar-h, 58px);
  }
  /* Компактный логотип = тот же ЗАПЕЧЁННЫЙ лок, что в hero: буквы + ветвь считаются
     от одного --logo-size (размер «OiL»), ветвь на ТЕХ ЖЕ коэффициентах, что hero.
     Поэтому ветвь не «улетает» — сидит относительно букв ровно как в большом лого,
     весь лок сжимается одним числом. Единственная особенность бара — сдвиг вправо,
     чтобы ветвь (уходит влево-вверх от «OiL») не билась в бургер. */
  .nav__logo {
    position: relative;
    display: inline-flex; flex-direction: column;
    line-height: 0.86; letter-spacing: -0.03em; font-weight: 800;
    text-decoration: none;
    /* ╔═══════════════════════════════════════════════════════════════════╗
       ║  КРУТИЛИ ЛОГОТИПА В ПЛАШКЕ. Двигают/масштабируют ВЕСЬ лок целиком   ║
       ║  (OiL + MASSAGE + ветвь как единое целое):                         ║
       ║    --logo-size  размер: больше = крупнее                           ║
       ║    --logo-x     по горизонтали: + вправо, − влево                  ║
       ║    --logo-y     по вертикали:   + вниз,   − вверх                  ║
       ╚═══════════════════════════════════════════════════════════════════╝ */
    --logo-size: 26px;
    --logo-x: 0px;
    --logo-y: 3px;
    transform: translate(var(--logo-x), var(--logo-y));
  }
  .nav__logo-1 { position: relative; z-index: 1; font-size: var(--logo-size); color: var(--paper); }
  .nav__logo-1 i { font-style: normal; color: var(--sage-300); }
  /* Та же пропорция, что hero (0.7927), иначе едет ширина лока и якорь ветви. */
  .nav__logo-2 { position: relative; z-index: 1; font-size: calc(var(--logo-size) * 0.7927); color: var(--sage-300); letter-spacing: -0.02em; }
  .nav__logo-branch {
    position: absolute; top: 0; right: 0; z-index: 0;
    --bw: calc(var(--logo-size) *  2.439);
    --bx: calc(var(--logo-size) * -2.4466);
    --by: calc(var(--logo-size) *  0.1982);
    --brot: -119deg;
    width: var(--bw); height: auto;
    transform: translate(var(--bx), var(--by)) rotate(var(--brot));
    transform-origin: right top;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
  }
  /* Большой логотип hero на мобиле скрыт — его роль берёт логотип в плашке. */
  .hero__brand { display: none; }

  .nav__links { display: none; }
  /* Мобильное меню: карточка-дропдаун из-под плашки, слева под бургером. Живёт как
     прямой ребёнок .nav (НЕ внутри плашки!) — у .nav нет ни маски, ни backdrop-filter,
     поэтому панель не дырявится маской и видна в Safari. Координаты — от .nav:
     left:var(--edge) = левый край контента, top:100% = под шапкой.
     Стекло — ТОТ ЖЕ стиль, что у выпадашки «Связаться» (.nav__menu-card). */
  .nav__mobile-menu.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: var(--edge); right: auto;
    margin: 10px 0 0;
    min-width: min(260px, calc(100vw - 2 * var(--edge)));
    max-width: calc(100vw - 2 * var(--edge));
    list-style: none; padding: 8px; border-radius: var(--r-lg);
    z-index: 30;
    background: var(--glass-light);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 8px 30px rgba(20, 26, 20, 0.28);
  }
  .nav__mobile-menu a {
    display: block; padding: 12px 14px; border-radius: 12px;
    color: var(--paper); font-weight: 600; font-size: 16px;
    transition: background var(--dur) var(--ease);
  }
  .nav__mobile-menu a:hover,
  .nav__mobile-menu a:active { background: rgba(255, 255, 255, 0.12); }
  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(244, 240, 231, 0.12);
  }
  .nav__burger span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--paper); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 960px) {
  .about__top { grid-template-columns: 1fr; }
  .about__video { min-height: clamp(220px, 46vw, 320px); }
}

/* Блок 5: ниже 860px две колонки не уживаются — рассказ сверху, FAQ под ним */
@media (max-width: 860px) {
  .process__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
}

/* Блок 3: ниже 900px гармошка вбок физически не влезает — панель
   разворачивается вниз, карточки идут в две колонки, потом в одну. */
@media (max-width: 900px) {
  .services__row { flex-wrap: wrap; }
  .svc-card {
    flex: 1 1 min(100%, 300px);
    flex-direction: column; height: auto;
    transition: box-shadow var(--dur) var(--ease);
  }
  .svc-card.is-open { flex-basis: min(100%, 300px); }
  .svc-card__face { min-height: clamp(180px, 34vw, 240px); }
  .svc-card__panel {
    width: 100%; max-height: 0;
    transition: max-height 0.45s var(--ease);
  }
  /* width: 100% обязателен здесь: базовое .svc-card.is-open .svc-card__panel
     задаёт узкую --panel-w (десктопный выезд вбок) и по специфичности бьёт
     мобильное .svc-card__panel{width:100%}. Без этого справа проступает
     зелёный фон карточки. */
  .svc-card.is-open .svc-card__panel { width: 100%; max-height: 420px; }
  .svc-card__panel-inner { width: 100%; }
}

@media (max-width: 560px) {
  .svc-card { flex-basis: 100%; }
  .svc-card.is-open { flex-basis: 100%; }
}

/* Блок 4: ряды переносятся, на телефоне кнопка мастера показана всегда
   (ховера нет, иначе до неё не добраться) */
@media (max-width: 900px) {
  .masters__row { flex-wrap: wrap; }
  .master { --master-w: clamp(150px, 42vw, 240px); }
}
@media (hover: none) {
  .master__btn { max-height: 60px; opacity: 1; margin-top: 10px; padding: 0.7em 1em; }
}

@media (max-width: 760px) {
  .hero__row { grid-template-columns: 1fr; align-items: stretch; }
  /* Отдельный вертикальный фон для мобилки (сгенерён в Seedream по нашему кадру).
     Десктоп остаётся на fon.png. Размер cover наследуется из базового правила. */
  .hero__bg { background-image: url("../assets/fonmobile.jpg"); background-position: center; }
  .svc-rotator { width: 100%; max-width: 100%; }
  /* Мобильная «мини-карточка» (Вариант A). На телефоне hero растягивался из-за
     крупной плашки, поэтому срезаем лишнее: описание (дублирует Блок 3) и нижнюю
     кнопку (дублирует «Записаться»/«Уточнить детали» выше). Остаётся название,
     цена и точки со стрелками; высота отпущена по контенту. */
  .svc-rotator { height: auto; gap: var(--space-3); padding: 18px 20px; }
  .svc-rotator__body { flex: 0 0 auto; }
  .svc-rotator__desc { display: none; }
  .svc-rotator__name { min-height: 0; font-size: var(--step-1); }
  .svc-rotator__btn { display: none; }
  .hero__inner { padding-top: clamp(88px, 12vh, 120px); }
  /* на мобиле блоки идут потоком, не абсолютом */
  .hero__title, .hero__sub, .hero__cta { position: static; bottom: auto; }
  /* Контент hero на мобилке по центру (заголовок, подзаголовок, кнопки).
     Карточку услуг не центруем — её внутренняя раскладка остаётся как есть. */
  .hero__lead { max-width: none; text-align: center; }
  /* Заголовок был прибит nowrap (ломался в нужных местах под десктоп) — на узком
     это резало текст под обрез. Разрешаем перенос и сжимаем кегль. */
  .hero__title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hero__title-1, .hero__title-2 { white-space: normal; }
  .hero__title-2 { font-size: clamp(2rem, 8.5vw, 2.6rem); margin-top: 6px; }
  /* Строки подзаголовка остаются блоками (сохраняют группировку слов),
     но перестают быть nowrap — переносятся внутри себя, а не режутся. */
  /* Десктопные переносы подзаголовка (каждый span = строка) на мобилке не нужны.
     Распускаем спаны в общий поток, текст переносится естественно. ::after даёт
     пробел на стыке спанов (в разметке пробелов между ними нет). */
  .hero__sub span { display: inline; white-space: normal; width: auto; }
  .hero__sub span::after { content: " "; }
  .hero__sub { margin-top: var(--space-5); }
  .hero__cta { margin-top: var(--space-6); justify-content: center; }

  /* Блок 2: лента фото становится колонкой, видно ~2 плитки, пульс-кнопка
     отдельной строкой по центру. */
  .about__gallery { flex-direction: column; align-items: stretch; }
  .about__track > li { flex-basis: calc((100% - clamp(14px, 1.4vw, 22px)) / 2); }
  .about__pulse { align-self: center; margin-top: var(--space-4); }
}

@media (max-width: 560px) {
  /* Совсем узко: одна плитка по ЦЕНТРУ галереи с симметричным подглядом слева и
     справа. Движок карусели всегда прижимает активную плитку к левому краю
     (сдвиг = N·шаг), поэтому центрируем инсетом ленты. Плитку задаём в vw
     (уменьшена против прежних 78%), чтобы видео и фото были соразмернее.
     Инсет = (galleryInner - плитка)/2 = ((100vw-32px) - 68vw)/2 = 16vw - 16px. */
  .about__track > li { flex: 0 0 68vw; }
  .about__track { padding-left: calc(16vw - 16px); }
}

/* ======================= Лайтбокс (поп-ап фото) =======================
   Поверх всего (z-index выше меню = 10). Тёмный фон, фото по центру целиком
   (object-fit contain — не режем), стрелки вперёд-назад, счётчик, крестик.
   Открытие/закрытие и листание — в js/main.js. */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 16, 11, 0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__stage {
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img {
  max-width: 100%; max-height: 85vh; object-fit: contain;
  border-radius: var(--r-lg); background: var(--sage-900);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox__nav, .lightbox__close {
  position: absolute; z-index: 2; padding: 0; cursor: pointer; color: var(--paper);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--glass-light-brd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.94); }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav--prev { left: clamp(10px, 3vw, 28px); }
.lightbox__nav--next { right: clamp(10px, 3vw, 28px); }
.lightbox__close { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); width: 44px; height: 44px; }
.lightbox__counter {
  position: absolute; bottom: clamp(14px, 3vw, 26px); left: 50%; transform: translateX(-50%);
  color: var(--paper-soft); font-size: var(--step--1); letter-spacing: var(--tracking-wide);
}
@media (max-width: 560px) {
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__img { max-height: 78vh; }
}
@media (prefers-reduced-motion: reduce) {
  .about__track { scroll-behavior: auto; }
  .about__photo img, .lightbox { transition: none; }
}

/* ==========================================================================
   Блок 9. Контакты + подвал (#contacts). Композиция В4, полноширинным тайлом
   внахлёст (как вся черепица). Новый низ лесенки: z-index 0, вся лесенка выше
   поднята на +1. Подложка — светлый шалфей (surface-sage-mid, как Блок 7):
   последовательность certs(светлый) → reviews(тёмный) → foot(светлый), швы
   контрастны сами собой. Внутри — тёмная панель встык: контакты + карта.
   ========================================================================== */
.site-foot {
  z-index: 0;                                /* новый низ лесенки */
  overflow: hidden;
  margin-top: calc(-1 * var(--tile-overlap));
  padding-top: calc(var(--tile-overlap) + clamp(40px, 5vw, 72px));
  padding-bottom: clamp(48px, 6vw, 84px);
  /* Последний блок: низ прямой, без скругления тайла. */
}
.site-foot__inner { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* Без контейнера: контакты лежат прямо на зелёной подложке секции, карта —
   отдельным скруглённым блоком справа (её рамку держит она сама, см. __map). */
.site-foot__split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: stretch;
  min-height: 440px;
}
.site-foot__info {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  padding: clamp(6px, 1vw, 14px) 0;
}

/* Логотип-вордмарк (приближение hero-лого, ведёт наверх) */
.site-foot__logo { display: inline-flex; flex-direction: column; width: fit-content; line-height: 1; }
.site-foot__word { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.01em; color: var(--paper); }
.site-foot__word i { font-style: normal; color: var(--sage-400); }
.site-foot__sub { margin-top: 6px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--sage-300); }

/* Контактные строки */
.fcontacts { display: grid; gap: 14px; }
.fcontact { display: flex; align-items: center; gap: 13px; color: var(--paper); }
.fcontact__ic {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--glass-light);
  transition: background var(--dur) var(--ease);
}
.fcontact__ic svg { width: 19px; height: 19px; }
.fcontact__txt { display: flex; flex-direction: column; line-height: 1.28; min-width: 0; }
.fcontact__txt small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-300); }
.fcontact__txt b { font-weight: 700; font-size: 1.04rem; word-break: break-word; }
.fcontact--phone .fcontact__txt b { font-size: 1.28rem; }
a.fcontact { transition: transform var(--dur) var(--ease); }
a.fcontact:hover { transform: translateX(2px); }
a.fcontact:hover .fcontact__ic { background: rgba(255,255,255,0.26); }

/* VK */
.fvk {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  padding: 12px 22px 12px 15px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 0.98rem; color: var(--paper);
  background: var(--glass-light);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fvk:hover { transform: translateY(-2px); background: rgba(255,255,255,0.26); }
.fvk svg { width: 26px; height: 26px; flex: none; }

/* Правовая зона */
.site-foot__legal { margin-top: auto; padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(233,239,221,0.18); }
.site-foot__biz { font-size: 0.82rem; line-height: 1.5; color: var(--paper-soft); }
.site-foot__laws { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.site-foot__laws a {
  font-size: 0.82rem; color: var(--paper); opacity: 0.82;
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity var(--dur) var(--ease);
}
.site-foot__laws a:hover { opacity: 1; }

/* Карта — самостоятельный скруглённый блок (контейнер убран). */
.site-foot__map { position: relative; min-height: 320px; background: var(--sage-100); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.66); }
/* iframe над заглушкой (z-index 1) и кликабелен; иначе заглушка перехватит мышь. */
.site-foot__map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
/* Подпись-фолбэк ПОД iframe: видна, только если карта не загрузилась.
   pointer-events: none — не перехватывает клики/зум по карте. */
.site-foot__map-stub {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: grid; place-items: center;
  padding: 24px; text-align: center; color: var(--ink-soft); font-weight: 600;
}

/* Узкие экраны: остров разворачивается в столбик, карта уходит вниз */
@media (max-width: 860px) {
  .site-foot__split { grid-template-columns: 1fr; }
  .site-foot__map { min-height: 300px; order: 2; }
}

/* Утилита: держать число/цену одним куском, чтобы перенос не рвал «30 000 ₽». */
.nb { white-space: nowrap; }

/* =========================================================================
   ТЕЛЕФОННАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА  (по авторитетным источникам: learnui.design,
   Apple HIG, Material Design). Роли для телефона:
     Заголовок hero (H1) 32 · Заголовок секции (H2) 26 · Подзаголовок 18 ·
     Текст 16 · Мелкий 14.  Десктоп (максы clamp) не трогаем — это только телефон.
   ========================================================================= */
@media (max-width: 620px) {
  /* Роли «подзаголовок / текст / мелкий» завязаны на токены — переопределяем
     сами токены фиксированными кеглями, весь сайт подхватывает разом.
     Фиксируем в rem, а не clamp: у clamp на телефоне рулит средний член,
     а не min, и размер бы не сдвинулся. */
  :root {
    --step-1:  1.125rem;   /* подзаголовок / лид — 18px */
    --step-0:  1.00rem;    /* текст — 16px (низ нормы, ниже нельзя) */
    --step--1: 0.875rem;   /* мелкий / мета — 14px */

    /* Боковые поля: на десктопе hero (--edge) и секции (--gutter) жили по-разному
       (18px против ~27px на телефоне) — границы «гуляли». Сводим к одному краю
       и делаем уже, чтобы контент шёл шире, ближе к краям экрана. */
    --gutter: 16px;
    --edge:   16px;
  }

  /* Заголовок секции: единый 26px. Снимаем десктопный трюк «nowrap + ужать по vw»
     (он проседал до 13px на телефоне) — важнее читаемый размер. Короткие всё равно
     встают в строку, длинный («Сертификаты и абонементы») чисто переносится. */
  .section-title { font-size: 1.625rem; white-space: normal; line-height: 1.18; }
  /* «Сертификаты и абонементы» в 26px не влезает в строку (356px против 339
     доступных). По решению Марка ужимаем ТОЛЬКО этот заголовок до 24px — так
     он встаёт в одну строку (~328px), остальная шкала не тронута. */
  .certs__title { font-size: 1.5rem; white-space: nowrap; }

  /* Описание сертификата было мелким (step--1) — это абзац-тело, поднимаем до 16px. */
  .certs .prod__d { font-size: var(--step-0); }

  /* CTA: первая строка была nowrap — на узком уезжала под обрез. Разрешаем
     перенос и сжимаем кегль. */
  .cta__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .cta__title-1 { white-space: normal; }

  /* Сертификаты: текст-зона 64% слишком узка → цена ломалась. Печать всё равно
     скрыта с 820px, места хватает — расширяем текст-зону. */
  .ccard__top, .ccard__bottom { max-width: 84%; }

  /* Отзывы: активная карточка по ЦЕНТРУ с симметричным подглядом слева/справа
     (как фото во 2 блоке). Движок карусели прижимает активную к левому краю, поэтому
     центрируем инсетом ленты. Карточка в vw, инсет = (V - карточка)/2,
     V = 100vw-32px (поля 16px). Карточка 72vw → инсет = (28vw-32)/2 = 14vw-16px. */
  .reviews__track > li { flex: 0 0 72vw; }
  .reviews__track { padding-left: calc(14vw - 16px); }
}

/* =========================================================================
   БЛОК 8 «ОТЗЫВЫ» — мобильная раскладка.
   Заголовок и текст карточек по центру; шапка рейтинга в 2 строки:
     строка 1: 5.0 (звёзды) · DIKIDI AWARDS '25
     строка 2: 357 оценок · 261 отзыв
   Точки только между звёздами|наградой и между оценками|отзывами.
   ========================================================================= */
@media (max-width: 620px) {
  /* Шапка: заголовок над рейтингом, всё по центру */
  .reviews__head { flex-direction: column; align-items: center; }
  .reviews__title { text-align: center; }
  .reviews__agg { justify-content: center; }

  /* Перестановка порядка (DOM: rating, sep1, оценок, sep2, отзыв, sep3, awards, br).
     Ряд 1: rating (1) · [sep3=точка] (2) · awards (3); перенос (4);
     ряд 2: оценок · [sep2=точка] · отзыв (все order 5, DOM-порядок сохраняется). */
  .reviews__rating { order: 1; }
  .reviews__agg-sep:nth-child(6) { order: 2; }         /* sep3 → точка ряда 1 */
  .reviews__agg-item--award { order: 3; }
  .reviews__agg-br { display: block; order: 4; flex-basis: 100%; height: 0; }
  .reviews__agg-item:not(.reviews__agg-item--award) { order: 5; }  /* оценок, отзыв */
  .reviews__agg-sep:nth-child(4) { order: 5; }         /* sep2 → точка ряда 2 */
  .reviews__agg-sep:nth-child(2) { display: none; }    /* sep1 — лишняя, убираем */

  /* Текст карточек отзывов по центру. Ниж. строка (дата/источник) тоже центрируем. */
  .rev__glass { align-items: center; text-align: center; }
  .rev__foot  { justify-content: center; }
}

/* =========================================================================
   ТЕЛЕФОННОЕ ЦЕНТРИРОВАНИЕ (блоки 2-9). Hero (Блок 1) НЕ трогаем.
   Центрируем заголовки, лиды, абзацы, подзаголовки, кнопки, мета-строки,
   имена мастеров, контакты. Табличные строки оставляем колонками (иначе теряют
   смысл столбцов): цена «60 мин ... 2200 ₽», вопрос FAQ с иконкой-стрелкой,
   шапка отзывов «рейтинг / оценки». Фото-оверлеи карточек тоже не трогаем.
   ========================================================================= */
@media (max-width: 620px) {
  /* Блок 2 «О салоне» */
  .about__text  { text-align: center; align-items: center; }
  .about__facts { justify-content: center; flex-wrap: wrap; }

  /* Блок 3 «Процедуры и техники» — только заголовок (карточки не задеваем) */
  .services__inner > .section-title { text-align: center; }

  /* Блок 4 «Специалисты массажа» */
  .masters__title    { text-align: center; }
  .master__bar       { text-align: center; }
  .master-cta__body  { text-align: center; align-items: center; }

  /* Блок 5 «Как проходит сеанс» — рассказ. FAQ-строки не трогаем (вопрос + стрелка) */
  .process__narr { text-align: center; }

  /* Блок 6 CTA */
  .cta__inner { text-align: center; }
  .cta__btns  { justify-content: center; flex-wrap: wrap; }

  /* Блок 7 «Сертификаты» — заголовок и тексты/кнопки под картами
     (оверлеи на самих картах оставляем как есть) */
  .certs__title { text-align: center; }
  .prod__t, .prod__d, .prod__btns { text-align: center; }

  /* Блок 8 «Отзывы» — заголовок (шапку рейтинга и карточки не трогаем) */
  .reviews__title { text-align: center; }

  /* Блок 9 «Контакты».
     Порядок на телефоне: логотип → контакты → «Следите за нами в ВК» → КАРТА →
     правовой блок (ИП + документы). Правовой блок лежит внутри колонки info, а
     карта — её сосед, напрямую их не переставить. Поэтому info раскрываем через
     display:contents (её дети становятся детьми split), а карту и легал двигаем
     через order. Центрирование колонки переносим с info на split. */
  .site-foot__split {
    display: flex; flex-direction: column;
    gap: clamp(20px, 2.4vw, 30px); min-height: 0;
    align-items: center; text-align: center;
  }
  .site-foot__info  { display: contents; }
  .site-foot__map   { order: 1; align-self: stretch; }
  .site-foot__legal { order: 2; margin-top: 0; }
  /* Контактные строки (адрес, телефон, почта, часы) — по решению Марка остаются
     у левого края: группа тянется во всю ширину колонки, иконка+текст слева. */
  .fcontacts { align-self: stretch; justify-items: start; text-align: left; }
  .fcontact  { justify-content: flex-start; }
  .site-foot__laws { justify-content: center; text-align: center; }
}

/* =========================================================================
   РЕЗИНОВЫЙ МОБИЛЬНЫЙ ЛИСТ. Эталон — iPhone 14 Pro Max (ширина 430px).
   Принцип: на телефоне макет не переламывается, а масштабируется целиком.
   Единица --u = min(100vw, 430) / 430:
     • ниже 430 — весь лист сжимается пропорционально (конструкция та же);
     • на 430 и шире — держится на эталоне (десктоп подхватывает выше 900).
   Любой размер «по макету 430» пишется как calc(N * var(--u)). Элемент шириной
   во весь макет = calc(430 * var(--u)) сам собой равен min(100vw, 430px):
   ниже 430 — во весь экран, на 430+ — держит 430 и центрируется margin auto.

   Блоки переводятся на эту систему по очереди. Готово: Маст ера (пилот).
   ========================================================================= */
@media (max-width: 900px) {
  :root {
    /* 1 «пиксель макета». Не трогаем rem — единица отдельная, точечная. */
    --u: calc(min(100vw, 430px) / 430);
    /* Мягкий пол читаемости для мелкого текста (подписи, роли, кнопки): сжимается
       вместе с листом, но не ниже 11px — срабатывает только на узких экранах. */
    --fz-cap: max(calc(12 * var(--u)), 11px);
  }

  /* --- Блок 4 «Мастера»: 2 карточки в ряд, резиновые --- */
  /* Контент держит эталонную ширину: 430*u = min(100vw,430). Ниже 430 — во весь
     экран с полями 16*u, на 430+ — ровно 430 по центру. */
  .masters__inner {
    width: calc(430 * var(--u));
    max-width: 100%;
    margin-inline: auto;
    padding: 0 calc(16 * var(--u));
  }
  /* Ряд из 4 карточек переносится в сетку 2×2. Оба ряда дают 4 строки по 2. */
  .masters__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(16 * var(--u));
    align-items: start;      /* карточки разной высоты не растягиваем */
    justify-content: stretch;
  }
  .masters__row + .masters__row { margin-top: calc(16 * var(--u)); }

  /* Карточка: ширина = ячейка сетки (1fr), высота от фото (аспект), плюс место
     под свисающую плашку. Всё в --u, чтобы масштабировалось единым листом. */
  .master {
    width: auto; height: auto;
    padding-bottom: calc(24 * var(--u));
  }
  .master__photo { height: auto; aspect-ratio: 1 / 1.4; }
  .master__bar {
    left: calc(10 * var(--u)); right: calc(10 * var(--u));
    padding: calc(10 * var(--u)) calc(12 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .master__name { font-size: calc(16 * var(--u)); line-height: 1.15; }
  .master__role { font-size: var(--fz-cap); margin-top: calc(2 * var(--u)); }
  /* Кнопка на телефоне видна всегда (не по ховеру). */
  .master__btn {
    max-height: none; opacity: 1; overflow: visible;
    margin-top: calc(8 * var(--u));
    padding: calc(8 * var(--u)) calc(10 * var(--u));
    font-size: var(--fz-cap);
  }

  /* Врезка (8-я ячейка): та же ячейка сетки, свой аспект (плашки-свеса нет). */
  .master--cta { aspect-ratio: 1 / 1.4; height: auto; padding-bottom: 0; }
  .master-cta__body { padding: calc(16 * var(--u)); }
  .master-cta__title { font-size: calc(18 * var(--u)); }
  .master-cta__text { font-size: var(--fz-cap); margin-top: calc(6 * var(--u)); }
  .master-cta__btn { padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: var(--fz-cap); }
}