@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════════════
   Татьяна Шефер — лендинг · дизайн-язык «ledger»
   Стили версии v31 (рефакторинг v30: вынос из инлайна, секции, чистка).
   Внешний вид правится ТОЛЬКО через дизайн-токены в :root (см. §1).
   История версий и обоснования — в ../../CHANGELOG-index.md.

   ОГЛАВЛЕНИЕ
     1.  Дизайн-токены (:root)
     2.  Сброс и база
     3.  Фоновое зерно (grain)
     4.  Каркас страницы (.page / .screen / .frame)
     5.  Шапка (sticky, brand, nav, contacts, бургер)
     6.  Полноэкранное меню (mobile-menu)
     7.  Hero (текст + портрет)
     8.  Кнопки (.btn и варианты)
     9.  Метрики и теги под hero
     10. Каркас секций (.band .frame / .head / .lede / h2)
     11. Трек-секции (.band--track) и золотая тема (.band--gold)
     12. Результаты (.stats) + tooltip
     13. Философия
     14. Аудитория (.picks)
     15. Ячейки трек-секций (group-title / ledger / formats / case / cta-row)
     16. «Кто я» + матрица «7 в 1» + уровни + цитата
     17. FAQ
     18. Контакты
     19. Футер
     20. Полоса-роли (rolebar, scrollspy)
     21. Словарь глубины (card-grid, phil-manifest, optic, callout, band--alt)
     22. Раскладка по 12-колоночной сетке
     23. Адаптив (@media)
     24. Движение и prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. ДИЗАЙН-ТОКЕНЫ — единственное место, где правят внешний вид.
      Меняешь переменную → перестраивается весь экран.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Цвет ── палитра «шампань»: светлый текст на тёмно-зелёном + мягкое золото ── */
  --ink:#ede5d0;                        /* основной кремовый текст */
  --bg:#152120;                         /* серо-зелёный фон */
  --bg-alt:#192523;                     /* тонкий альт-тон чередующихся секций (едва светлее --bg) */
  --gold:#c9b98a;                       /* мягкий «шампань»-акцент: цифры, кикеры, штрихи */
  --gold-btn:#d4c28a;                   /* ярче — заливка primary-кнопки */
  --on-gold:#0e1a19;                    /* тёмный текст на золотой кнопке */
  --gold-soft:rgba(201,185,138,.5);     /* приглушённое золото: черта карточек, подчёркивания */
  --deep:#101a18;                       /* самый глубокий зелёный: «фичевые» панели (Стало, контакты) */
  --surface:#1e2b29;                    /* приподнятый зелёный: hover-заливки, панели, tooltip */
  --on-dark:#fff;                       /* текст на самой тёмной панели (контакты) */
  --on-dark-faint:rgba(255,255,255,.62);/* приглушённый текст на тёмной панели (метки, роли) */
  --hair-dark:rgba(255,255,255,.16);    /* линии-разделители на тёмной панели */
  --hair-dark-strong:rgba(255,255,255,.42);/* активный/hover бордер на тёмной панели (focus поля, hover чипа) */
  --chan-hover:rgba(255,255,255,.08);   /* фон чипа-канала на тёмной панели при hover */
  /* производные тинты — светлое-на-тёмном (rgba от --ink ≈ 237,229,208) */
  --muted:rgba(237,229,208,.66);
  --faint:rgba(237,229,208,.46);
  --hair:rgba(237,229,208,.13);         /* hairline: внутритабличные деления, 1px */
  --rule:rgba(237,229,208,.28);         /* «главный» разделитель: границы глав/дорожек (весомее hairline) */
  --lede-bg:rgba(237,229,208,.08);      /* фон плашек-описаний .lede/.callout/.phil-manifest/.quote */
  --chip-light:rgba(255,255,255,.16);   /* полупрозрачный квадрат-чип внутри primary-кнопки */
  --photo-1:#1c2e2b; --photo-2:#182724; --photo-3:#14201e;  /* фото-заглушки (градиент) */
  --photo-tag-bg:rgba(16,26,24,.62);    /* фон меток-плашек на фото (.portrait .tag / .photo .ptag) */

  /* ── Типографика ── две гарнитуры: Raleway (дисплей) + Inter (тело) ── */
  --display:"Raleway", system-ui, sans-serif;             /* заголовки, имя, цифры, кнопки */
  --sans:"Inter", system-ui, -apple-system, sans-serif;   /* тело, метки, поля */
  /* Типо-шкала — единая 9-ступенчатая. v43: десктопная база тела опущена до 15px
     («как на мобилке» — тело/проза были крупноваты); заголовки и цифры
     (--fs-lg/xl/2xl/h1/h2) не тронуты. Новый размер на сайте — ТОЛЬКО отсюда. */
  --fs-2xs:12px;                 /* капс-метки/eyebrows (UPPERCASE .14em), сноски, photo-tag */
  --fs-xs:14px;                  /* вторичный текст: теги, нав, описания, списки, FAQ-ответ, btn-sm */
  --fs-base:15px;                /* база/тело: проза, лиды, FAQ-вопрос, group-title, h4, кнопки */
  --fs-md:22px;                  /* крупный текст: дескриптор, lead */
  --fs-lg:26px;                  /* H3, малые подзаголовки, цитата, contact value */
  --fs-xl:34px;                  /* H2b («7 в 1»), цифры матрицы .sv-n/.lvl */
  --fs-2xl:42px;                 /* крупные цифры-метрики .num (тонкий 300) */
  --fs-h2:clamp(30px,4vw,50px);  /* дисплей-заголовок секций */
  --fs-h1:clamp(36px,5vw,72px);  /* hero (v35: уменьшен — имя в одну строку в узкой колонке) */

  /* ── Сетка / раскладка ── швейцарская 12-колоночная ── */
  --maxw:none;                          /* потолок ширины .frame — full-bleed (шапка/футер/rolebar) */
  --maxw-content:1152px;                /* v33: ширина центральной колонки контента (как max-w-6xl вайрфрейма) */
  --margin:clamp(20px,1.7vw,40px);      /* боковые поля (маленькие, почти не растут) */
  --cols:12;                            /* число колонок модульной сетки */
  --col-gap:clamp(16px,1.6vw,32px);     /* жёлоб между колонками */
  --gap:24px;                           /* gutter + базовый внутренний отступ */
  --header-h:76px;                      /* базовая высота шапки; в compact сжимается до 58px */
  --rolebar-h:52px;                     /* высота полосы-ролей (2-й ярус) — для scroll-margin */
  --hero-split:3fr 2fr;                 /* v35: текст ~60% | портрет ~40% (было 1fr 1fr) — имя и «для:» в одну строку */
  --logo:42px;

  /* ── Ритм (база 8) ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;

  /* ── Радиусы ── острые углы везде (скруглений нет) ── */
  --r-btn:0;

  /* ── Кнопки ── */
  --btn-h:54px;    --btn-h-sm:40px;
  --chip:34px;     --chip-sm:28px;      /* квадрат-чип у стрелки */
  --arw:16px;      --arw-sm:13px;       /* размер самой стрелки */
  --chip-inset:8px;--chip-inset-sm:6px; /* отступ чипа от края кнопки */
  --btn-pl:26px;   --btn-pl-sm:18px;    /* левый внутренний отступ */
  --btn-shift:22px;--btn-shift-sm:20px; /* сдвиг текста на hover (своп) */
  --btn-pr:calc(var(--chip-inset) + var(--chip) + var(--s1));          /* правый отступ = место под чип */
  --btn-pr-sm:calc(var(--chip-inset-sm) + var(--chip-sm) + var(--s1));

  /* ── Движение ── */
  --ease:cubic-bezier(.165,.84,.44,1);  /* easeOutExpo */
  --dur:.45s; --dur-fast:.35s;

  /* ── Зерно ── ч/б PNG-тайл, вынесен в токен (переиспользуется на золотых панелях) ── */
  --grain-size:90px; --grain-opacity:.025;
  --grain-img:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAAAAADmVT4XAAAKyElEQVR42n2bC7LcNhADcf9LIxV7JXaDShKXk2fvSvwMZwAMmCZp//09/ff/fr/y+/P++bG/T/z90N8vNPyLP3/w5zt/v/33679nPJ//fer3qx8f/z3298nwic/g8g64z4ieMb4//16rl/8ef35+nvk87zfZnHHh789k3km90+n73/O14K+5Mucb5+l5lyl44TPUZ2fyjP9MBf+cQeVMVgPmw84TzwpGy9giFrBvWp4yXLSq72a+i/38GwRGznDfhc95DLfuXTLE6Ruc74KdKH3X+A2adzeetXuXhTGH72BLGT7c1xNjZ3+ePzwx+AYzAvuN4TOrIjpPTBdvV4ieFTivPUN9Tk/P+8KQ0s484fkGBodzDm94DHXkEKEIxnpVqsxyXvhsCQ98EJvv2UBwIl5OZCKOqnzw7njrbyXeDLzqjajOuSnOFgZ8MscbAGf+V1rKmcee2Dfyy4OubMKEgXmfOSIeGa3J5kQvOB7XYl+QHZ3Swkf3hCQPBdIyznAwQCSDE3EpD6Jy/1s09o3V2N5T7tNzAk2rmz2EfC1KzAmMGddZ2Z6nnTDDm4uqV0RUsRxBhWFpOdllq9D7Qo08Csk3wVaF4dQHZXIGCQ8uj5zi491xHApsASsMcp5imAkKm+ORcBFU0qIigFqTk5TDc/mmqfBFCPcSs2TWX0kqquBnO5FQJz7OLhIGMEBZM1CrWJqZWhaLvFM9heBsn6p1ykIQ1ohg3aPQLSdW1p6DDKpsZQymWOJWcwiAlqe46IhoCqylPEs4GAC8+P2kVmVipd0Knp0Q8DJsrPeCvUUdCqKvTh4YeQUPfNAYOMglQdJHoZ1JY1ECGAUki2lxIFEGKlYEWUvVkYzBUbRnFDgTr+UAo48JBrMQXVkxRG4HiVRRNMD4BJnA4knfDo8S6RJVGZslBg1hdQbWn5LvLMBsqzkiclFWM4AesLmTVzoLnfYifVMrY35zfiVmKo2A59RsAPjoYZP9eGaGFdbo0/nRUxtgbcapXSyiB1V22CWRmIsTsTrJ5aRc5ajNYGCWpG3iOmRRiDhFGeYbTlzYr9V+hJCEmdY7S5bDQI03R8gxu8E3JzGE1ik7EcqCWxPMiCILzfTKRme84TtCfpRqH5lOSJgJbDIQizmTjIDkkVk1pjQNq8uJmjZC/5MDXMnAOXxaTazEX0jlSn778WQOg8ibEPyEIke9rHmQW8Ar8SRXn8loAryjMbBkSpj4PFyZEuzoGkQsxlHyUaFGRt2hzTGEAPbtnm9UjI0N80NFkelxTacBDSJMFsEeHRoKTsoe6VYWn/tSmUFWCDc8hGlkOZRxhk2A5EHAiuLiQzoJHs5EEalaK4vVyUdaiNUhrCWKC09jXZ/JSD3mZUlkrkAgUQESPBIDF+Hht3sxWZGnUMNbLNrVItrJU/nPGiIxrR91UvJMa3GrDhNsUJeaDqEkkbcKKqTLcpvRubFSEiBDZfkEjyBdLGVbTSQklNhOnVWxsjKkYghgJ0PCLc8toSFh4vQTv5EruVFNtMUMDFrZDYWPvOrMb5wfxFJ29UVKKtE6ZMoVSOikKW5ThxhLN3SWQAI1M0gl78XqsRDYlK8FE24mgGJTSLb6RZ5eZyrC4dVttv0wMkwsT7UGPmCWI62pjJetpQgrqvxKdGYiy5R4HzTFaS5QCiaqmnrzkkx+relahbYnmefasK14UnhdxIccDKU3jQLAJthm8mXxTb7YPdki8VVI9ifOvgHwNvRK/rOwn0p+6oCr4JoaexqrAsQ6c0W/KiSiNoUraSgibn9zALbw4/RslHMlFLIBU8MaE1KX1uk+ZsXGDNwZ/c74Y1Ew04RDJQ6MMOdkREY1RLKry9RrlaMuG3uw9RaBmFzcSYyAIlSJbKYrRSSoVkpq8OSlVlpGab204W5H1t0yNYE7BEs/9lJnO7yiqg+9WCYpiw/lLdCOkJiPcmewqu5q0w8Va7Lu3Y3Lso0Rx6j1bXORGuGoYGFdZENRvfhI2E5yD2NbFuZTieV8d5Ks/EFkkPxqtaIjSUiFqjrXrmPT6xOeVDSaV4vvXE2NZiLEnYAsVlRPC7qbFLKue0RQg83C5CKiKjuX2uVmvKR2mlI62qSFIsE5kma110oC/KmhuBOZXJYXZLWMwjf0oFK1hfhdD3o5DNwgzzgZcjkNxlNg54ifYYH445xjvgMMsygCSGEtHTPEjxinzGsF11W+nHkt9VIljSrLYOrLw1IbamSoWlxdYxdLpm7RZJXbFXtqUw9Tsiv8mjfITmQ2iJtskiowrawqeOVFoVhzVjdKleWoMo7dRT3JMZXQ7dQr9Zl3LkWyD4jtPsIAl5U4BasqSLOZrqf1wuRSLrs+PLU9sqwz07MLQ7m3JW+hvZxQW/YMgthpq9OLSKjhWC06qcUssVpcPWZYG/Kx0WnBmoi37Y65+ihOopchaamPlAmti+tkhF4lGukQSO5UtLsCSFm0bL+eyVsYkELhNlCkVZB6D/SX5yIrsCk12UUjkbjqB2zGqrr/cWfITYeFQAOGLqZXr/VURDXXV9yMIU/tbWVOlF3OgN2CYtwcrUc7oTzBXfc8rShndFoEnbw809hHZ0DSWUSPLkfCrW7Fnhqyj1ija62FRd3Y2YYSMNcgwmaP7Ty4aa7W9QhiuSTxXrab3HuXKt9cGiGJgY0Z8XxkAL7iUTKN253ys+barC7Iqrzbc57VLRoJSBxFtiJloFGs7DpTv2s7KLG7wf1QbbKl27FZkDpfTsBIYMuEhJwqY1odtbnrGDeT+bYEt6N35mIUqvx1oHd7LiO3XEZ+5z4nv67aflVWVYbaiDgdHvXnBNjr5tNlr5/UNsZ5Fd6FjJFOu+JGRhgxlaeF5DroHE9VnR3qo9DRBnZJcWz2gQzcCXagcaYHayVw8kGu7WFTp/bITjpW4ZeULHpmS5phlD1d4+TsOifGGDKsvnfta78bQbOwa3xuN81+5OlsHXaH0bpQJPjU3puwve5wuC4MzEFJb3/0NCJjc45an/JkuQe3iSoeyDQTm9wd5L2nEFX2TH7z2cxlGJ9iXAlIvZzIrh/xGnYu8OgSRy5Wts1wF75c31ITwnWwNnjpjodtc5bAbtulWvozYj8ydst/94DnkoZR88dVh8uu9qGW2sy8cotetpZKWZQWX3ZcxbXH9e4RGB4tjvm6ZzQa+qhU65C4t2l1kNj3lbVObJMnNvjI9GyH51ymmbxKrcCOm8vKdN9xu5Lw3r0bk0quJn6svMW33qa9UV8PqO7FaMaj8VRPj6Ha5R/xLSE7zTou0ywfGEMxXVkCf3Fj3i5oK1sjP1ywV9cgfSnl6kZI0Irv50z97HWMJdXuLSHXTeUIKShfqs24Vud+2H110vc7swBFNqBe9zPbMQfmA3592I5seVE3N+2F/TvGmU5vXfeX7tqaMWWtzTVyLdmC1/9DznPtI5fpQYqMHcFpP9xTY/SeBo0vX/RuWn5AmX2kL73GlqIYg6qZkPvqw1ya6NpD2XrQddXc10C3tbzuMRFhVfsbmtV3D2udZ8yhPnR1LOUqivX1EGtGWZt3VkU1jtLd1bgLqihX73RMb7a3D7jKXLXyvdLkvkFYc4teFw6rG1xzFW7bzb4/ts6cy5biO68VwdOSjNQwftdO4/GuTgOJ27HprhXXbZS5qrY38zs6hh2VGeOyuJuvI9qtvpcsx4/+DxPYAcFnOEIDAAAAAElFTkSuQmCC");
}
/* v33: золотая («шампань») тема трёх трек-секций (.band--gold) убрана — фон блоков
   теперь нейтральный --surface (см. §11), текст остаётся в общей тёмно-зелёной теме. */


