/* Start:/local/components/cookie.notification/templates/.default/style.css?17909459152856*/
.cookie-notification-modal{
    width:100%;
    font-size: 13px;
    position:fixed;
    bottom:0;
    left:0;
    z-index:1060;
    padding:10px;
    line-height:1.5;
    background:#e2e2e2
}
.cookie-agree{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:100%
}
@media (max-width:767px){
    .cookie-agree{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
}
.cookie-agree__text{
    line-height:1.5;
    margin:0;
}
@media (min-width:768px){
    .cookie-agree__text{
        padding-right:10px
    }
}
@media (max-width:767px){
    .cookie-agree__text{
        margin-bottom:10px
    }
}
.cookie-agree__buttons{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
@media (max-width:767px){
    .cookie-agree__buttons{
        -ms-flex-item-align:center;
        align-self:center;
        -webkit-box-pack:stretch;
        -ms-flex-pack:stretch;
        justify-content:stretch;
        width:100%
    }
}
.cookie-agree__button{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    color:#fff;
    font-size:12px;
    height:35px;
    border-radius:4px;
    -webkit-transition:color .3s ease-out,background .3s ease-out;
    transition:color .3s ease-out,background .3s ease-out;
    cursor:pointer
}
@media (min-width:768px){
    .cookie-agree__button{
        width:140px
    }
}
@media (max-width:767px){
    .cookie-agree__button{
        -webkit-box-flex:1;
        -ms-flex:1 0 140px;
        flex:1 0 140px
    }
}
.cookie-agree__button:not(:last-child){
    margin-right:10px
}
.cookie-agree__button.btn-pink{
    background:#fab516;
    border:1px solid #fab516;
}
.cookie-agree__button.btn-green{
    background:#66c05d;
    border:1px solid #66c05d;
}
@media (min-width:992px){
    .cookie-agree__button.btn-pink:hover{
        color:#fab516;
        background:#fff
    }
    .cookie-agree__button.btn-green:hover{
        color:#71c768;
        background:#fff
    }
}
@media (max-width:991px){
    .cookie-agree__button.btn-pink:active{
        color:#fab516;
        background:#fff
    }
    .cookie-agree__button.btn-green:active{
        color:#71c768;
        background:#fff
    }
}
.cookie-agree__button.btn-dark{
    background:#333f46;
    border:1px solid #333f46
}
@media (min-width:992px){
    .cookie-agree__button.btn-dark:hover{
        color:#333f46;
        background:#fff
    }
}
@media (max-width:991px){
    .cookie-agree__button.btn-dark:active{
        color:#333f46;
        background:#fff
    }
}
/* End */


/* Start:/local/templates/service_it/template_styles.css?179397011457675*/
/* ==========================================================================
   База: сброс и типографика браузера — Bootstrap 4.3.1 reboot + type (MIT).
   Та же основа, на которой вёрстка делалась в старом шаблоне serviceit_blue,
   поэтому блоки выглядят так же. Сетка и компоненты Bootstrap не подключаются.
   ========================================================================== */
/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
*,::after,::before{box-sizing:border-box}
html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}

 body{
	 margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;text-align:left;background-color:#fff}

[tabindex="-1"]:focus{outline:0!important}
hr{box-sizing:content-box;height:0;overflow:visible}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}
p{margin-top:0;margin-bottom:1rem}
abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}
address{margin-bottom:1rem;font-style:normal;line-height:inherit}
dl,ol,ul{margin-top:0;margin-bottom:1rem}
ol ol,ol ul,ul ol,ul ul{margin-bottom:0}
dt{font-weight:700}
dd{margin-bottom:.5rem;margin-left:0}
blockquote{margin:0 0 1rem}
b,strong{font-weight:bolder}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
a{color:#007bff;text-decoration:none;background-color:transparent}
a:hover{color:#0056b3;text-decoration:underline}
a:not([href]):not([tabindex]){color:inherit;text-decoration:none}
a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}
a:not([href]):not([tabindex]):focus{outline:0}
code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}
pre{margin-top:0;margin-bottom:1rem;overflow:auto}
figure{margin:0 0 1rem}
img{vertical-align:middle;border-style:none}
svg{overflow:hidden;vertical-align:middle}
table{border-collapse:collapse}
caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}
th{text-align:inherit}
label{display:inline-block;margin-bottom:.5rem}
button{border-radius:0}
button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,input{overflow:visible}
button,select{text-transform:none}
select{word-wrap:normal}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}
textarea{overflow:auto;resize:vertical}
fieldset{min-width:0;padding:0;margin:0;border:0}
legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}
progress{vertical-align:baseline}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:none}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
output{display:inline-block}
summary{display:list-item;cursor:pointer}
template{display:none}
[hidden]{display:none!important}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}
.h1,h1{font-size:2.5rem}
.h2,h2{font-size:2rem}
.h3,h3{font-size:1.75rem}
.h4,h4{font-size:1.5rem}
.h5,h5{font-size:1.25rem}
.h6,h6{font-size:1rem}
.lead{font-size:1.25rem;font-weight:300}
.display-1{font-size:6rem;font-weight:300;line-height:1.2}
.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}
.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}
.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}
hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}
.small,small{font-size:80%;font-weight:400}
.mark,mark{padding:.2em;background-color:#fcf8e3}
.list-unstyled{padding-left:0;list-style:none}
.list-inline{padding-left:0;list-style:none}
.list-inline-item{display:inline-block}
.list-inline-item:not(:last-child){margin-right:.5rem}
.initialism{font-size:90%;text-transform:uppercase}
.blockquote{margin-bottom:1rem;font-size:1.25rem}
.blockquote-footer{display:block;font-size:80%;color:#6c757d}
.blockquote-footer::before{content:"\2014\00A0"}
.img-fluid{max-width:100%;height:auto}
.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}
.figure{display:inline-block}
.figure-img{margin-bottom:.5rem;line-height:1}
.figure-caption{font-size:90%;color:#6c757d}
code{font-size:87.5%;color:#e83e8c;word-break:break-word}
a>code{color:inherit}
kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}
kbd kbd{padding:0;font-size:100%;font-weight:700}
pre{display:block;font-size:87.5%;color:#212529}
pre code{font-size:inherit;color:inherit;word-break:normal}
.pre-scrollable{max-height:340px;overflow-y:scroll}


/* ==========================================================================
   service-it.ru — основа вёрстки в дизайн-системе группы IT-IP
   (1citrus DS, режим Direction = «ТП»). Источник правил:
   G:\1citrus_site\ds\foundation.md и it-ip-ui-rules.md.

   Правила, которые здесь соблюдаются:
   — скруглений нет нигде;
   — шрифт Circe, только Regular 400 (Bold 700 — лишь выделения в тексте);
   — заголовки секций и подписи кнопок — строчными;
   — ховер не затемняет заливку: у кнопки сдвигается пиксельная стрелка,
     у карточки появляется пиксельная тень 4×4;
   — графика из квадратов (стрелки, маркеры, уголки);
   — фокус — кольцо 3 px светлой бирюзы.

   Стили шаблона сайта service_it (/local/templates/service_it/). Битрикс подключает
   этот файл сам. Стили отдельных страниц — css/home.css, css/catalog.css, css/feed.css
   (подключают сами страницы и компоненты через Asset).
   Токены и правила вложены в .sit — так блоки не зависят от чужих стилей
   (панель администратора, плашка cookies, виджеты).
   ========================================================================== */

/* --- Шрифт: подмножество кириллица + латиница, ~15 КБ на начертание --- */
@font-face {
  font-family: "Circe";
  src: url("/local/templates/service_it/fonts/circe-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circe";
  src: url("/local/templates/service_it/fonts/circe-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Токены: имена как в ДС, значения режима «ТП» --- */
.sit {
  /* Direction = ТП */
  --accent: #006f81;          /* teal-600: заливка CTA, белый текст 5.85:1 */
  --on-accent: #ffffff;
  --accent-ink: #00606f;      /* teal-700: ссылки и текст на белом */
  --accent-tint: #e0f3f6;     /* teal-100: выбранное, подложки */
  --accent-line: #b3dbe1;     /* teal-200: hover-линия, кольцо фокуса */
  --brand: #008499;           /* teal-500: крупные бирюзовые плашки (как на tp.it-ip.ru) */

  /* Второй цвет — жёлтый группы (yellow-500 / 100 / ink). Только мелкие элементы:
     маркеры, подчёркивания, угловые пиксели, тень при наведении. Текст на жёлтом — тёмный */
  --yellow: #fdb515;
  --yellow-soft: #fff4d6;
  --yellow-ink: #8a5e00;

  /* Нейтралы с бирюзовым оттенком */
  --text: #1b3940;            /* gray-900 */
  --text-muted: #5e6e78;      /* gray-500 */
  --surface: #ffffff;
  --surface-subtle: #f7f8fb;  /* gray-50 */
  --border: #dee3ea;          /* gray-200 */
  --border-strong: #c5cdd7;   /* gray-300 */
  --error: #d1242f;

  /* Отступы space-* */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  --px: 4px;                  /* «пиксель» мелкой графики */
  --shadow-pixel: 4px 4px 0 var(--yellow);
  --font: "Circe", "Helvetica Neue", Arial, sans-serif;

  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.sit *,
.sit *::before,
.sit *::after { box-sizing: border-box; }

/* Гасим наследие шаблона: свои отступы у заголовков, абзацев, списков */
.sit h1, .sit h2, .sit h3, .sit h4,
.sit p, .sit ul, .sit ol, .sit figure, .sit dl, .sit dd { margin: 0; }
.sit ul, .sit ol { padding: 0; list-style: none; }
.sit h1, .sit h2, .sit h3, .sit h4 { font-family: var(--font); font-weight: 400; color: inherit; text-transform: none; }
.sit img { display: block; max-width: 100%; height: auto; }
.sit a { color: var(--accent-ink); text-decoration: none; }
.sit a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.sit b, .sit strong { font-weight: 700; }

.sit :focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }

.sit-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Контейнер: контентные ширины 1296 / 1116 / 936 --- */
.sit-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 992px)  { .sit-container { max-width: 960px;  padding-inline: 12px; } }
@media (min-width: 1200px) { .sit-container { max-width: 1140px; } }
@media (min-width: 1400px) { .sit-container { max-width: 1320px; } }

/* --- Типографика --- */
.sit-h1 {                     /* как в макете: 32, на телефоне 28 */
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (min-width: 992px) { .sit-h1 { font-size: 32px; } }

/* Ровные строки: заголовки балансируются, у абзацев нет «сирот» в последней строке */
.sit h1, .sit h2, .sit h3 { text-wrap: balance; }
.sit p, .sit li { text-wrap: pretty; }

.sit-h2 {                     /* заголовок секции — обычный регистр, как у подзаголовков */
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
@media (min-width: 992px) { .sit-h2 { font-size: 28px; } }

.sit-h3 {                     /* DS/Heading/xl */
  font-size: 20px;
  line-height: 1.25;
}
.sit-lead {                   /* DS/Heading/lg */
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sit-muted { color: var(--text-muted); }

/* Текст из визуального редактора: абзацы, списки, ссылки, подзаголовки */
.sit-prose > * + * { margin-top: var(--s4); }
.sit-prose h3 { font-size: 20px; line-height: 1.25; margin-top: var(--s8); }
.sit-prose h3 + * { margin-top: var(--s2); }
.sit-prose ul > li,
.sit-prose ol > li { position: relative; padding-left: 22px; }
.sit-prose ul > li + li,
.sit-prose ol > li + li { margin-top: var(--s2); }
.sit-prose ul > li::before {      /* квадратный маркер 6×6, не круг */
  content: "";
  position: absolute;
  left: 2px; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--yellow);
}
.sit-prose ol { counter-reset: sit-ol; }
.sit-prose ol > li::before {
  counter-increment: sit-ol;
  content: counter(sit-ol) ".";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent-ink);
}
.sit .sit-prose a {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Пиксельная стрелка вправо 28×20 (как на tp.it-ip.ru/form) --- */
.sit-arrow {
  position: relative;
  flex: none;
  width: 28px;
  height: 20px;
  color: currentColor;
}
.sit-arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  background: currentColor;
  box-shadow:
    4px 0 0 currentColor, 8px 0 0 currentColor, 12px 0 0 currentColor,
    16px 0 0 currentColor, 20px 0 0 currentColor,
    16px -4px 0 currentColor, 12px -8px 0 currentColor,
    16px 4px 0 currentColor, 12px 8px 0 currentColor;
  transition: transform 0.2s;
}
/* Малая стрелка для ссылок «перейти» — 20×12 из квадратов 2×2 */
.sit-arrow--sm { width: 16px; height: 12px; }
.sit-arrow--sm::before {
  top: 5px;
  width: 2px; height: 2px;
  box-shadow:
    2px 0 0 currentColor, 4px 0 0 currentColor, 6px 0 0 currentColor,
    8px 0 0 currentColor, 10px 0 0 currentColor, 12px 0 0 currentColor,
    10px -2px 0 currentColor, 8px -4px 0 currentColor,
    10px 2px 0 currentColor, 8px 4px 0 currentColor;
}

/* --- Кнопки: подпись строчными, ховер — стрелка сдвигается на пиксель --- */
.sit .sit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
}
.sit .sit-btn:hover,
.sit .sit-btn:focus-visible { color: var(--on-accent); text-decoration: none; }
.sit .sit-btn:hover .sit-arrow::before { transform: translateX(var(--px)); }

/* Вторичная — контур 1.5, ховер — бирюзовая подложка */
.sit .sit-btn--secondary {
  background: transparent;
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
.sit .sit-btn--secondary:hover,
.sit .sit-btn--secondary:focus-visible { background: transparent; color: var(--accent-ink); box-shadow: none; transform: none; }  /* ховер — только сдвиг стрелки, без заливки */

/* Инверсная — на бирюзовой плашке */
.sit .sit-btn--inverse {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--accent-ink);
}
.sit .sit-btn--inverse:hover,
.sit .sit-btn--inverse:focus-visible { color: var(--accent-ink); }

.sit .sit-btn--wide { width: 100%; }

/* Метка над заголовком карточки: «бесплатно», «чаще выбирают» */
.sit .sit-chip {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.sit .sit-chip--soft { background: var(--surface); color: var(--accent-ink); }

/* Ссылка «перейти →» */
.sit .sit-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 18px;
  line-height: 1.25;
  text-transform: lowercase;
}
.sit .sit-more:hover { text-decoration: none; }
.sit .sit-more:hover .sit-arrow::before { transform: translateX(2px); }

/* --- Карточка: рамка 1 px, ховер — пиксельная тень --- */
.sit .sit-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: box-shadow 0.15s, transform 0.15s;
}
.sit a.sit-card:hover,
.sit a.sit-card:focus-visible {
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-pixel);
  transform: translate(-2px, -2px);
}

/* Номер в квадратной плашке акцентного цвета (паттерн FormStep) */
.sit-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Секции страницы
   ========================================================================== */
.sit-section { padding-block: var(--s6); }
.sit-section--line { border-top: 1px solid var(--border); }
.sit-section--subtle { background: var(--surface-subtle); }
.sit-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  margin-bottom: var(--s6);
}
@media (min-width: 992px) { .sit-section { padding-block: var(--s8); } }

/* --- Хлебные крошки (шаблон красит любой nav в #58595B — гасим) --- */
.sit nav { background: none; }
.sit .sit-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  font-size: 14px;
  color: var(--text-muted);
}
.sit .sit-crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--border-strong); }
.sit .sit-crumbs a { color: var(--text-muted); }

