/* ==========================================================================
   Страница «О нас» – нода Figma 32417:4191 (1920×11981, 16 прямых детей).

   Карта секций: _figma/02-screens/o-nas-i-komanda.md.
   Двенадцать содержательных блоков (шапка и подвал – общие, четыре
   прямоугольника с x = −645 / −415 / 2339 / 2569 лежат за пределами холста
   и в вёрстку не попадают: это продолжение карусели преподавателей,
   обрезанное рамкой макета).

   Все размеры сняты через get_design_context по каждой ноде.
   Подключается по слугу страницы, см. inc/enqueue.php.
   ========================================================================== */

.page-about {

  /* --- Токены страницы --------------------------------------------------
     Здесь только то, чему НЕТ пары в variables.css. Править общий файл
     нельзя – он одновременно в работе у других страниц; список кандидатов
     на переезд в дизайн-систему вынесен в отчёт по странице.

     Кегли 32 / 36 / 40 / 64 в переменные Figma не вынесены (32 есть как
     h_4), но реально встречаются на этой странице по 2-11 раз каждый. */
  --about-fs-display:  40px;   /* заголовок синего блока, ноды 32417:4442, 4325, 4303 */
  --about-fs-h2:       36px;   /* заголовок секции, 8 нод */
  --about-fs-name:     32px;   /* имя в карточке преподавателя, Figma h_4 */
  --about-fs-stub:     64px;   /* заглушка «видео», 5 нод */

  /* Трекинг заголовков: 36px при −2.16px = −0.06em, при −2.88px = −0.08em.
     Системный −0.05em здесь не используется ни разу. */
  --about-ls-display:  -0.02em;
  --about-ls-tight:    -0.03em;

  /* Поля блоков во всю ширину. У контейнера макета 40px, а у синих
     полос – 96px по бокам и 128px сверху. Это НЕ ошибка разбора:
     значения одинаковы во всех трёх полосах. */
  --about-edge:        96px;
  --about-pad-y:       128px;

  --about-space-10:    10px;   /* отступ описания в карточке «Наш подход» */
  --about-space-40:    40px;
  --about-space-80:    80px;   /* единственный промежуток между блоками ≠ 140 */

  --about-radius-tile: 20px;   /* плитка иконки 115px в «Ценностях» */
  --about-radius-card: 14.336px; /* карточка преподавателя, нода 32489:2874 */

  /* Ширины кнопок макета. В variables.css есть 485 / 266 / 808 –
     576 и 471 в системе отсутствуют. */
  --about-btn-w-join:  576px;
  --about-btn-w-diag:  471px;

  /* Градиенты. --gradient-avatar (115.394°) уже в токенах – им залит круг
     с логотипом. Ещё три угла в макете свои; переменные lin_gradient_*
     Figma отдаёт пустыми, поэтому значения сняты с рендера. */
  --about-blue-fade:   #D7ECFF;
  --about-tile-fill:   linear-gradient(180deg, var(--color-blue-light) 0%, var(--about-blue-fade) 100%);
  --about-grad-video:  linear-gradient(116.537deg, rgb(230, 219, 255) 13.411%, rgb(181, 220, 255) 97.274%);
  --about-grad-photo:  linear-gradient(127.53deg, rgb(230, 219, 255) 13.411%, rgb(181, 220, 255) 97.274%);

  /* Вторичный текст в макете сделан прозрачностью, а не отдельным цветом. */
  --about-dim:         .6;

  padding-bottom: var(--section-gap);
}

/* Вертикальный ритм: 140px между блоками – 10 промежутков из 12. */
.page-about > section + section { margin-top: var(--section-gap); }

/* Два исключения, оба замерены по макету, а не выведены.
   Селектор повторяет специфичность правила выше – иначе 140 перебивает. */
.page-about > .about-band  { margin-top: var(--about-space-80); }  /* 1707 → 1787 */
.page-about > .about-facts { margin-top: var(--space-64); }        /* 3355 → 3419 */


/* ==========================================================================
   Общие части: декор синих полос, заглушка «видео», подзаголовки, карточки
   ========================================================================== */

/* --- Декоративный слой ---------------------------------------------------
   Композиция «фото + иконки-конфетти + круги» нарисована под холст ровно
   1920px и привязана к нему абсолютными координатами. Поэтому слой всегда
   1920 и центрируется, а не тянется: иначе иконки уезжают с плеч человека.
   Лишнее срезается overflow полосы. */
.about-decor {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--page-width);
  height: 100%;
  margin-left: calc(var(--page-width) / -2);
  pointer-events: none;
}

