/* ==========================================================================
   Иван Игнатов — лендинг
   Токены → база → типографика → компоненты → секции → адаптив → motion
   ========================================================================== */

:root {
  /* Цвета */
  --ink: #0F0F0F;
  --white: #FFFFFF;
  --paper: #F3F3F1;
  --yellow: #FFE23D;
  --green: #38B54A;
  --grey-dark: #5F5F5F;
  --grey: #8E8E8E;
  --hairline-dark: #3A3A3A;
  --hairline-mid: #2A2A2A;

  /* Шрифты */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Inter с плотным трекингом — наборный шрифт PDF-портфолио. */
  --font-folio: 'Inter', 'Golos Text', system-ui, sans-serif;

  /* Сетка */
  --container: 1440px;
  --pad-x: clamp(16px, 4.4vw, 80px);
  /* Отступ горизонтальных лент: на широких экранах они начинаются
     там же, где колонка контейнера, а не у края окна. */
  --strip-pad: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
  --section-y: clamp(64px, 8vw, 120px);
  --band-y: clamp(56px, 7vw, 104px);

  /* Линии */
  --rule: 2px solid var(--ink);
  --rule-dark: 2px solid var(--hairline-mid);

  /* Фото */
  --photo-filter: grayscale(1) contrast(1.06);
}

/* --------------------------------------------------------------------------
   База
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Пока виден cookie-баннер, скрипт пишет его высоту в --cookie-h: страница получает
   отступ снизу, а поле в фокусе прокручивается выше баннера. */
html { scroll-padding-bottom: var(--cookie-h, 0px); }

/* Якорные переходы: цель не должна уезжать под липкую шапку. */
:target,
section[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: var(--cookie-h, 0px);
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
.section--white :focus-visible,
.section--paper :focus-visible,
.section--yellow :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Фоновые режимы секций */
.section--ink { background: var(--ink); color: var(--white); }
.section--white { background: var(--white); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--yellow { background: var(--yellow); color: var(--ink); }

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

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Кегль подобран так, чтобы авторская разбивка H1 на четыре строки
     держалась во всём диапазоне: строка «следуют решения» — самая длинная. */
  font-size: clamp(40px, 5.7vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  /* Контекст наложения на весь заголовок: обводка слова уходит под буквы
     и этого слова, и строки над ним. */
  position: relative;
  isolation: isolate;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.h2--formula { font-size: clamp(32px, 4.2vw, 60px); max-width: 1100px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.h2--approach { font-size: clamp(34px, 4.6vw, 68px); line-height: 0.94; margin-bottom: clamp(36px, 4.4vw, 60px); }
.h2--cta { font-size: clamp(34px, 5.4vw, 84px); line-height: 0.94; letter-spacing: -0.01em; max-width: 1200px; margin-bottom: clamp(40px, 5vw, 72px); }

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1;
  overflow-wrap: break-word;
}
.h3--why {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.05;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow--yellow {
  color: var(--yellow);
  font-size: clamp(13px, 1.45vw, 21px);
  margin-bottom: clamp(20px, 3vw, 40px);
}
.eyebrow--grey {
  color: var(--grey);
  font-size: clamp(13px, 1.4vw, 19px);
  margin-bottom: clamp(16px, 2vw, 26px);
}

.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.label--grey { color: var(--grey); font-weight: 500; font-size: 11px; margin-bottom: 6px; }
.label--yellow { color: var(--yellow); margin-bottom: 8px; }
.label--section {
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.24em;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.label--second { margin-top: clamp(40px, 5vw, 72px); }

.accent-green { color: var(--green); }

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 20px 34px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--primary:hover { background: var(--white); color: var(--ink); }

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 18px 32px;
}
.btn--outline:hover { background: var(--white); color: var(--ink); }

.btn--dark { background: var(--ink); color: var(--white); font-size: 15px; padding: 18px 30px; min-height: 48px; }
.btn--dark:hover { background: var(--yellow); color: var(--ink); }

.btn--compact { font-size: 14px; padding: 14px 22px; min-height: 48px; }

/* --------------------------------------------------------------------------
   Маркерные обводки
   -------------------------------------------------------------------------- */

.marker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Рисунки дизайнера (PNG/WebP с кистью): растягиваются ровно в рамку элемента —
   холсты нарисованы под размеры из ТЗ, так что искажение минимальное. */
.marker--drawn { max-width: none; object-fit: fill; }

.marker-word {
  position: relative;
  display: inline-block;
  padding: 0 0.1em;
}
.marker-word .marker {
  /* Овал прижат к слову: выше начинается следующая строка H1,
     штрих не должен заходить на её прописные. */
  inset: auto;
  left: -9%;
  top: -8%;
  width: 118%;
  height: 128%;
  overflow: visible;
  /* По правке дизайнера обводка лежит под буквами, а не поверх. */
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Фото
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  width: 100%;
  filter: var(--photo-filter);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--45 { aspect-ratio: 4 / 5; }
/* Цветной кадр — по правке дизайнера в «Направлениях» 01 и 03. */
.photo--color { filter: none; }
/* Кадр 03 как у дизайнера: от верха флипчарта до пола под табуретом. */
.photo--34 { aspect-ratio: 3 / 4; }
.photo--focus-body img { object-position: center bottom; }
.photo--43 { aspect-ratio: 4 / 3; }
.photo--fill { height: 100%; min-height: 520px; }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 2px solid transparent;
  padding: 22px 0;
  transition: padding 0.22s ease, border-color 0.22s ease;
}
.site-header.is-scrolled {
  padding: 10px 0;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}
.site-header__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 24px);
  letter-spacing: 0.12em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 28px);
  margin-left: auto;
}
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.02em;
  /* тап-зона наравне с кнопкой шапки, высоту шапки это не меняет */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   1. Первый экран
   -------------------------------------------------------------------------- */

/* Видео-фон: под тёмной вуалью, чтобы текст оставался читаемым. */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 6vw, 90px) 0 clamp(56px, 7vw, 110px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.82);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
}
.hero__inner { position: relative; z-index: 1; }
/* Надзаголовок идёт отдельной строкой во всю ширину — по правке заказчика. */
.hero__eyebrow {
  margin-bottom: clamp(18px, 2.4vw, 34px);
}
/* В одну строку — только там, где строка реально помещается. */
@media (min-width: 1025px) {
  .hero__eyebrow { white-space: nowrap; }
}
@media (max-width: 560px) {
  .hero__eyebrow { letter-spacing: 0.16em; }
}
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: flex-start;
}
.hero__text { flex: 1 1 520px; min-width: 280px; }
.hero__media { flex: 1 1 380px; min-width: 260px; position: relative; }