/* --- Первый экран: текст 400 + 48 + баннер 848; высота блока — по баннеру --- */
.sit-hero { padding-block: var(--s4) var(--s6); }
.sit-hero nav + .sit-hero__inner,
.sit-hero nav + * { margin-top: var(--s3); }
.sit-hero__inner {
  display: grid;
  gap: var(--s6);
}
.sit-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}
.sit-hero__lead { font-size: 16px; line-height: 1.4; color: var(--text-muted); }
.sit-hero__content .sit-btn { margin-top: var(--s2); }
.sit-hero__media { min-width: 0; }
.sit-hero__image {
  width: 100%;
  aspect-ratio: 848 / 321;
  object-fit: cover;
  background: var(--surface-subtle);
}
@media (min-width: 992px) {
  .sit-hero { padding-block: var(--s6) var(--s8); }
  .sit-hero__inner { grid-template-columns: 356px minmax(0, 1fr); gap: var(--s12); align-items: start; }
}
@media (min-width: 1400px) {
  .sit-hero__inner { grid-template-columns: 400px minmax(0, 1fr); }
}

/* --- Промо-плашка: светлая, высота ~246 как в макете, енот по пояс справа --- */
.sit-promo__box {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s6);
  background: var(--surface-subtle);
  overflow: hidden;
}
.sit-promo__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s6);
  align-self: center;
}
.sit-promo__title {
  font-size: 24px;
  line-height: 1.15;
  color: var(--accent-ink);
}
.sit-promo__text { font-size: 16px; line-height: 1.4; color: var(--text-muted); max-width: 30em; }
.sit-promo__content .sit-btn { margin-top: var(--s3); }
.sit .sit-promo__raccoon {          /* .sit img задаёт display — нужен тот же вес */
  flex: none;
  width: 92px;
  height: auto;
  margin-bottom: -16px;            /* низ срезан краем плашки */
}
@media (min-width: 768px) {
  .sit-promo__box { padding: 0 var(--s8); min-height: 246px; }
  .sit-promo__content { padding-block: var(--s8); }
  .sit-promo__title { font-size: 28px; }
  .sit .sit-promo__raccoon { width: 140px; margin: var(--s4) var(--s12) -24px 0; }
}

