/* ============================================================
   Страница «О нас» (about/)
   ============================================================ */

/* Своя шкала — только на этой странице.
   Макет Reconversia_20 набран мельче общей шкалы сайта в тексте и
   крупнее в H1: на 1440px H1 48px (у сайта 41), заголовок секции 32px
   (35), основной текст 16px (18). Размеры сняты по ширине строк:
   «специалистов под задачи,» в макете 594px, «Reconversia —
   технологическая» 475px, «Мы объединяем стратегию…» 525px.
   Общие токены не трогаем: на остальных страницах кегль согласован и
   менять его Алекс не просил. Переменные переопределены на .scroller,
   а не на :root, чтобы шапка и футер (у них свои токены) остались
   ровно такими же, как на других страницах. */
.scroller {
  --fs-hero: clamp(30px, 3.33vw, 56px);  /* 48px @1440 */
  --fs-h2:   clamp(22px, 2.22vw, 37px);  /* 32px @1440 */
  --fs-body: clamp(14px, 1.11vw, 19px);  /* 16px @1440 */
}

.ab-h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  /* Интерлиньяж тоже с макета: шаг строк заголовка 38px при кегле 32. */
  line-height: 1.19;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ab-body {
  font-size: var(--fs-body);
  font-weight: 400;
  /* Шаг строк текста в макете 18px при кегле 16. */
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ab-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Общая карточка-«стекло», как на contacts/products */
.ab-glass {
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  background: rgba(52, 61, 79, 0.15);
}

/* Плейсхолдер-аватар — используется вместо реальных фото
   (команда/кейсы), пока Alex не передал фотографии. */
.ab-avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-30);
  color: var(--text-50);
  font-weight: 600;
  flex-shrink: 0;
}

/* ============================================================
   ЭКРАН 1 — HERO
   ============================================================ */
.ab-hero-grid {
  display: flex;
  gap: clamp(40px, 5vw, 60px);
  align-items: center;
}

.ab-hero-left { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(32px, 3.5vw, 48px); }

.ab-hero-title {
  font-size: var(--fs-hero);
  font-weight: 600;
  /* Шаг строк H1 в макете равен кеглю: 48px. */
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ab-hero-title .dim { color: var(--text-25); }

.ab-hero-desc {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ab-hero-buttons { display: flex; gap: 12px; }
.ab-hero-btn-col { display: flex; flex-direction: column; gap: 12px; }
/* Кнопки в макете крупнее общих: 287x52 и 186x52 на 1440 против 247x43
   у общей кнопки. Высота и боковые отступы .btn считаются от кегля
   (base.css), поэтому здесь переопределяются все три величины сразу —
   иначе кнопка выходит либо ниже, либо шире макета. */
.ab-hero-buttons .btn {
  font-size: clamp(14px, 1.18vw, 20px);   /* 17px @1440 */
  height: clamp(44px, 3.61vw, 61px);      /* 52px @1440 */
  padding: 0 clamp(18px, 1.66vw, 28px);   /* 24px @1440 */
}

/* ---------- Правая колонка hero — декоративные мокапы ----------
   Внутренние отступы всех карточек мокапа держит одна переменная:
   в макете они одинаковые, и разъезжаться им нельзя. */
.ab-hero-right {
  --ab-mock-pad: clamp(9px, 0.76vw, 13px);
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ab-research { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ab-research-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--ab-mock-pad);
  border-radius: 6px;
  border: 0.5px solid var(--track);
  background: var(--surface-15);
  backdrop-filter: blur(10px);
  font-size: var(--fs-mock-title);
  font-weight: 600;
  color: var(--text);
}

/* Иконки из icons.js приходят без width/height на самом <svg> —
   размер обязателен, иначе схлопываются в нулевую ширину. */
.ab-research-label-icon { display: inline-flex; flex-shrink: 0; width: 14px; height: 14px; color: var(--text-50); }
.ab-research-label-icon svg { width: 100%; height: 100%; }

/* Блоки идут сверху вниз с постоянным зазором. space-between здесь
   был ошибкой: карточка растягивается по высоте соседней панели
   комментариев, и весь остаток распределялся между блоками — чем шире
   окно, тем меньше строк в тексте и тем больше пустоты внутри (на
   1747px разрывы доходили до 80px). */
.ab-research-body {
  flex: 1;
  padding: var(--ab-mock-pad);
  border-radius: 8px;
  border: 0.5px solid var(--track);
  background: var(--surface-15);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.1vw, 16px);
  font-size: var(--fs-mock-body);
}
.ab-research-block { display: flex; flex-direction: column; gap: 8px; }
.ab-research-block-label { font-size: var(--fs-mock-micro); font-weight: 600; color: var(--text-50); text-transform: uppercase; }
.ab-research-block p { color: var(--text); line-height: 1.35; }
.ab-research-findings { display: flex; flex-direction: column; gap: 5px; color: var(--text); line-height: 1.35; }

.ab-research-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ab-mock-pad);
  border-radius: 6px;
  border: 0.5px solid var(--track);
  background: var(--surface-15);
  backdrop-filter: blur(10px);
}
.ab-research-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ab-research-stat-value { font-size: var(--fs-mock-title); font-weight: 600; color: var(--text); }
.ab-research-stat-label { font-size: var(--fs-mock-micro); color: var(--text-50); line-height: 1.3; }
.ab-research-sep { width: 1px; height: 24px; background: var(--track); flex-shrink: 0; }

