/* Красные кеды · service.css
   Витрина услуг (services.html) и страницы услуг (service-<направление>.html).
   Одна система для девяти страниц: шапка с коллажем из лучших проектов направления, «Что делаем» с примерами
   из каталога, проекты (компоненты каталога, catalog.css), шаги работы со шнурком через люверсы,
   другие направления. Цвета только из токенов, компоненты красятся через --s-*. */

/* ============================== ОБЩЕЕ ============================== */
/* base.css обнуляет margin-top у детей .section > .wrap: нижние ряды разделов задают отступ селектором
   с той же специфичностью (.svc-x .svc-x__foot), он идёт позже и побеждает */

.svc-nobr { white-space: nowrap; }

/* Хлебные крошки */
.svc-crumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  color: var(--s-muted);
  font-size: .6875rem;
}
.svc-crumbs__list li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.svc-crumbs__list li > * { min-width: 0; overflow-wrap: anywhere; }
.svc-crumbs__list li + li::before {
  content: "";
  width: 14px;
  height: 1.5px;
  margin: 0 10px;
  background: currentColor;
  opacity: .5;
}
.svc-crumbs a { text-decoration: none; transition: color .2s; }
.svc-crumbs a:hover { color: var(--s-fg); text-decoration: underline; text-underline-offset: .3em; }
.svc-crumbs [aria-current] { color: var(--s-fg); }

/* Флажки «Ночью», «Макет», «Видео» на фото (вид — как в каталоге) */
.svc-flags { position: absolute; z-index: 3; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.svc-flag--own { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.svc-flag--own::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* Кнопка «Пауза» у роликов, которые крутятся сами (WCAG 2.2.2): тот же вид, что у кнопки ролика на главной */
.svc-play {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.svc-play:hover { background: var(--red); color: var(--ink); }
.svc-play:active { transform: scale(.94); }
.svc-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.svc-play__icon { width: 18px; height: 18px; fill: currentColor; }
.svc-play__icon--play { display: none; }
.svc-play[aria-pressed="true"] .svc-play__icon--pause { display: none; }
.svc-play[aria-pressed="true"] .svc-play__icon--play { display: block; }

/* ============================== ШАПКА СТРАНИЦЫ УСЛУГИ ============================== */

.svc-head {
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 60px));
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow-x: clip;
}
.svc-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.svc-head__text {
  display: grid;
  gap: clamp(16px, 1.9vw, 24px);
  justify-items: start;
  min-width: 0;
  container-type: inline-size;
}
.svc-head__tag { margin-top: 4px; }
/* Кегль заголовка подбирается под самое длинное слово (--k ставит генератор): «Вывески» крупно,
   «Индивидуальные конструкции» мельче, но слово никогда не рвётся и не вылезает из колонки */
.svc-head__title {
  --k: 8;
  font-size: min(6.5rem, calc(86vw / (var(--k) * .98)));
  font-size: min(6.5rem, calc(100cqi / (var(--k) * .98)));
  line-height: .94;
  overflow-wrap: normal;
  hyphens: manual;
}
@media (min-width: 900px) {
  .svc-head__title { font-size: min(6.5rem, calc(50vw / (var(--k) * .98))); font-size: min(6.5rem, calc(100cqi / (var(--k) * .98))); }
}
/* Телефон: длинные слова («Индиви-дуальные», «Бренди-рование») переносятся по мягким переносам, кегль считается
   по самому длинному куску (--kf), и заголовок страницы не мельче заголовков разделов (.h2 — 2rem) */
@media (max-width: 599px) {
  .svc-head__title {
    --kf: var(--k);
    font-size: max(2rem, min(6.5rem, calc(86vw / (var(--kf) * .98))));
    font-size: max(2rem, min(6.5rem, calc(100cqi / (var(--kf) * .98))));
  }
}
.svc-head__lead { max-width: 46ch; }
.svc-head__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--s-muted);
}
.svc-head__facts li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1.5px solid var(--s-line);
  border-radius: 16px;
  line-height: 1.35;
}
.svc-head__count { display: inline-flex; align-items: center; gap: 0; color: var(--s-fg); text-decoration: none; }
.svc-head__count b { font-weight: 600; color: var(--red-press); margin-right: 1px; }
.svc-head__facts li:has(.svc-head__count) { border-color: var(--s-fg); }
.svc-head__facts li:has(.svc-head__count:hover) { background: var(--s-fg); }
.svc-head__count:hover, .svc-head__count:hover b { color: var(--s-bg); }
.svc-head__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.svc-head__more { font-size: var(--fs-small); margin-top: -4px; }
.svc-head__more-arrow { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease-out); }
.svc-head__more:hover { color: var(--red-press); }
.svc-head__more:hover .svc-head__more-arrow { transform: translateY(2px); }

