/* ============================================================
   Softailor v3 — раздел «Услуги» (L1 каталог, L2 категория, L3 услуга)
   Источник: figma-copy-refs/png|json/services-*.json, sidebar-item.json,
   service-subheader.json, svc-mob-*.json. Токены — из main.css :root.
   Классы: префикс .svc- (см. figma-copy-refs/CONVENTIONS.md п.61).
   ============================================================ */

/* ---------- L1: hero акцент на «от идеи» + фон-волны (opus#11) ---------- */
.svc-hero .accent{color:var(--green)}
/* заголовок: 2 строки как в макете (перенос после «—»), не вылезает за правый край экрана */
.svc-hero__title{max-width:min(1100px,calc(100vw - 80px))}
/* без вертикальной линии-разделителя в тёмном hero (правка клиента 17.07 — смотрится лишней) */
.svc-hero .section__body{border-left:0}
.svc-hero.hero-dark::before{display:none}
.svc-hero{contain:paint}
/* hero: высота 500px + верхний паддинг, контент к низу и по ЛЕВОМУ краю без сеточной рейки (правки дизайнера-3) */
/* сверка с Figma 718:2 (28.07): высота фрейма 583px, горизонтальные паддинги 40px, нижний 64px */
.svc-hero.section{display:flex;flex-direction:column;justify-content:flex-end;min-height:583px;padding-left:40px;padding-right:40px;padding-bottom:64px}
.svc-hero .section__grid{display:block}
.svc-hero .section__body{padding-left:0}
.svc-hero .section__label{display:none}
/* фон-волны — img, чтобы SMIL-анимация работала везде */
/* фон hero: WebGL-канвас (анимация в шейдере на GPU); SVG — статичный фолбэк без WebGL/при reduced-motion */
.svc-hero__canvas{position:absolute !important;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.svc-hero__bg{position:absolute !important;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
/* при reduced-motion шейдер не запускается — статичный SVG остаётся фоном (раньше он тут прятался и hero был пустым) */
@media(prefers-reduced-motion:reduce){.svc-hero__bg{display:block}}
/* сабтайтл: без верхнего отступа (правки дизайнера-3); тень — читаемость поверх бегущего блика волн */
/* Figma 718:2: блок 399px прижат к правому краю, Manrope 16/17.6, отступ снизу — паддинг секции.
   Цвет в макете #838383, но поверх живого WebGL-шейдера (яркие неоновые петли справа именно под этим
   блоком) он не читается — оставлен светлый --tw-2 + тень (прежнее решение по читаемости). */
.svc-hero__sub{margin-top:0;margin-bottom:0;max-width:399px;margin-left:auto;color:var(--tw-2);font-size:16px;line-height:1.1;text-shadow:0 1px 14px rgba(20,28,16,.75)}

/* ---------- L1: двухколоночник (sticky-сайдбар + контент) ---------- */
/* Figma 718:2: сайдбар 280px + зазор 17px = колонка 297px, контент-колонка от 321px */
.svc-layout{display:grid;grid-template-columns:297px minmax(0,1fr);align-items:start;gap:0}

.svc-sidebar{position:sticky;top:calc(var(--nav-h) + 24px);padding-top:24px;padding-right:17px}
.svc-sidebar__title{font-size:16px;line-height:1.1;color:var(--text-3);margin-bottom:15px;padding:0}
.svc-sidebar__list{display:flex;flex-direction:column;gap:4px}

.svc-sidebar__item{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 24px;border-radius:2px;transition:background .2s}
.svc-sidebar__item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .2s}
.svc-sidebar__num{font-size:10px;line-height:1;color:var(--text-3);padding-top:3px}
.svc-sidebar__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.svc-sidebar__name{font-size:14px;line-height:1.43;color:var(--text-2);transition:color .2s}
.svc-sidebar__count{font-size:10px;line-height:1;color:var(--text-3)}

.svc-sidebar__item:hover{background:rgba(26,31,25,.04)}
.svc-sidebar__item.is-active{background:rgba(131,179,53,.1)}
.svc-sidebar__item.is-active::before{background:var(--green)}
.svc-sidebar__item.is-active .svc-sidebar__num,
.svc-sidebar__item.is-active .svc-sidebar__count{color:var(--green)}
.svc-sidebar__item.is-active .svc-sidebar__name{color:var(--text)}

/* ---------- L1: контент по категориям ---------- */
/* Figma 718:2: Content Area gap 16px, блок категории с паддингом 10px (карточки от 331px) */
.svc-content{display:flex;flex-direction:column;gap:16px;min-width:0}
/* перф (замечание с ревью): content-visibility:auto ПРОБОВАЛИ — стало хуже (reflow 0.17ms против 0.02ms),
   откатано. Тормозил SMIL-анимированный SVG-фон с blur-фильтрами: он перерисовывался каждый кадр на CPU.
   Теперь SVG статичный (без SMIL, 3 фильтра вместо 6), «дыхание» даёт CSS-анимация transform на GPU. */
.svc-cat{padding:10px;scroll-margin-top:calc(var(--nav-h) + 24px)}

/* Figma «Service Header» 792:1212: паддинги 24/16, гэп 32, линия снизу белая, до первой карточки 10px */
.svc-cathead{display:flex;align-items:flex-start;gap:32px;padding-top:24px;padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--white)}
.svc-cathead__num{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px;font-size:10px;line-height:1;color:var(--text-3)}
.svc-cathead__num .dot{width:4px;height:4px;border-radius:50%;background:var(--green)}
.svc-cathead__text{flex:1;min-width:0}
.svc-cathead__title{font-size:24px;line-height:1.33}
.svc-cathead__desc{margin-top:8px;font-size:14px;line-height:1.43;color:var(--text-2);max-width:744px}
.svc-cathead__count{display:none}
.svc-cathead__chevron{display:none}