.about-decor > * { position: absolute; }

/* Ширина у декора задана в пикселях макета, ограничение из base.css мешает. */
.about-decor img { max-width: none; }

.about-tile {
  display: block;
  overflow: clip;
}

/* inset в % от самой плитки (она position:absolute – свой containing block).
   padding:% здесь нельзя: процент шёл бы от .about-decor (1920px). */
.about-tile img {
  position: absolute;
  inset: var(--tile-inset, 15%);
  width: auto;
  height: auto;
  max-width: none;
}

.about-tile--green  { background: var(--color-green); }
.about-tile--red    { background: var(--color-red); }
.about-tile--purple { background: var(--color-purple); }
.about-tile--mint   { background: var(--color-mint); }
.about-tile--blue   { background: var(--color-brand); }
.about-tile--yellow { background: var(--color-yellow); }

/* Круги-подложки в блоках-призывах развёрнуты: важен не сам круг, а
   направление градиента внутри него. */
.about-ring--turned { transform: rotate(131.66deg) scaleY(-1); }

/* --- Заглушка «видео» ----------------------------------------------------
   В макете пять белых и градиентных прямоугольников с надписью «видео».
   Роликов в макете нет – это места под них, а не готовый блок. */
.about-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  overflow: clip;
}

.about-stub span {
  width: 100%;
  text-align: center;
  font-size: var(--about-fs-stub);
  line-height: .9;
  font-weight: 500;
  letter-spacing: var(--about-ls-tight);
  color: var(--color-text);
  opacity: .22;
}

/* Плашка с плеером (inc/video.php) в декоративном слое: слой прозрачен для
   мыши (.about-decor pointer-events: none) и лежит под кольцами и слоем
   контента – постер выглядел «матовым», клик не доходил. Плееру – клики и
   верх стека (2026-08-17). */
.about-decor .about-stub:has(> .p99-video, > .p99-video__frame) {
  pointer-events: auto;
  z-index: 3;
}

/* Якоря меню «О нас → Компания / Команда» (#company, #team): при переходе
   секция не должна прятаться под шапкой – она в потоке над контентом. */
.page-about [id] { scroll-margin-top: calc(var(--header-h) + var(--space-24)); }

.about-stub--light    { background: var(--color-bg); }
.about-stub--gradient { background: var(--about-tile-fill); }
.about-stub--avatar   { background: var(--about-grad-video); }

/* --- Надзаголовок с точкой ----------------------------------------------- */

.about-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.about-eyebrow__dot {
  flex: 0 0 var(--space-16);
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* --- Заголовок и подзаголовок секции -------------------------------------
   36px с интерлиньяжем 0.9. В variables.css такого кегля нет: --fs-h2 = 28,
   и это размер ПОДзаголовков этой страницы, а не заголовков. */
.about-h2 {
  font-size: var(--about-fs-h2);
  line-height: .9;
  font-weight: 500;
  letter-spacing: var(--about-ls-display);
  color: var(--color-text);
}

/* 28px. Кегль совпадает с --fs-h2, но вес здесь 400, а не системный 500. */
.about-lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  opacity: var(--about-dim);
}

.about-note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--about-dim);
}

/* --- Кнопки --------------------------------------------------------------
   Форма берётся у .btn из base.css, размеры – из макета: высота 57 и
   ФИКСИРОВАННАЯ ширина, кнопки не по контенту. Состояний наведения в
   макете не нарисовано, поэтому :hover здесь нет. */
.about-btn {
  min-height: 0;
  height: var(--btn-height);
  max-width: 100%;
  padding: var(--btn-padding);
  gap: var(--space-4);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  white-space: nowrap;
}

.about-btn--light {
  width: var(--btn-w-hero);
  background: var(--color-bg);
  color: var(--color-text);
}

.about-btn--outline {
  width: var(--btn-w-hero);
  background: var(--color-brand);
  color: var(--color-text-invert);
  border: 1px solid var(--color-bg);
}

.about-btn--wide { width: var(--about-btn-w-join); }
.about-btn--diag { width: var(--about-btn-w-diag); }

/* --- Номер в кружке ------------------------------------------------------- */