/* ---------- Коллаж: три лучших проекта направления, как фото на производственном столе ---------- */
.svc-collage {
  --px: 0;
  --py: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  aspect-ratio: 1 / 1.06;
  min-width: 0;
}
.svc-collage__item {
  --depth: 0;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
  transition: translate .9s var(--ease-out);
}
.svc-collage__item--a { grid-area: 1 / 1 / 11 / 9; z-index: 1; --depth: -6; }
.svc-collage__item--b { grid-area: 2 / 8 / 7 / 13; z-index: 2; --depth: 10; }
.svc-collage__item--c { grid-area: 7 / 6 / 13 / 12; z-index: 3; --depth: 16; }
.svc-collage__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}
/* верхние фото лежат на нижнем: белое поле вокруг, как у отпечатка */
.svc-collage__item--b .svc-collage__frame,
.svc-collage__item--c .svc-collage__frame { box-shadow: 0 0 0 6px var(--s-bg); }
.svc-collage__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1s var(--ease-out);
}
.svc-collage__item.is-lifted .svc-collage__img { visibility: hidden; }
/* наш стиль: мокап целиком на тёмной плашке (фургон) */
.svc-collage__frame--contain .svc-collage__img { object-fit: contain; }
.svc-collage__frame--ink { background: var(--ink); }
.svc-collage--own .svc-collage__hint { grid-area: 11 / 1 / 13 / 6; font-size: .6875rem; color: var(--s-fg); }

/* Макеты (брендинг): лист целиком с метками реза */
.svc-collage__frame--sheet { padding: clamp(14px, 6%, 26px); background: var(--paper); }
.svc-collage__frame--sheet .svc-collage__img { border-radius: 3px; }
.svc-collage__frame--sheet::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  pointer-events: none;
  --m: color-mix(in srgb, var(--ink) 40%, transparent);
  background:
    linear-gradient(var(--m), var(--m)) left top / 12px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1.5px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 12px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1.5px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1.5px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1.5px 12px no-repeat;
}
.svc-collage__item--a .svc-collage__frame--sheet { box-shadow: inset 0 0 0 1.5px var(--line); }

/* Моушн: ролик в «телефоне» на плывущем фирменном паттерне */
.svc-collage__frame--phone {
  display: grid;
  place-items: center;
  background: var(--red) url("../img/brand/pattern-red.webp") 0 0 / 420px 420px repeat;
  animation: svc-drift 60s linear infinite;
}
.svc-collage__video {
  height: 84%;
  width: auto;
  max-width: 88%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 5px solid var(--ink);
  border-radius: 22px;
  background: var(--ink);
}
/* фото B лежит на правой 1/8 фото A: чип левее */
.svc-collage__rec {
  position: absolute;
  right: calc(12.5% + 10px);
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .625rem;
}
.svc-collage__rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
/* кнопка паузы — соседка ссылки в той же ячейке, что фото A; двигается вместе с ним */
.svc-collage__play {
  --depth: -6;
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: start;
  margin: 10px 0 0 10px;
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
  transition: background-color .2s, color .2s, transform .25s var(--ease-out), translate .9s var(--ease-out);
}
.svc-collage__play--a { grid-area: 1 / 1 / 11 / 9; }
@keyframes svc-drift { to { background-position: 420px 420px; } }

/* Подпись: номер и название проекта на белой плашке */
.svc-collage__cap {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  min-height: 30px;
  padding: 3px 12px 3px 3px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.1;
  transition: background-color .25s, color .25s;
}
.svc-collage__cap-n {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .625rem;
  letter-spacing: .04em;
  transition: background-color .25s, color .25s;
}
/* длинное название переносится на вторую строку, а не обрезается многоточием посреди слова */
.svc-collage__cap-t {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
  hyphens: manual;
  padding: 2px 0;
}
/* фото C лежит на правых 3/8 фото A: подпись A — в его левой части */
.svc-collage__item--a .svc-collage__cap { max-width: calc(62.5% - 22px); }
.svc-collage__item:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .svc-collage__item:hover .svc-collage__img { transform: scale(1.05); }
  .svc-collage__item:hover .svc-collage__cap { background: var(--ink); color: var(--paper); }
  .svc-collage__item:hover .svc-collage__cap-n { background: var(--red); color: var(--ink); }
}
.svc-collage__hint {
  grid-area: 11 / 1 / 13 / 6;
  align-self: end;
  color: var(--s-muted);
  font-size: .625rem;
  line-height: 1.5;
  padding-right: 12px;
}
.svc-collage__hint::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--s-accent);
  vertical-align: .05em;
}

@media (max-width: 899px) {
  .svc-head__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .svc-collage { aspect-ratio: 1 / .96; max-width: 640px; width: 100%; }
}
@media (max-width: 599px) {
  .svc-head__actions .btn { flex: 1 1 auto; }
  .svc-head__facts li { min-height: 30px; padding: 0 10px; }
  .svc-collage__item { border-radius: 12px; }
  .svc-collage__item--b .svc-collage__frame,
  .svc-collage__item--c .svc-collage__frame { box-shadow: 0 0 0 4px var(--s-bg); }
  .svc-collage__cap { left: 6px; bottom: 6px; max-width: calc(100% - 12px); min-height: 26px; padding-right: 9px; font-size: .6875rem; gap: 6px; }
  .svc-collage__cap-n { min-width: 20px; height: 20px; font-size: .5625rem; }
  .svc-collage__item--b .svc-collage__cap-t,
  .svc-collage__item--c .svc-collage__cap-t { max-width: 18ch; }
  .svc-flags { left: 6px; top: 6px; gap: 4px; }
  .svc-collage__video { border-width: 4px; border-radius: 16px; }
  .svc-collage__play { margin: 6px 0 0 6px; }
  .svc-collage--own .svc-collage__hint { font-size: .5625rem; }
  .svc-collage__hint { grid-area: 11 / 1 / 13 / 6; font-size: .5625rem; }
}

