/* Start:/local/templates/telsis/styles/components/kontakty/page.css?179311618424186*/
/* ======================================================================
   СТРАНИЦА «КОНТАКТЫ» (/contacts/), ТЗ от 16.10.2026, макет «вариант А»
   Классы с префиксом contacts-. Отступы и сетка — в px, как в макете на 1440 px.
   Размеры текста — только токены шкалы типографики (styles.css, --fs-* / --lh-*, ТЗ от 19.10.2026):
   в rem, масштабируются с корневым шрифтом и на телефоне переключаются на мобильные значения.
   Контейнер и заголовок — общие классы сайта (.container, .title).
   ====================================================================== */

.contacts-page {
    --c-dark: #101828;
    --c-orange: #FF7F1F;
    --c-orange-hover: #FF6900;
    --c-line: #D0D5DD;
    --c-line-soft: #EAECF0;
    --c-muted: #667085;
    --c-tint: #FFF7F0;
    margin-top: var(--crumbs-gap);
    padding-bottom: 6rem;
    color: var(--c-dark);
    font-family: Inter, system-ui, sans-serif;
}

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

.contacts-page a {
    color: inherit;
    text-decoration: none;
}

.contacts-page__title {
    margin-bottom: var(--h1-gap);
}

.contacts-nowrap {
    white-space: nowrap;
}

/* ---------- кнопки ---------- */

/* кнопка M (styles.css, --btn-m-*): 48 вместе с рамкой, отступы 12 / 24 */
.contacts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: var(--btn-icon-gap);
    min-height: var(--btn-m-h);
    padding: 0 var(--btn-m-px);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.contacts-btn svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.contacts-page .contacts-btn--primary {
    background: var(--c-orange);
    color: #FFFFFF;
}

.contacts-page .contacts-btn--primary:hover {
    background: var(--c-orange-hover);
}

/* вторичная на светлом фоне — светло-оранжевая, как вторая кнопка в шапке (.header__cta) */
.contacts-page .contacts-btn--outline {
    background: var(--color-secondary);
    color: var(--color-secondary-text);
}

.contacts-page .contacts-btn--outline:hover {
    background: var(--color-secondary-hover);
    color: var(--color-secondary-text-hover);
}

.contacts-page .contacts-btn--outline:active {
    background: var(--color-secondary-active);
}

/* ---------- 2.2. Сетка контактов ---------- */

/* отступы блоков — токены styles.css (ТЗ «Единая стилистика блоков», 20.10.2026):
   секции --section-gap, заголовок → контент --title-gap, карточки --card-pad, сетки --grid-gap */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(7.5rem, auto);
    gap: var(--grid-gap);
}

.contacts-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: var(--card-pad);
    background: #FFFFFF;
    color: var(--c-dark);
}