.about-num {
  display: flex;
  flex: 0 0 var(--space-48);
  align-items: center;
  justify-content: center;

  width: var(--space-48);
  height: var(--space-48);
  border-radius: var(--radius-pill);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.about-num--blue   { background: var(--color-brand); }
.about-num--red    { background: var(--color-red); }
.about-num--purple { background: var(--color-purple); }
.about-num--green  { background: var(--color-green); }
.about-num--yellow { background: var(--color-yellow); }
.about-num--mint   { background: var(--color-mint); }

/* --- Карточка со счётчиком ------------------------------------------------
   .card из base.css не подходит: там фон жёстко --color-bg-cold и отступ
   12, а на этой странице у одного и того же компонента три фона (белый,
   светло-серый, холодный голубой) и два отступа. */
.about-card {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.about-card--fixed  { height: 253px; }
.about-card--cold   { background: var(--color-bg-cold); }
.about-card--soft   { background: var(--color-bg-soft); }

.about-card--accent {
  background: var(--color-brand);
  border: 1px solid var(--color-bg);
}

.about-card__text {
  width: 100%;
  text-align: center;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.about-card__text--invert { color: var(--color-text-invert); }

/* --- Серая панель с сеткой карточек --------------------------------------- */

.about-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.about-panel__title {
  width: 100%;
  text-align: center;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.about-panel__title--big {
  max-width: 577px;
  font-size: var(--about-fs-h2);
  line-height: 1;
  letter-spacing: var(--about-ls-tight);
}

.about-panel__grid {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.about-panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}

/* Ряд, который делит высоту панели поровну (панель со странами). */
.about-panel__row--grow {
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
}

/* --- Таблетка внутри строки ----------------------------------------------
   В Figma подпись лежит ОТДЕЛЬНЫМ слоем поверх текста-заглушки со
   служебными пробелами («10 ле    опыта»). В вёрстке она встроена в
   строку: иначе заголовок разъезжается при любой смене шрифта. */
.about-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  padding: 2.82px 11.278px;
  border-radius: var(--radius-pill);

  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text-invert);
  white-space: nowrap;
}

.about-pill--red    { background: var(--color-red); }
.about-pill--mint   { background: var(--color-mint); }
.about-pill--purple { background: var(--color-purple); }
.about-pill--yellow { background: var(--color-yellow); }
.about-pill--green  { background: var(--color-green); }


/* ==========================================================================
   1. Хиро – нода 32417:4196 (1920×917)
   ========================================================================== */

.about-hero {
  position: relative;
  display: flex;
  min-height: 917px;

  /* В макете шапка лежит ПОВЕРХ синего хиро: серая пилюля на синем фоне,
     хиро начинается с y = 0. В вёрстке шапка идёт обычным потоком, поэтому
     блок поднимается ровно на её фактическую высоту --header-h (замер в
     main.js – на 1025–1430 шапка двухрядная и выше расчётных 100px). */
  margin-top: calc(-1 * var(--header-h));

  /* Верхние 100px блока накрывают шапку. Блок прозрачен для мыши, иначе
     он перехватывает клики по меню и кнопкам шапки; содержимое лежит
     ниже шапки и события получает как обычно. */
  pointer-events: none;
}

/* Фон уводится под шапку отрицательным z-index: сама .site-header не
   позиционирована, а слой с z-index −1 рисуется ниже фонов потока.
   Так шапка остаётся кликабельной и видимой, а общий header.css не
   приходится трогать. */
.about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-brand);
  overflow: clip;
}

.about-hero__inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-64);

  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--about-pad-y) var(--about-edge) var(--space-64);
  /* Хиро поднят под шапку на --header-h, поэтому верхний отступ не может
     быть меньше высоты шапки + зазор: на ≤1439 --about-pad-y падает до
     64px, и заголовок уходил ПОД шапку (замечание заказчика 2026-08-06). */
  padding-top: max(var(--about-pad-y), calc(var(--header-h) + var(--space-24)));
}

.about-hero__inner > * { pointer-events: auto; }

.about-hero__texts,
.about-hero__secondary,
.about-hero__goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-hero__title {
  max-width: 978px;
  color: var(--color-text-invert);
}

.about-hero__lead {
  max-width: 755px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-text-invert);
}

.about-hero__note {
  max-width: 580px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-invert);
  opacity: var(--about-dim);
}

.about-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}


/* ==========================================================================
   2. Как мы смотрим на подготовку – ноды 32442:3484 и 32460:7460
   ========================================================================== */

.about-approach__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
}

/* Расхождение макета: левая колонка стоит на x = 109, тогда как у восьми
   из девяти блоков страницы левая граница 40. Выравниваем по контейнеру –
   правая панель при этом встаёт на свои 970 пиксель в пиксель. */
.about-approach__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 661px;
}

.about-approach__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-panel--summer { flex: 0 1 910px; }


/* ==========================================================================
   3. Синяя полоса – нода 32417:4441 (1920×479)
   ========================================================================== */

