/* =========================================================
   О компании
   Макет: Figma → Final → «О компании» (1920 / 1200 / 640 / 320).

   Во фреймах 1200 и 1920 страница нарисована на сетке 12 × 30 × 30, но поля и гаттер здесь общие
   (19 → 30, как на всех страницах) — решение пользователя 12.10: одна сетка на сайте.
   Размеры на десктопе: clamp(A, A + (B − A) · k, B), A — фрейм 1200, B — фрейм 1920.
   Заголовки, подписи, тексты и отступы между секциями — общие классы и токены из style.css.
   ========================================================= */

.page-about {
  /* Левая колонка направлений и ценностей: край 3-й колонки на 1920 (472.5), начало 4-й на 1200 (314.25) — по общей сетке 19 → 30 */
  --side: clamp(314.25px, calc(314.25px + 158.25 * var(--k)), 472.5px);
}

/* =========================================================
   Первый экран
   ========================================================= */

/* Во всю высоту окна под шапкой, но не ниже минимума (цифры — у нижнего края).
   Тексты в потоке: если экран низкий, блок растёт и цифры не наезжают на текст */
.about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(var(--hero-min), var(--screen));
  overflow: hidden;
  isolation: isolate;
  background: var(--c-dark);
  color: #fff;
}

.about-hero__intro {
  grid-column: 1 / span 6;
  position: relative;
  z-index: 2;
  padding-top: var(--head-pt); /* крошки — как на «Контактах» */
  padding-bottom: var(--gap-title);
}

.about-hero__title { max-width: clamp(487px, calc(487px + 151 * var(--k)), 638px); } /* отступ от крошек — общий --title-mt (во фрейме 98 — не повторяем, решение 12.10) */

.about-hero__text {
  max-width: 385px;
  margin-top: var(--gap-title); /* заголовок → текст, как везде (во фрейме 59 → 28) */
  font-family: var(--font-os);
  font-size: var(--fs-body);
  line-height: 1.33;
  color: var(--c-hero-text);
}

/* Слои: волны → логотип → затемнение → тексты */
.about-hero__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-hero__waves {
  position: absolute;
  z-index: -1;
  left: clamp(-188px, calc(97.3px - 285.3 * var(--k)), 97.3px);
  top: clamp(236.1px, calc(236.1px + 215.8 * var(--k)), 451.9px);
  width: clamp(1209.4px, calc(1209.4px + 1085.4 * var(--k)), 2294.8px);
  max-width: none;
  height: auto;
  transform-origin: 0 0;
  transform: rotate(-15.1deg);
}

.about-hero__logo {
  position: absolute;
  left: clamp(603.2px, calc(603.2px + 168.8 * var(--k)), 772px);
  top: -3px;
  width: clamp(530.7px, calc(530.7px + 476.3 * var(--k)), 1007px);
  max-width: none;
  height: auto;
}

/* Градиент от прозрачного к фону — от верха страницы до низа первого экрана */
.about-hero__shade {
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--header-h));
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(185.3deg, transparent 19.9%, var(--c-dark) 75.2%);
}

/* Цифры: линия сверху, разделители по середине гаттера (1920) / по краю колонки (1200) */
.about-stats {
  position: relative;
  z-index: 2;
  height: clamp(134px, calc(134px + 46 * var(--k)), 180px);
  margin: auto 0 0;
  border-top: 1px solid var(--c-menu-line);
}

.about-stat {
  grid-column: span 3;
  position: relative;
  padding-top: clamp(11.25px, calc(11.25px + 2.65 * var(--k)), 13.9px);
}
.about-stat + .about-stat { padding-left: clamp(0px, calc(15 * var(--k)), 15px); }
.about-stat + .about-stat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * clamp(15px, calc(30px - 15 * var(--k)), 30px));
  width: 1px;
  background: var(--c-menu-line);
}

