@charset "UTF-8";

/* ==========================================================================
   Глобальные переменные проекта.
   Все повторяемые цвета, шрифты, радиусы и отступы задаются только здесь.
   ========================================================================== */

:root {
  --color-text: #102246;
  --color-text-rgb: 16, 34, 70;
  --color-text-muted: #667085;
  --color-accent: #008dd2;
  --color-accent-rgb: 0, 141, 210;
  --color-accent-hover: #0077b3;
  --color-bg: #ffffff;
  --color-surface: #f5f5f6;
  --color-border: #e3e3e3;
  --color-border-rgb: 227, 227, 227;
  --color-footer: #1b2f48;

  --font-family-base: "Manrope", Arial, Helvetica, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  --h1-size: 1.875rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --heading-line-height: 1.25;

  --radius: 4px;
  --radius-lg: 1rem;
  --shadow: 0 2px 12px rgba(0, 0, 0, .08);
  --shadow-header: 0 4px 20px rgba(16, 34, 70, .1);

  --section-space: 3rem;
  --container-space: 2rem;

  /* Cassiopeia (template.min.css) и Bootstrap читают цвета ссылок и фонов из
     собственных переменных — переопределяем их под палитру проекта, чтобы не
     тащить цветовые схемы из админки шаблона. */
  --link-color: var(--color-accent);
  --link-hover-color: var(--color-accent);
  --cassiopeia-color-primary: var(--color-accent);
  --cassiopeia-color-link: var(--color-accent);
  --cassiopeia-color-hover: var(--color-accent);
  --template-bg-light: var(--color-surface);
  --template-text-dark: var(--color-text);
  --template-text-light: var(--color-bg);
  --template-link-color: var(--color-accent);
  --template-special-color: var(--color-footer);

  --bs-link-color: var(--color-accent);
  --bs-link-color-rgb: var(--color-accent-rgb);
  --bs-link-hover-color: var(--color-accent);
  --bs-link-hover-color-rgb: var(--color-accent-rgb);
  --bs-border-radius: var(--radius);
  --bs-border-color: var(--color-border);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-body-font-family: var(--font-family-base);
  --bs-secondary-color: var(--color-text-muted);
}

/* ==========================================================================
   База
   ========================================================================== */

html {
  /* место под полосу прокрутки резервируем всегда, чтобы её скрытие
     при открытии офканваса не переливало вёрстку */
  scrollbar-gutter: stable;
  /* full-bleed блоки внутри .container (margin: calc(50% - 50vw)) на
     доли пикселя шире вьюпорта — без clip это даёт горизонтальный скролл. */
  overflow-x: clip;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* Bootstrap при открытии офканваса дописывает body inline-отступ под ширину
   полосы прокрутки. Жёлоб у нас уже зарезервирован, поэтому отступ только
   сдвигает страницу — гасим его (перебить inline-стиль иначе нечем). */
body {
  padding-right: 0 !important;
}

a,
a:not([class]) {
  color: var(--color-accent);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
  opacity: .8;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: var(--heading-line-height);
  color: var(--color-text);
}

h1,
.h1 {
  font-size: var(--h1-size);
}

h2,
.h2 {
  font-size: var(--h2-size);
}

h3,
.h3 {
  font-size: var(--h3-size);
}

.container,
.container-fluid {
  padding-left: var(--container-space);
  padding-right: var(--container-space);
}

/* Горизонтальные поля контейнера: на мобильных 2rem (переменная в :root),
   с 768px — штатные .75rem Bootstrap.
   Все строки шаблона полноширинные, а отступы задаёт .container, поэтому
   собственный column-gap сетки Cassiopeia только сбивал бы выравнивание. */
.site-grid {
  column-gap: 0;
}

/* ==========================================================================
   Повторяемые элементы
   ========================================================================== */

/* Вертикальные отступы секции — единые для всех блоков сайта. */
.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Секция на сером фоне — везде одинаковый приём: лёгкий градиент сверху
   и тонкие кольца по углам, как у хироу (там тот же .section-gray плюс
   свои .hero::before/::after — здесь дефолтные позиции колец для всех
   остальных секций с этим классом). */
.section-gray {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, var(--color-bg) 0, transparent 28%);
}

.section-gray::before,
.section-gray::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgba(255, 255, 255, .32),
    0 0 0 6rem rgba(var(--color-border-rgb), .26),
    0 0 0 9rem rgba(255, 255, 255, .18);
  pointer-events: none;
}

.section-gray::before {
  top: -13rem;
  left: -11rem;
  width: 30rem;
}

.section-gray::after {
  right: -16rem;
  bottom: -20rem;
  width: 32rem;
}

/* У .row.g-4 в container-main минус-отступ сверху (вертикальный gutter
   Bootstrap) — при небольшом зазоре он наезжает на крошки и перекрывает
   ссылки. Поднимаем крошки в стеке, а не трогаем сетку. */
.bc {
  position: relative;
  z-index: 1;
}

/* Страницы категорий/материалов идут сразу за крошками — им не нужен
   такой же большой верхний отступ, как у секций главной, и заголовок с
   подзаголовком здесь стоят плотнее, чем в секциях-модулях. */
.com-content-category.section,
.com-content-category-blog.section,
.com-content-article.section {
  padding-top: .5rem;
  padding-bottom: 3.5rem;
}

.com-content-category .section-heading,
.com-content-category-blog .section-heading,
.com-content-article .section-heading {
  margin-bottom: .5rem;
}

/* Правило выше — только для самого верхнего заголовка страницы (сразу
   под крошками). У вложенных слайдеров-модулей (карусель «Другие услуги»
   и т.п.) свой обычный отступ, как в модуле новостей. */
.com-content-article .novosti-slider .section-heading {
  margin-bottom: 2rem;
}

/* Заголовок секции и подзаголовок под ним. */
.section-title {
  margin-bottom: 1rem;
  font-size: var(--h2-size);
  font-weight: 800;
  text-transform: uppercase;
}

/* Вторая половина заголовка — акцентом: «Направления <span>оценки</span>». */
.section-title span {
  color: var(--color-accent);
}

.section-subtitle {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

/* Мелкая надпись над заголовком. */
.eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .5rem;
}

/* ==========================================================================
   Иконки проекта (SVG-маски, красятся через color)
   ========================================================================== */

.ico-phone,
.ico-mail,
.ico-pin,
.ico-clock,
.ico-check,
.ico-chevron,
.ico-search,
.ico-arrow-down {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
}

.ico-phone {
  -webkit-mask: url("../images/ico/phone.svg") center / contain no-repeat;
  mask: url("../images/ico/phone.svg") center / contain no-repeat;
}

.ico-mail {
  -webkit-mask: url("../images/ico/mail.svg") center / contain no-repeat;
  mask: url("../images/ico/mail.svg") center / contain no-repeat;
}

.ico-pin {
  -webkit-mask: url("../images/ico/pin.svg") center / contain no-repeat;
  mask: url("../images/ico/pin.svg") center / contain no-repeat;
}

.ico-clock {
  -webkit-mask: url("../images/ico/clock.svg") center / contain no-repeat;
  mask: url("../images/ico/clock.svg") center / contain no-repeat;
}

.ico-check {
  -webkit-mask: url("../images/ico/check.svg") center / contain no-repeat;
  mask: url("../images/ico/check.svg") center / contain no-repeat;
}

.ico-chevron {
  -webkit-mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
}

.ico-search {
  -webkit-mask: url("../images/ico/search.svg") center / contain no-repeat;
  mask: url("../images/ico/search.svg") center / contain no-repeat;
}

.ico-arrow-down {
  -webkit-mask: url("../images/ico/arrow-down.svg") center / contain no-repeat;
  mask: url("../images/ico/arrow-down.svg") center / contain no-repeat;
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-header);
}

/* На десктопе шапка и строка меню — единый блок: тень одна, снизу у меню
   (переопределение в брейкпоинте 992). */

.site-header__topbar {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .875rem;
}

.site-header__main {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand-logo img {
  width: auto;
  height: 34px;
}

/* Тонкий вертикальный разделитель между смысловыми группами шапки. */
.site-header__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 2.75rem;
  margin-inline: 1.75rem;
  background-color: var(--color-border);
}

.site-header__tagline {
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Почта и адрес — вторым планом, ровной колонкой. */
.site-header__contacts-info {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.site-header__contact {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-text-muted);
  font-size: .8125rem;
  line-height: 1.4;
}

.site-header__contact [class^="ico-"] {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
}

a.site-header__contact:hover,
a.site-header__contact:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

a.site-header__contact:hover [class^="ico-"],
a.site-header__contact:focus-visible [class^="ico-"] {
  color: var(--color-accent);
}

/* Телефоны — главный элемент блока. */
.site-header__phones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .125rem;
}

