/* ═══ BASE — same system as the main page ═════════════ */
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:hover, .title-h3:hover { color: #3e99f7; cursor: pointer; }

.h1, .small span, .avatar, .nav, .nav ul, .nav li div,
.frame::after, .frame b,
.row-1-load, .row-2-load, .row-3-load, .opacity-load { transition: .3s; }
.underline::after { transition: .2s; }

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

/* ═══ 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; z-index: -3; visibility: hidden; }

/* ═══ 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 li div:hover { padding-left: 8px; padding-right: 0; }
.nav-full, .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;
}
.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 rgba(255, 255, 255, 0); border-radius: 50%;
  transition: .3s; pointer-events: none;
}
.avatar:hover::after { border-color: #3e99f7; }
.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: .3s;
}
.avatar:hover b { opacity: 1; }

/* ═══ КНОПКА «НАЗАД» ══════════════════════════════════
   Живёт слева от аватарки и подчиняется тому же правилу:
   на первом экране крупная, после 100px сжимается. */
.back {
  position: fixed; top: 40px; right: 140px; z-index: 99;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px 0 16px;
  border-radius: 22px;
  background: #000; color: #fff;
  font-size: 15px; line-height: 44px; font-weight: 500;
  white-space: nowrap;
  transition: right .3s, top .3s, height .3s, padding .3s,
              font-size .3s, background .2s, transform .3s;
}
.back svg {
  width: 18px; height: 18px; flex: none;
  transition: width .3s, height .3s, transform .3s;
}
.back:hover { background: #3e99f7; }
.back:hover svg { transform: translateX(-3px); }

.back.mini {
  right: 92px; height: 32px; padding: 0 14px 0 11px;
  font-size: 13px; line-height: 32px; border-radius: 16px;
}
.back.mini svg { width: 15px; height: 15px; }

/* ═══ ОВЕРЛЕЙ С ФОТО ══════════════════════════════════ */
.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;
}
.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:hover b { color: #3e99f7; }
.frame::after {
  content: ''; position: absolute; inset: -2px;
  border: 2px solid rgba(255, 255, 255, 0);
}
.frame:hover::after { border: 2px solid #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: zoom-in; 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: 56px; }
.pair h3 { margin-bottom: 12px; }
.pair .was {
  font-size: 18px; line-height: 28px; color: #a1a7bc; margin-bottom: 8px;
}
.pair .now { font-size: 18px; line-height: 28px; color: #000; }

/* ═══ 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: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;
}
.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: .3s;
}
#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;
}
.lb-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }

/* ═══ SCROLL REVEAL ═══════════════════════════════════ */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.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 { transition: 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,
.gallery > .outcome + .shot { margin-top: 28px; }

/* цитата завершает предыдущий показ, а не открывает новый раздел */
.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,
  .gallery > .outcome + .shot { margin-top: 20px; }
  .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; }

  .topbar {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    height: 84px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .avatar { top: 24px; right: 24px; width: 60px; height: 60px; }
  .avatar.mini { width: 30px; height: 30px; }
  .avatar b { display: none; }

  /* на мобильном рядом с аватаркой места нет — кнопка уезжает вниз слева,
     туда же, где на главной живёт бургер, только с другой стороны */
  .back {
    top: auto; right: auto; bottom: 24px; left: 24px;
    height: 40px; padding: 0 18px 0 14px;
    font-size: 14px; line-height: 40px; border-radius: 20px;
  }
  .back.mini { right: auto; height: 40px; padding: 0 18px 0 14px; font-size: 14px; line-height: 40px; border-radius: 20px; }
  .back.mini 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; }
  .pair { margin-bottom: 36px; }
  .case-next b { font-size: 28px; line-height: 36px; }
  .footer { font-size: 16px; line-height: 28px; padding: 32px 0 40px; }

  .lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
}