/* ============================================================
   ПЕРВЫЙ ЭКРАН СТРАНИЦЫ УСЛУГИ
   Надстройка над hero.css, а не копия: раскладка, кегли и кнопки
   у первого экрана услуги те же, что на главной. Отличается ровно
   одно — форма рендера.

   На главной стоит ноутбук, кадр 1508×847, широкий. Здесь — сфера
   направления AI, кадр квадратный. Оставь обойме прежнее отношение
   сторон, и `object-fit:contain` упрётся в высоту: предмет сожмётся
   до 847px по высоте при 1508 ширины обоймы, то есть станет вдвое
   мельче, а по бокам лягут два белых поля.

   Поэтому обойма получает квадрат и предел по ширине. Предел нужен:
   во всю колонку (около 845px на 1920) квадрат разогнал бы первый
   экран за тысячу пикселей высоты.
   ============================================================ */
.hero--ai .hero__media{
  aspect-ratio:1 / 1;
  width:min(100%, 620px);
  /* Вынос за поле страницы снят: он был нужен широкому кадру, чтобы
     ноутбук дотянулся до кромки окна. Квадрат и так крупный, а с
     выносом он ушёл бы правым краем за --gutter. Прижат вправо —
     слева остаётся воздух между текстом и предметом. */
  margin-left:auto;
  margin-right:0;
}

/* ------------------------------------------------------------
   КРОШКИ
   Мелкие и серые: это ориентир, а не навигация, за внимание с
   заголовком они спорить не должны.
   ------------------------------------------------------------ */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(14px, 1.4vw, 24px);
  font-size:clamp(12px, .8vw, 13px);
  color:var(--fg-mute);
}
.crumbs a{ transition:color .18s var(--ease); }
.crumbs a:hover{ color:var(--accent-1); }
.crumbs span[aria-hidden]{ color:var(--line); }

/* ------------------------------------------------------------
   ЦЕНА И СРОК
   Строка между лидом и кнопками. Сумма моноширинным и в полный
   цвет текста, срок — обычным и приглушённый: в этой паре решение
   принимают по цене, срок её уточняет.
   ------------------------------------------------------------ */
.hero__price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(8px, .8vw, 14px);
  margin:clamp(-14px, -1.4vw, -8px) 0 clamp(24px, 2.6vw, 42px);
  font-size:clamp(14px, 1.06vw, 18px);
  color:var(--fg-lead);
}
.hero__price b{
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
  font-weight:500;
  font-size:clamp(17px, 1.4vw, 24px);
  color:var(--fg);
}
.hero__price span{ color:var(--line); }

/* Ниже 1100px колонки схлопываются в одну (adaptive.css), предмет
   встаёт над текстом — там его место по центру. Правило продублировано
   здесь, потому что по весу селектора `.hero--ai .hero__media` сильнее
   `.hero__media` из адаптива и перебило бы его, хотя и лежит выше. */
@media (max-width: 1100px){
  .hero--ai .hero__media{ margin-inline:auto; }
}