.about-band {
  position: relative;
  display: flex;
  min-height: 479px;
}

.about-band__bg {
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  overflow: clip;
}

.about-band__inner,
.about-join__inner,
.about-cta__inner {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--about-pad-y) var(--about-edge);
}

.about-band__title {
  max-width: 658px;
  font-size: var(--about-fs-display);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--about-ls-display);
  color: var(--color-text-invert);
}


/* ==========================================================================
   4. Что такое 99Percentile – ноды 32417:4945 … 32417:4950
   ========================================================================== */

.about-what__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.about-what__sub {
  max-width: 499px;
  margin-top: var(--space-16);
}

/* Круг с логотипом и пять карточек вокруг него – абсолютная композиция
   ноды 32467:7593. Холст = от верха кольца (Figma 2626) до низа карточки 03
   (3102+253): 729px. left в % от 1840, top – в cqi (см. ниже).

   МАСШТАБИРОВАНИЕ (заказчик, 2026-08-12): на средних экранах композиция
   должна сохраняться, а не складываться в ряд. Все размеры переведены в
   cqi – сотые доли ширины контейнера: 1cqi = 18.4px при макетных 1840,
   поэтому на 1920 значения совпадают с макетом пиксель в пиксель, а ниже
   вся сцена ужимается пропорционально, как уменьшенный макет. Координаты
   top карточек приходят инлайном из шаблона тоже в cqi. */
.about-what > .container { container-type: inline-size; }

.about-what__canvas {
  position: relative;
  height: 39.62cqi;                  /* 729 / 18.4 */
  margin-top: var(--space-48);
}

.about-what__ring {
  position: absolute;
  left: 38.804%;                     /* (754 − 40) / 1840 */
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22.391cqi;                  /* 412 / 18.4 */
  height: 22.391cqi;
  padding: 2.609cqi;                 /* 48 */
  border-radius: var(--radius-pill);
  background: var(--gradient-avatar);
}

.about-what__ring img {
  width: 15.217cqi;                  /* 280 / 18.4 – как в макете */
  height: auto;
}

.about-what__ring img {
  width: 280px;
  height: 280px;
}

/* Внутренний отступ карточки 01 в макете 24, у остальных четырёх – 12.
   Приведено к 12: единичное значение против четырёх одинаковых.
   Размеры и типографика в cqi – сцена ужимается целиком (см. канвас);
   у кеглей и номера стоит нижний предел, чтобы текст не вырождался. */
.about-what__item {
  position: absolute;
  z-index: 2;
  width: 19.13cqi;                   /* 352 / 18.4 */
  height: 13.75cqi;                  /* 253 / 18.4 */
  gap: max(8px, 0.652cqi);           /* 12 */
  padding: max(10px, 1.304cqi);      /* 24 */
}

.about-what__item .about-card__text {
  font-size: max(13px, 1.304cqi);    /* 24 */
}

.about-what__item .about-num {
  flex-basis: max(30px, 2.609cqi);
  width: max(30px, 2.609cqi);        /* 48 */
  height: max(30px, 2.609cqi);
  font-size: max(13px, 1.304cqi);    /* 24 */
}


/* ==========================================================================
   5. Цифры и страны – ноды 32417:4897 и 32465:7567
   ========================================================================== */

.about-facts__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-20);
}

.about-facts__stats {
  display: flex;
  flex: 1 1 838px;
  flex-direction: column;
  gap: var(--space-20);
}

.about-panel--countries {
  flex: 1 1 983px;
  height: 582px;
}

.about-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 130.5px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.about-stat--soft { background: var(--color-bg-soft); }
.about-stat--cold { background: var(--color-bg-cold); }

.about-stat__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.about-stat__desc {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--about-dim);
}


/* ==========================================================================
   6. Почему наш подход отличается – нода 32442:3561
   ========================================================================== */

.about-why__head,
.about-values__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.about-why__sub {
  max-width: 661px;
  margin-top: var(--space-16);
}

/* Промежуток между карточками в макете ровно 1px – карточки почти
   слиплись, разделяет их белая рамка. Так и оставлено. */
.about-why__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--space-48);
}

.about-why-card {
  display: flex;
  align-items: center;
  padding: var(--space-20);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius-lg);
}

.about-why-card--soft { background: var(--color-bg-soft); }
.about-why-card--cold { background: var(--color-bg-cold); }

/* Номер занимает ровно половину ширины карточки – так в макете. */
.about-why-card__side {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
}

.about-why-card__body {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
  padding-left: var(--about-space-10);
}