.hero__lead {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 640px;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.5;
  text-wrap: pretty;
}
/* Заказчик просил кнопки друг под другом, а не в ряд. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 48px);
  max-width: 460px;
}
.hero__actions .btn { flex: 0 0 auto; width: 100%; }

/* Пропорция облака ограничена снизу: на широких колонках текст в 2–3 строки
   иначе вытягивал контур в полосу до 6:1, и он начинал резать текст.
   aspect-ratio задаёт только минимальную высоту — длинный текст облако растянет. */
/* Облака нарисованы дизайнером овалами (холст 1560×825). Пропорция облака задана
   под рисунок, текст стоит по центру в прямоугольнике, вписанном в овал: границы
   --t/--r/--b/--l измерены по самому рисунку (с запасом от штриха), а кегль
   задан в долях ширины облака (cqw) — при любом размере текст не задевает контур.
   На телефоне облако выше (картинка растягивается по вертикали), иначе реплика
   поместилась бы только мелким кеглем. */
.quote-bubble {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--bubble-ratio, 1560 / 825);
}
.quote-bubble__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}
.quote-bubble--hero {
  margin: -8% 0 0 -4%;
  width: min(108%, 540px);
  /* Хвостик внизу слева. */
  --t: 27%; --r: 16%; --b: 31%; --l: 20%;
  --fs: 3.35cqw;
}
.quote-bubble--green {
  margin-top: clamp(36px, 4vw, 56px);
  width: min(100%, 580px);
  /* Хвостик внизу справа. */
  --t: 25%; --r: 21%; --b: 33%; --l: 16.5%;
  --fs: 3.35cqw;
}
.quote-bubble__text {
  position: absolute;
  top: var(--t);
  right: var(--r);
  bottom: var(--b);
  left: var(--l);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* По правке дизайнера — не курсив: обычный шрифт сайта. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--yellow);
  text-wrap: balance;
}
@supports (container-type: inline-size) {
  .quote-bubble__text { font-size: var(--fs); }
}
/* Текст белый, обводка облака остаётся зелёной. */
.quote-bubble__text--green { color: var(--white); }

@media (max-width: 560px) {
  .quote-bubble { --bubble-ratio: 1.42; }
  .quote-bubble--hero { --fs: 3.85cqw; }
  .quote-bubble--green { --fs: 3.95cqw; }
}

/* --------------------------------------------------------------------------
   2. Цифры доверия
   -------------------------------------------------------------------------- */

.stats { padding: clamp(40px, 5vw, 72px) 0; }
.stats .label--section {
  font-size: clamp(13px, 1.25vw, 18px);
  margin-bottom: clamp(24px, 3vw, 44px);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.stat { border-top: var(--rule); padding-top: 14px; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5.6vw, 96px);
  line-height: 0.9;
}
.stat__value--nowrap { white-space: nowrap; }
.stat__caption {
  margin-top: 10px;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.35;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   3. Задачи
   -------------------------------------------------------------------------- */

.tasks { padding: var(--section-y) 0; }
.tasks .h2 { max-width: 1000px; }
/* Заказчик просил галочки вместо плюсов и текст без рамок. */
.tasks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px);
}
.task {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.task__check {
  position: relative;
  flex: 0 0 auto;
  width: clamp(40px, 3.8vw, 54px);
  height: clamp(40px, 3.8vw, 54px);
  margin-top: -10px;
}
.task__check img {
  width: 100%;
  height: 100%;
  display: block;
}
.task__text {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.35;
  font-weight: 500;
  text-wrap: pretty;
}
.tasks__next {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dark);
}

/* --------------------------------------------------------------------------
   4. Авторская формула
   -------------------------------------------------------------------------- */

