/* ============================================================
   CHILLLASH — стили
   Все размеры, цвета и координаты взяты из Figma напрямую
   (узлы 1022:119, 1055:111, 1058:15, 1058:10, 1060:78,
    1059:35, 1061:94) и записаны в пикселях макета.

   МАСШТАБИРОВАНИЕ
   --u — пиксель десктопного макета (фрейм 1920), --m — мобильного
   (430). Размер из Figma пишется как calc(N * var(--u)), поэтому
   пропорции держатся 1:1 на любой ширине. Выше 1920 --u растёт до
   1.2 — это покрывает 2560 без пустых полей. max(МИНИМУМ, ...) не
   даёт тексту и тач-целям уйти ниже читаемого на 320.

   ПРО КООРДИНАТЫ
   В макете строки обрезаны по капители (text-box-trim), поэтому
   координата текста — центр строки, а не верх её бокса. Позиции
   ниже уже пересчитаны в обычную типографику.
   ============================================================ */

:root{
  /* цвета ровно из макета */
  --clay:#928070;
  --ink:#121212;
  --gold:#CEA056;
  --sand:#CEBFB2;        /* заголовок секции на тёмном */
  --white:#fff;
  --stone:#DDDDDA;       /* подложка видео и карты */
  --smoke:#ECECEC;       /* подложка блока с записью */
  --pearl:#EFEFEF;       /* круги соцсетей */
  --line:#D9D9D9;        /* линейки таблицы */
  --grey:#949494;        /* шапка таблицы */
  --rule:rgba(255,255,255,.32);
  --muted:rgba(255,255,255,.34);
  --half:rgba(255,255,255,.5);

  --u: clamp(0px, calc(100vw / 1920), 1.2px);
  --m: min(1px, calc(100vw / 430));

  /* колонка заголовков: отступ 40 + ширина 313 = контент с 353 */
  --edge:calc(40 * var(--u));
  --col:calc(313 * var(--u));
  --content:calc(353 * var(--u));

  --pad-r: max(20px, calc(27 * var(--u)));
  --pad-t: max(18px, calc(30 * var(--u)));

  --logo-w:  max(150px, calc(398 * var(--u)));
  --burger:  max(44px,  calc(60  * var(--u)));
  --gap-nav: max(20px,  calc(64  * var(--u)));
  --fs-nav:  max(12px,  calc(16  * var(--u)));

  --video-shift:0px;

  --ease:cubic-bezier(.33,.02,.16,1);
  --ease-panel:cubic-bezier(.5,.05,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--white);
  color:var(--ink);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

svg{display:block}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

:where(a,button):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:2px;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--ink);color:var(--white)}
.skip:focus{left:0}

/* Контент прижат к левому краю на 40, как во всех фреймах. */
.wrap{padding-inline:var(--edge)}

/* Сетка «узкая колонка заголовка + контент с 353». */
.grid{display:grid}   /* колонки задаются только на десктопе */
.grid > .eyebrow{grid-column:1}
.grid > *:not(.eyebrow){grid-column:2}

.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.25s var(--ease),transform 1.25s var(--ease);
}
.reveal.is-in{opacity:1;transform:none}