/* ══════════════════════════════════════════════════════════════════════════
   2. СБРОС И БАЗА
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* якоря приземляются НИЖЕ липкой шапки (высота сжатой шапки + воздух) */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s3))}
/* три трек-секции скрываются ещё и под полосой-ролей → двойной запас */
#salon,#specialist,#production{scroll-margin-top:calc(var(--header-h) + var(--rolebar-h) + var(--s3))}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-kerning:normal;font-feature-settings:"kern","liga","calt";
}
a{color:inherit;text-decoration:none}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* фирменное выделение текста */
::selection{background:var(--ink);color:var(--bg)}
/* убираем «висячие» одиночные слова в потоковом тексте */
p,li,figcaption,blockquote{text-wrap:pretty}
/* видимый фокус с клавиатуры (a11y) — обводка токенами, углы прямые */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* на тёмной секции (контакты) — светлая обводка */
.band--dark a:focus-visible,.band--dark button:focus-visible,
.band--dark input:focus-visible,.band--dark textarea:focus-visible{outline-color:var(--on-dark)}


/* ══════════════════════════════════════════════════════════════════════════
   3. ФОНОВОЕ ЗЕРНО (grain) — ч/б тайл, ~3%, движется по кадрам · ОПЦИОНАЛЬНО
   ══════════════════════════════════════════════════════════════════════════ */
