:root {
  --ink: #1b1713;
  --ink-soft: #2f2a26;
  --ink-deep: #292525;
  --peach: #f9c8b5;
  --lilac: #dcd7ef;
  --sand: #d7d0c3;
  --paper: #fff;
  --muted: rgba(255, 255, 255, .62);
  --faint: rgba(255, 255, 255, .42);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .3);
  --ring: #2b2b2b;
  --milk: #f3ede4;

  --display: "Playfair Display", Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
  --script: Caveat, cursive;

  --page: min(1280px, calc(100% - 64px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--ink); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }

/* ── Типографика ───────────────────────────────── */

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.06;
  text-transform: uppercase;
}
/* .h2-look — главный заголовок страницы (h1), который выглядит как h2 */
h2, .h2-look {
  margin: 0;
  color: var(--peach);
  font-family: var(--display);
  font-size: clamp(29px, 4.9vw, 65px);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1;
  overflow-wrap: break-word;
  text-transform: uppercase;
  text-wrap: balance;
}
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1;
  text-transform: uppercase;
}
.eyebrow {
  display: block;
  color: var(--lilac);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.4;
  text-transform: uppercase;
}
.frame-label {
  color: var(--faint);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.heading-copy,
.hero-copy,
.product-hero p:not(.product-price) {
  max-width: 343px;
  margin: 0;
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1.16;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ── Кнопки и ссылки ───────────────────────────── */

.button {
  /* позиция курсора внутри кнопки, её обновляет ui.js */
  --bx: 50%;
  --by: 50%;

  position: relative;
  z-index: 0;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font: 400 14px/19px var(--sans);
  transition: color .3s ease;
}

/* Продукт, для которого ещё не подключена оплата: кнопка на месте, но не
   кликается и не подсвечивается — чтобы её не принимали за рабочую. */
.button[disabled] { color: var(--faint); cursor: default; }
.button[disabled] .button-bg { border-color: var(--line-strong); background: transparent; }

/* Вся видимая часть кнопки живёт на отдельном слое: он и увеличивается
   при наведении, поэтому раскладка и кегль текста остаются на месте. */
.button-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 5px;
  background: var(--paper);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

/* Тот же градиент, что у «Вдох выдох»: он шире кнопки и ездит за курсором,
   сверху — мягкий блик под самим курсором. */
.button-bg::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(90px circle at var(--bx) var(--by), rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(103deg, #f9c8b5 0%, #f4d3c6 26%, #e6dfe4 58%, #d3d5dc 82%, #f9c8b5 100%);
  background-size: auto, 280% 100%;
  background-position: 0 0, calc(100% - var(--bx)) center;
  content: "";
  opacity: 0;
  transition: opacity .45s ease, background-position .6s cubic-bezier(.16, 1, .3, 1);
}

/* Блик, бегущий по обводке: маска оставляет от слоя только рамку в 1px. */
.button-bg::after {
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .95) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 55% 100%;
  background-position: -60% 0;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  content: "";
  opacity: 0;
  transition: opacity .45s ease;
}

/* Эффекты — только у доступной кнопки: заблокированная (отправка, «скоро»)
   не должна подсвечиваться, иначе светлый градиент съедает её текст. */
.button:not([disabled]):hover .button-bg,
.button:not([disabled]):focus-visible .button-bg { transform: scale(1.055); }

.button:not([disabled]):active .button-bg { transform: scale(1.015); }

.button:not([disabled]):hover .button-bg::before,
.button:not([disabled]):focus-visible .button-bg::before { opacity: 1; }

.button:not([disabled]):hover .button-bg::after,
.button:not([disabled]):focus-visible .button-bg::after {
  opacity: 1;
  animation: button-border-shine 1.6s linear infinite;
}

@keyframes button-border-shine {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}

.button .arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Стрелка уезжает вправо и возвращается уже слева. */
.button:not([disabled]):hover .arrow,
.button:not([disabled]):focus-visible .arrow {
  animation: button-arrow-loop .7s cubic-bezier(.16, 1, .3, 1);
}

@keyframes button-arrow-loop {
  0% { transform: translateX(0); opacity: 1; }
  42% { transform: translateX(220%); opacity: 0; }
  43% { transform: translateX(-220%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.button--light .button-bg {
  border-color: var(--line-strong);
  background: transparent;
}
.button--light { color: var(--paper); }
.button--light:not([disabled]):hover,
.button--light:not([disabled]):focus-visible { color: #000; }

/* Кнопка формы во время отправки и после неё: заливка и тёмный текст остаются,
   у контурной кнопки — контур и светлый текст. Одинаково во всех формах (submitState в app.js). */
.button.is-busy,
.button.is-done { color: #000; cursor: default; }
.button.is-busy .button-bg,
.button.is-done .button-bg { border-color: rgba(255, 255, 255, .38); background: var(--paper); }
.button.is-busy { opacity: .72; }
.button--light.is-busy,
.button--light.is-done { color: var(--paper); }
.button--light.is-busy .button-bg,
.button--light.is-done .button-bg { border-color: var(--line-strong); background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .button-bg,
  .button-bg::before,
  .button-bg::after { transition: none; }
  .button:hover .button-bg { transform: none; }
  .button:hover .button-bg::after,
  .button:hover .arrow { animation: none; }
}

.text-link {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--peach);
  color: var(--peach);
  font-size: 13px;
  transition: opacity .2s ease, transform .2s ease;
}
.text-link:hover { opacity: .72; transform: translateY(-1px); }
.round-arrow {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.round-arrow .arrow-up {
  width: 13px;
  height: 13px;
}

/* Стрелка улетает по диагонали и возвращается с противоположной стороны —
   тот же приём, что и в кнопке. */
:is(.service-row, .event, .case-card, .brand-card, .media-card):hover .arrow-up {
  animation: round-arrow-loop .7s cubic-bezier(.16, 1, .3, 1);
}

@keyframes round-arrow-loop {
  0% { transform: translate(0, 0); opacity: 1; }
  42% { transform: translate(200%, -200%); opacity: 0; }
  43% { transform: translate(-200%, 200%); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.service-row, .event, .case-card, .brand-card, .media-card):hover .arrow-up { animation: none; }
}
:is(.service-row, .event, .case-card):hover .round-arrow {
  border-color: var(--peach);
  background: var(--peach);
  color: #17120f;
}
:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }

/* ── Шапка ─────────────────────────────────────── */

.site-header {
  position: sticky;
  z-index: 60;
  top: 0;
  padding: 26px 0 18px;
  background-color: transparent;
  transition: background-color .25s ease;
  /* Шапка без плашки: белые ссылки и логотип вычитаются из фона под ними,
     поэтому на тёмном остаются светлыми, а на светлом становятся тёмными. */
  mix-blend-mode: difference;
}

/* Плашка появляется, только когда с меню работают: наведение, фокус
   с клавиатуры или раскрытое мобильное меню. В этот момент инверсия
   выключается, иначе фон плашки тоже бы вычитался. */
.site-header.is-open,
.site-header:has(:focus-visible) {
  background-color: var(--ink);
  mix-blend-mode: normal;
}
@media (hover: hover) {
  .site-header:hover {
    background-color: var(--ink);
    mix-blend-mode: normal;
  }
}
.site-header-inner {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav--end { justify-content: flex-end; }
.main-nav a { position: relative; transition: color .18s ease; }
.main-nav a::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--peach);
  content: "";
  transition: width .26s cubic-bezier(.16, 1, .3, 1);
}
.main-nav a:hover { color: var(--peach); }
.main-nav a:hover::after { width: 100%; }
.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  place-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--paper);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.site-header.is-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-header.is-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.brand { display: block; }
.brand img { display: block; width: 107px; height: auto; }

/* ── Первый экран ──────────────────────────────── */

/* Первый экран закреплён внутри .hero-stage: пока идёт раскадровка
   (подпись уходит, лепестки разлетаются, слово раздвигается, снизу
   выплывает фото) — страница стоит на месте. Дальше скролл обычный. */
.hero-stage {
  position: relative;
  height: 200vh;
  /* --split / --rise / --fade ставит ui.js, CSS только раскладывает кадр */
  --fade: 0;
  --split: 0;
  --rise: 0;
  /* ширина кадра живёт в переменной: от неё считается разъезд слов,
     иначе текст и фото масштабируются врозь и нахлёст теряется */
  --photo-w: clamp(196px, 25vw, 350px);
}

.hero {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  /* sticky + z-index создают контекст наложения: без своей подложки
     лепесткам не с чем смешиваться в mix-blend-mode: screen */
  background: var(--ink);
  height: 100vh;
  height: 100dvh;
  padding: clamp(46px, 7vw, 92px) 0 clamp(64px, 9vw, 120px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Без раскадровки (reduce motion, нет JS) экран остаётся прежним. */
.hero-stage.is-static { height: auto; }
.hero-stage.is-static .hero { position: relative; height: auto; min-height: min(82vh, 720px); }
.hero-stage.is-static .hero-photo { display: none; }
/* окружности продолжаются за первый экран — обрезает их только край страницы */
.hero-rings { position: absolute; z-index: 0; inset: -80px 0 0; pointer-events: none; }
.hero-rings span {
  position: absolute;
  width: 846px;
  height: 846px;
  border: 1px solid var(--ring);
  border-radius: 50%;
}
.hero-rings span {
  /* --rx / --ry разводят окружности по мере раскадровки */
  transform: translate3d(calc(var(--rx, 0px) * var(--split, 0)), calc(var(--ry, 0px) * var(--split, 0)), 0);
}

.hero-rings span:nth-child(1) { top: -60px; left: 21%; --rx: -17vw; --ry: -5vh; }
.hero-rings span:nth-child(2) { top: -300px; left: 44%; --rx: 24vw; --ry: 14vh; }
.hero-rings span:nth-child(3) { top: 170px; left: -22%; --rx: -20vw; --ry: 7vh; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(900px, 100%);
  flex-direction: column;
  align-items: center;
}
/* Подпись вынесена из потока, иначе она утягивала заголовок от центра экрана. */
.hero-titles { position: relative; display: inline-flex; align-items: flex-start; }
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 6.6vw, 94px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.04;
  text-align: left;
  text-transform: uppercase;
}
/* Перелив живёт на каждом слове отдельно: при разъезде слов маска
   background-clip: text у общего h1 осталась бы на старом месте. */
.hero h1 > span > span {
  display: block;
  background: linear-gradient(103deg, #f9c8b5 0%, #f4d3c6 28%, #e6dfe4 62%, #d3d5dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .is-out { padding-left: .62em; }
.hero-note {
  position: absolute;
  top: clamp(18px, 3vw, 44px);
  left: 100%;
  margin: 0;
  padding-left: clamp(12px, 2.2vw, 28px);
  color: var(--sand);
  font-family: var(--script);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  transform: rotate(-3deg);
}
.hero-copy { margin: clamp(58px, 7.4vw, 96px) 0 0; }
.hero .button { margin-top: clamp(16px, 2vw, 24px); }

/* ── Раскадровка первого экрана ─────────────────── */

/* Растворяется только подпись «Проект Яны Малковой».
   Лид и кнопка стоят на месте — фото проплывает поверх них. */
.hero-note {
  opacity: calc(1 - var(--fade));
  /* у подписи свой наклон — его нельзя потерять в transform */
  transform: rotate(-3deg) translate3d(0, calc(-18px * var(--fade)), 0);
}

.hero-stage.is-cleared .hero-note { visibility: hidden; }

/* Лид и кнопка — верхний слой: фото проплывает под ними. */
.hero-copy,
.hero .button { position: relative; z-index: 4; }

/* Слова разъезжаются и встают слоями вокруг фото:
   «вдох» — поверх картинки, «выдох» — под ней. */
.hero h1 > span {
  position: relative;
  display: block;
  /* маска строки для вступления; поля с запасом — выносные элементы
     заголовочного шрифта выходят за строку */
  overflow: hidden;
  padding-block: .16em;
  margin-block: -.16em;
  transform: translate3d(calc(var(--tx, 0em) * var(--split)), 0, 0);
}

/* Кадр закрывает ровно половину крайней буквы: у «вдоха» — «х», у
   «выдоха» — «В» (обе ~.64em, отсюда .33em нахлёста). Слагаемые в em
   снимают исходный сдвиг слова от центра строки: «вдох» стоит по её
   левому краю, «выдох» — с отбивкой .62em.
   min/max не дают слову уехать за край экрана: когда места не хватает,
   слово тормозит у поля в 14px и заходит на кадр глубже. */
.hero h1 .is-in {
  z-index: 3;
  --tx: max(calc(var(--photo-w) * -.5 - .21em), calc((100vw - 4.2em) / -2 + 14px));
}
.hero h1 .is-out {
  z-index: 1;
  --tx: min(calc(var(--photo-w) * .5 + 1.15em), calc((100vw - 4.2em) / 2 - 14px));
}

.hero-photo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--photo-w);
  margin: 0;
  aspect-ratio: 1;
  border-radius: 8px;
  opacity: var(--rise);
  overflow: hidden;
  /* пока фото не приплыло, оно не должно перехватывать курсор у текста */
  pointer-events: none;
  /* -15vh поднимает кадр выше центра — фото встаёт между словами,
     а лид остаётся под нижним краем кадра */
  transform: translate(-50%, -50%) translateY(calc(84vh * (1 - var(--rise)) - 15vh)) scale(calc(.94 + .06 * var(--rise)))
    /* наклон за курсором: --tilt-x / --tilt-y ставит ui.js */
    perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

.hero-photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ниже 582px кегль 52px и кадр 212px перестают помещаться в строку
   вместе с разъездом слов. Двигать сами слова некуда — уменьшаем кадр
   и заголовок, тогда композиция с половиной буквы держится и на телефоне. */
@media (max-width: 580px) {
  .hero-stage { --photo-w: clamp(100px, 29vw, 196px); }
  .hero h1 { font-size: clamp(26px, 8.9vw, 52px); }
}

/* ── Параллакс за курсором ──────────────────────────
   Элементы первого экрана тянутся к курсору. Здесь только паспорт
   каждого слоя: --pull — насколько сдвигается (px, не больше 15),
   --lag — за сколько примерно догоняет курсор (с). Движение считает
   ui.js пружиной в requestAnimationFrame и пишет в свойство translate:
   оно складывается с transform раскадровки и вступления.
   Двигаем слова, а не весь h1: translate на h1 создал бы свой слой,
   и «вдох» ушёл бы под фото. */
.hero-petal { --pull: 15; --lag: 1.5; }
.hero-rings span { --pull: 8; --lag: 1.8; }
.hero-rings span:nth-child(2) { --pull: 11; --lag: 1.3; }
.hero-note { --pull: 12; --lag: 1.1; }
.hero h1 .is-in { --pull: 9; --lag: .9; }
.hero h1 .is-out { --pull: 10; --lag: 1.15; }
.hero-copy { --pull: 6; --lag: .8; }
.hero .button { --pull: 5; --lag: .7; }

/* ── Вступление: элементы выходят по очереди, вся сцена — 1 секунда ──
   0.00 «вдох выдох» поднимается из-под маски строки
   0.22 лид проявляется по букве
   0.56 кнопка всплывает снизу
   0.68 подпись «Проект Яны Малковой» проступает
   0.30 лепестки приезжают с левого и правого краёв (до 0.98)      */

.is-intro .hero h1 > span > span {
  animation: hero-line-up .46s cubic-bezier(.22, 1, .36, 1) backwards;
}

.is-intro .hero h1 .is-out > span { animation-delay: .08s; }

/* Запасной вариант: если разбивка по буквам не случилась, лид
   проявляется целиком в том же окне времени. */
.is-intro .hero-copy { animation: hero-rise-in .34s ease .22s backwards; }

.is-intro .hero-copy.is-lettered { animation: none; }

.is-intro .hero-copy.is-lettered .ch {
  animation: hero-char-in .24s ease backwards;
  animation-delay: calc(.22s + var(--i) * 5ms);
}

.is-intro .hero .button { animation: hero-rise-in .3s cubic-bezier(.22, 1, .36, 1) .56s backwards; }

/* у подписи свой наклон, поэтому проявляем только прозрачностью */
.is-intro .hero-note { animation: hero-note-in .28s ease .68s backwards; }

.is-intro .hero-petal--left { animation: petal-in-left .68s cubic-bezier(.22, 1, .36, 1) .3s backwards; }
.is-intro .hero-petal--right { animation: petal-in-right .68s cubic-bezier(.22, 1, .36, 1) .3s backwards; }

.hero-copy .w { display: inline-block; white-space: nowrap; }
.hero-copy .ch { display: inline-block; }

@keyframes hero-line-up {
  from { transform: translateY(110%); }
}

@keyframes hero-rise-in {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes hero-char-in {
  from { opacity: 0; transform: translateY(7px); }
}

@keyframes hero-note-in {
  from { opacity: 0; }
}

@keyframes petal-in-left {
  from { opacity: 0; transform: translate3d(calc(var(--shift) - 60vw), 0, 0); }
}

@keyframes petal-in-right {
  from { opacity: 0; transform: translate3d(calc(var(--shift) + 60vw), 0, 0); }
}

/* ── Секции ────────────────────────────────────── */

.section {
  position: relative;
  width: var(--page);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 116px) 0;
}
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(38px, 5vw, 60px);
  text-align: center;
}
.section-heading > div { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 18px; }
.section-foot { display: flex; justify-content: center; margin-top: 34px; }
.section-foot--pair { flex-wrap: wrap; gap: 14px; }
.section-foot--pair:has(.button--social) { gap: 18px; }
/* Кнопки соцсетей: крупнее обычных, с логотипом площадки слева.
   Логотип в currentColor — при наведении темнеет вместе с текстом. */
.button--social {
  min-height: 60px;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 28px 14px 24px;
  font-size: 17px;
}
.social-icon { width: 24px; height: 24px; flex: 0 0 24px; }
@media (max-width: 520px) {
  .button--social { min-height: 54px; width: 100%; justify-content: center; font-size: 16px; }
}

/* ── Telegram: орбита-коллаж ───────────────────── */

.telegram-section {
  display: flex;
  padding: clamp(56px, 7vw, 110px) 0;
  align-items: center;
  justify-content: center;
}
.telegram-stage {
  position: relative;
  width: var(--page);
  max-width: 1168px;
  aspect-ratio: 1168 / 660;
}
.telegram-orbit { position: absolute; inset: 0; }
.telegram-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 21.9%;
  opacity: 0;
  translate: -50% -50%;
  transform: translate3d(0, 0, 0) scale(.25);
  transform-origin: center;
  backface-visibility: hidden;
  contain: layout style;
  will-change: transform, opacity;
}
.telegram-media {
  overflow: hidden;
  border-radius: 10px;
  /* Плитка и картинка внутри анимируются, поэтому уходят в отдельные слои,
     а туда overflow со скруглением не достаёт. clip-path режет по слоям. */
  clip-path: inset(0 round 10px);
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.telegram-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  transform: scale(1.15);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  user-select: none;
}
.telegram-tile:hover { z-index: 20; }
.telegram-tile:hover .telegram-media { transform: scale(1.4); }
.telegram-tile:hover .telegram-media img { transform: scale(1); }
.telegram-copy {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: 470px;
  max-width: 46%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px)) scale(.96);
}
.telegram-copy p {
  margin: 0;
  font-size: clamp(18px, 2.92vw, 42px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.16;
  white-space: nowrap;
}
.telegram-copy strong {
  /* в Figma «10 лет» набрано строчными заголовочным шрифтом, без капса */
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
.telegram-copy .text-link { margin-top: 18px; font-size: clamp(13px, 1.5vw, 22px); }
.telegram-copy .text-link {
  position: relative;
  padding-bottom: 0;
  border-bottom: 0;
  transition: none;
}
/* как в меню: линия выезжает слева на наведении */
.telegram-copy .text-link::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--peach);
  content: "";
  transition: width .26s cubic-bezier(.16, 1, .3, 1);
}
.telegram-copy .text-link:hover { opacity: 1; transform: none; }
.telegram-copy .text-link:hover::after,
.telegram-copy .text-link:focus-visible::after { width: 100%; }
.telegram-stage.is-revealed .telegram-copy {
  animation: telegram-copy-in .9s cubic-bezier(.16, 1, .3, 1) .99s both;
}
@keyframes telegram-copy-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Город и афиша ─────────────────────────────── */

.city-section { overflow: hidden; overflow: clip; }
.afisha-stage {
  position: relative;
  margin-bottom: clamp(30px, 4vw, 48px);
  padding-top: clamp(30px, 4vw, 56px);
}
.afisha-watermark {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 104vw;
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--display);
  font-size: clamp(88px, 19vw, 280px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: .86;
  text-align: center;
  text-transform: uppercase;
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
}
.city-inner { position: relative; z-index: 1; }
.city-shot {
  position: relative;
  z-index: 1;
  width: min(325px, 72vw);
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 325 / 270;
}
.city-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.city-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(18px, 4vw, 64px);
  margin: 0 0 clamp(28px, 3.6vw, 44px);
}
.city-tabs button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 400 clamp(22px, 2.9vw, 42px)/1.2 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.city-tabs button:hover { color: var(--paper); }
.city-tabs button[aria-selected="true"] { color: var(--peach); }
.city-content { display: grid; grid-template-columns: minmax(0, 1fr); }
.events { border-top: 1px solid var(--line-strong); }
.event {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}
.event-date { color: var(--peach); font-family: var(--display); font-size: 22px; line-height: 1.08; text-transform: uppercase; }
.event-name b {
  display: block;
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.08;
  text-transform: uppercase;
}
.event-name small { display: block; margin-top: 8px; color: var(--peach); opacity: .8; font-size: 12px; }
a.event { padding: 22px 0; color: inherit; text-decoration: none; }
a.event .event-name b { transition: color .25s ease; }
a.event:is(:hover, :focus-visible) .event-name b { color: var(--peach); }
.event-desc { display: block; max-width: 720px; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Приглашение в афишу: отдельным блоком под списком событий. */
.afisha-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}

.afisha-cta-copy {
  max-width: 420px;
  margin: 0;
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1.55;
}

/* Время и дресс-код — одной строкой, чтобы поле не висело в половине сетки. */
.afisha-modal .lead-modal-fields input[name="schedule"] { grid-column: 1 / -1; }

/* Заголовок попапа переносится на две строки — строкам нужен воздух. */
.afisha-modal .lead-modal-body .display { line-height: 1.22; }

/* Ссылка на бренд длиннее остальных полей — отдаём ей всю строку. */
#brand-modal .lead-modal-fields input[name="link"] { grid-column: 1 / -1; }

/* Карточка «Добавьте свой бренд» стала кнопкой — снимаем браузерные умолчания. */
.brand-card--add {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ── Медиа ─────────────────────────────────────── */

.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 28px); }
.media-card { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.media-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 408 / 230;
  object-fit: cover;
  background: #191512;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
/* clip-path дублирует скругление: при увеличении обложка уходит в свой слой,
   и одного overflow с border-radius Safari не хватает. */
.media-card-shot { display: block; overflow: hidden; border-radius: 8px; clip-path: inset(0 round 8px); }
.media-card:hover .media-cover { transform: scale(1.05); }
.media-card-copy { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.media-card-copy b { font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; letter-spacing: -.01em; }
.media-card-copy small { color: var(--faint); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
/* Появление: обложки по очереди выплывают снизу из прозрачности,
   подпись проявляется следом. Класс is-reveal ставит ui.js — без JS
   карточки видны сразу. Задержку каждой карточки задаёт --d. */
.media-grid.is-reveal .media-card-shot {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity .8s ease var(--d, 0s), transform 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.media-grid.is-reveal .media-card-copy {
  opacity: 0;
  transition: opacity .7s ease calc(var(--d, 0s) + .35s);
}
.media-grid.is-reveal .media-card.is-in .media-card-shot { opacity: 1; transform: none; }
.media-grid.is-reveal .media-card.is-in .media-card-copy { opacity: 1; }

/* ── Продукты ──────────────────────────────────── */

/*
  Секция-карусель: капсула залипает по центру экрана, а её содержимое
  перелистывается по мере прокрутки. Ширина капсулы задана одной переменной,
  от неё же считается кегль заголовка — так пропорция «заголовок шире капсулы»
  держится и на низких экранах, где капсулу приходится ужимать по высоте.
*/
.product-section {
  --cap: min(800px, 50vw, calc((100svh - 90px) * 5 / 7));
  padding-block: clamp(40px, 6vw, 90px);
}
.product-track { position: relative; }
.product-sticky { position: relative; }
.product-hero {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  justify-items: center;
}
.product-arch {
  /* Пропорция задана жёстко, иначе капсула плющилась в круг,
     когда текст внутри переносился в меньшее число строк. */
  display: none;
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--cap);
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(207, 207, 207, .22);
  border-radius: 999px;
  translate: -50% -50%;
  pointer-events: none;
}
.product-slides { display: grid; width: 100%; justify-items: center; }
.product-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 28px);
  text-align: center;
}
.product-slide h3 {
  color: var(--peach);
  /* Заголовок намеренно шире капсулы и ложится поверх неё. */
  font-size: clamp(25px, calc(var(--cap) * .116), 96px);
  line-height: .98;
}
.product-slide p { margin: 0; }
.product-slide-desc { max-width: min(520px, calc(var(--cap) * .74)); }
/* Если цены нет, воздух перед кнопкой берёт на себя она сама. */
.product-slide-desc + .product-slide-cta { margin-top: clamp(24px, calc(var(--cap) * .14), 120px); }
.price { font-size: 12px; letter-spacing: .04em; }
/* Селектор с .product-slide — иначе обнуляющее `p { margin: 0 }` выше
   перебивало бы этот отступ по специфичности. */
.product-slide .product-price {
  margin-top: clamp(24px, calc(var(--cap) * .14), 120px);
  font-size: clamp(30px, calc(var(--cap) * .086), 62px);
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1;
}

/* Маска строки: текст уезжает за её край и пропадает.
   Поля с запасом — выносные элементы выходят за строку. */
.mask {
  display: block;
  overflow: hidden;
  padding-block: .16em;
  margin-block: -.16em;
}
.mask > span { display: block; }

/* Чёрточки-индикатор: без них после отказа от полки непонятно,
   что за первым продуктом есть ещё четыре. */
.product-dots {
  display: none;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  translate: 0 -50%;
}
.product-dot {
  width: 18px;
  height: 1px;
  background: var(--line-strong);
  transition: width .45s cubic-bezier(.22, 1, .36, 1), background .4s ease;
}
.product-dot.is-on { width: 32px; background: var(--peach); }

/* Режим карусели включает JS: без него слайды просто идут списком. */
.product-section.is-carousel .product-arch,
.product-section.is-carousel .product-dots { display: flex; }
.product-section.is-carousel {
  /* на последний экран трека клуб наезжает карточкой — см. ниже */
  --cover: 100svh;
  padding-bottom: 0;
}
.product-section.is-carousel .product-track {
  height: calc(100svh + (var(--slides, 1) - 1) * 88svh + var(--cover));
}
.product-section.is-carousel .product-sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  /* --cover-p (0…1) ставит ui.js, пока клуб наезжает: экран с
     продуктами отъезжает вглубь на 20% и темнеет */
  --cover-p: 0;
  transform: scale(calc(1 - .2 * var(--cover-p)));
  transform-origin: 50% 50%;
}
/* Подложка во всю ширину окна — чтобы уменьшалась именно карточка
   экрана, а не только текст. Тень вокруг гасит открывшийся фон. */