/* --- Почему выбирают нас: 3 колонки карточек, номер текстом (как в макете) --- */
.sit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
}
@media (min-width: 576px) { .sit-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sit-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* «Почему выбирают нас»: карточки без иконок и номеров — заголовок, текст, бирюзовая линия сверху */
.sit-why__card { display: grid; gap: var(--s2); align-content: start; padding: 20px 22px 22px; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--brand); }
.sit-why__title { font-size: 20px; line-height: 1.2; }
.sit .sit-why__text { color: var(--text-muted); font-size: 15px; line-height: 1.45; }

/* --- Кейсы: как в макете — картинка во всю ширину, без рамки --- */
.sit .sit-case { padding: 0; gap: 0; border: 0; background: none; }
.sit-case__image {
  width: 100%;
  aspect-ratio: 1920 / 1400;
  object-fit: cover;
  background: var(--surface-subtle);
}
.sit-case__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s3);
  padding-top: var(--s4);
}
.sit-case__title { font-size: 20px; line-height: 1.15; flex: 1; }

/* --- «Нам доверяют»: текст и цифры слева, сетка логотипов в ячейках справа --- */
.sit-trusted__grid { display: grid; gap: var(--s8); }
.sit .sit-trusted__big { font-size: 20px; line-height: 1.4; max-width: 30em; }
.sit .sit-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s6);
  border-top: 2px solid var(--brand);
}
.sit-stats > div { padding: var(--s3) var(--s3) 0 0; }
.sit .sit-stats dt { font-size: 32px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.sit .sit-stats dd { margin-top: var(--s2); font-size: 14px; line-height: 1.35; color: var(--text-muted); }

/* Сетка ячеек: рамка у контейнера сверху-слева, у ячеек справа-снизу —
   пустые места в последнем ряду остаются белыми */
.sit .sit-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.sit .sit-logo-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: var(--s3);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sit .sit-logo-grid img {
  min-width: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.25) brightness(0.88);
  opacity: min(1, calc(var(--logo-o, 0.7) + 0.2));  /* серые в покое, контрастнее (05.10.2026); база — по тёмности, sit_logo_fit; цвет — при наведении */
  transition: filter 0.2s, opacity 0.2s;
}
.sit .sit-logo-grid li:hover img { filter: none; opacity: 1; }
.sit .sit-logo-grid--sm li { aspect-ratio: 4 / 3; padding: var(--s2); }

