/* ============================================================
   АСПЕКТПРОЕКТ · СТРАНИЦА «О КОМПАНИИ» — ИТЕРАЦИЯ 2 (30.07.2026)
   ------------------------------------------------------------
   Правки заказчика по собранной странице (ТЗ — «О компании»,
   итерация 2.md): полоса фактов героя удалена, блок «Разделы
   проекта» удалён (.divisions и его стили выпилены целиком), баг
   раскрытия карточек команды починен, добавлены два новых компонента
   (.founder — «Слово основателя», тёмный якорь страницы; .principles —
   «В чём уникальность», вертикальная рельса), ритм фонов и границы
   секций пересобраны под задачу «страница сухая» (раздел 4 ТЗ).

   Общее (токены, шапка, подвал, .hero--page, .hero__stats — на
   странице услуг, .how__viewport/.how-step, .letters__strip/
   .letters__track, .cta/.closing, .field*, .placeholder, var(--dark)) —
   в base.css, подключается на всех страницах. Здесь — только то, чего
   больше нигде нет: четыре компонента страницы (.counters, .founder ★,
   .principles ★, карточка человека .leader) и точечные страничные
   переопределения общих секций героя/заявки (#hero, #cta — см. ниже),
   которые НЕ меняют сами общие компоненты в base.css, а только их
   отступы на этой одной странице.
   ============================================================ */

/* ============================================================
   ЛИСТ 01 · ГЕРОЙ — переопределения только этой страницы
   ------------------------------------------------------------
   Полоса фактов .hero__stats удалена из разметки (ТЗ, итерация 2,
   раздел 1.1) — герой стал короче примерно на 90–100px синей плашки,
   и без неё выглядел пустым (ТЗ прямо просит проверить и добавить
   воздуха). Компонент .hero--page общий (base.css, все страницы
   услуг), поэтому трогать общий .hero__inner нельзя — добавка идёт
   через #hero, специфичность страницы, а не порядок каскада (та же
   техника, что у #cta ниже). Три ступени, а не одна: без явной
   отмены в @media общий адаптив .hero__media/.hero__inner для узких
   экранов (base.css) остался бы перебит зафиксированным значением. */
.hero .hero__inner { padding-bottom: 96px; }
@media (max-width: 1024px) {
  .hero .hero__inner { padding-bottom: 72px; }
}
@media (max-width: 768px) {
  .hero .hero__inner { padding-bottom: 48px; }
}

/* ============================================================
   ЛИСТ 02 · СЛОВО ОСНОВАТЕЛЯ — новый компонент ★
   ------------------------------------------------------------
   Личное обращение первого лица с портретом и крупной вынесенной
   цитатой (ТЗ, итерация 2, раздел 3.1). Тёмный якорь страницы —
   единственный настоящий тёмный блок в теле страницы (герой на фото
   якорем не считается, design-system каталог). Фон var(--dark) —
   тот же токен, что у подвала, не новый цвет.
   Разметка: .founder__grid (текст слева / фото справа — у заказчика
   так же) → .founder__text с вынесенной цитатой .founder__quote
   (синяя линия слева var(--blue-soft) — тот же акцент, что у
   .trust на тёмном фоне, плюс крупный Onest 700, без новых гарнитур)
   → .founder__media с портретом .founder__portrait (тот же приём,
   что у .leader__avatar — иконка профиля на подложке, не фото и не
   .placeholder). Второй кадр из ТЗ (опциональный) не взят — два
   кадра 4:5+4:3 в узкой колонке давали медиа-столбец заметно выше
   текстового, решение и расчёт — в отчёте задачи. Пропорция колонок
   1.15/0.85 — не новая, та же, что у .about__grid (переиспользование
   отношения, а не изобретение нового). */
.founder {
  /* Белый фон, а не тёмный. Тёмный якорь здесь пробовали — заказчик
     30.07.2026: «лучше сделать на белом фоне, так больше пространства».
     Он прав и по второй причине: блок стоит вторым, при загрузке страницы
     его верх попадает в экран, а содержимое ещё не проявилось — тёмная
     плашка читалась как пустой чёрный провал под первым экраном.
     Тёмным на странице остаётся только первый экран, как на всех
     остальных страницах сайта. */
  position: relative;
  padding: 120px 0;
  background: var(--white);
  overflow: hidden;
}
.founder__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: start;
  margin-top: 48px;
}
.founder__text p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 22px;
}
/* !important на font-size обязателен: без него .founder__text p (класс+тег,
   специфичность 0,1,1) перебивает .founder__lead (0,1,0) — тот самый
   каскадный капкан, что уже ломал .hero__photo (design-system, «грабли»).
   Проверено браузером: без !important строка рендерилась 17px, а не 19px. */
