/* Страница /o-kompanii/ (16.10.2026). Токены и компоненты — система «Табло»,
   здесь только то, чего в ней не было: фото основателей в hero, вертикальные
   видео, четыре шага принципов, карточки адресов. */

/* Фото основателей в hero: вертикальный кадр вписан в медиа-колонку,
   фокус на лицах и плашках (верхняя треть), полный кадр — по клику нет,
   поэтому caption всегда под снимком. */
.team {
  margin: 0;
  border-top: var(--border-w) solid var(--border-hairline);
  background: var(--surface-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team__shot {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 30%;
}
.team__cap {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  border-top: var(--border-w) solid var(--border-hairline);
  padding: var(--space-1) var(--space-2);
  margin: 0;
  max-width: none;
  margin-top: auto;
}
@media (max-width: 899px) {
  .team__shot { height: auto; max-height: 72vh; object-fit: cover; }
}

/* Полоса фактов в hero плотнее, чем на главной: факты вторичны тексту. */
.hero .facts { margin-top: var(--space-4); }
.hero .actions { margin-top: var(--space-4); }

/* Вертикальные ролики: три равные колонки, на телефоне — одна.
   Грузятся только постеры; видео — по нажатию (preload="none"). */
.clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  align-items: start;
}
.clip {
  margin: 0;
  border: var(--border-w) solid var(--border-hairline);
  background: var(--surface-card);
}
.clip video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--ink);
}
.clip__cap {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  border-top: var(--border-w) solid var(--border-hairline);
  padding: var(--space-1) var(--space-2);
  margin: 0;
  max-width: none;
}
@media (max-width: 767px) {
  .clips { grid-template-columns: 1fr; }
  .clip video { max-height: 70vh; }
}

/* Адреса студии: две карточки; что там находится — сверху, адрес крупно. */
.addrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.addr {
  border: var(--border-w) solid var(--border-hairline);
  border-top: var(--border-w-emphasis) solid var(--accent);
  padding: var(--space-3);
  background: var(--surface-card);
}
.addr__name {
  font-family: var(--font-data);
  font-size: var(--size-lead);
  font-weight: var(--weight-title);
  margin: var(--space-1) 0 0;
}
.addr__what {
  font-family: var(--font-data);
  font-size: var(--size-caption);
  color: var(--text-label);
  margin: 0;
}
.addr__what + .addr__what { margin-top: var(--space-2); color: var(--text-secondary); }
@media (max-width: 767px) { .addrs { grid-template-columns: 1fr; } }

/* Клипы: автоплей без звука; звук — кнопкой поверх кадра, контролы — по
   ховеру или фокусу, вне вьюпорта встают на паузу (логика — komanda.js). */
.clip { position: relative; }
.clip video { cursor: pointer; }
.clip__mute {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.clip__mute svg { width: 20px; height: 20px; fill: currentColor; }
.clip__mute.is-on { background: var(--accent); }
.clip__mute:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Четыре шага принципов: системные .route__steps, но колонок четыре, не пять. */
.route__steps--four { counter-reset: none; }
@media (min-width: 768px) {
  .route__steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.route__steps--four .step__title { margin-top: var(--space-2); }
.route__steps--four .step__text { margin: var(--space-1) 0 0; }