/* ============================================================
   СТРАНИЦА «УСЛУГИ» — панель услуг, декор и движение
   ============================================================
   Отдельный файл, а не дописка в page.css: page.css делят ещё
   пять страниц (каталог, промышленные, коттеджи, приватность,
   «О нас»), и правки декора «Услуг» им не нужны. На классе
   .brand проект уже один раз наступил на общий namespace — см.
   §4.5 контекста.

   Подключается последним, после page.css.

   Ограничение по движению взято из базы UX (severity High,
   «Excessive Motion»): на один экран — не больше одного-двух
   анимированных элементов. Поэтому появление по прокрутке
   даётся блоку целиком, а вся остальная моторика — только
   по наведению и фокусу, то есть по воле пользователя.
   Всё движение на transform/opacity.
   ============================================================ */

/* ------------------------------------------------------------
   1. ЛЕВАЯ ПАНЕЛЬ УСЛУГ
   Была: 232px, простые ссылки с полоской слева.
   Стала: настоящая панель — поверхность, рамка, индексы
   в чипах, вертикальный рельс с закрашенной пройденной
   частью. Просили «сделать больше».
   ------------------------------------------------------------ */

@media (min-width: 1040px) {
  .withnav { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .withnav { grid-template-columns: 336px minmax(0, 1fr); }
}

.anchornav {
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(143, 0, 0, 0.14), transparent 62%),
    var(--c-surface);
}

/* Шапка панели: счётчик крупно, подпись рядом */
.anchornav__title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}
/* Цифра-счётчик. Заливка градиентом, а не обводка:
   -webkit-text-stroke в этом проекте запрещён (§6.5) —
   он рвёт контуры глифов, у «4» в том числе. */
.anchornav__title::before {
  content: '6';
  font-family: var(--f-head);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  background: linear-gradient(170deg, var(--c-text) 8%, var(--c-accent) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Список услуг лежит на вертикальном рельсе */
.anchornav__list {
  position: relative;
  padding-left: var(--sp-5);
}
/* Сам рельс */
.anchornav__list::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--c-line);
}
/* Пройденная часть рельса. Высоту ставит main.js в --nav-progress —
   это единственный элемент страницы, который двигается сам. */
.anchornav__list::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 2px;
  height: calc(var(--nav-progress, 0) * 1%);
  max-height: calc(100% - 12px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-brand));
  transition: height var(--d-slow) var(--e-out);
}

/* Седьмой пункт стоит один — рельс ему нужен, прогресс нет */
.anchornav__list--single::after { display: none; }

.anchornav a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-left: 0;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--c-text-dim);
  transition:
    color var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.anchornav a:hover { transform: translate3d(3px, 0, 0); color: var(--c-text); }
.anchornav a:focus-visible {
  /* контур не снимаем без замены — требование доступности */
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  color: var(--c-text);
}

/* Индекс в чипе: 34px и радиус 4px по шкале проекта */
.anchornav a span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-mute);
  transition:
    border-color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out);
}
.anchornav a:hover span { border-color: var(--c-accent-line); color: var(--c-text); }

