/* ETL_SVC_KIT_0906 — оформление сервисной страницы, вынесенное из
   refrizheratornye-perevozki.html, чтобы им могли пользоваться и другие
   разделы. Раньше эта раскладка (герой с водяным знаком, KPI-плитки,
   панели, аккордеон вопросов, нижний призыв) жила в теге <style> одной
   страницы. Каждая новая страница «как рефрижераторы» означала копию
   шестисот строк — и расхождение при первой же правке.

   Подключается по классу тела svc-kit. Картинку водяного знака страница
   задаёт сама переменной --wm-url, нижнюю — --cta-wm-url. */


body#top.svc-kit {
  --etl-red:#E52629;
  --ink:#101010;
  --muted:#5f6672;
  --line:rgba(15,17,21,.10);
  --shadow:0 1px 2px rgba(15,17,21,.04), 0 8px 24px rgba(15,17,21,.07), 0 24px 56px rgba(15,17,21,.06);
  --r28:var(--r-lg);
  /* Значения по умолчанию — на случай, если страница забудет задать свои.
     Пути от файла стилей, а не от страницы: та же переменная, заданная
     в самой странице, пишется как assets/img/… */
  --wm-url:url("../img/hero/truck.webp");
  --cta-wm-url:url("../img/hero/truck.webp");
}

/* Картинки страниц: водяной знак героя и фон нижнего призыва.
   Держим их здесь, а не в теге <style> каждой страницы: правило страницы
   идёт в разметке выше этого файла, и при одинаковой силе селектора
   побеждало бы значение по умолчанию — на всех трёх отраслевых страницах
   стоял один и тот же грузовик. */
/* Снимок героя берём широкий, около 2,2:1. Правило растягивает картинку
   по ширине блока, высоту считает от неё же: у кадра 3:2 расчётная высота
   выходит вдвое больше блока, и на экран попадает только средняя полоса —
   у складских снимков это пустая стена. У широкого кадра высота совпадает
   с блоком, и он виден целиком, как на рефрижераторной странице. */
body#top.retail-page {
  --wm-url:url("../img/services/service_ltl_groupage-1440w.webp");
  --cta-wm-url:url("../img/services/service_ltl_groupage-1440w.webp");
}

body#top.ecommerce-page {
  --wm-url:url("../img/services/service_prr_terminal-1440w.webp");
  --cta-wm-url:url("../img/services/service_prr_terminal-1440w.webp");
}

body#top.stroyka-page {
  --wm-url:url("../img/services/service_avto_ltl_ftl-1440w.webp");
  --cta-wm-url:url("../img/services/service_avto_ltl_ftl-1440w.webp");
}

body#top.svc-kit main.container {
  max-width:1240px;
  margin:0 auto;
  padding:10px 22px 26px;
}

body#top.svc-kit .svc-hero {
  position:relative;
  border-radius:var(--r28);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  background:linear-gradient(#fff, #fff);
  margin:26px 0;
}

body#top.svc-kit .svc-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(rgba(15,17,21,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(15,17,21,.035) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.55;
  pointer-events:none;
}

body#top.svc-kit .svc-hero::after {
  content:"";
  position:absolute;
  inset:-20px -30px -30px -30px;
  background-image:var(--wm-url);
  background-repeat:no-repeat;
  background-position:right 8% center;
  background-size:min(520px, 90vw);
  opacity:.12;
  filter:saturate(1.08) contrast(1.02);
  transform:translate3d(0, var(--etl-hero-parallax-y, 0px), 0) rotate(-1deg);
  pointer-events:none;
}

body#top.svc-kit .svc-hero-inner {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:32px 34px;
}

body#top.svc-kit .svc-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:var(--r-pill);
  background:rgba(15,17,21,.84);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(245, 246, 250, 0.96);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  width:fit-content;
}

body#top.svc-kit .svc-kicker i { color:var(--etl-red);
}

body#top.svc-kit .svc-title {
  margin:10px 0 6px;
  color:var(--ink);
  font-size:44px;
  line-height:1.02;
  letter-spacing:-.02em;
}