/* ============================== ЧТО ДЕЛАЕМ ============================== */

.svc-what__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 28px clamp(20px, 4vw, 64px);
  align-items: start;
}
.svc-what__side {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  gap: 14px;
  min-width: 0;
}
.svc-what__side-cap { color: var(--s-muted); font-size: .6875rem; }
.svc-what__side-text { color: var(--s-muted); font-size: var(--fs-small); line-height: 1.5; max-width: 30ch; }

/* Образцы материалов — чистые CSS-текстуры */
.svc-mats { list-style: none; display: grid; gap: 8px; }
.svc-mat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1.5px solid var(--s-line);
  border-radius: 12px;
  background: var(--paper);
}
.svc-mat__tex {
  grid-row: 1 / 3;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}
.svc-mat__tex::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--paper) 55%, transparent) 48%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  background-position: 100% 0;
  transition: background-position .9s var(--ease-out);
}
.svc-mat:hover .svc-mat__tex::after { background-position: 0 0; }
.svc-mat__name { color: var(--ink); font-size: .6875rem; align-self: end; }
.svc-mat__use { color: var(--muted); font-size: .8125rem; line-height: 1.3; align-self: start; }
.svc-mat--composite .svc-mat__tex {
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--ink) 30%, transparent) 48% 52%, transparent 52%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--paper) 30%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, color-mix(in srgb, var(--muted) 30%, var(--paper)), color-mix(in srgb, var(--muted) 62%, var(--paper)));
}
.svc-mat--acrylic .svc-mat__tex {
  background:
    radial-gradient(circle at 32% 30%, var(--paper) 0 30%, transparent 70%),
    linear-gradient(140deg, var(--paper), color-mix(in srgb, var(--led-warm) 55%, var(--paper)));
}
.svc-mat--mdf .svc-mat__tex {
  background:
    repeating-radial-gradient(circle at 20% 120%, transparent 0 3px, color-mix(in srgb, var(--ink) 10%, transparent) 3px 4px),
    linear-gradient(150deg, color-mix(in srgb, var(--led-warm) 70%, var(--muted)), color-mix(in srgb, var(--led-warm) 40%, var(--muted)));
}
.svc-mat--film .svc-mat__tex {
  background:
    linear-gradient(135deg, transparent 72%, color-mix(in srgb, var(--paper) 85%, var(--red)) 72% 74%, var(--paper) 74%),
    linear-gradient(115deg, var(--red) 0 46%, color-mix(in srgb, var(--red) 60%, var(--paper)) 46% 54%, var(--red) 54%);
}
.svc-mat--uv .svc-mat__tex {
  background:
    radial-gradient(circle, var(--red) 0 34%, transparent 38%) 0 0 / 7px 7px,
    radial-gradient(circle, var(--ink) 0 30%, transparent 34%) 3.5px 3.5px / 7px 7px,
    var(--paper);
}
.svc-mat--led .svc-mat__tex {
  background:
    radial-gradient(circle, var(--led-warm) 0 22%, color-mix(in srgb, var(--led-warm) 30%, transparent) 40%, transparent 62%) 2px 2px / 13px 13px,
    var(--wall);
}

/* Пункты: строки «состава» на этикетке */
.svc-what__list { list-style: none; border-top: 1.5px solid var(--s-fg); min-width: 0; }
.svc-what__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 320px);
  gap: 10px 24px;
  align-items: center;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1.5px solid var(--s-line);
}
/* красный шнурок по верхней кромке строки на наведении */
.svc-what__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5px;
  height: 1.5px;
  width: 100%;
  background: var(--s-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.svc-what__item:hover::before,
.svc-what__item:focus-within::before { transform: none; }
.svc-what__n { align-self: start; padding-top: .55em; color: var(--s-muted); font-size: .75rem; }
.svc-what__main { min-width: 0; }
.svc-what__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.svc-what__detail { margin-top: 6px; color: var(--s-muted); font-size: var(--fs-small); }
.svc-what__note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid var(--s-line);
  border-radius: 4px;
  background: var(--s-bg);
  font-size: .6875rem;
}

