/* Тема «Мять». Брендбук: чёрно-бело-серая база, тёплые акценты (беж, крем,
   серо-зелёный, графит), острые углы, сетка 8px, лёгкий гротеск.
   Шрифт — Cocomat Pro (Zetafonts), тот же, что на myat.studio: Light, Regular, Medium.
   Файлы лежат на своём сервере (fonts/), как требует веб-лицензия; сама лицензия на домен
   myatbrands.ru должна быть оформлена до снятия замка с сайта. */

@font-face { font-family: "Cocomat Pro"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/CocomatPro-Light.woff2") format("woff2"); }
@font-face { font-family: "Cocomat Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/CocomatPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Cocomat Pro"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/CocomatPro-Medium.woff2") format("woff2"); }

/* Знака рубля (U+20BD) в Cocomat Pro нет — проверено на снимке. Чтобы «₽» не рисовался
   системным шрифтом, берём его из Jost (OFL): правило с unicode-range подставляет только
   этот один символ, остальной текст остаётся в Cocomat Pro. */
@font-face { font-family: "Cocomat Pro"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/jost-latin-ext-300.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Cocomat Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/jost-latin-ext-400.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Cocomat Pro"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/jost-latin-ext-500.woff2") format("woff2"); unicode-range: U+20BD; }

:root {
  --font: "Cocomat Pro", "Helvetica Neue", Arial, sans-serif;
  --black: #0b0b0b;
  --graphite: #2a2c2e;
  --gray: #77777a;
  --line: #dedbd5;
  --paper: #ffffff;
  --cream: #f4f0e9;
  --stone: #e3dccf;
  --sage: #7f8a7e;
  --u: 8px;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--black);
  font-family: var(--font); font-weight: 300; font-size: 19px; line-height: 1.55;
  /* У Cocomat Pro ноль по умолчанию с точкой внутри — в ценах, времени и телефонах это
     читается как украшение. Набор ss01 даёт обычный круглый ноль; заодно меняет латинскую
     «g» на двухэтажную, кириллицу не трогает (сверено по снимку всего алфавита). */
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--gray); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--u) * 3); }
.wrap--narrow { max-width: 760px; }
.muted { color: var(--gray); }

/* ── Шапка ─────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(8px); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--u) * 9); }
.wordmark { font-weight: 500; font-size: 24px; letter-spacing: .34em; text-decoration: none; margin-right: -.34em; }
.wordmark--small { font-size: 18px; }
.site-nav { display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: 16px; letter-spacing: .04em; }
.site-nav a { text-decoration: none; padding: var(--u) 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--black); }
.site-nav .site-nav__cta { border: 1px solid var(--black); padding: calc(var(--u) * 1.25) calc(var(--u) * 3); }
.site-nav .site-nav__cta:hover { background: var(--black); color: var(--paper); }
.nav-toggle, .nav-burger { display: none; }

/* ── Секции ────────────────────────────────────────────────────────── */
.band { padding: calc(var(--u) * 12) 0; border-bottom: 1px solid var(--line); }
.band--hero { padding: calc(var(--u) * 10) 0 calc(var(--u) * 12); }
.band--cream { background: var(--cream); }
.band--dark { background: var(--black); color: var(--paper); border-bottom-color: var(--black); }
.band--dark .muted, .band--dark .eyebrow { color: #a5a5a8; }
.band--dark .btn { border-color: var(--paper); }
.band--dark .btn:hover { background: var(--paper); color: var(--black); }
.band--dark .btn--solid { background: var(--paper); color: var(--black); }
.band--dark .btn--solid:hover { background: transparent; color: var(--paper); }

.eyebrow { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); margin-bottom: calc(var(--u) * 4); }
.display { font-weight: 300; font-size: clamp(44px, 7.4vw, 104px); line-height: 1.02; letter-spacing: -.02em; }
.h2 { font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -.01em; }
.h3 { font-weight: 500; font-size: 21px; line-height: 1.3; letter-spacing: .01em; }
.lead { font-size: clamp(20px, 2vw, 25px); line-height: 1.45; max-width: 34em; margin-top: calc(var(--u) * 5); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 6); align-items: start; margin-bottom: calc(var(--u) * 8); }
.section-head p { max-width: 34em; }

.actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 7); }
/* Пояснение под кнопками: без отступа строка прилипала к ним вплотную. */
.actions + .muted { margin-top: calc(var(--u) * 4); }
.btn { display: inline-block; border: 1px solid var(--black); padding: calc(var(--u) * 2) calc(var(--u) * 4.5); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s; }
.btn:hover { background: var(--black); color: var(--paper); }
.btn--solid { background: var(--black); color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--black); }

/* ── Сетки ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 0; border-top: 1px solid currentColor; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5) 0; }
.cell + .cell { padding-left: calc(var(--u) * 4); border-left: 1px solid var(--line); }
.band--dark .cell + .cell { border-left-color: #333; }
.cell .num { display: block; font-size: 14px; letter-spacing: .2em; color: var(--gray); margin-bottom: calc(var(--u) * 3); }
.cell p { margin-top: calc(var(--u) * 1.5); color: var(--graphite); }
.band--dark .cell p { color: #c9c9cc; }

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.door { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(var(--u) * 34); padding: calc(var(--u) * 4); background: var(--paper); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s; }
.door:hover { border-color: var(--black); }
.door__more { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin-top: calc(var(--u) * 5); }
.door p { margin-top: calc(var(--u) * 2); color: var(--graphite); }

/* ── Цифры ─────────────────────────────────────────────────────────── */
.figure { font-weight: 300; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -.02em; }
.figure small { font-size: .42em; letter-spacing: 0; margin-left: .15em; }
.note { font-size: 16px; color: var(--gray); max-width: 46em; margin-top: calc(var(--u) * 5); }

/* ── Логотип «МЯТЬ CRM» ────────────────────────────────────────────────
   Знак «МЯТЬ» — логотип в кривых (img/logo.svg, Cocomat Pro Light со сближенными буквами),
   окрашивается цветом текста через маску: чёрный на светлом, белый на тёмном. Рядом —
   таблетка с переливом «CRM» шрифтом темы, как «Франшиза» в шапке. */
.crm-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: calc(var(--u) * 5); line-height: 1; }
.crm-logo__mark { display: block; width: 104px; height: 29px; background: currentColor;
  -webkit-mask: url("img/logo.svg") no-repeat center / contain; mask: url("img/logo.svg") no-repeat center / contain; }
.crm-logo__pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(110deg, #ffd9ec 0%, #fff5d9 48%, #d9deff 100%); color: #1f2023;
  font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.band--dark .note { color: #a5a5a8; }
/* Таблетка раздела справа от логотипа в шапке — тот же перелив, что у «CRM». */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(110deg, #ffd9ec 0%, #fff5d9 48%, #d9deff 100%); color: #1f2023;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1; }

/* ── Цитата-манифест ───────────────────────────────────────────────── */
.manifest { font-weight: 300; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.2; letter-spacing: -.01em; max-width: 22em; }
.manifest + .muted { margin-top: calc(var(--u) * 4); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; }

/* ── Таблица сравнения ─────────────────────────────────────────────── */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) 0; border-top: 1px solid var(--line); }
.compare thead th { border-top: 1px solid var(--black); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); }
.compare tbody th { font-weight: 500; width: 24%; }
.compare td:last-child { color: var(--black); font-weight: 400; }
.compare td { color: var(--graphite); }

/* ── Шаги ──────────────────────────────────────────────────────────── */
.steps { counter-reset: step; border-top: 1px solid var(--black); }
.steps li { counter-increment: step; display: grid; grid-template-columns: calc(var(--u) * 10) minmax(0, 4fr) minmax(0, 7fr); gap: calc(var(--u) * 3); padding: calc(var(--u) * 3.5) 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: 14px; letter-spacing: .2em; color: var(--gray); padding-top: 6px; }
.steps p { color: var(--graphite); }