/* ---------- L1: строка-услуга (карточка с раскрытием по hover) ---------- */
/* Figma «Service Card» 792:1214 (default): 52px, паддинг 16/4, гэп до следующей 10px, стрелка 13px */
.svc-card{display:block;padding:16px 4px;margin-bottom:10px;border:0;border-bottom:1px solid var(--line);border-radius:0;text-decoration:none;transition:background .25s ease,border-color .25s ease}
.svc-card:last-child{margin-bottom:0}
.svc-card__top{display:flex;align-items:center;gap:32px}
.svc-card__num{font-size:10px;line-height:1;color:var(--text-3);transition:color .2s}
.svc-card__name{flex:1;min-width:0;font-weight:500;font-size:16px;line-height:1.25;color:var(--text-2);transition:color .2s}
.svc-card__arrow{font-size:13px;line-height:1.2;color:var(--text-3);transition:color .2s}

/* hover-состояние 792:1213: описание и чипы с отбивкой 19+12 сверху и отступом 48 слева (под названием) */
.svc-card__body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .25s ease}
.svc-card__body>*{overflow:hidden;padding-left:48px}
.svc-card__desc{padding-top:31px;font-size:13px;line-height:1.2;color:rgba(241,241,240,.65)}
.svc-card__chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.svc-card__chips .svc-chip{padding:4px 9px;border:1px solid rgba(241,241,240,.15);border-radius:2px;background:rgba(241,241,240,.04);font-size:10px;line-height:1.2;color:rgba(241,241,240,.4)}

.svc-card:hover{background:var(--dark);border-color:var(--dark)}
.svc-card:hover .svc-card__num,.svc-card:hover .svc-card__arrow{color:var(--green)}
.svc-card:hover .svc-card__name{color:var(--tw)}
.svc-card:hover .svc-card__body{grid-template-rows:1fr;opacity:1}