.formula { padding: var(--section-y) 0; }
/* Формула нарисована дизайнером от руки, текст формулы — в alt картинки. */
.formula__img {
  width: min(100%, 780px);
  height: auto;
  margin-left: -1%;
}
.formula__note {
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: var(--rule);
  max-width: 820px;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5. «Зелёный» подход
   -------------------------------------------------------------------------- */

.approach { padding: var(--section-y) 0 0; }
.approach__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 72px);
}
.approach__body {
  flex: 1 1 520px;
  min-width: 280px;
  padding-bottom: clamp(56px, 7vw, 110px);
}
/* Заказчик просил фото слева, текст справа. */
.approach__media { flex: 1 1 340px; min-width: 260px; align-self: stretch; order: -1; }

.principles { display: grid; gap: clamp(24px, 2.6vw, 38px); }
.principle {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: flex-start;
  border-top: var(--rule-dark);
  padding-top: clamp(18px, 2vw, 26px);
}
/* Цифры нарисованы дизайнером (холст 138×138, белые). */
.principle__num {
  flex: 0 0 auto;
  width: clamp(44px, 4vw, 58px);
  height: clamp(44px, 4vw, 58px);
  margin-top: -6px;
}
.principle__text { line-height: 1.45; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   6. Направления работы
   -------------------------------------------------------------------------- */

.directions { padding: var(--section-y) 0; }
.directions .h2 { margin-bottom: clamp(40px, 5vw, 72px); }

.direction {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: var(--rule);
}
.direction + .direction { padding-top: clamp(40px, 5vw, 72px); }
.direction--last { border-bottom: 0; padding-bottom: 0; }
/* Колонка фото одной ширины у всех трёх блоков — края фото и жёлтых
   плашек совпадают, и перестраиваются блоки на одной и той же ширине. */
.direction__media { flex: 0 0 clamp(300px, 36vw, 500px); min-width: 0; }
.direction__body { flex: 1 1 0; min-width: 0; }
.direction--reverse .direction__media { order: 2; }
.direction--reverse .direction__body { order: 1; }

.direction__head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
/* Цифры нарисованы дизайнером (01. 02. 03.). */
.direction__num {
  flex: 0 0 auto;
  height: clamp(56px, 5.6vw, 82px);
  width: auto;
}
.direction__desc {
  margin-bottom: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  max-width: 560px;
  text-wrap: pretty;
}

/* Блок тем и формата — по референсу из портфолио: Inter с плотным
   трекингом, жирная подпись и маркерная обводка под текстом. */
.topics {
  position: relative;
  isolation: isolate;
  display: inline-block;
  max-width: 100%;
  /* Отрицательный отступ равен внутреннему: текст стоит ровно по колонке,
     а обводка выходит в поле. */
  padding: 22px 34px 24px;
  margin: 0 0 clamp(22px, 2.4vw, 32px) -34px;
  font-family: var(--font-folio);
  letter-spacing: -0.035em;
  font-size: clamp(17px, 1.6vw, 25px);
  line-height: 1.16;
}
.topics__label { font-weight: 700; margin-bottom: 2px; }
.topics__list { display: grid; gap: 3px; }
.topics__list li { font-weight: 400; }
.topics--plus .topics__list li::before { content: "+\00a0"; }
.topics__flow { font-weight: 400; max-width: 34ch; text-wrap: pretty; }
.topics--frame {
  padding: 18px 28px 20px 46px;
  margin: 0 0 clamp(22px, 2.4vw, 32px) -28px;
}
.topics .marker {
  z-index: -1;
  overflow: visible;
}
/* Эллипс, вписанный в рамку блока, не охватывает углы текста — овал дизайнера
   больше блока примерно в √2 раза по тексту. Рамка «Формата» — чуть шире блока. */
.topics .marker--drawn {
  left: -13%;
  top: -14%;
  width: 126%;
  height: 128%;
}
.topics--frame .marker--drawn {
  left: -5%;
  top: -7%;
  width: 110%;
  height: 114%;
}
/* Блок у левого края страницы (направление 02 на десктопе, всё на телефоне):
   без выноса влево, иначе овал обрезается краем экрана. */
.direction--reverse .topics { margin-left: 0; }

/* Неразрывная группа: «№ 152-ФЗ», «и/или». */
.nowrap { white-space: nowrap; }

.result {
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(20px, 2.2vw, 28px);
}
.result .label { margin-bottom: 8px; }
.result__text { line-height: 1.4; font-weight: 500; text-wrap: pretty; }



/* --------------------------------------------------------------------------
   7. Форматы
   -------------------------------------------------------------------------- */

.formats { padding: var(--section-y) 0; }
.formats__grid {
  display: grid;
  /* Спецификация: шесть пунктов в две колонки. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Заказчик просил убрать полоски — ритм держат отступы. */
  gap: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 56px);
}
.format {
  display: flex;
  gap: 16px;
  align-items: center;
}
.format__mark {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.format__mark img { width: 100%; height: 100%; }
.format__text {
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.3;
  font-weight: 500;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Опыт и доверие
   -------------------------------------------------------------------------- */

.experience { padding: var(--section-y) 0; }
.experience__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: flex-start;
}
.credentials { flex: 1 1 440px; min-width: 280px; }
/* Заказчик просил убрать полоски. */
.credentials { display: grid; gap: clamp(16px, 1.9vw, 24px); }
.credentials li {
  display: flex;
  gap: 14px;
  line-height: 1.4;
  font-weight: 500;
  text-wrap: pretty;
}
.credentials__plus {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: -2px;
}
.credentials__plus img { width: 100%; height: 100%; }

.why {
  position: relative;
  flex: 1 1 400px;
  min-width: 280px;
  background: var(--yellow);
  padding: clamp(26px, 3vw, 44px);
}
/* Стрелка дизайнера: начинается в «Форматах», пересекает границу секций и упирается
   в жёлтый блок. Только пока блок стоит справа от списка — в столбик она легла бы на текст. */
.why__arrow {
  position: absolute;
  bottom: 100%;
  left: 33%;
  width: clamp(104px, 9.6vw, 150px);
  height: auto;
  margin-bottom: -16px;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .why__arrow { display: none; }
}
.why__list { display: grid; gap: 12px; }
.why__list li {
  line-height: 1.35;
  font-weight: 500;
  padding-left: 18px;
  border-left: var(--rule);
}

/* --------------------------------------------------------------------------
   9. Клиенты и проекты
   -------------------------------------------------------------------------- */

.clients { padding: var(--band-y) 0; }
/* Вместо логотипов — набор названий: заказчик просил текстом в стиле сайта. */
.brandline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.brandline__dot {
  color: var(--yellow);
  font-weight: 700;
  /* Точка-разделитель не должна слипаться с соседними названиями. */
  padding: 0 0.5em;
}
.brandline--lead {
  font-size: clamp(26px, 3.4vw, 50px);
  gap: 6px 0;
}
.brandline--sub {
  font-size: clamp(16px, 1.7vw, 25px);
  gap: 4px 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brandline--sub .brandline__dot { padding: 0 0.45em; }
/* Дисклеймер юриста под отзывами (ст. 10.1 152-ФЗ). */
.testimonials__note {
  margin-top: clamp(24px, 2.6vw, 36px);
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-dark);
  text-wrap: pretty;
}
/* Сноска по требованию юриста: часть мероприятий проведена через тренинговые центры. */
.clients__note {
  margin-top: clamp(28px, 3vw, 44px);
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-dark);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. Отзывы
   -------------------------------------------------------------------------- */

.testimonials { padding: var(--section-y) 0; }
.testimonials__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px clamp(24px, 3vw, 48px);
}
.testimonials__head .h2 { margin-bottom: 0; }