.anchornav a.is-current { color: var(--c-text); }
.anchornav a.is-current span {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

/* Седьмой пункт — не одна из шести услуг, а отдельное
   направление. Отделяем его явно, чтобы «Шесть услуг»
   в шапке панели не расходилось со семью строками. */
.anchornav__aside {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

/* ------------------------------------------------------------
   2. ШАПКА СТРАНИЦЫ — чертёжная сетка и цифра-призрак
   Приём взят с главной (motion.css), чтобы страница не
   выпадала из системы, но масштаб и якорь другие.
   ------------------------------------------------------------ */

.pagehero { isolation: isolate; }

/* Сетка проступает сверху и гаснет к низу */
.pagehero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 96% at 12% 0%, #000 12%, transparent 72%);
  pointer-events: none;
}

/* Цифра-призрак: столько услуг в разделе */
.pagehero::after {
  content: '6';
  position: absolute;
  right: -0.06em;
  bottom: -0.3em;
  z-index: -1;
  font-family: var(--f-head);
  font-size: clamp(9rem, 5rem + 17.6vw, 21rem);
  font-weight: 800;
  line-height: 0.7;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--c-line-strong) 4%, transparent 76%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

/* Факты в шапке: подсветка строки и красная риска слева */
.pagefact {
  position: relative;
  padding-inline-start: var(--sp-4);
  transition: background-color var(--d-base) var(--e-out);
}
.pagefact::before {
  content: '';
  position: absolute;
  top: var(--sp-4);
  bottom: var(--sp-4);
  left: 0;
  width: 2px;
  background: var(--c-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-base) var(--e-out);
}
.pagefact:hover { background: rgba(255, 255, 255, 0.018); }
.pagefact:hover::before { transform: scaleY(1); }

/* ------------------------------------------------------------
   3. БЛОКИ УСЛУГ
   ------------------------------------------------------------ */

.svcblock {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Крупный индекс-призрак. Он не просто украшение: кадр услуги
   имеет соотношение 4:3 и всегда короче текстовой колонки, под
   ним остаётся пустота. Призрак занимает её и делает пустоту
   намеренной — приём из редакторской вёрстки. Поэтому он стоит
   на стороне КАДРА, а сторона зависит от чётности блока:
   в чётных кадр уходит влево. */
.svcblock::before {
  content: attr(data-ghost);
  position: absolute;
  right: -0.05em;
  bottom: -0.24em;
  z-index: -1;
  font-family: var(--f-head);
  font-size: clamp(6.5rem, 2.5rem + 15vw, 14.5rem);
  font-weight: 800;
  line-height: 0.7;
  letter-spacing: -0.06em;
  background: linear-gradient(176deg,
              rgba(255, 255, 255, 0.055) 6%,
              rgba(216, 35, 42, 0.05) 62%,
              transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
/* Кадр стоит справа (сетка 1.15fr / 0.85fr), у чётных блоков
   order: -1 переносит его влево — призрак едет за ним. */
@media (min-width: 820px) {
  .svcblock:nth-of-type(even)::before { right: auto; left: -0.05em; }
}

/* Индекс в заголовке. Была обводка -webkit-text-stroke —
   запрещённый в проекте приём (§6.5): он обводит каждый контур
   глифа отдельно, у «4» вылезает лишний штрих. Заменено на
   заливку градиентом через background-clip: text. */
.svcblock__idx {
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(168deg, var(--c-text-dim) 6%, transparent 88%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Красная риска над заголовком услуги: прочерчивается,
   когда блок появляется по прокрутке */
.svcblock__head { position: relative; padding-top: var(--sp-5); }
.svcblock__head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out) 120ms;
}
.svcblock.is-in .svcblock__head::before { transform: scaleX(1); }

/* Кадр услуги: рамка, приближение по наведению, световой блик */
.svcblock__media { isolation: isolate; }
.svcblock__media img {
  transform: scale(1.01);
  transition: transform var(--d-slow) var(--e-out);
}
.svcblock:hover .svcblock__media img { transform: scale(1.06); }

.svcblock__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, 0.07) 48%, transparent 74%);
  transform: translate3d(-100%, 0, 0);
  transition: transform 1000ms var(--e-out);
  pointer-events: none;
}
.svcblock:hover .svcblock__media::after { transform: translate3d(100%, 0, 0); }

/* Перечень работ: галочка встаёт в рамку, строка светлеет */
.tick li { transition: color var(--d-base) var(--e-out); }
.tick li:hover { color: var(--c-text); }
.tick li:hover svg { color: var(--c-accent-hi); }

/* Врезка-предупреждение: знак в рамке, а не голый на фоне */
.note {
  position: relative;
  overflow: hidden;
}
.note > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: var(--sp-2);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-accent);
}

/* Нумерованные правила отбора пробы — свои счётчики */
.rules { counter-reset: rule; }
.rules > li {
  position: relative;
  counter-increment: rule;
  padding-left: calc(var(--sp-7) + var(--sp-2));
  list-style: none;
}
.rules > li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

/* ------------------------------------------------------------
   4. ПОРЯДОК РАБОТЫ — линия цепочки прочерчивается
   ------------------------------------------------------------ */

.steps .step::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.steps.is-in .step::after { transform: scaleX(1); }

.step { transition: background-color var(--d-base) var(--e-out); }
.step:hover { background: rgba(255, 255, 255, 0.016); }
.step:hover .step__n { color: var(--c-accent-hi); }
.step__n { transition: color var(--d-base) var(--e-out); }

