/* ============================================================
   Страница «Услуги и монтаж» (правка №62).
   Первый экран, крошки и кнопки берутся из contacts.css, карта
   дилерской сети — из geography.css, графитовая маска фотографий —
   общий компонент .graphite-photo из style.css. Здесь только то,
   чего в проекте ещё не было: «лесенка» услуг, панель сопровождения,
   карточка представителя и финальный CTA.
   Палитра, прямые углы, диагональные срезы кнопок и Roboto Condensed
   в заголовках — фирменные, из style.css.
   ============================================================ */

/* ---------- общая шапка секции ---------- */
.svc-head{margin-bottom:40px}
.svc-head__title{max-width:900px;font-family:var(--font-cond);font-size:clamp(28px,3.4vw,44px);
  font-weight:600;line-height:1.05;letter-spacing:-.6px;text-transform:uppercase}

/* ---------- пометка «Информация ожидается от компании» ---------- */
.svc-pending{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:7px 13px;
  border:1px dashed rgba(33,130,175,.55);background:rgba(33,130,175,.07);
  font-family:var(--font-cond);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);line-height:1.35}
.svc-pending::before{content:'';flex:none;width:7px;height:7px;background:var(--blue)}

/* ============ 2. ОСНОВНЫЕ УСЛУГИ ============ */
.svc-lines{position:relative;overflow:hidden;padding:86px 0 90px;background:var(--ink);color:#fff}
/* фирменная диагональная графика — та же, что в блоке «О компании» */
.svc-lines::after{content:'';position:absolute;top:-60px;right:-90px;width:340px;height:150%;
  background:repeating-linear-gradient(115deg,rgba(33,130,175,.10) 0 22px,transparent 22px 54px);
  pointer-events:none}
.svc-lines .wrap{position:relative;z-index:1}
.svc-lines .svc-head__kicker{color:#fff}
.svc-lines__list{border-top:1px solid rgba(255,255,255,.14)}

.svc-line{display:grid;grid-template-columns:150px minmax(0,1fr) 420px;gap:36px;align-items:center;
  padding:34px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.svc-line__num{font-family:var(--font-cond);font-size:78px;font-weight:700;line-height:.9;
  letter-spacing:-2px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32);
  transition:color .25s,-webkit-text-stroke-color .25s}
.svc-line:hover .svc-line__num{color:rgba(33,130,175,.22);-webkit-text-stroke-color:var(--blue)}
.svc-line__title{position:relative;padding-left:22px;font-family:var(--font-cond);font-size:26px;
  font-weight:600;line-height:1.12;letter-spacing:-.2px;text-transform:uppercase}
.svc-line__title::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--blue)}
.svc-line__text{margin-top:14px;padding-left:22px;max-width:620px;font-size:15.5px;line-height:1.72;
  color:rgba(255,255,255,.72)}

.svc-line__media{position:relative;height:250px;background:#2E3437;
  clip-path:polygon(0 0,100% 0,100% 100%,26px 100%)}
.svc-line__media img{display:block;width:100%;height:100%;object-fit:cover}
/* прозрачные PNG оборудования — в полном цвете на фирменном фоне, без обрезки */
.svc-line__media--png{background:linear-gradient(140deg,#31383B 0%,#272B2E 100%);
  border:1px solid rgba(255,255,255,.10)}
.svc-line__media--png img{padding:18px;object-fit:contain}
/* чётные строки: изображение слева, номер и текст справа —
   меняется и порядок элементов, и ширины колонок, иначе фото попадёт
   в узкую колонку номера */
.svc-line:nth-child(even){grid-template-columns:420px minmax(0,1fr) 150px}
.svc-line:nth-child(even) .svc-line__num{order:3;text-align:right}
.svc-line:nth-child(even) .svc-line__body{order:2}
.svc-line:nth-child(even) .svc-line__media{order:1;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%)}

/* ============ 3. СЕРВИС, ГАРАНТИЯ И ДОСТАВКА ============ */
.svc-support{padding:84px 0 88px;background:#F4F5F6;border-bottom:1px solid var(--line)}
.svc-support__panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--steel);color:#fff;box-shadow:0 18px 48px rgba(28,43,49,.13)}
.svc-support__panel::before{content:'';grid-column:1/-1;height:4px;background:var(--blue)}
.svc-support__part{position:relative;padding:38px 34px 40px;border-left:1px solid rgba(255,255,255,.14)}
.svc-support__part:first-of-type{border-left:none}
.svc-support__num{display:block;margin-bottom:16px;font-family:var(--font-cond);font-size:13px;
  font-weight:700;letter-spacing:.14em;color:#8FCBE6}
.svc-support__title{font-family:var(--font-cond);font-size:24px;font-weight:600;line-height:1.1;
  letter-spacing:-.2px;text-transform:uppercase}
.svc-support__text{margin-top:14px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.74)}
.svc-support__part .svc-pending{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);color:#fff}
.svc-support__part .svc-pending::before{background:var(--blue)}

/* ============ 4. ДИЛЕРСКАЯ СЕТЬ ============
   Секция целиком построена на классах блока «География поставок»:
   сетка, панель, карта, подписи стран и кнопки-легенда приходят из
   geography.css. Здесь только карточка представителя, которую рисует
   services.js, и порядок колонок на телефоне. Правила ограничены
   классом .svc-dealers — блок на главной не затрагивается. */