.about-stat__value {
  font-family: var(--font-ui);
  font-size: var(--fs-num-s);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.about-stat__caption {
  max-width: clamp(246px, calc(246px + 9 * var(--k)), 255px);
  margin: clamp(0.75px, calc(0.75px + 1.35 * var(--k)), 2.1px) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.about-stat--wide .about-stat__caption { max-width: clamp(304px, calc(304px + 19 * var(--k)), 323px); }

/* =========================================================
   История компании
   ========================================================= */

.history {
  position: relative;
  padding-block: var(--gap-section);
}

/* Горизонтальная линия под первым экраном и вертикальная — продолжение среднего разделителя цифр */
.history::before,
.history::after {
  content: "";
  position: absolute;
  background: var(--c-line);
}
.history::before {
  top: calc(var(--gap-section) - var(--gap-title)); /* подпись — ниже линии на «заголовок → содержимое» */
  left: 0;
  right: 0;
  height: 1px;
}
.history::after {
  top: 0;
  bottom: 0;
  left: calc(50% - clamp(0px, calc(15px - 15 * var(--k)), 15px));
  width: 1px;
}

.history__label {
  grid-column: 1 / -1;
  text-align: center;
}

.history__title {
  grid-column: 1 / -1;
  max-width: clamp(880px, calc(880px + 489 * var(--k)), 1369px);
  margin: var(--gap-label) auto 0;
  text-align: center;
}

.history__timeline {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(43px, calc(43px + 11.4 * var(--k)), 54.4px);
}

.history__logo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: clamp(267px, calc(267px + 160 * var(--k)), 427px);
  height: auto;
  margin-left: clamp(0.5px, calc(0.5px + 6 * var(--k)), 6.5px);
  transform: translateX(-50%);
}

/* Видео с логотипом (десктоп). Кадр 440 × 850 вырезан из ролика сайта вокруг центральной линии;
   масштаб — чтобы логотип был размером с картинку из макета (448 на 1920, 281 на 1200).
   Блок «прилипает» к середине экрана, пока листаются карточки; кадр перематывает about.js.
   Режим darken: белый фон ролика не перекрывает линию и карточки страницы */
.history__visual { display: none; }

@media (min-width: 1025px) {
  .history__timeline.has-video .history__logo { visibility: hidden; }
  .history__timeline.has-video .history__visual {
    display: block;
    position: absolute;
    /* ниже карточек: логотип доезжает до середины последней карточки (пустой низ кадра белый и не виден) */
    inset: 0 0 calc(-1 * clamp(136px, calc(136px + 134 * var(--k)), 270px));
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
  }
}

.history__video {
  --vid-w: clamp(250.3px, calc(250.3px + 148.7 * var(--k)), 399px);
  --vid-h: clamp(483.5px, calc(483.5px + 287.4 * var(--k)), 770.9px);
  position: sticky;
  top: calc(50vh - 0.345 * var(--vid-h)); /* центр логотипа — на середине экрана */
  display: block;
  width: var(--vid-w);
  height: var(--vid-h);
  /* по центральной линии; до прокрутки логотип стоит там же, где картинка в макете */
  margin: clamp(-34.5px, calc(-21.8px - 12.7 * var(--k)), -21.8px) 0 0
    calc(50% - clamp(0px, calc(15px - 15 * var(--k)), 15px) - var(--vid-w) / 2);
  object-fit: cover;
}

/* Карточки — одной колонкой по порядку лет, через одну влево и вправо.
   Отрицательные отступы дают «лесенку» как в макете; если карточка выросла, следующие сдвигаются за ней */
.timeline {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone {
  display: flex;
  flex-direction: column;
  width: clamp(360px, calc(360px + 93 * var(--k)), 453px);
  padding: clamp(30px, calc(30px + 15 * var(--k)), 45px) 30px clamp(24.2px, calc(25.6px - 1.4 * var(--k)), 25.6px);
  background: var(--c-soft);
}
.milestone:nth-child(odd) {
  align-self: flex-start;
  margin-left: clamp(0px, calc(177 * var(--k)), 177px);
}
.milestone:nth-child(even) { align-self: flex-end; }
.milestone:nth-child(2) { margin-right: clamp(0px, calc(140 * var(--k)), 140px); }
.milestone:nth-child(4) { margin-right: clamp(0px, calc(147 * var(--k)), 147px); }
/* Высоты карточек во фрейме 1200 разные (на 1920 все 470), отступы — от низа предыдущей карточки */
.milestone:nth-child(1) { min-height: clamp(371px, calc(371px + 99 * var(--k)), 470px); margin-top: clamp(93px, calc(93px + 67 * var(--k)), 160px); }
.milestone:nth-child(2) { min-height: clamp(363px, calc(363px + 107 * var(--k)), 470px); margin-top: clamp(-157px, calc(-157px + 54 * var(--k)), -103px); }
.milestone:nth-child(3) { min-height: clamp(341px, calc(341px + 129 * var(--k)), 470px); margin-top: clamp(-87px, calc(52px - 139 * var(--k)), 52px); }
.milestone:nth-child(4) { min-height: clamp(361px, calc(361px + 109 * var(--k)), 470px); margin-top: clamp(-215px, calc(-183px - 32 * var(--k)), -183px); }
.milestone:nth-child(5) { min-height: clamp(361px, calc(361px + 109 * var(--k)), 470px); margin-top: clamp(41px, calc(131px - 90 * var(--k)), 131px); }

.milestone__title { order: 1; }

.milestone__text {
  order: 2;
  margin-top: clamp(7.5px, calc(15px - 7.5 * var(--k)), 15px);
}

/* Год — крупно белым внизу карточки; базовая линия цифр в 30 от низа.
   Межстрочный 0.8 — блок по высоте почти как цифры, длинный текст может подойти к ним вплотную */
.milestone__year {
  order: 3;
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-num);
  line-height: 0.8;
  letter-spacing: clamp(-8px, calc(-2.4px - 5.6 * var(--k)), -2.4px);
  color: #fff;
  text-align: center;
  user-select: none;
}

/* =========================================================
   Фото на всю ширину
   ========================================================= */

.about-photo { position: relative; }
@media (min-width: 1025px) {
  .about-photo { margin-bottom: -4px; } /* в макете тёмный блок ниже наезжает на фото на 4px */
}
.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 977;
  object-fit: cover;
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* =========================================================
   Направления работы и экспертиза
   ========================================================= */

.directions {
  position: relative;
  padding: var(--gap-section) 0;
  overflow: hidden;
  background: var(--c-dark);
  color: #fff;
}
.directions::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--side);
  width: 1px;
  background: var(--c-menu-line);
}