.contacts-tile--link {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contacts-tile--link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.contacts-tile--phone { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.contacts-tile--email { grid-column: 8 / span 5; grid-row: 1; }
.contacts-tile--hours { grid-column: 8 / span 5; grid-row: 2; }
.contacts-tile--map { grid-column: 1 / span 8; grid-row: 3 / span 3; }
.contacts-tile--address { grid-column: 9 / span 4; grid-row: 3 / span 2; }
.contacts-tile--vk { grid-column: 9 / span 4; grid-row: 5; }

.contacts-tile__label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
}

.contacts-tile__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.contacts-tile__value {
    min-width: 0;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contacts-tile__aside {
    flex: none;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
    padding-bottom: 0.375rem;
}

/* телефон: тёмная плитка с фирменным узором (.bg-pattern-dark, styles/components/global/bg-pattern.css);
   лучи — у правого края, на высоту плитки: номер и подпись слева остаются на чистом фоне */
.contacts-page .contacts-tile--phone {
    --bg-pattern-position: right top;
    --bg-pattern-size: auto 100%;
    color: #FFFFFF;
}

.contacts-tile--phone .contacts-tile__label {
    color: #98A2B3;
}

.contacts-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.contacts-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contacts-tile__phone {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.contacts-tile__note {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #D0D5DD;
}

/* e-mail: оранжевая плитка */
.contacts-page .contacts-tile--email {
    background: var(--c-orange);
    color: #FFFFFF;
}

.contacts-tile--email .contacts-tile__label {
    color: rgba(255, 255, 255, 0.85);
}

.contacts-tile__arrow {
    display: flex;
    flex: none;
    padding-bottom: 0.5rem;
}

.contacts-tile__arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* карта */
.contacts-tile--map {
    position: relative;
    min-height: 27.5rem;
    padding: 0;
    overflow: hidden;
    background: #E9EBEF;
}

.contacts-map {
    position: absolute;
    inset: 0;
}

.contacts-map__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: center;
    color: var(--c-muted);
}

.contacts-map.is-ready .contacts-map__fallback {
    display: none;
}

/* без ключа JS API — виджет-iframe (kontakty/view.php): неподвижная карта, наша метка по центру, клик — Яндекс.Карты */
.contacts-map--widget {
    display: block;
}

.contacts-map__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    filter: grayscale(1) brightness(1.04) contrast(0.92); /* та же «светлая схема», что у карты JS API */
}

.contacts-map__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

/* «светлая схема»: подложка карты без цвета, метка офиса — единственное яркое пятно */
.contacts-map [class*="ground-pane"] {
    filter: grayscale(1) brightness(1.04) contrast(0.92);
}

/* без «Как добраться», «Доехать на такси», «Создать свою карту»; копирайт и условия Яндекса остаются */
.contacts-map [class*="copyrights-promo"],
.contacts-map [class*="gototaxi"],
.contacts-map [class*="gotoymaps"] {
    display: none !important;
}

.contacts-pin {
    position: relative;
    width: 0;
    height: 0;
}

.contacts-pin__dot {
    position: absolute;
    left: -0.5625rem;
    top: -0.5625rem;
    width: 1.125rem;
    height: 1.125rem;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #FF7F1F;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.35);
}

.contacts-pin__pulse {
    position: absolute;
    left: -1.5rem;
    top: -1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 127, 31, 0.35);
    animation: contacts-pulse 2s ease-out infinite;
}

.contacts-pin__label {
    position: absolute;
    left: 1rem;
    top: -0.875rem;
    padding: 0.25rem 0.5rem;
    background: #101828;
    color: #FFFFFF;
    font-family: var(--font-family); /* внутри карты — шрифт Яндекса, наследовать нельзя */
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@keyframes contacts-pulse {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .contacts-pin__pulse { animation: none; opacity: 0.5; }
    .contacts-tile--link { transition: none; }
}

/* адрес */
.contacts-tile__address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contacts-tile__street {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contacts-tile__address-rest {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-muted);
}

.contacts-tile__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.contacts-tile__buttons .contacts-btn {
    width: 100%;
}

/* ВКонтакте */
.contacts-page .contacts-tile--vk {
    flex-direction: row;
    align-items: center;
}

.contacts-tile__vk-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.contacts-tile__vk-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--c-dark);
    color: #FFFFFF;
}

/* ---------- общие секции ---------- */

.contacts-section {
    margin-top: var(--section-gap);
}

.contacts-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: var(--title-gap);
}

.contacts-section__hint {
    max-width: 22.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-muted);
    text-align: right;
}

/* ---------- 2.3. По какому вопросу? ---------- */

.contacts-topics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap-joined);
    border: 1px solid var(--c-line);
    background: var(--c-line);
}

.contacts-page .contacts-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 13.75rem;
    width: 100%;
    padding: var(--card-pad);
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    color: var(--c-dark);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s;
}

.contacts-page .contacts-topic:hover {
    background: var(--c-tint);
}

