/* Start:/local/templates/telsis/styles/base/reset.css?1793090949631*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* шрифт целиком (размер, интерлиньяж, начертание), а не только семейство:
   иначе браузер даёт кнопкам и полям свои 13,3px (вопросы FAQ на услугах и решениях) */
input, button, textarea, select {
    font: inherit;
}
/* End */


/* Start:/local/templates/telsis/styles/base/general.css?17930909492634*/
.mobile-back { 
    display: none;
}

html {
    font-size: clamp(0.3525rem, 0.85vw, 1rem);
}

*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 0;
    border: none;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-hover);
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-page);
    scrollbar-width: thin; scrollbar-color: var(--color-border-subtle) transparent;
}

.container {
    max-width: 1920px;
    padding: 0 4.5rem;
    margin-inline: auto;
}

.icon-20 {
    height: 1.25rem;
    width: 1.25rem;
}

.icon-24 {
    height: 1.5rem;
    width: 1.5rem;
}

.icon-32 {
    height: 2rem;
    width: 2rem;
}

.icon-64 {
    width: 4rem;
    height: 4rem;
}

.title {
    display: inline-block;
    font-weight: 600;
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    padding-right: 10px;
    color: var(--color-text);
}

.title::after {
    content: "";
    display: inline-block;
    vertical-align: super;
    margin-left: 1.5rem;

    background-color: var(--color-primary);
    height: 0.75rem;
    width: 0.75rem;
}

.link-arrow {
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--transition-time);
}

.link-arrow:hover { color: var(--color-primary); }
.link-arrow:active { color: var(--color-primary-hover); }

@media(max-width: 1024px) {
    html {
        font-size: clamp(0.5625rem, 2.09vw, 1.35rem);
    }
}

@media(max-width: 480px) {
    html {
        font-size: clamp(0.9rem, 4.45vw, 1.235rem);
    }
}

/* Текст из админки (статьи, проекты, решения, описания разделов каталога, товаров и брендов) не перебивает
   шрифт сайта: вставленные из Word или с других сайтов font-family во вложенных элементах и таблицах
   игнорируются. Размеры — из стилей шаблона; инлайновые размеры шрифта в текстах статей убраны скриптом
   scripts/2026-10-19_articles-fonts.php */
:is(.article-body, .case-detail, .info-section__container, .product-tabs__content, .brand-detail__description, .service-block__text) :is(*, table) {
    font-family: inherit !important;
}

/* End */


/* Start:/local/templates/telsis/styles/components/tablet-menu.css?1793090949454*/
.header__dropdown-list {
    display: none;
}

.header__menu-wrapper {
    position: relative;
    display: inline-block;
}

.header__dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--color-white);
    padding: 0.625rem 0;
    min-width: 10rem;
}

.header__dropdown-list.active {
    display: block;
}

.header__dropdown-list a {
    display: block;
    padding: 0.5rem 1rem;
}
/* End */


/* Start:/local/templates/telsis/styles/components/header.css?17930909496259*/
.header__bottom--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border-subtle);
    
    animation: slideDown var(--transition-time-slider) ease-out;
}

.header__bottom--fixed .header__bottom-container {
    padding: 1.5rem 4.5rem;
    max-width: 1920px;
    margin: 0 auto;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border-subtle);

    padding-top: 1.875rem;
    padding-bottom: 1.875rem;
}

.header__container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__menu-btn {
    display: none;
    align-items: center;
    font-size: var(--font-size-text-base);
    font-weight: 600;
    line-height: var(--line-height-text-base);
    gap: 0.5rem;
}

.header__menu-btn:hover {
    color: var(--color-primary);
}

.header__menu-btn:active {
    color: var(--color-primary-hover);
}

.header__menu-btn--mobile {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    height: 2.75rem;
    width: 2.75rem;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header__nav-link {
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    transition: color var(--transition-time);
}

.header__nav-link:hover {
    color: var(--color-primary);
}

.header__nav-link:active {
    color: var(--color-primary-hover);
}

/* пункт текущего раздела (SELECTED в шаблонах меню desktop, tablet и mobile) */
.header__nav-item.selected .header__nav-link,
.mobile-menu__link.is-selected {
    color: var(--color-primary);
}

.header__contacts-list {
    display: flex;
    gap: 2rem;
}

.header__contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    transition: color var(--transition-time);
}

.header__contact:hover {
    color: var(--color-primary);
}

.header__contact:active {
    color: var(--color-primary-hover);
}

.header__bottom-container {
    display: flex;
    align-items: center;
    gap: 3.25rem;
}

.header__logo {
    max-height: 3.1875rem;
    max-width: 16.25rem;
}

.header__actions {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

.header__catalog {
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    color: var(--color-white);
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);

    transition: background-color var(--transition-time);
}

.header__catalog:hover {
    background-color: var(--color-primary-hover);
}

.header__catalog:active {
    background-color: var(--color-primary-active);
}

.header__search-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    border: 1px solid var(--color-border);
    padding-left: 1.125rem;
    transition: border var(--transition-time);
}

.header__search-container:hover {
    border-color: var(--color-border-hover);
}

.header__search-container form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.header__search-input {
    flex: 1;
    height: 100%;
    border: none;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
}

.header__search-input::placeholder {
    color: var(--color-text-placeholder);
}

.header__search-container:focus-within {
    border-color: var(--color-primary);
}

.header__search-input:focus {
    outline: none;
}

.header__cta {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);

    transition: background-color var(--transition-time), color var(--transition-time);
}

.header__cta:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-secondary-text-hover);
}

.header__cta:active {
    background-color: var(--color-secondary-active);
}
/* Планшет: логотип в нижней строке перед «Каталогом», по высоте кнопок */
@media (min-width: 481px) and (max-width: 1024px) {
    .header__bottom-container { gap: 1.5rem; }
    .header__logo { flex-shrink: 0; }
    .header__logo-img { display: block; height: 2.25rem; width: auto; max-width: none; }
    .header__actions { width: auto; flex: 1 1 auto; min-width: 0; gap: 1rem; }
    .header__search-container { min-width: 0; padding-left: 0.75rem; }
    .header__search-container svg { flex-shrink: 0; }
    .header__search-input { min-width: 0; width: 100%; }
    .header__catalog, .header__cta { flex-shrink: 0; white-space: nowrap; }
}

/* Переход по якорю (кнопки в баннерах: «Что входит в решение / услугу», «Результаты проекта» и др.):
   над заголовком блока — 24 от нижнего края фиксированной шапки (на телефоне 16).
   --header-fixed-h — высота .header__bottom--fixed: отступы контейнера + строка + рамка 1px
   (≥1025: 1.5rem×2 + 3.1875rem; 481–1024: 1rem×2 + 3rem; ≤480: 1rem×2 + 2.84rem — строку задаёт логотип) */
:root {
    --header-fixed-h: calc(6.1875rem + 1px);
    --anchor-gap: 1.5rem;
}

@media (max-width: 1024px) {
    :root { --header-fixed-h: calc(5rem + 1px); }
}

@media (max-width: 480px) {
    :root { --header-fixed-h: calc(4.84rem + 1px); --anchor-gap: 1rem; }
}

#included,
#results {
    scroll-margin-top: calc(var(--header-fixed-h) + var(--anchor-gap));
}

/* End */


/* Start:/local/templates/telsis/styles/components/footer.css?17930909493471*/

.footer {
    background-color: var(--color-bg-inverse);
    color: var(--color-white);

    margin-top: var(--section-gap); /* 120 / 80 / 56 — как на главной; раньше 7.5rem на всех ширинах */
}

.footer__container {
    padding-top: 6rem;
    padding-left: 4.5rem;
    padding-right: 4.5rem;

    max-width: 1920px;
    margin: 0 auto;
}

.footer__main {
    display: flex;
    justify-content: space-between;
    gap: 5.9375rem;
    margin-bottom: 6rem;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}

.footer__logo-img {
    max-width: 12.8125rem;
    height: auto;
}

.footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-white);
    color: var(--color-black);
    transition: background-color var(--transition-time), color var(--transition-time);
}

.footer__social:active {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
}

.footer__social:hover {
    color: var(--color-primary);
}

/* вторая иконка ВКонтакте — только для планшета (показывают файлы styles/base/<раздел>/responsive.css);
   базовое правило здесь, иначе на страницах с brands/ и services/responsive.css на десктопе их две */
.footer__social--tablet {
    display: none;
}

.footer__social img {
    width: 1.5rem;
    height: 1.5rem;
}

.footer__menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    flex-grow: 1;
}

.footer__title {
    font-weight: 600;
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 1.375rem;
    opacity: 0.5;
    cursor: default;
}

.footer__arrow { 
    display: none; 
    transition: transform var(--transition-time);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer__link {
    font-weight: 400;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-white);
    white-space: nowrap;
    transition: color var(--transition-time);
}

.footer__link:hover {
    color: var(--color-primary);
}