.product-section.is-carousel .product-sticky::before,
.product-section.is-carousel .product-sticky::after {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  border-radius: calc(28px * var(--cover-p));
  content: "";
  pointer-events: none;
}
.product-section.is-carousel .product-sticky::before {
  z-index: -1;
  background: var(--ink);
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, calc(.7 * var(--cover-p)));
}
.product-section.is-carousel .product-sticky::after {
  z-index: 5;
  background: #000;
  opacity: calc(.4 * var(--cover-p));
}
/* Клуб выезжает снизу и ложится поверх продуктов карточкой. */
.product-section.is-carousel + .club-track {
  z-index: 2;
  margin-top: calc(-1 * var(--cover, 100svh));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .35);
  overflow: clip;
}
.product-section.is-carousel .product-slide { grid-area: 1 / 1; align-self: center; }
.product-section:not(.is-carousel) .product-slides { gap: clamp(60px, 8vw, 110px); }

.product-section.is-carousel .product-slide .mask > span,
.product-section.is-carousel .product-slide-cta {
  display: block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform .62s cubic-bezier(.22, 1, .36, 1), opacity .38s ease;
}
/* Строки трогаются не разом, а лесенкой сверху вниз.
   Раскладка по времени та же, что на первом экране, вся сцена — 1 секунда:
   0.00 заголовок выходит из-под маски (вторая строка с 0.08)
   0.22 описание проявляется по букве
   0.40 цена
   0.56 кнопка                                                        */