/* Лента прокручивается вручную: автокарусели на сайте нет нигде. */
.testimonials__strip {
  /* Ширина карточки — доля видимой полосы, а не vw: тогда следующая карточка
     всегда выглядывает из-за края и ленту видно как ленту. При vw на ширинах
     около 1460–1500px три карточки вставали впритык и лента читалась сеткой. */
  --gap: clamp(14px, 1.6vw, 24px);
  --per-view: 3.35;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  align-items: stretch;
  margin-top: clamp(32px, 4vw, 56px);
  padding: 4px var(--pad-x) clamp(16px, 2vw, 28px) var(--strip-pad);
  /* Без этого mandatory-snap сам уводит ленту вправо и съедает левый отступ. */
  scroll-padding-inline-start: var(--strip-pad);
  scrollbar-width: thin;
}

.testimonial {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 272px;
  max-width: 460px;
  scroll-snap-align: start;
  background: var(--paper);
  border: var(--rule);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
}
/* Формат по правкам заказчика: фото → ФИО → должность → отзыв. */
.testimonial__photo {
  width: clamp(72px, 7vw, 92px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 2px dashed var(--grey-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial__photo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-dark);
}
.testimonial__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__caption {
  display: grid;
  gap: 6px;
  padding-bottom: clamp(14px, 1.6vw, 20px);
  border-bottom: var(--rule);
}
.testimonial__name .fill { white-space: normal; }
.testimonial__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.testimonial__role {
  font-size: 13px;
  line-height: 1.3;
  color: var(--grey-dark);
}
.testimonial__quote {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.4;
  font-weight: 500;
  text-wrap: pretty;
  flex: 1 1 auto;
}
/* Свёрнутое состояние: длинные отзывы обрезаются, разворачивает кнопка. */
.testimonial__quote[data-clamped] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.testimonial__more {
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 4px 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.testimonial__more:hover { background: var(--yellow); }

/* Стрелки прокрутки ленты */
.strip-nav { display: flex; gap: 2px; }
.strip-btn {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--white);
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.strip-btn:hover { background: var(--yellow); color: var(--ink); }
.strip-btn:disabled { background: var(--paper); color: var(--grey-dark); cursor: default; }

/* --------------------------------------------------------------------------
   11. Галерея и канал
   -------------------------------------------------------------------------- */

.gallery { padding: var(--band-y) 0; }
.channel {
  border: 2px solid var(--yellow);
  padding: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  justify-content: space-between;
}
.channel__text { flex: 1 1 340px; min-width: 260px; }
.channel__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1;
}
.channel__desc {
  margin-top: 12px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.45;
  color: var(--grey);
  max-width: 520px;
  text-wrap: pretty;
}
.channel .btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   12. Контакты и форма
   -------------------------------------------------------------------------- */

.contacts {
  padding: var(--section-y) 0 clamp(56px, 7vw, 100px);
  overflow: hidden;
}
.contacts__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 72px);
  align-items: flex-start;
}