/* ------------------------------------------------------------
   5. ГАРАНТИЯ — смысловой цвет по колонкам
   ------------------------------------------------------------ */

.warranty__col {
  position: relative;
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.warranty__col:hover { transform: translateY(-3px); }
.warranty--ok:hover { border-color: color-mix(in srgb, var(--c-ok) 46%, transparent); }
.warranty--no:hover { border-color: color-mix(in srgb, var(--c-warn) 46%, transparent); }

/* Цветная подсветка в углу — какая колонка о чём */
.warranty__col::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.warranty--ok::before {
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--c-ok) 15%, transparent), transparent 66%);
}
.warranty--no::before {
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--c-warn) 15%, transparent), transparent 66%);
}
.warranty__col { isolation: isolate; }

/* ------------------------------------------------------------
   6. ПРЕИМУЩЕСТВА И БРЕНДЫ — световая протяжка при наведении
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   7. ЛЕНТА ЯКОРЕЙ НА МОБИЛЬНОМ — активный чип виден
   ------------------------------------------------------------ */

.anchorrail .chip { transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out); }
.anchorrail .chip.is-current { border-color: var(--c-accent); color: var(--c-text); }

/* ------------------------------------------------------------
   8. ПОКОЙ ПРИ ОТКЛЮЧЁННОМ ДВИЖЕНИИ
   Всё, что едет или прочерчивается, встаёт в конечное
   положение. Блики убираем совсем.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .svcblock__media::after,
  .pro::after,
  .brand::after { display: none; }

  .svcblock__head::before,
  .steps .step::after { transform: none; transition: none; }

  .pagefact::before { transition: none; }

  .anchornav__list::after { transition: none; }

  .svcblock__media img,
  .anchornav a,
  .warranty__col { transition: none; }
  .svcblock:hover .svcblock__media img { transform: scale(1.01); }
  .anchornav a:hover { transform: none; }
  .warranty__col:hover { transform: none; }
}

/* ================================================================
   ЧЕТВЁРТЫЙ КРУГ ПРАВОК — 08.08.2026
   ================================================================ */

/* ----------------------------------------------------------------
   Кадр услуги крупнее. Был 4:3 и всегда короче текстовой колонки —
   под ним зияла пустота. Стало 4:5: кадр выше, пустота почти
   уходит. Одинаково во всех шести блоках, поэтому чередование
   сторон остаётся симметричным.
   Промежуток между панелью и контентом уменьшен с sp-10 до sp-8 —
   освободившееся место отдано кадру.
   ---------------------------------------------------------------- */
@media (min-width: 1040px) {
  .withnav { gap: var(--sp-8); }
}
@media (min-width: 820px) {
  .svcblock { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
  .svcblock__media { aspect-ratio: 4 / 5; }
}

/* ----------------------------------------------------------------
   Панель услуг ниже. Просили «растянуть»: под списком добавлен
   блок с подсказкой и кнопкой — панель становится выше и
   при этом полезнее, а не просто вытянутой пустотой.
   ---------------------------------------------------------------- */
.anchornav__cta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--sp-3);
}
.anchornav__cta p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text-dim);
}
.anchornav__cta b { display: block; font-size: var(--fs-sm); color: var(--c-text); }
.anchornav__cta .btn { width: 100%; justify-content: center; }

/* ----------------------------------------------------------------
   Гарантия — раздел просили укоротить
   ---------------------------------------------------------------- */
.section--tight .warranty__col { padding: var(--sp-5); }
.section--tight .warranty__col h3 { margin-bottom: var(--sp-3); }
.section--tight .warranty__col li { padding-block: var(--sp-2); }
.section--tight .warranty__term { padding-block: var(--sp-2); }

/* Гарантия: раздел просили укоротить, одного section--tight
   не хватило — списки в двух колонках длинные сами по себе. */
.section--tight .warranty { gap: var(--sp-4); }
.section--tight .warranty__col { padding: var(--sp-4) var(--sp-5); }
.section--tight .warranty__col h3 { margin-bottom: var(--sp-2); font-size: var(--fs-body); }
.section--tight .warranty__col li { padding-block: 6px; font-size: var(--fs-xs); }
.section--tight .warranty__term { padding-block: 6px; }