.site-header__phone {
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-header__phone:hover,
.site-header__phone:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

/* Кнопка «Написать нам» справа от телефонов. */
.site-header__cta {
  flex: 0 0 auto;
  margin-left: 1.75rem;
}

.site-header__cta .ico-mail {
  width: 15px;
  height: 15px;
}

/* Круглая кнопка «позвонить» на мобильных. */
.site-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-accent);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-header__action:hover,
.site-header__action:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
  opacity: 1;
}

/* Бургер офканваса. */
.site-header__burger {
  flex-shrink: 0;
  gap: .5rem;
  /* Иконка сама по себе 26×16px — паддинг доводит область нажатия
     до рекомендуемых ~44×44px, не увеличивая сам рисунок бургера. */
  padding: 14px 9px;
  margin: -14px -9px;
  border: 0;
  background: none;
  color: var(--color-text);
  transition: color .3s ease;
}

.site-header__burger:hover,
.site-header__burger:focus-visible {
  color: var(--color-accent);
}

.site-header__burger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-header__burger-icon span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: currentColor;
  transition: width .3s ease, transform .3s ease;
}

.site-header__burger-icon span:nth-child(1),
.site-header__burger-icon span:nth-child(3) {
  transform-origin: left center;
}

.site-header__burger:hover .site-header__burger-icon span:nth-child(1),
.site-header__burger:focus-visible .site-header__burger-icon span:nth-child(1) {
  transform: rotate(-6deg);
}

.site-header__burger:hover .site-header__burger-icon span:nth-child(2),
.site-header__burger:focus-visible .site-header__burger-icon span:nth-child(2) {
  width: 18px;
}

.site-header__burger:hover .site-header__burger-icon span:nth-child(3),
.site-header__burger:focus-visible .site-header__burger-icon span:nth-child(3) {
  transform: rotate(6deg);
}

/* Нижняя строка шапки: меню и поиск. Прилипает к верху при прокрутке. */
.site-header__bar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--color-bg);
  transition: box-shadow .3s ease;
}

/* Панель поиска — тоже без рамки, только тень. */

/* Знак Ξ у левого края — появляется только у прилипшей строки. */
.site-header__mark {
  position: absolute;
  top: 50%;
  left: var(--container-space);
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-.5rem, -50%);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.site-header__mark img {
  width: auto;
  height: 32px;
}

.site-header__bar>.container {
  height: 70px;
  transition: padding .3s ease;
}

.site-header__bar.is-stuck>.container {
  padding-left: 4rem;
  padding-right: 4rem;
}

.site-header__bar.is-stuck .site-header__mark {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* ==========================================================================
   Меню (десктоп)
   ========================================================================== */

/* Joomla-шный mod-menu.css ставит спискам flex-direction: column — в верхней
   строке шапки меню должно идти в строку. */
.site-nav .mod-menu {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}

/* Cassiopeia подчёркивает активный пункт (.mod-list li.active > a) — в нашем
   меню подчёркивания не нужны, акцент задаётся цветом и линией под пунктом. */
.site-nav .mod-list li>a,
.site-offcanvas .mod-list li>a {
  text-decoration: none;
}

/* mod_menu отдаёт голый <ul class="mod-menu nav"> без .nav-link,
   поэтому стилизуем ссылки пунктов напрямую. */
.site-nav .nav-item {
  padding: 0;
}

.site-nav,
.site-nav .mod-menu,
.site-nav .nav-item {
  height: 100%;
}

.site-nav .nav-item>a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 .4375rem;
  color: var(--color-text);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.site-nav .nav-item>a:hover,
.site-nav .nav-item>a:focus-visible,
.site-nav .current>a,
.site-nav .active>a {
  color: var(--color-accent);
  opacity: 1;
}

/* Акцентное подчёркивание активного пункта и пункта под курсором —
   по нижнему краю строки меню. По бокам оставлен зазор, иначе линия активного
   пункта и линия соседнего под курсором сливаются в одну полосу. */
.site-nav .nav-item>a::after {
  content: "";
  position: absolute;
  right: .375rem;
  bottom: 0;
  left: .375rem;
  height: 3px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.site-nav .nav-item>a:hover::after,
.site-nav .nav-item>a:focus-visible::after,
.site-nav .current>a::after,
.site-nav .active>a::after {
  transform: scaleX(1);
}

/* Выпадающее подменю: широкая панель во всю ширину контейнера, в несколько
   колонок — иначе два десятка услуг вытягиваются в одну длинную кишку. */
.site-nav .nav-item {
  position: static;
}

/* Стрелка у пунктов с подменю. */
.site-nav .parent>a {
  padding-right: 1.75rem;
}

.site-nav .parent>a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: .625rem;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background-color: currentColor;
  -webkit-mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  transition: transform .3s ease;
}

.site-nav .parent:hover>a::before,
.site-nav .parent:focus-within>a::before {
  transform: rotate(180deg);
}

/* Ядро Joomla скрывает подменю через [aria-hidden] — на десктопе показом
   управляет наведение, поэтому display возвращаем себе. */
.site-nav .mod-menu__sub,
.site-nav .mod-menu__sub[aria-hidden="true"] {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 2rem 2.25rem;
  margin: 0;
  margin-top: 0px;
  columns: 3;
  column-gap: 3rem;
  column-rule: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-header);
  border-top: 4px solid #008bcf;
  margin-top: -3px;
}

.site-nav .parent:hover>.mod-menu__sub,
.site-nav .parent:focus-within>.mod-menu__sub {
  display: block;
  animation: site-nav-dropdown .4s ease-in;
}

.site-nav .mod-menu__sub li {
  break-inside: avoid;
  list-style: none;
}

.site-nav .mod-menu__sub li>a {
  position: relative;
  display: block;
  padding: .5625rem 0 .5625rem 1.625rem;
  color: var(--color-text);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* Чёрточка-маркер, как в карточках услуг. */
.site-nav .mod-menu__sub li>a::before {
  content: "";
  position: absolute;
  top: 1.15em;
  left: 0;
  width: 14px;
  height: 1px;
  background-color: var(--color-border);
  transition: width .2s ease, background-color .2s ease;
}

.site-nav .mod-menu__sub li>a::after {
  content: none;
}

.site-nav .mod-menu__sub li>a:hover,
.site-nav .mod-menu__sub li>a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.site-nav .mod-menu__sub li>a:hover::before,
.site-nav .mod-menu__sub li>a:focus-visible::before {
  width: 20px;
  background-color: var(--color-accent);
}

@keyframes site-nav-dropdown {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Кнопка раскрытия подменю нужна только в офканвасе. */
.site-nav .mod-menu__toggle-sub {
  display: none;
}

/* ==========================================================================
   Поиск: иконка в шапке и выезжающая сверху панель
   ========================================================================== */

.site-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  transition: background-color .2s ease, color .2s ease;
}

.site-search__toggle .ico-search {
  width: 18px;
  height: 18px;
}

.site-search__toggle:hover,
.site-search__toggle:focus-visible {
  background-color: var(--color-surface);
  color: var(--color-accent);
}

.site-search {
  /* сборка Cassiopeia использует переменную без префикса bs- */
  --offcanvas-height: 100px;
  --bs-offcanvas-height: 100px;
  border: 0;
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
  /* вендорный CSS сам переход не задаёт — как и у бокового офканваса */
  transition: transform .3s ease-in-out;
  will-change: transform;
}

.site-search .offcanvas-body {
  display: flex;
  align-items: center;
  padding: 0;
  /* подсказкам автодополнения нужно выходить за пределы панели */
  overflow: visible;
}

/* Строка поиска: иконка, поле и кнопка в одной рамке. */
.site-search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .375rem .375rem .375rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.site-search__form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), .12);
}

.site-search__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.site-search__input::placeholder {
  color: var(--color-text-muted);
}

.site-search__input:focus {
  outline: 0;
}

.site-search__submit {
  flex: 0 0 auto;
}

/* Крестик закрытия — как в модалке. */
.site-search__close {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-search__close::before,
.site-search__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  background-color: currentColor;
}

.site-search__close::before {
  transform: rotate(45deg);
}

.site-search__close::after {
  transform: rotate(-45deg);
}

.site-search__close:hover,
.site-search__close:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Smart Search оборачивает поле в .awesomplete — обёртка должна тянуться. */
.site-search .awesomplete {
  flex: 1 1 auto;
  min-width: 0;
}

.site-search .awesomplete>input {
  width: 100%;
}

/* Выпадающие подсказки Smart Search. */
.site-search .awesomplete>ul {
  z-index: 1046;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   Офканвас (мобильное меню и контакты)
   ========================================================================== */

.site-offcanvas {
  width: min(340px, 88vw);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
  /* вендорный CSS перехода не задаёт — иначе панель появляется рывком */
  transition: transform .3s ease-in-out;
  will-change: transform;
}

.site-offcanvas .offcanvas-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.site-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  background-color: var(--color-surface);
}

