/* ==========================================================================
   Hero страницы «Кто мы?»
   Опорный кадр 1920 × 1472. Верхние 1080 — та же сцена, что на главной:
   фон, две линейные графики, свечение и лого-локап стоят на прежних местах,
   всю геометрию для них даёт sections/hero.css.

   Ниже сцены добавлена полоса с заголовком страницы (1080…1472):

     заголовок   x 115   y 1222   769 × 142   (зарисовка на «о» внутри файла)

   Отступы полосы: 65 сверху, 109 снизу, 115 слева. Верхний меньше макетных
   142 — заголовок держится ближе к локапу.
   ========================================================================== */

/*
   На главной .hero и есть первый экран, поэтому высоту держит он сам.
   Здесь секция выше кадра — высоту забирает .hero__stage, иначе проценты
   .hero__art и .hero__title считались бы вместе с полосой заголовка
   и графика уехала бы вниз.
*/
.hero.hero--page {
  min-height: 0;
}

.hero__stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

@supports not (height: 100svh) {
  .hero__stage {
    min-height: 100vh;
  }
}

/* --- Полоса с заголовком -------------------------------------------------- */

.hero__caption {
  padding-block: clamp(1.25rem, 3.3958vw, 4.0625rem) clamp(2rem, 5.6771vw, 6.8125rem);
  padding-left: clamp(1.25rem, 5.9896vw, 7.1875rem);
  padding-right: var(--container-pad);
}

/* --- Заголовок -------------------------------------------------------------
   В макете «Кто мы?» набран шрифтом IF Kica, файлов которого в проекте нет,
   поэтому заголовок — картинка с alt, как лого-локап на главной. Красная
   зарисовка на букве «о» лежит в том же SVG и потому не может разъехаться
   с буквами.

   Кегль ниже нужен только на случай, если SVG не загрузится: тогда браузер
   покажет alt, и он не должен выглядеть подписью.
   -------------------------------------------------------------------------- */

.page-title {
  width: clamp(15rem, 40.0521vw, 48.0625rem);
  font-size: clamp(2rem, 7.3494vw, 8.8193rem);
  font-weight: var(--fw-regular);
  line-height: 1;
}

.page-title__text {
  width: 100%;
  height: auto;
}

/* --- Планшет и мобильные ---------------------------------------------------
   Пропорция макета (заголовок — 40% ширины кадра) на узком экране читается
   как мелкая надпись, поэтому доля растёт.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .page-title {
    width: min(78vw, 26rem);
  }
}