/* Префикс .product-section.is-carousel обязателен: без него шорткат
   transition выше перебивает задержки по специфичности и лесенки нет. */
.product-section.is-carousel .product-slide h3 .mask:nth-child(2) > span { transition-delay: .08s; }
.product-section.is-carousel .product-slide .product-price .mask > span { transition-delay: .4s; }
.product-section.is-carousel .product-slide .product-slide-cta { transition-delay: .56s; }

/* Заголовок поднимается чистой маской, без затухания — как «вдох выдох».
   Прозрачность ему не нужна: строку и так обрезает маска. */
.product-section.is-carousel .product-slide h3 .mask > span {
  opacity: 1;
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
}

.product-section.is-carousel .product-slide .product-price .mask > span {
  transition-duration: .46s, .32s;
}

.product-section.is-carousel .product-slide .product-slide-cta { transition-duration: .34s, .28s; }

/* Описание набирается по букве — тем же шагом, что лид на первом экране.
   Строка целиком больше не едет, поэтому маску для неё отключаем. */
.product-slide-desc.is-lettered .mask { overflow: visible; }

.product-section.is-carousel .product-slide-desc.is-lettered .mask > span {
  opacity: 1;
  transform: none;
  transition: none;
}

.product-slide-desc .w { display: inline-block; white-space: nowrap; }