.footer__link:active {
    color: var(--color-primary-hover);
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer__copyright {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-white);
}

.footer__legal {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer__legal-link {
    font-weight: 600;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-white);
    transition: color var(--transition-time);
}

.footer__legal-link:hover {
    color: var(--color-primary);
}

.footer__legal-link:active {
    color: var(--color-primary-hover);
}

.footer__info {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer__column.is-open .footer__list {
    max-height: 30rem;
    opacity: 1;
    pointer-events: auto;
}

.footer__column.is-open .footer__arrow {
    transform: rotate(180deg);
}
/* End */


/* Start:/local/templates/telsis/styles/components/modal.css?17930909494938*/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.modal__container {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    max-width: 73.5rem;
}

.modal__close {
    position: absolute;
    top: 2.625rem;
    right: 2.625rem;
    z-index: 10;
}

.modal__form-content {
    display: flex;
    gap: 3.5rem;
}

.modal__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal__main {
    padding: 2.5rem;
}

.modal__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
    color: var(--color-text-modal);
    margin-bottom: 0.75rem;
}

.modal__subtitle {
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text-modal);
    margin-bottom: 3.5rem;
}

.form-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.625rem;
    margin-bottom: 1.5rem;
}

.form-modal__field--full {
    grid-column: span 2;
}

.form-modal__label {
    display: block;
    font-size: var(--font-size-text-small);
    line-height: var(--line-height-text-small);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.form-modal__input,
.form-modal__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    height: 3rem;
    transition: border-color var(--transition-time);
}

.form-modal__input::placeholder,
.form-modal__textarea::placeholder {
    color: var(--color-text-placeholder);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
}

.form-modal__input:focus,
.form-modal__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-modal__input:not(:focus):hover,
.form-modal__textarea:not(:focus):hover {
    border-color: var(--color-border-hover);
}

.form-modal__textarea {
    height: 8rem;
    resize: none;
}

.form-modal__policy {
    margin-bottom: 1.5rem;
    grid-column: span 2;
}

.form-modal__policy-link {
    color: var(--color-primary);
    text-decoration: underline;
}

.form-modal__submit {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.75rem 0;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    transition: background-color var(--transition-time);
}

.form-modal__submit:hover {
    background-color: var(--color-primary-hover);
}

.form-modal__footer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-modal__policy {
    order: 1;
    margin-bottom: 0;
}

.form-modal__submit {
    order: 2;
    width: 100%;
}

.modal__sidebar {
    width: 22.125rem;
    background-color: var(--color-border);
    gap: 1px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.benefits-block__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-white);
    gap: 1.5rem;
    flex: 1;
    padding: var(--card-pad);
}

.benefits-block__icon {
    color: var(--color-text);
}

.benefits-block__text {
    font-size: var(--font-size-text-large);
    font-weight: 600;
    line-height: var(--line-height-text-large);
    color: var(--color-text);
}

/* modal__status */

.modal.status .modal__container { max-width: 30rem; }
.modal.status .modal__main { padding: 0; }
.modal.status .modal__title,
.modal.status .modal__subtitle,
.modal.status .modal__form-content {
    display: none;
}

.modal.success .modal__success {
    display: block;
}

.modal.error .modal__error {
    display: block;
}

.modal__status {
    display: none;
    text-align: center;
    padding: 2.5rem;
}

.modal__status-title {
    margin-top: 2.5rem;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
}

.modal__status-text {
    margin-top: 0.75rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
}

.modal__status .form-modal__submit {
    margin-top: 2.5rem;
}

@media(max-width: 480px) {
    .modal.status .modal__overlay { align-items: end;}
    .modal.status .modal__status { padding: 1.25rem 1rem; }
    .modal__status-title { margin-top: 1.25rem; }
    .modal__status-text { margin-top: 0.5rem; }
    .modal__status .form-modal__submit { margin-top: 1.25rem; }
}
/* End */


/* Start:/local/templates/telsis/styles/components/popup-catalog.css?17930909494525*/
.catalog-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.5);
    z-index: 1000;
    display: none;
    overflow-y: auto;
}

.catalog-popup.is-active {
    display: flex;
}

.catalog-popup__container {
    background-color: var(--color-white);
    width: 100%;
    max-width: 63.625rem;
}

.catalog-popup__header {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem 4.5rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.catalog-popup__logo {
    flex-shrink: 0;
}

.catalog-popup__logo-img {
    max-width: 16.25rem;
    height: auto;
}

.catalog-popup__body {
    padding: 2.5rem 4.5rem;
    background-color: var(--color-white);
}

.catalog-popup__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1.875rem 0;
}

.catalog-popup__search {
    height: 3rem;
}

.catalog-popup__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem 1.5rem;
    margin-bottom: 3.5rem;
}

.catalog-popup__link.catalog-popup__category-title {
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    font-weight: 600;
    color: var(--color-text);
}

.catalog-popup__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.catalog-popup__link {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-time);
}

.catalog-popup__link:hover {
    color: var(--color-primary);
}

.catalog-popup__link:active {
    color: var(--color-primary-hover);
}

.brands-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brands-section__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
    color: var(--color-text);
}

.brands__slider-controls {
    display: flex;
    gap: 0.75rem;
}

.brands__arrow {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    transition: background-color var(--transition-time), color var(--transition-time);

    background-color: var(--color-primary);
    color: var(--color-white);
}

.brands__arrow:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: auto;
}

.brands__arrow:not(:disabled):hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

.brands__arrow:not(:disabled):active {
    background-color: var(--color-primary-active);
    color: var(--color-white);
}

/* логотипы брендов (22.10.2026): одна высота, по центру ячеек; один шаг --grid-gap между ячейками и до «Все бренды»;
   серой подложки за ячейками нет; стрелки скрыты, если все бренды помещаются (js/header.js) */
.brands-section__slider {
    overflow: hidden;
    margin-top: 1.875rem;
    margin-bottom: var(--grid-gap);
    position: relative;
    width: 100%;
}

.brands-section__track {
    display: flex;
    transition: transform var(--transition-time-slider);
    width: 100%;
    gap: var(--grid-gap);
}

.brands-section__track, 
.brands-section__item, 
.brands-section__img {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.brands-section__item {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: 7.125rem;
    flex-shrink: 0;
    width: calc((100% - 3 * var(--grid-gap)) / 4);
    border: 1px solid var(--color-border-subtle);
    transition: background-color var(--transition-time);
}

.brands-section__item:hover {
    background-color: var(--color-secondary);
}

.brands-section__img {
    height: 1.75rem; /* все логотипы одной высоты: 28 — родная высота логотипов (без растяжения) */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.brands__slider-controls[hidden] {
    display: none;
}

.brands-section__footer {
    display: flex;
    justify-content: flex-end;
}
/* End */


/* Start:/local/templates/telsis/styles/components/mobile-menu.css?17930909497595*/
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    z-index: 999;
    display: none;
}

.mobile-menu.is-active {
    display: flex;
}

.mobile-menu__panel {
    background-color: var(--color-white);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-menu__title {
    font-size: var(--font-size-title-3);
    line-height: var(--line-height-title-3);
    font-weight: 600;
    color: var(--color-text);
}

.mobile-menu__close {
    width: 1.25rem;
    height: 1.25rem;
}

.mobile-menu__body {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mobile-menu__catalog-btn {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.625rem 0;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.mobile-menu__search {
    height: 2.75rem;
    max-height: 2.75rem;
    min-height: max(2.75rem, 44px);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.mobile-menu__nav {
    margin-bottom: 32px;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-menu__list > li > a {
    width: 100%;
    justify-content: space-between;
}

.mobile-menu__bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: auto;
}

.mobile-menu__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-menu__contact-item {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
}

.mobile-menu__footer {
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--color-border-subtle);
}

.mobile-menu__partner-btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    padding: 0.625rem;
    font-weight: 600;
}

.mobile-menu__panel {
    position: relative;
    overflow: hidden;
}

.mobile-menu__content-page,
.mobile-menu__catalog-panel,
.mobile-menu__brands {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    /* transition: transform 0.3s ease-in-out, visibility 0.3s; */
}

.mobile-menu__content-page,
.mobile-menu__brands {
    visibility: hidden;
    z-index: 1;
}

.mobile-menu__content-page.is-active {
    visibility: visible;
}

.mobile-menu__catalog-panel {
    visibility: hidden;
    z-index: 2;
}

.mobile-menu__catalog-panel.is-active {
    visibility: visible;
}

.mobile-menu__brands.is-active {
    visibility: visible;
}

.mobile-menu__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu__back-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 1.25rem;
    font-size: var(--font-size-text-small);
    line-height: var(--line-height-text-small);
    font-weight: 500;
    color: var(--color-text-tertiary);
    cursor: pointer;
}

.mobile-menu__catalog-section {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.mobile-menu__catalog-link {
    padding: 0.75rem 0;
    width: 100%;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
}

.mobile-menu__accordion {
    display: flex;
    flex-direction: column;
}

.mobile-menu__accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}

.mobile-menu__accordion-trigger .icon-arrow {
    transition: transform var(--transition-time);
    height: 1.25rem;
    width: 1.25rem;
}

.mobile-menu__accordion-item.is-open .mobile-menu__accordion-trigger .icon-arrow {
    transform: rotate(180deg);
}

.mobile-menu__accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-time-slider);
}