.founder__lead {
  font-size: 19px !important;
  font-weight: 600;
  color: var(--ink) !important;
}
.founder__quote {
  margin: 36px 0;
  padding-left: 28px;
  border-left: 3px solid var(--blue);
}
.founder__quote p {
  font-family: var(--head);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  margin: 0;
}

.founder__media { display: flex; flex-direction: column; }
.founder__figure { margin: 0; }
.founder__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}
.founder__avatar { width: 40%; color: var(--line-strong); }
.founder__avatar svg { display: block; width: 100%; height: auto; }
/* Портрет — с 28.10.2026 (слайд 4 «Презентации компании Аспект»). */
.founder__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder__caption {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  /* Личное обращение читается человек-сначала на планшете и мобильном —
     order:-1 переносит фото выше текста, тот же приём, что у
     .svc-panel__media на страницах услуг (design-system 4.4). */
  .founder__grid { grid-template-columns: 1fr; gap: 40px; }
  .founder__media { order: -1; max-width: 360px; }
}
@media (max-width: 768px) {
  .founder { padding: 72px 0; }
  .founder__grid { margin-top: 36px; }
  .founder__media { max-width: none; }
}

/* ============================================================
   ЛИСТ 03 · ЦИФРЫ — компонент «счётчики»
   ------------------------------------------------------------
   Отличается от .hero__stats не только фоном: крупнее кегль, синий
   цвет числа (акцент на бумаге, а не белый на синьке), вертикальные
   разделители --line вместо rgba-белого. Анимация — существующий
   механизм [data-count] из common.js (initCounters()): конечное
   значение уже лежит в textContent разметки, JS его только
   переигрывает через IntersectionObserver, один раз, с уважением
   prefers-reduced-motion. Решение не заводить отдельную GSAP-анимацию
   под эту страницу — в отчёте задачи.
   Пятый счётчик «Госзаказ» (итерация 2, раздел 1.1) — контент бывшей
   полосы фактов героя, не число. Сетка выросла с 4 до 5 колонок, gap
   сужен с 32 до 24px, чтобы «Госзаказ» не оказался у порога
   переполнения узкой колонки — .counter--word отдельно уменьшает
   кегль значения для слова против крупного кегля чисел.
   ============================================================ */
/* 28.10.2026: тёплый серый — до этого белые цифры шли вплотную к белому
   блоку основателя (заказчик: «2 блока подряд одного фона»). */
.counters { padding: 100px 0 104px; background: var(--paper-2); }
.counters .section-head { margin-bottom: 48px; }

.counters__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.counter { padding-left: 28px; border-left: 1px solid var(--line); }
.counter:first-child { padding-left: 0; border-left: none; }
.counter__value {
  font-family: var(--head);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--blue);
  /* Две страховки против того, что число «пляшет» во время анимации.

     tabular-nums: в обычной начертке «0» шире «1», поэтому по ходу отсчёта
     строка меняла ширину. На «с 2000» она перестала помещаться в колонку
     227px и цифра уезжала на вторую строку, а к концу отсчёта («с 2017»)
     возвращалась назад — заказчик поймал это 30.07.2026. Табличные цифры
     одинаковой ширины: строка занимает одно и то же место на всём отсчёте.

     nowrap: даже если содержимое однажды не влезет, оно не должно рваться
     на две строки — это ломает высоту всего ряда счётчиков. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* «с» перед годом — вспомогательное слово, а не часть числа. Табличные
   цифры шире обычных, и на полном кегле «с 2017» уже не оставляло запаса
   в пятиколоночной сетке. Приставка уменьшена — год остаётся крупным,
   а строка гарантированно умещается. */
.counter__prefix {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0;
}
/* Слово, а не число — тот же приём, что у «Госзаказ» в бывшей полосе
   фактов (design-system: значение — одно-два слова). При кегле чисел
   (до 64px) восьмибуквенное слово не помещается в узкую колонку
   5-колоночной сетки — уменьшенный, но всё ещё заметно крупный кегль. */