.product-section.is-carousel .product-slide-desc.is-lettered .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .24s ease, transform .24s ease;
}

.product-section.is-carousel .product-slide.is-active .product-slide-desc.is-lettered .ch {
  opacity: 1;
  transform: none;
  transition-delay: calc(.22s + var(--i) * 4ms);
}

/* Уходящий слайд убирает буквы быстрее, чем набирал, иначе хвост
   описания тянется за следующим слайдом. */
.product-section.is-carousel .product-slide.is-leaving .product-slide-desc.is-lettered .ch {
  opacity: 0;
  transform: translateY(7px);
  transition-delay: calc(var(--i) * 2ms);
}

.product-section.is-carousel .product-slide:not(.is-active):not(.is-leaving) .product-slide-desc.is-lettered .ch {
  transition: none;
}

.product-section.is-carousel .product-slide.is-active .mask > span,
.product-section.is-carousel .product-slide.is-active .product-slide-cta {
  opacity: 1;
  transform: none;
}
/* Уходящий слайд уезжает вверх, следующий выходит снизу из-под маски —
   то же движение, что у «вдох выдох» на первом экране. */
.product-section.is-carousel .product-slide.is-leaving .mask > span,
.product-section.is-carousel .product-slide.is-leaving .product-slide-cta {
  opacity: 0;
  transform: translateY(-110%);
}
.product-section.is-carousel .product-slide:not(.is-active):not(.is-leaving) .mask > span,
.product-section.is-carousel .product-slide:not(.is-active):not(.is-leaving) .product-slide-cta {
  opacity: 0;
  transform: translateY(110%);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .product-section.is-carousel .product-slide .mask > span,
  .product-section.is-carousel .product-slide-desc.is-lettered .ch,
  .product-section.is-carousel .product-slide-cta { transition-duration: .001s; transition-delay: 0s; }
}