/* Пример: миниатюра проекта из каталога, открывает его диалог */
.svc-what__ex {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid var(--s-line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .25s, background-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.svc-what__ex-img {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: var(--soft);
}
.svc-what__ex-pic { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.svc-what__ex.is-lifted .svc-what__ex-pic { visibility: hidden; }
.svc-what__ex--sheet .svc-what__ex-pic,
.svc-what__ex--own .svc-what__ex-pic { object-fit: contain; padding: 6px; }
.svc-what__ex--own .svc-what__ex-img { background: var(--soft); }
.svc-what__ex--fill .svc-what__ex-pic { object-fit: cover; padding: 0; }
.svc-what__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--paper);
}
.svc-what__play::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--paper);
}
.svc-what__ex-text { display: grid; gap: 3px; min-width: 0; }
.svc-what__ex-k { color: var(--muted); font-size: .625rem; }
.svc-what__ex-t { font-weight: 600; font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.svc-what__ex-arrow { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.svc-what__ex:hover { border-color: var(--ink); }
.svc-what__ex:hover .svc-what__ex-arrow { transform: translateX(3px); }
.svc-what__ex:hover .svc-what__ex-pic { transform: scale(1.06); }
.svc-what__ex:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; }

/* Пункты без примера идут после строк с примером: компактнее, а на широком экране — 2–3 ячейки в ряд
   (генератор ставит --of2/--of3 и --row первой ячейке ряда), чтобы у строки не пустовала правая треть */
.svc-what__item--plain { align-items: start; align-content: start; padding: clamp(14px, 1.6vw, 20px) 0; }
@media (min-width: 1100px) {
  .svc-what__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-what__item { grid-column: 1 / -1; }
  .svc-what__item--plain { grid-template-columns: 52px minmax(0, 1fr); }
  .svc-what__item--of2 { grid-column: span 3; }
  .svc-what__item--of3 { grid-column: span 2; }
  /* в узкой ячейке номер над названием: «Деловая документация» помещается целыми словами */
  .svc-what__item--of2, .svc-what__item--of3 { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-right: 16px; }
  .svc-what__item--of2 .svc-what__n, .svc-what__item--of3 .svc-what__n { padding-top: 0; }
  .svc-what__item--plain:not(.svc-what__item--row) { padding-left: 22px; border-left: 1.5px dashed var(--s-line); }
  .svc-what__item--of2 .svc-what__name,
  .svc-what__item--of3 .svc-what__name { font-size: clamp(1.125rem, 1.45vw, 1.375rem); overflow-wrap: normal; }
}
@media (max-width: 1099px) {
  .svc-what__item { grid-template-columns: 40px minmax(0, 1fr); }
  .svc-what__ex { grid-column: 2; justify-self: start; width: min(100%, 380px); }
}
@media (max-width: 860px) {
  .svc-what__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-what__side { position: static; order: 2; }
  .svc-mats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 599px) {
  .svc-what__item { grid-template-columns: 30px minmax(0, 1fr); gap: 10px 10px; }
  .svc-what__n { padding-top: .35em; font-size: .6875rem; }
  .svc-what__ex { grid-column: 1 / -1; width: 100%; grid-template-columns: 72px minmax(0, 1fr) 16px; }
  .svc-mats { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== ВЫВЕСКИ: ПРИМЕРКА ============================== */

.svc-try__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.svc-try__text { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; min-width: 0; }
.svc-try__title { font-size: calc(var(--fs-h2) * .9); }
.svc-try__media { position: relative; min-width: 0; }
.svc-try__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--wall-2);
}
.svc-try__cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  max-width: calc(100% - 28px);
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: .625rem;
}
.svc-try__cap::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--led-warm); }
@media (max-width: 899px) {
  .svc-try__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== БРЕНДИНГ: НАШ СТИЛЬ ============================== */

/* паттерн фоном, текст — только на белой плашке (брендбук) */
.svc-own { position: relative; overflow: hidden; isolation: isolate; }
.svc-own::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red) url("../img/brand/pattern-red.webp") 0 0 / 520px 520px repeat;
  animation: svc-drift-own 60s linear infinite;
}
@keyframes svc-drift-own { to { background-position: 520px 520px; } }
.svc-own__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.svc-own__plate {
  container-type: inline-size;
  display: grid;
  gap: 18px;
  justify-items: start;
  padding: clamp(24px, 3.4vw, 48px);
  border-radius: var(--r-m);
  min-width: 0;
}
.svc-own__logo { width: min(260px, 72%); height: auto; margin: 8px 0 2px; }
.svc-own__title { font-size: min(calc(var(--fs-h2) * .82), calc(100cqi / (11 * .95))); }
.svc-own__text { color: var(--s-muted); font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; }
.svc-own__note { color: var(--s-fg); padding-top: 14px; border-top: 1.5px dashed var(--s-line); width: 100%; }
.svc-own__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  min-width: 0;
}
.svc-own__shot {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 0 0 5px var(--paper);
}
.svc-own__shot--1, .svc-own__shot--2 { aspect-ratio: 4 / 4.4; }
.svc-own__shot--3, .svc-own__shot--4 { aspect-ratio: 16 / 10; }
.svc-own__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.svc-own__shot:hover .svc-own__img { transform: scale(1.04); }
.svc-own__label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: .625rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
@media (max-width: 899px) {
  .svc-own__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== ПРОЕКТЫ (компоненты каталога) ============================== */

.svc-projects.section { padding-top: var(--section-y); }
.svc-projects__head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 18px clamp(20px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.svc-projects__head > :not(.tag) { grid-column: 2; min-width: 0; }
.svc-projects__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--s-fg);
}
.svc-projects__total .num { font-size: 1rem; }
.svc-projects__lead { color: var(--s-muted); max-width: 62ch; }