/* v33: зерно выключено по умолчанию (клиент попросил убрать). Чтобы включить
   обратно — добавь класс `grain-on` на <body>. Узел <div class="grain"> остаётся
   в разметке; вся его отрисовка и анимация активируются только под этим классом. */
.grain{display:none}
body.grain-on .grain{
  display:block;
  position:fixed;inset:0;z-index:1;pointer-events:none;
  /* screen «вытягивает» светлые значения шума на тёмном фоне */
  mix-blend-mode:screen;opacity:var(--grain-opacity);
  background-image:var(--grain-img);
  background-size:var(--grain-size) var(--grain-size);background-repeat:repeat;
  animation:grain .42s steps(1,end) infinite;
}
@keyframes grain{
  0%{background-position:0 0}
  20%{background-position:-37px 91px}
  40%{background-position:113px -53px}
  60%{background-position:-67px -119px}
  80%{background-position:71px 67px}
  100%{background-position:0 0}
}


/* ══════════════════════════════════════════════════════════════════════════
   4. КАРКАС СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════════════════ */
/* .page создаёт свой стек-контекст (z-index:2) — внутри него живут rolebar(60)/
   header(70)/mobile-menu(90), поэтому меню корректно перекрывает ролибар. */
.page{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}
/* первый экран = ровно высота вьюпорта. v38: кластер hero+метрики центрируется
   как единое целое (justify-content:center) — hero больше не растягивается на всю
   высоту (см. .hero{flex:0 1 auto}), метрики читаются как «полка» под hero, а
   свободный воздух балансируется сверху/снизу вместо одностороннего провала. */
.screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
/* рамка-контейнер: full-bleed во весь viewport (--maxw:none), боковые поля --margin */
.frame{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--margin)}
/* v33: центрированная «узкая» колонка контента. Hero, метрики и все секции .band
   собираются в колонку шириной --maxw-content и центрируются; на широком экране
   по бокам остаются пустые «уши» = фон страницы --bg. На экранах уже колонки блок
   занимает 100% (боковой воздух несёт .frame через padding-inline:--margin).
   width:min(...) вместо max-width — .hero/.metrics являются flex-элементами .screen,
   а auto-margin на flex-элементе «обнимает» контент (не заполняет строку); явная
   ширина этого избегает. Шапка/футер/rolebar сюда НЕ входят → остаются full-bleed. */
.hero,.metrics,.band{width:min(var(--maxw-content),100%);margin-inline:auto}


/* ══════════════════════════════════════════════════════════════════════════
   5. ШАПКА — липкая, сжимается при скролле (body.header-compact)
   ══════════════════════════════════════════════════════════════════════════ */
/* сентинел детекта скролла — 1px-блок вверху .page (для IntersectionObserver) */
#top-sentinel{display:block;height:1px;width:100%}
.header{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:1px solid var(--hair);
  transition:background-color var(--dur-fast) var(--ease)}
.header .frame{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
  transition:height var(--dur-fast) var(--ease)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;cursor:pointer}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand .nm{font-size:var(--fs-xs);font-weight:500;color:var(--ink);letter-spacing:.01em}
.brand .sub{font-size:var(--fs-2xs);color:var(--faint);letter-spacing:.02em;
  overflow:hidden;transition:max-height var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  max-height:1.4em;opacity:1}
/* сжатие при скролле: шапка ниже, лого меньше, подзаголовок brand схлопывается */
body.header-compact{--header-h:58px;--logo:34px}
body.header-compact .brand .sub{max-height:0;opacity:0}
/* квадратный логотип (заглушка; заменить svg на <img>) */
.logo{width:var(--logo);height:var(--logo);flex:none;overflow:hidden;
  transition:width var(--dur-fast) var(--ease),height var(--dur-fast) var(--ease);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--photo-1) 0%,var(--photo-3) 100%)}
.logo svg{width:60%;height:auto;color:var(--ink);opacity:.4}
.nav{display:flex;align-items:center;gap:var(--s4);flex:none}   /* не сжимается — не рвёт пункты на 2 строки */
.nav a{font-size:var(--fs-xs);color:var(--muted);transition:color .15s;white-space:nowrap}
.nav a:hover{color:var(--ink)}
/* правый кластер: контакты + кнопка «Запросить аудит» */
.header-actions{display:flex;align-items:center}
.header-contacts{display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.25;margin-right:var(--s4);max-width:16em;overflow:hidden;
  transition:max-width var(--dur-fast) var(--ease),
             opacity  var(--dur-fast) var(--ease),
             margin   var(--dur-fast) var(--ease)}
.header-contacts a{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap;transition:color .15s}
.header-contacts a:hover{color:var(--ink)}
.header-contacts .hc-tel{color:var(--ink);font-weight:500}
/* при скролле контакты плавно схлопываются по ширине (та же механика, что .sub) */
body.header-compact .header-contacts{max-width:0;opacity:0;margin-right:0;pointer-events:none}

/* ── кнопка-бургер (видна на «узкой» зоне, см. §23) ── */
.burger{display:none;flex:none;width:44px;height:44px;padding:0;margin:0;
  border:0;background:none;cursor:pointer;align-items:center;justify-content:center;
  color:var(--ink);-webkit-tap-highlight-color:transparent}
.burger__box{display:flex;flex-direction:column;justify-content:center;gap:6px;width:24px;height:16px}
.burger__line{display:block;width:100%;height:1.5px;background:currentColor;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}


/* ══════════════════════════════════════════════════════════════════════════
   6. ПОЛНОЭКРАННОЕ МЕНЮ — оверлей поверх шапки (z-index:90), содержимое по центру
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;text-align:center;
  /* v41: верхний резерв под шапку меню (.mobile-menu__head — position:absolute, места
     не занимает) — иначе при переполнении safe-center прижимает ссылки к верху и они
     заезжают под логотип «Татьяна Шефер». Низ — --s5 для воздуха при прокрутке. */
  padding:calc(var(--header-h) + var(--margin)) var(--margin) var(--s5);gap:var(--s5);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease),
             visibility 0s linear var(--dur-fast);
  overflow-y:auto;overscroll-behavior:contain}
body.menu-open .mobile-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s}
/* шапка меню (бренд + крестик) вынесена наверх — не мешает вертикальному центрированию */
.mobile-menu__head{position:absolute;top:var(--margin);left:var(--margin);right:var(--margin);
  display:flex;align-items:center;justify-content:space-between;height:var(--header-h);margin:0}