/* ── Клуб ──────────────────────────────────────── */

/* ── Клуб ──────────────────────────────────────── */

/*
  Светлая врезка посреди тёмной страницы. Сцена залипает на всю высоту
  экрана, а карточки снимаются со стопки по мере прокрутки: трек выше
  экрана ровно настолько, сколько нужно на переходы между картами.
  Без JS (и при reduce motion) класс is-deck не ставится — тогда трек
  обычной высоты, а карточки просто лежат в ряд.
*/
.club-track {
  --club-cards: 3;
  --club-step: 78vh;
  position: relative;
  background: var(--milk);
  color: var(--ink);
}

.club-track.is-deck { height: calc(100vh + var(--club-step) * (var(--club-cards) - 1)); }

.club-stage { padding: clamp(64px, 8vw, 104px) 0; }

.club-track.is-deck .club-stage {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  /* Шапка залипает поверх сцены, поэтому центрируем содержимое не по
     всему экрану, а по видимой части под ней. Высоту шапки measures ui.js. */
  padding: var(--header-h, 0px) 0 0;
  align-items: center;
  overflow: hidden;
}

.club-inner {
  display: grid;
  width: var(--page);
  margin-inline: auto;
  gap: clamp(36px, 6vw, 88px);
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 34vw, 460px));
  align-items: center;
}

.club-copy .eyebrow { color: rgba(27, 23, 19, .52); }

.club-copy h2 {
  margin-top: 18px;
  max-width: 16ch;
  color: var(--ink);
  font-size: clamp(30px, 4.4vw, 62px);
}

.club-copy p {
  max-width: 44ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  color: rgba(27, 23, 19, .68);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.62;
}

.club-copy .button { margin-top: clamp(26px, 3vw, 38px); color: var(--paper); }
.club-copy .button-bg {
  border-color: transparent;
  background: var(--ink);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .45s ease, border-color .45s ease;
}
/* При наведении тёмная кнопка становится светлой, как остальные: текст
   темнеет, а тёмный фон уходит — иначе он торчит чёрной рамкой по краю. */
.club-copy .button:not([disabled]):hover,
.club-copy .button:not([disabled]):focus-visible { color: var(--ink); }
.club-copy .button:not([disabled]):hover .button-bg,
.club-copy .button:not([disabled]):focus-visible .button-bg {
  border-color: rgba(27, 23, 19, .16);
  background-color: transparent;
}

/* ── Стопка карточек ───────────────────────────── */

.club-deck { position: relative; aspect-ratio: 1 / 1; }
/* Карта улетает вверх за край сцены — начало движения видно, хвост срезается. */
.club-track.is-deck .club-card { transform-origin: 50% 50%; }

.club-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--ink-soft);
}

/* В стопке карты лежат одна на другой; в обычном потоке — просто в ряд. */
.club-track.is-deck .club-card {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.club-card img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 23, 19, 0) 42%, rgba(27, 23, 19, .78) 100%);
  content: "";
}

.club-card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  padding: clamp(18px, 2vw, 26px);
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.club-card h3 {
  max-width: 11ch;
  color: var(--paper);
  font-size: clamp(19px, 1.9vw, 27px);
  text-transform: uppercase;
}

.club-card .round-arrow { flex: none; border-color: rgba(255, 255, 255, .5); color: var(--paper); }