/* фильтр «Ночью» в строку под заголовком (колонки фильтров каталога здесь нет) */
.svc-projects .catalog__filters {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.svc-projects .catalog__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.svc-projects .catalog__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.svc-projects .catalog__group--kind,
.svc-projects .catalog__group--year { flex: 0 1 auto; }
.svc-projects__lite { margin-top: -4px; }
.svc-projects .catalog__kinds { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.svc-projects .catalog__group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.svc-projects .catalog__switch-hint { display: block; }
.svc-projects .catalog__reset { margin-left: 0; }

/* без колонки фильтров места больше: 4 колонки мозаики на широком экране */
@media (min-width: 1200px) {
  .svc-projects .catalog__grid { --cols: 4; --gap: 20px; --gap-y: 32px; }
}
.svc-projects__few {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1.5px dashed var(--s-line);
  border-radius: 12px;
  color: var(--s-muted);
}
.svc-projects__few a { color: var(--s-fg); font-weight: 600; }
.svc-projects .svc-projects__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1.5px solid var(--s-line);
}
.svc-projects__arrow { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.svc-projects__all:hover .svc-projects__arrow { transform: translateX(3px); }
.svc-projects__ig:hover .svc-projects__arrow { transform: translate(3px, -3px); }
@media (max-width: 860px) {
  .svc-projects__head { grid-template-columns: minmax(0, 1fr); }
  .svc-projects__head > :not(.tag) { grid-column: 1; }
}
@media (max-width: 599px) {
  .svc-projects .catalog__switch-hint { display: none; }
}

/* ============================== КАК РАБОТАЕМ: шнурок через люверсы ============================== */

.svc-steps { overflow-x: clip; }
.svc-steps__list {
  --gap: clamp(16px, 2.2vw, 32px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
}
.svc-steps__step { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
/* участок шнурка от этого люверса до следующего */
.svc-steps__step::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 14px;
  top: 12px;
  width: calc(100% + var(--gap));
  height: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 9px, color-mix(in srgb, var(--paper) 72%, var(--ink)) 9px 11px);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
/* последний: свободный конец с наконечником */
.svc-steps__step:last-child::after { width: 58px; }
.svc-steps__eyelet {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 3px solid var(--on-dark);
  background: var(--s-bg);
  box-shadow: inset 0 0 0 4px var(--s-bg), inset 0 0 0 9px var(--wall-line);
  transition: background-color .3s, box-shadow .3s, border-color .3s;
}
.svc-steps__step:last-child .svc-steps__eyelet::after {
  content: "";
  position: absolute;
  left: 66px;
  top: 50%;
  width: 24px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 6px;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--paper);
  transition: opacity .4s var(--ease-out) .9s;
}
.svc-steps__step:hover .svc-steps__eyelet { border-color: var(--red); box-shadow: inset 0 0 0 4px var(--s-bg), inset 0 0 0 9px var(--red); }
.svc-steps__n { color: var(--s-accent); font-size: .6875rem; }
.svc-steps__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.35vw, 1.3rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}
.svc-steps__text { color: var(--s-muted); font-size: var(--fs-small); line-height: 1.5; }
/* шнурок прорисовывается от люверса к люверсу, когда шаги вошли в экран */
.js .svc-steps__track:not(.is-in) .svc-steps__step::after { transform: scaleX(0); }
.js .svc-steps__track:not(.is-in) .svc-steps__step:last-child .svc-steps__eyelet::after { opacity: 0; transition-delay: 0s; }
.svc-steps__step:nth-child(2)::after { transition-delay: .15s; }
.svc-steps__step:nth-child(3)::after { transition-delay: .3s; }
.svc-steps__step:nth-child(4)::after { transition-delay: .45s; }
.svc-steps__step:nth-child(5)::after { transition-delay: .6s; }

.svc-steps .svc-steps__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1.5px solid var(--s-line);
  border-radius: var(--r-m);
}
.svc-steps__cta-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  max-width: 30ch;
}
@media (max-width: 899px) {
  .svc-steps__list { grid-template-columns: minmax(0, 1fr); --gap: 26px; }
  .svc-steps__step { grid-template-columns: 29px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; }
  .svc-steps__eyelet { grid-row: 1 / 4; margin: 0; }
  .svc-steps__step::after { left: 12px; top: 14px; width: 5px; height: calc(100% + var(--gap)); transform-origin: center top;
    background: repeating-linear-gradient(180deg, var(--paper) 0 9px, color-mix(in srgb, var(--paper) 72%, var(--ink)) 9px 11px); }
  .svc-steps__step:last-child::after { width: 5px; height: 52px; }
  .svc-steps__step:last-child .svc-steps__eyelet::after { left: 50%; top: 60px; width: 11px; height: 24px; margin: 0 0 0 -5.5px; }
  .js .svc-steps__track:not(.is-in) .svc-steps__step::after { transform: scaleY(0); }
  .svc-steps__n { padding-top: 6px; }
}
@media (max-width: 599px) {
  .svc-steps__cta .btn { width: 100%; }
}

/* ============================== ДРУГИЕ НАПРАВЛЕНИЯ ============================== */

