/* ═══ BASE — same system as the main page ═════════════ */
:root {
  /* та же кривая, что уже стоит у появлений при скролле, —
     сильный ease-out. Заводим токеном, чтобы не плодить копии. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

}

html, body {
  color: #000;
  background: #fff;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 15px;
  margin: 0;
  padding: 0;
  height: 100%;
}
body { overflow-x: hidden; }

h1, h2, h3 { margin: 0; padding: 0; }
:focus { outline: none; }

a { color: #000; text-decoration: none; }
a { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  a:hover, .title-h3:hover { color: #3e99f7; cursor: pointer; }
}

/* Свойства перечислены поимённо. Голое `transition: .3s` — это
   `transition: all`: браузер сторожит каждое свойство элемента и
   анимирует то, что менять не собирались. */
.h1 { transition: transform .24s var(--ease-out); }
/* см. разбор хореографии в index.html: переход нужен и в базовом состоянии,
   иначе при скролле вверх строки 2-3 возвращаются мгновенно */
.h1 span { transition: opacity .12s var(--ease-out) .12s, visibility 0s linear 0s; }
.avatar { transition: width .3s var(--ease-out), height .3s var(--ease-out); }
.nav { transition: height .3s var(--ease-out); }
.nav ul { transition: margin-top .3s var(--ease-out); }
.nav li div { transition: padding-left .3s var(--ease-out), padding-right .3s var(--ease-out); }
.frame::after { transition: border-color 150ms ease; }
.frame b { transition: color 150ms ease; }
.row-1-load, .row-2-load, .row-3-load { transition: height .3s var(--ease-out); }
.opacity-load { transition: opacity .3s var(--ease-out); }
.underline::after { transition: left .2s ease, right .2s ease; }

.row-2-load { transition-delay: 100ms; }
.row-3-load { transition-delay: 200ms; }
.opacity-load { transition-delay: 300ms; }

/* ═══ КУРСОР-СПУТНИК ══════════════════════════════════
   Один сплошной круг, который тянется за указателем с
   запаздыванием. В покое сжат до точки, над ссылкой сжимается
   ещё сильнее, над картинкой раздувается и показывает подпись.

   Позицию двигает скрипт на самом элементе, размер ведёт CSS
   на ::before — иначе оба боролись бы за один transform. */

.mf {
  position: fixed; top: 0; left: 0; z-index: 400;
  pointer-events: none;
  contain: layout style size;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.mf-awake .mf { opacity: 1; }

.mf::before {
  content: ''; position: absolute;
  top: -24px; left: -24px; width: 48px; height: 48px;
  background: #3e99f7; border-radius: 50%;
  transform: scale(.2);
  transition: transform .25s ease-in-out, opacity .2s ease-out;
}

/* над обычной ссылкой круг поджимается: подсказка о точности,
   а не о том, что сейчас что-то откроется */
.mf-link .mf::before { transform: scale(.15); }

/* над картинкой, которая открывается на весь экран */
.mf-media .mf::before { transform: scale(1.5); }

/* нажатие: короткий подбор */
.mf-down .mf::before { transform: scale(.16); transition-duration: .13s; }
.mf-link.mf-down .mf::before { transform: scale(.12); transition-duration: .13s; }
.mf-media.mf-down .mf::before { transform: scale(1.35); transition-duration: .13s; }

/* подпись живёт внутри круга и появляется вместе с ним */
.mf span {
  position: absolute; top: -22px; left: -22px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 11px; font-weight: 700;
  letter-spacing: .3px; color: #fff;
  text-align: center; text-transform: uppercase;
  opacity: 0; transform: scale(0) rotate(10deg);
  transition: opacity .4s var(--ease-out), transform .3s var(--ease-out);
}
.mf-media .mf span { opacity: 1; transform: scale(1) rotate(0); }
/* ── ХВОСТ КУРСОРА ────────────────────────────────────
   Точки позади головы. Слой отдельный и лежит ниже неё, чтобы
   подпись на голове ничем не перекрывалась. Размер и цвет здесь,
   а не в скрипте: править внешний вид удобнее в стилях.
   Центрирование через отрицательные margin — тогда translate в
   скрипте означает центр точки, как и у головы. */
.mf-trail {
  position: fixed; top: 0; left: 0; z-index: 399;
  pointer-events: none;
  /* Никакого contain: у головы он безобиден, потому что её кружок —
     псевдоэлемент, а здесь внутри лежат настоящие position: fixed точки.
     contain: layout делает этот нулевой по размеру блок их системой
     координат, и хвост упирается в его границы. Без containment точки
     считаются от окна, и обрезать их нечему. */
  overflow: visible;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.mf-awake .mf-trail { opacity: 1; }
.mf-trail i {
  display: block; position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: #3e99f7; border-radius: 50%;
}
/* Над текстовой кнопкой голова прячется — хвост уходит с ней,
   иначе он один болтался бы поверх залитого слова. */
.mf-text .mf-trail { opacity: 0; }

/* Над текстовой кнопкой цвет растекается из точки касания и
   заливает слово целиком.

   Механика: в текст подкладывается радиальный градиент —
   синий до радиуса --mf-fill, дальше обычный цвет буквы. Градиент
   обрезается по глифам через background-clip: text, а сам текст
   делается прозрачным. Растёт радиус — растёт синяя область.

   Радиус объявлен через @property: без регистрации типа браузер
   считает переменную строкой и анимировать её не может — цвет
   переключался бы скачком.

   text-fill-color вместо color: сам color остаётся чёрным, и
   currentColor в градиенте даёт правильный «неразлитый» цвет. */
@property --mf-fill {
  syntax: '<length-percentage>';
  initial-value: 0%;
  inherits: false;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .has-mf.mf-awake .nav li div,
  .has-mf.mf-awake .title-h3,
  .has-mf.mf-awake .email span,
  .has-mf.mf-awake .underline,
  .has-mf.mf-awake .footer a {
    background-image: radial-gradient(circle at var(--mf-x, 50%) var(--mf-y, 50%),
                      #3e99f7 var(--mf-fill), currentColor 0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* одна длительность на оба хода: менять её вместе со
       значением нельзя — анимация тогда не стартует */
    transition: --mf-fill .42s var(--ease-out);
  }
  /* Значение подставляет скрипт напрямую в стиль элемента, а не
     класс. Разница принципиальная: класс менял бы заодно и объявление
     перехода, а браузер не запускает анимацию, когда значение и его
     длительность меняются в один и тот же пересчёт стилей. Кнопка
     работала именно потому, что значение у неё падает на дочерний
     элемент, чьё объявление перехода остаётся нетронутым.
     Правило ниже нужно для кнопки: там класс на родителе. */
  .has-mf.mf-awake .mf-filled { --mf-fill: 170%; }

  /* Штатная подсветка ссылок здесь мешает: она красит color,
     а из него берётся «неразлитая» часть градиента — слово
     посинело бы целиком ещё до заливки. */
  .has-mf.mf-awake a:hover,
  .has-mf.mf-awake .title-h3:hover,
  .has-mf.mf-awake .email span:hover { color: inherit; }
}

/* Сам курсор в этот момент исчезает: цвет уже перешёл в слово,
   и точка поверх него только мешала бы читать. */
.mf-text .mf::before { transform: scale(0); opacity: 0; }
.mf-text.mf-down .mf::before { transform: scale(0); opacity: 0; }



/* ═══ LAYOUT PRIMITIVES ═══════════════════════════════ */
.minwidth { min-width: 1100px; }
.tab { display: table; width: 100%; }
.td { display: table-cell; }
.td-50 { width: 50%; }
.td-40 { width: 40%; }
.td-33 { width: 33.332%; }
.td-25 { width: 25%; }
.td-gap { width: 40px; }
.tab-even { table-layout: fixed; }
.top { vertical-align: top; }
.desktop { display: inline; }
.menu, .menu-scrim, .topbar { display: none; }

/* ═══ FIXED HEADLINE ══════════════════════════════════ */
.h1 {
  z-index: 99; position: fixed; left: 40px; top: 40px;
  font-weight: 700; font-size: 56px; line-height: 68px;
  letter-spacing: -.3px; transform-origin: 0 0; cursor: default;
}
.h1 div { height: 68px; overflow: hidden; }
.h1 i { display: block; font-style: normal; height: 68px; }
.h1 b { font-weight: 700 !important; }
.h1 u { text-decoration: none; }
.h1 span { color: #a1a7bc; }

.small { transform: scale(.42); transform-origin: 0 0; cursor: pointer; }
.small span {
  opacity: 0; visibility: hidden;
  transition: opacity .12s var(--ease-out) 0s, visibility 0s linear .12s;
}

/* ═══ FIXED NAV (bottom-left) ═════════════════════════ */
.nav-over { position: fixed; left: 0; bottom: 0; padding: 40px; z-index: 4; }
.nav { overflow: hidden; }
.nav ul, .nav li { margin: 0; padding: 0; list-style-type: none; display: block; cursor: pointer; }
.nav li div {
  position: relative; display: block;
  font-size: 18px; line-height: 36px; font-weight: 500;
  padding-left: 0; padding-right: 8px; color: #000; white-space: nowrap;
}
.nav-full { height: 108px; }
@media (hover: hover) and (pointer: fine) {
  .nav li div:hover { padding-left: 8px; padding-right: 0; }
  .nav-over:hover .nav { height: 108px; }
  .nav-over:hover .nav ul { margin-top: 0; }
}
.nav-1 { height: 36px; }

/* ═══ AVATAR ══════════════════════════════════════════ */
.avatar {
  width: 80px; height: 80px;
  position: fixed; top: 40px; right: 40px; z-index: 99; display: block;
  /* открывает фото на весь экран — курсор тот же, что у снимков */
  cursor: pointer;
}
.avatar.mini { width: 40px; height: 40px; }
.avatar .pic {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden; background: #f4f6fa;
}
.avatar .pic img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }
.avatar::after {
  content: ''; position: absolute; inset: -4px;
  border: 2px solid transparent; border-radius: 50%;
  transition: border-color 150ms ease; pointer-events: none;
}
.avatar b {
  position: absolute; top: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px; line-height: 26px; font-weight: 500;
  color: #fff; background: #000;
  padding: 0 12px; border-radius: 16px;
  opacity: 0; pointer-events: none; transition: opacity 160ms ease;
}
/* hover на тачскрине срабатывает от тапа и залипает до следующего касания */
@media (hover: hover) and (pointer: fine) {
  .avatar:hover::after { border-color: #3e99f7; }
  .avatar:hover b { opacity: 1; }
}

/* ═══ КНОПКА «НАЗАД» ══════════════════════════════════
   Стоит под заголовком кейса, по левому краю вместе с ним.
   Заголовок: top 40 + три строки по 68 = низ на 244, отступ 28 → 272.
   В сжатом виде шапка масштабируется в .42, видна одна строка,
   кнопка поднимается к ней на 88.

   Два слоя не для красоты: .back отвечает за позицию, .back-pill —
   за нажатие. На одном элементе сдвиг и press делили бы одно
   свойство transform, а значит и одну длительность. */
.back {
  /* выше заголовка: он идёт позже в разметке и при равном z-index
     перехватывал бы клики своей невидимой второй и третьей строкой */
  position: fixed; left: 40px; top: 40px; z-index: 101;
  /* сдвиг через transform, а не top: layout не пересчитывается */
  transform: translateY(232px);
  transition: transform .3s var(--ease-out);
  /* иначе на тапе браузер рисует поверх свою серую вспышку */
  -webkit-tap-highlight-color: transparent;
}
.back.mini { transform: translateY(48px); }

.back-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border-radius: 20px;
  background: #000; color: #fff;
  font-size: 15px; font-weight: 500;
  white-space: nowrap; user-select: none;
  /* отпускание с лёгким перелётом: кнопка чуть проскакивает
     исходный размер и садится обратно. 1.28 — почти незаметный
     баунс, сильнее на такой мелочи читается как дребезг */
  transition: background 150ms ease,
              transform 220ms cubic-bezier(.34, 1.28, .5, 1);
}
.back-pill svg { width: 17px; height: 17px; flex: none; }

/* Нажатие вниз — резко, без пружины: палец должен получить ответ
   мгновенно. Перелёт живёт только на обратном ходе. */
.back:active .back-pill {
  transform: scale(.96);
  transition: transform 110ms ease-out;
}

/* на тачскринах hover ложно срабатывает после тапа и залипает */
@media (hover: hover) and (pointer: fine) {
  /* background-color, а не background: сокращённая запись сбросила бы
     background-image, а на нём держится заливка от курсора */
  .back:hover .back-pill { background-color: #262626; }
}

/* Заливка от курсора: синее пятно расходится из точки касания и
   закрашивает пилюлю целиком. Тот же приём, что и на тексте, только
   градиент здесь остаётся фоном, а не обрезается по буквам. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .has-mf.mf-awake .back-pill {
    background-image: radial-gradient(circle at var(--mf-x, 50%) var(--mf-y, 50%),
                      #3e99f7 var(--mf-fill), transparent 0);
    /* Список переходов повторяет базовый: если оставить только
       --mf-fill, пропадёт пружина на отпускании кнопки.
       Кривая у --mf-fill здесь выходная: короче входной. */
    transition: background 150ms ease,
                transform 220ms cubic-bezier(.34, 1.28, .5, 1),
                --mf-fill .38s var(--ease-out);
  }
  .has-mf.mf-awake .mf-filled .back-pill {
    --mf-fill: 170%;
    transition: background 150ms ease,
                transform 220ms cubic-bezier(.34, 1.28, .5, 1),
                --mf-fill .45s var(--ease-out);
  }
}

/* ═══ ОВЕРЛЕЙ С ФОТО ══════════════════════════════════ */
.photo-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.photo-overlay.active { opacity: 1; visibility: visible; }
.po-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .94); cursor: zoom-out; }
.po-img {
  position: relative; z-index: 1;
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  transform: scale(.96); transition: transform .3s;
}
.photo-overlay.active .po-img { transform: scale(1); }
.po-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .3s;
}
@media (hover: hover) and (pointer: fine) {
  .po-close:hover { background: rgba(255, 255, 255, .24); transform: rotate(90deg); }
}
.po-close svg { width: 22px; height: 22px; }