/* Контурный логотип в левой колонке, правым краем к линии */
.directions__outline {
  position: absolute;
  right: calc(100% - var(--side));
  bottom: clamp(86px, calc(86px + 42 * var(--k)), 128px);
  width: clamp(320px, calc(320px + 148 * var(--k)), 468px);
  height: auto;
  pointer-events: none;
}

.directions__head { align-items: start; }

.directions__label {
  grid-column: 1 / 7;
  max-width: calc(var(--side) + var(--gutter) - var(--margin) + clamp(200px, calc(200px + 120 * var(--k)), 320px));
  padding-left: calc(var(--side) + var(--gutter) - var(--margin));
  color: #fff;
}

.directions__title {
  grid-column: 7 / -1;
  max-width: clamp(488px, calc(488px + 473 * var(--k)), 961px);
}

/* Строки с линиями: верхняя и межстрочные — от левой колонки, нижняя — на всю ширину */
.directions__list {
  position: relative;
  margin-top: var(--gap-title);
}
.directions__list::after,
.direction::before {
  content: "";
  position: absolute;
  right: 0;
  height: 1px;
  background: var(--c-menu-line);
}
.directions__list::after {
  left: 0;
  bottom: -1px;
}
.direction { position: relative; }
.direction::before {
  top: 0;
  left: var(--side);
}

.direction__summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
.direction__summary::-webkit-details-marker { display: none; }

.direction__head {
  align-items: center;
  min-height: clamp(88px, calc(88px + 12 * var(--k)), 100px);
  padding-block: 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  line-height: 1.2;
}

.direction__num {
  grid-column: 1 / 7;
  padding-left: calc(var(--side) + var(--gutter) - var(--margin));
}
.direction__title {
  grid-column: 7 / 12;
  transition: color 0.25s;
}

/* Плюс → минус */
.direction__icon {
  grid-column: 12;
  justify-self: end;
  position: relative;
  width: 36px;
  height: 36px;
}
.direction__icon::before,
.direction__icon::after {
  content: "";
  position: absolute;
  background: var(--c-menu-line);
  transition: transform 0.3s var(--ease), background-color 0.25s;
}
.direction__icon::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.direction__icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.direction[open]:not(.is-closing) .direction__icon::after { transform: scaleY(0); }