.contacts-topic__arrow {
    position: absolute;
    top: var(--card-pad);
    right: var(--card-pad);
    display: flex;
    color: var(--c-dark);
    transition: color 0.25s;
}

.contacts-topic:hover .contacts-topic__arrow {
    color: var(--c-orange);
}

.contacts-topic__title {
    padding-right: 2rem;
    font-size: var(--fs-card-sm);
    line-height: var(--lh-card-sm);
    font-weight: 600;
}

.contacts-topic__desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-muted);
}

/* ---------- 2.4. Напишите нам ---------- */

.contacts-write {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    background: #FFFFFF;
    scroll-margin-top: 7.5rem;
}

.contacts-write__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--panel-pad);
    color: #FFFFFF;
    /* фон — фирменный узор (.bg-pattern-dark); лучи — внизу справа, под заголовком, текстом и контактами чистый фон */
    --bg-pattern-position: right bottom;
    --bg-pattern-size: 100% auto;
}

.contacts-write__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
}

.contacts-write__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #D0D5DD;
}

.contacts-write__contacts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.contacts-write__contacts li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.contacts-write__contacts li::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--c-orange);
}

.contacts-write__contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    min-width: 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contacts-page .contacts-write__contacts a:hover {
    color: var(--c-orange);
}

.contacts-write__body {
    padding: var(--panel-pad);
}

.contacts-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

.contacts-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.contacts-form__field--wide,
.contacts-form__footer {
    grid-column: 1 / -1;
}

.contacts-form__label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 500;
    color: #344054;
}

.contacts-form__input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--c-line);
    border-radius: 0;
    background: #FFFFFF;
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-dark);
    transition: border-color 0.15s;
}

.contacts-form__input::placeholder {
    color: #98A2B3;
}

.contacts-form__input:focus {
    outline: none;
    border-color: var(--c-orange);
}

.contacts-form__input.is-invalid {
    border-color: #E7000B;
}

.contacts-form__textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.contacts-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.contacts-form__policy .ui-checkbox__text {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.contacts-form__submit {
    flex: none;
    min-width: 13.75rem;
}

.contacts-form__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.contacts-form__status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contacts-form__status[hidden] {
    display: none;
}

.contacts-form__status-title {
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
}

.contacts-form__status-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-muted);
}

/* ---------- 2.5. Реквизиты ---------- */

.contacts-req {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--grid-gap);
}

.contacts-req--no-file {
    grid-template-columns: minmax(0, 1fr);
}

.contacts-req__card {
    min-width: 0;
    padding: var(--card-pad);
    background: #FFFFFF;
}

.contacts-req__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.contacts-req__org {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.contacts-req__label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
}

.contacts-req__name {
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
}

.contacts-page .contacts-req__copy {
    flex: none;
    min-width: 14.375rem;
}

.contacts-page .contacts-req__copy.is-copied {
    background: var(--c-dark);
    border-color: var(--c-dark);
    color: #FFFFFF;
}

.contacts-req__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--c-line-soft);
    border-left: 1px solid var(--c-line-soft);
}

.contacts-req__cell {
    min-width: 0;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
}

.contacts-req__cell--wide {
    grid-column: 1 / -1;
}

.contacts-req__cell dt {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
}

.contacts-req__cell dd {
    margin: 0.25rem 0 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contacts-req__cell--wide dd {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 500;
}

/* скачать карточку предприятия (есть файл): светлая, как карточка реквизитов слева; фирменный узор — только
   на карточке телефона и панели «Напишите нам» */
.contacts-page .contacts-req__file {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: var(--card-pad);
    background: #FFFFFF;
    color: var(--c-dark);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contacts-page .contacts-req__file:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.contacts-req__file-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.contacts-req__file-icon {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 2.75rem;
    height: 3.5rem;
    padding-bottom: 0.5rem;
    border: 2px solid var(--c-dark);
}

.contacts-req__file-icon span {
    font-size: 0.6875rem;
    line-height: 0.875rem;
    font-weight: 600;
    color: var(--c-orange);
}

.contacts-req__file-size {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
}

.contacts-req__file-title {
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
}

.contacts-req__file-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-muted);
}