.about-why-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.about-why-card__desc {
  max-width: 581px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--about-dim);
}


/* ==========================================================================
   7. Основатель – нода 32465:7565
   Ритм шапки по абсолютам Figma (y от 5070):
   eyebrow→title 16, title→lead 32, lead→note 24, note→ряд 44≈48.
   Lead (32417:4637) без opacity; dim только у note (4638).
   ========================================================================== */

.about-founder__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-founder__title { max-width: 1259px; }

.about-founder__lead {
  max-width: 835px;
  margin-top: var(--space-16); /* + gap 16 = 32 до title */
  opacity: 1;                  /* в макете полный #3A3A3A, не .about-lead dim */
}

.about-founder__note {
  max-width: 499px;
  margin-top: var(--space-8);  /* + gap 16 = 24 до lead */
}

.about-founder__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);        /* 815 − 40 − 755 */
  margin-top: var(--space-48);
}

.about-founder__video {
  flex: 0 1 755px;
  height: 650px;
}

.about-panel--founder {
  flex: 1 1 1065px;
  min-height: 650px;
}

/* Figma −1.2px @ 24px = −0.05em. Системный −0.02em шире – «Участник Stanford»
   не влазит в ширину карточки (~197px) и уезжает на 4-ю строку. */
.about-panel--founder .about-card__text {
  letter-spacing: -0.05em;
}


/* ==========================================================================
   8. Команда – нода 32489:2997
   Карточка 436.72×1160 @ x=742; боковые ряды 678×287 @ y=+32 от карточки.
   Портреты – экспорт плиток Figma (кадр уже в файле).
   ========================================================================== */

.about-team__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-team__sub {
  max-width: 620px;
  margin-top: var(--space-16);
}

.about-team__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);             /* 742−40−678 и 1202−(742+437) */
  margin-top: var(--space-64);       /* 6419 − (6290+68) */
}

.about-team__stage {
  position: relative;
  flex: 0 0 437px;
}

/* Ряды портретов на 32px ниже верха карточки (= её padding). */
.about-team__group {
  display: flex;
  flex: 1 1 678px;
  gap: var(--space-24);
  padding-top: var(--space-32);
}

.about-team__tile,
.about-team__photo {
  position: relative;
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--about-tile-fill);
}

.about-team__tile {
  flex: 1 1 0;
  min-width: 0;
  height: 287px;

  /* Тайл – кнопка (2026-08-12): это соседний участник, клик делает его
     активным. Сброс кнопочных стилей + курсор и лёгкий отклик. */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.about-team__tile[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .about-team__tile:hover { transform: translateY(-4px); }
}

.about-team__tile:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* Все портреты в одном градиентном кадре, как центральное фото. */
.about-team__tile img { border-radius: var(--radius-lg); }

/* Экспорт плитки уже с кадром – тянем на весь бокс. */
.about-team__tile img,
.about-team__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/*
   Карточка – пример 32489:2939: 437×auto, pad 32, gap 24, radius 14.336,
   фото 372×383 на градиенте, имя h_4, роль 18 / 60 %, линия, текст 20,
   список с галочками 52px.
*/
.about-team__card {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: var(--space-24);

  width: 100%;
  padding: var(--space-32);
  border-radius: var(--about-radius-card);
  background: var(--color-bg-soft);
}

.about-team__card.is-active {
  display: flex;
}

.about-team__photo {
  width: 100%;
  height: 383px;
  background: var(--about-tile-fill); /* lin_gradient_2, как в примере */
}

.about-team__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}

.about-team__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  width: 100%;
}

.about-team__name {
  font-size: var(--about-fs-name);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: -0.05em;           /* Figma −1.6px @ 32 */
  color: var(--color-text);
}

.about-team__role {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: -0.03em;           /* Figma −0.54px @ 18 */
  color: var(--color-text);
  opacity: var(--about-dim);
}

.about-team__rule {
  margin: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-border); /* bg_grey_stroke #E6E6E6 */
}

.about-team__quote {
  width: 100%;
  font-size: var(--fs-body);
  line-height: 1.3;                  /* text_20_reg */
  letter-spacing: -0.05em;           /* −1px @ 20 */
  color: var(--color-text);
}

.about-team__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.about-team__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.about-team__benefits img { flex: 0 0 52px; width: 52px; height: 52px; }

.about-team__benefits span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.05em;           /* Figma −0.9px @ 18 */
  color: var(--color-text);
}

/* Стрелки на левой/правой границе карточки, по центру фото (top 186). */
.about-team__nav {
  position: absolute;
  top: 186px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 74px;
  height: 75px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  cursor: pointer;
}