/* ---------- L1 мобайл: сайдбар прячем, категории — аккордеон ---------- */
@media(max-width:900px){
  /* hero на мобиле — обычные паддинги секции (40px только на десктопе, по фрейму 718:2) */
  .svc-hero.section{min-height:0;padding-left:var(--pad);padding-right:var(--pad);padding-bottom:48px}
  /* на мобиле подзаголовок под заголовком в одну колонку — нужна отбивка и нормальный интерлиньяж,
     иначе строки склеиваются с H1 (плотный 1.1 макета рассчитан на правый блок десктопа) */
  .svc-hero__sub{margin-top:16px;line-height:1.5}
  .svc-layout{grid-template-columns:1fr}
  .svc-sidebar{display:none}
  .svc-content{gap:0}
  /* аккордеон во всю ширину экрана, как в компонентах 804:289/292/298 (фрейм 390px) */
  .svc-catalog{padding-left:0;padding-right:0}
  .svc-cat{padding:0}

  /* заголовки разделов: без ободка, только бордер снизу (правки дизайнера-3) */
  .svc-cathead{position:relative;align-items:flex-start;gap:12px;padding:18px 20px;margin-bottom:0;border:0;border-bottom:1px solid var(--line);border-radius:0;cursor:pointer}
  .svc-cathead__num{flex-direction:row;padding-top:4px}
  .svc-cathead__num .dot{display:none}
  .svc-cathead__title{font-size:18px;line-height:1.3}
  .svc-cathead__desc{display:none}
  .svc-cathead__count{display:block;margin-top:4px;font-size:11px;color:var(--text-3)}
  .svc-cathead__chevron{display:block;margin-left:auto;font-size:16px;color:var(--text-3);transition:transform .2s,color .2s}

  /* selected: filled с полоской слева (правки дизайнера-3, макет в фигме) */
  .svc-cat.open .svc-cathead{background:rgba(122,179,67,.06);border-bottom-color:var(--green)}
  .svc-cat.open .svc-cathead::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green)}
  .svc-cat.open .svc-cathead__num,
  .svc-cat.open .svc-cathead__count,
  .svc-cat.open .svc-cathead__chevron{color:var(--green)}
  .svc-cat.open .svc-cathead__chevron{transform:rotate(90deg)}

  .svc-cat__body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .45s ease .12s}
  .svc-cat__inner{overflow:hidden;padding-top:8px}
  .svc-cat.open .svc-cat__body{grid-template-rows:1fr}

  /* «📱 Service Item» 804:289: паддинг 15/20, слева отступ 50px под заголовком категории */
  .svc-card{margin-bottom:0;padding:15px 20px 15px 50px;border-radius:0;border-left:0;border-right:0;border-top:0}
  .svc-card__num,.svc-card__body{display:none}
  .svc-card:hover{background:transparent;border-color:var(--line)}
  .svc-card:hover .svc-card__name{color:var(--text-2)}
  .svc-card:hover .svc-card__arrow{color:var(--text-3)}
}

/* ============================================================
   L2 — страница категории
   ============================================================ */
.svc-back{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--text);transition:color .2s}
.svc-back .arr{display:inline-block;transform:scaleX(-1)}
.svc-back:hover{color:var(--green)}

/* hero L2 строго по макету Figma «услуги левел 2» (959:12251):
   левый отступ 64px, «Все услуги» на y=242; заголовок ровно 612px (2 строки по 70px),
   дескриптор 516px ВПЛОТНУЮ справа (x=676=64+612, gap 0) и выровнен по НИЖНЕЙ линии заголовка (align=MAX, 16px от низа).
   Было: justify-content:space-between разносило дескриптор к правому краю, ширины 600/380 не совпадали. */
/* Правки дизайнера (лист 2, 28.07): высота hero 600px, подзаголовок max-width 500 + гэп 54px от заголовка */
.svc-cathero{padding-left:calc(var(--pad) + 40px);min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:56px}
.svc-cathero .svc-back{margin-bottom:26px}
/* сетка вместо flex: у длинных названий («Техническая поддержка и сопровождение») строка заголовка
   вылезала за свою колонку и наезжала на описание. Колонки грида не перекрываются никогда,
   а на средних экранах описание уходит под заголовок (правка по ревью). */
.svc-cathero__row{display:grid;grid-template-columns:minmax(0,612px) minmax(300px,500px);gap:54px;align-items:end}
/* кегль подобран так, чтобы самое длинное название категории («сопровождение»)
   влезало в колонку целиком: рвать слово переносом нельзя */
.svc-cathero__title{margin:0;min-width:0;font-size:clamp(40px,3.9vw,56px)}
.svc-cathero__desc{max-width:500px;padding-bottom:16px;font-size:16px;line-height:1.1;min-width:0}
@media(max-width:1200px){.svc-cathero__row{grid-template-columns:minmax(0,1fr);gap:24px}
  .svc-cathero__desc{padding-bottom:0}}