.counter--word .counter__value { font-size: clamp(22px, 2.6vw, 36px); }
.counter__label {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 12px;
  max-width: 24ch;
}

/* ============================================================
   ЛИСТ 04 · НАШ ПОДХОД — дословный текст источника
   ------------------------------------------------------------
   Не .about в старом виде (тёмный блок «Доверие» на размытом фото):
   тёмный якорь страницы теперь «Слово основателя» выше (ЛИСТ 02).
   Простой текстовый столбец, первый абзац чуть крупнее и темнее —
   лёгкий акцент без новых токенов.
   ============================================================ */
.approach { padding: 110px 0 120px; background: var(--paper); }
.approach .section-title { margin-top: 4px; }
.approach__body { max-width: 680px; margin-top: 28px; }
.approach__body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.approach__body p:first-child {
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
}

/* ============================================================
   ЛИСТ 05 · В ЧЁМ УНИКАЛЬНОСТЬ — новый компонент ★
   ------------------------------------------------------------
   Пять пунктов заказчика дословно (ТЗ, итерация 2, раздел 3.2).
   Вертикальная рельса — приём, которого на сайте не было:
   .stage-list похож внешне (вертикальная линия, метки), но это
   нумерованный таймлайн с прилипающей колонкой, устроен иначе и занят
   процессом на главной. Здесь: сплошная линия border-left на самом
   списке (а не на строках — держится при любой высоте пунктов),
   квадратная засечка .principles__mark у каждого пункта поверх линии,
   тонкий разделитель между пунктами через смежный селектор (первый
   пункт не нуждается в обходе «прозрачной границы» — у него просто
   нет предыдущего соседа). Заголовок + текст без нумерации и без
   сетки — вертикальный список принципов, не карточки.
   Белая секция между двумя paper — граница сверху и снизу держит
   чередование фонов страницы (design-system, «смежные секции не
   совпадают по фону»), обоснование — в отчёте задачи.
   ============================================================ */
.unique {
  padding: 110px 0 120px;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.principles {
  margin-top: 40px;
  max-width: 780px;
  border-left: 2px solid var(--line);
}
.principles__item {
  position: relative;
  padding: 28px 0 28px 40px;
}
.principles__item + .principles__item { border-top: 1px solid var(--line); }
.principles__mark {
  position: absolute;
  left: -4px;
  top: 33px;
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform .2s;
}
.principles__item:hover .principles__mark { transform: scale(1.3); }
/* Заголовок при наведении не только синеет, но и растёт — правка
   заказчика 30.07.2026: «не только слева точка и синий цвет, но и размер
   слова».
   Правило сайта «ховер не двигает вёрстку» при этом не нарушено:
   line-height задан в пикселях и на ховере не меняется, поэтому высота
   строки постоянна, а текст растёт внутри уже отведённого места.
   Заголовки короткие (самый длинный — 33 знака), при 23px в колонке
   740px они не переносятся, так что число строк тоже не меняется. */
.principles__title {
  font-size: 20px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  transition: color .2s, font-size .2s;
}
.principles__item:hover .principles__title {
  color: var(--blue);
  font-size: 23px;
}
.principles__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}

/* ============================================================
   ЛИСТ 06 · КАК УСТРОЕНА РАБОТА — обёртка ленты .how__viewport
   ------------------------------------------------------------
   Внутренности ленты — общий компонент в base.css. Фон paper, не
   white: секция выше (В чём уникальность) и секция ниже (Команда)
   уже белые — paper между ними держит чередование (обоснование — в
   отчёте задачи). Без border-top: paper-секции на этой странице
   границ не несут, разделение даёт сама смена тона.
   ============================================================ */
.how { padding: 110px 0 120px; background: var(--paper); }

/* Блок «Разделы проекта и кто их ведёт» (.divisions, был ЛИСТ 05) —
   УДАЛЁН итерацией 2 (ТЗ, раздел 1.2): дублировал карточки команды
   ниже. Компонент и все его стили выпилены из файла — HTML-разметки
   с классом .divisions на странице больше нет. Довод про штатных
   специалистов перенесён во вступление блока «Команда» ниже. */