.about-team__nav--prev { left: -37px; }
.about-team__nav--next { right: -37px; }
.about-team__nav--next img { transform: scaleX(-1); }
.about-team__nav img { width: 29px; height: 23px; }


/* ==========================================================================
   9. Кто работает с нами – нода 32442:3558
   ========================================================================== */

.about-educators__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.about-educators__title { max-width: 650px; }

.about-educators__sub {
  max-width: 668px;
  margin-top: var(--space-16);
}

/* Две колонки по 445 и одна на 910 – ровно 1840 с промежутками 20.
   Порядок в разметке смысловой (01…05), место в сетке задаётся явно:
   в макете карточки идут «змейкой» вокруг фотографии. */
.about-educators__grid {
  display: grid;
  grid-template-columns: 445fr 445fr 910fr;
  grid-template-rows: repeat(3, 275px);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.about-educators__a1    { grid-area: 1 / 1; }
.about-educators__b1    { grid-area: 1 / 2; }
.about-educators__photo { grid-area: 2 / 1; }
.about-educators__b2    { grid-area: 2 / 2; }
.about-educators__a3    { grid-area: 3 / 1; }
.about-educators__b3    { grid-area: 3 / 2; }
.about-educators__video { grid-area: 1 / 3 / 4 / 4; }

.about-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.about-box--soft { background: var(--color-bg-soft); }
.about-box--cold { background: var(--color-bg-cold); }

.about-box__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.about-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93px;
  height: 93px;
  border-radius: 15.5px;
}

.about-box__icon--green  { background: var(--color-green); }
.about-box__icon--purple { background: var(--color-purple); }
.about-box__icon--red    { background: var(--color-red); }
.about-box__icon--yellow { background: var(--color-yellow); }
.about-box__icon--mint   { background: var(--color-mint); }

.about-box__text {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.about-educators__photo {
  position: relative;
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--about-grad-photo);
}

.about-educators__photo img {
  position: absolute;
  left: 4.94%;
  top: 13.82%;
  width: 107.87%;
  height: 106.47%;
  max-width: none;
  object-fit: cover;
}


/* ==========================================================================
   10. Хотите стать частью команды – нода 32417:4323 (1920×714)
   ========================================================================== */

.about-join,
.about-cta {
  position: relative;
  display: flex;
}

.about-join { min-height: 714px; }

/* Расхождение макета: фрейм 32417:4301 объявлен 1920×911, но его
   собственный автолейаут набирает 1039 – содержимое на 128px выше рамки и
   в Figma заезжает в поля (по 64 сверху и снизу). Высота задана жёстко,
   чтобы страница сходилась с макетом по вертикали: полей 128px хватает,
   ничего не обрезается. */
.about-cta { height: 911px; }

.about-join__bg,
.about-cta__bg {
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  overflow: clip;
}

.about-join__inner { gap: var(--space-64); }

.about-join__texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.about-join__title,
.about-cta__title {
  font-size: var(--about-fs-display);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--about-ls-display);
  color: var(--color-text-invert);
}

.about-join__title { max-width: 943px; }

.about-join__lead {
  max-width: 611px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
  color: var(--color-text-invert);
}

.about-join__content {
  display: flex;
  flex-direction: column;
  gap: var(--about-space-40);
}

.about-join__note {
  max-width: 472px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-invert);
}


/* ==========================================================================
   11. Ценности – нода 32442:3557
   ========================================================================== */

.about-values__row {
  display: flex;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.about-value {
  display: flex;
  flex: 1 1 445px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);

  height: 360px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: clip;
}

.about-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 115px;
  border-radius: var(--about-radius-tile);
}

.about-value__icon--red    { background: var(--color-red); }
.about-value__icon--purple { background: var(--color-purple); }
.about-value__icon--yellow { background: var(--color-yellow); }
.about-value__icon--mint   { background: var(--color-mint); }

/* Первая иконка в макете растянута до 83×52 – экспорт отдаёт её в 62×40. */
.about-value__icon--red img { width: 83.396px; height: 52px; }

.about-value__text {
  width: 100%;
  text-align: center;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}


/* ==========================================================================
   12. Начните с диагностики – нода 32417:4301 (1920×911)
   ========================================================================== */

.about-cta__inner { gap: var(--space-64); }

.about-cta__texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.about-cta__title { max-width: 524px; }

.about-cta__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 823px;
  max-width: 100%;
}

.about-cta__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}