body#top.svc-kit .svc-lead {
  margin:0;
  color:rgba(29, 29, 27, 0.72);
  max-width:80ch;
  font-size:15.5px;
  line-height:1.6;
}

body#top.svc-kit .svc-pills {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

body#top.svc-kit .svc-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,10,12,.92);
  color:#fff;
  font-size:13px;
  box-shadow:0 10px 22px rgba(0,0,0,.20);
}

body#top.svc-kit .svc-pill i { color:var(--etl-red);
}

body#top.svc-kit .svc-kpis {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}

body#top.svc-kit .svc-kpi {
  padding:14px 16px;
  border-radius:var(--r-lg);
  border:1px solid rgba(15,17,21,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.94));
  box-shadow:0 10px 26px rgba(15,17,21,.04);
}

body#top.svc-kit .svc-kpi strong {
  display:block;
  color:var(--ink);
  font-size:22px;
  line-height:1.05;
}

body#top.svc-kit .svc-kpi span {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

body#top.svc-kit .svc-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

body#top.svc-kit .svc-actions .p-btn-primary { display:inline-flex;
}

body#top.svc-kit .svc-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  background:rgba(7,7,8,.96);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  text-decoration:none;
}

body#top.svc-kit .svc-ghost i { color:var(--etl-red);
}

body#top.svc-kit .svc-section { padding:22px 0;
}

body#top.svc-kit .svc-h2 {
  margin:0 0 10px;
  font-size:26px;
  letter-spacing:-.01em;
  color:var(--ink);
  text-transform:uppercase;
}

body#top.svc-kit .svc-sub {
  margin:0 0 18px;
  color:var(--muted);
  max-width:74ch;
  font-size:15px;
  line-height:1.6;
}

body#top.svc-kit .svc-icon {
  position:relative;
  width:44px;
  height:44px;
  border-radius:var(--r-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,251,.92));
  border:1px solid rgba(15,17,21,.10);
  box-shadow:0 10px 24px rgba(15,17,21,.06);
  color:rgba(29, 29, 27, 0.96);
  overflow:hidden;
  flex:0 0 auto;
}

body#top.svc-kit .svc-icon::before {
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:var(--r-pill);
  background:#E52629;
  box-shadow:0 0 12px rgba(229,38,41,.25);
}

body#top.svc-kit .svc-icon::after {
  content:"";
  position:absolute;
  inset:6px;
  border-radius:var(--r-md);
  border:1px solid rgba(15,17,21,.06);
  pointer-events:none;
}

body#top.svc-kit .svc-icon i {
  position:relative;
  z-index:1;
  font-size:20px;
  line-height:1;
}

body#top.svc-kit .multi-choice, body#top.svc-kit .svc-panel, body#top.svc-kit .fleet-shell, body#top.svc-kit .multi-tabs-shell, body#top.svc-kit .route-table-shell, body#top.svc-kit .svc-cta {
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,253,.96));
  box-shadow:0 14px 34px rgba(15,17,21,.05);
}

body#top.svc-kit .multi-choice, body#top.svc-kit .svc-panel, body#top.svc-kit .fleet-shell, body#top.svc-kit .multi-tabs-shell, body#top.svc-kit .route-table-shell {
  padding:18px;
}

body#top.svc-kit .multi-choices {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

body#top.svc-kit .multi-choice-head, body#top.svc-kit .svc-panel-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

body#top.svc-kit .multi-choice h3, body#top.svc-kit .svc-panel h3, body#top.svc-kit .fleet-shell h3, body#top.svc-kit .multi-tabs-shell h3 {
  margin:0;
  color:var(--ink);
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

body#top.svc-kit .multi-choice p, body#top.svc-kit .svc-panel p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.58;
}

body#top.svc-kit .multi-choice ul, body#top.svc-kit .svc-panel ul {
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.58;
}

body#top.svc-kit .svc-split {
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(320px, .88fr);
  gap:16px;
  align-items:start;
}

body#top.svc-kit .svc-panel-list { display:grid; gap:12px;
}

body#top.svc-kit .svc-panel-item {
  display:grid;
  gap:4px;
  padding:13px 14px;
  border-radius:var(--r-lg);
  border:1px solid rgba(15,17,21,.08);
  background:rgba(255,255,255,.84);
}