.mobile-menu__brand{font-size:var(--fs-xs);font-weight:500;color:var(--ink);letter-spacing:.01em}
.mm-close{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-close svg{width:24px;height:24px}
/* v42: пункты меню ближе друг к другу (по просьбе заказчицы) — gap --s3→--s2 */
.mobile-menu__nav{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.mobile-menu__nav a{font-family:var(--display);font-weight:300;font-size:var(--fs-lg);
  color:var(--ink);letter-spacing:.01em;padding:var(--s1) 0;transition:color .15s}
.mobile-menu__nav a:hover,.mobile-menu__nav a:focus-visible{color:var(--gold)}
.mobile-menu__foot{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.mobile-menu__contacts{display:flex;flex-direction:column;align-items:center;gap:var(--s1);line-height:1.3}
.mobile-menu__contacts a{font-size:var(--fs-base);color:var(--muted);transition:color .15s}
.mobile-menu__contacts a:hover{color:var(--ink)}
.mobile-menu__contacts .hc-tel{color:var(--ink);font-weight:500}
.mobile-menu__cta{align-self:center}
body.menu-open{overflow:hidden}   /* блокировка скролла фона */


/* ══════════════════════════════════════════════════════════════════════════
   7. HERO — текст (центр) | портрет (полноразмерная ячейка)
   ══════════════════════════════════════════════════════════════════════════ */
/* v38: flex:0 1 auto (было flex:1) — hero сжимается до контента и не съедает всю
   высоту .screen; вместе с .screen{justify-content:center} метрики встают вплотную
   под hero единым центрированным кластером (аннотация «метрики должны относиться к Hero») */
.hero{flex:0 1 auto;display:flex}
/* v46: align-items stretch — колонка портрета тянется на высоту текстовой колонки
   (высоту строки задаёт текст слева); портрет обрезается по этой высоте, а не
   диктует её сам. Раньше был center + фикс. aspect-ratio → фото выступало выше/ниже
   текста и создавало дисбаланс по вертикали. */
.hero .frame{display:grid;grid-template-columns:var(--hero-split);align-items:stretch}
/* v36: вертикальные отступы текстовой колонки ужаты (--s6→--s4) — hero был слишком «воздушным» сверху/снизу (по аннотации) */
.col-text{align-self:center;padding:var(--s4) var(--s5) var(--s4) 0}
/* надзаголовок Hero над h1 — капс, тонкий вес, разрядка */
.col-text>.kicker{font-size:var(--fs-2xs);font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
/* имя — Raleway тонкий (200), UPPERCASE, положительная разрядка */
/* v35: разрядка убавлена (.06→.04em) и white-space:nowrap — имя держится в одну
   строку в расширенной, но всё же узкой колонке hero. На мобиле возвращаем перенос. */
h1{font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:var(--fs-h1);line-height:1.0;letter-spacing:.04em;margin-bottom:var(--s3);white-space:nowrap}
.col-text h1 .accent{color:var(--gold)}   /* двутоновое имя — фамилия золотом */
/* подзаголовок «Оптика · Экспертиза · Бизнес» — UPPERCASE, разрядка, золотые точки */
.descriptor{font-size:var(--fs-base);font-weight:300;line-height:1.6;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--s3);text-wrap:balance}
.descriptor .dot{color:var(--gold);margin:0 .2em}
.offer{font-size:var(--fs-base);line-height:1.5;color:var(--muted);max-width:30em;margin-bottom:var(--s4)}
.cta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}   /* кнопки переносятся на узком */
/* блок «для: …» под кнопками Hero; чипы — общий .tag
   v35: nowrap на десктопе — строка «для: …» держится в один ряд (на мобиле возвращаем wrap) */
.hero-aud{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:var(--s4)}
.hero-aud .lead{font-size:var(--fs-xs);color:var(--faint);letter-spacing:.02em;flex:none}
.hero-aud .tag{white-space:nowrap}


/* ══════════════════════════════════════════════════════════════════════════
   8. КНОПКИ (единый компонент)
      дефолт: заливка, [текст | стрелка-чип справа].
      hover: фон → прозрачный + обводка; текст уезжает вправо, чип-стрелка — влево (своп).
   ══════════════════════════════════════════════════════════════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;
  height:var(--btn-h);padding:0 var(--btn-pr) 0 var(--btn-pl);border-radius:var(--r-btn);
  border:1px solid var(--gold-btn);background:var(--gold-btn);color:var(--on-gold);
  font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:transparent;color:var(--gold-btn)}
.btn .lbl{display:inline-block;transition:transform var(--dur) var(--ease)}
.btn:hover .lbl{transform:translateX(var(--btn-shift))}
/* стрелка в квадратном чипе; чип масштабируется из центра */
.btn .arw{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;
  width:var(--chip);height:var(--chip);border-radius:var(--r-btn);border:1px solid transparent;
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease),
             background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn .arw svg{width:var(--arw);height:var(--arw)}
.btn .arw-r{right:var(--chip-inset);transform:translateY(-50%) scale(1);opacity:1}
.btn .arw-l{left:var(--chip-inset);transform:translateY(-50%) scale(0);opacity:0}
.btn:hover .arw-r{transform:translateY(-50%) scale(0);opacity:0}
.btn:hover .arw-l{transform:translateY(-50%) scale(1);opacity:1}
/* primary (заливка): правый чип полупрозрачный, hover-чип прозрачный с обводкой */
.btn .arw-r{background:var(--chip-light)}
.btn .arw-l{background:transparent;border-color:currentColor}
/* secondary (outline): прозрачная и остаётся прозрачной — меняется только движение */
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:transparent;color:var(--ink)}
.btn--ghost .arw-r{background:transparent;border-color:currentColor}
.btn--ghost .arw-l{background:transparent;border-color:currentColor}
/* малый размер — шапка */
.btn--sm{height:var(--btn-h-sm);padding:0 var(--btn-pr-sm) 0 var(--btn-pl-sm);font-size:var(--fs-xs)}
.btn--sm .arw{width:var(--chip-sm);height:var(--chip-sm)}
.btn--sm .arw svg{width:var(--arw-sm);height:var(--arw-sm)}
.btn--sm .arw-r{right:var(--chip-inset-sm)}
.btn--sm .arw-l{left:var(--chip-inset-sm)}
.btn--sm:hover .lbl{transform:translateX(var(--btn-shift-sm))}


/* ══════════════════════════════════════════════════════════════════════════
   9. МЕТКА ФОТО (общая) · портрет · метрики · теги под hero
   ══════════════════════════════════════════════════════════════════════════ */
/* единая метка-плашка в углу фото (портрет hero, фото философии, фото «Кто я») */
.portrait .tag,.phil .photo .tag,.photo .ptag{position:absolute;top:16px;left:16px;
  font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  background:var(--photo-tag-bg);border:1px solid var(--hair-dark);
  padding:5px 10px;border-radius:var(--r-btn);backdrop-filter:blur(3px)}

/* портрет Hero — без линии слева, отделён воздухом (padding).
   v46: relative-контекст для абсолютного .portrait (высоту колонки задаёт grid-строка). */
.col-photo{padding:var(--gap);position:relative}
/* v46: на десктопе портрет ВЫВЕДЕН ИЗ ПОТОКА (position:absolute, inset=--gap) —
   он больше не отдаёт свою «естественную» вертикальную высоту в grid-строку, поэтому
   высоту строки задаёт ТОЛЬКО текст слева. Колонка .col-photo растягивается на эту
   высоту (align-items:stretch у .hero .frame), а портрет заполняет её и обрезается
   по вертикали через object-fit:cover у .ph-img — низ/верх фото встают вровень с
   текстом. (На ≤980 стек возвращает static + aspect-ratio 1200/1797 — медиазапрос ниже.) */
.portrait{position:absolute;inset:var(--gap);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--photo-1) 0%,var(--photo-2) 60%,var(--photo-3) 100%)}

/* v43: общий класс контентного фото — заполняет контейнер без обрезки
   (соотношение контейнера совпадает с соотношением снимка). Курсор-лупа → lightbox. */
.ph-img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
/* v46: hero-портрет обрезается по высоте текста → фиксируем кадр по лицу
   (сверху), чтобы при вертикальной обрезке голова не срезалась. */
.portrait .ph-img{object-position:center 40%}

/* метрики под hero — панель карточек с hairline-рамкой. v39: снята верхняя
   ledger-линия (border-top) и связывающий отступ (margin-top/padding-top) —
   карточки подтянуты вплотную к hero (аннотация: «убери линию-разделитель,
   сдвинь карточки повыше») */
.metrics .frame{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
  padding-block:var(--s2)}
.metric{padding:var(--s3) var(--gap);
  display:flex;flex-direction:column;gap:var(--s1);
  align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--rule)}
.metric .num{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1;letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
.metric .num.sm{font-size:var(--fs-lg);letter-spacing:.01em}
.metric .lab{font-size:var(--fs-xs);line-height:1.45;color:var(--muted)}
.metric .info{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-left:5px;opacity:.75}
/* «7 в 1» — весь блок кликабельный: hover заливается золотом, текст → тёмно-зелёный (--bg) */
.metric.lk{transition:background-color var(--dur-fast) var(--ease)}
.metric.lk .num,.metric.lk .lab{transition:color var(--dur-fast) var(--ease)}
.metric.lk:hover{background:var(--gold)}
.metric.lk:hover .num,.metric.lk:hover .lab{color:var(--bg)}

/* audience-строка + теги-чипы */
.audience .frame{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-block:var(--s3)}
.audience .lead{font-size:var(--fs-xs);color:var(--faint);letter-spacing:.02em;margin-right:4px}
.tag{border:1px solid var(--hair);border-radius:0;padding:8px 16px;font-size:var(--fs-xs);color:var(--ink);
  transition:background .15s,border-color .15s}
.tag:hover{background:var(--surface);border-color:var(--rule)}


/* ══════════════════════════════════════════════════════════════════════════
   10. КАРКАС СЕКЦИЙ (после Hero) — модульная 12-колоночная сетка внутри .frame
   ══════════════════════════════════════════════════════════════════════════ */
/* контентная секция = 12-колоночная сетка во всю ширину .frame; боковые поля несёт
   базовый .frame; прямые дети по умолчанию на всю ширину (1/-1). */
.band .frame{padding-block:var(--s6);
  display:grid;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--col-gap);align-content:start}
.band .frame>*{grid-column:1/-1;min-width:0}
/* заголовок секции — левая группа: номер сросся с H2 (надстрочник), плашка-описание рядом,
   H2 и плашка центрированы по вертикали (центр H2 = центр плашки). */