/* Верхняя граница ширины — 300px, а не 240px: на широких экранах узкая
   панель набирала больше строк, чем карточка исследования рядом, и
   тянула вверх всю колонку (обе панели одной высоты). Так их высоты
   держатся вплотную от 1280px до 1920px. */
.ab-comments {
  width: clamp(180px, 16.67vw, 300px);
  flex-shrink: 0;
  padding: var(--ab-mock-pad);
  border-radius: 8px;
  border: 0.5px solid var(--track);
  /* Панель в макете не серая, а синяя: общий сине-фиолетовый подтон и
     свечение из правого нижнего угла (в макете от 34,34,58 слева до
     48,63,129 в углу). Раньше здесь был плоский surface-15, и правая
     колонка выглядела «без фона». */
  background:
    radial-gradient(85% 100% at 118% 85%, rgba(77, 107, 255, 0.55) 0%, transparent 72%),
    linear-gradient(180deg, rgba(96, 86, 220, 0.05) 0%, rgba(96, 86, 220, 0.22) 100%),
    var(--surface-15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ab-comments-tabs { display: flex; gap: 12px; }
.ab-comments-tab {
  flex: 1 0 0;
  text-align: center;
  padding-bottom: 3px;
  font-size: var(--fs-mock-title);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--track);
  border-bottom: 1px solid transparent;
}
.ab-comments-tab.active { color: var(--text); border-color: var(--accent); }

.ab-comment {
  padding: var(--ab-mock-pad);
  border-radius: 6px;
  border: 0.5px solid var(--track);
  background: var(--surface-15);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab-comment-head { display: flex; align-items: center; justify-content: space-between; }
.ab-comment-who { display: flex; align-items: center; gap: 3px; }
.ab-comment-avatar {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  font-size: 6px; font-weight: 700; color: var(--bg);
}
.ab-comment-handle { font-size: var(--fs-mock-body); }
.ab-comment-time { font-size: var(--fs-mock-micro); color: var(--text-50); }
.ab-comment-text { font-size: var(--fs-mock-body); color: var(--text); line-height: 1.35; }

.ab-comments-footer { display: flex; align-items: center; gap: 3px; }
.ab-comments-avatars { display: flex; }
.ab-comments-avatars .ab-comment-avatar { margin-right: -3px; border: 1px solid var(--panel); }
.ab-comments-footer-text { font-size: var(--fs-mock-micro); color: var(--text-50); }

/* ============================================================
   ЭКРАН 2 — КТО МЫ ТАКИЕ
   ============================================================ */
.ab-intro-grid { display: flex; gap: clamp(40px, 5vw, 60px); }

.ab-intro-left { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ab-intro-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Два абзаца в макете разделены, у каждого своя акцентная черта слева.
   Без зазора между ними черта выглядела одной непрерывной линией. */
.ab-intro-paragraphs { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); }
.ab-intro-p {
  padding-left: 12px;
  border-left: 1px solid var(--accent);
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.15;
}

/* Зазоры внутри правой колонки заданы не через gap: между общей
   карточкой и рядом карточек стоит связка .ab-intro-tree, и её высота
   и есть весь отступ (в макете там 20px, а не 20px плюс два gap). */
.ab-intro-right { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; --cards-gap: 24px; }
.ab-intro-highlight {
  padding: clamp(20px, 2vw, 24px);
  border-radius: 8px;
  /* Рамка слабая: в макете это 43,46,54 на фоне страницы, то есть
     0.12 прозрачности. Раньше стоял полный var(--text) — карточки
     выглядели обведёнными белым. */
  border: 1px solid var(--text-12);
  background: var(--surface-15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Связка «родитель → три карточки»: стойка из центра общей карточки,
   перекладина от центра левой карточки до центра правой и три ножки.
   Позиции ножек считаются от ширины ряда: у трёх равных карточек с
   зазором --cards-gap центр крайней отстоит от края на
   (100% - 2*gap) / 6. */
.ab-intro-tree { position: relative; height: 20px; flex-shrink: 0; }
.ab-intro-tree::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 10px;
  border-left: 1px dashed var(--text-20);
}
.ab-intro-tree::after {
  content: '';
  position: absolute;
  top: 10px;
  left: calc((100% - 2 * var(--cards-gap)) / 6);
  right: calc((100% - 2 * var(--cards-gap)) / 6);
  border-top: 1px dashed var(--text-20);
}
.ab-intro-tree-leg { position: absolute; top: 10px; height: 10px; border-left: 1px dashed var(--text-20); }
.ab-intro-tree-leg.left { left: calc((100% - 2 * var(--cards-gap)) / 6); }
.ab-intro-tree-leg.mid { left: 50%; }
.ab-intro-tree-leg.right { right: calc((100% - 2 * var(--cards-gap)) / 6); }
/* Кегли сняты с макета по ширине строк: «RECONVERSIA» 155px,
   «Экспертиза · Технологии · Накопленный опыт» 266px. Подпись в макете
   мельче общего card-размера — на нём строка выходила на 54px шире. */
.ab-intro-highlight-title { font-size: clamp(16px, 1.53vw, 26px); font-weight: 600; color: var(--text); }
.ab-intro-highlight-sub { font-size: var(--fs-micro); color: var(--text-50); }

.ab-intro-cards { display: flex; gap: var(--cards-gap); }
/* Карточки квадратные — так в макете: 184x184 при трёх в ряд на 1440.
   Раньше высота набиралась текстом и выходила 206px. */
.ab-intro-card {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 1;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: 8px;
  border: 1px solid var(--text-12);
  background: var(--surface-15);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* Свечение: по умолчанию горит общая карточка, при наведении на любую из
   трёх переходит на неё. Класс на колонку ставит about.js — из CSS
   выбрать предыдущего родителя по ховеру потомка нельзя. */
.ab-intro-highlight::after,
.ab-intro-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(90% 130% at 45% 118%, rgba(77, 107, 255, 0.55), transparent 66%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
/* Свечение лежит под текстом: без z-index у детей позиционированный
   ::after закрасил бы статичные заголовки поверх. */
.ab-intro-highlight > *,
.ab-intro-card > * { position: relative; z-index: 1; }
.ab-intro-highlight::after { opacity: 1; }
.ab-intro-right.cards-hover .ab-intro-highlight::after { opacity: 0; }
.ab-intro-card:hover::after { opacity: 1; }

.ab-intro-card-num { font-size: var(--fs-card); font-weight: 600; color: var(--text); }
/* Интерлиньяж с макета: шаг строк описания 15px при кегле 14 — только
   так семь строк текста укладываются в квадратную карточку. */
.ab-intro-card-desc { font-size: var(--fs-label); color: var(--text-50); line-height: 1.1; }

/* ============================================================
   ЭКРАН 3 — КОМАНДА
   ============================================================ */
.ab-team-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: clamp(32px, 3.5vw, 48px); }

/* Флекс с переносом, а не grid из четырёх колонок: карточек семь, и
   вторая строка (три штуки) должна стоять по левому краю — так в
   макете. Ширина ячейки считается от того же зазора: четыре в ряд. */
.ab-team-grid {
  --ab-team-gap: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--ab-team-gap);
}

/* Ячейка держит ширину; внутри — карточка, а под ней (только на
   мобильном) полоска и кнопка «Подробнее». */
.ab-member-cell {
  flex: 0 0 calc((100% - 3 * var(--ab-team-gap)) / 4);
  max-width: calc((100% - 3 * var(--ab-team-gap)) / 4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Карточка квадратная — в макете 296x296 при четырёх в ряд на 1440. */
.ab-member {
  position: relative;
  aspect-ratio: 1;
  /* Кегли внутри карточки считаются от ЕЁ ширины (cqw), а не от ширины
     окна: карточка на невысоких окнах уменьшается, и привязанный к vw
     текст переставал влезать — имя ломалось на две строки и закрывало
     лицо. Первая строка font-size в каждом правиле — запасная, для
     браузеров без контейнерных запросов. */
  container-type: inline-size;
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 1.8vw, 24px);
  gap: 12px;
  transition: border-color 0.3s var(--ease);
}
.ab-member:hover { border-color: var(--accent-50); }

/* Градиент — подложка на случай, когда фотографии ещё нет: с ней
   карточка выглядит так же, как выглядела в макете. */
.ab-member-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(77, 107, 255, 0.18) 0%, var(--surface-30) 60%);
}
/* object-position выше центра: в портретном кадре лицо в верхней
   трети, и при обрезке под квадрат оно должно остаться в кадре. */
.ab-member-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
/* Затемнение фотографии при наведении: в макете на ховере фото уходит
   почти в тень, чтобы читались описание и ссылка. Отдельным элементом,
   а не псевдо-элементом .ab-member-photo: ::before лёг бы ПОД <img>. */
.ab-member-dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.74);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.ab-member:hover .ab-member-dim { opacity: 1; }
.ab-member-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.81) 71%, rgba(0, 0, 0, 0.9) 100%);
}
.ab-member-avatar {
  position: absolute;
  top: 20px;
  left: 20px;
  width: clamp(40px, 3.5vw, 52px);
  height: clamp(40px, 3.5vw, 52px);
  font-size: var(--fs-title);
  transition: opacity 0.3s var(--ease);
}
/* На ховере текст поднимается к верхнему краю и попадает на кружок с
   инициалами (он есть только пока не загружена фотография) — убираем. */