/* ==========================================================================
   ХИРО 1600–1919: ПРОПОРЦИОНАЛЬНОЕ СЖАТИЕ ХОЛСТА (2026-08-17)

   Декор хиро – холст 1920 на абсолютных координатах макета. Между 1600 и
   1919 он раньше просто центрировался и резался по краям: на 1700 плашка
   «видео» и мужчина уходили за правый край (замечание заказчика). Правило
   заказчика для средних экранов – сохранять дизайн, только уменьшать
   (как хиро главной). Поэтому фон с декором и контент получают zoom на
   коэффициент 100vw/1920 (число через tan(atan2())): весь холст 1920
   ложится в окно, тексты и кнопки уменьшаются вместе с ним.
   Ниже 1600 декор спрятан (см. МИНИМАЛЬНЫЙ АДАПТИВ ниже).
   ========================================================================== */

@supports (zoom: tan(atan2(1px, 1px))) {

  /* Хиро – до 1280 (заказчик, 2026-08-17: картинки хиро должны уменьшаться
     и оставаться видимыми, исчезать только на совсем малых экранах). */
  @media (min-width: 1280px) and (max-width: 1919px) {

    .about-hero {
      --about-k: tan(atan2(100vw, 1920px));
      /* Поля – макетные: холст пропорциональный, а не «узкий экран». */
      --about-edge:  96px;
      --about-pad-y: 128px;
      /* Высота секции – тоже по холсту, иначе люди «повисают» над низом. */
      min-height: calc(917px * var(--about-k));
    }

    .about-hero__bg,
    .about-hero__inner { zoom: var(--about-k); }

    /* Шапка не в zoom: её высоту переводим в уменьшенные единицы. */
    .about-hero__inner {
      padding-top: max(var(--about-pad-y), calc((var(--header-h) + var(--space-24)) / var(--about-k)));
    }

    /* Кнопки не мельче 0.8 макета (16px): в левой колонке места хватает. */
    .about-hero__buttons { zoom: calc(max(var(--about-k), 0.8) / var(--about-k)); }
  }

  @media (min-width: 1600px) and (max-width: 1919px) {

    /* Те же холсты 1920 у синих полос ниже: «Синяя полоса», «Стать частью
       команды», финальный CTA – их плашки «видео» и фото резались так же. */
    .about-band,
    .about-join,
    .about-cta { --about-k: tan(atan2(100vw, 1920px)); }

    .about-band { min-height: calc(479px * var(--about-k)); }
    .about-join { min-height: calc(714px * var(--about-k)); }
    .about-cta  { height: calc(911px * var(--about-k)); }

    .about-band__bg,
    .about-band__inner,
    .about-join__bg,
    .about-join__inner,
    .about-cta__bg,
    .about-cta__inner { zoom: var(--about-k); }
  }
}

/* ==========================================================================
   МИНИМАЛЬНЫЙ АДАПТИВ

   Макета под ширины меньше 1920 у страницы НЕТ (см. variables.css, раздел
   «чего здесь нет»): ни 1440, ни мобильного. Ниже – только страховка от
   горизонтальной прокрутки и от наложения блоков друг на друга, а не
   продуманная адаптивная сетка. Когда появится мобильный макет, весь этот
   раздел переписывается заново, а не дополняется.
   ========================================================================== */

@media (max-width: 1599px) {

  /* Декор синих полос жёстко привязан к холсту 1920: фотография стоит на
     фиксированных координатах и при сужении экрана наезжает на заголовок.
     Убираем – он декоративный. Вместе с ним уходят заглушки «видео» этих
     полос: в макете они часть той же композиции. Хиро – исключение: его
     холст сжимается zoom'ом до 1280 (см. выше), декор прячется ниже. */
  .about-band .about-decor,
  .about-join .about-decor,
  .about-cta  .about-decor { display: none; }

  /* Высоты синих полос заданы макетом под этот же холст – без декора
     держать их нечем, отдаём высоту содержимому. */
  .about-band,
  .about-join,
  .about-cta { min-height: 0; }

  .about-cta { height: auto; }
}

@media (max-width: 1279px) {
  .about-hero .about-decor { display: none; }
  .about-hero { min-height: 0; }
}

/* Композиция «карточки вокруг круга» масштабируется cqi-единицами и живёт
   до планшета (заказчик, 2026-08-12: на средних экранах сохранять дизайн,
   только уменьшать). Ниже 1024 сцена мельче ~0.55 макета – кегли упираются
   в нижние пределы и карточки перерастают свои клетки, поэтому дальше
   обычный ряд с переносами. */