/* v35: вертикальный стек — плашка-описание всегда на новой строке под H2 (по аннотации) */
.band .head{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.band .head h2{margin:0}
/* номер раздела — маленькая надстрочная цифра вплотную к слову (внутри H2); то же для бейджа «7 в 1» */
.head h2 .eyebrow-no,.subhead .sub-h .eyebrow-tag{
  font-family:var(--display);font-weight:300;
  font-size:.42em;vertical-align:.9em;margin-right:.5em;line-height:0;
  color:var(--ink);letter-spacing:.01em;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
/* плашка-описание обнимает текст (max-width снят); подложка --lede-bg + симметричный паддинг */
.band .head .lede{max-width:none;text-align:left;align-self:flex-start;
  background:var(--lede-bg);padding:var(--s2) var(--s3);border-radius:0;margin:0;text-wrap:pretty}
.band h2{font-family:var(--display);font-weight:300;font-size:var(--fs-h2);line-height:1.02;letter-spacing:.02em;color:var(--ink);text-wrap:balance}
.band .lede{font-size:var(--fs-base);line-height:1.55;color:var(--muted);margin-top:var(--s2);max-width:42em}


/* ══════════════════════════════════════════════════════════════════════════
   11. ТРЕК-СЕКЦИИ (Салон/Специалист/Производство)
   ══════════════════════════════════════════════════════════════════════════ */
/* v33: продающие блоки выделены панелью-карточкой на нейтральном приподнятом фоне
   --surface (раньше — золото; клиент попросил спокойнее, «не бьёт по глазам»).
   Текст/линии/акценты остаются в общей тёмно-зелёной теме сайта. Боковой воздух
   через margin, фон на самом .frame, внутренний отступ до фона — padding.
   v34: внешний бордер панели убран по аннотации (панель = только заливка). */
.band--track .frame{padding-top:var(--s5);
  width:auto;                          /* вместо 100% — освобождаем место под margin */
  margin-inline:var(--margin);         /* боковой воздух от краёв панели */
  padding-inline:var(--s4);            /* внутренний отступ контента до рамки */
  background:var(--surface);           /* нейтральный приподнятый фон (из семьи --bg) */
  margin-block:var(--s3)}              /* вертикальный зазор — панели не слипаются; v34: внешний бордер убран по аннотации */
/* левый край внутренних блоков к линии рамки — обнуляем их горизонтальный padding */
.band--track :is(.group-title,.formats){padding-inline:0}


/* ══════════════════════════════════════════════════════════════════════════
   12. РЕЗУЛЬТАТЫ (.stats) + tooltip «93%*»
   ══════════════════════════════════════════════════════════════════════════ */
/* числовой ряд живёт прямо на сетке (раскладка — в §22); карточки в hairline-рамке */
.stats{display:grid;margin:var(--s5) 0 0}
.stat{border:1px solid var(--rule);padding:var(--s3) var(--gap)}
.stat .num{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1;margin-bottom:var(--s3);letter-spacing:0;color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
.stat .num sup{font-size:.5em;vertical-align:super}
.stat .slab{font-size:var(--fs-xs);font-weight:500;color:var(--ink);line-height:1.3;margin-bottom:var(--s1)}
.stat .sdesc{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
/* tooltip на звёздочке «93%*» — сноска всплывает по hover/фокусу; доступен с клавиатуры */
.tip{position:relative;cursor:help}
.tip>sup{color:var(--gold);border-bottom:1px dotted var(--gold-soft)}
.tip-bub{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:16em;background:var(--surface);border:1px solid var(--rule);
  color:var(--ink);font:400 var(--fs-2xs)/1.4 var(--sans);text-transform:none;letter-spacing:0;
  padding:var(--s1) var(--s2);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease);z-index:20}
.tip:hover .tip-bub,.tip:focus .tip-bub,.tip:focus-within .tip-bub{opacity:1;visibility:visible}


/* ══════════════════════════════════════════════════════════════════════════
   13. ФИЛОСОФИЯ — две колонки, делятся воздухом (padding)
   ══════════════════════════════════════════════════════════════════════════ */
.phil{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s5)}
.phil p{font-size:var(--fs-base);color:var(--muted);line-height:1.7}
.phil p+p{margin-top:var(--s3)}
.phil strong{color:var(--ink);font-weight:500}
.phil-text{padding:var(--s5) var(--s5) var(--s5) var(--gap)}
/* v47: relative-контекст для абсолютного фото + align-self:stretch — у .phil стоит
   align-items:start (текст по верху), поэтому колонку фото растягиваем на высоту
   строки явно, иначе она схлопывается под absolute-фото в 0. */
.phil-side{padding:var(--s5) var(--gap) var(--s5) var(--s5);position:relative;align-self:stretch}
.phil-side .photo+p{margin-top:var(--s3)}
/* v47: фото 02 (как hero) выведено из потока — не диктует высоту фиксированным
   aspect-ratio, а обрезается по высоте текстовой колонки слева (она ниже полного
   кадра → фото становится КОРОЧЕ, не выше). object-fit:cover + object-position
   центрируют фигуру. (На ≤980 стек возвращает static + aspect-ratio — медиазапрос ниже.) */
.phil .photo{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(160deg,var(--photo-1),var(--photo-2) 60%,var(--photo-3))}
.phil .photo .ph-img{object-position:center 28%}


/* ══════════════════════════════════════════════════════════════════════════
   14. АУДИТОРИЯ (.picks) — 3 карточки-ссылки; hover = паттерн .metric.lk
   ══════════════════════════════════════════════════════════════════════════ */
.picks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s5)}
/* hairline-рамка вокруг каждой карточки-роли */
.pick{display:flex;flex-direction:column;padding:var(--s4) var(--gap);border:1px solid var(--rule);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pick .role{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s3)}
.pick h3{font-family:var(--display);font-weight:400;font-size:var(--fs-lg);line-height:1.1;color:var(--ink);margin-bottom:var(--s2)}
.pick .pdesc{font-size:var(--fs-xs);color:var(--muted);line-height:1.55}
.pick .pdesc strong{color:var(--ink);font-weight:500}
/* .go — ссылка-действие: золотой цвет, тонкое подчёркивание, стрелка отъезжает на hover */
.pick .go{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s4);
  font-size:var(--fs-xs);font-weight:600;color:var(--gold);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--gold-soft)}
.pick .go svg{width:var(--arw);height:var(--arw);transition:transform var(--dur-fast) var(--ease)}
.pick:hover .go svg{transform:translateX(4px)}
/* интерактив как у .metric.lk — заливка золотом, текст тёмно-зелёный (--bg) */
.pick .role,.pick h3,.pick .pdesc,.pick .go{transition:color var(--dur-fast) var(--ease)}
.pick:hover{background:var(--gold);border-color:var(--gold)}
.pick:hover .role{color:rgba(21,33,32,.7)}
.pick:hover h3,.pick:hover .pdesc,.pick:hover .go{color:var(--bg)}
.pick:hover .go{text-decoration-color:var(--bg)}
.pick:hover .pdesc strong{color:var(--bg)}


/* ══════════════════════════════════════════════════════════════════════════
   15. ЯЧЕЙКИ ТРЕК-СЕКЦИЙ — group-title / ledger / formats / case / cta-row
   ══════════════════════════════════════════════════════════════════════════ */
/* подзаголовки трек-секций — золотой шеврон › (декоративный маркер, без рамки) */
.group-title{display:inline-flex;align-items:center;gap:14px;
  font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-top:var(--s5)}
.group-title::before{content:"";flex:none;width:8px;height:8px;
  border:solid var(--gold);border-width:2.5px 2.5px 0 0;transform:rotate(45deg)}
/* ledger-сетка без рамок/вертикалей — деления воздухом */
.ledger{display:grid;gap:var(--s2) var(--s4);margin-top:var(--s3)}
.ledger.c4{grid-template-columns:repeat(4,1fr)}
.ledger.c3{grid-template-columns:repeat(3,1fr)}
.cell{padding:var(--s4) var(--gap)}
.cell .k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s2)}
.cell .ct{font-size:var(--fs-xs);font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:var(--s1)}
.cell p{font-size:var(--fs-xs);color:var(--muted);line-height:1.55}
.cell p+p{margin-top:var(--s2)}
/* слоган-фраза формата — вид обычного описания (без наклона/уменьшения) */
.cell .em{display:block;font-size:var(--fs-base);font-style:normal;color:var(--muted);line-height:1.5;margin-bottom:var(--s2)}
.cell strong{color:var(--ink);font-weight:500}
/* «Знакомые ситуации?» — спокойная сетка 2×2 с воздухом; ключ ситуации золотом */
.ledger.ledger--soft{grid-template-columns:repeat(2,1fr)}
.ledger--soft .cell{padding:var(--s5) var(--s4)}
.ledger--soft .cell .k{color:var(--gold)}