.direction__summary:hover .direction__title { color: var(--c-accent); }
.direction__summary:hover .direction__icon::before,
.direction__summary:hover .direction__icon::after { background: #fff; }
.direction__summary:focus-visible { outline-offset: -2px; }

.direction__panel { overflow: hidden; }

.direction__body { padding-bottom: clamp(30px, calc(30px + 10 * var(--k)), 40px); }

.direction__content { grid-column: 7 / -1; }

/* Высота общая, ширина — по пропорциям из width/height (место занято ещё до загрузки) */
.direction__img {
  width: auto;
  max-width: 100%;
  height: clamp(200px, calc(200px + 100 * var(--k)), 300px);
  object-fit: contain;
  object-position: 0 50%;
}

.direction__text {
  max-width: clamp(420px, calc(420px + 140 * var(--k)), 560px);
  margin-top: clamp(20px, calc(20px + 10 * var(--k)), 30px);
  color: rgba(255, 255, 255, 0.7);
}

.direction__btn { margin-top: clamp(20px, calc(20px + 10 * var(--k)), 30px); }

/* =========================================================
   Наши ценности
   ========================================================= */

.values { padding-top: var(--gap-section); }

.values__title { grid-column: 1 / -1; }

.values__body {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  min-height: clamp(360px, calc(360px + 99 * var(--k)), 459px);
  margin-top: var(--gap-title);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.values__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(18px, calc(18px + 12 * var(--k)), 30px) var(--margin) 30px;
  border-right: 1px solid var(--c-line);
}

.values__nav { gap: 5px; }
.values__nav .icon-btn {
  width: 48px;
  height: 48px;
}

.values__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(30px, calc(30px + 15 * var(--k)), 45px) var(--margin) clamp(30px, calc(30px + 2 * var(--k)), 32px) clamp(29px, calc(29px + 4 * var(--k)), 33px);
}

.values__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.values__viewport::-webkit-scrollbar { display: none; }