.sit .sit-trusted__sub { margin: var(--s8) 0 var(--s4); font-size: 18px; color: var(--text-muted); }
@media (min-width: 576px) {
  .sit .sit-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sit .sit-logo-grid--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  /* левая колонка — на высоту сетки логотипов: заголовок и текст сверху, цифры у нижнего края */
  .sit-trusted__grid { grid-template-columns: 356px minmax(0, 1fr); gap: var(--s12); align-items: stretch; }
  .sit-trusted__intro { display: flex; flex-direction: column; }
  .sit .sit-trusted__intro .sit-stats { margin-top: auto; }
  .sit .sit-trusted__intro .sit-trusted__big { margin-bottom: var(--s6); }
  .sit .sit-logo-grid--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .sit-trusted__grid { grid-template-columns: 400px minmax(0, 1fr); }
}

/* --- Контакты: карта + колонка 326, енот машет --- */
.sit-contacts__inner {
  display: flex;
  flex-direction: column-reverse;   /* на телефоне контакты выше карты */
  gap: var(--s6);
}
.sit-contacts__map { min-width: 0; }
.sit-contacts__map > div { width: 100%; height: 360px; background: var(--surface-subtle); }
/* Яндекс-карта в стиле сайта: подложка приглушена до серо-бирюзовой,
   метки и балун — свои (квадраты без скруглений, жёлтая пиксельная тень) */
.sit-contacts__map [class$="-ground-pane"] { filter: grayscale(1) sepia(.18) hue-rotate(140deg) saturate(1.1) brightness(1.04) contrast(.92); }
.sit-map-pin { position: absolute; left: -15px; top: -36px; width: 30px; height: 36px; transition: filter .15s, transform .15s; }
.sit-map-pin img { display: block; }
.sit-map-pin.is-lit { transform: translateY(-4px); filter: drop-shadow(0 4px 0 var(--accent-line)); }
.sit-map-hint { padding: 6px 10px; background: #fff; border: 1px solid var(--border); color: var(--text); font: 14px/1.3 "Circe", Arial, sans-serif; white-space: nowrap; }
.sit-map-balloon { position: absolute; width: 240px; padding: 16px 40px 16px 16px; background: #fff; border: 1.5px solid var(--accent); box-shadow: 4px 4px 0 var(--yellow); color: var(--text); font: 16px/1.35 "Circe", Arial, sans-serif; box-sizing: border-box; }
.sit-map-balloon__title { margin: 0 0 8px; }
.sit-map-balloon__link { color: var(--accent-ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.sit .sit-map-balloon__close { box-shadow: none; border-radius: 0; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--text-muted); font-size: 20px; line-height: 24px; cursor: pointer; }
.sit-map-balloon__close:hover { color: var(--accent); }
.sit-contacts__list { display: flex; flex-direction: column; gap: var(--s6); }
.sit-contacts__row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s4); align-items: start; }
.sit-contacts__icon { width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }
.sit-contacts__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sit .sit-contacts__icon img { display: block; width: 24px; height: 24px; }
.sit .sit-contacts__row a { color: var(--accent-ink); }
.sit-contacts__row--action { margin-top: calc(-1 * var(--s2)); }
.sit-contacts__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); margin-top: var(--s2); }
.sit-contacts__max { display: inline-flex; align-items: center; gap: var(--s2); }
@media (min-width: 992px) {
  .sit-contacts__inner { flex-direction: row; align-items: stretch; gap: var(--s8); }
  .sit-contacts__map { flex: 1 1 auto; }
  .sit-contacts__map > div { height: 480px; }
  .sit-contacts__list { flex: 0 0 326px; }
}