.ab-member:hover .ab-member-avatar { opacity: 0; }

/* Текст прижат к низу карточки. При наведении под ним раскрывается
   описание, и вся группа за счёт нижнего выравнивания сама уезжает
   вверх — тот же эффект, что в макете, но без прыжка. */
.ab-member-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* flex-grow анимируется как число: на ховере тело разрастается на всю
     карточку, и имя за счёт этого плавно уезжает к верхнему краю — так
     в макете. Через justify-content такой переход не сделать: он
     переключается скачком. */
  flex-grow: 0;
  transition: flex-grow 0.4s var(--ease), padding-bottom 0.35s var(--ease);
}
.ab-member:hover .ab-member-body { flex-grow: 1; }
/* Кегли сняты с макета: при карточке 296px имя 23px, должность 14px,
   тег 13px. В долях ширины карточки это 7.6 / 4.6 / 4.4 cqw. При таких
   долях самое длинное имя («Коргожа Александр») и самая длинная
   должность («Co-owner Reconversia Group / CEO») укладываются в одну
   строку на любой карточке от 205px. */
.ab-member-name {
  font-size: clamp(15px, 1.4vw, 24px);
  font-size: 7.6cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.15;
}
.ab-member-role {
  font-size: var(--fs-label);
  font-size: 4.6cqw;
  color: var(--text-50);
  line-height: 1.2;
}
.ab-member-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-member-tag {
  height: 24px;
  height: 8.1cqw;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  padding: 0 4cqw;
  border-radius: var(--r-pill);
  background: var(--accent-15);
  font-size: var(--fs-label);
  font-size: 4.4cqw;
  color: var(--text);
}