/* форматы — воздушные индекс-блоки с золотым счётчиком 01/02/03, панельная рамка */
.formats{counter-reset:fmt;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5) var(--s5);margin-top:var(--s4);padding:0 var(--gap)}
.formats .cell{counter-increment:fmt;border:1px solid var(--rule);padding:var(--s4)}
.formats .cell::before{content:counter(fmt,decimal-leading-zero);
  display:block;font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1;
  color:var(--gold);margin-bottom:var(--s2);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
.formats .cell .k{margin-bottom:var(--s1)}
.formats .cell .ct{font-size:var(--fs-base);margin-bottom:var(--s2)}

/* кейс Было / Сделано / Стало — 3 ячейки в единой рамке, последняя тёмная */
.case{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3);
  border:1px solid var(--rule);padding:var(--s4)}
.case .cell.dark{background:var(--deep);padding:var(--s4) var(--gap)}
.case .ch{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:var(--s2)}
.case .cell.dark .ch{color:var(--on-dark)}
.case ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.case li{font-size:var(--fs-xs);color:var(--muted);line-height:1.45;display:flex;gap:var(--s1);align-items:baseline}
.case .cell.dark li{color:var(--on-dark-faint)}
.case b{color:var(--ink);font-weight:500}
.case .cell.dark b{color:var(--gold)}
.case p{font-size:var(--fs-xs);color:var(--muted);line-height:1.5;display:flex;gap:var(--s1);align-items:baseline}
.case .cell.dark p{color:var(--on-dark-faint)}
/* иконка-буллит: цвет задаётся классом колонки — «Было» faint, «Сделано» muted, «Стало» gold */
.bico{width:14px;height:14px;flex:none;position:relative;top:.15em}
.bico--was{color:var(--faint)}
.bico--do{color:var(--muted)}
.bico--done{color:var(--gold)}

/* CTA-строка под разделом */
.cta-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5);padding:0 var(--gap)}
.cta-note{font-size:var(--fs-base);color:var(--muted);font-style:normal;max-width:42em;line-height:1.55}
/* CTA трек-секций — выделенная панель (фон --lede-bg + паддинг, без рамки), заметка слева, кнопка справа */
.band--track .cta-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--lede-bg);padding:var(--s4);margin-top:var(--s5)}
.band--track .cta-row .cta-note{flex:1 1 20em;margin:0;max-width:none}
.band--track .cta-row .btn{flex:none}


/* ══════════════════════════════════════════════════════════════════════════
   16. «КТО Я» + матрица «7 в 1» + уровни + цитата
   ══════════════════════════════════════════════════════════════════════════ */
.prose-block{padding:0 var(--gap);max-width:64ch;margin-top:var(--s4)}
.prose-block p{font-size:var(--fs-base);color:var(--muted);line-height:1.7}
.prose-block strong{color:var(--ink);font-weight:500}
.subhead{padding:0 var(--gap);margin-top:var(--s6)}
.subhead .sub-h{font-family:var(--display);font-weight:400;font-size:var(--fs-xl);line-height:1.05;letter-spacing:.02em;color:var(--ink);text-wrap:balance}

/* about — колонки/строки делятся воздухом */
.about-grid{display:grid;grid-template-columns:1fr 2fr;margin-top:var(--s4)}
/* v47: relative-контекст для абсолютного фото (высоту колонки задаёт текст справа) */
.about-side{padding:var(--s5) var(--s5) var(--s5) var(--gap);position:relative}
.about-main>.r{padding:var(--s4) var(--gap) var(--s4) var(--s5)}

/* фото-блок «Кто я» — реальный портрет (фото 03, 1200×1798) */
.photo{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--photo-1),var(--photo-2) 60%,var(--photo-3))}
/* v47: фото 03 (как hero/фото 02) выведено из потока — обрезается по высоте блока
   «три уровня» справа (он ниже полного кадра → фото становится КОРОЧЕ, не выше);
   object-position центрирует фигуру. (На ≤980 стек возвращает static + aspect-ratio.) */
.photo.r34{position:absolute;inset:0}
.photo.r34 .ph-img{object-position:center 22%}

/* «7 в 1» — hairline-матрица реестра (в духе .case): 7 ячеек-ролей + итог-ячейка.
   Desktop 3 колонки: [1·2·3] [4·5·6] [7 на 2 колонки | итог]. */
.seven-grid{list-style:none;margin-top:var(--s4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--rule)}
.seven-grid .sv-cell{display:flex;flex-direction:column;background:var(--bg-alt);padding:var(--s4);
  transition:background var(--dur-fast) var(--ease)}
.sv-n{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);color:var(--gold);line-height:1;margin-bottom:var(--s2);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum";
  transition:color var(--dur-fast) var(--ease)}
.sv-role{font-size:var(--fs-base);font-weight:500;color:var(--ink);margin-bottom:6px;transition:color var(--dur-fast) var(--ease)}
.sv-d{font-size:var(--fs-xs);color:var(--muted);line-height:1.5;transition:color var(--dur-fast) var(--ease)}
.sv-wide{grid-column:span 2}
/* hover карточки-роли — золотая заливка (как .pick), текст инвертируется; итог-ячейка исключена */
.seven-grid .sv-cell:not(.sv-sum):hover{background:var(--gold)}
.sv-cell:not(.sv-sum):hover .sv-n{color:var(--bg)}
.sv-cell:not(.sv-sum):hover .sv-role{color:var(--bg)}
.sv-cell:not(.sv-sum):hover .sv-d{color:rgba(21,33,32,.72)}
/* итог-ячейка: акцент-подложка из золота (смысловой якорь секции) */
.sv-sum{background:rgba(201,185,138,.12);justify-content:center;gap:var(--s1)}
.sv-sum-k{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);color:var(--gold);line-height:1;letter-spacing:.02em}
.sv-sum-t{font-size:var(--fs-base);color:var(--ink);font-weight:500}

/* три уровня экспертизы */
.levels-intro{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.levels{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s3)}
.lvl{display:flex;gap:var(--s3)}
.lvl .n{font-family:var(--display);font-weight:300;font-size:var(--fs-lg);color:var(--gold);line-height:1;flex:none;width:1.4em;text-align:right;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
.lvl h4{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:6px}
.lvl p{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.lvl p+p{margin-top:var(--s1)}
/* финальная цитата «Кто я» — плашка-манифест (подложка --lede-bg, без выноса первой буквы) */
.quote{font-family:var(--sans);font-weight:400;font-size:var(--fs-base);line-height:1.7;color:var(--muted);letter-spacing:0;
  text-indent:0;background:var(--lede-bg);padding:var(--s3) var(--s4)}
.quote b{font-style:normal;font-weight:500;color:var(--ink)}
.about-main .cta-row{padding:0;margin-top:0}
.bio-link{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .15s}
.bio-link:hover{opacity:.6}
/* v33: метка «внешняя ссылка» ↗ — пункты «Биография» (nav/бургер/футер) и .bio-link
   ведут на отдельную страницу; иконка масштабируется от размера шрифта (em). */
.ext-link{display:inline-flex;align-items:center;gap:.4em}
.ext-ico{width:.82em;height:.82em;flex:none;opacity:.65}
.bio-link .ext-ico{width:1em;height:1em;opacity:.8}
/* v34: цитата + CTA «Связаться» + ссылка на биографию вынесены из сетки about-grid
   отдельным блоком под ней, читаемой ширины (по аннотации). Раскладка — в §22. */
/* v37: блок-обёртка без общего лимита ширины — цитата растягивается на всю ширину
   контент-колонки (по аннотации); CTA-панель ниже сама ограничена читаемой мерой. */
.about-outro{max-width:none;margin-top:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4)}
/* v36: CTA «Связаться» приведён к виду панели трек-секций (.band--track .cta-row) —
   единая тонированная плашка (--lede-bg) с паддингом, кнопка слева, подпись тянется
   справа plain-текстом. Раньше подпись несла отдельный фон .callout (по аннотации).
   v37: панель связана по ширине с текстом (max-width:64ch, align-self:start) —
   не растягивается на всю ширину вслед за цитатой, чтобы не было пустых «ушей». */
.about-outro .cta-row{margin-top:0;max-width:64ch;align-self:start;
  flex-wrap:wrap;align-items:center;gap:var(--s4);
  background:var(--lede-bg);padding:var(--s4)}
.about-outro .cta-row .btn{flex:none}
.about-outro .cta-row .cta-note{flex:1 1 20em;max-width:none;margin:0}
.about-outro .bio-link{align-self:start}


/* ══════════════════════════════════════════════════════════════════════════
   17. FAQ — полноширинные строки-аккордеоны (нативные <details>)
   ══════════════════════════════════════════════════════════════════════════ */
/* v34: одна колонка (по аннотации); align-items:start — строки при раскрытии не «прыгают» */
.faq{display:grid;grid-template-columns:1fr;row-gap:var(--s1);align-items:start;margin-top:var(--s5)}
/* рамка на весь <details> — обнимает вопрос И ответ единым блоком */
.qa{border:1px solid var(--rule)}
.qa>summary{list-style:none;cursor:pointer;display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;padding:var(--s4) var(--gap);
  transition:background-color var(--dur-fast) var(--ease)}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{background:var(--surface)}
/* раскрытая карточка целиком на подложке --surface (вопрос+ответ единым блоком, без внутренней линии) */
.qa[open]{background:var(--surface)}
/* v35: строгая колоночная сетка — категория (фикс. столбец) | вопрос (остаток).
   qa-q занимает всю ширину до шеврона (flex:1) → категории и вопросы стоят
   каждый на своей вертикальной линии, ряды не «прыгают» по ширине. */
.qa-q{flex:1;min-width:0;display:grid;grid-template-columns:minmax(9em,11em) 1fr;
  align-items:baseline;column-gap:var(--s4)}
.qa-cat{line-height:1.4;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.qa-t{font-size:var(--fs-base);color:var(--ink);line-height:1.4}
.qa-chev{flex:none;width:var(--arw);height:var(--arw);color:var(--faint);margin-top:4px;transition:transform var(--dur-fast) var(--ease)}
.qa[open] .qa-chev{transform:rotate(180deg)}
/* ответ занимает всю ширину родителя (max-width снят), как и вопрос */
.qa-a{padding:0 var(--gap) var(--s4)}
.qa-a p{font-size:var(--fs-xs);color:var(--muted);line-height:1.65}


/* ══════════════════════════════════════════════════════════════════════════
   18. КОНТАКТЫ — глубокая панель (--deep), светлый текст
   ══════════════════════════════════════════════════════════════════════════ */
.band--dark{background:var(--deep);color:var(--on-dark)}
.band--dark h2{color:var(--on-dark)}
.band--dark .lede{color:var(--on-dark-faint)}
.band--dark .eyebrow-no{color:var(--on-dark)}
.contacts{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s5)}
.c-info{padding:var(--s5) var(--s5) var(--s5) var(--gap)}
.c-form{padding:var(--s5) var(--gap) var(--s5) var(--s5)}
.ci{margin-bottom:var(--s4)}
.ci-k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:var(--s1)}
.ci-v{font-size:var(--fs-lg);font-weight:500;color:var(--on-dark)}
/* подчёркивание проявляется цветом на hover */
a.ci-v{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:transparent;
  transition:text-decoration-color var(--dur-fast) var(--ease),opacity .15s}