.mobile-menu__submenu-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mobile-menu__submenu-list a {
    display: block;
    color: var(--color-text);
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
}

/* логотипы брендов — как в окне каталога на компьютере (popup-catalog.css): одна высота, по центру ячеек,
   один шаг --grid-gap между ячейками и до «Все бренды», без серой подложки */
.mobile-menu__brands-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
    max-height: 31.2rem;
    overflow-y: auto;
}

.mobile-menu__brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.75rem;
    padding: 1.5625rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
}

.mobile-menu__brand-item img {
    height: 1.75rem; /* все логотипы одной высоты: 28 — родная высота логотипов (без растяжения) */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.mobile-menu__brands .mobile-menu__footer {
    margin-top: var(--grid-gap);
    padding-top: 0;
    border-top: 0;
}
/* Нажимаемые пункты — не меньше 44 (2.75rem): высота за счёт padding, промежутки между пунктами убраны,
   размер шрифта прежний */
.mobile-menu__list { gap: 0; }
.mobile-menu__list > li > a { display: flex; align-items: center; min-height: max(2.75rem, 44px); padding: 0.625rem 0; box-sizing: border-box; }
.mobile-menu__contacts { gap: 0; }
.mobile-menu__contact-item { min-height: max(2.75rem, 44px); align-items: center; box-sizing: border-box; }
.mobile-menu__submenu-list { gap: 0; }
.mobile-menu__submenu-list a { display: flex; align-items: center; min-height: max(2.75rem, 44px); padding: 0.625rem 0; box-sizing: border-box; }
.mobile-menu__back-btn { min-height: max(2.75rem, 44px); align-items: center; margin-bottom: 0.25rem; }
/* крестик: иконка 20 на месте, нажимаемая область 44 */
.mobile-menu__close { display: inline-flex; align-items: center; justify-content: center; width: max(2.75rem, 44px); height: max(2.75rem, 44px); margin: -0.75rem; }
.mobile-menu__accordion-trigger, .mobile-menu__catalog-link, .mobile-menu__catalog-btn, .mobile-menu__partner-btn, .mobile-menu .link-arrow { min-height: max(2.75rem, 44px); box-sizing: border-box; }

/* End */


/* Start:/local/templates/telsis/styles/components/ui.css?17930909493258*/
.ui-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
    position: relative;
    user-select: none;
    transition: color var(--transition-time);
}

.ui-checkbox:hover {
    color: var(--color-primary);
}

.ui-checkbox:hover .ui-checkbox__box {
    border-color: var(--color-text-placeholder);
}

.ui-checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ui-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    margin-right: 1rem;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-white);
    transition: border var(--transition-time), background-color var(--transition-time);
}

.ui-checkbox__box svg {
    display: none;
    color: var(--color-white);
    width: .9rem;
}

.ui-checkbox__text {
    display: block;
    flex: 1;
}

.ui-checkbox__input:checked + .ui-checkbox__box {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.ui-checkbox__input:checked + .ui-checkbox__box svg {
    display: block;
}

/* SELECT-МЕНЮ */

.ui-select {
    position: relative;
    width: 100%;
    user-select: none;
}

.ui-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    background-color: var(--color-white);
    cursor: pointer;
    height: 3rem;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
    transition: border-color var(--transition-time);
}

.ui-select__trigger:hover {
    border-color: var(--color-text-placeholder);
}

.ui-select__trigger--placeholder .ui-select__title {
    color: var(--color-text-placeholder);
}

.ui-select__arrow {
    transition: transform var(--transition-time);
}

.ui-select--open .ui-select__arrow {
    transform: rotate(180deg);
}

.ui-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 15rem;
    overflow-y: auto;
    background-color: var(--color-white);
    border: 1.5px solid var(--color-border);
    z-index: 10;
    padding: 0.5rem 0;
    display: none;
}

.ui-select--open .ui-select__dropdown {
    display: block;
}

.ui-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: var(--font-size-text-large);
    line-height: var(--line-height-text-large);
    color: var(--color-text);
    transition: background-color var(--transition-time);
}

.ui-select__option > svg {
    display: none;
}

.ui-select__option--selected > svg {
    display: inline;
}

.ui-select__option:hover {
    background-color: var(--color-secondary);
}

.ui-select--open .ui-select__trigger {
    outline: none;
    border-color: var(--color-primary);
}

.ui-select:not(.ui-select--open) .ui-select__trigger:hover {
    border-color: var(--color-border-hover);
}
/* End */


/* Start:/local/templates/telsis/styles/components/breadcrumbs.css?17930909492114*/
/* длинная цепочка переносится на следующую строку — горизонтальной прокрутки нет ни на одной ширине */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    margin-bottom: 1.5rem;
    margin-top: 3.5rem;
}

.breadcrumbs .bx-breadcrumb-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

.breadcrumbs > svg {
    flex-shrink: 0;
}

.breadcrumbs .bx-breadcrumb-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

.breadcrumbs > svg {
    flex-shrink: 0;
}

.breadcrumbs__link {
    color: var(--color-text-tertiary);
    transition: var(--transition-time) color;
}

.breadcrumbs__link:hover {
    color: var(--color-primary);
}

.breadcrumbs__link:active {
    color: var(--color-primary-hover);
}

.breadcrumbs__current {
    color: var(--color-text);
    /* 600, не bold: 700 по шкале типографики — только <strong> в тексте */
    font-weight: 600;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: var(--font-size-text-small);
    line-height: var(--line-height-text-small);
    color: var(--color-text-tertiary);
    cursor: pointer;
}
/* телефон: крошки на 24 под шапкой и на 16 над H1 на всех страницах (ТЗ «Единая стилистика блоков», 20.10.2026, п. 5).
   «Вернуться назад» не показываем: стояла то над крошками, то между крошками и H1 и сдвигала их на 40–60;
   путь назад даёт сама цепочка крошек. body — чтобы перебить правила в responsive.css разделов */
@media (max-width: 480px) {
    body .breadcrumbs {
        margin-top: 1.5rem;
        margin-bottom: var(--crumbs-gap);
    }

    body .mobile-back {
        display: none;
    }
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/cta-banner.css?17930909494327*/
/* ======================================================================
   CTA-БЛОК В КОНЦЕ СТРАНИЦЫ — один на весь сайт (ТЗ «Единая стилистика блоков», 20.10.2026, п. 4.2)
   Подключается в header.php. Где стоит: /napravleniya/, /projects/, /resheniya/, /services/,
   /company/, страницы направлений.
   В контейнере, фон #101828, без фото, внутренний отступ --panel-pad. Текст слева, кнопки справа.
   Кнопки L: основная — оранжевая (на направлениях цвет --cta-accent задаёт страница),
   вторичная — прозрачная с белой рамкой.

   <div class="cta-banner">
       <div class="cta-banner__body">
           <h2 class="cta-banner__title">…</h2>
           <p class="cta-banner__text">…</p>
           [<div class="cta-banner__extra">телефон, почта</div>]
       </div>
       <div class="cta-banner__actions">
           <button class="cta-banner__btn">…</button>
           [<a class="cta-banner__btn cta-banner__btn--ghost">…</a>]
       </div>
   </div>
   ====================================================================== */

.cta-banner {
    --cta-accent: var(--color-primary);
    --cta-on-accent: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
    margin-top: var(--section-gap);
    padding: var(--panel-pad);
    background-color: var(--color-bg-inverse);
    color: var(--color-white);
}

.cta-banner__body {
    display: flex;
    flex-direction: column;
    gap: var(--title-gap-lead);
    min-width: 0;
    max-width: 56rem;
}

.cta-banner__title {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    color: var(--color-white);
}

.cta-banner__text {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--color-grey-300);
}

.cta-banner__extra {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 600;
}

.cta-banner .cta-banner__extra a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
}

.cta-banner .cta-banner__extra a:hover {
    color: var(--cta-accent);
}

.cta-banner__actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--btn-gap);
}

/* кнопка L (styles.css, --btn-l-*): 56, отступы 16 / 32, 16/24 · 600 */
.cta-banner .cta-banner__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    box-sizing: border-box;
    min-height: var(--btn-l-h);
    padding: 0 var(--btn-l-px);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: var(--cta-on-accent);
    background-color: var(--cta-accent);
    cursor: pointer;
    transition: border-color var(--transition-time), filter var(--transition-time);
}

