/* service.css — детальные страницы услуг (services/<slug>.html).
   Подключается только на них, после pages.css.

   Своей палитры и своей шкалы отступов здесь нет — всё из base.css.
   Содержимое блоков (варианты, колонки, списки состава) переиспользует
   классы .svc-var, .svc-cols, .svc-more__* из pages.css, лента примеров
   и форма заявки — общие .about-cases и .request оттуда же: страница
   услуги и остальной сайт обязаны выглядеть
   одинаково, иначе переход с хаба читается как переход на другой сайт.
   Здесь — только каркас страницы: крошки, первый экран и блок «рельс +
   тело». */

.service-page {
  /* Ширина рельса и промежуток до текста. Рельс существует только от 900px:
     до этого блок — одна колонка, и --rail не участвует. */
  --rail: 220px;
  --gap: var(--s-5);
  /* Липкий рельс встаёт на 120px от верха окна — та же константа, что на
     кейсах (case.css): суммарная, а не «хедер + отступ», потому что
     --header-h меняется по ширине экрана. */
  --rail-top: max(120px, calc(var(--header-h) + var(--s-5)));
  --body-max: 760px;
}

/* ─────────────────────────────────────────────────────────────────
   Хлебные крошки
   ───────────────────────────────────────────────────────────────── */

.crumbs {
  padding-top: calc(var(--header-h) + var(--s-5));
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--small);
  color: var(--text-muted);
}

/* Разделитель — псевдоэлемент, а не символ в разметке: скринридер читает
   список ссылок, а не «главная слэш услуги слэш». */
.crumbs__item + .crumbs__item::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--border);
}

.crumbs__link {
  color: var(--text-muted);
  transition: color var(--transition);
}

.crumbs__link:hover { color: var(--text); }

.crumbs__current { color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────────
   Первый экран услуги
   ───────────────────────────────────────────────────────────────── */

/* Отступ сверху меньше, чем у .page-hero: над первым экраном уже стоят
   крошки, и второй большой воздух подряд оставлял бы заголовок в середине
   экрана без причины. */
.svc-hero {
  padding-top: var(--s-6);
  padding-bottom: clamp(48px, 8vh, 96px);
  border-bottom: 0.5px solid var(--border);
}

/* Категория — ссылка обратно в свой раздел хаба. Надзаголовок акцентный
   (.section-label), здесь только поведение ссылки. */
.svc-hero__cat {
  width: fit-content;
  transition: opacity var(--transition);
}

.svc-hero__cat:hover { opacity: 0.75; }

/* Верхний отступ не задаём: расстояние от надзаголовка-категории держит
   --label-gap (base.css) — общее для всех страниц. */
.svc-hero__title {
  margin-bottom: var(--s-5);
}

.svc-hero__lead {
  max-width: 56ch;
  color: var(--text-secondary);
}

/* Три факта строкой: цена, срок, правки. Это первый ответ на «сколько и
   когда» — до состава услуги, а не после него. Линия сверху отделяет их
   от определения, подложки нет: карточка внутри первого экрана утяжелила
   бы его без пользы. */
.svc-hero__facts {
  display: grid;
  gap: var(--s-4) var(--s-7);
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 0.5px solid var(--border);
}

@media (min-width: 40em) {
  .svc-hero__facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }
}

.svc-hero__fact dt {
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

.svc-hero__fact dd {
  margin: 0;
  font-size: var(--step-0, 1.125rem);
  color: var(--text);
}

/* Цена — единственное акцентное значение в ряду: остальные два факта
   уточняют её, а не спорят с ней. */
.svc-hero__price {
  font-weight: 500;
  color: var(--accent-text);
}

.svc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-7);
}

.svc-hero__alt { color: var(--text-secondary); }
.svc-hero__alt:hover { color: var(--text); }

/* ─────────────────────────────────────────────────────────────────
   Блок услуги: рельс с заголовком + тело
   ───────────────────────────────────────────────────────────────── */

.svc-block {
  padding-block: var(--s-8);
  border-bottom: 0.5px solid var(--border);
}

@media (min-width: 48em) {
  .svc-block { padding-block: var(--s-9); }
}

/* Мобильный — одна колонка: заголовок блока, под ним текст. Две колонки
   включаются от 900px вместе с липким рельсом, ниже.
   Объявлять здесь grid-template-columns нельзя: при --rail: 100% вторая
   колонка minmax(0, 1fr) получает нулевую ширину, и всё тело блока
   схлопывается в невидимую полосу у правого края. Ровно это и происходило
   на всех пяти страницах услуг ниже 900px. */
.svc-block__inner {
  display: grid;
  gap: var(--gap);
}