@media (max-width: 900px) {
  /*
    Порядок сверху вниз: текст, стопка карточек, кнопка. Кнопка лежит
    внутри .club-copy, поэтому колонку собираем флексом, а саму .club-copy
    распускаем через display: contents — её дети становятся элементами
    колонки и расставляются по order. Отступы задаём полями самих
    элементов, а не gap: между строчками текста воздух нужен разный.
  */
  .club-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* В колонке всё выравниваем по центру: текст, карточка и кнопка
     стоят по одной оси, иначе блок разъезжается. */
  .club-copy { display: contents; }
  .club-copy .eyebrow { order: 1; text-align: center; }
  .club-copy h2 { order: 2; max-width: none; font-size: clamp(26px, 7.4vw, 40px); text-align: center; }
  .club-copy p { order: 3; font-size: 13px; text-align: center; }

  /* Карточка считается от высоты экрана: вся колонка должна уместиться
     между шапкой и низом сцены, иначе кнопку срежет по краю блока. */
  .club-deck {
    order: 4;
    width: min(86vw, 34vh);
    align-self: center;
    margin-top: clamp(32px, 6vw, 52px);
  }

  /* Нижние карты стопки выглядывают из-под верхней — кнопке нужен запас. */
  .club-copy .button {
    order: 5;
    align-self: center;
    margin-top: clamp(56px, 11vw, 84px);
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  /* Совсем низкий экран: текст ужимаем до заголовка и кнопки. */
  .club-copy p { display: none; }
}

@media (max-width: 900px) and (max-height: 700px) {
  /* Совсем низкий экран: текст ужимаем до заголовка и кнопки. */
  .club-copy p { display: none; }
}

/* ── Услуги ────────────────────────────────────── */

.services-list { border-top: 1px solid var(--line-strong); }
.service-row {
  display: grid;
  min-height: 118px;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr) auto;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: padding .22s ease;
}
.service-row:hover { padding-left: 10px; }
.service-title {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 29px);
  letter-spacing: .015em;
  line-height: 1.08;
  text-transform: uppercase;
  transition: color .2s ease;
}
.service-row:hover .service-title { color: var(--peach); }
.service-desc { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ── Кейсы ─────────────────────────────────────── */

.cases-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-template-rows: 262px 262px;
  gap: 14px;
}
.case-card {
  position: relative;
  display: flex;
  padding: 22px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  transition: border-color .2s ease;
}
.case-card:first-child { grid-row: span 2; }
/* Кейсов четыре: большой слева на две строки, две карточки справа сверху,
   последняя растягивается на оставшиеся колонки — иначе справа снизу дыра.
   :last-child здесь страховка: станет кейсов пять — правило отключится
   и сетка заполнится сама, без пустот. */
.case-card:nth-child(4):last-child { grid-column: span 2; }
.case-card img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.case-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 23, 19, .45) 0%, rgba(27, 23, 19, .2) 38%, rgba(27, 23, 19, .86) 78%, rgba(27, 23, 19, .97) 100%);
  content: "";
}
.case-card > *:not(img) { position: relative; z-index: 2; }
.case-card:hover { border-color: var(--line-strong); }
.case-card:hover img { opacity: .68; transform: scale(1.06); }
.case-caption b {
  display: block;
  margin-bottom: 4px;
  color: var(--peach);
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.08;
  text-transform: uppercase;
}
.case-caption small { color: var(--faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.case-top { display: flex; justify-content: flex-end; }

/* ── Заявка ────────────────────────────────────── */

.newsletter {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 110px) 0;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 8vw, 100px);
}
.newsletter h2 { margin-top: 18px; font-size: clamp(30px, 4vw, 52px); }
.newsletter p { max-width: 400px; color: var(--muted); }
.lead-form { display: grid; margin-top: 30px; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.lead-form input:not([type="checkbox"]), .lead-form textarea {
  width: 100%;
  min-height: 43px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--paper);
  font: 400 14px var(--sans);
}
.lead-form textarea {
  min-height: 72px;
  padding-top: 6px;
  line-height: 1.5;
  resize: vertical;
}
.lead-form :is(input:not([type="checkbox"]), textarea)::placeholder { color: var(--faint); }
.lead-form :is(input:not([type="checkbox"]), textarea):focus { border-bottom-color: var(--peach); }
.lead-form .form-wide { grid-column: 1 / -1; }
.lead-form button.form-wide { justify-self: start; }
/* Согласие — отдельной строкой прямо над кнопкой, с обычным флажком. */
.lead-form .consent { align-items: center; margin-top: 4px; }
.lead-form .consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  cursor: pointer;
}
.form-status { min-height: 18px; margin: 14px 0 0; color: var(--peach); font-size: 11px; }

/* ── Подвал ────────────────────────────────────── */

footer { padding-top: 10px; }
.footer-inner {
  display: grid;
  width: var(--page);
  margin: 0 auto;
  padding: 36px 0 30px;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.footer-brand img { display: block; width: 107px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; align-content: start; gap: 10px 18px; font-size: 12px; }
.footer-links a:hover { color: var(--peach); }
.footer-note { color: var(--faint); font-size: 10px; line-height: 1.8; text-align: right; }
.footer-note a:hover { color: var(--peach); }

/* ── Служебное ─────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Адаптив ───────────────────────────────────── */

@media (max-width: 1080px) {
  /* орбита сужается — плитки нужно уменьшить, иначе наезжают друг на друга */
  .telegram-tile { width: 18%; }
}

@media (max-width: 860px) {
  :root { --page: min(100% - 40px, 1280px); }
  .site-header { padding: 18px 0; }
  .site-header-inner { grid-template-columns: 40px 1fr 40px; align-items: center; gap: 12px 0; }
  .burger { display: grid; order: 1; }
  .brand { order: 2; justify-self: center; }

  /* Обе группы ссылок встают друг под другом и раскрываются по кнопке. */
  .main-nav {
    display: grid;
    order: 3;
    grid-column: 1 / -1;
    max-height: 0;
    gap: 0;
    overflow: hidden;
    font-size: 15px;
    letter-spacing: .08em;
    opacity: 0;
    transition: max-height .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
  }
  .main-nav--end { order: 4; justify-content: stretch; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }

  .site-header.is-open .main-nav { max-height: 260px; opacity: 1; }
  .site-header.is-open .main-nav:first-of-type { margin-top: 6px; }

  .hero-rings span { width: 620px; height: 620px; }
  /* заголовок остаётся лесенкой, по центру выравнивается только блок */
  .hero-titles { flex-direction: column; align-items: center; }
  .hero-note { position: static; padding: 14px 0 0; text-align: center; }
  .media-grid { max-width: 440px; margin-inline: auto; grid-template-columns: 1fr; }
  .telegram-tile { width: 16.2%; }
  .club { grid-template-columns: minmax(0, 1fr); }
  h2, .h2-look { font-size: clamp(27px, 7.4vw, 45px); }
  .service-row { grid-template-columns: 1fr auto; gap: 14px; padding: 22px 0; }
  .service-desc { display: none; }
  .cases-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 200px 200px; }
  .case-card:first-child { grid-column: span 2; grid-row: auto; }
  /* в двух колонках span 2 — это вся ширина: широкая полоса снизу */
  .case-card:nth-child(4):last-child { grid-column: span 2; }
  .newsletter { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-note { text-align: left; }
}

@media (max-width: 520px) {
  h2, .h2-look { font-size: clamp(21px, 6.3vw, 31px); }
  .telegram-stage { aspect-ratio: 1 / 1; }
  .telegram-tile { width: 24%; }
  .telegram-copy { max-width: 80%; }
  .telegram-copy p { font-size: clamp(14px, 5.4vw, 24px); }
  .event { grid-template-columns: 66px 1fr; gap: 12px; }
  .event .round-arrow { display: none; }
  .cases-grid { grid-template-columns: 1fr; grid-template-rows: 250px repeat(3, 180px); }
  .case-card:first-child { grid-column: auto; }
  /* в одной колонке span 2 создал бы лишнюю колонку — снимаем */
  .case-card:nth-child(4):last-child { grid-column: auto; }
  .lead-form { grid-template-columns: 1fr; }
  /* На телефоне капсулу считаем от ширины экрана, иначе она выродится в полоску. */
  .product-section { --cap: min(340px, 90vw); }
  .product-slide h3 { font-size: clamp(18px, 6vw, 26px); }
  .product-slide-desc { max-width: min(268px, 74vw); }
  /* Сбоку чёрточки легли бы прямо на контур капсулы — уводим их под неё. */
  .product-dots {
    top: auto;
    right: auto;
    bottom: clamp(24px, 6vh, 56px);
    left: 50%;
    flex-direction: row;
    translate: -50% 0;
  }
}

/* ── Внутренние страницы ───────────────────────────── */

main > .section:first-child {
  padding-top: clamp(40px, 5vw, 72px);
}

/* ── Анкета клуба ──────────────────────────────────── */

.anketa {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 110px);
}