body#top.svc-kit .svc-panel-item strong {
  color:var(--ink);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body#top.svc-kit .svc-panel-item span {
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

body#top.svc-kit .fleet-shell { display:grid; gap:16px;
}

body#top.svc-kit .truck-tabs, body#top.svc-kit .multi-tabs {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

body#top.svc-kit .multi-tabs { grid-template-columns:repeat(3, minmax(0, 1fr));
}

body#top.svc-kit .truck-tab, body#top.svc-kit .multi-tab {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  padding:14px 16px;
  border-radius:var(--r-lg);
  border:1px solid rgba(15,17,21,.08);
  background:rgba(255,255,255,.8);
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body#top.svc-kit .truck-tab:hover, body#top.svc-kit .multi-tab:hover {
  transform:translateY(-2px);
  border-color:rgba(229,38,41,.22);
  box-shadow:0 14px 26px rgba(15,17,21,.08);
}

body#top.svc-kit .truck-tab.is-active, body#top.svc-kit .multi-tab.is-active {
  color:#fff;
  background:linear-gradient(135deg, #101115, #1d212a);
  border-color:rgba(232, 236, 245, 0.62);
  box-shadow:0 18px 34px rgba(15,17,21,.16);
}

body#top.svc-kit .truck-panels > div, body#top.svc-kit .multi-tab-panels > div { display:none;
}

body#top.svc-kit .truck-panels > .is-active, body#top.svc-kit .multi-tab-panels > .is-active { display:block;
}

body#top.svc-kit .truck-card {
  display:grid;
  gap:18px;
  padding:18px;
  border-radius:var(--r-lg);
  border:1px solid rgba(15,17,21,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,253,.92));
  box-shadow:0 16px 34px rgba(15,17,21,.06);
}

body#top.svc-kit .truck-visual {
  padding:0;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:transparent;
}

body#top.svc-kit .truck-infographic {
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r-lg);
}

body#top.svc-kit .truck-infographic--dark { display:none;
}

body#top.svc-kit .truck-card-note {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

body#top.svc-kit .multi-rate-strip {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

body#top.svc-kit .multi-rate-chip, body#top.svc-kit .multi-example {
  padding:13px 14px;
  border-radius:var(--r-lg);
  border:1px solid rgba(15,17,21,.08);
  background:rgba(255,255,255,.84);
  display:grid;
  gap:4px;
}

body#top.svc-kit .multi-rate-chip strong, body#top.svc-kit .multi-example strong {
  color:var(--ink);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body#top.svc-kit .multi-rate-chip span, body#top.svc-kit .multi-example span {
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

body#top.svc-kit .multi-example { margin-top:12px;
}

body#top.svc-kit .route-table {
  width:100%;
  border-collapse:collapse;
}

body#top.svc-kit .route-table th, body#top.svc-kit .route-table td {
  padding:16px 18px;
  text-align:left;
  border-top:1px solid rgba(15,17,21,.08);
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  vertical-align:top;
}

body#top.svc-kit .route-table tr:first-child :is(th, td) { border-top:0;
}

body#top.svc-kit .route-table th {
  color:rgba(29, 29, 27, 0.72);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body#top.svc-kit .route-table strong { color:var(--ink);
}

body#top.svc-kit .route-badge {
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(15,17,21,.10);
  background:rgba(255,255,255,.86);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
}

body#top.svc-kit .svc-faq-list { display:grid; gap:12px;
}

body#top.svc-kit .svc-faq-item {
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,253,.96));
  box-shadow:0 14px 34px rgba(15,17,21,.05);
  overflow:hidden;
}

body#top.svc-kit .svc-faq-item summary {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  list-style:none;
  cursor:pointer;
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  line-height:1.45;
}

body#top.svc-kit .svc-faq-item summary::-webkit-details-marker { display:none;
}

body#top.svc-kit .svc-faq-item p {
  margin:0;
  padding:0 18px 18px 74px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

body#top.svc-kit .svc-cta {
  position:relative;
  overflow:hidden;
  margin:18px 0 0;
  background:linear-gradient(#fff, #fff);
}