.contacts-req__file-btn {
    margin-top: auto;
    width: 100%;
}

/* ======================================================================
   АДАПТИВ
   ====================================================================== */

@media (max-width: 1024px) {
    .contacts-tile--phone { grid-column: 1 / -1; grid-row: auto; }
    .contacts-tile--email { grid-column: 1 / span 6; grid-row: auto; }
    .contacts-tile--hours { grid-column: 7 / span 6; grid-row: auto; }
    .contacts-tile--map { grid-column: 1 / -1; grid-row: auto; min-height: 25rem; }
    .contacts-tile--address { grid-column: 1 / span 6; grid-row: auto; }
    .contacts-tile--vk { grid-column: 7 / span 6; grid-row: auto; }

    .contacts-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contacts-page .contacts-topic { min-height: 11.25rem; }

    .contacts-write { grid-template-columns: minmax(0, 1fr); }
    /* панель во всю ширину: текст тянется вправо — узор меньше, в правом нижнем углу справа от контактов */
    .contacts-write__panel { --bg-pattern-size: auto 50%; }

    .contacts-req { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .contacts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contacts-tile--phone,
    .contacts-tile--email,
    .contacts-tile--map,
    .contacts-tile--address { grid-column: 1 / -1; }
    .contacts-tile--hours { grid-column: 1; }
    .contacts-tile--vk { grid-column: 2; }

    /* порядок: телефон → e-mail → режим и VK в ряд → карта → адрес */
    .contacts-tile--phone { order: 1; }
    .contacts-tile--email { order: 2; }
    .contacts-tile--hours { order: 3; }
    .contacts-tile--vk { order: 4; }
    .contacts-tile--map { order: 5; }
    .contacts-tile--address { order: 6; }

    .contacts-tile--hours .contacts-tile__row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .contacts-tile__aside { padding-bottom: 0; }
    .contacts-tile--map { min-height: 22.5rem; }

    .contacts-section__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .contacts-section__hint { text-align: left; }
}

@media (max-width: 480px) {
    .contacts-page { padding-bottom: 4rem; }

    .contacts-grid { grid-auto-rows: minmax(6.25rem, auto); }
    .contacts-tile { gap: 0.75rem; }
    .contacts-page .contacts-tile--vk { flex-direction: column; align-items: flex-start; justify-content: space-between; }
    .contacts-tile__vk-logo { width: 2.75rem; height: 2.75rem; }
    .contacts-tile--map { min-height: 15rem; }
    /* узкая плитка: номер почти во всю ширину — узор ниже, лучи над номером справа */
    .contacts-page .contacts-tile--phone { --bg-pattern-size: auto 75%; }
    .contacts-write__panel { --bg-pattern-size: auto 40%; }
    .contacts-btn--open-map { display: none; }

    .contacts-page .contacts-topic { min-height: 7.5rem; }
    .contacts-topic__title { padding-right: 1.5rem; }
    .contacts-topic__desc { display: none; }

    .contacts-form { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .contacts-form__footer { flex-direction: column; align-items: stretch; gap: 1rem; }
    .contacts-form__submit { width: 100%; min-width: 0; }

    .contacts-req__card { display: flex; flex-direction: column; }
    .contacts-req__head { margin-bottom: 1rem; }
    /* кнопка копирования — под реквизитами и карточкой скачивания */
    .contacts-req__head .contacts-req__copy { display: none; }
    .contacts-req__copy--mobile { display: flex; }
    /* ИНН, КПП, ОГРН — в столбик, по ячейке на строку: в три колонки номера не помещались в ячейки;
       номер целиком в одну строку, юридический адрес переносится по словам */
    .contacts-req__grid { grid-template-columns: minmax(0, 1fr); }
    .contacts-req__cell { padding: 0.75rem 1rem; }
    .contacts-req__cell dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .contacts-req__cell--wide dd { white-space: normal; overflow-wrap: break-word; }
}

@media (min-width: 481px) {
    .contacts-req__copy--mobile { display: none; }
}

/* якорь #rekvizity (сюда ведёт старый адрес /company/requisites/): не прятать заголовок под шапкой */
.contacts-section--anchor {
    scroll-margin-top: 7.5rem;
}

/* ======================================================================
   ТИПОГРАФИКА НА ТЕЛЕФОНЕ
   Размеры текста — токены шкалы (styles.css, --fs-* / --lh-*): на телефоне они сами переключаются
   на значения мобильного макета и масштабируются с корневым шрифтом. Здесь — только места,
   где мобильное значение токена не помещается в узкую плитку.
   ====================================================================== */

@media (max-width: 480px) {
    /* «+7 (495) 414-13-43» одной строкой */
    .contacts-tile__phone { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* End */


/* Start:/local/templates/telsis/styles/components/company/page.css?179311618420455*/
/* ======================================================================
   СТРАНИЦА «О КОМПАНИИ» (/company/), ТЗ от 19.10.2026, макет «вариант А»
   Подключается после kontakty/page.css: переменные, кнопки (.contacts-btn), секции (.contacts-section)
   и плитки со стрелкой (.contacts-topic) — оттуда. Здесь только своё, классы с префиксом company-.
   Отступы и сетка — в px, как в макете; размеры текста — только токены шкалы типографики
   (styles.css, --fs-* / --lh-*, ТЗ от 19.10.2026).
   ====================================================================== */

.company-page {
    --c-gray-text: #475467;
    --c-light-text: #D0D5DD;
    --c-label-dark: #98A2B3;
}

/* ---------- заголовки: H1 44 px и H2 32 px с оранжевым квадратом ---------- */

.company-page .title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    padding-right: 0;
}

.company-page .title::after {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.75rem;
    vertical-align: top;
    margin-top: 0.25rem;
}

.company-page .company-page__title {
    margin-bottom: var(--h1-gap);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: -0.5px;
}

.company-page .company-page__title::after {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.375rem;
}

.company-page .company-more {
    flex: none;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: #C2410C;
}

.company-page .company-more:hover {
    color: var(--c-orange);
}

/* ---------- 2.2. Верхняя сетка ---------- */

.company-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(9.375rem, auto);
    gap: var(--grid-gap);
}

.company-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    margin: 0;
    padding: var(--card-pad);
    background: #FFFFFF;
    color: var(--c-dark);
}

.company-card__label {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--c-muted);
}