/* ============================================================
   ЛИСТ 07 · КОМАНДА
   ------------------------------------------------------------
   Секция белая, поднятая — главный содержательный блок страницы.
   Открывающий кадр — общее фото команды (16:9, без вуали), затем три
   именованные группы. Карточка человека — .leader (компонент заведён
   на «Команде» 30.07.2026, здесь расширен: три варианта сетки под
   размер группы).
   ============================================================ */
.team { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }

.team-photo { margin-bottom: 64px; }
.team-photo__frame.placeholder { aspect-ratio: 16 / 9; width: 100%; }
/* Общий кадр команды 3:2 в рамке 16:9: срезаются полки сверху
   и край стола снизу, люди целиком */
.team-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 60%; border-radius: var(--radius); }

.team-group + .team-group { margin-top: 64px; }
.team-group__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}
.team-group__num {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--blue);
}
/* Было 22px — правка заказчика (ТЗ, итерация 2, раздел 4): «Заголовки
   групп в команде сейчас 22px, теряются между карточками». Крупнее и с
   отрицательным трекингом, как остальная крупная типографика страницы
   (design-system: «крупный заголовок, короткая строка» — отрицательный
   трекинг только на крупном кегле), но заметно мельче .section-title
   (clamp(32,4vw,54)) — это подзаголовок группы, а не заголовок секции. */
.team-group__title {
  font-size: clamp(26px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.leaders {
  /* Одна сетка на все три группы. Раньше у каждой группы была своя
     (3 колонки / 4 / одна фиксированная 340px), и на одном экране
     оказывались карточки трёх разных размеров: 392, 287 и 340px на
     1440px, а на 1063px — 306, 474 и 340. Читается как сбой вёрстки,
     а не как группировка. Ширина карточки теперь одна на всей странице,
     группы различаются только заголовком.
     align-items: start — БАГ ИТЕРАЦИИ 2 (ТЗ, раздел 2.1): без него
     grid растягивает карточки по высоте самой высокой в ряду, и
     раскрытие одной карточки (higher grid-template-rows у её
     .leader__panel) раздувает всю строку грида — соседние карточки
     стретчатся вместе с ней и показывают пустое поле под «О
     специалисте», как будто раскрылись все разом. С align-items:
     start каждая карточка занимает только свою собственную высоту,
     раскрытие одной не трогает высоту строки грида и соседей. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: start;
}

.leader {
  /* display:flex не нужен: раньше им растягивали карточку гендиректора
     по высоте ряда за счёт stretch с грида — именно это и вызывало баг
     выше. Ровность ряда закрытых карточек теперь даёт не stretch, а
     .leader__intro { min-height } ниже: у всех восьми карточек теперь
     одинаковая структура (фото + intro + toggle + panel), поэтому
     обычный блочный поток укладывает их на одинаковую высоту сам. */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s;
}
.leader:hover { border-color: var(--line-strong); }

.leader__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leader__avatar { width: 44%; color: var(--line-strong); }
.leader__avatar svg { display: block; width: 100%; height: auto; }
/* Портреты — с 28.10.2026 (слайд 5 «Презентации компании Аспект»,
   вырезаны со слайда, 480×600). Рамка .leader__photo та же, 4:5. */
.leader__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.leader__body { padding: 26px 26px 8px; }
/* Модификатор оставлен про запас: если когда-нибудь появится человек
   без описания (как раньше был Кукуть) — .leader--plain по-прежнему
   выравнивает нижний отступ карточки без кнопки раскрытия. С
   30.07.2026 (итерация 2) на странице не используется — у Кукутя
   теперь есть текст и такое же раскрытие, как у всех. */
.leader--plain .leader__body { padding-bottom: 26px; }

/* Обёртка имени и должности — БАГ ИТЕРАЦИИ 2, пункт 3 (ТЗ, раздел
   2.1): «текстовой части до разделителя задать минимальную высоту под
   две строки имени и две строки должности». У Кукутя имя в две строки,
   у остальных — в одну; без min-height кнопка «О специалисте» в
   закрытых карточках стояла бы на разной высоте и ряд читался бы
   рваным, даже когда align-items: start уже не даёт карточкам
   тянуться по высоте соседей. Расчёт: 2 строки имени (19px×1.25) +
   отступ 6px + 2 строки должности (14px при line-height 1.6 от body). */
.leader__intro { min-height: 100px; }

.leader__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.leader__role {
  font-size: 14px;
  color: var(--blue);
  font-weight: 600;
  margin-top: 6px;
}

/* Триггер раскрытия — тот же язык, что у .faq-item__q/.faq-item__mark,
   уменьшенный масштаб под карточку. */
.leader__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.leader__toggle:hover { color: var(--blue); }
.leader__mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.leader__mark::before,
.leader__mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ink);
  transition: transform .25s ease, background-color .2s;
}
.leader__mark::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.leader__mark::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.leader__toggle:hover .leader__mark::before,
.leader__toggle:hover .leader__mark::after { background: var(--blue); }
.leader.is-open .leader__mark::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.leader__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.leader.is-open .leader__panel { grid-template-rows: 1fr; }
.leader__panel-inner { overflow: hidden; }