.site-offcanvas .mod-menu {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-offcanvas .mod-menu>li {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
}

.site-offcanvas .mod-menu>li>a,
.site-offcanvas .mod-menu>li>span {
  display: block;
  padding: .75rem 2.5rem .75rem 1rem;
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.site-offcanvas .mod-menu>li.active>a,
.site-offcanvas .mod-menu>li>a:hover,
.site-offcanvas .mod-menu>li>a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.site-offcanvas .mod-menu__toggle-sub {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--color-text);
}

.site-offcanvas .mod-menu__toggle-sub .icon-chevron-down {
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  transition: transform .3s ease;
}

.site-offcanvas .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}

.site-offcanvas .mod-menu__sub {
  margin: 0;
  padding: 0 .5rem .5rem 1rem;
  background-color: var(--color-bg);
}

.site-offcanvas .mod-menu__sub[aria-hidden="true"] {
  display: none;
}

.site-offcanvas .mod-menu__sub a {
  display: block;
  padding: .5rem .5rem;
  color: var(--color-text);
  font-size: .8125rem;
}

.site-offcanvas .mod-menu__sub a:hover,
.site-offcanvas .mod-menu__sub a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.site-offcanvas__contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.125rem;
  border-radius: var(--radius);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
}

.site-offcanvas__contacts-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-offcanvas__contacts-icon-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-surface);
}

.site-offcanvas__contacts-icon {
  color: var(--color-accent);
}

.site-offcanvas__contacts-text {
  color: var(--color-text);
  font-size: .875rem;
  line-height: 1.4;
}

a.site-offcanvas__contacts-text:hover,
a.site-offcanvas__contacts-text:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

a.site-offcanvas__contacts-text[href^="tel:"] {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.knopka,
.knopka2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.knopka {
  border: 1px solid var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.knopka:hover,
.knopka:focus-visible {
  transform: scale(1.04);
  color: var(--color-bg);
  opacity: 1;
}

.knopka:hover .ar-arrow::before,
.knopka:focus-visible .ar-arrow::before,
.knopka2:hover .ar-arrow::before,
.knopka2:focus-visible .ar-arrow::before {
  transform: rotate(45deg);
}

.knopka2 {
  border: 1px solid var(--color-accent);
  background-color: var(--color-bg);
  color: var(--color-accent);
}

.knopka2:hover,
.knopka2:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-bg);
  opacity: 1;
}

/* Кнопка на акцентном фоне (блок «Обсудим задачу»). */
.knopka3 {
  border-color: var(--color-bg);
  background-color: transparent;
  color: var(--color-bg);
}

.knopka3:hover,
.knopka3:focus-visible {
  background-color: var(--color-bg);
  color: var(--color-accent);
}

/* Уголковая стрелка в кнопке. */
.ar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.ar-arrow::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("../images/ico/arr.svg") center / contain no-repeat;
  mask: url("../images/ico/arr.svg") center / contain no-repeat;
  transition: transform .3s ease;
}

/* Волна от курсора — элемент .ripple добавляет user.js. */
.ripple-hover {
  position: relative;
  overflow: clip;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transform: scale(0);
  animation: ripple-effect .8s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-effect {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* ==========================================================================
   Заголовок секции с «призрачным» словом на фоне
   ========================================================================== */

.section-heading {
  position: relative;
  margin-bottom: 2rem;
}

.section-heading .eyebrow,
.section-heading .section-title,
.section-heading h2 {
  position: relative;
  z-index: 1;
}

.section-heading__ghost {
  position: absolute;
  top: -.45em;
  left: -.05em;
  z-index: 0;
  color: var(--color-surface);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* ==========================================================================
   Главная: первый экран
   ========================================================================== */

.hero {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Точечная сетка под текстовой колонкой — светлая фактура вместо пустого серого. */
.hero__dots {
  position: absolute;
  right: 55%;
  bottom: -2rem;
  z-index: -1;
  width: 16rem;
  height: 12rem;
  background-image: radial-gradient(circle, var(--color-bg) 2px, transparent 2px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Короткая акцентная черта над надзаголовком. */
.hero__bar {
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1.25rem;
  background-color: var(--color-accent);
}

.hero__title {
  margin-bottom: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hero__title span {
  color: var(--color-accent);
}

/* Вводный абзац вместо списка-чеклиста — для хироу без пунктов (например,
   на странице «О компании»). */
.hero__lead {
  margin-bottom: 2rem;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Крупная акцентная строка-выгода под заголовком (например, страница
   «Оспаривание» — «Экономия на налоге до 50%»). */
.hero__stat {
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: 1.375rem;
  font-weight: 800;
}

/* Три пункта с иконками под текстом хироу. */
.hero__features {
  margin-bottom: 0;
}

.hero__feature {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hero__feature img {
  width: 40px;
  height: 40px;
}

.hero__feature span {
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1.35;
}

/* Собственное фото вместо буквы «кси» в правой колонке хироу. */
.hero__photo {
  width: 100%;
  height: auto;
}

.hero__list {
  margin-bottom: 2rem;
}

.hero__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
  color: var(--color-text-muted);
}

.hero__list .ico-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: .15em;
  color: var(--color-accent);
}

/* Знак Ξ: кольцо, три точки на орбите и пульсирующие круги — как на старом сайте. */
.hero__mark {
  --mark-size: 340px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mark-size);
  aspect-ratio: 1;
  /* знак прижат к правому краю колонки */
  margin-inline: auto 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.hero__mark-dot {
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--color-border);
  z-index: 1;
  animation: hero-orbit 16s linear infinite;
}

.hero__mark-dot:nth-of-type(2) {
  animation-duration: 6s;
}

.hero__mark-dot:nth-of-type(3) {
  animation-duration: 9s;
}

.hero__mark-pulse {
  position: absolute;
  inset: calc(var(--mark-size) / 9);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .3);
  animation: hero-beat 7s ease-in-out infinite;
}

.hero__mark-pulse--inner {
  inset: calc(var(--mark-size) / 3);
  background-color: var(--color-border);
  animation-name: hero-beat-reverse;
}

.hero__mark-btn {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.hero__mark-btn img {
  width: auto;
  height: calc(var(--mark-size) / 1.5);
  transition: transform .4s ease;
}

.hero__mark-btn:hover img,
.hero__mark-btn:focus-visible img {
  transform: scale(1.05);
}

@keyframes hero-orbit {
  from {
    transform: rotate(0) translate(calc(var(--mark-size) / -2)) rotate(0);
  }

  to {
    transform: rotate(360deg) translate(calc(var(--mark-size) / -2)) rotate(-360deg);
  }
}

@keyframes hero-beat {

  0%,
  40%,
  100% {
    transform: scale(.95);
  }

  20%,
  60% {
    transform: scale(1);
  }

  80% {
    transform: scale(.9);
  }
}

@keyframes hero-beat-reverse {

  0%,
  40%,
  100% {
    transform: scale(1);
  }

  20%,
  60% {
    transform: scale(.95);
  }

  80% {
    transform: scale(1.05);
  }
}

/* ==========================================================================
   Модалка «Кси»
   ========================================================================== */

.ksi-modal .modal-dialog {
  max-width: 34rem;
}

.ksi-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 0;
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
}

.ksi-modal .modal-body {
  position: relative;
  padding: 2rem;
}

.ksi-modal .modal-title {
  margin-bottom: 1rem;
  font-size: var(--h3-size);
  font-weight: 800;
  text-transform: uppercase;
}

.ksi-modal p:not(.eyebrow) {
  color: var(--color-text-muted);
}

/* Знак Ξ в круге — тот же приём, что у контактов в офканвасе. */
.ksi-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-surface);
}

.ksi-modal__badge img {
  width: auto;
  height: 28px;
}

/* Кнопка закрытия — крестик из двух линий, без иконочного шрифта. */
.ksi-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: none;
  color: var(--color-text-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ksi-modal__close::before,
.ksi-modal__close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.5px;
  background-color: currentColor;
}

.ksi-modal__close::before {
  transform: rotate(45deg);
}

.ksi-modal__close::after {
  transform: rotate(-45deg);
}

.ksi-modal__close:hover,
.ksi-modal__close:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* ==========================================================================
   Заголовок секции с линией и точкой (используется в обоих модулях
   с карточками — «Направления оценки» и «Реализованные проекты»),
   при необходимости — с навигацией слайдера справа.
   ========================================================================== */

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin-bottom: 2.5rem;
}

.section-head .eyebrow {
  flex: 0 0 100%;
}

.section-head .section-title {
  margin-bottom: 0;
}

.section-head__rule {
  position: relative;
  flex: 1 1 8rem;
  height: 1px;
  background-color: var(--color-border);
}

.section-head__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: translateY(-50%);
}

/* Круглые кнопки «предыдущий/следующий слайд» справа от линии. */
.section-head__nav {
  display: flex;
  flex: 0 0 auto;
  gap: .75rem;
}

.section-head__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.section-head__nav-btn:hover,
.section-head__nav-btn:focus-visible {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
  opacity: 1;
}

.section-head__nav-btn.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

/* Стрелка — общая иконка-шеврон, для prev/next разворачиваем в нужную сторону. */
.section-head__nav-btn .ico-chevron {
  width: 14px;
  height: 14px;
}

.section-head__nav-btn--prev .ico-chevron {
  transform: rotate(90deg);
}

.section-head__nav-btn--next .ico-chevron {
  transform: rotate(-90deg);
}

/* Текстовая ссылка «читать всё» — вместо кнопок навигации в шапке секции. */
.section-head__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.section-head__link:hover,
.section-head__link:focus-visible {
  color: var(--color-accent);
  opacity: .8;
}

.section-head__link:hover .ar-arrow::before,
.section-head__link:focus-visible .ar-arrow::before {
  transform: rotate(45deg);
}

/* Карточка раздела. */
.uslugi-group {
  position: relative;
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.uslugi-group:hover,
.uslugi-group:focus-within {
  border-color: transparent;
  box-shadow: var(--shadow-header);
}

.uslugi-group__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-right: 3rem;
}

.uslugi-group__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.uslugi-group__icon img {
  width: auto;
  height: 28px;
}

.uslugi-group__num {
  display: block;
  color: var(--color-text-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.uslugi-group__title {
  margin-bottom: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.uslugi-group__title a {
  color: inherit;
}

.uslugi-group:hover .uslugi-group__title a {
  color: var(--color-accent);
}

/* Кнопка-стрелка в углу карточки. */
.uslugi-group__more {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.uslugi-group:hover .uslugi-group__more {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.uslugi-group__more:hover .ar-arrow::before,
.uslugi-group__more:focus-visible .ar-arrow::before {
  transform: rotate(45deg);
}

/* Список услуг раздела. */
.uslugi-group__list li {
  margin-bottom: .5rem;
}

.uslugi-group__list a {
  position: relative;
  display: block;
  padding-left: 1.375rem;
  color: var(--color-text);
  font-size: .8375rem;
  line-height: 1.5;
}

.uslugi-group__list a::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: 12px;
  height: 2px;
  background-color: var(--color-accent);
  transition: width .2s ease;
}

.uslugi-group__list a:hover,
.uslugi-group__list a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.uslugi-group__list a:hover::before,
.uslugi-group__list a:focus-visible::before {
  width: 18px;
}

/* ==========================================================================
   Главная: о компании и цифры
   ========================================================================== */

/* Фоновый декор старого сайта: силуэт города и точечная сетка. На старом
   сайте это обычные background-свойства на самих блоках (не псевдоэлементы
   с z-index) — фон элемента и так рисуется позади его содержимого, само
   собой, без изоляции и слоёв. Держим тот же, самый простой путь. */
.about-home {
  position: relative;
  background-image: url("/images/bg2.svg");
  background-repeat: no-repeat;
  background-position: right -1rem bottom -1rem;
  /* Явные два значения вместо "46rem auto» — у этого движка «auto» в
     шортхенде background теряется и размер схлопывается в квадрат. */
  background-size: 46rem 26.8rem;
}

.usluga__body .breadcrumb {
  margin-top: 0px;
}

.breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  padding-left: 0 !important;
  font-size: 80%;
  margin-top: 40px;
}

.divider.icon-location.icon-fw {
  display: none
}

.breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-right: var(--breadcrumb-item-padding-x);
  color: var(--breadcrumb-divider-color);
  content: var(--breadcrumb-divider, "-");
}

/* Точечная сетка выглядывает из-за нижнего правого угла фото: у обёртки
   есть свободный от img «карман» (padding), в нём и показывается фон. */
.about-home__media {
  padding-right: 3rem;
  padding-bottom: 3.5rem;
  background-image: url("/images/patt_1.png");
  background-repeat: no-repeat;
  background-position: right -10rem bottom -1rem;
  background-size: 22rem 12.6rem;
}

.about-home__photo {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}

.ksi-decode {
  margin-bottom: 1.5rem;
}

.ksi-decode .col {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ksi-decode__letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: 1.375rem;
  font-weight: 800;
}

.ksi-decode__word {
  font-weight: 700;
  text-transform: uppercase;
}

.ksi-decode__word::before {
  content: "\2013\00a0";
}

.stats {
  margin-top: 3rem;
}

/* Точечная сетка под каждой цифрой — прямо фоном столбца (как .digblock
   в старом сайте): текст рисуется поверх сам, без z-index и слоёв. */
.stat {
  position: relative;
  padding: 0 35px 35px;
  text-align: center;
  background-image: url("/images/patt_1.png");
  background-repeat: no-repeat;
  background-position: left calc(50% - 4px) top calc(50% + 72px);
  background-size: 316px 180px;
}

.stat__value {
  position: relative;
  display: block;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Серая линия во всю ширину под цифрой — как .dig:before в старом сайте. */
.stat__value::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background-color: var(--color-border);
}

.stat__value::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 3px;
  background-color: var(--color-accent);
  transform: translateX(-50%);
}

.stat__label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
}

/* ==========================================================================
   Главная: призыв и результат
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  background-color: var(--color-accent);
  color: var(--color-bg);

}

.cta__ghost {
  position: absolute;
  top: 50%;
  right: 4%;
  z-index: 0;
  color: rgba(255, 255, 255, .12);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%);
  user-select: none;
}

.cta__title,
.cta__text {
  position: relative;
  color: var(--color-bg);
}

.cta__title {
  margin-bottom: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cta__text {
  max-width: 34rem;
  margin-bottom: 2rem;
}

.cta .btn {
  position: relative;
}

/* Блок «Преимущества» (страница «О компании») — тот же синий акцентный
   фон на всю ширину, что у .cta, плюс сетка иконок с подписями. */
.advantages {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.advantages__title {
  max-width: 50rem;
  margin-bottom: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-bg);
}

.advantages__item {
  text-align: center;
}

.advantages__item img {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
}

.advantages__item p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
}