/* главная: тёмная. С фото (--photo) — фото на всю карточку, затемнение слева направо под текстом;
   без фото — оранжевое радиальное свечение */
.company-card--main {
    position: relative;
    grid-column: span 8;
    grid-row: span 2;
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
    overflow: hidden;
    background: radial-gradient(circle at 78% 55%, rgba(255, 127, 31, 0.45) 0%, rgba(255, 127, 31, 0.16) 28%, rgba(16, 24, 40, 0) 55%), var(--c-dark);
    color: #FFFFFF;
}

.company-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    flex: 1 1 60%;
    min-width: 0;
}

/* фото баннера (images/company/about-terminal.webp, кадр обрезан слева — без логотипов на контейнерах): портальные краны
   и контейнеры справа, по высоте — линия горизонта с кранами; текст слева на затемнении.
   Затемнение — как в первом экране проекта (styles/components/global/page-hero.css): сплошное под текстом слева,
   к правому краю сходит на нет; снизу — лёгкое, под кнопками */
.company-card--photo {
    background: var(--c-dark);
}

.company-card__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* фото — в правых 65% карточки (под текстом слева и так почти сплошное затемнение): кадр не растягивается на всю
   ширину и не увеличивается, краны остаются справа; левый край фото плавно уходит в фон */
.company-card__photo img {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 65%;
    height: 100%;
    object-fit: cover;
    object-position: var(--company-photo-position, 60% 50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.company-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 24, 40, 0.95) 0%, rgba(16, 24, 40, 0.88) 40%, rgba(16, 24, 40, 0.45) 62%, rgba(16, 24, 40, 0) 80%),
                linear-gradient(0deg, rgba(16, 24, 40, 0.5) 0%, rgba(16, 24, 40, 0) 40%);
}