.cta-banner .cta-banner__btn:hover {
    color: var(--cta-on-accent);
    filter: brightness(0.92);
}

.cta-banner .cta-banner__btn--ghost,
.cta-banner .cta-banner__btn--ghost:hover {
    background-color: transparent;
    border-color: var(--btn-border-dark);
    color: var(--color-white);
    filter: none;
}

.cta-banner .cta-banner__btn--ghost:hover {
    border-color: var(--color-white);
}

/* планшет: текст, под ним кнопки */
@media (max-width: 1024px) {
    .cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* телефон: кнопки на всю ширину друг под другом */
@media (max-width: 480px) {
    .cta-banner {
        align-items: stretch;
        gap: 1.5rem;
    }

    .cta-banner__actions {
        flex-direction: column;
    }

    .cta-banner .cta-banner__btn {
        width: 100%;
        white-space: normal;
    }
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/page-hero.css?179309094910204*/
/* ======================================================================
   ПЕРВЫЙ ЭКРАН ВНУТРЕННИХ СТРАНИЦ — один компонент (ТЗ «Единая стилистика блоков», 20.10.2026, п. 4.1)
   Подключается в header.php. Где стоит: проект, решение, услуга, страница направления.
   Главная — исключение (свой hero по Figma).
   В контейнере, на 24 под хлебными крошками (верх на 280 при 1920). min-height 480,
   отступы 64 / 56, контент прижат к низу. Фон: фото + затемнение от #101828; без фото — #101828.
   H1 40/48 белый, лид 18/26 и мета 16/24 — #D1D5DC. Кнопки L, от текста 32, между кнопками 16.
   Цвет основной кнопки — --hero-accent (на направлениях — цвет направления).

   <section class="container page-hero-wrap">
     <div class="page-hero [page-hero--image]">
       [<div class="page-hero__bg"><img class="page-hero__img"></div>]
       <div class="page-hero__main">
         <div class="page-hero__content">
           [<span class="page-hero__eyebrow">…</span>]
           <h1 class="page-hero__title">…</h1>
           [<p class="page-hero__lead">…</p>]
           [<div class="page-hero__meta"><span class="page-hero__meta-item">…</span></div>]
           [<div class="page-hero__actions"><a class="page-hero__btn">…</a>
                                            <a class="page-hero__btn page-hero__btn--ghost">…</a></div>]
         </div>
         [<div class="page-hero__aside">карточка справа</div>]
       </div>
       [<div class="page-hero__stats"><div class="page-hero__stat">
           <span class="page-hero__stat-label">…</span><span class="page-hero__stat-value">…</span></div>…</div>]
     </div>
   </section>
   ====================================================================== */

/* отступ от крошек даёт margin-bottom крошек (24, на телефоне 16 — breadcrumbs.css): своего нет,
   иначе в flex-обёртке крошек (.navigation-wrapper) отступы складываются, а не схлопываются */
.page-hero-wrap {
    margin-top: 0;
}

.page-hero {
    --hero-accent: var(--color-primary);
    --hero-on-accent: var(--color-white);
    /* размеры — как у баннера главной (.hero, styles/components/index/hero.css и base/index/responsive.css):
       H1 48/56 (≤1024 — 40/48, ≤480 — 24/32), кнопки 48 с отступами 12/24, между кнопками 24.
       На главной на ≥1025 H1 и подзаголовок стоят в две колонки — вертикальные отступы взяты из её же раскладки столбиком */
    --ph-title-fs: var(--font-size-h1);   --ph-title-lh: var(--line-height-h1);
    --ph-lead-fs: var(--font-size-text-large);  --ph-lead-lh: var(--line-height-text-large);  /* 18/26, как на главной */
    --ph-meta-fs: var(--font-size-text-base);   --ph-meta-lh: var(--line-height-text-base);   /* 16/24; на главной аналога нет */
    --ph-title-gap: 1.875rem;             /* H1 → подзаголовок (или мета), 30 */
    --ph-block-gap: 1.5rem;               /* подзаголовок → мета → кнопки, 24 */
    --ph-btn-h: var(--btn-m-h);           /* 48 */
    --ph-btn-px: var(--btn-m-px);         /* 24 */
    --ph-btn-gap: 1.5rem;                 /* между кнопками, 24 */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    overflow: hidden;
    background-color: var(--color-grey-900);
    color: var(--color-white);
}

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

/* фото и затемнение: снизу — почти сплошной #101828 под текстом, сверху — фото видно */
.page-hero__bg {
    position: absolute;
    inset: 0;
}

.page-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16, 24, 40, 0.92) 0%, rgba(16, 24, 40, 0.7) 45%, rgba(16, 24, 40, 0.25) 100%),
                linear-gradient(90deg, rgba(16, 24, 40, 0.55) 0%, rgba(16, 24, 40, 0) 70%);
}

.page-hero__main {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2.5rem;
    padding: 4rem 3.5rem;
}

.page-hero__content {
    flex: 3 1 32.5rem;
    min-width: 0;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.page-hero__aside {
    flex: 2 1 21.25rem;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.page-hero__eyebrow {
    margin-bottom: 1.5rem;
}

.page-hero__title {
    margin: 0 0 var(--ph-title-gap);
    font-size: var(--ph-title-fs);
    line-height: var(--ph-title-lh);
    font-weight: 600;
    color: var(--color-white);
}

.page-hero__title:last-child {
    margin-bottom: 0;
}

.page-hero__lead {
    margin: 0;
    max-width: 45rem;
    font-size: var(--ph-lead-fs);
    line-height: var(--ph-lead-lh);
    color: var(--color-white); /* как подзаголовок баннера главной */
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}

.page-hero__lead + .page-hero__meta {
    margin-top: var(--ph-block-gap);
}

.page-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ph-meta-fs);
    line-height: var(--ph-meta-lh);
    color: var(--color-white); /* текст и иконки (fill: currentColor) — белые, как на главной */
}

.page-hero__meta-item svg {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ph-btn-gap);
    margin-top: var(--ph-block-gap);
}

/* кнопка — как на главной: 48, отступы 12 / 24 (на ≤1024 — 44 и 10 / 16) */
.page-hero .page-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-icon-gap);
    min-height: var(--ph-btn-h);
    padding: 0 var(--ph-btn-px);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: var(--hero-on-accent);
    background-color: var(--hero-accent);
    cursor: pointer;
    transition: border-color var(--transition-time), filter var(--transition-time);
}

.page-hero .page-hero__btn:hover {
    color: var(--hero-on-accent);
    filter: brightness(0.92);
}

.page-hero .page-hero__btn--ghost,
.page-hero .page-hero__btn--ghost:hover {
    background-color: transparent;
    border-color: var(--btn-border-dark);
    color: var(--color-white);
    filter: none;
}

.page-hero .page-hero__btn--ghost:hover {
    border-color: var(--color-white);
}

/* полоса цифр внизу hero */
.page-hero__stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--stats-count, 4), minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.page-hero__stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.375rem;
    min-width: 0;
    padding: 1.5rem 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.page-hero__stat:last-child {
    border-right: 0;
}

.page-hero__stat-label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-grey-300);
}

.page-hero__stat-value {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: 600;
    color: var(--color-white);
    overflow-wrap: anywhere;
}

/* ---------- адаптив ---------- */