.result-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Призрачное слово за фото — как «Обсудим?» у блока выше. */
.result-home__ghost {
  position: absolute;
  top: -.5rem;
  left: 0;
  z-index: 0;
  color: var(--color-surface);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.result-home .row {
  position: relative;
  z-index: 1;
}

.result-home__photo {
  position: relative;
}

.result-item__num {
  display: block;
  margin-bottom: .5rem;
  color: var(--color-accent);
  font-weight: 800;
}

/* Короткая акцентная чёрточка под номером — тот же приём, что и под цифрами
   в блоке «О компании» (.stat__value::after). */
.result-item__num::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-top: .5rem;
  background-color: var(--color-accent);
}

.result-item p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Реализованные проекты: слайдер на главной
   ========================================================================== */

/* Фон и кольца — от .hero (по просьбе: тот же фон, что у первого экрана). */
.proekty-slider {
  padding-bottom: calc(var(--section-space) + 1rem);
  border-top: 1px solid var(--color-border);
}

/* Swiper сам обрезает по overflow:hidden — оставляем чуть воздуха сверху
   и снизу, иначе тень и лёгкий подъём карточки при наведении срезаются. */
.proekty-slider__swiper {
  padding: .5rem .25rem 1.5rem;
  margin: -.5rem -.25rem -1.5rem;
}

/* Swiper даёт слайду `height:100%` от контейнера — при auto-высоте
   контейнера это разрешается неоднозначно и слайды в одном ряду иногда
   получают разную высоту, хотя карточки внутри разного размера текста.
   Переопределяем на auto: тогда высоту ряда выравнивает обычный
   flex-stretch, однозначно и без сюрпризов. Карточка (h-100) дотягивается
   до высоты слайда как обычно. */
.proekty-slider__swiper .swiper-slide {
  height: auto;
}

/* ==========================================================================
   Последние новости: слайдер на главной
   ========================================================================== */

.novosti-slider__track {
  position: relative;
}

.novosti-slider__swiper {
  padding: .5rem .25rem 1.5rem;
  margin: -.5rem -.25rem -1.5rem;
}

.novosti-slider__swiper .swiper-slide {
  height: auto;
}

/* Стрелки — та же кнопка, что в шапке других слайдеров, но по краям ленты. */
.novosti-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.novosti-slider__arrow--prev {
  left: -.625rem;
}

.novosti-slider__arrow--next {
  right: -.625rem;
}

.novost-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
}

.novost-card__date {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .875rem;
}

.novost-card__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.novost-card__title a {
  color: var(--color-accent);
  font-weight: 700;
}

.novost-card__title a:hover,
.novost-card__title a:focus-visible {
  opacity: .8;
}

.novost-card__more {
  margin-top: auto;
}

/* ==========================================================================
   Услуги: карточки каталога
   ========================================================================== */

.usluga-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.usluga-card:hover,
.usluga-card:focus-within {
  border-color: transparent;
  box-shadow: var(--shadow-header);
  transform: translateY(-2px);
}

.usluga-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.usluga-card__link:hover,
.usluga-card__link:focus-visible {
  color: inherit;
  opacity: 1;
}

.usluga-card__media {
  display: block;
  background-color: var(--color-surface);
}