.svc-dirlist{display:flex;flex-direction:column}
.svc-dirrow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:24px;padding:34px 24px;margin:0 -24px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s}
.svc-dirrow:last-child{border-bottom:none}
.svc-dirrow__num{font-weight:500;font-size:40px;line-height:1.1;color:var(--dark);transition:transform .2s;transform-origin:left center}
.svc-dirrow__text{display:flex;flex-direction:column;gap:8px;min-width:0}
.svc-dirrow__title{font-weight:500;font-size:24px;line-height:1.33;color:var(--text);transition:color .2s}
.svc-dirrow__sub{max-width:none;font-size:16px;line-height:1.4;color:var(--text-2)}
.svc-dirrow:hover{background:#fff}
.svc-dirrow:hover .svc-dirrow__num{transform:scale(1.2)}
.svc-dirrow:hover .svc-dirrow__title{color:var(--green)}

@media(max-width:900px){
  .svc-cathero{padding-left:var(--pad);min-height:0;padding-bottom:0}
  .svc-cathero__row{gap:0}
  .svc-cathero .svc-back{margin-bottom:20px}
  .svc-cathero__row{display:block}
  /* на мобиле кегль 40px макета не даёт слову «Безопасность» влезть в 327px — оно
     торчало за край экрана. Кегль привязан к ширине, 40px остаётся потолком (правка по ревью) */
  .svc-cathero__title{max-width:100%;flex-basis:auto;font-size:clamp(24px,8.2vw,40px);overflow-wrap:normal;word-break:normal}
  .svc-cathero__desc{max-width:100%;flex-basis:auto;margin-top:16px;padding-bottom:0}
  /* боковые паддинги, без растяжки за край (правки дизайнера-3) */
  .svc-dirrow{grid-template-columns:36px 1fr;gap:4px 16px;padding:20px 16px;margin:0}
  .svc-dirrow__sub{max-width:100%}
  .svc-dirrow__num{font-size:24px}
  .svc-dirrow__title{font-size:18px}
}

/* ============================================================
   L3 — страница услуги
   ============================================================ */
/* opus#10: декоративный фон-паттерн «пилюль» на hero L3; бейдж-категория
   над тайтлом скрыт на десктопе (в макете его нет), виден только на мобиле */
.svc-hero2{position:relative;overflow:hidden;background:var(--bg)}
/* Figma «1440w light» 1249:2733, секция hero 1250:941: высота 658px, линия снизу 1px */
.svc-hero2.section{display:flex;flex-direction:column;justify-content:flex-end;min-height:658px;padding-bottom:64px;border-bottom:1px solid var(--line)}

/* --- сетка секций L3 по макету: рейка подписи до 200px, контент 248…1376 (паддинг справа 64) --- */
body.single-service .section:not(.form-cta) .section__grid{grid-template-columns:176px minmax(0,1fr)}
body.single-service .section:not(.form-cta) .section__label{padding-left:40px;color:#6B6B65}
/* названия разделов — стики при скролле (эталон softailor_services_sticky_sidebar.html, ревью дизайнера) */
body.single-service .section .section__label{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
body.single-service .svc-hero2 .section__body{border-left:0;padding-left:0}
/* секции: паддинги 56/56, отбивка от hero 62px и линия-разделитель во всю ширину (макет 1249:2751/2786/2813) */
body.single-service .section:not(.svc-hero2):not(.form-cta){position:relative;padding-top:56px;padding-bottom:56px;padding-right:64px;border-bottom:1px solid var(--line)}
body.single-service .svc-hero2 + .section{margin-top:62px}
/* вертикальная линия рейки: ровно на высоту секции, на хиро её нет (правки дизайнера-3) */
body.single-service .section:not(.svc-hero2):not(.form-cta) .section__body{border-left:0;position:relative;padding-left:48px}
body.single-service .section:not(.svc-hero2):not(.form-cta) .section__body::before{content:'';position:absolute;left:0;top:-56px;bottom:-56px;width:1px;background:var(--line)}
@media(max-width:900px){body.single-service .section:not(.svc-hero2) .section__body::before{display:none}}
/* фон hero: плитка-паттерн (repeat, натуральный масштаб 1920×1080, резкая),
   матовое стекло — только под контентом: rgba(255,255,255,.1) + blur(2px) (макет 1250:942, 64…1376 / от 120px) */
/* Фон hero — потоковые линии на canvas (assets/js/svc-hero-flow.js). Прежний паттерн
   из капсул убран по правке клиента: читался как заглушка «сайт в разработке». */
.hero-fx{position:absolute !important;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.svc-hero2,.svc-cathero,.svc-hero{position:relative;overflow:hidden}
.svc-hero2 .section__grid,.svc-cathero>*:not(.hero-fx),.svc-hero .section__grid{position:relative;z-index:1}
.svc-hero2::after{content:'';position:absolute;left:64px;right:64px;top:120px;bottom:0;z-index:0;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}
.svc-hero2>*:not(.hero-fx){position:relative;z-index:1}

.svc-hero2__label{font-size:16px;line-height:1.1;color:var(--text-3);margin-bottom:16px}
.svc-hero2 .svc-back{margin-bottom:20px}
.svc-hero2__eyebrow{display:none;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin-bottom:20px}
/* Figma 1250:946: гэпы между крошками / H1 / подзаголовком / кнопкой — 20px, подзаголовок Manrope 16/17.6 */
.svc-hero2__title{max-width:20ch;margin-bottom:20px}
.svc-hero2__cta{margin-top:20px;align-self:flex-start}
.svc-hero2__sub{max-width:829px;font-size:16px;line-height:1.15;margin-bottom:0}

/* Figma 1249:2760: у списка есть верхняя линия, у последней строки нижней нет */
.svc-tasks{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc-task{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:33px 0 34px;border-bottom:1px solid var(--line)}
.svc-task:last-child{border-bottom:none;padding-bottom:0}
.svc-task__title{font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.svc-task__text{font-size:16px;line-height:1.6;color:var(--text-2)}

.svc-benefits__head{padding-bottom:44px;border-bottom:1px solid var(--line)}
/* align-items:start — в макете 1249:2797 линии ячеек идут по своей высоте, а не выравниваются по ряду */
/* Вертикальный разделитель колонок — СПЛОШНОЙ через всю сетку: он должен доходить до низа
   блока и соединяться с горизонтальной линией секции, а не обрываться на высоте ячейки
   (правка по ревью). Горизонтальные линии остаются у каждой ячейки по её высоте. */
.svc-benefits{display:grid;grid-template-columns:1fr 1fr;align-items:start;position:relative}
.svc-benefits::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}   /* до низа сетки: в макете линия НЕ доходит до разделителя секции */
.svc-benefit{padding:44px 48px 44px 0;border-bottom:1px solid var(--line)}
.svc-benefit:nth-child(2n){padding-left:48px;padding-right:0}
/* у последнего ряда нижней линии нет — её роль играет разделитель секции */
.svc-benefit:last-child,
.svc-benefit:nth-last-child(2):nth-child(odd){border-bottom:none}
.svc-benefit__title{font-weight:500;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--text);margin-bottom:11px}
.svc-benefit__text{font-size:16px;line-height:1.6;color:var(--text-2)}

.svc-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
/* Figma 1249:2823: 43px, паддинг 11/20, рамка 1px rgba(36,50,32,.14), без радиуса, Inter 16/19.4 */
.svc-stack .svc-chip{padding:11px 20px;border:1px solid var(--line);border-radius:0;font-size:16px;line-height:1.2;color:#6B6B65;transition:border-color .2s,color .2s}
.svc-stack .svc-chip:hover{border-color:var(--dark);color:var(--text)}

@media(max-width:900px){
  .svc-hero2__eyebrow{display:block}
  /* H1 хиро услуги на мобиле: Racama 110%, кегль макета 36px — потолок.
     Слово НИКОГДА не рвём: hyphens:auto браузер для русского не отрабатывает и вместо
     переноса по слогам резал слово посреди («ИНФОРМАЦИОННА|Я»). Вместо этого кегль
     привязан к ширине экрана так, чтобы самое длинное слово каталога
     («ВЫСОКОНАГРУЖЕННЫХ», 17 знаков) целиком влезало в строку на 375px (правка по ревью). */
  .svc-hero2__title{max-width:100%;font-size:clamp(23px,6.4vw,36px);line-height:1.1;overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
  .svc-hero2.section{padding-bottom:48px;min-height:0;border-bottom:0}
  /* мобильный фрейм 1249:2999: подзаголовок 16/25.6 (на десктопе плотный 1.15) */
  .svc-hero2__sub{line-height:1.6}
  /* мобильный фрейм 1249:2999: тот же резкий паттерн-плитка в натуральном масштабе,
     матовое стекло на всю площадь hero (боковых «резких» полей на 390px нет) */
  .svc-hero2::after{left:0;right:0;top:0}
  /* кнопка консультации во всю ширину, текст по центру */
  .svc-hero2__cta{width:100%;margin-top:24px}
  /* контент секций сдвинут вправо от лейблов, как в решениях (+16px) */
  body.single-service .section:not(.form-cta) .section__grid{grid-template-columns:1fr}
  body.single-service .section:not(.form-cta) .section__label{padding-left:0}
  body.single-service .section:not(.svc-hero2):not(.form-cta){padding-top:56px;padding-bottom:0;padding-right:var(--pad);border-bottom:0}
  body.single-service .svc-hero2 + .section{margin-top:0}
  body.single-service .section:not(.svc-hero2):not(.form-cta) .section__body,
  body.single-service .section__body{padding-left:16px}
  body.single-service .section .section__label{position:static}
  .svc-task{grid-template-columns:1fr;gap:10px;padding:24px 0}
  /* мобильный макет: заголовки строк Manrope 500 20/26 */
  .svc-task__title{font-size:20px}
  .svc-benefits{grid-template-columns:1fr}
  .svc-benefits::before{display:none}
  .svc-benefit,.svc-benefit:nth-child(2n){padding:28px 0;border-bottom:1px solid var(--line)}
  .svc-benefit:last-child{border-bottom:none;padding-bottom:0}
  .svc-benefit__title{font-size:20px}
  .svc-benefits__head{padding-bottom:24px;font-size:26px}
}

/* тап-подсветка заголовка категории-аккордеона на мобиле (QA r3 P3-5) */
@media(max-width:900px){
	.svc-cathead:active{background:rgba(131,179,53,.08)}
}

/* ============================================================
   L2 — блок «О направлении» и слайдер связанных решений
   Классы .home-sol-* продублированы локально (scoped .svc-catsol): home.css
   на странице категории не подключается, а разметка карточек — та же, что на главной.
   ============================================================ */

/* ---------- L2: контент во всю ширину (по макету «услуги левел 2») ----------
   Боковой колонки-лейбла и вертикальной линии на этой странице нет: список услуг,
   текст о направлении и ряд решений идут во всю ширину рабочей области. */
.svc-l2-wide{padding-left:calc(var(--pad) + 40px);padding-right:var(--pad)}

/* текст о направлении */
.svc-catabout__text{max-width:1100px;font-size:20px;line-height:1.45;color:var(--text-2)}
.svc-catabout__text p{margin:0 0 18px}
.svc-catabout__text p:last-child{margin-bottom:0}

/* ряд решений: подпись сверху, карточки каталога, стрелки по бокам */
.svc-catsol__label{font-size:16px;line-height:1.1;color:var(--text-2);margin-bottom:24px}
.svc-catsol__viewport{position:relative}
.svc-catsol__track{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.svc-catsol__track::-webkit-scrollbar{display:none}
.svc-catsol__card{flex:0 0 calc((100% - 16px) / 3);min-width:280px}
.svc-catsol__card .sol-card__media{height:240px}
.svc-catsol__arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border:0;background:none;color:var(--text-3);font-size:34px;line-height:1;cursor:pointer;transition:color .2s}
.svc-catsol__arr:hover{color:var(--dark)}
.svc-catsol__arr--prev{left:-44px}
.svc-catsol__arr--next{right:-44px}

@media(max-width:1200px){
  .svc-catsol__arr--prev{left:-8px}
  .svc-catsol__arr--next{right:-8px}
}
@media(max-width:900px){
  .svc-l2-wide{padding-left:var(--pad);padding-right:var(--pad)}
  .svc-catabout__text{font-size:16px}
  /* На мобиле карточки решений — такие же, как в каталоге решений: столбиком, во всю
     ширину, с низкой обложкой. Горизонтальный слайдер с обложкой 240px растягивал
     карточку и резал текст (правка по ревью). */
  /* у секции слайдера свои боковые поля — внутренняя обёртка не должна добавлять вторые,
     иначе карточка уже, чем в каталоге решений (330px против 282px) */
  .svc-catsol .svc-l2-wide{padding-left:0;padding-right:0}
  .svc-catsol__track{flex-direction:column;gap:16px;overflow-x:visible}
  .svc-catsol__card{flex:0 0 auto;width:100%;min-width:0}
  .svc-catsol__card .sol-card__media{height:56px}
  .svc-catsol__arr{display:none}
}