@media (max-width: 1024px) {
    .page-hero {
        min-height: 25rem;
        --ph-title-fs: var(--font-size-h2);   --ph-title-lh: var(--line-height-h2);
        --ph-lead-fs: var(--font-size-text-base);   --ph-lead-lh: var(--line-height-text-base);   /* 16/24 */
        --ph-btn-h: 2.75rem;                  /* 44 — у главной отступы 10 / 16 */
        --ph-btn-px: 1rem;
        --ph-btn-gap: 1rem;
    }
    .page-hero__main { padding: 2.5rem; }
    .page-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-hero__stat { padding: 1.25rem 2.5rem; }
    .page-hero__stat:nth-child(2n) { border-right: 0; }
    .page-hero__stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* телефон: отступ 24, высота по контенту, кнопки на всю ширину столбиком через 12 */
@media (max-width: 480px) {
    .page-hero {
        min-height: 0;
        --ph-title-fs: var(--font-size-title-1);   --ph-title-lh: var(--line-height-title-1);
        --ph-lead-fs: var(--font-size-text-small);  --ph-lead-lh: var(--line-height-text-small);  /* 14/20 */
        --ph-meta-fs: var(--font-size-text-small);  --ph-meta-lh: var(--line-height-text-small);  /* 14/20 */
        --ph-title-gap: 0.75rem;              /* 12 */
        --ph-block-gap: 1.25rem;              /* 20 */
        --ph-btn-gap: 0.75rem;                /* 12 */
    }
    .page-hero__main { gap: 1.5rem; padding: 1.5rem; }
    .page-hero__content,
    .page-hero__aside { flex-basis: 100%; }
    .page-hero__eyebrow { margin-bottom: 1rem; }
    .page-hero__actions { flex-direction: column; align-self: stretch; }
    .page-hero .page-hero__btn { width: 100%; white-space: normal; }
    .page-hero__stat { padding: 1rem 1.5rem; }
    .page-hero__stat-value { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/solution-card.css?17930909496274*/
/* КАРТОЧКА С ФОТО И ПАНЕЛЬЮ ТЕКСТА (.solution-card) — по Figma блока «Готовые решения» на главной.
   Один компонент для: главной («Готовые решения»), страницы решения («Другие готовые решения»),
   страницы проекта («Похожие проекты» — та же карточка, без отличий), услуги («Другие услуги»). Подключён в header.php.
   Фото на всю карточку, текст на полупрозрачной панели у низа; заголовок и описание (или строка «город · год») —
   группой у верха панели, заголовки всех карточек на одной линии.
   Панель одной высоты у всех карточек (ТЗ 26.10.2026): --card-info-h — под самый длинный вариант,
   заголовок --card-title-lines строк + описание --card-desc-lines строк + отступы; лишнее обрезается многоточием
   (line-clamp), полный текст — в title у ссылки. */

.solution-card {
    --card-pad: 1.875rem;
    --card-title-lh: var(--line-height-title-3);
    --card-title-gap: 0.75rem;  /* заголовок → описание, всегда 12 */
    --card-title-lines: 2;      /* заголовок до 2 строк */
    --card-desc-lines: 3;       /* описание до 3 строк */
    --card-desc-lh: var(--line-height-text-base);
    /* высота панели: 30 + 2 × 28 + 12 + 3 × 24 + 30 = 200 на десктопе; на планшете и телефоне — те же формулы
       с их шрифтами (переопределяются только переменные) */
    --card-info-h: calc(2 * var(--card-pad) + var(--card-title-lines) * var(--card-title-lh) + var(--card-title-gap) + var(--card-desc-lines) * var(--card-desc-lh));

    position: relative;
    height: 26.625rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
}

.solution-card:hover .solution-card__info {
    background-color: var(--color-primary);
}

.solution-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.solution-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.solution-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* панель с текстом внизу */
}

.solution-card__info {
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--card-info-h);
    overflow: hidden;
    padding: var(--card-pad);
    background-color: rgba(110, 110, 110, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 3px 0 rgba(255, 255, 255, 0.5);
    transition: background-color var(--transition-time);
}

.solution-card__title {
    font-weight: 600;
    font-size: var(--font-size-title-3);
    line-height: var(--card-title-lh);
    color: var(--color-white);
    margin-bottom: var(--card-title-gap);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--card-title-lines);
    line-clamp: var(--card-title-lines);
    overflow: hidden;
}

/* услуги («Другие услуги»): название до 2 строк, description до 4 — подобрано по всем услугам 22.10.2026 */
.solution-card--service {
    --card-title-lines: 2;
    --card-desc-lines: 4;
}

/* описание (у проектов — описание и под ним строка «город · год», тем же стилем) */
.solution-card__desc {
    font-weight: 400;
    font-size: var(--font-size-text-base);
    line-height: var(--card-desc-lh);
    color: var(--color-white);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--card-desc-lines);
    line-clamp: var(--card-desc-lines);
    overflow: hidden;
}

@media (max-width: 1024px) {
    .solution-card { --card-title-lh: var(--line-height-text-large); --card-desc-lh: var(--line-height-text-small); }
    /* услуги («Другие услуги»): описание — description до 160 знаков, на узких карточках до 5 строк, название до 2 — подобрано 22.10.2026 */
    .solution-card--service { --card-title-lines: 2; --card-desc-lines: 5; }
    .solution-card__title { font-size: var(--font-size-text-large); }
    .solution-card__desc { font-size: var(--font-size-text-small); }
}

@media (max-width: 480px) {
    .solution-card { --card-pad: 1.25rem; --card-title-lh: var(--line-height-text-base); height: 20.5rem; }
    .solution-card__title { font-size: var(--font-size-text-base); }
}

/* две строки описания в одной плашке («Похожие проекты»: описание + «город · год»): запас --card-desc-lines
   делится между ними — описание до 2 строк, вторая строка — 1; высота плашки (--card-info-h) та же */
.solution-card__desc--lines-2 {
    --card-desc-lines: 2;
}

.solution-card__desc--lines-1 {
    --card-desc-lines: 1;
}

/* без фото (у услуг пока нет изображений): тёмная карточка, как баннер без фото; появится фото — показывается оно */
.solution-card--no-img {
    background-color: var(--color-grey-900); /* #101828 */
}

/* фото нет совсем (статьи без картинки анонса и детальной): заглушка в фирменном стиле — тёмный фон
   с оранжевым узором, как в блоке брендов на главной (images/effects/pattern.svg) */
.solution-card--placeholder {
    background: var(--color-grey-900) url("/local/templates/telsis/styles/components/global/../../../images/effects/pattern.svg") right center / cover no-repeat;
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/bg-pattern.css?17930909491092*/
/* Тёмный фон с фирменным узором: #101828 и оранжевые диагональные лучи из правого верхнего угла
   (images/effects/pattern.svg, прозрачность 0.5). Плитка «Платформа TELSIS» на /napravleniya/,
   карточка телефона и панель «Напишите нам» на /contacts/.
   Где лучи проходят под текстом — сдвинуть узор переменными --bg-pattern-position и --bg-pattern-size
   (значения background-position и background-size). Узор — псевдоэлемент под содержимым (isolation). */
.bg-pattern-dark {
    position: relative;
    isolation: isolate;
    background-color: var(--color-bg-inverse);
}

.bg-pattern-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/local/templates/telsis/styles/components/global/../../../images/effects/pattern.svg") var(--bg-pattern-position, center) / var(--bg-pattern-size, cover) no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/seo-text.css?17930909493480*/
/* SEO-блоки «заголовок + текст» в конце страниц — одно правило для всех, по страницам не переопределять.
   Блоки: /services/ «Услуги TELSIS» (.services-text), SEO-тексты списков решений, направлений, проектов и статей
   (.seo-text__content), описания разделов каталога (.info-section__container). Подключён в header.php.
   - одна колонка на всю ширину контейнера, как блоки и карточки над ними (с 22.10.2026; было 840 на 1920);
   - текст, списки и подзаголовки внутри текста — как основной текст «О компании» на главной (.about__text):
     16/24 (--font-size-text-base / --line-height-text-base, те же токены на планшете и телефоне), #1E2939 (--color-text);
     подзаголовок полужирный. Заголовок блока на списках (первый H2) и отступы — в стилях страниц;
   - описание раздела каталога, начинающееся с заголовка (H2–H4 первым элементом), — этот заголовок оформлен как
     заголовок SEO-блока на других страницах: 40/48 (--fs-h2 / --lh-h2), оранжевый квадрат, до текста 20 / 16 / 12.
     Описание начинается с абзаца — заголовка блока нет. Текст в базе не меняется (с 22.10.2026). */

.services-text,
.seo-text__content,
.info-section__container {
    max-width: none;
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text);
}

:is(.services-text, .seo-text__content, .info-section__container) :is(p, ul, ol, li, dl, dt, dd, blockquote, td, th) {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    color: var(--color-text);
}

/* подзаголовок внутри текста («Что входит в решение:») — тем же размером, полужирный */
:is(.services-text, .seo-text__content, .info-section__container) :is(h2, h3, h4, h5, h6):not(:is(.services-text, .seo-text__content, .info-section__container) > :is(h2, h3, h4):first-child) {
    font-size: var(--font-size-text-base);
    line-height: var(--line-height-text-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 1.25rem 0 0.75rem;
}

/* заголовок блока в описании раздела каталога — как «Отраслевые решения TELSIS» и «О группе TELSIS»:
   40/48 (на планшете и телефоне — те же токены), оранжевый квадрат, до текста 20 / 16 / 12 */
.info-section__container > :is(h2, h3, h4):first-child {
    margin: 0 0 var(--text-title-gap);
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    color: var(--color-ghost-text);
}

.info-section__container > :is(h2, h3, h4):first-child::after {
    content: "";
    display: inline-block;
    vertical-align: super;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 1.5rem;
    background-color: var(--color-primary);
}

/* End */


/* Start:/local/templates/telsis/styles/components/global/direction-card.css?17930909492300*/
/* ======================================================================
   КАРТОЧКА НАПРАВЛЕНИЯ — картинка сверху, название, описание (необязательно); карточка — ссылка целиком
   «Направления группы TELSIS» на «О компании» (на страницах направлений «Другие направления» — solution-card).
   Стрелки «→» у названия нет (ТЗ 26.10.2026). Подключается в header.php. Картинка — \Telsis\Napravleniya\cardImage()
   (local/php_interface/napravleniya/view.php): обложка, нет — скриншот сайта, нет — плашка цвета направления.
   Картинка — кадр 2:1 на всю ширину карточки, object-fit: cover; смещение кадра — style="object-position" из DIR_ART_POSITION.

   <a class="dir-other" href="…">
       <img class="dir-other__img" …> | <span class="dir-other__img dir-other__img--empty" style="background:…">
       <span class="dir-other__name">Название</span>
       [<span class="dir-other__desc">Описание</span>]
   </a>
   ====================================================================== */

a.dir-other {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    color: #1E2939;
    text-decoration: none;
    transition: border-color var(--transition-time-card), box-shadow var(--transition-time-card);
}

a.dir-other:hover {
    border-color: #D1D5DC;
    box-shadow: 0 1rem 2rem rgba(16, 24, 40, 0.08);
    color: #1E2939;
}

.dir-other__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #F3F4F6;
}