/* текст — в левой части, справа остаётся место для кранов на фото */
.company-card--photo .company-card__body {
    flex: 0 1 62%;
}

.company-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* вторая кнопка на тёмном — с обводкой */
.company-page .company-btn--ghost {
    background: transparent;
    border-color: var(--btn-border-dark);
    color: #FFFFFF;
}

.company-page .company-btn--ghost:hover {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

/* иконки карточек «Выполнено проектов», «География», «Логистика», «Поддержка» — 32, оранжевая обводка, над подписью */
.company-card__icon {
    display: block;
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--c-orange);
}

.company-card--icon {
    justify-content: flex-start;
}

.company-card--icon .company-card__stat {
    margin-top: auto;
}

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

.company-card--main .company-card__label {
    color: var(--c-label-dark);
}

.company-card__lead {
    max-width: 42.5rem;
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: 600;
    letter-spacing: -0.8px;
}

.company-card__text {
    max-width: 38.75rem;
    margin: 1.25rem 0 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--c-light-text);
}

/* цифры */
.company-card--stat {
    grid-column: span 4;
}

.company-card--years {
    background: var(--c-orange);
    color: #FFFFFF;
}

.company-card--years .company-card__label,
.company-card--years .company-card__note {
    color: #FFF1E6;
}

.company-card__stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.company-card__number {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    letter-spacing: -0.0938rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.company-card__note {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-gray-text);
}

/* география, логистика, поддержка: на десктопе — три карточки в ряд */
.company-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
}

.company-fact__value {
    margin: 0;
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* ---------- 2.3. Чем занимаемся: плитки «По какому вопросу?» с номером ---------- */

.company-page .company-topic {
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 15rem;
}

.company-topic__num {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 600;
    color: var(--c-orange);
}

.company-topic__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.company-topic .contacts-topic__title {
    padding-right: 0;
    font-size: var(--fs-card);
    line-height: var(--lh-card);
}

.company-topic .contacts-topic__desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-gray-text);
}

/* ---------- 2.4. История ---------- */

.company-section {
    scroll-margin-top: 7.5rem;
}

.company-history {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.company-history__item {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
    padding: var(--card-pad);
    border-top: var(--accent-line) solid var(--c-line);
    background: #FFFFFF;
}

/* полоса сверху — динамика: серый → светло-оранжевый → оранжевый */
.company-history__item--2 { border-top-color: #FFB98A; }

.company-history__item--3 {
    border-top-color: var(--c-orange);
    background: var(--c-dark);
    color: #FFFFFF;
}

.company-history__year {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 600;
    letter-spacing: -1px;
}

.company-history__item--3 .company-history__year {
    color: var(--c-orange);
}

.company-history__title {
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
}

.company-history__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-gray-text);
}

.company-history__item--3 .company-history__text {
    color: var(--c-light-text);
}

/* ---------- 2.5. Нам доверяют ---------- */

.company-clients {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "intro intro intro intro intro list list list list list list list"
        "action action action action action list list list list list list list";
    gap: 0 var(--grid-gap);
}

.company-clients__intro { grid-area: intro; padding-right: 1.5rem; }
.company-clients__list { grid-area: list; }
.company-clients__action { grid-area: action; padding-top: 1.5rem; }

.company-clients__text {
    margin: 1rem 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-gray-text);
}

.company-clients__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.company-clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 8.75rem;
    padding: var(--card-pad-s);
    background: #FFFFFF;
    font-size: var(--fs-card);
    line-height: var(--lh-card);
    font-weight: 600;
    color: #344054;
    text-align: center;
}