.leader__section { padding: 4px 26px 22px; }
.leader__section p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Модификатор сетки: группа «Проектные разделы», четыре человека.
   4 колонки на десктопе → 2 на ≤1250px → 1 на ≤768px. Пороги — уже
   существующие в лестнице сайта (1250 использован для сжатия шапки,
   768 — стандартный «телефонный» брейкпоинт), выбраны расчётом:
   при контейнере 1320px и gap 28px карточка на 4 колонки ≈309px, у
   порога 1250px (контейнер ≈1160px) — ≈269px, оба выше опасной зоны
   220–260px (design-system, «Средние ширины»); сразу за порогом —
   2 колонки (контейнер ≈705px на 769px вьюпорта → карточка ≈340px). */
/* Лестница колонок — общая для всех групп. Считана от ширины карточки:
   при четырёх колонках она 287px на 1440 и 250px на 1250 — ниже уходить
   нельзя, это опасная зона 220–260px, из-за которой заказчик уже просил
   переводить четыре карточки в ряд в два столбца. Поэтому на 1180
   переходим на три, на 900 — на две, и только на 480 — на одну.
   Одна колонка выше 768px недопустима: карточка становится 728px шириной
   и больше тысячи пикселей высотой — фото съедает экран. */
@media (max-width: 1180px) {
  .leaders { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .leaders { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .leaders { grid-template-columns: 1fr; }
}

/* ============================================================
   ЛИСТ 08 · ДОПУСКИ И НОПРИЗ — обёртка ленты .letters
   ------------------------------------------------------------
   Структурные стили ленты (.letters__strip/.letters__track,
   scroll-snap у .placeholder--a4) — общий компонент в base.css,
   второе использование после главной (design-system: компонент,
   использованный второй раз, переезжает в base.css). Здесь — только
   фон и отступы: на главной секция шла без верхнего отступа
   (продолжение ленты карточек проектов), здесь это самостоятельный
   блок — обычный ритм 110/120.
   ============================================================ */
/* 28.10.2026: тёплый серый — между белой командой и бумажной заявкой */
.nopriz { padding: 110px 0 120px; background: var(--paper-2); }
.nopriz .section-head { margin-bottom: 44px; }

/* Выписки из реестра членов СРО (28.10.2026): два листа рядом, лист —
   белым на тёплом сером, по нажатию открывается PDF. Наведение — лист
   увеличивается внутри рамки, стрелка сдвигается; только от движения
   мыши (.mysh). */
.dopuski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.dopusk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; color: var(--ink); }
.dopusk__list { display: block; aspect-ratio: 600 / 849; overflow: hidden; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.dopusk__list img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 0; }
.dopusk__tx { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 6px; }
.dopusk__k { font-size: 14px; color: var(--ink-2); }
.dopusk__h { font-family: var(--head); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; transition: color .2s; }
.dopusk__d { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
.dopusk__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--blue); }
.mysh .dopusk:hover .dopusk__list img,
.dopusk:focus-visible .dopusk__list img { transform: scale(1.06); }
.mysh .dopusk:hover .dopusk__h,
.dopusk:focus-visible .dopusk__h { color: var(--blue); }
.mysh .dopusk:hover .usl-str,
.dopusk:focus-visible .usl-str { transform: translateX(4px); }
.usl-str { width: 18px; height: 12px; flex: 0 0 auto; transition: transform .25s; }