.anketa-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(34px, 4vw, 52px);
  text-align: center;
}

.anketa-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.anketa-progress span {
  width: 34px;
  height: 2px;
  background: var(--line);
  transition: background-color .3s ease;
}

.anketa-progress span.is-done { background: var(--peach); }

.anketa-step-label {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.anketa-step { display: none; }
.anketa-step.is-current { display: block; }

.anketa-step > h2 {
  margin-bottom: clamp(26px, 3vw, 38px);
  font-size: clamp(24px, 3.4vw, 42px);
  text-align: center;
}

.field { margin-bottom: 30px; }

.field > label,
.field > legend,
.field-title {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  color: var(--paper);
  font-size: 14px;
  line-height: 1.4;
}

.field-hint {
  display: block;
  margin: -6px 0 12px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}

.field .req { color: var(--peach); }

.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  min-height: 43px;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--paper);
  font: 400 14px var(--sans);
}

.field textarea {
  min-height: 84px;
  padding-top: 6px;
  line-height: 1.5;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }

.field :is(input, textarea, select):focus { border-bottom-color: var(--peach); }

.field fieldset { margin: 0; padding: 0; border: 0; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }

.choice {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: var(--paper); color: var(--paper); }

.choice:has(input:checked) {
  border-color: var(--peach);
  background: var(--peach);
  color: #17120f;
}

.choice:has(input:focus-visible) { outline: 2px solid var(--peach); outline-offset: 3px; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.consent input { margin-top: 3px; accent-color: var(--peach); }
/* Фирменный флажок: светло-коричневый внутри, телесная рамка.
   Отмечен — весь телесный, галочка цвета фона (коричневая). */
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid var(--peach);
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #4a3c33 center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.consent input[type="checkbox"]:checked {
  background-color: var(--peach);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' stroke='%231b1713' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.consent a { border-bottom: 1px solid var(--peach); color: var(--peach); }

.anketa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.anketa-error {
  min-height: 18px;
  margin: 14px 0 0;
  color: var(--peach);
  font-size: 12px;
}

.anketa-done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: clamp(40px, 6vw, 80px) 0;
  text-align: center;
}

.anketa-done.is-current { display: flex; }

@media (max-width: 560px) {
  .anketa-nav { flex-direction: column-reverse; align-items: stretch; }
  .anketa-nav .button { justify-content: center; }
  .anketa-progress span { width: 22px; }
}

.anketa-title {
  color: var(--peach);
  font-size: clamp(26px, 4vw, 48px);
}

/* Поле-ловушка для ботов: люди его не видят и не заполняют. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Каталог брендов ───────────────────────────────── */

.brand-grid {
  display: grid;
  margin-top: clamp(34px, 4vw, 52px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.brand-card {
  display: flex;
  min-height: 210px;
  padding: 26px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: var(--ink);
  transition: background-color .25s ease;
}

.brand-card:hover { background: var(--ink-soft); }

.brand-card h3 {
  margin: 0;
  color: var(--peach);
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.08;
}

.brand-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.brand-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-card--add { background: var(--ink-soft); }

/* Заявка занимает всю строку — сетка остаётся ровной при любом числе марок и фильтре. */
.brand-grid .brand-card--add { grid-column: 1 / -1; min-height: 170px; }
.brand-card--add:hover { background: #342e29; }

a.brand-card { color: inherit; text-decoration: none; }

/* Логотипы марок приходят в разных цветах — приводим все к белому силуэту.
   Каждый вписан в одинаковый фрейм, поэтому текст под ними начинается на одном уровне. */
.brand-card-logo {
  display: flex;
  width: min(100%, 200px);
  height: 64px;
  flex-shrink: 0;
  align-items: center;
}

.brand-card-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: .88;
  transition: opacity .25s ease;
}

.brand-card:hover .brand-card-logo img { opacity: 1; }

.brand-card-logo--text span {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .88;
}

/* Текст идёт сразу за фреймом, а свободное место уходит над подвалом карточки. */
.brand-card-body { margin-top: 10px; }
.brand-grid .brand-card-foot { margin-top: auto; }

.brand-card .brand-card-origin {
  margin: 8px 0 10px;
  color: var(--peach);
  opacity: .8;
}

@media (max-width: 1080px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Лепестки по краям первого экрана ──────────────── */

.hero-petal {
  /* --shift уводит кадр за край экрана, --py двигает его при скролле */
  --shift: 0%;
  --py: 0px;

  position: absolute;
  z-index: 0;
  height: auto;
  /* кадры сняты на чёрном фоне — screen убирает подложку, оставляя лепесток */
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--shift) + var(--exit, 0%) * var(--split, 0)), var(--py), 0);
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.hero-petal--left {
  --shift: -16%;
  --exit: -130%;
  top: 12%;
  left: 0;
  width: clamp(150px, 17vw, 241px);
}

.hero-petal--right {
  --shift: 18%;
  --exit: 135%;
  top: 6%;
  right: 0;
  width: clamp(160px, 18vw, 262px);
}

@media (max-width: 860px) {
  .hero-petal--left { --shift: -46%; width: 30vw; }
  .hero-petal--right { --shift: 48%; width: 32vw; }
}

@media (max-width: 560px) {
  .hero-petal--left { --shift: -70%; width: 38vw; }
  .hero-petal--right { --shift: 72%; width: 40vw; }
}

/* ── Попап заявки на услугу ────────────────────────── */

.service-row {
  width: 100%;
  padding: 0;
  /* у <button> своя рамка и поля по умолчанию — оставляем только нижнюю линию */
  border: 0;
  border-bottom: 1px solid var(--line);
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lead-modal {
  width: min(560px, calc(100% - 32px));
  max-height: 90dvh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--ink-soft);
  color: var(--paper);
}

.lead-modal::backdrop {
  background: rgba(12, 10, 8, .72);
  backdrop-filter: blur(3px);
}

.lead-modal[open] { animation: lead-modal-in .35s cubic-bezier(.16, 1, .3, 1); }

@keyframes lead-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.lead-modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 4vw, 44px);
}