.svc-block__title {
  margin: 0;
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  /* Вес не переопределяем: по базовой типографике h2 идёт на 400, а h3/h4 —
     на 500. Стоявшая здесь 500 равняла заголовок блока с подзаголовками
     внутри него, и секция читалась плоско — крупный титул и мелкая подпись
     одного веса. Возврат к 400 разводит их по весу так же, как на
     остальных страницах сайта. */
  line-height: 1.2;
  color: var(--text);
  /* Якорь с других страниц не должен уводить заголовок под шапку */
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.svc-block__body { max-width: var(--body-max); }

/* Блоки с двумя колонками внутри (.svc-cols) и лентой примеров меру
   строки не держат — её держит уже сама колонка. */
.svc-block__body--wide { max-width: none; }

.svc-block__lead {
  margin: 0 0 var(--s-5);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* От 900px рельс уходит в свою колонку и липнет: пока читаешь длинный
   состав услуги, видно, к какому блоку он относится.
   align-self: start обязателен — растянутый на всю ячейку рельс получает
   нулевой ход, и sticky молча не срабатывает. */
@media (min-width: 56.25em) {
  .service-page {
    --gap: var(--s-7);
  }

  .svc-block__inner {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }

  .svc-block__rail {
    align-self: start;
    position: sticky;
    top: var(--rail-top);
  }
}

@media (min-width: 90em) {
  .service-page {
    --rail: 280px;
    --gap: var(--s-8);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Типы услуги
   ───────────────────────────────────────────────────────────────── */

/* Ни рамок, ни подложек, ни картинок: это оглавление, а не витрина.
   Шесть плашек здесь перетянули бы внимание с единственной кнопки на
   первом экране, а список держат колонки и отступы.
   Колонки заданы явно (1 → 2 → 3), без auto-fit: ширина строки описания
   тогда одинакова на всех страницах услуг, сколько бы типов ни было. */
.svc-kinds {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-kinds li { max-width: none; }

.svc-kinds__link {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.svc-kinds__name {
  font-size: var(--step-0, 1.125rem);
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}

.svc-kinds__link:hover .svc-kinds__name,
.svc-kinds__link:focus-visible .svc-kinds__name { color: var(--accent-text); }

.svc-kinds__desc {
  max-width: 40ch;
  font-size: var(--step--1, 1.0125rem);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  .svc-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .svc-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────────────
   Смежные услуги
   ───────────────────────────────────────────────────────────────── */

/* Строки с хайрлайнами, без подложек: карточек на странице услуги нет
   нигде, и заводить их ради трёх ссылок в конце — значит перетянуть
   внимание с кнопки «Обсудить проект». */
.svc-nearby {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0.5px solid var(--border);
}

.svc-nearby li { max-width: none; }

.svc-nearby__link {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 0.5px solid var(--border);
  transition: border-color var(--transition);
}

.svc-nearby__link:hover { border-bottom-color: var(--text-muted); }

.svc-nearby__name {
  font-size: var(--step-0, 1.125rem);
  font-weight: 500;
  color: var(--text);
  transition: color var(--transition);
}

.svc-nearby__link:hover .svc-nearby__name,
.svc-nearby__link:focus-visible .svc-nearby__name { color: var(--accent-text); }

.svc-nearby__desc {
  max-width: 62ch;
  font-size: var(--step--1, 1.0125rem);
  line-height: 1.5;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  /* Название и описание в один ряд: три строки читаются как таблица
     «услуга — когда она вместо этой», а не как три абзаца. */
  .svc-nearby__link {
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-5);
  }
}

/* ══════════════════════════════════════════
   «Что ты получаешь» — нумерованный список артефактов
   На мобильном — колонка под номер и текст рядом, на десктопе номер
   встаёт над заголовком. Своё здесь только круг вокруг цифры и строка с меткой.
   Семантика списка настоящая: <ol> → <li>, цифра рисуется отдельным
   <span>, а не ::before, — она видима и не подменяет счётчик.
   ══════════════════════════════════════════ */

.gains {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gains__item {
  display: grid;
  grid-template-columns: 2.8125rem minmax(0, 1fr);
  gap: 0 var(--space-m);
  padding-bottom: var(--space-xl);
}

.gains__item:last-child { padding-bottom: 0; }

/* Круг фиксированного размера: ширину задаёт сам круг, а не число внутри,
   поэтому двузначный номер его не растянет. Выравнивание по верхней линии
   заголовка, а не по центру блока, — отсюда align-self: start. */
.gains__num {
  width: 2.8125rem;
  height: 2.8125rem;
  flex-shrink: 0;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Вариант А — обводка */
.gains--outline .gains__num {
  border: 1px solid var(--accent);
  color: var(--accent-text);
}

/* Вариант Б — заливка */
.gains--fill .gains__num {
  background-color: var(--accent);
  color: var(--accent-ink);
}

.gains__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px;
  /* Заголовок ростом с кругом, чтобы цифра встала ровно на его первую строку */
  min-height: 2.8125rem;
  display: flex;
  align-items: center;
}

/* ── Десктоп: все пункты одним рядом ──
   grid-auto-flow: column раскладывает ряд по факту содержимого, поэтому
   правило одно на все страницы услуг — а их там от пяти до семи пунктов,
   и держать пять медиазапросов с фиксированным числом колонок незачем.
   minmax(0, 1fr) обязателен: без него длинное слово в заголовке распирает
   колонку и ряд уезжает за контейнер. */
@media (min-width: 64em) {
  .gains {
    display: grid;
    /* auto-fit, а не grid-auto-flow: column. Колонок на страницах от пяти
       до семи, и жёсткий ряд на семь при 1024px давал по 113px на колонку:
       «Опубликованные» и «Приветственное» шире и вылезали на соседа. Здесь
       колонка не бывает уже 135px (8.4375rem при 1rem = 16px). При 1024px
       под список остаётся 942px, и 135px — ровно тот предел, на котором
       шесть пунктов ещё стоят одним рядом. Семь (vk-design) при 1024px
       переносятся на вторую строку — но переносятся, а не наезжают друг
       на друга, как было с жёстким grid-auto-flow: column. */
    grid-template-columns: repeat(auto-fit, minmax(8.4375rem, 1fr));
    /* Зазор здесь меньше обычного --space-l: при 48px седьмая колонка
       на vk-design не помещалась в контейнер и переносилась на вторую
       строку одна. 24px хватает, чтобы колонки не слипались. */
    gap: var(--space-m);
    align-items: start;
  }

  /* В ряду цифра встаёт над заголовком, а не слева: колонка узкая, и
     2.5rem под круг съели бы половину строки. */
  .gains__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 0;
  }

  .gains__num { margin-bottom: var(--space-s); }

  /* Выравнивание по верхней линии заголовка здесь делает сам порядок
     элементов, вертикальная центровка больше не нужна. */
  .gains__title {
    min-height: 0;
    display: block;
    /* Кегль тот же, что у описания. В ряду колонка ~137px, и при 1rem
       (18px на десктопе) «опубликованный» в неё не влезал — перенос по
       букве рвал слово посередине. Новой величины здесь нет: 0.875rem
       уже стоит у .gains__desc. */
    font-size: 0.984375rem;
    /* Последний рубеж: слово длиннее колонки переносится, а не вылезает. */
    overflow-wrap: break-word;
  }

  /* Ширину строки задаёт колонка ряда — потолок в символах снимаем,
     иначе он вступает в спор с сеткой. */
  .gains__desc { max-width: none; }
}

/* ── Шахматная раскладка ──
   Три колонки вместо ряда во всю ширину: при шести пунктах ряд отдавал
   колонке около 137px, и описание сжималось в столбик по два слова.
   В трёх колонках на 1440px пункт получает ~400px — заголовок встаёт
   в строку, описание читается абзацем. Средняя колонка опущена на --s-8,
   и ряды перестают читаться сплошной линейкой. Смещение — отступом, а не
   order или grid-row: порядок в DOM остаётся порядком на экране.
   Ниже 64em правило не работает вовсе: там пункты идут одной колонкой,
   и смещать в ней нечего. */
@media (min-width: 64em) {
  .gains--stagger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-l);
  }

  /* Кегль заголовка вернулся к базовому: 0.875rem выше стоит ради узкой
     колонки сплошного ряда, в 400px этой причины нет. */
  .gains--stagger .gains__title { font-size: 1.125rem; }

  .gains--stagger .gains__item:nth-child(3n + 2) { margin-top: var(--s-8); }
}

.gains__meta {
  margin: 0 0 var(--space-2xs);
  font-size: var(--small);
  line-height: 1.6;
  color: var(--text-secondary);
}

.gains__meta b {
  font-weight: 500;
  color: var(--text);
}

.gains__desc {
  margin: 0;
  font-size: 0.984375rem;
  line-height: 1.6;
  color: var(--text-muted);
  /* Длина строки — не больше 75 знаков, иначе текст растягивается
     на всю ширину контейнера и перестаёт читаться. */
  max-width: 68ch;
}

/* ─────────────────────────────────────────────────────────────────
   Иконки в карточках «Кому подойдёт» (страница услуги) — лаймовый контур
   ───────────────────────────────────────────────────────────────── */
.svc-fit__cards--icons .svc-fit__card { justify-content: flex-start; }
.svc-fit__cards--icons svg {
  flex: none;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-5);
  color: var(--accent);
}

/* Картинка у блока «Какая у тебя цель?» */
.svc-goal__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* ─────────────────────────────────────────────────────────────────
   Десктоп — по макету Figma («Многостраничный сайт»)
   Одна колонка вместо «рельс + тело»: заголовок блока 64/74 над
   содержимым, между блоками 220 единиц. Шаблон общий для всех страниц
   услуг, поэтому вид меняется у всех пяти.
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 64em) {
  .crumbs { padding-top: calc(var(--header-h) + 40 * var(--u)); }

  .crumbs__list {
    gap: calc(14 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .crumbs__item + .crumbs__item::before { margin-right: calc(14 * var(--u)); color: var(--text-muted); }

  /* ── Первый экран ── */
  .svc-hero {
    padding: calc(89 * var(--u)) 0 0;
    border-bottom: 0;
  }

  /* Категория — строчными, с лаймовой точкой, как статус на главной */
  .svc-hero__cat {
    display: inline-flex;
    align-items: center;
    gap: calc(15 * var(--u));
    margin-bottom: calc(30 * var(--u));
    text-transform: none;
  }
  .svc-hero__cat::before {
    content: "";
    width: max(8px, calc(14 * var(--u)));
    height: max(8px, calc(14 * var(--u)));
    border-radius: 50%;
    background: var(--accent);
  }

  .svc-hero__title { margin-bottom: calc(40 * var(--u)); }

  .svc-hero__lead {
    max-width: calc(1100 * var(--u));
    line-height: 1.125;
    color: var(--text-muted);
  }

  /* Линия над фактами — во всю ширину окна, как в макете */
  .svc-hero__facts {
    position: relative;
    gap: calc(60 * var(--u));
    margin-top: calc(57 * var(--u));
    padding-top: calc(54 * var(--u));
    border-top: 0;
  }
  .svc-hero__facts::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    height: 1px;
    background: var(--divider);
  }

  .svc-hero__fact dt {
    margin-bottom: calc(12 * var(--u));
    font-size: var(--fs-small);
    line-height: 1.1667;
    letter-spacing: 0;
  }
  .svc-hero__fact dd {
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }

  .svc-hero__cta {
    margin-top: calc(80 * var(--u));
    gap: calc(88 * var(--u));
  }
  .svc-hero__alt {
    display: inline-flex;
    align-items: center;
    gap: calc(15 * var(--u));
    font-size: max(17px, calc(32 * var(--u)));
    color: var(--text);
  }
  .svc-hero__alt:hover { color: var(--accent-text); }

  /* ── Блоки: заголовок над содержимым ── */
  .svc-block {
    padding-block: calc(110 * var(--u));
    border-bottom: 0;
  }
  .svc-hero + .svc-block { padding-top: calc(236 * var(--u)); }

  .svc-block__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(40 * var(--u));
  }
  .svc-block__rail { position: static; }

  .svc-block__title {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-h2);
  }

  .svc-block__body { max-width: none; }

  .svc-block__lead {
    max-width: calc(1100 * var(--u));
    margin-bottom: calc(60 * var(--u));
    font-size: var(--fs-lead);
    line-height: 1.125;
    color: var(--text-muted);
  }

  /* «Какая у тебя цель?»: текст и варианты слева, картинка справа */
  .svc-block--goal .svc-block__inner {
    grid-template-columns: minmax(0, 1fr) calc(948 * var(--u));
    column-gap: calc(80 * var(--u));
  }
  .svc-block--goal .svc-block__rail { grid-column: 1; grid-row: 1; }
  .svc-block--goal .svc-block__body { grid-column: 1; grid-row: 2; }
  .svc-goal__img { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .svc-goal__img img { border-radius: 22px; }
  .svc-block--goal .svc-block__lead { margin-bottom: calc(40 * var(--u)); }

  /* Варианты без линий: название и цена строкой, описание под ними */
  .svc-block--goal .svc-var__item {
    padding: 0;
    border-bottom: 0;
  }
  .svc-block--goal .svc-var__item + .svc-var__item { margin-top: calc(40 * var(--u)); }
  .svc-block--goal .svc-var__name { font-size: max(17px, calc(28 * var(--u))); }
  .svc-block--goal .svc-var__price { font-size: max(17px, calc(28 * var(--u))); }

  /* «Кому подойдёт»: карточки 380 в высоту, иконка 72 */
  .svc-fit__cards--icons .svc-fit__card { min-height: calc(380 * var(--u)); padding-top: calc(54 * var(--u)); }
  .svc-fit__cards--icons svg {
    width: calc(72 * var(--u));
    height: calc(72 * var(--u));
    margin-bottom: calc(100 * var(--u));
  }

  /* «Что входит»: две колонки без подложек */
  .svc-cols--panels { align-items: start; }
  .svc-cols__col--panel {
    padding: 0;
    border: 0;
    background: none;
  }
  .svc-block .svc-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(40 * var(--u)) calc(80 * var(--u));
  }

  /* «Что ты получаешь»: три колонки шахматкой, круги 77 */
  .gains--stagger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(60 * var(--u)) calc(80 * var(--u));
  }
  .gains--stagger .gains__item:nth-child(3n + 2) { margin-top: calc(83 * var(--u)); }

  .gains__num {
    width: calc(77 * var(--u));
    height: calc(77 * var(--u));
    margin-bottom: calc(23 * var(--u));
    font-size: max(18px, calc(36 * var(--u)));
    font-weight: 400;
  }
  .gains--outline .gains__num { border-width: 2px; }

  .gains--stagger .gains__title,
  .gains__title {
    min-height: 0;
    margin-bottom: calc(10 * var(--u));
    font-size: var(--fs-h6);
    font-weight: 400;
    line-height: var(--lh-h6);
  }

  .gains__meta,
  .gains__desc {
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }
  .gains__meta { margin-bottom: calc(14 * var(--u)); color: var(--text-muted); }
  .gains__meta b { font-weight: 400; }

  /* «Типы сайтов»: шесть пунктов 3 × 2 */
  .svc-kinds { gap: calc(70 * var(--u)) calc(80 * var(--u)); }
  .svc-kinds__name {
    font-size: max(17px, calc(28 * var(--u)));
    font-weight: 400;
    line-height: 1.357;
  }
  .svc-kinds__desc {
    max-width: none;
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  /* «Смежные услуги»: строки с лаймовой стрелкой справа */
  .svc-nearby { border-top: 1px solid var(--divider); }
  .svc-nearby__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(14 * var(--u));
    padding: calc(40 * var(--u)) calc(45 * var(--u)) calc(40 * var(--u)) 0;
    border-bottom: 1px solid var(--divider);
  }
  .svc-nearby__name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(30 * var(--u));
    font-size: max(17px, calc(28 * var(--u)));
    font-weight: 400;
    line-height: 1.357;
  }
  .svc-nearby__name span { color: var(--accent-text); }
  .svc-nearby__desc {
    max-width: calc(1100 * var(--u));
    font-size: var(--fs-text);
    line-height: var(--lh-text);
  }

  /* Лента кейсов и форма — как на «Обо мне» и главной */
  .service-page .about-cases { padding-block: calc(110 * var(--u)) calc(150 * var(--u)); }
  .service-page .request { padding-top: calc(110 * var(--u)); }
}