/* Разномастные стоковые фото приводим к одному тону слабым затемнением —
   так карточки читаются одной серией, а само фото остаётся видно целиком.
   Важно: именно ::after, а не ::before — ::before у .ratio уже занят
   Bootstrap'ом для расчёта высоты блока (16:9), тронуть его нельзя. */
.usluga-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 34, 70, 0) 60%, rgba(16, 34, 70, .22) 100%);
  pointer-events: none;
}

/* Фирменный уголок — отдельный элемент разметки, а не ::before/::after:
   те заняты Bootstrap'ом (расчёт высоты .ratio) и градиентом-затемнением. */
.usluga-card__accent {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border-style: solid;
  border-width: 28px 28px 0 0;
  border-color: var(--color-accent) transparent transparent transparent;
}

/* Точечная сетка в затемнённом углу — тот же приём, что и .hero__dots. */
.usluga-card__dots {
  width: 4.5rem;
  height: 3rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .45) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}

.usluga-card__media img {
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
}

.usluga-card:hover .usluga-card__media img {
  transform: scale(1.04);
}

.usluga-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
}

.usluga-card__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.usluga-card:hover .usluga-card__title {
  color: var(--color-accent);
}

.usluga-card__teaser {
  display: block;
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.usluga-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
}

.usluga-card__price {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

.usluga-card__foot .ar-arrow {
  color: var(--color-accent);
}

.usluga-card:hover .ar-arrow::before {
  transform: rotate(45deg);
}

.uslugi__pagination {
  margin-top: 2.5rem;
}

.uslugi__pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uslugi__pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.uslugi__pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.uslugi__pagination .page-item.active .page-link {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.uslugi__pagination .page-item.disabled .page-link {
  color: var(--color-text-muted);
  opacity: .45;
}

/* На мобильных кнопки не переносятся вразнобой (последняя не «отрывается»
   на вторую строку в одиночку), а едут в одну строку с прокруткой; кнопки
   «в начало»/«в конец» на маленьком экране не нужны — только листание. */
@media (max-width: 575.98px) {

  .uslugi__pagination .page-item:has(.icon-angle-double-left),
  .uslugi__pagination .page-item:has(.icon-angle-double-right) {
    display: none;
  }

  .uslugi__pagination .pagination {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .375rem;
    padding-bottom: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .uslugi__pagination .page-item {
    flex: none;
  }

  .uslugi__pagination .page-link {
    min-width: 2.375rem;
    height: 2.375rem;
    font-size: .9375rem;
  }
}

/* ==========================================================================
   Услуги: страница услуги
   ========================================================================== */

.usluga__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, var(--color-bg) 0, transparent 28%);
  /* Компонент сидит внутри .container из index.php — растягиваем фон
     блока до края экрана, как у хироу на главной (позиция banner,
     она full-width сама по себе, здесь так же приходится пробивать). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.usluga__head .container {
  position: relative;
  z-index: 1;
}

/* Тонкие кольца по углам и точечная сетка — тот же приём фона, что у
   хироу на главной (.hero::before/::after, .hero__dots). */
.usluga__head::before,
.usluga__head::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgba(255, 255, 255, .32),
    0 0 0 6rem rgba(var(--color-border-rgb), .26),
    0 0 0 9rem rgba(255, 255, 255, .18);
  pointer-events: none;
}

.usluga__head::before {
  top: -13rem;
  left: -11rem;
  width: 30rem;
}

.usluga__head::after {
  right: -16rem;
  bottom: -20rem;
  width: 32rem;
}

/* Крошки теперь внутри .usluga__body.section — у неё свой большой
   верхний паддинг (--section-space, до 80px), а нужно ровно 20px от хироу. */
.usluga__body {
  padding-top: 20px;
}

.usluga__docs {
  margin-top: 2.5rem;
}

/* ==========================================================================
   Текст материала (WYSIWYG) — общее оформление тегов без новых классов.
   Используется в .usluga__body, .proekt__body (материал по умолчанию —
   article/default.php — тоже выводит текст в .usluga__body, чтобы не
   дублировать эти же правила под своим классом).
   ========================================================================== */

.usluga__body p,
.proekt__body p {
  margin: 0 0 1.25rem;
  line-height: 1.7;
}

.usluga__body h2,
.proekt__body h2,
.usluga__body h3,
.proekt__body h3,
.usluga__body h4,
.proekt__body h4 {
  margin: 2.25rem 0 1rem;
  line-height: 1.3;
}

.usluga__body h2,
.proekt__body h2 {
  font-size: var(--h3-size);
}

.usluga__body h3,
.proekt__body h3,
.usluga__body h4,
.proekt__body h4 {
  font-size: 1.0625rem;
}

.usluga__body> :first-child,
.proekt__body> :first-child {
  margin-top: 0;
}

.usluga__body ul:not(.doc-list),
.proekt__body ul:not(.doc-list),
.usluga__body ol,
.proekt__body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.125rem;
}

.usluga__body li,
.proekt__body li {
  margin-bottom: .5rem;
  line-height: 1.6;
}

.usluga__body li::marker,
.proekt__body li::marker {
  color: var(--color-accent);
}

.usluga__body li:last-child,
.proekt__body li:last-child {
  margin-bottom: 0;
}

.usluga__body strong,
.proekt__body strong {
  font-weight: 700;
  color: var(--color-text);
}

.usluga__body a:not([class]),
.proekt__body a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.usluga__body blockquote,
.proekt__body blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-style: italic;
}

.usluga__body img,
.proekt__body img {
  max-width: 100%;
  height: auto;
  margin: 1.75rem 0;
  border-radius: var(--radius);
}

.usluga__body hr,
.proekt__body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

.usluga__body table,
.proekt__body table {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
  font-size: .9375rem;
}