@media (max-width: 1023px) {

  .about-what__canvas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-12);
    height: auto;
  }

  .about-what__ring,
  .about-what__item { position: static; }

  .about-what__ring { width: 300px; height: 300px; padding: var(--space-32); }
  .about-what__ring img { width: 100%; }

  .about-what__item {
    flex: 1 1 280px;
    width: auto;
    height: auto;
    min-height: 200px;
    gap: var(--space-12);
    padding: var(--space-12);
  }

  .about-what__item .about-card__text { font-size: var(--fs-h3); }

  .about-what__item .about-num {
    flex-basis: var(--space-48);
    width: var(--space-48);
    height: var(--space-48);
    font-size: var(--fs-h3);
  }
}

@media (max-width: 1439px) {

  .page-about {
    --about-edge: var(--side-padding);
    --about-pad-y: var(--space-64);
  }
}

@media (max-width: 1279px) {

  .about-approach__row,
  .about-facts__row,
  .about-founder__row,
  .about-team__row,
  .about-values__row,
  .about-cta__row,
  .about-panel__row { flex-wrap: wrap; }

  .about-panel--summer,
  .about-panel--countries,
  .about-panel--founder,
  .about-approach__text,
  .about-facts__stats,
  .about-founder__video,
  .about-team__group,
  .about-team__stage { flex: 1 1 100%; }

  .about-approach__text { max-width: none; }
  .about-panel--countries { height: auto; }
  .about-founder__video { height: 420px; }
  .about-panel--founder { min-height: 0; }

  /* Стрелкам по бокам карточки места нет – ставим их ПОВЕРХ фото
     (2026-08-12: раньше прятали, и на планшете/телефоне карусель листалась
     только кликом по соседним портретам). Меньше и внутрь стейджа. */
  .about-team__nav { width: 48px; height: 48px; top: 140px; }
  .about-team__nav--prev { left: 12px; }
  .about-team__nav--next { right: 12px; }
  .about-team__nav img { width: 20px; height: 16px; }
  .about-team__group { padding-top: 0; }

  /* Складывание карточек «вокруг круга» переехало в блок ≤1759 выше:
     абсолютная композиция ломалась уже с ~1750. */

  .about-educators__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .about-educators__a1,
  .about-educators__b1,
  .about-educators__b2,
  .about-educators__a3,
  .about-educators__b3,
  .about-educators__photo,
  .about-educators__video { grid-area: auto; }

  .about-box,
  .about-educators__photo { min-height: 275px; }
  .about-educators__video { min-height: 320px; }

  .about-cta__grid { width: 100%; }
}

@media (max-width: 767px) {

  /* Разворот рядов в колонку. flex-wrap здесь обязан вернуться в nowrap:
     с ним колонка с ограниченной высотой переносит карточки в СОСЕДНИЕ
     колонки и ряд уезжает вправо на всю длину. */
  .about-panel__row,
  .about-cta__row {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  /* Основной размер в колонке – это высота. Базис 0 от десктопной
     раскладки её обнуляет, поэтому возвращаем размер по содержимому. */
  .about-panel__row--grow,
  .about-panel__row > .about-card,
  .about-cta__row > .about-card { flex: 0 0 auto; }

  .about-card,
  .about-value { width: 100%; }

  .about-why-card { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .about-why-card__side,
  .about-why-card__body { flex: 1 1 auto; width: 100%; padding-left: 0; }

  .about-stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-8); height: auto; }

  .about-educators__grid { grid-template-columns: 1fr; }

  .about-team__group { flex-wrap: wrap; }
  .about-team__tile { flex: 1 1 140px; }

  .about-what__ring { width: 260px; height: 260px; padding: var(--space-32); }
  .about-what__ring img { width: 100%; height: auto; }

  .about-stub span { font-size: var(--about-fs-h2); }
  .about-hero__title { font-size: var(--about-fs-h2); }
  .about-band__title,
  .about-join__title,
  .about-cta__title { font-size: var(--about-fs-h2); }
  .about-h2 { font-size: var(--fs-h2); }
}

/* --- О нас · страны: первая — крупная плашка на всю ширину, остальные 3×3 (правка 2026-08-25) --- */
.about-card--feature { width: 100%; }
.about-card--feature .about-card__text {
  font-size: var(--about-fs-h2, var(--fs-h2));
  line-height: 1.05;
}
/* Панель со странами растёт под контент (плашка + сетка 3×3, до 10 стран). */
.about-panel--countries { height: auto; min-height: 582px; }
/* Длинные названия («Австралия и Новая Зеландия») не ломают выравнивание карточек. */
.about-panel--countries .about-card__text { text-wrap: balance; }