.value {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.value__text {
  max-width: clamp(649px, calc(649px + 263 * var(--k)), 912px);
  margin-top: var(--gap-label);
}

.values__person {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: auto;
  padding-top: 30px;
}

.values__photo {
  flex: none;
  width: clamp(68px, calc(68px + 18 * var(--k)), 86px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.values__person-text {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, calc(6px + 4 * var(--k)), 10px);
  margin: clamp(14px, calc(14px + 1 * var(--k)), 15px) 0 0;
}

.values__person-role {
  font-family: var(--font-os);
  font-size: var(--fs-sm);
  line-height: clamp(15.2px, calc(18.62px - 3.42 * var(--k)), 18.62px);
  color: var(--c-text);
}

/* =========================================================
   Награды и сертификаты: 4 колонки, линии между ячейками
   ========================================================= */

.awards { padding-top: var(--gap-section); }

.awards__title { grid-column: 1 / -1; }

.awards__grid {
  /* Карточка 413 и отступ 30 на 1920; на 1200 карточки 258–263, шаг колонок 294, строк 295.7 */
  --aw-card: clamp(260.5px, calc(260.5px + 152.5 * var(--k)), 413px);
  --aw-gx: clamp(16.75px, calc(16.75px + 13.25 * var(--k)), 30px);
  --aw-gy: clamp(17.6px, calc(17.6px + 12.4 * var(--k)), 30px);
  --aw-pad: clamp(15px, calc(15px + 15 * var(--k)), 30px);
  display: grid;
  grid-template-columns:
    clamp(306px, calc(306px + 167 * var(--k)), 473px)
    repeat(2, calc(var(--aw-card) + 2 * var(--aw-gx)))
    minmax(0, 1fr);
  margin: var(--gap-title) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.awards__cell {
  padding: var(--aw-gy) var(--aw-gx) calc(var(--aw-gy) - 1px); /* шаг строк 473 вместе с линией */
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.awards__cell:nth-child(4n) { border-right: 0; }
.awards__cell:nth-child(4n + 1) { padding-left: clamp(30px, calc(30px + 8 * var(--k)), 38px); }

.award {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: var(--aw-card);
  height: var(--aw-card);
  padding: var(--aw-pad);
  background: var(--c-soft);
}

/* Фото награды — по центру верхней части карточки */
.award__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(168px, calc(168px + 124 * var(--k)), 292px);
}
.award__media img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: clamp(127px, calc(127px + 93 * var(--k)), 220px);
  transition: transform 0.6s var(--ease);
}
.award:hover .award__media img { transform: scale(1.05); }

.award__doc {
  position: absolute;
  top: clamp(60px, calc(60px + 37 * var(--k)), 97px);
  left: 50%;
  width: clamp(78.8px, calc(78.8px + 47.2 * var(--k)), 126px);
  height: auto;
  color: var(--c-text);
  transform: translateX(-50%);
}

.award__arrow {
  position: absolute;
  top: clamp(21.9px, calc(21.9px + 13.1 * var(--k)), 35px);
  right: clamp(28.5px, calc(28.5px + 9 * var(--k)), 37.5px);
  width: clamp(11.9px, calc(11.9px + 7.1 * var(--k)), 19px);
  height: auto;
  color: var(--c-dark);
  transition: transform 0.3s var(--ease);
}
.award:hover .award__arrow { transform: translate(2px, -2px); }

.award__text {
  max-width: clamp(218px, calc(218px + 135 * var(--k)), 353px);
  margin-top: clamp(8px, calc(8px + 4 * var(--k)), 12px);
}

/* Уже 1200: сетка в пропорциях фрейма 1200, карточки квадратные по ширине ячейки */
@media (min-width: 1025px) and (max-width: 1199px) {
  .awards__grid { grid-template-columns: 25.5fr 24.5fr 24.5fr 25.5fr; }
  .award {
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
}

/* =========================================================
   Работа у нас — тёмный вариант блока «Бесплатная консультация»
   ========================================================= */

/* Тёмная плашка и поля на тёмном фоне — общие, в style.css */

/* Файл резюме */
.file-field__title {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  line-height: var(--field-lh);
  color: var(--c-menu-text);
}

.file-field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.file {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.file__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file__btn {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--c-menu-line);
  font-size: var(--fs-sm);
  line-height: 1.1;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.file:hover .file__btn {
  background: #fff;
  border-color: #fff;
  color: var(--c-dark);
}
.file__input:focus-visible + .file__btn {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.file__name {
  min-width: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-menu-text);
  overflow-wrap: anywhere;
}
.file-field.has-file .file__name { color: #fff; }

.file__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-menu-line);
  border-radius: 50%;
  color: #fff;
  transition: background-color 0.25s, color 0.25s;
}
.file__clear[hidden] { display: none; }
.file__clear:hover {
  background: #fff;
  color: var(--c-dark);
}

.file-field.is-invalid .file__btn { border-color: #ff8a8e; }

/* =========================================================
   Планшет 640–1024 (фрейм 640)
   ========================================================= */
@media (max-width: 1024px) {
  .page-about {
    --side: calc(var(--margin) + (100% - var(--margin)) / 4); /* начало 3-й колонки, 171 на 640 */
  }

  /* Первый экран */
  .about-hero__intro {
    grid-column: 1 / span 4;
    padding-top: 15px;
  }
  .about-hero__title {
    max-width: 244px;
    margin-top: 10.6px;
  }
  .about-hero__text {
    max-width: 264px;
    margin-top: 13.4px;
  }
  .about-hero__waves {
    left: calc(-1.7 * var(--u));
    top: 176.7px;
    width: calc(965.4 * var(--u));
  }
  .about-hero__logo {
    left: auto;
    right: 14.4px;
    top: 50%;
    width: clamp(307px, calc(var(--screen) * 0.42), min(460px, 50vw));
    margin-top: 5px;
    transform: translateY(-50%);
  }
  .about-hero__shade { background: linear-gradient(181.7deg, transparent 16.8%, var(--c-dark) 73.8%); }

  .about-stats { height: auto; padding-bottom: 15px; }
  .about-stat {
    grid-column: span 2;
    padding-top: 9.26px;
  }
  .about-stat + .about-stat { padding-left: 0; }
  .about-stat + .about-stat::before { left: calc(var(--gutter) / -2); }
  .about-stat__caption,
  .about-stat--wide .about-stat__caption {
    max-width: 141px;
    margin-top: 4px;
  }

  /* История: карточки по 4 колонки, через одну слева и справа */
  .history::after { left: 50%; }
  .history__title { max-width: 465px; }
  .history__timeline { margin-top: 72.4px; }
  .history__logo {
    top: 282px;
    width: 275px;
    margin-left: 0.5px;
  }
  .timeline { z-index: auto; }
  .milestone {
    position: relative;
    z-index: 2;
    width: calc(50% - var(--gutter) / 2);
    min-height: 333px;
    padding: 30px 15px 26.4px;
  }
  .milestone:nth-child(odd) { margin-left: 0; }
  .milestone:nth-child(even) { margin-right: 0; }
  .milestone:nth-child(1) {
    min-height: 376px;
    margin-top: 0;
  }
  .milestone:nth-child(2) { margin-top: 166px; }
  .milestone:nth-child(n + 3) { margin-top: 18px; }
  .milestone__text { margin-top: 15px; }
  .milestone__year {
    font-size: var(--fs-num);
    letter-spacing: -0.02em;
    text-align: center;
  }

  .about-photo img {
    height: 527px;
    aspect-ratio: auto;
  }

  /* Направления: подпись 1–2 колонки, заголовок и строки — от 3-й */
  .directions::before { left: var(--side); }
  .directions__outline {
    right: auto;
    left: -7px;
    bottom: 62px;
    width: 172px;
  }
  .directions__label {
    grid-column: 1 / 3;
    max-width: none;
    padding-left: 0;
  }
  .directions__title {
    grid-column: 3 / -1;
    max-width: 342px;
    padding-left: 15px;
  }
  .direction:first-child::before { left: 0; }

  .direction__head {
    display: flex;
    align-items: flex-start;
    column-gap: 0;
    min-height: 44px;
    padding: 15px var(--margin) 15px calc(var(--side) + 15px);
  }
  .direction__num {
    flex: none;
    width: 56px;
    padding-left: 0;
  }
  .direction__title { flex: 1; }
  .direction__icon {
    width: 20px;
    height: 20px;
    margin: -3px 2px -3px 0; /* по центру первой строки */
  }

  .direction__body {
    display: block;
    padding: 0 var(--margin) 15px calc(var(--side) + 15px);
  }
  .direction__img { height: 151px; }
  .direction__text {
    max-width: 313px;
    margin-top: 10px;
  }
  .direction__btn {
    --btn-h: 33px;
    --fs-btn: 12px;
    margin-top: 15px;
  }

  /* Ценности — по логике соседних блоков фрейма 640 */
  .values__body { min-height: 0; }
  .values__aside { padding: 15px var(--margin); }
  .values__nav .icon-btn {
    width: 30px;
    height: 30px;
  }
  .values__main { padding: 15px var(--margin) 15px 15px; }
  .value__text { max-width: none; }
  .values__person {
    gap: 10px;
    padding-top: 20px;
  }
  .values__photo { width: 50px; }
  .values__person-text { gap: 6px; }
  .values__person-role { line-height: 1.33; }

  /* Награды: 2 колонки */
  .awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards__cell,
  .awards__cell:nth-child(4n + 1) { padding: 15px; }
  .awards__cell:nth-child(4n) { border-right: 1px solid var(--c-line); }
  .awards__cell:nth-child(2n) { border-right: 0; }
  .award {
    width: auto;
    height: 278px;
    padding: 15px 15px 16px;
  }
  .award__media { height: 173px; }
  .award__media img { max-height: 123px; }
  .award__doc {
    top: 44px;
    width: 100px;
  }
  .award__arrow {
    top: 19.4px;
    right: 19.1px;
    width: 11.9px;
  }
  .award__text {
    max-width: 250px;
    margin-top: 5.2px;
  }
}

/* =========================================================
   Мобильный ≤639 (фрейм 320)
   ========================================================= */
@media (max-width: 639px) {
  /* Первый экран: текст и логотип — на высоту окна, логотип по центру оставшегося места
     (на низком экране уменьшается). Четыре цифры столбиком — ниже, при прокрутке */
  .about-hero { min-height: 0; }
  .about-hero__head {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: var(--screen);
  }
  .about-hero__intro {
    grid-column: 1 / -1;
    padding-top: 10px;
    padding-bottom: 0;
  }
  .about-hero__title {
    max-width: 255px;
    margin-top: 8.6px;
  }

  .about-hero__visual {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    min-height: calc(240 * var(--u));
    margin-top: 17px;
    container-type: size; /* высота = остаток экрана, по ней — размер логотипа */
  }
  .about-hero__logo {
    left: calc(50% - 5.5 * var(--u));
    right: auto;
    top: 50%;
    width: calc(307 * var(--u));
    width: min(calc(307 * var(--u)), 96.8cqh); /* 307 × 317 — не выше места */
    margin-top: 0;
    transform: translate(-50%, -50%);
  }
  /* Волны и затемнение — от центра логотипа, как во фрейме 320 */
  .about-hero__waves {
    left: calc(-495.6 * var(--u) - var(--margin));
    top: calc(50% + 37.5 * var(--u));
    width: calc(1293.4 * var(--u));
  }
  .about-hero__shade {
    top: calc(50% - 287.5 * var(--u));
    right: auto;
    bottom: auto;
    left: calc(-128 * var(--u) - var(--margin));
    width: calc(640 * var(--u));
    height: calc(515 * var(--u));
    background: linear-gradient(188.1deg, transparent 19.9%, var(--c-dark) 75.2%);
  }

  .about-stats {
    height: auto;
    margin-top: 28px;
    padding-bottom: 60px;
    border-top: 0;
  }
  .about-stat {
    grid-column: 1 / -1;
    height: 130px;
    padding-top: 11.25px;
  }
  .about-stat::before,
  .about-stat + .about-stat::before,
  .about-stat:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: auto;
    left: calc(-1 * var(--margin));
    right: calc(-1 * var(--margin));
    width: auto;
    height: 1px;
    background: var(--c-menu-line);
  }
  .about-stat:last-child::after {
    top: auto;
    bottom: 0;
  }
  .about-stat__caption { max-width: 214px; }
  .about-stat--wide .about-stat__caption { max-width: 291px; }

  /* История: одна колонка, логотип над карточками */
  .history::before,
  .history::after { display: none; }
  .history__timeline { margin-top: 42px; }
  .history__logo {
    position: static;
    display: block;
    width: 235px;
    margin: 0 auto;
    transform: none;
  }
  .milestone,
  .milestone:nth-child(odd),
  .milestone:nth-child(even) {
    align-self: stretch;
    width: auto;
    margin-left: -4px; /* в макете карточки от 6 до 310 */
    margin-right: 0;
  }
  .milestone:nth-child(1) { margin-top: 17px; }
  .milestone:nth-child(n + 2) { margin-top: 30px; }

  .about-photo img { object-position: 62.6% 50%; }

  /* Направления */
  .directions::before,
  .directions__outline { display: none; }
  .directions__label,
  .directions__title {
    grid-column: 1 / -1;
    max-width: 300px;
    padding-left: 0;
  }
  .directions__title { margin-top: var(--gap-label); }
  .direction::before { left: 0; }
  .direction__head {
    padding: 15px var(--margin) 16px;
    line-height: 1.33;
  }
  .direction__icon { margin: 0 3px 0 0; }
  .direction__body { padding: 8px var(--margin) 30px; }
  .direction__img {
    max-width: calc(100% + 10px);
    height: 111px;
    margin-left: -5px;
  }
  .direction__text { max-width: 290px; margin-top: 15px; }

  /* Ценности: текст на всю ширину, счётчик и стрелки снизу */
  .values__body { grid-template-columns: minmax(0, 1fr); }
  .values__aside {
    order: 2;
    flex-direction: row;
    align-items: center;
    padding: 15px var(--margin);
    border-top: 1px solid var(--c-line);
    border-right: 0;
  }
  .values__main { padding: 20px var(--margin); }

  /* Награды: одна колонка */
  .awards__grid { grid-template-columns: minmax(0, 1fr); }
  .awards__cell,
  .awards__cell:nth-child(4n + 1) { padding: 15px var(--margin); }
  .awards__cell:nth-child(n) { border-right: 0; }
  .award__arrow {
    top: 19.4px;
    right: 19.1px;
  }
}

/* Без анимаций по запросу системы */
@media (prefers-reduced-motion: reduce) {
  .award__media img,
  .award__arrow { transition: none; }
}