.dir-other__name {
    display: block;
    padding: 1.25rem 1.5rem;
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
    font-weight: 600;
}

/* описание под названием */
.dir-other__desc {
    margin-top: -0.5rem;
    padding: 0 1.5rem 1.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #4A5565;
}


/* End */


/* Start:/local/templates/telsis/styles/components/global/cookie-banner.css?17930909492696*/
/* Плашка о cookie — include/cookie-banner.php, поведение — js/analytics.js.
   Слой ниже шапки (999), мобильного меню (999) и окон форм (1000): открытое окно заявки лежит поверх плашки.
   Пока плашка видна, у body нижний отступ её высоты (--cookie-banner-h ставит скрипт) — кнопки форм
   и подвал можно прокрутить выше неё. */

.cookie-banner {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 990;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 48rem; /* текст в две строки */
    padding: 1.25rem 1.5rem;
    background-color: var(--color-bg-inverse);
    color: var(--color-white);
    box-shadow: 0 0.5rem 1.5rem rgba(16, 24, 40, 0.24);
}

.cookie-banner__text {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.cookie-banner__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color var(--transition-time);
}

.cookie-banner__link:hover {
    color: var(--color-orange-300);
}

.cookie-banner__accept {
    flex-shrink: 0;
    min-height: var(--btn-m-h);
    padding: 0 var(--btn-m-px);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-time);
}

.cookie-banner__accept:hover {
    background-color: var(--color-primary-hover);
}

.cookie-banner__accept:active {
    background-color: var(--color-primary-active);
}

.cookie-banner__link:focus-visible,
.cookie-banner__accept:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

body.has-cookie-banner {
    padding-bottom: var(--cookie-banner-h, 0);
}

/* планшет и телефон — во всю ширину у нижнего края */
@media (max-width: 1024px) {
    .cookie-banner {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        padding: 1rem;
    }
}