.lead-form {
  flex: 1 1 460px;
  min-width: 280px;
  display: grid;
  gap: clamp(18px, 2vw, 26px);
}
.field { display: grid; gap: 8px; }
.field label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--hairline-dark);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  padding: 14px 0;
  min-height: 48px;
  width: 100%;
}
.field textarea { resize: vertical; }
/* #6E6E6E из прототипа не проходил AA на чёрном — подняли до токена grey. */
.field input::placeholder,
.field textarea::placeholder { color: var(--grey); opacity: 1; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--yellow);
  box-shadow: 0 3px 0 -1px var(--yellow);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }
.field input:user-invalid,
.field textarea:user-invalid { border-bottom-color: #E5484D; }

.field-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.field-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--yellow);
  margin: 0;
}
.field-check label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
  cursor: pointer;
}
.field-check a { color: var(--yellow); text-decoration: underline; }
/* Поле-ловушка для ботов — за пределами экрана, не display:none: так его заполняют боты. */
.lead-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Согласие на обработку и согласие на рассылки — два отдельных чекбокса, стоят плотнее полей. */
.field-check + .field-check { margin-top: -8px; }
.field-check__note { white-space: nowrap; }

.lead-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.lead-form__actions .btn { font-size: 16px; padding: 20px 36px; }
.lead-form__alt {
  font-size: 15px;
  color: var(--white);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
}
.lead-form__alt:hover { color: var(--yellow); }
.lead-form__status {
  font-size: 15px;
  line-height: 1.4;
  color: var(--yellow);
  min-height: 1px;
}

.contact-card {
  flex: 1 1 380px;
  min-width: 280px;
  display: grid;
  gap: clamp(20px, 2.2vw, 30px);
}
.contact-list { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.contact-list li { border-top: 2px solid var(--hairline-dark); padding-top: 14px; }
.contact-list__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 34px);
  color: var(--white);
  line-height: 1.05;
  display: inline-block;
}
.contact-list__value:hover { color: var(--yellow); }
.contact-list__value--nowrap { white-space: nowrap; }
.contact-list__value--mail { font-size: clamp(20px, 2vw, 30px); overflow-wrap: anywhere; }

.qr { display: flex; gap: 16px; align-items: center; }
.qr__code {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  background: var(--white);
}
.qr__hint {
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
  max-width: 220px;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   13. Футер
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 3vw, 44px);
  border-top: var(--rule);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 56px);
  justify-content: space-between;
}
.site-footer__brand { flex: 1 1 320px; min-width: 260px; }
.site-footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.site-footer__tagline {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--grey-dark);
  max-width: 360px;
  text-wrap: pretty;
}
.site-footer__nav,
.site-footer__contacts {
  flex: 0 1 auto;
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
}
.site-footer__nav a,
.site-footer__contacts a { font-size: 15px; font-weight: 500; }
.site-footer__nav a:hover,
.site-footer__contacts a:hover { color: var(--grey-dark); }
.site-footer__tg { border-bottom: 2px solid var(--yellow); }

.site-footer__bottom {
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--grey-dark);
}
.site-footer__legal { font-family: var(--font-mono); font-size: 12px; }
.site-footer__bottom a { text-decoration: underline; }
.site-footer__bottom a:hover { color: var(--ink); }
.site-footer__cookie {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.site-footer__cookie:hover { color: var(--ink); }
/* Без скрипта кнопка не работает — тогда её не видно. */
.site-footer__cookie[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Правовые страницы (оферта, политика конфиденциальности)
   -------------------------------------------------------------------------- */

.doc-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 4vw, 60px); }
.doc-hero__eyebrow { margin-bottom: clamp(14px, 1.8vw, 22px); }
.doc-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  max-width: 20ch;
}
.doc-hero__meta {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 2px solid var(--hairline-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 3vw, 48px);
  font-size: 15px;
  color: var(--grey);
}

.doc { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
/* Колонка текста прижата к левому краю сетки, как всё остальное на сайте. */
.doc__inner {
  max-width: calc(820px + var(--pad-x) * 2);
  margin-left: 0;
  margin-right: auto;
}
.doc__lead {
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.5;
  font-weight: 500;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: var(--rule);
  text-wrap: pretty;
}
.doc__section { padding-top: clamp(32px, 4vw, 56px); }
.doc__section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.05;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  overflow-wrap: break-word;
}
.doc__section p,
.doc__section li {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  text-wrap: pretty;
}
.doc__section p + p { margin-top: 14px; }
/* minmax(0, 1fr): длинные пустые поля «____» не раздвигают колонку шире экрана. */
.doc__clauses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.doc__clauses > li { display: flex; gap: 12px; align-items: baseline; }
.doc__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--grey-dark);
  min-width: 3.2em;
}
.doc__bullets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; padding-left: 0; }
/* Тире — абсолютно, а не флексом: во флексе каждая ссылка или span внутри
   пункта становится отдельной колонкой и текст перестаёт переноситься. */
.doc__bullets > li { position: relative; padding-left: calc(1em + 12px); }
.doc__bullets > li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--grey-dark);
}
/* Тело пункта: текст, списки и абзацы-продолжения (формулы, «а) б) в)», пояснения). */
.doc__body { flex: 1 1 auto; min-width: 0; }
/* Цель ссылки privacy.html#cookies — пункт без собственного отступа: запас больше высоты
   развёрнутой шапки, которая после перехода ещё и сжимается. */