/* ─────────────────────────────────────────────────────────────────
   Мобильная версия по макету («Многостраничный сайт», 393px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 63.99em) {
  .crumbs { padding-top: calc(var(--header-h) + 20px); }
  .crumbs__list { font-size: 14px; }

  .svc-hero { padding: 40px 0 60px; border-bottom: 1px solid var(--border-subtle); }
  .svc-hero__cat { font-size: 16px; line-height: 1.5; }
  .svc-hero__title { margin-bottom: 30px; }
  .svc-hero__lead { font-size: 18px; line-height: 1.4444; color: var(--text-muted); }

  /* Факты строкой из трёх, как в макете */
  .svc-hero__facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 20px;
    margin-top: 30px;
    padding-top: 25px;
    border-top-color: var(--border-subtle);
  }
  .svc-hero__fact dt { font-size: 14px; letter-spacing: 0; }
  .svc-hero__fact dd { font-size: 16px; }

  .svc-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 50px;
  }
  .svc-hero__cta .btn { width: 100%; }
  .svc-hero__alt { align-self: center; padding-block: 9px; font-size: 18px; color: rgba(255, 255, 255, 0.9); }

  .svc-block { padding-block: 60px; border-bottom-color: var(--border-subtle); }
  .svc-block__title { font-size: 28px; font-weight: 500; line-height: 1.2857; }
  .svc-block__lead { font-size: 18px; line-height: 1.3333; color: var(--text-muted); }

  /* «Что входит» — списки без подложек */
  .svc-cols__col--panel { padding: 0; border: 0; background: none; }

  .svc-goal__img { margin-top: 30px; }
}