/* телефон: текст и кнопка в ряд — плашка не выше трёх-четырёх строк и не закрывает первый экран */
@media (max-width: 480px) {
    .cookie-banner {
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .cookie-banner__accept {
        min-height: 2.75rem; /* 44px — минимальная зона нажатия */
        padding: 0 1rem;
    }
}

/* End */


/* Start:/local/templates/telsis/components/bitrix/menu/tablet/style.min.css?1793090949490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/telsis/components/bitrix/menu/tablet/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/telsis/components/bitrix/menu/desktop/style.min.css?1793090949490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/telsis/components/bitrix/menu/desktop/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/telsis/components/bitrix/news.list/footer_list/style.css?1793090949150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */


/* Start:/local/templates/telsis/components/bitrix/menu/mobile/style.min.css?1793090949490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/telsis/components/bitrix/menu/mobile/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/telsis/styles.css?179309094913834*/
:root {
    /* 
        ---
        ПАЛИТРА 
        ---
    */

    /* --- BASIC --- */

    --color-black: #000000;
    --color-white: #FFFFFF;

    /* --- ACCENT --- */

    --color-red-600: #E7000B; /* ОСНОВНОЙ */
    --color-red-50: #FEF2F2; /* ФОН */
    --color-green-600: #00A63E; /* ОСНОВНОЙ */
    --color-green-50: #F0FDF4; /* ФОН */

    /* --- ORANGE (PRIMARY) --- */
    
    --color-orange-900: #7E2A0C;
    --color-orange-800: #9F2D00; /* ТЕКСТ КНОПКИ SECONDARY-HOVER */
    --color-orange-700: #CA3500; /* ТЕКСТ КНОПКИ SECONDARY-DEFAULT */
    --color-orange-600: #F54900; /* WARNING */
    --color-orange-500: #FF6900; /* ХОВЕР */
    --color-orange-400: #FF7F1F; /* ОСНОВНОЙ */
    --color-orange-300: #FFB86A;
    --color-orange-200: #FFD6A7; /* ФОН КНОПКИ SECONDARY-PRESS */
    --color-orange-100: #FFEDD4; /* ФОН КНОПКИ SECONDARY-HOVER */
    --color-orange-50:  #FFF7ED; /* ФОН */

    /* --- GREY --- */

    --color-grey-900: #101828;
    --color-grey-800: #1E2939; /* ОСНОВНОЙ ТЕКСТ */
    --color-grey-700: #364153;
    --color-grey-600: #4A5565; /* SECONDARY TEXT */
    --color-grey-500: #6A7282; /* ИКОНКИ / DISABLE TEXT */
    --color-grey-400: #99A1AF; /* ТЕКСТ ПЛЕЙСХОЛДЕР / БОРДЕР ПРИ ХОВЕРЕ */
    --color-grey-300: #D1D5DC; /* БОРДЕР */
    --color-grey-200: #E5E7EB; /* ДИВАЙДЕР */
    --color-grey-100: #F3F4F6; /* ФОН DISABLED КНОПОК */
    --color-grey-50:  #F9FAFB; /* ФОН */

    /* 
        ---
        ШРИФТ
        ---
    */

    --font-family: "Inter", sans-serif;

    /* 
        ---
        СЕМАНТИКА 
        ---
    */

    --color-danger-text: var(--color-red-600);
    --color-danger-bg: var(--color-red-50);
    --color-success-text: var(--color-green-600);
    --color-success-bg: var(--color-green-50);
    --color-warning-text: var(--color-orange-600);
    --color-warning-bg: var(--color-orange-50);

    --color-primary: var(--color-orange-400);
    --color-primary-hover: var(--color-orange-500);
    --color-primary-active: var(--color-orange-600);

    --color-disabled-bg: var(--color-grey-100);
    --color-disabled-text: var(--color-grey-500);

    --color-text-modal: var(--color-grey-900);
    --color-text: var(--color-grey-800);
    --color-text-secondary: var(--color-grey-600);
    --color-text-placeholder: var(--color-grey-400);
    --color-text-tertiary: var(--color-grey-500);
    
    --color-border-hover: var(--color-grey-400);
    --color-border: var(--color-grey-300);
    --color-border-subtle: var(--color-grey-200);

    --color-bg-page: var(--color-grey-100);
    --color-bg-card: var(--color-grey-50);
    --color-bg-section: var(--color-grey-200);
    --color-bg-inverse: var(--color-grey-900);

    --color-secondary: var(--color-orange-50);
    --color-secondary-text: var(--color-orange-700);
    --color-secondary-hover: var(--color-orange-100);
    --color-secondary-text-hover: var(--color-orange-800);
    --color-secondary-active: var(--color-orange-200);
    
    --color-ghost-text: var(--color-grey-800);
    --color-ghost-text-hover: var(--color-orange-400);
    --color-ghost-bg-active: var(--color-orange-50);
    --color-ghost-text-active: var(--color-orange-700);

    --color-pagination-arrow: var(--color-grey-500);

    /* 
        ---
        ТИПОГРАФИКА
        ---
    */

    /* --- HEADING --- */

    /* Heading 1 (48px / 56px / 28px) */
    --font-size-h1: 3rem;
    --line-height-h1: 3.5rem;
    --paragraph-spacing-h1: 1.75rem;

    /* Heading 2 (40px / 48px / 24px) */
    --font-size-h2: 2.5rem;
    --line-height-h2: 3rem;
    --paragraph-spacing-h2: 1.5rem;

    /* Heading 3 (36px / 44px / 22px) */
    --font-size-h3: 2.25rem;
    --line-height-h3: 2.75rem;
    --paragraph-spacing-h3: 1.375rem;

    /* Heading 4 (32px / 40px / 20px) */
    --font-size-h4: 2rem;
    --line-height-h4: 2.5rem;
    --paragraph-spacing-h4: 1.25rem;

    /* --- TITLE --- */

    /* Title 1 (24px / 32px / 16px) */
    --font-size-title-1: 1.5rem;
    --line-height-title-1: 2rem;
    --paragraph-spacing-title-1: 1rem;

    /* Title 2 (22px / 30px / 14px) */
    --font-size-title-2: 1.375rem;
    --line-height-title-2: 1.875rem;
    --paragraph-spacing-title-2: 0.875rem;

    /* Title 3 (20px / 28px / 14px) */
    --font-size-title-3: 1.25rem;
    --line-height-title-3: 1.75rem;
    --paragraph-spacing-title-3: 0.875rem;

    /* --- TEXT --- */

    /* Text / Large (18px / 26px / 12px) */
    --font-size-text-large: 1.125rem;
    --line-height-text-large: 1.625rem;
    --paragraph-spacing-text-large: 0.75rem;

    /* Text / Base (16px / 24px / 12px) */
    --font-size-text-base: 1rem;
    --line-height-text-base: 1.5rem;
    --paragraph-spacing-text-base: 0.75rem;

    /* Text / Small (14px / 20px / 10px) */
    --font-size-text-small: 0.875rem;
    --line-height-text-small: 1.25rem;
    --paragraph-spacing-text-small: 0.625rem;

    /* Text / XS (12px / 16px / 8px) */
    --font-size-text-xs: 0.75rem;
    --line-height-text-xs: 1rem;
    --paragraph-spacing-text-xs: 0.5rem;

    /*
        ---
        ЕДИНАЯ ШКАЛА ТИПОГРАФИКИ (ТЗ от 19.10.2026, по макетам Figma)
        ---
        Токен = размер (--fs-*) + интерлиньяж (--lh-*). Значения — ссылки на шкалу выше, новых размеров нет.
        Размеры в rem: 1rem = 16px на 1920 (десктопный макет) и на 360 (телефонный), на остальных ширинах
        масштабируется вместе с корневым шрифтом (base/general.css, html { font-size: …vw }).
        Начертания: 400 — текст, 500 — акцент, 600 — заголовки, кнопки, меню; 700 — только <strong> в тексте.
        Ниже :root — значения для планшета (≤1024) и телефона (≤480).
    */

    --fs-hero: var(--font-size-h1);          --lh-hero: var(--line-height-h1);            /* 48/56 — только первый экран главной */
    --fs-h1: var(--font-size-h2);            --lh-h1: var(--line-height-h2);              /* 40/48 — H1 страницы */
    --fs-h2: var(--font-size-h2);            --lh-h2: var(--line-height-h2);              /* 40/48 — заголовок секции */
    --fs-h2-content: var(--font-size-h3);    --lh-h2-content: var(--line-height-h3);      /* 36/44 — заголовок внутри текста */
    --fs-h3: var(--font-size-title-1);       --lh-h3: var(--line-height-title-1);         /* 24/32 — подзаголовки колонок, ключевые цифры */
    --fs-card: var(--font-size-title-2);     --lh-card: var(--line-height-title-2);       /* 22/30 — заголовок большой карточки */
    --fs-card-sm: var(--font-size-title-3);  --lh-card-sm: var(--line-height-title-3);    /* 20/28 — малая карточка, шаг, вопрос FAQ */
    --fs-lead: var(--font-size-text-large);  --lh-lead: var(--line-height-text-large);    /* 18/26 — лид, длинный текст */
    --fs-body: var(--font-size-text-base);   --lh-body: var(--line-height-text-base);     /* 16/24 — обычный текст */
    --fs-small: var(--font-size-text-small); --lh-small: var(--line-height-text-small);   /* 14/20 — подписи, метки */
    --fs-button: var(--font-size-text-base); --lh-button: var(--line-height-text-base);   /* 16/24 · 600 — кнопки, меню */

    /*
        ---
        КНОПКИ: два размера для всего сайта (ТЗ «направления — единая стилистика», 20.10.2026)
        ---
        L — 56: первые экраны страниц (кроме главной), CTA-блоки, отправка форм.
        M — 48: кнопки внутри карточек и блоков, первый экран главной.
        Высота задаётся min-height при padding-block: 0 и box-sizing: border-box — рамка обводной
        кнопки входит в высоту (48 и 56, а не 49 и 55). Шрифт — --fs-button/--lh-button, 600.
        Текст на цветной кнопке белый; исключение — светлые фирменные цвета (золотая Convia — тёмный).
    */
    --btn-l-h: 3.5rem;   --btn-l-px: 2rem;     /* 56, отступы 16 / 32 */
    --btn-m-h: 3rem;     --btn-m-px: 1.5rem;   /* 48, отступы 12 / 24 */
    --btn-gap: 1.5rem;                         /* две кнопки рядом — 24, на телефоне друг под другом — 12 */
    --btn-icon-gap: 0.5rem;                    /* иконка-стрелка 16–20 от текста — 8 */
    --btn-border-light: #101828;               /* рамка обводной кнопки на светлом фоне */
    --btn-border-dark: rgba(255, 255, 255, 0.35); /* … на тёмном */

    /*
        ---
        ОТСТУПЫ БЛОКОВ (ТЗ «Единая стилистика блоков на всех страницах», 20.10.2026)
        ---
        Эталон — главная и каталог (сверены с Figma). Значения в px макета 1920 / 360, в CSS — rem (px ÷ 16).
        Ниже :root — планшет (≤1024, как на главной) и телефон (≤480).
    */
    --section-gap: 7.5rem;        /* 120 — между секциями верхнего уровня (H2 40/48) */
    --title-gap: 4.75rem;         /* 76 — от H2 секции до её контента */
    --title-gap-lead: 1rem;       /* 16 — от H2 до подзаголовка/лида */
    --lead-gap: 3rem;             /* 48 — от лида до контента секции */
    --content-gap: 4rem;          /* 64 — перед H2 36/44 внутри текстовых страниц */
    --content-title-gap: 1.5rem;  /* 24 — от H2 36/44 до его текста (подзаголовки внутри текста) */
    --text-title-gap: 1.25rem;    /* 20 — от H2 секции до текста в текстовых блоках, как «О компании» на главной */
    --grid-gap: 1.5rem;           /* 24 — раздельные карточки в сетке */
    --grid-gap-joined: 2px;       /* 2 — «мозаика» из сомкнутых плиток */
    --card-pad: 2.5rem;           /* 40 — карточки шире 420 */
    --card-pad-s: 1.875rem;       /* 30 — узкие карточки ≤ 420 */
    --panel-pad: 3.5rem;          /* 56 — тёмные CTA-блоки и большие панели с формой */
    --accent-line: 4px;           /* 4 — цветная полоса сверху карточки */
    --crumbs-gap: 1.5rem;         /* 24 — от хлебных крошек до H1 / hero */
    --h1-gap: 3.5rem;             /* 56 — от H1 до первого блока, как в каталоге */

    /*
        --- 
        АНИМАЦИИ 
        ---
    */

    --transition-time: 0.1s;
    --transition-time-slider: 0.25s;
    --transition-time-card: 0.35s;
}

/* планшет: H1 и заголовки секций — 32/40, как .title на остальных шаблонах (base/<раздел>/responsive.css) */
@media (max-width: 1024px) {
    :root {
        --fs-h1: var(--font-size-h4);  --lh-h1: var(--line-height-h4);
        --fs-h2: var(--font-size-h4);  --lh-h2: var(--line-height-h4);
        /* отступы блоков — как на главной (base/index/responsive.css) */
        --section-gap: 5rem;          /* 80 */
        --title-gap: 2.5rem;          /* 40 */
        --text-title-gap: 1rem;       /* 16 */
        --lead-gap: 2.5rem;
        --content-gap: 3rem;
        --card-pad: 1.875rem;
        --panel-pad: 2.5rem;
        --h1-gap: 2.5rem;             /* 40 — как в каталоге */
    }
}

/* телефон: значения мобильного макета 360 px (1rem = 16px на 360, на 390 — в 1,085 раза крупнее) */
@media (max-width: 480px) {
    :root {
        --fs-hero: var(--font-size-title-1);        --lh-hero: var(--line-height-title-1);          /* 24/32 */
        --fs-h1: var(--font-size-h4);               --lh-h1: var(--line-height-h4);                 /* 32/40 */
        --fs-h2: var(--font-size-h4);               --lh-h2: var(--line-height-h4);                 /* 32/40 */
        --fs-h2-content: var(--font-size-title-1);  --lh-h2-content: var(--line-height-title-1);    /* 24/32 */
        --fs-card: var(--font-size-title-3);        --lh-card: var(--line-height-title-3);          /* 20/28 */
        --fs-card-sm: var(--font-size-text-large);  --lh-card-sm: var(--line-height-text-large);    /* 18/26 */
        --btn-gap: 0.75rem;
        /* отступы блоков — мобильный макет 360 */
        --section-gap: 3.5rem;        /* 56 */
        --title-gap: 2.5rem;          /* 40 */
        --title-gap-lead: 0.75rem;    /* 12 */
        --lead-gap: 2rem;             /* 32 */
        --content-gap: 2.5rem;        /* 40 */
        --content-title-gap: 1rem;    /* 16 */
        --text-title-gap: 0.75rem;    /* 12 */
        --grid-gap: 1rem;             /* 16 */
        --card-pad: 1.25rem;          /* 20 */
        --card-pad-s: 1.25rem;        /* 20 */
        --panel-pad: 1.5rem;          /* 24 */
        --crumbs-gap: 1rem;           /* 16 */
        --h1-gap: 1.25rem;            /* 20 — как в каталоге */
    }
}
/* End */


/* Start:/local/templates/telsis/styles/base/brands/responsive.css?17930909496974*/
.header__menu-wrapper { display: none; }

@media(max-width: 1024px) {
    .header__menu-wrapper { display: inline-block; }
    .catalog-popup__container { max-width: 42.5rem; }
    .title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }

    .header__bottom--fixed .header__bottom-container { padding: 1rem 1.25rem; }
    .header { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .header__bottom { justify-content: space-between; }
    .header__container { padding: 0 1.25rem; gap: 1.25rem; }
    
    .catalog-popup__header, .catalog-popup__body { padding: 1.875rem 1.25rem; }
    .catalog-popup__grid { gap: 1.25rem 1rem; }
    .catalog-popup__title { font-size: var(--font-size-title-2); line-height: var(--line-height-title-2); margin-bottom: 1rem; }
    .brands-section__title { font-size: var(--font-size-title-2); line-height: var(--line-height-title-2); }
    .catalog-popup__link.catalog-popup__category-title { font-size: var(--font-size-text-base); line-height: var(--line-height-text-base); }
    .catalog-popup__link { font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); }
    .brands__arrow { width: 2.75rem; height: 2.75rem; }
    .brands-section__slider { margin-bottom: 1rem;}
    .brands-section__item { padding: 1.25rem; }

    .header__menu-btn { display: flex; }
    .header__nav-list { display: none; }

    .container { padding: 0 1.25rem; }

    .breadcrumbs { margin-top: 1.25rem; margin-bottom: 1rem; font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); }

    .footer__container { padding-top: 1.875rem; padding-left: 1.25rem; padding-right: 1.25rem; }
    .footer__main { flex-direction: column; gap: 1.875rem; margin-bottom: 1.875rem; }
    .footer__title { font-size: var(--font-size-text-large); line-height: var(--line-height-text-large); margin-bottom: 0.75rem; }
    .footer__list { gap: 0.5rem; }
    .footer__social { display: none; }
    .footer__menu { grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: 1.875rem; }
    .footer__bottom { display: flex; padding-top: 1.25rem; padding-bottom: 1.25rem; gap: 0.5rem; }
    .footer__copyright { font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); }
    .footer__legal { gap: 1.25rem; }
    .footer__legal-link { font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); }
    .footer__link { white-space: unset; }

    .footer__info { flex-direction: column; }
    .footer__social--tablet { display: flex; }

    .icon-32 { height: 1.5rem; width: 1.5rem; }

    .modal__overlay { padding: 0 20px; }
    .modal__form-content {
        flex-direction: column;
    }

    .modal__main { padding: 1.875rem 1.25rem; }
    .modal__form-content { gap: 1.5rem; }
    .modal__title { font-size: var(--font-size-title-1); }
    .modal__subtitle { margin-bottom: 1.5rem; font-size: var(--font-size-text-base); }
    .form-modal__grid { gap: 1rem; row-gap: 1.5rem; }
    .modal__sidebar { flex-direction: row; width: 100%; }
    .benefits-block__item { padding: 1.875rem 1.25rem; }
    .benefits-block__text { font-size: var(--font-size-text-small); line-height: var(--line-height-text-small); }
    .form-modal__footer { flex-direction: row; align-items: center; justify-content: space-between; }
    .form-modal__submit { width: auto; padding: 0.625rem 1.7813rem; }
    .form-modal__checkbox-text { font-size: var(--font-size-text-base); }
}