/* ── Форма заявки (разметку отдаёт CRM Webasyst, здесь только оформление) ─────── */
.request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--u) * 9); align-items: start; }
/* overflow: hidden — в штатной форме CRM есть невидимый блок, выступающий вправо на тысячи
   пикселей; без обрезки вся страница получала горизонтальную прокрутку. Обрезаем здесь,
   а не на самой форме: поля до края не доходят, и рамка фокуса не срезается. */
.request__form { overflow: hidden; background: var(--paper); color: var(--black); min-width: 0; padding: calc(var(--u) * 5); }
.request__form .crm-form-block { max-width: none !important; margin: 0; font-family: var(--font); }
.request__form .crm-form-field { display: block; margin: 0 0 calc(var(--u) * 3); padding: 0; }
.request__form .crm-form-field .name { display: block; width: auto; padding: 0; margin: 0 0 var(--u); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); text-align: left; }
.request__form .crm-form-field .name-inner { display: flex; gap: 4px; }
.request__form .crm-form-field .value { display: block; width: auto; margin: 0; padding: 0; }
.request__form .crm-form-field .value p { margin: 0; }
.request__form input[type="text"], .request__form input[type="email"], .request__form input[type="tel"], .request__form textarea {
  display: block; width: 100%; max-width: none; min-width: 0; border: 0; border-bottom: 1px solid var(--black); border-radius: 0; background: transparent;
  padding: var(--u) 0 calc(var(--u) * 1.5); font: inherit; font-size: 19px; font-weight: 300; color: var(--black); box-shadow: none; -webkit-appearance: none; appearance: none; }
.request__form textarea { min-height: calc(var(--u) * 14); resize: vertical; border: 1px solid var(--line); padding: calc(var(--u) * 1.5); }
.request__form input:focus, .request__form textarea:focus { outline: 2px solid var(--black); outline-offset: 2px; }
.request__form .crm-error-msg-block, .request__form .crm-error-msg { color: #a3261b; font-size: 15px; margin-top: 6px; }
.request__form .c-agreement-checkbox-wrapper { display: flex; gap: calc(var(--u) * 1.5); align-items: flex-start; font-size: 16px; color: var(--graphite); cursor: pointer; }
.request__form .c-agreement-checkbox-wrapper input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--black); }
.request__form .crm-form-field[data-id="!button"] { margin: calc(var(--u) * 4) 0 0; }
/* У строки с кнопкой CRM оставляет слева пустую колонку под подпись — убираем её. */
.request__form .crm-form-field[data-id="!button"] .name { display: none; }
.request__form .crm-submit-button-wrapper { margin: 0; padding: 0; text-align: left; }
.request__form .crm-form-submit-button { margin: 0; }
.request__form .crm-form-submit-button { display: inline-block; width: auto; border: 1px solid var(--black); border-radius: 0; background: var(--black); color: var(--paper);
  padding: calc(var(--u) * 2) calc(var(--u) * 4.5); font: inherit; font-size: 16px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.request__form .crm-form-submit-button:hover { background: transparent; color: var(--black); }
.request__form .crm-after-submit-block, .form-done { font-size: 21px; line-height: 1.4; }
/* Поле-ловушка для ботов: CRM прячет его скриптом, прячем и стилями — иначе до загрузки
   скрипта оно на мгновение видно как лишнее пустое поле. Не display:none у самого input —
   часть ботов такие поля пропускает, и ловушка перестаёт работать. */
.request__form .crm-form-field[data-id^="!f"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Команда ───────────────────────────────────────────────────────── */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 7) calc(var(--u) * 4); }
.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--black); filter: grayscale(1); margin-bottom: calc(var(--u) * 3); }
.person__meta { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin: var(--u) 0 calc(var(--u) * 2); }
.person p:last-child { color: var(--graphite); }