/* Описание: свёрнуто по высоте, при наведении раскрывается. max-height
   в em, чтобы не зависеть от кегля: три строки плюс запас. */
.ab-member-bio-wrap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.ab-member:hover .ab-member-bio-wrap { max-height: 6em; opacity: 1; }
.ab-member-bio { font-size: var(--fs-label); font-size: 4.6cqw; color: var(--text); line-height: 1.35; }

/* Ссылка прижата к нижнему краю карточки: в макете между описанием и
   ней остаётся воздух. Появляется вместе с описанием. */
.ab-member-open {
  position: absolute;
  left: clamp(18px, 1.8vw, 24px);
  right: clamp(18px, 1.8vw, 24px);
  bottom: clamp(18px, 1.8vw, 24px);
  z-index: 1;
  font-size: var(--fs-label);
  font-size: 4.6cqw;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.ab-member:hover .ab-member-open { opacity: 1; transform: none; }
/* Персональных страниц пока нет — карточка не ссылка, и обещать
   «Открыть профиль» нечем. Ховер с описанием при этом остаётся. */
.ab-member.inactive .ab-member-open { display: none; }
.ab-member.inactive:hover .ab-member-body { padding-bottom: 0; }
/* Место под ссылку освобождается тем же переходом, что раскрывает
   описание, — иначе текст налез бы на неё. */
.ab-member:hover .ab-member-body { padding-bottom: 34px; }

/* Полоска-индикатор и кнопка «Подробнее» — только мобильный макет. */
.ab-member-bar,
.ab-member-more { display: none; }

/* ============================================================
   ЭКРАН 4 — МАНИФЕСТ (листается скроллом)
   ============================================================ */
.ab-manifesto-grid { display: flex; gap: clamp(40px, 5vw, 60px); align-items: center; }

.ab-manifesto-left { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ab-manifesto-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.ab-principles { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }

/* В макете у каждого принципа своя акцентная черта слева (у активного
   ярче), а неактивные не сворачиваются: их подзаголовок и описание
   видны приглушёнными. Раньше .ab-principle-body был display: none —
   неактивные показывали только заголовок. */
.ab-principles { gap: clamp(10px, 1vw, 14px); }
.ab-principle {
  padding: clamp(14px, 1.4vw, 18px) 0 clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 20px);
  border-left: 2px solid var(--accent-30);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  transition: border-color 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease);
  opacity: 0.35;
}
.ab-principle.active {
  opacity: 1;
  border-color: var(--accent);
  background: var(--surface-15);
}