.svc-others__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.svc-others__item { display: flex; min-width: 0; }
.svc-others__link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 9px 18px 9px 9px;
  border: 1.5px solid var(--s-line);
  border-radius: var(--r-m);
  background: var(--s-bg);
  color: var(--s-fg);
  text-decoration: none;
  transition: border-color .25s, background-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.svc-others__img {
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
}
.svc-others__pic { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.svc-others__img--ai { display: grid; place-items: center; background: var(--wall-2); color: var(--red); }
.svc-others__icon { width: 34px; height: 34px; }
.svc-others__body { display: grid; gap: 3px; min-width: 0; }
.svc-others__code, .svc-others__n { color: var(--s-muted); font-size: .625rem; }
.svc-others__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.18;
  overflow-wrap: break-word;
}
.svc-others__arrow { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.svc-others__link:hover { border-color: var(--s-fg); }
.svc-others__link:hover .svc-others__arrow { transform: translateX(3px); }
.svc-others__link:hover .svc-others__pic { transform: scale(1.08); }
.svc-others__link:hover .svc-others__code { color: var(--red-press); }
.svc-others__link:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; }
.svc-others__item--ai .svc-others__link { border-color: var(--wall-line); }
.svc-others__item--ai .svc-others__link:hover { border-color: var(--red); }
.svc-others__item--ai .svc-others__code { color: var(--red); }
.svc-others .svc-others__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: clamp(28px, 3vw, 40px);
}
.svc-others__foot-arrow { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.svc-others__foot a:hover .svc-others__foot-arrow { transform: translateX(3px); }
@media (max-width: 1099px) {
  .svc-others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .svc-others__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .svc-others__link { grid-template-columns: 60px minmax(0, 1fr) 18px; gap: 12px; padding-right: 14px; border-radius: 14px; }
  .svc-others__img { border-radius: 8px; }
}

/* ============================== ВИТРИНА УСЛУГ: ШАПКА ============================== */

.svc-hub-head {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 76px));
  padding-bottom: clamp(36px, 5vw, 72px);
}
.svc-hub-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.svc-hub-head__text { display: grid; gap: clamp(18px, 2.2vw, 26px); justify-items: start; min-width: 0; container-type: inline-size; }
.svc-hub-head__title {
  --k: 12.5;
  font-size: min(6.5rem, calc(86vw / (var(--k) * .98)));
  font-size: min(6.5rem, calc(100cqi / (var(--k) * .98)));
  line-height: .96;
}
@media (min-width: 900px) {
  .svc-hub-head__title { font-size: min(6.5rem, calc(55vw / (var(--k) * .98))); font-size: min(6.5rem, calc(100cqi / (var(--k) * .98))); }
}
.svc-hub-head__line { display: inline; }
.svc-hub-head__line--accent { color: var(--s-accent); }
.svc-hub-head__lead { max-width: 46ch; }
.svc-hub-head__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.svc-hub-head__hint { color: var(--s-muted); font-size: .6875rem; }