/* ═══ CONTENT COLUMN ══════════════════════════════════ */
.hero { width: 100%; }
.gallery { margin-top: 340px; width: 100%; }
.pad-left { width: 75%; margin-left: 25%; }
.block { margin: 64px 0; }

/* ═══ TYPE ════════════════════════════════════════════ */
p { cursor: default; font-size: 18px; line-height: 28px; margin: 0; }
p + p { margin-top: 28px; }
p span { color: #a1a7bc; }
h2 { font-size: 48px; line-height: 56px; }
h3, .title-h3 { cursor: default; font-size: 24px; line-height: 32px; font-weight: 700; }

.list, .list li { padding: 0; list-style-type: none; }
.list { margin: 32px 0; font-size: 18px; line-height: 28px; cursor: default; }
.list li { margin: 12px 0; }
.list li span { color: #a1a7bc; }

/* 12px is a micro-label — right for "Роль" inside a block, far too quiet to
   announce a section. Section starts get their own level. */
.label {
  font-size: 12px; line-height: 12px; font-weight: 500;
  color: #bdc1d0; margin-bottom: 20px;
}

.sec {
  font-size: 32px; line-height: 40px; font-weight: 700;
  letter-spacing: -.2px; color: #000;
  margin: 0 0 20px;
}

/* first paragraph of a section: a step down from the heading into body */
.lead {
  font-size: 22px; line-height: 32px; font-weight: 500;
  color: #000; margin: 0 0 20px;
}

strong { font-weight: 700; color: #000; }

/* ═══ SNAPSHOT (role clarity, above the fold) ═════════ */
.snapshot { margin-bottom: 64px; }
.snapshot .td { padding-right: 32px; }
.snapshot dt {
  font-size: 12px; line-height: 12px; font-weight: 500;
  color: #bdc1d0; margin-bottom: 10px;
}
.snapshot dd { margin: 0; font-size: 18px; line-height: 28px; font-weight: 500; }

/* ═══ HEADLINE OUTCOME (scanned early) ════════════════ */
.outcome { margin: 0 0 64px; }
.outcome .td { padding-right: 40px; }
.outcome b {
  display: block;
  font-size: 56px; line-height: 64px; font-weight: 700;
  letter-spacing: -1px;
}
.outcome span { display: block; font-size: 18px; line-height: 28px; color: #a1a7bc; margin-top: 4px; }

/* ═══ SHOTS ═══════════════════════════════════════════ */
.frame { position: relative; display: block; }
.frame b {
  display: inline-block; position: absolute;
  left: 0; top: -18px;
  font-size: 12px; line-height: 12px; font-weight: 500;
  color: #bdc1d0;
}
.frame::after {
  content: ''; position: absolute; inset: -2px;
  border: 2px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .frame:hover b { color: #3e99f7; }
  .frame:hover::after { border-color: #3e99f7; }
}

/* the anchor itself carries the width cut: its ::after selection ring sits at
   inset -2px and would otherwise push 2px of horizontal scroll */
.shot { margin-bottom: 64px; cursor: pointer; width: calc(100% - 2px); }
.shot img { width: 100%; display: block; }
.shot-pair { margin-bottom: 64px; }
.shot-pair .shot { margin-bottom: 0; }

/* ═══ PROBLEM / SOLUTION PAIRS ════════════════════════
   Слова «Было» и «Стало» вынесены из текста в отдельную колонку.
   Пока они стояли внутри предложения, глазу приходилось читать
   абзац целиком, чтобы понять, какая это половина сравнения.
   Теперь структура видна до чтения. */
.pair { margin-bottom: 40px; padding-top: 32px; }
/* волосяная линия только между парами: у первой её нет,
   иначе она отрезала бы список от заголовка «Решения» */
.pair + .pair { border-top: 1px solid #eceef3; }
.pair h3 { margin-bottom: 16px; }

.pair .was, .pair .now {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  column-gap: 16px;
  font-size: 18px; line-height: 28px;
  margin: 0;
}
.pair .was { margin-bottom: 12px; }
.pair .was span { color: #a1a7bc; }
.pair .now span { color: #000; }
.pair b {
  font-size: 12px; line-height: 28px; font-weight: 500;
  color: #bdc1d0;
}

/* ═══ PULLQUOTE ═══════════════════════════════════════ */
.pullquote {
  font-size: 48px; line-height: 56px; font-weight: 700;
  color: #000; margin: 0 0 64px; cursor: default;
}
.pullquote span { color: #bdc1d0; }

/* ═══ NEXT CASE ═══════════════════════════════════════ */
.case-next { margin: 96px 0 0; display: block; }
.case-next .label { margin-bottom: 12px; }
.case-next b {
  font-size: 48px; line-height: 56px; font-weight: 700;
  letter-spacing: -.3px; display: inline-block;
}
.case-next b { transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .case-next:hover b { color: #3e99f7; }
}

.footer {
  display: block; font-size: 18px; line-height: 36px; font-weight: 500;
  color: #a1a7bc; padding: 40px 0; cursor: default;
}

/* ═══ UNDERLINE LINK ══════════════════════════════════ */
.underline { position: relative; }
.underline::after {
  content: ''; pointer-events: none; display: inline-block;
  position: absolute; left: 50%; right: 50%; bottom: -7px;
  height: 3px; background: #0d99ff; border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .underline:hover::after { left: 1px; right: 1px; }
}

/* ═══ LIGHTBOX ════════════════════════════════════════ */
#lb-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
#lb-overlay.active { opacity: 1; pointer-events: auto; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.94); cursor: zoom-out; }
.lb-img {
  position: relative; z-index: 1;
  max-width: 94vw; max-height: 94vh; object-fit: contain;
  transform: scale(.96); transition: transform .3s;
}
#lb-overlay.active .lb-img { transform: scale(1); }
.lb-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .3s;
}
@media (hover: hover) and (pointer: fine) {
  .lb-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
}

/* ═══ SCROLL REVEAL ═══════════════════════════════════ */
/* 400ms вместо 800: появление повторяется на каждом блоке страницы,
   на такой частоте длинная анимация начинает тормозить чтение.
   will-change убран — он держал слой композитора навсегда, а нужен
   был бы только на время самого появления. */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .4s var(--ease-out),
              transform .4s var(--ease-out);
}
.rv.on { opacity: 1; transform: none; }

/* ═══ LOAD-IN ═════════════════════════════════════════ */
.opacity-load { opacity: 0; }
.uploaded .row-1-load,
.uploaded .row-2-load,
.uploaded .row-3-load { height: 0; }
.uploaded .opacity-load { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .row-1-load, .row-2-load, .row-3-load { height: 0 !important; }
  .opacity-load { opacity: 1 !important; }
  .rv, .rv.on { opacity: 1; transform: none; transition: none; }
  .h1, .avatar, .nav, .nav ul, .nav li div { transition: none; }
  /* движение убираем, подсветку и прозрачность оставляем:
     они объясняют состояние, а не двигают интерфейс */
  .back { transition: none; }
  .topbar { transition: none; }
  .back-pill { transition: background 150ms ease; }
  .back:active .back-pill { transform: none; }
  /* оверлей: появление остаётся, наезд картинки — нет */
  .po-img, #lb-overlay .lb-img { transform: none; transition: none; }
  .po-close, .lb-close { transition: background .2s; }
  .po-close:hover, .lb-close:hover { transform: none; }
}

/* ═══ РИТМ РАЗДЕЛОВ ═══════════════════════════════════
   Было: все промежутки по 64px — и между разделами, и между
   текстом и его же картинкой. Страница читалась одним потоком.
   Стало: раздел от раздела 104px, картинка прижата к своему
   тексту на 28px. Группировку держит расстояние, а не линии.

   Обнуляем только нижний отступ: верхний раздаёт правило ниже.
   Если обнулить и его, вес селектора (0,2,0) перебьёт `* + *` (0,1,0)
   и все промежутки схлопнутся в ноль. */
.gallery > .snapshot,
.gallery > .outcome,
.gallery > .block,
.gallery > .shot,
.gallery > .shot-pair,
.gallery > .pullquote { margin-bottom: 0; }

.gallery > * + * { margin-top: 104px; }

/* картинка иллюстрирует текст над собой — держим их вместе */
.gallery > .block + .shot,
.gallery > .block + .shot-pair { margin-top: 28px; }

/* Первый кадр после цифр результата стоит вдвое просторнее. Он не
   иллюстрирует абзац над собой, а открывает показ, и цифрам нужен
   воздух, чтобы они читались как итог, а не как подпись к кадру. */
.gallery > .outcome + .shot { margin-top: 56px; }

/* цитата завершает предыдущий показ, а не открывает новый раздел */
.gallery > .shot-pair + .pullquote,
.gallery > .shot + .pullquote { margin-top: 56px; }

.gallery > .case-next { margin-top: 120px; }
.gallery > .footer { margin-top: 0; }

/* ═══ MOBILE ══════════════════════════════════════════ */
@media only screen and (max-width: 960px) {
  .gallery > * + * { margin-top: 64px; }
  .gallery > .block + .shot,
  .gallery > .block + .shot-pair { margin-top: 20px; }
  .gallery > .outcome + .shot { margin-top: 40px; }
  .gallery > .shot-pair + .pullquote,
  .gallery > .shot + .pullquote { margin-top: 40px; }
  .gallery > .case-next { margin-top: 72px; }

  .nav-over, .desktop, .underline::after { display: none !important; }
  .minwidth { min-width: 0; }

  /* Подложка: см. подробный разбор в index.html. Коротко — состояние
     меняет scaleY вместо height, нижний край растворяется градиентом
     вместо жёсткой линии, размытие убрано как источник этой линии. */
  /* Белая полоса с волосяной линией снизу. Состояние меняет сдвиг:
     height пересчитывал бы раскладку, а scaleY растянул бы саму границу
     и 1px замылился бы. Подробности — в index.html. */
  .topbar {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    height: 118px;
    background: #fff;
    border-bottom: 1px solid #eceef3;
    transform: translate3d(0, 0, 0);
    transition: transform .24s var(--ease-out) 0s;
    pointer-events: none;
  }
  .topbar.low {
    transform: translate3d(0, -54px, 0);
    transition: transform .16s var(--ease-out) .12s;
  }

  /* размер через transform: второй источник пересчёта раскладки в такт
     со скроллом; подпись на мобиле скрыта, масштаб её не портит */
  .avatar {
    top: 24px; right: 24px; width: 60px; height: 60px;
    transform-origin: 100% 0;
    transition: transform .24s var(--ease-out);
  }
  .avatar.mini { width: 60px; height: 60px; transform: scale(.5); }
  .avatar b { display: none; }

  /* на мобильном шапка занимает весь верх, поэтому кнопка живёт внизу
     слева — там до неё дотягивается большой палец. Сдвига нет,
     значит и transform у обёртки не нужен. */
  .back,
  .back.mini {
    top: auto; bottom: 24px; left: 24px;
    transform: none;
  }
  .back-pill {
    height: 44px; padding: 0 20px;
    font-size: 15px; border-radius: 22px;
  }
  .back-pill svg { width: 18px; height: 18px; }
  .po-close { top: 16px; right: 16px; width: 40px; height: 40px; }

  .h1 {
    position: fixed; left: 24px; top: 24px;
    font-size: 21px; line-height: 28px;
    max-width: calc(100vw - 24px - 60px - 40px);
  }
  .h1 div { height: 28px; }
  .h1 i { height: 28px; }
  .small { transform: scale(.86); }

  .gallery { margin-top: 170px; }
  .td, .tab { display: block; width: auto; height: auto; }
  .td-gap { display: none; }
  .pad-left { width: auto; display: block; margin-left: 24px; margin-right: 24px; }
  /* отступы разделов заданы выше в блоке «РИТМ РАЗДЕЛОВ» — здесь не дублируем */

  p { font-size: 16px; line-height: 22px; }
  p + p { margin-top: 22px; }
  h2, .pullquote { font-size: 24px; line-height: 32px; }
  h3, .title-h3 { font-size: 20px; line-height: 28px; }
  .sec { font-size: 24px; line-height: 30px; margin-bottom: 14px; }
  .lead { font-size: 18px; line-height: 26px; margin-bottom: 16px; }
  .list { font-size: 16px; line-height: 24px; }

  .snapshot .td { padding-right: 0; margin-bottom: 24px; }
  .outcome .td { padding-right: 0; margin-bottom: 28px; }
  .outcome b { font-size: 40px; line-height: 46px; }
  .outcome span { font-size: 16px; line-height: 22px; }

  /* внутри пары картинки встают друг под друга — это её внутренний отступ */
  .shot-pair .shot { margin-bottom: 40px; }
  .shot-pair .shot:last-child { margin-bottom: 0; }
  /* на узком экране колонка в 76px съедала бы треть строки —
     метка встаёт над текстом */
  .pair { margin-bottom: 28px; padding-top: 24px; }
  .pair .was, .pair .now { display: block; }
  .pair b { display: block; line-height: 20px; margin-bottom: 2px; }
  .case-next b { font-size: 28px; line-height: 36px; }
  .footer { font-size: 16px; line-height: 28px; padding: 32px 0 40px; }


  /* см. index.html: на мобильной вёрстке курсора-спутника нет */
  .mf { display: none !important; }
  .has-mf.mf-awake .nav li div,
  .has-mf.mf-awake .title-h3,
  .has-mf.mf-awake .email span,
  .has-mf.mf-awake .underline,
  .has-mf.mf-awake .footer a,
  .has-mf.mf-awake .back-pill {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
  .lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
}


/* см. index.html: на экранах уже 360px длинная строка переносилась
   и срезалась overflow:hidden */
@media only screen and (max-width: 359px) {
  .h1 { font-size: 18px; line-height: 24px; }
  .h1 div, .h1 i { height: 24px; }
}

/* Стоит ПОСЛЕ мобильного блока намеренно: всё мобильное объявлено внутри
   него, а у медиазапросов нулевая специфичность — при равных селекторах
   побеждает тот, что ниже по файлу. Верхний блок reduced-motion на эти
   правила не действовал. */
@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar.low, .h1, .h1 span, .small span,
  .avatar, .avatar.mini, .back, .back-pill { transition: none; }
}