.usluga__body th,
.proekt__body th,
.usluga__body td,
.proekt__body td {
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.usluga__body th,
.proekt__body th {
  background-color: var(--color-surface);
  font-weight: 700;
}

/* Реквизиты, характеристики и прочие двухколоночные таблицы в тексте
   материала — переиспользуемый класс, ставится вручную в редакторе
   вместо стандартных table/table-striped. Карточка с лёгкой волосяной
   линией между строками, без полос-зебры и вертикальных границ. */
.ksi-table {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  font-size: .9375rem;
}

.ksi-table tr:not(:last-child) td,
.ksi-table tr:not(:last-child) th {
  border-bottom: 1px solid var(--color-border);
}

.ksi-table th,
.ksi-table td {
  padding: 1.1rem 1.5rem;
  text-align: left;
  vertical-align: top;
}

.ksi-table th,
.ksi-table td:first-child {
  width: 38%;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ksi-table td:last-child {
  color: var(--color-text);
  font-weight: 700;
}

.ksi-table td p {
  margin: 0 0 .35rem;
  line-height: 1.5;
}

.ksi-table td p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Страница «Контакты» — карточка с адресом/телефонами (переиспользует
   .footer-contact/.footer-phone/.footer-social из подвала) и карта.
   ========================================================================== */

.contacts__card h5 {
  margin: 1.5rem 0 .625rem;
  color: var(--color-accent);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contacts__card h5:first-child {
  margin-top: 0;
}

.contacts__card .footer-contact {
  color: var(--color-text);
  font-size: 1rem;
}

.contacts__social {
  margin-top: 1.75rem;
}

.contacts__map {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.contacts__map iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
}

.contacts__req-title {
  margin-top: 3rem;
}

/* Таблица реквизитов у́же контейнера на десктопе, но на узких экранах
   не помещается в 390px — даём ей собственный скролл вместо того чтобы
   раздвигать всю страницу по горизонтали. */
.contacts .ksi-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.contacts .ksi-table tbody {
  display: table;
  width: 100%;
}

/* ==========================================================================
   Аккордеон в тексте материала (варианты оплаты и т.п.) — стандартная
   Bootstrap-разметка accordion/accordion-item/accordion-button, оформленная
   в стиле проекта. JS уже подключён глобально (bootstrap.collapse).
   ========================================================================== */

.usluga__body .accordion,
.proekt__body .accordion {
  margin: 1.75rem 0;
}

.usluga__body .accordion,
.proekt__body .accordion {
  counter-reset: acc;
}

.usluga__body .accordion-item,
.proekt__body .accordion-item {
  counter-increment: acc;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-bg);
}

.usluga__body .accordion-item:last-child,
.proekt__body .accordion-item:last-child {
  margin-bottom: 0;
}

/* Номер, вручную набранный в редакторе, прячем — рисуем его сами через
   counter прямо в кнопке (см. ::before ниже), чтобы он всегда был частью
   строки заголовка и не мог съехать на контент или прилипнуть к краю. */
.usluga__body .accordion-item>span,
.proekt__body .accordion-item>span {
  display: none;
}

.usluga__body .accordion-header,
.proekt__body .accordion-header {
  margin: 0;
}

.usluga__body .accordion-button,
.proekt__body .accordion-button {
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.usluga__body .accordion-button::before,
.proekt__body .accordion-button::before {
  content: counter(acc, decimal-leading-zero);
  flex: none;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent);
}

.usluga__body .accordion-button:not(.collapsed),
.proekt__body .accordion-button:not(.collapsed) {
  background-color: var(--color-surface);
  box-shadow: none;
  color: var(--color-accent);
}

.usluga__body .accordion-button:focus,
.proekt__body .accordion-button:focus {
  box-shadow: none;
}

.usluga__body .accordion-button::after,
.proekt__body .accordion-button::after {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  background-size: 1.25rem;
}

.usluga__body .accordion-collapse,
.proekt__body .accordion-collapse {
  border-top: 1px solid var(--color-border);
}

.usluga__body .accordion-body,
.proekt__body .accordion-body {
  padding: 1.5rem;
}

.usluga__body .accordion-body img,
.proekt__body .accordion-body img {
  margin: 0;
  max-width: 260px;
  border: 1px solid var(--color-border);
}

.usluga__body .accordion-body .ksi-table,
.proekt__body .accordion-body .ksi-table {
  margin: 0;
}

/* ==========================================================================
   Прайс-таблица в тексте материала (общий прайс и т.п.) — обычная <table>,
   без какой-либо дополнительной вёрстки внутри: достаточно поставить класс
   ksi-price на саму таблицу. Строка-раздел — просто строка с объединённой
   ячейкой (colspan) на 2-й позиции, оформляется автоматически.
   ========================================================================== */

.ksi-price {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  font-size: .9375rem;
}

.ksi-price th,
.ksi-price td {
  padding: .875rem 1.25rem;
  text-align: left;
  vertical-align: middle;
}

.ksi-price tr:not(:last-child) th,
.ksi-price tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}

.ksi-price th {
  background-color: var(--color-surface);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ksi-price td:first-child,
.ksi-price th:first-child {
  width: 2.5rem;
  color: var(--color-text-muted);
  font-weight: 700;
  text-align: center;
}

.ksi-price td:last-child {
  text-align: right;
  font-weight: 800;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Строка-раздел: одна из ячеек объединена через colspan. */
.ksi-price tr:has(td[colspan]) {
  background-color: var(--color-surface);
}

.ksi-price tr:has(td[colspan]) td {
  text-align: left;
  font-weight: 800;
  color: var(--color-text);
}

.ksi-price tr:has(td[colspan]) td:first-child {
  color: var(--color-accent);
}

.usluga__crumbs-wrap {
  padding-bottom: 20px;
}

.usluga__crumbs-wrap .breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

/* Липкая карточка контактов рядом с текстом услуги — как на старом сайте. */
.usluga__aside {
  position: sticky;
  top: 6.5rem;
  margin-top: 2rem;
  padding: 2rem;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
}

.usluga__aside-logo {
  display: block;
  height: auto;
  margin-bottom: 1.25rem;
}

.usluga__aside-mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  color: var(--color-accent);
  font-size: .9375rem;
}

.usluga__aside-mail .ico-mail {
  width: 16px;
  height: 16px;
}

.usluga__aside-price {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  font-weight: 800;
}

.usluga__aside-links {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.usluga__aside-links a {
  color: var(--color-text);
  font-size: .875rem;
  text-decoration: underline dotted;
}

.usluga__aside-links a:hover,
.usluga__aside-links a:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.usluga__aside-divider {
  margin: 0 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

.usluga__aside-note {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
  font-size: .8125rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.usluga__aside-phone {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.usluga__aside-phone:hover,
.usluga__aside-phone:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.usluga__aside-btn {
  width: 100%;
}

.usluga__dots {
  position: absolute;
  right: 8%;
  bottom: -1rem;
  z-index: -1;
  width: 16rem;
  height: 12rem;
  background-image: radial-gradient(circle, var(--color-bg) 2px, transparent 2px);
  background-size: 22px 22px;
  pointer-events: none;
}

/* Декоративное слово за шапкой услуги. */
.usluga__ghost {
  position: absolute;
  top: -.55em;
  right: 0;
  z-index: 0;
  color: var(--color-bg);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.usluga__title {
  margin-bottom: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.usluga__teaser {
  max-width: 36rem;
  margin-bottom: 1.75rem;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

.usluga__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.usluga__price {
  margin: 0;
}

.usluga__price-label {
  display: block;
  color: var(--color-text-muted);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.usluga__price-value {
  display: block;
  font-size: 1.375rem;
  font-weight: 800;
}

/* Обыгрываем плоское стоковое фото: акцентная подложка со сдвигом,
   тень, скруглённые углы и точечная сетка в свободном углу — тот же
   декоративный язык, что у хироу и карточек услуг. */
.usluga__image-wrap {
  position: relative;
}

.usluga__image-frame {
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-accent);
  opacity: .1;
}

.usluga__image-dots {
  position: absolute;
  top: -1rem;
  left: -1rem;
  z-index: 0;
  width: 6rem;
  height: 4.5rem;
  background-image: radial-gradient(circle, var(--color-accent) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: .4;
}

.usluga__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Документы для оценки. */
.doc-list__item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.doc-list__item:hover,
.doc-list__item:focus-visible {
  border-color: transparent;
  box-shadow: var(--shadow);
  color: var(--color-text);
  opacity: 1;
}

.doc-list__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: var(--color-accent);
  -webkit-mask: url("../images/ico/doc.svg") center / contain no-repeat;
  mask: url("../images/ico/doc.svg") center / contain no-repeat;
}

.doc-list__name {
  flex: 1 1 auto;
  font-size: .875rem;
  line-height: 1.4;
  word-break: break-word;
}

.doc-list__item .ar-arrow {
  color: var(--color-accent);
}

.doc-list__item:hover .ar-arrow::before {
  transform: rotate(45deg);
}

/* Плитки быстрых ссылок (страница «О компании» и т.п.) — цельная сетка
   в шахматном порядке, без рамок/теней, как на старом сайте. */
.link-tiles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.link-tiles__dots {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 10rem;
  height: 7rem;
  background-image: radial-gradient(circle, var(--color-border) 2px, transparent 2px);
  background-size: 18px 18px;
  pointer-events: none;
}

.link-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.link-tiles__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9.5rem;
  padding: 1.5rem 2rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color .2s ease;
}

.link-tiles__item:nth-child(8n + 2),
.link-tiles__item:nth-child(8n + 4),
.link-tiles__item:nth-child(8n + 5),
.link-tiles__item:nth-child(8n + 7) {
  background-color: var(--color-surface);
}

.link-tiles__item:hover,
.link-tiles__item:focus-visible {
  color: var(--color-accent);
}

@media (max-width: 767.98px) {
  .link-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .link-tiles__item {
    min-height: 7rem;
    padding: 1.25rem;
  }
}

/* ==========================================================================
   Реализованные проекты
   ========================================================================== */

/* Карточка проекта. */
.proekt-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: .75rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
  transition: box-shadow .3s ease, transform .3s ease;
}

.proekt-card:hover,
.proekt-card:focus-within {
  box-shadow: var(--shadow-header);
  transform: translateY(-2px);
}

.proekt-card__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - .25rem);
  background-color: var(--color-surface);
}

/* .ratio держит пропорцию только у блочного элемента, а обёртка — ссылка. */
.proekt-card__media>a {
  display: block;
}

.proekt-card__media img {
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
}

.proekt-card:hover .proekt-card__media img {
  transform: scale(1.04);
}

/* Плашка с типом объекта поверх фотографии. */
.proekt-card__badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .3125rem .75rem;
  border-radius: 2rem;
  background-color: rgba(16, 34, 70, .72);
  color: var(--color-bg);
  font-size: .75rem;
  line-height: 1.3;
}

.proekt-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem 1rem .5rem;
}

.proekt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.proekt-card__title {
  margin-bottom: .5rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.proekt-card__title a {
  color: inherit;
}

.proekt-card:hover .proekt-card__title a {
  color: var(--color-accent);
}

.proekt-card__address {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: .875rem;
}

.proekt-card__address .ico-pin {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

/* Кнопка-стрелка у заголовка. */
.proekt-card__more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.proekt-card:hover .proekt-card__more {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.container-banner {
  margin: 0;
  display: block;
}

.aboutt .about-home {
  padding-top: 0
}

/* Показатели: подпись слева, значение справа. */
.proekt-card__facts {
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.proekt-card__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .4375rem 0;
}

.proekt-card__fact dt {
  max-width: 58%;
  color: var(--color-text-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.35;
}

.proekt-card__fact dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.proekt-card__fact--accent dd {
  color: var(--color-accent);
}

/* Итоговое снижение — плашкой. */
.proekt-card__drop {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius);
  background-color: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent);
  font-weight: 800;
}

.proekt-card__drop .ico-arrow-down {
  width: 13px;
  height: 13px;
}

/* ==========================================================================
   Страница проекта
   ========================================================================== */

.proekt__row>.col-lg-6+.col-lg-6 {
  margin-top: 2rem;
}

/* Расстояние от фото до текстового блока — только когда колонки реально
   стоят рядом (от lg), на мобильном и планшете они в столбик. */
@media (min-width: 992px) {
  .proekt__row>.col-lg-6+.col-lg-6 {
    margin-top: 0;
  }

  .proekt__details {
    padding-left: 2.5rem;
  }
}

.proekt__title {
  margin-bottom: 1rem;
  font-size: var(--h2-size);
  font-weight: 800;
  text-transform: uppercase;
}

.proekt__address {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
}

.proekt__address .ico-pin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.proekt__facts {
  margin-bottom: 2rem;
}

.proekt__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--color-border);
}

.proekt__fact:last-child {
  border-bottom: 0;
}

.proekt__fact dt {
  color: var(--color-text-muted);
}

.proekt__fact dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  font-size: 1.25rem;
}

/* Итоговое снижение — главный показатель страницы (даже когда это
   последняя строка списка — специфичность выше правила :last-child). */
.proekt__fact.proekt__fact--result {
  border-bottom: 1px solid var(--color-border);
}

.proekt__fact--result dt {
  color: var(--color-text);
  font-weight: 700;
}

.proekt__fact--result dd {
  color: var(--color-accent);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Призыв обсудить похожий объект. */
.proekt__cta {
  padding: 1.5rem;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.proekt__cta p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

.proekt__body {
  max-width: 46rem;
  margin-top: 2.5rem;
}

/* ==========================================================================
   Материал по умолчанию (новости и прочий контент без своего макета) —
   те же паддинги и текст, что у страницы услуги (.usluga__body), только
   хироу свой: фото материала фоном, как на старом сайте.
   ========================================================================== */

.default-article__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  background-color: var(--color-footer);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--color-bg);
  /* Компонент сидит внутри .container из index.php — растягиваем фон
     блока до края экрана, как у хироу услуги. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.default-article__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(16, 34, 70, .55) 0%, rgba(16, 34, 70, .8) 100%);
}

.default-article__hero .container {
  position: relative;
  z-index: 1;
}

/* Тонкие кольца по углам — тот же приём фона, что у хироу услуги
   (.usluga__head::before/::after) и хироу на главной. */
.default-article__ring {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgba(255, 255, 255, .06),
    0 0 0 6rem rgba(255, 255, 255, .045),
    0 0 0 9rem rgba(255, 255, 255, .03);
  pointer-events: none;
}

.default-article__ring--tl {
  top: -13rem;
  left: -11rem;
  width: 30rem;
}

.default-article__ring--br {
  right: -16rem;
  bottom: -20rem;
  width: 32rem;
}

.default-article__hero .eyebrow {
  color: rgba(255, 255, 255, .75);
}

.default-article__title {
  max-width: 46rem;
  margin-bottom: .5rem;
  font-size: var(--h2-size);
  font-weight: 800;
  color: var(--color-bg);
  text-transform: uppercase;
}

.default-article__date {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: .9375rem;
}

/* ==========================================================================
   «Этапы развития» — оформление без изменения вёрстки материала: годы
   через <h3><strong>, ссылки на сканы документов — <a class="jcepopup">.
   Разделители между годами, галочки вместо точек в списке.
   ========================================================================== */

.itemid-134 .usluga__body h3 {
  margin: 0 0 1.25rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-accent);
}

.itemid-134 .usluga__body h3:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.itemid-134 .usluga__body h3 strong {
  color: inherit;
}

.itemid-134 .usluga__body ul {
  padding-left: 0;
  list-style: none;
}

.itemid-134 .usluga__body ul li {
  position: relative;
  padding-left: 1.75rem;
}

.itemid-134 .usluga__body ul li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--color-accent);
  -webkit-mask: url("../images/ico/check.svg") center / contain no-repeat;
  mask: url("../images/ico/check.svg") center / contain no-repeat;
}