/* Бирка-содержание: как наклейка на торце обувной коробки (тот же язык, что у каталога) */
.svc-index {
  min-width: 0;
  border: 1.5px solid var(--s-fg);
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--s-bg);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.svc-index__meta { margin: 0; }
.svc-index__row { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); border-bottom: 1.5px solid var(--s-fg); }
.svc-index__row dt { background: var(--s-fg); color: var(--s-bg); padding: 10px 12px; }
.svc-index__row dd { margin: 0; padding: 10px 12px; min-width: 0; }
.svc-index__row + .svc-index__row dt { border-top: 1px solid color-mix(in srgb, var(--s-bg) 22%, transparent); }
.svc-index__art { color: var(--red-press); }
.svc-index__cap { padding: 12px 12px 6px; color: var(--s-muted); font-size: .6875rem; }
/* облегчённая сборка для артефакта: честная строка «показаны N из M» (на services.html catalog.css не подключён) */
.svc-index__lite,
.svc-hub__lite {
  max-width: 100%;
  padding: 6px 10px;
  border: 1.5px dashed var(--s-line);
  border-radius: 8px;
  color: var(--s-muted);
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: none;
}
.svc-index__lite { margin: 10px 12px 0; }
.svc-hub__lite { display: inline-block; margin: 0 0 clamp(14px, 1.6vw, 20px); }
.svc-index__lite .num,
.svc-hub__lite .num { color: var(--s-fg); font-weight: 600; }
.svc-index__list { list-style: none; }
.svc-index__link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 12px;
  border-top: 1px dashed var(--s-line);
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.svc-index__code { font-family: var(--f-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; color: var(--s-muted); transition: color .2s; }
.svc-index__name { min-width: 0; }
.svc-index__n { font-family: var(--f-mono); font-size: .8125rem; font-weight: 600; }
.svc-index__new {
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.svc-index__link:hover { background: var(--red); color: var(--ink); }
.svc-index__link:hover .svc-index__code { color: var(--ink); }
.svc-index__link:hover .svc-index__new { background: var(--ink); color: var(--paper); }
.svc-index__link:focus-visible { outline-offset: -3px; }
.svc-index__barcode {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 52px;
  margin-top: 6px;
  padding: 0 12px 8px;
  border-top: 1.5px solid var(--s-fg);
  background:
    repeating-linear-gradient(90deg,
      var(--s-fg) 0 2px, transparent 2px 4px, var(--s-fg) 4px 5px, transparent 5px 8px,
      var(--s-fg) 8px 11px, transparent 11px 12px, var(--s-fg) 12px 13px, transparent 13px 17px,
      var(--s-fg) 17px 18px, transparent 18px 20px, var(--s-fg) 20px 23px, transparent 23px 25px)
    12px 10px / calc(100% - 132px) 30px no-repeat;
}
.svc-index__barcode span { font-size: .625rem; color: var(--s-muted); letter-spacing: .12em; }

@media (max-width: 959px) {
  .svc-hub-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 599px) {
  .svc-index__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-index__list li:nth-child(odd) .svc-index__link { border-right: 1px dashed var(--s-line); }
  .svc-index__list li:last-child { grid-column: 1 / -1; }
  .svc-index__list li:last-child .svc-index__link { border-right: 0; }
  .svc-index__link { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 10px; font-size: .875rem; line-height: 1.2; }
  .svc-index__code { display: none; }
  .svc-index__row { grid-template-columns: 104px minmax(0, 1fr); }
  .svc-hub-head__actions .btn { flex: 1 1 auto; }
}

/* ============================== ВИТРИНА УСЛУГ: КАРТОЧКИ ============================== */

.svc-hub.section { padding-top: clamp(32px, 4vw, 56px); border-top: 1.5px solid var(--s-line); }
.svc-hub__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.svc-hub__item { display: flex; min-width: 0; grid-column: span 6; }
@media (min-width: 1100px) {
  .svc-hub__item--w7 { grid-column: span 7; }
  .svc-hub__item--w5 { grid-column: span 5; }
  .svc-hub__item--w4 { grid-column: span 4; }
}
.svc-hub__item--ai { grid-column: 1 / -1; }

.svc-card {
  --cover-h: clamp(240px, 24vw, 370px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--s-line);
  border-radius: var(--r-m);
  background: var(--s-bg);
  color: var(--s-fg);
  transition: border-color .25s;
}
.svc-hub__item--w4 .svc-card { --cover-h: clamp(220px, 20vw, 300px); }
.svc-card:hover,
.svc-card:focus-within { border-color: var(--s-fg); }
.svc-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.svc-card__code {
  flex: none;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--s-fg);
  color: var(--s-bg);
  transition: background-color .25s, color .25s;
}
.svc-card:hover .svc-card__code,
.svc-card:focus-within .svc-card__code { background: var(--red); color: var(--ink); }
.svc-card__icon { flex: none; width: 20px; height: 20px; color: var(--s-fg); }
.svc-card__perf { flex: 1; min-width: 12px; border-top: 1.5px dashed var(--s-line); }
.svc-card__n { flex: none; color: var(--s-fg); }
.svc-card__new { flex: none; padding: 6px 9px; border-radius: var(--r-pill); background: var(--red); color: var(--ink); }

.svc-card__cover {
  position: relative;
  height: var(--cover-h);
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--soft);
}
.svc-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  pointer-events: none;
}
.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(1.02);
  transition: transform 1s var(--ease-out);
}
.svc-card:hover .svc-card__img { transform: scale(1.07); }
.svc-card__cap {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: calc(100% - 150px);
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: .625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
/* Полоска из трёх других проектов: «внутри — настоящие работы». На наведении раскладывается веером */
.svc-card__strip { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; }
.svc-card__strip img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid var(--paper);
  background: var(--soft);
  transition: margin .5s var(--ease-out), transform .5s var(--ease-out);
}
.svc-card__strip img + img { margin-left: -16px; }
.svc-card:hover .svc-card__strip img + img { margin-left: 4px; }
.svc-card:hover .svc-card__strip img:nth-child(2) { transform: translateY(-4px); }
.svc-card:hover .svc-card__strip img:nth-child(3) { transform: translateY(-8px); }

/* Моушн: ролик в «телефоне» на паттерне */
.svc-card__cover--reel {
  display: grid;
  place-items: center;
  background: var(--red) url("../img/brand/pattern-red.webp") 0 0 / 380px 380px repeat;
  animation: svc-drift-card 60s linear infinite;
}
@keyframes svc-drift-card { to { background-position: 380px 380px; } }
.svc-card__reel {
  display: block;
  height: 88%;
  aspect-ratio: 9 / 16;
  border: 4px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  transition: transform .8s var(--ease-out);
}
.svc-card:hover .svc-card__reel { transform: translateY(-4px) rotate(-1.5deg); }
.svc-card__video { width: 100%; height: 100%; object-fit: cover; }
.svc-card__play { right: 10px; top: 10px; }
.svc-card__cover--reel .svc-card__cap { max-width: calc(100% - 20px); }