/* логотипы: высота ~40, в оттенках серого, при наведении — цветные */
.company-clients__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 2.5rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--transition-time-card), opacity var(--transition-time-card);
}

.company-clients__logo--square {
    height: 3.5rem;
}

.company-clients__item:hover .company-clients__logo {
    filter: none;
    opacity: 1;
}

/* ---------- 2.6. Экосистема группы компаний ---------- */

.company-eco__hint {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-gray-text);
}

/* все направления в один ряд: --eco-count — число карточек из инфоблока (шаблон news.list/company-ecosystem) */
.company-eco__grid {
    display: grid;
    grid-template-columns: repeat(var(--eco-count, 5), minmax(0, 1fr));
    gap: var(--grid-gap);
}

/* карточка — общий компонент направления (styles/components/global/direction-card.css), все четыре одинаковые */

/* ======================================================================
   АДАПТИВ
   ====================================================================== */

@media (max-width: 1024px) {
    /* верхняя сетка: главная на всю ширину, остальные пять — по 2 в ряд, последняя на всю ширину */
    .company-card--main { grid-column: 1 / -1; grid-row: auto; }
    .company-card--stat { grid-column: span 6; }
    .company-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .company-fact:last-child { grid-column: 1 / -1; }

    .company-page .company-topic { min-height: 12.5rem; }

    /* нам доверяют: текст и кнопка сверху, плитки снизу */
    .company-clients {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "intro" "action" "list";
    }
    .company-clients__intro { padding-right: 0; }
    .company-clients__action { padding: 1.5rem 0 1.75rem; }

    /* экосистема: по 2 в ряд (4 карточки — 2 × 2), нечётная последняя — на всю ширину; 5 карточек — 3 + 2 */
    .company-eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .company-page .company-eco__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .company-eco__grid[data-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .company-eco__grid[data-count="5"] .company-eco__card { grid-column: span 2; }
    .company-eco__grid[data-count="5"] .company-eco__card:nth-child(n+4) { grid-column: span 3; }

    /* финальный блок: кнопки под текстом */

}

@media (max-width: 768px) {

    .company-history { grid-template-columns: minmax(0, 1fr); }
    .company-history__item { gap: 0.75rem; }

    /* экосистема: 2 в ряд при любом числе карточек, нечётная последняя — на всю ширину */
    .company-eco__grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .company-eco__grid[data-count] .company-eco__card { grid-column: auto; }
    .company-eco__grid[data-count] .company-eco__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .company-page .title::after { width: 0.4375rem; height: 0.4375rem; margin-left: 0.625rem; margin-top: 0.1875rem; }
    .company-page .company-page__title::after { width: 0.5rem; height: 0.5rem; margin-top: 0.25rem; }

    /* верхняя сетка */
    .company-grid { grid-auto-rows: auto; }
    .company-card { gap: 0.875rem; }
    .company-card--main { gap: 1.125rem; }
    .company-card__text { margin-top: 0.875rem; }
    .company-card__stat { gap: 0.375rem; }

    /* баннер: иллюстрация под текстом, уменьшенная; свечение — за ней; кнопки на всю ширину */
    .company-card--main {
        flex-direction: column;
        background: radial-gradient(circle at 50% 85%, rgba(255, 127, 31, 0.45) 0%, rgba(255, 127, 31, 0.16) 28%, rgba(16, 24, 40, 0) 55%), var(--c-dark);
    }
    .company-card__body { gap: 1.125rem; }
    /* с фото: фото на фоне, затемнение на всю карточку, текст поверх */
    .company-card--photo { background: var(--c-dark); }
    .company-card--photo .company-card__body { flex-basis: auto; }
    .company-card__photo img { width: 100%; -webkit-mask-image: none; mask-image: none; }
    .company-card__photo::after {
        background: linear-gradient(0deg, rgba(16, 24, 40, 0.95) 0%, rgba(16, 24, 40, 0.85) 55%, rgba(16, 24, 40, 0.7) 100%);
    }
    .company-card__actions { flex-direction: column; gap: 0.75rem; }
    .company-card__actions .contacts-btn { width: 100%; }

    /* строки «подпись — значение»: иконка 20 слева от подписи */
    .company-fact__label { flex-direction: row; align-items: center; gap: 0.5rem; }
    .company-fact .company-card__icon { width: 1.25rem; height: 1.25rem; }

    /* география, логистика, поддержка — одна белая карточка-список «подпись слева — значение справа» */
    .company-facts { display: block; padding: 0.25rem var(--card-pad); background: #FFFFFF; }
    .company-page .company-fact {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.875rem 0;
        border-bottom: 1px solid var(--c-line-soft);
    }
    .company-page .company-fact:last-child { border-bottom: 0; }
    .company-fact .company-card__label { flex: none; }
    .company-fact__value { text-align: right; }

    /* чем занимаемся: список — номер слева, текст, стрелка справа */
    .company-topics { grid-template-columns: minmax(0, 1fr); }
    .company-page .company-topic {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.875rem;
        min-height: 0;
        padding-right: 3rem;
    }
    .company-topic__body { gap: 0.375rem; }
    .company-page .company-topic .contacts-topic__title { padding-right: 0; }
    .company-page .company-topic .contacts-topic__desc { display: block; }

    /* история: цветная полоса слева */
    .company-history__item { gap: 0.5rem; border-top: 0; border-left: var(--accent-line) solid var(--c-line); }
    .company-history__item--2 { border-left-color: #FFB98A; }
    .company-history__item--3 { border-left-color: var(--c-orange); }
    .company-history__title { margin-top: 0.125rem; }

    /* нам доверяют: 3 низких плитки в ряд, кнопка на всю ширину под ними */
    .company-clients { grid-template-areas: "intro" "list" "action"; }
    .company-clients__text { margin-top: 0.75rem; }
    /* две колонки, отступ карточки --card-pad (20); нечётная последняя — на всю ширину */
    .company-clients__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.125rem; }
    .company-clients__item { min-height: 4.5rem; }
    .company-clients__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .company-clients__action { padding: 0.75rem 0 0; }
    .company-clients__btn { width: 100%; justify-content: space-between; }

    /* экосистема: карточки в столбик */
    .company-eco__grid,
    .company-eco__grid[data-count] { grid-template-columns: minmax(0, 1fr); }
    .company-eco__grid[data-count] .company-eco__card,
    .company-eco__grid[data-count] .company-eco__card:last-child:nth-child(odd) { grid-column: auto; }

}

/* зона нажатия ссылок-текстов не меньше 44 px */
.company-page .company-more {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* ======================================================================
   ТИПОГРАФИКА НА ТЕЛЕФОНЕ
   Размеры текста — токены шкалы (styles.css, --fs-* / --lh-*), на телефоне они сами переключаются
   на значения мобильного макета. Здесь — только места, где по макету 390 нужен токен поменьше.
   ====================================================================== */

@media (max-width: 480px) {
    /* фраза главной карточки — как заголовок внутри текста (24/32), а не как H1 */
    .company-card__lead { font-size: var(--fs-h2-content); line-height: var(--lh-h2-content); }
    /* география, логистика, поддержка — строки списка «подпись — значение» */
    .company-fact__value { font-size: var(--fs-small); line-height: var(--lh-small); }
    /* плитки клиентов в две колонки — 18/26 (--fs-card-sm), 20/28 в ширину 124 не помещается */
    .company-clients__item { font-size: var(--fs-card-sm); line-height: var(--lh-card-sm); }
}

/* End */
/* /local/templates/telsis/styles/components/kontakty/page.css?179311618424186 */
/* /local/templates/telsis/styles/components/company/page.css?179311618420455 */