/* ЛИСТ 09 · ЗАЯВКА: линия-разделитель сверху снята 28.10.2026 — секция
   «Допуски» перед ней теперь на тёплом сером, фоны и так разные. */

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
/* Порог 1250, а не 1024: при контейнере ~1090–1160px (viewport 1025–1180)
   четыре колонки с gap 32px дают карточку 210–249px — опасная зона
   220–260px (design-system, «Средние ширины»), при этом переполнения нет
   и на глаз незаметно, находится только расчётом и замером. Тот же порог
   1250, что и у .leaders--wide — при нём карточка становится ≥267px. */
@media (max-width: 1250px) {
  .counters__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
  .dopuski { grid-template-columns: 1fr; gap: 40px; }
  .counter:nth-child(odd) { padding-left: 0; border-left: none; }
  .counter:nth-child(n+3) { padding-top: 20px; }
}

@media (max-width: 768px) {
  .counters { padding: 72px 0; }
  .approach { padding: 72px 0; }
  .unique { padding: 72px 0; }
  .how { padding: 72px 0 80px; }
  .team { padding: 72px 0; }
  .nopriz { padding: 72px 0; }
  .dopusk { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
  .dopusk__h { font-size: 19px; }
  .dopusk__d { font-size: 14px; }

  .team-photo { margin-bottom: 40px; }
  .team-group + .team-group { margin-top: 48px; }

  .principles { margin-top: 32px; }
}

@media (max-width: 480px) {
  .approach__body p:first-child { font-size: 17.5px; }

  .principles__item { padding: 22px 0 22px 30px; }
  .principles__mark { top: 27px; }
  /* Ховера на тач-экране нет, а на узкой колонке заголовок уже
     переносится — рост кегля добавил бы ему строку и сдвинул вёрстку. */
  .principles__title { font-size: 18px; line-height: 26px; }
  .principles__item:hover .principles__title { font-size: 18px; }

  /* 4:5 на весь экран съедает половину экрана на телефоне
     (design-system, раздел 7) — укорачиваем, как .segment--compact
     делает для фото сегментов. */
  .leader__photo { aspect-ratio: 4 / 3; }
  .leader__avatar { width: 34%; }
}

/* ============================================================
   ФОТО НА ТЕЛЕФОНЕ (25.10.2026)
   ------------------------------------------------------------
   Правка заказчика по снимку с телефона: портрет основателя 4:5
   во всю ширину занимал целый экран, а восемь карточек команды
   с такими же портретами растягивали блок до 5000 px.
   1. Заглушки портретов — тот же вид «зона фото», что у всех
      остальных кадров сайта (пунктир, диагонали, подпись), вместо
      серого силуэта: силуэт читался как готовая картинка, а не как
      место под снимок.
   2. Основатель на телефоне: небольшой портрет рядом с подписью
      «кто говорит», ниже — сам текст.
   3. Команда на телефоне: строка на человека — портрет слева,
      имя и роль справа, «О специалисте» во всю ширину. Без рамки
      карточки, строки разделены линией.
   ============================================================ */
.founder__portrait,
.leader__photo {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-strong) calc(50% - 0.5px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-strong) calc(50% - 0.5px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    var(--paper-2);
  border: 1px dashed var(--line-strong);
}
.founder__avatar,
.leader__avatar { display: none; }
.founder__portrait::after,
.leader__photo::after {
  content: 'Портрет';
  padding: 5px 10px;
  background: var(--paper-2);
  font-size: 12px;
  color: var(--ink-2);
}
/* когда придёт снимок, рамка и подпись не нужны */
.founder__portrait:has(img),
.leader__photo:has(img) { background: var(--paper-2); border: none; }
.founder__portrait:has(img)::after,
.leader__photo:has(img)::after { content: none; }

@media (max-width: 768px) {
  .founder__media { max-width: none; }
  .founder__figure {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: end;
  }
  .founder__caption { margin-top: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
  .founder__portrait::after,
  .leader__photo::after { padding: 3px 6px; font-size: 10.5px; }
}

@media (max-width: 600px) {
  .leaders { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .leader {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 0 4px;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .leader__photo { aspect-ratio: 4 / 5; align-self: start; }
  .leader__body { display: contents; }
  .leader__intro { grid-column: 2; min-height: 0; align-self: center; }
  .leader__name { font-size: 17px; }
  .leader__role { font-size: 13.5px; }
  .leader__toggle { grid-column: 1 / -1; margin-top: 12px; padding: 12px 0; border-top: none; }
  .leader__panel { grid-column: 1 / -1; }
  .leader__section { padding: 0 0 16px; }
}