/* ==========================================================================
   Подвал — в стиле концепта группы: светлая подложка, четыре колонки
   ========================================================================== */
.sit-footer {
  margin-top: var(--s8);
  padding-block: var(--s8) var(--s6);
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sit-footer__grid { display: grid; gap: var(--s8); }
.sit .sit-footer__label { margin-bottom: var(--s3); font-size: 14px; color: var(--text-muted); }
.sit .sit-footer__label--gap { margin-top: var(--s6); }
.sit .sit-footer__col p + p { margin-top: var(--s1); }
.sit-footer__col li + li { margin-top: var(--s2); }
.sit .sit-footer a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sit .sit-footer a:hover { color: var(--accent-ink); text-decoration-color: var(--yellow); }
.sit .sit-footer a[aria-current="page"] { color: var(--accent-ink); text-decoration-color: var(--brand); }
.sit .sit-footer .sit-footer__phone { font-size: 18px; text-decoration: none; }
.sit .sit-footer .sit-footer__accred { display: inline-block; margin-top: var(--s4); text-decoration: none; }   /* знак Минцифры — в колонке контактов */
.sit .sit-footer .sit-footer__max { display: inline-flex; align-items: center; gap: 6px; }
.sit .sit-footer .sit-footer__max img { display: inline-block; }
.sit .sit-footer .sit-dirs a,
.sit .sit-footer .sit-footer__projects a { text-decoration: none; }

/* Направления группы — цветные квадраты, как в концепте */
.sit-dirs li + li { margin-top: var(--s3); }
.sit .sit-dirs a, .sit-dirs__here {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  align-items: start;
  color: var(--text);
}
.sit-dirs small { display: block; font-size: 13px; color: var(--text-muted); }
.sit-dirs__here b { margin-left: 6px; padding: 1px 6px; background: var(--yellow); color: var(--text); font-size: 11px; font-weight: 400; vertical-align: 2px; }
.sit-dirs__sq { display: block; width: 22px; height: 22px; margin-top: 2px; }
.sit-dirs__sq--tp { background: #008499; }
.sit-dirs__sq--pm { background: #ee2b53; }
.sit-dirs__sq--1c { background: #fdb515; }
.sit .sit-dirs .sit-gm { display: block; margin-top: 2px; }

/* Низ подвала: © и «Дизайн…», под ними документы мелко в строку и «другие проекты» */
.sit-footer__bottom {
  display: grid;
  gap: var(--s3) var(--s8);
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.sit .sit-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.sit .sit-footer .sit-footer__legal a { color: var(--text-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sit .sit-footer .sit-footer__legal a:hover { color: var(--accent-ink); }
@media (min-width: 992px) {
  .sit-footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
  .sit .sit-footer__dev, .sit .sit-footer__projects { justify-self: end; }
}
.sit .sit-footer__projects { display: inline-flex; align-items: center; gap: var(--s3); }
.sit .sit-footer__projects img { display: inline-block; height: 16px; width: auto; }
.sit .sit-footer__projects a { cursor: pointer; }   /* при наведении — только «палец», логотип не меняется */
@media (min-width: 576px) { .sit-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sit-footer__grid { grid-template-columns: 1.1fr 1fr 0.9fr 1.2fr; } }

/* ==========================================================================
   Шапка в два уровня: верхняя строка (уезжает) + основная (липкая)
   ========================================================================== */
.sit-topbar { background: var(--surface-subtle); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }
.sit-topbar__bar { display: flex; align-items: center; gap: var(--s6); min-height: 36px; }
.sit .sit-topbar__note { margin-right: auto; }
.sit .sit-topbar__nav { display: flex; gap: var(--s6); }
.sit.sit-topbar a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.sit.sit-topbar a:hover,
.sit.sit-topbar a[aria-current="page"] { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.sit-header {
  position: relative;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Липкая шапка (sit.js): после прокрутки за шапку она закрепляется сверху в компактном виде.
   На страницах с подменю услуги при прокрутке вниз уезжает, при прокрутке вверх возвращается. */
.sit-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 10px 24px -18px rgba(27, 57, 64, 0.5); transition: transform 0.25s ease; animation: sit-header-in 0.25s ease; }
.sit-header.is-fixed .sit-header__bar { min-height: 60px; }
.sit-header.is-fixed.is-hidden { transform: translateY(-100%); box-shadow: none; }
@keyframes sit-header-in { from { transform: translateY(-100%); } to { transform: none; } }
/* ontop.js шаблона вешает на любой <header> классы «scrolled fade», а Bootstrap 4 делает .fade прозрачным — гасим */
.sit-header.fade:not(.show) { opacity: 1; }
.sit-header-spacer { display: none; }
.sit-header.is-fixed + .sit-header-spacer { display: block; }
@media (prefers-reduced-motion: reduce) { .sit-header.is-fixed { animation: none; transition: none; } }
.sit-header__bar { display: flex; align-items: center; gap: var(--s8); min-height: 72px; }
.sit .sit-logo { display: inline-flex; align-items: center; gap: var(--s3); color: var(--text); text-decoration: none; flex: none; }
.sit-logo__plate { display: flex; padding: 8px 10px; background: var(--brand); }
.sit-logo__plate img { display: block; }
.sit-logo__dir { display: flex; flex-direction: column; font-size: 20px; line-height: 1; color: var(--accent-ink); }
.sit-logo__dir small { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.sit-nav { margin-left: var(--s4); }
.sit .sit-nav ul { display: flex; gap: var(--s8); }
.sit .sit-nav a {
  display: block;
  padding-block: 8px;
  color: var(--text);
  font-size: 18px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sit .sit-nav a:hover { color: var(--accent-ink); }
.sit .sit-nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
.sit .sit-header__phone { margin-left: auto; color: var(--text); font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }
/* MAX — в верхней строке, в основной шапке и в «бургере» */
.sit.sit-topbar .sit-topbar__max { display: inline-flex; align-items: center; gap: 6px; }
.sit .sit-topbar__max img, .sit .sit-menu__max img { display: inline-block; width: 16px; height: 16px; }
.sit .sit-header__max { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1.5px solid var(--border-strong); color: var(--text); font-size: 16px; white-space: nowrap; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.sit .sit-header__max img { display: block; width: 22px; height: 22px; }
.sit .sit-header__max:hover { color: var(--text); text-decoration: none; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent-ink); }
.sit .sit-header__max + .sit-header__cta { margin-left: calc(-1 * var(--s4)); }
@media (max-width: 1399.98px) {        /* на 1200–1399 места мало — только иконка */
  .sit .sit-header__max { width: 44px; padding: 0; justify-content: center; }
  .sit .sit-header__max span { display: none; }
}
.sit .sit-menu__panel .sit-menu__max { display: inline-flex; align-items: center; gap: 8px; padding-top: 0; color: var(--accent-ink); }
.sit-header__cta .sit-btn { min-height: 44px; padding: 8px 18px; font-size: 16px; white-space: nowrap; gap: var(--s4); }

/* «Бургер»: <details>, без JS */
.sit-menu { display: none; margin-left: auto; position: relative; }
.sit-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); }
.sit-menu summary::-webkit-details-marker { display: none; }
.sit-menu__icon, .sit-menu__icon::before, .sit-menu__icon::after { display: block; width: 20px; height: 3px; background: var(--text); }
.sit-menu__icon { position: relative; }
.sit-menu__icon::before, .sit-menu__icon::after { content: ""; position: absolute; left: 0; }
.sit-menu__icon::before { top: -7px; }
.sit-menu__icon::after { top: 7px; }
.sit-menu__icon::before, .sit-menu__icon::after { transition: transform 0.15s, top 0.15s; }
.sit-menu[open] summary { border-color: var(--accent); }
/* открыто — «бургер» превращается в крестик: понятно, куда нажать, чтобы закрыть */
.sit-menu[open] .sit-menu__icon { background: transparent; }
.sit-menu[open] .sit-menu__icon::before { top: 0; transform: rotate(45deg); }
.sit-menu[open] .sit-menu__icon::after { top: 0; transform: rotate(-45deg); }
.sit-menu__panel {
  position: absolute;
  right: 0; top: 54px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: min(340px, calc(100vw - 32px));
  padding: var(--s4) var(--s6) var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pixel);
}
.sit .sit-menu__panel a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; }
.sit .sit-menu__main { padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.sit .sit-menu__main a { font-size: 20px; }
.sit .sit-menu__panel a[aria-current="page"] { color: var(--accent-ink); }
.sit .sit-menu__panel .sit-menu__phone { padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 20px; }
.sit .sit-menu__panel .sit-menu__mail { padding-top: 0; color: var(--text-muted); }
.sit .sit-menu__panel .sit-btn { width: 100%; }
.sit-menu__panel { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
.sit .sit-menu__group { padding-top: var(--s3); border-top: 1px solid var(--border); }
.sit .sit-menu__label { margin-bottom: var(--s2); font-size: 13px; color: var(--text-muted); }
.sit .sit-menu__panel .sit-dirs a { display: grid; padding: 4px 0; font-size: 16px; }
.sit .sit-menu__panel .sit-dirs li + li { margin-top: var(--s1, 4px); }

@media (max-width: 1199.98px) {
  .sit-topbar, .sit-nav, .sit .sit-header__phone, .sit-header__cta, .sit .sit-header__max { display: none; }
  .sit-menu { display: block; }
  .sit-header__bar { min-height: 64px; }
}
@media (max-width: 575.98px) {
  .sit-logo__dir { font-size: 17px; }
}

/* ==========================================================================
   Системные окна шаблона — в фирменном стиле (вне .sit, поэтому значения прямо)
   ========================================================================== */
/* Плашка cookies: карточка в углу вместо серой полосы во всю ширину */
body #cookie-modal.cookie-notification-modal {
  left: 16px;
  right: auto;
  bottom: 16px;
  width: min(520px, calc(100% - 32px));
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #dee3ea;
  box-shadow: 4px 4px 0 #fdb515;
  font-family: "Circe", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #5e6e78;
}
body #cookie-modal .container { max-width: none; padding: 0; }
body #cookie-modal .cookie-agree { flex-direction: column; gap: 14px; }
body #cookie-modal .cookie-agree__text { padding: 0; margin: 0; }
body #cookie-modal .cookie-agree__buttons { display: flex; align-items: center; gap: 18px; width: auto; align-self: flex-start; }
body #cookie-modal .cookie-agree__button {
  width: auto;
  height: 40px;
  padding: 0 18px;
  border-radius: 0;
  font-size: 15px;
  text-transform: lowercase;
  margin: 0;
}
body #cookie-modal .btn-pink { background: #006f81; color: #fff; }
body #cookie-modal .btn-pink:hover { background: #006f81; box-shadow: 3px 3px 0 #fdb515; }
body #cookie-modal .btn-dark {
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  color: #00606f;
  text-decoration: underline;
  text-decoration-color: #fdb515;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Кнопка «наверх»: квадрат с пиксельной стрелкой, над плавающей кнопкой связи; только на широких экранах */
.progress-bar-si { position: fixed; right: 31px; bottom: 92px; z-index: 20; }
@media (max-width: 1400px) { .progress-bar-si { display: none; } }
body .progress-bar-si .btn-top {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: #fff;
  border: 1.5px solid #c5cdd7;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}
body .progress-bar-si .btn-top::before {      /* пиксельная «галочка вверх» из квадратов 4×4 */
  content: "";
  position: absolute;
  left: 18px; top: 15px;
  width: 4px; height: 4px;
  background: #006f81;
  box-shadow:
    -4px 4px 0 #006f81, 4px 4px 0 #006f81,
    -8px 8px 0 #006f81, 8px 8px 0 #006f81,
    -12px 12px 0 #006f81, 12px 12px 0 #006f81;
}
body .progress-bar-si .btn-top:hover { border-color: #006f81; box-shadow: 3px 3px 0 #fdb515; }

/* Плавное появление блоков при прокрутке. Скрываем только если JS работает
   (класс sit-js ставит скрипт), иначе контент всегда виден */
.sit-js .sit-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.sit-js .sit-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sit-js .sit-reveal { opacity: 1; transform: none; }
  .sit *, .sit *::before, .sit *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Плавающая кнопка связи (все страницы) — квадратная, бирюзовая, пиксельная иконка-реплика.
   Панель: заявка, звонок, MAX, удалённое подключение. Кнопка «наверх» шаблона поднимается выше.
   ========================================================================== */
.sit .sit-dock { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900; }
.sit .sit-dock__btn { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 16px; background: var(--accent); color: #fff; cursor: pointer; list-style: none; box-shadow: 4px 4px 0 var(--yellow); font-size: 17px; text-transform: lowercase; }
.sit .sit-dock__btn::-webkit-details-marker { display: none; }
.sit .sit-dock__btn:hover .sit-dock__icon { transform: translateY(-2px); }
.sit .sit-dock[open] .sit-dock__btn { background: var(--accent-ink); }
/* пиксельная реплика 16×14 из квадратов 2×2 */
.sit .sit-dock__icon { position: relative; flex: none; width: 20px; height: 18px; transition: transform 0.15s;
  background:
    linear-gradient(#fff, #fff) 0 0 / 20px 14px no-repeat,
    linear-gradient(#fff, #fff) 2px 14px / 4px 4px no-repeat; }
.sit .sit-dock__icon::before { content: ""; position: absolute; left: 4px; top: 6px; width: 2px; height: 2px; background: var(--accent);
  box-shadow: 4px 0 0 var(--accent), 8px 0 0 var(--yellow); }
.sit .sit-dock__panel { position: absolute; right: 0; bottom: 68px; display: grid; gap: 8px; width: min(320px, calc(100vw - 32px)); padding: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 6px 6px 0 var(--yellow); }
.sit .sit-dock__title { margin: 0; font-size: 19px; line-height: 1.2; }
.sit .sit-dock__sub { margin: -4px 0 4px; font-size: 13px; color: var(--text-muted); }
.sit .sit-dock__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; background: var(--surface-subtle); border: 1px solid var(--surface-subtle); color: var(--text); font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; }
.sit .sit-dock__item:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.sit .sit-dock__item:hover .sit-arrow::before { transform: translateX(2px); }
.sit .sit-dock__item b { font-weight: 400; white-space: nowrap; }
.sit .sit-dock__item--main { background: var(--accent); border-color: var(--accent); color: #fff; }
.sit .sit-dock__item--main:hover { color: #fff; }
.sit .sit-dock__max { display: inline-flex; align-items: center; gap: 8px; }
.sit .sit-dock__max img { display: block; width: 20px; height: 20px; }
@media (max-width: 575.98px) {
  .sit .sit-dock__label { display: none; }
  .sit .sit-dock__btn { width: 56px; padding: 0; justify-content: center; }
}
.sit-lf-open .sit-dock { display: none; }

/* Страница «Удалённое подключение» */
.sit .sit-remote-offer { display: grid; gap: 10px; align-content: start; }
.sit .sit-remote-offer__cap { margin: 0; font-size: 14px; color: var(--text-muted); }
.sit .sit-remote-offer__name { margin: 0; font-size: 36px; line-height: 1; color: var(--text); }
.sit .sit-remote-offer__note { margin: 0 0 6px; font-size: 15px; color: var(--text-muted); }
.sit .sit-remote-safe__list { display: grid; gap: 12px; }
.sit .sit-remote-safe__list li { position: relative; padding-left: 22px; }
.sit .sit-remote-safe__list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; background: var(--yellow); }


/* ==== Окно и встроенная форма заявки (js/request-form.js) ==== */
/* Форма заявки (окно по кнопкам и встроенная) — по согласованному макету 03.10.2026.
   Токены и .sit-btn — из sit.css; окно добавляется в body с классом .sit. */
.sit-lf-open, .sit-lf-open body { overflow: hidden; }
/* flex + margin:auto: высокое окно не обрезается сверху и прокручивается целиком */
.sit.sit-lf-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: rgba(15, 35, 40, 0.5); overflow-y: auto; overscroll-behavior: contain; }
.sit.sit-lf-scrim[hidden] { display: none; }
.sit .sit-lf-modal { position: relative; flex: none; margin: auto; width: min(560px, 100%); background: var(--surface); box-shadow: 8px 8px 0 var(--yellow); }
.sit .sit-lf-close { position: absolute; right: 8px; top: 8px; z-index: 1; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.sit .sit-lf-close::before, .sit .sit-lf-close::after { content: ""; position: absolute; left: 11px; top: 19px; width: 18px; height: 2px; background: var(--text); transform: rotate(45deg); }
.sit .sit-lf-close::after { transform: rotate(-45deg); }
.sit .sit-lf-close:hover::before, .sit .sit-lf-close:hover::after { background: var(--accent); }
/* своя рамка фокуса вместо чёрной браузерной: видна только при навигации с клавиатуры (Tab) */
.sit .sit-lf-close:focus { outline: none; }
.sit .sit-lf-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.sit .sit-lf { display: grid; gap: 18px; padding: 28px; margin: 0; }
.sit .sit-lf[hidden], .sit .sit-lf__done[hidden] { display: none; }
.sit .sit-lf__head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding-right: 32px; }
.sit .sit-lf__avatar { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--accent-line); }
.sit .sit-lf__title { font-size: 24px; line-height: 1.15; margin: 0; }
.sit .sit-lf__sub { margin-top: 4px; font-size: 15px; color: var(--text-muted); }
.sit .sit-lf__client { padding: 10px 14px; background: var(--yellow-soft); font-size: 14px; }
.sit .sit-lf__client a, .sit .sit-lf__agree a, .sit .sit-lf__alt a, .sit .sit-lf__msg a { color: var(--text); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sit .sit-lf__types { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sit .sit-lf__types legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; color: var(--text-muted); }
.sit .sit-lf__chip { position: relative; margin: 0; font-weight: 400; }
.sit .sit-lf__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sit .sit-lf__chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 15px; line-height: 1.3; }
.sit .sit-lf__chip input:hover + span { border-color: var(--accent); }
.sit .sit-lf__chip input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.sit .sit-lf__chip input:focus-visible + span { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.sit .sit-lf__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .sit .sit-lf__row { grid-template-columns: 1fr 1fr; } }
.sit .sit-lf__field { display: grid; gap: 6px; margin: 0; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.sit .sit-lf__field b { font-weight: 400; color: var(--error); }
.sit .sit-lf__field input, .sit .sit-lf__field textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--border-strong); border-radius: 0; background: var(--surface); font-family: var(--font); font-size: 17px; color: var(--text); box-shadow: none; }
.sit .sit-lf__field textarea { min-height: 96px; resize: vertical; }
/* встроенная форма в контенте страницы — поле комментария выше, чем в окне (185 px, как было в шаблоне serviceit_blue) */
main .sit .sit-lf__field textarea { min-height: 185px; }
.sit .sit-lf__field input:focus, .sit .sit-lf__field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.sit .sit-lf__field.is-error input, .sit .sit-lf__field.is-error textarea { border-color: var(--error); }
.sit .sit-lf__err { font-size: 13px; color: var(--error); }
.sit .sit-lf__err[hidden] { display: none; }
.sit .sit-lf__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sit .sit-lf__agree { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0; font-size: 13px; font-weight: 400; color: var(--text-muted); cursor: pointer; }
.sit .sit-lf__agree input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 0; background: var(--surface); cursor: pointer; }
.sit .sit-lf__agree input:checked { border-color: var(--accent); background: var(--accent) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 2h1v1H0zM1 3h1v1H1zM2 2h1v1H2zM3 1h1v1H3zM4 0h1v1H4z'/%3E%3C/svg%3E"); }
.sit .sit-lf__agree.is-error input { border-color: var(--error); }
.sit .sit-lf__msg { padding: 12px 14px; background: #fde8ea; color: #8a1c24; font-size: 15px; }
.sit .sit-lf__msg[hidden] { display: none; }
.sit .sit-lf__foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.sit .sit-lf__foot .sit-btn[disabled] { opacity: 0.6; cursor: progress; }
.sit .sit-lf__alt { font-size: 14px; color: var(--text-muted); }
.sit .sit-lf__done { display: grid; gap: 14px; justify-items: start; padding: 32px 28px; }
.sit .sit-lf__done h3 { margin: 0; font-size: 26px; line-height: 1.15; }
.sit .sit-lf__done p { color: var(--text-muted); }
/* Шаблон serviceit_blue прячет все чекбоксы и радио (position:absolute; left:-9999px) — у формы свои, возвращаем на место */
.sit .sit-lf__agree input { position: static; left: auto; top: auto; display: block; visibility: visible; opacity: 1; }
.sit .sit-lf__chip input { left: 0; top: 0; }

/* Кнопки уведомления помещаются в его рамку даже на экране 320 px. */
@media (max-width: 479px) {
  body #cookie-modal .cookie-agree__buttons { flex-wrap: wrap; max-width: 100%; gap: 12px; }
  body #cookie-modal .cookie-agree__button { min-width: 0; }
}

/* Поля общей формы должны сжиматься вместе с окном на узком телефоне. */
.sit .sit-lf__row { grid-template-columns: minmax(0, 1fr); }
.sit .sit-lf__field { min-width: 0; }
.sit .sit-lf__field input, .sit .sit-lf__field textarea { min-width: 0; max-width: 100%; }
@media (min-width: 560px) {
  .sit .sit-lf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Поля общей формы должны сжиматься вместе с окном на узком телефоне. */
.sit .sit-lf { grid-template-columns: minmax(0, 1fr); }
.sit .sit-lf__head { grid-template-columns: 56px minmax(0, 1fr); }
.sit .sit-lf__title { overflow-wrap: anywhere; }
.sit .sit-lf__row { grid-template-columns: minmax(0, 1fr); }
.sit .sit-lf__field { min-width: 0; }
.sit .sit-lf__field input, .sit .sit-lf__field textarea { min-width: 0; max-width: 100%; }
@media (min-width: 560px) {
  .sit .sit-lf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Поля общей формы должны сжиматься вместе с окном на узком телефоне. */
.sit .sit-lf { grid-template-columns: minmax(0, 1fr); }
.sit .sit-lf__head { grid-template-columns: 56px minmax(0, 1fr); }
.sit .sit-lf__title { overflow-wrap: anywhere; }
.sit .sit-lf__row { grid-template-columns: minmax(0, 1fr); }
.sit .sit-lf__field { min-width: 0; }
.sit .sit-lf__field input, .sit .sit-lf__field textarea { min-width: 0; max-width: 100%; }
@media (min-width: 560px) {
  .sit .sit-lf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .sit .sit-lf { padding: 24px 20px; }
  .sit .sit-lf__head { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding-right: 24px; }
  .sit .sit-lf__avatar { width: 40px; height: 40px; }
  .sit .sit-lf__title { font-size: 20px; line-height: 1.25; }
}

/* End */
/* /local/components/cookie.notification/templates/.default/style.css?17909459152856 */
/* /local/templates/service_it/template_styles.css?179397011457675 */