body#top.svc-kit .svc-cta::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--cta-wm-url);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:118% auto;
  opacity:.14;
  pointer-events:none;
}

body#top.svc-kit .svc-cta .inner {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
  padding:26px;
}

body#top.svc-kit .svc-cta h3 {
  margin:0 0 8px;
  color:var(--ink);
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

body#top.svc-kit .svc-cta p {
  margin:0;
  max-width:60ch;
  color:var(--muted);
  line-height:1.6;
}

@media (max-width:1100px) {

  body#top.svc-kit .multi-choices, body#top.svc-kit .svc-kpis, body#top.svc-kit .multi-rate-strip { grid-template-columns:1fr;
  }

  body#top.svc-kit .svc-split { grid-template-columns:1fr;
  }

    }

@media (max-width:980px) {

  body#top.svc-kit .svc-hero-inner { padding:22px;
  }

  body#top.svc-kit .svc-title { font-size:34px;
  }

  body#top.svc-kit .svc-hero::after {
    background-position:center center;
    background-size:116% auto;
  }

  body#top.svc-kit .svc-cta .inner {
    flex-direction:column;
    align-items:flex-start;
  }

    }

@media (max-width:768px) {

  body#top.svc-kit .truck-tabs, body#top.svc-kit .multi-tabs { grid-template-columns:1fr;
  }

  body#top.svc-kit .svc-cta h3 { font-size:24px;
  }

    }

html[data-theme="dark"] body#top.svc-kit {
  background:#0b0b0b !important;
}

html[data-theme="dark"] body#top.svc-kit .svc-hero {
  background:#101010 !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
}

html[data-theme="dark"] body#top.svc-kit .svc-hero::before {
  opacity:.18 !important;
}

html[data-theme="dark"] body#top.svc-kit .svc-hero::after {
  opacity:.28 !important;
  background-size:104% auto !important;
  background-position:center center !important;
  inset:0 !important;
  transform:none !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.svc-kpi, .multi-choice, .svc-panel, .fleet-shell, .truck-card, .multi-tabs-shell, .multi-rate-chip, .multi-example, .svc-faq-item, .svc-cta, .svc-panel-item, .route-table-shell) {
  background:#101010 !important;
  background-image:none !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.svc-title, .svc-h2, .svc-kpi strong, .multi-choice h3, .svc-panel h3, .svc-panel-item strong, .multi-rate-chip strong, .multi-example strong, .svc-faq-item summary, .svc-cta h3, .route-table strong) {
  color:rgba(245, 246, 250, 0.96) !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.svc-lead, .svc-kpi span, .multi-choice p, .multi-choice li, .svc-panel p, .svc-panel-item span, .multi-rate-chip span, .multi-example span, .svc-faq-item p, .svc-cta p, .route-table td, .route-table th) {
  color:rgba(238, 241, 248, 0.78) !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.svc-kicker, .svc-pill, .svc-ghost, .route-badge) {
  background:#121212 !important;
  color:rgba(245, 246, 250, 0.96) !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.svc-kicker i, .svc-pill i, .svc-ghost i) {
  color:#ff5d60 !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.truck-tab, .multi-tab) {
  background:#161616 !important;
  color:rgba(245, 246, 250, 0.96) !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] body#top.svc-kit :is(.truck-tab.is-active, .multi-tab.is-active) {
  background:linear-gradient(135deg, #181818, #252525) !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
  color:#fff !important;
}

html[data-theme="dark"] body#top.svc-kit .truck-infographic--light { display:none !important;
}

html[data-theme="dark"] body#top.svc-kit .truck-infographic--dark { display:block !important;
}

html[data-theme="dark"] body#top.svc-kit .svc-icon {
  background:linear-gradient(180deg, rgba(26,26,26,.96), rgba(20,20,20,.98)) !important;
  color:rgba(245, 246, 250, 0.96) !important;
  border-color:rgba(232, 236, 245, 0.62) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] body#top.svc-kit .svc-icon::after {
  border-color:rgba(232, 236, 245, 0.62) !important;
}