.doc__clauses > li[id] { scroll-margin-top: 112px; }
/* Вводная фраза согласия кончается двоеточием — таблица идёт сразу за ней, без черты. */
.doc__lead--intro { border-bottom: 0; padding-bottom: 0; }
.doc__lead--intro + .doc__section { padding-top: 16px; }
/* Пустые поля «______» не переносятся кусками, а обрезаются по ширине строки. */
.blank {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.doc__place-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}
.doc__place-date > span { min-width: 0; max-width: 100%; }
.doc__table .doc__bullets { margin-top: 0; gap: 4px; }
.doc__table .doc__bullets > li { font-size: inherit; line-height: inherit; }
.doc__body > p { margin-top: 10px; }
/* Пропуски «______» из документов юриста не должны распирать колонку на телефоне. */
.doc__inner { overflow-wrap: anywhere; }
.doc__para {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  text-wrap: pretty;
}
.doc__section > :not(h2):not(h3) + :not(h2):not(h3) { margin-top: 16px; }

/* Основные понятия политики: термин — определение. */
.doc__terms { border-top: 2px solid rgba(15, 15, 15, 0.12); }
.doc__terms > div {
  display: grid;
  grid-template-columns: minmax(160px, 30%) 1fr;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 2px solid rgba(15, 15, 15, 0.12);
}
.doc__terms dt,
.doc__terms dd {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
}
.doc__terms dt { font-weight: 600; }

/* Таблицы (цели и сроки обработки в согласии, контакты в форме заявки). */
.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
}
.doc__table th,
.doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 2px solid rgba(15, 15, 15, 0.12);
}
.doc__table th:nth-child(1) { width: 34%; }
.doc__table th:nth-child(2) { width: 38%; }
.doc__table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-dark);
  border-bottom: var(--rule);
}

/* Приложение к оферте — форма заявки. */
.doc__appendix {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: var(--rule);
}
.doc__appendix-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-dark);
}
.doc__appendix-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
}
.doc__appendix-sub { margin-top: 6px; font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); }
.doc__appendix > .doc__para { margin-top: 12px; }
.doc__section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.doc__sign {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
}

/* На телефоне таблица складывается в карточки: подпись столбца над каждым значением. */
@media (max-width: 640px) {
  .doc__terms > div { grid-template-columns: 1fr; }
  .doc__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .doc__table,
  .doc__table tbody,
  .doc__table tr,
  .doc__table td { display: block; width: 100%; }
  .doc__table tr { padding: 12px 0; border-bottom: 2px solid rgba(15, 15, 15, 0.12); }
  .doc__table td { border: 0; padding: 4px 0; }
  .doc__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-dark);
  }
}

.doc__note {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(20px, 2.4vw, 32px);
  border: var(--rule);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
}
.doc__requisites {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.doc__requisites > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(15, 15, 15, 0.12);
}
.doc__requisites dt {
  flex: 0 0 clamp(160px, 22vw, 240px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dark);
  padding-top: 3px;
}
.doc__requisites dd {
  flex: 1 1 240px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.doc a:not(.btn) {
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}
.doc a:not(.btn):hover { background: var(--yellow); }

/* Всё, что нужно подставить или подтвердить перед публикацией. */
.fill {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 0.32em;
  font-weight: 600;
  white-space: nowrap;
}
.fill--wrap { white-space: normal; }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.doc-back:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   Фото с мероприятий
   -------------------------------------------------------------------------- */

.photos { padding: var(--section-y) 0; }
.photos__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px clamp(24px, 3vw, 48px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.photos__head .h2 { margin-bottom: 0; }

/* Переключатель подборок: «Нуар» — чёрно-белое, «Эмоции» — в цвете. */
.photos__tabs { display: flex; gap: 0; }
.photos__tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 clamp(20px, 2.2vw, 30px);
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--ink);
  border: var(--rule);
  border-radius: 0;
  cursor: pointer;
}
.photos__tab + .photos__tab { border-left: 0; }
.photos__tab:hover { background: var(--yellow); }
.photos__tab.is-active { background: var(--ink); color: var(--white); }

/* Колоночная раскладка: кадры сохраняют свои пропорции и ничего не режется. */
.photos__grid {
  column-count: 3;
  column-gap: clamp(10px, 1.2vw, 18px);
}
/* Отступ — внутренний: внешний Safari переносит в начало следующей колонки,
   и колонки начинаются на разной высоте. */
.photos__item {
  break-inside: avoid;
  margin: 0;
  padding-bottom: clamp(10px, 1.2vw, 18px);
}
.photos__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.photos__open img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--photo-filter);
}
.photos__open:hover img { filter: grayscale(1) contrast(1.14) brightness(1.06); }

/* Подборка «Эмоции» показывается как есть — в цвете. */
.photos__grid--color .photos__open img { filter: none; }
.photos__grid--color .photos__open:hover img { filter: contrast(1.06) brightness(1.04); }
.photos__grid[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Просмотр фото
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 15, 15, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 24px);
  padding: clamp(56px, 7vw, 88px) clamp(12px, 2vw, 32px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: calc(100vh - clamp(150px, 18vw, 220px));
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--photo-filter);
}
/* Снимок из «Эмоций» открывается в цвете. */
.lightbox--color .lightbox__stage img { filter: none; }
.lightbox__caption {
  font-size: 15px;
  line-height: 1.4;
  color: var(--grey);
  text-align: center;
  max-width: 60ch;
}
.lightbox__close,
.lightbox__nav {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--hairline-dark);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  font-size: 26px;
}
body.is-lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Мобильное меню
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger__box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.burger__line,
.burger__line::before,
.burger__line::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  content: '';
}
.burger__line { top: 6px; }
.burger__line::before { top: -6px; }
.burger__line::after { top: 6px; }