.itemid-134 .usluga__body .jcepopup {
  color: var(--color-accent);
  text-decoration: none;
}

.itemid-134 .usluga__body .jcepopup:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ==========================================================================
   «Аккредитации» — таблица «банк / логотип» без изменения вёрстки
   материала: логотипы разного размера и пропорций приводим к одной
   высоте и центрируем в ячейке.
   ========================================================================== */

.itemid-136 .ksi-table td:first-child {
  width: auto;
}

.itemid-136 .ksi-table td:last-child {
  width: 220px;
  text-align: center;
}

.itemid-136 .ksi-table td p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.itemid-136 .ksi-table img {
  max-width: 160px;
  max-height: 40px;
  width: auto;
  height: auto;
  margin: 0;
}

/* ==========================================================================
   Вакансии — список открытых позиций аккордеоном (заголовок + зарплата
   в шапке), ниже — контакты и о компании (описание категории).
   ========================================================================== */

.vakansii__title {
  flex: 1 1 auto;
  text-align: left;
}

.vakansii__salary {
  flex: none;
  color: var(--color-accent);
  font-weight: 800;
  white-space: nowrap;
}

.vakansii__about {
  margin-top: 2.5rem;
  padding: 2rem;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.vakansii__about> :first-child {
  margin-top: 0;
}

/* ==========================================================================
   Страница «Оспаривание» — объекты для оспаривания: фото с затемнением
   и подписью, как обложки альбомов в галерее.
   ========================================================================== */

.osp-object {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
}

.osp-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.osp-object:hover img {
  transform: scale(1.05);
}

.osp-object__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(16, 34, 70, 0) 45%, rgba(16, 34, 70, .78) 100%);
}

.osp-object__overlay h3 {
  margin: 0;
  color: var(--color-bg);
  font-size: 1.0625rem;
  font-weight: 800;
}

/* Этапы работы по оспариванию — нумерованный список с описанием. */
.osp-step {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.osp-step:first-child {
  padding-top: 0;
}

.osp-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.osp-step__aside {
  flex: 0 0 auto;
  width: 9rem;
}

.osp-step__num {
  display: block;
  margin-bottom: .5rem;
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 800;
}

.osp-step__num::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-top: .5rem;
  background-color: var(--color-accent);
}

.osp-step__duration {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-text-muted);
  font-size: .875rem;
}

.osp-step__duration .ico-clock {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.osp-step__body {
  flex: 1 1 20rem;
  min-width: 0;
}

.osp-step__title {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 800;
}

.osp-step__body p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.osp-step__body p:last-child {
  margin-bottom: 0;
}

.osp-step__body ul,
.osp-step__body ol {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  color: var(--color-text-muted);
}

.osp-step__body li {
  margin-bottom: .5rem;
  line-height: 1.6;
}

.osp-step__body li:last-child {
  margin-bottom: 0;
}

.osp-step__body li::marker {
  color: var(--color-accent);
}

.osp-step__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

@media (max-width: 575.98px) {
  .osp-step__aside {
    width: 100%;
  }

  .osp-step__num {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0;
  }

  .osp-step__num::after {
    display: none;
  }
}

/* Предложение: список + абзац под ним. */
.osp-offer__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Форма: фото с плавающей карточкой контактов поверх нижнего края. */
.osp-form__media {
  position: relative;
}

.osp-form__media img {
  display: block;
  width: 100%;
  height: auto;
}

.osp-form__note {
  position: relative;
  z-index: 1;
  margin: -3rem 1.5rem 0;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow);
}

.osp-form__note p {
  margin: 0 0 .75rem;
  color: var(--color-text-muted);
  font-size: .9375rem;
}

.osp-form__phone {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-accent);
}

/* Преимущества работы с нами — три колонки, иконка + текст, без карточек,
   весь блок на сером фоне (.section-gray). */
.osp-perk {
  height: 100%;
  margin-top: 30px;
  padding: 50px;
  border-bottom: 3px solid var(--color-accent);
  background: var(--color-bg);
  box-shadow: 0 10px 50px rgba(160.5, 160.5, 160.5, .5);
}

.osp-perk img {
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
}

.osp-perk h3 {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 800;
}

.osp-perk p {
  margin: 0 0 .75rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 14px;
}

.osp-perk p:last-child {
  margin-bottom: 0;
}

.osp-perk a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Превью альбома галереи внутри лендинга (mod_ksi_gallery) — сетка
   квадратных миниатюр с затемнением при наведении. */
.ksi-gallery-preview__grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.ksi-gallery-preview__item {
  display: block;
  height: 140px;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.ksi-gallery-preview__item img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .4s ease;
}

.ksi-gallery-preview__item:hover img {
  transform: scale(1.06);
}

.klient .usluga__body h3 {
  margin-top: 0px
}

/* ==========================================================================
   Страница «Судебная экспертиза»
   ========================================================================== */

.se-basis__note {
  margin: 2rem auto 0;
  max-width: 50rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 50px;
}