.lead-modal-body .display {
  color: var(--peach);
  font-size: clamp(22px, 3vw, 32px);
}

.lead-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: color .2s ease;
}

.lead-modal-close:hover { color: var(--paper); }

.lead-modal-fields {
  display: grid;
  margin-top: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.lead-modal-fields textarea { grid-column: 1 / -1; }

.lead-modal-fields :is(input, select, textarea) {
  width: 100%;
  min-height: 43px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--paper);
  font: 400 14px var(--sans);
}

.lead-modal-fields textarea {
  min-height: 76px;
  padding-top: 6px;
  line-height: 1.5;
  resize: vertical;
}

.lead-modal-fields :is(input, textarea)::placeholder { color: var(--faint); }
.lead-modal-fields :is(input, select, textarea):focus { border-bottom-color: var(--peach); }

/* Селект набран тем же шрифтом, что и поля; стрелку рисуем сами, потому что
   системная в тёмной карточке выглядит инородно. Пустое значение — плейсхолдер. */
.lead-modal-fields select {
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a29a90' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 10px 6px;
  cursor: pointer;
}

.lead-modal-fields select:invalid { color: var(--faint); }
.lead-modal-fields select option { background: var(--ink); color: var(--paper); }

.lead-modal-status {
  min-height: 18px;
  margin: 0;
  color: var(--peach);
  font-size: 12px;
  line-height: 1.5;
}

.lead-modal .button { align-self: flex-start; }

@media (max-width: 560px) {
  .lead-modal-fields { grid-template-columns: 1fr; }
}

.lead-modal-consent { margin-top: 4px; font-size: 11px; }

/* ── Юридические страницы ──────────────────────────── */

.legal {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 110px);
}

.legal h1 {
  margin: 0 0 clamp(28px, 4vw, 44px);
  color: var(--peach);
  font-size: clamp(24px, 3.4vw, 40px);
}

.legal h2 {
  margin: clamp(32px, 4vw, 48px) 0 16px;
  font-size: clamp(16px, 1.8vw, 21px);
}

.legal p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.legal li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.legal li::before {
  position: absolute;
  left: 0;
  color: var(--peach);
  content: "—";
}

/* ── Отдельные страницы «Услуги», «Продукты», «Контакты» ─────────
   Повторяют блоки главной, но как самостоятельные страницы: сверху
   заголовок (h1 в виде h2), ниже — содержимое раздела. */
.main-nav a[aria-current="page"] { color: var(--peach); }
.main-nav a[aria-current="page"]::after { width: 100%; }

.page-section { padding-top: clamp(48px, 6vw, 88px); }

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 64px);
}
.product-card { display: flex; flex-direction: column; gap: 20px; }
.product-card-shot {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}
.product-card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.product-card:hover .product-card-shot img { transform: scale(1.05); }
.product-card-body { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.product-card-title {
  color: var(--peach);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.05;
}
.product-card-desc { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.product-card-foot {
  display: flex;
  margin-top: auto;
  padding-top: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.product-card-price { font-size: clamp(22px, 2vw, 28px); font-weight: 300; }

.contact-list {
  display: grid;
  max-width: 760px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-top: 1px solid var(--line);
}
.contact-list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list dt {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-top: 5px;
}
.contact-list dd { margin: 0; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.45; }
.contact-list a { color: var(--peach); }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-social {
  display: flex;
  margin-top: clamp(32px, 4vw, 48px);
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
@media (max-width: 520px) {
  .contact-list > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Бутики: карта регионов и список по городам ──────── */

.shops-section { border-top: 1px solid var(--line); }
.shops-section--page { border-top: 0; }

.shops-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 4vw, 48px);
  margin: 0 0 clamp(20px, 2.6vw, 32px);
}
.shops-tabs button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 400 clamp(20px, 2.4vw, 34px)/1.2 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.shops-tabs button:hover { color: var(--paper); }
.shops-tabs button[aria-selected="true"] { color: var(--peach); }

.shops-map-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 880 / 656;
}
.shops-map { display: block; width: 100%; height: 100%; overflow: visible; }

.shops-region path {
  fill: #2f2a26;
  stroke: var(--ink);
  stroke-width: .5;
  stroke-linejoin: round;
  transition: fill .25s ease, fill-opacity .25s ease;
}
.shops-region.has-shops { cursor: pointer; outline: none; }
.shops-region.has-shops path { fill: var(--peach); fill-opacity: var(--level, .6); }
.shops-region.is-hover path { fill: #3a342f; }
.shops-region.has-shops.is-hover path,
.shops-region.has-shops:focus-visible path { fill: var(--paper); fill-opacity: 1; }
.shops-map.has-selection .shops-region.has-shops:not(.is-selected):not(.is-hover) path { fill-opacity: calc(var(--level, .6) * .45); }
.shops-region.is-selected path { fill: var(--lilac); fill-opacity: 1; }

.shops-tip {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: grid;
  width: max-content;
  max-width: min(300px, 90%);
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: rgba(27, 23, 19, .94);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.shops-tip.is-visible { opacity: 1; }
.shops-tip strong {
  color: var(--peach);
  font: 400 18px/1.1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.shops-tip-meta,
.shops-tip-more,
.shops-tip-empty { color: var(--muted); font-size: 12px; line-height: 1.4; }
.shops-tip ul { display: grid; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; }
.shops-tip li span { color: var(--faint); }

.shops-hint {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

.shops-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.shops-filter-title {
  margin: 0;
  color: var(--paper);
  font: 400 clamp(20px, 2.2vw, 28px)/1.1 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.shops-reset,
.shops-more {
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: 500 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.shops-reset:hover,
.shops-more:hover { border-color: var(--peach); background: var(--peach); color: var(--ink); }
.shops-more { display: block; margin: 24px auto 0; }

.shops-select { display: grid; gap: 8px; }
.shops-select select {
  min-width: min(320px, 100%);
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23f9c8b5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--paper);
  font: 400 15px/1.2 var(--sans);
  appearance: none;
  cursor: pointer;
}
.shops-select select:focus-visible { outline: 1px solid var(--peach); outline-offset: 2px; }

.shops-list {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.shops-list:empty { display: none; }

.shop-card {
  display: flex;
  min-width: 0;
  padding: 22px 24px;
  flex-direction: column;
  gap: 8px;
  background: var(--ink);
}
.shop-card h3 {
  color: var(--peach);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.shop-card p { margin: 0; }
.shop-address { color: var(--muted); font-size: 13px; line-height: 1.45; }
.shop-phones { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.shop-phones a:hover,
.shop-links a:hover { color: var(--peach); }
.shop-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 10px;
}
.shop-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.shop-links a { border-bottom: 1px solid var(--line-strong); overflow-wrap: anywhere; }
.shop-rating { color: var(--faint); font-size: 12px; white-space: nowrap; }

.shops-note {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--faint);
  font-size: 12px;
}

@media (max-width: 1080px) {
  .shops-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .shops-list { grid-template-columns: minmax(0, 1fr); }
  .shops-filter-bar { align-items: stretch; flex-direction: column; }
  .shops-select select { width: 100%; }
  .shops-hint { text-align: left; }
}