.burger[aria-expanded='true'] { background: var(--yellow); border-color: var(--yellow); }
.burger[aria-expanded='true'] .burger__line { background: transparent; }
.burger[aria-expanded='true'] .burger__line::before,
.burger[aria-expanded='true'] .burger__line::after {
  top: 0;
  background: var(--ink);
}
.burger[aria-expanded='true'] .burger__line::before { transform: rotate(45deg); }
.burger[aria-expanded='true'] .burger__line::after { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--ink);
  color: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* --header-h выставляет скрипт при открытии: у шапки две высоты — до прокрутки и после. */
  padding: calc(var(--header-h, 96px) + 20px + env(safe-area-inset-top, 0px)) var(--pad-x) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 6vw, 48px);
}
.mobile-menu__nav { display: grid; }
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  padding: clamp(16px, 4vw, 22px) 0;
  border-bottom: 2px solid var(--hairline-dark);
}
.mobile-menu__nav a:first-child { border-top: 2px solid var(--hairline-dark); }
.mobile-menu__nav a:hover,
.mobile-menu__nav a:active { color: var(--yellow); }

.mobile-menu__foot { display: grid; gap: 14px; justify-items: stretch; }
.mobile-menu__contact {
  font-size: 17px;
  color: var(--grey);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.mobile-menu__contact:hover { color: var(--yellow); }

/* Пока меню открыто, страница под ним не прокручивается. */
body.is-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Cookie-баннер и настройки (разметку создаёт скрипт)
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--ink);
  color: var(--white);
  border-top: 4px solid var(--yellow);
  box-shadow: 0 -18px 48px rgba(15, 15, 15, 0.28);
  padding: clamp(18px, 2vw, 26px) 0 calc(clamp(18px, 2vw, 26px) + env(safe-area-inset-bottom, 0px));
  /* При крупном масштабе текста и в альбомной ориентации текст баннера
     прокручивается внутри, а не уходит за верхний край экрана. */
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: cookie-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cookie-banner[hidden] { display: none; }
/* Полноэкранное меню на телефоне не прячется под баннером. */
body.is-menu-open .cookie-banner { display: none; }

@keyframes cookie-in {
  from { translate: 0 100%; }
  to { translate: 0 0; }
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px clamp(24px, 3vw, 56px);
}
.cookie-banner__text { flex: 1 1 520px; min-width: 0; max-width: 780px; }
.cookie-banner__label { margin-bottom: 6px; }
.cookie-banner__message {
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}
.cookie-banner__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 10px;
  font-size: 14px;
}
.cookie-banner__links a,
.cookie-banner__link,
.cookie-dialog__intro a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.cookie-banner__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.cookie-banner__links a:hover,
.cookie-banner__link:hover,
.cookie-dialog__intro a:hover { color: var(--yellow); }

.cookie-banner__actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* «Принять» и «Отклонить» одного размера: отказаться так же просто, как согласиться. */
.cookie-banner .btn,
.cookie-dialog .btn {
  font-size: 14px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--white);
}
.cookie-banner .btn--primary,
.cookie-dialog .btn--primary { border-color: var(--yellow); }
.cookie-banner .btn--primary:hover,
.cookie-dialog .btn--primary:hover { border-color: var(--white); }

.cookie-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-top: 4px solid var(--yellow);
  border-radius: 0;
  background: var(--ink);
  color: var(--white);
  overflow: auto;
  overscroll-behavior: contain;
}
.cookie-dialog::backdrop { background: rgba(15, 15, 15, 0.72); }
body.is-cookie-open { overflow: hidden; }
/* Браузеры без <dialog>: окно не должно висеть в конце страницы. */
.cookie-dialog:not([open]) { display: none; }
.cookie-dialog--fallback[open] {
  display: block;
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 95;
  max-height: calc(100vh - 32px);
  box-shadow: 0 0 0 100vmax rgba(15, 15, 15, 0.72);
}

.cookie-dialog__body { padding: clamp(22px, 3vw, 34px); }
.cookie-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cookie-dialog__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cookie-dialog__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.cookie-dialog__close:hover { color: var(--yellow); }
.cookie-dialog__intro {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}

.cookie-dialog__list {
  margin-top: 20px;
  border-top: 2px solid var(--hairline-mid);
}
.cookie-option {
  padding: 16px 0;
  border-bottom: 2px solid var(--hairline-mid);
}
.cookie-option__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-option__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.cookie-option__text {
  margin-top: 6px;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}
.cookie-dialog__actions { margin-top: 22px; display: flex; }
.cookie-dialog__actions .btn { flex: 1 1 auto; }