.svc-dealers{background:#fff}
/* заголовок блока длиннее, чем на главной, — сбавляем кегль, чтобы он не
   разваливался на четыре строки; блок «География поставок» не затрагивается */
.svc-dealers .kmb-dealers__title{max-width:640px;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.02em;line-height:1.02}
.svc-dealers .kmb-dealers__content{padding:0;background:#F3F5F6}

/* карточка тянется на всю колонку: у .kmb-dealers__content уже flex-column */
.svc-dealer{flex:1;display:flex;flex-direction:column;padding:38px 34px 34px}
.svc-dealer__head{padding-bottom:20px;border-bottom:1px solid #d8dee0}
.svc-dealer__place{margin-bottom:12px}
.svc-dealer__name{font-family:var(--font-cond);font-size:30px;font-weight:700;line-height:1.04;
  text-transform:uppercase;color:var(--ink)}
.svc-dealer__status{display:inline-block;margin-top:12px;padding:5px 11px;background:var(--blue);
  color:#fff;font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.svc-dealer__text{margin-top:18px;font-size:15px;line-height:1.7;color:#697277}

.svc-dealer__rows{margin:0}
.svc-dealer__row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:13px 0;
  border-bottom:1px solid #e1e6e8;font-size:14.5px;line-height:1.6}
.svc-dealer__row dt{font-family:var(--font-cond);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#8a9296;padding-top:3px}
.svc-dealer__row dd{margin:0;color:#3c464a;overflow-wrap:anywhere}
.svc-dealer__row a{color:var(--blue);font-weight:600}
.svc-dealer__row a:hover{color:var(--blue-dark);text-decoration:underline}
.svc-dealer__tags{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.svc-dealer__tags li{position:relative;padding-left:16px;font-size:14px;color:#3c464a}
.svc-dealer__tags li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--blue)}
.svc-dealer .svc-pending{align-self:flex-start}
.svc-dealer__row .svc-pending{margin-top:0}
.svc-dealer__btn{margin-top:26px;width:100%}
.svc-dealer--empty .svc-dealer__btn{margin-top:auto}

/* ============ 5. ФИНАЛЬНЫЙ CTA ============ */
.svc-cta{position:relative;overflow:hidden;padding:76px 0 80px;background:var(--ink);color:#fff}
.svc-cta::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 0 62%,rgba(33,130,175,.18) 62% 70%,transparent 70%)}
.svc-cta__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:56px;align-items:center}
.svc-cta__title{font-family:var(--font-cond);font-size:clamp(30px,3.6vw,46px);font-weight:600;
  line-height:1.04;letter-spacing:-.8px;text-transform:uppercase}
.svc-cta__text{margin-top:18px;max-width:640px;font-size:16.5px;line-height:1.68;color:#C9CBCF}
.svc-cta__note{margin-top:14px;font-size:13.5px;color:#8B8D92}
.svc-cta__actions{display:grid;gap:12px;justify-items:stretch}
.svc-cta__actions .hero-btn{justify-content:center}
.svc-cta__call{font-family:var(--font-cond);font-size:24px;font-weight:600;color:#fff;text-align:center}
.svc-cta__call:hover{color:#8ED4F4}

/* ============ АДАПТИВ ============ */
@media(max-width:1180px){
  .svc-line{grid-template-columns:110px minmax(0,1fr) 320px;gap:26px}
  .svc-line:nth-child(even){grid-template-columns:320px minmax(0,1fr) 110px}
  .svc-line__num{font-size:62px}
  .svc-line__media{height:210px}
  .svc-dealer{padding:32px 26px 28px}
}
@media(max-width:900px){
  .svc-lines{padding:64px 0 68px}
  .svc-line,
  .svc-line:nth-child(even){grid-template-columns:76px minmax(0,1fr);gap:18px 20px;padding:28px 0}
  .svc-line__num{font-size:52px}
  .svc-line__media,
  .svc-line:nth-child(even) .svc-line__media{grid-column:1/-1;order:3;height:230px;
    clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%)}
  .svc-line:nth-child(even) .svc-line__num{order:1;text-align:left}
  .svc-line:nth-child(even) .svc-line__body{order:2}
  .svc-support{padding:64px 0 68px}
  .svc-support__panel{grid-template-columns:1fr}
  .svc-support__part{border-left:none;border-top:1px solid rgba(255,255,255,.14);padding:30px 26px 32px}
  .svc-support__part:first-of-type{border-top:none}
  .svc-cta__in{grid-template-columns:1fr;gap:32px}
  .svc-cta__actions{justify-items:stretch}
}
@media(max-width:820px){
  /* карточка представителя открывается под картой (высоту карты
     задаёт geography.css — здесь только порядок колонок) */
  .svc-dealers .kmb-dealers__panel{grid-template-columns:1fr}
  .svc-dealers .kmb-dealers__content{order:2;min-height:0}
  .svc-dealers .kmb-dealers__map{order:1}
  .svc-dealer{flex:none}
}
@media(max-width:640px){
  .svc-head{margin-bottom:28px}
  .svc-line,
  .svc-line:nth-child(even){grid-template-columns:1fr;gap:14px}
  .svc-line__num{font-size:44px;color:rgba(33,130,175,.30);-webkit-text-stroke:1px rgba(255,255,255,.28)}
  .svc-line__title{font-size:22px;padding-left:16px}
  .svc-line__title::before{width:2px}
  .svc-line__text{font-size:15px;padding-left:16px}
  .svc-line__media,
  .svc-line:nth-child(even) .svc-line__media{height:190px}
  .svc-support__title{font-size:21px}
  .svc-dealer{padding:28px 20px 26px}
  .svc-dealer__name{font-size:25px}
  .svc-dealer__row{grid-template-columns:1fr;gap:4px;padding:11px 0}
  .svc-dealer__row dt{padding-top:0}
  .svc-cta{padding:58px 0 62px}
  .svc-cta__text{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .svc-line__num{transition:none}
}