/* ── Студии ────────────────────────────────────────────────────────── */
.studios { display: grid; gap: calc(var(--u) * 10); }
.studio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 7); align-items: center; }
/* У чётных строк фото справа — меняем местами и доли колонок, иначе фото станет шире соседних. */
.studio:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.studio:nth-child(even) .studio__media { order: 2; }
.studio__media img, .studio__blank { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); background: var(--black); }
.studio__blank { display: flex; align-items: center; justify-content: center; color: #3a3a3c; font-weight: 500; font-size: 28px; letter-spacing: .34em; }
.facts { margin: calc(var(--u) * 4) 0 0; border-top: 1px solid var(--black); }
.facts > div { display: grid; grid-template-columns: calc(var(--u) * 18) minmax(0, 1fr); gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); padding-top: 4px; }
.facts dd { margin: 0; }
.facts a { text-decoration: none; }

/* ── Обычный текст ─────────────────────────────────────────────────── */
.prose h1 { font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; margin-bottom: calc(var(--u) * 5); }
.prose h2 { font-weight: 400; font-size: 28px; margin: calc(var(--u) * 7) 0 calc(var(--u) * 2); }
.prose p, .prose ul, .prose ol { margin-bottom: calc(var(--u) * 3); }
.prose ul { list-style: none; }
.prose ul li { padding-left: calc(var(--u) * 3); position: relative; }
.prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--gray); }

/* ── Подвал ────────────────────────────────────────────────────────── */
.site-footer { padding: calc(var(--u) * 9) 0 calc(var(--u) * 7); font-size: 16px; }
.site-footer__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: calc(var(--u) * 5); align-items: start; }
.site-footer__nav { display: grid; gap: calc(var(--u) * 1.5); }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__legal { text-align: right; }
.site-footer .muted { margin-top: calc(var(--u) * 1.5); }

/* ── Узкие экраны ──────────────────────────────────────────────────── */
/* Между планшетом и десктопом пунктам меню тесно: сужаем промежутки, а не прячем меню */
@media (max-width: 1080px) { .site-nav { gap: calc(var(--u) * 2.5); } }

@media (max-width: 880px) {
  body { font-size: 18px; }
  .band { padding: calc(var(--u) * 8) 0; }
  .band--hero { padding: calc(var(--u) * 6) 0 calc(var(--u) * 8); }
  .section-head { grid-template-columns: 1fr; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 5); }
  .grid--3, .grid--4, .doors { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell, .cell + .cell { padding: calc(var(--u) * 3) 0 calc(var(--u) * 4); border-left: 0; border-bottom: 1px solid var(--line); }
  .grid--4 .cell { padding-right: calc(var(--u) * 2); }
  .band--dark .cell { border-bottom-color: #333; }
  .door { min-height: 0; }
  .steps li { grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr); }
  .steps li p { grid-column: 2; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 5) calc(var(--u) * 2); }
  .studio, .studio:nth-child(even) { grid-template-columns: 1fr; gap: calc(var(--u) * 4); }
  .studio:nth-child(even) .studio__media { order: 0; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  /* minmax(0, …), а не 1fr: иначе колонка растягивается по самому широкому содержимому формы
     и страница на телефоне уезжает вбок. */
  .request { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 5); }
  .request__form { padding: calc(var(--u) * 3); }
  .site-footer__row { grid-template-columns: 1fr; }
  .site-footer__legal { text-align: left; }

  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { border-top: 1px solid var(--black); padding: calc(var(--u) * 3) 0; }
  .compare th, .compare td { border: 0; padding: 0 0 var(--u); }
  .compare tbody th { width: 100%; }
  .compare td::before { content: attr(data-label) ": "; color: var(--gray); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; display: block; }

  .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; cursor: pointer; }
  .nav-burger span { display: block; height: 1px; background: var(--black); margin-left: 10px; }
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 44px; height: 44px; right: calc(var(--u) * 3); }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--u) calc(var(--u) * 3) calc(var(--u) * 3); }
  .site-nav a { padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); }
  .site-nav .site-nav__cta { margin-top: calc(var(--u) * 2); text-align: center; border: 1px solid var(--black); }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--black); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .door { transition: none; }
}