a.ci-v:hover{text-decoration-color:var(--gold);opacity:1}
.chans{margin-top:var(--s5)}
.chan-row{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2);align-items:flex-start}
/* Telegram-чип = столбик «чип + подпись под ним»; align-items:flex-start → чип MAX по верху */
.chan-item{display:inline-flex;flex-direction:column;gap:6px}
.chan-lbl{font-size:var(--fs-2xs);color:var(--on-dark-faint);letter-spacing:.04em;padding-left:2px}
.chan{display:inline-flex;align-items:center;gap:var(--s1);border:1px solid var(--hair-dark);padding:8px 16px;font-size:var(--fs-xs);color:var(--on-dark);transition:background .15s,border-color .15s}
.chan:hover{background:var(--chan-hover);border-color:var(--hair-dark-strong)}
.chan-ico{width:16px;height:16px;flex:none;fill:currentColor}
.form-t{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:var(--s3)}
.field{display:block;width:100%;background:transparent;border:1px solid var(--hair-dark);color:var(--on-dark);
  font:inherit;font-size:var(--fs-xs);padding:12px 14px;margin-bottom:var(--s2)}
.field::placeholder{color:var(--on-dark-faint)}
textarea.field{min-height:96px;resize:vertical}
.field:focus{outline:none;border-color:var(--hair-dark-strong)}
.c-form .btn[type="submit"]{margin-top:var(--s2)}


/* ══════════════════════════════════════════════════════════════════════════
   19. ФУТЕР
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer .frame{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s4)}
.ft-l{display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);color:var(--muted)}
.ft-logo{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--photo-1),var(--photo-3))}
.ft-logo svg{width:60%;height:auto;color:var(--ink);opacity:.4}
.ft-r{display:flex;flex-wrap:wrap;gap:var(--s4);font-size:var(--fs-xs)}
.ft-r a{color:var(--faint);transition:color .15s}
.ft-r a:hover{color:var(--ink)}


/* ══════════════════════════════════════════════════════════════════════════
   20. ПОЛОСА-РОЛИ (scrollspy) — выезжает 2-м ярусом под липкой шапкой
   ══════════════════════════════════════════════════════════════════════════ */
.rolebar{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:60;
  background:var(--bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  /* скрытие: уезжает полностью вверх за шапку (своя высота + высота шапки) */
  transform:translateY(calc(-100% - var(--header-h)));visibility:hidden;pointer-events:none;
  transition:transform var(--dur) var(--ease),visibility var(--dur) var(--ease),top var(--dur-fast) var(--ease);
}
.rolebar.is-visible{transform:translateY(0);visibility:visible;pointer-events:auto}
.rolebar__inner{display:flex}
.rolebar__tab{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s2);font-size:var(--fs-xs);font-weight:500;line-height:1.2;color:var(--muted);
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.rolebar__tab:hover{color:var(--ink)}
.rolebar__tab.is-active{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}


/* ══════════════════════════════════════════════════════════════════════════
   21. СЛОВАРЬ ГЛУБИНЫ — воздушные обёртки, ломающие «плоское полотно»
   ══════════════════════════════════════════════════════════════════════════ */
/* .card-grid — grid + gap-контейнер; никаких поверхностей и линий */
.card-grid{display:grid;border:none;gap:var(--s4) var(--s5);padding:0 var(--gap);margin-top:var(--s3)}
.card-grid.g4{grid-template-columns:repeat(2,1fr)}  /* v37: 2×2 (фолбэк вне frame-сетки) */
.card-grid.g3{grid-template-columns:repeat(3,1fr)}
.card-grid>.cell{padding:0}
/* ситуационные ячейки «Знакомые ситуации?» (g4, трек-секции) — панельная рамка + паддинг */
.card-grid.g4>.cell{border:1px solid var(--rule);padding:var(--s4)}
.card-grid>.cell .k{color:var(--gold)}   /* ключ ситуации — золотом */
/* цитата-манифест в Философии — lede-плашка */
.phil-manifest{margin-top:var(--s4);
  background:var(--lede-bg);padding:var(--s3) var(--s4);
  font-size:var(--fs-base);line-height:1.55;color:var(--muted)}
.phil-manifest b,.phil-manifest strong{font-weight:500;color:var(--ink);font-style:normal}
/* оптический мотив (кольца линзы) вместо пустых фото-боксов */
.optic{background:var(--surface)}
.optic .optic-art{position:absolute;inset:0;width:100%;height:100%;color:var(--faint);opacity:.6}
.optic .optic-art use,.optic .optic-art{pointer-events:none}
/* врезка для CTA-заметок рядом с кнопкой — вид плашки-описания */
.callout{background:var(--lede-bg);
  padding:var(--s2) var(--s3);font-style:normal;color:var(--muted);
  font-size:var(--fs-base);line-height:1.55;max-width:52em}
/* лёгкое чередование фона секций (база ↔ еле приподнятый зелёный) */
.band--alt{background:var(--bg-alt)}

/* ── v43: LIGHTBOX — увеличение контентных фото по клику ──
   Реализация — GLightbox (локально, assets/vendor/glightbox/); инициализация в
   app.js §6. Здесь только ссылка-обёртка `.ph-link` заполняет фото-контейнер. */
.ph-link{display:block;width:100%;height:100%}


/* ══════════════════════════════════════════════════════════════════════════
   22. РАСКЛАДКА ПО 12-КОЛОНОЧНОЙ СЕТКЕ — блоки секций садятся на модульную сетку
      .band .frame; селекторы префиксованы `.band .frame>` ради приоритета над
      дефолтным `.band .frame>*{grid-column:1/-1}`.
   ══════════════════════════════════════════════════════════════════════════ */
.band .frame>.group-title,.band .frame>.cta-row{padding-inline:0}
/* CTA-панели трек-секций возвращаем горизонтальный внутренний отступ (правило позже → перебивает) */
.band--track .frame>.cta-row{padding-inline:var(--s4)}
.band .frame>.group-title{justify-self:start}   /* шеврон-маркер прижат к левому рельсу */
/* v35: проза — на всю ширину контентной колонки (было 1/9), не ужимаем искусственно */
.band .frame>.prose-block{grid-column:1/-1;max-width:none;padding-inline:0}
/* .subhead («7 в 1») — v35: вертикальный стек, плашка-описание под подзаголовком (как .head) */
.band .frame>.subhead{grid-column:1/-1;padding-inline:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.subhead .sub-h{margin:0}
.band .frame>.subhead .lede{max-width:none;text-align:left;align-self:flex-start;
  background:var(--lede-bg);padding:var(--s2) var(--s3);border-radius:0;margin:0;text-wrap:pretty}
/* на тёмной панели контактов плашка описания — светлая полупрозрачная */
.band--dark .head .lede{background:rgba(255,255,255,.08)}
/* v37: числовой ряд разбит на строки — 3 карты сверху (по трети), 2 снизу по 50/50.
   6-колоночная сетка: верхние по span 2 (3 в ряд); нижние две по span 3 (половина). */
.band .frame>.stats{grid-column:1/-1;margin:var(--s5) 0 0;
  grid-template-columns:repeat(6,1fr);column-gap:var(--col-gap);row-gap:var(--s4)}
.band .frame>.stats>.stat{grid-column:span 2}
.band .frame>.stats>.stat:nth-child(4){grid-column:1/4}
.band .frame>.stats>.stat:nth-child(5){grid-column:4/7}
/* v43: текст 1–8 | портрет+цитата 8–12 (7:5) — вертикальное фото уже колонкой,
   баланс смещён в пользу текста; выравнивание по верху, чтобы высокий портрет
   не растягивал текстовую колонку и не давал пустот. */
.band .frame>.phil{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--col-gap);align-items:start}
.phil-text{grid-column:1/8;padding:0}
.phil-side{grid-column:8/13;padding:0}
/* card-grid на 12 колонках */
.band .frame>.card-grid{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--col-gap);row-gap:var(--s4);padding-inline:0}
.card-grid.g3>.pick{grid-column:span 4}
/* v37: «Знакомые ситуации?» — 4 карты в 2 ряда по 2 (span 6 = половина 12-кол. сетки) */
.card-grid.g4>.cell{grid-column:span 6}
/* форматы: 3 блока по 4 колонки */
.band .frame>.formats{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--col-gap);row-gap:var(--s5);padding-inline:0}
.formats>.cell{grid-column:span 4}
/* кейс Было/Сделано/Стало: 3 колонки по 4 */
.band .frame>.case{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--col-gap);row-gap:var(--s2)}
.case>.cell{grid-column:span 4}
/* матрица «7 в 1» — full-bleed на всю ширину frame-сетки (её 3-кол. сетка своя) */
.band .frame>.seven-grid{grid-column:1/-1}
/* about: фото 1–4 | контент 5–12 */
.band .frame>.about-grid{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--col-gap)}
.about-side{grid-column:1/5;padding:0}
.about-main{grid-column:5/13}
.about-main>.r{padding-inline:0}
/* контакты: инфо 1–5 | форма 7–12 */
.band .frame>.contacts{grid-column:1/-1;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--col-gap)}
.c-info{grid-column:1/6;padding:0}
.c-form{grid-column:7/13;padding:0}