.se-choose__text {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* Алгоритм проведения экспертиз — три блока фото + шаги. */
.se-algo__row {
  margin-bottom: 3rem;
}

.se-algo__row:last-child {
  margin-bottom: 0;
}

.se-algo__title {
  margin-bottom: 1.5rem;
}

/* Вертикальный таймлайн с точками, соединёнными пунктирной линией —
   как на старом сайте, вместо обычного нумерованного списка. */
.se-algo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
}

.se-algo__list li {
  position: relative;
  padding-left: 1.75rem;
  padding-bottom: 1.5rem;
  border-left: 1px dashed var(--color-border);
  line-height: 1.6;
}

.se-algo__list li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .35em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.se-algo__list li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* ==========================================================================
   Подвал
   ========================================================================== */

/* В сетке .site-grid (ядро Cassiopeia) для позиции footer нет своей
   grid-area — без этого правила футер автоматически падает в первую же
   пустую строку сетки (например, в незанятую top-b), а не остаётся внизу.
   Число заведомо больше числа строк шаблона на любом брейкпоинте. */
.site-grid>.container-footer {
  grid-row: 100;
}

/* У ядра Cassiopeia класс .footer сам несёт синий градиентный фон и белый
   текст (--cassiopeia-color-primary у нас указывает на акцент) — сбрасываем,
   цвет и фон задают .footer-top/.footer-bottom. */
.footer {
  margin-top: 0;
  background: none;
  color: var(--color-text);
}

.footer-top {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
  border-top: 1px solid var(--color-border);
}

.footer-brand img {
  height: 40px;
  width: auto;
}

.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .9375rem;
  line-height: 1.4;
}

.footer-contact [class^="ico-"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .15em;
  color: var(--color-accent);
}

a.footer-contact:hover,
a.footer-contact:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.footer-phones {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-phone {
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-phone:hover,
.footer-phone:focus-visible {
  color: var(--color-accent);
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: .625rem;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-accent);
  transition: background-color .2s ease, color .2s ease;
}

.footer-social__link i {
  color: var(--color-bg);
  font-size: 16px;
}

/* Ядро Cassiopeia переопределяет цвет ссылок в футере правилом
   `.footer a:not(.btn) { color: currentcolor }` — оно специфичнее одного
   класса, поэтому здесь селектор с тем же .footer впереди. Цвет иконки
   уже задан в .footer-social__link i выше (общее правило, не только
   для футера — те же кнопки переиспользуются на странице «Контакты»). */
.footer .footer-social__link {
  color: var(--color-bg);
}

.footer .footer-social__link:hover,
.footer .footer-social__link:focus-visible,
.footer .footer-social__link:hover i,
.footer .footer-social__link:focus-visible i {
  background-color: var(--color-bg);
  color: var(--color-accent);
  opacity: 1;
}

.footer-bottom {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background-color: var(--color-footer);
  color: rgba(255, 255, 255, .75);
  font-size: .875rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, .75);
  text-decoration: underline dotted;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--color-bg);
  opacity: 1;
}

.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

/* ==========================================================================
   Брейкпоинты. Все media queries пишем только внутри этих блоков.
   ========================================================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .itemid-101 .cta,
  .layout-usluga .cta {
    margin-top: -30px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --h1-size: 2.25rem;
    --h2-size: 1.75rem;
    --h3-size: 1.375rem;
    --section-space: 4rem;
    /* с планшета контейнеру хватает собственных полей Bootstrap: широкий
       отступ нужен только на мобильных, где текст иначе липнет к краю */
    --container-space: .75rem;
  }

  /* Разделитель между колонками цифр — только когда они стоят в ряд
     (row-cols-md-3 переключается на этом же брейкпоинте). */
  .stats .col+.col .stat {
    border-left: 1px solid var(--color-border);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  /* Нахлёст на слайдер — на главной (новости) и на странице услуги
     (карусель «Другие услуги»); на остальных страницах этот же блок
     «Обсудим задачу» идёт после произвольного контента, и минус-отступ
     там просто съедает нужный отступ сверху. */
  .itemid-101 .cta,
  .layout-usluga .cta {
    margin-top: -70px;
  }

  .site-header {
    position: static;
    box-shadow: none;
  }

  .site-header__bar {
    box-shadow: var(--shadow-header);
  }

  .site-header__main {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
  }

  .brand-logo img {
    height: 46px;
  }

  .result-home__ghost {
    font-size: 6.5rem;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .site-nav .nav-item>a {
    padding: 0 .75rem;
    font-size: .75rem;
  }

  .site-nav .parent>a {
    padding-right: 2rem;
  }

  .hero__mark {
    --mark-size: 380px;
  }

  .section-heading__ghost {
    font-size: 6.5rem;
  }

  .usluga__ghost {
    font-size: 9rem;
  }

  .cta__ghost {
    font-size: 10rem;
  }

  .result-home__ghost {
    font-size: 7.5rem;
  }

  :root {
    --h1-size: 2.75rem;
    --h2-size: 2rem;
    --section-space: 5rem;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .site-nav .nav-item>a {
    padding: 0 .875rem;
    font-size: .7125rem;
  }

  /* общее правило выше сбрасывает правый отступ — возвращаем место под стрелку */
  .site-nav .parent>a {
    padding-right: 2.125rem;
  }

  .hero__mark {
    --mark-size: 450px;
  }
}

/* ==========================================================================
   Страница ошибки (404/500) — свой лендинг без шапки/подвала: логотип,
   заголовок с описанием и кнопками слева, декоративная композиция с
   номером ошибки справа (тот же язык колец/точек, что у .section-gray).
   ========================================================================== */

.ksi-error-body {
  min-height: 100vh;
  background-color: var(--color-surface);
}

.ksi-error {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 245, 246, .98));
  isolation: isolate;
}

.ksi-error__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background-image:
    linear-gradient(rgba(var(--color-text-rgb), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-text-rgb), .045) 1px, transparent 1px),
    radial-gradient(circle, rgba(var(--color-accent-rgb), .5) 1.5px, transparent 1.5px);
  background-size: 3rem 3rem, 3rem 3rem, 6rem 6rem;
}

.ksi-error::before,
.ksi-error::after {
  position: absolute;
  z-index: -1;
  width: clamp(20rem, 45vw, 46rem);
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(var(--color-border-rgb), .35), 0 0 0 4rem rgba(var(--color-border-rgb), .2);
  content: "";
}

.ksi-error::before {
  top: -22rem;
  right: -12rem;
}

.ksi-error::after {
  bottom: -28rem;
  left: -16rem;
}

.ksi-error__shell {
  position: relative;
  width: min(100%, 78rem);
  margin: 0 auto;
}

.ksi-error__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(2.5rem, 7vw, 6rem);
}

.ksi-error__logo {
  display: block;
  width: auto;
  height: 2.5rem;
}

.ksi-error__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .85fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
}

.ksi-error__content {
  max-width: 42rem;
}

.ksi-error__eyebrow {
  margin-bottom: 1.25rem;
}

.ksi-error__title {
  margin: 0 0 1.25rem;
  color: var(--color-text);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ksi-error__description {
  max-width: 37rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.65;
}

.ksi-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.ksi-error__actions .knopka,
.ksi-error__actions .knopka2 {
  min-width: 11rem;
}

.ksi-error__note {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 3rem 0 0;
  color: var(--color-text-muted);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.ksi-error__note-dot {
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 .3rem rgba(var(--color-accent-rgb), .15);
}

.ksi-error__visual {
  position: relative;
  display: grid;
  min-height: clamp(18rem, 34vw, 30rem);
  place-items: center;
}

.ksi-error__rings {
  position: absolute;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 0 0 1.25rem rgba(var(--color-border-rgb), .4), 0 0 0 3.25rem rgba(var(--color-border-rgb), .25);
}

.ksi-error__code {
  position: relative;
  color: rgba(var(--color-text-rgb), .08);
  font-size: clamp(7rem, 17vw, 13rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .75;
}

.ksi-error__badge {
  position: absolute;
  display: grid;
  width: clamp(5.5rem, 9vw, 8rem);
  height: clamp(5.5rem, 9vw, 8rem);
  place-items: center;
  transform: translate(1.5rem, 1rem) rotate(6deg);
  border: 2px solid var(--color-accent);
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: var(--shadow);
  color: var(--color-accent);
}

.ksi-error__badge svg {
  width: 52%;
  height: 52%;
}

.ksi-error__marker {
  position: absolute;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 .4rem rgba(var(--color-accent-rgb), .12);
}

.ksi-error__marker--one {
  top: 20%;
  right: 14%;
}

.ksi-error__marker--two {
  bottom: 16%;
  left: 16%;
  width: .5rem;
  height: .5rem;
}

.ksi-error__debug {
  position: relative;
  width: min(100%, 78rem);
  margin: 2rem auto 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .8rem;
}

@media (max-width: 991.98px) {
  .ksi-error__layout {
    grid-template-columns: 1fr;
  }

  .ksi-error__visual {
    order: -1;
    min-height: 14rem;
  }
}