/* ── Видео в шапке главной (только широкие экраны) ─────────────────────────────── */
.hero-video { display: none; }
@media (min-width: 900px) {
  .band--video { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
    min-height: max(560px, min(42.86vw, 86vh)); /* по пропорциям видео 7:3 — меньше обрезки и увеличения */ background: var(--black); color: var(--paper); border-bottom-color: var(--black); }
  .band--video .hero-video { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
  /* Затемнение слева — под текстом, справа видео остаётся чистым. */
  .band--video::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(11,11,11,.78) 0%, rgba(11,11,11,.45) 45%, rgba(11,11,11,0) 80%); }
  .band--video .wrap { width: 100%; }
  .band--video .eyebrow { color: #a5a5a8; }
  .band--video .btn { border-color: var(--paper); color: var(--paper); }
  .band--video .btn:hover { background: var(--paper); color: var(--black); }
  .band--video .btn--solid { background: var(--paper); color: var(--black); }
  .band--video .btn--solid:hover { background: transparent; color: var(--paper); }
}

/* ── Профайл мастера (/team/<slug>/) ─────────────────────────────────────────────── */
.person__link { display: block; color: inherit; text-decoration: none; }
.person__link:hover .h3 { text-decoration: underline; text-underline-offset: 6px; }
.person__link:hover img { filter: grayscale(0); }
.person img { transition: filter .4s ease; }
.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 8); align-items: start; }
.profile__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--black); filter: grayscale(1); display: block; }
.profile__back { margin-bottom: calc(var(--u) * 4); font-size: 16px; }
.profile__back a { color: var(--gray); text-decoration: none; }
.profile__back a:hover { color: var(--black); }
.profile__name { font-size: clamp(40px, 5.6vw, 80px); }
.profile__where, .profile__price { margin-top: calc(var(--u) * 3); color: var(--graphite); }
.profile__social { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 4); }
.profile__section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 6); align-items: start; }
.profile__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.profile__list li { padding: calc(var(--u) * 2) 0; border-bottom: 1px solid var(--line); }
.profile__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--u); }
.profile__tags li { border: 1px solid currentColor; padding: var(--u) calc(var(--u) * 2); font-size: 16px; }
.profile__section > div > p { margin-top: calc(var(--u) * 3); color: var(--graphite); }
.profile__video { position: relative; aspect-ratio: 16 / 9; background: var(--black); }
.profile__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.profile__qa { border-bottom: 1px solid var(--line); padding: calc(var(--u) * 2) 0; }
.profile__qa summary { cursor: pointer; }
.profile__qa p { margin-top: var(--u); color: var(--graphite); }
.profile__reviews { display: grid; gap: calc(var(--u) * 4); }
.profile__review blockquote { margin: 0; }
.profile__review figcaption { margin-top: var(--u); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.profile__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u); }
.profile__gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .profile, .profile__section { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); }
  .profile__photo { max-width: 420px; }
  .profile__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Страница «CRM для партнёра» (/franchise/crm/) ─────────────────────────────── */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--black); }
.module { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 5) 0; border-bottom: 1px solid var(--line); }
.module + .module { padding-left: calc(var(--u) * 4); }
.module:nth-child(3n+1) { padding-left: 0; }
.module:nth-child(3n+2), .module:nth-child(3n) { border-left: 1px solid var(--line); }
.module ul { list-style: none; padding: 0; margin: calc(var(--u) * 2) 0 0; }
.module li { padding: var(--u) 0; color: var(--graphite); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.shot { margin: 0; }
.shot__frame { aspect-ratio: 16 / 10; border: 1px dashed var(--gray); display: grid; place-items: center; color: var(--gray); font-size: 15px; background: var(--paper); }
.shot figcaption { margin-top: var(--u); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
@media (max-width: 900px) {
  .modules, .shots { grid-template-columns: minmax(0, 1fr); }
  .module, .module + .module { padding-left: 0; border-left: 0 !important; }
}