/* ══════════════════════════════════════════════════════════════════════════
   23. АДАПТИВ — сетка сворачивается на узких экранах (по убыванию брейкпоинта)
   ══════════════════════════════════════════════════════════════════════════ */
/* v33: бургер появляется раньше (≤1360px) — 7 пунктов меню + контакты в шапке
   без тесноты помещаются только на большом экране; ниже шапка = лого/имя + бургер,
   nav/контакты/header-actions уходят в полноэкранный оверлей. */
@media(max-width:1360px){
  .header-contacts{display:none}
  .nav{display:none}
  .header-actions{display:none}
  .burger{display:flex}
}
/* матрица «7 в 1»: 3 → 2 колонки */
@media(max-width:1100px){
  .seven-grid{grid-template-columns:repeat(2,1fr)}
  .sv-wide{grid-column:auto}
}
/* планшет: одноколоночная сетка секций */
@media(max-width:980px){
  /* v38: на мобиле кластер выше вьюпорта — центрирование подрезало бы верх hero,
     возвращаем верхнее выравнивание (контент и так выше сгиба) */
  .screen{justify-content:flex-start}
  .hero .frame{grid-template-columns:1fr}
  .col-text{padding:var(--s5) 0}
  /* v35: на одноколоночном hero возвращаем перенос имени и строки «для:» */
  h1{white-space:normal;text-wrap:balance}
  .hero-aud{flex-wrap:wrap;gap:12px}
  /* v43: реальное фото — не фиксируем высоту колонки, портрет держит своё
     соотношение (иначе cover обрезал бы кадр на узком экране) */
  .col-photo{height:auto}
  /* v46: на узком экране портрет возвращается в поток (static) и держит полный
     вертикальный кадр — стек, обрезка не нужна */
  .portrait{position:static;inset:auto;aspect-ratio:1200/1797;height:auto;max-height:none}
  .metrics .frame{grid-template-columns:repeat(2,1fr)}
  .band .frame{padding-block:var(--s5)}
  .band .frame>.prose-block{grid-column:1/-1}
  /* заголовок остаётся flex; плашка-описание переносится под заголовок на всю ширину */
  .band .head,.band .frame>.subhead{grid-column:1/-1;gap:var(--s2)}
  .head .lede,.subhead .lede{flex-basis:100%}
  .band .frame>.stats,.band .frame>.phil,.band .frame>.card-grid,
  .band .frame>.formats,.band .frame>.case,.band .frame>.about-grid,
  .band .frame>.contacts{grid-column:1/-1;grid-template-columns:1fr;row-gap:var(--s4)}
  /* v34: сбрасываем спаны карт stats (иначе явные линии span 2 / nth-child ломают
     одну колонку и дают горизонтальный скролл). nth-child-селекторы включены явно —
     у них специфичность выше базового правила, простого grid-column:auto мало. */
  .band .frame>.stats>.stat,
  .band .frame>.stats>.stat:nth-child(4),
  .band .frame>.stats>.stat:nth-child(5){grid-column:auto}
  .phil-text,.phil-side,.about-side,.about-main,.c-info,.c-form{grid-column:1/-1}
  /* v47: в одноколоночном стеке фото 02/03 возвращаются в поток (static) и держат
     полный вертикальный кадр — обрезка не нужна (как hero-портрет на ≤980) */
  .phil .photo{position:static;inset:auto;aspect-ratio:1200/1696}
  .photo.r34{position:static;inset:auto;aspect-ratio:1200/1798}
  /* матрица «7 в 1»: 2 → 1 колонка */
  .seven-grid{grid-template-columns:1fr}
  /* CTA трек-секций — стек; гориз. отступ панели не нужен (иначе flex:none кнопка переполняет) */
  .band--track .cta-row{flex-direction:column;align-items:stretch;text-align:center}
  .band--track .frame>.cta-row{padding-inline:0}
  /* кнопка во всю ширину стека; длинный лейбл переносится, а не даёт горизонтальный скролл */
  .band--track .cta-row .btn{justify-content:center;width:100%;min-width:0;
    white-space:normal;height:auto;min-height:var(--btn-h);padding-block:var(--s2);
    text-align:center;line-height:1.25}
  /* FAQ — одна колонка, категория над вопросом (v35: сбрасываем grid обратно в стек) */
  .faq{grid-template-columns:1fr}
  .qa-q{display:flex;flex-direction:column;gap:var(--s1)}
  .qa-cat{flex:none}
  /* about-outro: кнопка «Связаться» + подпись — стек на мобиле; лимит ширины снят */
  .about-outro .cta-row{flex-direction:column;align-items:stretch;max-width:none}
  .about-outro .cta-row .btn{justify-content:center;width:100%}
  /* полоса-роли остаётся видимой на мобильных — ужимаем */
  .rolebar__inner{padding:0}
  .rolebar__tab{font-size:var(--fs-2xs);padding:var(--s2) var(--s1)}
}
/* телефон: одна колонка метрик, hero-кнопки во всю ширину, ужатый воздух */
@media(max-width:600px){
  /* v43: телефонный override размеров тела удалён — теперь база :root уже 15px
     (см. §1), десктоп = мобилка, дублировать не нужно. */
  .metrics .frame{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:stretch;width:100%}
  .cta .btn{width:100%;justify-content:center}
  .col-text{padding:var(--s4) 0}
}
/* очень узкие экраны: подзаголовок brand скрыт, пункты меню мельче */
@media(max-width:420px){
  .brand .sub{display:none}
  .mobile-menu__nav a{font-size:var(--fs-md)}
}


/* ══════════════════════════════════════════════════════════════════════════
   24. ДВИЖЕНИЕ — prefers-reduced-motion выключает анимации/переходы
   ══════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  body.grain-on .grain{animation:none}   /* специфичность ≥ правила включения зерна */
  .mobile-menu,.burger__line{transition:none}
  .rolebar,.rolebar__tab{transition:none}
}