.svc-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 8px 6px; min-width: 0; }
.svc-card__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.svc-card__link { color: inherit; text-decoration: none; }
/* вся карточка — ссылка на страницу услуги */
.svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--r-m); }
.svc-card__link:focus-visible { outline: none; }
.svc-card__link:focus-visible::after { outline: 3px solid var(--s-accent); outline-offset: 3px; }
.svc-card__lead { color: var(--s-muted); font-size: var(--fs-small); line-height: 1.5; max-width: 52ch; }
.svc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px dashed var(--s-line);
}
.svc-card__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--s-line);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
.svc-card__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  margin-top: 4px;
  padding: 5px 5px 5px 18px;
  border: 1.5px solid var(--s-fg);
  border-radius: var(--r-pill);
  font-size: .9375rem;
  font-weight: 600;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.svc-card__go-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--s-fg);
  color: var(--s-bg);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.svc-card__go-svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.svc-card:hover .svc-card__go { background: var(--s-fg); color: var(--s-bg); }
.svc-card:hover .svc-card__go-arrow { background: var(--red); color: var(--ink); }
.svc-card:hover .svc-card__go-svg { transform: translateX(2px); }

/* «Автоматизация и ИИ»: тёмная широкая карточка со схемой пути заявки */
.svc-card--ai { border-color: var(--wall-line); }
.svc-card--ai:hover,
.svc-card--ai:focus-within { border-color: var(--red); }
.svc-card--ai:hover .svc-card__code,
.svc-card--ai:focus-within .svc-card__code { background: var(--paper); color: var(--ink); }
.svc-card__ai {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  flex: 1;
}
.svc-card__ai .svc-card__body { padding-top: 10px; }
.svc-card--ai .svc-card__go-arrow { background: var(--paper); color: var(--ink); }
.svc-card--ai:hover .svc-card__go { background: var(--paper); color: var(--ink); }

.svc-flow {
  --flow-line: 3px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px 20px;
  border-radius: var(--r-s);
  background:
    linear-gradient(var(--wall-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--wall-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--wall);
  overflow: hidden;
}
/* красный шнурок через все узлы и бегущий по нему «наконечник»-импульс */
.svc-flow::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 50%;
  height: var(--flow-line);
  margin-top: calc(var(--flow-line) / -2);
  background: var(--red);
  border-radius: 2px;
}
.svc-flow::after {
  content: "";
  position: absolute;
  left: 12.5%;
  top: 50%;
  width: 22px;
  height: 10px;
  margin: -5px 0 0 -11px;
  border-radius: 5px;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--paper);
  animation: svc-pulse 4.2s var(--ease-io) infinite;
}
@keyframes svc-pulse {
  0% { left: 12.5%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 87.5%; opacity: 0; }
}
.svc-flow__node {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1.5px solid var(--wall-line);
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.svc-flow__node--hub { border-color: var(--red); background: var(--red); color: var(--ink); }

@media (max-width: 1099px) {
  .svc-hub__item:first-child { grid-column: 1 / -1; }
  .svc-hub__item:first-child .svc-card { --cover-h: clamp(260px, 40vw, 380px); }
}
@media (max-width: 899px) {
  .svc-card__ai { grid-template-columns: minmax(0, 1fr); }
  .svc-card__ai .svc-card__body { order: 2; }
}
@media (max-width: 699px) {
  .svc-hub__item, .svc-hub__item:first-child { grid-column: 1 / -1; }
  .svc-card, .svc-hub__item--w4 .svc-card, .svc-hub__item:first-child .svc-card { --cover-h: clamp(220px, 62vw, 300px); }
  .svc-card__body { padding: 16px 4px 4px; }
  .svc-card__strip img { width: 42px; height: 42px; }
  .svc-card__cap { max-width: calc(100% - 128px); }
  .svc-flow { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; padding: 20px; }
  .svc-flow::before { left: 50%; right: auto; top: 26px; bottom: 26px; width: var(--flow-line); height: auto; margin: 0 0 0 calc(var(--flow-line) / -2); }
  .svc-flow::after { display: none; }
}

/* ============================== ВИТРИНА УСЛУГ: ОДИН ЦЕХ ============================== */

.svc-cycle__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  counter-reset: none;
}
.svc-cycle__item {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px 20px 24px;
  border-top: 3px solid var(--s-fg);
  background: var(--paper);
  border-radius: 0 0 var(--r-s) var(--r-s);
  min-width: 0;
}
.svc-cycle__n { color: var(--red-press); font-size: .6875rem; }
.svc-cycle__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); line-height: 1.15; }
.svc-cycle__text { color: var(--s-muted); font-size: var(--fs-small); line-height: 1.5; }
.svc-cycle .svc-cycle__foot { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: clamp(28px, 3vw, 40px); }
.svc-cycle__arrow { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.svc-cycle__foot a:hover .svc-cycle__arrow { transform: translateX(3px); }
@media (max-width: 1099px) {
  .svc-cycle__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .svc-cycle__list { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== ДВИЖЕНИЕ ============================== */

@media (prefers-reduced-motion: reduce) {
  .svc-collage__frame--phone,
  .svc-own::before,
  .svc-card__cover--reel { animation: none; }
  .svc-flow::after { animation: none; left: 50%; opacity: 1; }
  .svc-collage__item, .svc-collage__play { translate: none; }
}
@media (hover: none), (pointer: coarse) {
  .svc-collage__item, .svc-collage__play { translate: none; }
}