/* Заголовок секции: 24px SemiBold, золотой. */
.eyebrow{
  font-weight:600;
  font-size:max(13px, calc(24 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--sand{color:var(--sand)}
.eyebrow--edu{color:#746E6E}   /* «обучение» — свой оттенок */
/* На экранах 3, 4 и 6 заголовок в макете стоит от 353, как контент. */
.eyebrow--inset{margin-left:calc(313 * var(--u))}

/* ============================================================
   ШАПКА  (Frame 16: left 40, top 30, w 1835, h 90)
   Бургер обязан оставаться на экране при любом разрешении,
   поэтому шапка fixed, а не absolute внутри баннера.
   ============================================================ */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:calc(160 * var(--u));
  padding:var(--pad-t) var(--pad-r) var(--pad-t) var(--edge);
  color:var(--white);
  pointer-events:none;
}
.topbar > *{pointer-events:auto}

.topbar::after{
  content:"";
  position:absolute;
  left:var(--edge);
  right:var(--pad-r);
  bottom:0;
  height:1px;
  background:var(--rule);
  transition:opacity .5s var(--ease);
}
body.is-scrolled .topbar::after,
body.is-open .topbar::after{opacity:0}

.topbar__logo{
  flex:0 0 auto;
  width:var(--logo-w);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;
}
.topbar__logo svg{width:100%;height:auto;fill:currentColor}

body.is-scrolled .topbar__logo,
body.is-scrolled .phone{opacity:0;visibility:hidden;transform:translateY(-12px)}
body.is-open .nav,
body.is-open .phone,
body.is-open .topbar__logo{opacity:0;visibility:hidden}

/* Зазор между телефоном и бургером задан отдельно (160 из макета),
   поэтому общий gap здесь нулевой — иначе он бы к нему прибавился. */
.topbar__side{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
}

.nav{margin-right:auto;transition:opacity .3s var(--ease),visibility .3s}
.nav ul{display:flex;align-items:center;gap:var(--gap-nav)}
body.is-scrolled .nav{opacity:0;visibility:hidden}

.nav__link{
  position:relative;
  display:inline-block;
  font-weight:500;
  font-size:var(--fs-nav);
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  padding-block:2px;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
/* Цветом пункты меню и телефон на наведении не подсвечиваются —
   у пунктов остаётся только подчёркивание в цвет самой надписи. */
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Phone (1037:141): блок 206x14, звезда 14, до текста 24 */
.phone{
  display:flex;
  align-items:center;
  margin-right:calc(160 * var(--u));
  gap:calc(10 * var(--u));
  font-weight:500;
  font-size:var(--fs-nav);
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .5s var(--ease),
             visibility .5s,transform .5s var(--ease);
}

.phone__star{
  flex:0 0 auto;
  width:max(11px, calc(14 * var(--u)));
  height:max(11px, calc(14 * var(--u)));
  fill:var(--gold);
  animation:spin 7s linear infinite;
}
.phone:hover .phone__star{animation-duration:1.6s}
@keyframes spin{to{transform:rotate(360deg)}}

.burger{
  position:relative;
  z-index:30;
  flex:0 0 auto;
  margin-left:auto;
  width:var(--burger);
  height:var(--burger);
  padding:0;
  border:0;
  background:none;
  color:var(--white);
  cursor:pointer;
}
.burger svg{width:100%;height:100%}
.burger__disc{fill:var(--gold);transition:fill .3s var(--ease)}
.burger:hover .burger__disc{fill:#dbb069}

.burger__bar{fill:currentColor;transform-box:view-box;transition:transform .45s var(--ease-panel)}
.burger__bar--top{transform-origin:30px 24px}
.burger__bar--bottom{transform-origin:30px 36px}
.burger[aria-expanded="true"] .burger__bar--top{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar--bottom{transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   МЕНЮ  (1044:2 — панель 896x1080 у правого края)
   ============================================================ */

.menu{position:fixed;inset:0;z-index:35;visibility:hidden;transition:visibility .8s}
.menu[hidden]{display:none}
.menu[data-open="true"]{visibility:visible}

.menu__backdrop{
  position:absolute;
  inset:0;
  background:rgba(18,18,18,.28);
  opacity:0;
  transition:opacity .6s var(--ease);
}
.menu[data-open="true"] .menu__backdrop{opacity:1}

.menu__panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:max(420px, calc(896 * var(--u)));
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#232323;
  color:var(--white);
  padding:clamp(56px, 9vh, calc(159 * var(--u))) var(--pad-r)
          clamp(40px, 8vh, calc(200 * var(--u))) max(28px, calc(78 * var(--u)));
  transform:translateX(100%);
  transition:transform 1s var(--ease-panel);
}
.menu[data-open="true"] .menu__panel{transform:none}

.menu__list{display:flex;flex-direction:column;gap:calc(2.4 * var(--u))}
.menu__item{overflow:hidden}

.menu__link{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  font-size:max(24px, min(calc(68 * var(--u)), 8.2vh));
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  transform:translateY(110%);
  transition:transform 1.15s var(--ease-panel);
}
.menu[data-open="true"] .menu__link{transform:none;transition-delay:calc(.18s + var(--i,0) * .05s)}

/* Ховер: строка уезжает вверх, снизу приходит золотая копия. */
.menu__link span{display:block;transition:transform .55s var(--ease)}
.menu__link span::after{content:attr(data-text);position:absolute;left:0;top:100%;color:var(--gold)}
.menu__link:hover span,.menu__link:focus-visible span{transform:translateY(-100%)}

.menu__block{overflow:hidden}
.menu__block-in{
  display:flex;
  flex-direction:column;
  gap:calc(9.7 * var(--m));
  transform:translateY(110%);
  transition:transform .7s var(--ease-panel);
}
.menu[data-open="true"] .menu__block-in{transform:none;transition-delay:calc(.16s + var(--i,0) * .03s)}

.menu__label{
  font-size:calc(16 * var(--m));
  line-height:1.28;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--muted);
}
.menu__tel{
  font-size:calc(32 * var(--m));
  line-height:1.28;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.menu__tel:hover,.menu__tel:focus-visible{color:var(--gold)}

.menu__phone{margin-top:auto}
.menu__socials{margin-top:max(24px, min(calc(110 * var(--u)), 7vh))}
.menu__socials-list{display:flex;flex-wrap:wrap;gap:max(24px, calc(50 * var(--u)))}

.menu__social{
  position:relative;
  display:inline-block;
  font-size:max(14px, calc(20 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  transition:color .3s var(--ease);
}
.menu__social::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.menu__social:hover,.menu__social:focus-visible{color:var(--gold)}
.menu__social:hover::after,.menu__social:focus-visible::after{transform:scaleX(1);transform-origin:left}

body.is-locked{overflow:hidden}

/* Размытие вешаем на всё содержимое страницы, а не только на баннер:
   иначе первый экран расфокусивался, а остальные просто темнели. */
main{transition:filter .6s var(--ease-panel)}
body.is-open main{filter:blur(14px)}

/* ============================================================
   ЭКРАН 1 — баннер (1022:120)
   Подзаголовок: left 40, центр строки 202, w 381, 24px.
   Логотип внизу: 1920x222, прижат к низу.
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:var(--clay);
  color:var(--white);
}

/* Обёртка фоновых слоёв — цель для расфокуса при открытом меню.
   Именно filter, а не backdrop-filter на подложке: плеер живёт
   в кросс-доменном iframe, который браузер компонует отдельно. */
.hero__bg{position:absolute;inset:0;transition:filter .6s var(--ease-panel)}
.hero__poster{position:absolute;inset:0;background:var(--clay) center / cover no-repeat}
.hero__video{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__poster,.hero__video{transition:transform .9s var(--ease-panel)}

/* Плеер приходит в 16:9 и не умеет object-fit, поэтому растягиваем
   iframe до размера, заведомо перекрывающего экран, и центруем. */
.hero__video iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(calc(-50% + var(--video-shift)),-50%);
  border:0;
  width:100vw;
  height:calc(100vw * 9 / 16);
  min-width:calc(100vh * 16 / 9);
  min-height:100vh;
  min-width:calc(100svh * 16 / 9);
  min-height:100svh;
}

.hero__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(0deg,
    rgba(146,128,112,.80) 0%,
    rgba(146,128,112,.32) 22%,
    rgba(146,128,112,0) 42%);
}

.tagline{
  position:absolute;
  left:var(--edge);
  top:calc(168 * var(--u));
  width:calc(381 * var(--u));
  min-width:240px;
  font-size:max(15px, calc(24 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease-panel);
}
.tagline__br{display:none}
.lead-br{display:inline}
body.is-scrolled .tagline{opacity:0;transform:translateY(-56px)}

.hero__wordmark{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:auto;
  fill:currentColor;
  pointer-events:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
body.is-scrolled .hero__wordmark{opacity:0;transform:translateY(30px)}

/* ============================================================
   ЭКРАНЫ 2–3 — сцена с круглым баннером
   Экран 2 (1080): eyebrow центр 133, лид центр 200.5 (48px),
   видео top 386, 1213x600, radius 2000, подложка #DDDDDA.
   Экран 3 (560): линия сверху 1213, eyebrow центр 103,
   текст 24px от 667.
   ============================================================ */

.stage{position:relative;background:var(--white)}

.blob{
  position:fixed;
  left:0;
  top:0;
  z-index:1;
  width:calc(1213 * var(--u));
  height:calc(600 * var(--u));
  opacity:0;
  visibility:hidden;
  transition:opacity .9s var(--ease),visibility .9s;
  will-change:transform;
  pointer-events:none;
}
.blob.is-live{opacity:1;visibility:visible}

/* Скругление максимальное всегда: в покое это капсула, а когда JS
   сводит ширину к высоте — ровный круг. Проценты тут не годятся,
   они дают эллиптические углы на неквадратной рамке. */
.blob__inner{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:999px;
  background:var(--stone);
}
/* Видео масштабируется по высоте рамки и стоит по центру — как
   pin_photo в макетах планшета и телефона (1111:235, 1112:390).
   По бокам остаётся подложка, а когда рамка сходится в круг,
   квадратный ролик заполняет её ровно. */
.blob__video{
  display:block;
  width:auto;
  height:100%;
  max-width:none;
  margin-inline:auto;
  object-fit:cover;
  object-position:center;
}

.about{position:relative;z-index:2;height:calc(1080 * var(--u));padding-top:calc(116 * var(--u))}

/* Якорь — место видео из макета (1058:9). Сам по себе невидим,
   но задаёт кругу исходную позицию и размер, чтобы тот не всплывал
   поверх баннера, пока до него не доскроллили. */
.about > .wrap{position:relative;z-index:1}

.blob-anchor{
  position:absolute;
  z-index:0;
  left:var(--content);
  top:calc(386 * var(--u));
  width:calc(1213 * var(--u));
  height:calc(600 * var(--u));
  pointer-events:none;
}
/* Колонка та же, что у текста экрана 3 (левый край 667), верх —
   вровень с заголовком «о студии», без собственного отступа. */
/* Ширина 1213 — ровно как у видеоблока ниже. При 899 текст ложился
   впритык (2.97 расчётной строки) и от любого переноса по слову
   срывался на четвёртую. balance выравнивает три строки по длине. */
.about__lead{
  margin-top:0;
  width:calc(1213 * var(--u));
  max-width:100%;
  font-weight:500;
  font-size:max(18px, calc(40 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}

.story{position:relative;z-index:2;height:calc(560 * var(--u))}
.story::before{
  content:"";
  display:block;
  width:calc(1213 * var(--u));
  height:1px;
  margin:0 auto calc(85 * var(--u));
  background:var(--line);
}
.story__grid{display:grid}
.story__text{
  width:calc(899 * var(--u));
  max-width:100%;
  font-size:max(14px, calc(24 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}
.story__text + .story__text{margin-top:calc(33 * var(--u))}

/* ============================================================
   ЭКРАН 4 — работы (1058:10, высота 2016, фон #928070)
   marquee центр 224 (96px) · лента 1 top 324 · лента 2 top 886
   фото 376x530 radius 40 на белой подложке · форма top 1518
   ============================================================ */

.works{
  position:relative;
  z-index:3;
  background:var(--clay);
  color:var(--white);
  padding:calc(100 * var(--u)) 0 calc(142 * var(--u));
  overflow:hidden;
}

.marquee{overflow:hidden;margin:calc(58 * var(--u)) 0 calc(45 * var(--u))}
.marquee__track{display:flex;width:max-content;animation:marquee 58s linear infinite}
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:calc(34 * var(--u));
  padding-right:calc(34 * var(--u));
  font-size:max(28px, calc(96 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Звезда — разделитель, по ТЗ не крутится. */
.marquee__star{
  flex:0 0 auto;
  width:max(16px, calc(48 * var(--u)));
  height:max(16px, calc(48 * var(--u)));
  background:currentColor;
  -webkit-mask:url("../assets/img/star.svg") center / contain no-repeat;
  mask:url("../assets/img/star.svg") center / contain no-repeat;
}
@keyframes marquee{to{transform:translateX(-50%)}}

.gallery{display:flex;flex-direction:column;gap:calc(32 * var(--u))}
.gallery__row{overflow:hidden}
.gallery__track{
  display:flex;
  gap:calc(32 * var(--u));
  width:max-content;
  padding-left:calc(32 * var(--u));
  animation:marquee 74s linear infinite;
}
.gallery__row[data-dir="right"] .gallery__track{animation-direction:reverse}

.shot{
  position:relative;
  flex:0 0 auto;
  margin:0;
  width:calc(376 * var(--u));
  height:calc(530 * var(--u));
  min-width:150px;
  overflow:hidden;
  border-radius:calc(40 * var(--u));
  background:var(--white);
}
/* Кадр внутри рамки задан в макете смещением картинки, а не cover:
   у каждой фотографии свои --ix/--iy/--iw/--ih в процентах. */
.shot img{
  position:absolute;
  left:var(--ix,0);
  top:var(--iy,0);
  width:var(--iw,100%);
  height:var(--ih,100%);
  max-width:none;
  object-fit:cover;
}

/* --- форма отзывов (1073:291): 1840x356, radius 40 --- */

.card{
  display:flex;
  align-items:center;
  margin-top:calc(102 * var(--u));
  padding:calc(48 * var(--u));
  min-height:calc(356 * var(--u));
  border-radius:calc(40 * var(--u));
  background:var(--white);
  color:var(--ink);
  flex-wrap:wrap;
  gap:calc(24 * var(--u));
}
/* ICON 1 (1073:292): 470x259 на месте left 48, top 48 */
.card__badge{
  flex:0 0 auto;
  width:calc(470 * var(--u));
  height:auto;
  min-width:140px;
}

.card__text{
  flex:1 1 calc(697 * var(--u));
  margin-left:calc(27 * var(--u));
  font-weight:500;
  font-size:max(16px, calc(44 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}

/* --- кнопка: 468x128, radius 1000, SemiBold 26 --- */

.btn{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  width:calc(468 * var(--u));
  min-width:220px;
  height:calc(128 * var(--u));
  min-height:56px;
  padding:0 calc(24 * var(--u));
  border-radius:1000px;
  background:var(--gold);
  color:var(--white);
  font-weight:600;
  font-size:max(12px, calc(26 * var(--u)));
  line-height:1.4;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
}
/* Заливка приходит снизу вверх. */
/* Заливка приходит снизу дугой: пока поднимается — верх скруглён,
   у края скругление сходит на нет и заливка становится ровной. */
.btn::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:0;
  height:100%;
  background:var(--btn-hover, var(--clay));
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  transform:translateY(101%);
  transition:transform .7s var(--ease-panel),border-radius .7s var(--ease-panel);
}
.btn:hover::before,.btn:focus-visible::before{
  transform:translateY(0);
  border-radius:0;
}
.btn__label{position:relative;white-space:nowrap}
.btn--clay{--btn-hover:var(--clay)}
/* Кнопка обучения: в макете глиняная, ховер золотой. */
.btn--gold{--btn-hover:var(--gold);background:var(--clay);width:calc(392 * var(--u))}

/* ============================================================
   ЭКРАН 5 — услуги (1060:78, высота 1768)
   eyebrow центр 158 · +7000 центр 200 (160px) · note 48px от 895
   таблица top 387 (колонки 1096/370/370, ячейка 96) · форма 1303
   ============================================================ */

.services{position:relative;z-index:3;background:var(--white);padding:calc(88 * var(--u)) 0 calc(109 * var(--u))}

/* Вертикаль из макета: «+7000» начинается на 88, заголовок на 141,
   подпись на 133 — поэтому выравнивание по верху и свои отступы,
   а не общее центрирование. */
.services__head{
  display:grid;
  align-items:start;
}
.services__head .eyebrow{margin-top:calc(53 * var(--u))}
.services__note{margin-top:calc(45 * var(--u))}
.services__count{
  font-size:max(44px, calc(160 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--gold);
  white-space:nowrap;
}
.services__note{
  width:calc(954 * var(--u));
  max-width:100%;
  font-weight:500;
  font-size:max(18px, calc(48 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}

/* Колонка табов 430 слева, прайс с 667 (1146:34).
   40 + 430 + 197 = 667, правый край таблицы 1880. */
.services__body{
  display:grid;
  grid-template-columns:calc(430 * var(--u)) 1fr;
  column-gap:calc(197 * var(--u));
  align-items:start;
  margin-top:calc(75 * var(--u));
}

.tabs{
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
  margin-top:calc(33 * var(--u));   /* шапка таблицы стоит выше первого таба */
  /* Прайс бывает длиннее колонки табов — тогда она едет вниз
     вместе со страницей и останавливается на конце таблицы. */
  position:sticky;
  top:calc(60 * var(--u));
  align-self:start;
}
.tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:calc(20 * var(--u));
  width:100%;
  min-height:44px;
  height:calc(90 * var(--u));
  padding:0 calc(30 * var(--u));
  border:0;
  border-radius:calc(20 * var(--u));
  background:var(--pearl);
  color:var(--ink);
  font-family:inherit;
  font-weight:500;
  font-size:max(12px, calc(20 * var(--u)));
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
/* Заливка приходит снизу, как у кнопок. */
.tab::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:0;
  height:100%;
  background:var(--clay);
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  transform:translateY(101%);
  transition:transform .55s var(--ease-panel),border-radius .55s var(--ease-panel);
}
.tab:hover::before,.tab:focus-visible::before,.tab.is-active::before{
  transform:translateY(0);
  border-radius:0;
}
.tab:hover,.tab:focus-visible,.tab.is-active{color:var(--white)}
.tab__label{position:relative;z-index:1;flex:1 1 auto}
/* Стрелка только у активного таба (1146:34) */
.tab__arrow{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:calc(16 * var(--u));
  height:calc(16 * var(--u));
  min-width:12px;
  min-height:12px;
  opacity:0;
  transform:translateX(calc(-8 * var(--u)));
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.tab.is-active .tab__arrow{opacity:1;transform:none}

.table{min-width:0}
.table__head,.table__row{
  display:grid;
  grid-template-columns:calc(662 * var(--u)) calc(276 * var(--u)) 1fr;
  gap:1px;
  align-items:center;
}
.table__head{
  height:calc(48 * var(--u));
  align-items:start;
  border-bottom:1px solid var(--line);
  font-weight:500;
  font-size:max(10px, calc(16 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--grey);
}
.table__row{
  position:relative;
  height:calc(96 * var(--u));
  border-bottom:1px solid var(--line);
  font-size:max(14px, calc(24 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.table__row.is-hot{color:var(--gold)}
.table__thumb{display:none}   /* на десктопе фото всплывает у курсора */
.table__time,.table__price{white-space:nowrap}

/* Подмена строк при переключении таба — короткое затухание. */
.table__body{transition:opacity .18s var(--ease)}
.table__body.is-swap{opacity:0}

/* Фото у курсора при наведении на строку. Радиус 30px по ТЗ. */
.peek{
  position:fixed;
  left:0;
  top:0;
  z-index:25;
  width:calc(360 * var(--u));
  height:calc(324 * var(--u));
  border-radius:30px;
  overflow:hidden;
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
  will-change:transform;
}
.peek.is-on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}

/* --- блок с видео и записью: 1840x356, radius 40, #ECECEC --- */

.promo{
  position:relative;
  height:calc(356 * var(--u));
  margin-top:calc(100 * var(--u));
  border-radius:calc(40 * var(--u));
  background:var(--smoke);
  overflow:hidden;
}
/* В макете постер стоит от 266 и занимает всю высоту блока. */
.promo__video{
  background:var(--stone) center / cover no-repeat;
  position:absolute;
  left:calc(266 * var(--u));
  top:0;
  width:calc(738 * var(--u));
  height:100%;
  overflow:hidden;
}
.promo__video iframe{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:0;
  width:100%;
  height:calc(100% * 16 / 9);
  min-height:100%;
}
.promo .btn{position:absolute;left:calc(1294 * var(--u));top:calc(114 * var(--u))}

/* ============================================================
   ЭКРАН 6 — обучение (1059:35, высота 1457, фон #121212)
   eyebrow центр 117 (#CEBFB2) · marquee центр 229.5 (96px)
   карточки 298x388 с поворотами из макета, без скругления
   текст центр 1035.5 · кнопка 392x128 (#928070) на 1221
   ============================================================ */

.education{
  position:relative;
  z-index:3;
  background:var(--ink);
  color:var(--white);
  padding:calc(100 * var(--u)) 0 calc(108 * var(--u));
  overflow:hidden;
}

.fan{
  --push-dist:calc(30 * var(--u));   /* разлёт неактивных карточек */
  position:relative;
  width:calc(1920 * var(--u));
  max-width:100%;
  height:calc(440 * var(--u));
  margin:calc(62 * var(--u)) auto calc(76 * var(--u));
}
.fan__card{
  position:absolute;
  left:calc(var(--l) * var(--u));
  top:calc(var(--t) * var(--u));
  width:calc(298 * var(--u));
  height:calc(388 * var(--u));
  overflow:hidden;
  border-radius:calc(40 * var(--u));
  transform:rotate(var(--r)) translateX(var(--push,0px)) scale(var(--sc,1));
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
  cursor:pointer;
}
/* Пока курсор на одной карточке, остальные отступают в стороны
   и уменьшаются на 20% — масштаб задаёт --sc, сдвиг --push. */
.fan.is-hot .fan__card{--sc:.8}
.fan__card img{width:100%;height:100%;object-fit:cover}
/* Карточка под курсором выпрямляется и выходит вперёд. */
.fan.is-hot .fan__card.is-hot{--sc:1.06}
.fan__card.is-hot{
  transform:rotate(0deg) translateY(calc(-26 * var(--u))) scale(var(--sc,1.06));
  z-index:5;
  box-shadow:0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.45);
}

.education__foot{display:flex;flex-direction:column;align-items:center;gap:calc(58 * var(--u));text-align:center}
/* Ширина задана, чтобы вторая фраза разбилась и вышло три строки,
   как в макете. Без неё текст ложился в две. */
.education__text{
  width:calc(960 * var(--u));
  max-width:100%;
  font-weight:500;
  font-size:max(18px, calc(48 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}

/* ============================================================
   ЭКРАН 7 — контакты (1061:94, высота 1784, фон секции #928070)
   Белая плашка 1628 со скруглением 100 снизу.
   eyebrow центр 133 · телефон 160px · адрес 48px (зазор 36)
   карта top 504 (1213x600) · круги 405 на top 1104
   подвал: строка на 1691, 24px
   ============================================================ */

.contacts{position:relative;z-index:3;background:var(--clay)}

.contacts__card{
  background:var(--white);
  border-radius:0 0 calc(100 * var(--u)) calc(100 * var(--u));
  padding:calc(116 * var(--u)) 0 calc(119 * var(--u));
}

/* Заголовок слева, телефон справа и вровень с ним по верху.
   Левый край колонки — 667, как у текста экрана 3. */
.contacts__grid{
  display:grid;
  align-items:start;
}
/* Над капителью в строке 140px пустует 50 px, в заголовке 24px — 9.
   Поднимаем блок на разницу, иначе телефон визуально ниже. */
.contacts__info{margin-top:calc(-41.6 * var(--u))}

.contacts__tel{
  display:block;
  font-size:max(30px, calc(140 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.contacts__tel:hover,.contacts__tel:focus-visible{color:var(--gold)}

.contacts__addr{
  margin-top:calc(36 * var(--u));
  font-weight:500;
  font-size:max(16px, calc(40 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}

/* Карта чёрно-белая: обесцвечивание висит на контейнере. */
/* В макете карта и круги прижаты к колонке контента (353), а не
   отцентрованы; круги начинаются ровно там, где кончается карта. */
.map{
  width:calc(1213 * var(--u));
  max-width:100%;
  height:calc(600 * var(--u));
  min-height:260px;
  margin:calc(64 * var(--u)) auto 0;
  border-radius:calc(300 * var(--u));
  overflow:hidden;
  background:var(--stone);
  filter:grayscale(1) contrast(1.04);
}
.map ymaps{border-radius:inherit}

/* Пин рисуем поверх карты, а не средствами Яндекса: их слой
   пересчитывает растр и режет края у наклонных фигур. */
.map-wrap{position:relative;width:max-content;max-width:100%;margin-inline:auto}
.map-pin{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(137 * var(--u));
  height:auto;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
}

/* Круги 405 почти вплотную — как в макете (353 / 758 / 1161). */
.contacts__btn{display:none}

.contacts__actions{
  display:flex;
  gap:0;
  margin-left:calc(313 * var(--u));
  padding-top:0;
}
.disc{
  position:relative;
  display:grid;
  place-items:center;
  width:calc(405 * var(--u));
  height:calc(405 * var(--u));
  min-width:96px;
  min-height:96px;
  border-radius:50%;
  background:var(--pearl);
  color:var(--gold);
  font-weight:600;
  font-size:max(11px, calc(28 * var(--u)));
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.disc svg{
  width:59%;
  height:59%;
  fill:currentColor;
  transition:transform .5s var(--ease);
}
/* Иконка проворачивается вокруг своей оси при наведении. */
.disc:hover svg,.disc:focus-visible svg{transform:rotate(10deg)}
.disc:hover,.disc:focus-visible{background:var(--gold);color:var(--white)}
.disc--gold{background:var(--gold);color:var(--white);overflow:hidden}
/* Круг заливается так же — дугой снизу вверх. */
.disc--gold::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:0;
  height:100%;
  background:var(--clay);
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
  transform:translateY(101%);
  transition:transform .7s var(--ease-panel),border-radius .7s var(--ease-panel);
}
.disc--gold:hover::before,.disc--gold:focus-visible::before{
  transform:translateY(0);
  border-radius:0;
}
.disc--gold:hover,.disc--gold:focus-visible{background:var(--gold)}
.disc span,.disc svg{position:relative;z-index:1}

.footer{padding:calc(41 * var(--u)) 0 calc(67 * var(--u));color:var(--white)}
.footer__row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-size:max(11px, calc(24 * var(--u)));
  line-height:1.4;
  letter-spacing:-.01em;
}
.footer__right{justify-self:end;text-align:right}
.footer__right span{color:var(--half)}
.footer__right a{transition:color .3s var(--ease)}
.footer__right a:hover{color:var(--gold)}

.footer__up{
  display:block;
  width:calc(64 * var(--u));
  height:calc(64 * var(--u));
  min-width:44px;
  min-height:44px;
  color:var(--white);
}
.footer__up svg{width:100%;height:100%}
.footer__up rect{transition:fill .3s var(--ease)}
.footer__up:hover rect{fill:var(--gold)}

/* ============================================================
   БРЕЙКПОИНТЫ
   ============================================================ */

/* Пункты и телефон вместе перестают помещаться. */
@media (max-width:1100px){.nav{display:none}}

/* Ниже 900 макет собран заново: фиксированные высоты экранов
   заменяются потоком, двухколоночные сетки — одной колонкой. */
/* ============================================================
   ПЛАНШЕТ — макет chilllas_tablet (1111:218), фрейм 768
   Это не сжатый десктоп: форма отзывов вертикальная, прайс —
   строки с фото, обучение — сетка 3x2, контакты — два круга
   и широкая кнопка.
   ============================================================ */

@media (max-width:1024px){
  :root{
    --t: calc(100vw / 768);
    --edge: calc(20 * var(--t));
    --col: 100%;
    --content: 0px;
  }

  .nav,.phone{display:none}
  .hero__scrim{opacity:1}
  .hero__wordmark{display:none}

  .wrap{padding-inline:var(--edge)}

  /* Шапка: логотип 279x32, бургер 60 у правого края (1111:221) */
  .topbar{
    gap:calc(16 * var(--t));
    padding:calc(30 * var(--t)) var(--edge) calc(30 * var(--t));
  }
  .topbar::after{left:var(--edge);right:var(--edge)}
  .topbar__logo{width:calc(279 * var(--t))}
  /* flex:1 — иначе margin-left:auto у бургера нечего распирать
     и он прилипает к логотипу вместо правого края (макет 1111:223) */
  .topbar__side{flex:1 1 0;justify-content:flex-end}
  .burger{width:calc(60 * var(--t));height:calc(60 * var(--t));min-width:44px;min-height:44px}

  /* Подзаголовок баннера: 20 / 834, ширина 728 (1111:226) */
  .tagline{
    top:auto;
    bottom:calc(56 * var(--t));
    left:var(--edge);
    width:calc(728 * var(--t));
    min-width:0;
    font-size:calc(48 * var(--t));
  }
  .tagline__br{display:none}
.lead-br{display:inline}

  /* Меню на весь экран */
  .menu__backdrop{display:none}
  /* Отступы и кегль ограничены высотой окна: иначе блоки телефона
     и соцсетей уходят под нижний край на невысоких экранах. */
  .menu__panel{
    width:100%;
    padding:clamp(48px, 9vh, calc(120 * var(--t))) var(--edge)
            clamp(24px, 3vh, calc(60 * var(--t)));
  }
  .menu__list{margin-top:min(2vh, calc(60 * var(--t)));gap:calc(12 * var(--t))}
  .menu__link{font-size:min(calc(56 * var(--t)), 4.8vh);line-height:1.3}
  .menu__phone{margin-top:clamp(20px, 4vh, calc(80 * var(--t)))}
  .menu__socials{margin-top:clamp(16px, 2.5vh, calc(40 * var(--t)))}
  .menu__social{font-size:calc(24 * var(--t))}

  /* Одна колонка: заголовок над контентом, оба от 20 */
  /* Заголовок сверху, текст под ним. Прописано явно, чтобы
     раскладка не зависела от того, что задано в базовых правилах. */
  .grid,
  .about > .wrap,
  .story__grid,
  .services__head,
  .contacts__grid{
    display:block;
  }
  .grid > *,
  .about > .wrap > *,
  .story__grid > *,
  .services__head > *,
  .contacts__grid > *{
    width:auto;
    max-width:100%;
    min-width:0;
    margin-left:0;
  }
  .eyebrow{margin-bottom:calc(24 * var(--t))}
  .eyebrow{font-size:calc(24 * var(--t))}
  .eyebrow--inset{margin-left:0}
  .services__head .eyebrow,.services__note{margin-top:0}

  /* Экран 2 (1111:227): заголовок 80, текст 138, видео 397, h 425 */
  .about{height:auto;padding:calc(80 * var(--t)) 0 calc(493 * var(--t))}
  .about__lead{margin-top:0;width:100%;font-size:calc(36 * var(--t))}
  .lead-br{display:none}
  /* Никакого слежения за пальцем: просто видео на своём месте. */
  .blob{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:1;
    visibility:visible;
    transform:none !important;
  }
  .blob__inner{width:100% !important;margin-left:0 !important}
  .blob-anchor{
    left:var(--edge);
    top:auto;
    bottom:calc(28 * var(--t));
    width:calc(728 * var(--t));
    height:calc(425 * var(--t));
  }

  /* Экран 3 (1113:713): заголовок 60, текст 118 */
  .story{height:auto;padding:calc(60 * var(--t)) 0 calc(80 * var(--t))}
  .story::before{display:none}          /* серой полоски над «chilllash» здесь нет */
  .story__text{width:100%;font-size:calc(24 * var(--t))}
  .story__text + .story__text{margin-top:calc(20 * var(--t))}

  /* Экраны 4 и 6: бегущая строка h109, ленты от 274 */
  .works,.education{padding:calc(80 * var(--t)) 0 calc(80 * var(--t))}
  .marquee{margin:calc(30 * var(--t)) 0 calc(32 * var(--t))}
  .marquee__item{
    font-size:calc(96 * var(--t));
    gap:calc(34 * var(--t));
    padding-right:calc(34 * var(--t));
  }
  .marquee__star{width:calc(48 * var(--t));height:calc(48 * var(--t))}

  /* Фото галереи остаются 376x530, зазор 32 (1112:330).
     На планшете и телефоне ряд один: обе дорожки выстраиваются
     в строку и дают сплошную ленту из 12 работ, которая
     листается свайпом. Автопрокрутку отключаем — дубли строк
     JS в этих ширинах не добавляет. */
  .gallery{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:calc(32 * var(--t));
    padding-inline:var(--edge);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--edge);
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery.is-dragging{cursor:grabbing;scroll-snap-type:none}
  .gallery__row{flex:0 0 auto;overflow:visible}
  .gallery__track{
    gap:calc(32 * var(--t));
    padding-left:0;
    animation:none;
  }
  .shot{
    width:calc(376 * var(--t));
    height:calc(530 * var(--t));
    border-radius:calc(40 * var(--t));
    scroll-snap-align:start;
  }

  /* Форма отзывов вертикальная (1112:356): 728x841 */
  /* Здесь карточка складывается в столбик и всё в ней по центру */
  .card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:calc(83 * var(--t));
    padding:calc(48 * var(--t));
    min-height:0;
    border-radius:calc(40 * var(--t));
    gap:0;
  }
  .card__badge{width:calc(619 * var(--t));min-width:0}
  .card__text{
    flex:0 0 auto;
    width:100%;
    margin:calc(39 * var(--t)) 0 0;
    font-size:calc(40 * var(--t));
  }

  /* Кнопки: 608x160, метка 26 (1112:366) */
  .btn{
    width:calc(608 * var(--t));
    max-width:100%;
    min-width:0;
    height:calc(160 * var(--t));
    min-height:0;
    margin-top:calc(45 * var(--t));
    font-size:calc(26 * var(--t));
  }
  .btn--gold{width:calc(608 * var(--t))}

  /* Экран 5 (1112:425): заголовок 80, подпись 146, таблица 307 */
  .services{padding:calc(80 * var(--t)) 0 calc(80 * var(--t))}
  .services__count{display:none}          /* на планшете «+7000» нет */
  .services__note{width:100%;margin-top:calc(32 * var(--t));font-size:calc(40 * var(--t))}

  /* Строка прайса: фото 186x167 слева, текст с 222 (1112:438) */
  /* Табы уезжают в горизонтальную полосу и листаются вбок (1146:112):
     колонки на планшете нет, чипы идут строкой над прайсом. */
  .services__body{display:block;margin-top:0}
  .tabs{
    position:static;
    flex-direction:row;
    gap:calc(10 * var(--t));
    margin:calc(48 * var(--t)) calc(-1 * var(--edge)) 0;
    padding-inline:var(--edge);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:0 0 auto;
    width:auto;
    height:calc(60 * var(--t));
    gap:calc(4 * var(--t));
    padding:0 calc(30 * var(--t));
    border-radius:calc(20 * var(--t));
    font-size:calc(17 * var(--t));
    white-space:nowrap;
  }
  .tab__label{flex:0 0 auto}
  /* На планшете и телефоне стрелка смотрит вниз — на прайс под чипами.
     У неактивного чипа её нет совсем: он должен быть шириной текста
     плюс 30 паддинга с каждой стороны. */
  .tab__arrow{display:none}
  .tab.is-active .tab__arrow{
    display:block;
    width:calc(16 * var(--t));
    height:calc(16 * var(--t));
    opacity:1;
    transform:rotate(90deg);
  }

  .table{margin-top:calc(24 * var(--t))}
  .table__head{display:none}
  .table__row.is-hot{color:inherit}
  .table__row{
    grid-template-columns:calc(186 * var(--t)) 1fr;
    column-gap:calc(36 * var(--t));
    row-gap:calc(10 * var(--t));
    align-items:center;
    height:auto;
    padding:calc(16 * var(--t)) 0;
    border-bottom:0;
  }
  /* Линейка идёт только под текстовой колонкой, фото она не подчёркивает */
  .table__row::after{
    content:"";
    position:absolute;
    left:calc(222 * var(--t));
    right:0;
    bottom:0;
    height:1px;
    background:var(--line);
  }
  .table__thumb{
    display:block;
    grid-column:1;
    grid-row:1 / span 3;
    width:100%;
    height:calc(167 * var(--t));
    object-fit:cover;
    border-radius:calc(20 * var(--t));
  }
  .table__time{grid-column:2;grid-row:1;font-size:calc(20 * var(--t));color:var(--gold)}
  .table__name{grid-column:2;grid-row:2;font-size:calc(28 * var(--t))}
  .table__price{grid-column:2;grid-row:3;font-size:calc(24 * var(--t));font-weight:600;color:var(--ink)}

  /* Блок записи: на планшете это просто широкая кнопка */
  .promo{
    height:auto;
    margin-top:calc(60 * var(--t));
    padding:0;
    background:none;
    display:flex;
    justify-content:center;
  }
  .promo__video{display:none}
  .promo .btn{position:relative;left:0;top:0;margin-top:0}

  /* Обучение: сетка 3x2, карточки 233x304, зазор 14 (1112:538) */
  .fan{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:calc(14 * var(--t));
    width:100%;
    height:auto;
    margin:calc(35 * var(--t)) 0 calc(89 * var(--t));
  }
  .fan__card{
    position:static;
    width:100%;
    height:calc(304 * var(--t));
    border-radius:calc(40 * var(--t));
    transform:none;
    cursor:default;
  }
  .fan.is-hot .fan__card,
  .fan__card.is-hot{--sc:1;transform:none;box-shadow:none}
  .education__foot{gap:calc(89 * var(--t))}
  .education__text{width:calc(640 * var(--t));max-width:100%;font-size:calc(32 * var(--t))}

  /* Контакты (1112:552): телефон 138, адрес 278, карта 433 */
  .contacts__card{
    padding:calc(80 * var(--t)) 0 calc(80 * var(--t));
    border-radius:0 0 calc(40 * var(--t)) calc(40 * var(--t));
  }
  .contacts__grid{margin-top:0}
  .contacts__info{margin-top:0}
  .contacts__tel{margin-top:calc(24 * var(--t));font-size:calc(64 * var(--t));white-space:normal}
  .contacts__addr{margin-top:calc(28 * var(--t));font-size:calc(36 * var(--t))}
  .map-wrap{width:100%}
  .map{
    width:100%;
    height:calc(425 * var(--t));
    min-height:0;
    margin:calc(56 * var(--t)) 0 0;
    border-radius:calc(212 * var(--t));   /* капсула, как на десктопе */
  }
  .map-pin{width:calc(137 * var(--t))}

  /* Круга два: «записаться» вынесена в кнопку под ними */
  /* Карта, круги и кнопка идут вплотную, без промежутков. */
  .contacts__actions{
    margin-left:0;
    padding-top:0;
    gap:0;                                /* круги стоят вплотную */
  }
  .disc{
    flex:1 1 0;
    width:auto;
    height:auto;
    max-width:calc(365 * var(--t));
    min-width:0;
    min-height:0;
    border-radius:50%;
    aspect-ratio:1;
  }
  .disc svg{width:calc(240 * var(--t));height:calc(240 * var(--t))}
  .disc--gold{display:none}
  /* Кнопка «записаться» тянется во всю ширину контента (tablet_pravki) */
  .contacts__btn{display:flex;width:100%;max-width:none;min-width:0;margin:0}

  /* Подвал: стрелка сверху, подписи по центру (1112:608) */
  .footer{padding:calc(56 * var(--t)) 0 calc(77 * var(--t))}
  .footer__row{
    grid-template-columns:1fr;
    justify-items:center;
    gap:calc(22 * var(--t));
    text-align:center;
    font-size:calc(24 * var(--t));
  }
  .footer__up{order:-1;width:calc(64 * var(--t));height:calc(64 * var(--t))}
  .footer__left{order:1}
  .footer__right{order:2;justify-self:center;text-align:center}
}

/* ============================================================
   ТЕЛЕФОН — макет chilllas_mobile (1111:206), фрейм 430
   Отличия от планшета: обучение 2x3, прайс уезжает в
   горизонтальную ленту карточек, кнопки 388x120.
   ============================================================ */

@media (max-width:600px){
  :root{
    --m: min(1.2px, calc(100vw / 430));
    --t: var(--m);
    --edge: calc(20 * var(--m));
  }

  .topbar{padding:calc(16 * var(--m)) var(--edge)}
  .topbar__logo{width:calc(279 * var(--m))}
  .burger{width:calc(60 * var(--m));height:calc(60 * var(--m))}

  /* Подзаголовок: 20 / 735, ширина 381 (1111:214) */
  .tagline{bottom:calc(47 * var(--m));width:calc(381 * var(--m));font-size:calc(36 * var(--m))}
  .tagline__br{display:inline}

  /* Отступы и кегль ограничены высотой окна: иначе блоки телефона
     и соцсетей уходят под нижний край на невысоких экранах. */
  .menu__panel{
    padding:clamp(48px, 9vh, calc(92 * var(--m))) var(--edge)
            clamp(24px, 3vh, calc(51 * var(--m)));
  }
  .menu__list{margin-top:min(2vh, calc(78 * var(--m)));gap:calc(16.8 * var(--m))}
  .menu__link{font-size:min(calc(40 * var(--m)), 4.8vh)}
  .menu__phone{margin-top:clamp(20px, 4vh, calc(150 * var(--m)))}
  .menu__socials{margin-top:clamp(16px, 2.5vh, calc(40 * var(--m)))}
  .menu__social{font-size:calc(20 * var(--m))}
  .eyebrow{font-size:calc(20 * var(--m));margin-bottom:calc(20 * var(--m))}

  /* Экран 2 (1112:387): текст 142, видео 427, квадрат 425 */
  .about{padding:calc(60 * var(--m)) 0 calc(470 * var(--m))}
  .about__lead{margin-top:0;font-size:calc(30 * var(--m))}
  .blob-anchor{
    left:var(--edge);
    bottom:calc(40 * var(--m));
    width:calc(390 * var(--m));
    height:calc(390 * var(--m));
  }

  .story{padding:calc(60 * var(--m)) 0 calc(64 * var(--m))}
  .story__text{font-size:calc(18 * var(--m))}

  .works,.education{padding:calc(60 * var(--m)) 0 calc(64 * var(--m))}
  .marquee{margin:calc(28 * var(--m)) 0}
  .marquee__item{
    font-size:calc(60 * var(--m));
    gap:calc(20 * var(--m));
    padding-right:calc(20 * var(--m));
  }
  .marquee__star{width:calc(30 * var(--m));height:calc(30 * var(--m))}

  /* Фото 252x356, зазор 16 (1113:680); лента одна, свайпом */
  .gallery{gap:calc(16 * var(--m))}
  .gallery__track{gap:calc(16 * var(--m));padding-left:0}
  .shot{width:calc(252 * var(--m));height:calc(356 * var(--m));border-radius:calc(30 * var(--m))}

  /* Форма отзывов 388x493 (1113:693) */
  .card{margin-top:calc(40 * var(--m));padding:calc(21 * var(--m));border-radius:calc(30 * var(--m))}
  .card__badge{width:calc(346 * var(--m))}
  .card__text{margin-top:calc(28 * var(--m));font-size:calc(24 * var(--m))}

  /* Кнопки 388x120, метка 20 (1113:703) */
  .btn{
    width:calc(388 * var(--m));
    height:calc(120 * var(--m));
    margin-top:calc(40 * var(--m));
    font-size:calc(20 * var(--m));
  }
  .btn--gold{width:calc(388 * var(--m))}

  .services{padding:calc(60 * var(--m)) 0 calc(64 * var(--m))}
  .services__note{margin-top:calc(48 * var(--m));font-size:calc(28 * var(--m))}

  /* Полоса табов: чипы ниже и уже (1146:166) */
  .tabs{
    gap:calc(10 * var(--m));
    margin:calc(40 * var(--m)) calc(-1 * var(--edge)) 0;
    padding-inline:var(--edge);
  }
  .tab{
    height:calc(50 * var(--m));
    gap:calc(4 * var(--m));
    padding:0 calc(30 * var(--m));
    border-radius:calc(20 * var(--m));
    font-size:calc(16 * var(--m));
  }
  .tab.is-active .tab__arrow{
    width:calc(16 * var(--m));
    height:calc(16 * var(--m));
  }

  /* Прайс уезжает в ленту: карточка 264, фото сверху (1113:996) */
  .table{
    margin-top:calc(40 * var(--m));
    display:flex;
    gap:calc(17 * var(--m));
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0;                     /* серой полосы скролла нет */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .table::-webkit-scrollbar{display:none}
  .table__body{display:flex;gap:calc(17 * var(--m));align-items:stretch}
  .table__row{
    display:flex;
    flex-direction:column;
    flex:0 0 calc(264 * var(--m));
    width:calc(264 * var(--m));
    scroll-snap-align:start;
    align-items:stretch;
    padding:0 0 calc(24 * var(--m));
    border:0;
    border-bottom:1px solid var(--line);
    gap:calc(8 * var(--m));
  }
  /* На телефоне линейка идёт по всей ширине карточки */
  .table__row::after{display:none}
  .table__thumb{
    width:100%;
    height:calc(238 * var(--m));
    margin-bottom:calc(28 * var(--m));
    border-radius:calc(30 * var(--m));
  }
  .table__thumb{order:1}
  .table__time{order:2;font-size:calc(20 * var(--m));color:var(--gold)}
  .table__name{order:3;font-size:calc(20 * var(--m));color:inherit}
  .table__price{order:4;font-size:calc(24 * var(--m));font-weight:600;color:var(--ink);text-align:left}

  .promo{margin-top:calc(47 * var(--m))}

  /* Обучение: 2 колонки, карточки 188x247 (1113:1051) */
  .fan{
    grid-template-columns:repeat(2,1fr);
    gap:calc(12 * var(--m)) calc(12 * var(--m));
    margin:calc(35 * var(--m)) 0 calc(59 * var(--m));
  }
  .fan__card{height:calc(247 * var(--m));border-radius:calc(30 * var(--m))}
  /* Отступ «карточки → текст» и «текст → кнопка» одинаковый: 59.
     Своего margin-top у кнопки здесь быть не должно, иначе он
     складывается с gap и низ блока провисает. */
  .education__foot{gap:calc(59 * var(--m))}
  .education__foot .btn{margin-top:0}
  .education__text{width:calc(362 * var(--m));font-size:calc(24 * var(--m))}

  /* Контакты (1113:1060): телефон 111, адрес 188, карта 305 */
  .contacts__card{padding:calc(60 * var(--m)) 0 calc(64 * var(--m));border-radius:0 0 calc(30 * var(--m)) calc(30 * var(--m))}
  .contacts__tel{margin-top:calc(32 * var(--m));font-size:calc(40 * var(--m))}
  .contacts__addr{margin-top:calc(20 * var(--m));font-size:calc(20 * var(--m))}
  .map{
    height:calc(223 * var(--m));
    margin-top:calc(40 * var(--m));
    border-radius:calc(111 * var(--m));
  }
  .map-pin{width:calc(91 * var(--m))}

  /* Круги 194x194 (1113:1071) */
  .contacts__actions{padding-top:0;gap:0}
  .disc{height:auto;max-width:calc(194 * var(--m));border-radius:50%}
  .disc svg{width:calc(120 * var(--m));height:calc(120 * var(--m))}
  .contacts__btn{width:100%;margin-top:0}

  .footer{padding:calc(39 * var(--m)) 0 calc(60 * var(--m))}
  .footer__row{gap:calc(22 * var(--m));font-size:calc(24 * var(--m))}
  .footer__up{width:calc(64 * var(--m));height:calc(64 * var(--m))}
}

@media (max-width:380px){
  .contacts__tel{font-size:calc(34 * var(--m))}
  .marquee__item{font-size:calc(52 * var(--m))}
}

@media (min-width:1025px){
  /* Двухколоночная сетка — только здесь: заголовок слева (313),
     контент от 353 или 667. На узких экранах колонка одна. */
  .grid{grid-template-columns:var(--col) 1fr}
  .about > .wrap,
  .story__grid,
  .contacts__grid{grid-template-columns:calc(627 * var(--u)) 1fr}
  /* «+7000» встаёт по левому краю таблицы (667), а не по колонке 353 */
  .services__head{grid-template-columns:calc(627 * var(--u)) auto 1fr}
  .services__note{width:100%;padding-left:calc(50 * var(--u))}

  .menu__phone{display:none}
  .menu__socials .menu__label{display:none}

  body.is-open .blob{opacity:0}
}

@media (max-height:640px){
  .menu__list{margin-top:0}
  .menu__phone{margin-top:calc(28 * var(--m))}
}

@media (hover:none){.peek{display:none}}
@media (max-width:1024px){.peek{display:none !important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__video{display:none}
  .phone__star{animation:none}
  .marquee__track,.gallery__track{animation:none}
  .menu__link,.menu__block-in{transform:none !important}
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}