/* Шапка принципа: номер в подложке, справа заголовок и подзаголовок
   в столбик — как в макете (раньше номер стоял в одну строку с
   заголовком, а подзаголовок уходил под них). */
.ab-principle-head { display: flex; align-items: flex-start; gap: 12px; }
.ab-principle-num {
  flex-shrink: 0;
  min-width: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--accent-15);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.ab-principle-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab-principle-title { font-size: var(--fs-card); font-weight: 600; color: var(--text); }
.ab-principle-subtitle { font-size: var(--fs-card); font-weight: 600; color: var(--accent); }
.ab-principle-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ab-principle-divider { height: 0.5px; background: var(--text-20); }
.ab-principle-desc { font-size: var(--fs-card); color: var(--text-50); line-height: 1.4; }

/* ============================================================
   ЭКРАН 5 — ОПЫТ И РЕЗУЛЬТАТЫ
   ============================================================ */
.ab-cases-grid { display: flex; gap: 24px; align-items: flex-start; }

.ab-cases-sidebar { width: clamp(240px, 20vw, 302px); flex-shrink: 0; padding: clamp(18px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 12px; }
.ab-cases-sidebar-label { font-size: var(--fs-card); font-weight: 600; color: var(--text-50); text-transform: uppercase; letter-spacing: 0.04em; }
.ab-case-item {
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: 10px;
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0.25;
}
.ab-case-item.active { border-left: 2px solid var(--accent); border-top: none; border-right: none; border-bottom: none; opacity: 1; }
.ab-case-item-title { font-size: var(--fs-card); font-weight: 600; color: var(--text); }
.ab-case-item-teaser { font-size: var(--fs-label); color: var(--text-50); line-height: 1.3; }

.ab-case-detail { flex: 1 0 0; min-width: 0; padding: clamp(20px, 2vw, 24px); display: flex; flex-direction: column; gap: clamp(24px, 2.5vw, 36px); }
.ab-case-detail-top { display: flex; flex-direction: column; gap: 24px; }
.ab-case-tag {
  align-self: flex-start;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--accent-15);
  font-size: var(--fs-label);
  color: var(--text);
}
.ab-case-head { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.ab-case-title { flex: 1 0 0; min-width: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.1; color: var(--text); }
.ab-case-avatars { display: flex; flex-shrink: 0; }
.ab-case-avatars .ab-avatar-ph { width: 36px; height: 36px; font-size: var(--fs-label); margin-right: -6px; border: 1px solid var(--panel); }
.ab-case-desc { font-size: var(--fs-body); color: var(--text-50); line-height: 1.4; }

.ab-case-stats { display: flex; gap: 12px; }
.ab-case-stat {
  flex: 1 0 0;
  min-width: 0;
  padding: clamp(16px, 1.6vw, 24px);
  border-radius: 8px;
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab-case-stat-head { display: flex; align-items: center; gap: 6px; }
.ab-case-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ab-case-stat-dot.red { background: #ff383c; }
.ab-case-stat-dot.blue { background: var(--accent); }
.ab-case-stat-dot.green { background: var(--ok); }
.ab-case-stat-label { font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.ab-case-stat-value { font-size: var(--fs-title); font-weight: 600; }
.ab-case-stat-value.red { color: #ff383c; }
.ab-case-stat-value.green { color: var(--ok); }
.ab-case-stat-caption { font-size: var(--fs-label); color: var(--text-50); }
.ab-case-stat-text { font-size: var(--fs-card); color: var(--text-50); line-height: 1.3; }

.ab-case-steps { display: flex; flex-direction: column; gap: 12px; }
.ab-case-steps-label { font-size: var(--fs-body); font-weight: 600; color: var(--text-50); text-transform: uppercase; }
/* align-items: flex-start и отступ сверху у стрелки — в макете стрелки
   стоят на линии кружков с номерами, а не на уровне заголовков шагов
   (при align-items: center они уезжали вниз, к середине всей строки). */
.ab-case-steps-row { display: flex; align-items: flex-start; gap: 12px; }
.ab-case-step { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-case-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-card);
  font-weight: 600;
  color: var(--text);
}
.ab-case-step-title { font-size: var(--fs-card); font-weight: 600; color: var(--text); }
.ab-case-step-desc { font-size: var(--fs-label); color: var(--text-50); line-height: 1.3; }
.ab-case-step-arrow { color: var(--accent); flex-shrink: 0; width: 24px; height: 12px; margin-top: 12px; }
.ab-case-step-arrow svg { width: 100%; height: 100%; }

/* ============================================================
   Адаптив
   ============================================================ */
/* На невысоких экранах (типичный ноутбук 1366×768) экраны «Команда» и
   «Кейсы» не влезали в высоту — .screen обрезает по overflow: hidden.
   Поджимаем только вертикальные отступы, раскладку не трогаем. */
/* «Команда» и «Кейсы» — самые плотные экраны. Порог поднят с 820 до
   960px: после увеличения кегля подзаголовков и текста карточек их
   содержимое перестало влезать в безопасную зону и уезжало под
   фиксированную шапку (на 1440x900 «Кейсы» — на 24px, на 1366x768 —
   на 35px). Сжимаем внутренние отступы, макет не меняем. */
/* min-width обязателен: без него правило работало и на телефонах
   (812px по высоте — это тоже «невысокий экран») и сжимало карточку
   команды до 210px, из-за чего имя с должностью налезали на фотографию. */
@media (min-width: 1025px) and (max-height: 960px) {
  .ab-eyebrow { gap: 8px; }
  .ab-team-head { gap: 12px; margin-bottom: 20px; }
  .ab-team-grid { --ab-team-gap: 14px; }
  /* Семь карточек в два ряда — основной вклад в высоту экрана
     «Команда». На невысоких окнах уменьшаем не высоту карточки, а
     ширину ячейки: карточка обязана оставаться квадратной (height
     перебивал бы aspect-ratio, и на 1440x900 карточки становились
     303x245). Ряд остаётся прижатым к левому краю. */
  /* Ограничиваем не ячейку, а всю сетку: ячейка остаётся ровно
     четвертью ряда, поэтому карточек в ряду по-прежнему четыре.
     Ограничение ячейки (было раньше) делало её у́же четверти, и в ряд
     влезало пять. На 1440x900 ограничение не срабатывает — там
     помещаются полноразмерные 294px из макета. */
  .ab-member { padding: 16px; gap: 8px; }
  @media (max-height: 860px) {
    .ab-team-grid { max-width: calc(4 * 230px + 3 * var(--ab-team-gap)); }
  }
  @media (max-height: 790px) {
    .ab-team-grid { max-width: calc(4 * 205px + 3 * var(--ab-team-gap)); }
  }
  .ab-member-body { gap: 8px; }
  .ab-cases-grid { gap: 16px; }
  .ab-cases-sidebar { padding: 16px; gap: 8px; }
  .ab-case-item { padding: 12px; gap: 4px; }
  .ab-case-detail { padding: 16px; gap: 16px; }
  .ab-case-detail-top { gap: 12px; }
  .ab-case-head { gap: 16px; }
  .ab-case-stats { gap: 10px; }
  .ab-case-stat { padding: 12px; gap: 6px; }
  .ab-case-steps { gap: 8px; }
  .ab-case-step { gap: 8px; }
}

@media (max-width: 1024px) {
  /* ============ Экран 1 ============
     Мобильный макет (Reconversia_21): текст hero по центру, подписи
     под кнопками убраны, а обе панели-мокапа остаются в две колонки —
     в столбик их не разворачиваем, в макете они рядом (171 и 160px при
     ширине окна 375). Мелкая «скриншотная» шкала внутри панелей тоже
     сохраняется: в макете там 7-10px. */
  .ab-hero-grid { flex-direction: column; align-items: stretch; gap: clamp(28px, 6vw, 40px); }
  .ab-hero-left { align-items: center; text-align: center; }
  .ab-hero-buttons { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; }
  .ab-hero-btn-col { width: 100%; }
  .ab-hero-btn-col .btn { width: 100%; }
  /* Подписей под кнопками в мобильном макете нет */
  .ab-hero-btn-col .caption { display: none; }
  .ab-hero-right { gap: 13px; }
  .ab-comments { width: 46.5%; }

  /* ============ Экран 2 ============ */
  .ab-intro-grid { flex-direction: column; gap: clamp(24px, 6vw, 36px); }
  .ab-intro-cards { flex-direction: column; }
  /* В столбик карточке квадрат не нужен: высота по тексту. */
  .ab-intro-card { aspect-ratio: auto; flex: none; }
  /* Активная карточка как в макете: остальные приглушены, свечение
     только у активной. Активную ведёт прокрутка — класс mobile-active
     на колонке ставит about.js, поэтому без скрипта вид не меняется. */
  .ab-intro-highlight,
  .ab-intro-card { transition: opacity 0.35s var(--ease); }
  .ab-intro-right.mobile-active .ab-intro-highlight,
  .ab-intro-right.mobile-active .ab-intro-card { opacity: 0.38; }
  .ab-intro-right.mobile-active .ab-intro-highlight.active,
  .ab-intro-right.mobile-active .ab-intro-card.active { opacity: 1; }
  .ab-intro-right.mobile-active .ab-intro-highlight::after { opacity: 0; }
  .ab-intro-right.mobile-active .ab-intro-highlight.active::after,
  .ab-intro-right.mobile-active .ab-intro-card.active::after { opacity: 1; }

  /* ============ Экран 3 ============
     Макет (Reconversia_21): две карточки в ряд, карточка квадратная
     (164x164 при 375), фотография видна целиком, имя с должностью — в
     НИЖНЕМ левом углу поверх затемнения снизу. Описания в карточке
     нет. Теги и кружок с инициалами на телефоне скрыты. Ховера тут
     нет, поэтому под карточкой — полоска-индикатор и отдельная кнопка
     «Подробнее». */
  .ab-team-grid { --ab-team-gap: 14px; }
  .ab-member-cell {
    flex: 0 0 calc((100% - var(--ab-team-gap)) / 2);
    max-width: calc((100% - var(--ab-team-gap)) / 2);
    gap: 12px;
  }
  .ab-member { padding: 12px; gap: 8px; }
  /* Затемнение на всю карточку — ховерное состояние десктопа. На
     телефоне ховера нет: раньше оно висело постоянно и вместе с
     описанием, стоявшим у нижнего края, гасило фотографию целиком.
     Достаточно градиента снизу (.ab-member-photo::after) — под именем
     фон тёмный, лицо остаётся открытым. */
  .ab-member-dim { opacity: 0; }
  .ab-member-tags,
  .ab-member-avatar,
  .ab-member-bio-wrap,
  .ab-member-open { display: none; }
  /* Имя с должностью прижаты к низу карточки, как на десктопе без
     ховера. Раньше тело растягивалось на всю карточку и уводило текст
     вверх — прямо на лицо. */
  .ab-member-body { flex: none; justify-content: flex-end; gap: 4px; padding-bottom: 0; }
  .ab-member-name { font-size: var(--fs-body); }
  .ab-member-role { font-size: var(--fs-micro); }
  /* Полоска под карточкой из макета: две половины, вторая акцентная. */
  .ab-member-bar { display: flex; gap: 7px; }
  .ab-member-bar i { flex: 1; height: 3px; border-radius: 999px; background: var(--track); }
  .ab-member-bar i:last-child { background: var(--accent); }
  .ab-member-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 8px;
    border: 0.5px solid var(--text-20);
    background: var(--surface-15);
    font-size: var(--fs-label);
    color: var(--text-50);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .ab-member-more:active { color: var(--text); border-color: var(--text-50); }
  /* Неактивная — пока нет персональных страниц: кнопка в макете есть,
     но никуда не ведёт, поэтому и не подсвечивается на нажатии. */
  .ab-member-more.inactive,
  .ab-member-more.inactive:active { color: var(--text-30); border-color: var(--text-12); cursor: default; }

  /* ============ Экран 4 ============ */
  .ab-manifesto-grid { flex-direction: column; align-items: stretch; gap: clamp(24px, 6vw, 32px); }


  /* ============ Экран 5 ============
     В макете аватары стоят в одной строке с бейджем «Case / 001», а
     заголовок идёт под ними на всю ширину. Сетка на .ab-case-detail-top,
     .ab-case-head раскрывается (display: contents), и её дети встают
     в нужные клетки. */
  .ab-cases-grid { flex-direction: column; }
  .ab-cases-sidebar { display: none; }
  .ab-case-detail { width: 100%; }
  .ab-case-detail-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .ab-case-head { display: contents; }
  /* Клетки заданы явно: при авторазмещении заголовок (он идёт в
     разметке раньше аватаров) занимал вторую клетку первой строки, и
     аватары уезжали в отдельную строку под ним. */
  .ab-case-tag { grid-area: 1 / 1; justify-self: start; align-self: center; }
  .ab-case-avatars { grid-area: 1 / 2; justify-self: end; align-self: center; }
  .ab-case-title { grid-area: 2 / 1 / 3 / -1; }
  .ab-case-desc { grid-area: 3 / 1 / 4 / -1; }
  /* Первый и третий показатель в ряд, «что обнаружили» — на всю
     ширину под ними (порядок из макета). */
  .ab-case-stats { flex-wrap: wrap; }
  .ab-case-stat { flex: 1 0 calc(50% - 12px); }
  .ab-case-stat:nth-child(2) { order: 1; flex-basis: 100%; }
  .ab-case-steps-row { flex-direction: column; align-items: stretch; }
  .ab-case-step-arrow { display: none; }
  /* Шаги листаются прокруткой: активный яркий, остальные приглушены —
     как принципы манифеста. Класс mobile-active ставит about.js. */
  .ab-case-steps-row.mobile-active .ab-case-step { opacity: 0.35; transition: opacity 0.35s var(--ease); }
  .ab-case-steps-row.mobile-active .ab-case-step.active { opacity: 1; }
  .ab-case-steps-row.mobile-active .ab-case-step.active .ab-case-step-num { background: var(--accent); color: var(--text); }
}

/* На планшете (мобильная ветка, но окно широкое) двух квадратов в ряд
   мало: карточка вырастает до 330px и внутри неё остаётся пустота.
   Три в ряд дают тот же размер, что на десктопе. */
@media (min-width: 601px) and (max-width: 1024px) {
  .ab-member-cell {
    flex: 0 0 calc((100% - 2 * var(--ab-team-gap)) / 3);
    max-width: calc((100% - 2 * var(--ab-team-gap)) / 3);
  }
}