@media(max-width: 480px) {
    .title::after { display: none; }

    .header__bottom--fixed .header__bottom-container { padding: 1rem 1rem; }
    .header__bottom { gap: 2.375rem; }
    .header__top { display: none; }
    .header__logo { display: block; }
    .header__actions { display: none; }
    .header__menu-btn--mobile { flex-shrink: 0; display: flex; }

    .catalog-popup.is-active { display: none; }
    .container { padding: 0 1rem; }
    
    .article__wrapper { gap: 3.5rem; }
    .mobile-back { display: flex; margin-top: 1.25rem; }
    /* крошки на телефоне переносятся (общее правило в components/breadcrumbs.css), а не прокручиваются вбок */
    .breadcrumbs {
        margin-top: 1.5rem;
    }

    .back-btn { margin-bottom: 0; }

    .breadcrumbs > svg {
        flex-shrink: 0;
    }

    .sidebar { flex-direction: column; }
    
    .footer__brand { flex-direction: row; align-items: center; }
    .footer__social { display: flex; }
    .footer__menu { grid-template-columns: 1fr; }
    .footer__main { gap: 2.3125rem; }
    .footer__title { opacity: 1; font-size: var(--font-size-text-base); line-height: var(--line-height-text-base); display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .footer__link { font-size: var(--font-size-text-base); line-height: var(--line-height-text-base); }
    .footer__menu { column-gap: 0; row-gap: 1.5rem; }
    .footer__social--tablet { display: none; }
    .footer__info { gap: 1.25rem; }
    .footer__legal { gap: 0.75rem; }
    .footer__arrow { display: block; }

    .footer__list {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height var(--transition-time-slider), opacity var(--transition-time-slider), padding var(--transition-time-slider);
        padding-bottom: 0;
    }

    .icon-32 { flex-shrink: 0; }
    .modal__overlay { padding: unset; align-items: start; }
    .modal__title { font-size: var(--font-size-title-2); }
    .modal__subtitle { font-size: var(--font-size-text-small); }
    .modal__close { top: 1.25rem; right: 1rem; }
    .modal__main { padding: 1.25rem 1rem; }
    .form-modal__grid { grid-template-columns: 1fr; }
    .form-modal__field--full, .form-modal__policy { grid-column: unset; }
    .form-modal__footer { flex-direction: column; }
    .form-modal__submit { width: 100%; }
    .modal__sidebar { flex-direction: column; }
    .benefits-block__item { padding: 1.25rem; flex-direction: row; justify-content: flex-start; gap: 1rem; }
}

@media (max-width: 1024px) {
    .brands__layout {
        flex-direction: column;
    }

    .brands__sidebar {
        flex: none;
        width: 100%;
    }

    .brands__filter-toggle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1rem;
        border: 1px solid #ddd;
        background: #fff;
        cursor: pointer;
        font: inherit;
    }

    .brands__filter-toggle svg {
        transition: transform .25s;
    }

    .brands__filter-group {
        display: none;
        border: 1px solid #ddd;
        border-top: none;
    }

    .brands__sidebar.is-open .brands__filter-group {
        display: flex;
    }

    .brands__sidebar.is-open .brands__filter-toggle svg {
        transform: rotate(180deg);
    }
}

@media (max-width: 480px) {
    .mobile-back { display: flex; }
}
/* End */
/* /local/templates/telsis/styles/base/reset.css?1793090949631 */
/* /local/templates/telsis/styles/base/general.css?17930909492634 */
/* /local/templates/telsis/styles/components/tablet-menu.css?1793090949454 */
/* /local/templates/telsis/styles/components/header.css?17930909496259 */
/* /local/templates/telsis/styles/components/footer.css?17930909493471 */
/* /local/templates/telsis/styles/components/modal.css?17930909494938 */
/* /local/templates/telsis/styles/components/popup-catalog.css?17930909494525 */
/* /local/templates/telsis/styles/components/mobile-menu.css?17930909497595 */
/* /local/templates/telsis/styles/components/ui.css?17930909493258 */
/* /local/templates/telsis/styles/components/breadcrumbs.css?17930909492114 */
/* /local/templates/telsis/styles/components/global/cta-banner.css?17930909494327 */
/* /local/templates/telsis/styles/components/global/page-hero.css?179309094910204 */
/* /local/templates/telsis/styles/components/global/solution-card.css?17930909496274 */
/* /local/templates/telsis/styles/components/global/bg-pattern.css?17930909491092 */
/* /local/templates/telsis/styles/components/global/seo-text.css?17930909493480 */
/* /local/templates/telsis/styles/components/global/direction-card.css?17930909492300 */
/* /local/templates/telsis/styles/components/global/cookie-banner.css?17930909492696 */
/* /local/templates/telsis/components/bitrix/menu/tablet/style.min.css?1793090949490 */
/* /local/templates/telsis/components/bitrix/menu/desktop/style.min.css?1793090949490 */
/* /local/templates/telsis/components/bitrix/news.list/footer_list/style.css?1793090949150 */
/* /local/templates/telsis/components/bitrix/menu/mobile/style.min.css?1793090949490 */
/* /local/templates/telsis/styles.css?179309094913834 */
/* /local/templates/telsis/styles/base/brands/responsive.css?17930909496974 */