/* Переключатель — обычный чекбокс с ролью switch, в квадратной геометрии сайта. */
.cookie-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  margin: 0;
  border: 2px solid var(--grey);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.cookie-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--grey);
  transition: translate 0.18s ease, background-color 0.18s ease;
}
.cookie-switch:checked { background: var(--yellow); border-color: var(--yellow); }
.cookie-switch:checked::before { translate: 22px 0; background: var(--ink); }
.cookie-switch:disabled { cursor: not-allowed; opacity: 0.55; }
.cookie-switch:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* В режиме высокой контрастности фоны заменяются, и переключатель
   выглядел бы одинаково во включённом и выключенном состоянии. */
@media (forced-colors: active) {
  .cookie-switch::before { forced-color-adjust: none; background: CanvasText; }
  .cookie-switch:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .cookie-switch:checked::before { background: HighlightText; }
  .cookie-switch:disabled { opacity: 1; }
  .cookie-switch:disabled:checked { background: GrayText; border-color: GrayText; }
}

/* Невысокий экран — телефон в альбомной ориентации: баннер плотнее. */
@media (max-height: 500px) {
  .cookie-banner { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__inner { gap: 10px 24px; }
  .cookie-banner__label { display: none; }
  .cookie-banner__message { font-size: 13px; line-height: 1.4; }
  .cookie-banner__links { margin-top: 6px; }
  .cookie-banner .btn { min-height: 44px; padding: 8px 16px; }
}

/* На телефоне баннер не должен закрывать полэкрана: без подписи и с плотными отступами. */
@media (max-width: 560px) {
  .cookie-banner { padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__inner { gap: 14px; }
  .cookie-banner__label { display: none; }
  .cookie-banner__message { font-size: 14px; line-height: 1.45; }
  .cookie-banner__links { margin-top: 8px; }
  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .cookie-banner__reject { grid-column: 1 / -1; }
  .cookie-banner .btn { padding: 12px 14px; }
}

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

/* «Направления»: ниже 900px все три блока встают в колонку разом,
   фото сверху, у всех одной ширины. */
@media (max-width: 900px) {
  .direction__media,
  .direction__body { flex: 1 1 100%; }
  .direction__media { max-width: 520px; }
  .direction--reverse .direction__media,
  .direction--reverse .direction__body { order: 0; }
}

@media (max-width: 1024px) {
  .approach__media { flex: 1 1 100%; }
  .photo--fill { min-height: 420px; }
  .photos__grid { column-count: 2; }
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .strip-nav { display: none; }
  .btn__wide { display: none; }
  .burger { display: inline-flex; }
  .site-header__inner { justify-content: space-between; gap: 12px; }
  .site-header .btn--compact { margin-left: auto; }

  /* На узком экране поле страницы — 16px, выносить овал некуда: блок стоит по колонке,
     текст отступает внутрь, овал выходит за блок в основном по вертикали. */
  .topics { padding: 22px 22px 24px; margin: 10px 0 34px; }
  .topics--frame { padding: 18px 20px 20px 30px; margin: 4px 0 28px; }
  .topics .marker--drawn { left: -4%; width: 108%; top: -17%; height: 134%; }
  .topics--frame .marker--drawn { left: -2%; width: 104%; top: -6%; height: 112%; }
  .quote-bubble--hero { margin-left: 0; width: min(100%, 520px); }
  .qr { align-items: flex-start; }
}

@media (max-width: 1199px) {
  .testimonials__strip { --per-view: 2.35; }
}

@media (max-width: 860px) {
  .testimonials__head { align-items: flex-start; }
  .photos__head { align-items: flex-start; }
  .testimonials__strip { --per-view: 1.25; }
}

@media (max-width: 700px) {
  .formats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .doc__requisites dt { flex: 1 1 100%; }
  .doc__clauses > li { display: block; }
  .doc__num { display: block; margin-bottom: 4px; }
}

@media (max-width: 560px) {
  .site-header__name { font-size: 15px; letter-spacing: 0.14em; }
  .h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .h2, .h2--formula, .h2--approach { font-size: clamp(32px, 8.4vw, 40px); }
  .h2--cta { font-size: clamp(32px, 9vw, 44px); }

  .btn { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .channel .btn { flex: 1 1 100%; }
  .lead-form__actions .btn { flex: 1 1 100%; }


  /* Пункты тем переносятся на две строки — висячий отступ отделяет их друг от друга. */
  .topics__list { gap: 8px; }
  .topics__list li { padding-left: 0.45em; text-indent: -0.45em; }
  .topics--plus .topics__list li { padding-left: 1.05em; text-indent: -1.05em; }


  .principle { gap: 14px; }
  .site-footer__inner { gap: 28px; }
  .lightbox { gap: 6px; padding: 64px 10px 24px; }
  .lightbox__nav { width: 48px; height: 48px; }
  .site-footer__nav a,
  .site-footer__contacts a { padding: 8px 0; }
  .site-footer__bottom a,
  .site-footer__bottom .site-footer__cookie {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Анимация появления (включается скриптом)
   -------------------------------------------------------------------------- */

/* Сдвиг задаётся отдельным свойством translate, а не transform:
   иначе он затирал бы поворот стрелок формулы на мобильном. */
.js-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.55s ease, translate 0.55s ease;
}
.js-reveal.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal { opacity: 1; translate: 0 0; }
}

/* При печати и сохранении в PDF баннер и окно настроек не нужны. */
@media print {
  .cookie-banner,
  .cookie-dialog,
  .site-footer__cookie { display: none !important; }
  body { padding-bottom: 0; }
}